/* ============================================================================
   exotic — Lobby surface composition
   ----------------------------------------------------------------------------
   The post-login home. Built on the exotic app language (css/tokens.css +
   css/base.css): light near-white paper, hairline structure, mono data,
   the prism gradient used sparingly — one hero action, one soft aura.
   Left rail navigation sets the framework for the whole app.
   ========================================================================== */

:root{
  --side-w:66px;
  --lb-max:1400px;
}

html,body{height:100%}
body{min-height:100vh;overflow-x:hidden}

/* ---- dark theme: the token overrides live in css/tokens/colors.css (one dark
   palette for the whole product — D02/D03). Only true per-surface exceptions
   stay here. Colored company marks keep a white plate in dark so the real
   logos stay recognizable; .inv marks are white-glyph and MUST keep their
   dark plate (../base.css) — excluding them fixes the invisible-mark bug. ---- */
body.theme-dark .logo:not(.mono):not(.inv){background:#fff}
body.theme-dark .logo.mono{background:var(--surface-2)}

/* default link voice (users may add links in-editor) */
a{color:inherit}
a:hover{color:var(--ink)}

/* ============================================================================
   Left rail
   ========================================================================== */
/* z above the sticky mini-head (80) — the expanded drawer overlays all
   page chrome; only modals/toast/tweaks (900+) sit higher */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:90;
  display:flex;flex-direction:column;gap:4px;padding:18px 14px 16px;
  border-right:1px solid var(--hairline-2);background:var(--bg);
  transition:width var(--t2, .2s) var(--ease)}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;text-decoration:none}
.side .brand .markbox{width:28px;height:28px;flex:0 0 auto;display:block}
.side .brand .wm{font-size:19px;font-weight:600;letter-spacing:-0.035em;text-transform:lowercase;color:var(--ink)}
.side .brand .wm span{color:var(--muted);font-weight:400}

.side nav{display:flex;flex-direction:column;gap:2px}
.nav-it{display:flex;align-items:center;gap:11px;padding:8.5px 10px;border-radius:var(--rad-2);
  font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background var(--t1),color var(--t1)}
.nav-it svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav-it:hover{color:var(--ink);background:var(--surface-2)}
.nav-it{position:relative}
.nav-it.on{color:var(--ink);background:var(--surface);border-color:var(--hairline-2);box-shadow:var(--crisp)}
/* the meridian marks where you are — a 2px thread of light on the active item */
.nav-it.on::before{content:"";position:absolute;left:-10px;top:22%;bottom:22%;width:2px;border-radius:var(--r-pill,999px);
  background:linear-gradient(180deg,var(--g2),var(--g4),var(--g5))}
.side:hover .nav-it.on::before{left:-14px}
.nav-it .soon{margin-left:auto;font-family:var(--font-num);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:2px 6px}

.side .grow{flex:1}
.side .foot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--hairline-2);padding-top:10px}
/* sidebar quick toggles — theme + colorway live above Settings */
button.nav-it{width:100%;background:none;font-family:inherit;text-align:left}
.nav-it .ti{width:17px;flex:0 0 auto;text-align:center;font-size:14px;line-height:1}
.nav-it .cw-dot{width:15px;height:15px;flex:0 0 auto;border-radius:50%;box-shadow:var(--crisp);margin:0 1px;background:var(--grad)}
.side .acct{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--rad-2);cursor:pointer;
  transition:background var(--t1)}
.side .acct:hover{background:var(--surface-2)}
.side .acct .av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--grad);box-shadow:inset 0 0 0 1px oklch(1 0 0/.25)}
.side .acct .who{min-width:0;display:flex;flex-direction:column}
.side .acct .hn{font-family:var(--font-num);font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .acct .net{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* ---- icons-only rail — the product default: just the mark and the icons.
   Hovering the rail flies it out over the content with labels; it collapses
   back on leave. Labels also live in title/aria-label tooltips. ---- */
.side{padding:18px 10px 16px;overflow:hidden}
.side .brand{justify-content:center;padding:4px 0 16px}
.side .brand .wm{display:none}
.nav-it{justify-content:center;padding:10px 0}
.nav-it .lb,.nav-it .soon{display:none}
.nav-it .lb{white-space:nowrap}
.side .acct{justify-content:center;padding:7px 0}
.side .acct .who{display:none}

.side:hover{width:230px;padding:18px 14px 16px;box-shadow:var(--elev-2)}
.side:hover .brand{justify-content:flex-start;padding:4px 8px 16px}
.side:hover .brand .wm{display:inline}
.side:hover .nav-it{justify-content:flex-start;padding:8.5px 10px}
.side:hover .nav-it .lb{display:inline}
.side:hover .acct{justify-content:flex-start;padding:7px 8px}
.side:hover .acct .who{display:flex}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* ============================================================================
   Main column
   ========================================================================== */
.lb-main{min-width:0;margin-left:var(--side-w);padding:20px 44px 30px;transition:margin-left var(--t2, .2s) var(--ease)}
.lb-wrap{max-width:var(--lb-max);margin:0 auto;display:flex;flex-direction:column;gap:26px}

/* ---- top bar · ⌘K search + money movement ---- */
.lb-top{display:flex;align-items:center;gap:16px;padding-bottom:2px}
.topsearch{flex:1;max-width:560px;display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-size:13.5px;color:var(--muted);text-align:left;
  background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);
  padding:10px 10px 10px 16px;cursor:pointer;box-shadow:var(--crisp);transition:color var(--t1),box-shadow var(--t1)}
.topsearch:hover{color:var(--ink-2);box-shadow:var(--elev-1)}
.topsearch .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topsearch .gl{font-size:15px;line-height:1;color:var(--ink-2)}
.topsearch .kbd{margin-left:auto;font-family:var(--font-num);font-size:10px;color:var(--muted);
  border:1px solid var(--hairline-2);border-radius:5px;padding:3px 7px;background:var(--bg)}
.lb-top .acts{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---- header ---- */
/* the page header is .pg-head (shell.css) — one implementation (D22).
   Lobby-only extras below. */
.pg-head .sub{display:flex;align-items:center;gap:8px}
.pg-head .sub .tick{color:var(--ink-2)}
.pg-head .acts{display:flex;align-items:center;gap:10px}
/* the LIT-HORIZON button — the primary action is ink with the meridian
   burning along its top edge; hover brings the light up. Never a hue fill.
   The edge is a transparent top border over a border-box gradient, so the
   light FOLLOWS the corner radius; no inset-white --crisp here (it reads
   as silver slivers at the corners of a dark button). */
.btn-grad{position:relative;isolation:isolate;overflow:hidden;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--bg);
  background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;
  border:0;border-top:2px solid transparent;border-radius:var(--rad-2);padding:9px 18px 11px;cursor:pointer;
  box-shadow:0 2px 6px -2px oklch(0.30 0.02 260/.35);transition:transform var(--t1),box-shadow var(--t1)}
.btn-grad::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);mask-image:linear-gradient(180deg,#000,transparent 62%);
  transition:opacity var(--t2)}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px oklch(0.30 0.02 260/.4),var(--meridian-glow)}
.btn-grad:hover::after{opacity:.26}
body.theme-dark .btn-grad{color:var(--bg);
  background:linear-gradient(oklch(0.99 0.002 262),oklch(0.99 0.002 262)) padding-box,var(--grad) border-box}
.btn-line{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-2);padding:10px 17px;cursor:pointer;
  box-shadow:var(--crisp);transition:box-shadow var(--t1),transform var(--t1)}
.btn-line:hover{box-shadow:var(--elev-1);transform:translateY(-1px)}

/* ============================================================================
   Hero — balance chart + right rail
   ========================================================================== */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:16px;align-items:stretch}
.hero-rail{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
/* (the old rail aura is retired — the page-top wash is the ONE light source) */

.card{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-3);
  box-shadow:var(--elev-1)}

/* ---- balance hero — Lightyear read: the chart lives on the page, no card;
   the label row and the big number float above it ---- */
.bal-card{padding:20px 22px 14px;display:flex;flex-direction:column;min-height:354px}
.hero .bal-card{position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;padding:6px 2px 0}
/* the wash falls from the very top of the page — full-bleed, no edges.
   "very top" includes the notch: body's safe-area padding pushes .lb-main
   down, so the wash reaches back up by the same inset (0 in a browser tab) */
.lb-main{position:relative}
.lb-main:has(.hero .bal-card)::before{content:"";position:absolute;z-index:-1;
  top:calc(-1*env(safe-area-inset-top,0px));left:0;right:0;
  height:calc(480px + env(safe-area-inset-top,0px));pointer-events:none;
  background:
    radial-gradient(120% 84% at 14% 0%, color-mix(in oklab,var(--g3) 9%,transparent), transparent 58%),
    radial-gradient(90% 66% at 74% 0%, color-mix(in oklab,var(--g5) 6%,transparent), transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent);mask-image:linear-gradient(180deg,#000 42%,transparent)}
/* dark paper amplifies the same mix — run the light at half strength */
body.theme-dark .lb-main:has(.hero .bal-card)::before{background:
    radial-gradient(120% 84% at 14% 0%, color-mix(in oklab,var(--g3) 4%,transparent), transparent 58%),
    radial-gradient(90% 66% at 74% 0%, color-mix(in oklab,var(--g5) 3%,transparent), transparent 62%)}
.hero .bal-top,.hero .bal-num{position:relative;z-index:2}
.hero .bal-num{pointer-events:none}
.hero .chart-wrap{z-index:1}
/* controls sit BELOW the chart — range left, series toggle right — the same
   row the Asset/Thesis heroes use, so the chart reads as ONE element app-wide */
.bal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;position:relative;z-index:2}
.bal-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.klabel{font-family:var(--font-num);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.bal-ctl{display:flex;align-items:center;gap:10px}
.seg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:3px}
.seg button{font-family:var(--font-num);font-size:11.5px;color:var(--muted);background:transparent;border:0;
  border-radius:var(--rad-pill);padding:5px 12px;cursor:pointer;transition:color var(--t1),background var(--t1)}
.seg button:hover{color:var(--ink)}
.seg button.on{color:var(--ink);background:var(--surface);box-shadow:var(--crisp)}
.bal-num{display:flex;align-items:baseline;gap:14px;margin-top:12px;flex-wrap:wrap}
.bal-num .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:37px;font-weight:500;letter-spacing:-0.02em}
.bal-num .v small{font-size:23px;color:var(--ink-2)}
.bal-num .v.up{color:var(--up)} .bal-num .v.down{color:var(--down)}
.bal-num .d{display:flex;align-items:baseline;gap:9px}
.bal-num .chip{font-family:var(--font-num);font-size:12px;font-weight:600;border-radius:var(--rad-1);padding:3px 8px}
.bal-num .abs{font-family:var(--font-num);font-size:13px;color:var(--ink-2)}
/* ---- THE chart (D22) — one engine, js/kit/px-chart.js, draws every chart in
   the app, and THIS is its one authoritative chrome block (lobby.css rides
   every app page; css/app/detail.css keeps only the drill-in extras: volume
   strip, order lines, trade markers, hi/lo labels). The Lobby's #chartWrap
   and #balX wear px-chart / px-x alongside their layout classes. Sizing is
   per page: .chart-wrap flexes below, detail.css fixes .px-chart's height. */
.px-chart{position:relative;margin:14px -6px 0}
.px-chart svg{position:absolute;left:0;top:0;width:calc(100% - 46px);height:100%;display:block;overflow:visible}
.px-chart svg .grid ellipse{fill:var(--hairline);stroke:none}
body.theme-dark .px-chart svg .grid ellipse{fill:var(--hairline-2)}
.px-chart .yl{position:absolute;left:calc(100% - 42px);transform:translateY(-50%);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:10px;color:var(--muted);pointer-events:none;
  background:color-mix(in oklab,var(--bg) 74%,transparent);border-radius:var(--rad-pill);padding:1px 6px}
.px-chart .xline{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-2);opacity:0;pointer-events:none}
.px-chart .xdot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--chart-line,var(--g4));border:2px solid var(--surface);
  box-shadow:var(--elev-1);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
/* the tip: value · date on one row (.r1), plus "you: ±$" underneath when
   the page can price your position (opts.pnlAt) */
.px-chart .tip{position:absolute;transform:translate(-50%,-115%);opacity:0;pointer-events:none;white-space:nowrap;
  background:var(--ink);color:var(--bg);border-radius:var(--rad-1);padding:5px 9px;box-shadow:var(--elev-2);
  font-family:var(--font-num);font-size:11.5px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.px-chart .tip .r1{display:flex;gap:8px;align-items:baseline}
.px-chart .tip .dt{opacity:.62;font-size:10px}
.px-chart .tip .pl{font-size:10px;opacity:.9}
.px-chart .tip .pl.up{color:var(--up-on-ink)} .px-chart .tip .pl.down{color:var(--down-on-ink)}
.px-chart.hov .xline,.px-chart.hov .xdot,.px-chart.hov .tip{opacity:1}
/* x axis under the plot — stops where the y gutter starts */
.px-x{position:relative;height:17px;margin-right:46px;padding-top:5px;font-family:var(--font-num);font-size:10px;color:var(--muted)}
.px-x span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.px-x span:first-child{transform:none}
.px-x span:last-child{transform:translateX(-100%)}
/* bars mode (series kind:'bars') — P&L columns hanging off a zero line */
.pnl-bars{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 46px)}
.pnl-bars .b{position:absolute;border-radius:3px;min-height:2px}
.pnl-bars .b.up{background:color-mix(in oklab,var(--up) 78%,transparent)}
.pnl-bars .b.down{background:color-mix(in oklab,var(--down) 78%,transparent)}
.pnl-bars .b:hover{filter:brightness(.92)}
.pnl-bars .zl{position:absolute;left:0;right:0;height:1px;background:var(--hairline)}
/* the hero's chart slot — LAYOUT only; the chrome above is the engine's */
.chart-wrap{flex:1;min-height:196px}

/* ---- margin card ---- */
.mgn-card{position:relative;z-index:1;padding:17px 18px 15px;display:flex;flex-direction:column;gap:12px}
.mgn-head{display:flex;align-items:center;justify-content:space-between}
.health{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-num);font-size:11px;color:var(--up)}
.health .dot{width:7px;height:7px;border-radius:50%;background:var(--up)}
.kv{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)}
.kv .v.up{color:var(--up)} .kv .v.down{color:var(--down)}
.kv .v b{font-weight:600}
.mgn-bar{height:5px;border-radius:var(--rad-pill);background:var(--surface-2);border:1px solid var(--hairline-2);overflow:hidden}
/* the meter is DATA, not brand: it means account health, so it wears the
   health color — green while healthy, amber past 70%, red past 90% */
.mgn-bar span{display:block;height:100%;background:var(--up);border-radius:var(--rad-pill)}
.mgn-bar span.warn{background:var(--warn)}
.mgn-bar span.hot{background:var(--down)}
.mgn-note{font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:-5px}
.mgn-more{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hairline-2);padding-top:12px}
.mgn-toggle{align-self:center;font-family:var(--font-num);font-size:11px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:2px 8px;border-radius:var(--rad-1);transition:color var(--t1)}
.mgn-toggle:hover{color:var(--ink)}
.mgn-toggle:active{transform:scale(.96)}
@keyframes lbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- deposits card · the one glass surface ---- */
.dep-card{position:relative;z-index:1;flex:1;padding:17px 18px 14px;display:flex;flex-direction:column;gap:11px;
  background:color-mix(in oklab,var(--surface) 62%,transparent);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid oklch(1 0 0/.62);border-radius:var(--rad-3);box-shadow:var(--elev-1),inset 0 1px 0 oklch(1 0 0/.55)}
body.theme-dark .dep-card{background:color-mix(in oklab,var(--surface) 55%,transparent);
  border-color:oklch(1 0 0/.13);box-shadow:var(--elev-1),inset 0 1px 0 oklch(1 0 0/.07)}
.dep-head{display:flex;align-items:center;justify-content:space-between}
.dep-head .ct{font-family:var(--font-num);font-size:10px;color:var(--ink-2);background:var(--bg-sunken);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:2px 8px}
.dep-row{display:flex;align-items:center;gap:11px}
.dep-row .ic{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  font-size:12px;color:var(--ink-2);background:var(--surface);border:1px solid var(--hairline-2);box-shadow:var(--crisp)}
.dep-row .ic.ok{color:var(--up);background:var(--up-bg);border-color:transparent}
.dep-row .bd{flex:1;min-width:0}
.dep-row .amt{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:500;color:var(--ink)}
.dep-row .st{font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:1px}
.dep-row .st b{color:var(--ink-2);font-weight:500}
.dep-row .when{font-family:var(--font-num);font-size:10.5px;color:var(--muted)}
.dep-foot{border-top:1px solid var(--hairline-2);padding-top:10px;font-size:11.5px;color:var(--muted);line-height:1.45}

/* ============================================================================
   Hero variant — Brief (Fey-style morning read)
   ========================================================================== */
.brief-card{display:none;position:relative;overflow:hidden;padding:24px 26px;min-height:354px;
  background:var(--ink);border:1px solid var(--ink);border-radius:var(--rad-3);box-shadow:var(--elev-2);
  color:var(--bg);flex-direction:column}
.brief-card::before{content:"";position:absolute;right:-70px;top:-80px;width:300px;height:260px;
  background:var(--grad);filter:blur(64px);opacity:.22;border-radius:50%;pointer-events:none}
body.theme-dark .brief-card{background:var(--surface);border-color:var(--hairline);color:var(--ink)}
.brief-card .klabel{color:oklch(0.72 0.01 277)}
body.theme-dark .brief-card .klabel{color:var(--muted)}
.brief-card .txt{position:relative;font-size:19px;line-height:1.56;font-weight:400;letter-spacing:-0.008em;
  margin:16px 0 0;max-width:56ch;text-wrap:pretty}
.brief-card .txt b{font-weight:600}
.brief-card .txt .pos{color:oklch(0.80 0.11 162)} .brief-card .txt .neg{color:oklch(0.78 0.12 20)}
.brief-card .stats{position:relative;display:flex;gap:26px;margin-top:auto;padding-top:20px;flex-wrap:wrap}
.brief-card .bs .k{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:oklch(0.66 0.012 277)}
body.theme-dark .brief-card .bs .k{color:var(--muted)}
.brief-card .bs .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;margin-top:3px}
body.hero-brief .bal-card{display:none}
body.hero-brief .brief-card{display:flex}

/* ============================================================================
   Sections
   ========================================================================== */
.sec-head{display:flex;align-items:baseline;gap:12px}
.sec-head h2{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-0.01em}
.sec-head .sub{font-family:var(--font-num);font-size:11.5px;color:var(--muted)}
.sec-head .lnk{margin-left:auto;font-size:12.5px;color:var(--muted);text-decoration:none;transition:color var(--t1)}
.sec-head .lnk:hover{color:var(--ink)}

/* ---- allocation bar · positions + locked margin + free cash ---- */
.alloc{display:flex;gap:2px;height:8px;margin:14px 0 10px}
.alloc span{min-width:5px;border-radius:2.5px;cursor:pointer;
  transition:flex var(--t2, .2s) var(--ease),opacity var(--t1),transform var(--t1)}
.alloc span:first-child{border-top-left-radius:99px;border-bottom-left-radius:99px}
.alloc span:last-child{border-top-right-radius:99px;border-bottom-right-radius:99px}
.alloc span.lock,.alloc-key .dot.lock{background:repeating-linear-gradient(-55deg,var(--hairline) 0 1.5px,transparent 1.5px 5px) var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline-2)}
.alloc span.cash,.alloc-key .dot.cash{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hairline-2)}
.alloc span.hot{transform:scaleY(1.5)}
.hold-dim .alloc span:not(.hot){opacity:.25}
.alloc-key{display:flex;flex-wrap:wrap;gap:7px 16px;margin-bottom:14px}
.alloc-key .k{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-num);font-size:10.5px;color:var(--ink-2);
  cursor:default;transition:opacity var(--t1),color var(--t1)}
.alloc-key .k .dot{width:7px;height:7px;border-radius:2.5px}
.alloc-key .k b{font-weight:500;color:var(--muted);transition:color var(--t1)}
.hold-dim .alloc-key .k:not(.hot){opacity:.35}
.alloc-key .k.hot{color:var(--ink)} .alloc-key .k.hot b{color:var(--ink-2)}

/* ---- portfolio tabs · Holdings / Open orders / History ---- */
.lbt-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hairline);margin-bottom:16px}
.lb-tabs{display:flex;gap:2px;padding:0 2px}
.lb-tabs button{font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--muted);
  background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 14px 10px;margin-bottom:-1px;cursor:pointer;
  transition:color var(--t1),border-color var(--t1)}
.lb-tabs button:hover{color:var(--ink)}
.lb-tabs button.on{color:var(--ink);border-color:var(--ink)}
.lb-tabs .ct{font-family:var(--font-num);font-size:10px;font-weight:400;color:var(--muted);margin-left:7px;
  background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:1px 7px}
.lbt-head .lnk{font-size:12.5px;color:var(--muted);text-decoration:none;transition:color var(--t1)}
.lbt-head .lnk:hover{color:var(--ink)}
.lb-pane{display:none}
.lb-pane.on{display:block;animation:lbIn .18s var(--ease-emph)}
.lb-empty{font-size:13px;color:var(--muted);padding:22px 4px;text-align:center;border:1px dashed var(--hairline);border-radius:var(--rad-3)}

/* history pane — the last few events; the action link opens Activity */
.lb-hist{padding:4px 18px}
.lbh-row{display:flex;align-items:baseline;gap:14px;padding:11px 4px;border-bottom:1px solid var(--hairline-2)}
.lbh-row:last-child{border-bottom:0}
.lbh-row .d{font-family:var(--font-num);font-size:10.5px;color:var(--muted);width:52px;flex:0 0 auto}
.lbh-row .t{flex:1;font-size:13px;font-weight:500;min-width:0}
.lbh-row .a{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.lbh-row .a.up{color:var(--up)} .lbh-row .a.down{color:var(--down)} .lbh-row .a.mut{color:var(--muted)}

/* (P&L bars moved into the shared chart block above — the engine's bars mode) */

/* ---- holdings table — collapsed rows stay scannable; depth lives in the
   inline expansion (entry, mark, liquidation, margin, funding, actions) ---- */
.hold-tbl{overflow:hidden}
.hgroup{border-bottom:1px solid var(--hairline-2);transition:opacity var(--t1)}
.hgroup:last-child{border-bottom:0}
.hrow{display:grid;grid-template-columns:1.9fr .95fr .6fr .85fr 1.25fr 22px;gap:12px;align-items:center;
  padding:12px 16px}
.hrow.hh{font-family:var(--font-num);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--hairline-2)}
.hrow.hh span.r{text-align:right}
.hrow:not(.hh){cursor:pointer;transition:background var(--t1)}
.hrow:not(.hh):hover,.hgroup.hot .hrow{background:var(--surface-2)}
/* rows answer the press too — a shade firmer than hover, instantly */
.hrow:not(.hh):active{background:color-mix(in oklab,var(--ink) 4%,var(--surface-2))}
.hold-dim .hgroup:not(.hot){opacity:.55}
.hrow .asset{display:flex;align-items:center;gap:11px;min-width:0}
.hrow .asset .logo{width:28px;height:28px;flex:0 0 auto}
.hrow .asset .tile{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--rad-1);
  background:var(--grad);color:var(--ink-on-grad);font-size:13px;box-shadow:var(--crisp)}
.hrow .asset .nm{min-width:0}
.hrow .asset .sym{font-weight:600;font-size:13.5px;letter-spacing:-0.01em;display:flex;align-items:center;gap:7px;white-space:nowrap}
.hrow .asset .sym a{color:inherit;text-decoration:none}
.hrow .asset .sym a:hover{text-decoration:underline;text-underline-offset:3px}
.hrow .asset .fn{font-family:var(--font-num);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .chev{font-size:13px;color:var(--muted);text-align:center;transition:transform var(--t1)}
.hgroup.open .chev{transform:rotate(90deg)}
.bdg{font-family:var(--font-num);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-1);padding:2px 5px;flex:0 0 auto}
.tag{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--rad-1);
  padding:3px 8px;justify-self:start;white-space:nowrap}
.tag.long{color:var(--up);background:var(--up-bg)} .tag.short{color:var(--down);background:var(--down-bg)}
.hrow .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;text-align:right;color:var(--ink)}
.hrow .num.muted{color:var(--muted)}
.hrow .pnl{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.hrow .pnl .pct{color:var(--muted);margin-left:7px;font-size:11px}
.hrow .pnl.up{color:var(--up)} .hrow .pnl.down{color:var(--down)}

/* the expansion — where depth lives; stacked label-over-value cells (the
   metrics-strip vocabulary), values wrap freely */
.hx{padding:2px 18px 15px 57px}  /* height rides the .xp wrapper */
.hx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;
  border-top:1px dashed var(--hairline-2);padding-top:14px}
.hx .kv{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hx .kv>span:first-child{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hx .kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);white-space:normal;line-height:1.5;text-wrap:pretty}
.hx .kv .v.up{color:var(--up)} .hx .kv .v.down{color:var(--down)}
.hx-acts{display:flex;gap:8px;margin-top:14px}
.hx-btn{font-family:var(--font-num);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:7px 14px;
  cursor:pointer;text-decoration:none;transition:color var(--t1),border-color var(--t1),background var(--t1)}
.hx-btn:hover{color:var(--ink);border-color:var(--hairline)}
.hx-btn.danger:hover{color:var(--down);border-color:transparent;background:var(--down-bg)}

/* ============================================================================
   Discover row — theses + movers
   ========================================================================== */
.disc{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.list-card{padding:6px 0 2px}
.list-card .lc-head{display:flex;align-items:baseline;gap:10px;padding:12px 18px 10px}
.list-card .lc-head .t{font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.list-card .lc-head .lnk{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:none}
.list-card .lc-head .lnk:hover{color:var(--ink)}

.th-row{display:grid;grid-template-columns:22px minmax(0,1.5fr) 96px 76px auto;gap:14px;align-items:center;
  padding:11px 18px;border-top:1px solid var(--hairline-2);cursor:pointer;text-decoration:none;transition:background var(--t1)}
.th-row:hover{background:var(--surface-2)}
.th-row .rk{font-family:var(--font-num);font-size:11px;color:var(--muted)}
.th-row .nm{min-width:0}
.th-row .nm .t{display:block;font-size:13.5px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-row .nm .s{display:block;font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-row .sgraph{width:96px;height:26px;display:block}
.th-row .ret{text-align:right}
.th-row .ret .v{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--up)}
.th-row .ret .k{display:block;font-family:var(--font-num);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:1px}
.th-row .go{font-family:var(--font-num);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:6px 12px;white-space:nowrap;
  transition:color var(--t1),border-color var(--t1)}
.th-row:hover .go{color:var(--ink);border-color:var(--hairline)}

.mv-row{display:grid;grid-template-columns:minmax(0,1.4fr) 74px auto;gap:12px;align-items:center;
  padding:10px 18px;border-top:1px solid var(--hairline-2);cursor:pointer;text-decoration:none;transition:background var(--t1)}
.mv-row:hover{background:var(--surface-2)}
.mv-row .lhs{display:flex;align-items:center;gap:10px;min-width:0}
.mv-row .logo{width:26px;height:26px;flex:0 0 auto}
.mv-row .sym{display:block;font-weight:600;font-size:13px}
.mv-row .sec{display:block;font-family:var(--font-num);font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-row .spark{width:74px;height:24px;display:block}
.mv-row .rhs{text-align:right}
.mv-row .px{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink)}
.mv-row .ch{display:inline-block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;margin-top:3px;padding:2px 6px;border-radius:var(--rad-1)}
.mv-row .ch.up{color:var(--up);background:var(--up-bg)} .mv-row .ch.down{color:var(--down);background:var(--down-bg)}

/* ---- footer · consistent with the Home letter footer ---- */
.lb-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--hairline-2);padding-top:22px;margin-top:4px}
.lb-foot .fbrand{display:flex;align-items:center;gap:9px;text-decoration:none}
.lb-foot .fmark{width:20px;height:20px;display:block}
.lb-foot .fwm{font-size:15px;font-weight:500;letter-spacing:var(--wm-spacing);text-transform:lowercase;color:var(--ink)}
.lb-foot .fwm span{color:var(--muted);font-weight:400}
.lb-foot .copy{font-family:var(--font-num);font-size:11px;color:var(--muted);white-space:nowrap}
.lb-foot .links{margin-left:auto;display:flex;gap:20px}
.lb-foot .links a{font-family:var(--font-num);font-size:11px;letter-spacing:.04em;color:var(--ink-2);text-decoration:none;transition:color var(--t1)}
.lb-foot .links a:hover{color:var(--ink)}

/* ============================================================================
   Overlays — modals · ⌘K · toast
   ========================================================================== */
/* overlays stay in the DOM: enter and exit travel the same path, the glass
   materializes (blur rises with the fade) and any moment is interruptible */
.ovl{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  background:var(--scrim);opacity:0;visibility:hidden;pointer-events:none;
  /* the scrim dims, the panel carries the material — scrims never blur (D08).
     exits run ~65% of enters: dismissal is a decision already made (D25) */
  transition:opacity .18s var(--ease),visibility 0s linear .18s}
.ovl.on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity var(--t-med) var(--ease)}
.modal{width:400px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--rad-4);box-shadow:var(--elev-3);padding:22px;display:flex;flex-direction:column;gap:16px;
  transform:translateY(10px) scale(.985);transition:transform .26s var(--ease-emph)}
.ovl.on .modal{transform:none;transition:transform var(--t-ovl,.42s) var(--ease-emph)}
.md-head{display:flex;align-items:center;justify-content:space-between}
.md-head .t{font-size:16.5px;font-weight:600;letter-spacing:-0.01em}
/* the close is .btn-close (css/kit/kit.css) — one round ×, hover wash, focus ring,
   44px touch zone */
.md-kv{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-2)}
.md-kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.md-kv .max{font-family:var(--font-num);font-size:10.5px;color:var(--up);background:var(--up-bg);border:0;
  border-radius:var(--rad-1);padding:4px 8px;cursor:pointer;font-weight:600;margin-left:9px}
.md-field{display:flex;align-items:center;gap:8px;border:1px solid var(--hairline);background:var(--bg-sunken);
  border-radius:var(--rad-2);padding:0 8px 0 15px}
.md-field .cur{font-family:var(--font-num);font-size:15px;color:var(--muted)}
.md-field input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;font-size:23px;font-weight:500;color:var(--ink);padding:13px 0}
.md-field .un{font-family:var(--font-num);font-size:11px;letter-spacing:.05em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-1);padding:5px 9px}
.md-chips{display:flex;gap:7px}
.md-chips button{font-family:var(--font-num);font-size:11.5px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:6px 12px;cursor:pointer;
  transition:color var(--t1),border-color var(--t1)}
.md-chips button:hover{color:var(--ink);border-color:var(--hairline)}
.md-note{display:flex;gap:9px;font-size:12px;line-height:1.5;color:var(--ink-2);
  background:var(--bg-sunken);border:1px solid var(--hairline-2);border-radius:var(--rad-2);padding:11px 13px}
.md-note .gi{color:var(--muted);flex:0 0 auto}
/* the destructive confirm speaks in red — the note IS the warning */
.md-note.warn{color:var(--down);background:var(--down-bg);
  border-color:var(--down-line)}
.md-note.warn .gi{color:var(--down)}
.md-cta{width:100%;border:0;border-radius:var(--rad-2);padding:14px 0;font-family:var(--font-display);
  font-size:14.5px;font-weight:600;cursor:pointer;transition:filter var(--t1),transform var(--t1)}
.md-cta:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* both modal CTAs speak lit-horizon: ink body, meridian on the top edge
   (border-box gradient under a transparent top border — follows the radius) */
.md-cta.grad,.md-cta.dark{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--bg)}
.md-cta.grad,.md-cta.dark{background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;
  border-top:2px solid transparent;padding:12px 0 14px}
.md-cta.grad::after,.md-cta.dark::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);mask-image:linear-gradient(180deg,#000,transparent 62%)}
body.theme-dark .md-cta.grad,body.theme-dark .md-cta.dark{color:var(--bg);
  background:linear-gradient(var(--ink-btn-dark),var(--ink-btn-dark)) padding-box,var(--grad) border-box}
/* disabled = recolor, never opacity — and it must beat the horizon fills above,
   in dark too ("green is earned", D16) */
.md-cta:disabled,.md-cta.grad:disabled,.md-cta.dark:disabled,
body.theme-dark .md-cta.grad:disabled,body.theme-dark .md-cta.dark:disabled{
  opacity:1;background:var(--surface-2);color:var(--muted);border-top-color:transparent;
  cursor:not-allowed;transform:none;filter:none}
.md-cta.grad:disabled::after,.md-cta.dark:disabled::after{content:none}

/* ---- ⌘K ---- */
.cmdk{position:fixed;inset:0;z-index:950;display:flex;justify-content:center;align-items:flex-start;
  padding-top:16vh;background:var(--scrim);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),visibility 0s linear .18s}
.cmdk.on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity var(--t-med) var(--ease)}
.ck-shell{width:560px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--rad-3);box-shadow:var(--elev-3);overflow:hidden;
  transform-origin:50% 0;transform:translateY(-7px) scale(.98);transition:transform .26s var(--ease-emph)}
.cmdk.on .ck-shell{transform:none;transition:transform var(--t-ovl,.42s) var(--ease-emph)}
@media (prefers-reduced-motion:reduce){
  .modal,.ck-shell{transform:none;transition:none}
  .ovl,.cmdk{transition:opacity .15s linear,visibility 0s linear .15s}
  .ovl.on,.cmdk.on{transition:opacity .15s linear}
  #toast{transition:opacity .15s linear}
  .lb-pane.on{animation:none}
  .side,.lb-main{transition:none}
}
.ck-bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hairline-2)}
.ck-bar .gl{font-size:15px;color:var(--muted)}
.ck-bar input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--font-display);
  font-size:15px;color:var(--ink)}
.ck-bar input::placeholder{color:var(--muted)}
.ck-bar .esc{font-family:var(--font-num);font-size:10px;color:var(--muted);border:1px solid var(--hairline-2);
  border-radius:5px;padding:3px 7px;cursor:pointer}
.ck-list{max-height:300px;overflow:auto;padding:7px}
.ck-it{display:flex;align-items:center;gap:12px;padding:9.5px 11px;border-radius:var(--rad-2);cursor:pointer}
.ck-it.sel{background:var(--surface-2)}
.ck-it:active{background:color-mix(in oklab,var(--ink) 4%,var(--surface-2))}
.ck-it .gi{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;font-size:13px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:var(--rad-1)}
.ck-it .tt{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink)}
.ck-it .dd{font-family:var(--font-num);font-size:10.5px;color:var(--muted)}
.ck-empty{padding:26px 0;text-align:center;font-family:var(--font-sans);font-size:12.5px;color:var(--muted)}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:1100;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border-radius:var(--rad-pill);
  padding:11px 18px;font-family:var(--font-sans);font-size:13px;box-shadow:var(--elev-3);
  transition:opacity var(--t2, .2s) var(--ease),transform var(--t2, .2s) var(--ease-emph)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .gi{color:var(--g4)}
#toast b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:600}

/* ============================================================================
   Tweaks — one shared panel, css/kit/tweaks.css (FX10)
   ========================================================================== */

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  .hero{grid-template-columns:1fr}
  .hero-rail{flex-direction:row}
  .hero-rail>.card,.hero-rail>.dep-card{flex:1}
  .disc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .lb-main{padding:18px 20px 26px}
  .hero-rail{flex-direction:column}
  .hrow{grid-template-columns:1.6fr .9fr .95fr 1.15fr 20px;}
  .hrow .c-size{display:none}
  .hx{padding-left:20px}
  .hx-grid{grid-template-columns:1fr 1fr}
}

/* ---- phones: one column, rows restack, nothing pushes past the edge ---- */
@media (max-width:640px){
  .lb-main{padding:14px 14px 24px}
  .lb-wrap>*,.hero>*{min-width:0}
  /* top bar: actions stay up top, search takes its own full-width line */
  .lb-top{flex-wrap:wrap;gap:10px}
  .topsearch{order:2;flex:1 1 100%;max-width:none;min-width:0}
  /* long instrument names wrap in the stacked rows (320px still reads) */
  .hrow:not(.hh) .sym{white-space:normal}
  /* hero: the delta line wraps instead of widening the card */
  .bal-num .d{flex-wrap:wrap}
  .bal-num .d .abs{white-space:normal}
  .bal-foot{flex-wrap:wrap;gap:8px}
  /* portfolio tabs: all three FIT at 390px (tighter padding) — and if a
     locale/date ever overflows anyway, the alloc-key fade mask says
     "more this way" instead of slicing "History" mid-glyph (QA 2026-07-16) */
  .lbt-head{flex-wrap:wrap;row-gap:4px}
  .lb-tabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto;
    }
  .lb-tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .lb-tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  .lb-tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  .lb-tabs::-webkit-scrollbar{display:none}
  .lb-tabs button{white-space:nowrap}
  .lb-tabs button{padding:12px 7px}
  /* count pills go at 390px: with them "History" cannot fit and the row
     clipped mid-glyph — the counts are one tap away in the content */
  .lb-tabs .ct{display:none}
  /* holdings become two-line rows: name + direction, then value + P&L.
     The whole row is the button, so the chevron affordance can go. */
  .hrow.hh{display:none}
  .hrow:not(.hh){grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:3px;padding:12px 14px}
  .hrow:not(.hh) .asset{grid-column:1;grid-row:1;min-width:0}
  .hrow:not(.hh) .tag{grid-column:2;grid-row:1;justify-self:end;align-self:center}
  .hrow:not(.hh) .num{grid-column:1;grid-row:2;text-align:left}
  .hrow:not(.hh) .pnl{grid-column:2;grid-row:2;justify-self:end;text-align:right}
  .hrow:not(.hh) .chev{display:none}
  .hx{padding-left:14px}
  .hx-grid{grid-template-columns:1fr}
  /* explore/lobby list rows: name + numbers only — rank, sparkline and the
     "open" pill go (the whole row is already the link) */
  .th-row{grid-template-columns:minmax(0,1.5fr) auto;gap:10px}
  .th-row .rk,.th-row .sgraph,.th-row .go{display:none}
  .mv-row{grid-template-columns:minmax(0,1.4fr) auto}
  .mv-row .spark{display:none}
}

/* ---- touch input: thumb-sized targets, whatever the viewport ---- */
@media (pointer:coarse){
  .seg button{padding:9px 13px}
  .lb-tabs button{padding:12px 14px}   /* width-tightening lives in the ≤640 block — iPads keep full targets */
  .hx-btn{padding:10px 14px}
  .lnk{display:inline-block;padding:10px 6px}
  .topsearch{padding:13px 12px 13px 16px}
}

/* reduced motion is curated per component (the trade-flow model, D24) — the
   old * { .01ms } nuke silenced every intentional fade above, including this
   file's own overlay rules. */

/* ---- ≤640: dialogs rise as sheets — one overlay grammar on the phone (D38).
   Same recipe as .tf-sheet: full-bleed, 22px top corners, grab handle,
   safe-area floor. Desktop keeps the centered dialog. ---- */
@media (max-width:640px){
  .ovl{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;border-radius:var(--rad-4) var(--rad-4) 0 0;border-left:0;border-right:0;border-bottom:0;
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(24px)}
  .modal::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--hairline);margin:-8px auto 2px}
  .cmdk{align-items:flex-end;padding:0}
  .ck-shell{width:100%;max-width:none;border-radius:var(--rad-4) var(--rad-4) 0 0;border-left:0;border-right:0;border-bottom:0;
    transform:translateY(24px) scale(1);padding-bottom:env(safe-area-inset-bottom,0px)}
  .ck-list{max-height:44svh}
}

/* ---- phone app treatment (design/phone-app-feel): the margin card leads
   with equity · margin · health; free collateral + leverage wait behind a
   "More" that remembers (js/app/lobby.js renders it only ≤640px) ---- */
@media (max-width:640px){
  /* thumb-sized toggles and chips — padding grows, the type stays calm */
  .mgn-toggle{min-height:44px}
  /* collapsed details leave no dead band: the empty .xp swallows its own
     flex gap (the card's 12px row-gap counted on BOTH sides of a 0-height
     child) and gives it back as it opens */
  .mgn-card>.xp{transition:grid-template-rows var(--t3) var(--ease-emph),margin-top var(--t3) var(--ease-emph)}
  .mgn-card:not(.open)>.xp{margin-top:-12px}
  .seg button{min-height:44px;padding:5px 13px}
  /* the most destructive link on the page is a real target, not fine print */
  .lbt-head{flex-wrap:nowrap;align-items:center}
  .lbt-head .lnk{margin-left:auto;display:flex;align-items:center;min-height:44px;font-size:12.5px;white-space:nowrap}
  /* deposit status stacks under the amount instead of wrapping ragged */
  .dep-row .bd .st{display:block;margin-top:2px}
  .dep-note a{white-space:nowrap}
}

/* ---- phone density pass (design/phone-app-feel): question every line —
   the greeting keeps its voice, echoes and web furniture step off ---- */
@media (max-width:640px){
  /* the phone already tells you the date; the tick keeps the voice */
  .lb-head .sub span:not(.tick){display:none}
  /* "PORTFOLIO VALUE" said what the greeting + sticky mini-head already say —
     the number under your name IS the portfolio */
  .hero .bal-top{display:none}
  .hero .bal-num{margin-top:2px}
  /* the chart keeps its shape, gives back dead margin — and runs to the LEFT
     edge like the detail heroes (14px gutter + 2px card pad). The right keeps
     its small margin: the resting "now" dot needs air, and the asymmetry says
     time flows toward it. Date labels keep the text gutter (detail-page law) */
  .hero .chart-wrap{min-height:176px;margin-top:8px;margin-left:-16px}
  .bal-foot{margin-top:8px}
  /* rail cards: same rhythm, less shell */
  .mgn-card{padding:15px 18px 12px}
  .dep-card{padding:15px 18px 13px}
  /* the review-queue sentence was explainer furniture — the rows already say
     "In review · #142 in queue", and Add funds lives in the account drawer */
  .dep-foot{display:none}
  /* allocation key: one thumb row, not four wrapped lines — the Activity
     filter grammar; the bar above stays the picture */
  .alloc-key{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -14px 12px;padding:2px 14px;
    }
  .alloc-key.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .alloc-key.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  .alloc-key.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  .alloc-key::-webkit-scrollbar{display:none}
  .alloc-key .k{flex:0 0 auto;white-space:nowrap}
  /* holdings rows go one idea per line: the ticker/legs subtitle lives on
     the asset page — name + logo already identify */
  .hrow:not(.hh) .fn{display:none}
}

/* ============================================================================
   notch / home-screen app — content clears the status bar (env() is 0px in a
   plain browser tab); the fixed rail owns its own inset so its background
   flows under the notch like native chrome.
   ========================================================================== */
body{ padding-top:env(safe-area-inset-top, 0px); }
.side{ padding-top:calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
#toast{ bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
#tweaks{ bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }

/* see-through is a preference: frost goes solid when asked (BL05) */
@media (prefers-reduced-transparency:reduce){
  .dep-card{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .ovl,.cmdk{background:color-mix(in oklab,var(--ink) 42%,transparent)}
}