/* ============================================================
   Rulebook Wealth — client portal stylesheet
   Loaded by app/login.html, app/dashboard.html, app/community.html
   and app/connect.html, on top of _shared/core.css. Nothing else
   links this file.

   The portal wears the public site's identity, not one of its own:
   every surface, hairline, accent and semantic colour below is the
   value site.css publishes, so a visitor walking
     index.html → demo.html → app/*.html
   never crosses a brand seam.

     · white / #f4f7fa grounds, #131c2a chrome
     · #0f6fde accent, #0fa3a3 second accent
     · Inter for every word of interface, JetBrains Mono for every
       number, always with tabular figures
     · 8 px and 14 px radii, site.css's two shadow recipes

   Contrast, measured against the ground each colour is actually
   painted on: body text ≥ 4.5:1, every figure ≥ 7:1. The *-ink
   variants exist for that second rule — --up / --down / --warn keep
   the site's values for bars, dots and chart series, while a coloured
   NUMBER is always drawn in the ink variant.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* ---- typefaces: site.css --font / --font-mono ---- */
  --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;

  /* ---- surfaces: --bg / --bg-2 / --bg-3 / --surface ---- */
  --paper: #ffffff;    /* --bg / --surface — every panel ground */
  --cream: #f4f7fa;    /* --bg-2 — the app ground behind the panels */
  --cream-2: #eaeff5;  /* --bg-3 — the same ground, one step down */
  --cream-3: #e0e6ee;  /* --line — inert fills and bar tracks */

  /* ---- dark chrome: --dark / --dark-2 and their inks ---- */
  --dark: #0d1420;
  --dark-2: #131c2a;
  --on-dark: #dbe4f0;         /* --dark-ink   · 14.4:1 on --dark */
  --on-dark-2: #9dabc0;       /* --dark-muted, lifted one step: the statusbar sets its
                                 key words in mono beside the readings, so it has to
                                 clear 7:1 on BOTH ends of the chrome gradient
                                 (7.4:1 on #131c2a, 8.0:1 on #0d1420) */
  --on-dark-accent: #6fb6ff;  /* the accent site.css uses on a dark band · 8.6:1 */

  /* ---- accent: --accent / --accent-ink / --accent-2.
     The names --green and --gold are historical; both are now the
     site's blue, which is the whole point of this file. ---- */
  --green: #0f6fde;           /* --accent */
  --green-2: #0a58b0;         /* --accent-ink */
  --green-3: #0d1420;         /* --dark */
  --gold: #0f6fde;            /* --accent — rules, fills, focus */
  --gold-2: #6fb6ff;          /* the accent on a dark ground */
  --gold-ink: #0a58b0;        /* --accent-ink — hover and rules */
  --gold-num: #094b96;        /* accent dark enough to carry a NUMERAL — 8.6:1 on
                                 white, 8.0:1 on --bg-2, 7.5:1 on --bg-3 */
  --gold-soft: #e8f1fd;       /* --accent-soft */
  --green-soft: rgba(15, 111, 222, .08);
  --teal: #0fa3a3;            /* --accent-2 */
  --teal-ink: #0a5e5e;        /* --accent-2 darkened until white text carrying "AC19/mo"
                                 clears 7:1 (7.6:1) */
  --teal-ink-2: #084a4a;

  /* ---- ink ---- */
  --ink: #10151c;             /* --ink    · 18.0:1 on white */
  --ink-2: #2c3541;           /* --ink-2  · 12.4:1 on white */
  --muted: #5d6879;           /* --muted — the site's value, kept for reference; the
                                 portal sets secondary text in --muted-num instead,
                                 because nearly every caption here carries a figure */
  --muted-num: #454d5a;       /* the secondary ink · 8.5:1 on white, 7.9:1 on --bg-2,
                                 7.4:1 on --bg-3 — measured on all three, because a
                                 caption in this portal nearly always carries a figure */
  --muted-2: #808b9c;         /* --muted-2 — borders and rules only, never text */

  /* ---- hairlines: --line-2 / --line / --dark-line ---- */
  --hair: #ccd5e0;
  --hair-faint: #e0e6ee;
  --hair-cream: rgba(255, 255, 255, .11);

  /* ---- semantic: the site's values, for fills, dots and series ---- */
  --up: #10924f;
  --down: #cf3a37;
  --warn: #c8871a;
  --info: #0fa3a3;
  /* the ink variants carry every coloured FIGURE, each ≥ 7:1 on white */
  --up-ink: #085a2e;          /* 8.4:1 on white, 7.8:1 on --bg-2, 7.5:1 on the --up-soft
                                 chip — the chip's tint is what set the floor */
  --down-ink: #96211e;        /* 8.3:1 on white, 7.3:1 on the --down-soft chip */
  --warn-ink: #6f4a0c;        /* 8.0:1 on white, 7.4:1 on the --warn-soft chip */
  --up-soft: #e7f5ee;
  --down-soft: #fdecec;
  --warn-soft: #fdf6ea;

  /* ---- read by _shared/charts.js ---- */
  --accent: #0f6fde;
  --accent-2: #0fa3a3;
  --surface: #ffffff;
  --bg-2: #f4f7fa;

  /* ---- geometry: site.css --r / --r-lg / --shadow / --shadow-lg ---- */
  --r: 8px;
  --r-lg: 14px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
  --shadow-lg: 0 2px 6px rgba(15, 27, 45, .06), 0 22px 60px rgba(15, 27, 45, .10);
  --max: 1180px; --narrow: 780px; --measure: 68ch;

  /* ---- type scale. Nothing below 10 px anywhere, and 10 px only for
     a tracked uppercase micro-label. ---- */
  --fz-micro: 10px;
  --fz-cap: 11px;
  --fz-sm: 12px;
  --fz-body: 13px;
  --fz-base: 14px;
  --fz-lead: 15px;
  --fz-fig: 20px;
  --fz-title: 22px;
  --fz-display: 28px;
  --tr-caps: .14em;
  --tr-tight: -.02em;

  /* ---- core.css component variables (modal, toast, lock pill) ---- */
  --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, Helvetica, Arial, sans-serif;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--cream); color: var(--ink);
  font: 400 var(--fz-body)/1.55 var(--font);
}
a { color: var(--gold-num); text-decoration: none; transition: color .14s; }
a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0 0 .8rem; }
h1, h2, h3, h4 {
  font-family: var(--font); font-weight: 700; line-height: 1.18; margin: 0 0 .5rem;
  color: var(--ink); letter-spacing: var(--tr-tight);
}
h1 { font-size: var(--fz-display); letter-spacing: -.03em; }
h2 { font-size: var(--fz-title); letter-spacing: -.028em; }
h3 { font-size: 17px; }
h4 { font-size: var(--fz-lead); }
ul, ol { margin: 0 0 .8rem; padding-left: 1.15rem; }
hr { border: 0; border-top: 1px solid var(--hair-faint); margin: 1.4rem 0; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
pre {
  background: var(--cream); border: 1px solid var(--hair-faint); border-radius: var(--r);
  padding: .8rem 1rem; overflow-x: auto; line-height: 1.55; margin: 0 0 1rem;
}
pre code { font-size: var(--fz-sm); color: var(--ink-2); }
::selection { background: #cfe3fb; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: var(--r-sm); }
canvas.chart { display: block; }

/* ---------- typographic utilities ---------- */
.label {
  font-family: var(--font); font-weight: 600; font-size: var(--fz-micro);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-num); display: block;
}
.label--ink { color: var(--muted-num); }
.label--cream { color: var(--on-dark-accent); }
.lead { font-size: var(--fz-lead); line-height: 1.6; color: var(--ink-2); }
.small { font-size: var(--fz-sm); }
.muted { color: var(--muted-num); }
.center { text-align: center; }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.num, .mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.up { color: var(--up-ink); } .down { color: var(--down-ink); } .warn { color: var(--warn-ink); }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: .4rem } .mt-2 { margin-top: .8rem } .mt-3 { margin-top: 1.4rem } .mt-4 { margin-top: 2rem }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: .4rem } .mb-2 { margin-bottom: .8rem } .mb-3 { margin-bottom: 1.4rem }
.grow { flex: 1; }
.hair { border: 0; border-top: 1px solid var(--hair-faint); margin: 0; }
.hair--short { width: 56px; margin: 1.2rem auto; border-top: 2px solid var(--gold); }

/* ---------- pills (buttons) — site.css .pill, in the portal's density --- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: var(--r);
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  font: 600 var(--fz-body)/1 var(--font); letter-spacing: 0; text-transform: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.pill:hover { background: var(--cream); border-color: var(--muted-2); color: var(--ink); text-decoration: none; }
.pill.solid { background: var(--green); border-color: var(--green); color: #fff; }
.pill.solid:hover { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.pill.gold { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.pill.gold:hover { background: var(--teal-ink-2); border-color: var(--teal-ink-2); color: #fff; }
.pill.light { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.pill.light:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); color: #fff; }
.pill.ghost { border-color: transparent; background: transparent; color: var(--gold-num); }
.pill.ghost:hover { background: var(--gold-soft); color: var(--green-2); }
.pill.sm { padding: .45rem .8rem; font-size: var(--fz-sm); }
.pill.xs { padding: .36rem .62rem; font-size: var(--fz-sm); border-radius: var(--r-sm); }
.pill.wide { min-width: 220px; }
.pill.block { display: flex; width: 100%; }
.pill[disabled] { opacity: .5; cursor: not-allowed; }
.pill-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.pill-row.center { justify-content: center; }
.textlink {
  font: 600 var(--fz-sm)/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--gold-num); display: inline-flex; align-items: center; gap: .3rem;
}
.textlink::after { content: "→"; transition: transform .15s; }
.textlink:hover { color: var(--green-2); text-decoration: none; }
.textlink:hover::after { transform: translateX(3px); }
.linkbtn {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: 600 var(--fz-sm)/1 var(--font); color: var(--gold-num);
  text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--green-2); }

/* ---------- wrappers ---------- */
.wrap { max-width: var(--max); margin: 0 auto; }
.wrap--narrow { max-width: var(--narrow); margin: 0 auto; }
.wrap--mid { max-width: 960px; margin: 0 auto; }

/* ---------- the wordmark (login) ---------- */
.wordmark {
  font: 700 var(--fz-title)/1 var(--font); letter-spacing: -.028em;
  color: var(--ink); text-align: left; white-space: nowrap; text-decoration: none;
}
.wordmark small {
  display: block; font: 500 var(--fz-micro)/1.4 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--gold-num); margin-top: .3rem;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }

/* ---------- stat row (login panel) ---------- */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.stat { padding: .8rem .9rem; border: 1px solid var(--hair-faint); border-radius: var(--r); background: var(--paper); }
.stat .label { color: var(--muted-num); margin-bottom: .4rem; }
.stat .value {
  font: 600 var(--fz-fig)/1.05 var(--font-mono); letter-spacing: var(--tr-tight);
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.stat .value small { font: 500 var(--fz-cap)/1 var(--font); color: var(--muted-num); letter-spacing: 0; }
.stat .sub { font-size: var(--fz-cap); color: var(--muted-num); margin-top: .35rem; line-height: 1.45; }
.stat.off .value { color: var(--down-ink); }
.stat.mid .value { color: var(--warn-ink); }
.stat.on .value { color: var(--up-ink); }

/* ---------- avatar ---------- */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--hair); color: var(--gold-num); background: var(--gold-soft);
  display: inline-grid; place-items: center;
  font: 600 var(--fz-micro)/1 var(--font); letter-spacing: .03em; flex: 0 0 auto;
}
.avatar.lg { width: 44px; height: 44px; font-size: var(--fz-body); }

/* ---------- check list ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 .9rem; }
.checks li {
  padding: .45rem 0 .45rem 1.15rem; border-bottom: 1px solid var(--hair-faint);
  position: relative; color: var(--ink-2); font-size: var(--fz-sm); line-height: 1.5;
}
.checks li::before { content: "—"; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
.checks li:first-child { border-top: 1px solid var(--hair-faint); }

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: .5rem .6rem; font: 400 var(--fz-body)/1.4 var(--font);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input[type="number"], input[inputmode="numeric"] {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 111, 222, .18);
}
input::placeholder { color: var(--muted); }
select {
  appearance: none; cursor: pointer; padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-ink) 50%), linear-gradient(135deg, var(--gold-ink) 50%, transparent 50%);
  background-position: calc(100% - 13px) 54%, calc(100% - 8px) 54%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
label {
  display: block; font: 600 var(--fz-micro)/1.4 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted-num);
  margin-bottom: .25rem;
}
.field { margin-bottom: .9rem; }
input[type="checkbox"] { width: auto; accent-color: var(--green); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
table.ledger th, table.ledger td {
  padding: .5rem .55rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hair-faint); color: var(--ink-2);
}
table.ledger thead th {
  font: 600 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
table.ledger tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
table.ledger .num, table.ledger td.num, table.ledger th.num, table.ledger td.right {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap;
}
table.ledger thead th.num { font-family: var(--font); color: var(--muted-num); }
table.ledger .us { background: var(--gold-soft); }
table.ledger thead th.us { color: var(--gold-num); }
table.ledger td.up, table.ledger .yes { color: var(--up-ink); }
table.ledger td.down, table.ledger .no { color: var(--down-ink); }
table.ledger td.muted { color: var(--muted-num); }
table.ledger .partial { color: var(--warn-ink); }
table.ledger td b { font-weight: 600; color: var(--ink); }

/* ---------- callouts ---------- */
.callout {
  border: 1px solid var(--hair-faint); border-left: 3px solid var(--gold);
  border-radius: var(--r-sm); padding: .7rem .9rem; background: var(--cream);
  font-size: var(--fz-sm); line-height: 1.55; color: var(--ink-2); margin: 0 0 .9rem;
}
.callout b { font-weight: 600; color: var(--ink); }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.up { border-left-color: var(--up); background: var(--up-soft); }
.callout.up b { color: var(--up-ink); }

/* ---------- tabs (ui.js [data-tabs]) ---------- */
.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); margin-bottom: 1.2rem;
}
.tabs button {
  background: none; border: 0; cursor: pointer;
  font: 600 var(--fz-sm)/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--muted-num); padding: .6rem .7rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tabs button.active { color: var(--gold-num); border-bottom-color: var(--gold); }
.tabs button:hover { color: var(--ink); background: var(--cream); }
.tabs button.active:hover { color: var(--gold-num); }

/* ---------- segmented text control ---------- */
.seg-text {
  display: inline-flex; gap: 2px; flex-wrap: wrap;
  background: var(--cream-2); border-radius: var(--r-sm); padding: 2px;
}
.seg-text button {
  background: none; border: 0; cursor: pointer;
  font: 600 var(--fz-sm)/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--muted-num); padding: .35rem .6rem; border-radius: 4px;
  transition: background .14s, color .14s;
}
.seg-text button.active { color: var(--gold-num); background: var(--paper); box-shadow: 0 1px 2px rgba(15, 27, 45, .10); }
.seg-text button:hover { color: var(--ink); }
.seg-text button.active:hover { color: var(--gold-num); }

/* ---------- status badges ---------- */
.mark-badge {
  display: inline-block; font: 600 var(--fz-micro)/1.5 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  padding: .2rem .5rem; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--muted-num); background: var(--paper);
  /* the long topbar badges have to be allowed to wrap: nowrap ran them off the
     right edge of a narrow topbar, where body overflow:hidden cut them */
  white-space: normal; max-width: 100%;
}
.mark-badge.gold { border-color: #bcd8fa; color: var(--gold-num); background: var(--gold-soft); }
.mark-badge.up { border-color: #b3ddc7; color: var(--up-ink); background: var(--up-soft); }
.mark-badge.down { border-color: #f2c3c2; color: var(--down-ink); background: var(--down-soft); }
.mark-badge.warn { border-color: #ecd5a8; color: var(--warn-ink); background: var(--warn-soft); }
.mark-badge.fill { background: var(--green); color: #fff; border-color: var(--green); }
.tag {
  font: 600 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num); background: var(--cream-2);
  border: 1px solid var(--hair-faint); padding: .15rem .45rem; border-radius: 999px;
}
.tags { display: inline-flex; gap: .3rem; flex-wrap: wrap; }

/* ============================================================
   CLIENT PORTAL — rail · topbar · stage · statusbar
   ============================================================ */
body[data-fullscreen] { background: var(--cream); }
.portal { display: grid; grid-template-columns: 84px 1fr; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- rail (dark chrome, exactly the site's dark block) ---------- */
.rail {
  background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
  color: var(--on-dark);
  display: flex; flex-direction: column; align-items: center;
  padding: .8rem 0 .6rem; gap: 2px;
  border-right: 1px solid var(--hair-cream);
}
.rail .mono {
  font: 700 var(--fz-lead)/1 var(--font); letter-spacing: .01em; color: var(--on-dark-accent);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--hair-cream); border-radius: var(--r-sm); margin-bottom: .5rem;
}
.rail .avatar {
  border-color: var(--hair-cream); background: rgba(219, 228, 240, .10);
  color: var(--on-dark); width: 32px; height: 32px; font-size: var(--fz-cap); margin-bottom: 1rem;
}
.rail-btn {
  width: calc(100% - 10px); background: none; border: 0; color: var(--on-dark-2);
  display: grid; place-items: center; gap: 4px; padding: .55rem 0; cursor: pointer;
  position: relative; border-radius: var(--r-sm);
  /* 84 px rail, 74 px button: "Community" measures 70 px at this tracking */
  font: 600 var(--fz-micro)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase;
  transition: background .14s, color .14s;
}
.rail-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.rail-btn:hover { color: var(--on-dark); background: rgba(219, 228, 240, .08); text-decoration: none; }
.rail-btn.active { color: var(--on-dark-accent); background: rgba(111, 182, 255, .12); }
.rail-btn.active::before {
  content: ""; position: absolute; left: -6px; top: 22%; bottom: 22%;
  border-left: 2px solid var(--on-dark-accent); border-radius: 2px;
}
.rail .grow { flex: 1; }
.rail a.rail-btn { text-decoration: none; }
.rail :focus-visible { outline-color: var(--on-dark-accent); }

.portal__body { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; min-width: 0; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: .9rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--hair); background: var(--paper);
  min-width: 0; flex-wrap: wrap; row-gap: .5rem;
}
.topbar .greet {
  font: 650 var(--fz-fig)/1.2 var(--font); letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.topbar .date {
  font: 400 var(--fz-cap)/1.35 var(--font-mono); color: var(--muted-num);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.topbar .grow { flex: 1; }
.topbar .actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.topbar .actions .pill.xs { white-space: nowrap; }

/* ---------- stage ---------- */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.stage__main {
  overflow: auto; padding: 1rem 1rem 1.6rem; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.stage__side {
  border-left: 1px solid var(--hair); overflow: auto; padding: 1rem .9rem 1.6rem;
  background: var(--cream);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent; min-width: 0;
}
.stage__main::-webkit-scrollbar, .stage__side::-webkit-scrollbar, .feed::-webkit-scrollbar { width: 6px; height: 6px; }
.stage__main::-webkit-scrollbar-thumb, .stage__side::-webkit-scrollbar-thumb, .feed::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; }
.view { display: none; }
.view.active { display: block; }

/* ---------- panels ---------- */
.grid-portal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-portal .span2 { grid-column: 1 / -1; }
.pane {
  background: var(--paper); border: 1px solid var(--hair-faint); border-radius: var(--r);
  box-shadow: var(--shadow); padding: .8rem 1rem 1rem; min-width: 0;
  transition: box-shadow .18s;
}
.pane:hover { box-shadow: var(--shadow-lg); }
.pane__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; flex-wrap: wrap; row-gap: .3rem;
  margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hair-faint);
}
.pane__head .label { color: var(--gold-num); }
.pane__head .meta {
  font: 400 var(--fz-cap)/1.35 var(--font-mono); color: var(--muted-num);
  letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pane__head .meta.status {
  font: 600 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.pane__head .meta.status.off { color: var(--down-ink); }
.pane__head .meta.status.on { color: var(--up-ink); }
.pane__head .meta.status.mid { color: var(--warn-ink); }
.pane__head .tools { display: inline-flex; gap: .8rem; align-items: baseline; }
.pane .note { font-size: var(--fz-cap); color: var(--muted-num); margin: .7rem 0 0; line-height: 1.5; }
.pane .note b { color: var(--ink-2); font-weight: 600; }

/* ---------- figures ---------- */
.fig { position: relative; }
.fig canvas { height: 100%; width: 100%; }
.fig.h220 { height: 220px; } .fig.h200 { height: 200px; } .fig.h240 { height: 240px; } .fig.h180 { height: 180px; }

/* the risk dial: arc and needle on the canvas, the reading below it in the DOM,
   so the needle can never sweep across the figure it is reporting */
.meter { display: grid; gap: .2rem; }
/* the dial is height-bound, so cap the box: past ~320 px it only adds blank
   ground either side of a 254 px arc */
.meter .fig { max-width: 320px; width: 100%; margin-inline: auto; }
.meter__scale {
  display: flex; justify-content: space-between; gap: .8rem;
  max-width: 320px; width: 100%; margin: 0 auto; padding: 0 .2rem;
  font: 600 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num);
}
.meter__read {
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  margin: 0; text-align: center; flex-wrap: wrap;
}
.meter__read b {
  font: 600 var(--fz-display)/1 var(--font-mono); letter-spacing: var(--tr-tight);
  color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.meter__read span {
  font: 600 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num);
}
.meter__read span.up { color: var(--up-ink); }
.meter__read span.down { color: var(--down-ink); }
.meter__read span.warn { color: var(--warn-ink); }
.fig.chart-wrap canvas.chart { cursor: crosshair; }
.chart-hint { color: var(--muted); font-family: var(--font); letter-spacing: .02em; }
.chart-tip {
  background: var(--dark); color: var(--on-dark); border-color: var(--hair-cream);
  font-family: var(--font-mono); font-size: var(--fz-cap); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}
.chart-tip b { color: var(--on-dark-accent); font-weight: 600; }

/* ---------- regime row + tiles ---------- */
.regime-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--hair-faint); border: 1px solid var(--hair-faint);
  border-radius: var(--r-sm); overflow: hidden;
}
.tile { padding: .6rem .7rem; background: var(--paper); min-width: 0; }
.tile .k {
  font: 600 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num);
}
.tile .v {
  font: 600 var(--fz-lead)/1.25 var(--font); letter-spacing: var(--tr-tight);
  margin: .25rem 0 .2rem; color: var(--ink);
}
.tile .s { font-size: var(--fz-cap); color: var(--muted-num); line-height: 1.45; }
.tile.off .v { color: var(--down-ink); }
.tile.mid .v { color: var(--warn-ink); }
.tile.on .v { color: var(--up-ink); }

/* ---------- controls ---------- */
.controls { display: grid; gap: .7rem; margin-bottom: .8rem; }
.controls .row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.controls .row .label { min-width: 62px; color: var(--muted-num); }
.controls select { width: auto; min-width: 118px; font-size: var(--fz-sm); padding: .35rem 1.6rem .35rem .55rem; }
.controls .small { color: var(--muted-num); }

/* ---------- allocation ring + legend ---------- */
.alloc-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; align-items: center; }
.legend { list-style: none; padding: 0; margin: 0; }
.legend li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: .55rem;
  align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--hair-faint);
  font-size: var(--fz-sm); color: var(--ink-2);
}
.legend li:first-child { border-top: 1px solid var(--hair-faint); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.legend .w {
  font: 500 var(--fz-body)/1 var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- "why this weighting" ---------- */
.why { list-style: none; padding: 0; margin: 0; counter-reset: why; }
.why li {
  counter-increment: why; padding: .5rem 0 .5rem 1.7rem;
  border-bottom: 1px solid var(--hair-faint); position: relative;
  font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.55;
}
.why li::before {
  content: counter(why); position: absolute; left: 0; top: .55rem;
  font: 500 var(--fz-cap)/1 var(--font-mono); color: var(--gold-num);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- holdings ---------- */
.holdings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.holdings input {
  font: 500 var(--fz-lead)/1.2 var(--font-mono); padding: .4rem .5rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.holdings label { font-size: var(--fz-micro); letter-spacing: .08em; }
.holdings-foot { display: flex; justify-content: space-between; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.holdings-foot .import { font: 600 var(--fz-sm)/1 var(--font); color: var(--gold-num); text-decoration: underline; text-underline-offset: 2px; }
.sum { font-size: var(--fz-cap); color: var(--muted-num); margin: .5rem 0 .7rem; font-family: var(--font-mono); }
.sum.warn { color: var(--down-ink); }

/* ---------- drift table ---------- */
table.drift { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); margin-top: .6rem; }
table.drift th {
  font: 600 var(--fz-micro)/1.4 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted-num); text-align: left;
  padding: .35rem .4rem; border-bottom: 1px solid var(--hair); white-space: nowrap;
}
table.drift td { padding: .4rem .4rem; border-bottom: 1px solid var(--hair-faint); color: var(--ink-2); }
table.drift .num, table.drift th.num {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap;
}
table.drift th.num { font-family: var(--font); color: var(--muted-num); }
table.drift .bar { height: 4px; background: var(--cream-2); border-radius: 999px; position: relative; overflow: hidden; }
table.drift .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .5s ease; }
table.drift .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .45rem; vertical-align: middle; position: relative; top: -1px; }
table.drift .delta { font-weight: 500; }
table.drift .delta.up { color: var(--up-ink); }
table.drift .delta.down { color: var(--down-ink); }
table.drift .delta.muted { color: var(--muted-num); }

/* ---------- alert feed ---------- */
.feed {
  display: grid; gap: 0; max-height: 300px; overflow: auto;
  border-top: 1px solid var(--hair-faint);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.feed__item {
  /* 80 px holds "09-04 14:32" set in JetBrains Mono at 11 px with room to spare */
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--hair-faint);
  font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.5; align-items: start;
}
.feed__item .t {
  font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num);
  padding-top: .1rem; font-variant-numeric: tabular-nums;
}
.feed__item .kind {
  display: inline-block; font: 600 var(--fz-micro)/1.5 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; margin-right: .45rem;
}
.feed__item .kind.warn { color: var(--warn-ink); }
.feed__item .kind.info { color: var(--gold-num); }
.feed__item .kind.up { color: var(--up-ink); }
.feed__item.new { background: var(--gold-soft); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: var(--r-sm); }

/* ---------- Pro table (dashboard "What Pro adds") ---------- */
.instruments {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--hair-faint); border: 1px solid var(--hair-faint);
  border-radius: var(--r-sm); overflow: hidden;
}
.instruments li {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 176px; gap: 1rem;
  padding: .7rem .9rem; background: var(--paper); align-items: start;
}
.instruments .name {
  display: flex; align-items: center; gap: .5rem;
  font: 600 var(--fz-sm)/1.3 var(--font); color: var(--ink);
}
.instruments .name i { width: 5px; height: 18px; border-radius: 3px; flex: none; }
.instruments .desc { font-size: var(--fz-sm); line-height: 1.55; color: var(--muted-num); }
.instruments .desc b { color: var(--ink-2); font-weight: 600; }
.instruments .price { text-align: right; font: 600 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: .25rem; }
@media (max-width: 900px) {
  .instruments li { grid-template-columns: 1fr; gap: .35rem; }
  .instruments .price { text-align: left; }
}

/* ---------- brief list (dashboard "Briefs" view) ---------- */
.brief-list { list-style: none; padding: 0; margin: 0; }
.brief-list li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 150px; gap: 1rem;
  align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--hair-faint);
}
.brief-list li:first-child { border-top: 1px solid var(--hair-faint); }
.brief-list .no {
  font: 600 var(--fz-title)/1 var(--font-mono); letter-spacing: var(--tr-tight);
  color: var(--gold-num); font-variant-numeric: tabular-nums lining-nums;
}
.brief-list .no small {
  display: block; font: 600 var(--fz-micro)/1.4 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted-num);
  margin-bottom: .25rem;
}
.brief-list h3 { font-size: var(--fz-lead); margin: 0 0 .3rem; letter-spacing: var(--tr-tight); }
.brief-list h3 a { color: var(--ink); }
.brief-list h3 a:hover { color: var(--gold-num); }
.brief-list .deck { color: var(--muted-num); font-size: var(--fz-sm); margin: 0 0 .45rem; line-height: 1.5; }
.brief-list .byline {
  font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.brief-list .byline .avatar { width: 22px; height: 22px; font-size: var(--fz-micro); }
.brief-list .spark canvas { height: 56px; }
.brief-list li.soon { opacity: .7; }
.brief-list li.soon .spark {
  display: grid; place-items: center; text-align: center;
  font: 400 var(--fz-cap)/1.4 var(--font-mono); color: var(--muted-num);
  border: 1px dashed var(--hair); border-radius: var(--r-sm); padding: .5rem;
}
.brief-list li[hidden] { display: none; }
.briefs-view .brief-list { max-width: none; }
@media (max-width: 820px) {
  .brief-list li { grid-template-columns: 64px minmax(0, 1fr); }
  .brief-list .spark { display: none; }
}

/* ---------- community posts ---------- */
.community-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .8rem; }
.post { padding: .8rem 0; border-bottom: 1px solid var(--hair-faint); }
.post:first-child { padding-top: 0; }
.post .who {
  display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  font-size: var(--fz-cap); color: var(--muted-num); margin-bottom: .4rem;
}
.post .who b { color: var(--ink); font-weight: 600; }
.post .who .avatar { width: 24px; height: 24px; font-size: var(--fz-micro); }
.post p { margin: 0 0 .5rem; font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.55; }
.post .acts { display: flex; gap: .8rem; }
.post .acts button, .threads .acts button {
  background: none; border: 0; cursor: pointer;
  font: 600 var(--fz-cap)/1 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--gold-num); padding: .25rem .4rem; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.post .acts button:hover, .threads .acts button:hover { background: var(--gold-soft); color: var(--green-2); }

/* ---------- threads (community page) ---------- */
.threads { border-top: 1px solid var(--hair-faint); }
.threads .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem;
  align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--hair-faint);
}
.threads h4 { margin: 0 0 .3rem; font: 600 var(--fz-base)/1.35 var(--font); letter-spacing: var(--tr-tight); }
.threads h4 a { color: var(--ink); }
.threads h4 a:hover { color: var(--gold-num); }
.threads .meta { font-size: var(--fz-cap); color: var(--muted-num); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.threads .meta .avatar { width: 22px; height: 22px; font-size: var(--fz-micro); }
.threads .cnt {
  font: 500 var(--fz-sm)/1 var(--font-mono); color: var(--ink-2);
  white-space: nowrap; font-variant-numeric: tabular-nums lining-nums;
}
.threads .acts { display: flex; gap: .4rem; }
.threads .pin {
  display: inline-block; font: 600 var(--fz-micro)/1.5 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-num);
  background: var(--gold-soft); border-radius: 999px; padding: .1rem .45rem; margin-right: .45rem;
  vertical-align: middle;
}
.toolbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .grow { flex: 1; }
.toolbar select, .toolbar input { width: auto; font-size: var(--fz-sm); }
.toolbar input { min-width: 180px; }

/* ---------- side blocks ---------- */
.side-block {
  background: var(--paper); border: 1px solid var(--hair-faint); border-radius: var(--r);
  box-shadow: var(--shadow); padding: .8rem .9rem .9rem; margin-bottom: 1rem;
}
.side-block h4 { font-size: var(--fz-body); margin-bottom: .45rem; letter-spacing: var(--tr-tight); }
.side-block p, .side-block li { font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.55; }
.side-block p { margin: 0 0 .6rem; }
.side-block .checks li { padding: .4rem 0 .4rem 1.1rem; font-size: var(--fz-sm); }
.side-block .checks { margin-bottom: 0; }

/* ---------- statusbar (dark chrome, matching the rail) ---------- */
.statusbar {
  display: flex; gap: 1rem; align-items: center; padding: 0 1rem; min-height: 32px;
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  border-top: 1px solid var(--hair-cream); color: var(--on-dark-2);
  font: 400 var(--fz-cap)/1 var(--font-mono); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
}
.statusbar > span { display: inline-flex; align-items: center; gap: .35rem; }
.statusbar b { color: var(--on-dark); font-weight: 500; font-variant-numeric: tabular-nums; }
.statusbar .grow { flex: 1; }
.statusbar .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #3ddc97;
  display: inline-block; margin-right: .3rem; animation: pulse 2.2s infinite;
}
.statusbar .hint { display: inline-flex; align-items: center; gap: .2rem; }
.statusbar .hint kbd {
  font-family: var(--font-mono); background: rgba(219, 228, 240, .10);
  border: 1px solid rgba(219, 228, 240, .22); padding: .08rem .3rem;
  border-radius: 4px; font-size: var(--fz-micro); color: var(--on-dark); margin-right: .1rem;
}
.statusbar button {
  background: none; border: 0; color: var(--on-dark-accent); cursor: pointer;
  font: inherit; padding: .2rem .35rem; border-radius: var(--r-sm);
}
.statusbar button:hover { background: rgba(111, 182, 255, .14); }
.statusbar #st-clock { color: var(--on-dark); }
.statusbar :focus-visible { outline-color: var(--on-dark-accent); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ---------- tour overlay ---------- */
.tour { position: fixed; inset: 0; z-index: 950; background: rgba(13, 20, 32, .55); backdrop-filter: blur(2px); display: none; }
.tour.open { display: block; }
.tour__card {
  position: absolute; width: 320px; max-width: calc(100vw - 2rem);
  background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--gold);
  border-radius: var(--r); padding: .9rem 1rem 1rem; box-shadow: var(--shadow-lg);
}
.tour__card .label { margin-bottom: .45rem; }
.tour__card h3 { font-size: var(--fz-lead); margin-bottom: .4rem; }
.tour__card p { font-size: var(--fz-sm); color: var(--ink-2); margin-bottom: .8rem; line-height: 1.55; }
.tour__card .pill-row { justify-content: space-between; }
.tour__card .pill-row button.skip {
  background: none; border: 0; cursor: pointer;
  font: 600 var(--fz-sm)/1 var(--font); color: var(--muted-num); padding: .3rem 0;
}
.tour__card .pill-row button.skip:hover { color: var(--ink); }
.tour-focus {
  position: relative; z-index: 951; outline: 2px solid var(--gold); outline-offset: 6px;
  border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 6px var(--paper), var(--shadow-lg);
}

/* ---------- login ---------- */
.auth-stage { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100dvh; overflow: hidden; }
.auth-left {
  background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
  color: var(--on-dark); padding: 2rem 2.6rem; display: flex; flex-direction: column;
  justify-content: space-between; gap: 1.5rem; border-right: 1px solid var(--hair-cream);
  overflow: auto;
}
.auth-left .wordmark { color: #fff; font-size: var(--fz-title); }
.auth-left .wordmark:hover { color: #fff; }
.auth-left .wordmark small { color: var(--on-dark-accent); }
.auth-left h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 18ch; margin: 0 0 .8rem; }
.auth-left p { color: var(--on-dark-2); max-width: 46ch; font-size: var(--fz-base); line-height: 1.6; }
.auth-left .label { color: var(--on-dark-accent); }
.auth-left .stat-row { margin: 0; max-width: none; gap: .6rem; }
.auth-left .stat {
  padding: .7rem .75rem; background: rgba(13, 20, 32, .45);
  border-color: var(--hair-cream); border-radius: var(--r-sm); min-width: 0;
}
.auth-left .stat .label { color: var(--on-dark-accent); }
.auth-left .stat .value { color: #fff; font-size: var(--fz-fig); }
.auth-left .stat .value small { color: var(--on-dark-2); }
.auth-left .stat .sub { color: var(--on-dark-2); }
.auth-left blockquote {
  font: 400 var(--fz-lead)/1.55 var(--font); margin: 0 0 .5rem; color: var(--on-dark);
  border-left: 2px solid var(--on-dark-accent); padding-left: .8rem;
}
.auth-left .who {
  font: 600 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--on-dark-accent); padding-left: .8rem;
}
.auth-right { overflow: auto; display: grid; place-items: center; padding: 2rem 1.5rem; background: var(--paper); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: var(--fz-display); margin-bottom: .25rem; }
.auth-card .sub { color: var(--muted-num); margin-bottom: 1.4rem; font-size: var(--fz-base); }
.auth-card .alt {
  display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0;
  color: var(--muted-num); font: 600 var(--fz-micro)/1.5 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
}
.auth-card .alt::before, .auth-card .alt::after { content: ""; flex: 1; border-top: 1px solid var(--hair-faint); }
.auth-card .consent {
  display: flex; gap: .55rem; align-items: flex-start; font: 400 var(--fz-sm)/1.5 var(--font);
  color: var(--ink-2); text-transform: none; letter-spacing: 0; margin-bottom: 0;
}
.auth-card .consent input { margin-top: .2rem; }
.auth-card .foot-links { text-align: center; font-size: var(--fz-sm); color: var(--muted-num); margin-top: 1.1rem; }
.auth-card .foot-links a { color: var(--gold-num); font-weight: 600; }
@media (max-width: 860px) {
  .auth-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-left { padding: 1.1rem 1.2rem; gap: .7rem; border-right: 0; border-bottom: 1px solid var(--hair-cream); }
  .auth-left .stat-row, .auth-left blockquote, .auth-left .who, .auth-left p, .auth-left .label { display: none; }
  .auth-left h2 { font-size: var(--fz-lead); margin: .4rem 0 0; max-width: none; }
}

/* ---------- holdings import (app/connect.html) ---------- */
.connect { max-width: 1040px; }
.connect .tabs { margin-bottom: 1.2rem; }
/* the drop target is itself a <label>, so it has to undo the tracked uppercase
   micro-label treatment before its heading and copy inherit it */
.dropzone {
  display: block; border: 1px dashed var(--hair); background: var(--paper);
  border-radius: var(--r); padding: 1.8rem 1.2rem; text-align: center; cursor: pointer;
  transition: background .18s, border-color .18s;
  font: 400 var(--fz-body)/1.55 var(--font); letter-spacing: normal;
  text-transform: none; color: var(--ink-2); margin-bottom: 0;
}
.dropzone.over { background: var(--gold-soft); border-style: solid; border-color: var(--green); }
.dropzone h3 { font-size: var(--fz-lead); margin-bottom: .3rem; }
.dropzone p { font-size: var(--fz-sm); color: var(--muted-num); margin: 0 auto .8rem; max-width: 56ch; }
.dropzone input { display: none; }
.dropzone .pill-row { justify-content: center; }
.brokers {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem; justify-content: flex-start;
  margin-top: .7rem;
}
.brokers span {
  font: 400 var(--fz-cap)/1.5 var(--font-mono); color: var(--muted-num);
  background: var(--cream); border: 1px solid var(--hair-faint);
  border-radius: 999px; padding: .18rem .55rem;
}
.mapgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1.2rem; margin: .9rem 0; }
.mapgrid select { font-size: var(--fz-sm); }
.conn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.conn-grid h3 { font-size: var(--fz-lead); }
.conn-grid p { font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.6; }
.conn-grid p b { color: var(--ink); font-weight: 600; }
.scopes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.scopes span {
  font: 600 var(--fz-micro)/1.5 var(--font); letter-spacing: var(--tr-caps);
  text-transform: uppercase; padding: .2rem .5rem;
  border: 1px solid var(--hair); border-radius: 999px; color: var(--muted-num); background: var(--paper);
}
.scopes span.on { border-color: #b3ddc7; color: var(--up-ink); background: var(--up-soft); }
.scopes span.off { text-decoration: line-through; color: var(--muted); }
/* 280 px: charts.js derives the donut, its centre text and the legend column
   from this width, and Inter's legend rows need the extra 20 px */
.result-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: center; }
.privacy {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--hair-faint); border: 1px solid var(--hair-faint);
  border-radius: var(--r-sm); overflow: hidden; margin-top: 1.2rem;
}
.privacy > div { padding: .8rem .9rem; background: var(--paper); font-size: var(--fz-sm); color: var(--ink-2); line-height: 1.55; }
.privacy b {
  display: block; font: 600 var(--fz-micro)/1.5 var(--font);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--gold-num); margin-bottom: .3rem;
}
@media (max-width: 900px) {
  .mapgrid, .conn-grid, .privacy { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
}

/* ---------- core.css component overrides ---------- */
.modal { font-family: var(--font); }
.modal__head h3 { font: 700 var(--fz-title)/1.2 var(--font); letter-spacing: -.028em; }
.modal__body { font-size: var(--fz-base); color: var(--ink-2); }
.modal__body b { color: var(--ink); font-weight: 600; }
.modal .btn { border-radius: var(--r); background: var(--cream); border-color: var(--hair); color: var(--ink); }
.modal .btn:hover { background: var(--cream-2); }
.modal .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.modal .btn.primary:hover { background: var(--green-2); border-color: var(--green-2); }
.modal .btn.ghost { background: transparent; border-color: transparent; color: var(--muted-num); }
.modal .btn.ghost:hover { background: var(--cream); color: var(--ink); }
.modal .callout { border: 1px solid var(--hair-faint); border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: var(--r-sm); color: var(--ink-2); }
.modal .check-list li::before { color: var(--up-ink); }
.modal .kv dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.toast { font-family: var(--font); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.toasts { bottom: calc(32px + .8rem); }
.nice-scroll { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.nice-scroll::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; }
kbd {
  font-family: var(--font-mono); border: 1px solid var(--hair); background: var(--cream);
  padding: .06rem .3rem; border-radius: 4px; font-size: var(--fz-micro); color: var(--ink);
}

/* ---------- portal responsive ---------- */
@media (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr) 260px; }
  .regime-row { grid-template-columns: 250px minmax(0, 1fr); }
  .topbar .actions .pill span.t { display: none; }
  .instruments li { grid-template-columns: 150px minmax(0, 1fr) 150px; }
}
/* Inter is a good deal wider than the face this portal used to set, so the
   two-column body has to give up earlier: below 1200 px the legend could no
   longer hold "Equities" beside the ring, and the five holdings labels were
   being cut. One column instead, which every element then has room for. */
@media (max-width: 1200px) {
  .grid-portal { grid-template-columns: minmax(0, 1fr); }
  .regime-row { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  /* the ring column stays at 200 px right down to the point where the pair
     stacks: charts.js sizes the donut hole from it, and "Conservative" needs
     every pixel of the 105 px hole a 200 px ring gives */
  .holdings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rail {
    flex-direction: row; justify-content: space-around; padding: .15rem .4rem;
    border-right: 0; border-top: 1px solid var(--hair-cream); order: 2; gap: 0;
    background: linear-gradient(180deg, var(--dark-2), var(--dark));
  }
  .rail .avatar, .rail .mono, .rail .grow { display: none; }
  .rail-btn { padding: .45rem .2rem; width: auto; flex: 1 1 0; min-width: 0; }
  .rail-btn span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .rail-btn.active::before { left: 18%; right: 18%; top: auto; bottom: 1px; border-left: 0; border-top: 2px solid var(--on-dark-accent); }
  .portal__body { height: auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .stage { grid-template-columns: 1fr; }
  .stage__side { display: none; border-left: 0; }
  .portal.show-community .stage__side { display: block; }
  .portal.show-community .stage__main { display: none; }
  .topbar { padding: .55rem .8rem; gap: .6rem; }
  .topbar .greet { font-size: var(--fz-lead); }
  .topbar .date { display: none; }
  .stage__main { padding: .8rem .8rem 1.2rem; }
  .tiles { grid-template-columns: 1fr; }
  .alloc-wrap { grid-template-columns: 1fr; }
  .statusbar { gap: .7rem; padding: 0 .7rem; font-size: var(--fz-micro); }
  .statusbar .hint { display: none; }
  .threads .row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .threads .acts { justify-content: flex-start; }
  .demo-pill { top: auto; bottom: 62px; }
  .toasts { bottom: calc(56px + .8rem); }
}
@media (max-width: 620px) {
  .holdings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar .actions { width: 100%; justify-content: flex-start; }
  .demo-pill { bottom: 62px; }
}
/* The statusbar is a single nowrap line clipped by its own overflow, so its
   secondary readings have to step out before the line is long enough to be
   cut. In Inter they run out of room around 1200 px. */
@media (max-width: 1200px) { .statusbar .hide-sm { display: none; } }

/* Connect carries six rail items; below this the widest of them ("Community",
   69 px in Inter) no longer fits its share of the bar, so the labels go and the
   icons carry the bar. The text stays in the DOM as each control's accessible
   name — it is only taken off screen. */
@media (max-width: 560px) {
  .rail-btn span {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .rail-btn { padding: .6rem .2rem; }
  .rail-btn svg { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr; }
  .holdings { grid-template-columns: 1fr; }
  .rail-btn { letter-spacing: .04em; }
}

/* ---------- motion ---------- */

/* ---- the first-visit offer ---------------------------------------------
   The tour used to open itself over a dashboard the visitor had not seen.
   Nobody can judge whether a tour is worth their time before they have
   looked at the thing it explains, so the portal keeps the screen and the
   tour is offered instead: dismissible, remembered, and always still there
   behind the Tour control in the status bar. */
.offer {
  position: fixed; z-index: 940; right: 1rem; bottom: 3.25rem;
  width: min(330px, calc(100vw - 2rem));
  padding: 1rem 1rem .85rem; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--cream-3); box-shadow: var(--shadow-lg);
  animation: offin .18s cubic-bezier(.2, .7, .3, 1) both;
}
.offer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--green);
}
.offer .k { display: block; font: 500 .625rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-num); }
.offer h3 { margin: .4rem 0 .25rem; font: 600 .95rem/1.35 var(--font); color: var(--ink); }
.offer p { margin: 0 0 .75rem; font: 400 .8125rem/1.55 var(--font); color: var(--muted-num); }
.offer .row { display: flex; flex-wrap: wrap; gap: .4rem; }
.offer .x {
  position: absolute; top: .4rem; right: .4rem; width: 22px; height: 22px;
  display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted-num); font: 400 1rem/1 var(--font); cursor: pointer;
}
.offer .x:hover { background: var(--cream); color: var(--ink); }
@keyframes offin { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 560px) { .offer { right: .5rem; left: .5rem; width: auto; bottom: 3.75rem; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }