/* ════════════════════════════════════════════════════════════════════════
   SonIQ — shared stylesheet (Slice 0)
   Layer 1+2 = "SonIQ Light" design system, copied VERBATIM (canon, no
   redefinitions). Layer 3 = Slice-0 additions: authed shell + async-kit
   gaps named by the slice card. Never override Layer 1/2 values here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS (SonIQ Light — verbatim) ────────────────────────────────── */
:root {
  /* Canvas */
  --bg: #ffffff;
  --bg-warm: #f6f5f1;          /* page — toned cream (glare fix 07-02; was #fbfbf9≈white) */
  --bg-soft: #eeede7;          /* panels / code — deepened to keep layer distinction */
  --bg-ink: #14110f;           /* rare inverted section */

  /* Ink */
  --ink: #14110f;
  --ink-2: #3a352f;
  --ink-muted: #6b655c;
  --ink-faint: #9a938a;

  /* Lines */
  --line: rgba(20, 17, 15, 0.08);
  --line-2: rgba(20, 17, 15, 0.14);
  --line-strong: rgba(20, 17, 15, 0.22);

  /* Accent — ONE quiet blue, used sparingly */
  --accent: #2347e5;
  --accent-ink: #1b2e9e;
  --accent-soft: rgba(35, 71, 229, 0.07);

  /* Semantic */
  --green: #0e9f6e;  --green-soft: rgba(14, 159, 110, 0.10);
  --amber: #c77700;  --amber-soft: rgba(199, 119, 0, 0.10);
  --red:   #dc2626;  --red-soft:   rgba(220, 38, 38, 0.08);
  --violet:#6d4ae0;  --violet-soft:rgba(109, 74, 224, 0.10);

  /* Task-status system — lightness-equalized (OKLCH; hex fallback first).
     Deep semantic text on a soft tint + hairline. No status may visually shout;
     Blocked is the only warm-red signal on a board. */
  --st-new-ink: #4a5468;        --st-new-bg: #f1f3f7;
  --st-new-ink: oklch(0.44 0.05 260);      --st-new-bg: oklch(0.965 0.008 260);
  --st-planned-ink: #5b4a9e;    --st-planned-bg: #f3f1fa;
  --st-planned-ink: oklch(0.44 0.09 295);  --st-planned-bg: oklch(0.965 0.012 295);
  --st-ready-ink: #14707e;      --st-ready-bg: #edf6f7;
  --st-ready-ink: oklch(0.44 0.07 205);    --st-ready-bg: oklch(0.965 0.012 205);
  --st-progress-ink: #8a5a00;   --st-progress-bg: #faf4e8;
  --st-progress-ink: oklch(0.44 0.09 80);  --st-progress-bg: oklch(0.965 0.015 80);
  --st-blocked-ink: #b3261e;    --st-blocked-bg: #fbf0ef;
  --st-blocked-ink: oklch(0.44 0.13 28);   --st-blocked-bg: oklch(0.965 0.012 28);
  --st-review-ink: #1b2e9e;     --st-review-bg: #eff2fc;
  --st-review-ink: oklch(0.44 0.11 268);   --st-review-bg: oklch(0.965 0.012 268);
  --st-done-ink: #0c7a55;       --st-done-bg: #eef7f2;
  --st-done-ink: oklch(0.44 0.08 160);     --st-done-bg: oklch(0.965 0.012 160);
  --st-cancelled-ink: #8a847b;  --st-cancelled-bg: #f4f3f1;
  --st-cancelled-ink: oklch(0.58 0.008 80);--st-cancelled-bg: oklch(0.96 0.003 80);

  /* Radii */
  --r-1: 5px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 22px;

  /* Shadows — soft elevation, never glows */
  --shadow-1: 0 1px 2px rgba(20, 17, 15, 0.04);
  --shadow-2: 0 10px 34px -14px rgba(20, 17, 15, 0.12);
  --shadow-pop: 0 28px 70px -22px rgba(20, 17, 15, 0.20);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;      /* headlines, 400–500, tight tracking */
  --font-sans: "Inter", system-ui, sans-serif;      /* UI/body 16px/1.6 */
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; /* machine artifacts */
}

/* ── 2. COMPONENTS (SonIQ Light — verbatim) ────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-warm); color: var(--ink-2);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 450; color: var(--ink); letter-spacing: -0.02em; }
h1 { font-size: 34px; line-height: 1.15; } h2 { font-size: 26px; } h3 { font-size: 20px; }
.mono, code { font-family: var(--font-mono); }
.eyebrow { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-muted); }
.eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer;
  font: 500 14.5px var(--font-sans); text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2a2520; }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn-lg { height: 48px; padding: 0 22px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Badges + status pills */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); font: 11.5px/1 var(--font-mono);
}
/* Fixed integral pill height (fenix pattern): (22-6)/2 = 8px — dot center never
   lands on a half-pixel, so it can't drift against text at any zoom level. */
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-green { color: var(--green); background: var(--green-soft); }
.badge-amber { color: var(--amber); background: var(--amber-soft); }
.badge-red { color: var(--red); background: var(--red-soft); }
.badge-violet { color: var(--violet); background: var(--violet-soft); }
.badge-accent { color: var(--accent-ink); background: var(--accent-soft); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; max-width: 100%;
  border-radius: 999px; border: 1px solid var(--line); font: 11.5px/1 var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new       { color: var(--st-new-ink);       background: var(--st-new-bg); }
.st-planned   { color: var(--st-planned-ink);   background: var(--st-planned-bg); }
.st-ready     { color: var(--st-ready-ink);     background: var(--st-ready-bg); }
.st-progress  { color: var(--st-progress-ink);  background: var(--st-progress-bg); }
.st-blocked   { color: var(--st-blocked-ink);   background: var(--st-blocked-bg); }
.st-review    { color: var(--st-review-ink);    background: var(--st-review-bg); }
.st-done      { color: var(--st-done-ink);      background: var(--st-done-bg); }
.st-cancelled { color: var(--st-cancelled-ink); background: var(--st-cancelled-bg); text-decoration: line-through; }

/* Soon badge — the ONLY marker for not-yet-live controls */
.soon {
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px;
  border-radius: 999px; border: 1px dashed var(--line-strong);
  font: 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); background: var(--bg-soft);
}
.soon::before { content: "◷"; font-size: 11px; }

/* Pill rows must wrap, never break the card (containment rule) */
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* Cards */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); padding: 20px; box-shadow: var(--shadow-1); }
.card-elev { box-shadow: var(--shadow-2); }

/* Inputs */
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; color: var(--ink); font-weight: 500; }
.field .hint { font-size: 12.5px; color: var(--ink-muted); }
.input {
  height: 42px; padding: 0 12px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-2); font: 14.5px var(--font-sans);
}
.input:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(35,71,229,.12); }
.input.mono { font-family: var(--font-mono); }
input[type="checkbox"] { accent-color: var(--accent); }

/* Segmented */
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: var(--r-2); }
.segmented button {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 6px;
  font: 500 13.5px var(--font-sans); color: var(--ink-muted); cursor: pointer;
}
.segmented button.active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-1); }

/* Table */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--bg); }
table.t { width: 100%; border-collapse: collapse; }
table.t th { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover { background: var(--bg-warm); }

/* Modal / toast */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,17,15,.4); backdrop-filter: blur(2px); display: grid; place-items: center; }
.modal { width: min(520px, calc(100vw - 32px)); background: var(--bg); border-radius: var(--r-4); box-shadow: var(--shadow-pop); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
.toast { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-pop); font-size: 14.5px; }
.toast.success { color: var(--green); }

/* Avatar */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 500 11px var(--font-mono); width: 28px; height: 28px; }

/* CMD block — light terminal */
.cmd { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 14px; font: 13.5px var(--font-mono); color: var(--ink); }
.cmd .copy { flex: none; }

/* ── Async-state kit (quality contract) ── */
@keyframes sk-shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
.sk { border-radius: var(--r-1); background: linear-gradient(90deg, var(--bg-soft) 25%, #e6e5df 50%, var(--bg-soft) 75%); background-size: 400px 100%; animation: sk-shimmer 1.2s linear infinite; }
.sk-line { height: 12px; } .sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; }
.sk-block { height: 72px; }
.sk-card { height: 120px; border-radius: var(--r-3); }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

.empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--ink-muted); }
.empty .icon { width: 40px; height: 40px; border-radius: var(--r-2); background: var(--bg-soft); display: grid; place-items: center; }
.empty h4 { margin: 0; font: 500 16px var(--font-sans); color: var(--ink); }

.error-state { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; background: var(--red-soft); border: 1px solid rgba(220,38,38,.2); border-radius: var(--r-3); color: var(--red); }

/* ════════════════════════════════════════════════════════════════════════
   3. SLICE-0 ADDITIONS — authed shell + async-kit gaps.
   Additive only. No token or component above is redefined.
   ════════════════════════════════════════════════════════════════════════ */

/* Global visible focus (Quality Contract #5). Complements .btn/.input rules. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1);
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--r-2);
  font: 500 13.5px var(--font-sans); text-decoration: none; transition: top .1s;
}
.skip-link:focus-visible { top: 12px; }

/* ── Async-kit gaps named by the slice card ── */
/* Skeleton pill — for count badges (e.g. sidebar project count) */
.sk-pill { width: 24px; height: 16px; border-radius: 999px; }
/* Skeleton board column — header line + card blocks inside a hairline shell */
.sk-col {
  width: 264px; display: grid; gap: 10px; align-content: start;
  padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3);
}
/* Inline mini empty (rows, panels) */
.empty-mini {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px dashed var(--line-2); border-radius: var(--r-2);
  color: var(--ink-muted); font-size: 13.5px;
}
.error-state h4 { margin: 0; font: 500 16px var(--font-sans); }
.error-state p { margin: 0; font-size: 13.5px; }

/*  renderState contract (Quality Contract #1–2) — implementation lives per
    page; the pattern is fixed here:

      renderState(host, state)
        state ∈ 'loading' | 'empty' | 'error' | 'data'

    Rules:
    1. Exactly ONE state is in the DOM at any moment; never blend or fake one
       as another. 'empty' renders ONLY after a confirmed empty response.
    2. 'loading' = skeleton of the FUTURE content (.sk kit) within 100ms of
       navigation — not a spinner, not blank, not the empty state.
    3. 'error' = .error-state with a working Retry that returns to 'loading'.
    4. Progressive data: anything already known renders as data immediately;
       only the missing parts skeleton.                                       */

/* ── Icon button (topbar / session footer) ── */
.icon-btn {
  position: relative; width: 32px; height: 32px; flex: none;
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-2);
  color: var(--ink-muted); cursor: pointer; transition: background .15s;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--ink); }
/* Corner-anchored Soon marker (same .soon component, glyph-only) */
.soon.soon-corner { position: absolute; top: -8px; right: -8px; padding: 1px 4px; }

/* ── Shell layout ── */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }

/* Sidebar — 240px, sticky, right hairline */
.sidebar {
  position: sticky; top: 0; height: 100vh; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bg); border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 56px; padding: 0 16px; text-decoration: none; color: var(--ink);
}
.brand-mark {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-name { font: 600 15px var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; }

.side-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.side-section-title {
  font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); padding: 16px 10px 6px; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border-radius: var(--r-2); color: var(--ink-muted); text-decoration: none;
  font: 500 14px var(--font-sans); min-width: 0; transition: background .15s, color .15s;
}
.nav-item svg { flex: none; color: var(--ink-faint); }
.nav-item:hover { background: var(--bg-soft); color: var(--ink); }
.nav-item:hover svg { color: var(--ink-muted); }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
  flex: none; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font: 11px var(--font-mono); color: var(--ink-muted);
}
/* Active — variant A (canon on dashboard): accent tint + inset hairline */
.nav-item.active, .nav-item[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(35, 71, 229, .16);
}
.nav-item.active svg, .nav-item[aria-current="page"] svg { color: var(--accent); }
.nav-item.active .nav-count, .nav-item[aria-current="page"] .nav-count {
  background: var(--bg); border-color: rgba(35, 71, 229, .2); color: var(--accent-ink);
}
/* Inert item (Help links, not yet live): rendered, not focusable, Soon-marked */
.nav-item.inert { cursor: default; }
.nav-item.inert:hover { background: transparent; color: var(--ink-muted); }
.nav-item.inert:hover svg { color: var(--ink-faint); }

/* (Nav active variants B/C + compact density removed — variant A accepted as canon, 36px rows.) */

/* Dev-only styleguide link */
.dev-link {
  display: flex; align-items: center; gap: 8px; margin: 4px 12px; padding: 6px 10px;
  border-radius: var(--r-2); text-decoration: none;
  font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint);
}
.dev-link:hover { background: var(--bg-soft); color: var(--ink-muted); }

/* Session footer — containment-tested for long names/emails */
.session {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0;
}
.session-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.session-name {
  font: 500 13px var(--font-sans); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-email {
  font: 11px var(--font-mono); color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Topbar — 56px, sticky, translucent blur, bottom hairline */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: rgba(246, 245, 241, .85); /* = bg-warm; keep in sync */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.crumbs { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 60px; font-size: 13.5px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-faint); flex: none; }
.crumbs .current { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }

/* Main */
.main { padding: 36px 40px 64px; min-width: 0; }
.main-inner { max-width: 1040px; margin: 0 auto; display: grid; gap: 24px; align-content: start; }
.page-head { display: grid; gap: 8px; }
.page-head .sub { margin: 0; font-size: 15px; color: var(--ink-muted); max-width: 60ch; text-wrap: pretty; }

/* Sidebar collapse <880px — icon rail */
@media (max-width: 880px) {
  .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { overflow: visible; }
  .brand { justify-content: center; padding: 0; }
  .brand-name { display: none; }
  .side-nav { padding: 4px 10px 10px; }
  .side-section-title { padding: 14px 0 6px; text-align: center; overflow: hidden; }
  .nav-item { justify-content: center; padding: 0; gap: 0; }
  .nav-label, .nav-count { display: none; }
  .dev-link { justify-content: center; }
  .dev-link .nav-label { display: none; }
  .session { justify-content: center; padding: 12px 8px; }
  .session-info { display: none; }
  .main { padding: 28px 20px 56px; }
}

/* ════════════════════════════════════════════════════════════════════════
   4. SLICE-1 ADDITIONS — kanban curation board + task drawer.
   Additive only; no token or component above is redefined.
   ════════════════════════════════════════════════════════════════════════ */

/* Full-width main for board pages */
.main--board { padding: 28px 28px 56px; }
.board-wrap { display: grid; gap: 18px; }
.board-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Switch (Show cancelled) */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink-muted); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 34px; height: 20px; flex: none; position: relative; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-2); transition: background .15s, border-color .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); transition: left .15s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { left: 15px; border-color: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; } }

/* Toolbar (search + filters) */
.board-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-search { height: 36px; width: 260px; max-width: 100%; font-size: 13.5px; }
.toolbar-spacer { flex: 1; }

/* ── Board scroll model (research-backed): on board pages the SHELL is locked
   to the viewport, the board scrolls HORIZONTALLY, and each column scrolls its
   own card list VERTICALLY. Column heads, toolbar and topbar never move.
   Ancestors are height-locked via :has() so the chain from viewport to board
   has a definite height; descendants are scoped through .main--board. ── */
.shell:has(.main--board) { height: 100vh; overflow: hidden; }
.shell:has(.main--board) > div { min-height: 0; }         /* content column */
.shell:has(.main--board) .topbar { flex: none; }
.main--board { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.main--board .board-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.main--board .page-head, .main--board .board-toolbar { flex: none; }

/* Board — horizontal strip of column shells (shells match .sk-col skeletons).
   overflow-x scrolls columns; overflow-y hidden — vertical lives per column. */
.board { flex: 1; min-height: 0; display: flex; gap: 14px; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; }
.board .sk-col { width: 280px; flex: none; align-self: flex-start; }
.col { width: 280px; flex: none; max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); }
.col-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px; min-width: 0; }
/* Card list — the ONLY vertical scroller on the board (per-column). */
.col-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding-right: 2px; }
.col-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-faint); }
.col-name { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-count { margin-left: auto; flex: none; font: 11px var(--font-mono); color: var(--ink-faint); }
.col-empty { padding: 22px 0; text-align: center; color: var(--ink-faint); font: 13px var(--font-mono); }
.drafts-label { font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); padding: 4px 2px 0; }

/* Task card — title + ≤3 meta elements (v1 recipe); cream on white shell */
.task-card { display: grid; gap: 10px; width: 100%; text-align: left; padding: 12px; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.task-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.task-card.draft { background: var(--bg); border: 1px dashed var(--line-strong); }
.task-title { font: 500 14px/1.45 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.task-id { margin-left: auto; font: 11px var(--font-mono); color: var(--ink-faint); white-space: nowrap; }

/* Type pills + draft pill + priority + tag chips */
.tp { display: inline-flex; padding: 2px 7px; border-radius: var(--r-1); font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.tp-task { color: var(--accent-ink); background: var(--accent-soft); }
.tp-epic { color: var(--violet); background: var(--violet-soft); }
.tp-bug  { color: var(--red); background: var(--red-soft); }
.draft-pill { display: inline-flex; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--line-strong); font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); background: transparent; }
.prio { display: inline-flex; align-items: center; gap: 5px; font: 11px var(--font-mono); color: var(--ink-muted); }
.prio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.prio-high::before { background: var(--red); }
.prio-medium::before { background: var(--amber); }
.prio-low::before { background: var(--ink-faint); }
.tag { display: inline-flex; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font: 11px var(--font-mono); color: var(--ink-muted); background: var(--bg-soft); }

/* Task drawer — right overlay, ~480px, instant header + per-section skeletons */
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(20, 17, 15, .32); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(480px, calc(100vw - 24px)); background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.drawer[hidden], .drawer-backdrop[hidden], .modal-backdrop[hidden] { display: none; }
.modal-backdrop { z-index: 50; }
.drawer-head { flex: none; display: grid; gap: 10px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.drawer-idrow { display: flex; align-items: center; gap: 6px; font: 11.5px var(--font-mono); color: var(--ink-faint); min-width: 0; }
.drawer-idrow .icon-btn { width: 26px; height: 26px; }
.drawer-idrow .close { margin-left: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; gap: 22px; align-content: start; }
.drawer-sec { display: grid; gap: 8px; min-width: 0; }
.sec-label { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.drawer-sec p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.drawer-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); display: grid; gap: 4px; }
.drawer-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.drawer-foot .spacer { flex: 1; }

/* File chips */
.file-list { display: grid; gap: 6px; }
.file-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-soft); border-radius: var(--r-1); font: 12px var(--font-mono); color: var(--ink-2); min-width: 0; }
.file-chip svg { flex: none; color: var(--ink-faint); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Meta grid */
.meta-grid { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.meta-grid dt { color: var(--ink-faint); font: 11.5px var(--font-mono); padding-top: 1px; }
.meta-grid dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* History timeline */
.tl { display: grid; }
.tl-i { position: relative; padding: 0 0 14px 20px; }
.tl-i::before { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-faint); }
.tl-i.accent::before { border-color: var(--accent); }
.tl-i::after { content: ""; position: absolute; left: 5px; top: 16px; bottom: 3px; width: 1px; background: var(--line); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i:last-child::after { display: none; }
.tl-who { font: 12.5px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.tl-who .tl-kind { color: var(--ink-muted); font-family: var(--font-sans); }
.tl-when { font: 11px var(--font-mono); color: var(--ink-faint); margin-top: 1px; }
.tl-body { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-top: 3px; overflow-wrap: anywhere; }

/* Comment composer (live POST /tasks/:id/history) */
.composer { display: flex; gap: 8px; }
.composer .input { flex: 1; height: 36px; font-size: 13.5px; min-width: 0; }

/* Soon-marked buttons: badge visible BEFORE click; hover stays inert */
.btn[data-soon] { cursor: default; }
.btn[data-soon] .soon { margin-right: -6px; }
.btn-secondary[data-soon]:hover { background: var(--bg); }
.btn-ghost[data-soon]:hover { background: transparent; }

/* Form bits (create-task modal) */
.form-grid { display: grid; gap: 14px; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input.area { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; font: 14.5px/1.5 var(--font-sans); }
select.input { cursor: pointer; }
.collapse { border: 1px solid var(--line); border-radius: var(--r-2); }
.collapse summary { cursor: pointer; padding: 10px 12px; font: 500 13.5px var(--font-sans); color: var(--ink-muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.collapse summary::-webkit-details-marker { display: none; }
.collapse summary::before { content: "+"; font-family: var(--font-mono); color: var(--ink-faint); }
.collapse[open] summary::before { content: "–"; }
.collapse .collapse-body { padding: 0 12px 12px; display: grid; gap: 12px; }

/* Toast host */
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 8px; justify-items: end; }

/* ── 4b. Epic-model revision — epics are CONTAINERS, never status-column cards.
   Flat: epic filter-chips row. Group by epic: swimlanes with 2-axis scroll. ── */

/* Epic filter chips (flat view) */
.chip-row { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.chip-row[hidden] { display: none; }
.chip-row .row-label { flex: none; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-right: 2px; }
.epic-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 380px; padding: 4px 7px 4px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font: 500 12.5px var(--font-sans); color: var(--ink-2); min-width: 0; transition: border-color .15s, background .15s; }
.epic-chip:hover { border-color: var(--line-strong); }
.epic-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: rgba(35, 71, 229, .35); color: var(--accent-ink); }
.epic-chip .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epic-chip .cnt { flex: none; font: 11px var(--font-mono); color: var(--ink-faint); }
.epic-chip .status-pill { flex: none; }
@media (prefers-reduced-motion: reduce) { .epic-chip { transition: none; } }

/* Swimlane board — ONE scroll container on BOTH axes (different model from flat:
   no per-column/per-cell scroll; cells grow, lanes stack). Sticky: status heads
   top, lane heads left, corner both. */
.board--swim { overflow: hidden; }
.swim { flex: 1 1 auto; min-width: 0; min-height: 0; align-self: stretch; overflow: auto; display: grid; align-content: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); }
.swim-corner { position: sticky; top: 0; left: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 12px; font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); display: flex; align-items: flex-end; }
.swim-colhead { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line-2); padding: 12px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.swim-lanehead { position: sticky; left: 0; z-index: 1; background: var(--bg); border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line); padding: 12px; display: grid; gap: 7px; align-content: start; justify-items: start; text-align: left; min-width: 0; font: inherit; color: inherit; }
button.swim-lanehead { cursor: pointer; }
button.swim-lanehead:hover { background: var(--bg-warm); }
.lane-title { font: 500 13.5px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.lane-break { font: 11px var(--font-mono); color: var(--ink-faint); line-height: 1.6; overflow-wrap: anywhere; }
.swim-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; display: grid; gap: 8px; align-content: start; min-width: 0; }

/* Epic drawer bits */
.part-of { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: 0; cursor: pointer; font: 500 12.5px var(--font-sans); color: var(--accent-ink); text-align: left; min-width: 0; max-width: 100%; }
.part-of[hidden] { display: none; }
.part-of:hover { text-decoration: underline; }
.part-of .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 12px var(--font-mono); color: var(--ink-muted); }
.mini-bar { height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.breakdown { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11.5px var(--font-mono); color: var(--ink-muted); }
.breakdown b { color: var(--ink); font-weight: 500; }
.child-group { display: grid; gap: 6px; }
.child-group .sec-sub { font: 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); padding-top: 4px; }
.child-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; font: inherit; color: inherit; min-width: 0; transition: border-color .15s; }
.child-row:hover { border-color: var(--line-strong); }
.child-row .t { flex: 1; min-width: 0; font: 500 13px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.child-row .task-id { margin-left: 0; flex: none; }
@media (prefers-reduced-motion: reduce) { .child-row { transition: none; } }

/* ════════════════════════════════════════════════════════════════════════
   4c. SLICE-2 ADDITIONS — project health / overview page.
   Additive only; no token or component above is redefined.
   ════════════════════════════════════════════════════════════════════════ */

/* Project header block */
.proj-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.proj-avatar { flex: none; width: 52px; height: 52px; border-radius: var(--r-3); background: var(--ink); color: #fff; display: grid; place-items: center; font: 500 18px var(--font-mono); letter-spacing: .02em; }
.proj-id { flex: 1; min-width: 0; display: grid; gap: 6px; }
.proj-id h1 { margin: 0; font-size: 30px; line-height: 1.1; }
.proj-path-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.proj-path { font: 12.5px var(--font-mono); color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.proj-actions { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { display: grid; gap: 10px; align-content: start; padding: 18px 18px 20px; }
.stat-label { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.stat-value { font: 600 30px/1 var(--font-sans); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value.mono { font: 500 18px/1.2 var(--font-mono); }
.stat-sub { font: 11.5px var(--font-mono); color: var(--ink-faint); }
.cov-bar { height: 5px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.cov-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }
@media (prefers-reduced-motion: reduce) { .cov-bar i { transition: none; } }

/* Page two-column layout (health page) */
.proj-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.proj-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 16px; }
.panel-head .meta { font: 11.5px var(--font-mono); color: var(--ink-faint); }
.panel-body { padding: 16px 18px; }

/* KO-by-type breakdown */
.ko-list { display: grid; gap: 11px; }
.ko-row { display: grid; grid-template-columns: 12px minmax(120px, 200px) 44px 1fr; align-items: center; gap: 12px; min-width: 0; }
.ko-dot { width: 8px; height: 8px; border-radius: 50%; }
.ko-name { font: 12.5px var(--font-mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-count { font: 12.5px var(--font-mono); color: var(--ink); text-align: right; }
.ko-track { height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.ko-track i { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--line-strong); }

/* Rescan panel — deliberately prominent so the Soon button never reads as a dead end */
.panel.rescan { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.rescan .lead { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; }

/* Field with inline Copy (MCP endpoint) */
.field-copy { display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-2); padding: 6px 6px 6px 12px; min-width: 0; }
.field-copy .val { flex: 1; min-width: 0; font: 13px var(--font-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Project-health card (Soon surface — KO lifecycle metrics the payload doesn't return yet) */
.health-rows { display: grid; gap: 14px; }
.health-row { display: grid; gap: 8px; }
.health-row .hr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.health-row .hr-name { font: 12.5px var(--font-sans); font-weight: 500; color: var(--ink); }
.health-row .hr-note { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
/* KO-status legend chips — their OWN quiet tint set (NOT the task-status palette) */
.ko-status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ko-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font: 11px var(--font-mono); border: 1px solid var(--line); }
.ko-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kos-structural    { color: #5a6270; background: #f2f3f6; }
.kos-active        { color: #2f7d5b; background: #eef6f1; }
.kos-needs_revision{ color: #9a6a12; background: #f9f3e8; }
.kos-retired       { color: #8a847b; background: #f4f3f1; }
/* Placeholder track for a Soon metric (no data → muted, no numbers) */
.soon-track { height: 6px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--bg-soft) 0 8px, transparent 8px 14px); border: 1px dashed var(--line-2); }

/* ════════════════════════════════════════════════════════════════════════
   4d. SLICE-3 ADDITIONS — dashboard / projects grid (the authed home).
   Additive only; reuses .stat-value, .tag, async kit. No token redefinition.
   ════════════════════════════════════════════════════════════════════════ */

/* Page head with right-aligned actions */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.home-head .lead { display: grid; gap: 8px; min-width: 0; }
.home-head .lead .sub { margin: 0; }
.home-actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Projects toolbar */
.proj-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-toolbar .board-search { flex: 1; min-width: 200px; max-width: 340px; }
.proj-count { margin-left: auto; flex: none; font: 12px var(--font-mono); color: var(--ink-faint); }

/* Projects grid — 2-up wide, 1-up narrow */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .proj-grid { grid-template-columns: minmax(0, 1fr); } }

/* Project card — the WHOLE card is the link */
.pcard { display: grid; gap: 14px; align-content: start; padding: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.pcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcard-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pcard-avatar { flex: none; width: 40px; height: 40px; border-radius: var(--r-2); background: var(--ink); color: #fff; display: grid; place-items: center; font: 500 14px var(--font-mono); }
.pcard-id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pcard-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard-name { font: 500 16px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pcard-path { font: 12px var(--font-mono); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pcard-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* Stats strip inside a card (reuses .stat-value / .stat-label) */
.pcard-stats { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.pstat { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pstat .stat-value { font-size: 22px; font-variant-numeric: tabular-nums; }
.pstat .stat-value .suffix { font: 12px var(--font-mono); color: var(--ink-faint); letter-spacing: 0; }
.pstat .stat-value.mono { font-size: 13.5px; }
.pcard .cov-bar { margin-top: 1px; }
/* Freshness badge (watcher live/down) inside a stat cell — grid items default
   to justify-items:stretch, which would blow a pill badge full-width; both the
   pcard "Last changed" slot and the project-detail stat-card reuse .badge
   unmodified, just constrained to its own width here. task_1783929383009_80b478e1 */
.pstat .badge, .stat-card .badge { justify-self: start; }

/* Scan-state badge (reuses badge look; scanning = amber pulse-free) */
.scan-badge { flex: none; }

/* No-matches micro-state (distinct from onboarding empty) */
.no-matches { padding: 36px 20px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-2); border-radius: var(--r-3); display: grid; gap: 6px; justify-items: center; }
.no-matches h4 { margin: 0; font: 500 15px var(--font-sans); color: var(--ink); }
.no-matches p { margin: 0; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   4e. SLICE-4 ADDITIONS — shell globals: approvals bell + drawer, value
   widget, feedback modal. Injected by shell.js on every authed page.
   Additive only; reuses drawer shell, status tints, .stat-value, Soon badge.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Approvals bell (mounts into #topbar-bell-slot) ── */
.bell { position: relative; }
.bell-count {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff; font: 600 10.5px var(--font-mono);
  border: 2px solid var(--bg-warm); box-sizing: content-box;
}
.bell-dot { /* loading / error affordance on the count position */
  position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--bg-warm); box-sizing: content-box;
}
.bell-dot.loading { background: var(--line-strong); animation: bell-pulse 1.2s ease-in-out infinite; }
.bell-dot.error { background: var(--amber); }
@keyframes bell-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bell-dot.loading { animation: none; opacity: .6; } }

/* ── Approvals drawer (reuses .drawer shell; own ids, higher z) ── */
#ap-backdrop { z-index: 70; }
#ap-drawer { z-index: 71; }
.ap-head-row { display: flex; align-items: center; gap: 10px; }
.ap-head-row h3 { margin: 0; font-size: 19px; }
/* Dev-only bell-state switch — inside the drawer head (kept out of the topbar) */
.ap-dev-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ap-dev-label { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); flex: none; }
#ap-dev button { padding: 4px 9px; font-size: 12px; }
.ap-head-count { font: 11.5px var(--font-mono); color: var(--ink-faint); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }
.ap-list { display: grid; gap: 12px; }

/* Approval row */
.ap-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-warm); min-width: 0; }
.ap-row.expired { opacity: .6; background: var(--bg-soft); }
.ap-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ap-reason { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font: 11px var(--font-mono); border: 1px solid var(--line); white-space: nowrap; }
.ap-reason::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ap-reason.destructive { color: var(--st-blocked-ink); background: var(--st-blocked-bg); }
.ap-reason.cost_threshold { color: var(--st-progress-ink); background: var(--st-progress-bg); }
.ap-reason.permission_mode { color: var(--st-planned-ink); background: var(--st-planned-bg); }
.ap-cost { margin-left: auto; font: 500 14px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ap-summary { font: 14px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.ap-tool { font: 12px var(--font-mono); color: var(--ink-muted); overflow-wrap: anywhere; }
.ap-expiry { display: inline-flex; align-items: center; gap: 6px; font: 11.5px var(--font-mono); color: var(--ink-faint); }
.ap-expiry svg { flex: none; }
.ap-expiry.exp-warn { color: var(--amber); }
.ap-expiry.exp-crit { color: var(--red); }
.ap-expired-tag { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

/* Details disclosure — contained, scrollable JSON (Quality Contract #3) */
.ap-details { border-top: 1px solid var(--line); padding-top: 10px; }
.ap-details summary { cursor: pointer; list-style: none; font: 11.5px var(--font-mono); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.ap-details summary::-webkit-details-marker { display: none; }
.ap-details summary::before { content: "▸"; color: var(--ink-faint); }
.ap-details[open] summary::before { content: "▾"; }
.ap-args { margin-top: 8px; max-height: 200px; overflow: auto; background: var(--bg-ink); color: #e8e6e1; border-radius: var(--r-1); padding: 12px; font: 12px/1.55 var(--font-mono); white-space: pre; }
.ap-args.loading { color: var(--ink-faint); background: var(--bg-soft); white-space: normal; }

/* Decide actions */
.ap-actions { display: flex; align-items: center; gap: 8px; }
.ap-actions .spacer { flex: 1; }
.ap-reason-field { display: grid; gap: 6px; }
.ap-reason-field textarea { min-height: 60px; }
.ap-inline-note { font: 11.5px var(--font-mono); color: var(--amber); display: flex; align-items: center; gap: 6px; }

/* Row exit animation (suppressed under reduced-motion) */
.ap-row.leaving { animation: ap-slide-out .28s ease forwards; }
@keyframes ap-slide-out { to { opacity: 0; transform: translateX(16px); height: 0; margin: 0; padding: 0; border-width: 0; } }
@media (prefers-reduced-motion: reduce) { .ap-row.leaving { animation: none; display: none; } }

/* ── Value widget — sidebar footer card, above session (Soon surface) ── */
.value-card {
  flex: none; margin: 10px 12px 0; padding: 12px; border: 1px dashed var(--line-2);
  border-radius: var(--r-2); background: var(--bg-warm); display: grid; gap: 6px;
}
.value-card .vc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.value-card .vc-title { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.value-card .vc-label { font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 880px) {
  .value-card { margin: 8px 8px 0; padding: 8px; justify-items: center; }
  .value-card .vc-label, .value-card .vc-title { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   4f. SLICE-5 ADDITIONS — usage · api-keys · settings re-skin.
   Additive only; reuses .stat-grid/.stat-value, .table, .modal, .segmented,
   status tints, Soon badge, async kit. No token/component redefinition.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared page head with actions + range/segment ── */
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* KPI card icon+label row (reuses .stat-card / .stat-value) */
.stat-label-row { display: flex; align-items: center; gap: 7px; }
.stat-label-row svg { flex: none; color: var(--ink-faint); }

/* ── Usage charts ── */
.chart-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); padding: 18px; display: grid; gap: 14px; align-content: start; }
.chart-card h3 { margin: 0; font-size: 15px; }
.chart-svg { width: 100%; height: 160px; display: block; }
.chart-svg .grid-line { stroke: var(--line); stroke-width: 1; }
.chart-svg .cost-area { fill: var(--accent-soft); }
.chart-svg .cost-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart-x { display: flex; justify-content: space-between; font: 10.5px var(--font-mono); color: var(--ink-faint); }
/* Breakdown bar — 5 lightness-equalized semantic segments */
.breakdown-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); }
.breakdown-bar span { height: 100%; }
.bd-legend { display: grid; gap: 8px; }
.bd-item { display: flex; align-items: center; gap: 8px; font: 12px var(--font-mono); color: var(--ink-2); }
.bd-item .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bd-item .val { margin-left: auto; color: var(--ink-faint); }
.bd-1 { background: var(--st-review-ink); } .bd-1.sw { background: var(--st-review-ink); }
.bd-2 { background: var(--st-ready-ink); }  .bd-2.sw { background: var(--st-ready-ink); }
.bd-3 { background: var(--st-progress-ink); }.bd-3.sw { background: var(--st-progress-ink); }
.bd-4 { background: var(--st-done-ink); }    .bd-4.sw { background: var(--st-done-ink); }
.bd-5 { background: var(--st-planned-ink); } .bd-5.sw { background: var(--st-planned-ink); }

/* ── API keys ── */
.key-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-1); background: var(--bg-soft); border: 1px solid var(--line); font: 12.5px var(--font-mono); color: var(--ink); white-space: nowrap; }
.src-tag { font: 11.5px var(--font-mono); color: var(--ink-muted); }
.kebab { width: 30px; height: 30px; }
.keys-cap-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-2); background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.keys-cap-note svg { flex: none; }

/* Reveal modal */
.reveal-box { position: relative; }
.reveal-secret { font: 13px var(--font-mono); word-break: break-all; background: var(--bg-ink); color: #e8e6e1; border-radius: var(--r-2); padding: 14px; line-height: 1.5; }
.reveal-secret.blurred { filter: blur(7px); user-select: none; }
.reveal-cover { position: absolute; inset: 0; display: grid; place-items: center; }
.reveal-count { font: 11.5px var(--font-mono); color: var(--amber); display: inline-flex; align-items: center; gap: 6px; }
.ack-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.ack-row input { margin-top: 3px; }

/* ── Settings layout ── */
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 820px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static !important; } }
.settings-nav { position: sticky; top: 80px; display: grid; gap: 2px; align-content: start; }
.settings-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-2); text-decoration: none; color: var(--ink-muted); font: 500 13.5px var(--font-sans); border-left: 2px solid transparent; }
.settings-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.settings-nav a.active { background: var(--accent-soft); color: var(--accent-ink); }
.settings-nav a.danger.active { background: var(--red-soft); color: var(--red); }
.settings-sections { display: grid; gap: 36px; min-width: 0; }
.set-section { display: grid; gap: 16px; scroll-margin-top: 76px; }
.set-section > header { display: grid; gap: 4px; }
.set-section > header h2 { margin: 0; font-size: 20px; }
.set-section > header .desc { font-size: 13.5px; color: var(--ink-muted); }
.set-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); padding: 20px; display: grid; gap: 16px; }
.set-card.danger { border-color: rgba(220,38,38,.28); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.set-row .set-row-main { min-width: 0; display: grid; gap: 3px; }
.set-row .set-row-main .t { font: 500 14px var(--font-sans); color: var(--ink); }
.set-row .set-row-main .s { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; font-size: 22px; }
.verified { display: inline-flex; align-items: center; gap: 5px; font: 11px var(--font-mono); color: var(--green); }
.form-actions { display: flex; align-items: center; gap: 10px; }

/* Soon panel (sessions, etc.) — honest "coming" surface, no fake rows */
.soon-panel { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.soon-panel .icon { width: 38px; height: 38px; border-radius: var(--r-2); background: var(--bg-soft); display: grid; place-items: center; color: var(--ink-faint); }
.soon-panel h4 { margin: 0; font: 500 15px var(--font-sans); color: var(--ink); }
.soon-panel p { margin: 0; font-size: 13px; color: var(--ink-muted); max-width: 44ch; }

/* Provider row (connected accounts) */
.provider { display: flex; align-items: center; gap: 12px; min-width: 0; }
.provider .pv-mark { width: 34px; height: 34px; border-radius: var(--r-2); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; font: 600 13px var(--font-mono); color: var(--ink); flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   5. SLICE-6a ADDITIONS — public marketing: landing + pricing.
   Public pages have NO sidebar: own topnav + footer + CTA-band (shared).
   Additive only; tokens/.btn/.badge/.card/.cmd/mono/focus rings from canon.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Public top nav (sticky, translucent-blur, hairline) ── */
.topnav { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); background: rgba(246, 245, 241, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topnav-links { flex: 1; display: flex; align-items: center; gap: 4px; }
.topnav-links a, .topnav-links .inert-link { padding: 7px 12px; border-radius: var(--r-2); text-decoration: none; font: 500 14px var(--font-sans); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.topnav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.topnav-links a.active { color: var(--ink); background: var(--bg-soft); }
.topnav-cta { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .topnav { gap: 14px; } .topnav-links a:not(.active), .topnav-links .inert-link { display: none; } }

/* ── Page container ── */
.pub-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pub-section { padding: 72px 0; }
.pub-section.tight { padding: 48px 0; }
.pub-h2 { margin: 0; font-size: 32px; }
.pub-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 40px; }
.pub-head .sub { margin: 0; font-size: 15.5px; color: var(--ink-muted); text-wrap: pretty; }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 0 64px; }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; gap: 40px; } }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy h1 { margin: 0; font-size: clamp(38px, 5vw, 54px); line-height: 1.08; }
.hero-copy h1 em { font-style: italic; color: var(--accent-ink); }
.hero-copy .lede { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-muted); max-width: 54ch; text-wrap: pretty; }
.hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero .cmd { width: min(440px, 100%); }

/* Hero visual — light code panel + floating KO card + hairline trail */
.hero-visual { position: relative; min-width: 0; padding-bottom: 84px; }
.code-panel { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-2); overflow: hidden; }
.code-panel-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.code-panel-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.code-panel-bar .ttl { margin-left: 6px; font: 11px var(--font-mono); color: var(--ink-faint); }
.code-lines { padding: 16px 18px; display: grid; gap: 7px; font: 12.5px/1.55 var(--font-mono); color: var(--ink-2); }
.code-lines .c-cmd { color: var(--ink); }
.code-lines .c-cmd::before { content: "$ "; color: var(--ink-faint); }
.code-lines .c-ok { color: var(--green); }
.code-lines .c-mut { color: var(--ink-muted); }
.code-lines .c-key { color: var(--accent-ink); }
.ko-float { position: absolute; right: 0; bottom: 0; width: min(300px, 86%); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); padding: 14px 16px; display: grid; gap: 10px; }
.ko-float .ko-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ko-float .ko-title { font: 500 13.5px var(--font-sans); color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-float .ko-meta { font: 11px var(--font-mono); color: var(--ink-faint); }
.ko-float .ko-row { display: flex; align-items: center; gap: 8px; font: 12px var(--font-mono); color: var(--ink-2); min-width: 0; }
.ko-float .ko-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-trail { position: absolute; right: 150px; bottom: 64px; width: 1px; height: 56px; background: var(--line-strong); }
@media (max-width: 1000px) { .hero-trail { display: none; } }

/* ── Proof strip ── */
.proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .lbl { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-right: 4px; }
.proof-chip { display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px var(--font-sans); color: var(--ink-2); background: var(--bg); }
.proof .ver { margin-left: auto; font: 11.5px var(--font-mono); color: var(--ink-faint); }

/* ── Problem contrast cards ── */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }
.contrast-card { border-radius: var(--r-3); border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-1); padding: 24px; display: grid; gap: 14px; align-content: start; }
.contrast-card.bad { background: linear-gradient(180deg, var(--red-soft), var(--bg) 60%); }
.contrast-card.good { background: linear-gradient(180deg, var(--accent-soft), var(--bg) 60%); }
.contrast-tag { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.contrast-card.bad .contrast-tag { color: var(--red); }
.contrast-card.good .contrast-tag { color: var(--accent-ink); }
.contrast-card h3 { margin: 0; font-size: 19px; }
.contrast-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
/* mini diagrams */
.sess-diagram { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding-top: 6px; }
.sess-diagram .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--line-2); }
.sess-diagram .gap { flex: none; width: 18px; display: grid; place-items: center; font: 11px var(--font-mono); color: var(--red); }
.memory-bar { height: 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(35, 71, 229, .25); position: relative; }
.memory-bar::after { content: "KO graph"; position: absolute; right: 8px; top: -18px; font: 10px var(--font-mono); color: var(--accent-ink); }
.sess-feed { display: flex; gap: 6px; margin-bottom: 14px; }
.sess-feed .bar { flex: 1; height: 34px; border-radius: 4px; background: var(--accent-soft); border: 1px solid rgba(35, 71, 229, .18); }

/* ── How it works ── */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
.how-step { display: grid; gap: 12px; align-content: start; padding: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
.how-step .num { font: 450 26px var(--font-display); color: var(--ink-faint); }
.how-step h3 { margin: 0; font-size: 18px; }
.how-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.how-demo { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-2); }
.mono-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-1); background: var(--bg); border: 1px solid var(--line); font: 11px var(--font-mono); color: var(--ink-2); }

/* ── Features 4-up ── */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r-3); border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-soft), var(--bg) 55%); box-shadow: var(--shadow-1); }
.feature-card .f-ic { width: 34px; height: 34px; border-radius: var(--r-2); background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-ink); }
.feature-card h3 { margin: 0; font-size: 16px; }
.feature-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

/* ── CTA band ── */
.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.cta-inner { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 64px 24px; }
.cta-inner h2 { margin: 0; font-size: 34px; }
.cta-inner .fine { margin: 0; font-size: 14px; color: var(--ink-muted); }
.cta-inner .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Public footer ── */
.pub-footer { padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer-brand .tagline { margin: 0; font-size: 13px; color: var(--ink-muted); max-width: 30ch; text-wrap: pretty; }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col .col-ttl { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 4px; }
.footer-col a, .footer-col .inert-link { display: inline-flex; align-items: center; gap: 6px; font: 13.5px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-col .inert-link { cursor: default; }
.footer-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font: 11.5px var(--font-mono); color: var(--ink-faint); }

/* ── Pricing: plan cards ── */
.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto; align-items: stretch; }
@media (max-width: 760px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--r-4); border: 1px solid var(--line); background: var(--bg); }
/* equal-height pair: checklist absorbs the slack, CTA+fine-print pin to the bottom */
.plan-card .plan-list { flex: 1; align-content: start; }
.plan-card.featured { background: linear-gradient(180deg, var(--accent-soft), var(--bg) 45%); border-color: rgba(35, 71, 229, .25); box-shadow: var(--shadow-2); }
.plan-card.muted { color: var(--ink-muted); }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-head .p-ic { width: 36px; height: 36px; border-radius: var(--r-2); background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-ink); flex: none; }
.plan-head .p-name { font: 500 15px var(--font-sans); color: var(--ink); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price .amount { font: 500 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.plan-price .per { font: 13px var(--font-mono); color: var(--ink-faint); }
.plan-sub { margin: 0; font-size: 13px; color: var(--ink-muted); }
.plan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.plan-list li svg { flex: none; margin-top: 3px; color: var(--green); }
.plan-card.muted .plan-list li { color: var(--ink-muted); }
.plan-card.muted .plan-list li svg { color: var(--ink-faint); }
.plan-fine { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.55; }

/* Compare strip */
.compare-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); max-width: 880px; margin: 0 auto; }
.compare-strip .item { display: inline-flex; align-items: center; gap: 7px; font: 13px var(--font-sans); color: var(--ink-2); }
.compare-strip .item svg { color: var(--green); flex: none; }

/* ── FAQ accordion ── */
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font: 500 15px var(--font-sans); color: var(--ink); border-radius: var(--r-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq summary .mark { flex: none; margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center; font: 400 16px var(--font-mono); color: var(--ink-faint); transition: transform .18s; }
.faq details[open] summary .mark { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq summary .mark { transition: none; } }
.faq .faq-body { padding: 0 18px 16px; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.faq .faq-body p { margin: 0; }

/* ── Re-aim additions (landing+pricing narrative slice) — additive only ── */
/* 3-up plans grid variant */
.plans-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; }
@media (max-width: 900px) { .plans-grid.three { grid-template-columns: 1fr; } }
/* Slim team band (soon-hint) — one line, hairline strip, NOT a full section */
.team-band { border-top: 1px solid var(--line); background: var(--bg); }
.team-band-inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.team-band .line { font-size: 14px; color: var(--ink-2); text-align: center; }
/* Problem BAD diagram: isolated per-agent memory boxes */
.agent-boxes { display: flex; gap: 10px; padding-top: 6px; }
.agent-box { flex: 1; display: grid; gap: 7px; justify-items: center; padding: 10px 6px 8px; border: 1px dashed var(--line-2); border-radius: var(--r-2); font: 10.5px var(--font-mono); color: var(--ink-muted); min-width: 0; }
.agent-box .blob { width: 28px; height: 18px; border-radius: 5px; background: var(--red-soft); border: 1px solid rgba(220, 38, 38, .25); }
/* GOOD diagram relabel */
.memory-bar.docs::after { content: "docs graph"; }
/* KO-float task row (ties docs to work) */
.ko-float .ko-task { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font: 11.5px var(--font-mono); color: var(--ink-2); min-width: 0; }
.ko-float .ko-task .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-float .ko-task .ok { color: var(--green); flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   7. SLICE-7a ADDITIONS — MCP setup ("Connect your agent") page.
   Additive only; reuses .panel, .cmd, .segmented, .file-chip, .faq.
   ════════════════════════════════════════════════════════════════════════ */
.steps { display: grid; gap: 18px; }
.step-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.step-head h2 { margin: 0; font-size: 19px; }
.step-head .meta { margin-left: auto; font: 11.5px var(--font-mono); color: var(--ink-faint); }
.step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 12px var(--font-mono); color: var(--ink); }
/* Multiline copyable code block (JSON configs) */
.code-card { position: relative; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-2); }
.code-card pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 12.5px/1.6 var(--font-mono); color: var(--ink); }
.code-card .copy-btn { position: absolute; top: 8px; right: 8px; }
/* Client tab panels */
.tab-panel { display: grid; gap: 12px; }
.tab-panel[hidden] { display: none; }
.tab-panel p, .step-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
/* Verify steps */
.verify-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.verify-list code, .tab-panel code, .step-body code { font-size: 12.5px; }
/* Full-width variant of the FAQ accordion (troubleshooting) */
.faq.wide { max-width: none; margin: 0; }
.keys-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════
   8. SLICE-7b ADDITIONS — billing (thin over Paddle: status + routing).
   Additive only; reuses .panel/.plan-head/.badge/.sk/.error-state.
   ════════════════════════════════════════════════════════════════════════ */
.badge-slate { color: var(--ink-muted); background: var(--bg-soft); }
.bill-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bill-lines li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.bill-lines li svg { flex: none; margin-top: 3px; color: var(--ink-faint); }
.bill-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-2); background: var(--amber-soft); color: var(--amber); font-size: 13px; line-height: 1.55; }
.bill-banner svg { flex: none; margin-top: 1px; }
.bill-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bill-quiet { margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; }
.bill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg); }
.bill-row .t { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.bill-row .hint-inline { font: 11.5px var(--font-mono); color: var(--ink-faint); }
.bill-foot { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════════════
   9. SLICE-7c ADDITIONS — legal prose pages (terms · privacy · refund).
   Additive only; reuses public chrome, table.t, .soon. Layout-only slice.
   ════════════════════════════════════════════════════════════════════════ */
.legal-wrap { max-width: 720px; margin: 0 auto; padding: 52px 24px 88px; display: grid; gap: 26px; }
.legal-head { display: grid; gap: 12px; justify-items: start; }
.legal-head h1 { margin: 0; font-size: 36px; }
.eff-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12.5px var(--font-mono); color: var(--ink-muted); }
.legal-toc { display: grid; gap: 5px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-3); }
.legal-toc .toc-ttl { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 3px; }
.legal-toc a { font-size: 13px; color: var(--ink-muted); text-decoration: none; width: fit-content; }
.legal-toc a:hover { color: var(--accent-ink); }
.legal-body { display: grid; gap: 12px; }
.legal-body h2 { font-size: 20px; margin: 22px 0 0; scroll-margin-top: 80px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 16.5px; margin: 10px 0 0; }
.legal-body p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.legal-body ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.legal-body li { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--accent-ink); }
.legal-body .mono { font-size: 13px; }
.legal-body .table-wrap { margin: 6px 0; }

/* ════════════════════════════════════════════════════════════════════════
   6. SLICE-6b ADDITIONS — auth pages ×5 (login/signup/verify/forgot/reset).
   Centered functional cards. Additive only; tokens/.btn/.input/.field/
   focus rings/toast from canon unchanged.
   ════════════════════════════════════════════════════════════════════════ */

/* Page scaffold: brand lockup top-left, card centered on warm-white */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 88px 20px 48px; }
.auth-brand { position: absolute; top: 0; left: 0; padding: 18px 24px; }
.auth-stack { display: grid; gap: 18px; justify-items: center; width: 100%; }

/* The card */
.auth-card { width: min(400px, 100%); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: var(--shadow-2); padding: 32px 28px; display: grid; gap: 20px; }
.auth-head { display: grid; gap: 6px; justify-items: start; }
.auth-head.center { justify-items: center; text-align: center; }
.auth-head h1 { margin: 0; font-size: 26px; }
.auth-head .sub { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; text-wrap: pretty; }
.auth-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.auth-icon.green { background: var(--green-soft); color: var(--green); }

/* OAuth row + divider */
.oauth-row { display: grid; gap: 10px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; width: 100%; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer; transition: background .15s; }
.oauth-btn:hover { background: var(--bg-soft); }
.oauth-btn svg { flex: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }

/* Form bits */
.auth-form { display: grid; gap: 14px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.label-row a { font: 12.5px var(--font-sans); color: var(--accent-ink); text-decoration: none; }
.label-row a:hover { text-decoration: underline; }
.auth-foot { font-size: 13.5px; color: var(--ink-muted); text-align: center; }
.auth-foot a { color: var(--accent-ink); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { text-decoration: underline; }
.legal-line { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }
.legal-line .inert-link { color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; cursor: default; }

/* Email pill (verify / sent) — long-email containment */
.email-line { display: inline-flex; max-width: 100%; padding: 3px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font: 12.5px var(--font-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* OTP boxes — one line down to narrow; shrink, never wrap mid-code */
.otp-row { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.otp-box { width: 48px; height: 54px; min-width: 0; flex: 0 1 48px; text-align: center; font: 500 22px var(--font-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-2); }
.otp-box:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(35,71,229,.12); }
@media (max-width: 400px) { .otp-box { flex-basis: 40px; height: 48px; font-size: 19px; } .otp-row { gap: 6px; } }

/* Strength meter (live) — 4 segments, canon semantics red→amber→accent→green */
.strength { display: grid; gap: 7px; }
.str-bar { display: flex; gap: 5px; }
.str-seg { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-soft); transition: background .2s; }
@media (prefers-reduced-motion: reduce) { .str-seg { transition: none; } }
.str-bar[data-level="1"] .str-seg:nth-child(-n+1) { background: var(--red); }
.str-bar[data-level="2"] .str-seg:nth-child(-n+2) { background: var(--amber); }
.str-bar[data-level="3"] .str-seg:nth-child(-n+3) { background: var(--accent); }
.str-bar[data-level="4"] .str-seg { background: var(--green); }
.str-meta { display: flex; align-items: center; gap: 8px; }
.str-lbl { font: 12px var(--font-sans); font-weight: 500; color: var(--ink-muted); min-width: 44px; }
.str-bar[data-level="1"] ~ .str-meta .str-lbl, .str-lbl[data-level="1"] { color: var(--red); }
.str-lbl[data-level="2"] { color: var(--amber); }
.str-lbl[data-level="3"] { color: var(--accent-ink); }
.str-lbl[data-level="4"] { color: var(--green); }
.hash-tag { margin-left: auto; font: 10.5px var(--font-mono); color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }

/* Rule checklist (live) */
.rule-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rule { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); }
.rule .tick { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.rule.ok { color: var(--ink-2); }
.rule.ok .tick { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* Persistent dead-end notice (reset missing token) */
.dead-end { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-2); background: var(--amber-soft); color: var(--amber); font-size: 13px; line-height: 1.55; }
.dead-end svg { flex: none; margin-top: 1px; }
.dead-end a { color: inherit; font-weight: 500; }