/* Ascent entry: full-page owner strategy, no financial data in the link. */
.ascent-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;margin:12px 0 22px;border:1px solid #3a3a44;background:#131316;color:#f4f4ee;text-decoration:none}.ascent-entry span{font:10px/1.5 "JetBrains Mono",monospace;color:#d4ff3a}.ascent-entry strong{font-size:15px;font-weight:500;margin-right:auto}.ascent-entry:focus-visible{outline:2px solid #d4ff3a;outline-offset:4px}@media(max-width:600px){.ascent-entry{flex-wrap:wrap;gap:10px;padding:16px}.ascent-entry strong{flex-basis:100%;order:1}.ascent-entry span:last-child{margin-left:auto}}
/* Penthouse entry: the owner's own page (/me), paired with Ascent above; no personal data in the link. */
.penthouse-entry{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;margin:12px 0 22px;border:1px solid #3a3a44;background:#131316;color:#f4f4ee;text-decoration:none}.ascent-entry+.penthouse-entry{margin-top:-10px}.penthouse-entry span{font:600 10px/1.5 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;letter-spacing:.14em;color:#d4ff3a}.penthouse-entry strong{font-size:15px;font-weight:500;margin-right:auto}.penthouse-entry:focus-visible{outline:2px solid #d4ff3a;outline-offset:4px}@media(max-width:600px){.penthouse-entry{flex-wrap:wrap;gap:10px;padding:16px}.penthouse-entry strong{flex-basis:100%;order:1}.penthouse-entry span:last-child{margin-left:auto}}

/* Ascent's shared counts are supplemental to the existing People/Staff work. */
.ascent-work-strip{margin:12px 16px;padding:14px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:8px;font-size:12px}.ascent-work-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.ascent-work-measures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.ascent-work-measures summary{cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:44px}.ascent-work-measures strong{font-size:22px}.ascent-work-strip details>summary{cursor:pointer;min-height:36px}.ascent-work-strip p{line-height:1.5;opacity:.78}.ascent-work-strip summary:focus-visible,.ascent-work-strip a:focus-visible{outline:2px solid currentColor;outline-offset:3px}.ascent-work-row{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}.ascent-work-loading{font-size:12px;margin:12px 16px}.sos-root .ascent-work-measures{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:600px){.ascent-work-measures{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================
   EON OS — Editorial Minimal
   Design language: confident, quiet, dense type, generous space.
   Grain & gradient atmosphere. Underline-only inputs. One quiet action.
   ========================================================== */

/* The Workroom return bar is chrome on two registered floors (1 and 2),
   so its rules live in eon_workroom.css — the stylesheet those floors
   register. Anything shown on a floor has to be somewhere the design
   gate can see it. Do not bring .wr-return-* rules back into this file:
   everything above the floor 4 marker here is outside every floor's
   scoped section, so a rule placed here can never ask for a verdict. */

/* ── Tokens ─────────────────────────────────────────────── */

/* house (2026-08-06 WS-A) shares the dark ground by construction —
   one block, two names, token parity forever. */
[data-theme="dark"],
[data-theme="house"] {
  --bg: #0b0b0d;
  --bg-elev: #131316;
  --bg-card: #16161a;
  --bg-card-2: #1d1d22;
  --line: #26262d;
  --line-soft: #1c1c22;
  --line-strong: #3a3a44;
  --ink: #f4f4ee;
  --ink-dim: #c0c0b6;
  --ink-mute: #8b8b85;
  --ink-faint: #3d3d3a;
  --accent: #d4ff3a;
  --accent-text: #0b0b0d;
  --accent-soft: rgba(212, 255, 58, 0.12);
  --danger: #ff4747;
  --danger-soft: rgba(255, 71, 71, 0.12);
  --warn: #ffb347;
  --warn-soft: rgba(255, 179, 71, 0.12);
  --ok: #4dd6a0;
  --ok-soft: rgba(77, 214, 160, 0.12);
  --whale: #b8a4ff;
  --grain-opacity: 0.06;
  /* 2026-06-10 (UI audit #1): ~245 inline styles across Ask EON, the CS
     inbox tile, modals and the entire Ads view reference these names,
     which were never defined — so borders/backgrounds/muted-text
     silently fell back to transparent/inherit. Alias them to the real
     tokens. */
  --border: var(--line);
  --bg-sub: var(--bg-card-2);
  --ink-soft: var(--ink-mute);
  /* 2026-07-02 (light-mode fix): these names were referenced across Money,
     home widgets, recs and modals but NEVER defined, so each fell back to a
     hardcoded literal that ignored the theme — a dark #111418 elevation and
     WHITE translucent overlays. On the light theme the dark one stayed dark
     and the white overlays washed out ("some areas stay dark" bug). Define
     them per-theme; the translucent tint now inverts (white on dark). */
  --bg-elevated: var(--bg-elev);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-soft: rgba(255, 255, 255, 0.03);
  --card-hover: rgba(255, 255, 255, 0.03);
  --card-line: rgba(255, 255, 255, 0.08);
  --good: var(--ok);
  --bad: var(--danger);
  --accent-bright: var(--accent);
}

[data-theme="light"] {
  --bg: #faf9f5;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-card-2: #f4f3ed;
  --line: #e4e3dc;
  --line-soft: #ededea;
  --line-strong: #c4c3bc;
  --ink: #15151a;
  --ink-dim: #5a5a55;
  --ink-mute: #9a9a92;
  --ink-faint: #c8c7c0;
  --accent: #15151a;
  --accent-text: #d4ff3a;
  --accent-soft: rgba(21, 21, 26, 0.06);
  --danger: #c92a2a;
  --danger-soft: rgba(201, 42, 42, 0.08);
  --warn: #b87100;
  --warn-soft: rgba(184, 113, 0, 0.08);
  --ok: #2b8a5a;
  --ok-soft: rgba(43, 138, 90, 0.08);
  --whale: #6b5cc4;
  --grain-opacity: 0.04;
  /* UI audit #1 aliases (see dark block). */
  --border: var(--line);
  --bg-sub: var(--bg-card-2);
  --ink-soft: var(--ink-mute);
  /* Light-mode fix (see dark block). Translucent tints flip to a DARK ink so
     elevation + hairlines read on a light background instead of washing out. */
  --bg-elevated: var(--bg-elev);
  --surface: rgba(21, 21, 26, 0.035);
  --surface-soft: rgba(21, 21, 26, 0.022);
  --card-hover: rgba(21, 21, 26, 0.03);
  --card-line: rgba(21, 21, 26, 0.08);
  --good: var(--ok);
  --bad: var(--danger);
  --accent-bright: var(--accent);
}


:root {
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Operator 2026-07-06 (DESIGN FLOW references): the serif display is
     retired app-wide — one tight grotesque family everywhere, heavy
     weights (800/900) for display moments. */
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  /* CLAMPED AT THE SOURCE (operator screenshots 2026-08-11, same defect
     family as IMG_9317/#2237): his runtime reports a safe-area inset far
     past any real home indicator (~114 CSS px measured, cause still
     unreproduced), and the #2237 bound covered only the nav — the chat
     and CS composers read the raw var and floated a dead band above the
     floor/keyboard. No real iOS inset exceeds 34pt, so bound it ONCE
     here and every consumer inherits; a correct device is byte-identical
     (min(34,34)=34). Consumers must never re-derive from env() directly. */
  --safe-bottom: min(env(safe-area-inset-bottom, 0px), 34px);

  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transition: 240ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 480ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── Design Flow theme (operator-selectable skin, 2026-07-06) ─────
   Hard reference: the operator's DESIGN FLOW boards — bone field, ink
   type, ONE vermilion. Same #F43B00 accent system as the crux.ng theme
   so brand and OS rhyme. Selected in Settings → Appearance (stored as
   'flow' in localStorage.eon_theme).
   Placed AFTER :root so the display-face and radius overrides win the
   equal-specificity source-order tie against :root.
   Every token defined in the dark/light blocks MUST be defined here —
   a missing token silently falls back to transparent/inherit, the
   exact bug class the 2026-06-10 and 2026-07-02 audits fixed. A
   source-inspection test enforces token parity. */
[data-theme="flow"] {
  --bg: #F2F0EC;
  --bg-elev: #FBFAF8;
  --bg-card: #FBFAF8;
  --bg-card-2: #ECE9E2;
  --line: #CFC9BE;
  --line-soft: #DFD9CE;
  --line-strong: #131211;
  --ink: #131211;
  --ink-dim: #46433E;
  --ink-mute: #6E6A63;
  --ink-faint: #B3AEA5;
  --accent: #2E7A50;
  --accent-text: #FBFAF8;
  --accent-soft: rgba(46, 122, 80, 0.10);
  --danger: #C0201F;
  --danger-soft: rgba(192, 32, 31, 0.08);
  --warn: #A66B00;
  --warn-soft: rgba(166, 107, 0, 0.08);
  --blue: #2456c4;
  --ok: #2b8a5a;
  --ok-soft: rgba(43, 138, 90, 0.08);
  --whale: #6B5CC4;
  --grain-opacity: 0.03;
  --border: var(--line);
  --bg-sub: var(--bg-card-2);
  --ink-soft: var(--ink-mute);
  --bg-elevated: var(--bg-elev);
  --surface: rgba(19, 18, 17, 0.055);
  --surface-soft: rgba(19, 18, 17, 0.035);
  --card-hover: rgba(19, 18, 17, 0.05);
  --card-line: rgba(19, 18, 17, 0.14);
  --good: var(--ok);
  --bad: var(--danger);
  --accent-bright: var(--accent);
  /* structural voice: grotesque display (no serif) + squared corners */
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 4px;
}

/* ── Money · Projection — the far glass (HORIZON-1, 2026-08-28) ───
   24 months / 5 years. Rides the LEDGER-5 chart/note classes; only
   the fan, the stations, the scenario chips and the driver rows are
   new. All-skins, above the Vault slice, same laws: hairlines, mono
   tabular numbers, one accent. The room's single moving thing is the
   fan sweeping open — everything else holds still.
   PLACED ABOVE the Ledger-bench block on purpose:
   test_ledger_bench_ui slices bench-banner → next ══ banner and
   caps that slice at 250 lines — this block inside it broke the
   pin (adversarial review 2026-08-28). */

.hz-scen { margin: 2px 0 10px; }
/* .date-chips{display:flex} would beat the UA [hidden] rule and
   leave dead Data/Bear chips visible on the near glass */
.hz-scen[hidden] { display: none; }
.hz-scen .meta { font-size: 10.5px; opacity: .55; align-self: center; }
.hz-chart svg { width: 100%; height: 150px; display: block; }
.hz-station {
  font-size: 7.5px; fill: currentColor; opacity: .55;
  letter-spacing: .04em;
}
.hz-legend {
  display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px;
  font-size: 10.5px; opacity: .6;
}
.hz-legend .hz-k {
  display: inline-block; width: 14px; height: 3px; margin-right: 5px;
  vertical-align: middle;
}
.hz-k-line { background: var(--accent, #d4ff3a); }
.hz-k-fan { background: var(--accent, #d4ff3a); opacity: .18; height: 8px; }
.hz-k-plan {
  background: none; border-top: 1px dashed var(--ink-mute, #8b8b85);
  height: 0;
}
.hz-driver {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto auto;
  gap: 10px; align-items: baseline;
}
.hz-src {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--ok, #4dd6a0); color: var(--ok, #4dd6a0);
  border-radius: 3px; padding: 1px 6px;
}
.hz-src-seed {
  border-style: dashed; border-color: var(--warn, #F2A24C);
  color: var(--warn, #F2A24C);
}
.hz-srcname { font-size: 9.5px; opacity: .45; }
.hz-gap { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; }
.hz-gap .hz-ok { color: var(--ok, #4dd6a0); }
/* the 13-week Monday walk — one hairline row per week */
.hz-wkrow {
  display: grid; grid-template-columns: 56px 1fr 1fr 1fr 1fr;
  gap: 8px; align-items: baseline; font-size: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft, #1c1c22);
}
.hz-wkrow:last-of-type { border-bottom: none; }
.hz-wkhead {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  opacity: .5; border-bottom: 1px solid var(--border, #26262d);
}
.hz-wkc { text-align: right; white-space: nowrap; }
.hz-wkrow .hz-wkc:first-child { text-align: left; opacity: .6; }
.hz-neg { color: var(--danger, #FF6B6B); }
.hz-wkitems {
  font-size: 10px; opacity: .5; padding: 0 0 6px 64px;
  border-bottom: 1px solid var(--line-soft, #1c1c22);
  /* numbers law: naira figures ride mono/tabular even in captions */
  font-family: var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
/* the lane rows — label + metric + verdict (arbiter) and the 5-col
   store table: their FIRST cell is prose, so it gets a minmax track
   with ellipsis instead of borrowing the weekly ledger's fixed 56px
   date stamp (Opus vet 2026-08-29) */
.hz-lanerow, .hz-lanerow5 {
  display: grid; gap: 8px; align-items: baseline; font-size: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft, #1c1c22);
}
.hz-lanerow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; }
.hz-lanerow5 { grid-template-columns: minmax(0, 1.3fr) 1fr 1fr 1fr 1fr; }
.hz-lanerow:last-of-type, .hz-lanerow5:last-of-type { border-bottom: none; }
.hz-lane-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
/* narrow screens: the weekly/store ledgers scroll inside their card
   instead of clipping under .ldg-card{overflow:hidden} */
.hz-chart { overflow-x: auto; }
.hz-scroll { overflow-x: auto; }
.hz-wkrow, .hz-lanerow5 { min-width: 400px; }
/* the sweep — the fan opens from today outward, once, on arrival */
.hz-fanwrap .hz-sweep {
  transform-origin: left center;
  animation: hzSweepOpen .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes hzSweepOpen {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-fanwrap .hz-sweep { animation: none; }
}
/* written WITHOUT the usual space after the colon on purpose: the
   ledger-bench mobile pin (test_ledger_bench_ui) indexes the file's
   FIRST spaced max-width-720 media literal and must keep finding the
   bench's own query, which this block now precedes. */
@media (max-width:720px) {
  .hz-driver { grid-template-columns: minmax(0,1fr) auto auto; }
  .hz-driver .hz-srcname { display: none; }
  .hz-gap { grid-template-columns: minmax(0,1fr) auto; }
  .hz-gap span:nth-child(2) { grid-column: 1 / -1; opacity: .7; }
  /* keep the % beside its label — sparse auto-placement was orphaning
     it onto its own row (Opus vet 2026-08-29) */
  .hz-gap b { grid-row: 1; grid-column: 2; }
}


/* ── Money · the provisional chip (2026-08-10) ────────────────────
   The P&L above counts unreviewed drafts (only 'voided' is excluded),
   so the figure is part belief. This footnote says how much, and taps
   into the Ledger's review queue. All skins — it sits ABOVE the
   house-scoped Vault slice on purpose. */
.mny-prov-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px;
  background: none; color: inherit; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: var(--r-pill, 4px);
  font: 500 12px var(--body, inherit); text-align: left;
}
.mny-prov-chip:hover { border-color: var(--blue, #7AA6FF); }
.mny-prov-chip:focus-visible {
  outline: 2px solid var(--accent, #C8FF4D); outline-offset: 2px;
}
.mny-prov-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue, #7AA6FF); flex: 0 0 auto;
}
/* ── Money · the worksheet (WKS-1 + WKS-2 vet round, 2026-08-30) ──
   The bench's rows become a sheet: one shared column template on a
   CSS var so header, composer and rows always align; hairline grid,
   no zebra; figures right-aligned in the repo's mono utility; the
   single accent is spent once, on the saved-cell flash. All-skins —
   sits ABOVE the Vault's scoped slice like the bench it extends.
   WKS-2: the sheet is its own pane (so the sticky header actually
   sticks); component tokens --wks-act/--wks-mute carry a legible
   light-skin override (the raw --blue fallback read 2.3:1 on white);
   radii are a squared 3px, never a skin's pill --r-lg. */

.wks-scroll {
  overflow: auto; max-height: min(64vh, 680px);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.wks {
  min-width: 640px;
  --wks-act: var(--blue, #7AA6FF);
  --wks-mute: var(--ink-mute, #8b8b93);
}
.wks-colsmenu { --wks-act: var(--blue, #7AA6FF); }
[data-theme="light"] .wks, [data-theme="light"] .wks-colsmenu {
  --wks-act: #1d5bbf; --wks-mute: #5b5b64;
}
.wks-r {
  display: grid; grid-template-columns: var(--wks-cols);
  align-items: center; min-height: 40px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.08));
}
.wks-r:last-child { border-bottom: none; }
.wks-r:hover:not(.wks-h):not(.wks-comp) { background: rgba(127,127,127,.05); }
.wks-h {
  position: sticky; top: 0; z-index: 2; min-height: 34px;
  background: var(--bg-card, #16161A);
}
.wks-hlab {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wks-mute);
}
.wks-c {
  padding: 6px 10px; font-size: 13px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wks-c-sel { padding: 6px 6px 6px 10px; }
.wks-c-sel .ldg-check { width: 18px; height: 18px; }
.wks-c-num, .wks-c-amt { text-align: right; }
.wks-sort {
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--wks-mute); font-family: inherit;
}
.wks-sort:hover { color: inherit; }
.wks-sort-on { color: inherit; }
/* reserved caret slot — the label must not shift when a sort lands */
.wks-caret { display: inline-block; width: 12px; margin-left: 2px;
  color: var(--wks-act); }
.wks-c-amt.wks-sort, .wks-c-amt .wks-hlab { text-align: right; }
.wks-edit { cursor: text; }
.wks-edit:hover, .wks-edit:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--wks-act);
}
.wks-lockc { cursor: default; opacity: .88; }
.wks-busy { opacity: .55; }
.wks-void .wks-c { opacity: .45; text-decoration: line-through; }
.wks-void .wks-c-sel, .wks-void .wks-c-stat,
.wks-void .wks-c-open { text-decoration: none; }
.wks-new { box-shadow: inset 2px 0 0 var(--wks-act); }
.wks-uncat { color: var(--warn, #E8B84B); }
.wks-in-amt { color: var(--ok, #7ADB8F); }
.wks-in {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: rgba(127,127,127,.08); color: inherit;
  border: 1px solid rgba(127,127,127,.35);
  border-radius: 3px; padding: 5px 8px;
  font: inherit; font-size: 13px;
}
.wks-in:focus { outline: none; border-color: var(--wks-act); }
.wks-amt-in { text-align: right; }
.wks-amt-echo {
  display: block; font-size: 10px; line-height: 1.3; min-height: 13px;
  text-align: right; color: var(--wks-mute);
}
/* the composer reads as "type here" on every skin — a translucent
   ground no token can strand */
.wks-comp { background: rgba(127,127,127,.07); }
.wks-comp .wks-c { overflow: visible; }
.wks-plus { color: var(--wks-mute); text-align: center; }
.wks-kind, .wks-file, .wks-open {
  background: none; color: inherit; cursor: pointer;
  border: 1px solid rgba(127,127,127,.35);
  border-radius: 3px; padding: 5px 9px; font-size: 12px;
}
.wks-kind-in { color: var(--ok, #7ADB8F); border-color: var(--ok, #7ADB8F); }
.wks-file:hover, .wks-open:hover { border-color: var(--wks-act); }
.wks-open { border-color: transparent; color: var(--wks-mute); }
.wks-c-open { display: flex; gap: 6px; justify-content: flex-end;
  align-items: center; }
/* the offer is a quiet mark, not the loudest thing on the sheet */
.wks-sug {
  display: inline-block; margin-left: 8px; padding: 0 2px;
  background: none; border: none; cursor: pointer; font-size: 11px;
  color: var(--wks-act);
  text-decoration: underline dotted; text-underline-offset: 3px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; font-family: inherit;
}
@keyframes wks-flash-kf {
  0% { box-shadow: inset 0 0 0 1px var(--accent, #C8FF4D); }
  100% { box-shadow: inset 0 0 0 1px transparent; }
}
.wks-flash { animation: wks-flash-kf 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .wks-flash { animation: none; }
}
.wks-tot { margin-left: auto; margin-right: 12px; font-size: 12px;
  color: var(--wks-mute); white-space: normal; text-align: right; }
.wks-bulk-sum { color: var(--ink-mute, #8b8b93); }
.wks-colsmenu {
  position: fixed; z-index: 60; min-width: 170px;
  background: var(--bg-card, #16161A);
  border: 1px solid var(--line-soft, rgba(255,255,255,.12));
  border-radius: 3px; padding: 8px 10px;
}
.wks-colrow {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px; font-size: 13px; cursor: pointer;
}
/* phones: the sheet scrolls INSIDE its rail — the page never pans */
@media (max-width:720px) {
  .wks { min-width: 600px; }
  .wks-scroll { max-height: 70vh; }
  .wks-c { padding: 6px 8px; font-size: 12px; }
}

/* ── Money · the Ledger bench (LEDGER-2, 2026-08-10) ──────────────
   All-skins work surface (deliberately NOT house-gated, so it lives
   ABOVE the Vault's scoped slice — verdict floor-I@140e000a moved it
   out after the scoping law caught the first placement). Queue tiles
   → toolbar → rows → drawer. Mono figures right-aligned via the
   repo's real utility (mono-num); skin-aware semantic vars only. */

.ldg-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px;
  scrollbar-width: none;
}
.ldg-strip::-webkit-scrollbar { display: none; }
.ldg-tile {
  flex: 0 0 auto; min-width: 132px; text-align: left; cursor: pointer;
  background: var(--bg-card, #16161A);
  border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: var(--r-lg, 6px); padding: 12px 14px; color: inherit;
}
.ldg-tile:focus-visible { outline: 2px solid var(--accent, #C8FF4D); outline-offset: 2px; }
.ldg-tile-n { display: block; font-size: 20px; font-weight: 700; }
.ldg-tile-l {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; opacity: .65; margin-top: 3px;
}
.ldg-tile-m { display: block; font-size: 11px; opacity: .55; margin-top: 2px; }

.ldg-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 10px; }
.ldg-chiprow { display: flex; gap: 6px; }
.ldg-chip {
  background: none; border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: var(--r-pill, 4px); padding: 5px 12px; font-size: 12px;
  color: inherit; opacity: .75; cursor: pointer;
}
.ldg-chip-on {
  border-color: var(--accent, #C8FF4D); color: var(--accent, #C8FF4D); opacity: 1;
}
.ldg-sel, .ldg-search {
  background: var(--bg-card, #16161A); color: inherit;
  border: 1px solid var(--line-soft, rgba(255,255,255,.08));
  border-radius: var(--r-md, 4px); padding: 6px 10px; font-size: 12.5px;
}
.ldg-search { flex: 1 1 160px; min-width: 120px; }
.ldg-btn {
  background: none; border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: var(--r-pill, 4px); padding: 6px 14px; font-size: 12px;
  color: inherit; cursor: pointer;
}
.ldg-btn-act {
  background: var(--accent, #C8FF4D); color: var(--accent-text, #0A0A0C);
  border-color: transparent; font-weight: 700;
}
.ldg-btn-danger { color: var(--danger, #FF6B6B); border-color: color-mix(in srgb, var(--danger, #FF6B6B) 50%, transparent); }
.ldg-btn:focus-visible { outline: 2px solid var(--accent, #C8FF4D); outline-offset: 2px; }

.ldg-bulk {
  display: flex; gap: 8px; align-items: center; padding: 8px 0;
  font-size: 12.5px;
}
.ldg-card { padding: 0; overflow: hidden; }
/* SOURCE-ORDER TRAP (verdict da700136): .data-card is redeclared
   ~line 3851 with padding + an accent stripe; at equal specificity
   later source wins, and this block lives near the top of the file —
   the bench must outrank it explicitly or the rows sit inset. */
.data-card.ldg-card { padding: 0; }
.ldg-card::before { display: none; }
.ldg-rows { min-height: 120px; }
.ldg-row {
  display: grid;
  grid-template-columns: 26px 78px minmax(0,1fr) minmax(80px,150px) 110px 86px;
  gap: 10px; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.06));
  cursor: pointer;
}
.ldg-row:hover, .ldg-row:focus-visible {
  background: var(--bg-elev, rgba(255,255,255,.03)); outline: none;
}
.ldg-row-void { opacity: .45; }
.ldg-check { width: 15px; height: 15px; }
.ldg-date { font-size: 11px; opacity: .6; }
.ldg-desc { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldg-desc small { display: block; font-size: 10.5px; opacity: .5; overflow: hidden; text-overflow: ellipsis; }
.ldg-cat {
  font-size: 11.5px; border: 1px solid var(--line-soft, rgba(255,255,255,.1));
  border-radius: var(--r-pill, 4px); padding: 3px 9px; justify-self: start;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ldg-cat-none { border-style: dashed; color: var(--warn, #F2A24C); border-color: color-mix(in srgb, var(--warn, #F2A24C) 50%, transparent); }
.ldg-amt { font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ldg-in { color: var(--ok, #56E39F); }
.ldg-stat {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  justify-self: end; opacity: .6; white-space: nowrap;
}
.ldg-stat-pending_review { color: var(--blue, #7AA6FF); opacity: 1; }
/* The classic dark/light token blocks are FROZEN (design-ink law) —
   light's legible blue lands as a component override, not a token;
   dark/house ride the fallback (the dark value); flow declares its
   own --blue in its unfrozen block. */
[data-theme="light"] .ldg-stat-pending_review { color: #2456c4; }
.ldg-stat-voided { color: var(--danger, #FF6B6B); }
.ldg-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; font-size: 11.5px; opacity: .8;
}
.ldg-empty { padding: 26px 14px; font-size: 13px; opacity: .6; }

.ldg-drawer { max-height: 86vh; overflow-y: auto; }
.ldg-dgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 10px;
}
.ldg-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; opacity: .9; }
.ldg-f input, .ldg-f select {
  background: var(--bg-elev, #101013); color: inherit;
  border: 1px solid var(--line-soft, rgba(255,255,255,.1));
  border-radius: var(--r-md, 4px); padding: 7px 9px; font-size: 13px;
}
.ldg-f input:disabled, .ldg-f select:disabled { opacity: .4; }
.ldg-f-wide { grid-column: 1 / -1; }
.ldg-lockline { font-size: 11.5px; opacity: .6; padding: 2px 0 8px; }
.ldg-dact { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
.ldg-hist { border-top: 1px dashed var(--line-soft, rgba(255,255,255,.1)); padding-top: 10px; }
.ldg-hhead { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; opacity: .55; padding-bottom: 6px; }
.ldg-hline { display: flex; gap: 10px; font-size: 11.5px; opacity: .8; padding: 3px 0; }
.ldg-hnone { opacity: .5; }
.ldg-rule {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) auto auto;
  gap: 10px; align-items: center; padding: 9px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.06));
}
.ldg-rule-h { opacity: .55; font-size: 11px; white-space: nowrap; }
.ldg-evtag {
  flex: 0 0 auto; font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--whale, #B58CFF);
  border: 1px solid color-mix(in srgb, var(--whale, #B58CFF) 40%, transparent);
  border-radius: var(--r-pill, 4px); padding: 2px 7px;
}
.ldg-row-bank .ldg-check { visibility: hidden; }
.ldg-rule-m, .ldg-rule-c {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  /* The amber uncategorized chip and the review tag are the whole
     point of the queue — on the phone they wrap under the line
     instead of disappearing (verdict repair #2). */
  .ldg-row {
    grid-template-columns: 22px 64px minmax(0,1fr) 96px;
    grid-template-areas: "chk date desc amt" "chk cat cat stat";
    row-gap: 4px;
  }
  .ldg-check { grid-area: chk; }
  .ldg-date { grid-area: date; }
  .ldg-desc { grid-area: desc; }
  .ldg-amt { grid-area: amt; }
  .ldg-cat { grid-area: cat; justify-self: start; }
  .ldg-stat { grid-area: stat; }
  .ldg-dgrid { grid-template-columns: 1fr; }
}

/* ── Money · Projection (LEDGER-5, 2026-08-10) ────────────────────
   Rides the bench's tile/card/button classes; only the chart and the
   note cards are new. All-skins, above the Vault slice, same laws. */

.prj-card { padding: 14px 16px; }
.prj-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  opacity: .6; padding-bottom: 10px;
}
.prj-chart svg { width: 100%; height: 130px; display: block; }
.prj-xlab { font-size: 8px; fill: currentColor; opacity: .5; }
.prj-breach { font-size: 9px; fill: var(--danger, #FF6B6B); }
.prj-rev { display: flex; flex-direction: column; gap: 7px; }
.prj-rrow {
  display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto;
  gap: 10px; align-items: center; font-size: 12px;
}
.prj-rmon { opacity: .6; font-size: 11px; }
.prj-rbar {
  position: relative; height: 12px;
  background: var(--bg-elev, rgba(255,255,255,.04));
  border-radius: var(--r-md, 4px); overflow: hidden;
}
.prj-rbar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--accent-soft, rgba(200,255,77,.18));
  border-right: 2px solid var(--accent, #C8FF4D);
}
.prj-rbar b {
  position: absolute; top: 4px; bottom: 4px; display: block;
  background: color-mix(in srgb, var(--accent, #C8FF4D) 35%, transparent);
  border-radius: 2px;
}
.prj-ramt { white-space: nowrap; }
.prj-rrow .prj-commit { color: var(--warn, #F2A24C); font-size: 10px; white-space: nowrap; }
.prj-note { margin-top: 12px; }
.prj-line { font-size: 12.5px; opacity: .85; padding: 3px 0; max-width: 68ch; }
/* a degraded leg has to READ as degraded — full opacity, warn accent */
.prj-line.is-warn { color: var(--warn, #F2A24C); opacity: 1; font-weight: 500; }
@media (max-width: 720px) {
  .prj-rrow { grid-template-columns: 52px minmax(0,1fr) auto; }
  .prj-rrow .prj-commit { grid-column: 2 / -1; }
}

/* ══ EON INK MODE — shared token source for the operational surfaces ══
   Ops design pass 01 (2026-07-11): the Design Flow ink mode promoted to
   the operational surfaces. ONE definition here; consumers map their
   local token names onto these:
     cs.css        .csw-shell pin block  (CS chat — pinned dark)
     staff_os.css  .sos-root             (Staff OS — pinned dark)
     login.css     mirrors the values literally (/login loads before auth
                   and cannot depend on app.css)
   Theme-independent by design — the ops surfaces are pinned dark, so
   these do NOT vary per [data-theme]. The Classic dark/light/flow blocks
   above are untouched by the design pass and frozen by
   tests/test_design_ink_tokens_2026_07_11.py. */
:root {
  --eon-bg: #0A0A0C;             /* ink ground */
  --eon-bg-1: #101013;           /* elevated */
  --eon-bg-2: #16161A;           /* card */
  --eon-bg-3: #1B1B20;           /* raised card */
  --eon-line: rgba(255, 255, 255, .14);
  --eon-line-soft: rgba(255, 255, 255, .08);
  --eon-line-strong: rgba(255, 255, 255, .22);
  --eon-ink: #F4F4F2;
  --eon-ink-dim: #C6C4BF;
  --eon-ink-mute: #9A9AA2;
  --eon-ink-faint: #5E5E66;
  --eon-accent: #C8FF4D;         /* THE act — one per screen */
  --eon-on-accent: #0A0A0C;
  --eon-ok: #56E39F;             /* done / live */
  --eon-warn: #F2A24C;           /* waiting */
  --eon-danger: #FF6B6B;         /* kill only */
  --eon-whale: #B58CFF;          /* EON intelligence only */
  --eon-blue: #7AA6FF;           /* informational / team */
  --eon-bub-out: #11402F;        /* rep out-bubble (was hardcoded #12503A) */
  --eon-bub-out-ink: #EAFFF2;
  --eon-ch-wa: #25D366;          /* WhatsApp brand dot */
  --eon-ch-ig: #E1306C;          /* Instagram brand dot */
}

/* ── Reset ──────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  /* 2026-07-09 (operator, IMG_8751 "bottom is truncated"): body pads the
     notch but #app was a full 100dvh tall, so the shell's bottom hung
     var(--safe-top) below the viewport on notched phones — the nav's own
     safe-bottom padding absorbed most of it under Classic (icons masked
     the sliced labels), but the flow theme's text-only nav exposed it.
     body keeps ONLY the top inset; #app subtracts it; the nav remains the
     single owner of safe-bottom (see .nav — and the composer-shell note
     below about not stacking safe-bottom sources). */
  padding-top: var(--safe-top);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Button system (WS-A, 2026-07-26) ────────────────────────────
   .btn-primary / .btn-secondary / .btn-ghost were used 57× in app.js
   but styled ONLY under [data-theme="flow"] (flow.css) — under Classic
   dark/light the reset above left them as bare inline text. Tokens
   only, so dark and light inherit from their own :root blocks; flow.css
   loads last and keeps winning its square-caps treatment. */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-lg, 6px);
  padding: 9px 16px;
  transition: transform var(--transition-fast), opacity var(--transition-fast),
              border-color var(--transition-fast), background var(--transition-fast);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-secondary {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary:hover,
.btn-ghost:hover { border-color: var(--line-strong); }
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active { transform: scale(0.97); }
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* WS-E (2026-07-26): fourth tier — destructive actions wear one face.
   Revoke / delete / disconnect used to be visually identical to safe
   actions; danger must read before the label does. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-lg, 6px);
  padding: 9px 16px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.btn-danger:hover { opacity: 0.85; }
.btn-danger:active { transform: scale(0.97); }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--accent);
  color: var(--accent-text);
}

#app {
  height: calc(100vh - var(--safe-top));
  height: calc(100dvh - var(--safe-top));
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Atmospheric grain & gradient (the "abstract" background) ── */
/* Used on the auth screen and as a subtle texture everywhere */

.grain-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 255, 58, 0.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(184, 164, 255, 0.04), transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(77, 214, 160, 0.03), transparent 60%),
    var(--bg);
  pointer-events: none;
}

[data-theme="light"] .grain-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(21, 21, 26, 0.03), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(107, 92, 196, 0.04), transparent 60%),
    var(--bg);
}

/* Design Flow: no colored atmosphere — plain bone paper with a whisper
   of ink falloff top-left, like the reference boards. */
[data-theme="flow"] .grain-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(19, 18, 17, 0.025), transparent 60%),
    var(--bg);
}

/* Design Flow, less motion (2026-09-02): flow.css is structurally flat —
   no at-rules, every selector scope-parseable (test_theme_flow.py gates
   both) — so its calm twin lives HERE. The html prefix outweighs the flow
   layer's later [data-theme="flow"] .view { animation-duration: 0.2s }
   on source order, so the view entry settles to its end state at once;
   the flow pseudo-atmospheres are already animation-free in flow.css.
   Nothing is hidden, nothing is trapped mid-motion. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="flow"] .view,
  html[data-theme="flow"] #home-content::before,
  html[data-theme="flow"] .eon-chat::before,
  html[data-theme="flow"] .eon-chat::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

.grain-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Loading splash ─────────────────────────────────────── */

.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 100;
  /* Stay visible through a slow module/session load. Content, not a clock,
     dismisses this screen (the first-render observer in index.html). */
  pointer-events: auto;
}
.splash[data-gone="1"] {
  animation: fadeOut 0.25s ease forwards;
  pointer-events: none;
}
.splash-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: splashIn 0.8s cubic-bezier(0.2, 0, 0, 1);
}
.splash-mark .eon-loader { width: 52px; height: 52px; }
.splash-word {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding-left: 0.14em;  /* optical balance for the tracked caps */
}
.splash-status {
  margin: 0;
  max-width: 28ch;
  min-height: 6em;
  padding: 0 20px;
  text-align: center;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
.splash-retry {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 4px);
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.splash-retry[hidden] { display: block; visibility: hidden; }
.splash-retry:active { opacity: 0.75; }
.splash-retry:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .splash-mark { animation: none; }
  .splash[data-gone="1"] { animation-duration: 0.01ms; }
}
@keyframes splashIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* ── App-bar ────────────────────────────────────────────── */

.app-bar {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-mark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--ink);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

.app-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.icon-btn:hover { background: var(--bg-card); color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 16px; height: 16px; }
/* v3.0p18 9p: spin the refresh icon while a global refresh is in flight. */
.icon-btn.is-refreshing svg { animation: iconSpin 1.1s linear infinite; }
.icon-btn.is-refreshing { color: var(--accent); }
@keyframes iconSpin { to { transform: rotate(360deg); } }
.icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--r-md, 4px);
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
}

/* ── View body ──────────────────────────────────────────── */

.view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px 100px;
  position: relative;
  z-index: 1;
  animation: viewIn 0.32s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Keep the page steady when less motion is requested, in every theme. */
@media (prefers-reduced-motion: reduce) {
  html .view,
  html[data-theme] .view { animation: none; }
}

/* ── Section headers ────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* PR DAY3-PERF-BULK-CACHE: 28px/14px → 20px/10px. Inventory has
     7 section headers per page → reclaims ~84px vertical, one
     additional tile visible without scroll. Desktop unchanged. */
  margin: 20px 4px 10px;
}
@media (min-width: 800px) {
  .section-h { margin: 28px 4px 14px; }
}
.section-h h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-h .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Cards ──────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 18px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.card:hover { border-color: var(--line); }

/* Hero card — for the home dashboard headline number */
.hero {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  position: relative;
}
.hero-num {
  /* PR DAY3-PERF-BULK-CACHE: switch to mono with tabular-nums so
     stacked NGN figures align column-style (Bloomberg terminal
     feel). Display serif looked elegant but made vertical comparison
     across rows hard. Keep --display as fallback. */
  font-family: var(--mono), var(--display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 300;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  position: relative;
}
.hero-num .unit {
  font-size: 24px;
  color: var(--ink-dim);
  margin-top: 14px;
  letter-spacing: 0;
}
.hero-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  position: relative;
}
.hero-trend .arrow {
  font-family: var(--mono);
}
.hero-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Three-tile MER hero ─────────────────────────────────── */

.hero-mer-grid {
  padding: 22px 18px 22px;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  position: relative;
}
.mer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
.mer-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  min-width: 0;
  transition: border-color var(--transition-fast);
}
.mer-tile:hover {
  border-color: var(--line);
}
.mer-tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: 6px;
}
.mer-tile-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.hero-mini-note {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.7;
  font-style: italic;
}
.mer-tile-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.mer-tile-num .hero-x {
  font-size: 14px;
  color: var(--ink-dim);
  margin-left: 1px;
}
.mer-tile-num .hero-dash {
  color: var(--ink-mute);
  font-size: 28px;
}
.mer-tile .pill {
  font-size: 9.5px;
  padding: 3px 8px;
  letter-spacing: 0.1em;
}

/* ── Pills ──────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-ok::before { background: var(--ok); box-shadow: 0 0 8px currentColor; }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-warn::before { background: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-danger::before { background: var(--danger); animation: blink 1.5s ease-in-out infinite; }
.pill-whale { background: rgba(184, 164, 255, 0.12); color: var(--whale); }
.pill-whale::before { background: var(--whale); }

@keyframes blink { 50% { opacity: 0.3; } }

/* ── Stats grid ─────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
/* PR DAY3-PERF-BULK-CACHE: reflow to single column on iPhone-SE-class
   phones (320-380px). At 2-col on a 320px viewport each stat gets
   ~140px which forces label wraps + cramped numbers. */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; gap: 8px; }
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color var(--transition-fast);
}
.stat:hover { border-color: var(--line); }
.stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.stat-val {
  /* PR DAY3-PERF-BULK-CACHE: switched to mono with tabular-nums for
     column-aligned NGN figures. Display serif fallback kept. */
  font-family: var(--mono), var(--display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stat-delta {
  font-family: var(--mono);
  font-size: 10px;
  margin-top: 4px;
  color: var(--ok);
}
.stat-delta.dn { color: var(--danger); }

/* ── Insight cards (the signals feed) ──────────────────── */

.insight {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  transition: border-color var(--transition-fast);
  animation: insightIn 0.4s cubic-bezier(0.2, 0, 0, 1) backwards;
}
.insight:hover { border-color: var(--line); }
.insight:nth-child(1) { animation-delay: 0.05s; }
.insight:nth-child(2) { animation-delay: 0.1s; }
.insight:nth-child(3) { animation-delay: 0.15s; }
.insight:nth-child(4) { animation-delay: 0.2s; }
@keyframes insightIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.insight-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.insight.danger .insight-mark { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.insight.warn .insight-mark { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.insight.whale .insight-mark { background: var(--whale); box-shadow: 0 0 0 4px rgba(184, 164, 255, 0.15); }
.insight.ok .insight-mark { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.insight-body { flex: 1; min-width: 0; }
.insight-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 4px;
}
.insight-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 10px;
}
.insight-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Chips (action buttons inside cards) ────────────────── */

.chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  transition: all var(--transition-fast);
  background: transparent;
}
.chip:hover {
  border-color: var(--ink-dim);
  color: var(--ink);
}
.chip.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="dark"] .chip.primary,
[data-theme="house"] .chip.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.chip.primary:hover { transform: translateY(-1px); }

/* ── Empty state ─────────────────────────────────────────── */

.empty {
  text-align: center;
  /* PR EASY-WINS: 60px → 36px top/bottom + 24px → 16px sides. The
     empty state was taking more vertical space than the busy state,
     pushing the suggestion grid below the fold on phone. Tighter
     padding + smaller mark keeps the CTA visible above the keyboard. */
  padding: 36px 16px;
  color: var(--ink-mute);
}
.empty-mark {
  font-family: var(--display);
  /* 40px → 30px — same proportional feel, smaller footprint */
  font-size: 30px;
  font-weight: 300;
  color: var(--ink-faint);
  letter-spacing: -0.04em;
  margin-bottom: 10px;
  line-height: 1;
}
.empty-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-dim);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.empty-sub {
  font-size: 13px;
  color: var(--ink-mute);
  max-width: 260px;
  margin: 0 auto;
  line-height: 1.5;
}

/* 2026-05-19 (Daniel): Meta Marketing OAuth connect row in Settings.
   Sits below the Integrations list. Title + status sub-line on the
   left, primary action button on the right. */
.meta-connect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.meta-connect-info { min-width: 0; flex: 1; }
.meta-connect-title {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 2px;
}
.meta-connect-sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  word-break: break-word;
}
.meta-connect-row .btn-primary {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12px;
}

/* 2026-05-19 (Daniel): Claude-clean empty state for the chat view.
   Replaces the 4-card suggestion grid with a quiet centered wordmark.
   Operator: "i want just the text area as simple as claude". The
   composer below is the focus; this is just a soft visual anchor. */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18vh 16px 24px;
  color: var(--ink-mute);
}
.chat-empty-mark {
  font-family: var(--display, var(--body));
  font-size: 32px;
  font-weight: 300;
  color: var(--ink-faint);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  line-height: 1;
  opacity: 0.7;
}
.chat-empty-title {
  font-family: var(--display, var(--body));
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.chat-empty-sub {
  font-size: 13.5px;
  color: var(--ink-mute);
  letter-spacing: 0.005em;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}
.empty-cta {
  margin-top: 18px;
  display: inline-block;
}

/* ── Auth screen ─────────────────────────────────────────── */

.auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 24px;
}

.auth-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
}

.auth-mark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink);
  margin-bottom: 14px;
  animation: markIn 0.9s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes markIn {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 0.05em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: -0.06em; }
}

.auth-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 60px;
  animation: fadeIn 0.6s ease 0.4s backwards;
}

.auth-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeIn 0.6s ease 0.6s backwards;
}

.field {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 18px 0 8px;
  transition: border-color var(--transition);
}
.field:focus-within { border-bottom-color: var(--ink); }
.field input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--body);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  color: var(--ink);
  padding: 0;
}
.field input::placeholder {
  color: var(--ink-mute);
  font-weight: 400;
}

/* Password field with reveal toggle on the right */
.field-with-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-with-toggle input {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.reveal-toggle {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.reveal-toggle:hover { color: var(--ink-dim); background: var(--bg-card); }
.reveal-toggle:active { transform: scale(0.92); }
.reveal-toggle svg { width: 18px; height: 18px; }
.reveal-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Forgot password link under sign-in form */
.auth-aux {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.auth-aux button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--transition-fast);
}
.auth-aux button:hover { color: var(--ink); }

.auth-btn {
  margin-top: 32px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  letter-spacing: 0.04em;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
[data-theme="dark"] .auth-btn,
[data-theme="house"] .auth-btn {
  background: var(--accent);
  color: var(--accent-text);
}
.auth-btn:hover { transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0) scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Owner sign-in aurora (2026-07-02 redesign) ───────────────────────
   The owner login (the "2 text fields" the operator wanted redesigned) now
   sits over a full-bleed animated WebGL aurora — cinematic dark, regardless of
   the app theme. initAuthAurora() paints #eon-auth-webgl; this styles the
   backdrop, the CSS fallback, the glass form and light-on-dark text. */
.auth.has-aurora {
  background: #0a0a0c;
  /* CSS fallback gradient (also shows for the split-second before first frame,
     and permanently if WebGL is unavailable — .auth-webgl-fallback keeps it) */
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(86,227,159,.14), transparent 60%),
    radial-gradient(820px 520px at 105% 8%, rgba(181,140,255,.12), transparent 58%),
    radial-gradient(760px 760px at 50% 118%, rgba(122,166,255,.10), transparent 60%);
  overflow: hidden;
}
.auth-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: authWebglIn 1.1s ease .1s forwards;
}
.auth-webgl.auth-webgl-fallback { display: none; }  /* fall back to the CSS gradient */
@keyframes authWebglIn { to { opacity: 1; } }
.auth.has-aurora .auth-top,
.auth.has-aurora .auth-bottom { position: relative; z-index: 1; }

/* light-on-aurora text (overrides the theme tokens locally) */
.auth.has-aurora .auth-mark { color: #f4f4f2; text-shadow: 0 2px 40px rgba(122,166,255,.35); }
.auth.has-aurora .auth-tag { color: rgba(244,244,242,.66); }
.auth.has-aurora .auth-bottom,
.auth.has-aurora .auth-bottom a { color: rgba(244,244,242,.5); }
.auth.has-aurora .auth-toggle { color: rgba(244,244,242,.55); }
.auth.has-aurora .auth-aux button,
.auth.has-aurora .auth-aux a { color: rgba(244,244,242,.66); }
.auth.has-aurora .auth-aux button:hover,
.auth.has-aurora .auth-aux a:hover { color: #f4f4f2; }

/* glass form card floating on the aurora */
.auth.has-aurora .auth-glass {
  background: linear-gradient(180deg, rgba(20,20,24,.55), rgba(12,12,16,.66));
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 26px 22px 24px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.auth.has-aurora .auth-glass .field { border-bottom-color: rgba(255,255,255,.16); }
.auth.has-aurora .auth-glass .field:focus-within { border-bottom-color: #c8ff4d; }
.auth.has-aurora .auth-glass .field input { color: #f4f4f2; }
.auth.has-aurora .auth-glass .field input::placeholder { color: rgba(244,244,242,.44); }
.auth.has-aurora .auth-glass .reveal-toggle { color: rgba(244,244,242,.55); }
.auth.has-aurora .auth-glass .reveal-toggle:hover { color: #f4f4f2; background: rgba(255,255,255,.08); }
/* accent sign-in button on the aurora */
.auth.has-aurora .auth-glass .auth-btn {
  background: #c8ff4d; color: #0a0a0c; font-weight: 600;
  box-shadow: 0 8px 30px -8px rgba(200,255,77,.5);
}
.auth.has-aurora .auth-glass .auth-btn:hover { box-shadow: 0 12px 34px -8px rgba(200,255,77,.6); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .auth.has-aurora .auth-glass { background: rgba(14,14,18,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-webgl { animation: none; opacity: 1; }
  .auth.has-aurora .auth-mark { animation: none; }
}

/* OAuth (Google, Apple) buttons */
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.oauth-btn:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.oauth-btn:active {
  transform: translateY(0) scale(0.99);
}
.oauth-btn svg {
  flex-shrink: 0;
}

[data-theme="dark"] .oauth-btn,
[data-theme="house"] .oauth-btn {
  background: var(--bg-card);
  border-color: var(--line);
  color: var(--ink);
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 22px 0 4px;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.auth-divider span {
  padding: 0 14px;
}

.auth-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.auth-toggle button {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: opacity var(--transition-fast);
}
.auth-toggle button:hover { opacity: 0.7; }

.auth-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  animation: fadeIn 0.6s ease 0.8s backwards;
}
.auth-bottom a { color: var(--ink-mute); transition: color var(--transition-fast); }
.auth-bottom a:hover { color: var(--ink); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-error {
  background: var(--danger-soft);
  border: 1px solid rgba(255, 71, 71, 0.25);
  color: var(--danger);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 8px;
  animation: shake 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Workspace creation ──────────────────────────────────── */

.ws-create {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 60px 24px 24px;
  position: relative;
  z-index: 1;
}
.ws-create h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.ws-create h1 em {
  font-style: italic;
  color: var(--ink-dim);
  font-weight: 300;
}
.ws-create .lede {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 360px;
}
.ws-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Chat ───────────────────────────────────────────────── */

.chat-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  min-height: 0;
}

/* ── 2026-06-07: in-app full-screen chat + dynamic greeting ──────
   The chat-toolbar expand button toggles body.chat-full, hiding the
   app header + bottom nav so the existing .chat-wrap (already flex:1)
   fills the whole viewport. Same DOM + handlers → charts, tool-traces,
   attachments and permission cards all keep working. Body already
   supplies the iOS safe-area padding, so the toolbar/composer still
   clear the notch + home bar. The expand button flips to a collapse
   (corners-in) icon, which is the operator's "back to the box". */
body.chat-full .app-bar,
body.chat-full .nav {
  display: none;
}
body.chat-full .chat-wrap {
  animation: chatFullIn 0.2s ease;
}
@keyframes chatFullIn {
  from { opacity: 0.55; transform: scale(0.992); }
  to   { opacity: 1;    transform: scale(1); }
}

/* Gemini-in-black: the expanded chat gets a soft layered gradient
   instead of flat var(--bg) — low-alpha cool glows top + bottom that
   melt into the page colour, reading as depth not decoration. */
[data-theme="dark"] body.chat-full .chat-wrap,
[data-theme="house"] body.chat-full .chat-wrap {
  background:
    radial-gradient(135% 90% at 50% -8%,  rgba(86, 132, 255, 0.14) 0%, transparent 52%),
    radial-gradient(120% 78% at 50% 112%, rgba(140, 98, 255, 0.10) 0%, transparent 60%),
    var(--bg);
  /* 2026-06-07: subtle living motion — the two glow layers breathe and
     drift slowly so the surface feels alive, not static. */
  background-size: 165% 165%, 165% 165%, auto;
  animation: chatFullIn 0.2s ease, chatGradDrift 24s ease-in-out 0.2s infinite alternate;
}
@keyframes chatGradDrift {
  0%   { background-position: 50% 0%, 50% 100%, 0 0; }
  100% { background-position: 38% 9%, 62% 91%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] body.chat-full .chat-wrap,
  [data-theme="house"] body.chat-full .chat-wrap { animation: chatFullIn 0.2s ease; }
}
[data-theme="light"] body.chat-full .chat-wrap {
  background:
    radial-gradient(135% 90% at 50% -8%,  rgba(86, 132, 255, 0.10) 0%, transparent 55%),
    radial-gradient(120% 78% at 50% 112%, rgba(140, 98, 255, 0.06) 0%, transparent 62%),
    var(--bg);
}
/* Let the gradient flow behind the toolbar so the expanded surface
   reads as one continuous sheet (matches the standalone chat page).
   Brighten the toolbar buttons (esp. the collapse/back affordance —
   the only exit in full screen) so they stay clearly tappable. */
body.chat-full .chat-toolbar {
  background: transparent;
  border-bottom-color: transparent;
}
body.chat-full .chat-toolbar .icon-btn-sm {
  color: var(--ink);
}

/* The bottom nav carried the home-indicator safe-area padding and is
   hidden in full screen, so the composer must clear the home bar
   itself. Keyboard-inset still lifts it above the soft keyboard
   (env(safe-area-inset-bottom) collapses to 0 while the keyboard is up,
   so this never double-pads). */
body.chat-full .composer-shell {
  padding-bottom: calc(4px + var(--keyboard-inset, 0px) + var(--safe-bottom));
}

/* Toasts normally sit above the (now-hidden) bottom nav; lift them
   clear of the composer pill in full screen. */
body.chat-full .toast {
  bottom: calc(96px + var(--safe-bottom)) !important;
}

/* Dynamic greeting that replaces the static "Ask EON". Quiet inline by
   default; becomes the centered, gradient-filled Gemini headline when
   the chat is expanded full screen. */
.chat-greeting {
  font-family: var(--display, var(--body));
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 4px;
}
.chat-greeting-name { color: var(--accent); }

body.chat-full .chat-empty-state {
  flex: 1;
  align-items: center !important;
  justify-content: center;
  text-align: center;
  padding: 0 24px 16vh !important;   /* nudge above true vertical center */
}
body.chat-full .chat-greeting {
  font-size: clamp(30px, 7vw, 46px);
  margin-bottom: 10px;
}
body.chat-full .chat-empty-sub {
  font-family: var(--body) !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  color: var(--ink-mute) !important;
  margin-top: 8px !important;
  max-width: 360px;
}

/* Gradient text fill for the greeting — guarded by @supports so that
   browsers WITHOUT background-clip:text keep the solid var(--ink) /
   accent colours above instead of rendering invisible (transparent)
   text. Light theme uses darker, more saturated stops for legible
   contrast on a pale background. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.chat-full .chat-greeting {
    background: linear-gradient(105deg, var(--ink) 0%, #7aa6ff 46%, #b58cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  [data-theme="light"] body.chat-full .chat-greeting {
    background: linear-gradient(105deg, var(--ink) 0%, #3f6fd1 48%, #7a4fd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  body.chat-full .chat-greeting-name {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* v3.0p14: chat toolbar (top of chat tab) */
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* PR EASY-WINS: 8px 14px → 5px 12px; reclaims 6px vertical at the
     top of the chat view without crowding the title row. */
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}
.chat-toolbar-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn-sm {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-md, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.icon-btn-sm:hover {
  background: var(--bg-card);
  color: var(--ink);
}
.icon-btn-sm:active {
  transform: scale(0.94);
}

/* v3.0p14: drawer (chat history) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: fadeIn 0.18s ease;
  /* v3.0p15 commit 9a B3-1: prevent scroll-through on iOS when drawer open */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.chat-history-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* v3.0p15 commit 9a B3-1: respect iOS safe-area so home indicator
     doesn't clip the bottom of the drawer list. env() returns 0 on
     non-iOS browsers so this is a safe addition. */
  padding-bottom: env(safe-area-inset-bottom, 0);
  width: min(85vw, 320px);
  background: var(--bg);
  border-right: 1px solid var(--line);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  animation: slideInLeft 0.22s cubic-bezier(0.2, 0, 0, 1);
  /* -webkit prefix for older iOS Safari (pre-13) */
  -webkit-animation: slideInLeft 0.22s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  /* Force GPU acceleration for smoother iOS animations */
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes slideInLeft {
  from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  to   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slideInLeft {
  from { -webkit-transform: translate3d(-100%, 0, 0); }
  to   { -webkit-transform: translate3d(0, 0, 0); }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.drawer-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.drawer-new-btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.drawer-new-btn:active {
  transform: scale(0.98);
}

.drawer-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 8px 12px;
}

.drawer-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
}

/*
 * Date-bucket group header — Daniel ask 2026-05-18 ("claude side bar
 * is rich and clear, adopt claude/gemini clean simple UI"). One small
 * label per bucket (Today / Yesterday / This week / This month /
 * Older), all-caps, muted. Bucket is only emitted by JS when it has
 * rows so we never render empty headers.
 */
.drawer-group-header {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 14px 14px 4px;
  /* First bucket sits flush with the new-chat button; subsequent ones
     get the leading 14px to visually separate from the previous bucket's
     last row. */
}
.drawer-group-header:first-child {
  padding-top: 6px;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md, 4px);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.conv-item:hover {
  background: var(--bg-card);
}
.conv-item.active {
  background: var(--bg-card);
  border-left: 3px solid var(--ink);
  padding-left: 9px;
}
.conv-item-main {
  flex: 1;
  min-width: 0;
}
.conv-item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item-meta {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.conv-item-del {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.conv-item:hover .conv-item-del {
  opacity: 1;
}
.conv-item-del:hover {
  background: var(--line);
  color: var(--danger, #ef4444);
}
/* On mobile (no hover), show delete button always — but very muted
   so it doesn't visually compete with the row title. Claude's pattern
   is to keep destructive controls quiet on mobile too. */
@media (hover: none) {
  .conv-item-del { opacity: 0.35; }
  .conv-item-del:active { opacity: 1; }
}

/* Selected row — Claude-style: soft tinted background instead of the
   hard left-border bar. Cleaner, less noisy. */
.conv-item.active {
  background: var(--bg-card);
  border-left: 0;
  padding-left: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.conv-item.active .conv-item-title {
  color: var(--ink);
}

/* ── Files drawer (2026-08-04, operator) ────────────────────────────
   Uploads filed into date folders. Reuses .chat-history-drawer /
   .drawer-* so the rail chrome, the cc-rail skin and the slide-in
   animation stay identical to the Chats drawer — only the row and the
   folder header are new. */
.files-controls {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.files-tabs { display: flex; gap: 6px; }
.files-tab {
  flex: 1; padding: 6px 4px; border-radius: var(--r-md, 4px);
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-mute); font-size: 12px; cursor: pointer;
  transition: all var(--transition-fast);
}
.files-tab.on { background: var(--bg-card); color: var(--ink); border-color: var(--ink-mute); }
.files-row { display: flex; gap: 6px; align-items: center; }
.files-row .drawer-search { flex: 1; margin: 0; }
.files-group {
  border: 1px solid var(--line); border-radius: var(--r-md, 4px);
  background: transparent; color: var(--ink-soft, var(--ink-mute));
  font-size: 12px; padding: 6px 6px; max-width: 44%; cursor: pointer;
}
.files-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.files-chip {
  border: 1px solid var(--line); border-radius: var(--r-lg, 6px);
  background: transparent; color: var(--ink-mute);
  font-size: 11px; padding: 3px 9px; cursor: pointer;
}
.files-chip.on { background: var(--bg-card); color: var(--ink); border-color: var(--ink-mute); }

.file-folder { margin: 2px 0 6px; }
.file-folder-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 0; border-radius: var(--r-md, 4px);
  background: transparent; color: var(--ink); cursor: pointer;
  text-align: left; font-size: 13px; font-weight: 600;
}
.file-folder-head:hover { background: var(--bg-card); }
.file-folder-caret { color: var(--ink-mute); font-size: 11px; width: 10px; }
.file-folder-label { flex: 1; }
.file-folder-count {
  font-size: 11px; font-weight: 500; color: var(--ink-mute);
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-folder-body { padding-left: 6px; }

.file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-md, 4px);
  transition: background var(--transition-fast);
}
.file-item:hover { background: var(--bg-card); }
.file-item-ico { font-size: 15px; line-height: 1; }
.file-item-main { flex: 1; min-width: 0; }
.file-item-title {
  font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-item-meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.file-item-act {
  border: 1px solid var(--line); border-radius: var(--r-lg, 6px);
  background: transparent; color: var(--ink-mute);
  font-size: 11px; padding: 3px 9px; cursor: pointer; flex: none;
}
.file-item-act:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Failed extraction rows (vet 2026-08-04 D7): quiet, honest, Attach dead. */
.file-item.failed .file-item-title { color: var(--ink-mute); }
.file-item-bad { color: var(--danger); }
.file-item-act:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.file-item-act:disabled:hover {
  background: transparent; color: var(--ink-mute); border-color: var(--line);
}
.file-item .conv-item-del { opacity: 0; }
.file-item:hover .conv-item-del { opacity: 0.6; }
@media (hover: none) {
  .file-item .conv-item-del { opacity: 0.35; }
}
.files-foot {
  padding: 8px 14px 12px; font-size: 11px; color: var(--ink-mute);
  border-top: 1px solid var(--line);
}

/* Jump-to-latest button (2026-06-11) — floats above the composer when the
   operator has scrolled up; pairs with the renderChatBody scroll-pin guard. */
.chat-jump {
  /* --bg-elev (was undefined --surface → white blob with a near-white chevron
     in dark theme). Offsets clear the composer + iOS safe-area + keyboard. */
  position: fixed; right: 18px; z-index: 40;
  bottom: calc(148px + var(--safe-bottom, 0px) + var(--keyboard-inset, 0px));
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--bg-elev); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.18);
  animation: chatJumpIn .18s ease-out;
}
.chat-jump[hidden] { display: none; }
.chat-jump:hover { transform: translateY(-1px); }
@keyframes chatJumpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.chat-full .chat-jump { bottom: calc(112px + var(--safe-bottom, 0px) + var(--keyboard-inset, 0px)); }
@media (prefers-reduced-motion: reduce) { .chat-jump { animation: none; } }

.chat-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* PR EASY-WINS: tightened from 16px 20px 12px → 10px 12px 8px to
     match the Money/Inventory page gutter density. Reclaims ~14px
     vertical on phone + 16px horizontal across every message row.
     The desktop breakpoint at 800px restores a bit more breathing
     room (no phone-cramping concern there). */
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;  /* anchor for drag-over ::after overlay */
  /* Operator 2026-08-07 ("the full page gets jumbled up when I want to
     chat"): an overscroll at either end of the thread used to CHAIN to
     the document and rubber-band the whole shell. The thread is the only
     thing that scrolls here — contain it. */
  overscroll-behavior: contain;
}
@media (min-width: 800px) {
  .chat-body { padding: 14px 18px 10px; gap: 14px; }
}

/* ── Keyboard mode (operator 2026-08-07: chat "has to feel like a mobile
   app — the text area must not shift or block chat"). The CS desk solved
   this in cs.css (.csw-shell): while the keyboard is up, iOS Safari may
   scroll the LAYOUT viewport to reveal the focused composer — a static
   flex page then slides up ("jumbled") and the composer can land under
   the keyboard. The main chat never adopted that recipe; it relied on
   --keyboard-inset padding alone. While the keyboard is open
   (html.csw-kb-open, set by the same listener that writes the vars) the
   chat column becomes a fixed shell glued to the VISUAL viewport:
   top mirrors visualViewport.offsetTop, height mirrors its height, and
   the composer drops the inset padding — geometry has ONE owner in this
   mode (the shell), padding stays out of it. Desktop (≥800px) never has
   a software keyboard tall enough to trip the class; the rule is scoped
   to phone widths anyway. ── */
@media (max-width: 799px) {
  html.csw-kb-open body.view-chat .chat-wrap.eon-chat {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-offset-top, 0px);
    height: var(--app-height, 100dvh);
    z-index: 60;
    background: var(--bg);
  }
  html.csw-kb-open body.view-chat .eon-chat .composer-shell {
    padding-bottom: 8px;
  }
  html.csw-kb-open body.view-chat .chat-jump {
    bottom: 96px;
  }
}

.msg {
  max-width: 84%;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  animation: msgIn 0.3s cubic-bezier(0.2, 0, 0, 1);
}
/* PR DAY3-PERF-BULK-CACHE: cap message width on desktop so lines
   don't stretch unreadably wide on 1400px+ monitors. 84% of a
   1400px viewport = 1176px lines = too long to scan comfortably.
   680px keeps a comfortable reading column. */
@media (min-width: 800px) {
  .msg { max-width: 680px; }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg.user {
  align-self: flex-end;
  /* 2026-05-19 (Daniel): slight raise + gradient so each message
     isolates visually instead of feeling flat against the chat body.
     Lifts on shadow, gentle accent-tinted gradient. */
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--bg-card-2) 92%, var(--accent) 8%) 0%,
      var(--bg-card-2) 70%);
  border: 1px solid var(--line-soft);
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
  position: relative;
}
/* 2026-05-19: long words / URLs in operator messages were getting
   cut off at the viewport edge (image 2 in the operator's report —
   "ur call on the Monipoint loan" with the leading "yo" clipped).
   Allow breaking inside long tokens so the bubble respects max-width
   and wraps cleanly instead of overflowing horizontally. */
.msg.user .text,
.msg.eon .text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── PR CHAT-MARKDOWN-TABLES (2026-05-20) ──────────────────
 * EON chat used to render markdown tables as raw pipes + dashes.
 * These rules style the <table> elements emitted by
 * renderMarkdownToHtml. Mobile-aware: the wrapper allows horizontal
 * scroll on narrow screens so a wide P&L table doesn't blow out the
 * bubble width. */
.md-table-wrap {
  margin: 10px 0;
  overflow-x: auto;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: var(--r-md, 4px);
  background: var(--surface-soft, rgba(255,255,255,0.02));
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.md-table thead {
  background: var(--surface, rgba(255,255,255,0.04));
}
.md-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute, #9ca3af);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  white-space: nowrap;
}
.md-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.04));
  color: var(--ink, #f5f5f5);
  vertical-align: top;
}
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table tbody tr:hover { background: var(--surface-soft, rgba(255,255,255,0.03)); }
/* Numbers right-align nicely. We can't detect "is this a number column"
 * from CSS alone, but currency / signed values usually start with
 * ₦/$/+/− — those bubble naturally to the right with this rule on
 * the last column. Operator can override if they want manual control. */
.md-table td:last-child:not(:first-child) { text-align: right; }

.msg.eon .text h3.md-h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--ink, #f5f5f5);
  letter-spacing: -0.01em;
}
.msg.eon .text h4.md-h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--ink-mute, #9ca3af);
}
.msg.eon .text code:not(pre code) {
  background: var(--surface-soft, rgba(255,255,255,0.06));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.msg.eon .text strong { font-weight: 600; }
.msg.eon .text p { margin: 6px 0; }
.msg.eon .text p:first-child { margin-top: 0; }
.msg.eon .text p:last-child  { margin-bottom: 0; }
/* End PR CHAT-MARKDOWN-TABLES */
.msg.eon .text img.md-img,
.msg.user .text img.md-img {
  max-width: min(360px, 100%);
  max-height: 360px;
  border-radius: var(--r-md, 4px);
  margin: 6px 0;
  display: block;
  background: var(--surface-soft, rgba(255,255,255,0.04));
}
/* Clickable links in chat — colored + underlined so they read as links.
   Theme-aware: vibrant mint on dark, deep green on light (both legible). */
.msg .text a, .msg .text a.md-link {
  color: #1f9e6a;                       /* both-theme safe default */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  word-break: break-word;
}
[data-theme="dark"] .msg .text a { color: var(--a3-mint, #56E39F); }
[data-theme="light"] .msg .text a { color: #0B6E4F; }
.msg .text a:hover { text-decoration-color: currentColor; }
/* Copy button on user bubble — quiet by default, fades in on hover.
   Sits inside the bubble in the bottom-right so it doesn't compete
   with the message text. Mirrors the EON-side affordance. */
.msg.user .msg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.msg.user:hover .msg-actions,
.msg.user:focus-within .msg-actions {
  opacity: 1;
}
/* On touch devices keep it visible at low opacity since there's no hover */
@media (hover: none) {
  .msg.user .msg-actions { opacity: 0.45; }
  .msg.user:active .msg-actions { opacity: 1; }
}

.msg.eon {
  align-self: flex-start;
  max-width: 92%;
  /* 2026-05-19 (Daniel): apply matching raise + gradient to EON
     bubbles so user and assistant messages have the same visual
     weight. Lighter accent tint than user side, and keeping the
     borderless feel — just a soft background card + lift. */
  padding: 12px 16px;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--bg-card) 96%, var(--accent) 4%) 0%,
      var(--bg-card) 80%);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.msg.eon .from {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.msg.eon .from-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}
[data-theme="light"] .msg.eon .from-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok-soft); }
.msg.eon .from-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.msg.eon .text {
  color: var(--ink);
  white-space: pre-wrap;
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: -0.005em;
}

/* Per-paragraph fade-in for long EON answers */
.msg.eon .para {
  display: block;
  margin-bottom: 0.85em;
  opacity: 0;
  transform: translateY(4px);
  animation: paraIn 360ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
.msg.eon .para:last-child { margin-bottom: 0; }
@keyframes paraIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Streaming caret — softer, blinks slower */
.msg.eon .caret {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--ink-dim);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: caretBlink 1s steps(2) infinite;
  border-radius: 1px;
}
@keyframes caretBlink {
  to { opacity: 0; }
}

/* Collapsible message bubbles (long content) */
.msg .text {
  transition: max-height 320ms cubic-bezier(0.2, 0, 0, 1);
}
.msg.collapsed .text {
  max-height: 8.1em;          /* ~5 lines at 1.62 line-height */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
/* Expanded — let it grow naturally, no max-height */
.msg:not(.collapsed) .text {
  /* WS-C (2026-07-26): was 4000px — replies taller than that overflowed
     the box and painted over .msg-actions and the next message. 100000px
     is practically unbounded while keeping the collapse transition
     animatable (max-height: none is not). */
  max-height: 100000px;
}
.msg-toggle {
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.msg-toggle:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

/* Pin suggestion — subtle, appears under EON's answer when worth saving */
.pin-suggest {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pin-suggest:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pin-suggest.pinned {
  color: var(--accent-text, var(--ink));
  background: var(--accent);
  border-color: var(--accent);
}
.pin-suggest svg {
  width: 12px;
  height: 12px;
}

/* v3.0p32 PR MONEY-COMPLETE — copy icon under each EON message */
.msg-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.msg-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0.55;
  transition: all var(--transition-fast);
}
.msg-copy:hover {
  opacity: 1;
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── EON Voice (2026-07-13) ─────────────────────────────────────────
   .msg-speak — per-message play, sibling of .msg-copy.
   .vb-card — spoken morning briefing card on home (player + moves). */
.msg-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0.55;
  transition: all var(--transition-fast);
}
.msg-speak:hover {
  opacity: 1;
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.vb-card {
  background: var(--panel, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.vb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vb-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
}
.vb-date {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.8;
}
.vb-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vb-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.vb-play:active { transform: scale(0.94); }
.vb-meta { flex: 1 1 auto; min-width: 0; }
.vb-line {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
}
.vb-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.vb-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.vb-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.vb-move {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.vb-move:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.vb-script-toggle {
  margin-top: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.vb-script-toggle:hover { color: var(--ink); }
.vb-script {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.status {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.typing {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px 0;
  align-items: center;
}
.typing span {
  width: 6px;
  height: 6px;
  background: var(--ink-mute);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.16s; }
.typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blinkCursor 1s steps(2) infinite;
}
[data-theme="light"] .cursor { background: var(--ok); }
@keyframes blinkCursor { 50% { opacity: 0; } }

/*
 * Mobile keyboard avoidance — Daniel reported (2026-05-18) keyboard
 * blocking the composer. `--keyboard-inset` is tracked by
 * installViewportKeyboardListener() in app.js via visualViewport.
 * Closed keyboard: inset = 0. Open keyboard: inset = keyboard height.
 */
:root { --keyboard-inset: 0px; }

.composer-shell {
  flex-shrink: 0;
  /* 2026-05-19 (Daniel): "huge gap between text area and the icons
     below". Was: padding-bottom = 6 + safe-bottom + keyboard-inset.
     But body already applies safe-bottom (line 103) and the bottom
     nav has its own safe-bottom — three sources of safe-bottom
     stacked = ~100px of empty space below the textarea on phones
     with a notch. Dropped composer-shell's safe-bottom; the parent
     body + nav still handle the iOS notch correctly. Keyboard-inset
     stays so the composer still lifts above the keyboard. */
  padding: 4px 12px calc(4px + var(--keyboard-inset, 0px));
  background: linear-gradient(180deg, transparent 0%, var(--bg) 35%);
  position: relative;
  transition: padding-bottom 0.15s ease;
}
.composer {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 6px 6px 6px 18px;
  display: flex;
  /* flex-end (not center): as the textarea grows multi-line, the attach/mic/
     call/send buttons anchor to the BOTTOM of the composer instead of floating
     beside the middle of the text (Claude-style). center left them overlapping
     the growing text. Inherited by .eon-chat .composer (no own align-items). */
  align-items: flex-end;
  gap: 8px;
  transition: border-color var(--transition);
}
.composer:focus-within { border-color: var(--line-strong); }
.composer textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--body);
  /* WS-C (2026-07-26): 16px — anything under 16 makes iOS Safari zoom
     the whole page on focus (the .field inputs learned this long ago). */
  font-size: 16px;
  resize: none;
  min-height: 24px;
  /* WS-C: was 96px ≈ 3 visible lines — the smallest composer of the
     app's six, on the surface used for 40-line directives. Grows to
     40% of the viewport before scrolling (96px stays as the fallback
     for browsers without dvh). The JS autosize mirrors this cap. */
  max-height: 96px;
  max-height: 40dvh;
  line-height: 1.4;
  padding: 8px 0;
  color: var(--ink);
}
.composer textarea::placeholder { color: var(--ink-mute); }
.composer .send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
[data-theme="dark"] .composer .send {
  background: var(--accent);
  color: var(--accent-text);
}
.composer .send:disabled { opacity: 0.3; cursor: not-allowed; }
.composer .send:not(:disabled):hover { transform: scale(1.05); }
.composer .send:not(:disabled):active { transform: scale(0.94); }

.composer .mic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.composer .mic:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.composer .mic:active {
  transform: scale(0.94);
}

/* v3.0p14: file attach button + chips */
.composer .attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.composer .attach-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.composer .attach-btn:active {
  transform: scale(0.94);
}
.composer .attach-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.attachments-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 8px 4px;
}
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 10px 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
}
.attach-chip .ico {
  font-size: 14px;
  flex-shrink: 0;
}
.attach-chip .name {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.attach-chip .size {
  color: var(--ink-mute);
  font-size: 11px;
  flex-shrink: 0;
}
.attach-chip .rm {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.attach-chip .rm:hover {
  background: var(--line);
  color: var(--ink);
}
/* 2026-06-01: visible upload state. The original 0.7-opacity +
 * "uploading…" suffix was too subtle — operator couldn't tell when
 * the upload completed. Now: spinner during upload, green checkmark
 * + "ready" pill on completion, prominent red error on failure. */
.attach-chip.uploading {
  border-color: var(--accent, #b8d2ff);
  background: rgba(184, 210, 255, 0.06);
}
.attach-chip.uploading .ico {
  position: relative;
}
.attach-chip.uploading .ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(184, 210, 255, 0.25);
  border-top-color: var(--accent, #b8d2ff);
  border-radius: 50%;
  animation: chip-spin 0.7s linear infinite;
}
.attach-chip.uploading .name::after {
  content: " · uploading…";
  color: var(--accent, #b8d2ff);
  font-weight: 500;
  font-size: 11px;
}
@keyframes chip-spin {
  to { transform: rotate(360deg); }
}

/* Ready state — clear "upload complete" affordance. */
.attach-chip.ready {
  border-color: rgba(77, 214, 160, 0.45);
  background: rgba(77, 214, 160, 0.06);
}
.attach-chip.ready .name::after {
  content: " · ready ✓";
  color: var(--ok, #4dd6a0);
  font-weight: 500;
  font-size: 11px;
}

.attach-chip.failed {
  border-color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.06);
}
.attach-chip.failed .name {
  color: var(--danger, #ef4444);
}
.attach-chip.failed .name::after {
  content: " · failed (tap × to remove)";
  font-weight: 500;
  font-size: 11px;
}

/* Drag-over state — works on chat-body AND composer-shell now so
 * the operator can drop into either surface. */
.chat-body.drag-over,
.composer-shell.drag-over {
  background: var(--bg-card);
  outline: 2px dashed var(--accent, #b8d2ff);
  outline-offset: -8px;
  position: relative;
}
.chat-body.drag-over::after,
.composer-shell.drag-over::after {
  content: "Drop file to upload (PDF, CSV, XLSX, images — max 25 MB)";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent, #b8d2ff);
  pointer-events: none;
  background: rgba(0,0,0,0.5);
  text-align: center;
  padding: 16px;
  z-index: 10;
}

/* Recording overlay — covers composer area when actively recording */
.rec-overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
  pointer-events: none;
  text-align: center;
  gap: 10px;
}
.rec-pulse {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--danger, #c73e3e);
  animation: rec-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--danger, #c73e3e);
}
@keyframes rec-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(199, 62, 62, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(199, 62, 62, 0);
    transform: scale(1.06);
  }
}
.rec-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.rec-cancel-hint {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.rec-overlay.rec-cancelling .rec-pulse {
  background: var(--ink-mute);
  animation: none;
  box-shadow: none;
}
.rec-overlay.rec-cancelling .rec-label {
  color: var(--ink-mute);
}

/* Quick suggestions on empty chat */
.suggest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 4px 12px;
}
.suggest {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: left;
  transition: all var(--transition-fast);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.suggest:hover {
  border-color: var(--line);
  color: var(--ink);
  transform: translateY(-1px);
}
.suggest .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
  display: block;
}

/* ── Tasks ──────────────────────────────────────────────── */

.task-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 18px;
  scrollbar-width: none;
}
.task-filters::-webkit-scrollbar { display: none; }
.filter-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: transparent;
  white-space: nowrap;
  transition: all var(--transition-fast);
  font-weight: 500;
}
.filter-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="dark"] .filter-chip.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.task {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all var(--transition-fast);
  animation: insightIn 0.3s cubic-bezier(0.2, 0, 0, 1) backwards;
}
.task:hover { border-color: var(--line); }
.task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.task-check:hover { border-color: var(--ink); }
.task-check.done {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
[data-theme="dark"] .task-check.done {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.task-check.done::after {
  content: '✓';
  font-size: 12px;
  font-weight: 600;
}
.task-body { flex: 1; min-width: 0; }
.task.complete .task-title {
  text-decoration: line-through;
  color: var(--ink-mute);
}
.task-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.task-meta {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.task-meta .priority-high { color: var(--warn); }
.task-meta .priority-urgent { color: var(--danger); }
.task-meta .overdue { color: var(--danger); }

/* ── Settings ────────────────────────────────────────────── */

.settings-section {
  margin-bottom: 32px;
}
.settings-section h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 4px 12px;
}

.row {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background var(--transition-fast);
  cursor: pointer;
}
.row:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.row:last-child { border-radius: 0 0 var(--r-md) var(--r-md); border-bottom-width: 1px; }
.row:only-child { border-radius: var(--r-md); }
.row + .row { border-top: none; }
.row:hover { background: var(--bg-card-2); }
.row-content { flex: 1; min-width: 0; }
.row-label {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.row-value {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.row-action {
  font-size: 12px;
  color: var(--ink-dim);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.row.danger .row-label { color: var(--danger); }
.settings-section .settings-action { width: 100%; min-height: 48px; text-align: start; }
.settings-action .row-content, .settings-action .row-label, .settings-action .row-value { display: block; }
.settings-section .settings-action:focus-visible,
.settings-section .row:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-living-motion="paused"] .reveal-toggle,
[data-living-motion="paused"] .settings-section .row { transition: none; }
[data-living-motion="paused"] .reveal-toggle:active,
[data-living-motion="paused"] .settings-section .row:hover { transform: none; }


/* ── Bottom nav ─────────────────────────────────────────── */

.nav {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* THE BAR SITS ON THE FLOOR (operator IMG_9317, 2026-08-08: "the
     chat, home, task bar is hanging too high from the floor"). Measured
     off his screenshot: 114 CSS px of dead black under the labels where
     this rule produces 48 — the whole excess sits in this one padding,
     so --safe-bottom resolved far past any real home indicator. No iOS
     inset exceeds 34pt, so bound it: a correct device is unchanged
     (min(34,34)=34) and a runtime reporting a wild inset can no longer
     lift the bar off the floor. */
  padding: 8px 0 calc(8px + min(var(--safe-bottom), 34px));
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-mute);
  padding: 6px 8px;
  transition: color var(--transition-fast);
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item .nav-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-item.active { color: var(--ink); }
[data-theme="dark"] .nav-item.active { color: var(--accent); }
.nav-item:active { transform: scale(0.92); }

/* ── Notifications dropdown ─────────────────────────────── */

.notif-panel {
  position: absolute;
  top: 60px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  z-index: 50;
  animation: dropIn 0.2s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

/* ── Overflow menu — bottom sheet ──────────────────────── */

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  animation: fadeIn 0.24s ease;
}
[data-theme="light"] .menu-backdrop {
  background: rgba(0, 0, 0, 0.25);
}

.menu-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
  z-index: 90;
  padding: 8px 12px calc(20px + var(--safe-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
  animation: sheetUp 0.32s cubic-bezier(0.2, 0, 0, 1);
  max-height: 75vh;
  overflow-y: auto;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.menu-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 8px auto 12px;
  opacity: 0.6;
}

/* ── Menu launcher grid (2026-07-08, operator-picked Direction A) ──
   Two-column icon+label tiles, bracket group labels, utility icon
   strip. Replaced the 14-row list (meta-line descriptions retired). */
.menu-ws {
  width: calc(100% - 24px);
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px; padding: 10px 10px;
  border-radius: var(--r-md); background: transparent;
  color: var(--ink); text-align: left;
  transition: background var(--transition-fast);
}
.menu-ws:hover { background: var(--bg-card-2); }
.menu-ws-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.menu-ws-role {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}
.menu-glab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-mute); font-weight: 500; padding: 16px 16px 8px;
}
.menu-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px;
}
.menu-tile {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 11px; border-radius: var(--r-md);
  background: var(--bg-card-2); border: 1px solid transparent;
  color: var(--ink); text-align: left; min-width: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.menu-tile:hover { background: var(--card-hover, var(--bg-card-2)); border-color: var(--line-soft); }
.menu-tile:active { transform: scale(0.98); }
.menu-tile.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.menu-tile.active .menu-tile-ic { color: var(--accent); }
.menu-tile-ic { width: 18px; height: 18px; display: grid; place-items: center; color: var(--ink-dim); flex-shrink: 0; }
.menu-tile-ic svg { width: 16px; height: 16px; }
.menu-tile-l {
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-util {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 12px 0; padding: 12px 2px 16px;
  border-top: 1px solid var(--line-soft);
}
.menu-util-btn {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg-card-2); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); transition: background var(--transition-fast);
}
.menu-util-btn:hover { background: var(--card-hover, var(--bg-card-2)); color: var(--ink); }
.menu-util-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.menu-util-btn.danger { color: var(--danger); }
.menu-util-btn svg { width: 15px; height: 15px; }
.menu-version {
  margin-left: auto; background: transparent; border: none;
  color: var(--ink-mute); text-align: right; cursor: pointer;
}

/* 2026-05-19 (Daniel): split version stamp into a primary version
   chip + a muted tenant-prefix line. Was a single concatenated string
   that read messy ("v3.0p34 · whats-new-restock · 249a40c3"). */
.menu-version-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
}
.menu-version-main {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.menu-version-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  opacity: 0.7;
}

/* What's new modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.modal-body { padding: 8px 18px 18px; overflow-y: auto; }
.wn-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.wn-item:last-child { border-bottom: none; }
.wn-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.wn-title { font-size: 14px; font-weight: 600; margin: 2px 0 4px; }
.wn-body { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* ── What's new: the live feed (2026-07-29) ──────────────
   Three stacked sections — worth-your-attention, what shipped, new
   ideas. Groups are native <details> so a fold costs no JS and keeps
   keyboard + screen-reader behaviour for free. Flat 1px, no
   decoration (operator design law). */
.wn-loading { padding: 14px 0; font-size: 13px; color: var(--ink-mute); }
.wn-sec {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 0 6px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.wn-sec:first-child { margin-top: 4px; padding-top: 0; border-top: none; }
.wn-sub { text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }
.wn-body-t { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

/* the pinned ones */
.wn-big { padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); }
.wn-big-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.wn-big-t { font-size: 14px; font-weight: 600; margin: 3px 0 3px; }
.wn-big-w { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* a folded group */
.wn-grp { border-bottom: 1px solid var(--line-soft); }
.wn-grp:last-of-type { border-bottom: none; }
.wn-grp > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; cursor: pointer; font-size: 13.5px;
  list-style: none;
}
.wn-grp > summary::-webkit-details-marker { display: none; }
.wn-grp > summary::before {
  content: '+'; font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); width: 10px;
}
.wn-grp[open] > summary::before { content: '\2013'; }
.wn-n {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  margin-left: auto;
}
/* the collapsed department (stock) — quieter, and says whose it is */
.wn-grp--folded > summary { opacity: 0.72; }
.wn-owner {
  font-size: 11px; color: var(--ink-mute); font-style: italic;
  margin-left: 8px;
}
.wn-grp .wn-item { padding-left: 18px; }

/* the longer story — only on builds he asked for (2026-07-29) */
.wn-rep { margin-top: 8px; border-left: 2px solid var(--line); padding-left: 10px; }
.wn-rep > summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); padding: 4px 0;
}
.wn-rep > summary::-webkit-details-marker { display: none; }
.wn-rep > summary::before { content: '+ '; }
.wn-rep[open] > summary::before { content: '\2013 '; }
.wn-rep__p {
  margin-left: 8px; text-transform: none; letter-spacing: 0.02em;
  color: var(--warn, #e0a63f);
}
.wn-rep__h {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  margin-top: 8px;
}
.wn-rep__b { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; margin-top: 2px; }
.wn-rep__b--warn { color: var(--warn, #e0a63f); }
.wn-rep__l {
  display: inline-block; margin-top: 8px; font-size: 11.5px;
  color: var(--ink-soft); text-decoration: underline;
}

/* ── Form fields inside sheets ─────────────────────────── */

.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 14px 0 6px;
}
.field-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  padding: 8px 0 10px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.field-input:focus { border-bottom-color: var(--ink); }
.field-input::placeholder { color: var(--ink-mute); }
textarea.field-input {
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  min-height: 100px;
}
textarea.field-input:focus { border-color: var(--ink); }

/* ── Toast ─────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all var(--transition);
  pointer-events: none;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .toast {
  background: var(--accent);
  color: var(--accent-text);
}
.toast.toast-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Pinned section on Home ─────────────────────────── */

.pinned-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.pinned-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color var(--transition-fast);
}
.pinned-card:hover { border-left-color: var(--ink); }
.pinned-q {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  line-height: 1.4;
}
.pinned-a {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.pinned-actions {
  display: flex;
  gap: 8px;
}
.danger-chip {
  color: var(--ink-mute);
  border-color: var(--line-soft);
}
.danger-chip:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Apple Health-style data cards ──────────────────────── */

.data-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px 18px 14px;
  margin-bottom: 12px;
}

.data-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.data-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.data-card-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.data-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 4px;
}
.data-stat-grid.data-stat-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.data-stat-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.data-stat-num.tone-warn { color: var(--warn, #d4a72c); }
.data-stat-num.tone-danger { color: var(--danger); }
.data-stat-num .unit-sm {
  font-size: 14px;
  color: var(--ink-mute);
  margin-left: 1px;
  font-weight: 400;
}
.data-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}

.ad-name {
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.data-section-h {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.data-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.data-rows .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.data-rows .row:last-child {
  border-bottom: none;
}
.row-name {
  color: var(--ink-dim);
  flex: 1;
  margin-right: 12px;
  letter-spacing: -0.005em;
}
.row-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/*
 * "Ask EON" button — refreshed 2026-05-18 per Daniel:
 * "make ask eon button cooler not just black and flat."
 *
 * Design intent (matches CRUX "quiet authority" tone — not neon-y):
 *   - Soft gradient base (bg-card → slightly elevated) instead of
 *     flat transparent.
 *   - Subtle accent-tinted border with a glow on hover, picking up
 *     the brand --accent (#d4ff3a dark / dark ink on light).
 *   - Lift on hover via translateY + layered shadow for depth.
 *   - Keeps the mono / uppercase / wide-tracking typography that
 *     makes the button feel like the rest of EON.
 *   - Pseudo-element for a moving inner shine on hover so the button
 *     reads as "alive" without being loud.
 */
.ask-btn {
  position: relative;
  margin-top: 14px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--bg-card) 92%, var(--accent) 8%) 0%,
      var(--bg-card) 60%);
  border: 1px solid color-mix(in oklab, var(--line) 60%, var(--accent) 40%);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.25s ease;
}
.ask-btn::before {
  /* Diagonal sheen that translates on hover. Pure decorative. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 35%,
    color-mix(in oklab, var(--accent) 22%, transparent) 50%,
    transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.ask-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--bg-card) 80%, var(--accent) 20%) 0%,
      var(--bg-card) 70%);
  box-shadow:
    0 6px 18px color-mix(in oklab, var(--accent) 18%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent);
  transform: translateY(-1px);
}
.ask-btn:hover::before {
  transform: translateX(120%);
}
.ask-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent);
}
/*
 * Light-theme branch — --accent is dark ink, not neon. Tone down the
 * gradient and use a soft warm-gray shadow so the button doesn't read
 * as a black pill on white. Same lift/sheen mechanic.
 */
[data-theme="light"] .ask-btn {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--bg-card) 90%, var(--line-strong) 10%) 0%,
      var(--bg-card) 70%);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(20, 18, 14, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .ask-btn:hover {
  border-color: var(--ink);
  box-shadow:
    0 6px 18px rgba(20, 18, 14, 0.10),
    0 2px 4px rgba(20, 18, 14, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.data-card-empty {
  opacity: 0.6;
}
.data-empty-msg {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.notif-mark-read {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent, #2563eb); padding: 2px 4px;
}
.notif-mark-read:hover { text-decoration: underline; }
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  transition: background .2s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item .t {
  font-weight: 500; margin-bottom: 2px; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.notif-item .b { color: var(--ink-dim); font-size: 12px; line-height: 1.4; }
.notif-item.notif-unread { background: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent); }
.notif-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #2563eb);
}
.notif-time {
  margin-left: auto; font-size: 11px; font-weight: 400;
  color: var(--ink-soft, #999); white-space: nowrap;
}
.notif-kind {
  margin-top: 4px; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft, #999);
}

/* ── Utility ─────────────────────────────────────────────── */

.hide { display: none !important; }
.fade-in { animation: fadeIn 0.4s ease backwards; }

/* ───────────────────────────────────────────────────────────
   v3.0 Dashboard — date chips, chart card, target tile
   ─────────────────────────────────────────────────────────── */
.date-chips {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.date-chips::-webkit-scrollbar { display: none; }
.date-chips .chip {
  padding: 6px 14px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  border-radius: 16px;
  cursor: pointer;
  transition: all 120ms ease;
  font-family: inherit;
}
.date-chips .chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.date-chips .chip-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 600;
}
[data-theme="dark"] .date-chips .chip-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.chart-card {
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
}
.chart-card .card-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.chart-card .card-title {
  font-weight: 600; font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Tile polish — give signals more character */
.data-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px);
  padding: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.data-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent-soft);
}
.data-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.data-card-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.02em;
}
.data-card-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.data-card-rows .row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.data-card-rows .row:first-child { border-top: none; }
.data-card-rows .row-name { color: var(--ink-dim); }
.data-card-rows .row-val { color: var(--ink); font-weight: 500; }

/* Expandable / dropdown for top ad / top product */
.expand-toggle {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 12px;
  padding: 8px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
  justify-content: center;
  transition: color 120ms;
}
.expand-toggle:hover { color: var(--ink); }
.expand-toggle .arrow {
  display: inline-block;
  transition: transform 200ms ease;
  font-size: 10px;
}
.expand-toggle.open .arrow { transform: rotate(180deg); }
.expand-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.expand-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  gap: 12px;
}
.expand-row:first-child { border-top: none; padding-top: 0; }
.expand-row .name {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expand-row .val {
  font-size: 13px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* Hero number — slightly bigger and heavier in v3.0 */
.hero {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px);
  padding: 18px 18px 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.hero-label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-num {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.hero-num .unit {
  font-size: 24px;
  color: var(--ink-mute);
  margin-left: 2px;
  font-family: inherit;
  vertical-align: super;
  font-weight: 500;
}
.hero-trend {
  font-size: 12px;
  color: var(--ink-dim);
}

/* v3.0p7 — Apple Health-style delta triangles in hero */
.hero-delta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  vertical-align: middle;
}
.hero-num .hero-delta {
  font-size: 14px;
  margin-left: 8px;
  vertical-align: middle;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 500;
}
.hero-delta-up   { color: var(--ok); }
.hero-delta-down { color: var(--danger); }
.hero-delta-flat { color: var(--ink-mute); }

/* v3.0p7: delta pills (vs prior period) */
.delta-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  line-height: 1.4;
}
.delta-pill-good {
  background: var(--ok-soft);
  color: var(--ok);
}
.delta-pill-bad {
  background: var(--danger-soft);
  color: var(--danger);
}
.delta-pill-flat {
  background: var(--accent-soft);
  color: var(--ink-mute);
}
/* In hero, the MER pill sits right next to the big number — make it slightly bigger */
.hero-num .delta-pill {
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 14px;
  margin-left: 8px;
  vertical-align: middle;
  position: relative;
  top: -10px;
}

/* v3.0p9: location trend arrows */
.loc-trend {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.loc-trend-up { color: var(--ok); }
.loc-trend-down { color: var(--danger); }
.loc-trend-flat { color: var(--ink-mute); }
.loc-row .row-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* v3.0p9: hero delta pill placement — sit on hero baseline, smaller, less obtrusive */
.hero-num .delta-pill {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: var(--r-lg, 6px);
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -14px;  /* lift to align with the top of the big number */
  font-weight: 600;
}

/* hero-trend layout: stack metric+delta as inline flex pairs that wrap nicely */
.hero-trend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-dim);
}
.hero-trend .metric-group {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.hero-trend .delta-pill {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--r-md, 4px);
  margin-left: 0;
  vertical-align: baseline;
  position: static;
  top: auto;
}

/* v3.0p16 commit 9e (Item 5): dim a chat bubble whose stream was lost */
.msg.eon.dropped .text {
  opacity: 0.55;
}

/* ── v3.0p16 commit 9f (Item 4): tool-trace card ─────────────── */

.tool-trace {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 4px 0 8px 0;
  padding: 8px 12px;
  border-left: 2px dotted var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: tool-trace-fade 0.2s ease-out;
}

@keyframes tool-trace-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tool-entry {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.45;
}

.tool-entry .tool-text {
  flex: 1;
}

.tool-entry .tool-icon {
  width: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}
.tool-entry .tool-icon.ok  { color: var(--ok); }
.tool-entry .tool-icon.err { color: var(--danger); }

.tool-entry.done .tool-text,
.tool-entry.error .tool-text {
  opacity: 0.72;
}

/* Breathing dot — alive and thinking, not a mechanical spinner */
.tool-spinner {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: tool-pulse 1.4s ease-in-out infinite;
}

@keyframes tool-pulse {
  0%, 100% { opacity: 0.28; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}

/* Collapsed: muted single-liner summary, italic */
.tool-trace.collapsed {
  border-left-style: solid;
  border-left-color: var(--line-soft);
  padding: 4px 12px;
  font-size: 12px;
  opacity: 0.62;
  font-style: italic;
  transition: opacity 0.3s ease-out;
}

/* v3.0p17 9m: memory review queue banner. Sits below freshness on the
   home page. Quiet, list-style, action buttons per row.
   v3.0p17 9r Day 4: collapsed-by-default via <details>. */
.memory-review-card {
  margin: 0 0 12px 0;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
}
/* Hide default browser disclosure triangle; we provide our own caret. */
.memory-review-card > summary { list-style: none; cursor: pointer; }
.memory-review-card > summary::-webkit-details-marker { display: none; }
.memory-review-card > summary::after {
  content: '▸';
  margin-left: 8px;
  color: var(--ink-mute);
  font-size: 10px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.memory-review-card[open] > summary::after { transform: rotate(90deg); }
.memory-review-rows {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-soft);
}
.memory-review-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.memory-review-title {
  font-weight: 600;
  color: var(--ink);
}
.memory-review-hint {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}
.memory-review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  align-items: center;
}
.memory-review-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.memory-review-cat {
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bg-card-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.memory-review-content {
  color: var(--ink-dim);
  flex: 1;
  min-width: 200px;
}
.memory-review-meta {
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}
.memory-review-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.memory-review-actions button {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.memory-review-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── EON's beliefs (2026-07-24) — read-only memory browse ─── */
.memory-review-all {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.beliefs-panel {
  max-width: 720px;
  width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.beliefs-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
}
.beliefs-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--ink);
}
.beliefs-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.belief-cat-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-pill, 4px);
  border: 1px solid var(--line-soft);
  background: var(--bg-card-2);
  color: var(--ink-dim);
  cursor: pointer;
}
.belief-cat-chip.active {
  border-color: var(--accent);
  color: var(--ink);
}
.beliefs-body {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
}
.beliefs-entity-note {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.belief-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.belief-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.belief-cat {
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bg-card-2);
  padding: 1px 6px;
  border-radius: 3px;
  align-self: flex-start;
}
.belief-content {
  color: var(--ink-dim);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.belief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.belief-chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill, 4px);
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}
.belief-chip:hover { border-color: var(--accent); color: var(--ink); }
.belief-age {
  font-size: 10px;
  color: var(--ink-mute);
  font-style: italic;
}
.belief-retire {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.belief-retire:disabled { opacity: 0.4; cursor: not-allowed; }
.beliefs-loading, .beliefs-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}
/* Retired lifecycle (mig 487) — invalidated, never deleted */
.belief-row--retired .belief-content {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.belief-death {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill, 4px);
  border: 1px dashed var(--line-soft);
  color: var(--ink-mute);
  font-style: italic;
}
.belief-restore {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.belief-restore:disabled { opacity: 0.4; cursor: not-allowed; }
.belief-cat-chip--retired { border-style: dashed; }

/* 2026-05-19 (Daniel): launch tile on the Ads page that opens the
   dedicated /marketing SPA. Brand-accent gradient + arrow affordance,
   sized between a card and a button so it reads as a navigational
   gateway, not an inline button. */
.ads-marketing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in oklab, var(--line) 60%, var(--accent) 40%);
  border-radius: var(--r-lg, 6px);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--bg-card) 90%, var(--accent) 10%) 0%,
      var(--bg-card) 70%);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.ads-marketing-cta:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow:
    0 6px 18px color-mix(in oklab, var(--accent) 14%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.18);
}
.ads-marketing-cta-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ads-marketing-cta-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.ads-marketing-cta-sub {
  font-size: 12px;
  color: var(--ink-mute);
}
.ads-marketing-cta-arrow {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.ads-marketing-cta:hover .ads-marketing-cta-arrow {
  transform: translateX(4px);
}
[data-theme="light"] .ads-marketing-cta-arrow {
  color: var(--ink);
}

/* v3.0p17 9h item 3 → 2026-05-19 Item 8 refactor:
   Inline separator removed (was the source of the "two sections of
   paused ads" complaint — paused ads were mixed into the initial 10
   AND surfaced again behind a separator). Paused ads now collapse
   entirely behind .ad-paused-collapse below. The selector stays for
   any third-party code that still references it; new code uses the
   tier + collapse pattern. */
.ad-list-separator {
  display: none;
}

/* 2026-05-19 (Item 8 — Daniel's "every tile = action" rule).
   Active ads grouped by verdict tier (SCALE / HOLD / CUT / REFRESH)
   so the operator sees what to do first instead of a flat sorted
   list. Paused ads collapsed behind a single <details>. */

.ad-tier {
  margin-bottom: 14px;
}
.ad-tier:last-child {
  margin-bottom: 0;
}
.ad-tier-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 6px;
  padding: 0 2px;
}
.ad-tier-more {
  margin-top: 4px;
}
.ad-tier-more > summary {
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 6px 2px;
  list-style: none;
}
.ad-tier-more > summary::-webkit-details-marker { display: none; }
.ad-tier-more > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.ad-tier-more[open] > summary::before {
  content: "▾ ";
}
.ad-tier-more > summary:hover {
  color: var(--ink);
}

/* Paused ads collapse — Daniel's specific complaint:
   "the META section in ad section has alot of redundant duplicated
   long useless nonactionable info (2 sections of paused ads)".
   Now: one collapse with the count, hidden by default. */
.ad-paused-collapse {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.ad-paused-collapse > summary {
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}
.ad-paused-collapse > summary::-webkit-details-marker { display: none; }
.ad-paused-collapse > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  width: 12px;
  transition: transform 0.15s ease;
}
.ad-paused-collapse[open] > summary::before {
  content: "▾";
}
.ad-paused-collapse > summary:hover { color: var(--ink); }
.ad-paused-summary-label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ad-paused-summary-count {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: var(--r-pill, 4px);
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* v3.0p17 9h item 5: inline confirmation card.
   Subtle accent border, two clear-hierarchy buttons. After decision,
   buttons replaced with a muted footer line. */
.permission-card {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  animation: permission-card-fade 0.18s ease-out;
}

@keyframes permission-card-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.permission-card .permission-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

/* 2026-07-30 (p561): safety-rail caveats in plain words, above the
   technical payload — what the rails could and could not check. */
.permission-card .permission-caveats {
  margin: 4px 0 6px 0;
  padding: 6px 10px;
  background: var(--bg-card-2);
  border-left: 2px solid var(--warn, #d4a017);
  border-radius: 4px;
}

.permission-card .permission-caveat {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.permission-card .permission-payload {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ink-dim);
  background: var(--bg-card-2);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0 10px 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}

.permission-card .permission-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.permission-card button[data-decision] {
  flex: 1;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.permission-card button.permission-approve {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}
.permission-card button.permission-deny {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.permission-card button[data-decision]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 2026-08-04 (mig 675) — adaptive cards. A question's answers ARE its
   buttons, so they wrap instead of splitting the row two ways; an FYI
   gets a quiet dismiss and drops the accent stripe that means "you are
   blocking something". */
.permission-card .permission-buttons--choices {
  flex-wrap: wrap;
}
.permission-card button.permission-answer {
  flex: 0 1 auto;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 5px;
  cursor: pointer;
  background: var(--bg-card-2);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.permission-card button.permission-answer:hover {
  border-color: var(--accent);
}
.permission-card .permission-reply {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.permission-card .permission-reply-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.permission-card button.permission-reply-send {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}
.permission-card--notify {
  border-left-color: var(--line);
}
.permission-card .permission-buttons--notify {
  justify-content: flex-end;
}
.permission-card button.permission-ack {
  flex: 0 0 auto;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.permission-card button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.permission-card.decided {
  border-left-color: var(--ink-faint);
  opacity: 0.85;
}
.permission-card .permission-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* v3.0p18 9u — chat-built dashboard widgets. */
.widget-card {
  margin: 10px 0;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md, 4px);
  font-size: 13px;
  color: var(--ink);
  transition: opacity 0.2s;
}
.widget-card.pinned {
  border-left-color: var(--good, #10b981);
  opacity: 0.95;
}
.widget-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.widget-card-title {
  font-weight: 600;
  font-size: 14px;
}
.widget-card-meta {
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.widget-card-body {
  margin: 8px 0;
}
.widget-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  justify-content: flex-end;
}
.widget-card-footer .btn {
  font-size: 12px;
  padding: 6px 12px;
}

.widget-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
}
.widget-axis-label {
  font-size: 10px;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 2px;
}

/* KPI tile */
.widget-kpi {
  text-align: center;
  padding: 10px 4px;
}
.widget-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.widget-kpi-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.widget-kpi-sub {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
}
.widget-kpi.kpi-good .widget-kpi-value { color: var(--good, #10b981); }
.widget-kpi.kpi-bad  .widget-kpi-value { color: var(--danger, #ef4444); }

/* List tile */
.widget-list-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.widget-list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.widget-list-row:last-child { border-bottom: 0; }
.widget-list-title {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.widget-list-sub {
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 1px;
}
.widget-list-value {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Custom dashboard grid view */
.dashboard-custom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 720px) {
  .dashboard-custom-grid { grid-template-columns: 1fr 1fr; }
}
.dashboard-custom-grid .widget-card {
  margin: 0;
}

/* v3.0p18 9v — Phase C reorder + range picker. */
.widget-card[draggable="true"] {
  cursor: grab;
}
.widget-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.widget-card.drop-target {
  box-shadow: 0 0 0 2px var(--accent);
}
.widget-drag-grip {
  display: inline-block;
  margin-right: 6px;
  color: var(--ink-mute);
  font-weight: 700;
  letter-spacing: -2px;
  user-select: none;
  cursor: grab;
}
.widget-range-picker {
  display: inline-flex;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill, 4px);
  padding: 2px;
  margin-left: auto;
  margin-right: 8px;
}
.widget-range-opt {
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 3px 9px;
  cursor: pointer;
  border-radius: var(--r-pill, 4px);
  transition: color 0.15s, background 0.15s;
}
.widget-range-opt:hover { color: var(--ink); }
.widget-range-opt.active {
  background: var(--accent);
  color: #000;
}

/* v3.0p18 9v — ads creatives strip. */
.creatives-skeleton {
  height: 220px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 4px);
  opacity: 0.4;
}
.creatives-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.creatives-row::-webkit-scrollbar { height: 6px; }
.creatives-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.creative-tile {
  flex: 0 0 160px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 4px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.creative-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  overflow: hidden;
}
.creative-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creative-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-mute);
}
.creative-type-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--r-pill, 4px);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.creative-name {
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px 4px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creative-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 4px 10px 10px;
  gap: 4px;
}
.creative-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.creative-metrics span {
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.creative-metrics strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

/* v3.0p18 9kk/9ll — Recommendations view */
.rec-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 4px;
}
.rec-sev-chip { font-size: 12px; }
/* Active filter chip — .chip-active is only styled under .date-chips, so the
   recs filter previously had NO selected-state at all. */
.rec-filter-bar .chip-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 600;
}
[data-theme="dark"] .rec-filter-bar .chip-active {
  background: var(--accent);
  color: var(--accent-text, #0A0A0C);
  border-color: var(--accent);
}
.rec-show-more {
  width: 100%; margin: 8px 0 4px; padding: 10px;
  background: none; border: 1px dashed var(--line-soft);
  border-radius: 10px; cursor: pointer;
  color: var(--ink-dim); font-size: 12px; font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.rec-show-more:hover { background: var(--bg-card-2); color: var(--ink); }
.rec-section { margin: 16px 0 24px; }
.rec-zone-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-mute);
  margin: 6px 4px;
}
.rec-zone-pinned .rec-card {
  border-left: 3px solid var(--accent);
}
.rec-card {
  padding: 14px 16px;
  margin-bottom: 10px;
}
.rec-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rec-sev-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
}
.rec-urg-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
}
.rec-impact {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
.rec-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 6px;
}
.rec-card-obs {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 8px;
}
.rec-card-hyp {
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.rec-card-hyp strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  margin-right: 6px;
}
.rec-confidence {
  font-size: 10px;
  color: var(--ink-mute);
  margin-left: 4px;
}
.rec-action-ladder {
  font-size: 13px;
  margin: 6px 0 10px 18px;
  padding: 0;
}
.rec-action-ladder li { margin: 4px 0; line-height: 1.4; }
/* Build directive (self_spec). Written to feature_payload.directive and
   never rendered until 2026-08-16 — the lane's whole product was invisible.
   Monospace + preserved newlines because it is pasted into a session
   verbatim; scrolls in its own box so a long brief never widens the card. */
.rec-directive {
  background: var(--bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.rec-directive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.rec-directive-head strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
}
.rec-directive-copy { min-height: 44px; }
.rec-directive-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
}
.rec-card-meta {
  font-size: 10px;
  color: var(--ink-mute);
  margin: 4px 0 10px;
}
.rec-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.rec-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 4px);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--ink);
}
.rec-btn:hover { background: var(--bg-card); }
.rec-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.rec-btn-investigate {
  margin-left: auto;
  font-weight: 600;
}
.rec-btn-take {
  font-weight: 600;
  color: var(--accent, #2563eb);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--line));
}
.rec-btn-take:hover { background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent); }

/* LM-01 two-tap outcome (2026-08-01). The did-it / won't pair sits directly
   under the observation — above the hypothesis and the action ladder — so
   both taps are reachable without scrolling a tall card. */
.rec-twotap { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.rec-btn-did {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}
.rec-btn-wont { font-weight: 600; }
.rec-btn-wrong {
  color: var(--danger, #ef4444);
  border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--line));
}
.rec-reason {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg, 6px);
  border: 1px solid var(--line-soft, var(--line));
  background: var(--bg);
  animation: recTakeIn .18s ease-out;
}
.rec-reason-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.rec-reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rec-chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 4px);
  padding: 3px 9px;
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
}
.rec-chip:hover { background: var(--bg-card); color: var(--ink); }
.rec-reason-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 4px);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}
.rec-reason-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .rec-reason { animation: none; } }

/* EON's-take inline reasoning panel (2026-06-11) */
.rec-reasoning {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg, 6px);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
  animation: recTakeIn .22s ease-out;
}
@keyframes recTakeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rec-reasoning-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent, #2563eb); margin-bottom: 6px;
}
.rec-reasoning p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.rec-reasoning p:last-child { margin-bottom: 0; }
.rec-reasoning-load { font-size: 13px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
.rec-reasoning-spark { animation: recSpark 1.1s ease-in-out infinite; color: var(--accent, #2563eb); }
@keyframes recSpark { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }
.rec-reasoning-err { font-size: 12px; color: var(--danger, #ef4444); }
@media (prefers-reduced-motion: reduce) {
  .rec-reasoning { animation: none; }
  .rec-reasoning-spark { animation: none; }
}


/* ==========================================================
   PR CHAT-UI-PHASE1 — "Claude Code" chat skin (opt-in)

   Activated when <body class="chat-style-claude">. All rules below
   ONLY apply to the chat view; rest of the app keeps its current
   "Comfortable" aesthetic untouched.

   Inspiration: the Claude Code VS Code extension's chat panel —
   generous whitespace, monospace tool/code boxes, horizontal rules
   between turns, plain-text agent voice (no bubbles), terminal-style
   composer.

   Fonts: self-hosted, below. The upgrade path this comment used to
   describe is now taken.
   ========================================================== */

/* THE SHELL'S TYPEFACE, ACTUALLY LOADED (2026-08-10).

   What was here: an @import of Archivo + JetBrains Mono from Google.
   It never once fetched them. `@import` is only valid before any other
   rule (CSS Cascading and Inheritance, @import ordering); this one sat
   after 908 rule blocks, so every browser dropped it on parse. Proven
   in a real Chromium against this file: document.fonts.size === 0 and
   no request to fonts.googleapis.com — for app.css alone AND for
   index.html's whole stylesheet set.

   So `--display: 'Archivo', …` (app.css:109) has been resolving to its
   FALLBACK on every surface that loads app.css and nothing else —
   -apple-system on the build Mac, Segoe UI on the reps' Windows
   laptops. The operator's font law (2026-08-06: Archivo only) was
   unenforced on the shell, silently, and the only pages wearing Archivo
   are the ones that happen to also load marketing.css, story_tag.css,
   ads_rooms.css or studio.css — each of which already self-hosts it.

   Declared HERE rather than at the top of the file on purpose: @font-face
   carries no ordering constraint (only @import does), and app.css has
   positional pins that a wholesale shift would break.

   The -ngn faces are not decoration. Neither latin cut in /static/fonts
   contains U+20A6, and Google's JetBrains Mono has no naira either —
   which is why jetbrains-mono-ngn.woff2 already exists (marketing.css:
   6223). Google's Archivo DOES carry it, so switching to the local file
   would have dropped the naira sign out of Archivo across the product,
   on a Nigerian brand's screens. archivo-ngn.woff2 is that one glyph,
   subset from the same Archivo v25 variable cut, both axes intact.

   The main faces CEDE U+20A6 explicitly. A face whose unicode-range
   covers a codepoint is chosen for it even when the file has no such
   glyph — the browser then leaves the family altogether rather than
   trying the next face in it. Measured here: with the latin face left
   at its default full range, the naira rendered at 9.63px, identical to
   a deliberately-absent family, while the patch face sat 'unloaded'.
   Ceding the codepoint is what makes the patch reachable; declaration
   order is not a guarantee, so this does not lean on it. */
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0-20A5, U+20A7-10FFFF;
}
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/archivo-ngn.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+20A6;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0-20A5, U+20A7-10FFFF;
}
/* 400 800, not the file's own 100 800: a family's faces are matched on
   weight BEFORE unicode-range decides, so a patch whose weight range
   differs from its latin sibling is unreachable at the weights anyone
   actually asks for. Measured: with the patch at 100 800 against a
   latin face at 400 800, document.fonts.load('400 …', '₦') matched
   NOTHING and the naira fell back — it only resolved at weight 100.
   Both faces now declare the same range, so weight always ties and the
   codepoint decides. marketing.css:6221 is aligned to match. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-ngn.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+20A6;
}

body.chat-style-claude {
  /* Inter for proportional, JetBrains Mono for technical blocks. */
  --cc-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  --cc-gutter: 16px;
  --cc-max-col: 760px;
}

/* Restrict scope to the chat view (id="chat-body" + composer area).
   #chat is the screen-level container; if that selector changes the
   skin gracefully degrades by simply not applying. */
body.chat-style-claude #chat-body,
body.chat-style-claude .chat-body,
body.chat-style-claude [data-view="chat"] {
  max-width: var(--cc-max-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cc-gutter);
  padding-right: var(--cc-gutter);
  font-family: var(--cc-sans);
  line-height: 1.65;
  font-size: 15px;
}

/* Horizontal rule between turns. We add a small ::after on each
   completed message to anchor the eye. */
body.chat-style-claude .msg + .msg::before {
  content: "";
  display: block;
  height: 1px;
  margin: 18px 0;
  background: var(--line);
  opacity: 0.5;
}

/* USER message: indented with a " > " prefix instead of a bubble.
   Looks like a quoted prompt in a terminal. */
body.chat-style-claude .msg.user {
  /* 2026-05-19 (Daniel): "i want the TEXT AREA AND HISTORY PANEL
     upgrade applied to all chat theme... slight raise and gradient
     to isolate each text". Previously the claude theme stripped the
     bubble entirely (flat plaintext + "> " prefix). Now: keep the
     claude typography but add the subtle raise+gradient so messages
     still isolate visually. */
  margin: 12px 0;
  max-width: 100%;
}
body.chat-style-claude .msg.user .text::before {
  content: "> ";
  font-family: var(--cc-mono);
  color: var(--ink-mute);
  margin-right: 4px;
}
body.chat-style-claude .msg.user .text {
  font-family: var(--cc-sans);
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
  white-space: pre-wrap;
}

/* EON message in claude theme: same raise+gradient as the default
   theme but keep the typography overrides for the claude feel. */
body.chat-style-claude .msg.eon {
  margin: 12px 0 18px;
  max-width: 100%;
}
body.chat-style-claude .msg.eon .from {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: var(--cc-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
}
body.chat-style-claude .msg.eon .from-dot { display: none; }
body.chat-style-claude .msg.eon .from-name::before { content: "● "; opacity: 0.7; }
body.chat-style-claude .msg.eon .text {
  font-family: var(--cc-sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Code blocks inside EON replies: monospace, bordered, with a thin
   file-path-style header strip up top. */
body.chat-style-claude .msg.eon pre,
body.chat-style-claude .msg.eon code {
  font-family: var(--cc-mono);
  font-size: 13px;
}
body.chat-style-claude .msg.eon pre {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
  overflow-x: auto;
}

/* Tool-trace card: bordered box, monospace, status pills. */
body.chat-style-claude .tool-trace {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  font-family: var(--cc-mono);
  font-size: 12px;
  line-height: 1.55;
}
body.chat-style-claude .tool-trace.collapsed {
  background: transparent;
  border: 1px dashed var(--line-soft);
  color: var(--ink-mute);
  font-style: normal;
}
body.chat-style-claude .tool-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--ink-dim);
}
body.chat-style-claude .tool-entry.error { color: var(--bad, #ef4444); }
body.chat-style-claude .tool-entry.ok    { color: var(--ink-dim); }
body.chat-style-claude .tool-text { font-family: var(--cc-mono); }

/* Composer — terminal-style single-line input with ↵ hint. */
body.chat-style-claude .composer,
body.chat-style-claude #composer {
  max-width: var(--cc-max-col);
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 12px var(--cc-gutter);
}
body.chat-style-claude #composer-input {
  /* 2026-05-19 (Daniel): "the ASK EON anything grey background is off
     remove". Was rendering as a darker inset rectangle inside the
     outer composer pill — visually double-pill. Background dropped to
     transparent so the textarea lives inside the parent .composer pill
     directly. Same in light theme. */
  font-family: var(--cc-sans);
  font-size: 15px;
  line-height: 1.55;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0;
}
body.chat-style-claude #composer-input::placeholder {
  color: var(--ink-mute);
  font-family: var(--cc-sans);
}

/* Streaming caret — slimmer, monospace block-style. */
body.chat-style-claude .msg.eon.streaming .caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--ink-mute);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cc-blink 1s steps(2, start) infinite;
}
@keyframes cc-blink {
  to { visibility: hidden; }
}

/* Permission card + widget card: keep borders but neutralize colors
   so they sit within the line/box visual language. */
body.chat-style-claude .permission-card,
body.chat-style-claude .widget-card {
  border: 1px solid var(--line);
  background: var(--bg-card-2);
  border-radius: 6px;
}

/* Empty state (first-time chat) — center, monospace title. */
body.chat-style-claude .empty {
  text-align: left;
  max-width: var(--cc-max-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cc-gutter);
  padding-right: var(--cc-gutter);
}
body.chat-style-claude .empty-mark {
  font-family: var(--cc-mono);
  font-size: 20px;
  color: var(--ink-mute);
}
body.chat-style-claude .empty-title {
  font-family: var(--cc-sans);
  font-weight: 600;
}

/* Suggest-grid (the 4 starter chips on empty chat): make them
   borderless, monospace, terminal-y. */
body.chat-style-claude .suggest-grid {
  max-width: var(--cc-max-col);
  margin-left: auto;
  margin-right: auto;
}
body.chat-style-claude .suggest {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body.chat-style-claude .suggest .lbl {
  font-family: var(--cc-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Mobile (operator explicitly wanted this on mobile too). Drop the
   max-width column constraint so we use the full viewport, and
   tighten the gutter. Typography + alignment + box styles all stay. */
@media (max-width: 640px) {
  body.chat-style-claude #chat-body,
  body.chat-style-claude .chat-body,
  body.chat-style-claude [data-view="chat"],
  body.chat-style-claude .composer,
  body.chat-style-claude #composer,
  body.chat-style-claude .empty,
  body.chat-style-claude .suggest-grid {
    --cc-gutter: 12px;
    max-width: 100%;
  }
}


/* ==========================================================
   PR CHAT-UI-PHASE2 — tool-trace as native <details>/<summary>

   Only applies under body.chat-style-claude. While tools are
   running, the renderer keeps the existing .tool-trace div
   (live spinner view). Once all tools complete, the renderer
   swaps to <details class="tool-trace cc">, collapsed by
   default. Click to expand; native browser disclosure.
   ========================================================== */

body.chat-style-claude details.tool-trace.cc {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
  margin: 10px 0;
  font-family: var(--cc-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow: hidden;
}

body.chat-style-claude details.tool-trace.cc > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  color: var(--ink-mute);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.chat-style-claude details.tool-trace.cc > summary::-webkit-details-marker {
  display: none;
}
body.chat-style-claude details.tool-trace.cc > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--ink-mute);
  transition: transform 0.15s ease;
}
body.chat-style-claude details.tool-trace.cc[open] > summary::before {
  transform: rotate(90deg);
}

body.chat-style-claude details.tool-trace.cc > .tool-trace-body {
  padding: 6px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
body.chat-style-claude details.tool-trace.cc[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-card-2);
}

/* Inside the body, the per-tool rows keep their existing markup
   but get terminal-style row hover for that "code editor" feel. */
body.chat-style-claude details.tool-trace.cc .tool-entry {
  padding: 4px 0;
  border-radius: 4px;
}
body.chat-style-claude details.tool-trace.cc .tool-entry:hover {
  background: var(--bg-card-2);
  padding-left: 4px;
  padding-right: 4px;
}

/* Status icons get a terminal-style monochrome treatment in the
   Claude Code skin (existing Comfortable colors stay on the old
   .tool-trace div class). */
body.chat-style-claude details.tool-trace.cc .tool-icon.ok {
  color: var(--ok, #10b981);
  font-weight: 600;
}
body.chat-style-claude details.tool-trace.cc .tool-icon.err {
  color: var(--bad, #ef4444);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   PR MONEY-CASH-RESTORE: Bloomberg-vibe Money page primitives
   Dense, mono-numeric, terminal-style. Reused by the cash
   account list, runway tile, and Update-balance modal.
   ───────────────────────────────────────────────────────────── */

/* Number/currency rendering — pin to mono so columns align. */
.mono-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* Tone classes for delta colouring (green up / red down / dim flat) */
.tone-ok      { color: var(--ok,   #10b981); }
.tone-warn    { color: var(--warn, #f59e0b); }
.tone-danger  { color: var(--bad,  #ef4444); }
.tone-mute    { color: var(--ink-soft, #9ca3af); }

/* Live-data dot — a subtle pulsing ticker indicator. */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill, 4px);
  background: var(--ok, #10b981);
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.85;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* Cash tile (runway / total cash) interior layout */
.cash-tile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.cash-tile-label {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.cash-tile-big {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}
.cash-tile-meta {
  font-size: 11px;
  color: var(--ink-soft, #9ca3af);
  margin-top: 8px;
  letter-spacing: -0.005em;
}
.cash-tile-sep {
  color: var(--ink-mute, #6b7280);
  margin: 0 4px;
}

/* PR MONEY-UI-MOBILE-POLISH: per-account list — responsive.
   PHONE (default): 2-region row. Left region = name + meta line
   (pill + delta) stacked. Right region = balance + Update button
   stacked. Each region keeps its content tight; no overlap, no
   truncation past natural ellipsis on long names.
   TABLET+ (>= 720px): flips to single horizontal row, restoring
   the original Bloomberg-table feel. */

.cash-acct-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-line, rgba(255,255,255,0.06));
}
.cash-acct-row:last-child { border-bottom: none; }
.cash-acct-row:hover { background: var(--card-hover, rgba(255,255,255,0.025)); }

.cash-acct-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.cash-acct-name {
  color: var(--ink, #f3f4f6);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.cash-acct-cur {
  font-size: 10px;
  color: var(--ink-mute, #6b7280);
  font-weight: 400;
}
.cash-acct-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}
.cash-acct-delta {
  font-weight: 500;
  white-space: nowrap;
  font-size: 12.5px;
}

.cash-acct-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.cash-acct-bal {
  color: var(--ink, #f3f4f6);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  text-align: right;
}
.cash-acct-needs-snap {
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* Header only meaningful on tablet+ where it sits over the columns */
.cash-acct-header-table-only { display: none; }

/* TABLET+ — single horizontal row, hide stacking, show header */
@media (min-width: 720px) {
  .cash-acct-row {
    align-items: center;
    padding: 10px 14px;
  }
  .cash-acct-left {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .cash-acct-name {
    flex: 0 0 200px;
    max-width: 240px;
  }
  .cash-acct-meta {
    flex: 1 1 auto;
  }
  .cash-acct-right {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cash-acct-bal {
    min-width: 140px;
    font-size: 14px;
  }
  .cash-acct-header-table-only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 8px;
    border-bottom: 1px solid var(--card-line, rgba(255,255,255,0.10));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: var(--ink-mute, #6b7280);
  }
  .cash-acct-h-name { flex: 0 0 200px; }
  .cash-acct-h-meta { flex: 1; }
  .cash-acct-h-bal { min-width: 140px; text-align: right; }
  .cash-acct-h-act { width: 70px; }
}

/* Liquidity card debt-free state */
.liq-debt-free {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 4px;
}
.liq-debt-free-big {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.liq-debt-free-label {
  font-size: 11px;
  color: var(--ink-soft, #9ca3af);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.liq-debt-free-meta {
  font-size: 11px;
  color: var(--ink-soft, #9ca3af);
  margin-top: 6px;
}

/* Snapshot age pill — colour-coded freshness signal */
.snap-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill, 4px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.snap-pill-ok      { background: rgba(16,185,129,0.13); color: #34d399; }
.snap-pill-warn    { background: rgba(245,158,11,0.13); color: #fbbf24; }
.snap-pill-danger  { background: rgba(239,68,68,0.13);  color: #f87171; }
.snap-pill-cold    { background: rgba(107,114,128,0.15); color: #9ca3af; }

/* Update button — quiet by default, animates on hover */
.snap-update-btn {
  border: 1px solid var(--card-line, rgba(255,255,255,0.10));
  background: transparent;
  color: var(--ink-soft, #9ca3af);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans, inherit);
  letter-spacing: 0.02em;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.snap-update-btn:hover {
  border-color: var(--accent, #fde047);
  color: var(--accent, #fde047);
  background: rgba(253,224,71,0.05);
}

/* Update-balance modal */
.snap-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: snap-fade 0.12s ease-out;
}
@keyframes snap-fade { from { opacity: 0; } to { opacity: 1; } }
.snap-modal {
  background: var(--bg-elevated, #111418);
  border: 1px solid var(--card-line, rgba(255,255,255,0.10));
  border-radius: var(--r-md, 4px);
  padding: 20px;
  width: min(420px, calc(100vw - 32px));
  font-size: 13px;
  color: var(--ink, #f3f4f6);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.snap-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.snap-modal-title {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute, #6b7280);
  font-weight: 600;
}
.snap-modal-close {
  background: transparent;
  border: none;
  color: var(--ink-mute, #6b7280);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.snap-modal-close:hover { color: var(--ink, #f3f4f6); }
.snap-modal-acct {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #f3f4f6);
  margin-bottom: 12px;
}
.snap-modal-prev {
  font-size: 11px;
  color: var(--ink-soft, #9ca3af);
  margin-bottom: 14px;
}
.snap-modal-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute, #6b7280);
  margin-bottom: 6px;
}
.snap-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-line, rgba(255,255,255,0.10));
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 18px;
  color: var(--ink, #f3f4f6);
  outline: none;
  box-sizing: border-box;
}
.snap-modal-input:focus {
  border-color: var(--accent, #fde047);
  background: rgba(255,255,255,0.06);
}
.snap-modal-hint {
  font-size: 10.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.5;
  margin-top: 8px;
}
.snap-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.snap-modal-cancel,
.snap-modal-submit {
  border: 1px solid var(--card-line, rgba(255,255,255,0.10));
  background: transparent;
  color: var(--ink-soft, #9ca3af);
  font-size: 12px;
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans, inherit);
  letter-spacing: 0.02em;
  transition: all 0.15s;
}
.snap-modal-cancel:hover { color: var(--ink, #f3f4f6); }
.snap-modal-submit {
  background: var(--accent, #fde047);
  border-color: var(--accent, #fde047);
  color: #1a1a1a;
  font-weight: 600;
}
.snap-modal-submit:hover {
  background: var(--accent-bright, #fef08a);
  border-color: var(--accent-bright, #fef08a);
}
.snap-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.snap-modal-result { margin-top: 10px; font-size: 12px; min-height: 16px; }
.snap-modal-ok   { color: var(--ok,  #34d399); }
.snap-modal-err  { color: var(--bad, #f87171); }

/* PR MONEY-CASH-RESTORE-2: needs-snapshot row styling — slightly
   dimmed, the bal column says "needs snapshot" in muted ink. The
   primary "Add" button is the operator's clear next action. */
.cash-acct-row-cold {
  opacity: 0.85;
  background: rgba(255,255,255,0.015);
}
.snap-update-btn-primary {
  background: var(--accent, #fde047);
  border-color: var(--accent, #fde047);
  color: #1a1a1a;
  font-weight: 600;
}
.snap-update-btn-primary:hover {
  background: var(--accent-bright, #fef08a);
  border-color: var(--accent-bright, #fef08a);
  color: #1a1a1a;
}

/* PR money-valuation-tile-restore (2026-06-07): the Business Valuation
   block is now its own dedicated, full-width section (promoted out of
   the Insights grid where the redesign had dropped it). The slot holds
   a single full-width card so the three method numbers + low/base/
   stretch range read as an instrument panel, not a squeezed grid tile. */
.money-valuation-slot {
  margin-bottom: 12px;
}
.money-valuation-slot .val-card {
  width: 100%;
}

/* PR MONEY-CASH-RESTORE-2: expanded valuation card with per-method
   breakdown rows + formula sub-rows. Replaces the 3-column squeeze
   that clipped the EBITDA column. */
.val-card {
  padding: 16px 18px;
}
.val-midpoint {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute, #6b7280);
}
.val-midpoint .mono-num {
  color: var(--ink-soft, #9ca3af);
  font-weight: 600;
  margin-left: 4px;
  text-transform: none;
}
.val-method {
  padding: 14px 0;
  border-bottom: 1px solid var(--card-line, rgba(255,255,255,0.06));
}
.val-method:last-of-type {
  border-bottom: none;
}
.val-method-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.val-method-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #9ca3af);
  font-weight: 600;
}
.val-method-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #f3f4f6);
  letter-spacing: -0.015em;
  /* No truncation — full number is the point of this rebuild. */
  word-break: keep-all;
  white-space: nowrap;
  overflow: visible;
}

/* PR LATE-NIGHT-POLISH: per-method tone for the valuation card so the
   three numbers read as a Bloomberg-style instrument panel rather
   than three identical figures. Each method gets a distinct color
   that ties the dot, label highlight, and number together.

   BOOK   = soft cyan/teal — defensive/floor reading
   REV    = soft green     — growth reading
   EBITDA = accent amber   — profit reading (the CRUX accent yellow) */
.val-method-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill, 4px);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px currentColor;
}
.val-dot-book { background: #67e8f9; color: #67e8f9; }
.val-dot-rev  { background: #34d399; color: #34d399; }
.val-dot-ebd  { background: var(--accent, #fde047); color: var(--accent, #fde047); }

.val-num-book { color: #67e8f9; }
.val-num-rev  { color: #34d399; }
.val-num-ebd  { color: var(--accent, #fde047); }

/* Method block: subtle left-edge ribbon in the matching tone */
.val-method-book { border-left: 2px solid rgba(103,232,249,0.35); padding-left: 12px; margin-left: -14px; }
.val-method-rev  { border-left: 2px solid rgba(52,211,153,0.35);  padding-left: 12px; margin-left: -14px; }
.val-method-ebd  { border-left: 2px solid rgba(253,224,71,0.35);  padding-left: 12px; margin-left: -14px; }

/* Mid-point pill in the header — accent-bordered for emphasis */
.val-midpoint {
  border: 1px solid rgba(253,224,71,0.20);
  padding: 3px 10px;
  border-radius: var(--r-pill, 4px);
  background: rgba(253,224,71,0.04);
}
.val-method-formula {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.val-op {
  color: var(--ink-mute, #6b7280);
  opacity: 0.7;
  margin: 0 4px;
}
.val-method-note {
  font-size: 10.5px;
  color: var(--ink-soft, #9ca3af);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.5;
}
.val-disclaimer {
  font-size: 10px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.5;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-line, rgba(255,255,255,0.06));
}

/* Hero retry button (NET tile error state) */
.hero-retry-btn {
  display: inline-block;
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--card-line, rgba(255,255,255,0.15));
  color: var(--ink-soft, #9ca3af);
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-retry-btn:hover {
  color: var(--accent, #fde047);
  border-color: var(--accent, #fde047);
}

/* PR CLEANUP-SWEEP — UI polish sweep */

/* Composer keyboard-shortcut hint. Was hidden in Comfortable mode
   (visible only in Claude-Code mode). Now compact + visible in
   both, so new users discover ↵/⇧↵ convention without reading docs.
   Auto-fades after focus loss for power users. */
.composer-hint-show {
  display: block !important;
  font-size: 10px;
  color: var(--ink-mute, #6b7280);
  letter-spacing: 0.04em;
  padding: 2px 4px;
  margin-top: 2px;
  opacity: 0.65;
  text-align: right;
  transition: opacity 0.2s;
  user-select: none;
}
.composer-hint-show:hover { opacity: 0.95; }
@media (max-width: 480px) {
  /* Phone: only show the hint when the input is focused — saves
     the vertical line when not actively typing. */
  .composer-hint-show { opacity: 0.45; font-size: 9.5px; }
}

/* Pill + chip unification. Both classes had slightly different
   font sizes (10px vs 14px) and padding (no rule vs 6px 12px),
   producing inconsistent visual weight across pages. Anchor them
   to the same base so operator visual memory transfers. */
.pill, .chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.chip {
  /* Existing .chip already has 6px 12px padding from the date-picker
     definition; this rule unifies font-size only. */
  font-size: 12.5px;
  letter-spacing: 0.005em;
}

/* Tool-trace collapsed vs expanded — unify padding so the layout
   doesn't jump when the user expands a finished trace. The cc-mode
   details element gets the same padding as the live (non-collapsed)
   trace card. */
body.chat-style-claude details.tool-trace.cc {
  margin: 10px 0;
}
body.chat-style-claude details.tool-trace.cc > summary {
  padding: 6px 10px;
}
body.chat-style-claude details.tool-trace.cc[open] {
  padding-bottom: 8px;
}


/* ============================================================
   UX Polish (Path B) — shared skeleton + transition primitives.
   Loaded by every page through app.css. Pairs with transition.js
   (window.EON_UX) — that module handles the JS-side fade/swap/
   countUp/successMark/pulse calls; this stylesheet provides the
   loading placeholders and the success-mark animation.
   ============================================================ */

/* Shimmer animation — token-aware so it respects dark/light. */
@keyframes eon-skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skel {
  display: block;
  background: var(--bg-card);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--line) 50%,
    transparent 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: eon-skel-shimmer 1.4s ease-in-out infinite;
  opacity: 0.85;
}

/* Variants. .skel-line — a single line of text. */
.skel-line {
  height: 12px;
  width: 70%;
  margin: 4px 0;
}
.skel-line-title {
  height: 16px;
  width: 50%;
}
.skel-line-sub {
  height: 11px;
  width: 80%;
  opacity: 0.6;
}

/* .skel-text — single-line placeholder for tile sub-labels. */
.skel-text {
  height: 14px;
  width: 60%;
  margin: 0;
}

/* .skel-tile — full-block placeholder, e.g. a hero card. */
.skel-tile {
  height: 96px;
  width: 100%;
  border-radius: 10px;
}

/* .skel-row — wrapper used by EON_UX.skeleton(n,'row'). The
   wrap centers the two lines vertically and gives them spacing
   that matches an .mk-list row so a list-of-skeletons looks
   like the eventual list-of-rows. */
.skel-row-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.skel-row-wrap:last-child { border-bottom: none; }

/* Reduce shimmer in reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background-image: none;
    background-color: var(--line-soft);
  }
}

/* ── Success mark (EON_UX.successMark, hard-verified only) ── */
.eon-ok-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-size: 12px;
}
.eon-ok-mark svg {
  flex: 0 0 20px;
}
.eon-ok-circle {
  stroke: var(--ok);
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: eon-ok-draw 360ms ease-out forwards;
}
.eon-ok-tick {
  stroke: var(--ok);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: eon-ok-draw 220ms ease-out 280ms forwards;
}
@keyframes eon-ok-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eon-ok-circle, .eon-ok-tick {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ── Attention pulse (EON_UX.pulse) ── */
@keyframes eon-pulse-once {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  60%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.eon-pulse {
  animation: eon-pulse-once 600ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .eon-pulse { animation: none; }
}

/* ── Inventory deep-link card (Daniel follow-up 2026-05-20) ── */
.inv-deep-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.inv-deep-link-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px -16px rgba(212, 255, 62, 0.4);
}
.inv-deep-link-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.inv-deep-link-sub {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.inv-deep-link-btn {
  padding: 8px 14px;
  border-radius: var(--r-md, 4px);
  background: var(--accent);
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 120ms ease-out;
  white-space: nowrap;
}
.inv-deep-link-btn:hover {
  box-shadow: 0 4px 16px -6px rgba(212, 255, 62, 0.5);
}

/* ──────────────────────────────────────────────────────────
   CS Inbox v2 (2026-06-06) — premium chat surface
   Reference: Slack, Linear, Claude. Editorial typography,
   subtle depth via shadows + gradients, micro-animations
   throughout. Replaces the inline-style v1 with classed BEM.
   ────────────────────────────────────────────────────────── */

/* ── Shell ─────────────────────────────────────────────── */

.cs2-shell {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: var(--body);
  animation: cs2-shell-in var(--transition) ease-out;
}

@keyframes cs2-shell-in {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Top bar (glassmorphism) ───────────────────────────── */

.cs2-topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  z-index: 10;
}
.cs2-topbar__left { display: flex; align-items: center; gap: 14px; }
.cs2-topbar__back {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.cs2-topbar__back:hover {
  background: var(--bg-card);
  border-color: var(--line-strong);
  color: var(--ink);
  transform: translateX(-1px);
}
.cs2-topbar__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.cs2-topbar__sub {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.cs2-topbar__btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}
.cs2-topbar__btn:hover {
  background: var(--bg-card-2);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* ── Body layout ───────────────────────────────────────── */

.cs2-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

.cs2-sidebar {
  width: 320px;
  min-width: 280px;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 100%, transparent) 0%,
    color-mix(in srgb, var(--bg-card) 30%, transparent) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cs2-thread-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      transparent 70%),
    var(--bg);
}

/* ── Filter tabs (DMs / Comments / Stories / All) ─────── */

.cs2-filters {
  display: flex;
  gap: 4px;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
.cs2-filter {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 11.5px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.cs2-filter:hover {
  background: var(--bg-card);
  color: var(--ink-dim);
}
.cs2-filter--active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cs2-filter--active:hover {
  background: var(--ink);
  color: var(--bg);
}
.cs2-filter__count {
  font-size: 10px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.cs2-filter--active .cs2-filter__count {
  background: color-mix(in srgb, var(--bg) 25%, transparent);
}

/* ── Thread list ───────────────────────────────────────── */

.cs2-threads {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cs2-threads::-webkit-scrollbar { width: 6px; }
.cs2-threads::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.cs2-thread {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  transition: all var(--transition-fast);
  position: relative;
  font-family: var(--body);
}
.cs2-thread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--transition);
}
.cs2-thread:hover {
  background: color-mix(in srgb, var(--bg-card) 60%, transparent);
}
.cs2-thread--active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 6%, transparent),
    transparent);
}
.cs2-thread--active::before { background: var(--accent); }

.cs2-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.cs2-thread--unread .cs2-avatar {
  border-color: var(--accent);
  color: var(--ink);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, var(--bg-card-2)),
    var(--bg-card));
}
.cs2-thread--hot .cs2-avatar {
  border-color: var(--warn);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--warn) 15%, var(--bg-card-2)),
    var(--bg-card));
}

.cs2-thread__main { flex: 1; min-width: 0; }
.cs2-thread__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cs2-thread__name {
  font-size: 13.5px;
  color: var(--ink-dim);
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs2-thread--unread .cs2-thread__name {
  color: var(--ink);
  font-weight: 500;
}
.cs2-thread__time {
  font-size: 10.5px;
  color: var(--ink-mute);
  font-family: var(--mono);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.cs2-thread__preview {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cs2-thread__dir {
  opacity: 0.5;
  font-size: 10px;
  flex-shrink: 0;
}
.cs2-thread__badges {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
.cs2-badge {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
}
.cs2-badge--unread {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  animation: cs2-pulse 2s ease-in-out infinite;
}
.cs2-badge--hot {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}
.cs2-badge--comment {
  background: color-mix(in srgb, #6ba3ff 15%, transparent);
  border-color: color-mix(in srgb, #6ba3ff 35%, transparent);
  color: #8bb8ff;
}
.cs2-badge--story {
  background: color-mix(in srgb, var(--whale) 15%, transparent);
  border-color: color-mix(in srgb, var(--whale) 35%, transparent);
  color: var(--whale);
}
.cs2-badge--ig {
  background: color-mix(in srgb, #e879f9 12%, transparent);
  border-color: color-mix(in srgb, #e879f9 30%, transparent);
  color: #d8a5e8;
}
.cs2-badge--wa {
  background: color-mix(in srgb, #4dd6a0 12%, transparent);
  border-color: color-mix(in srgb, #4dd6a0 30%, transparent);
  color: var(--ok);
}

@keyframes cs2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ── Empty state ───────────────────────────────────────── */

.cs2-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}
.cs2-empty__mark {
  font-family: var(--display);
  font-size: 36px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

/* ── Customer context strip ────────────────────────────── */

.cs2-context {
  padding: 18px 24px;
  background: color-mix(in srgb, var(--bg-card) 40%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  animation: cs2-fade-in var(--transition) ease-out;
}
.cs2-context__name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.cs2-context__phone {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.cs2-context__stats {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.cs2-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cs2-stat__num {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cs2-stat__lbl {
  font-size: 9.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}
.cs2-chips { display: flex; gap: 6px; }
.cs2-chip {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-card);
}
.cs2-chip--on {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--bg-card));
}

/* ── Transcript ───────────────────────────────────────── */

.cs2-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.cs2-transcript::-webkit-scrollbar { width: 8px; }
.cs2-transcript::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.cs2-bubble-row {
  display: flex;
  animation: cs2-bubble-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs2-bubble-row--in  { justify-content: flex-start; }
.cs2-bubble-row--out { justify-content: flex-end; }

@keyframes cs2-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cs2-bubble {
  max-width: 72%;
  padding: 11px 15px;
  border-radius: 18px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  transition: transform var(--transition-fast);
}
.cs2-bubble:hover { transform: translateY(-1px); }

.cs2-bubble--in {
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 0 var(--line-soft);
}
.cs2-bubble--out {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 22%, var(--bg-card)),
    color-mix(in srgb, var(--accent) 14%, var(--bg-card)));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-bottom-right-radius: 6px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 18%, transparent),
    0 2px 12px -6px color-mix(in srgb, var(--accent) 25%, transparent);
}
.cs2-bubble--pending { opacity: 0.55; }

.cs2-bubble__time {
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 6px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-align: right;
}
.cs2-bubble__img {
  max-width: 100%;
  max-height: 280px;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
}
.cs2-bubble__text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Comment / Story bubble variants (Instagram-side, not DM) */
.cs2-bubble--comment {
  background: linear-gradient(180deg,
    color-mix(in srgb, #6ba3ff 8%, var(--bg-card-2)),
    var(--bg-card));
  border-color: color-mix(in srgb, #6ba3ff 25%, transparent);
}
.cs2-bubble--story {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--whale) 8%, var(--bg-card-2)),
    var(--bg-card));
  border-color: color-mix(in srgb, var(--whale) 25%, transparent);
}
.cs2-bubble__source {
  font-size: 9.5px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Composer ─────────────────────────────────────────── */

.cs2-composer {
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.cs2-composer__input {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 160px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  transition: all var(--transition-fast);
  box-shadow: inset 0 1px 0 var(--line-soft);
}
.cs2-composer__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
  background: var(--bg-elev);
  box-shadow:
    inset 0 1px 0 var(--line-soft),
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.cs2-composer__input::placeholder { color: var(--ink-mute); }

.cs2-send {
  background: linear-gradient(180deg, var(--accent),
    color-mix(in srgb, var(--accent) 88%, #000));
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: var(--r-lg, 6px);
  padding: 0 22px;
  height: 44px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  transition: all var(--transition-fast);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    0 4px 18px -6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cs2-send:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    0 8px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cs2-send:active { transform: translateY(0); }
.cs2-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

@keyframes cs2-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile responsive ────────────────────────────────── */

@media (max-width: 720px) {
  .cs2-sidebar { width: 100%; min-width: 0; border-right: none; }
  .cs2-thread-pane { display: none; }
  .cs2-shell--has-active .cs2-sidebar { display: none; }
  .cs2-shell--has-active .cs2-thread-pane { display: flex; }
  .cs2-context__stats { font-size: 11px; gap: 12px; }
  .cs2-context__name { font-size: 18px; }
  .cs2-bubble { max-width: 84%; }
  .cs2-topbar { padding: 10px 14px; }
}

/* ──────────────────────────────────────────────────────────
   Generative UI (2026-06-06) — InteractiveWidget renderer
   Server-driven JSON components rendered in the chat surface.
   Daniel's spec: calculator + chart + form types.
   ────────────────────────────────────────────────────────── */

.eon-widget {
  margin: 16px 0;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      var(--bg-card));
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 var(--line-soft),
    0 8px 28px -16px rgba(0,0,0,0.4);
  animation: cs2-widget-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cs2-widget-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.eon-widget__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.eon-widget__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.eon-widget__type {
  font-size: 9.5px;
  font-family: var(--mono);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-card-2);
}

/* Calculator widget */

.eon-widget__input {
  margin-bottom: 16px;
}
.eon-widget__input-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.eon-widget__label {
  font-size: 12px;
  color: var(--ink-dim);
  font-family: var(--body);
  letter-spacing: -0.005em;
}
.eon-widget__value {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.eon-widget__slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.eon-widget__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  cursor: pointer;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform var(--transition-fast);
}
.eon-widget__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.eon-widget__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  cursor: pointer;
}

.eon-widget__results {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eon-widget__result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: all var(--transition-fast);
}
.eon-widget__result-row--highlight {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}
.eon-widget__result-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-dim);
  font-family: var(--body);
}
.eon-widget__result-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.eon-widget__result-val {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.eon-widget__result-val--small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
}

/* Chart widget (simple SVG bars) */

.eon-widget__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 180px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.eon-widget__bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent),
    color-mix(in srgb, var(--accent) 60%, transparent));
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: all var(--transition);
  min-height: 4px;
  animation: cs2-bar-grow 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: bottom;
}
@keyframes cs2-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.eon-widget__bar:hover { opacity: 0.85; transform: translateY(-2px); }
.eon-widget__bar-label {
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--ink-mute);
  font-family: var(--mono);
}
.eon-widget__bar-val {
  position: absolute;
  top: -20px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
}

/* Form widget */

.eon-widget__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eon-widget__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eon-widget__text-input {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  transition: all var(--transition-fast);
}
.eon-widget__text-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.eon-widget__submit {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 22px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-top: 6px;
  transition: all var(--transition-fast);
}
.eon-widget__submit:hover { transform: translateY(-1px); }

/* ==========================================================
   Chat redesign — flat, terminal-tight (2026-06-06)
   
   Daniel's ask: "i want it flat like claude code terminal …
   with fine green lines around the text exactly like claude
   code image."
   
   Replaces the bulky gradient bubbles + box shadows with
   fine 1px accent-tinted borders, tighter padding, and a
   subtle left timeline rail. Applies to BOTH the default
   theme AND chat-style-claude. Highly-specific selectors
   override the earlier .msg.user / .msg.eon rules without
   touching them, so reverting is one file delete away.
   ========================================================== */

/* ── Terminal-tight tokens ────────────────────────────── */

:root {
  /* A muted green that reads as "terminal/CRT" without looking
     like a Linux ricer's wallpaper. Pulled from --ok so it
     auto-themes light/dark. */
  --chat-line: color-mix(in srgb, var(--ok) 35%, var(--line));
  --chat-line-soft: color-mix(in srgb, var(--ok) 18%, var(--line-soft));
  --chat-line-strong: color-mix(in srgb, var(--ok) 60%, var(--line-strong));
}

/* ── Outer flow: a vertical rail for the conversation ── */

#chat-body,
.chat-body {
  position: relative;
}

/* ── USER message: flat panel, fine border, mono "> " prefix ── */

.msg.user {
  /* Override the prior gradient + shadow + 18px radius bubble. */
  background: var(--bg) !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 6px !important;
  padding: 9px 13px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  position: relative;
  align-self: flex-end;
  max-width: 75%;
  font-family: var(--body);
  transition: border-color var(--transition-fast);
}
.msg.user:hover {
  border-color: var(--chat-line-strong) !important;
}
.msg.user .text {
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  font-family: var(--body);
}
.msg.user .text::before {
  content: "> ";
  font-family: var(--mono);
  color: color-mix(in srgb, var(--ok) 70%, var(--ink-mute));
  margin-right: 3px;
  font-size: 12.5px;
  font-weight: 500;
}

/* ── EON message: flat panel, fine accent border, EON tag pill ── */

.msg.eon {
  background: var(--bg) !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
  max-width: 100%;
  position: relative;
  font-family: var(--body);
  transition: border-color var(--transition-fast);
}
.msg.eon:hover {
  border-color: var(--chat-line-strong) !important;
}

/* The "● EON" tag — small, tight, terminal feel. */
.msg.eon .from {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--chat-line-soft);
}
.msg.eon .from-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 50%, transparent);
}
.msg.eon .from-name {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ok) 60%, var(--ink-mute));
  font-weight: 500;
}

.msg.eon .text {
  font-family: var(--body);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  white-space: normal;  /* let our paragraph/markdown logic handle wrapping */
}
.msg.eon .text p {
  margin: 7px 0;
}
.msg.eon .text p:first-child { margin-top: 0; }
.msg.eon .text p:last-child  { margin-bottom: 0; }

.msg.eon .para {
  display: block;
  margin-bottom: 0.75em;
  opacity: 0;
  transform: translateY(2px);
  animation: paraIn 240ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
.msg.eon .para:last-child { margin-bottom: 0; }

/* ── Streaming caret: thinner, sharper ────────────────── */
.msg.eon .caret {
  display: inline-block;
  width: 6px;
  height: 0.95em;
  background: var(--ok);
  margin-left: 1px;
  vertical-align: text-bottom;
  border-radius: 0;
  animation: caretBlink 1.05s steps(2) infinite;
}

/* ── Inline code: terminal green ──────────────────────── */

.msg.eon .text code:not(pre code),
.msg.user .text code:not(pre code) {
  background: color-mix(in srgb, var(--ok) 10%, var(--bg)) !important;
  border: 1px solid var(--chat-line-soft) !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  font-family: var(--mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--ok) 80%, var(--ink));
}

/* ── Code blocks: terminal output panel ───────────────── */

.msg.eon pre {
  background: color-mix(in srgb, var(--ok) 4%, var(--bg)) !important;
  border: 1px solid var(--chat-line-soft) !important;
  border-radius: 5px !important;
  padding: 11px 14px !important;
  margin: 10px 0 !important;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  color: var(--ink);
}
.msg.eon pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--ink) !important;
}

/* ── Markdown headers inside EON replies: cleaner ─────── */

.msg.eon .text h3.md-h2 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  margin: 14px 0 4px;
  color: var(--ink);
  letter-spacing: -0.012em;
  border-bottom: 1px solid var(--chat-line-soft);
  padding-bottom: 4px;
}
.msg.eon .text h4.md-h3 {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 500;
  margin: 11px 0 3px;
  color: var(--ink);
  letter-spacing: -0.008em;
}

/* ── Markdown tables: green-thin border, tight cells ──── */

.msg.eon .md-table-wrap {
  margin: 9px 0 !important;
  border: 1px solid var(--chat-line-soft) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--ok) 2%, var(--bg)) !important;
}
.msg.eon .md-table {
  font-size: 12px !important;
}
.msg.eon .md-table thead {
  background: color-mix(in srgb, var(--ok) 6%, var(--bg)) !important;
}
.msg.eon .md-table th {
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--chat-line-soft) !important;
  font-size: 10px !important;
  color: color-mix(in srgb, var(--ok) 60%, var(--ink-mute)) !important;
  font-family: var(--mono);
}
.msg.eon .md-table td {
  padding: 6px 10px !important;
  border-bottom: 1px solid var(--chat-line-soft) !important;
}

/* ── User-side msg actions (copy button): position so the
   border doesn't get crowded ──────────────────────────── */

.msg.user .msg-actions {
  margin-top: 4px;
}

/* ── Empty chat state: keep the wordmark + subtitle but trim
   the visual weight so it feels terminal-quiet ──────────── */

.chat-empty-state {
  align-items: flex-start !important;
  padding: 32px 4px !important;
  color: var(--ink-mute);
}
.chat-empty-mark {
  font-family: var(--mono) !important;
  color: var(--chat-line-strong) !important;
  font-size: 28px !important;
  margin-bottom: 12px !important;
}
.chat-empty-title {
  font-family: var(--display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em;
}
.chat-empty-sub {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--ink-mute) !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
}

/* ── Composer: flat, fine border, focus glow in ok ──────── */

.composer,
.chat-composer,
#composer,
.chat-composer-wrap {
  border-color: var(--chat-line) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}

/* ── chat-style-claude mode: inherit everything above + a
   small extra ("● EON" header prefix already exists) ───── */

body.chat-style-claude .msg.user,
body.chat-style-claude .msg.eon {
  /* Re-affirm border + padding so the claude-mode-specific
     earlier rules don't sneak gradients back in. */
  background: var(--bg) !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body.chat-style-claude .msg.user {
  padding: 9px 13px !important;
}
body.chat-style-claude .msg.eon {
  padding: 11px 14px !important;
}
body.chat-style-claude .msg.eon pre {
  background: color-mix(in srgb, var(--ok) 4%, var(--bg)) !important;
  border-color: var(--chat-line-soft) !important;
}

/* ── Inter-turn separator: thin dashed accent line ───── */

body.chat-style-claude .msg + .msg::before {
  background: transparent !important;
  border-top: 1px dashed var(--chat-line-soft);
  margin: 12px 0 !important;
  opacity: 1 !important;
}

/* ── Mobile tightening ─────────────────────────────── */

@media (max-width: 720px) {
  .msg.user, .msg.eon { padding: 9px 11px !important; }
  .msg.user { max-width: 88%; }
  .msg.user .text, .msg.eon .text { font-size: 13px; }
}

/* ==========================================================
   MONEY PAGE — redesign 2026-06-07
   High-end fintech surface: KPI card grid, animated SVG charts,
   grouped bank accounts. Tasteful enter animations honour
   prefers-reduced-motion. CSS transforms/opacity only — no
   layout thrash, 60fps.
   ========================================================== */

/* ── Enter animations ─────────────────────────────── */

@keyframes moneyRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes moneyDraw   { to { stroke-dashoffset: 0; } }
@keyframes moneyFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes moneyGrowX  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes moneyGrowY  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stagger-rise {
  animation: moneyRise 460ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Line/area path draw-in. The path's own length is set in JS-free CSS
   via a large dash that we slide off. 600 covers our small viewBoxes. */
.chart-draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: moneyDraw 900ms cubic-bezier(0.4, 0, 0.1, 1) forwards;
  animation-delay: 120ms;
}
.chart-fade { animation: moneyFadeIn 700ms ease 600ms both; }
.chart-grow {
  transform-origin: left center;
  animation: moneyGrowX 600ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms + 120ms);
}
.chart-grow-v {
  transform-origin: center var(--origin, bottom);
  animation: moneyGrowY 520ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms + 120ms);
}

/* ── KPI card grid ────────────────────────────────── */

.money-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.money-kpi {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-card) 92%, var(--accent) 0%),
    var(--bg-card));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--transition), transform var(--transition);
}
.money-kpi:hover { border-color: var(--line); transform: translateY(-1px); }
.money-kpi-hero { padding: 0; }
.money-kpi-hero .hero {
  margin: 0;
  border: none;
  background: transparent;
}
.money-kpi-stats { display: contents; }   /* let the 2 stats join the grid */
.money-kpi-stats .stat {
  margin: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
}

.money-kpi-mini { padding: 16px 18px; }
.money-kpi-mini .mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.money-kpi-mini .mini-num {
  font-size: 24px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.money-kpi-mini .mini-sub {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
}

@media (min-width: 720px) {
  .money-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
  .money-kpi-hero { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .money-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  /* PR MONEY-COCKPIT: hero takes one slot at 4-up so row 1 reads
     Net profit | Cash | Days-cash vs floor | Next obligation —
     the "am I safe" band. (Was span 2, which pushed the safety
     tiles into row 2.) */
  .money-kpi-hero { grid-column: span 1; grid-row: span 1; }
}

/* ── PR MONEY-COCKPIT: insights card grid ─────────────────
   #money-insights-grid has carried class .data-card-grid since
   v3.0p32 but the class existed in NO stylesheet — cards stacked
   full-width (~1,600px of vertical scroll). Breakpoint behaviour
   aligns with the KPI/chart grids above. */
.data-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

/* ── PR MONEY-COCKPIT: alerts-first digest strip ──────────
   Home's .mh-digest markup pattern, restyled with the global
   tokens (the Home rules are scoped under .mk-home3 and use its
   a3-* palette). */
.money-digest {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.money-digest .mh-digest-head {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.money-digest .mh-digest-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  cursor: pointer;
}
.money-digest .mh-digest-item:last-child { border-bottom: none; padding-bottom: 2px; }
.money-digest .mh-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.money-digest .mh-chip-danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.money-digest .mh-chip-watch {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.money-digest .mh-digest-line { flex: 1; min-width: 0; }
.money-digest .mh-digest-arrow { color: var(--ink-mute); flex-shrink: 0; }
.money-digest .mh-digest-item:hover .mh-digest-line { color: var(--accent); }

/* ── Charts ───────────────────────────────────────── */

.money-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
@media (min-width: 720px)  { .money-charts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .money-charts { grid-template-columns: repeat(3, 1fr); } }

.money-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  transition: border-color var(--transition);
}
.money-chart-card:hover { border-color: var(--line); }
.money-chart-card.chart-skel { gap: 10px; }
.money-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.money-chart-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.money-chart-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.money-chart-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.money-chart-svg {
  width: 100%;
  height: 120px;
  color: var(--ink-mute);
  display: block;
  overflow: visible;
}
.money-chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-dim);
  flex-wrap: wrap;
}
.money-chart-legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.money-chart-empty {
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  padding: 24px 8px;
}

/* Expense breakdown stacked bar */
.ebar-track {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--bg-card-2);
}
.ebar-seg { height: 100%; }
.ebar-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.ebar-key { color: var(--ink-dim); }
.ebar-key .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 7px; vertical-align: middle;
}
.ebar-val { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Daily cashflow bars */
.cfbar-track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 110px;
  padding: 0 2px;
}
.cfbar-mid {
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--ink-mute) 40%, transparent);
}
.cfbar-col { position: relative; flex: 1 1 0; min-width: 0; }
.cfbar {
  position: absolute;
  left: 12%; right: 12%;
  border-radius: 3px;
  display: block;
}
.cfbar-up   { background: var(--ok);     --origin: bottom; transform-origin: center bottom; }
.cfbar-down { background: var(--danger); --origin: top;    transform-origin: center top; }

/* ── Capital OS PR-4: debt-wall mini-chart + band pill ─── */

.capital-card .row-label { margin-bottom: 10px; }
.capwall-track {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 0 2px;
}
.capwall-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.capwall-barbox {
  position: relative;
  width: 100%;
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.capwall-bar {
  display: block;
  width: 60%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform-origin: center bottom;
}
.capwall-bar.capwall-flag { background: var(--danger); }
.capwall-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.capwall-val {
  font-size: 10px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.capital-band-pill {
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 8px;
  vertical-align: middle;
}

/* ── Grouped bank accounts ────────────────────────── */

.cash-group {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.cash-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-card-2) 60%, transparent);
}
.cash-group-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cash-group-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.cash-group-note {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0;
  text-transform: none;
}
.cash-group-sub {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cash-group-rows { padding: 2px 2px; }

/* prefers-reduced-motion: kill all enter animations + count-ups. */
@media (prefers-reduced-motion: reduce) {
  .stagger-rise,
  .chart-draw, .chart-fade, .chart-grow, .chart-grow-v,
  .ebar-seg, .cfbar, .capwall-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT SIDEBAR — command-rail redesign (2026-06-07)
   Dark, animated, same design language as the Ads dashboard: lime accent,
   mono meta, staggered reveal, a slow living gradient. Scoped under
   .cc-rail so it overrides the base .chat-history-drawer rules and touches
   nothing else. Honours prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
.drawer-backdrop.cc-rail-bd {
  background: rgba(var(--flc-bgrgb,6, 6, 8), 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chat-history-drawer.cc-rail {
  --cc-lime:#C8FF4D; --cc-mint:#56E39F; --cc-tx:#F4F4F2;
  --cc-mut:#9A9AA2; --cc-dim:#5E5E66;
  --cc-line:rgba(255,255,255,.07); --cc-line-hi:rgba(255,255,255,.14);
  --cc-tile:#17171b; --cc-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  width: min(87vw, 344px);
  background: linear-gradient(180deg, var(--flc-tile,#141417) 0%, var(--flc-bg-soft,#0d0d0f) 100%);
  border-right: 1px solid var(--cc-line-hi);
  color: var(--cc-tx);
  box-shadow: 6px 0 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
/* living gradient — a slow lime/mint glow drifting behind the rail */
.chat-history-drawer.cc-rail::before {
  content: ""; position: absolute; left: -60%; right: -60%; top: -42%; height: 82%;
  background:
    radial-gradient(60% 60% at 28% 18%, rgba(var(--flc-limergb,200,255,77),.11), transparent 70%),
    radial-gradient(52% 52% at 82% 8%,  rgba(var(--flc-mintrgb,86,227,159),.09), transparent 72%);
  filter: blur(10px); pointer-events: none; z-index: 0;
  animation: cc-drift 16s ease-in-out infinite alternate;
}
@keyframes cc-drift {
  0%   { transform: translate3d(-6%, -4%, 0) rotate(0deg); opacity: .85; }
  100% { transform: translate3d(8%, 7%, 0)  rotate(8deg);  opacity: 1; }
}
.chat-history-drawer.cc-rail > * { position: relative; z-index: 1; }

.cc-rail .drawer-header { border-bottom: 1px solid var(--cc-line); padding: 18px 18px 12px; }
.cc-rail .drawer-title { color: var(--cc-tx); font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 9px; }
.cc-rail .drawer-title::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-lime);
  box-shadow: 0 0 0 0 rgba(var(--flc-limergb,200,255,77),.5); animation: cc-pulse 2.4s infinite;
}
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--flc-limergb,200,255,77),.45); } 70% { box-shadow: 0 0 0 7px rgba(var(--flc-limergb,200,255,77),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--flc-limergb,200,255,77),0); }
}
.cc-rail #drawer-close-btn { color: var(--cc-mut); }
.cc-rail #drawer-close-btn:hover { color: var(--cc-tx); background: rgba(var(--flc-wrgb,255,255,255),.06); }

.cc-rail .drawer-new-btn {
  margin: 14px 16px; padding: 12px 16px; border-radius: 14px;
  background: var(--cc-lime); color: var(--flc-on-accent,#0A0A0C); border: none; font-weight: 600;
  box-shadow: 0 0 0 0 rgba(var(--flc-limergb,200,255,77),.4); transition: box-shadow .2s ease, transform .08s ease;
}
.cc-rail .drawer-new-btn:hover { background: var(--cc-lime); color: var(--flc-on-accent,#0A0A0C); box-shadow: 0 0 22px rgba(var(--flc-limergb,200,255,77),.45); }
.cc-rail .drawer-new-btn:active { transform: scale(.98); }
.cc-rail .drawer-new-btn svg { stroke: var(--flc-bg,#0A0A0C); }

.cc-rail .drawer-group-header { font-family: var(--cc-mono); color: var(--cc-mint); font-size: 10px; letter-spacing: .12em; opacity: .85; padding: 16px 16px 6px; }
.cc-rail .drawer-empty { color: var(--cc-mut); }

.cc-rail .conv-item {
  border-radius: var(--r-lg, 6px); padding: 11px 12px; margin: 2px 8px;
  border: 1px solid transparent; background: rgba(var(--flc-wrgb,255,255,255),.015);
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
  opacity: 0; animation: cc-reveal .42s cubic-bezier(.2,.7,.2,1) forwards;
}
.cc-rail .conv-item:nth-child(1){animation-delay:.02s} .cc-rail .conv-item:nth-child(2){animation-delay:.05s}
.cc-rail .conv-item:nth-child(3){animation-delay:.08s} .cc-rail .conv-item:nth-child(4){animation-delay:.11s}
.cc-rail .conv-item:nth-child(5){animation-delay:.14s} .cc-rail .conv-item:nth-child(6){animation-delay:.17s}
.cc-rail .conv-item:nth-child(7){animation-delay:.20s} .cc-rail .conv-item:nth-child(8){animation-delay:.23s}
.cc-rail .conv-item:nth-child(9){animation-delay:.26s} .cc-rail .conv-item:nth-child(10){animation-delay:.29s}
.cc-rail .conv-item:nth-child(11){animation-delay:.32s} .cc-rail .conv-item:nth-child(12){animation-delay:.35s}
.cc-rail .conv-item:nth-child(n+13){animation-delay:.38s}
@keyframes cc-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-rail .conv-item:hover { background: var(--cc-tile); border-color: var(--cc-line-hi); transform: translateY(-1px); }
.cc-rail .conv-item.active { background: var(--cc-tile); box-shadow: none; border: 1px solid transparent; border-left: 2px solid var(--cc-lime); padding-left: 10px; }
.cc-rail .conv-item-title { color: var(--cc-tx); font-weight: 500; }
.cc-rail .conv-item.active .conv-item-title { color: var(--cc-tx); }
.cc-rail .conv-item-meta { font-family: var(--cc-mono); color: var(--cc-dim); font-size: 10.5px; }
.cc-rail .conv-item-del { color: var(--cc-mut); }
.cc-rail .conv-item-del:hover { background: rgba(var(--flc-wrgb,255,255,255),.06); color: var(--flc-red,#ff6b6b); }

@media (prefers-reduced-motion: reduce) {
  .chat-history-drawer.cc-rail::before { animation: none; }
  .cc-rail .drawer-title::before { animation: none; }
  .cc-rail .conv-item { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE — animated, fluid, alive (2026-06-07)
   Beauty pass only (no data touched): a subtly-drifting ambient gradient
   behind the dashboard, a living hero glow + count-up number, staggered
   card reveals, chart + sparkline draw-in, micro-hover lift. Scoped to
   #home-content. Honours prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
#home-content { position: relative; z-index: 0; }
/* drifting ambient gradient behind everything on Home */
#home-content::before {
  content: ""; position: absolute; inset: -60px -24px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 36% at 12% 2%,  rgba(var(--flc-bluergb,86,132,255),.13), transparent 62%),
    radial-gradient(38% 40% at 92% 7%,  rgba(var(--flc-violetrgb,140,98,255),.11), transparent 66%),
    radial-gradient(55% 46% at 50% 102%, rgba(var(--flc-mintrgb,77,214,160),.09), transparent 70%);
  background-size: 200% 200%;
  animation: homeBgDrift 28s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes homeBgDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  100% { background-position: 26% 14%, 74% 24%, 40% 86%; }
}
[data-theme="light"] #home-content::before {
  background:
    radial-gradient(40% 36% at 12% 2%,  rgba(var(--flc-bluergb,86,132,255),.09), transparent 62%),
    radial-gradient(38% 40% at 92% 7%,  rgba(var(--flc-violetrgb,140,98,255),.07), transparent 66%),
    radial-gradient(55% 46% at 50% 102%, rgba(var(--flc-mintrgb,77,214,160),.06), transparent 70%);
  background-size: 200% 200%;
}

@keyframes homeRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* hero — rise in, then a slow living glow on the existing radial */
#home-content .hero { animation: homeRise .6s cubic-bezier(.2,.7,.2,1) both; }
#home-content .hero::before { animation: heroGlow 16s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes heroGlow {
  0%   { transform: translate3d(0,0,0) scale(1);     opacity: .85; }
  100% { transform: translate3d(-9%,7%,0) scale(1.18); opacity: 1; }
}
/* the count-up number gets a soft entrance */
#home-content .hero-num-val { display: inline-block; animation: homeRise .7s cubic-bezier(.2,.7,.2,1) both; }

/* chart + target — draw/rise in just after the hero */
#home-content #chart-slot .card,
#home-content #target-slot > * { animation: homeRise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: .08s; }

/* tiles row — staggered cascade */
#tiles-slot > * { animation: homeRise .55s cubic-bezier(.2,.7,.2,1) both; }
#tiles-slot > *:nth-child(1){animation-delay:.04s} #tiles-slot > *:nth-child(2){animation-delay:.10s}
#tiles-slot > *:nth-child(3){animation-delay:.16s} #tiles-slot > *:nth-child(4){animation-delay:.22s}
#tiles-slot > *:nth-child(5){animation-delay:.28s} #tiles-slot > *:nth-child(6){animation-delay:.34s}
#tiles-slot > *:nth-child(7){animation-delay:.40s} #tiles-slot > *:nth-child(n+8){animation-delay:.46s}

/* micro-hover lift on every home card */
#home-content .card { transition: transform .16s ease, border-color .16s ease, box-shadow .22s ease; }
#home-content .card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 10px 32px rgba(0,0,0,.20); }

/* expense sparkline — draw the line on */
#home-content .exp-sparkline svg polyline,
#home-content .exp-sparkline svg path {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: homeSparkDraw 1.5s cubic-bezier(.3,.7,.3,1) .25s forwards;
}
@keyframes homeSparkDraw { to { stroke-dashoffset: 0; } }

/* date chips — springy press */
#home-content .date-chips .chip { transition: transform .12s ease, background .16s ease, color .16s ease; }
#home-content .date-chips .chip:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  #home-content::before, #home-content .hero, #home-content .hero::before,
  #home-content .hero-num-val, #home-content #chart-slot .card,
  #home-content #target-slot > *, #tiles-slot > * { animation: none !important; }
  #home-content .exp-sparkline svg polyline,
  #home-content .exp-sparkline svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/*
   ADS DASHBOARD REDESIGN v3 — 2026-06-07
   Dark, decision-first. Leads with the blended cost/conv + the
   Meta-vs-TikTok efficiency gap, then channel health by colour.
   EVERYTHING scoped under .mk-ads3 so the other 13 marketing views
   are untouched. Colour discipline: --a3-lime is the ONLY bright accent
   (live / scale / primary CTA); --a3-mint = efficient/winning channel;
   --a3-amber = expensive/caution. Channel tiles are never rainbowed.
   ═══════════════════════════════════════════════════════════════════ */
.mk-ads3 {
  --a3-bg:#0A0A0C; --a3-bg-soft:#0F0F12;
  --a3-tile:#151518; --a3-tile-hi:#1B1B20;
  --a3-line:rgba(255,255,255,.07); --a3-line-hi:rgba(255,255,255,.14);
  --a3-tx:#F4F4F2; --a3-mut:#9A9AA2; --a3-dim:#5E5E66;
  --a3-lime:#C8FF4D; --a3-mint:#56E39F; --a3-amber:#F2A24C;
  --a3-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --a3-disp:'Archivo',-apple-system,system-ui,sans-serif;
  max-width:1040px; margin:0 auto; color:var(--a3-tx);
  font-family:var(--a3-disp); font-weight:400; line-height:1.4;
}
.mk-ads3 *, .mk-ads3 *::before, .mk-ads3 *::after { box-sizing:border-box; }
.mk-ads3 .a3-mono { font-family:var(--a3-mono); font-feature-settings:"tnum" 1; }

/* staggered reveal — each block sets --a3-i for its delay */
.mk-ads3 .a3-reveal {
  opacity:0; transform:translateY(14px);
  animation:a3-reveal .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--a3-i, 0) * 55ms);
}
@keyframes a3-reveal { to { opacity:1; transform:none; } }

/* ── Top bar ─────────────────────────────────────────────────────── */
.mk-ads3 .a3-topbar {
  display:flex; align-items:center; gap:12px;
  padding:4px 2px 18px;
}
.mk-ads3 .a3-brand { font-weight:600; letter-spacing:-.02em; font-size:17px; }
.mk-ads3 .a3-brand .a3-sub { color:var(--a3-mut); font-weight:400; margin-left:6px; }
.mk-ads3 .a3-topbar-spacer { flex:1; }
.mk-ads3 .a3-live {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--a3-lime); border:1px solid var(--a3-line-hi);
  border-radius:999px; padding:5px 11px; background:var(--flc-lime,#C8FF4D)0a;
}
.mk-ads3 .a3-live-dot {
  width:7px; height:7px; border-radius:50%; background:var(--a3-lime);
  box-shadow:0 0 0 0 var(--flc-lime,#C8FF4D)80; animation:a3-pulse 2s infinite;
}
@keyframes a3-pulse {
  0%{box-shadow:0 0 0 0 var(--flc-lime,#C8FF4D)66;} 70%{box-shadow:0 0 0 7px var(--flc-lime,#C8FF4D)00;}
  100%{box-shadow:0 0 0 0 var(--flc-lime,#C8FF4D)00;}
}
.mk-ads3 .a3-window {
  font-family:inherit; font-size:12.5px; color:var(--a3-mut);
  background:var(--a3-tile); border:1px solid var(--a3-line);
  border-radius:10px; padding:7px 10px; cursor:pointer;
}

/* ── Generic tile ────────────────────────────────────────────────── */
.mk-ads3 .a3-tile {
  background:var(--a3-tile); border:1px solid var(--a3-line);
  border-radius:14px; padding:18px; position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.mk-ads3 .a3-tile-lift:hover { transform:translateY(-3px); border-color:var(--a3-line-hi); }
.mk-ads3 .a3-label {
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--a3-mut); margin-bottom:10px;
}
.mk-ads3 .a3-ctx { font-size:12.5px; color:var(--a3-mut); }
.mk-ads3 .a3-stack { display:flex; flex-direction:column; gap:14px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.mk-ads3 .a3-hero { border-radius:18px; padding:26px 24px; }
.mk-ads3 .a3-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,#ffffff0e 48%,transparent 66%);
  transform:translateX(-100%); animation:a3-sheen 6s ease-in-out infinite;
}
@keyframes a3-sheen { 0%,100%{transform:translateX(-100%);} 55%,70%{transform:translateX(120%);} }
.mk-ads3 .a3-hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.mk-ads3 .a3-hero-fig {
  font-family:var(--a3-mono); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(40px,9vw,64px); line-height:1;
}
.mk-ads3 .a3-hero-side { text-align:right; }
.mk-ads3 .a3-hero-side .a3-mono { font-size:20px; font-weight:500; display:block; }
.mk-ads3 .a3-hero-side .a3-ctx { margin-top:2px; }

/* ── Efficiency gap ──────────────────────────────────────────────── */
.mk-ads3 .a3-gap-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.mk-ads3 .a3-gap-side { flex:1; }
.mk-ads3 .a3-gap-side.r { text-align:right; }
.mk-ads3 .a3-gap-cpa { font-family:var(--a3-mono); font-size:24px; font-weight:500; }
.mk-ads3 .a3-gap-name { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }
.mk-ads3 .a3-gap-amber .a3-gap-cpa, .mk-ads3 .a3-gap-amber .a3-gap-name { color:var(--a3-amber); }
.mk-ads3 .a3-gap-mint  .a3-gap-cpa, .mk-ads3 .a3-gap-mint  .a3-gap-name { color:var(--a3-mint); }
.mk-ads3 .a3-gap-mult {
  font-family:var(--a3-mono); font-size:34px; font-weight:600; color:var(--a3-lime);
  padding:0 14px; white-space:nowrap;
}
.mk-ads3 .a3-gap-cap { text-align:center; margin-top:10px; }

/* ── Channel grid ────────────────────────────────────────────────── */
.mk-ads3 .a3-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mk-ads3 .a3-chan { cursor:pointer; }
.mk-ads3 .a3-chan-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mk-ads3 .a3-chan-dot { width:9px; height:9px; border-radius:50%; background:var(--a3-dim); flex-shrink:0; }
.mk-ads3 .a3-chan-name { font-weight:600; letter-spacing:-.01em; }
.mk-ads3 .a3-chan-count {
  font-size:10.5px; color:var(--a3-mut); background:#ffffff0d;
  border-radius:999px; padding:2px 8px; margin-left:auto; font-family:var(--a3-mono);
}
.mk-ads3 .a3-chan-figs { display:flex; gap:18px; margin-bottom:8px; }
.mk-ads3 .a3-chan-fig .a3-mono { font-size:18px; font-weight:500; display:block; }
.mk-ads3 .a3-chan-fig .a3-ctx { font-size:11px; }
.mk-ads3 .a3-chan-foot { font-size:12px; color:var(--a3-mut); display:flex; justify-content:space-between; gap:8px; }
.mk-ads3 .a3-chan-wow.up { color:var(--a3-mint); }
.mk-ads3 .a3-chan-wow.down { color:var(--a3-amber); }
.mk-ads3 .a3-chan-creative { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
/* health accents — left border + dot only, never the whole tile */
.mk-ads3 .a3-chan-efficient { border-left:2px solid var(--a3-mint); }
.mk-ads3 .a3-chan-efficient .a3-chan-dot { background:var(--a3-mint); }
.mk-ads3 .a3-chan-expensive { border-left:2px solid var(--a3-amber); }
.mk-ads3 .a3-chan-expensive .a3-chan-dot { background:var(--a3-amber); }
.mk-ads3 .a3-chan-dormant, .mk-ads3 .a3-chan-disabled { opacity:.5; cursor:default; }
.mk-ads3 .a3-chan-dormant:hover, .mk-ads3 .a3-chan-disabled:hover { transform:none; border-color:var(--a3-line); }

/* ── Attribution bar ─────────────────────────────────────────────── */
.mk-ads3 .a3-attr-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:#ffffff08; margin:6px 0 12px; }
.mk-ads3 .a3-attr-seg { height:100%; transform:scaleX(0); transform-origin:left; animation:a3-wipe .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--a3-i,0)*120ms + 200ms); }
@keyframes a3-wipe { to { transform:scaleX(1); } }
.mk-ads3 .a3-attr-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--a3-mut); }
.mk-ads3 .a3-attr-key { display:inline-flex; align-items:center; gap:6px; }
.mk-ads3 .a3-attr-swatch { width:9px; height:9px; border-radius:2px; }

/* ── Decision rail ───────────────────────────────────────────────── */
.mk-ads3 .a3-rail { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mk-ads3 .a3-dtile { cursor:pointer; }
.mk-ads3 .a3-dtile-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-weight:600; }
.mk-ads3 .a3-dtile-n { font-family:var(--a3-mono); font-size:30px; font-weight:500; line-height:1; }
.mk-ads3 .a3-dtile-hint { font-size:12px; color:var(--a3-mut); margin-top:6px; }
.mk-ads3 .a3-dtile-clean { border-color:var(--flc-mint,#56E39F)40; }
.mk-ads3 .a3-dtile-clean .a3-dtile-n, .mk-ads3 .a3-dtile-clean .a3-dtile-check { color:var(--a3-mint); }
.mk-ads3 .a3-dtile-scale .a3-dtile-n { color:var(--a3-lime); }

/* ── Detail sections reuse existing mk-* tiles inside the dark shell ── */
.mk-ads3 .a3-section-title { font-size:14px; font-weight:600; margin:26px 0 4px; }
.mk-ads3 .a3-section-sub { font-size:12.5px; color:var(--a3-mut); margin:0 0 10px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.mk-ads3 .a3-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:22px; }
.mk-ads3 .a3-cta {
  font-family:inherit; font-weight:600; font-size:14px; color:var(--flc-on-accent,#0A0A0C);
  background:var(--a3-lime); border:none; border-radius:14px;
  padding:13px 20px; cursor:pointer; transition:box-shadow .18s ease, transform .08s ease;
}
.mk-ads3 .a3-cta:hover { box-shadow:0 0 24px var(--flc-lime,#C8FF4D)55; }
.mk-ads3 .a3-cta:active { transform:scale(.97); }
.mk-ads3 .a3-empty { color:var(--a3-mut); font-size:13px; padding:14px; text-align:center; border:1px dashed var(--a3-line); border-radius:12px; }

/* ── Drill-down ──────────────────────────────────────────────────── */
.mk-ads3 .a3-crumb { display:flex; align-items:center; gap:10px; padding:2px 2px 16px; font-size:13px; }
.mk-ads3 .a3-back { background:none; border:none; color:var(--a3-mut); cursor:pointer; font:inherit; font-size:13px; padding:6px 8px; border-radius:8px; }
.mk-ads3 .a3-back:hover { color:var(--a3-tx); background:#ffffff0a; }
.mk-ads3 .a3-banner { border-radius:14px; padding:14px 16px; font-size:13.5px; border-left:3px solid var(--a3-amber); background:var(--flc-amber,#F2A24C)12; color:var(--a3-tx); }
.mk-ads3 .a3-sortrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:18px 0 10px; }
.mk-ads3 .a3-sortpill { font:inherit; font-size:12px; color:var(--a3-mut); background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:999px; padding:6px 12px; cursor:pointer; }
.mk-ads3 .a3-sortpill.active { color:var(--flc-on-accent,#0A0A0C); background:var(--a3-lime); border-color:var(--a3-lime); }
.mk-ads3 .a3-sortcount { margin-left:auto; font-size:12px; color:var(--a3-mut); }
.mk-ads3 .a3-tablewrap { overflow-x:auto; border:1px solid var(--a3-line); border-radius:14px; }
.mk-ads3 table.a3-table { width:100%; min-width:560px; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.mk-ads3 .a3-table th { text-align:left; font-weight:500; color:var(--a3-mut); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:11px 12px; border-bottom:1px solid var(--a3-line); }
.mk-ads3 .a3-table td { padding:12px; border-bottom:1px solid var(--a3-line); vertical-align:top; }
.mk-ads3 .a3-table tr { cursor:pointer; }
.mk-ads3 .a3-table tr:hover td { background:#ffffff06; }
.mk-ads3 .a3-table tr.sel td { background:var(--flc-lime,#C8FF4D)10; }
.mk-ads3 .a3-table .a3-mono { font-size:12.5px; }
.mk-ads3 .a3-col-ad { width:38%; }
.mk-ads3 .a3-adname { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-ads3 .a3-adsub { font-size:11px; color:var(--a3-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-ads3 .a3-good { color:var(--a3-mint); }
.mk-ads3 .a3-bad { color:var(--a3-amber); }
.mk-ads3 .a3-flag { font-size:10.5px; font-family:var(--a3-mono); border-radius:6px; padding:2px 7px; text-transform:uppercase; letter-spacing:.04em; }
.mk-ads3 .a3-flag-scale { color:var(--flc-on-accent,#0A0A0C); background:var(--a3-lime); }
.mk-ads3 .a3-flag-cut { color:var(--a3-amber); background:var(--flc-amber,#F2A24C)1f; }
.mk-ads3 .a3-flag-watch, .mk-ads3 .a3-flag-healthy { color:var(--a3-mut); background:#ffffff0d; }
.mk-ads3 .a3-flag-none { color:var(--a3-dim); }
.mk-ads3 .a3-flag-red { color:#ff6b6b; background:#ff6b6b1f; }
.mk-ads3 .a3-dd-layout { display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px; }
@media (min-width:860px){ .mk-ads3 .a3-dd-layout { grid-template-columns:1.6fr 1fr; align-items:start; } }
.mk-ads3 .a3-panel { background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:14px; padding:18px; }
.mk-ads3 .a3-panel-empty { color:var(--a3-mut); font-size:13px; }
.mk-ads3 .a3-delta { font-family:var(--a3-mono); border-radius:6px; padding:2px 7px; font-size:11.5px; }
.mk-ads3 .a3-panel-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.mk-ads3 .a3-pbtn { font:inherit; font-size:13px; border-radius:10px; padding:9px 14px; cursor:pointer; border:1px solid var(--a3-line); background:var(--a3-tile-hi); color:var(--a3-tx); }
.mk-ads3 .a3-pbtn-primary { background:var(--a3-lime); color:var(--flc-on-accent,#0A0A0C); border-color:var(--a3-lime); font-weight:600; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:640px){
  .mk-ads3 .a3-grid { grid-template-columns:1fr; }
  .mk-ads3 .a3-rail { grid-template-columns:1fr; }
  .mk-ads3 .a3-hero-fig { font-size:clamp(36px,12vw,52px); }
}

/* ── Reduced motion: render final state instantly ────────────────── */
@media (prefers-reduced-motion: reduce){
  .mk-ads3 .a3-reveal { animation:none; opacity:1; transform:none; }
  .mk-ads3 .a3-hero::after { animation:none; }
  .mk-ads3 .a3-live-dot { animation:none; }
  .mk-ads3 .a3-attr-seg { animation:none; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — design-flow redesign (2026-06-09)
   Brings the Customers-tab / Ads (.mk-ads3) decision-first language to the
   main dashboard: mono figures, lime/mint/amber discipline, living gradients,
   staggered reveals, animated revenue-target gauge, premium signal tiles.
   #home-content is wrapped in `.mk-ads3 .mk-home3` so it inherits the a3
   tokens; everything new is namespaced `.mh-*` so the global .hero/.data-card/
   .pill rules the Money page shares are NOT touched. Honours reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* the wrapper picks up a3 tokens (--a3-lime / --a3-mint / --a3-tile …) +
   the same 1040px centred column as the Customers tab. */
.mk-home3 { padding-bottom:24px; }

/* entrance: hero → chart → target rise in sequence (tiles use the existing
   #tiles-slot cascade below). */
.mk-home3 .mh-hero,
.mk-home3 .mh-chart,
.mk-home3 .mh-target { animation:homeRise .62s cubic-bezier(.2,.7,.2,1) both; }
.mk-home3 .mh-chart  { animation-delay:.07s; }
.mk-home3 .mh-target { animation-delay:.13s; }

/* ── Top bar (brand + live pulse) ─────────────────────────────────── */
.mk-home3 .mh-topbar { display:flex; align-items:center; gap:12px; padding:2px 2px 14px; }
.mk-home3 .mh-topbar .a3-brand { font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--a3-tx); }
.mk-home3 .mh-topbar .a3-brand .a3-sub { color:var(--a3-mut); font-weight:400; margin-left:7px; }
.mk-home3 .mh-topbar-spacer { flex:1; }

/* ── Period segmented control (restyle of .date-chips inside home) ── */
.mk-home3 .date-chips { gap:7px; margin:0 0 16px; padding:4px; background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:13px; display:inline-flex; flex-wrap:wrap; }
.mk-home3 .date-chips .chip {
  background:transparent; border:1px solid transparent; color:var(--a3-mut);
  font-size:12.5px; font-weight:500; padding:7px 14px; border-radius:9px;
  transition:color .16s ease, background .16s ease, transform .12s ease;
}
.mk-home3 .date-chips .chip:hover { color:var(--a3-tx); background:#ffffff08; }
.mk-home3 .date-chips .chip:active { transform:scale(.95); }
.mk-home3 .date-chips .chip-active { background:var(--a3-lime); color:var(--flc-on-accent,#0A0A0C); font-weight:600; }
.mk-home3 .date-chips .chip-active:hover { background:var(--a3-lime); color:var(--flc-on-accent,#0A0A0C); }

/* ── HERO (Marketing-efficiency) ──────────────────────────────────── */
.mk-home3 .mh-hero {
  position:relative; overflow:hidden; border-radius:20px; padding:26px 24px;
  background:linear-gradient(157deg,var(--a3-tile-hi),var(--a3-tile) 64%);
  border:1px solid var(--a3-line);
}
/* slow living glow blob */
.mk-home3 .mh-hero::before {
  content:""; position:absolute; width:380px; height:380px; right:-110px; top:-150px;
  background:radial-gradient(circle,rgba(var(--flc-mintrgb,86,227,159),.16),transparent 62%);
  pointer-events:none; will-change:transform,opacity;
  animation:mhHeroGlow 15s ease-in-out infinite alternate;
}
@keyframes mhHeroGlow { 0%{transform:translate3d(0,0,0) scale(1);opacity:.85;} 100%{transform:translate3d(-7%,9%,0) scale(1.2);opacity:1;} }
/* diagonal sheen sweep */
.mk-home3 .mh-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,#ffffff0d 49%,transparent 64%);
  transform:translateX(-100%); animation:a3-sheen 7s ease-in-out infinite;
}
.mk-home3 .mh-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; }
.mk-home3 .mh-hero-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--a3-mut); }
.mk-home3 .mh-hero-fig { font-family:var(--a3-mono); font-weight:500; letter-spacing:-.02em; font-size:clamp(44px,10vw,68px); line-height:1; color:var(--a3-tx); margin:10px 0 4px; display:flex; align-items:baseline; gap:6px; position:relative; }
.mk-home3 .mh-hero-fig .unit { font-size:.42em; color:var(--a3-mut); font-weight:400; }
.mk-home3 .mh-hero-stats { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:14px; position:relative; }
.mk-home3 .mh-hg { display:flex; flex-direction:column; gap:2px; }
.mk-home3 .mh-hg-v { font-family:var(--a3-mono); font-size:16px; font-weight:500; color:var(--a3-tx); display:flex; align-items:center; gap:7px; }
.mk-home3 .mh-hg-l { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--a3-mut); }
.mk-home3 .mh-hero-note { position:relative; margin-top:14px; font-size:12.5px; color:var(--a3-tx); background:var(--flc-amber,#F2A24C)12; border-left:3px solid var(--a3-amber); border-radius:10px; padding:9px 12px; line-height:1.45; }

/* status pill + delta pills (home-scoped, a3 palette) */
.mk-home3 .mh-pill { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:5px 11px; border:1px solid var(--a3-line-hi); }
.mk-home3 .mh-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.mk-home3 .mh-pill-ok    { color:var(--a3-mint);  background:var(--flc-mint,#56E39F)12; }
.mk-home3 .mh-pill-scale { color:var(--a3-lime);  background:var(--flc-lime,#C8FF4D)12; }
.mk-home3 .mh-pill-warn  { color:var(--a3-amber); background:var(--flc-amber,#F2A24C)14; }
.mk-home3 .mh-pill-danger{ color:var(--flc-red,#ff6b6b);         background:var(--flc-red,#ff6b6b)14; }
.mk-home3 .mh-pill-danger::before { animation:blink 1.5s ease-in-out infinite; }
.mk-home3 .mh-delta { font-family:var(--a3-mono); font-size:.5em; font-weight:500; padding:2px 7px; border-radius:7px; letter-spacing:0; }
.mk-home3 .mh-hg-v .mh-delta { font-size:11px; }
.mk-home3 .mh-delta-good { color:var(--a3-mint);  background:var(--flc-mint,#56E39F)18; }
.mk-home3 .mh-delta-bad  { color:var(--a3-amber); background:var(--flc-amber,#F2A24C)1c; }
.mk-home3 .mh-delta-flat { color:var(--a3-dim);   background:#ffffff0a; }

/* ── DECISION CHIPS + TILE READS (HOME-DECISION-FIRST 2026-06-11) ──
   Compact status chips for tile verdicts ([SCALE]/[MONITOR]/[KILL],
   pace ahead/behind) — same colour discipline as the marketing a3
   flags: mint=good/scale, amber=watch, red=kill/danger, dim=muted. */
.mk-home3 .mh-chip { display:inline-flex; align-items:center; font-family:var(--a3-mono); font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; border-radius:6px; padding:2px 7px; white-space:nowrap; }
.mk-home3 .mh-chip-good   { color:var(--flc-on-accent,#0A0A0C); background:var(--a3-mint); }
.mk-home3 .mh-chip-watch  { color:var(--a3-amber); background:var(--flc-amber,#F2A24C)1f; }
.mk-home3 .mh-chip-danger { color:var(--flc-red,#ff6b6b); background:var(--flc-red,#ff6b6b)1a; }
.mk-home3 .mh-chip-muted  { color:var(--a3-dim); background:#ffffff0d; }
.mk-home3 .mh-read { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--a3-mut); line-height:1.45; margin:2px 0 12px; }
.mk-home3 .mh-read .mh-chip { flex-shrink:0; margin-top:1px; }
.mk-home3 .expand-row .val .mh-chip { margin-right:4px; }

/* ── "SINCE YOU LAST LOOKED" DIGEST STRIP ─────────────────────────── */
.mk-home3 .mh-digest { background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:16px; padding:14px 16px; margin:0 0 14px; animation:homeRise .62s cubic-bezier(.2,.7,.2,1) both; }
.mk-home3 .mh-digest-head { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--a3-mut); margin-bottom:8px; }
.mk-home3 .mh-digest-item { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--a3-line); font-size:13px; color:var(--a3-tx); line-height:1.45; }
.mk-home3 .mh-digest-item:last-child { border-bottom:none; padding-bottom:2px; }
.mk-home3 .mh-digest-item .mh-chip { flex-shrink:0; margin-top:2px; }
.mk-home3 .mh-digest-line { flex:1; min-width:0; }
.mk-home3 .mh-digest-arrow { color:var(--a3-dim); flex-shrink:0; }
.mk-home3 .mh-digest-item.is-link { cursor:pointer; }
.mk-home3 .mh-digest-item.is-link:hover .mh-digest-line { color:var(--a3-lime); }
.mk-home3 .mh-digest-item.is-link:hover .mh-digest-arrow { color:var(--a3-lime); }

/* ── CHART (Sales & Spend) ────────────────────────────────────────── */
.mk-home3 .mh-chart { background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:16px; padding:18px 18px 14px; margin-top:14px; }
.mk-home3 .mh-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.mk-home3 .mh-chart-title { font-size:13.5px; font-weight:600; color:var(--a3-tx); }
.mk-home3 .mh-chart-title .sub { color:var(--a3-mut); font-weight:400; margin-left:6px; font-size:12px; }
.mk-home3 .mh-chart-figs { display:flex; gap:18px; }
.mk-home3 .mh-chart-fig { text-align:right; }
.mk-home3 .mh-chart-fig .v { font-family:var(--a3-mono); font-size:15px; font-weight:500; display:block; line-height:1.1; }
.mk-home3 .mh-chart-fig .l { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--a3-mut); display:inline-flex; align-items:center; gap:5px; }
.mk-home3 .mh-chart-fig .dot { width:8px; height:8px; border-radius:2px; }
.mk-home3 .mh-chart-fig .v.rev { color:var(--a3-mint); }
.mk-home3 .mh-chart-fig .v.spend { color:var(--a3-amber); }
.mk-home3 .mh-chart-canvas { position:relative; height:230px; margin-top:4px; }

/* ── REVENUE-TARGET GAUGE ─────────────────────────────────────────── */
.mk-home3 .mh-target {
  margin-top:14px; background:var(--a3-tile); border:1px solid var(--a3-line);
  border-radius:16px; padding:18px; position:relative; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .26s ease;
}
.mk-home3 .mh-target:hover { transform:translateY(-3px); border-color:var(--a3-line-hi); box-shadow:0 14px 40px rgba(0,0,0,.30); }
.mk-home3 .mh-target:hover .mh-gauge-fill { box-shadow:0 0 26px var(--mh-glow,var(--flc-lime,#C8FF4D)77); }
.mk-home3 .mh-target-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mk-home3 .mh-target-figs { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.mk-home3 .mh-target-actual { font-family:var(--a3-mono); font-size:30px; font-weight:600; color:var(--a3-tx); line-height:1; }
.mk-home3 .mh-target-of { font-size:13px; color:var(--a3-mut); }
.mk-home3 .mh-gauge { height:14px; border-radius:999px; background:rgba(var(--flc-wrgb,255,255,255),.06); position:relative; overflow:visible; margin:6px 0 12px; }
.mk-home3 .mh-gauge-track { position:absolute; inset:0; border-radius:999px; overflow:hidden; }
.mk-home3 .mh-gauge-fill {
  height:100%; width:0; border-radius:999px; position:relative;
  background:linear-gradient(90deg,var(--a3-mint),var(--a3-lime));
  box-shadow:0 0 16px var(--mh-glow,var(--flc-lime,#C8FF4D)55);
  animation:mhGaugeFill 1.15s cubic-bezier(.2,.7,.2,1) .2s forwards;
  transition:box-shadow .26s ease;
}
.mk-home3 .mh-gauge-fill.behind { background:linear-gradient(90deg,var(--flc-amber,#F2A24C),var(--flc-red,#ff6b6b)); --mh-glow:var(--flc-red,#ff6b6b)66; }
@keyframes mhGaugeFill { to { width:calc(var(--mh-pct,0) * 1%); } }
.mk-home3 .mh-gauge-fill::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(var(--flc-wrgb,255,255,255),.5),transparent);
  transform:translateX(-120%); animation:mhGaugeShine 2.8s ease-in-out 1.35s infinite;
}
@keyframes mhGaugeShine { 0%{transform:translateX(-120%);} 55%,100%{transform:translateX(260%);} }
/* expected-pace marker — a notch above the bar */
.mk-home3 .mh-gauge-pace { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--a3-tx); border-radius:2px; opacity:0; animation:mhPaceIn .45s ease 1.05s forwards; }
.mk-home3 .mh-gauge-pace::after { content:""; position:absolute; top:-4px; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--a3-tx); }
@keyframes mhPaceIn { to { opacity:.72; } }
.mk-home3 .mh-target-sub { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--a3-mut); }
.mk-home3 .mh-target-sub b { color:var(--a3-tx); font-family:var(--a3-mono); font-weight:500; }
/* 2026-07-23 target-tile redesign: the actionable numbers live in a right
   rail (the card's right half used to be dead space); live-today + updated
   share one slim footer. */
.mk-home3 .mh-tgt-rail { flex:0 0 auto; min-width:210px; max-width:300px; margin-left:auto;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding-left:20px; border-left:1px solid rgba(var(--flc-wrgb,255,255,255),.07); }
.mk-home3 .mh-tgt-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mk-home3 .mh-tgt-stat-l { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--a3-dim); }
.mk-home3 .mh-tgt-stat-v { font-family:var(--a3-mono); font-size:14px; font-weight:600; color:var(--a3-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-home3 .mh-tgt-stat-u { font-family:var(--a3-sans,inherit); font-size:10.5px; font-weight:400; color:var(--a3-mut); margin-left:4px; }
.mk-home3 .mh-target-foot { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:12px; padding-top:10px; border-top:1px solid rgba(var(--flc-wrgb,255,255,255),.06);
  font-size:10.5px; color:var(--a3-dim); }
.mk-home3 .mh-target-foot b { color:var(--a3-tx); font-weight:600; }
.mk-home3 .mh-target-asof { font-size:10px; color:var(--a3-dim); white-space:nowrap; }
@media (max-width:700px) {
  .mk-home3 .mh-target-hero { flex-wrap:wrap; }
  .mk-home3 .mh-tgt-rail { flex:1 1 100%; max-width:none; margin-left:0; padding-left:0; border-left:0;
    border-top:1px solid rgba(var(--flc-wrgb,255,255,255),.07); padding-top:12px;
    flex-direction:row; flex-wrap:wrap; gap:14px 22px; }
  .mk-home3 .mh-target-foot { flex-wrap:wrap; }
}
.mk-home3 .mh-tgt-good { color:var(--a3-mint); font-weight:500; }
.mk-home3 .mh-tgt-bad  { color:var(--a3-amber); font-weight:500; }

/* ── Radial target tracker (2026-07-02 redesign) ───────────────────
   Animated arc that draws on load with a pace tick. Sits left of the
   figures in a two-column hero. Replaces the flat linear gauge. */
.mk-home3 .mh-target-hero { display:flex; align-items:center; gap:18px; margin:4px 0 6px; }
.mk-home3 .mh-target-hero-figs { flex:1 1 auto; min-width:0; }
.mk-home3 .mh-target-hero .mh-target-figs { margin-bottom:8px; }
.mk-home3 .mh-target-sub-col { flex-direction:column; align-items:flex-start; gap:2px; }
.mk-home3 .mh-ring { position:relative; width:120px; height:120px; flex:none; }
.mk-home3 .mh-ring-svg { width:120px; height:120px; transform:rotate(-90deg); overflow:visible; }
.mk-home3 .mh-ring-track { fill:none; stroke:rgba(var(--flc-wrgb,255,255,255),.07); stroke-width:9; }
.mk-home3 .mh-ring-prog {
  fill:none; stroke-width:9; stroke-linecap:round;
  stroke:url(#mhRingGrad, var(--a3-lime));
  stroke:var(--a3-lime);
  filter:drop-shadow(0 0 7px var(--mh-glow,var(--flc-lime,#C8FF4D)66));
  animation:mhRingDraw 1.2s cubic-bezier(.2,.7,.2,1) .12s both;
}
.mk-home3 .mh-ring.onpace .mh-ring-prog { stroke:var(--a3-mint); --mh-glow:var(--flc-mint,#56E39F)66; }
.mk-home3 .mh-ring.ahead  .mh-ring-prog { stroke:var(--a3-lime); --mh-glow:var(--flc-lime,#C8FF4D)77; }
.mk-home3 .mh-ring.behind .mh-ring-prog { stroke:var(--flc-amber,#F2A24C); --mh-glow:var(--flc-red,#ff6b6b)66; }
@keyframes mhRingDraw { from { stroke-dashoffset:var(--c); } to { stroke-dashoffset:var(--dash); } }
/* pace tick: where the month SHOULD be today (rotates with the -90deg svg) */
.mk-home3 .mh-ring-tick { fill:var(--a3-tx); stroke:var(--a3-bg,#0a0a0c); stroke-width:2; opacity:0; animation:mhTickIn .4s ease 1.05s forwards; }
@keyframes mhTickIn { to { opacity:.92; } }
.mk-home3 .mh-ring-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.mk-home3 .mh-ring-pct { font-family:var(--a3-mono); font-size:30px; font-weight:600; color:var(--a3-tx); line-height:1; letter-spacing:-.01em; }
.mk-home3 .mh-ring-pct span { font-size:15px; color:var(--a3-mut); margin-left:1px; }
.mk-home3 .mh-ring-cap { white-space:nowrap; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--a3-dim); margin-top:3px; }
.mk-home3 .mh-ring-legend { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--a3-dim); margin-top:7px; }
.mk-home3 .mh-ring-legend-dot { width:7px; height:7px; border-radius:50%; background:var(--a3-tx); opacity:.9; flex:none; }
@media (prefers-reduced-motion: reduce) {
  .mk-home3 .mh-ring-prog { animation:none; stroke-dashoffset:var(--dash); }
  .mk-home3 .mh-ring-tick { animation:none; opacity:.92; }
}
/* WS-B (2026-07-26): tick-driven updates land still. The 90s live tick
   used to replay the card's slide-up + 1.2s ring redraw + pace-tick fade
   while the operator read. Same final-state rules as reduced-motion. */
#home-content #target-slot.tick-still > *,
#target-slot.tick-still .mh-target { animation:none; }
.mk-home3 #target-slot.tick-still .mh-ring-prog { animation:none; stroke-dashoffset:var(--dash); }
.mk-home3 #target-slot.tick-still .mh-ring-tick { animation:none; opacity:.92; }
/* live freshness stamp (WS-B): the tick wrote into #live-stamp for weeks
   but no template ever mounted it — it lives in the topbars now. */
.live-stamp { font-family:var(--mono, ui-monospace); font-size:10px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.live-stamp:empty { display:none; }

/* ── WS-C (2026-07-26): chat cockpit ─────────────────────────────── */
/* Pinned approval banner — a blocking decision is never off-screen. */
/* Hotfix (operator screenshot, 26 Jul 20:14): display:flex below beats
   the UA's [hidden]{display:none} (author origin wins), so the EMPTY
   banner painted as a bare accent-bordered line above the composer.
   Author-origin [hidden] must be restated whenever display is forced. */
.approval-banner[hidden] { display: none; }
.approval-banner {
  display:flex; align-items:center; gap:8px;
  margin:0 auto 6px; max-width:760px;
  padding:8px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--accent); background:var(--bg-card);
  font-size:13px; color:var(--ink);
}
.approval-banner b { font-weight:600; }
.approval-banner .approval-go { margin-left:auto; font-size:11.5px; color:var(--ink-mute); }
@keyframes approvalPulse { 50% { opacity:.35; } }
.approval-banner .approval-dot {
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  flex-shrink:0; animation: approvalPulse 1.6s ease-in-out infinite;
}
/* Chat-tab dot — approvals findable from any view. */
.nav-item { position:relative; }
.nav-item .nav-dot {
  position:absolute; top:8px; right:calc(50% - 16px);
  width:7px; height:7px; border-radius:50%;
  background:var(--danger); pointer-events:none;
}
/* Markdown lists + code fences (WS-C: `- item` used to render as
   literal dashes; fences garbled through the inline-code regex). */
.msg .md-list { margin:6px 0 6px 20px; padding:0; }
.msg .md-list li { margin:3px 0; line-height:1.5; }
.msg .md-codeblock { margin:8px 0; max-width:100%; }
.msg .md-codeblock pre {
  overflow-x:auto; margin:0; padding:10px 12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:10px;
  font-family:var(--mono, ui-monospace); font-size:12.5px; line-height:1.5;
}
/* Sent-attachment echo in the user bubble. */
.msg .msg-atts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.msg .msg-att-thumb {
  width:84px; height:84px; object-fit:cover;
  border-radius:10px; border:1px solid var(--line);
}
.msg .msg-att-chip {
  border:1px solid var(--line); border-radius:99px;
  padding:3px 10px; font-size:11.5px; color:var(--ink-mute);
}

/* Chat image viewing (2026-09-07): every image the chat renders opens in
   the house lightbox; plural images grid up. Lightbox additions live HERE
   (not cs.css) on purpose — cs.css sections belong to the CS floors and
   the design-verdict gate; app.css already loads on every view. */
.msg img.md-img, .msg .msg-att-thumb { cursor: zoom-in; }
img.md-img.md-img--dead {
  cursor: default;
  min-width: 140px; min-height: 44px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px dashed var(--line);
  color: var(--ink-mute);
  font-size: 12px;
}
.msg .text .msg-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 6px 0; max-width: 480px; position: relative;
}
.msg .text .msg-gallery img.md-img {
  width: 100%; height: 150px; object-fit: cover;
  margin: 0; max-width: none; max-height: none;
  border-radius: var(--r-md, 4px);
}
.msg .text .msg-gallery--2 img.md-img { height: 190px; }
.msg .text .msg-gallery img.md-img:nth-child(n+5) { display: none; }
.msg .text .msg-gallery[data-more]::after {
  content: '+' attr(data-more);
  position: absolute; right: 0; bottom: 0;
  width: calc(50% - 3px); height: 150px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 22px; font-weight: 600;
  border-radius: var(--r-md, 4px);
  pointer-events: none;   /* the tile beneath still opens the gallery */
}
/* Gallery navigation inside the lightbox (group mode only). */
.csw-lightbox .csw-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  font-size: 30px; line-height: 1; cursor: pointer; padding: 0;
}
.csw-lightbox .csw-lightbox__nav--prev { left: 10px; }
.csw-lightbox .csw-lightbox__nav--next { right: 10px; }
.csw-lightbox .csw-lightbox__count {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: #fff; font-size: 12.5px;
  background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 99px;
}

/* WS-D (2026-07-26): ads-tile action buttons — compact ghost variant.
   Every ask routes to chat via the [data-ask] delegate; the agent acts
   through the permission ladder (standing law: nothing autonomous). */
.adsb-act { font-size: 11px; padding: 3px 10px; border-radius: var(--r-md, 4px); }
.adsb-act-kill { border-color: var(--danger); color: var(--danger); }
.adsb-act-kill:hover { border-color: var(--danger); }

/* ── WS-F (2026-07-26): it feels installed ──────────────────────── */
/* Desktop ≥1024px: the phone bottom bar becomes a left rail and
   content stops stretching edge-to-edge. The scroller stays full
   width — asymmetric padding centers a 1080px column, so scrollbars
   and swipe zones keep their native feel. */
@media (min-width: 1024px) {
  .nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 88px;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: center;
    gap: 10px;
    padding: 0;
    border-top: none;
    border-right: 1px solid var(--line-soft);
  }
  main.view, .chat-wrap { margin-left: 88px; }
  .app-bar { margin-left: 88px; }
  main.view {
    padding-left: max(24px, calc((100% - 1080px) / 2));
    padding-right: max(24px, calc((100% - 1080px) / 2));
  }
  /* full-screen chat hides the rail — reclaim its gutter */
  body.chat-full .chat-wrap { margin-left: 0; }
}
/* Shell handbook overlay */
.shell-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  background: var(--bg);
  padding: 20px 20px 80px;
}
.shell-guide-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
}

/* ── SIGNALS section + tiles ──────────────────────────────────────── */
.mk-home3 .mh-section { font-size:14px; font-weight:600; color:var(--a3-tx); margin:26px 2px 12px; display:flex; align-items:center; gap:9px; }
.mk-home3 .mh-section::after { content:""; flex:1; height:1px; background:var(--a3-line); }
.mk-home3 #tiles-slot { display:grid; grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); gap:12px; align-items:start; }
.mk-home3 #tiles-slot .mh-section { grid-column:1/-1; }
/* lazy-appended full-width blocks (CS team perf, Open-CS-Inbox button, EON ad
   moves) are NOT a3 tiles — let them span the whole row instead of squeezing
   into one column. The loading skeleton (.mh-skel) stays a grid cell. */
.mk-home3 #tiles-slot > *:not(.mh-tile):not(.mh-skel) { grid-column:1/-1; }
.mk-home3 #tiles-slot > .card { margin-top:0; border-radius:14px; }
.mk-home3 .mh-tile {
  background:var(--a3-tile); border:1px solid var(--a3-line); border-radius:14px;
  padding:18px; position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.mk-home3 .mh-tile:hover { transform:translateY(-3px); border-color:var(--a3-line-hi); box-shadow:0 12px 34px rgba(0,0,0,.26); }
.mk-home3 .mh-tile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mk-home3 .mh-tile-title { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--a3-mut); }
.mk-home3 .mh-tile-meta { font-size:10.5px; color:var(--a3-dim); font-family:var(--a3-mono); }
.mk-home3 .mh-tile-name { font-weight:500; font-size:14px; color:var(--a3-tx); margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-home3 .mh-fig { font-family:var(--a3-mono); font-size:30px; font-weight:500; color:var(--a3-tx); line-height:1; margin:0 0 12px; }
.mk-home3 .mh-tile-link { color:inherit; text-decoration:none; border-bottom:1px dashed var(--a3-dim); }
.mk-home3 .mh-tile-link:hover { border-bottom-color:var(--a3-lime); color:var(--a3-lime); }
.mk-home3 .mh-foot-link { display:inline-block; margin-top:10px; font-size:11.5px; color:var(--a3-mut); text-decoration:none; }
.mk-home3 .mh-foot-link:hover { color:var(--a3-lime); }
.mk-home3 .mh-note { font-size:11.5px; color:var(--a3-mut); margin-top:8px; line-height:1.45; }

/* mono stat grid */
.mk-home3 .mh-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:2px 0 12px; }
.mk-home3 .mh-stat-grid.cols3 { grid-template-columns:repeat(3,1fr); }
.mk-home3 .mh-stat-num { font-family:var(--a3-mono); font-size:21px; font-weight:500; color:var(--a3-tx); line-height:1; }
.mk-home3 .mh-stat-num .u { font-size:.6em; color:var(--a3-mut); }
.mk-home3 .mh-stat-num.warn { color:var(--a3-amber); }
.mk-home3 .mh-stat-lbl { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--a3-mut); margin-top:6px; }

/* key/value rows — the Customers-tab table look */
.mk-home3 .mh-kv { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--a3-line); font-size:13px; }
.mk-home3 .mh-kv:last-child { border-bottom:none; padding-bottom:0; }
.mk-home3 .mh-kv .k { color:var(--a3-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-home3 .mh-kv .v { font-family:var(--a3-mono); color:var(--a3-tx); font-weight:500; white-space:nowrap; }
.mk-home3 .mh-trend-up   { color:var(--a3-mint); }
.mk-home3 .mh-trend-down { color:var(--a3-amber); }
.mk-home3 .mh-trend-flat { color:var(--a3-dim); }

/* tile foot — holds the Ask EON / nav action(s) */
.mk-home3 .mh-foot { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }

/* Ask EON pill (home-scoped; binding still keys off [data-ask]) */
.mk-home3 .mh-ask { font:inherit; font-size:11.5px; color:var(--a3-mut); background:transparent; border:1px solid var(--a3-line); border-radius:999px; padding:5px 12px; cursor:pointer; transition:color .16s ease, border-color .16s ease, box-shadow .16s ease; white-space:nowrap; }
.mk-home3 .mh-ask:hover { color:var(--a3-lime); border-color:var(--a3-lime); box-shadow:0 0 14px var(--flc-lime,#C8FF4D)2e; }
.mk-home3 .mh-ask:active { transform:scale(.96); }
.mk-home3 .mh-ask-go { color:var(--flc-on-accent,#0A0A0C); background:var(--a3-lime); border-color:var(--a3-lime); font-weight:600; }
.mk-home3 .mh-ask-go:hover { color:var(--flc-on-accent,#0A0A0C); box-shadow:0 0 18px var(--flc-lime,#C8FF4D)55; }

/* expand toggle + rows (home override of the global .expand-toggle) */
.mk-home3 .expand-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:12px; padding:9px 12px; background:#ffffff06; border:1px solid var(--a3-line); border-radius:10px; color:var(--a3-mut); font:inherit; font-size:12px; cursor:pointer; transition:color .16s ease, border-color .16s ease; }
.mk-home3 .expand-toggle:hover { color:var(--a3-tx); border-color:var(--a3-line-hi); }
.mk-home3 .expand-toggle .arrow { transition:transform .2s ease; font-size:9px; }
.mk-home3 .expand-toggle.open .arrow { transform:rotate(180deg); }
.mk-home3 .expand-list { margin-top:6px; }
.mk-home3 .expand-list[hidden] { display:none; }
.mk-home3 .expand-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px; border-top:1px solid var(--a3-line); font-size:12.5px; }
.mk-home3 .expand-row .name { color:var(--a3-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-home3 .expand-row .val { color:var(--a3-mut); font-family:var(--a3-mono); white-space:nowrap; }

/* a3 skeleton for the loading pass */
.mk-home3 .mh-skel { border-radius:16px; background:linear-gradient(100deg,#ffffff08 30%,#ffffff14 50%,#ffffff08 70%); background-size:220% 100%; animation:mhSkel 1.4s ease-in-out infinite; }
@keyframes mhSkel { 0%{background-position:140% 0;} 100%{background-position:-40% 0;} }

/* ── UI-wave viz primitives (2026-06-11) — rings, h-bars, splits, deltas ── */
.mk-home3 .mh-dchip { display:inline-flex; align-items:center; gap:3px; font-family:var(--a3-mono); font-size:10px; font-weight:500; padding:1px 6px; border-radius:6px; vertical-align:1px; }
.mk-home3 .mh-dchip-good { color:var(--a3-mint);  background:var(--flc-mint,#56E39F)16; }
.mk-home3 .mh-dchip-bad  { color:var(--a3-amber); background:var(--flc-amber,#F2A24C)1a; }
.mk-home3 .mh-dchip-flat { color:var(--a3-dim);   background:#ffffff0a; }

/* Signals-tile mini ring — renamed from .mh-ring (2026-07-23): this 60px
   width rule sat later in the cascade and clobbered the 120px target ring's
   layout box, overlapping the hero figures onto the arc. */
.mk-home3 .mh-customer-bars{display:grid;gap:14px;margin:14px 0}
.mk-home3 .mh-customer-bar>div:first-child{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--a3-mut)}
.mk-home3 .mh-customer-bar strong{font:500 13px var(--a3-mono);color:var(--a3-tx);font-variant-numeric:tabular-nums}
.mk-home3 .mh-customer-track{height:6px;border-radius:3px;background:var(--a3-line,#ffffff16);overflow:hidden;margin-top:7px}
.mk-home3 .mh-customer-track>i{display:block;height:100%;background:var(--a3-mint,#d4ff3a)}
.mk-home3 .mh-customer-bar:last-of-type .mh-customer-track>i{opacity:.65}
.mk-home3 .mh-chart-note{font-size:12px;line-height:1.6;color:var(--a3-mut);margin:10px 0 0}
.mk-home3 .mh-sring-row { display:flex; align-items:center; gap:18px; margin:4px 0 14px; }
.mk-home3 .mh-sring { position:relative; width:60px; flex-shrink:0; text-align:center; }
.mk-home3 .mh-sring-fg { transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.mk-home3 .mh-sring-c { position:absolute; top:0; left:0; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.mk-home3 .mh-sring-v { font-family:var(--a3-mono); font-size:13px; font-weight:600; color:var(--a3-tx); }
.mk-home3 .mh-sring-l { font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--a3-mut); margin-top:4px; }
.mk-home3 .mh-sring-side { min-width:0; }

.mk-home3 .mh-hbars { display:flex; flex-direction:column; gap:9px; margin:2px 0 12px; }
.mk-home3 .mh-hbar-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
.mk-home3 .mh-hbar-k { font-size:12px; color:var(--a3-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mk-home3 .mh-hbar.lead .mh-hbar-k { color:var(--a3-tx); font-weight:500; }
.mk-home3 .mh-hbar-v { font-family:var(--a3-mono); font-size:12px; font-weight:500; color:var(--a3-tx); white-space:nowrap; flex-shrink:0; }
.mk-home3 .mh-hbar-v .dim { color:var(--a3-dim); font-weight:400; }
.mk-home3 .mh-hbar-track { height:6px; border-radius:999px; background:rgba(var(--flc-wrgb,255,255,255),.06); overflow:hidden; }
.mk-home3 .mh-hbar-track i { display:block; height:100%; border-radius:999px; background:#ffffff2e; transform-origin:left; animation:mhBarGrow .7s cubic-bezier(.2,.7,.2,1) both; }
.mk-home3 .mh-hbar.lead .mh-hbar-track i { background:linear-gradient(90deg,var(--a3-mint),var(--a3-lime)); box-shadow:0 0 10px var(--flc-mint,#56E39F)44; }
@keyframes mhBarGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.mk-home3 .mh-split { margin:2px 0 12px; }
.mk-home3 .mh-split-bar { display:flex; height:8px; border-radius:999px; overflow:hidden; background:rgba(var(--flc-wrgb,255,255,255),.05); }
.mk-home3 .mh-split-bar .a { background:var(--flc-blue,#6EA8FE); }
.mk-home3 .mh-split-bar .b { background:var(--a3-mint); }
.mk-home3 .mh-split-legend { display:flex; gap:16px; margin-top:8px; font-size:11px; color:var(--a3-mut); flex-wrap:wrap; }
.mk-home3 .mh-split-legend b { font-family:var(--a3-mono); color:var(--a3-tx); font-weight:500; }
.mk-home3 .mh-split-legend .sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.mk-home3 .mh-split-legend .sw.a { background:var(--flc-blue,#6EA8FE); }
.mk-home3 .mh-split-legend .sw.b { background:var(--a3-mint); }

@media (prefers-reduced-motion: reduce){
  .mk-home3 .mh-hbar-track i { animation:none; }
  .mk-home3 .mh-sring-fg { transition:none; }
}

/* light-theme safety: keep naked text readable if the shell is light
   (tiles stay self-darkened; only page-level text needs a darker ink) */
[data-theme="light"] .mk-home3 .mh-topbar .a3-brand,
[data-theme="light"] .mk-home3 .mh-section { color:var(--flc-on-accent,#0A0A0C); }
[data-theme="light"] .mk-home3 .mh-section::after { background:rgba(0,0,0,.10); }

@media (max-width:640px){
  .mk-home3 #tiles-slot { grid-template-columns:1fr; }
  .mk-home3 .mh-hero-fig { font-size:clamp(40px,13vw,56px); }
  .mk-home3 .mh-chart-figs { gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  .mk-home3 .mh-hero, .mk-home3 .mh-chart, .mk-home3 .mh-target,
  .mk-home3 .mh-hero::before, .mk-home3 .mh-hero::after,
  .mk-home3 .mh-gauge-fill, .mk-home3 .mh-gauge-fill::after,
  .mk-home3 .mh-gauge-pace, .mk-home3 .mh-skel { animation:none !important; }
  .mk-home3 .mh-gauge-fill { width:calc(var(--mh-pct,0) * 1%); }
  .mk-home3 .mh-gauge-pace { opacity:.72; }
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT — Gemini-Pro-grade redesign (2026-06-09)
   Full-bleed, alive: a wavy futuristic-black (light = soft offwhite)
   animated field, borderless floating chrome, the EON spark mark, a
   contextual "thinking" ticker, and a focused centred composer. Scoped to
   .eon-chat (the chat <main>) + the global .eon-logo mark. Keeps the text
   box + the fullscreen toggle Daniel asked to preserve; honours reduced
   motion. Nothing here leaks to other views.
   ═══════════════════════════════════════════════════════════════════ */

/* ── EON mark ─────────────────────────────────────────────────────── */
.eon-logo { display:inline-block; vertical-align:middle; flex-shrink:0; }
.eon-logo-spark { transform-box:fill-box; transform-origin:center; }
/* EON-MARK steps (operator 2026-07-06: "the bars extending horizontally
   1 after the other like moving steps"): every animated mark speaks one
   motion language — each bar grows from the left in sequence, top →
   accent → bottom, holds the full E, falls back. No rotation, no pulse. */
.eon-logo-spin rect {
  transform-box: fill-box; transform-origin: left center;
  animation: eonSteps 1.6s ease-in-out infinite;
  animation-fill-mode: backwards;
}
.eon-logo-spin rect:nth-of-type(2) { animation-delay: .22s; }
.eon-logo-spin rect:nth-of-type(3) { animation-delay: .44s; }
@keyframes eonSteps {
  0%       { transform: scaleX(.18); }
  34%, 72% { transform: scaleX(1); }
  100%     { transform: scaleX(.18); }
}

/* ── Animated field behind the whole chat ─────────────────────────── */
.eon-chat { position:relative; z-index:1; }
.eon-chat::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 48% at 16% 6%,  rgba(var(--flc-bluergb,86,132,255),.17), transparent 60%),
    radial-gradient(54% 44% at 88% 13%, rgba(var(--flc-violetrgb,140,98,255),.15), transparent 62%),
    radial-gradient(72% 56% at 50% 110%, rgba(var(--flc-mintrgb,86,227,159),.11), transparent 66%),
    var(--flc-bg,#070709);
  background-size:185% 185%, 185% 185%, 185% 185%, auto;
  animation:eonBgDrift 26s ease-in-out infinite alternate;
  will-change:background-position;
}
/* second, slower wave layer for living depth */
.eon-chat::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(40% 30% at 70% 40%, rgba(var(--flc-bluergb,122,166,255),.10), transparent 70%);
  background-size:160% 160%;
  animation:eonWave 19s ease-in-out infinite alternate;
}
@keyframes eonBgDrift { 0%{background-position:0% 0%,100% 0%,50% 100%,0 0;} 100%{background-position:32% 14%,70% 24%,42% 84%,0 0;} }
@keyframes eonWave { 0%{background-position:0% 50%;} 100%{background-position:100% 60%;} }
[data-theme="light"] .eon-chat::before {
  background:
    radial-gradient(58% 48% at 16% 6%,  rgba(var(--flc-bluergb,86,132,255),.11), transparent 60%),
    radial-gradient(54% 44% at 88% 13%, rgba(var(--flc-violetrgb,140,98,255),.09), transparent 62%),
    radial-gradient(72% 56% at 50% 110%, rgba(var(--flc-mintrgb,86,227,159),.07), transparent 66%),
    #FAFAF7;
  background-size:185% 185%, 185% 185%, 185% 185%, auto;
}
[data-theme="light"] .eon-chat::after { opacity:.4; }

/* ── Floating, borderless toolbar (header) ────────────────────────── */
.eon-chat .chat-toolbar { background:transparent; border-bottom:none; padding:10px 12px 4px; }
.eon-chat .chat-toolbar .icon-btn-sm {
  width:34px; height:34px; border-radius:11px; color:var(--ink-dim);
  background:rgba(var(--flc-wrgb,255,255,255),.045); border:1px solid rgba(var(--flc-wrgb,255,255,255),.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.eon-chat .chat-toolbar .icon-btn-sm:hover { color:var(--flc-on-accent,#0A0A0C); background:var(--flc-lime,#C8FF4D); border-color:var(--flc-lime,#C8FF4D); box-shadow:0 0 16px var(--flc-lime,#C8FF4D)44; }
[data-theme="light"] .eon-chat .chat-toolbar .icon-btn-sm { background:rgba(0,0,0,.035); border-color:rgba(0,0,0,.07); color:var(--ink-dim); }
/* centre brand: the EON wordmark replaces the old "New chat" text */
.eon-chat .cc-brand { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.eon-chat .cc-brand-name { font-weight:600; letter-spacing:.14em; font-size:13px; color:var(--ink-dim); text-transform:uppercase; }
.eon-chat .cc-brand-title { font-weight:500; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }

/* ── Empty state — the brand lives in the top wordmark; the greeting
   alone speaks (operator 2026-07-06: the gradient tagline + fake cursor
   were the "excess greeting" — removed). ── */
.eon-chat .eon-hero { flex:1; justify-content:center; padding:0 24px 11vh; gap:0; }
@keyframes eonHeroRise { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ── Contextual "thinking" ticker ─────────────────────────────────── */
.eon-chat .cc-think { display:inline-flex; align-items:center; gap:10px; padding:6px 2px; align-self:flex-start; }
.eon-chat .cc-think-words { position:relative; height:19px; line-height:19px; overflow:hidden; display:inline-block; }
.eon-chat .cc-think-track { display:flex; flex-direction:column; animation:ccRoll 6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes ccRoll {
  0%,28%  { transform:translateY(0); }
  33%,61% { transform:translateY(-19px); }
  66%,94% { transform:translateY(-38px); }
  100%    { transform:translateY(-57px); }
}
.eon-chat .cc-think-track .w {
  height:19px; line-height:19px; font-size:13.5px; font-weight:500; white-space:nowrap;
  background:linear-gradient(90deg,var(--ink-mute) 0%,var(--ink) 50%,var(--ink-mute) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:ccShimmer 2.2s linear infinite;
}
@keyframes ccShimmer { 0%{background-position:120% 0;} 100%{background-position:-120% 0;} }

/* ── EON message header uses the mark ─────────────────────────────── */
.eon-chat .msg.eon .from { display:flex; align-items:center; gap:7px; }
.eon-chat .msg.eon .from-name { color:var(--ink-dim); }

/* ── Focused, centred, tightened composer ─────────────────────────── */
.eon-chat .composer-shell { padding:4px 14px calc(8px + var(--keyboard-inset,0px)); background:linear-gradient(180deg, transparent 0%, rgba(var(--flc-bgrgb,7,7,9),.0) 0%); }
/* The message row makes room for the Ask launcher, which keeps its own
   place on Chat (S2, #3652). app.js (askEonRowRoom) measures where the two
   would meet and writes --eon-ask-row-room on the row; 0 where there is
   room already. A transparent right border, not padding, so it adds to each
   design's own padding (12px, 14px, Living's 0) instead of replacing it,
   and the row's background still paints under it. */
body.view-chat .composer-shell { border-right: var(--eon-ask-row-room, 0px) solid transparent; }
.eon-chat .composer {
  max-width:760px; margin:0 auto;
  background:rgba(var(--flc-wrgb,255,255,255),.05); border:1px solid rgba(var(--flc-wrgb,255,255,255),.1);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:22px; padding:4px 5px 4px 14px;
  box-shadow:0 8px 32px rgba(0,0,0,.28);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.eon-chat .composer:focus-within { border-color:rgba(var(--flc-bluergb,122,166,255),.55); box-shadow:0 8px 38px rgba(var(--flc-bluergb,86,132,255),.22); }
.eon-chat .composer textarea { padding:7px 0; font-size:16px; } /* WS-C: 16px — no iOS zoom */
[data-theme="light"] .eon-chat .composer { background:rgba(var(--flc-wrgb,255,255,255),.7); border-color:rgba(0,0,0,.08); box-shadow:0 6px 26px rgba(0,0,0,.08); }
.eon-chat .composer-hint { max-width:760px; margin:0 auto; }
/* centre the conversation column on wide screens (Gemini-style) */
@media (min-width:820px){ .eon-chat .chat-body { max-width:824px; width:100%; margin:0 auto; } }
/* attach / mic / send pick up the floating language */
.eon-chat .composer .attach-btn, .eon-chat .composer .mic { border-color:rgba(var(--flc-wrgb,255,255,255),.12); color:var(--ink-dim); }
[data-theme="light"] .eon-chat .composer .attach-btn, [data-theme="light"] .eon-chat .composer .mic { border-color:rgba(0,0,0,.1); }
.eon-chat .composer .send { background:linear-gradient(135deg,var(--flc-blue,#7AA6FF),var(--flc-violet,#B58CFF)); color:var(--flc-on-accent,#0A0A0C); }
.eon-chat .composer .send:not(:disabled):hover { box-shadow:0 0 18px rgba(var(--flc-bluergb,122,166,255),.5); }

/* ── Fullscreen = the immersive full-page app ─────────────────────── */
/* keep the animated field flowing under the (now-hidden) app chrome and let
   the composer + floating toolbar be the only chrome. */
body.chat-full .eon-chat .composer-shell { padding-bottom:calc(10px + var(--keyboard-inset,0px) + var(--safe-bottom)); }

/* ── Full-page app: one continuous animated field + floating chrome ──
   In the chat view the fixed .grain-bg (the app's full-screen background
   layer) BECOMES the wavy field, and the header + bottom nav go transparent
   + frosted so they float over it with no hard demarcation. Scoped to
   body.view-chat → every other view keeps its normal chrome. The chat's own
   ::before/::after field is suppressed so the field doesn't double up. */
body.view-chat .grain-bg {
  background:
    radial-gradient(58% 48% at 16% 6%,  rgba(var(--flc-bluergb,86,132,255),.17), transparent 60%),
    radial-gradient(54% 44% at 88% 13%, rgba(var(--flc-violetrgb,140,98,255),.15), transparent 62%),
    radial-gradient(72% 56% at 50% 110%, rgba(var(--flc-mintrgb,86,227,159),.11), transparent 66%),
    var(--flc-bg,#070709);
  background-size:185% 185%, 185% 185%, 185% 185%, auto;
  animation:eonBgDrift 26s ease-in-out infinite alternate;
}
[data-theme="light"] body.view-chat .grain-bg {
  background:
    radial-gradient(58% 48% at 16% 6%,  rgba(var(--flc-bluergb,86,132,255),.11), transparent 60%),
    radial-gradient(54% 44% at 88% 13%, rgba(var(--flc-violetrgb,140,98,255),.09), transparent 62%),
    radial-gradient(72% 56% at 50% 110%, rgba(var(--flc-mintrgb,86,227,159),.07), transparent 66%),
    #FAFAF7;
  background-size:185% 185%, 185% 185%, 185% 185%, auto;
}
body.view-chat .eon-chat::before, body.view-chat .eon-chat::after { display:none; }
body.view-chat .app-bar {
  background:transparent; border-bottom:none;
  -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2);
}
body.view-chat .nav {
  background:transparent; border-top:none;
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
}

@media (prefers-reduced-motion: reduce){
  body.view-chat .grain-bg { animation:none; }
  .eon-logo-spin rect,
  .eon-chat::before, .eon-chat::after,
  .eon-chat .eon-hero-greet,
  .eon-chat .cc-think-track, .eon-chat .cc-think-track .w { animation:none !important; }
  .eon-chat .cc-think-track .w { -webkit-text-fill-color:var(--ink); color:var(--ink); }
}

/* ═══════════════════════════════════════════════════════════════════
   MONEY — "Recent" expenses, restructured (2026-06-09)
   Cohort-tab structure: a summary strip on top (Out / In / Entries), then
   entries grouped by day with a per-day net + clean tabular rows. Uses the
   app theme tokens so it reads in light + dark (Money page isn't .mk-ads3).
   ═══════════════════════════════════════════════════════════════════ */
.mtx { display:flex; flex-direction:column; gap:14px; }
.mtx-summary {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px;
}
.mtx-sum-item { display:flex; flex-direction:column; gap:4px; }
.mtx-sum-v { font-family:var(--display, var(--body)); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1; letter-spacing:-.01em; }
.mtx-sum-v.in { color:var(--ok); }
.mtx-sum-l { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.mtx-day-head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 8px; }
.mtx-day-label { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.mtx-day-net { font-family:var(--display, var(--body)); font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.mtx-day-net.in { color:var(--ok); }
.mtx-day + .mtx-day { margin-top:14px; }
.mtx-rows { background:var(--bg-card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.mtx-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line);
  transition:background .15s ease;
  animation:mtxRowIn .4s cubic-bezier(.2,.7,.2,1) both;
}
.mtx-row:last-child { border-bottom:none; }
.mtx-row:hover { background:var(--bg-card-2, rgba(127,127,127,.06)); }
@keyframes mtxRowIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.mtx-row-main { min-width:0; display:flex; flex-direction:column; gap:4px; flex:1; }
.mtx-desc { font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtx-tags { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mtx-cat { font-size:11px; color:var(--ink-mute); }
.mtx-tag { font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--line); border-radius:99px; padding:1px 7px; }
.mtx-tag.warn { color:var(--warn, #d4a72c); border-color:var(--warn, #d4a72c); }
/* PR EMAIL-INBOUND: one-tap review on pending drafts (bank alerts). */
.mtx-review { display:inline-flex; gap:6px; }
.mtx-review-btn { font-size:10px; text-transform:uppercase; letter-spacing:.04em; border-radius:99px; padding:2px 9px; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--ink-soft); }
.mtx-review-btn.ok { color:var(--ok); border-color:var(--ok); }
.mtx-review-btn.no:hover, .mtx-review-btn.ok:hover { background:var(--bg-soft, rgba(255,255,255,.06)); }
.mtx-review-btn:disabled { opacity:.5; cursor:default; }
.mtx-amt { font-family:var(--display, var(--body)); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; flex-shrink:0; }
.mtx-amt.in { color:var(--ok); }
.mtx-amt.rev { color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .mtx-row { animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   EON LOADER — the one "EON is working" signal (2026-06-09; steps 2026-07-06)
   The Data-bar E, working: the three bars extend from the left one after
   the other — moving steps — hold the full E, then reset (operator ask;
   the old 360° spin is retired — letters don't spin). Still CSS-only,
   zero JS: <div class="eon-loader"></div> on ANY page/bundle. Tile + bar
   geometry mirrors /static/eon-mark.svg on its 24-unit grid, in % so
   every size variant (16/28/46/52) stays exact.
   Convenience builders: EON_UX.loader(label, opts) / eonLoader(label, opts).
   Variants: -sm (16) · default (28) · -lg (46) · -block (centred + label).
   ═══════════════════════════════════════════════════════════════════ */
.eon-loader {
  position:relative; width:28px; height:28px; flex-shrink:0;
  background:#0B0D0E; border-radius:21%;
}
.eon-loader::before {
  content:""; position:absolute;
  left:12.5%; right:12.5%; top:19.2%; bottom:19.2%;
  background-image:
    linear-gradient(#F2F4F1 0 0),
    linear-gradient(#C0FF3A 0 0),
    linear-gradient(#F2F4F1 0 0);
  background-repeat:no-repeat;
  background-position:left top, left center, left bottom;
  /* static fallback = the full mark (also the reduced-motion state) */
  background-size:100% 24.3%, 72.2% 24.3%, 100% 24.3%;
  animation:eonLoaderSteps 1.4s ease-in-out infinite;
}
/* one bar at a time: top extends, then the accent, then the bottom —
   hold — collapse and go again */
@keyframes eonLoaderSteps {
  0%       { background-size:16% 24.3%, 16% 24.3%, 16% 24.3%; }
  26%      { background-size:100% 24.3%, 16% 24.3%, 16% 24.3%; }
  52%      { background-size:100% 24.3%, 72.2% 24.3%, 16% 24.3%; }
  72%, 86% { background-size:100% 24.3%, 72.2% 24.3%, 100% 24.3%; }
  100%     { background-size:16% 24.3%, 16% 24.3%, 16% 24.3%; }
}
.eon-loader-sm { width:16px; height:16px; }
.eon-loader-lg { width:46px; height:46px; }
.eon-loader-inline { display:inline-flex; align-items:center; gap:9px; }
.eon-loader-block { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; padding:34px 16px; text-align:center; }
.eon-loader-label {
  font-size:13px; letter-spacing:.01em;
  background:linear-gradient(90deg,var(--ink-mute) 0%,var(--ink) 50%,var(--ink-mute) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:eonLoaderShimmer 2.2s linear infinite;
}
@keyframes eonLoaderShimmer { 0%{background-position:120% 0;} 100%{background-position:-120% 0;} }
@media (prefers-reduced-motion: reduce){
  .eon-loader::before { animation:none; }
  .eon-loader-label { animation:none; -webkit-text-fill-color:var(--ink-mute); color:var(--ink-mute); }
}

/* ═══════════════════════════════════════════════════════════════════
   MENU SHEET + SETTINGS — design-flow redesign (2026-06-07)
   Same dark, animated language as the rest: living gradient, staggered
   reveal, lime accents, hover lift. Menu scoped under .menu-panel.cc-menu;
   settings scoped under the settings-only .settings-section. Honours
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
.menu-panel.cc-menu {
  --m-lime:#C8FF4D; --m-mint:#56E39F;
  /* 2026-06-08 fix: the previous `overflow:hidden` (added to clip a ::before
     glow) killed the sheet's scroll — content past max-height:75vh (Sign out,
     What's new, version) was clipped + unreachable. Bake a STATIC top glow
     into the background instead (no pseudo, no clip needed) and restore
     overflow-y:auto so the sheet scrolls to the bottom. */
  background:
    radial-gradient(120% 55% at 25% 0%, rgba(var(--flc-limergb,200,255,77),.08), transparent 60%),
    radial-gradient(110% 50% at 85% 0%, rgba(var(--flc-mintrgb,86,227,159),.06), transparent 62%),
    linear-gradient(180deg, var(--flc-tile,#161619) 0%, var(--flc-bg-soft,#0d0d0f) 100%);
  border-top: 1px solid rgba(var(--flc-wrgb,255,255,255),.14);
  box-shadow: 0 -16px 50px rgba(0,0,0,.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.menu-panel.cc-menu > * { position: relative; z-index: 1; }
.menu-panel.cc-menu .menu-handle { background: rgba(var(--flc-wrgb,255,255,255),.22); }
/* staggered reveal of the sheet contents */
.menu-panel.cc-menu > * { opacity:0; animation: ccMenuRise .42s cubic-bezier(.2,.7,.2,1) forwards; }
.menu-panel.cc-menu > *:nth-child(1){animation-delay:.02s} .menu-panel.cc-menu > *:nth-child(2){animation-delay:.05s}
.menu-panel.cc-menu > *:nth-child(3){animation-delay:.08s} .menu-panel.cc-menu > *:nth-child(4){animation-delay:.11s}
.menu-panel.cc-menu > *:nth-child(5){animation-delay:.14s} .menu-panel.cc-menu > *:nth-child(6){animation-delay:.17s}
.menu-panel.cc-menu > *:nth-child(7){animation-delay:.20s} .menu-panel.cc-menu > *:nth-child(8){animation-delay:.23s}
.menu-panel.cc-menu > *:nth-child(9){animation-delay:.26s} .menu-panel.cc-menu > *:nth-child(n+10){animation-delay:.29s}
@keyframes ccMenuRise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.cc-menu .menu-item {
  border:1px solid transparent; margin:1px 2px;
  transition: background .16s ease, border-color .18s ease, transform .12s ease, padding-left .16s ease;
}
.cc-menu .menu-item:hover {
  background: rgba(var(--flc-wrgb,255,255,255),.04); border-color: rgba(var(--flc-wrgb,255,255,255),.10);
  transform: translateY(-1px); border-left: 2px solid var(--m-lime); padding-left: 12px;
}
.cc-menu .menu-item:hover .menu-icon { color: var(--m-lime); }
/* persistent active-view marker (the view you're currently on) */
.cc-menu .menu-item.active {
  background: rgba(var(--flc-limergb,200,255,77),.06);
  border-left: 2px solid var(--m-lime);
  padding-left: 12px;
}
.cc-menu .menu-item.active .menu-label { color: var(--ink); font-weight: 600; }
.cc-menu .menu-item.active .menu-icon { color: var(--m-lime); }
.cc-menu .menu-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.cc-menu .menu-item.danger:hover { border-left-color: var(--danger,#ff5a5a); }

/* ── Settings ─────────────────────────────────────────────────────── */
.settings-section { animation: setRise .5s cubic-bezier(.2,.7,.2,1) both; }
.settings-section:nth-of-type(1){animation-delay:.04s} .settings-section:nth-of-type(2){animation-delay:.10s}
.settings-section:nth-of-type(3){animation-delay:.16s} .settings-section:nth-of-type(4){animation-delay:.22s}
.settings-section:nth-of-type(5){animation-delay:.28s} .settings-section:nth-of-type(n+6){animation-delay:.34s}
@keyframes setRise { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
/* section headers get a lime tick */
.settings-section h3 { display:flex; align-items:center; gap:8px; }
.settings-section h3::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background: var(--ok,var(--flc-mint,#56E39F)); box-shadow: 0 0 8px rgba(var(--flc-mintrgb,86,227,159),.5); flex-shrink:0;
}
/* rows feel like tiles — rounded, lift on hover */
.settings-section .row {
  border-radius: var(--r-lg, 6px); margin-bottom: 8px;
  transition: transform .16s ease, border-color .18s ease, background .18s ease;
}
.settings-section .row:hover {
  transform: translateY(-2px); border-color: var(--line-strong, var(--line));
  background: var(--bg-card-2, var(--bg-card));
}
.settings-section .row-value { font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  .menu-panel.cc-menu::before, .menu-panel.cc-menu > *,
  .settings-section { animation: none !important; opacity:1 !important; transform:none !important; }
  .reveal-toggle, .settings-section .row { transition: none; }
  .reveal-toggle:active, .settings-section .row:hover { transform: none; }
}

/* Warehouse OS entry CTA on the main-app Inventory tab (demotion, spec §7.3) */
.inv-warehouse-cta { border-color: rgba(var(--flc-limergb,212,255,58),.35); background: linear-gradient(135deg, rgba(var(--flc-limergb,212,255,58),.06), rgba(var(--flc-mintrgb,77,214,160),.04)); }
.inv-warehouse-cta .inv-deep-link-btn { background:var(--flc-lime,#d4ff3a); color:var(--flc-bg-soft,#0b0b0d); font-weight:600; }

/* BATCH B — assistant propose-edit form + manager pending-edit approvals.
   Reuses .card/.fld/.btn-* tokens; only layout + the change-diff chips
   are new. No new colour tokens. */
.inv-propose-card { display:flex; flex-direction:column; gap:10px; }
.inv-propose-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inv-propose-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ipe-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px; }
.ipe-row-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ipe-row-top { display:flex; align-items:center; gap:8px; }
.ipe-field-chip { font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:999px; background:rgba(var(--flc-limergb,212,255,58),.12); color:var(--accent, var(--flc-lime,#d4ff3a)); }
.ipe-row-label { font-family:var(--mono); font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ipe-change { font-size:13px; }
.ipe-old { color:var(--ink-soft); text-decoration:line-through; }
.ipe-arrow { color:var(--ink-soft); }
.ipe-new { font-weight:600; }
.ipe-reason-line { font-size:12px; color:var(--ink-soft); }
.ipe-row-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════════
   EON ad-intel 2026-06-08
   Compact "EON ad moves" card on the main Ads view (#adsx-moves): top 3
   ad-suggestions ranked by ₦-at-stake so the operator sees the highest-
   leverage changes without opening Marketing. Built as a .card with inline
   styles matching its kill/scale-list neighbours and reusing the canonical
   --ink / --ink-soft / --line / --accent / --mono tokens — no new colours.
   Kept here for discoverability; the chip colours mirror the kill/scale
   verdict palette (amber=swap, red=kill, mint=scale).
   ═══════════════════════════════════════════════════════════════════ */
#adsx-moves { --adsx-moves-anchor: 1; }

/* ═══ Settings — minimalist disclosures (2026-06-08) ═══
   De-noise: technical/admin sections collapse into clean <details> groups so
   Settings opens calm instead of as a wall of 13 sections. */
.set-intro { font-size: 12.5px; color: var(--ink-soft); margin: -4px 4px 18px; max-width: 62ch; line-height: 1.5; }
.settings-group { border: 1px solid var(--line-soft); border-radius: var(--r-lg, 6px); margin: 0 0 14px; background: var(--bg-card); overflow: hidden; transition: border-color var(--transition-fast); }
.settings-group:hover { border-color: var(--line); }
.settings-group > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; user-select: none; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(-45deg); transition: transform .18s ease; flex-shrink: 0; }
.settings-group[open] > summary::before { transform: rotate(45deg); }
.settings-group > summary:hover { background: var(--bg-card-2, rgba(var(--flc-wrgb,255,255,255),.03)); }
/* sections nested in a group sit flush — no double card chrome / re-animation */
.settings-group .settings-section { margin: 0; padding: 4px 16px 16px; animation: none; }
.settings-group .settings-section h3 { margin-top: 4px; }

/* ═══ System Audit (?v=system-audit) — 2026-06-11 ═══
   EON's self-evaluation surface. Sub-namespace .sa-* inside the existing
   .mk-ads3 dark decision-first family — lime = primary action, amber =
   medium risk, red = high risk / bugfix, mono for figures + file paths. */

.mk-ads3.sa-wrap { padding-bottom: 28px; }

/* Engine Room feed (2026-07-28) — plain-words cards, big mono count,
   machine names hidden behind the "under the hood" toggle. */
.mk-ads3 .sa-engine { display: grid; gap: 10px; }
/* /loop cross-link (WS-2, 2026-08-01) beside the section title. */
.sa-loop-link { float: right; font-size: 12px; font-weight: 400; }
.mk-ads3 .sa-eng-card { padding: 16px 18px; }
.mk-ads3 .sa-eng-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.mk-ads3 .sa-eng-unit { font-size: 12px; color: var(--a3-mut); margin-top: 2px; }
.mk-ads3 .sa-eng-big {
  font-family: var(--a3-mono, ui-monospace, monospace);
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--a3-lime); flex-shrink: 0;
}
.mk-ads3 .sa-eng-lines { display: grid; gap: 8px; }
.mk-ads3 .sa-eng-line {
  border-top: 1px solid #ffffff10; padding-top: 8px;
}
.mk-ads3 .sa-eng-text { font-size: 13.5px; line-height: 1.55; }
.mk-ads3 .sa-eng-hood > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a3-dim); margin-top: 4px;
}
.mk-ads3 .sa-eng-hood > summary::-webkit-details-marker { display: none; }
.mk-ads3 .sa-eng-hood > code {
  display: block; margin-top: 4px; font-size: 11.5px;
  color: var(--a3-mut); word-break: break-word;
}

/* explainer — permanent, collapsible, calm */
.mk-ads3 .sa-explainer { padding: 0; overflow: hidden; }
.mk-ads3 .sa-explainer > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--a3-mut);
  display: flex; align-items: center; gap: 10px;
}
.mk-ads3 .sa-explainer > summary::-webkit-details-marker { display: none; }
.mk-ads3 .sa-explainer > summary::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  border-right: 1.5px solid var(--a3-dim); border-bottom: 1.5px solid var(--a3-dim);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.mk-ads3 .sa-explainer[open] > summary::before { transform: rotate(45deg); }
.mk-ads3 .sa-explainer > p {
  margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.55; color: var(--a3-mut);
  max-width: 68ch;
}

/* header strip */
.mk-ads3 .sa-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mk-ads3 .sa-scanline { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mk-ads3 .sa-counts { display: flex; gap: 14px; flex-wrap: wrap; }
.mk-ads3 .sa-count { font-size: 12px; color: var(--a3-mut); white-space: nowrap; }
.mk-ads3 .sa-count .a3-mono { color: var(--a3-tx); font-size: 15px; font-weight: 500; margin-right: 4px; }

/* telemetry grid */
.mk-ads3 .sa-telemetry { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mk-ads3 .sa-stat-card { display: flex; flex-direction: column; gap: 6px; }
.mk-ads3 .sa-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mk-ads3 .sa-stat-k { font-size: 12px; color: var(--a3-mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ads3 .sa-stat-v { font-size: 13px; font-weight: 500; flex-shrink: 0; }
.mk-ads3 .sa-meaning { margin-top: auto; padding-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--a3-dim); }

/* shared chips */
.mk-ads3 .sa-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mk-ads3 .sa-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill, 4px);
  background: var(--a3-tile-hi); border: 1px solid var(--a3-line); color: var(--a3-mut);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-ads3 .sa-chip-dim { color: var(--a3-dim); border-style: dashed; }
.mk-ads3 .sa-chip .a3-mono { font-size: 11px; }

/* proposal cards */
.mk-ads3 .sa-group-label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a3-dim); margin: 18px 2px 8px;
}
.mk-ads3 .sa-proposals .sa-card { margin-bottom: 12px; }
.mk-ads3 .sa-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-ads3 .sa-when { margin-left: auto; font-size: 11px; color: var(--a3-dim); white-space: nowrap; }
.mk-ads3 .sa-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 8px; }
.mk-ads3 .sa-why { font-size: 13px; line-height: 1.55; color: var(--a3-mut); max-width: 72ch; }
.mk-ads3 .sa-why-k {
  display: inline-block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a3-dim); margin-right: 8px;
}
/* The engineering wording, folded away (p559). Closed by default: the
   operator decides on the plain card, and the technical text is there for
   when he wants to hand it to someone — not competing for the headline. */
.mk-ads3 .sa-tech { margin-top: 10px; }
.mk-ads3 .sa-tech > summary {
  cursor: pointer; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--a3-dim); list-style: none;
  padding: 4px 0;
}
.mk-ads3 .sa-tech > summary::-webkit-details-marker { display: none; }
.mk-ads3 .sa-tech > summary::before { content: '+ '; opacity: .7; }
.mk-ads3 .sa-tech[open] > summary::before { content: '– '; }
.mk-ads3 .sa-tech > summary:hover { color: var(--a3-mut); }
.mk-ads3 .sa-tech-t {
  margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--a3-mut);
  line-height: 1.4;
}
.mk-ads3 .sa-tech-r {
  margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--a3-dim);
  max-width: 72ch;
}

.mk-ads3 .sa-evidence { margin-top: 10px; }
.mk-ads3 .sa-ev-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--a3-dim); }
.mk-ads3 .sa-ev-sample {
  margin-top: 8px; padding: 8px 10px; font-size: 11.5px; line-height: 1.5;
  color: var(--a3-mut); background: var(--a3-bg-soft); border: 1px solid var(--a3-line);
  border-radius: var(--r-md, 4px); word-break: break-word;
}
.mk-ads3 .sa-files { margin-top: 10px; }
.mk-ads3 .sa-file { background: var(--a3-bg-soft); }
.mk-ads3 .sa-testplan { margin-top: 10px; }
.mk-ads3 .sa-testplan > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--a3-mut); display: inline-flex; align-items: center; gap: 7px;
}
.mk-ads3 .sa-testplan > summary::-webkit-details-marker { display: none; }
.mk-ads3 .sa-testplan > summary::before {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid var(--a3-dim); border-bottom: 1.5px solid var(--a3-dim);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.mk-ads3 .sa-testplan[open] > summary::before { transform: rotate(45deg); }
.mk-ads3 .sa-testplan > div {
  margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--a3-mut);
  white-space: pre-wrap; max-width: 72ch;
}

/* actions */
.mk-ads3 .sa-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mk-ads3 .sa-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  padding: 8px 18px; border-radius: var(--r-pill, 4px); cursor: pointer; border: 1px solid var(--a3-line-hi);
  background: var(--a3-tile-hi); color: var(--a3-tx); text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.mk-ads3 .sa-btn:hover { transform: translateY(-1px); }
.mk-ads3 .sa-btn:disabled { opacity: .5; cursor: default; transform: none; }
.mk-ads3 .sa-btn-approve { background: var(--a3-lime); border-color: var(--a3-lime); color: var(--flc-on-accent,#0A0A0C); }
.mk-ads3 .sa-btn-reject { color: var(--a3-mut); }
.mk-ads3 .sa-btn-pr { background: var(--a3-mint); border-color: var(--a3-mint); color: var(--flc-on-accent,#0A0A0C); }
.mk-ads3 .sa-micro { font-size: 11px; color: var(--a3-dim); }
.mk-ads3 .sa-status-note { font-size: 12.5px; color: var(--a3-mut); display: inline-flex; align-items: center; gap: 8px; }
.mk-ads3 .sa-status-bad { color: var(--a3-amber); }
.mk-ads3 .sa-history-link { font-size: 12.5px; color: var(--a3-mut); text-decoration: underline; text-underline-offset: 3px; }
.mk-ads3 .sa-spinner {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--a3-line-hi); border-top-color: var(--a3-lime);
  animation: sa-spin .8s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* history cards mute */
.mk-ads3 .sa-card-history { opacity: .55; }
.mk-ads3 .sa-card-history:hover { opacity: .8; }

/* pending / empty tiles */
.mk-ads3 .sa-pending {
  color: var(--a3-mut); font-size: 13px; line-height: 1.55; text-align: center;
  border-style: dashed; padding: 22px 18px;
}

/* ── Truth panels (2026-07-30) — what ran / eval / shipped / ideas ──
   Verdict dots, honest states, measured stamps. No emojis. */
.mk-ads3 .sa-truth, .mk-ads3 .sa-eval, .mk-ads3 .sa-shipped,
.mk-ads3 .sa-ideas { display: grid; gap: 10px; }
.mk-ads3 .sa-truth-card { display: block; }
.mk-ads3 .sa-truth-big {
  font-size: 14px; line-height: 1.6; margin: 6px 0 10px;
  color: var(--a3-fg, #E8F0E4);
}
.mk-ads3 .sa-truth-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; border-top: 1px solid #ffffff0d;
}
.mk-ads3 .sa-truth-text { flex: 1; min-width: 0; }
.mk-ads3 .sa-truth-t { font-size: 13px; line-height: 1.45; }
.mk-ads3 .sa-truth-d {
  font-size: 12px; line-height: 1.5; color: var(--a3-mut); margin-top: 2px;
}
.mk-ads3 .sa-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px;
}
.mk-ads3 .sa-dot-green { background: var(--a3-mint, #56E39F); }
.mk-ads3 .sa-dot-amber { background: var(--a3-amber, #F2A24C); }
.mk-ads3 .sa-dot-red   { background: #ef4444; }
.mk-ads3 .sa-ok  { color: var(--a3-mint, #56E39F); }
.mk-ads3 .sa-bad { color: #ef4444; }
.mk-ads3 .sa-honest {
  font-style: italic; opacity: .85;
}
.mk-ads3 .sa-cadence {
  font-size: 11px; color: var(--a3-mut); margin-left: 6px; font-weight: 400;
}
.mk-ads3 .sa-measured {
  margin-top: 8px; font-size: 10.5px; color: var(--a3-mut); opacity: .75;
  letter-spacing: .02em;
}
.mk-ads3 .sa-greens { margin-top: 8px; }
.mk-ads3 .sa-greens > summary {
  cursor: pointer; font-size: 12px; color: var(--a3-mut);
}
.mk-ads3 .sa-greens[open] > summary { margin-bottom: 6px; }
.mk-ads3 .sa-digest-fold > summary {
  cursor: pointer; font-size: 12.5px; color: var(--a3-mut);
}
.mk-ads3 .sa-digest-fold[open] > summary { margin-bottom: 10px; }
.mk-ads3 .sa-digest-fold .sa-header { margin-bottom: 10px; }

/* ── the two-model machine (2026-08-03) ───────────────────────────
   The pipeline drawn as boxes that carry their own live counts: a box
   pulses when its counter moved in the last 24h, and the connectors
   flow left to right so the page shows the design WORKING rather than
   describing it. Pure CSS — no libraries, no canvas. Every animation
   here is switched off under prefers-reduced-motion at the bottom of
   this block; the counts and labels are all still readable, so the
   panel loses motion and nothing else. */
.mk-ads3 .sa-truth-unit { font-size: 12px; color: var(--a3-mut); }
.mk-ads3 .sa-dot-grey { background: var(--a3-mut, #8a938a); }
.mk-ads3 .sa-model-chip { border-style: solid; opacity: .9; }
/* the manual exit from a debt row — small, quiet, and the only way an
   operator can close one without the sweep's re-vet landing code */
.mk-ads3 .sa-vet-btn {
  font: inherit; font-size: 11px; cursor: pointer;
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  color: var(--a3-mut); background: transparent;
  border: 1px solid var(--a3-mut);
}
.mk-ads3 .sa-vet-btn:hover:not(:disabled) { color: var(--a3-ink, #fff); }
.mk-ads3 .sa-vet-btn:disabled { opacity: .5; cursor: default; }
.mk-ads3 .sa-flow {
  display: flex; align-items: stretch; gap: 0;
  margin: 12px 0 4px; padding-bottom: 6px;
  overflow-x: auto;                 /* wide diagram scrolls itself, the
                                       page body never scrolls sideways */
  -webkit-overflow-scrolling: touch;
}
.mk-ads3 .sa-node {
  flex: 0 0 auto; min-width: 108px; max-width: 150px;
  border: 1px solid #ffffff1a; padding: 8px 10px;
  background: #ffffff05;
}
.mk-ads3 .sa-node-count {
  font-size: 18px; line-height: 1.2; color: var(--a3-fg, #E8F0E4);
}
.mk-ads3 .sa-node-label {
  font-size: 11.5px; line-height: 1.35; margin-top: 2px;
}
.mk-ads3 .sa-node-note {
  font-size: 10.5px; line-height: 1.4; color: var(--a3-mut); margin-top: 4px;
}
.mk-ads3 .sa-node-live { border-color: var(--a3-mint, #56E39F); }
.mk-ads3 .sa-node-live .sa-node-count {
  color: var(--a3-mint, #56E39F);
  animation: sa-node-pulse 2.6s ease-in-out infinite;
}
@keyframes sa-node-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.mk-ads3 .sa-flow-arrow {
  flex: 0 0 26px; align-self: center; height: 1px; position: relative;
  background: #ffffff1f;
}
.mk-ads3 .sa-flow-arrow::after {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 8px; height: 3px; background: var(--a3-mint, #56E39F);
  animation: sa-flow-run 2.2s linear infinite;
}
@keyframes sa-flow-run {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(18px); opacity: 0; }
}
.mk-ads3 .sa-rungs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mk-ads3 .sa-rung {
  font-size: 10px; padding: 1px 5px; border: 1px solid #ffffff26;
  letter-spacing: .02em;
}
.mk-ads3 .sa-rung-free { color: var(--a3-mint, #56E39F); }
.mk-ads3 .sa-rung-held { color: var(--a3-amber, #F2A24C); }
@media (prefers-reduced-motion: reduce) {
  .mk-ads3 .sa-node-live .sa-node-count { animation: none; }
  .mk-ads3 .sa-flow-arrow::after { animation: none; opacity: 1; }
}

@media (max-width: 640px) {
  .mk-ads3 .sa-telemetry { grid-template-columns: 1fr; }
  .mk-ads3 .sa-header-row { align-items: flex-start; flex-direction: column; }
  .mk-ads3 .sa-when { margin-left: 0; width: 100%; }
  .mk-ads3 .sa-truth-big { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────
   DESIGN FLOW — SYSTEM AUDIT editorial layer (2026-08-01)
   Operator: "rebuild the task and system audit section using design
   flow". Reference grammar (~/Downloads/DESIGN FLOW): huge lowercase
   mast with a period, 001-indexed lowercase sections, data set as
   display type, bracket micro-labels, hairlines, ONE saturated
   accent. Adapted onto the existing a3 dark tokens — the accent is
   --a3-lime; no emoji; append-only over the 06-11 rules above.
   ───────────────────────────────────────────────────────────────── */
.mk-ads3 .sa-mast {
  font-weight: 800; text-transform: lowercase;
  font-size: clamp(46px, 11vw, 84px);
  line-height: .9; letter-spacing: -0.04em;
  margin: 26px 0 6px; color: var(--a3-tx);
}
.mk-ads3 .sa-mast-dot { color: var(--a3-lime, #C8FF4D); }
.mk-ads3 .sa-mast-idx { display: flex; flex-wrap: wrap; gap: 2px 14px;
  margin: 0 0 26px; font-size: 10px; letter-spacing: .12em;
  text-transform: lowercase; }
.mk-ads3 .sa-mast-idx a { color: var(--a3-mut); text-decoration: none; }
.mk-ads3 .sa-mast-idx a:hover { color: var(--a3-lime, #C8FF4D); }

/* numbered lowercase sections — the pinned heading COPY stays
   verbatim; the case and the index are typography, not text */
.mk-ads3 .sa-wrap { counter-reset: sasec; }
.mk-ads3 .sa-wrap .a3-section-title {
  text-transform: lowercase; letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 8px;
}
.mk-ads3 .sa-wrap .a3-section-title::before {
  counter-increment: sasec;
  content: "0" counter(sasec, decimal-leading-zero) "  ";
  font-family: var(--a3-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .14em;
  color: var(--a3-lime, #C8FF4D); vertical-align: 2px;
}

/* data as display type — the numbers ARE the composition */
.mk-ads3 .sa-wrap .sa-truth-big { font-size: 15px; }
.mk-ads3 .sa-wrap .sa-truth-big b { font-size: 21px; letter-spacing: -0.02em; }
.mk-ads3 .sa-wrap .sa-count b { font-size: clamp(22px, 4.5vw, 32px);
  letter-spacing: -0.02em; }
.mk-ads3 .sa-wrap .sa-eng-big { font-size: clamp(30px, 6vw, 44px); }

/* ONE saturated accent block — the self-evaluation scanline wears it,
   exactly one loud element per page (reference: the red bar) */
.mk-ads3 .sa-wrap .sa-scanline {
  display: inline-block; background: var(--a3-lime, #C8FF4D);
  color: #0b0f0b; padding: 6px 12px; font-weight: 700;
}

/* flat law, scoped — square tiles on this page only */
.mk-ads3 .sa-wrap .a3-tile { border-radius: 0; }
.mk-ads3 .sa-wrap .sa-btn, .mk-ads3 .sa-wrap .sa-chip { border-radius: 0; }

@media (max-width: 640px) {
  .mk-ads3 .sa-mast { margin-top: 14px; }
}

/* ═════════════════════════════════════════════════════════════════
   MONEY → BOOKS + TAX (v3.0p106)
   Audit-grade statement surfaces for the Books tab (P&L / trial
   balance / balance sheet / ledger drill / audit pack) and the Tax
   tab (filing calendar, VAT/PAYE/WHT packs, CIT-vs-PIT provision,
   minimization, asset register, variance check).
   Rules: mono right-aligned figures, ruled totals, dark-first with
   lime/mint/amber accents, no emoji, prints clean (audit pack).
   ═════════════════════════════════════════════════════════════════ */

/* ── Money tab bar ─────────────────────────────────────────────── */
.money-tabbar {
  display: flex;
  gap: 4px;
  margin: 0 4px 16px;
  padding: 4px;
  width: max-content;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg, 6px);
}
.money-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 16px;
  border-radius: var(--r-md, 4px);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.money-tab:hover { color: var(--ink); }
.money-tab-active { background: var(--accent); color: var(--accent-text); }
.money-tab-active:hover { color: var(--accent-text); }

/* ── Shared toolbar (month/year steppers + actions) ────────────── */
.bks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 4px 6px;
}
.bks-month-step { display: flex; align-items: center; gap: 4px; }
.bks-step-btn {
  appearance: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-dim);
  border-radius: var(--r-md, 4px);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.bks-step-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.bks-month-label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  min-width: 124px;
  text-align: center;
}
.bks-toolbar-actions { display: flex; gap: 8px; }
.bks-tool-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: var(--r-md, 4px);
  padding: 7px 13px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.bks-tool-btn:hover { border-color: var(--line-strong); }
.bks-tool-btn:disabled { opacity: 0.5; cursor: default; }
.bks-tool-quiet { background: transparent; color: var(--ink-mute); }

/* ── Cards, soft errors, footnotes ─────────────────────────────── */
.bks-card { padding: 16px 18px; margin: 0 0 6px; }
.bks-foot-note,
.bks-footnote {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 10px 6px 0;
}
.bks-soft-err {
  font-size: 13px;
  color: var(--ink-mute);
  padding: 8px 2px;
  line-height: 1.5;
}
.bks-retry-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.bks-soft-err-msg {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  word-break: break-word;
}

/* ── Statement primitives (P&L, balance sheet, VAT/PAYE packs) ─── */
.bks-stmt { display: flex; flex-direction: column; margin-top: 4px; }
.bks-stmt-section {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 14px 0 4px;
}
.bks-stmt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px;
  font-size: 13px;
  color: var(--ink-dim);
}
.bks-stmt-row[data-bks-ledger] { cursor: pointer; border-radius: 6px; }
.bks-stmt-row[data-bks-ledger]:hover { background: var(--bg-card-2); color: var(--ink); }
.bks-stmt-indent { padding-left: 14px; }
.bks-stmt-soft { color: var(--ink-mute); }
.bks-stmt-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.bks-stmt-code {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.bks-stmt-amt {
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}
/* Ruled totals — single rule above a total, double rule under the
   grand line. Classic statement typography. */
.bks-stmt-total {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  font-weight: 600;
  color: var(--ink);
}
.bks-stmt-grand {
  border-top: 1px solid var(--line);
  border-bottom: 3px double var(--line-strong);
  margin-top: 4px;
  padding-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.bks-stmt-details { margin: 2px 0; }
.bks-stmt-details summary {
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 2px;
}
.bks-stmt-details summary:hover { color: var(--ink); }
.bks-margin-chip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ── Chips ─────────────────────────────────────────────────────── */
.bks-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-card-2);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}
.bks-chip-mint { color: var(--ok); background: var(--ok-soft); }
.bks-chip-amber { color: var(--warn); background: var(--warn-soft); }
.bks-chip-red { color: var(--danger); background: var(--danger-soft); }

/* ── Statement tables (trial balance, audit pack, registers) ───── */
.bks-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bks-table th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.bks-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.bks-num { text-align: right; white-space: nowrap; }
.bks-tb-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.bks-tb-group td {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 14px;
  border-bottom: 0;
}
.bks-tb-row { cursor: pointer; }
.bks-tb-row:hover td { background: var(--bg-card-2); color: var(--ink); }
.bks-tb-subtotal td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--ink-mute);
  font-size: 12px;
}
.bks-tb-grand td {
  border-top: 1px solid var(--line);
  border-bottom: 3px double var(--line-strong);
  font-weight: 600;
  color: var(--ink);
}
.bks-bs-eq { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* ── Ledger slide-over ─────────────────────────────────────────── */
.bks-ledger-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 220;
}
.bks-ledger-pane {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  z-index: 221;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.28, 1);
}
.bks-ledger-pane.bks-ledger-in { transform: translateX(0); }
.bks-ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.bks-ledger-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.bks-ledger-sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.bks-ledger-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.bks-ledger-close:hover { color: var(--ink); }
.bks-ledger-body { flex: 1; overflow-y: auto; padding: 12px 18px 24px; }
.bks-gl-open, .bks-gl-close {
  font-size: 12px;
  color: var(--ink-mute);
  padding: 8px 0;
}
.bks-gl-close { border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.bks-gl-cols {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--line-soft);
}
.bks-gl-line { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bks-gl-main { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.bks-gl-date { font-size: 11px; color: var(--ink-mute); flex-shrink: 0; }
.bks-gl-memo {
  font-size: 12.5px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bks-gl-srcline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.bks-gl-ref { word-break: break-all; }
.bks-copy-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 10.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bks-gl-amts {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  font-size: 12px;
  margin-top: 4px;
}
.bks-gl-dr { color: var(--ink-dim); }
.bks-gl-cr { color: var(--ink-mute); }
.bks-gl-bal { color: var(--ink); font-weight: 600; }
.bks-gl-empty { font-size: 12.5px; color: var(--ink-mute); padding: 14px 0; }

/* ── Audit pack overlay ────────────────────────────────────────── */
.bks-audit-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 230;
  overflow-y: auto;
  padding: 20px 16px 60px;
}
.bks-pack { max-width: 860px; margin: 0 auto; }
.bks-pack-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.bks-pack-head { margin: 6px 2px 18px; }
.bks-pack-brand {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bks-pack-period {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
}
.bks-pack-integrity { margin-top: 10px; }
.bks-pack-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.bks-pack-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

/* ── Tax tab — filing calendar strip ───────────────────────────── */
.mtx-cal-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 10px;
}
.mtx-cal-card {
  flex: 0 0 auto;
  min-width: 210px;
  max-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.mtx-cal-settled { opacity: 0.55; }
.mtx-cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mtx-cal-type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mtx-cal-amt {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mtx-cal-due {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.mtx-cal-refs {
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  word-break: break-all;
}
.mtx-cal-refs a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.mtx-cal-act { margin-top: 10px; }
.mtx-cal-btn { padding: 5px 10px; font-size: 11.5px; }
.mtx-cal-inline { display: flex; flex-direction: column; gap: 6px; }
.mtx-status-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mtx-status-prepared { color: var(--ink-dim); }
.mtx-status-filed { color: var(--whale); }
.mtx-status-paid { color: var(--ok); }
.mtx-status-overdue { color: var(--danger); }

/* ── Tax tab — pack cards ──────────────────────────────────────── */
.mtx-hero-wrap { margin: 2px 0 10px; }
.mtx-hero {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.mtx-hero-label {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 5px;
}
.mtx-quiet {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-top: 8px;
}
.mtx-empty {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  padding: 10px 2px;
}
.mtx-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.mtx-col { min-width: 0; }
.mtx-col-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.mtx-col-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.mtx-wht-rows { margin-top: 8px; }
.mtx-wht-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-soft);
}
.mtx-wht-cp { display: inline-flex; gap: 8px; align-items: baseline; min-width: 0; }
.mtx-wht-type {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.mtx-alerts {
  margin-top: 14px;
  border: 1px solid var(--warn-soft);
  background: var(--warn-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.mtx-alerts .mtx-col-h { color: var(--warn); }
.mtx-alert {
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 4px 0;
  line-height: 1.5;
}

/* Scenario panels (CIT vs PIT) */
.mtx-scn {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-width: 0;
}
.mtx-scn-cheaper { border-color: var(--ok); }
.mtx-scn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.mtx-delta {
  font-size: 13px;
  color: var(--ink);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-top: 12px;
  line-height: 1.5;
}

/* Minimization items */
.mtx-item {
  border-top: 1px solid var(--line-soft);
  padding: 12px 2px;
}
.mtx-item:first-of-type { border-top: 0; }
.mtx-item-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.mtx-impact {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.mtx-item-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mtx-item-action {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-top: 5px;
  line-height: 1.55;
}
.mtx-item-basis {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.5;
}
.mtx-item-doc {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 3px;
  line-height: 1.5;
}

/* Forms (WHT log, asset register, variance) */
.mtx-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.mtx-input {
  appearance: none;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 4px);
  color: var(--ink);
  font-family: var(--body);
  font-size: 12.5px;
  padding: 7px 10px;
  min-width: 0;
  flex: 1 1 130px;
}
.mtx-input:focus { outline: none; border-color: var(--line-strong); }
select.mtx-input { flex: 0 1 auto; }
.mtx-form .bks-tool-btn { flex: 0 0 auto; }
.mtx-vres {
  font-size: 13px;
  color: var(--ink);
  margin-top: 12px;
  line-height: 1.6;
}
.mtx-vres .bks-chip { margin-right: 6px; }

/* ── Mobile (390px single column) ──────────────────────────────── */
@media (max-width: 640px) {
  .mtx-grid2 { grid-template-columns: 1fr; }
  .bks-toolbar { flex-direction: column; align-items: flex-start; }
  .mtx-form .mtx-input { flex: 1 1 100%; }
  .mtx-cal-card { min-width: 180px; }
  .bks-stmt-row { font-size: 12.5px; }
}

/* ── Print: the audit pack prints alone, clean, light ──────────── */
@media print {
  /* Hide the whole app shell when the audit pack is open — only the
     overlay subtree reaches paper. */
  body.bks-print-mode > *:not(#bks-audit-overlay) { display: none !important; }
  body.bks-print-mode .bks-audit-overlay {
    position: static;
    inset: auto;
    overflow: visible;
    background: #fff;
    padding: 0;
  }
  body.bks-print-mode .bks-pack { max-width: none; }
  body.bks-print-mode .bks-pack-actions { display: none; }
  body.bks-print-mode .bks-pack-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }
  body.bks-print-mode .bks-pack-brand,
  body.bks-print-mode .bks-pack-period,
  body.bks-print-mode .bks-pack-h,
  body.bks-print-mode .bks-stmt-row,
  body.bks-print-mode .bks-stmt-amt,
  body.bks-print-mode .bks-stmt-section,
  body.bks-print-mode .bks-table th,
  body.bks-print-mode .bks-table td,
  body.bks-print-mode .bks-footnote { color: #000 !important; }
  body.bks-print-mode .bks-stmt-total,
  body.bks-print-mode .bks-stmt-grand { border-color: #000; }
  body.bks-print-mode .bks-tb-grand td,
  body.bks-print-mode .bks-tb-subtotal td { border-color: #000; }
  body.bks-print-mode .bks-table td { border-bottom-color: #ddd; }
  body.bks-print-mode .bks-chip {
    background: none;
    border: 1px solid #000;
    color: #000;
  }
  body.bks-print-mode details { display: block; }
  body.bks-print-mode .bks-stmt-details > *:not(summary) { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   PROCUREMENT (prc-*) — v3.0p107. Finance requests + packaging
   control. Reuses bks-* tables/chips + mtx-input forms. No emojis.
   ══════════════════════════════════════════════════════════════════ */

/* Entry buttons (People OS header + Task OS My Work hero) */
.prc-req-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--accent, #d4ff3a);
  color: var(--accent, #d4ff3a);
  border-radius: 99px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.prc-req-btn:hover { background: var(--accent, #d4ff3a); color: var(--accent-text, #10130a); }
.prc-req-btn--sm { margin-top: 8px; align-self: flex-start; }

/* "Where did my request go?" — the requester's own open rows on the
   My Work hero (operator 2026-08-07: "I requested finance, no
   progress bar to see if it was received etc"). Quiet ledger lines,
   not cards; only pending/approved show — paid and rejected leave. */
.prc-mine { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.prc-mine__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  border-top: 1px solid var(--line-soft);
  padding-top: 5px;
}
.prc-mine__t {
  flex: 1;
  min-width: 0;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prc-mine__n { flex: none; color: var(--ink-dim); }
.prc-mine__s { flex: none; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.05em; text-transform: lowercase; }
.prc-mine__s--pending { color: var(--warn, #ffb347); }
.prc-mine__s--approved { color: var(--accent, #d4ff3a); }

/* Request sheet */
.prc-sheet-sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  line-height: 1.5;
}
.prc-quiet { font-size: 11px; color: var(--ink-mute); }
.prc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.prc-chip {
  appearance: none;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 99px;
  font-size: 11.5px;
  padding: 5px 11px;
  cursor: pointer;
}
.prc-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.prc-chip.on {
  background: var(--accent, #d4ff3a);
  border-color: var(--accent, #d4ff3a);
  color: var(--accent-text, #10130a);
  font-weight: 600;
}
.prc-chip-group {
  flex-basis: 100%;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.prc-kind-row { display: flex; gap: 8px; margin-bottom: 10px; }
.prc-kind-row .mtx-input { flex: 1 1 50%; }
.prc-lines { display: flex; flex-direction: column; gap: 6px; }
.prc-line {
  display: grid;
  grid-template-columns: 1fr 58px 86px 76px 26px;
  gap: 6px;
  align-items: center;
}
.prc-line .mtx-input { flex: none; width: 100%; }
.prc-line-total {
  font-size: 11.5px;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.prc-line-rm {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 15px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.prc-line-rm:hover { color: var(--danger); }
.prc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  border-top: 1px solid var(--line-soft);
  margin-top: 12px;
  padding: 10px 2px 2px;
}
.prc-total {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prc-notes { width: 100%; resize: vertical; margin: 8px 0 12px; }
.prc-success { text-align: center; padding: 18px 6px 6px; }
.prc-success-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ok);
  line-height: 1.45;
  margin-bottom: 8px;
}
.prc-success-m {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

/* Mobile 390px — line grid collapses to a two-row layout */
@media (max-width: 640px) {
  .prc-line { grid-template-columns: 1fr 54px 80px 64px 24px; }
  .prc-kind-row { flex-direction: column; }
}

/* ── Owner approval strip (Money page, above tab content) ───────── */
.prc-strip {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.prc-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.prc-strip-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.prc-strip-meta { font-size: 11px; color: var(--ink-mute); }
.prc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.prc-card {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 6px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.prc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.prc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prc-card-amt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prc-card-meta {
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.prc-card-lines {
  font-size: 11.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prc-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.prc-act-ok {
  border-color: var(--ok);
  color: var(--ok);
}
.prc-act-ok:hover { background: var(--ok-soft); }

/* Receipt drop zone */
.prc-drop {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg, 6px);
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  margin-bottom: 12px;
}
.prc-drop.over { border-color: var(--accent, #d4ff3a); color: var(--ink); }
.prc-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ── Packaging expandable ───────────────────────────────────────── */
.prc-pack {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 0 14px;
}
.prc-pack-sum {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.prc-pack-sum::-webkit-details-marker { display: none; }
.prc-pack-sum::after { content: '+'; float: right; color: var(--ink-faint); }
.prc-pack[open] .prc-pack-sum::after { content: '\2212'; }
.prc-pack-body { padding: 2px 14px 14px; }
.prc-pack-sec { margin-bottom: 16px; }
.prc-pack-sec:last-child { margin-bottom: 0; }
.prc-pack-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.prc-pack-store { margin-bottom: 12px; }
.prc-pack-store-h {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.prc-table-scroll { overflow-x: auto; }
.prc-recon-table { min-width: 560px; }
.prc-row-amber td { color: var(--warn); }
.prc-row-red td { color: var(--danger); }

/* Steppers (counts + bag override) */
.prc-steppers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.prc-step {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}
.prc-step-l {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prc-step-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  width: 24px;
  height: 24px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.prc-step-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.prc-step-v {
  width: 44px;
  text-align: center;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.prc-step-v::-webkit-outer-spin-button,
.prc-step-v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* SKU cost editor */
.prc-sku-row {
  display: grid;
  grid-template-columns: 1fr 110px 64px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.prc-sku-l { font-size: 12.5px; color: var(--ink); }

@media (max-width: 640px) {
  .prc-cards { grid-template-columns: 1fr; }
  .prc-sku-row { grid-template-columns: 1fr 90px 60px; }
}

/* ── Rep bag-confirm bar (CS workspace, post-order) ─────────────── */
.prc-bagbar {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  z-index: 1200;
  width: min(440px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: prc-bagbar-in 0.22s ease;
}
@keyframes prc-bagbar-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.prc-bagbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prc-bagbar-t {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prc-bagbar-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.prc-bagbar-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.prc-bagbar-yes {
  border-color: var(--accent, #d4ff3a);
  color: var(--accent, #d4ff3a);
}
.prc-bagbar-yes:hover {
  background: var(--accent, #d4ff3a);
  color: var(--accent-text, #10130a);
}
.prc-bagbar-x {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.prc-bagbar-x:hover { color: var(--ink); }
.prc-bagbar-edit { margin-top: 10px; }
.prc-bagbar-editrow { display: flex; align-items: center; gap: 10px; }
.prc-steppers--bar { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

@media (max-width: 640px) {
  .prc-bagbar { bottom: 76px; }
}

/* ── PR-4 (2026-07-06): CSV export on chat tables ──────────
 * Small pill in the top-right of every .md-table-wrap. Position is
 * relative-anchored so the pill stays put while the table scrolls
 * horizontally under it on narrow screens. */
.md-table-wrap { position: relative; }
.md-csv-btn {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 2;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute, #9ca3af);
  background: var(--surface, rgba(255,255,255,0.06));
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  border-radius: var(--r-pill, 4px);
  cursor: pointer;
  opacity: 0.75;
}
.md-csv-btn:hover {
  opacity: 1;
  color: var(--ink, #f5f5f5);
  border-color: var(--accent, #d4ff3a);
}

/* ── PR-7 (2026-07-06): two-row composer + deep-mode toggle ──
 * When the draft wraps past one line, .composer--tall reflows the
 * shell: textarea takes the full first row, the buttons drop to a
 * second row (attach left, mic/call/send right) — Gemini-style, so
 * long drafts never get squeezed by the button cluster. */
.composer--tall { flex-wrap: wrap; }
.composer--tall textarea {
  flex: 1 1 100%;
  order: -1;
}
.composer--tall .attach-btn { margin-right: auto; }

.chat-deep-btn.deep-on {
  color: var(--accent, #d4ff3a);
  border-color: var(--accent, #d4ff3a);
  background: color-mix(in srgb, var(--accent, #c0ff3a) 12%, transparent);
}

/* ── PR-8 (2026-07-06): welcome hero + sidebar search + reading rhythm ──
 * Operator re-direct same day: hero mark + tagline are GONE (one EON
 * symbol per page — the toolbar's); the greeting alone carries the
 * welcome — dynamic goofy copy set big, heavy and tight (the DESIGN
 * FLOW reference plates); starter chips stay quiet utility. */
.eon-hero-greet {
  font-family: var(--display);
  font-size: clamp(27px, 6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 480px;
  text-wrap: balance;
  color: var(--ink);
  margin-bottom: 6px;
  animation: eonHeroRise .6s cubic-bezier(.2,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .eon-hero-greet { animation: none; }
}
.eon-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  /* follows the empty-state's left alignment (align-items: flex-start
     on .chat-empty-state) — centering only the chips read as a seam */
  justify-content: flex-start;
}
.eon-hero-chip {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-soft, #c7cdc4);
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  border-radius: var(--r-pill, 4px);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.eon-hero-chip:hover {
  color: var(--ink);
  border-color: var(--accent, #d4ff3a);
}

.drawer-search {
  margin: 0 12px 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  border-radius: 10px;
  outline: none;
}
.drawer-search:focus { border-color: var(--line-strong, rgba(255,255,255,0.22)); }
.drawer-search::placeholder { color: var(--ink-mute); }

/* Reading rhythm: EON's answers are read, not scanned — a calmer
 * measure and taller leading. Wide screens cap the line length so
 * paragraphs never sprawl across a desktop bubble. */
.msg.eon .text {
  font-size: 15px;
  line-height: 1.62;
}
.msg.eon .text p { margin: 8px 0; }
@media (min-width: 900px) {
  .msg.eon .text { max-width: 68ch; }
}


/* ── Voice-parity pass (2026-07-12): live recording overlay ─────────
   Level meter (5 bars off the WebAudio analyser), rolling interim
   transcript (dimmed — Claude Code style), elapsed clock + mode hint. */
.rec-meter {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 30px;
  margin: 10px 0 2px;
}
.rec-meter span {
  width: 6px;
  height: 100%;
  background: currentColor;
  opacity: .85;
  border-radius: 3px;
  transform: scaleY(.18);
  transform-origin: bottom;
  transition: transform .14s ease;
}
.rec-transcript {
  max-width: min(560px, 84vw);
  min-height: 1.4em;
  max-height: 4.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  opacity: .62;              /* dimmed until finalized — CC behavior */
  text-align: center;
}
.rec-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
#rec-clock { opacity: .8; font-size: 12px; }

/* ── Wave-2 PR-A (2026-07-26): transaction register + budget sheets ── */
.mreg-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 340; display: flex; align-items: flex-end; justify-content: center; }
/* Vet 2026-07-27: a detail/budget/JE sheet opened over the register
   rendered at identical depth — later siblings stack above. */
.mreg-ov ~ .mreg-ov { z-index: 342; }
@media (min-width: 700px) { .mreg-ov { align-items: center; } }
.mreg-sheet { background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 16px 16px 0 0; width: 100%; max-width: 720px;
  max-height: 88vh; display: flex; flex-direction: column; padding: 16px; }
@media (min-width: 700px) { .mreg-sheet { border-radius: 16px; } }
.mreg-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.mreg-x { background: none; border: 0; color: var(--ink-mute); font-size: 16px;
  cursor: pointer; padding: 4px 8px; }
.mreg-search { width: 100%; margin-bottom: 10px; }
.mreg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mreg-chip { background: var(--bg-card); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: var(--r-pill, 4px); padding: 5px 12px;
  font-size: 12px; cursor: pointer; }
.mreg-chip.on { background: var(--accent); color: var(--accent-text);
  border-color: var(--accent); font-weight: 600; }
#mreg-body { overflow-y: auto; flex: 1; min-height: 120px; }
.mreg-row { display: flex; gap: 10px; align-items: center; width: 100%;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 9px 2px; cursor: pointer; color: var(--ink); }
.mreg-row:hover { background: var(--card-hover); }
.mreg-date { font-size: 11px; color: var(--ink-mute); flex: 0 0 74px; }
.mreg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mreg-desc { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mreg-sub { font-size: 11px; color: var(--ink-mute); display: flex; gap: 6px;
  align-items: center; overflow: hidden; }
.mreg-cat { border: 1px solid var(--line); border-radius: var(--r-pill, 4px); padding: 1px 7px; }
.mreg-cat.warn { color: var(--warn); border-color: var(--warn); }
.mreg-amt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mreg-amt.in { color: var(--ok); } .mreg-amt.out { color: var(--ink-dim); }
.mreg-foot { display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; }
.mreg-dbody { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.mreg-drow { display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; align-items: center; }
.mreg-drow > span:first-child { color: var(--ink-mute); flex: 0 0 110px; }
.mreg-drow > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mreg-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
  flex-wrap: wrap; }
.mreg-inbox { background: var(--accent-soft); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: var(--r-pill, 4px); padding: 3px 10px; font-size: 11px;
  cursor: pointer; }
.mreg-inbox.warn { color: var(--warn); border-color: var(--warn); }

/* Wave-2 PR-B: manual journal entry lines */
.bksje-line { display: grid; grid-template-columns: 1fr 90px 90px; gap: 6px; margin-bottom: 6px; }
@media (max-width: 420px) {
  /* Vet 2026-07-27: the account select got ~130px on small phones */
  .bksje-line { grid-template-columns: 1fr; }
  .bksje-line input { max-width: 140px; }
}

/* ── Bank ↔ Books card (Wave-2 PR-B2) ─────────────────────────── */
.bks-rec-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 8px; font-size: 13px; color: var(--ink-dim); }
.bks-rec-grid { display: flex; flex-direction: column; }
.bks-rec-row { display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 56px 1fr auto minmax(84px, auto);
  gap: 8px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; }
.bks-rec-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bks-rec-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bks-rec-lines { color: var(--ink-mute); }
.bks-rec-last { color: var(--ink-mute); font-family: var(--mono);
  font-size: 11px; text-align: right; }
.bks-rec-unex { background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--line); border-radius: var(--r-pill, 4px); padding: 3px 10px;
  font-size: 11.5px; cursor: pointer; }
.bks-rec-clean { color: var(--ok); font-size: 11.5px; }
.bks-rec-oos { color: var(--ink-mute); font-size: 11.5px; }

/* ── Money engine (2026-09-02): the Books truth line, the close report,
   the scored projection card. Flat, one ink, a 7px pip carries state
   (ok / warn / bad / mute) so the line reads at a glance. Lives ABOVE
   the house-floor markers on purpose — a classic-skin surface, never a
   floor edit. ── */
.bks-truth { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 6px;
  font-size: 12px; color: var(--ink-dim); }
.bks-truth-item { display: inline-flex; align-items: center; gap: 7px; }
.bks-truth-item::before { content: ''; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ink-mute); }
.bks-truth-ok::before { background: var(--ok); }
.bks-truth-warn::before { background: var(--warn); }
.bks-truth-bad::before { background: var(--bad); }
.bks-truth-mute { color: var(--ink-mute); }
.bks-close-report { margin: 4px 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); font-size: 12.5px; }
.bks-close-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 6px; font-weight: 600; }
.bks-close-row { display: grid; grid-template-columns: 28px minmax(160px, 1fr) auto;
  gap: 4px 10px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid var(--line-soft); }
.bks-close-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; }
.bks-close-ok { color: var(--ok); }
.bks-close-gap { color: var(--bad); }
.bks-close-unk { color: var(--ink-mute); }
.bks-close-detail { grid-column: 2 / -1; margin: 0; color: var(--ink-dim);
  font-size: 12px; line-height: 1.45; }
.prj-score { display: grid; grid-template-columns: repeat(3, auto minmax(0, 1fr));
  gap: 2px 10px; align-items: baseline; margin: 2px 0 10px; }
.prj-score-n { font-size: 18px; font-weight: 700; }
.prj-score-l { font-size: 11.5px; color: var(--ink-dim); }
@media (max-width: 560px) {
  .prj-score { grid-template-columns: auto minmax(0, 1fr); }
}
.bks-rec-drillhead { margin-top: 12px; padding: 8px 0 4px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); border-top: 1px solid var(--line); }
.bks-rec-line { display: grid;
  grid-template-columns: 84px 1fr auto auto; gap: 8px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.bks-rec-ldate { font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute); }
.bks-rec-lwho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bks-rec-lamt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bks-rec-lamt.neg { color: var(--danger); }
.bks-rec-lamt.pos { color: var(--ok); }
.bks-rec-lact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bks-rec-bridge, .bks-rec-ignore, .bks-rec-whygo {
  border: 1px solid var(--line); background: transparent; color: var(--ink-dim);
  border-radius: var(--r-md, 4px); padding: 4px 10px; font-size: 11.5px; cursor: pointer; }
.bks-rec-bridge { border-color: var(--accent); color: var(--accent); }
.bks-rec-bridge:disabled, .bks-rec-whygo:disabled { opacity: .5; cursor: default; }
.bks-rec-whywrap { display: inline-flex; gap: 6px; align-items: center; }
.bks-rec-why { background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-md, 4px); padding: 4px 8px; font-size: 12px;
  width: 150px; }
@media (max-width: 640px) {
  .bks-rec-row { grid-template-columns: 1fr auto auto; }
  .bks-rec-lines, .bks-rec-last { display: none; }
  .bks-rec-line { grid-template-columns: 70px 1fr; }
  .bks-rec-lact { grid-column: 1 / -1; }
}

/* Self-transfer pairs preview (Answer Desk WS-B) */
.bks-rec-headbtns { display: inline-flex; gap: 6px; align-items: center; }
.bks-rec-pair { display: grid;
  grid-template-columns: auto 1fr auto minmax(96px, auto); gap: 8px;
  align-items: center; padding: 7px 0;
  border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.bks-rec-pairkind { border: 1px solid var(--line); border-radius: var(--r-pill, 4px);
  padding: 2px 9px; font-size: 11px; color: var(--ink-dim);
  white-space: nowrap; }
.bks-rec-pairkind-owner_draw { color: var(--warn);
  background: var(--warn-soft); }
.bks-rec-pairkind-capital_injection { color: var(--ok); }
.bks-rec-pairroute { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bks-rec-pairmeta { color: var(--ink-mute); font-family: var(--mono);
  font-size: 11px; text-align: right; }
.bks-rec-pairnote { color: var(--ink-mute); font-size: 12px;
  padding: 6px 0 0; }
.bks-rec-pairact { padding-top: 10px; }
@media (max-width: 640px) {
  /* chip + amount on the first row, the route (the fact that matters
     on a draw) wraps full-width beneath — never truncated away */
  .bks-rec-pair { grid-template-columns: auto 1fr; }
  .bks-rec-pairkind { grid-row: 1; }
  .bks-rec-lamt { grid-row: 1; grid-column: 2; justify-self: end; }
  .bks-rec-pairroute { grid-row: 2; grid-column: 1 / -1;
    white-space: normal; }
  .bks-rec-pairmeta { display: none; }
}

.bks-empty { color: var(--ink-mute); font-size: 13px; padding: 10px 0; }
/* Vet 2026-07-27: error ≠ empty — failed cards say so and offer retry */
.bks-error { color: var(--warn); font-size: 13px; padding: 10px 0;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bks-confirming { border-color: var(--warn) !important; color: var(--warn) !important; }
.bks-locked-strip { display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; font-size: 12.5px; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 10px;
  padding: 8px 10px; margin-top: 8px; }

/* Law watch (mig 529): weekly tax-law sweep strip on the Tax tab */
.mtx-lawwatch-card { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg, 6px); padding: 12px 14px; margin: 10px 0 4px; }
.mtx-lawwatch-head { display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600;
  font-size: 13px; margin-bottom: 6px; }
.mtx-lawwatch-sum { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 8px; }
.mtx-lawwatch-item { display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; padding: 4px 0; }
.mtx-lawwatch-line { min-width: 0; overflow-wrap: anywhere; }
.mtx-lawwatch-line a { color: var(--accent); }

/* ── Books export sheet (Wave-2 PR-C) ─────────────────────────── */
.bks-export-sheet { position: absolute; z-index: 30; margin-top: 6px;
  right: 0; max-width: min(320px, calc(100vw - 24px));
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg, 6px); padding: 10px 12px; min-width: 260px;
  display: flex; flex-direction: column; gap: 2px; }
.bks-export-row:disabled { opacity: .45; cursor: progress; }
.bks-export-head { font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); padding: 2px 4px 8px; }
.bks-export-row { display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 6px; border-radius: var(--r-md, 4px); color: var(--ink); font-size: 13px;
  text-decoration: none; }
.bks-export-row:hover { background: var(--accent-soft); }
.bks-export-kind { font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); }
.bks-export-mail { display: flex; gap: 8px; padding: 8px 4px 2px;
  border-top: 1px solid var(--line); margin-top: 6px; }
.bks-export-mail input { flex: 1; background: var(--bg); border: 1px solid
  var(--line); color: var(--ink); border-radius: var(--r-md, 4px); padding: 6px 10px;
  font-size: 12.5px; }
.bks-export-note { font-size: 11px; color: var(--ink-mute); padding: 4px; }

.bks-toolbar-actions { position: relative; }

/* Motion pass 2 (2026-07-26, operator: "advanced app ... use webgl") —
   the EON chat home hero wash (aurora anchor #9). Behind the greeting
   only; gone the moment a conversation renders. */
.eon-hero{ position:relative; }
.eon-hero-wash{
  position:absolute; left:-16px; right:-16px; top:6vh; height:46%;
  z-index:-1; opacity:.42; pointer-events:none;
  -webkit-mask-image:radial-gradient(80% 90% at 50% 40%, #000, transparent 78%);
  mask-image:radial-gradient(80% 90% at 50% 40%, #000, transparent 78%);
}

/* ── Brief: stepped project walk (2026-07-27) ──────────────────────
   The brief reads as six numbered steps; each closed <summary> line
   already answers its question, expanding is opt-in. A hairline rail
   threads the number chips so the page reads as one project, not a
   stack of unrelated cards. Tokens only — holds in dark/light/flow. */
.brief-steps { position: relative; }
.brief-steps::before {
  content: ''; position: absolute; left: 29px; top: 18px; bottom: 18px;
  width: 1px; background: var(--line-soft); pointer-events: none;
}
.brief-step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  transition: border-color var(--transition-fast);
}
.brief-step[open] { border-color: var(--line); }
.brief-step-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.brief-step-sum::-webkit-details-marker { display: none; }
.brief-step-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--accent); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-pill, 4px);
  padding: 3px 8px; flex: none; position: relative; z-index: 1;
}
.brief-step-t { font-size: 13.5px; font-weight: 600; min-width: 0; }
.brief-step-a {
  display: block; font-size: 12px; font-weight: 400;
  color: var(--ink-soft); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brief-step-chev {
  margin-left: auto; flex: none; color: var(--ink-mute);
  font-size: 11px; transition: transform 0.18s ease;
}
.brief-step[open] .brief-step-chev { transform: rotate(180deg); }
.brief-step-body { padding: 0 16px 14px; }

/* ── Chat-built widgets: table type + multi-series legend (p513) ── */
.widget-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft); border-radius: var(--r-md, 4px);
}
.widget-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  min-width: 320px;
}
.widget-table th {
  position: sticky; top: 0; text-align: left;
  font-size: 10.5px; text-transform: capitalize; letter-spacing: 0.02em;
  color: var(--ink-soft); background: var(--bg-card);
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.widget-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.widget-table tr:last-child td { border-bottom: none; }
.widget-td-num {
  display: block; text-align: right;
  font-family: var(--mono); font-size: 11.5px;
}
.widget-table td:has(> .widget-td-num) { text-align: right; }
.widget-td-null { color: var(--ink-mute); }
.widget-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  font-size: 11px; color: var(--ink-soft);
}
.widget-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.widget-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}

/* ── Wave-3b: TaskOS parity + Recurring roster ─────────────────── */
.tos-danger { color: var(--danger); border-color: var(--danger); }
.tos-cmt { display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.tos-cmt__who { font-weight: 600; white-space: nowrap; }
.tos-cmt__body { color: var(--ink-dim); overflow-wrap: anywhere; }
.tos-cmt__when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); }
.tos-cmt__form { display: flex; gap: 8px; margin-top: 8px; }
.tos-cmt__form input, .tos-cancel input, .tos-edit input, .tos-edit select {
  flex: 1; width: 100%; background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-md, 4px); padding: 7px 10px; font-size: 13px; }
.tos-edit__l { display: block; font-size: 11px; color: var(--ink-mute);
  margin-top: 8px; }
.tos-edit__l:first-child { margin-top: 0; }
.tos-rec__head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 12.5px; color: var(--ink-dim); padding-bottom: 8px; }
.tos-rec { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--line); }
.tos-rec--off { opacity: .55; }
.tos-rec__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tos-rec__t { font-size: 13.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tos-rec__meta { font-size: 11.5px; color: var(--ink-mute); }
.tos-rec__pill { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 9px; border-radius: var(--r-pill, 4px);
  border: 1px solid var(--line); }
.tos-rec__pill.on { color: var(--ok); background: var(--ok-soft); }
.tos-rec__pill.off { color: var(--ink-mute); }

/* ── Settlement truth card (bank-rec v2) ───────────────────────── */
.bks-setl-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 12.5px; color: var(--ink-dim); padding-bottom: 8px; }
.bks-setl-row { display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.bks-setl-store { font-weight: 600; }
.bks-setl-row .mono { font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-mute); }
.bks-setl-gap { color: var(--ok); }
.bks-setl-row.gap .bks-setl-gap { color: var(--danger); }
/* "Can't tell yet" is its own state, and it must not borrow either of
   the other two colours. Green would call an unread account clean; red
   would accuse a store of a gap made entirely of statements that have
   not arrived. Muted and italic reads as withheld, which is the truth. */
.bks-setl-row.blind .bks-setl-gap,
.bks-setl-blind { color: var(--ink-mute); font-style: italic; }
.bks-setl-row.blind { opacity: 0.82; }
@media (max-width: 640px) { .bks-setl-row { grid-template-columns: 1fr auto; }
  .bks-setl-row .mono:nth-child(2) { display: none; } }

/* ── System Audit · house documents (2026-08-03) ──────────────────────
   The rules the work is designed from. Same truth-card chassis as the
   panels above; the only new note is the fingerprint line, which is
   deliberately quiet — it is proof, not a headline. */
.sa-book { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sa-book-card .sa-book-what { margin-top: 6px; opacity: .85; }
.sa-book-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mk-ads3 .sa-book-fp { font-size: 10.5px; letter-spacing: .06em; opacity: .55; }
/* these two fight .mk-ads3 .sa-truth-d and .mk-ads3 .sa-chip (both 0-2-0),
   so they must carry the ancestor too — without it the chip rendered grey
   and the source line kept the 12px body size (caught in verify) */
.mk-ads3 .sa-book-src { margin-top: 8px; font-size: 10.5px; opacity: .45; word-break: break-all; }
.mk-ads3 .sa-chip.sa-book-new { background: rgba(200,255,77,.14); border: 1px solid rgba(200,255,77,.45); color: var(--a3-lime, #c8ff4d); }

/* The design-gate panel's CSS (2026-08-07) lived here until 2026-08-29
   — the panel left the audit page by operator directive; the CI gate
   itself (ci/design_verdicts/ + guards) stands. */
/* ── Native dropdown popups — READ THIS BEFORE STYLING A <select> ─────
   Operator video 2026-08-07 (reps' Windows laptops, Inventory → Counts):
   every dropdown opened as a tall BLANK white panel. Only the row under
   the cursor was legible.

   Why: a <select> popup is painted by the browser, not the page. Our
   selects set a light --ink/--ivo-tx colour on a dark background; the
   <option> children INHERIT that near-white colour but get no background
   of their own (computed: color rgb(244,244,242), background transparent).
   Windows/Linux Chromium paints the popup on the system WHITE surface →
   white-on-white, invisible. Only the highlighted row (system blue fill)
   showed. macOS draws the popup with the native menu and ignores page
   colour entirely, which is exactly why this survived every review: the
   app is built on a Mac and counted on Windows.

   Fix is global and lives here because every surface that renders a
   <select> loads app.css. `color-scheme` tells the browser to paint the
   popup — and its scrollbar — in the right skin; the explicit option
   colours are the belt for engines that still inherit the page colour.
   Do NOT re-solve this per page: before 2026-08-07 there were 136
   `select` rules across 17 stylesheets and ZERO `option` rules. */
[data-theme="dark"], [data-theme="house"] { color-scheme: dark; }
[data-theme="light"], [data-theme="flow"] { color-scheme: light; }

select option,
select optgroup {
  background-color: var(--bg-card, #16161a);
  color: var(--ink, #f4f4ee);
}

/* ── shell bell (relay R0 item 6) ──────────────────────────
   render() returns early for the full-screen shells WITHOUT the app
   header, so Staff OS and Task OS — the two surfaces a staffer
   actually lives in — have never carried a bell. A task ping could
   name where it happened and still have nowhere to be tapped.
   Docked, not a header: the shells own their chrome. Sized on the
   44px touch floor. */
.shell-bell {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  /* Above .sos-root (z-index 1000) and .tos-shell (40) — a bell the
     shell paints over is a bell that does not exist. */
  z-index: 1200;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #2a2a2e);
  border-radius: 999px;
  background: var(--bg-card, #16161a);
  color: var(--ink, #f4f4ee);
  cursor: pointer;
}
.shell-bell .badge {
  position: absolute;
  top: 2px;
  right: 2px;
}
/* The panel the shell bell opens rides the same stack, and FIXED — the
   shells scroll their own interior, so an absolutely-positioned panel
   would sit at the document top while the reader is 800px down. */
.notif-panel--shell {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  z-index: 1199;
}
.notif-item.notif-link { cursor: pointer; }

/* Shared notification reader: one panel in header and full-screen shells. */
.notif-panel {
  position:fixed; width:400px; display:flex; flex-direction:column;
  max-height:calc(var(--app-height,100dvh) - 88px); box-sizing:border-box;
}
.notif-head {padding:10px 12px 10px 18px;gap:10px;flex-shrink:0;flex-wrap:wrap}
.notif-head h2 {margin:0;font:600 14px/1.4 var(--font,Archivo,sans-serif);letter-spacing:.01em;text-transform:none}
.notif-head-actions {display:flex;align-items:center;gap:6px;margin-left:auto}
.notif-close,.notif-mark-read,.notif-panel .alert-dismiss {
  min-width:44px;min-height:44px;box-sizing:border-box;border:1px solid transparent;
  background:transparent;color:var(--ink);cursor:pointer;font:500 14px/1.3 var(--font,Archivo,sans-serif);
  border-radius:10px;padding:10px;transition:background .18s,border-color .18s;
}
.notif-close {display:inline-flex;align-items:center;justify-content:center;padding:12px}
.notif-close svg {width:18px;height:18px}
.notif-mark-read {color:var(--accent,#d4ff3a);text-decoration:none}
.notif-panel .alert-dismiss {padding-inline:0;color:var(--ink-soft);margin-top:4px}
.notif-close:hover,.notif-mark-read:hover,.notif-panel .alert-dismiss:hover {background:var(--accent-soft,#ffffff0a);border-color:var(--line);text-decoration:none}
.notif-panel :is(button,[role=link]):focus-visible {outline:2px solid var(--accent,#d4ff3a);outline-offset:2px}
.notif-list {min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
.notif-item .t {flex-wrap:wrap;overflow-wrap:anywhere;line-height:1.5}
.notif-item .b {overflow-wrap:anywhere;font-size:14px;line-height:1.55}
.notif-coverage {margin:0;padding:12px 18px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:12px;line-height:1.5;flex-shrink:0}
.notif-panel>.empty {overflow:auto;min-height:0}
@media(max-width:620px) {
  .notif-panel,.notif-panel.notif-panel--shell {
    top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--keyboard-inset,0px));
    right:12px;left:12px;width:auto;max-width:none;
    max-height:calc(var(--app-height,100dvh) - 32px);border-radius:20px;
    animation:notifSheetIn .2s cubic-bezier(.2,0,0,1);
  }
}
@keyframes notifSheetIn {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
[data-living-motion=paused] .notif-panel,[data-living-motion=paused] .notif-panel * {animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce) {.notif-panel,.notif-panel *{animation:none!important;transition:none!important}}

/* ==========================================================
   THE RELAY — the shared vocabulary of the three rooms
   (rooms build 2026-08-13). Design contract: the approved
   artifact "THE RELAY — the rooms it lands in", amended into
   docs/house/floors/6-job-board-tasks.html and
   docs/house/floors/1-crew-room-staff-os.html.

   THE CLOCK, THE LADDER AND THE BYLINE READ THE SAME in all
   three rooms — the Job Board card, the Crew Room ask and the
   team-wire chip — which is why they live HERE and not in any
   one room's stylesheet. A fourth vocabulary is how one of them
   starts telling a different story about the same row.

   Deliberately ABOVE the floor-4 marker: this is the classic
   cascade every theme reads, not a house-scoped treatment. The
   relay is dark by default and these rules only ever have a
   subject once the operator arms EON_RELAY — with the flag off
   the server sends no relay key and nothing below is rendered.

   NOT IN cs.css. The CS rep desk (floor 3) is excluded from
   this contract by operator order; the team wire is the STAFF
   team lens, and its chip is styled from here so floor 3's
   stylesheet is never touched.
   ========================================================== */
/* 10.5px IS THE FLOOR, AND IT IS THE STAFF OS'S FLOOR. This vocabulary
   is painted from here INSIDE `.sos-root`, and the floor's own gate
   (tests/test_design_staffos_2026_07_12) greps staff_os.css — so it is
   structurally blind to a rule that lives in this file and renders in
   that shell. Measured in a browser 2026-08-14: eight text nodes under
   the floor (clock 10px x3, EON byline 9.5px x2, ladder 9px x3). Raised
   HERE rather than overridden under `.sos-root`, because a scoped
   override would be a fourth vocabulary — the clock would stop reading
   the same in all three rooms, which is the one thing this block
   exists to guarantee. */
.rl-clock {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  line-height: 1.4; white-space: nowrap; padding: 1px 6px;
  border-radius: 3px; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
/* SETTLED IS NOT AN ACT. The clock used to wear `--accent` here — a
   THIRD green in a card that already carried `--lime` on its one act
   and `--accent` on a non-interactive chip. `--eon-ok` is the single
   token every measured/settled state in the three rooms now uses
   ("done / live" in the palette): outlined for acknowledged, filled for
   closed. The lime belongs to Acknowledge and to nothing else — one
   lime act per screen is the house law, and a stopped clock is not an
   act, it is a reading. */
.rl-clock--stopped {
  color: var(--eon-ok); font-weight: 600;
  border-color: color-mix(in srgb, var(--eon-ok) 55%, transparent);
  background: color-mix(in srgb, var(--eon-ok) 12%, transparent);
}
.rl-clock--over {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
/* The byline. "Task OS" stops signing other people's work. */
.rl-from {
  display: block; font-size: 11px; color: var(--ink-dim);
  margin: 3px 0 6px; line-height: 1.35;
}
.rl-from i { font-style: normal; color: var(--ink-mute); }
.rl-from .rl-eon {
  color: var(--ink); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .04em;
}
/* The ladder, DRAWN: on-shift -> dept head -> Operations. The last pip
   is danger-coloured because there is nowhere above the operator. */
.rl-rung {
  display: flex; align-items: center; gap: 3px; margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute);
}
.rl-rung i {
  width: 14px; height: 4px; border-radius: 2px;
  background: var(--line); font-style: normal; flex: none;
}
.rl-rung i.lit { background: var(--warn); }
.rl-rung i.top { background: var(--danger); }
.rl-rung em { font-style: normal; margin-left: 4px; }

/* THE TEAM WIRE's chip — a citizen of the conversation, not a
   takeover. It sits in the staff team transcript (#csw-team-script),
   never in the customer pane. */
.rlw-chip {
  align-self: flex-start; max-width: min(440px, 95%);
  margin: 2px 0; padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--r-sm); background: var(--bg-card);
}
.rlw-chip__no {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px;
}
.rlw-chip__tid { color: var(--accent); }
.rlw-chip p { font-size: 13px; color: var(--ink); line-height: 1.4; }
.rlw-chip__row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 7px;
}
.rlw-chip__own, .rlw-chip__st {
  font-family: var(--mono); font-size: 9.5px; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink-mute);
  white-space: nowrap;
}
/* ONE SETTLED TOKEN, TWO WEIGHTS. `--eon-ok` for both, outlined when
   the ask is acknowledged and filled when it has closed — so the wire's
   chip and the Crew Room's chip and the clock all say "settled" in the
   same colour, and none of them borrows the act's lime. */
.rlw-chip__st--ok {
  color: var(--eon-ok);
  border-color: color-mix(in srgb, var(--eon-ok) 45%, transparent);
}
.rlw-chip__st--back {
  color: var(--eon-on-accent); background: var(--eon-ok);
  border-color: var(--eon-ok); font-weight: 600;
}
/* 44px TAP FLOOR — measured, not asserted. The CS desk shipped a 40px
   control the week before this and had to ship it twice. */
.rlw-chip__open {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 10px; font-family: var(--mono); font-size: 10px;
  color: var(--ink-dim); text-decoration: underline;
}

/* ==========================================================
   HOUSE floor 4 — THE FRONT DESK (WS-E, 2026-08-07)
   The operator home page as the building's front desk.
   Approved mockup: EON HOUSE artifact d6ad9394.

   HARD INVARIANT (flow convention): every rule below is scoped
   [data-theme="house"] — Classic/Light/Flow render byte-identical
   with this section present. scripts/verify_house_floor.py and
   tests/test_house_front_desk.py parse from this banner to EOF and
   fail on any unscoped selector, any un-namespaced keyframe, and any
   font-family that does not go through var(--display)/var(--mono)
   (operator font law, 2026-08-06: Archivo only).

   Grammar: tokens only. Ground var(--bg), card var(--bg-card),
   hairlines var(--line-soft), ink var(--ink)/var(--ink-mute).
   FLAT LAW — hairline borders, squared corners, no glow, no shadow.
   Numbers are always var(--mono) + tabular-nums. The accent is THE
   act and it is spent once: the store name in the ticker.
   ========================================================== */

/* ── 1 · the hero reads as a till total ───────────────────── */
/* Archivo 900 narrowed to 'wdth' 75 — a counter display, not a
   headline. _homeCountUp still settles the figure; no house JS. */
[data-theme="house"] .mk-home3 .mh-hero-fig,
[data-theme="house"] .mk-home3 .mh-hero-fig .hero-num-val {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 75;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 2 · the tills — the four shops, directly under the hero ── */
/* 90% of CRUX revenue walks through a store door; the stores are not
   a tile ninth down a list. The Locations tile is skipped under this
   skin (app.js), so its two doors ride the strip instead. */
[data-theme="house"] #house-desk-slot { display: block; margin: 10px 0 14px; }

[data-theme="house"] .hs-desk {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 13px 16px 12px;
}
[data-theme="house"] .hs-desk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}
[data-theme="house"] .hs-desk-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-decoration: none;
}
[data-theme="house"] .hs-desk-link:hover { color: var(--ink); }
[data-theme="house"] .hs-desk-none {
  padding: 16px 0 6px;
  font-size: 13px;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-desk-foot { padding-top: 11px; }
[data-theme="house"] .hs-desk-ask { border-radius: 0; }

[data-theme="house"] .hs-tills { display: flex; align-items: stretch; }
[data-theme="house"] .hs-till {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 13px 2px;
  border-left: 1px solid var(--line-soft);
}
[data-theme="house"] .hs-till:first-child { border-left: 0; padding-left: 0; }

/* the bar is share-of-the-largest-till, nothing more — a column, never a
   slab: the revenue figure is the number the operator reads, the bar only
   ranks it */
[data-theme="house"] .hs-till-bar {
  display: flex;
  align-items: flex-end;
  height: 46px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
}
[data-theme="house"] .hs-till-bar i {
  display: block;
  width: 42px;
  max-width: 100%;
  height: var(--hs-h, 6%);
  background: var(--ink);
  border-radius: 0;
  opacity: 0.17;
  transition: height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
[data-theme="house"] .hs-till:first-child .hs-till-bar i { opacity: 0.42; }
/* pour → grow (2026-08-29): the desk renders with hs-pour holding every
   bar at 6%; _deskArrive releases it one frame later and the columns
   rise to their share. The same height transition then carries the 90s
   tick — a till whose money moved RISES instead of being rebuilt. */
[data-theme="house"] .hs-desk.hs-pour .hs-till-bar i { height: 6%; }

[data-theme="house"] .hs-till-name {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="house"] .hs-till-rev {
  margin-top: 7px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--ink);
}
/* the figure that moved says so once — a fade back from the accent, on
   the number itself, only when the 90s tick changed it */
[data-theme="house"] .hs-till-rev.hs-rang { animation: hs-till-rang 0.9s ease; }
@keyframes hs-till-rang {
  from { color: var(--accent); }
  to   { color: var(--ink); }
}
[data-theme="house"] .hs-till-n {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-till-d {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 0;
}
[data-theme="house"] .hs-till-d.up { color: var(--ok); border-color: var(--ok); }
[data-theme="house"] .hs-till-d.down { color: var(--danger); border-color: var(--danger); }

/* ── 3 · the ticker — the room's ONE moving part ───────────── */
[data-theme="house"] .hs-tick {
  margin-top: -1px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
}
[data-theme="house"] .hs-tick-rail {
  display: flex;
  width: max-content;
  animation: hs-desk-tick 52s linear infinite;
}
[data-theme="house"] .hs-tick:hover .hs-tick-rail,
[data-theme="house"] .hs-tick:focus-within .hs-tick-rail { animation-play-state: paused; }
[data-theme="house"] .hs-tick-run { display: flex; }
[data-theme="house"] .hs-tick-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 18px;
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
  font-size: 12px;
}
[data-theme="house"] .hs-tick-at {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-tick-store {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
[data-theme="house"] .hs-tick-amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
[data-theme="house"] .hs-tick-what { color: var(--ink-mute); }
[data-theme="house"] .hs-tick-rep { color: var(--ink-mute); }
[data-theme="house"] .hs-tick-rep::before { content: '· '; }

/* reduced motion / no orders: the same facts, standing still */
[data-theme="house"] .hs-tick--still { display: flex; flex-direction: column; }
[data-theme="house"] .hs-tick--still .hs-tick-cell {
  border-right: 0;
  border-bottom: 1px solid var(--line-soft);
}
[data-theme="house"] .hs-tick--still .hs-tick-cell:last-child { border-bottom: 0; }
[data-theme="house"] .hs-tick--empty { padding: 10px 16px; }
[data-theme="house"] .hs-tick-none { font-size: 12px; color: var(--ink-mute); }

@keyframes hs-desk-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* an order LANDS (2026-08-29): when the 90s tick finds rows that were
   not on the tape, the ticker restarts with them in front and each new
   cell carries this one-shot flash — the accent spent on the act of a
   sale arriving, nothing else. */
[data-theme="house"] .hs-tick-cell--new { animation: hs-tick-land 1.1s ease; }
@keyframes hs-tick-land {
  /* rgba twin of var(--accent) #d4ff3a for engines without color-mix;
     the tokened line below wins where it parses (floor-4 verifier:
     the wash must survive an accent change) */
  from { background: rgba(212, 255, 58, 0.14); }
  to   { background: transparent; }
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  @keyframes hs-tick-land {
    from { background: color-mix(in srgb, var(--accent) 14%, transparent); }
    to   { background: transparent; }
  }
}

/* ── 4 · the pace band — the ring laid flat ────────────────── */
[data-theme="house"] .hs-band { flex: 1 1 auto; min-width: 0; }
[data-theme="house"] .hs-band-fig { display: flex; align-items: baseline; gap: 5px; }
[data-theme="house"] .hs-band-pct {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 75;
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}
[data-theme="house"] .hs-band-u {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-band-cap {
  margin-left: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-band-track {
  position: relative;
  height: 14px;
  margin: 13px 0 18px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 0;
}
[data-theme="house"] .hs-band-fill {
  height: 100%;
  width: var(--hs-w, 0%);
  background: var(--ok);
  border-radius: 0;
  opacity: 0.55;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}
/* the sweep plays on a fresh paint only: hs-pour holds the fill at zero
   until _bandSettle releases it. Under the 90s tick's .tick-still the
   transition is off, so a re-render snaps to the new width instead of
   replaying a 1.1s sweep while the operator reads. */
[data-theme="house"] .hs-band.hs-pour .hs-band-fill { width: 0%; }
[data-theme="house"] .tick-still .hs-band-fill { transition: none; }
[data-theme="house"] .tick-still .hs-stamp.hs-stamp-in { animation: none; }
[data-theme="house"] .hs-band.ahead .hs-band-fill { opacity: 1; }
[data-theme="house"] .hs-band.behind .hs-band-fill { background: var(--warn); opacity: 1; }
/* the notch is a hard mark, never a gradient — "expected today" is a
   fact with one position */
[data-theme="house"] .hs-band-notch {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 0;
  border-left: 2px solid var(--ink);
}
[data-theme="house"] .hs-band-notch-l {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* the target tile's hero row was built around a 120px dial — the band
   takes the row's width instead */
[data-theme="house"] .mk-home3 .mh-target-hero { align-items: flex-start; }

/* ── 5 · narrow screens ────────────────────────────────────── */
@media (max-width: 640px) {
  [data-theme="house"] .hs-tills { flex-wrap: wrap; }
  [data-theme="house"] .hs-till {
    flex: 1 1 46%;
    padding: 12px 10px 2px;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  [data-theme="house"] .hs-till:first-child { padding-left: 10px; }
  [data-theme="house"] .hs-till-bar { height: 42px; }
  [data-theme="house"] .hs-band-pct { font-size: 28px; }
}

/* ── 6 · reduced motion: the desk stands still ─────────────── */
/* The JS already renders a static list when EONHouse.reduced is set at
   render time; this catches an OS setting flipped after that render.
   The 2026-08-29 movers go still too: bars and the pace fill arrive at
   their settled state, landings and the rang flash do not play. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="house"] .hs-tick-rail { animation: none; }
  [data-theme="house"] .hs-till-bar i { transition: none; }
  [data-theme="house"] .hs-band-fill { transition: none; }
  [data-theme="house"] .hs-tick-cell--new { animation: none; }
  [data-theme="house"] .hs-till-rev.hs-rang { animation: none; }
}

/* ==========================================================
   HOUSE floor I — The Vault (WS-I, 2026-08-07)
   The money page as the building's vault. Approved design:
   docs/house/floors/8-vault-money.html.

   The room's job is ONE question — "am I safe?" — so safety
   answers first: days of cash, cash on hand, the next
   obligation, standing across the top as a wall before any
   P&L pride. The experiments move one drawer deeper (the
   Workbench tab). The register reads as a receipt printer and
   prints — the room's single kinetic signature.

   HARD INVARIANT (flow convention): every rule below is scoped
   [data-theme="house"] — Classic/Light/Flow render byte-identical
   with this section present. scripts/verify_house_floor.py and
   tests/test_house_vault.py parse from this banner to EOF and fail
   on any unscoped selector, any un-namespaced keyframe, and any
   font-family that does not go through var(--display)/var(--mono)
   (operator font law, 2026-08-06: Archivo only).

   FLAT LAW — hairline borders, squared corners, no glow, no
   shadow. Every number var(--mono) + tabular-nums. ONE accent,
   spent once: the "+ log a line" key on the register head.
   Semantic colour stays reserved — --ok mint, --warn amber,
   --danger red — and rides in on the tone-* classes the existing
   hydrators already set.
   ========================================================== */

/* ── 1 · the safety wall — the answer, before the scroll ───── */
/* Three panels, hairline-divided, across the full width. Same
   node ids as the classic tiles: this is hierarchy, not new
   plumbing. */
[data-theme="house"] .hs-vault-safety {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 10px 0 14px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
}
[data-theme="house"] .hs-vault-panel {
  background: var(--bg-card);
  border: 0;
  border-radius: 0;
  padding: 15px 17px 16px;
}
[data-theme="house"] .hs-vault-panel .mini-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* the figure is the loudest thing in the room */
[data-theme="house"] .hs-vault-panel .mini-num {
  margin-top: 9px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* the floorline — "vs 60d floor · +12d", "Payroll · 9 days …" */
[data-theme="house"] .hs-vault-panel .mini-sub {
  margin-top: 7px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* everything that is not safety drops a rank: net profit, the
   revenue/expenses pair and net cashflow read quieter below */
[data-theme="house"] .hs-vault-rest .money-kpi-hero .hero-num {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 75;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
[data-theme="house"] .hs-vault-rest .money-kpi {
  border-radius: 0;
}
/* FLAT LAW + one-signature: no lift on hover, nothing here moves */
[data-theme="house"] .hs-vault-panel:hover,
[data-theme="house"] .hs-vault-rest .money-kpi:hover {
  transform: none;
}
/* (.money-kpi-stats is display:contents, so the band still carries
   four grid items — hero · revenue · expenses · flow — and the base
   4-up rule at 1040px fills it exactly. No override needed.) */

/* ── 2 · the wall and the register, side by side ───────────── */
[data-theme="house"] .hs-vault-cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}
[data-theme="house"] .hs-vault-col { min-width: 0; }
[data-theme="house"] .hs-vault-col-reg { position: sticky; top: 8px; }
[data-theme="house"] .hs-vault-trace {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* ── 3 · the receipt printer ───────────────────────────────── */
[data-theme="house"] .hs-vault-print {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  overflow: hidden;
}
[data-theme="house"] .hs-vault-print-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 2px solid var(--line-strong);
}
/* the perforation the tape feeds through — a hard dashed rule,
   never a gradient */
[data-theme="house"] .hs-vault-slot {
  flex: 1 1 auto;
  height: 3px;
  min-width: 20px;
  background: repeating-linear-gradient(90deg,
    var(--line-strong) 0 6px, transparent 6px 10px);
}
/* THE act of this screen — the only accent on the page */
[data-theme="house"] .hs-vault-log {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 6px 11px 5px;
  cursor: pointer;
}
[data-theme="house"] .hs-vault-log:hover { opacity: 0.86; }
[data-theme="house"] .hs-vault-print-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px 0;
}
[data-theme="house"] .hs-vault-tape { padding: 4px 14px 12px; }
[data-theme="house"] .hs-vault-note {
  margin: 9px 2px 0;
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* the tape itself: dashed tear lines, mono amounts, squared block */
[data-theme="house"] .hs-vault-tape .mtx-rows {
  border: 0;
  border-radius: 0;
  background: transparent;
}
[data-theme="house"] .hs-vault-tape .mtx-summary {
  border-radius: 0;
}
[data-theme="house"] .hs-vault-tape .mtx-row {
  border-bottom: 1px dashed var(--line-soft);
  border-radius: 0;
}
[data-theme="house"] .hs-vault-tape .mtx-amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
[data-theme="house"] .hs-vault-tape .mtx-day-net {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── 4 · THE kinetic signature: the register prints ────────── */
/* One moving part in this room. Rows feed down off the head,
   once, when the tape first enters view (house_motion.js drives
   the entry). Nothing else on the Vault animates. */
[data-theme="house"] .hs-vault-tape .mtx-row.hs-vault-tx {
  opacity: 0;
  animation: none;
  transform: translateY(-8px);
}
[data-theme="house"] .hs-vault-tape .mtx-row.hs-vault-tx.hs-fed {
  animation: hs-vault-feed 0.34s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes hs-vault-feed {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 5 · the Workbench drawer ──────────────────────────────── */
[data-theme="house"] .hs-vault-bench-note {
  margin: 12px 2px 4px;
}

/* ── 6 · narrow screens: the columns stack, the wall wraps ─── */
@media (max-width: 900px) {
  [data-theme="house"] .hs-vault-cols { grid-template-columns: 1fr; }
  [data-theme="house"] .hs-vault-col-reg { position: static; }
}
@media (max-width: 620px) {
  [data-theme="house"] .hs-vault-safety { grid-template-columns: 1fr; }
  [data-theme="house"] .hs-vault-panel .mini-num { font-size: 26px; }
}

/* ── 7 · reduced motion: the tape lands settled ────────────── */
/* The JS already settles rows when EONHouse.reduced is set at paint
   time; this catches an OS setting flipped after that paint. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="house"] .hs-vault-tape .mtx-row.hs-vault-tx,
  [data-theme="house"] .hs-vault-tape .mtx-row.hs-vault-tx.hs-fed {
    opacity: 1;
    transform: none;
    animation: none;
  }
}