/* Surgical-Journey CMS — design tokens + UI primitives.
   The app consumes this file directly: the class names are the contract (see CHANGES.md for renames).
   Tokens: --color-* (light, and dark under [data-theme="dark"] on any ancestor), --font-*, --text-*,
   --pad-*, --space-*, --radius-*, --shadow-*, --app-* for pane widths and bar heights, --control-h-* / --badge-h-* / --tab-h-*
   for control heights, --row-h-* and --cols-* for table rows and column templates, --tl-* for timeline strips.
   Literal px remains only for decorative geometry (icons, dots, 1–2px rules) and for positions the timeline computes. */

:root, [data-theme="light"] {
  --color-bg-app: #F3F4F6;
  --color-bg-surface: #FFFFFF;
  --color-bg-sunken: #E9EBEF;
  --color-bg-hover: #F0F2F5;
  --color-border: #D5D9E0;
  --color-border-strong: #AEB5C0;
  --color-text: #161A21;
  --color-text-2: #454C59;
  --color-text-3: #5F6773;
  --color-text-inverse: #FFFFFF;

  --color-accent: #1E5EA8;
  --color-accent-hover: #174B88;
  --color-accent-text: #174B88;
  --color-accent-soft: #E3EDF9;
  --color-accent-border: #A9C4E6;

  --color-error: #B42318;
  --color-error-soft: #FDE8E6;
  --color-error-border: #F0A69F;
  --color-warning: #B45309;
  --color-warning-soft: #FEF1D6;
  --color-warning-border: #F0C46B;
  --color-success: #067647;
  --color-success-soft: #DCF5E6;
  --color-success-border: #8FD8B0;
  --color-info: #5B33D6;
  --color-info-soft: #ECE8FB;
  --color-info-border: #C2B5F2;
  --color-locked: #5F6773;
  --color-locked-soft: #EEF0F3;
  --color-locked-border: #C9CED6;
  --color-backdrop: rgba(14, 17, 22, 0.45);   /* scrim behind modal dialogs and the ⌘K palette */

  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-micro: 10.5px; --text-xs: 11px; --text-mono-sm: 11.5px; --text-sm: 12px; --text-compact: 12.5px; --text-mono: 12.5px;
  --text-table: 13px; --text-base: 14px; --text-form: 15px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px;

  /* padding scale (8-pt) + the three recurring composite paddings */
  --pad-1: 4px; --pad-2: 8px; --pad-3: 12px; --pad-4: 16px; --pad-5: 20px; --pad-6: 24px;
  --pad-card: 10px 14px;   /* card headers, compact cards */
  --pad-row: 8px 12px;     /* table cells, list rows */
  --pad-section: 14px 16px; /* form sections, drawer bodies */

  /* app frame — pane widths and bar heights, designed at 1440 */
  --app-nav-w: 216px;          /* navigation rail */
  --app-topbar-h: 56px;        /* screen header */
  --app-tabs-h: 40px;          /* tabs row / pane toolbars */
  --app-rail-w: 192px;         /* pathway editor: phases rail */
  --app-canvas-w: 672px;       /* pathway editor: timeline canvas */
  --app-inspector-w: 360px;    /* pathway editor: right inspector */
  --app-bottom-drawer-h: 216px;/* lint / decision-log drawer */
  --app-drawer-w: 440px;       /* side drawers (catalog, versions, translations) */
  --app-side-w: 380px;         /* sandbox conflicts panel */
  --app-form-w: 760px;         /* content editors: form column */
  --app-summary-w: 440px;      /* publish flows: right-hand summary column */
  --app-toolbar-h: 36px;       /* pane toolbars: lint / decision-log header, bulk bar, compare bar */
  --app-filterbar-h: 44px;     /* index screens: filter bar under the header */
  --app-drawer-head-h: 48px;   /* side-drawer header */
  --app-tray-h: 64px;          /* awaiting-anchor tray under the timeline */

  /* control heights — every button, input, select and chip uses one of these */
  --control-h-xs: 26px;        /* .btn-sm, inline table inputs, tray chips, drawer-toolbar selects */
  --control-h-sm: 28px;        /* compact selects in filter bars, .avatar */
  --control-h: 32px;           /* .btn, .input, header search */
  --control-h-lg: 36px;        /* .input-lg, primary confirm buttons */
  --control-h-xl: 40px;        /* sign-in buttons, expression editor */
  --badge-h: 20px; --badge-h-sm: 18px; --badge-h-xs: 16px;
  --tab-h: 38px; --tab-h-sm: 30px;   /* .tab, .loc-tab */

  /* rows — tables and lists; two-line rows grow past --row-h */
  --row-h: 36px;               /* .table td minimum */
  --row-h-head: 30px;          /* .table th */
  --cols-lint: 18px 88px 132px 1fr auto;                    /* .lint-row: icon · code · item · finding · action */
  --cols-lint-compact: 18px 84px 1fr;                       /* lint rows inside inspectors and dry-runs */
  --cols-diff: 96px 176px 110px 1fr 24px 1fr;               /* .diff-row: kind · id · field · before · → · after */
  --cols-diff-wide: 120px 190px 130px 1fr 24px 1fr 120px;   /* pathway publish diff (P4): + migration column */
  --cols-diff-content: 110px 190px 1fr 24px 1fr 110px;      /* content publish diff (P21) */
  --cols-diff-catalog: 110px 210px 1fr 24px 1fr 120px;      /* catalog publish diff (P22) */
  --cols-log: 34px 110px 1fr 240px 150px;                   /* .log-row: n · type · text · rule · version */
  --cols-rule: 24px 140px 1fr 1fr;                          /* insight-rule condition rows (P9, P18) */
  --cols-kv: 120px 1fr;                                     /* key / value summary grids */
  --cols-kv-wide: 140px 1fr;                                /* key / value grids with long keys */
  --cols-publish: 1fr var(--app-summary-w);                 /* publish flows: main column + summary */

  /* timeline strips (see Tokens board for the lane math) */
  --tl-phases-h: 22px; --tl-axis-h: 26px; --tl-anchors-h: 36px;
  --tl-row-h: 30px; --tl-item-h: 22px; --tl-span-h: 16px; --mini-tl-h: 44px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 20, 28, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 20, 28, 0.10);
  --shadow-3: 0 12px 32px rgba(16, 20, 28, 0.16);

  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent);
}

[data-theme="dark"] {
  --color-bg-app: #0E1116;
  --color-bg-surface: #161A21;
  --color-bg-sunken: #0B0D11;
  --color-bg-hover: #1D222B;
  --color-border: #2B313B;
  --color-border-strong: #3E4653;
  --color-text: #E8EAEE;
  --color-text-2: #B4BAC5;
  --color-text-3: #98A0AC;
  --color-text-inverse: #0E1116;

  --color-accent: #7FB2F0;
  --color-accent-hover: #9CC4F5;
  --color-accent-text: #9CC4F5;
  --color-accent-soft: #1A2E48;
  --color-accent-border: #2E4C74;

  --color-error: #F28B82;
  --color-error-soft: #3B1B19;
  --color-error-border: #7A342E;
  --color-warning: #F2B25A;
  --color-warning-soft: #3A2A10;
  --color-warning-border: #7A5A22;
  --color-success: #5FD39A;
  --color-success-soft: #123123;
  --color-success-border: #236B45;
  --color-info: #C0B1F7;
  --color-info-soft: #2A2350;
  --color-info-border: #4E4290;
  --color-locked: #98A0AC;
  --color-locked-soft: #1F242C;
  --color-locked-border: #3E4653;
  --color-backdrop: rgba(0, 0, 0, 0.6);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- type ---------- */
.h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.h2 { font-size: var(--text-lg); font-weight: 600; margin: 0; line-height: 1.25; }
.h3 { font-size: var(--text-base); font-weight: 600; margin: 0; line-height: 1.3; }
.cap { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); font-weight: 600; }
.small { font-size: var(--text-sm); color: var(--color-text-3); line-height: 1.4; }
.muted { color: var(--color-text-3); }
.mono { font-family: var(--font-mono); font-size: var(--text-mono); }
p { margin: 0; }

/* ---------- icons ---------- */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-s { width: 12px; height: 12px; }
.ic-l { width: 20px; height: 20px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--text-table); font-weight: 500; border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-text); cursor: pointer; white-space: nowrap; line-height: 1; }
.btn:hover { background: var(--color-bg-hover); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--color-text-2); }
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text); }
.btn-sm { height: var(--control-h-xs); padding: 0 8px; font-size: var(--text-sm); gap: 4px; }
.btn-icon { width: 32px; padding: 0; justify-content: center; }
.btn-sm.btn-icon { width: var(--control-h-xs); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn.is-disabled:hover { background: var(--color-bg-surface); }
.btn-primary.is-disabled:hover { background: var(--color-accent); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: var(--badge-h); padding: 0 7px; border-radius: var(--radius-pill); font-size: var(--text-mono-sm); font-weight: 600; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.badge .ic { width: 11px; height: 11px; stroke-width: 2; }
.badge-draft { background: var(--color-accent-soft); color: var(--color-accent-text); border-color: var(--color-accent-border); }
.badge-published { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-border); }
.badge-deprecated { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-retired { background: var(--color-locked-soft); color: var(--color-locked); border-color: var(--color-locked-border); }
.badge-mvp { background: transparent; color: var(--color-text-2); border-color: var(--color-border-strong); }
.badge-later { background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-info-border); }
.badge-locked { background: var(--color-locked-soft); color: var(--color-locked); border-color: var(--color-locked-border); }
.badge-error { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error-border); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-border); }
.badge-info { background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-info-border); }
.badge-neutral { background: var(--color-bg-sunken); color: var(--color-text-2); border-color: var(--color-border); }
.badge-kind { background: var(--color-bg-surface); color: var(--color-text-2); border-color: var(--color-border-strong); font-weight: 500; }

.pin { font-family: var(--font-mono); font-size: var(--text-mono-sm); background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 6px; color: var(--color-text); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.pin-outdated { border-color: var(--color-warning-border); background: var(--color-warning-soft); color: var(--color-warning); }
.anchor { font-family: var(--font-mono); font-size: var(--text-mono-sm); background: var(--color-accent-soft); border: 1px solid var(--color-accent-border); border-radius: var(--radius-pill); padding: 2px 9px; color: var(--color-accent-text); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 1.3; }
.anchor .ic { width: 11px; height: 11px; }
.anchor-unset { background: var(--color-locked-soft); border-color: var(--color-locked-border); color: var(--color-locked); border-style: dashed; }
.day { font-family: var(--font-mono); font-size: var(--text-mono-sm); background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px 8px; color: var(--color-text-2); white-space: nowrap; line-height: 1.3; display: inline-flex; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-ok { background: var(--color-success); }
.dot-missing { background: var(--color-error); }
.dot-fallback { background: var(--color-warning); }
.dot-locked { background: var(--color-locked); }
.dot-draft { background: var(--color-accent); }
.kbd { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--color-bg-surface); color: var(--color-text-2); line-height: 16px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-2); display: flex; align-items: center; gap: 6px; }
.label .req { color: var(--color-error); }
.input { height: var(--control-h); padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-surface); color: var(--color-text); font-size: var(--text-base); width: 100%; display: flex; align-items: center; gap: 6px; }
.input-lg { height: var(--control-h-lg); font-size: var(--text-form); }
.input.mono { font-family: var(--font-mono); font-size: var(--text-table); }
.input.is-error { border-color: var(--color-error); box-shadow: 0 0 0 2px var(--color-error-soft); }
.input.is-locked, .input[disabled] { background: var(--color-locked-soft); color: var(--color-locked); border-style: dashed; cursor: not-allowed; }
.input.is-readonly { background: var(--color-bg-sunken); border-color: var(--color-border); }
.select { justify-content: space-between; cursor: pointer; }
.select .chev { color: var(--color-text-3); margin-left: auto; }
.textarea { min-height: 72px; padding: 8px 10px; align-items: flex-start; line-height: 1.45; white-space: pre-wrap; }
.help { font-size: var(--text-sm); color: var(--color-text-3); line-height: 1.4; }
.err { font-size: var(--text-sm); color: var(--color-error); display: flex; gap: 5px; align-items: flex-start; line-height: 1.4; }
.warn { font-size: var(--text-sm); color: var(--color-warning); display: flex; gap: 5px; align-items: flex-start; line-height: 1.4; }
.toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--color-border-strong); position: relative; border: 0; flex: none; cursor: pointer; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-surface); box-shadow: var(--shadow-1); }
.toggle.is-on { background: var(--color-accent); }
.toggle.is-on::after { left: 16px; }
.toggle[disabled] { opacity: 0.5; cursor: not-allowed; }
.check { width: 16px; height: 16px; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-bg-surface); display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.check.is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); }
.radio { width: 16px; height: 16px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg-surface); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.radio.is-on { border-color: var(--color-accent); border-width: 5px; }

/* ---------- surfaces ---------- */
.card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.card-h { display: flex; align-items: center; gap: 8px; padding: var(--pad-card); border-bottom: 1px solid var(--color-border); min-width: 0; }
.card-h .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section { display: flex; flex-direction: column; gap: 10px; padding: var(--pad-section); border-bottom: 1px solid var(--color-border); }
.section-title { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.callout { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-sunken); font-size: var(--text-table); line-height: 1.45; }
.callout .ic { margin-top: 1px; }
.callout-error { background: var(--color-error-soft); border-color: var(--color-error-border); color: var(--color-error); }
.callout-warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning); }
.callout-success { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.callout-info { background: var(--color-info-soft); border-color: var(--color-info-border); color: var(--color-info); }
.callout-locked { background: var(--color-locked-soft); border-color: var(--color-locked-border); color: var(--color-locked); }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
.table th { height: var(--row-h-head); text-align: left; font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-3); font-weight: 600; padding: var(--pad-row); border-bottom: 1px solid var(--color-border); background: var(--color-bg-sunken); white-space: nowrap; }
.table td { height: var(--row-h); padding: var(--pad-row); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tr.is-selected td { background: var(--color-accent-soft); }
.table td.num { text-align: right; font-family: var(--font-mono); font-size: var(--text-compact); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; align-items: flex-end; }
.tab { height: var(--tab-h); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-table); font-weight: 500; color: var(--color-text-2); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.tab[disabled], .tab.is-disabled { color: var(--color-locked); cursor: not-allowed; }
.tab .count { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-bg-sunken); border-radius: var(--radius-pill); padding: 1px 6px; color: var(--color-text-2); }
.loc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); }
.loc-tab { height: var(--tab-h-sm); padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-compact); font-weight: 500; font-family: var(--font-mono); color: var(--color-text-2); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.loc-tab.is-active { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }

/* ---------- lint / diff / log rows ---------- */
.lint-row { display: grid; grid-template-columns: var(--cols-lint); gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--color-border); font-size: var(--text-table); }
.lint-row:hover { background: var(--color-bg-hover); }
.lint-row.is-focus { background: var(--color-accent-soft); }
.sev-error { color: var(--color-error); }
.sev-warning { color: var(--color-warning); }
.diff-row { display: grid; grid-template-columns: var(--cols-diff); gap: 12px; align-items: center; padding: var(--pad-row); border-bottom: 1px solid var(--color-border); font-size: var(--text-table); }
.diff-added { color: var(--color-success); }
.diff-removed { color: var(--color-text-3); }
.diff-changed { color: var(--color-warning); }
.log-row { display: grid; grid-template-columns: var(--cols-log); gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--color-border); font-size: var(--text-compact); }

/* ---------- navigation rail ---------- */
.nav-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 var(--pad-3); border-radius: var(--radius-sm); color: var(--color-text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.nav-item:hover { background: var(--color-bg-hover); color: var(--color-text); }
.nav-item.is-active { background: var(--color-accent-soft); color: var(--color-accent-text); }
.nav-item .nav-tail { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.nav-group { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); font-weight: 600; padding: 14px 12px 4px; display: flex; align-items: center; gap: 6px; }

/* ---------- timeline ---------- */
.tl { position: relative; background: var(--color-bg-surface); overflow: hidden; }
.tl-phase { position: absolute; top: 0; bottom: 0; background: var(--color-bg-sunken); opacity: 0.45; }
.tl-phase-alt { opacity: 0; }
.tl-anchor { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--color-text-2); z-index: 1; }
.tl-axis { position: relative; height: var(--tl-axis-h); border-bottom: 1px solid var(--color-border); }
.tl-tick { position: absolute; bottom: 0; height: 6px; border-left: 1px solid var(--color-border-strong); }
.tl-tick.is-major { height: 10px; }
.tl-ticklabel { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-text-3); white-space: nowrap; }
.tl-lane { position: relative; border-bottom: 1px solid var(--color-border); }
.tl-lane-label { position: absolute; left: 8px; top: 6px; font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-3); display: inline-flex; gap: 5px; align-items: center; z-index: 2; background: var(--color-bg-surface); padding: 1px 4px; border-radius: 3px; }
.tl-lane-label .ic { width: 12px; height: 12px; }
.tl-item { position: absolute; height: var(--tl-item-h); padding: 0; border: 0; background: none; cursor: pointer; text-align: left; z-index: 2; }
.tl-band { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--color-accent-soft); border: 1px solid var(--color-accent-border); border-radius: 3px; }
.tl-nom { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-accent); margin-left: -1px; border-radius: 1px; }
.tl-lbl { position: absolute; left: 100%; margin-left: 6px; top: 0; line-height: 22px; font-size: var(--text-mono-sm); white-space: nowrap; font-family: var(--font-mono); color: var(--color-text); }
.tl-glyph { position: absolute; left: 100%; margin-left: 4px; top: 4px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 1; background: var(--color-bg-sunken); color: var(--color-text); }
.tl-glyph + .tl-lbl { margin-left: 22px; }
.tl-clip { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--color-text); border-radius: 1px; }
.tl-rem { position: absolute; top: 100%; height: 7px; width: 2px; background: var(--color-text-2); margin-left: -1px; }
.tl-rec { position: absolute; top: 6px; height: 10px; width: 1px; background: var(--color-accent); opacity: 0.7; }
.tl-item.is-tick .tl-band { left: -5px; width: 10px; right: auto; transform: rotate(45deg); top: 6px; bottom: 6px; border-radius: 2px; background: var(--color-accent); border-color: var(--color-accent); }
.tl-item.is-tick .tl-nom { display: none; }
.tl-item.is-tick .tl-lbl { margin-left: 12px; }
.tl-item.is-inside .tl-lbl { left: 6px; margin-left: 0; }
.tl-item.is-inside .tl-glyph { left: auto; right: 4px; margin-left: 0; }
.tl-item.is-selected .tl-band { box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent); }
.tl-item.is-error .tl-band { background: var(--color-error-soft); border-color: var(--color-error); }
.tl-item.is-error .tl-nom { background: var(--color-error); }
.tl-item.is-error .tl-glyph { background: var(--color-error); color: var(--color-text-inverse); }
.tl-item.is-warning .tl-band { background: var(--color-warning-soft); border-color: var(--color-warning); }
.tl-item.is-warning .tl-nom { background: var(--color-warning); }
.tl-item.is-warning .tl-glyph { background: var(--color-warning); color: var(--color-text-inverse); }
.tl-item.is-awaiting { white-space: nowrap; }
.tl-item.is-awaiting .tl-band { border-style: dashed; background: transparent; border-color: var(--color-locked-border); }
.tl-item.is-awaiting .tl-nom { background: var(--color-locked); }
.tl-item.is-ask .tl-band { background: var(--color-success-soft); border-color: var(--color-success); }
.tl-item.is-ask .tl-nom { background: var(--color-success); }
.tl-item.is-added .tl-band { border-color: var(--color-success); border-width: 2px; }
.tl-item.is-added .tl-glyph { background: var(--color-success); color: var(--color-text-inverse); }
.tl-item.is-removed .tl-band { border-style: dashed; border-color: var(--color-border-strong); background: transparent; }
.tl-item.is-removed .tl-nom { background: var(--color-border-strong); }
.tl-item.is-removed .tl-lbl { text-decoration: line-through; color: var(--color-text-3); }
.tl-item.is-removed .tl-glyph { background: var(--color-bg-sunken); color: var(--color-text-2); border: 1px solid var(--color-border-strong); }
.tl-item.is-changed .tl-band { border-color: var(--color-warning); border-width: 2px; }
.tl-item.is-changed .tl-glyph { background: var(--color-warning); color: var(--color-text-inverse); }
.tl-item.is-merged .tl-band { border-style: dashed; background: transparent; border-color: var(--color-success-border); }
.tl-item.is-merged .tl-nom { background: var(--color-success-border); }
.tl-item.is-merged .tl-lbl { color: var(--color-text-3); font-style: italic; }
.tl-lbl .badge { height: var(--badge-h-xs); font-size: 10px; padding: 0 5px; vertical-align: middle; font-family: var(--font-sans); font-style: normal; }
.tl-ghost { position: absolute; height: 22px; border: 1px dashed var(--color-border-strong); border-radius: 3px; opacity: 0.8; z-index: 1; }
.tl-span { position: absolute; height: var(--tl-span-h); border-radius: 2px; border: 1px solid var(--color-accent-border); background: repeating-linear-gradient(135deg, var(--color-accent-soft) 0 4px, transparent 4px 8px); display: flex; align-items: center; padding: 0 6px; font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-text-2); white-space: nowrap; overflow: hidden; z-index: 2; }
.tl-span.is-composite { border-color: var(--color-success-border); background: repeating-linear-gradient(135deg, var(--color-success-soft) 0 4px, transparent 4px 8px); }
.tl-span.is-conflict { border-color: var(--color-error); background: repeating-linear-gradient(135deg, var(--color-error-soft) 0 4px, transparent 4px 8px); color: var(--color-error); }
.tl-conflict { position: absolute; width: 16px; height: 16px; background: var(--color-error); color: var(--color-text-inverse); transform: rotate(45deg); border-radius: 2px; z-index: 3; display: flex; align-items: center; justify-content: center; }
.tl-conflict .ic { transform: rotate(-45deg); width: 11px; height: 11px; stroke-width: 2.2; }
.tl-fulfils { position: absolute; left: 100%; margin-left: 6px; top: 2px; height: var(--badge-h-sm); }
.tl-hover { position: absolute; z-index: 10; width: 260px; background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 10px 12px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 5px; }
.tl-hover .kv { display: flex; justify-content: space-between; gap: 8px; }
.tl-hover .kv span:first-child { color: var(--color-text-3); }
.mini-tl { position: relative; height: var(--mini-tl-h); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-sunken); overflow: hidden; }

/* ---------- misc ---------- */
.avatar { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 600; flex: none; }
.divider { height: 1px; background: var(--color-border); }
.vdivider { width: 1px; background: var(--color-border); align-self: stretch; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--color-text-3); font-size: var(--text-table); padding: 24px; }
.empty .ic-l { color: var(--color-border-strong); width: 28px; height: 28px; }
.step { display: flex; align-items: center; gap: 8px; font-size: var(--text-table); color: var(--color-text-3); }
.step-n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-mono-sm); font-weight: 600; }
.step.is-active { color: var(--color-text); font-weight: 600; }
.step.is-active .step-n { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); }
.step.is-done { color: var(--color-text-2); }
.step.is-done .step-n { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-text); color: var(--color-bg-surface); font-size: var(--text-table); box-shadow: var(--shadow-3); }
.swatch { width: 100%; height: 44px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.08); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .n { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-family: var(--font-mono); }
.placeholder-chip { font-family: var(--font-mono); font-size: var(--text-mono-sm); border: 1px solid var(--color-info-border); background: var(--color-info-soft); color: var(--color-info); border-radius: var(--radius-sm); padding: 2px 6px; cursor: grab; }
.slider { position: relative; height: 4px; background: var(--color-border); border-radius: 2px; }
.slider .thumb { position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-surface); border: 2px solid var(--color-accent); margin-left: -8px; }