/* TabSail Channel visual system v1.0.0 - 2026-10-21
 * Light is the explicit default. Set data-theme="dark" on a theme container.
 * Values mirror tokens.json exactly. No framework or JavaScript required.
 * Fonts are bundled: load ../fonts/fonts.css before this stylesheet.
 * Geist / Geist Mono use verified wght 100-900; system fallbacks remain available.
 * Decorative borders are not input affordances. Use border-control for controls.
 */

:root {
  --ts-font-family-ui:
    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --ts-font-family-mono:
    "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", "PingFang SC",
    "Noto Sans SC", monospace;
  --ts-font-weight-regular: 400;
  --ts-font-weight-medium: 500;
  --ts-font-weight-semibold: 600;
  --ts-font-weight-bold: 700;
  --ts-font-size-12: 0.75rem;
  --ts-font-size-13: 0.8125rem;
  --ts-font-size-14: 0.875rem;
  --ts-font-size-16: 1rem;
  --ts-font-size-18: 1.125rem;
  --ts-font-size-20: 1.25rem;
  --ts-font-size-24: 1.5rem;
  --ts-font-size-32: 2rem;
  --ts-font-size-40: 2.5rem;
  --ts-font-size-48: 3rem;
  --ts-font-size-64: 4rem;
  --ts-font-size-hero: clamp(2.5rem, 4.5vw, 4rem);
  --ts-line-height-display: 1.08;
  --ts-line-height-heading: 1.2;
  --ts-line-height-compact: 1.25;
  --ts-line-height-body: 1.5;
  --ts-line-height-code: 1.6;
  --ts-letter-spacing-body: 0;
  --ts-letter-spacing-heading: -0.025em;
  --ts-letter-spacing-display: -0.04em;
  --ts-letter-spacing-label: 0.06em;
  --ts-space-0: 0px;
  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 20px;
  --ts-space-6: 24px;
  --ts-space-8: 32px;
  --ts-space-10: 40px;
  --ts-space-12: 48px;
  --ts-space-16: 64px;
  --ts-space-20: 80px;
  --ts-space-24: 96px;
  --ts-space-32: 128px;
  --ts-radius-xs: 4px;
  --ts-radius-control: 6px;
  --ts-radius-panel: 10px;
  --ts-radius-dialog: 12px;
  --ts-radius-badge: 999px;
  --ts-control-height-sm: 32px;
  --ts-control-height-md: 40px;
  --ts-control-height-lg: 48px;
  --ts-target-touch: 44px;
  --ts-icon-size-sm: 16px;
  --ts-icon-size-md: 20px;
  --ts-icon-size-lg: 24px;
  --ts-border-width: 1px;
  --ts-focus-width: 2px;
  --ts-focus-offset: 2px;
  --ts-content-max: 1280px;
  --ts-content-reading-max: 68ch;
  --ts-sidebar-width: 240px;
  --ts-inspector-width: 320px;
  --ts-layout-gutter: clamp(16px, 3vw, 48px);
  --ts-motion-fast: 120ms;
  --ts-motion-base: 180ms;
  --ts-motion-slow: 240ms;
  --ts-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ts-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ts-z-base: 0;
  --ts-z-dropdown: 20;
  --ts-z-sticky: 30;
  --ts-z-overlay: 40;
  --ts-z-modal: 50;
  --ts-z-toast: 60;
  --ts-z-tooltip: 70;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --ts-color-brand: #2457f5;
  --ts-color-bg-canvas: #f5f7fb;
  --ts-color-bg-surface: #ffffff;
  --ts-color-bg-subtle: #edf1f7;
  --ts-color-bg-raised: #ffffff;
  --ts-color-bg-selected: #eff3ff;
  --ts-color-bg-inverse: #171b24;
  --ts-color-text-primary: #171b24;
  --ts-color-text-secondary: #526078;
  --ts-color-text-muted: #5f6e85;
  --ts-color-text-disabled: #8794ab;
  --ts-color-text-inverse: #ffffff;
  --ts-color-border-subtle: #d9e1ef;
  --ts-color-border-default: #b7c2d4;
  --ts-color-border-control: #7b889d;
  --ts-color-border-strong: #526078;
  --ts-color-action-primary-bg: #2457f5;
  --ts-color-action-primary-hover: #1946d3;
  --ts-color-action-primary-pressed: #183aa5;
  --ts-color-action-primary-fg: #ffffff;
  --ts-color-action-primary-border: #2457f5;
  --ts-color-action-secondary-bg: #ffffff;
  --ts-color-action-secondary-hover: #edf1f7;
  --ts-color-action-secondary-pressed: #d9e1ef;
  --ts-color-action-secondary-fg: #171b24;
  --ts-color-action-secondary-border: #7b889d;
  --ts-color-action-ghost-hover: #edf1f7;
  --ts-color-action-ghost-pressed: #d9e1ef;
  --ts-color-action-disabled-bg: #edf1f7;
  --ts-color-action-disabled-fg: #8794ab;
  --ts-color-action-disabled-border: #d9e1ef;
  --ts-color-link: #2457f5;
  --ts-color-link-hover: #1946d3;
  --ts-color-focus: #2457f5;
  --ts-color-selection-bg: #dfe7ff;
  --ts-color-selection-fg: #171b24;
  --ts-color-success-fg: #0f6d41;
  --ts-color-success-bg: #e9f7ef;
  --ts-color-success-border: #14804a;
  --ts-color-warning-fg: #8a4b00;
  --ts-color-warning-bg: #fff4de;
  --ts-color-warning-border: #a45d00;
  --ts-color-danger-fg: #b4232c;
  --ts-color-danger-bg: #fff0f1;
  --ts-color-danger-border: #c23232;
  --ts-color-info-fg: #1946d3;
  --ts-color-info-bg: #eff3ff;
  --ts-color-info-border: #2457f5;
  --ts-color-neutral-fg: #526078;
  --ts-color-neutral-bg: #edf1f7;
  --ts-color-neutral-border: #7b889d;
  --ts-color-controller-agent-fg: #1946d3;
  --ts-color-controller-agent-bg: #eff3ff;
  --ts-color-controller-agent-border: #2457f5;
  --ts-color-controller-human-fg: #171b24;
  --ts-color-controller-human-bg: #edf1f7;
  --ts-color-controller-human-border: #7b889d;
  --ts-color-code-bg: #171b24;
  --ts-color-code-fg: #e8edf5;
  --ts-color-code-comment: #a3aec0;
  --ts-color-code-keyword: #a2b8ff;
  --ts-color-code-string: #8adbb3;
  --ts-color-code-number: #f0c27a;
  --ts-color-overlay: rgba(23, 27, 36, 0.48);
  --ts-shadow-none: none;
  --ts-shadow-raised: 0 4px 16px rgba(23, 27, 36, 0.08);
  --ts-shadow-overlay: 0 16px 40px rgba(23, 27, 36, 0.14);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ts-color-brand: #2457f5;
  --ts-color-bg-canvas: #10141d;
  --ts-color-bg-surface: #19212e;
  --ts-color-bg-subtle: #222c3b;
  --ts-color-bg-raised: #222c3b;
  --ts-color-bg-selected: #1d315b;
  --ts-color-bg-inverse: #f5f7fb;
  --ts-color-text-primary: #f5f7fb;
  --ts-color-text-secondary: #b7c2d4;
  --ts-color-text-muted: #92a0b6;
  --ts-color-text-disabled: #66748b;
  --ts-color-text-inverse: #171b24;
  --ts-color-border-subtle: #303b4f;
  --ts-color-border-default: #48566d;
  --ts-color-border-control: #7988a0;
  --ts-color-border-strong: #92a0b6;
  --ts-color-action-primary-bg: #2457f5;
  --ts-color-action-primary-hover: #1946d3;
  --ts-color-action-primary-pressed: #183aa5;
  --ts-color-action-primary-fg: #ffffff;
  --ts-color-action-primary-border: #91adff;
  --ts-color-action-secondary-bg: #19212e;
  --ts-color-action-secondary-hover: #222c3b;
  --ts-color-action-secondary-pressed: #303b4f;
  --ts-color-action-secondary-fg: #f5f7fb;
  --ts-color-action-secondary-border: #7988a0;
  --ts-color-action-ghost-hover: #222c3b;
  --ts-color-action-ghost-pressed: #303b4f;
  --ts-color-action-disabled-bg: #222c3b;
  --ts-color-action-disabled-fg: #66748b;
  --ts-color-action-disabled-border: #303b4f;
  --ts-color-link: #91adff;
  --ts-color-link-hover: #b7c8ff;
  --ts-color-focus: #91adff;
  --ts-color-selection-bg: #2a4582;
  --ts-color-selection-fg: #f5f7fb;
  --ts-color-success-fg: #71d6a0;
  --ts-color-success-bg: #102d23;
  --ts-color-success-border: #4bb780;
  --ts-color-warning-fg: #f0b85c;
  --ts-color-warning-bg: #332817;
  --ts-color-warning-border: #d89935;
  --ts-color-danger-fg: #ff9393;
  --ts-color-danger-bg: #361e27;
  --ts-color-danger-border: #ef777f;
  --ts-color-info-fg: #a2b8ff;
  --ts-color-info-bg: #1d315b;
  --ts-color-info-border: #91adff;
  --ts-color-neutral-fg: #b7c2d4;
  --ts-color-neutral-bg: #222c3b;
  --ts-color-neutral-border: #7988a0;
  --ts-color-controller-agent-fg: #a2b8ff;
  --ts-color-controller-agent-bg: #1d315b;
  --ts-color-controller-agent-border: #91adff;
  --ts-color-controller-human-fg: #f5f7fb;
  --ts-color-controller-human-bg: #222c3b;
  --ts-color-controller-human-border: #7988a0;
  --ts-color-code-bg: #0b1018;
  --ts-color-code-fg: #e8edf5;
  --ts-color-code-comment: #a3aec0;
  --ts-color-code-keyword: #a2b8ff;
  --ts-color-code-string: #8adbb3;
  --ts-color-code-number: #f0c27a;
  --ts-color-overlay: rgba(0, 0, 0, 0.64);
  --ts-shadow-none: none;
  --ts-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.24);
  --ts-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.36);
}

/* Optional scoped reference styles. They do not reset the host application. */
.ts-scope {
  color: var(--ts-color-text-primary);
  background: var(--ts-color-bg-canvas);
  font-family: var(--ts-font-family-ui);
  font-size: var(--ts-font-size-14);
  line-height: var(--ts-line-height-body);
}

.ts-scope *,
.ts-scope *::before,
.ts-scope *::after {
  box-sizing: border-box;
}
.ts-scope ::selection {
  background: var(--ts-color-selection-bg);
  color: var(--ts-color-selection-fg);
}
.ts-scope :focus-visible {
  outline: var(--ts-focus-width) solid var(--ts-color-focus);
  outline-offset: var(--ts-focus-offset);
}
.ts-scope :where(a:not([class])) {
  color: var(--ts-color-link);
  text-underline-offset: 0.18em;
}
.ts-scope :where(a:not([class])):hover {
  color: var(--ts-color-link-hover);
}

.ts-hero-title {
  margin: 0;
  font-size: var(--ts-font-size-hero);
  font-weight: var(--ts-font-weight-semibold);
  line-height: var(--ts-line-height-display);
  letter-spacing: var(--ts-letter-spacing-display);
  text-wrap: balance;
}
.ts-page-title {
  margin: 0;
  font-size: var(--ts-font-size-32);
  font-weight: var(--ts-font-weight-semibold);
  line-height: var(--ts-line-height-heading);
  letter-spacing: var(--ts-letter-spacing-heading);
}
.ts-body {
  font-size: var(--ts-font-size-16);
  line-height: var(--ts-line-height-body);
}
.ts-secondary {
  color: var(--ts-color-text-secondary);
}
.ts-helper {
  color: var(--ts-color-text-muted);
  font-size: var(--ts-font-size-13);
  line-height: var(--ts-line-height-body);
}
.ts-numeric {
  font-variant-numeric: tabular-nums;
}
.ts-code {
  color: var(--ts-color-code-fg);
  background: var(--ts-color-code-bg);
  font-family: var(--ts-font-family-mono);
  font-size: var(--ts-font-size-13);
  line-height: var(--ts-line-height-code);
  font-variant-ligatures: none;
  overflow-x: auto;
  white-space: pre;
  border-radius: var(--ts-radius-control);
}

.ts-button,
.ts-icon-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-2);
  min-height: var(--ts-control-height-md);
  padding: var(--ts-space-2) var(--ts-space-4);
  border: var(--ts-border-width) solid var(--ts-color-action-secondary-border);
  border-radius: var(--ts-radius-control);
  background: var(--ts-color-action-secondary-bg);
  color: var(--ts-color-action-secondary-fg);
  font-family: var(--ts-font-family-ui);
  font-size: var(--ts-font-size-14);
  font-weight: var(--ts-font-weight-medium);
  line-height: var(--ts-line-height-compact);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ts-motion-fast) var(--ts-ease-standard),
    border-color var(--ts-motion-fast) var(--ts-ease-standard),
    color var(--ts-motion-fast) var(--ts-ease-standard);
}
.ts-button:not(:disabled):not([aria-disabled="true"]):hover,
.ts-icon-button:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--ts-color-action-secondary-hover);
}
.ts-button:not(:disabled):not([aria-disabled="true"]):active,
.ts-icon-button:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--ts-color-action-secondary-pressed);
}
.ts-button[data-variant="primary"] {
  background: var(--ts-color-action-primary-bg);
  color: var(--ts-color-action-primary-fg);
  border-color: var(--ts-color-action-primary-border);
}
.ts-button[data-variant="primary"]:not(:disabled):not(
  [aria-disabled="true"]
):hover {
  background: var(--ts-color-action-primary-hover);
}
.ts-button[data-variant="primary"]:not(:disabled):not(
  [aria-disabled="true"]
):active {
  background: var(--ts-color-action-primary-pressed);
}
.ts-button[data-variant="ghost"] {
  color: var(--ts-color-text-primary);
  background: transparent;
  border-color: transparent;
}
.ts-button[data-variant="ghost"]:not(:disabled):not(
  [aria-disabled="true"]
):hover {
  background: var(--ts-color-action-ghost-hover);
}
.ts-button[data-variant="ghost"]:not(:disabled):not(
  [aria-disabled="true"]
):active {
  background: var(--ts-color-action-ghost-pressed);
}
.ts-button[data-variant="danger"] {
  color: var(--ts-color-danger-fg);
  background: var(--ts-color-danger-bg);
  border-color: var(--ts-color-danger-border);
}
.ts-button[data-variant="danger"]:not(:disabled):not(
  [aria-disabled="true"]
):hover {
  box-shadow: inset 0 0 0 1px var(--ts-color-danger-border);
}
.ts-button[data-variant="danger"]:not(:disabled):not(
  [aria-disabled="true"]
):active {
  box-shadow: inset 0 0 0 2px var(--ts-color-danger-border);
}
.ts-button[data-size="sm"] {
  min-height: var(--ts-control-height-sm);
  padding: var(--ts-space-1) var(--ts-space-3);
}
.ts-button[data-size="lg"] {
  min-height: var(--ts-control-height-lg);
  padding: var(--ts-space-3) var(--ts-space-5);
  font-size: var(--ts-font-size-16);
}
.ts-icon-button {
  min-width: var(--ts-control-height-md);
  width: var(--ts-control-height-md);
  padding: var(--ts-space-2);
}
.ts-button > svg,
.ts-icon-button > svg {
  width: var(--ts-icon-size-md);
  height: var(--ts-icon-size-md);
  flex-shrink: 0;
}
.ts-button:is(:disabled, [aria-disabled="true"]),
.ts-icon-button:is(:disabled, [aria-disabled="true"]) {
  color: var(--ts-color-action-disabled-fg);
  background: var(--ts-color-action-disabled-bg);
  border-color: var(--ts-color-action-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}
.ts-button[aria-busy="true"] {
  cursor: progress;
}

.ts-field {
  display: grid;
  gap: var(--ts-space-2);
}
.ts-label {
  color: var(--ts-color-text-primary);
  font-size: var(--ts-font-size-14);
  font-weight: var(--ts-font-weight-medium);
}
.ts-input,
.ts-select,
.ts-textarea {
  width: 100%;
  min-height: var(--ts-control-height-md);
  padding: var(--ts-space-2) var(--ts-space-3);
  border: var(--ts-border-width) solid var(--ts-color-border-control);
  border-radius: var(--ts-radius-control);
  background: var(--ts-color-bg-surface);
  color: var(--ts-color-text-primary);
  font-family: var(--ts-font-family-ui);
  font-size: var(--ts-font-size-14);
  line-height: var(--ts-line-height-body);
}
.ts-input::placeholder,
.ts-textarea::placeholder {
  color: var(--ts-color-text-muted);
  opacity: 1;
}
.ts-input:hover:not(:disabled),
.ts-select:hover:not(:disabled),
.ts-textarea:hover:not(:disabled) {
  border-color: var(--ts-color-border-strong);
}
.ts-input[aria-invalid="true"],
.ts-select[aria-invalid="true"],
.ts-textarea[aria-invalid="true"] {
  border-color: var(--ts-color-danger-border);
}
.ts-input:disabled,
.ts-select:disabled,
.ts-textarea:disabled {
  background: var(--ts-color-action-disabled-bg);
  color: var(--ts-color-text-disabled);
  border-color: var(--ts-color-action-disabled-border);
  cursor: not-allowed;
}
.ts-textarea {
  min-height: 96px;
  resize: vertical;
}
.ts-field-error {
  color: var(--ts-color-danger-fg);
  font-size: var(--ts-font-size-13);
}

.ts-panel {
  background: var(--ts-color-bg-surface);
  border: var(--ts-border-width) solid var(--ts-color-border-subtle);
  border-radius: var(--ts-radius-panel);
  box-shadow: var(--ts-shadow-none);
}
.ts-divider {
  border: 0;
  border-top: var(--ts-border-width) solid var(--ts-color-border-subtle);
}
.ts-status,
.ts-controller {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  padding: var(--ts-space-1) var(--ts-space-2);
  border: var(--ts-border-width) solid var(--ts-color-neutral-border);
  border-radius: var(--ts-radius-badge);
  background: var(--ts-color-neutral-bg);
  color: var(--ts-color-neutral-fg);
  font-size: var(--ts-font-size-12);
  font-weight: var(--ts-font-weight-medium);
  line-height: var(--ts-line-height-compact);
  white-space: nowrap;
}
.ts-status[data-tone="success"] {
  color: var(--ts-color-success-fg);
  background: var(--ts-color-success-bg);
  border-color: var(--ts-color-success-border);
}
.ts-status[data-tone="warning"] {
  color: var(--ts-color-warning-fg);
  background: var(--ts-color-warning-bg);
  border-color: var(--ts-color-warning-border);
}
.ts-status[data-tone="danger"] {
  color: var(--ts-color-danger-fg);
  background: var(--ts-color-danger-bg);
  border-color: var(--ts-color-danger-border);
}
.ts-status[data-tone="info"] {
  color: var(--ts-color-info-fg);
  background: var(--ts-color-info-bg);
  border-color: var(--ts-color-info-border);
}
.ts-status[data-tone="neutral"] {
  color: var(--ts-color-neutral-fg);
  background: var(--ts-color-neutral-bg);
  border-color: var(--ts-color-neutral-border);
}
.ts-controller[data-controller="agent"] {
  color: var(--ts-color-controller-agent-fg);
  background: var(--ts-color-controller-agent-bg);
  border-color: var(--ts-color-controller-agent-border);
}
.ts-controller[data-controller="human"] {
  color: var(--ts-color-controller-human-fg);
  background: var(--ts-color-controller-human-bg);
  border-color: var(--ts-color-controller-human-border);
}

/* CSS does not supply accessible names, disabled behavior, focus traps, or a
 * transfer protocol. Implement those in native HTML / application logic. */
@media (pointer: coarse) {
  .ts-button,
  .ts-icon-button,
  .ts-input,
  .ts-select {
    min-height: var(--ts-target-touch);
  }
  .ts-button {
    min-width: var(--ts-target-touch);
  }
  .ts-icon-button {
    min-width: var(--ts-target-touch);
    width: var(--ts-target-touch);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme] {
    --ts-motion-fast: 0ms;
    --ts-motion-base: 0ms;
    --ts-motion-slow: 0ms;
  }
}