/* ============================================================
   Rulebook Wealth — client portal (full-screen guest preview)
   The same product as the public site: white ground, blue accent,
   Inter for interface text and JetBrains Mono for every figure.
   Every surface, line and semantic colour below is the value
   site.css publishes, so a visitor arriving from the landing page
   never crosses a brand seam.

   Four systems, expressed as tokens and used everywhere:
     · SPACING  one 4 px rhythm (4·8·12·16·20·24·32·48)
     · TYPE     nine named steps, two faces
     · DEPTH    three elevations, one recipe per level
     · MOTION   two durations + one easing curve
   Loaded with _shared/core.css only. Owns nothing outside demo.html.
   ============================================================ */

/* ============================================================
   1 · TOKENS  —  mapped one-for-one onto site.css
   ============================================================ */
:root {
  /* ---- surfaces: site.css --bg / --bg-2 / --bg-3 / --surface ---- */
  --cream:    #f4f7fa;   /* --bg-2 — the app ground behind the panels */
  --cream-d:  #eaeff5;   /* --bg-3 — the same ground, one step down */
  --paper:    #ffffff;   /* --bg    */
  --paper-2:  #f4f7fa;   /* --bg-2  */
  --paper-3:  #ffffff;   /* --surface */
  --inset-bg: #eaeff5;   /* --bg-3  */

  /* ---- the accent: site.css --accent / --accent-ink / --accent-2 ----
     The token names are historical; the values are the site's blue. */
  --green:    #0f6fde;   /* --accent      */
  --green-d:  #0a58b0;   /* --accent-ink  */
  --green-dd: #0d1420;   /* --dark        */
  --green-2:  #2f89ef;   /* accent, one step light — gradient top */
  --green-3:  #0fa3a3;   /* --accent-2 teal */

  /* ---- dark chrome: site.css --dark / --dark-2 ---- */
  --chrome:   #131c2a;   /* --dark-2 */
  --chrome-d: #0d1420;   /* --dark   */

  --ink:      #10151c;   /* --ink    · 17.4:1 on white */
  --ink-2:    #2c3541;   /* --ink-2  · 11.6:1 on white */
  --muted:    #5d6879;   /* --muted  ·  5.9:1 on white — body copy */
  --muted-num:#414a58;   /* one step darker · 8.9:1 on white, 7.5:1 on the palest tinted panel */
  --muted-2:  #808b9c;   /* --muted-2 — decoration only, never body text */
  --onGreen:  #dbe4f0;   /* --dark-ink   · 13.2:1 on --chrome-d */
  --onGreen-2:#8d9bb0;   /* --dark-muted ·  5.6:1 on --chrome-d */

  /* ---- accent ink, hairlines and chips.
     The gold-* names are historical; every value is the site's blue. ---- */
  --gold:     #0f6fde;   /* accent rules, slider fills, focus borders */
  --gold-ink: #0a58b0;   /* --accent-ink — accent TEXT on white, 6.9:1 */
  --gold-l:   #6fb6ff;   /* the accent site.css uses on a dark band, 7.0:1 */
  --gold-num: #094b96;   /* accent dark enough to carry a NUMERAL — 8.1:1 on white */
  --gold-chip:#e8f1fd;   /* --accent-soft */

  /* ---- warn, for the states that mean "still open / near a limit" ---- */
  --warn-ink: #6f4a0c;   /* the --warn hue, dark enough for a numeral — 8.0:1 on white */
  --warn-chip:#fdf6ea;

  /* ---- semantic, straight from site.css ---- */
  --up:   #10924f;
  --down: #cf3a37;
  --warn: #c8871a;
  /* the ink variants carry every coloured FIGURE, so each one clears 7:1 on white
     while --up / --down above stay at the site's values for bars, dots and series */
  --up-ink:   #095a2f;
  --down-ink: #96211e;

  /* hairlines — site.css --line / --line-2, and --dark-line on the chrome */
  --hair:   #ccd5e0;                 /* --line-2 */
  --hair-2: #e0e6ee;                 /* --line   */
  --hair-c: rgba(255,255,255,.11);   /* --dark-line */
  --rule:   #e0e6ee;                 /* --line — control borders */
  --rule-2: #eef2f7;                 /* the faintest row divider */

  /* charts.js reads these */
  --accent: #0f6fde; --accent-2: #0fa3a3;
  --surface: #ffffff; --bg-2: #f4f7fa;

  /* ---- typefaces ----
     Inter carries every piece of interface text, exactly as on the
     public site. JetBrains Mono carries every number, always with
     tabular figures, so a column of values never shifts. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- type scale: nine named steps ---- */
  --fz-micro:   10px;  /* tracked uppercase micro-label ONLY */
  --fz-cap:     11px;  /* captions, meta, keycaps, scale marks */
  --fz-sm:      12px;  /* dense body, table cells, notes */
  --fz-body:    13px;  /* body copy */
  --fz-lead:    15px;  /* lead-in copy, palette input, sleeve figures */
  --fz-fig:     20px;  /* sub-headline + read-out figures */
  --fz-title:   22px;  /* dialog and section titles */
  --fz-display: 30px;  /* the one headline per view */
  --fz-num:     34px;  /* hero numerals */

  --lh-tight: 1.2;
  --lh-body:  1.55;
  --tr-caps:  .16em;   /* tracking for uppercase micro-labels */
  --tr-tight: -.02em;  /* site.css sets every heading on negative tracking */

  /* ---- spacing: one 4 px rhythm ---- */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s12:48px;

  /* ---- radii: site.css rounds a little more than a statement would ---- */
  --r1:  6px;   /* controls, chips, swatches */
  --r2:  8px;   /* panels, cards — site.css --r */
  --r3: 14px;   /* overlays — site.css --r-lg */
  --rf: 999px;  /* pills and circles */

  /* ---- elevation: three levels, one recipe each — site.css shadows ---- */
  --e1: 0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.06);
  --e2: 0 2px 6px rgba(15,27,45,.06), 0 22px 60px rgba(15,27,45,.10);
  --e3: 0 24px 64px -20px rgba(9,14,23,.30), 0 2px 8px rgba(15,27,45,.10);
  /* surface treatments that ride on top of a level */
  --sheen:  inset 0 1px 0 rgba(255,255,255,.75);
  --recess: inset 0 1px 2px rgba(15,27,45,.08);
  --ring:   0 0 0 3px rgba(15,111,222,.20);
  --glow:   0 0 12px 1px rgba(111,182,255,.45);

  /* ---- motion: two durations, one curve ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t1: 120ms var(--ease);   /* state:  colour, opacity, press */
  --t2: 180ms var(--ease);   /* layout: size, position, enter  */

  /* core.css component variables */
  --core-modal-bg: #ffffff; --core-modal-fg: #10151c; --core-modal-border: #ccd5e0;
  --core-accent: #0f6fde; --core-up: #10924f; --core-down: #cf3a37; --core-warn: #c8871a;
  --core-radius: 8px; --core-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rail: 76px; --side: 316px; --bar: 32px;
  --sw: 8px;        /* the draggable splitter column */
  --chatw: 348px;   /* the floating assistant */
}

/* ============================================================
   2 · BASE
   ============================================================ */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  height: 100dvh; overflow: hidden; margin: 0;
  font: 400 var(--fz-body)/var(--lh-body) var(--font);
  color: var(--ink);
  caret-color: var(--gold-ink);
  /* the ground is opaque: the two veils that used to live here are painted by
     body::after, so a contrast audit reads the real ink-behind-text colour
     rather than an average of a transparent gradient stop */
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-d) 100%);
}
/* the light from above and the faint accent wash in the bottom corner */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(90% 70% at 100% 110%, rgba(15,111,222,.07) 0%, rgba(15,111,222,0) 55%);
}
/* faint engraved grid, ~3 % — on the 4 px rhythm */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    linear-gradient(rgba(16,21,28,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,21,28,.030) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 85%);
}
::selection { background: #cfe3fb; color: var(--ink); }
::-moz-selection { background: #cfe3fb; color: var(--ink); }

a { color: var(--gold-ink); text-decoration: none; transition: color var(--t1); }
a:hover { color: var(--gold-num); }
button { font: inherit; color: inherit; }
canvas.chart { display: block; }
svg { flex: none; }

/* --- focus: one ring, on everything, never removed without a replacement --- */
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: var(--r1); }
a:focus-visible, .rb:focus-visible, .pill:focus-visible, .kbtn:focus-visible, .lnk:focus-visible,
.seg__b:focus-visible, .sel__btn:focus-visible, .sel__pop button:focus-visible, .sb-btn:focus-visible,
.cmdk__i:focus-visible, .acts2 button:focus-visible, .lock:focus-visible, .empty__act:focus-visible,
.tour__card [data-t]:focus-visible, .instruments a:focus-visible, .briefs a:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 2px;
}
.icb:focus-visible, .gtile:focus-visible, .side__strip:focus-visible, .chat__chip:focus-visible,
.chat__pill:focus-visible, .maxhost__h .pill:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 2px;
}
.rail :focus-visible { outline-color: var(--gold-l); }
.statusbar :focus-visible { outline-color: var(--gold-l); }
.chat[data-mode="min"] :focus-visible { outline-color: var(--gold-l); }

/* --- disabled: one recipe, used by every control --- */
[disabled], .is-disabled, [aria-disabled="true"] {
  opacity: .46; cursor: not-allowed; pointer-events: none;
  box-shadow: none; filter: saturate(.4);
}
label.is-disabled, .composer__hint { pointer-events: auto; }

/* ============================================================
   3 · TYPE SCALE — every rule below uses a named step
   ============================================================ */
.eyebrow, .lab {
  font: 500 var(--fz-micro)/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-ink); display: block;
}
.lab--ink { color: var(--muted); }
.display { font: 700 var(--fz-display)/1.08 var(--font); letter-spacing: -.033em; color: var(--ink); margin: 0; }
.h-pane { font: 500 var(--fz-cap)/1.2 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); margin: 0; }
.meta { font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--muted-num); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.small { font-size: var(--fz-sm); }
.muted { color: var(--muted); }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.grow { flex: 1 1 auto; }
.u-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mt0 { margin-top: 0; }
.u-mt3 { margin-top: var(--s3); }
.u-center { text-align: center; margin-top: var(--s3); }
.u-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.chartbox { height: 192px; }
.chartbox--sm { height: 72px; }
.chartbox--lg { height: 216px; }

/* read-out figures — JetBrains Mono, tabular, never below the 10 px floor */
.fig {
  font: 500 var(--fz-fig)/1 var(--font-mono);
  color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.fig small { font-size: var(--fz-cap); color: var(--muted); margin-left: .2em; letter-spacing: .04em; text-shadow: none; font-family: var(--font); font-weight: 500; }

/* ============================================================
   4 · SHELL
   ============================================================ */
.app {
  position: relative; z-index: 1;
  height: 100dvh; display: grid; grid-template-columns: var(--rail) 1fr;
}

/* --- rail --- */
.rail {
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-d) 100%);
  border-right: 1px solid var(--hair-c);
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  padding: var(--s3) 0 var(--s2); color: var(--onGreen);
  min-width: 0;
}
.rail__mark {
  font: 700 var(--fz-lead)/1 var(--font); letter-spacing: .02em; color: var(--gold-l);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair-c); border-radius: var(--r1); margin-bottom: var(--s1);
}
.rail__you {
  width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: var(--s3);
  font: 500 var(--fz-cap)/1 var(--font); letter-spacing: .08em;
  color: #ffffff; background: linear-gradient(160deg, var(--green), var(--green-d)); border-radius: var(--rf);
}
.rb {
  width: 56px; padding: var(--s2) 0; background: none; border: 0; cursor: pointer;
  color: var(--onGreen-2); display: grid; justify-items: center; gap: var(--s1); position: relative;
  border-radius: var(--r1);
  transition: color var(--t1), background var(--t1), transform var(--t1);
}
.rb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rb span { font: 500 var(--fz-micro)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.rb .k {
  position: absolute; top: 2px; right: var(--s1); font: 500 var(--fz-cap)/1 var(--font-mono);
  /* a keycap is a figure: it is set in the light ink, not the muted one */
  color: rgba(219,228,240,.74); opacity: 0; transition: opacity var(--t1);
}
.rail:hover .rb .k, .rail:focus-within .rb .k { opacity: 1; }
.rb:hover { color: var(--onGreen); background: rgba(219,228,240,.07); }
.rb:active { transform: translateY(1px); }
.rb.is-on { color: var(--gold-l); background: rgba(111,182,255,.10); }
.rb.is-on::before {
  content: ""; position: absolute; left: -12px; top: var(--s2); bottom: var(--s2); width: 2px;
  background: var(--gold-l); box-shadow: var(--glow);
}
.rail__sep { width: 24px; height: 1px; background: var(--hair-c); margin: var(--s2) 0; }

/* --- shell body --- */
.shell { display: grid; grid-template-rows: auto 1fr var(--bar); min-width: 0; height: 100dvh; }

/* --- topbar --- */
.topbar {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--hair);
  /* the composited result of the old translucent veil, painted opaque so the
     colour behind the topbar's text is the colour an audit reads */
  background: linear-gradient(180deg, #fefeff, #f4f7fa);
  backdrop-filter: blur(10px);
  box-shadow: var(--sheen);
  flex-wrap: wrap; row-gap: var(--s2);
}
.topbar__id { min-width: 0; }
.greet { font: 650 var(--fz-fig)/var(--lh-tight) var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.greet b { font-weight: 500; }
.topbar .date { font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--muted-num); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--hair); background: rgba(15,111,222,.08); color: var(--gold-ink);
  border-radius: var(--r1); white-space: nowrap;
}
.chip.g { border-color: rgba(16,146,79,.45); background: rgba(16,146,79,.10); color: var(--up-ink); }
.chip.d { border-color: rgba(207,58,55,.45); background: rgba(207,58,55,.09); color: #8e211e; }
.chip .dot { width: 6px; height: 6px; border-radius: var(--rf); background: currentColor; flex: none; }
.chip .dot.live { background: var(--up); animation: pulse 2400ms var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,146,79,.5) } 50% { box-shadow: 0 0 0 5px rgba(16,146,79,0) } }

.acts { display: flex; align-items: center; gap: var(--s2); }
.pill {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s3); font: 500 var(--fz-cap)/1 var(--font); letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r1); box-shadow: var(--sheen), var(--e1);
  transition: transform var(--t1), box-shadow var(--t1), border-color var(--t1), color var(--t1), background var(--t1);
  white-space: nowrap;
}
.pill:hover { transform: translateY(-1px); border-color: var(--hair); color: var(--ink); box-shadow: var(--sheen), var(--e2); }
.pill:active { transform: translateY(1px); box-shadow: var(--recess); }
.pill .lk { color: var(--gold-ink); }
.pill.solid { background: var(--green); color: #fff; border-color: var(--green); }
.pill.solid:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.pill.gold { background: #0b8c8c; color: #fff; border-color: #0b8c8c; }
.pill.xs { padding: var(--s1) var(--s2); }

.kbtn {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s2) var(--s2) var(--s3); min-width: 180px;
  font: 400 var(--fz-sm)/1 var(--font); color: var(--muted);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r1);
  box-shadow: var(--sheen); transition: border-color var(--t1), box-shadow var(--t1), color var(--t1);
}
.kbtn svg { stroke-width: 1.5; }
.kbtn:hover { border-color: var(--hair); color: var(--ink-2); box-shadow: var(--sheen), var(--e1); }
.kbtn:active { box-shadow: var(--recess); }
.kbtn kbd { margin-left: auto; }
kbd {
  font: 500 var(--fz-cap)/1 var(--font-mono); padding: var(--s1); border-radius: var(--r1);
  background: var(--inset-bg); border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap;
}

/* --- stage: main · splitter · side rail (or the docked assistant) --- */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--sw) var(--side); min-height: 0; }
.main { min-width: 0; overflow: auto; padding: var(--s4) var(--s4) var(--s6); scroll-behavior: smooth; grid-column: 1; grid-row: 1; }
.side {
  border-left: 1px solid var(--hair); overflow: auto; padding: var(--s3); min-width: 0;
  background: linear-gradient(180deg, #eff3f8, #eaeff5);
  grid-column: 3; grid-row: 1;
}
.app.show-side .stage { grid-template-columns: minmax(0, 1fr); }
.app.show-side .side, .app.show-side .split { display: none; }
.app[data-chat="dock"] .side { display: none; }
/* docked, the third column belongs to the assistant and never drops below reading width */
.app[data-chat="dock"] .stage { grid-template-columns: minmax(0, 1fr) var(--sw) minmax(280px, var(--side)); }
.view { display: none; animation: rise var(--t2); }
.view.is-on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.payoff {
  margin: 0 0 var(--s3); font: 450 var(--fz-fig)/1.42 var(--font); letter-spacing: var(--tr-tight); color: var(--ink-2);
  padding-left: var(--s3); border-left: 2px solid var(--gold); max-width: 74ch;
}
.payoff b { font-weight: 500; color: var(--ink); font-style: italic; }

/* ============================================================
   5 · PANELS — elevation 1
   ============================================================ */
.pane {
  position: relative; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r2); box-shadow: var(--e1); padding: var(--s3) var(--s4) var(--s4);
  transition: box-shadow var(--t2);
  min-width: 0;
}
.pane::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent);
}
.pane:hover { box-shadow: var(--e2); }
.pane__h {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; row-gap: var(--s1);
  margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--hair-2);
}
.pane__h .grow { min-width: var(--s1); }
.note { margin: var(--s3) 0 0; font-size: var(--fz-cap); line-height: 1.5; color: var(--muted); }
.note b { color: var(--ink-2); font-weight: 500; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.span2 { grid-column: 1 / -1; }

/* ============================================================
   6 · HERO — the dominant surface, elevation 2
   ============================================================ */
.hero {
  position: relative; border-radius: var(--r2); overflow: hidden;
  /* one opaque wash: the white glow at the top-left falling to the cream ground.
     Opaque stops mean the colour behind every figure in the hero is knowable. */
  background: radial-gradient(115% 120% at 12% 0%, #ffffff 0%, #fbfcfe 46%, var(--paper-2) 100%);
  border: 1px solid var(--hair);
  box-shadow: var(--e2);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--green-3) 55%, var(--gold)) top/100% 2px no-repeat;
  opacity: .85;
}
.hero__bar {
  display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(180deg, #ffffff, #fdfdfe);
}
.hero__title { min-width: 180px; }
.hero__title .display { margin-top: var(--s1); }
.hero__sub { display: block; margin-top: var(--s1); font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--muted-num); }
.ctrls { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-left: auto; }
.ctrl { display: grid; gap: var(--s1); min-width: 0; }
.ctrl__lab { font: 500 var(--fz-micro)/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.hero__grid {
  display: grid; grid-template-columns: minmax(248px, .95fr) minmax(296px, 1.2fr) minmax(276px, 1.05fr);
}
.zone { padding: var(--s4) var(--s5); position: relative; min-width: 0; display: flex; flex-direction: column; }
.zone + .zone { border-left: 1px solid var(--hair-2); }
.zone__h { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; row-gap: var(--s1); }
.read {
  margin: var(--s3) 0 0; font: 400 var(--fz-sm)/1.5 var(--font); color: var(--ink-2);
  padding-top: var(--s2); border-top: 1px solid var(--hair-2); margin-top: auto;
}
.read b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- risk meter --- */
.meter { position: relative; height: 152px; }
.meter canvas { width: 100%; height: 100%; }
.inputs {
  list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
}
.inputs li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--s1) var(--s3); padding: var(--s2) var(--s3); background: var(--paper); position: relative;
}
.inputs li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.inputs li.on::before { background: var(--up); }
.inputs li.mid::before { background: var(--gold); }
.inputs li.off::before { background: var(--down); }
.inputs .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.inputs .v { font: 500 var(--fz-sm)/1.3 var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.inputs li.on .v { color: var(--up-ink); }
.inputs li.mid .v { color: var(--gold-ink); }
.inputs li.off .v { color: var(--down-ink); }
.inputs .s { grid-column: 1 / -1; font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }

/* --- allocation --- */
.alloc { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.donut { position: relative; height: 152px; }
.donut canvas { width: 100%; height: 100%; }
.sleeves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; max-width: 420px; }
.sleeves li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s2); align-items: center;
  padding: 0 var(--s1); border-radius: var(--r1); transition: background var(--t1);
}
.sleeves li:hover, .sleeves li.hl { background: rgba(15,111,222,.10); }
.sleeves .sw { width: 8px; height: 8px; border-radius: var(--r1); border: 1px solid rgba(255,255,255,.7); box-sizing: border-box; }
.sleeves .nm { display: block; font: 400 var(--fz-sm)/1.3 var(--font); color: var(--ink); }
.sleeves .band { display: block; height: 3px; margin-top: var(--s1); background: var(--inset-bg); border-radius: var(--r1); position: relative; overflow: hidden; }
.sleeves .band i { position: absolute; top: 0; bottom: 0; background: currentColor; opacity: .32; transition: left var(--t2), width var(--t2); }
.sleeves .band u { position: absolute; top: -1px; width: 2px; height: 5px; background: var(--ink); transition: left var(--t2); }
.sleeves .w {
  font: 500 var(--fz-lead)/1 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; text-align: right; min-width: 44px;
}
.sleeves .w em { font: 400 var(--fz-cap)/1 var(--font); font-style: normal; color: var(--muted); margin-left: 2px; }
.sleeves__tot {
  display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s3);
  padding-top: var(--s2); border-top: 1px solid var(--hair-2);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted);
}
.sleeves__tot b { margin-left: auto; font: 500 var(--fz-sm)/1 var(--font-mono); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- projected range --- */
.projwrap { height: 152px; position: relative; }
.projwrap canvas { width: 100%; height: 100%; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); text-align: center; container-type: inline-size; }
.figs > div { padding: var(--s2) var(--s1); border-top: 1px solid var(--hair-2); min-width: 0; }
.figs > div.mid { border-top-color: var(--gold); background: linear-gradient(180deg, #e9f2fc, #ffffff); }
.figs .k { font: 500 var(--fz-micro)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-num); display: block; margin-bottom: var(--s1); }
/* a euro amount runs long: the display size steps down to its own third of
   the row rather than spilling over the column beside it */
.figs .fig { display: block; font-size: clamp(13px, 6.2cqi, 20px); white-space: nowrap; letter-spacing: -.02em; }

/* ============================================================
   7 · CONTROLS — every one custom, every one with five states
   ============================================================ */
/* segmented */
.seg {
  position: relative; display: inline-flex; padding: var(--s1); gap: 2px; max-width: 100%;
  background: var(--inset-bg); border: 1px solid var(--rule); border-radius: var(--r1);
  box-shadow: var(--recess);
}
.seg__ind {
  position: absolute; top: var(--s1); bottom: var(--s1); left: var(--s1); width: 0;
  background: linear-gradient(180deg, var(--paper-3), var(--paper)); border: 1px solid var(--hair);
  border-radius: var(--r1); box-shadow: var(--e1);
  transition: transform var(--t2), width var(--t2); pointer-events: none;
}
.seg__b {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer; border-radius: var(--r1);
  padding: var(--s2) var(--s3); font: 500 var(--fz-cap)/1 var(--font); letter-spacing: .05em; color: var(--muted);
  transition: color var(--t1), transform var(--t1); white-space: nowrap;
}
.seg__b:hover { color: var(--ink-2); }
.seg__b:active { transform: translateY(1px); }
.seg__b.is-on { color: var(--ink); }
.seg.sm .seg__b { padding: var(--s2); }

/* custom select */
.sel { position: relative; }
.sel__btn {
  display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; min-width: 116px;
  padding: var(--s2) var(--s3); font: 500 var(--fz-cap)/1 var(--font); color: var(--ink);
  background: linear-gradient(180deg, var(--paper-3), var(--paper)); border: 1px solid var(--rule);
  border-radius: var(--r1); box-shadow: var(--sheen), var(--e1);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.sel__btn:hover { border-color: var(--hair); }
.sel__btn:active { box-shadow: var(--recess); }
.sel.is-open .sel__btn { border-color: var(--gold); box-shadow: var(--ring); }
.sel__car { margin-left: auto; width: 10px; height: 10px; stroke: var(--gold-ink); stroke-width: 1.5; fill: none; transition: transform var(--t2); }
.sel.is-open .sel__car { transform: rotate(180deg); }
.sel__pop {
  position: absolute; z-index: 60; top: calc(100% + var(--s1)); left: 0; min-width: 100%;
  padding: var(--s1); background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--e3);
  display: none; animation: pop var(--t2);
}
.sel.is-open .sel__pop { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: none } }
.sel__pop button {
  display: flex; width: 100%; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s2); background: none; border: 0; border-radius: var(--r1); text-align: left;
  font: 400 var(--fz-sm)/1 var(--font); color: var(--ink-2); transition: background var(--t1), color var(--t1);
}
.sel__pop button:hover, .sel__pop button.cur { background: rgba(15,111,222,.14); color: var(--ink); }
.sel__pop button::after { content: "✓"; margin-left: auto; opacity: 0; color: var(--gold-ink); font-size: var(--fz-cap); }
.sel__pop button[aria-selected="true"]::after { opacity: 1; }

/* range slider */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: none; cursor: pointer; min-width: 0; }
.slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r1);
  background: linear-gradient(90deg, var(--gold) 0 var(--p, 0%), var(--inset-bg) var(--p, 0%) 100%);
  box-shadow: var(--recess);
}
.slider::-moz-range-track { height: 4px; border-radius: var(--r1); background: var(--inset-bg); }
.slider::-moz-range-progress { height: 4px; border-radius: var(--r1); background: var(--gold); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px;
  border-radius: var(--rf); background: linear-gradient(180deg, var(--green-2), var(--green));
  border: 1.5px solid var(--gold-l); box-shadow: var(--e1);
  transition: transform var(--t1), box-shadow var(--t1);
}
.slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: var(--rf); background: var(--green);
  border: 1.5px solid var(--gold-l); box-shadow: var(--e1);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.14); }
.slider:active::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.slider:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: var(--r1); }
.slider:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }
/* at a band limit the thumb turns gold and stops reading as "keep dragging" */
.slider.at-limit::-webkit-slider-thumb { background: var(--warn); border-color: var(--warn-ink); }
.slider.at-limit::-moz-range-thumb { background: var(--warn); border-color: var(--warn-ink); }

/* switch */
.sw-lab { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font: 400 var(--fz-cap)/1.2 var(--font); color: var(--muted); user-select: none; }
.sw-lab input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-lab i {
  width: 32px; height: 18px; border-radius: var(--rf); background: var(--inset-bg);
  border: 1px solid var(--rule); position: relative; transition: background var(--t2), border-color var(--t2); flex: none;
}
.sw-lab i::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: var(--rf);
  background: var(--paper); box-shadow: var(--e1); transition: transform var(--t2), background var(--t2);
}
.sw-lab input:checked + i { background: linear-gradient(180deg, var(--green-2), var(--green)); border-color: var(--green-d); }
.sw-lab input:checked + i::after { transform: translateX(14px); background: #fff; }
.sw-lab input:focus-visible + i { box-shadow: var(--ring); }
.sw-lab:hover { color: var(--ink-2); }

/* text field */
.tf {
  width: 56px; padding: var(--s1) var(--s2); text-align: right; border-radius: var(--r1);
  font: 400 var(--fz-sm)/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: var(--recess); transition: border-color var(--t1), box-shadow var(--t1);
}
.tf:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
.tf:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
.tf--wide { width: 100%; text-align: left; font-family: var(--font); font-size: var(--fz-sm); }

/* link button */
.lnk {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold-ink);
  font: 500 var(--fz-cap)/1.3 var(--font); border-bottom: 1px solid var(--hair);
  transition: color var(--t1), border-color var(--t1);
}
.lnk:hover { color: var(--gold-num); border-color: var(--gold); }
.lnk:active { color: var(--ink); }

/* ============================================================
   8 · HOLDINGS + DRIFT
   ============================================================ */
.hold { display: grid; gap: var(--s2); }
.hold__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; gap: var(--s3); align-items: center; }
.hold__row label { font: 400 var(--fz-sm)/1.2 var(--font); color: var(--ink-2); }
.hold__row .tf { width: 100%; }
.hold__bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.hold__bar[hidden] { display: none; }
.tot { font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.tot.bad { color: var(--down-ink); font-weight: 500; }
.err {
  display: none; align-items: center; gap: var(--s2); margin-top: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r1);
  border: 1px solid rgba(207,58,55,.40); background: rgba(207,58,55,.08);
  font: 400 var(--fz-cap)/1.45 var(--font); color: var(--down-ink);
}
.err.is-on { display: flex; }
.err b { font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.drift-wrap { overflow-x: auto; }
.drift { width: 100%; min-width: 320px; border-collapse: collapse; margin-top: var(--s3); }
.drift th {
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 0 var(--s2) var(--s2); border-bottom: 1px solid var(--hair-2);
}
.drift td { padding: var(--s2); border-bottom: 1px solid var(--rule-2); font-size: var(--fz-sm); }
.drift .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; }
.drift .n em { font-style: normal; color: var(--muted); font-size: var(--fz-cap); margin-left: 2px; }
.drift .sw2 { display: inline-block; width: 8px; height: 8px; border-radius: var(--r1); margin-right: var(--s2); }
.drift .bar { height: 4px; background: var(--inset-bg); border-radius: var(--r1); overflow: hidden; }
.drift .bar i { display: block; height: 100%; transition: width var(--t2); }
.drift .up { color: var(--up-ink); }
.drift .down { color: var(--down-ink); }

/* ============================================================
   9 · WHY / LISTS
   ============================================================ */
.why { list-style: none; counter-reset: w; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.why li { counter-increment: w; position: relative; padding-left: var(--s8); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2); }
.why li::before {
  content: counter(w, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font: 500 var(--fz-cap)/1.4 var(--font-mono); color: var(--gold-ink); letter-spacing: .04em;
  border-right: 1px solid var(--hair); padding-right: var(--s2); font-variant-numeric: tabular-nums;
}
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fz-sm); color: var(--ink-2); }
.checks li { padding-left: var(--s5); position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--up); font-weight: 500; }

/* ============================================================
   10 · FEED / ALERTS + the empty state
   ============================================================ */
.feed {
  display: grid; gap: 1px; background: var(--hair-2); border: 1px solid var(--hair-2);
  border-radius: var(--r1); overflow: hidden; max-height: 232px; overflow-y: auto;
}
.feed__i {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) var(--s3);
  background: var(--paper); font-size: var(--fz-sm); line-height: 1.5; color: var(--ink-2);
}
.feed__i.is-in { animation: slidein var(--t2); }
.feed.is-empty { background: var(--paper); max-height: none; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.feed__i .t { font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.feed__i.new { background: linear-gradient(90deg, #e1ecfb, #f8fbfe); }
.feed__i.new .t::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: var(--rf);
  background: var(--gold-ink); margin-right: var(--s1); vertical-align: 1px;
}
.kind {
  display: inline-block; margin-right: var(--s2); padding: 2px var(--s2); border-radius: var(--r1);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase;
}
.kind.warn { background: #e8f1fd; color: var(--gold-ink); }
.kind.info { background: #e2f5f4; color: #0a6060; }
.kind.up { background: #e3f4ea; color: var(--up-ink); }

/* one empty-state component, used by any surface that can be filtered to nothing */
.empty {
  display: grid; justify-items: center; gap: var(--s2); text-align: center;
  padding: var(--s6) var(--s4); background: var(--paper);
}
.empty__ic {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--rf);
  border: 1px solid var(--hair); background: rgba(15,111,222,.08); color: var(--gold-ink);
}
.empty__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty__t { font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.empty__d { font: 400 var(--fz-sm)/1.5 var(--font); color: var(--muted); max-width: 44ch; margin: 0; }
.empty__act { margin-top: var(--s1); }

/* ============================================================
   11 · PREMIUM LOCKS
   ============================================================ */
.lock { position: relative; border-radius: var(--r1); overflow: hidden; cursor: pointer; }
.lock__body { filter: blur(3px); opacity: .62; pointer-events: none; user-select: none; transition: filter var(--t2), opacity var(--t2); }
.lock__veil {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--s2); text-align: center; padding: var(--s3);
  background: radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,.90), rgba(255,255,255,.66));
  transition: background var(--t2);
}
.lock:hover .lock__body { filter: blur(2px); opacity: .78; }
.lock:hover .lock__veil { background: radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,.84), rgba(255,255,255,.58)); }
.lock__veil .t { font: 500 var(--fz-body)/1.3 var(--font); color: var(--ink); }
.lock__veil .d { font-size: var(--fz-sm); color: var(--muted); max-width: 40ch; line-height: 1.45; }
.lock__code { padding: var(--s3); font: 400 var(--fz-sm)/1.6 var(--font-mono); color: var(--ink-2); }
.tier {
  display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase;
  background: #e2f5f4; color: #0a6060; border-radius: var(--r1);
  box-shadow: var(--e1);
}

/* Pro table */
.instruments {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
}
.instruments li {
  display: grid; grid-template-columns: 184px minmax(0, 1fr) 176px; gap: var(--s4);
  padding: var(--s3) var(--s4); background: var(--paper); align-items: start; transition: background var(--t1);
}
.instruments li:hover { background: var(--paper-3); }
.instruments .name { display: flex; align-items: center; gap: var(--s2); font: 500 var(--fz-sm)/1.3 var(--font); color: var(--ink); }
.instruments .name i { width: 6px; height: 20px; border-radius: var(--r1); flex: none; }
.instruments .desc { font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--muted); }
.instruments .desc b { color: var(--ink-2); font-weight: 500; }
.instruments .price { text-align: right; font: 500 var(--fz-body)/1.3 var(--font); color: var(--ink); }
.instruments .price small { display: block; font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num); margin-top: var(--s1); }
.instruments .price small a { display: inline-block; }

/* ============================================================
   12 · GUARDS
   ============================================================ */
.guards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.guard { position: relative; }
.guard__top { display: flex; align-items: flex-start; gap: var(--s3); }
.guard__val {
  font: 600 var(--fz-num)/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); flex: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.9); font-variant-numeric: lining-nums tabular-nums;
}
.guard__val small { font-size: var(--fz-sm); color: var(--muted); margin-left: .2em; font-family: var(--font); font-weight: 500; }
.guard__txt { font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2); margin: var(--s3) 0 0; }
.guard__txt b { font-weight: 500; color: var(--ink); }
.guard .bar-t { height: 8px; background: var(--inset-bg); border-radius: var(--r1); overflow: hidden; margin-top: var(--s2); position: relative; box-shadow: var(--recess); }
.guard .bar-t i { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--green-2), var(--green-3)); border-radius: var(--r1); transition: width var(--t2); }
.guard .bar-t u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--down); }
.guard .scale { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s1); font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.guard .scale b { color: var(--ink-2); font-weight: 500; }

/* ============================================================
   13 · BRIEFS
   ============================================================ */
.briefs {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
}
.briefs li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 128px; gap: var(--s4);
  padding: var(--s3) var(--s4); background: var(--paper); align-items: center; transition: background var(--t1);
}
.briefs li:hover { background: var(--paper-3); }
.briefs .no { text-align: center; border-right: 1px solid var(--hair-2); padding-right: var(--s3); }
.briefs .no small { display: block; font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
.briefs .no b { font: 600 var(--fz-title)/1 var(--font-mono); letter-spacing: -.02em; color: var(--gold-num); font-variant-numeric: lining-nums tabular-nums; }
.briefs h3 { margin: 0 0 var(--s1); font: 650 var(--fz-fig)/1.24 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.briefs h3 a { color: inherit; }
.briefs h3 a:hover { color: var(--green-2); }
.briefs .deck { margin: 0 0 var(--s2); font-size: var(--fz-sm); line-height: 1.5; color: var(--muted); }
.briefs .by { font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.briefs .spark { height: 40px; }
.briefs li.soon { opacity: .72; }
.briefs li.soon .spark { display: grid; place-items: center; font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); text-align: center; border: 1px dashed var(--hair); border-radius: var(--r1); }

/* ============================================================
   14 · COMMUNITY
   ============================================================ */
.side__h { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--hair); }
.post { padding: var(--s3) 0; border-bottom: 1px solid var(--hair-2); }
.post:last-child { border-bottom: 0; }
.who { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); font-size: var(--fz-cap); color: var(--muted); min-width: 0; }
.who b { color: var(--ink); font-weight: 500; font-size: var(--fz-sm); }
.av {
  width: 24px; height: 24px; border-radius: var(--rf); display: grid; place-items: center;
  font: 500 var(--fz-cap)/1 var(--font); background: var(--green-d); color: #fff; flex: none; letter-spacing: .06em;
}
.post p { margin: 0 0 var(--s2); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2); }
.acts2 { display: flex; gap: var(--s2); }
.acts2 button {
  background: none; border: 1px solid var(--rule); border-radius: var(--r1); padding: var(--s1) var(--s2);
  font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); cursor: pointer;
  transition: border-color var(--t1), color var(--t1), background var(--t1), transform var(--t1);
}
.acts2 button:hover { border-color: var(--hair); color: var(--ink-2); background: rgba(15,111,222,.08); }
.acts2 button:active { transform: translateY(1px); }
.tag { font: 500 var(--fz-micro)/1.5 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 0 var(--s1); border-radius: var(--r1); background: var(--inset-bg); color: var(--muted); }
.tag.pro { background: #e2f5f4; color: #0a6060; }

/* the guest composer — a real disabled surface, with the reason next to it */
.composer { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hair-2); display: grid; gap: var(--s2); }
.composer__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.composer__hint { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); }

/* ============================================================
   15 · STATUS BAR
   ============================================================ */
.statusbar {
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); height: var(--bar);
  background: linear-gradient(180deg, var(--chrome), var(--chrome-d));
  border-top: 1px solid var(--hair-c); color: var(--onGreen-2);
  font: 400 var(--fz-cap)/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.statusbar b { color: var(--onGreen); font-weight: 500; }
.statusbar .g { color: var(--gold-l); }
.statusbar > span { display: inline-flex; align-items: center; gap: var(--s2); }
.statusbar .live { width: 6px; height: 6px; border-radius: var(--rf); background: #3ddc97; box-shadow: var(--glow); animation: pulse2 2400ms var(--ease) infinite; }
@keyframes pulse2 { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.statusbar kbd { background: rgba(219,228,240,.10); border-color: rgba(219,228,240,.20); color: var(--onGreen); }
.statusbar #st-clock { color: var(--onGreen); }
.statusbar .sb-btn {
  background: rgba(219,228,240,.09); border: 1px solid var(--hair-c); color: var(--gold-l);
  padding: var(--s1) var(--s2); border-radius: var(--r1); cursor: pointer; font: 500 var(--fz-micro)/1.4 var(--font);
  letter-spacing: .12em; text-transform: uppercase; transition: background var(--t1), color var(--t1), transform var(--t1);
}
.statusbar .sb-btn:hover { background: rgba(111,182,255,.20); color: #ffffff; }
.statusbar .sb-btn:active { transform: translateY(1px); }

/* ============================================================
   16 · OVERLAYS — elevation 3
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 800; background: rgba(15,27,45,.42);
  backdrop-filter: blur(3px); display: none; animation: fade var(--t1);
}
.scrim.is-on { display: block; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* command palette */
.cmdk {
  position: fixed; z-index: 900; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(620px, calc(100vw - var(--s8))); display: none;
  background: rgba(255,255,255,.97); backdrop-filter: blur(18px);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--e3);
  overflow: hidden;
}
.cmdk.is-on { display: block; animation: pop var(--t2); }
.cmdk__top { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hair-2); }
.cmdk__top svg { width: 16px; height: 16px; stroke: var(--gold-ink); stroke-width: 1.5; fill: none; }
.cmdk input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 var(--fz-lead)/1.3 var(--font); color: var(--ink); }
.cmdk input::placeholder { color: var(--muted); }
.cmdk__list { max-height: 46vh; overflow: auto; padding: var(--s1); }
.cmdk__g { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); padding: var(--s3) var(--s2) var(--s1); }
.cmdk__i {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s2); cursor: pointer;
  background: none; border: 0; border-radius: var(--r1); text-align: left; transition: background var(--t1);
}
.cmdk__i .ic { width: 20px; text-align: center; color: var(--gold-ink); font-size: var(--fz-sm); flex: none; }
.cmdk__i .tx { flex: 1; min-width: 0; }
.cmdk__i .n { display: block; font: 400 var(--fz-body)/1.3 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__i .n mark { background: rgba(15,111,222,.28); color: var(--ink); border-radius: var(--r1); padding: 0 1px; }
.cmdk__i.cur { background: rgba(15,111,222,.15); box-shadow: inset 2px 0 0 var(--gold); }
.cmdk__i .s { display: block; font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__i .hint { font: 400 var(--fz-cap)/1 var(--font-mono); color: var(--muted-num); flex: none; }
.cmdk__foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-top: 1px solid var(--hair-2); background: var(--paper-2); font: 400 var(--fz-cap)/1 var(--font-mono); color: var(--muted-num); }
.cmdk__foot span { display: inline-flex; align-items: center; gap: var(--s1); }

/* shortcut sheet */
.sheet {
  position: fixed; z-index: 900; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - var(--s8))); display: none; max-height: calc(100dvh - var(--s12)); overflow: auto;
  background: rgba(255,255,255,.98); backdrop-filter: blur(18px);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--e3); padding: var(--s5);
}
.sheet.is-on { display: block; animation: pop var(--t2); }
.sheet h2 { margin: var(--s1) 0 var(--s3); font: 700 var(--fz-title)/1.14 var(--font); letter-spacing: -.028em; color: var(--ink); }
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s6); }
.keys div { display: flex; align-items: center; gap: var(--s2); font-size: var(--fz-sm); color: var(--ink-2); padding: var(--s1) 0; border-bottom: 1px solid var(--hair-2); }
.keys div span { margin-left: auto; display: flex; gap: var(--s1); }
.sheet__foot { display: flex; gap: var(--s2); margin-top: var(--s4); }

/* spotlight tour */
.tour { position: fixed; inset: 0; z-index: 950; display: none; }
.tour.is-on { display: block; }
.tour__hole {
  position: absolute; border-radius: var(--r2); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(9,14,23,.60), 0 0 0 2px var(--gold-l), 0 0 32px 4px rgba(111,182,255,.35);
  transition: left var(--t2), top var(--t2), width var(--t2), height var(--t2);
}
.tour__card {
  position: absolute; width: min(328px, calc(100vw - var(--s6)));
  background: rgba(255,255,255,.98); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--e3); padding: var(--s4);
  transition: left var(--t2), top var(--t2);
}
.tour__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--green-3), var(--gold)); }
.tour__card h3 { margin: var(--s2) 0; font: 700 var(--fz-title)/1.18 var(--font); letter-spacing: -.028em; color: var(--ink); }
.tour__card p { margin: 0 0 var(--s3); font-size: var(--fz-sm); line-height: 1.6; color: var(--ink-2); }
.tour__nav { display: flex; align-items: center; gap: var(--s2); }
.tour__dots { display: flex; gap: var(--s1); margin-right: auto; }
.tour__dots i { width: 5px; height: 5px; border-radius: var(--rf); background: var(--hair); transition: width var(--t2), background var(--t2); }
.tour__dots i.on { background: var(--gold-ink); width: 16px; border-radius: var(--r1); }

/* tooltip */
.tip {
  position: fixed; z-index: 1200; pointer-events: none; opacity: 0;
  padding: var(--s2) var(--s2); max-width: 260px; border-radius: var(--r1);
  font: 400 var(--fz-cap)/1.45 var(--font); color: var(--onGreen);
  background: rgba(15,27,45,.96); border: 1px solid var(--hair-c);
  box-shadow: var(--e3);
  transition: opacity var(--t1), transform var(--t1); transform: translateY(3px);
}
.tip.is-on { opacity: 1; transform: none; }
.tip b { color: var(--gold-l); font-weight: 500; }

/* ============================================================
   17 · SKELETON
   ============================================================ */
.sk { position: relative; }
.sk.is-busy > * { opacity: .22; transition: opacity var(--t1); }
.sk.is-busy::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r1); pointer-events: none;
  background: linear-gradient(100deg, rgba(224,230,238,.35) 20%, rgba(255,255,255,.95) 42%, rgba(224,230,238,.35) 62%);
  background-size: 260% 100%; animation: shim 1200ms linear infinite;
}
@keyframes shim { from { background-position: 130% 0 } to { background-position: -60% 0 } }

/* ============================================================
   18 · SCROLLBARS — the accent everywhere, thin inside dense panels
   ============================================================ */
body[data-theme] .nice-scroll { scrollbar-width: thin; scrollbar-color: rgba(15,111,222,.50) transparent; }
body[data-theme] .nice-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-theme] .nice-scroll::-webkit-scrollbar-track { background: rgba(16,21,28,.04); }
body[data-theme] .nice-scroll::-webkit-scrollbar-thumb { background: rgba(15,111,222,.46); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--rf); }
body[data-theme] .nice-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,111,222,.70); background-clip: padding-box; }
body[data-theme] .nice-scroll--thin::-webkit-scrollbar { width: 6px; height: 6px; }
body[data-theme] .nice-scroll--thin::-webkit-scrollbar-thumb { border-width: 1px; }
.rail, .statusbar { scrollbar-width: none; }

/* ============================================================
   19 · core.css component re-skin
   ============================================================ */
.demo-pill {
  background: rgba(255,255,255,.94) !important; color: var(--ink) !important;
  border: 1px solid var(--hair) !important; border-radius: var(--r2) !important;
  box-shadow: var(--e3) !important; font-family: var(--font) !important; font-size: var(--fz-sm) !important;
  right: auto !important; top: auto !important;
  left: calc(var(--rail) + var(--s3)) !important; bottom: calc(var(--bar) + var(--s3)) !important;
}
.demo-pill .lbl { color: var(--gold-ink); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fz-micro); opacity: 1; }
.demo-pill a { background: var(--inset-bg) !important; color: var(--ink-2) !important; border-radius: var(--r1) !important; font-size: var(--fz-cap); }
.demo-pill a:hover { background: rgba(15,111,222,.18) !important; color: var(--ink) !important; }
.demo-pill a.go { background: var(--green) !important; color: #fff !important; }
.demo-pill .x { color: var(--muted); font-size: var(--fz-lead); line-height: 1; }
.modal { font-family: var(--font); }
.modal__head h3 { font: 700 var(--fz-title)/1.2 var(--font); letter-spacing: -.028em; }
.modal .btn { border-radius: var(--r1); background: var(--inset-bg); border-color: var(--rule); }
.modal .btn:hover { background: rgba(15,111,222,.16); }
.modal .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.modal .callout { border-left-color: var(--gold); background: rgba(15,111,222,.09); border-radius: var(--r1); }
.modal .check-list li::before { color: var(--up); }
.toast { font-family: var(--font); border-radius: var(--r1); box-shadow: var(--e3); }
.toasts { bottom: calc(var(--bar) + var(--s3)); }

/* ============================================================
   20 · WORKSPACE — splitter, collapse, maximise
   The user shapes this screen; every size is remembered.
   ============================================================ */
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* one icon button, used by every panel header, the rail and the assistant */
.icb {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--r1);
  color: var(--muted); cursor: pointer; align-self: center;
  transition: color var(--t1), background var(--t1), border-color var(--t1), transform var(--t1);
}
.icb svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icb:hover { color: var(--ink); background: rgba(15,111,222,.14); border-color: var(--hair-2); }
.icb:active { transform: translateY(1px); box-shadow: var(--recess); }
.icb.is-on { color: var(--gold-ink); background: rgba(15,111,222,.18); border-color: var(--hair); }
.icb .i-min { display: none; }
.icb.is-on .i-max { display: none; }
.icb.is-on .i-min { display: block; }
.chat__h .icb:hover { color: var(--ink); }

/* --- draggable splitter --- */
.split {
  position: relative; display: grid; place-items: center; align-self: stretch;
  cursor: col-resize; touch-action: none; background: transparent;
  transition: background var(--t1);
}
.split::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-.5px); background: var(--hair);
}
.split i {
  position: relative; z-index: 1; width: 3px; height: 26px; border-radius: var(--rf);
  background: var(--gold); opacity: .55;
  transition: opacity var(--t1), height var(--t2), background var(--t1);
}
.split:hover i, .split:focus-visible i, .split.is-drag i { opacity: 1; height: 46px; }
.split.is-drag { background: rgba(15,111,222,.12); }
.split:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
body.is-resizing { cursor: col-resize; user-select: none; }

/* --- side rail collapsed to a strip --- */
.app[data-side="min"] { --side: 34px; }
.app[data-side="min"] .side { padding: 0; overflow: hidden; }
.app[data-side="min"] .side > *:not(.side__strip) { display: none; }
.side__strip { display: none; }
.app[data-side="min"] .side__strip {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  transition: color var(--t1), background var(--t1);
}
.side__strip span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 var(--fz-micro)/1 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.side__strip:hover { color: var(--gold-ink); background: rgba(15,111,222,.10); }

/* --- maximised panel: fills the workspace, never the navigation rail --- */
.maxhost {
  position: fixed; z-index: 620; display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--hair); box-shadow: var(--e3);
  animation: rise var(--t2);
}
.maxhost[hidden] { display: none; }
.maxhost__h {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--paper-3), var(--paper-2));
}
.maxhost__b { flex: 1 1 auto; min-height: 0; display: flex; padding: var(--s3) var(--s4) var(--s4); }
.maxhost__b > * { flex: 1 1 auto; min-width: 0; }
.maxhost .zone, .maxhost .pane { display: flex; flex-direction: column; height: 100%; border-left: 0; }
.maxhost .zone { padding: 0; }
.maxhost .meter, .maxhost .projwrap, .maxhost .chartbox { flex: 1 1 auto; height: auto; min-height: 200px; }
.maxhost .alloc {
  flex: 1 1 auto; min-height: 0; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
}
.maxhost .donut { height: 100%; min-height: 220px; }
.maxhost .sleeves { max-width: none; }
.maxhost .sleeves li { padding: var(--s1); }

/* --- the guard strip: the point of the product, at zero clicks --- */
.gstrip {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
  border: 1px solid var(--hair-2); border-left: 2px solid var(--gold); border-radius: var(--r2);
  /* the warm wash is kept off the left third so the gold micro-label keeps 5.1:1 */
  background: linear-gradient(270deg, #e3edfb 0%, var(--paper-3) 42%);
}
.gstrip__lab {
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--gold-ink);
}
.gstrip__set { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.gtile {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: var(--s1) var(--s3); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r1); box-shadow: var(--sheen);
  transition: transform var(--t1), border-color var(--t1), box-shadow var(--t1);
}
.gtile:hover { transform: translateY(-1px); border-color: var(--hair); box-shadow: var(--sheen), var(--e1); }
.gtile:active { transform: translateY(1px); box-shadow: var(--recess); }
.gtile:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.gtile .gk { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gtile .gr { display: flex; align-items: baseline; gap: var(--s2); }
.gtile .gv { font: 500 var(--fz-sm)/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.gtile .gs { font: 400 var(--fz-cap)/1.3 var(--font); color: var(--muted-num); white-space: nowrap; }

/* ============================================================
   21 · THE ASSISTANT — floating, docked or a pill
   ============================================================ */
.chat {
  display: none; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--paper-3), var(--paper));
  border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: var(--e2);
}
.chat[data-mode="float"], .chat[data-mode="dock"], .chat[data-mode="min"] { display: flex; }
.chat[data-mode="float"] {
  position: fixed; z-index: 640; box-shadow: var(--e3);
  width: var(--chatw); max-width: calc(100vw - var(--s6));
  height: min(524px, calc(100dvh - var(--bar) - var(--s12)));
}
.chat[data-mode="dock"] {
  grid-column: 3; grid-row: 1; height: 100%;
  border-radius: 0; border-width: 0 0 0 1px; box-shadow: none;
}
.chat[data-mode="min"] {
  position: fixed; z-index: 640; right: var(--s3); bottom: calc(var(--bar) + var(--s3));
  width: auto; height: auto; border-radius: var(--rf); box-shadow: var(--e3);
  background: linear-gradient(180deg, var(--green-2), var(--green)); border-color: var(--green-d);
}
.chat[data-mode="min"] > *:not(.chat__pill) { display: none; }
.chat__pill { display: none; }
.chat[data-mode="min"] .chat__pill {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s4); background: none; border: 0; color: var(--onGreen);
  font: 500 var(--fz-cap)/1 var(--font); letter-spacing: .06em;
  transition: color var(--t1);
}
.chat[data-mode="min"] .chat__pill:hover { color: #fff; }
.chat__pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat__pill em {
  font: 500 var(--fz-micro)/1.6 var(--font-mono); font-style: normal;
  background: var(--gold-l); color: var(--chrome-d); border-radius: var(--rf); padding: 0 var(--s1);
}
.chat__pill em:empty { display: none; }

.chat__h {
  display: flex; align-items: center; gap: var(--s2); flex: none;
  padding: var(--s2) var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(180deg, #ffffff, #f7f9fb);
}
.chat[data-mode="float"] .chat__h { cursor: grab; }
.chat[data-mode="float"].is-drag .chat__h { cursor: grabbing; }
.chat__ic {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: var(--r1); background: rgba(15,111,222,.16); color: var(--gold-ink);
}
.chat__ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat__id { display: grid; min-width: 0; }
.chat__id b { font: 500 var(--fz-cap)/1.3 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); }
.chat__id span { font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--muted-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat__log {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s3);
  display: grid; gap: var(--s3); align-content: start;
}
.chat__m { display: grid; gap: var(--s2); animation: rise var(--t2); }
.chat__m .b { padding: var(--s2) var(--s3); border-radius: var(--r2); font-size: var(--fz-sm); line-height: 1.55; }
.chat__m.you { justify-items: end; }
.chat__m.you .b {
  max-width: 90%; background: linear-gradient(180deg, var(--green-2), var(--green));
  color: #fff; box-shadow: var(--e1);
}
.chat__m.a .b { background: var(--paper-2); border: 1px solid var(--hair-2); color: var(--ink-2); }
.chat__m.a .b b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.chat__m .did {
  display: block; padding-left: var(--s3); border-left: 2px solid var(--gold);
  font: 400 var(--fz-cap)/1.45 var(--font); color: var(--gold-ink);
}
.chat__m .did b { color: var(--gold-ink); font-weight: 500; }
.chat__m.no .b { border-color: rgba(207,58,55,.40); background: rgba(207,58,55,.07); color: var(--down-ink); }
.chat__m.no .did { border-left-color: var(--down); color: var(--down-ink); }
.chat__think { display: inline-flex; align-items: center; gap: var(--s1); }
.chat__think i { width: 5px; height: 5px; border-radius: var(--rf); background: var(--gold-ink); animation: think 1200ms var(--ease) infinite; }
.chat__think i:nth-child(2) { animation-delay: 120ms; }
.chat__think i:nth-child(3) { animation-delay: 240ms; }
@keyframes think { 0%, 100% { opacity: .25; transform: none } 40% { opacity: 1; transform: translateY(-2px) } }

.chat__chips {
  display: flex; flex-wrap: wrap; gap: var(--s1); flex: none;
  padding: var(--s2) var(--s3); border-top: 1px solid var(--hair-2); background: var(--paper-2);
  max-height: 152px; overflow: auto;
}
.chat[data-mode="dock"] .chat__chips { max-height: 248px; }
.chat__chip {
  cursor: pointer; padding: var(--s1) var(--s2); border-radius: var(--rf);
  font: 400 var(--fz-cap)/1.4 var(--font); color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--rule);
  transition: color var(--t1), border-color var(--t1), background var(--t1), transform var(--t1);
}
.chat__chip:hover { color: var(--ink); border-color: var(--hair); background: rgba(15,111,222,.12); }
.chat__chip:active { transform: translateY(1px); }
.chat__chip:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.chat__in { display: flex; gap: var(--s2); flex: none; padding: var(--s2) var(--s3) var(--s1); }
.chat__in .tf { min-width: 0; }
.chat__note { flex: none; margin: 0; padding: var(--s1) var(--s3) var(--s2); font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); }

/* palette: the live inline result strip */
.cmdk__res {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--hair-2);
  background: var(--paper-3); box-shadow: inset 2px 0 0 var(--gold);
  font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.cmdk__res[hidden] { display: none; }
.cmdk__res b { color: var(--ink); font-weight: 500; }
.cmdk__res .rl {
  font: 500 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--gold-ink);
}

/* ============================================================
   22 · THE EVIDENCE — track record, rebalance plan, saved folio
   Every surface below states its payoff in one sentence (.lead),
   prints its numbers in tabular mono, and shows the bad news in
   the same weight as the good.
   ============================================================ */

/* one sentence per panel, in the client's language */
.lead {
  margin: 0 0 var(--s3); font: 400 var(--fz-sm)/1.55 var(--font); color: var(--muted);
  max-width: 82ch;
}
.lead b { color: var(--ink-2); font-weight: 500; }
.h-sub {
  margin: var(--s4) 0 var(--s2); font: 500 var(--fz-cap)/1.2 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--hair-2);
}

/* --- stat tiles: the summary and the record share one component --- */
.recsum, .recgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
}
.recgrid { margin-top: var(--s3); }
.rst { padding: var(--s2) var(--s3); background: var(--paper); display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.rst .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-num); }
.rst .v {
  font: 500 var(--fz-lead)/1.15 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.rst .s { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted-num); }
.rst.up .v { color: var(--up-ink); }
.rst.down .v { color: var(--down-ink); }
.rst.warn .v { color: var(--warn-ink); }
.rst.lead-tile { background: linear-gradient(180deg, #e7f1fc, var(--paper)); }

/* --- lagging periods --- */
.lags { list-style: none; counter-reset: lg; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.lags li {
  counter-increment: lg; position: relative; padding: var(--s2) var(--s3) var(--s2) var(--s8);
  border: 1px solid var(--hair-2); border-left: 2px solid var(--down); border-radius: var(--r1);
  background: rgba(207,58,55,.05); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.lags li::before {
  content: counter(lg, decimal-leading-zero); position: absolute; left: var(--s3); top: var(--s2);
  font: 500 var(--fz-cap)/1.5 var(--font-mono); color: var(--down-ink); font-variant-numeric: tabular-nums;
}
.lags li.open { border-left-color: var(--warn); background: var(--warn-chip); }
.lags li.open::before { color: var(--warn-ink); }
.lags b { color: var(--ink); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lags .when { font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); display: block; }

/* --- the call table --- */
.calls-wrap, .plan-wrap { overflow-x: auto; max-height: 340px; overflow-y: auto; }
.calls { width: 100%; min-width: 660px; border-collapse: collapse; }
.calls th {
  position: sticky; top: 0; z-index: 1; background: var(--paper);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: var(--s2); border-bottom: 1px solid var(--hair);
}
.calls th.n, .calls td.n { text-align: right; }
.calls td { padding: var(--s2); border-bottom: 1px solid var(--rule-2); font-size: var(--fz-sm); vertical-align: baseline; }
.calls td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); }
.calls td.when { font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calls tr.is-wrong td { background: rgba(207,58,55,.06); }
.calls tr.is-open td { background: rgba(15,111,222,.09); }
.calls tr:hover td { background: rgba(15,111,222,.10); }
.calls .pos { color: var(--up-ink); }
.calls .neg { color: var(--down-ink); }
.lb {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2);
  font: 500 var(--fz-micro)/1.7 var(--font); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r1);
}
.lb.off { background: rgba(207,58,55,.14); color: var(--down-ink); }
.lb.on  { background: rgba(16,146,79,.14); color: var(--up-ink); }
.lb.neutral { background: var(--inset-bg); color: var(--muted); }
.vd {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2);
  font: 500 var(--fz-micro)/1.7 var(--font); letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r1); border: 1px solid transparent; white-space: nowrap;
}
.vd.right { background: rgba(16,146,79,.14); color: var(--up-ink); border-color: rgba(16,146,79,.35); }
.vd.wrong { background: rgba(207,58,55,.14); color: var(--down-ink); border-color: rgba(207,58,55,.42); }
.vd.none  { background: var(--inset-bg); color: var(--muted); border-color: var(--rule); }
.vd.open  { background: var(--warn-chip); color: var(--warn-ink); border-color: var(--hair); }

/* --- hit rate --- */
.hit { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.hit__n {
  font: 600 var(--fz-num)/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.hit__n small { font: 500 var(--fz-sm)/1 var(--font); color: var(--muted); margin-left: .2em; }
.hit__b { flex: 1 1 180px; min-width: 0; }
.hit__bar { display: flex; height: 10px; border-radius: var(--r1); overflow: hidden; box-shadow: var(--recess); background: var(--inset-bg); }
.hit__bar i { display: block; transition: width var(--t2); }
.hit__bar .r { background: linear-gradient(180deg, var(--green-3), var(--green-2)); }
.hit__bar .w { background: linear-gradient(180deg, #e05a56, var(--down)); }
.hit__key { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.hit__key b { color: var(--ink-2); font-weight: 500; }

.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.limits li {
  padding: var(--s2) var(--s3); border: 1px solid var(--hair-2); border-radius: var(--r1);
  background: var(--paper-2); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.limits b { color: var(--ink); font-weight: 500; }

/* --- portfolio value --- */
.pv { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.pv .lab { flex: none; }
.pv__in { display: inline-flex; align-items: center; gap: var(--s1); }
.pv__cur { font: 400 var(--fz-lead)/1 var(--font-mono); color: var(--gold-ink); }
.pv .tf { width: 108px; font-size: var(--fz-lead); }
.pv__hint { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); flex: 1 1 180px; min-width: 0; }
.pv__hint.is-bad { color: var(--down-ink); font-weight: 500; }
.pv .tf.is-bad { border-color: var(--down); }

/* --- the verdict box: do this, or do nothing --- */
.verdict {
  display: grid; gap: var(--s1); padding: var(--s3); margin-bottom: var(--s3);
  border-radius: var(--r2); border: 1px solid var(--hair); border-left: 2px solid var(--gold);
  background: linear-gradient(180deg, #e7f1fc, #fafcfe);
}
.verdict.stay { border-left-color: var(--up); background: linear-gradient(180deg, #e8f6ee, #fbfdfc); }
.verdict.err { border-left-color: var(--down); background: linear-gradient(180deg, #fbeeee, #fefafa); }
.verdict .t { font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.verdict.stay .t { color: var(--up-ink); }
.verdict.err .t { color: var(--down-ink); }
.verdict .d { font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2); max-width: 84ch; }
.verdict .d b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- the trade list --- */
.plan { width: 100%; min-width: 560px; border-collapse: collapse; }
.plan th {
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 0 var(--s2) var(--s2); border-bottom: 1px solid var(--hair);
}
.plan th.n { text-align: right; }
.plan td { padding: var(--s2); border-bottom: 1px solid var(--rule-2); font-size: var(--fz-sm); }
.plan td.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); }
.plan .step { display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: middle; border-radius: var(--rf); background: var(--inset-bg); color: var(--ink-2); font: 500 var(--fz-cap)/1 var(--font-mono); flex: none; }
.plan .sw2 { display: inline-block; width: 8px; height: 8px; vertical-align: middle; border-radius: var(--r1); margin: 0 var(--s2); }
/* .trd, not .side — the side rail already owns .side, and a badge must not inherit it */
.plan .trd { display: inline-block; font: 500 var(--fz-micro)/1.7 var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 0 var(--s2); border-radius: var(--r1); }
.plan .trd.buy { background: rgba(16,146,79,.14); color: var(--up-ink); }
.plan .trd.sell { background: rgba(207,58,55,.14); color: var(--down-ink); }
.plan .trd.flat { background: var(--inset-bg); color: var(--muted); }
.plan tr.is-skip td { background: rgba(15,111,222,.08); }
.plan tr.is-hold td { color: var(--muted-num); }
/* .pn, not .why — .why is the numbered reasoning list on the portfolio page */
.plan .pn { display: block; font: 400 var(--fz-cap)/1.4 var(--font); color: var(--warn-ink); margin-top: var(--s1); }
.plan__foot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
  margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--hair-2);
  font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums;
}
.plan__foot b { color: var(--ink); font-weight: 500; }
.plan__foot .cap { color: var(--warn-ink); }
.plan__foot .over { color: var(--down-ink); }

/* --- the schedule comparison --- */
.sched {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-top: var(--s3);
  background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
}
.sched__c { padding: var(--s2) var(--s3); background: var(--paper); display: grid; gap: var(--s1); min-width: 0; }
.sched__c.is-on { background: linear-gradient(180deg, #e1ecfb, #fafcfe); box-shadow: inset 2px 0 0 var(--gold); }
.sched__c .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sched__c .v { font: 500 var(--fz-lead)/1.15 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.sched__c .s { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); }
.sched__c .s b { color: var(--ink-2); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- the saved portfolio --- */
.saved { display: grid; gap: var(--s2); }
.saved__top {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s2); border-bottom: 1px solid var(--hair-2);
}
.saved__v { font: 500 var(--fz-fig)/1 var(--font-mono); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.saved__since { font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted); flex: 1 1 200px; min-width: 0; }
.saved__since b { color: var(--ink-2); font-weight: 500; }
.gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.gaps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; }
.gaps .k { font: 400 var(--fz-sm)/1.4 var(--font); color: var(--ink-2); }
.gaps .v { font: 500 var(--fz-sm)/1.4 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.gaps .m { grid-column: 1 / -1; height: 4px; border-radius: var(--r1); background: var(--inset-bg); overflow: hidden; box-shadow: var(--recess); }
.gaps .m i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-2), var(--green-3)); transition: width var(--t2); }
.gaps li.near .m i { background: linear-gradient(90deg, var(--warn), var(--warn-ink)); }
.gaps li.near .v { color: var(--warn-ink); }

/* --- what the projection assumes --- */
.assume { display: grid; gap: var(--s2); }
.assume__row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--hair-2); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.assume__row .k { font: 500 var(--fz-micro)/1.7 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.assume__row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.assume__hit {
  margin-top: var(--s1); padding: var(--s3); border-radius: var(--r2);
  border: 1px solid rgba(207,58,55,.35); background: rgba(207,58,55,.06);
  font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.assume__hit .t { display: block; font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight); color: var(--down-ink); margin-bottom: var(--s1); }
.assume__hit b { color: var(--down-ink); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* maximised: the two record panels get the full height for their canvas */
.maxhost .calls-wrap, .maxhost .plan-wrap { max-height: none; }
.maxhost [data-panel="record"] .chartbox, .maxhost [data-panel="rdd"] .chartbox { flex: 1 1 auto; height: auto; min-height: 220px; }

/* ============================================================
   23 · THE EXPLAINER — plain language over the top of the numbers
   ============================================================ */
.xp {
  margin: var(--s3) 0 0; border: 1px solid var(--hair);
  border-left: 3px solid var(--gold); border-radius: var(--r2);
  background: linear-gradient(180deg, var(--gold-chip), var(--paper) 62%);
  box-shadow: var(--sheen), var(--e1);
}
.xp__h {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--hair-2);
}
.xp__mark {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: 600 var(--fz-micro)/1.2 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--gold-ink); white-space: nowrap;
}
.xp__mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.xp__sub { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); }
.xp__body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s3); }
.xp__off {
  margin: 0; padding: var(--s3) var(--s4); font-size: var(--fz-sm);
  line-height: var(--lh-body); color: var(--muted); display: none;
}
.xp[data-on="0"] .xp__body { display: none; }
.xp[data-on="0"] .xp__off { display: block; }
.xp[data-on="0"] { background: var(--paper); border-left-color: var(--hair); }
.xp__p { margin: 0; font-size: var(--fz-body); line-height: 1.62; color: var(--ink-2); max-width: 82ch; }
.xp__p b { color: var(--ink); font-weight: 500; }
.xp__p .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.xp__k {
  display: block; font: 600 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.xp__p--down { color: var(--ink-2); border-left: 2px solid var(--down); padding-left: var(--s3); }
.xp__p--down .xp__k { color: var(--down-ink); }
.xp__p--down .n { color: var(--down-ink); }
.xp__grid {
  display: grid; gap: var(--s3) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  padding-top: var(--s1); border-top: 1px solid var(--hair-2);
}
.xp__state {
  margin: 0; font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.xp__state b { color: var(--ink-2); font-weight: 500; }
.xp__grid .xp__p { font-size: var(--fz-sm); line-height: 1.58; }

/* ============================================================
   24 · THE PORTFOLIO ANALYST — personas, intake and the verdict
   ============================================================ */
.intake { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); align-items: start; }
.intake__q { display: grid; gap: var(--s2); min-width: 0; }
.intake__q .seg { width: 100%; }
.intake__q .pv__in { align-items: center; }
.intake__q .pv__in .tf { width: 132px; font-size: var(--fz-lead); }
.intake__q .pv__cur { font: 400 var(--fz-lead)/1 var(--font-mono); color: var(--gold-ink); }
.intake__hint { font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted); }
.an-warn { display: none; margin-top: var(--s4); }
.an-warn.is-on { display: block; }
.an-warn__box {
  padding: var(--s3) var(--s4); border-radius: var(--r2);
  border: 1px solid rgba(207,58,55,.35); background: rgba(207,58,55,.06);
  font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.an-warn__box .t { display: block; font: 650 var(--fz-lead)/1.3 var(--font); letter-spacing: var(--tr-tight); color: var(--down-ink); margin-bottom: var(--s1); }
.an-warn__box b { color: var(--down-ink); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.an-warn__row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

.personas { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.pill.persona {
  display: grid; justify-items: start; text-align: left; gap: var(--s1);
  padding: var(--s3) var(--s4); border-radius: var(--r2); white-space: normal;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
  height: 100%; align-content: start;
}
.pill.persona:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: var(--sheen), var(--e2); background: var(--paper); }
.pill.persona.is-on { border-color: var(--gold); background: var(--gold-chip); box-shadow: inset 2px 0 0 var(--gold); }
.persona__t { font: 600 var(--fz-lead)/1.28 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.persona__d { font: 400 var(--fz-sm)/1.5 var(--font); color: var(--muted); }
.persona__m {
  font: 500 var(--fz-cap)/1.4 var(--font-mono); color: var(--gold-num);
  font-variant-numeric: tabular-nums; margin-top: var(--s1);
}
.pill.persona.is-on .persona__m { color: var(--gold-num); }

.an-out { display: grid; gap: var(--s4); }
.an-empty { font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--muted); margin: 0; }
.an-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.an-head .t { font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); }
.an-head .s { font: 500 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.an-figs { display: grid; gap: 1px; background: var(--hair-2); border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.an-figs > div { background: var(--paper); padding: var(--s3); min-width: 0; }
.an-figs .k { display: block; font: 600 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); }
.an-figs .v { display: block; font: 500 var(--fz-fig)/1.15 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); margin-top: 2px; }
.an-figs .s { display: block; font: 400 var(--fz-cap)/1.45 var(--font); color: var(--muted); margin-top: 2px; }
.an-figs > div.down .v { color: var(--down-ink); }
.an-figs > div.up .v { color: var(--up-ink); }
.an-say { display: grid; gap: var(--s3); }
.an-say p { margin: 0; font-size: var(--fz-body); line-height: 1.62; color: var(--ink-2); max-width: 82ch; }
.an-say p b { color: var(--ink); font-weight: 500; }
.an-say p .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.an-cost {
  padding: var(--s3) var(--s4); border-radius: var(--r2);
  border: 1px solid var(--hair); border-left: 3px solid var(--warn);
  background: var(--warn-chip); font-size: var(--fz-sm); line-height: var(--lh-body); color: var(--ink-2);
}
.an-cost .t { display: block; font: 600 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--warn-ink); margin-bottom: var(--s1); }
.an-cost b { color: var(--ink); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.an-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* the guard the chosen persona leans on, marked wherever it is drawn */
.gtile.is-emph { border-color: var(--gold); background: var(--gold-chip); box-shadow: inset 2px 0 0 var(--gold); }
.pane.guard.is-emph { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold), var(--e1); }
.pane.guard.is-emph .h-pane { color: var(--gold-ink); }


/* ============================================================
   24b · THE PRIVATE BANKER — the same assistant, entered per view,
        the standing mandate and the one-question onboarding.
        Tokens only; every figure is tabular.
   ============================================================ */

/* --- the view header: payoff on the left, the banker in the same
       place on every one of the seven views --- */
.vhead {
  display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap;
  margin: 0 0 var(--s4);
}
.vhead .payoff { margin: 0; flex: 1 1 320px; min-width: 0; }
.vai {
  flex: none; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s5) var(--s2) var(--s3);
  font: 500 var(--fz-cap)/1 var(--font); letter-spacing: .04em;
  color: var(--gold-ink); background: var(--paper-3);
  border: 1px solid var(--rule); border-left: 2px solid var(--gold);
  border-radius: var(--r1); box-shadow: var(--sheen), var(--e1);
  transition: transform var(--t1), box-shadow var(--t1), border-color var(--t1), background var(--t1), color var(--t1);
}
.vai svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vai:hover { transform: translateY(-1px); background: var(--gold-chip); border-color: var(--hair); box-shadow: var(--sheen), var(--e2); }
.vai:active { transform: translateY(1px); box-shadow: var(--recess); }
.vai:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.vai__k {
  position: absolute; top: 2px; right: var(--s1);
  font: 500 var(--fz-micro)/1 var(--font-mono); font-style: normal;
  color: var(--muted-num); opacity: 0; transition: opacity var(--t1);
}
.vhead:hover .vai__k, .vai:focus-visible .vai__k { opacity: 1; }

/* --- the scope the banker carries into a view --- */
.chat__id { flex: 1 1 auto; min-width: 0; }
.chat__id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__id.is-scoped span { color: var(--gold-ink); }
.chat__m.scope .b {
  background: var(--gold-chip); border: 1px solid var(--hair-2);
  border-left: 2px solid var(--gold); color: var(--ink-2);
}
.chat__m.scope .b .sc {
  display: block; font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--s1);
}
.chat__m.scope .b .sv {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500;
}

/* --- the mandate chip in the topbar --- */
.mchip { cursor: pointer; transition: border-color var(--t1), background var(--t1), transform var(--t1); }
.mchip:hover { border-color: var(--gold); background: var(--gold-chip); }
.mchip:active { transform: translateY(1px); }
.mchip .dot { background: var(--up); }
.mchip.is-paused { border-color: rgba(200,135,26,.55); background: var(--warn-chip); color: var(--warn-ink); }
.mchip.is-paused .dot { background: var(--warn); animation: none; }
.mchip.is-none { color: var(--muted-num); }
.mchip.is-none .dot { background: var(--muted-num); animation: none; }
.mchip b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* --- the unread badge on the rail --- */
.rb__n {
  position: absolute; top: 2px; left: var(--s2); font-style: normal;
  font: 500 var(--fz-micro)/1.6 var(--font-mono); font-variant-numeric: tabular-nums;
  background: var(--gold-l); color: var(--chrome-d); border-radius: var(--rf); padding: 0 var(--s1);
}
.rb__n[hidden] { display: none; }

/* ============================================================
   24c · ONBOARDING — one question, inside the layout
   ============================================================ */
.ob {
  margin: 0 0 var(--s3); padding: var(--s4);
  border: 1px solid var(--hair-2); border-left: 2px solid var(--gold);
  border-radius: var(--r2); box-shadow: var(--sheen), var(--e1);
  background: radial-gradient(120% 160% at 100% 0%, #e7f1fc 0%, var(--paper-3) 60%);
  animation: rise var(--t2);
}
.ob[hidden] { display: none; }
.ob__h { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.ob__q { margin: var(--s1) 0 0; font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight); color: var(--ink); flex: 1 1 260px; }
.ob__lead { margin: var(--s2) 0 0; font-size: var(--fz-sm); line-height: 1.55; color: var(--muted); max-width: 84ch; }
.ob__lead b { color: var(--ink-2); font-weight: 500; }
.ob__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--s2); margin-top: var(--s3);
}
.ob__opt {
  display: grid; gap: var(--s1); text-align: left; cursor: pointer; align-content: start;
  padding: var(--s3); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r1); box-shadow: var(--sheen);
  transition: transform var(--t1), border-color var(--t1), box-shadow var(--t1), background var(--t1);
}
.ob__opt:hover { transform: translateY(-1px); border-color: var(--gold); background: var(--gold-chip); box-shadow: var(--sheen), var(--e2); }
.ob__opt:active { transform: translateY(1px); box-shadow: var(--recess); }
.ob__opt:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.ob__opt .t { font: 500 var(--fz-body)/1.35 var(--font); color: var(--ink); }
.ob__opt .d { font: 400 var(--fz-sm)/1.5 var(--font); color: var(--muted); }
.ob__opt .m {
  font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.ob__foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.ob__foot .note { margin: 0; flex: 1 1 240px; }

/* the answer, once given: what it chose, why, the first output and the cost */
.ob__out { display: grid; gap: var(--s3); margin-top: var(--s3); }
.ob__badge {
  display: inline-flex; align-items: center; gap: var(--s2); align-self: start;
  padding: var(--s1) var(--s3); border-radius: var(--rf);
  font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--up-ink); background: rgba(16,146,79,.10); border: 1px solid rgba(16,146,79,.45);
}
.ob__say { margin: 0; font-size: var(--fz-body); line-height: 1.62; color: var(--ink-2); max-width: 86ch; }
.ob__say + .ob__say { margin-top: var(--s2); }
.ob__say b { color: var(--ink); font-weight: 500; }
.ob__say .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.ob__figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: var(--s2); }
.ob__figs > div {
  display: grid; gap: 2px; padding: var(--s2) var(--s3);
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1);
}
.ob__figs .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-num); }
.ob__figs .v { font: 500 var(--fz-body)/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ob__figs .s { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted-num); }
.ob__figs .down .v { color: var(--down-ink); }
.ob__cost {
  padding: var(--s3); border-radius: var(--r1);
  border: 1px solid rgba(200,135,26,.45); background: var(--warn-chip);
  font-size: var(--fz-sm); line-height: 1.55; color: var(--ink-2);
}
.ob__cost .t {
  display: block; font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--warn-ink); margin-bottom: var(--s1);
}
.ob__cost b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ob__row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* the onboarding card while the first output is being computed */
.ob__sk { display: grid; gap: var(--s2); margin-top: var(--s3); }
.ob__sk i {
  display: block; height: 12px; border-radius: var(--r1);
  background: linear-gradient(90deg, var(--inset-bg) 0%, var(--paper-2) 40%, var(--inset-bg) 80%);
  background-size: 220% 100%; animation: mdshim 1100ms linear infinite;
}
.ob__sk i:nth-child(2) { width: 78%; }
.ob__sk i:nth-child(3) { width: 52%; }

/* ============================================================
   24d · THE STANDING MANDATE VIEW
   ============================================================ */
.md-state { display: grid; gap: var(--s3); }
.md-quote {
  margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r1);
  border: 1px solid var(--hair-2); border-left: 2px solid var(--gold);
  background: linear-gradient(270deg, #e7f1fc 0%, var(--paper) 46%);
  font: 400 var(--fz-lead)/1.5 var(--font); color: var(--ink);
}
.md-quote .who {
  display: block; font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--s1);
}
.md-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: var(--s2); }
.md-facts > div {
  display: grid; gap: 2px; padding: var(--s2) var(--s3);
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1);
}
.md-facts .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.md-facts .v { font: 500 var(--fz-body)/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.md-facts .s { font: 400 var(--fz-cap)/1.45 var(--font); color: var(--muted); }
.md-acts { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.md-acts .grow { min-width: var(--s1); }

/* the standing summary */
.mdsum { display: grid; gap: var(--s3); }
.mdsum__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s2); }
.mdsum__c {
  display: grid; gap: 2px; padding: var(--s2) var(--s3);
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1);
}
.mdsum__c .k { font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mdsum__c .v { font: 500 var(--fz-fig)/1.15 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.mdsum__c .s { font: 400 var(--fz-cap)/1.45 var(--font); color: var(--muted); }
.mdsum__c.ask { border-color: rgba(200,135,26,.5); background: var(--warn-chip); }
.mdsum__c.ask .v { color: var(--warn-ink); }
.mdsum__ask {
  padding: var(--s3); border-radius: var(--r1);
  border: 1px solid rgba(200,135,26,.45); background: var(--warn-chip);
  font-size: var(--fz-sm); line-height: 1.55; color: var(--ink-2);
}
.mdsum__ask .t {
  display: block; font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--warn-ink); margin-bottom: var(--s1);
}
.mdsum__ask b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.mdsum__ask .md-acts { margin-top: var(--s2); }
.mdsum__quiet {
  padding: var(--s3); border-radius: var(--r1);
  border: 1px solid var(--hair-2); background: var(--paper);
  font-size: var(--fz-sm); line-height: 1.55; color: var(--muted);
}
.mdsum__quiet b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the log */
.mdlog {
  display: grid; gap: 1px; background: var(--hair-2);
  border: 1px solid var(--hair-2); border-radius: var(--r1); overflow: hidden;
  max-height: 340px; overflow-y: auto; margin-top: var(--s3);
}
.mdlog.is-empty { background: var(--paper); }
.mdlog__i {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 152px);
  gap: var(--s3); padding: var(--s2) var(--s3); background: var(--paper);
  font-size: var(--fz-sm); line-height: 1.5; color: var(--ink-2); align-items: baseline;
}
.mdlog__i.is-in { animation: slidein var(--t2); }
.mdlog__i .t { font: 400 var(--fz-cap)/1.6 var(--font-mono); color: var(--muted-num); font-variant-numeric: tabular-nums; }
.mdlog__i .w { min-width: 0; }
.mdlog__i .w b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.mdlog__i .why { display: block; font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted); }
.mdlog__i .num {
  justify-self: end; text-align: right;
  font: 500 var(--fz-sm)/1.5 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.mdlog__i.act { box-shadow: inset 2px 0 0 var(--gold); }
.mdlog__i.ask { background: var(--warn-chip); box-shadow: inset 2px 0 0 var(--warn); }
.mdlog__i.ask .num { color: var(--warn-ink); }
.mdlog__i.miss { box-shadow: inset 2px 0 0 var(--down); }
.mdlog__i.miss .num { color: var(--down-ink); }
.mdlog__i.err { background: rgba(207,58,55,.07); box-shadow: inset 2px 0 0 var(--down); }
.mdlog__i.err .num { color: var(--down-ink); }
.mdlog__i.undone { opacity: .62; }
.mdlog__i.undone .w b { text-decoration: line-through; }
.mdk {
  display: inline-block; margin-right: var(--s2); padding: 2px var(--s2); border-radius: var(--r1);
  font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase;
  background: #e2f5f4; color: #0a6060;
}
.mdk.act { background: var(--gold-chip); color: var(--gold-ink); }
.mdk.ask { background: rgba(200,135,26,.16); color: var(--warn-ink); }
.mdk.miss, .mdk.err { background: rgba(207,58,55,.12); color: var(--down-ink); }

/* the log while a sweep is running — a real loading state */
.mdlog__sk { display: grid; gap: var(--s2); padding: var(--s3); background: var(--paper); }
.mdlog__sk i {
  display: block; height: 10px; border-radius: var(--r1);
  background: linear-gradient(90deg, var(--inset-bg) 0%, var(--paper-2) 40%, var(--inset-bg) 80%);
  background-size: 220% 100%; animation: mdshim 1100ms linear infinite;
}
.mdlog__sk i:nth-child(2) { width: 72%; }
.mdlog__sk i:nth-child(3) { width: 46%; }
@keyframes mdshim { from { background-position: 120% 0 } to { background-position: -120% 0 } }

/* the paused banner */
.md-paused {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s3); border-radius: var(--r1);
  border: 1px solid rgba(200,135,26,.45); background: var(--warn-chip);
  font-size: var(--fz-sm); line-height: 1.5; color: var(--ink-2);
}
.md-paused .t { font-weight: 500; color: var(--warn-ink); }

/* ============================================================
   25 · RESPONSIVE — verified at 1600/1440/1280/1100/1000/900/768/480/390
   ============================================================ */
@media (min-width: 1121px) {
  .app[data-chat="dock"].show-side .stage { grid-template-columns: minmax(0, 1fr) var(--sw) minmax(280px, var(--side)); }
  .app[data-chat="dock"].show-side .split { display: grid; }
}
@media (max-width: 1700px) { .hide-xxl { display: none !important; } }
@media (max-width: 1500px) { .hide-xl { display: none !important; } }
@media (max-width: 1280px) { .hide-lg { display: none !important; } }
@media (max-width: 1120px) { .hide-md { display: none !important; } }
@media (max-width: 900px)  { .hide-sm { display: none !important; } }
@media (max-width: 640px)  { .hide-xs { display: none !important; } }

@media (max-width: 1400px) {
  :root { --side: 280px; }
  .hero__grid { grid-template-columns: minmax(240px, 1fr) minmax(288px, 1.2fr); }
  .zone--proj { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hair-2); }
}
@media (max-width: 1120px) {
  .stage, .app[data-chat="dock"] .stage { grid-template-columns: minmax(0, 1fr); }
  .side, .split { display: none; }
  .app.show-side .side { display: none; }
  /* no side column to dock into — the assistant floats instead of covering the page */
  .chat[data-mode="dock"] {
    position: fixed; z-index: 640; right: var(--s3); bottom: calc(var(--bar) + var(--s3));
    width: min(360px, calc(100vw - var(--s6)));
    height: min(524px, calc(100dvh - var(--bar) - var(--s12)));
    border-radius: var(--r2); border-width: 1px; box-shadow: var(--e3);
  }
  .instruments li { grid-template-columns: 168px minmax(0, 1fr) 152px; gap: var(--s3); }
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .zone + .zone { border-left: 0; border-top: 1px solid var(--hair-2); }
  .grid2, .guards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --rail: 60px; }
  .rb { width: 48px; }
  .rb span { display: none; }
  .instruments li { grid-template-columns: 1fr; gap: var(--s2); }
  .instruments .price { text-align: left; }
  .kbtn { min-width: 0; }
  .kbtn span { display: none; }
  .topbar { padding: var(--s2) var(--s3); }
}
@media (max-width: 768px) {
  .briefs li { grid-template-columns: 56px minmax(0, 1fr); }
  .briefs .spark { display: none; }
  .main { padding: var(--s3) var(--s3) var(--s5); }
}
@media (max-width: 900px) {
  .xp__h { gap: var(--s2); }
  .personas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .statusbar { gap: var(--s3); padding: 0 var(--s2); }
  .xp__h { padding: var(--s2) var(--s3); }
  .xp__body { padding: var(--s3); }
  .xp__off { padding: var(--s3); }
  .xp__sub { display: none; }
  .intake { gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
  .an-figs { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .pill.persona { padding: var(--s3); }
  .statusbar .sb-btn { letter-spacing: .06em; }
  .display { font-size: var(--fz-title); }
  .payoff { font-size: var(--fz-lead); }
  .alloc { grid-template-columns: 1fr; }
  .donut { height: 136px; }
  .hold__row { grid-template-columns: 64px minmax(0, 1fr) 52px; gap: var(--s2); }
  .keys { grid-template-columns: 1fr; }
  .ctrls { gap: var(--s3); width: 100%; margin-left: 0; }
  .hero__bar, .zone { padding-left: var(--s3); padding-right: var(--s3); }
  .seg__b { padding: var(--s2); }
  .seg.sm .seg__b { padding: var(--s2) var(--s1); }
  .figs { gap: var(--s1); }
  .demo-pill { left: var(--s2) !important; right: var(--s2) !important; }
  .gstrip { gap: var(--s2); padding: var(--s2); }
  .gstrip__set { width: 100%; }
  .gtile { flex: 1 1 132px; }
  .maxhost__b { padding: var(--s2) var(--s3) var(--s3); }
  .maxhost .alloc { grid-template-columns: minmax(0, 1fr); }
  /* a bottom sheet that still clears the navigation rail and the demo bar */
  .chat[data-mode="float"], .chat[data-mode="dock"] {
    left: calc(var(--rail) + var(--s2)) !important; right: var(--s2); top: auto !important;
    bottom: calc(var(--bar) + var(--s12) + var(--s2)); width: auto; max-width: none;
    height: min(400px, calc(100dvh - var(--bar) - var(--s12) - var(--s8) - var(--s8)));
  }
  .chat[data-mode="min"] { bottom: calc(var(--bar) + var(--s12) + var(--s2)); }
  /* the conversation matters more than the chip list on a phone */
  .chat__chips, .chat[data-mode="dock"] .chat__chips { max-height: 84px; }
  .pv { gap: var(--s2); }
  .pv__hint { flex-basis: 100%; }
  .lags li { padding-left: var(--s6); }
  .lags li::before { left: var(--s2); }
  .calls-wrap, .plan-wrap { max-height: 288px; }
}
@media (max-width: 900px) {
  /* the banker keeps its place in the header; the payoff simply gives way first */
  .vhead .payoff { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .mdlog { max-height: 320px; }
  .mdlog__i { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .mdlog__i .num { justify-self: start; text-align: left; white-space: normal; }
  .ob { padding: var(--s3); }
  .ob__grid { grid-template-columns: minmax(0, 1fr); }
  .md-facts, .mdsum__row, .ob__figs { grid-template-columns: minmax(0, 1fr); }
  .md-quote { padding: var(--s3); font-size: var(--fz-body); }
}
@media (max-width: 480px) {
  .sheet { padding: var(--s4); }
  .feed__i { grid-template-columns: 1fr; gap: var(--s1); }
  .drift { min-width: 288px; }
  .recsum, .recgrid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .assume__row { grid-template-columns: 1fr; gap: var(--s1); }
  .sched { grid-template-columns: 1fr; }
  .hit__n { font-size: var(--fz-display); }
}

/* ============================================================
   26 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   19 · THE AGENT, STANDING — a permanent strip under the topbar.
   It is on every view at every width, so the thing that does the
   work is never something you have to go and find.
   ============================================================ */
.icb--top { width: 28px; height: 28px; border-color: var(--hair-2); color: var(--ink-2); }
.icb--top svg { width: 15px; height: 15px; }

.adock {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, #eef4fd 0%, #e8effa 100%);
  box-shadow: var(--sheen);
}
.adock__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); flex-wrap: wrap; row-gap: var(--s2);
}
.adock__glyph {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--green), var(--green-d));
  box-shadow: 0 0 0 3px rgba(15,111,222,.14);
}
.adock__glyph i { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; }
.adock.is-busy .adock__glyph i { animation: adpulse 900ms var(--ease) infinite; }
.adock.is-paused .adock__glyph { background: linear-gradient(160deg, #8a6a12, var(--warn-ink)); box-shadow: 0 0 0 3px rgba(200,135,26,.18); }
.adock.is-idle .adock__glyph { background: linear-gradient(160deg, #7d8798, #4a5464); box-shadow: 0 0 0 3px rgba(74,84,100,.14); }
@keyframes adpulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(.55); opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .adock.is-busy .adock__glyph i { animation: none } }

.adock__id { display: grid; gap: 1px; min-width: 0; }
.adock__lab { font: 500 var(--fz-micro)/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-num); }
.adock__prof {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: 650 var(--fz-sm)/1.25 var(--font); color: var(--ink);
  border-bottom: 1px dashed var(--hair); transition: color var(--t1), border-color var(--t1);
}
.adock__prof:hover { color: var(--gold-num); border-color: var(--gold); }
.adock__now { display: grid; gap: 1px; min-width: 0; padding-left: var(--s3); border-left: 1px solid var(--hair); }
.adock__k { font: 500 var(--fz-micro)/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.adock__v { font: 400 var(--fz-cap)/1.3 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.adock__counts { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.adock__c {
  display: inline-flex; align-items: baseline; gap: var(--s1);
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1);
  padding: 3px var(--s2); cursor: pointer; transition: border-color var(--t1), background var(--t1);
}
.adock__c:hover { border-color: var(--gold); background: #f4f8ff; }
.adock__c .v { font: 600 var(--fz-sm)/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.adock__c .k { font: 500 var(--fz-micro)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.adock__c.ask { border-color: var(--warn-ink); background: var(--warn-chip); }
.adock__c.ask .v, .adock__c.ask .k { color: var(--warn-ink); }
.adock__acts { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.adock__body { padding: 0 var(--s4) var(--s3); display: grid; gap: var(--s3); }
.adock__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s2); }
.adock__job {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1);
  padding: var(--s2) var(--s3); transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1);
}
.adock__job:hover { border-color: var(--gold); box-shadow: var(--e1); }
.adock__job:active { transform: translateY(1px); }
.adock__job .t { font: 600 var(--fz-sm)/1.25 var(--font); color: var(--ink); }
.adock__job .d { font: 400 var(--fz-cap)/1.4 var(--font); color: var(--muted); }
.adock__never {
  border-left: 2px solid var(--warn-ink); background: var(--warn-chip);
  border-radius: var(--r1); padding: var(--s2) var(--s3);
  font: 400 var(--fz-cap)/1.55 var(--font); color: var(--ink-2);
}
.adock__never b { color: var(--warn-ink); }
.adock__never .t { display: block; font: 600 var(--fz-sm)/1.3 var(--font); color: var(--ink); margin-bottom: 2px; }
.adock__recent { display: grid; gap: var(--s1); }
.adock__r {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s2); align-items: baseline;
  font: 400 var(--fz-cap)/1.45 var(--font); color: var(--ink-2);
  padding: var(--s1) 0; border-bottom: 1px solid var(--hair-2);
}
.adock__r .t { font-family: var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.adock__r .n { font-family: var(--font-mono); color: var(--gold-num); font-variant-numeric: tabular-nums; }
.adock__none { font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted); }
@media (max-width: 900px) { .adock__now { display: none; } }
@media (max-width: 700px) {
  .adock__bar { padding: var(--s2) var(--s3); }
  .adock__body { padding: 0 var(--s3) var(--s3); }
}

/* ============================================================
   20 · THE PROFILE WIZARD — the first screen. What kind of
   investor you are, in your own words, then the banker's answer.
   ============================================================ */
.wz {
  position: fixed; inset: 0; z-index: 960; display: grid; place-items: start center;
  padding: var(--s6) var(--s4); overflow: auto;
  background: rgba(13,20,32,.55); backdrop-filter: blur(6px);
  animation: fade var(--t2);
}
.wz[hidden] { display: none; }
.wz__box {
  width: min(940px, 100%);
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r3); box-shadow: var(--e3); padding: var(--s6);
}
.wz__h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.wz__q { margin: 0 0 var(--s2); font: 700 var(--fz-title)/1.14 var(--font); letter-spacing: -.028em; color: var(--ink); }
.wz__lead { margin: 0 0 var(--s4); font: 400 var(--fz-lead)/1.5 var(--font); color: var(--ink-2); max-width: 68ch; }
.wz__lead b { color: var(--ink); font-weight: 650; }
.wz__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: var(--s2); }
.wz__opt {
  display: grid; gap: var(--s1); text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--hair-2); border-left: 2px solid var(--hair);
  border-radius: var(--r2); padding: var(--s3) var(--s4);
  transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1);
}
.wz__opt:hover { border-color: var(--gold); border-left-color: var(--gold); box-shadow: var(--e1); }
.wz__opt:active { transform: translateY(1px); }
.wz__opt.hot { border-left-color: var(--warn-ink); }
.wz__opt .t { font: 650 var(--fz-lead)/1.28 var(--font); color: var(--ink); letter-spacing: -.012em; }
.wz__opt .d { font: 400 var(--fz-sm)/1.5 var(--font); color: var(--ink-2); }
.wz__facts { display: grid; gap: 2px; margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--hair-2); }
.wz__f { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2); font: 400 var(--fz-cap)/1.45 var(--font); color: var(--ink-2); }
.wz__f > span:first-child { font: 500 var(--fz-micro)/1.5 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wz__f b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.wz__foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }
.wz__sk { display: flex; gap: var(--s2); margin: var(--s5) 0; }
.wz__sk i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); opacity: .3; animation: obsk 1s var(--ease) infinite; }
.wz__sk i:nth-child(2) { animation-delay: .14s; }
.wz__sk i:nth-child(3) { animation-delay: .28s; }
@keyframes obsk { 0%,100% { opacity: .25; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .wz__sk i { animation: none } }
.wz__out { display: grid; gap: var(--s3); }
.wz__say { margin: 0; font: 400 var(--fz-body)/1.6 var(--font); color: var(--ink-2); }
.wz__say b { color: var(--ink); font-weight: 650; }
.wz__say .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--gold-num); font-weight: 500; }
.wz__fixed {
  border: 1px solid var(--hair); border-left: 2px solid var(--gold);
  border-radius: var(--r2); padding: var(--s3) var(--s4); background: var(--paper-2);
}
.wz__fixed .t { display: block; font: 650 var(--fz-sm)/1.3 var(--font); color: var(--ink); margin-bottom: var(--s2); }
.wz__lim { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.wz__lim > div { background: var(--paper); border: 1px solid var(--hair-2); border-radius: var(--r1); padding: var(--s2); display: grid; gap: 1px; }
.wz__lim .k { font: 500 var(--fz-micro)/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wz__lim .v { font: 600 var(--fz-lead)/1.1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.wz__lim .s { font: 400 var(--fz-cap)/1.35 var(--font); color: var(--muted-num); }
.wz__refuse {
  margin: 0; border-left: 2px solid var(--warn-ink); background: var(--warn-chip);
  border-radius: var(--r1); padding: var(--s3) var(--s4);
  font: 400 var(--fz-lead)/1.55 var(--font); color: var(--ink);
}
.wz__refuse .who { display: block; font: 500 var(--fz-micro)/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--warn-ink); margin-bottom: var(--s1); }
.wz__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
@media (max-width: 640px) { .wz__box { padding: var(--s4); } }

/* ============================================================
   21 · SETTINGS — licence, data sources, read-only custody links
   ============================================================ */
.sett {
  position: fixed; inset: 0; z-index: 960; display: grid; place-items: center;
  padding: var(--s5) var(--s4);
  background: rgba(13,20,32,.5); backdrop-filter: blur(6px); animation: fade var(--t2);
}
.sett[hidden] { display: none; }
.sett__box {
  width: min(900px, 100%); max-height: calc(100dvh - var(--s8));
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r3); box-shadow: var(--e3); overflow: hidden;
}
.sett__h { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s5) var(--s2); flex-wrap: wrap; }
.sett__h h2 { margin: 0; font: 700 var(--fz-title)/1.16 var(--font); letter-spacing: -.026em; color: var(--ink); width: 100%; }
.sett__tabs { margin: 0 var(--s5) var(--s3); align-self: flex-start; }
.sett__b { padding: 0 var(--s5) var(--s5); overflow: auto; display: grid; gap: var(--s3); align-content: start; }
.sett__sec { display: grid; gap: var(--s2); }
.sett__sec > .lead { margin: 0; font: 400 var(--fz-sm)/1.55 var(--font); color: var(--ink-2); max-width: 78ch; }
.sett__sec > .lead b { color: var(--ink); font-weight: 650; }
.sett__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center;
  border: 1px solid var(--hair-2); border-radius: var(--r2); padding: var(--s3) var(--s4);
  background: var(--paper);
}
.sett__row.on { border-left: 2px solid var(--up-ink); }
.sett__row.off { border-left: 2px solid var(--hair); }
.sett__row .nm { font: 650 var(--fz-sm)/1.3 var(--font); color: var(--ink); display: block; }
.sett__row .mt { font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted-num); display: block; }
.sett__row .mt b { font-family: var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.sett__row .acts { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sett__st { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--fz-micro)/1.6 var(--font); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r1); padding: 2px 6px; }
.sett__st.ok { background: #e2f4ea; color: var(--up-ink); }
.sett__st.no { background: var(--paper-2); color: var(--muted-num); }
.sett__st.warn { background: var(--warn-chip); color: var(--warn-ink); }
.sett__st.err { background: #fbeeee; color: var(--down-ink); }
.sett__form { display: grid; gap: var(--s2); border: 1px solid var(--hair-2); border-radius: var(--r2); padding: var(--s3) var(--s4); background: var(--paper-2); }
.sett__fr { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s2); align-items: end; }
.sett__perms { display: flex; gap: var(--s3); flex-wrap: wrap; }
.sett__perms label { display: inline-flex; align-items: center; gap: 6px; font: 400 var(--fz-cap)/1.3 var(--font); color: var(--ink-2); cursor: pointer; }
.sett__msg { margin: 0; font: 400 var(--fz-cap)/1.55 var(--font); border-radius: var(--r1); padding: var(--s2) var(--s3); }
.sett__msg.ok { background: #e2f4ea; color: #08361d; border-left: 2px solid var(--up-ink); }
.sett__msg.err { background: #fbeeee; color: #5b1210; border-left: 2px solid var(--down-ink); }
.sett__msg.info { background: var(--gold-chip); color: var(--ink-2); border-left: 2px solid var(--gold); }
.sett__msg b { font-weight: 650; }
.sett__keys { display: grid; gap: 2px; font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num); }
@media (max-width: 640px) {
  .sett__row { grid-template-columns: 1fr; }
  .sett__row .acts { justify-content: flex-start; }
}

/* utilities the new surfaces lean on */
.u-m0 { margin: 0 !important; }
.is-flash { animation: flashring 1.4s var(--ease); }
@keyframes flashring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,111,222,0) }
  20%, 60% { box-shadow: 0 0 0 3px rgba(15,111,222,.42) }
}
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; outline: 2px solid var(--gold); outline-offset: 2px } }
/* an activated licence: the padlock goes, because the control now does the job */
.pill.is-unlocked .lk { display: none; }
.pill.is-unlocked { border-color: var(--gold); }

/* the alert rules a licensed account has written */
.rules { display: grid; gap: var(--s1); margin-top: var(--s3); text-align: left; }
.rules__h { margin: 0 0 var(--s1); font: 400 var(--fz-cap)/1.5 var(--font); color: var(--muted); }
.rules .pill.xs { justify-content: flex-start; text-align: left; }
.rules__off { display: grid; gap: 2px; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--hair-2); justify-items: start; }

/* a panel whose data source you switched off keeps its heading and says what
   it can no longer show, rather than going quietly grey */
.cutnote {
  display: grid; gap: var(--s1); margin: 0 0 var(--s3);
  border: 1px solid var(--hair-2); border-left: 2px solid var(--warn-ink);
  border-radius: var(--r1); padding: var(--s3) var(--s4); background: var(--warn-chip);
  justify-items: start;
}
.cutnote .t { font: 650 var(--fz-sm)/1.3 var(--font); color: var(--ink); }
.cutnote .d { font: 400 var(--fz-cap)/1.55 var(--font); color: var(--ink-2); }
.is-cut { display: none !important; }

/* an upvote you have given reads as given */
.acts2 button.is-on { color: var(--gold-num); border-color: var(--gold); background: var(--gold-chip); font-weight: 600; }

/* a reply you posted on a licensed device */
.my-reply { margin-top: var(--s2); padding: var(--s2) var(--s3); border-left: 2px solid var(--gold); background: var(--gold-chip); border-radius: var(--r1); display: grid; gap: var(--s1); justify-items: start; }
.my-reply p { margin: 0; font: 400 var(--fz-sm)/1.55 var(--font); color: var(--ink-2); }
.my-composer { margin-top: var(--s2); display: grid; gap: var(--s1); }
.my-composer textarea { width: 100%; resize: vertical; font: 400 var(--fz-sm)/1.5 var(--font); }

/* a numeral inside a tinted chip needs the darker accent to clear 7:1 on it */
.chip b, .adock__c b, .adock__v b { color: var(--gold-num); font-weight: 600; }