/* Founder Network: "Agent desk" layout (DESIGN.md), "Natural Sage & Clay" look (spec PDF).
   §2 tokens live on :root; everything below uses var(--…) only. */

/* ============ §2 Design tokens ============ */
:root {
  /* "Ledger" (2026-10-14, replaces Natural Sage & Clay): ink on paper, one cobalt accent.
     Neutrals carry the interface; cobalt marks selection, links and focus only; semantic
     colours (overdue red, warning amber, done green) never double as brand. */
  --bg: #F4F4F1;              /* paper */
  --surface: #FFFFFF;
  --surface-sunken: #F9F9F7;
  --surface-muted: #ECECE8;
  --surface-hover: #F7F7F4;
  --surface-selected: #EEF0FC;
  --border: #E2E2DD;
  --border-strong: #CBCBC5;
  --border-dashed: #BDBDB6;
  --divider: #EBEBE7;
  --ink: #0F100E;             /* text, primary buttons */
  --ink-2: #23251F;
  --ink-3: #464943;
  --muted: #64675F;           /* 5.2:1 on white, 4.7:1 on paper */
  --faint: #9A9D96;           /* decorative only, never body text */
  --on-ink: #FFFFFF;
  --accent: #2B3FD6;          /* cobalt: selection, links, focus. 6.6:1 on white */
  --accent-hover: #1F2FB0;
  --accent-soft: #EEF0FC;
  --accent-border: #CCD3F8;
  --brand: var(--accent);     /* older names, kept so every component follows */
  --brand-hover: var(--accent-hover);
  --brand-soft: var(--accent-soft);
  --brand-ink: var(--accent-hover);
  --brand-border: var(--accent-border);
  --cta: var(--accent);       /* active indicators */
  --cta-hover: var(--accent-hover);
  --cta-soft: var(--accent-soft);
  --cta-border: var(--accent-border);
  --quote: var(--surface-sunken);
  --quote-border: var(--border);
  /* Semantic */
  --danger: #C02D1D;  --danger-ink: #9F2214;  --danger-soft: #FDF1EF;  --danger-border: #F4CBC4;   /* overdue */
  --warn: #B25E09;    --warn-ink: #7C4106;    --warn-soft: #FDF6EA;    --warn-border: #F1DDB8;     /* needs a look */
  --ok: #17784A;      --ok-ink: #0E5A36;      --ok-soft: #EBF6F0;      --ok-border: #C6E5D3;       /* matched, done */
  --live: var(--ok);
  --live-halo: rgba(23, 120, 74, .16);
  --attention: var(--warn);
  --attention-soft: var(--warn-soft);
  --attention-border: var(--warn-border);
  --attention-ink: var(--warn-ink);
  --info-soft: #EFF1F4;
  --info-ink: #34404F;
  /* Sidebar (laptops): light, part of the page rather than a dark slab */
  --sidebar: #FAFAF8;
  --sidebar-raised: #FFFFFF;
  --sidebar-hover: #EFEFEB;
  --sidebar-active: #E9E9E4;
  --sidebar-border: #E2E2DD;
  --sidebar-text: #464943;
  --scrim: rgba(15, 16, 14, .4);

  /* Avatars (bg / text): muted, cool-leaning so they never compete with the accent */
  --av-0-bg: #E8EBF5; --av-0-ink: #2C3A6B;
  --av-1-bg: #EDE8E2; --av-1-ink: #5E4632;
  --av-2-bg: #E5EEE8; --av-2-ink: #2E5A40;
  --av-3-bg: #F1EBDD; --av-3-ink: #6B5320;
  --av-4-bg: #F0E6E4; --av-4-ink: #73372E;
  --av-5-bg: #E3EDF0; --av-5-ink: #285463;
  --av-6-bg: #EAEAE6; --av-6-ink: #45463F;
  --av-7-bg: #EDE7EF; --av-7-ink: #5B3A63;

  /* Type: Instrument Serif for headlines (editorial voice), Instrument Sans for everything
     else (compact, legible at 12–14px). Numbers use tabular figures. Scale ≈ 1.2. */
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-sans);                       /* metadata reads as text, not code */
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 40px;

  /* Spacing: 4px base */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius by hierarchy: chips 4, controls 8, panels 12. Round only avatars and badges. */
  --r-xs: 4px; --r-sm: 8px; --r-md: 8px; --r-lg: 12px; --r-xl: 12px; --r-2xl: 12px; --r-pill: 999px;

  /* Elevation: flat; only floating layers (menus, sheets) get a soft shadow */
  --shadow-xs: none;
  --shadow-sm: 0 0 0 1px var(--border);
  --shadow-panel: 0 8px 24px -8px rgba(15, 16, 14, .16), 0 0 0 1px var(--border);
  --shadow-glow: 0 0 0 3px var(--accent-soft);

  /* Motion */
  --ease-enter: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms; --t-mid: 200ms; --t-slow: 300ms;

  /* Layout */
  --sidebar-w: 232px;
  --content-max: 1120px;
  --page-pad: 40px;

  color-scheme: light;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 14px/1.55 var(--font-sans); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
svg.i-lg { width: 18px; height: 18px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type scale */
.t-display { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.t-title-1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.t-title-2 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.t-title-3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.t-heading { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.t-body-lg { font-size: 16px; line-height: 1.55; color: var(--ink-3); }
.t-small { font-size: 13px; line-height: 1.5; }
.t-caption { font-size: 12px; line-height: 1.45; }
.t-muted { color: var(--muted); }
.t-ink { color: var(--ink); }
.t-brand { color: var(--brand); }
.eyebrow { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--font-mono); }
strong, b { font-weight: 600; color: var(--ink); }

/* ============ §4 Components ============ */

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px;
       border-radius: var(--r-sm); border: 1px solid transparent; font: 500 13px/1 var(--font-sans); cursor: pointer;
       text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-2); color: var(--on-ink); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--muted); }
.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-muted); }
.btn-lg { min-height: 40px; padding: 0 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn-danger { color: var(--danger-ink); }
@media (pointer: coarse) { .btn { min-height: 44px; } }

/* CommandBar */
.command-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 14px; background: var(--surface);
               border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); max-width: 760px; }
.command-bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.command-bar > svg { color: var(--brand); }
.command-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font-sans); color: var(--ink); }
.command-bar input::placeholder { color: var(--muted); }
kbd { font: 500 11px/1 var(--font-mono); color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--r-xs); padding: 4px 6px; background: var(--surface); }

/* Avatar + AvatarPair */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: var(--r-pill); font: 600 12px/1 var(--font-sans);
          width: 36px; height: 36px; background: var(--av-0-bg); color: var(--av-0-ink); }
.avatar.s24 { width: 24px; height: 24px; font-size: 10px; }
.avatar.s32 { width: 32px; height: 32px; }
.avatar.s44 { width: 44px; height: 44px; font-size: 14px; }
.avatar.s52 { width: 52px; height: 52px; font-size: 16px; }
.av-0 { background: var(--av-0-bg); color: var(--av-0-ink); --av-ink: var(--av-0-ink); }
.av-1 { background: var(--av-1-bg); color: var(--av-1-ink); --av-ink: var(--av-1-ink); }
.av-2 { background: var(--av-2-bg); color: var(--av-2-ink); --av-ink: var(--av-2-ink); }
.av-3 { background: var(--av-3-bg); color: var(--av-3-ink); --av-ink: var(--av-3-ink); }
.av-4 { background: var(--av-4-bg); color: var(--av-4-ink); --av-ink: var(--av-4-ink); }
.av-5 { background: var(--av-5-bg); color: var(--av-5-ink); --av-ink: var(--av-5-ink); }
.av-6 { background: var(--av-6-bg); color: var(--av-6-ink); --av-ink: var(--av-6-ink); }
.av-7 { background: var(--av-7-bg); color: var(--av-7-ink); --av-ink: var(--av-7-ink); }
.avatar-pair { display: inline-flex; flex: none; }
.avatar-pair .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-pair .avatar + .avatar { margin-left: -8px; }

/* Chip */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1.3 var(--font-sans); padding: 3px 8px; border-radius: var(--r-xs);
        background: var(--surface-muted); color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-info { background: var(--info-soft); color: var(--info-ink); }
.chip-brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip-attention { background: var(--attention-soft); color: var(--attention-ink); box-shadow: inset 0 0 0 1px var(--attention-border); }
.chip .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.trunc { display: inline-block; vertical-align: middle; }

/* StatusPill */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: var(--r-pill);
               background: var(--brand-soft); color: var(--brand-ink); font: 500 12.5px/1.3 var(--font-sans); }
.status-pill .dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--live); box-shadow: 0 0 0 4px var(--live-halo); }
.status-pill.is-attention { background: var(--attention-soft); color: var(--attention-ink); }
.status-pill.is-attention .dot { background: var(--attention); box-shadow: 0 0 0 4px var(--attention-border); }
.status-pill.is-working .dot { animation: pulse 1.4s ease-in-out infinite; }

/* StatRow */
.stat-row { display: flex; flex-wrap: wrap; gap: 28px; }
.stat-row .stat .n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-row .stat .n.t-brand { color: var(--brand); }
.stat-row .stat .l { font-size: 12px; color: var(--muted); }

/* EvidenceQuote */
.evidence { display: block; margin: 0; padding: 10px 12px; background: var(--surface-sunken); border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; }
a.evidence:hover { text-decoration: none; background: var(--surface-muted); color: var(--ink-2); }
.evidence .q { font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.evidence .q::before { content: "\201C"; } .evidence .q::after { content: "\201D"; }
.evidence .meta { display: block; margin-top: 6px; font: 400 11px/1.4 var(--font-mono); color: var(--muted); }
.evidence-list { display: grid; gap: 8px; }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); padding: 20px; }

/* IntroCard */
.intro-card { display: grid; gap: 12px; }
.intro-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.intro-head .who { flex: 1; min-width: 180px; }
.intro-head .who .t-heading { font-weight: 500; }
.intro-head .who .t-heading strong { font-weight: 600; }
.intro-card .reason { font-size: 14px; color: var(--ink-2); }
.intro-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intro-actions .hint { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Fit label (mono uppercase) */
.fit { font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fit-strong, .fit-good { color: var(--brand); }
.fit-worth_a_try { color: var(--muted); }

/* NeedOfferPair */
.need-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sub-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; background: var(--surface); display: grid; gap: 10px; align-content: start; }
.sub-card .summary { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.sub-card .eyebrow.is-need { color: var(--info-ink); }
.sub-card .eyebrow.is-offer { color: var(--brand-ink); }
.sub-card.tint-attention { background: var(--attention-soft); border-color: var(--attention-border); }
.sub-card.tint-brand { background: var(--brand-soft); border-color: var(--brand-soft); }
.sub-card .foot { font-size: 12.5px; color: var(--muted); }

/* AttentionNote */
.attention-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
                  background: var(--attention-soft); border: 1px solid var(--attention-border); color: var(--attention-ink); font-size: 13px; }
.attention-note > svg { color: var(--attention); margin-top: 2px; }
.attention-note .btn { margin-top: 8px; }
.note-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; }

/* DraftComposer + SegmentedControl */
.composer { display: grid; gap: 10px; }
.composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.composer label.lbl { font-weight: 600; font-size: 13px; color: var(--ink); }
.composer textarea { width: 100%; min-height: 150px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border-strong);
                     border-radius: var(--r-lg); font: 400 14px/1.6 var(--font-sans); color: var(--ink); background: var(--surface); }
.composer textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.composer .helper { font-size: 12px; color: var(--muted); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-muted); border-radius: 9px; }
.segmented button, .segmented a { border: 0; background: transparent; font: 500 13px/1 var(--font-sans); color: var(--ink-3); padding: 8px 12px;
                                  border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.segmented button:hover, .segmented a:hover { color: var(--ink); text-decoration: none; }
.segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-left: 3px; }

/* ActivityLog */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { position: relative; padding: 0 0 16px 22px; font-size: 13px; color: var(--ink-2); }
.activity li:last-child { padding-bottom: 0; }
.activity li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: var(--r-pill);
                       border: 2px solid var(--faint); background: var(--surface); }
.activity li::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 1px; background: var(--divider); }
.activity li:last-child::after { display: none; }
.activity li.tone-result::before { border-color: var(--brand); }
.activity li.tone-waiting::before { border-color: var(--attention); }
.activity .time { display: block; font: 400 11px/1.4 var(--font-mono); color: var(--muted); margin-top: 2px; }

/* PersonRow table */
.people-table { overflow-x: auto; }
.people-table .inner { min-width: 760px; }
.person-row, .people-head { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(180px, 1.4fr) minmax(150px, 1fr) 120px; gap: 16px; align-items: center; padding: 12px 16px; }
.people-head { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
.person-row { color: var(--ink-2); border-bottom: 1px solid var(--divider); text-decoration: none; transition: background var(--t-fast); }
.person-row:hover { background: var(--surface-hover); text-decoration: none; color: var(--ink-2); }
.person-row[aria-current="true"] { background: var(--surface-selected); box-shadow: inset 3px 0 0 var(--row-bar, var(--brand)); }
.person-row .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.person-row .name { font-weight: 600; color: var(--ink); }
.person-row .sub, .person-row .building { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.person-row .building { color: var(--ink-3); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* QueueItem */
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.queue-item { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none; transition: background var(--t-fast); }
.queue-item:hover { background: var(--surface-hover); text-decoration: none; color: var(--ink-2); }
.queue-item[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-sm), inset 3px 0 0 var(--brand); }
.queue-item .pair { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.queue-item .topic { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dropzone */
.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; min-height: 280px; padding: 32px;
            border: 1.5px dashed var(--border-dashed); border-radius: var(--r-2xl); background: var(--surface); cursor: pointer;
            transition: background var(--t-mid), border-color var(--t-mid); }
.dropzone:hover { border-color: var(--brand); }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.dropzone .tile { width: 64px; height: 64px; border-radius: var(--r-xl); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center;
                  animation: bob 2.4s ease-in-out infinite; }
.dropzone .tile svg { width: 26px; height: 26px; }
.dropzone .t-heading { font-size: 16px; }
.dropzone .choose { color: var(--brand); font-weight: 600; }
.dropzone.is-over { border-style: solid; border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface)); }
.dropzone.is-over .tile { animation: none; transform: scale(1.05); }
.drop-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px; border-radius: var(--r-2xl);
            border: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.drop-row .grow { flex: 1; min-width: 200px; }
.drop-row.is-error { background: var(--attention-soft); border-color: var(--attention-border); color: var(--attention-ink); }
.drop-row.is-done { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); }
.drop-row.is-info { background: var(--info-soft); border-color: var(--info-soft); color: var(--info-ink); }
.bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-muted); overflow: hidden; margin-top: 8px; }
.bar > span { display: block; height: 100%; width: 0; background: var(--live); transition: width var(--t-slow) var(--ease-enter); }

/* FeatureGrid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border: 1px solid var(--border); border-radius: var(--r-2xl);
                background: var(--surface); overflow: hidden; }
/* Hairlines between tiles (no individual cards); the container clips the outer edges. */
.feature { padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.feature .icon-tile { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.feature .row { display: flex; align-items: center; justify-content: space-between; }
.soon { font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; padding: 4px 6px; border-radius: var(--r-xs); background: var(--surface-muted); color: var(--muted); }

/* PipelineStrip (§7.2) */
.pipeline { position: relative; }
.pipeline .track { position: relative; height: 2px; margin: 0 0 22px; background: var(--divider); border-radius: var(--r-pill); }
.pipeline .track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-pill);
                          background: linear-gradient(90deg, var(--brand-soft), var(--live)); transition: width var(--t-slow) var(--ease-enter); }
.pipeline .track .token { position: absolute; top: -6px; left: 10%; width: 14px; height: 14px; margin-left: -7px; border-radius: var(--r-pill);
                           background: var(--live); box-shadow: 0 0 0 4px var(--live-halo); animation: pulse 1.4s ease-in-out infinite; }
.pipeline .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pipeline .step { position: relative; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); padding: 12px; display: grid; gap: 10px;
                  transition: border-color var(--t-mid), box-shadow var(--t-mid); }
.pipeline .step .stage { position: relative; height: 110px; border-radius: var(--r-md); background: var(--surface-sunken); overflow: hidden; display: grid; place-items: center; }
.pipeline .step .num { font: 500 11px/1 var(--font-mono); color: var(--muted); }
.pipeline .step .t-heading { font-size: 14px; }
.pipeline .step .desc { font-size: 12.5px; color: var(--muted); }
.pipeline .step .live-caption { font: 500 11.5px/1.4 var(--font-mono); color: var(--brand-ink); }
.pipeline .step .check { position: absolute; z-index: 2; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-ink);
                          display: none; place-items: center; }
.pipeline .step .check svg { width: 12px; height: 12px; stroke-width: 2.4; }
.pipeline .step.is-active { border: 1.5px solid var(--brand); box-shadow: var(--shadow-glow); background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface)); }
.pipeline .step.is-done .check { display: grid; }

/* Mini visuals inside the stages (decorative) */
.mv-doc { width: 46px; height: 58px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-strong); padding: 10px 8px; display: grid; gap: 5px; align-content: start; }
.mv-doc i { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); }
.mv-doc i:nth-child(2) { width: 70%; } .mv-doc i:nth-child(4) { width: 55%; }
.mv-cap { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 400 10.5px/1 var(--font-mono); color: var(--muted); }
.mv-bubbles { display: grid; gap: 5px; width: 80%; }
.mv-bubbles i { display: block; height: 14px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border-strong); width: 70%; }
.mv-bubbles i:nth-child(even) { justify-self: end; width: 55%; background: var(--brand-soft); border-color: var(--brand-soft); }
.mv-profile { display: grid; gap: 7px; justify-items: center; }
.mv-profile .who { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink); }
.mv-profile .chips { justify-content: center; gap: 4px; }
.mv-profile .chip { font-size: 10px; padding: 2px 5px; }
.mv-match { position: relative; width: 120px; height: 70px; }
.mv-match .avatar { position: absolute; top: 26px; }
.mv-match .avatar.from { left: 0; } .mv-match .avatar.to { right: 0; }
.mv-match svg.arc { position: absolute; left: 14px; top: 0; width: 92px; height: 40px; stroke: var(--brand); stroke-width: 1.8; fill: none; stroke-dasharray: 120; stroke-dashoffset: 120; }
.mv-match .chip { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 10px; padding: 2px 5px; }
.mv-type { width: 84%; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); font-size: 11px; color: var(--ink-2); text-align: left; }
.mv-type span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }
.mv-type .caret { display: inline-block; width: 1px; height: 12px; background: var(--ink); vertical-align: middle; animation: blink 1s steps(1) infinite; }

/* Explainer loop: each step active for 2s of a 10s cycle */
.pipeline.is-explainer .track .token { animation: token-travel 10s linear infinite, pulse 1.4s ease-in-out infinite; }
.pipeline.is-explainer .step { animation: step-glow 10s infinite; }
.pipeline.is-explainer .step:nth-child(2) { animation-delay: 2s; }
.pipeline.is-explainer .step:nth-child(3) { animation-delay: 4s; }
.pipeline.is-explainer .step:nth-child(4) { animation-delay: 6s; }
.pipeline.is-explainer .step:nth-child(5) { animation-delay: 8s; }
.pipeline.is-explainer .mv-bubbles i { animation: bubble-in 10s infinite; opacity: 0; }
.pipeline.is-explainer .mv-bubbles i:nth-child(1) { animation-delay: 2s; }
.pipeline.is-explainer .mv-bubbles i:nth-child(2) { animation-delay: 2.3s; }
.pipeline.is-explainer .mv-bubbles i:nth-child(3) { animation-delay: 2.6s; }
.pipeline.is-explainer .mv-bubbles i:nth-child(4) { animation-delay: 2.9s; }
.pipeline.is-explainer .mv-profile .chip { animation: chip-pop 10s infinite; transform: scale(.6); opacity: 0; }
.pipeline.is-explainer .mv-profile .chip:nth-child(1) { animation-delay: 4.1s; }
.pipeline.is-explainer .mv-profile .chip:nth-child(2) { animation-delay: 4.3s; }
.pipeline.is-explainer .mv-profile .chip:nth-child(3) { animation-delay: 4.5s; }
.pipeline.is-explainer .mv-profile .chip:nth-child(4) { animation-delay: 4.7s; }
.pipeline.is-explainer .mv-match svg.arc { animation: arc-draw 10s infinite 6s; }
.pipeline.is-explainer .mv-type span { animation: type-out 10s steps(26) infinite 8s; }
/* Live mode: the current step glows and loops its own visual */
.pipeline.is-live .step.is-active .mv-bubbles i { animation: bubble-in 2s infinite; opacity: 0; }
.pipeline.is-live .step.is-active .mv-bubbles i:nth-child(2) { animation-delay: .3s; }
.pipeline.is-live .step.is-active .mv-bubbles i:nth-child(3) { animation-delay: .6s; }
.pipeline.is-live .step.is-active .mv-bubbles i:nth-child(4) { animation-delay: .9s; }
.pipeline.is-live .step.is-active .mv-profile .chip { animation: chip-pop 2s infinite; }
.pipeline.is-live .step.is-active .mv-match svg.arc { animation: arc-draw 2s infinite; }
.pipeline.is-live .step.is-active .mv-type span { animation: type-out 2s steps(26) infinite; }
.pipeline.is-live .step.is-done .mv-bubbles i, .pipeline.is-live .step.is-done .mv-profile .chip { opacity: 1; transform: none; }
.pipeline.is-live .step.is-done .mv-match svg.arc { stroke-dashoffset: 0; }
.pipeline.is-live .step.is-done .mv-type span { width: 13.5em; }
.pipeline.is-live .track .token { transition: left var(--t-slow) var(--ease-enter); }

/* ============ §5 App shell ============ */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sidebar); color: var(--sidebar-text);
           display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; border-right: 1px solid var(--sidebar-border); }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--on-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.logo:hover { color: var(--on-ink); text-decoration: none; }
.logo-mark { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--brand); color: var(--on-ink); display: grid; place-items: center; flex: none; }
.logo-mark svg { width: 15px; height: 15px; }
.workspace { position: relative; }
.workspace summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md);
                     background: var(--sidebar-raised); border: 1px solid var(--sidebar-border); cursor: pointer; }
.workspace summary::-webkit-details-marker { display: none; }
.workspace summary .name { font-size: 13px; font-weight: 600; color: var(--on-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace summary .meta { font: 400 11px/1.4 var(--font-mono); color: var(--faint); }
.workspace summary .grow { flex: 1; min-width: 0; }
.workspace-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--sidebar-raised); border: 1px solid var(--sidebar-border);
                  border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow-panel); display: grid; gap: 2px; }
.workspace-menu a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--sidebar-text); font-size: 13px; }
.workspace-menu a:hover, .workspace-menu a[aria-current="true"] { background: var(--sidebar-active); color: var(--on-ink); text-decoration: none; }
.workspace-menu .sep { height: 1px; background: var(--sidebar-border); margin: 4px 2px; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 36px; border-radius: var(--r-sm); color: var(--sidebar-text);
         font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.nav a:hover { background: var(--sidebar-hover); color: var(--on-ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--on-ink); }
.nav .count { margin-left: auto; font: 400 11px/1 var(--font-mono); color: var(--faint); }
.nav .count.is-pill { color: var(--brand-ink); background: var(--brand-soft); padding: 3px 7px; border-radius: var(--r-pill); font-weight: 500; }
.sidebar .bottom { margin-top: auto; }
.main { min-width: 0; padding: 24px var(--page-pad) 64px; }
.main-inner { max-width: var(--content-max); margin: 0 auto; }
.main-inner.is-wide { max-width: none; }
.topline { margin-bottom: 32px; }


/* ============ Page layout helpers ============ */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cols > .col-main { flex: 999 1 520px; min-width: 0; }
.cols > .col-rail { flex: 1 1 320px; min-width: 0; }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 20px; }
.row-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px dashed var(--border-strong);
            border-radius: var(--r-xl); color: var(--ink-3); font-size: 13px; text-decoration: none; }
.more-row:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; background: var(--surface); }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; }
.rail-card + .rail-card { margin-top: 20px; }
.rail-card .head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.att-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--attention); flex: none; }
.ask-rows { list-style: none; margin: 0 0 14px; padding: 0; }
.ask-rows li { padding: 10px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.ask-rows li:first-child { border-top: 0; padding-top: 0; }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-xl); }

/* Split view (People, Intros) */
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split > .list-pane { flex: 999 1 520px; min-width: 0; }
.split > .detail-pane { flex: 1 1 380px; min-width: 0; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto;
                        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-panel); padding: 28px; }
.split.is-intros > .list-pane { flex: 1 1 300px; max-width: 380px; }
.split.is-intros > .detail-pane { flex: 999 1 560px; }
.detail-close { display: none; }
@media (max-width: 900px) {
  .split.is-intros > .list-pane { max-width: none; }
  .split > .detail-pane { position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; display: none; padding: 20px 16px 40px; }
  body.sheet-open .split > .detail-pane { display: block; }
  .detail-close { display: inline-flex; margin-bottom: 12px; }
}
.detail-section { margin-top: 22px; }
.detail-section > .eyebrow { display: block; margin-bottom: 8px; }
.pill-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink);
              font-size: 12.5px; font-weight: 500; }
.pill-check.is-inferred { background: var(--attention-soft); color: var(--attention-ink); }

/* Popover (Not a fit) */
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-body { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: min(300px, 80vw); background: var(--surface); border: 1px solid var(--border);
                border-radius: var(--r-lg); box-shadow: var(--shadow-panel); padding: 14px; display: grid; gap: 10px; }
.popover-body textarea, .field input, .field select { width: 100%; font: 400 13px/1.5 var(--font-sans); padding: 8px 10px; border: 1px solid var(--border-strong);
                                                      border-radius: var(--r-sm); color: var(--ink); background: var(--surface); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-lg); box-shadow: var(--shadow-panel); padding: 6px; display: grid; }
.menu a { padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13px; }
.menu a:hover, .menu a[aria-current="true"] { background: var(--surface-muted); color: var(--ink); text-decoration: none; }

/* Import page */
.upload-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.upload-row > .dz-col { flex: 999 1 460px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.upload-row > .howto { flex: 1 1 300px; background: var(--surface-muted); border-radius: var(--r-2xl); padding: 22px; display: grid; gap: 14px; align-content: start; }
.howto ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.howto li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.howto li::before { content: counter(s); width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); display: grid; place-items: center;
                    font: 500 12px/1 var(--font-mono); }
.howto .privacy { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--border-strong); }
.import-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
.import-rows li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--divider); flex-wrap: wrap; }
.import-rows li:first-child { border-top: 0; }
.import-rows .file-ic { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--surface-muted); color: var(--ink-3); display: grid; place-items: center; flex: none; }
.import-rows .grow { flex: 1; min-width: 200px; }
.import-rows .fname { font: 500 13.5px/1.4 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.import-rows .meta { font: 400 11.5px/1.5 var(--font-mono); color: var(--muted); }

/* Simple data tables (chat view, settings) */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--divider); vertical-align: top; }
table.data th { font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; background: var(--surface); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.meta { white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
table.data td.text { white-space: pre-wrap; overflow-wrap: anywhere; }
table.data tr.is-system td.text { color: var(--muted); font-style: italic; }
table.data tr:target td { background: var(--attention-soft); }
.scroll { overflow: auto; max-height: 70vh; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12.5px; color: var(--muted); }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 18px; font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.notice { padding: 12px 14px; border-radius: var(--r-md); font-size: 13.5px; margin-bottom: 14px; }
.notice.is-error, .notice.is-warn { background: var(--attention-soft); color: var(--attention-ink); border: 1px solid var(--attention-border); }
.notice.is-ok { background: var(--brand-soft); color: var(--brand-ink); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filter-bar input[type=search] { flex: 1; min-width: 180px; font: 400 13px var(--font-sans); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); }
.filter-bar label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--ink-3); }

/* Toast (confirmations with Undo) */
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
         padding: 10px 12px 10px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); font-size: 13px; box-shadow: var(--shadow-panel);
         animation: rise var(--t-mid) var(--ease-enter) both; }
.toast button { background: transparent; border: 0; color: var(--brand-soft); font: 600 13px var(--font-sans); cursor: pointer; padding: 6px 8px; border-radius: var(--r-xs); }
.toast button:hover { background: var(--sidebar-active); }

/* ============ §7 Motion ============ */
/* Smooth page changes: the sidebar stays put, the content cross-fades (Chromium, Safari 18+). */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.appbar { view-transition-name: appbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--t-mid) ease-in, transform var(--t-mid) ease-in; }
.rise { animation: rise var(--t-slow) var(--ease-enter) both; }
.rise:nth-child(2) { animation-delay: 40ms; } .rise:nth-child(3) { animation-delay: 80ms; }
.rise:nth-child(4) { animation-delay: 120ms; } .rise:nth-child(5) { animation-delay: 160ms; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes token-travel { from { left: 10%; } to { left: 90%; } }
@keyframes step-glow {
  0%, 19.9% { border-color: var(--brand); box-shadow: var(--shadow-glow); background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface)); }
  20%, 100% { border-color: var(--border); box-shadow: none; background: var(--surface); }
}
@keyframes bubble-in { 0% { opacity: 0; transform: translateY(8px); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes chip-pop { 0% { opacity: 0; transform: scale(.6); } 4%, 100% { opacity: 1; transform: scale(1); } }
@keyframes arc-draw { 0% { stroke-dashoffset: 120; } 12%, 100% { stroke-dashoffset: 0; } }
@keyframes type-out { 0% { width: 0; } 15%, 100% { width: 13.5em; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pipeline .mv-bubbles i, .pipeline .mv-profile .chip { opacity: 1 !important; transform: none !important; }
  .pipeline .mv-match svg.arc { stroke-dashoffset: 0 !important; }
  .pipeline .mv-type span { width: 13.5em !important; }
  .pipeline.is-explainer .track .token { left: 50%; }
}

/* Demo group: look, don't touch (the server refuses changes too) */
.demo-mode .main form[method="post"], .demo-mode .main [data-demo-hide] { display: none !important; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Sidebar: sign out (a form button styled like the nav links) */
.nav form { margin: 0; }
.nav .nav-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; min-height: 36px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--sidebar-text); font: 500 13.5px/1.2 var(--font-sans); cursor: pointer; text-align: left;
  transition: background var(--t-fast), color var(--t-fast); }
.nav .nav-button:hover { background: var(--sidebar-hover); color: var(--on-ink); }

/* Top bar: Ask the network + the AI allowance meter (percentages only) */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.topbar:not(:has(*)) { display: none; }
.topbar .command-bar { flex: 1; }
.ai-meter { position: relative; margin-left: auto; flex: none; }
.ai-meter summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font: 400 11.5px/1 var(--font-mono); color: var(--muted); }
.ai-meter summary::-webkit-details-marker { display: none; }
.ai-meter summary:hover { border-color: var(--muted); }
.ai-meter .ai-bar { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--surface-muted); overflow: hidden; }
.ai-meter .ai-bar > span { display: block; height: 100%; background: var(--brand); }
.ai-meter .pct { color: var(--ink); font-weight: 500; min-width: 3ch; text-align: right; }
.ai-meter.is-mid .ai-bar > span { background: var(--cta); }
.ai-meter.is-high .ai-bar > span { background: var(--danger-ink); }
.ai-meter .ai-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(320px, 86vw); display: grid; gap: 8px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); font-size: 13px; color: var(--ink-2); }
@media (max-width: 767px) { .ai-meter .lbl { display: none; } .ai-meter .ai-bar { width: 40px; } }

/* ============ Ledger: type, controls and quiet surfaces ============ */
body { font-size: var(--fs-base); line-height: 1.55; letter-spacing: 0; color: var(--ink-2); font-feature-settings: "ss01"; }
.t-display { font: 400 var(--fs-3xl)/1.05 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.t-title-1 { font: 400 var(--fs-2xl)/1.1 var(--font-serif); letter-spacing: -.005em; color: var(--ink); }
.t-title-2, .t-title-3 { font: 600 var(--fs-lg)/1.25 var(--font-sans); letter-spacing: -.015em; color: var(--ink); }
.t-heading { font: 600 15px/1.35 var(--font-sans); letter-spacing: -.005em; }
.t-body-lg { font-size: var(--fs-md); line-height: 1.55; }
.t-small { font-size: var(--fs-sm); line-height: 1.55; }
.t-caption { font-size: var(--fs-xs); line-height: 1.5; }
.eyebrow { font: 600 11px/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mono, .stat-row .stat .n, .kpi .n, .glance .n, .count, .n { font-variant-numeric: tabular-nums; }
kbd { font-family: var(--font-code); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card p, .card li, .section > p, .attention-note > span, .note-ok > span, .ai-pop p { max-width: 72ch; }
[data-extract-form] [data-extract-button] { margin-left: auto; }

/* Buttons: ink primary, quiet secondary; press feedback */
.btn { min-height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-sm); font: 600 13.5px/1 var(--font-sans); letter-spacing: -.005em;
       transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-3); color: var(--on-ink); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--surface); }
.btn-quiet:hover { background: var(--surface-muted); }

/* Quotes: the source message, set like a pull quote */
.evidence { background: transparent; border: 0; border-left: 2px solid var(--border-strong); border-radius: 0; padding: 2px 0 2px var(--sp-3); }
a.evidence:hover { background: transparent; border-left-color: var(--accent); }
.evidence .q { font: italic 400 16px/1.45 var(--font-serif); color: var(--ink); }
.evidence .meta { font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.res-quote { font: italic 400 15px/1.45 var(--font-serif); }

/* Metrics */
.stat-row .stat .n { font: 600 22px/1.1 var(--font-sans); letter-spacing: -.02em; }

/* Badges and chips: small, square-ish, semantic colour only where it means something */
.chip { border-radius: var(--r-xs); font: 600 11.5px/1.3 var(--font-sans); padding: 3px 7px; background: var(--surface-muted); color: var(--ink-3); box-shadow: none; }
.chip-brand { background: var(--ok-soft); color: var(--ok-ink); box-shadow: none; }          /* matched, strong, done */
.chip-attention { background: var(--warn-soft); color: var(--warn-ink); box-shadow: none; }
.chip-danger { background: transparent; color: var(--danger); padding-left: 0; padding-right: 0; }
.chip-danger .dot, .chip-attention .dot { width: 6px; height: 6px; }
.status-pill { border-radius: var(--r-xs); padding: 5px 10px; }
.fit { font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; }
.fit-strong, .fit-good { color: var(--ok-ink); }
.att-dot { background: var(--danger); }

/* Notes */
.attention-note { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-ink); }
.attention-note > svg { color: var(--warn); }
.note-ok { background: var(--ok-soft); color: var(--ok-ink); }
.notice.is-error, .notice.is-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-border); }
.notice.is-ok { background: var(--ok-soft); color: var(--ok-ink); }

/* Sidebar (laptops): light, ink type, cobalt marker on the current tab */
.sidebar { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); padding: var(--sp-5) var(--sp-3); gap: var(--sp-5); }
.logo, .logo:hover { color: var(--ink); font: 400 22px/1 var(--font-serif); letter-spacing: -.01em; }
.logo-mark { background: var(--ink); border-radius: var(--r-sm); }
.workspace summary { background: var(--surface); border-color: var(--border); }
.workspace summary .name { color: var(--ink); }
.workspace summary .meta { font: 500 var(--fs-xs)/1.4 var(--font-sans); color: var(--muted); }
.workspace summary > svg { color: var(--muted); }
.workspace-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-panel); }
.workspace-menu a { color: var(--ink-2); }
.workspace-menu a:hover, .workspace-menu a[aria-current="true"] { background: var(--surface-muted); color: var(--ink); }
.workspace-menu .menu-label { font: 600 11px/1.4 var(--font-sans); color: var(--muted); }
.workspace-menu .sep { background: var(--divider); }
.nav a { color: var(--ink-3); font: 500 14px/1.2 var(--font-sans); min-height: 38px; }
.nav a svg { color: var(--muted); }
.nav a:hover { background: var(--sidebar-hover); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border), inset 2px 0 0 var(--accent); }
.nav a[aria-current="page"] svg { color: var(--accent); }
.nav .count { font: 500 var(--fs-xs)/1 var(--font-sans); color: var(--muted); }
.nav .count.is-pill { background: var(--ink); color: var(--on-ink); border-radius: var(--r-pill); padding: 3px 7px; font-weight: 600; }
.me-dot { background: var(--surface-muted); border: 0; color: var(--ink); }
.account-link .account-email { font: 500 var(--fs-xs)/1.3 var(--font-sans); color: var(--muted); }
.nav .nav-button { color: var(--ink-3); }
.nav .nav-button:hover { background: var(--sidebar-hover); color: var(--ink); }

/* Selected rows */
.queue-item[aria-current="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border), inset 2px 0 0 var(--accent); }
.person-row[aria-current="true"] { background: var(--surface-selected); box-shadow: inset 2px 0 0 var(--accent); }

/* Upcoming / Follow-ups / Resources / Catch-up */
.section-h { margin: 28px 0 12px; }
.event-card { display: flex; gap: 16px; align-items: flex-start; }
.date-tile { flex: none; width: 56px; padding: 8px 0; text-align: center; border: 1px solid var(--quote-border); border-radius: var(--r-sm); background: var(--quote); }
.date-tile .mon { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--cta); }
.date-tile .day { display: block; margin-top: 4px; font: 600 22px/1 var(--font-serif); color: var(--ink); }
.followup.is-overdue { border-color: var(--attention-border); box-shadow: inset 3px 0 0 var(--cta); }
.followup.is-closed { opacity: .72; }
.filter-input { flex: 1; min-width: 220px; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font: 400 14px var(--font-sans); color: var(--ink); }
.filter-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.resource-list { padding: 0; }
.resource-row { padding: 14px 20px; border-bottom: 1px solid var(--divider); }
.resource-row:last-of-type { border-bottom: 0; }
.resource-list > .empty { padding: 20px; }
.res-quote { display: block; margin-top: 6px; font: italic 400 13.5px/1.55 var(--font-serif); color: var(--ink-3); }
.res-quote:hover { color: var(--ink); text-decoration: none; }
.digest { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.digest-point { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; padding-top: 14px; border-top: 1px solid var(--divider); }
.digest-point:first-child { border-top: 0; padding-top: 0; }
.digest-kind { font: 500 11px/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.digest-point.kind-question .digest-kind { color: var(--cta); }
@media (max-width: 767px) { .digest-point { grid-template-columns: 1fr; gap: 4px; } .event-card { gap: 12px; } }
.workspace-menu .menu-label { padding: 4px 10px 6px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager-links { display: inline-flex; align-items: center; gap: 10px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }

/* Assistant (home) */
.assistant { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.assistant-head { display: grid; gap: 10px; }
.glance { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.glance a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-3); font-size: 13px; text-decoration: none; }
.glance a:hover { border-color: var(--border-strong); color: var(--ink); text-decoration: none; }
.glance .n { font: 500 15px/1 var(--font-mono); color: var(--ink); }
.glance a.is-attention { border-color: var(--attention-border); background: var(--attention-soft); }
.glance a.is-attention .n { color: var(--cta); }
.thread { display: grid; gap: 14px; }
.thread:empty { display: none; }
.turn { max-width: 100%; }
.turn-user { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  background: var(--sidebar); color: var(--on-ink); }
.turn-user p { margin: 0; }
.turn-bot { display: grid; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.turn-bot > p { margin: 0; color: var(--ink); }
.turn-bot.is-loading p { color: var(--muted); }
.answer-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.answer-card { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-sunken);
  color: var(--ink-2); text-decoration: none; }
.answer-card:hover { border-color: var(--border-strong); text-decoration: none; color: var(--ink); }
.answer-card .kind { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.answer-card .title { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.answer-card .meta { font-size: 12.5px; color: var(--muted); }
.answer-card.is-attention { border-color: var(--attention-border); background: var(--attention-soft); }
.answer-card.is-attention .kind { color: var(--cta); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion { padding: 8px 12px; border: 1px solid var(--quote-border); border-radius: var(--r-sm); background: var(--quote); color: var(--ink-2);
  font-size: 13.5px; text-decoration: none; }
.suggestion:hover { border-color: var(--cta); color: var(--ink); text-decoration: none; }
.ask-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); }
.ask-box > svg { color: var(--muted); flex: none; }
.ask-box input::-webkit-search-cancel-button { display: none; }
.ask-box input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 8px; font: 400 15px var(--font-sans); color: var(--ink); background: transparent; }
.ask-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ask-note { margin: -12px 0 0; }
.link-button { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: underline; }

/* Compact tiles (Asks & offers): headline only, 2 columns; click to expand in place */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tile-grid > .empty { grid-column: 1 / -1; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tile[open] { grid-column: 1 / -1; border-color: var(--border-strong); }
.tile summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; cursor: pointer; }
.tile summary::-webkit-details-marker { display: none; }
.tile summary:hover .tile-title { color: var(--brand); }
.tile-title { grid-column: 1; font-weight: 600; color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile[open] .tile-title { -webkit-line-clamp: unset; }
.tile-meta { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.tile-status { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.tile-status .chip { font-size: 11px; padding: 2px 6px; }
.tile.is-open { box-shadow: inset 3px 0 0 var(--cta); }
.tile-body { padding: 0 14px 14px; }
@media (max-width: 760px) { .tile-grid { grid-template-columns: minmax(0, 1fr); } }
.tile.is-attention { box-shadow: inset 3px 0 0 var(--cta); border-color: var(--attention-border); }
.tile.is-closed { opacity: .72; }

/* Admin dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.kpi .n { font: 500 24px/1.1 var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
.kpi .l { font-size: 13px; color: var(--ink-3); }
.kpi .d { font-size: 12px; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th { text-align: left; font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--divider); }
.admin-table td { padding: 7px 8px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.admin-table .wide { width: 34%; }
.admin-table tr.is-zero td { color: var(--faint); }
.people-admin { min-width: 980px; }
.people-admin td, .people-admin th { padding-left: 20px; }
.bar-cell { display: block; height: 6px; border-radius: 3px; background: var(--surface-muted); overflow: hidden; }
.bar-cell > span { display: block; height: 100%; background: var(--brand); }
.chip.status-active { background: var(--brand-soft); color: var(--brand-ink); }
.chip.status-at-risk, .chip.status-never-imported { background: var(--attention-soft); color: var(--attention-ink); }
.chip.status-churned { background: var(--surface-muted); color: var(--danger-ink); }
.account-link .account-text { display: grid; min-width: 0; line-height: 1.3; }
.account-link .account-email { font: 400 11px/1.3 var(--font-mono); color: var(--faint); }

/* Import: consent first, a clear step 2, a visible Preview button */
.consent { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.consent.is-required { border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-soft); }
.consent-pending { margin: 8px 0 0 24px; color: var(--cta); font-weight: 600; }
.drop-row.is-next { border-color: var(--cta-border); box-shadow: inset 3px 0 0 var(--cta); }
.preview-row { margin-top: 14px; gap: 12px; align-items: center; }
.ai-split { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.ai-split li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; border-bottom: 1px dashed var(--divider); }
.close-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px 0 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.close-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }

/* Background work: tray (bottom right) and the clock "bell" in the top bar */
.jobs-bell-wrap { position: relative; flex: none; }
.jobs-bell { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-3); cursor: pointer; }
.jobs-bell:hover { color: var(--ink); border-color: var(--muted); }
.jobs-bell .dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cta); }
.jobs-bell.is-running svg { animation: pulse 1.4s ease-in-out infinite; color: var(--brand); }
.jobs-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); width: min(360px, 90vw); padding: 12px; display: grid; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.jobs-tray { position: fixed; z-index: 60; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 32px));
  padding: 12px 14px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 0 0 4px var(--bg); }
.jobs-tray-head { display: flex; justify-content: space-between; align-items: center; }
.job { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--divider); }
.job:first-child { border-top: 0; padding-top: 0; }
.job-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.job-top .btn { min-height: 30px; padding: 0 10px; }
.job-name { font-weight: 600; color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-line { font-size: 12.5px; color: var(--muted); }
.job-unavailable .job-line, .job-failed .job-line, .job-config_error .job-line { color: var(--attention-ink); }
.job .bar { margin-top: 2px; }
.job .bar > span { background: var(--brand); }
.report { padding: 14px 0; border-top: 1px solid var(--divider); }
.report.is-open { box-shadow: inset 3px 0 0 var(--cta); padding-left: 12px; }
.report.is-resolved { opacity: .75; }
.report-box summary { display: inline-flex; list-style: none; }
.report-box summary::-webkit-details-marker { display: none; }
.report-note { width: 100%; padding: 8px 10px; font: 400 13.5px/1.5 var(--font-sans); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.window-pick { display: grid; gap: 4px; }
.window-label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.compact-posted { margin: 0 0 10px; }
.drop-row.is-next { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 20px; }
.next-text { max-width: 72ch; }
.next-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--divider); }
.next-actions .window-pick select { min-width: 240px; }
.next-step .stack { gap: 12px; }


/* ============ Navigation: 4 tabs + You (2026-10-14) ============
   Laptops: sidebar with Home / Connect / Plans / People and a "You" row. Pages inside a tab
   show a segment row (.section-tabs). Phones: app bar with the group picker, bottom tab bar,
   bottom sheets, one sans typeface (Swiggy/Zomato-like). */
.appbar, .tabbar { display: none; }
.main { position: relative; }
.topbar { position: absolute; top: 20px; right: var(--page-pad); z-index: 20; margin: 0; }
.topbar:not(:has(.ai-meter, .jobs-bell:not([hidden]), .command-bar)) { display: none; }
.topbar:has(.command-bar) { position: static; margin-bottom: 28px; }
.account-link { align-items: center; }
.me-dot { width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none;
          background: var(--sidebar-raised); border: 1px solid var(--sidebar-border); color: var(--on-ink); }
.me-dot svg { width: 16px; height: 16px; }
.account-text .count.is-pill { margin-left: 6px; }
.section-tabs { display: flex; gap: 4px; margin: 0 0 22px; padding: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 12px; white-space: nowrap;
                  font: 600 14px/1 var(--font-sans); color: var(--muted); text-decoration: none; }
.section-tabs a:hover { color: var(--ink); text-decoration: none; }
.section-tabs a[aria-current="page"] { color: var(--ink); }
.section-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cta); }
.section-tabs .n { font: 600 11px/1 var(--font-sans); padding: 3px 6px; border-radius: var(--r-xs); background: var(--surface-muted); color: var(--ink-3); }
.section-tabs .n.is-pill { background: var(--cta); color: var(--on-ink); }

/* Menu rows (You page, group sheet): icon · title + subtitle · chevron, like an app settings list */
.menu-list { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.menu-list > a, .menu-list > button, .menu-list > form > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; min-height: 60px;
  background: transparent; border: 0; border-top: 1px solid var(--divider); color: var(--ink); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.menu-list > :first-child, .menu-list > form:first-child > button { border-top: 0; }
.menu-list > form { margin: 0; }
.menu-list > a:hover, .menu-list > button:hover, .menu-list > form > button:hover { background: var(--surface-hover); text-decoration: none; }
.menu-list > a[aria-current="true"] { background: var(--surface-selected); }
.menu-list .ml-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--surface-muted); color: var(--brand); }
.menu-list .ml-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.menu-list .ml-title { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.menu-list .ml-sub { font: 500 12.5px/1.35 var(--font-sans); color: var(--muted); }
.menu-list > a > svg:last-child, .menu-list > button > svg:last-child { color: var(--faint); flex: none; }
.menu-list .badge { font: 700 11px/1 var(--font-sans); padding: 4px 7px; border-radius: var(--r-xs); background: var(--cta); color: var(--on-ink); }
.menu-list .is-danger .ml-title, .menu-list .is-danger .ml-icon { color: var(--danger-ink); }
.menu-group-label { font: 700 12px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 26px 4px 10px; }

/* You page */
.me-page { max-width: 640px; }
.me-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.me-avatar { width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.me-ai { display: grid; gap: 10px; }
.me-ai-pct { font: 800 20px/1 var(--font-sans); color: var(--ink); }
.me-ai-bar { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.me-ai-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.me-ai-bar.is-mid > span { background: var(--cta); }
.me-ai-bar.is-high > span { background: var(--danger-ink); }
.me-ai .ai-split { margin: 0; }

.menu-list > [hidden] { display: none; }
.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.posted-filter > summary { display: inline-flex; align-items: center; gap: 6px; }
.posted-filter > summary.is-on { border-color: var(--cta); color: var(--ink); background: var(--cta-soft); }
.posted-filter .menu { left: 0; right: auto; display: grid; min-width: 230px; }
.toolbar-end .posted-filter .menu { left: auto; right: 0; }
.menu a { display: flex; align-items: center; gap: 10px; }
.menu a .n { margin-left: auto; font: 600 11.5px/1 var(--font-sans); color: var(--muted); }
.assistant { margin: 0; }
.me-chip { margin: 0 0 18px; }
.me-chip > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 8px 12px; font-size: 13.5px;
                     border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); }
.me-chip > summary::-webkit-details-marker { display: none; }
.me-chip > summary svg { color: var(--brand); width: 16px; height: 16px; }

/* Home shelves: a few items per topic with "See all" */
.shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; align-items: start; }
.shelf { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 16px 8px; min-width: 0; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.shelf-title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.3 var(--font-sans); letter-spacing: -.1px; color: var(--ink); }
.shelf-more { display: inline-flex; align-items: center; gap: 2px; font: 600 13px/1 var(--font-sans); color: var(--cta); white-space: nowrap; }
.shelf-more svg { width: 16px; height: 16px; }
.shelf-more:hover { color: var(--cta-hover); text-decoration: none; }
.shelf-list, .shelf-rail { display: grid; }
.shelf-row, .shelf-card { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--divider); color: var(--ink); text-decoration: none; min-width: 0; }
.shelf-list > :first-child, .shelf-rail > :first-child { border-top: 0; }
.shelf-row:hover, .shelf-card:hover { text-decoration: none; }
.shelf-row:hover .sr-title, .shelf-card:hover .sr-title { color: var(--brand); }
.shelf-row > svg:last-child { color: var(--faint); flex: none; margin-left: auto; }
.shelf-row .ml-icon, .shelf .ml-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--surface-muted); color: var(--brand); }
.sr-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sr-title { font: 600 14px/1.35 var(--font-sans); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-meta { font: 500 12.5px/1.35 var(--font-sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tag { flex: none; }
.shelf-card .date-tile { width: 46px; padding: 6px 0; }
.shelf-card .date-tile .day { font-size: 18px; }
.shelf-points { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.shelf-row.is-prompt .sr-title { color: var(--brand); }
.avatar-pair .avatar.s32 { width: 30px; height: 30px; font-size: 11px; }
.shelf-row .avatar-pair .avatar + .avatar { margin-left: -6px; }
.shelf-rail > :nth-child(n+5) { display: none; }

/* Landing (signed out): sign-in first, the sample group below */
body.is-bare .shell { display: block; }
body.is-bare .main { padding-top: 0; }
.landing { max-width: 1080px; margin: 0 auto; }
.landing-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.logo.is-dark { color: var(--ink); padding: 0; }
.logo.is-dark:hover { color: var(--ink); }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 36px 0 28px; }
.hero-title { font: 600 48px/1.08 var(--font-serif); letter-spacing: -.03em; color: var(--ink); margin: 12px 0 14px; }
.hero-sub { font-size: 17px; line-height: 1.55; color: var(--ink-3); margin: 0 0 22px; max-width: 54ch; }
.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.hero-points strong { color: var(--ink); }
.hero-points .ml-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.hero-card { display: grid; gap: 14px; padding: 26px; }
.signin-box { display: grid; gap: 10px; min-height: 44px; }
.landing-scroll { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; padding: 12px; font: 600 14px/1 var(--font-sans); color: var(--muted); }
.landing-scroll:hover { color: var(--ink); text-decoration: none; }
.landing-sample { padding: 24px 0 48px; border-top: 1px solid var(--border); margin-top: 16px; scroll-margin-top: 12px; }
.sample-head { margin-bottom: -10px; }
.landing-end { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.landing-cta { display: none; }

/* Bottom sheet (group picker): a <dialog> that slides up on phones, a centred card elsewhere */
dialog.sheet { border: 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); width: min(440px, 100vw); max-height: 80vh;
               border-radius: var(--r-lg); background: var(--bg); color: var(--ink); }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }

@media (max-width: 767px) {
  /* One sans family and an app-sized type scale (Swiggy/Zomato): Plus Jakarta Sans is the
     closest free match to their geometric faces and is already loaded. */
  :root { --page-pad: 16px; --appbar-h: 60px;
          --tabbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body { font-size: 14px; }
  .shell { display: block; }
  .sidebar { display: none; }
  .main { padding: 14px var(--page-pad) calc(var(--tabbar-h) + 28px); }
  .t-body-lg { font-size: 14px; line-height: 1.45; }
  .t-small { font-size: 13px; }

  .appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 40;
            min-height: var(--appbar-h); padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .appbar .logo { color: var(--ink); padding: 0; }
  .appbar-group { display: grid; gap: 1px; min-width: 0; color: var(--ink); text-decoration: none; }
  .appbar-group:hover { text-decoration: none; }
  .appbar-group .name { display: flex; align-items: center; gap: 4px; font: 800 17px/1.2 var(--font-sans); letter-spacing: -.2px; }
  .appbar-group .name svg { color: var(--cta); width: 18px; height: 18px; flex: none; }
  .appbar-group .meta { font: 500 12px/1.3 var(--font-sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar-me { position: relative; width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none;
               background: var(--surface-muted); color: var(--brand); }
  .appbar-me .dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--cta); border: 2px solid var(--surface); }
  .appbar-signin { min-height: 38px; padding: 0 14px; }

  /* Background-work clock and the AI chip float in the app bar, left of "You" */
  .topbar { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 64px; z-index: 45; display: flex; gap: 6px; }
  .topbar:has(.command-bar) { position: static; }
  .jobs-bell { width: 40px; height: 40px; border-radius: var(--r-pill); }
  .ai-meter summary { height: 40px; padding: 0 10px; }
  .ai-meter .lbl, .ai-meter .ai-bar { display: none; }

  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
            height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--border); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
              font: 600 11px/1 var(--font-sans); color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar a[aria-current="page"] { color: var(--cta); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cta); }
  .tabbar a[aria-current="page"] svg { stroke-width: 2.4; }
  .tabbar .badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                   display: grid; place-items: center; font: 700 10.5px/1 var(--font-sans); background: var(--cta); color: var(--on-ink); border: 2px solid var(--surface); }

  /* Segment rows and filters scroll sideways like chip rails; they never wrap */
  .section-tabs { position: sticky; top: var(--appbar-h); z-index: 30; margin: -14px calc(-1 * var(--page-pad)) 16px; padding: 0 var(--page-pad);
                  background: var(--surface); }
  .section-tabs a { padding: 13px 12px 14px; font-size: 14px; }
  .toolbar { gap: 8px; }
  .toolbar-end { margin-left: 0; }
  .segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .segmented::-webkit-scrollbar { display: none; }
  .queue-hint, kbd { display: none; }
  .tile summary { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; gap: 4px; }
  .tile-status { grid-column: 1; grid-row: auto; order: 3; }
  .tile-title { font-size: 15px; }
  /* Phones skip the explanatory sentence under page titles: the title and the content say it */
  .main-inner > .t-title-1 + p.t-small, .main-inner > .page-head p.t-small, .list-pane > .t-title-1 + p.t-small { display: none; }
  .main-inner > .t-title-1, .list-pane > .t-title-1 { margin-bottom: 12px; }
  .segmented a, .segmented button { white-space: nowrap; flex: none; padding: 9px 12px; font-size: 13px; font-weight: 600; }

  dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; }

  /* Home: search pill sticks under the app bar; chips and suggestions are sideways rails */
  .assistant { gap: 16px; }
  .assistant-head { gap: 4px; }
  .assistant-head .eyebrow { display: none; }
  .ask-box { position: sticky; top: calc(var(--appbar-h) + 8px); z-index: 25; border-radius: var(--r-lg); padding: 4px 4px 4px 12px; }
  .ask-box input { font-size: 15px; min-height: 40px; }
  .ask-box .btn { min-height: 40px; padding: 0 14px; }
  .glance, .suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-pad)); padding: 0 var(--page-pad);
                          scroll-padding-inline: var(--page-pad); }
  .glance::-webkit-scrollbar, .suggestions::-webkit-scrollbar { display: none; }
  .glance a, .suggestion { flex: none; white-space: nowrap; font-weight: 600; }
  .glance a { padding: 9px 12px; border-radius: var(--r-pill); background: var(--surface); }
  .glance .n { font: 800 15px/1 var(--font-sans); }
  .suggestion { border-radius: var(--r-pill); font-size: 13px; }
  .ask-note { font-size: 12px; margin-top: -8px; }
  .shelves { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .shelf { border-radius: var(--r-lg); padding: 14px 14px 6px; }
  .shelf-title { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
  /* "Coming up": cards scroll sideways, like a restaurant carousel */
  .shelf-rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 6px -14px 8px; padding: 0 14px 4px; scroll-snap-type: x mandatory;
                scroll-padding-inline: 14px; }
  .shelf-rail::-webkit-scrollbar { display: none; }
  .shelf-rail .shelf-card { flex: 0 0 74%; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border);
                            border-radius: var(--r-lg); background: var(--surface-sunken); scroll-snap-align: start; }
  .shelf-rail .shelf-card .sr-text { width: 100%; }
  .shelf-rail > :nth-child(n+5) { display: flex; }
  .shelf-rail .shelf-card .sr-tag { position: absolute; }
  .shelf-rail .shelf-card { position: relative; }
  .shelf-rail .shelf-card .sr-tag { top: 12px; right: 12px; }

  /* People: list rows instead of a table (name + role, then the open ask); tap opens the profile */
  .people-head { display: none; }
  .people-table .inner { min-width: 0; }
  .person-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "need need"; gap: 6px 10px; padding: 12px 14px; }
  .person-row > .who { grid-area: who; }
  .person-row > .building { display: none; }
  .person-row > :nth-child(3) { grid-area: need; padding-left: 42px; min-width: 0; }
  .person-row > :nth-child(3):empty { display: none; }
  .person-row > :nth-child(4) { grid-area: status; }
  .person-row .name { font-size: 15px; }
  .split > .detail-pane { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }

  /* Landing */
  .landing-top { padding: 14px 0; }
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 12px 0 10px; }
  .hero-title { font: 800 30px/1.15 var(--font-sans); letter-spacing: -.6px; margin: 8px 0 10px; }
  .hero-sub { font-size: 15px; margin-bottom: 16px; }
  .hero-card { padding: 18px; }
  body.is-bare .main { padding-bottom: 96px; }
  .landing-cta:not([hidden]) { display: flex; justify-content: center; position: fixed; z-index: 40; left: 16px; right: 16px;
                               bottom: calc(14px + env(safe-area-inset-bottom, 0px)); min-height: 50px; font-size: 15px; border-radius: var(--r-lg); }
  dialog.sheet[open] { animation: sheet-up var(--t-mid) var(--ease-enter); }
  .jobs-tray { bottom: calc(var(--tabbar-h) + 12px); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }


/* ============ Ledger components (2026-10-14) ============
   One accent (cobalt) for "you are here"; ink for actions; hairlines instead of boxes;
   semantic colour only for overdue (red), needs-a-look (amber) and matched/done (green). */

/* Section tabs: ink label, short cobalt underline */
.section-tabs { gap: var(--sp-1); margin-bottom: var(--sp-6); border-bottom-color: var(--divider); }
.section-tabs a { padding: var(--sp-3) var(--sp-3) 14px; font: 600 14px/1 var(--font-sans); color: var(--muted); transition: color var(--t-fast); }
.section-tabs a[aria-current="page"] { color: var(--ink); }
.section-tabs a[aria-current="page"]::after { left: var(--sp-3); right: var(--sp-3); height: 2px; border-radius: 2px; background: var(--accent); }
.section-tabs .n, .section-tabs .n.is-pill { font: 600 11px/1 var(--font-sans); padding: 3px 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); }

/* Filters: a row of quiet text options; the chosen one fills with ink. Counts sit inside. */
.segmented { gap: var(--sp-1); padding: 0; background: transparent; border-radius: 0; }
.segmented a, .segmented button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  font: 600 13px/1 var(--font-sans); color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.segmented a:hover, .segmented button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--ink); }
.segmented .n { margin: 0; font: 500 12px/1 var(--font-sans); color: var(--muted); }
.segmented [aria-current="true"] .n, .segmented [aria-pressed="true"] .n { color: rgba(255, 255, 255, .68); }

/* View switch: one joined icon control, clearly not a filter */
.view-toggle { display: inline-flex; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border-strong); overflow: hidden; flex: none; }
.view-toggle a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-3); font: 600 13px/1 var(--font-sans); color: var(--muted); text-decoration: none; }
.view-toggle a + a { box-shadow: inset 1px 0 0 var(--border-strong); }
.view-toggle a:hover { color: var(--ink); text-decoration: none; }
.view-toggle a[aria-current="true"] { background: var(--surface-muted); color: var(--ink); }
.posted-filter > summary { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.posted-filter > summary.is-on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); }
.toolbar { gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-5); }

/* Lists instead of stacks of cards: tiles share one panel, divided by hairlines */
.tile-grid { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tile { border: 0; border-radius: 0; background: transparent; box-shadow: 0 1px 0 var(--divider), 1px 0 0 var(--divider); }
.tile[open] { background: var(--surface-sunken); }
.tile summary { padding: 14px var(--sp-4); gap: 3px var(--sp-3); transition: background var(--t-fast); }
.tile summary:hover { background: var(--surface-hover); }
.tile summary:hover .tile-title { color: var(--ink); }
.tile-title { font: 600 14.5px/1.4 var(--font-sans); letter-spacing: -.005em; }
.tile-meta { font: 500 12.5px/1.45 var(--font-sans); color: var(--muted); }
.tile.is-attention, .tile.is-open { box-shadow: 0 1px 0 var(--divider), 1px 0 0 var(--divider), inset 2px 0 0 var(--danger); border: 0; }
.tile.is-open { box-shadow: 0 1px 0 var(--divider), 1px 0 0 var(--divider), inset 2px 0 0 var(--warn); }
.tile.is-closed .tile-title { color: var(--muted); font-weight: 500; }
.tile-status .chip { font-size: 11.5px; }
.tile-grid > .empty { border: 0; border-radius: 0; }

/* Full cards (Cards view, follow-ups, events) */
.card { border-color: var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.followup.is-overdue { border-color: var(--border); box-shadow: inset 2px 0 0 var(--danger); }
.followup.is-closed { opacity: 1; }
.followup.is-closed .t-heading { color: var(--muted); }
.date-tile { width: 52px; padding: 7px 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.date-tile .mon { font: 700 10.5px/1 var(--font-sans); letter-spacing: .08em; color: var(--accent); }
.date-tile .day { margin-top: 3px; font: 400 24px/1 var(--font-serif); color: var(--ink); }
.empty { border: 0; background: var(--surface-sunken); color: var(--muted); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); }
.me-chip > summary { border-color: var(--border); }

/* People table rows and the Intros queue */
.person-row { border-bottom-color: var(--divider); }
.person-row .name { font-weight: 600; }
.people-head .eyebrow { font-size: 10.5px; }
.queue-item { border-radius: var(--r-sm); }
.queue-item .pair { font-size: 14.5px; }

/* Home: question box, glance numbers, suggestions, answers */
.assistant-head .t-display { max-width: 18ch; }
.ask-box { border-color: var(--border-strong); border-radius: var(--r-lg); padding: 6px 6px 6px var(--sp-4); min-height: 52px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ask-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.glance { gap: var(--sp-2); }
.glance a { gap: 6px; padding: var(--sp-2) var(--sp-3); border-color: var(--border); border-radius: var(--r-sm); color: var(--ink-3); font-weight: 500; }
.glance a:hover { border-color: var(--ink-3); }
.glance .n { font: 600 15px/1 var(--font-sans); color: var(--ink); }
.glance a.is-attention { background: var(--surface); border-color: var(--danger-border); }
.glance a.is-attention .n { color: var(--danger); }
.suggestion { background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); color: var(--ink-3); font-size: 13px; font-weight: 500; }
.suggestion:hover { border-style: solid; border-color: var(--ink-3); color: var(--ink); }
.turn-user { background: var(--ink); }
.turn-bot { border-color: var(--border); }
.answer-card { background: var(--surface-sunken); border-color: var(--border); border-radius: var(--r-sm); }
.answer-card:hover { border-color: var(--ink-3); }
.answer-card .kind { font: 700 10.5px/1.4 var(--font-sans); letter-spacing: .08em; color: var(--accent); }
.answer-card.is-attention { background: var(--danger-soft); border-color: var(--danger-border); }
.answer-card.is-attention .kind { color: var(--danger); }

/* Shelves: white panels on paper, no outline; rows divided by hairlines */
.shelves { gap: var(--sp-4); }
.shelf { border: 0; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.shelf-title { font: 400 22px/1.15 var(--font-serif); letter-spacing: -.005em; }
.shelf-more { font: 600 13px/1 var(--font-sans); color: var(--accent); }
.shelf-more:hover { color: var(--accent-hover); }
.shelf-row, .shelf-card { padding: var(--sp-3) 0; border-top-color: var(--divider); }
.sr-title { font: 600 14.5px/1.4 var(--font-sans); letter-spacing: -.005em; }
.sr-meta { font: 500 12.5px/1.4 var(--font-sans); }
.shelf-row:hover .sr-title, .shelf-card:hover .sr-title { color: var(--accent-hover); }
.shelf .ml-icon, .shelf-row .ml-icon { background: var(--surface-muted); color: var(--ink-3); }
.shelf-points { font-size: 14px; line-height: 1.5; }

/* You page and menus */
.menu-list { border-color: var(--border); }
.menu-list .ml-icon { background: var(--surface-muted); color: var(--ink); }
.menu-list .ml-title { font: 600 15px/1.3 var(--font-sans); }
.menu-list .badge { background: var(--ink); }
.menu-list > a[aria-current="true"] { background: var(--accent-soft); }
.menu-list > a[aria-current="true"] > svg:last-child { color: var(--accent); }
.menu-group-label { font: 600 11px/1 var(--font-sans); letter-spacing: .08em; }
.me-avatar { background: var(--ink); color: var(--on-ink); }
.me-ai-pct { font: 400 30px/1 var(--font-serif); }
.me-ai-bar > span { background: var(--ink); }
.me-ai-bar.is-mid > span { background: var(--warn); }
.me-ai-bar.is-high > span { background: var(--danger); }
.menu { box-shadow: var(--shadow-panel); border: 0; }

/* Landing */
.hero-title { font: 400 64px/1 var(--font-serif); letter-spacing: -.02em; }
.hero-points .ml-icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); }
.hero-card { border: 0; box-shadow: 0 0 0 1px var(--border); }

@media (max-width: 767px) {
  /* Phones: serif headlines stay (the voice), sans for the rest at app sizes */
  body { font-size: var(--fs-base); }
  .t-display { font-size: 30px; line-height: 1.08; }
  .t-title-1 { font-size: 28px; line-height: 1.1; margin-bottom: var(--sp-3); }
  .hero-title { font: 400 40px/1.02 var(--font-serif); letter-spacing: -.015em; }
  .shelf-title { font-size: 21px; }
  .appbar { border-bottom-color: var(--divider); }
  .appbar-group .name { font: 600 16px/1.2 var(--font-sans); letter-spacing: -.01em; }
  .appbar-group .name svg { color: var(--muted); }
  .appbar-me { background: var(--ink); color: var(--on-ink); width: 36px; height: 36px; }
  .appbar-me svg { width: 17px; height: 17px; }
  .jobs-bell { width: 36px; height: 36px; border-color: var(--border); }
  .topbar { top: calc(12px + env(safe-area-inset-top, 0px)); right: 60px; }

  /* Bottom navigation: consistent 1.75 strokes, ink when selected, cobalt dot marker */
  .tabbar { border-top-color: var(--divider); height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a { gap: 5px; font: 600 11px/1 var(--font-sans); letter-spacing: .01em; color: var(--muted); transition: color var(--t-fast); }
  .tabbar a svg { width: 22px; height: 22px; stroke-width: 1.75; }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] svg { stroke-width: 2.1; }
  .tabbar a[aria-current="page"]::before { top: 6px; left: 50%; right: auto; width: 4px; height: 4px; margin-left: 14px; border-radius: 50%; background: var(--accent); }
  .tabbar a:active svg { transform: scale(.92); }
  .tabbar .badge { top: 6px; left: calc(50% + 7px); min-width: 17px; height: 17px; font: 700 10px/1 var(--font-sans); background: var(--ink); border: 2px solid var(--surface); }

  .section-tabs { background: var(--bg); border-bottom-color: var(--divider); }
  .section-tabs a { padding: 14px var(--sp-3) 15px; }
  .segmented a, .segmented button { min-height: 34px; }
  .view-toggle a span { display: none; }
  .view-toggle a { padding: 0 10px; min-height: 34px; }
  .tile summary { padding: 14px var(--sp-4); }
  .tile-grid { border-radius: var(--r-lg); }
  .shelf { padding: var(--sp-4) var(--sp-4) var(--sp-1); }
  .shelf-rail .shelf-card { background: var(--surface-sunken); border-color: var(--divider); }
  .glance a { border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
  .suggestion { border-radius: var(--r-sm); }
  .ask-box { border-radius: var(--r-lg); }
}

/* Review pass: neutral statuses read as text, only meaningful ones get a fill */
.tile-status .chip:not(.chip-danger):not(.chip-brand):not(.chip-attention),
.shelf .sr-tag.chip:not(.chip-danger):not(.chip-brand):not(.chip-attention) { background: transparent; color: var(--muted); padding: 0; font-weight: 600; }
.assistant-head .t-display { max-width: 24ch; }
.date-tile .day { font-size: 27px; }
@media (max-width: 767px) { .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }
.assistant { grid-template-columns: minmax(0, 1fr); }  /* sideways rails must not widen the column */