/* ══════════════════════════════════════════════════════════════════════
   QuantumEdge — the "big number first" look (owner-approved 2026-10-20).

   One font (Hanken Grotesk, tabular figures), almost no boxes, big numbers,
   tap-through rows. Every class starts with .u- so it never meets the old
   inline styles; a page is converted by switching it to these classes.

   Phone first; at ≥1024px the menu stays open on the left and pages use a
   two-column grid. Light/dark follow <html data-theme>, which applyTheme()
   sets with the old inline tokens, so both switch together.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --u-bg:#0a0e13; --u-raise:#121821; --u-raise2:#1a222c; --u-raise3:#222c38;
  --u-line:rgba(255,255,255,.07); --u-line2:rgba(255,255,255,.12);
  --u-t1:#f2f5f8; --u-t2:#c4cdd8; --u-t3:#8b95a1;
  --u-green:#2fe3a0; --u-green-t:rgba(47,227,160,.12); --u-red:#f0556b; --u-red-t:rgba(240,85,107,.12);
  --u-gold:#e6c64f; --u-gold-t:rgba(230,198,79,.13); --u-blue:#7fb2f5; --u-blue-t:rgba(127,178,245,.12);
  --u-pink:#e15cc6; --u-on-green:#06120d; --u-scrim:rgba(0,0,0,.55);
  --u-pop:0 18px 50px rgba(0,0,0,.5);
  --u-pad:20px; --u-side:264px; --u-r:14px; --u-r-sm:10px;
  --u-font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:root[data-theme="light"]{
  --u-bg:#ffffff; --u-raise:#f4f6f8; --u-raise2:#eaeef2; --u-raise3:#dfe5ea;
  --u-line:rgba(11,15,21,.08); --u-line2:rgba(11,15,21,.14);
  --u-t1:#0b0f15; --u-t2:#363f49; --u-t3:#6a747f;
  --u-green:#0a8a5c; --u-green-t:rgba(10,138,92,.10); --u-red:#c8324a; --u-red-t:rgba(200,50,74,.10);
  --u-gold:#8a6d12; --u-gold-t:rgba(156,125,24,.12); --u-blue:#2862c4; --u-blue-t:rgba(40,98,196,.10);
  --u-pink:#b3318f; --u-on-green:#ffffff; --u-scrim:rgba(11,15,21,.35);
  --u-pop:0 18px 50px rgba(19,25,32,.18);
}
@media (max-width:480px){ :root{ --u-pad:16px; } }

/* ── base: everything inside the app speaks one font ── */
.u-app, .u-app *{ font-family:var(--u-font) !important; }
.u-app{ background:var(--u-bg); color:var(--u-t1); font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased;
        font-variant-numeric:tabular-nums; }
.u-app *, .u-app *::before, .u-app *::after{ box-sizing:border-box; }
/* :where() keeps these at zero weight, so .u-btn, .u-cta … set their own colour and weight */
:where(.u-app) button, :where(.u-app) input, :where(.u-app) select, :where(.u-app) textarea{ font:inherit; color:inherit; }
:where(.u-app) a{ color:inherit; text-decoration:none; }
.u-app button{ cursor:pointer; }
.u-mute{ color:var(--u-t3); } .u-up{ color:var(--u-green); } .u-down{ color:var(--u-red); }
.u-hide{ display:none !important; }
.u-nowrap{ white-space:nowrap; }
.u-ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* ── shell: menu + page ── */
.u-shell{ min-height:100vh; }
.u-side{ position:fixed; top:0; bottom:0; left:0; width:min(304px,84vw); z-index:330; background:var(--u-raise);
         display:flex; flex-direction:column; padding:14px 12px 18px; overflow-y:auto;
         transform:translateX(-102%); transition:transform .26s cubic-bezier(.22,1,.36,1); }
.u-side.open{ transform:none; }
.u-scrim{ position:fixed; inset:0; background:var(--u-scrim); z-index:320; opacity:0; pointer-events:none; transition:opacity .26s; }
.u-scrim.open{ opacity:1; pointer-events:auto; }
.u-main{ min-width:0; }
.u-top{ position:sticky; top:0; z-index:200; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px;
        height:60px; padding:0 12px; background:var(--u-bg); }
.u-top .u-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.u-wrap{ max-width:1180px; margin:0 auto; padding:0 0 48px; }
@media (min-width:1024px){
  .u-side{ transform:none; width:var(--u-side); border-right:1px solid var(--u-line); transition:none; }
  .u-scrim{ display:none; }
  .u-main{ margin-left:var(--u-side); }
  .u-top{ grid-template-columns:minmax(0,1fr) auto; height:68px; padding:0 28px; border-bottom:1px solid var(--u-line); }
  .u-top .u-menu-btn{ display:none; }
  .u-top .u-switch{ justify-self:start; }
  .u-wrap{ padding:24px 28px 64px; }
}
/* two columns on a computer: the main story left, the algo's rows right */
/* on a phone the two columns become one list, in reading order (u-o1 … u-o6) */
.u-cols{ display:flex; flex-direction:column; }
.u-cols > div{ display:contents; }
.u-o1{ order:1; } .u-o2{ order:2; } .u-o3{ order:3; } .u-o4{ order:4; } .u-o5{ order:5; } .u-o6{ order:6; }
@media (min-width:1100px){
  .u-cols > div{ display:block; }
  .u-cols{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:36px; align-items:start; }
  .u-cols > .u-aside{ position:sticky; top:92px; }
}

/* ── the menu ── */
.u-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 18px; }
.u-mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(140deg,var(--u-green),var(--u-pink));
         display:flex; align-items:center; justify-content:center; flex:none; }
.u-mark i{ width:12px; height:12px; background:var(--u-raise); transform:rotate(45deg); border-radius:2px; display:block; }
.u-brand b{ font-size:18px; letter-spacing:-.01em; }
.u-grp{ font-size:13px; font-weight:600; color:var(--u-t3); padding:14px 12px 6px; }
.u-grp.u-ellip{ display:block; }
.u-nav{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:46px; padding:0 12px;
        border-radius:12px; font-size:16px; font-weight:600; color:var(--u-t2); cursor:pointer; border:0; background:none; width:100%; text-align:left; }
.u-nav:hover{ background:var(--u-raise2); }
.u-nav.on{ background:var(--u-green-t); color:var(--u-green); }
.u-nav svg{ width:20px; height:20px; }
.u-nav .u-badge{ font-size:12.5px; font-weight:600; color:var(--u-green); display:flex; align-items:center; gap:6px; }
.u-nav.sub{ min-height:42px; font-size:15px; color:var(--u-t3); }
.u-sep{ height:1px; background:var(--u-line2); margin:12px; }
.u-spacer{ flex:1; }

/* ── top bar parts ── */
.u-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:var(--u-t1); border:0; background:none; }
.u-icon:hover{ background:var(--u-raise); }
.u-switch{ justify-self:center; max-width:100%; display:flex; align-items:center; gap:6px; height:40px; padding:0 14px;
           border-radius:999px; background:var(--u-raise); border:0; font-weight:600; font-size:16px; min-width:0; color:var(--u-t1); }
.u-switch span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-switch svg{ flex:none; opacity:.6; }
.u-avatar{ width:36px; height:36px; border-radius:50%; background:var(--u-raise2); display:flex; align-items:center; justify-content:center;
           font-size:13px; font-weight:700; flex:none; border:0; color:var(--u-t1); }

/* ── hero: the big number ── */
.u-hero{ padding:6px var(--u-pad) 0; }
@media (min-width:1024px){ .u-hero{ padding:0; } }
.u-status{ display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:4px 12px; border-radius:999px;
           font-size:14px; font-weight:600; background:var(--u-green-t); color:var(--u-green); max-width:100%; }
.u-status.idle{ background:var(--u-raise); color:var(--u-t2); }
.u-status.off{ background:var(--u-raise); color:var(--u-t3); }
.u-status.warn{ background:var(--u-gold-t); color:var(--u-gold); }
.u-status.bad{ background:var(--u-red-t); color:var(--u-red); }
.u-status.info{ background:var(--u-blue-t); color:var(--u-blue); }
.u-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.u-dot.pulse{ animation:u-pulse 1.8s infinite; }
@keyframes u-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@media (prefers-reduced-motion:reduce){ .u-dot.pulse{ animation:none; } }
.u-big{ margin:14px 0 4px; font-size:44px; font-weight:700; letter-spacing:-.025em; line-height:1.05; }
@media (min-width:1024px){ .u-big{ font-size:52px; } }
.u-chg{ font-size:16px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.u-chg.up{ color:var(--u-green); } .u-chg.down{ color:var(--u-red); } .u-chg.flat{ color:var(--u-t2); }
.u-chg .when{ color:var(--u-t3); font-weight:500; }
.u-term{ margin-top:6px; font-size:13px; color:var(--u-t3); }

/* ── chart + range picker ── */
.u-chart{ position:relative; height:210px; margin:18px 0 0; }
@media (min-width:1024px){ .u-chart{ height:300px; } }
.u-chart svg{ display:block; width:100%; height:100%; overflow:visible; }
.u-ranges{ display:flex; justify-content:space-between; gap:4px; padding:10px var(--u-pad) 4px; }
@media (min-width:1024px){ .u-ranges{ justify-content:flex-start; padding:12px 0 4px; } }
.u-ranges button{ height:34px; min-width:44px; padding:0 12px; border-radius:999px; font-size:14px; font-weight:600; color:var(--u-t3); border:0; background:none; }
.u-ranges button:hover{ color:var(--u-t1); }
.u-ranges button.on{ background:var(--u-green-t); color:var(--u-green); }
/* on a phone the buttons share the row instead of overflowing it (8 ranges are 396px wide otherwise) */
@media (max-width:1023px){ .u-ranges{ gap:0; } .u-ranges button{ flex:1 1 0; min-width:0; padding:0 4px; height:44px; } }


/* ── sections and rows ── */
.u-rule{ height:1px; background:var(--u-line); margin:14px var(--u-pad) 0; }
@media (min-width:1024px){ .u-rule{ margin:16px 0 0; } }
.u-sec{ margin:28px var(--u-pad) 6px; font-size:20px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:baseline; gap:10px; }
.u-sec .u-link{ margin-left:auto; font-size:15px; font-weight:600; color:var(--u-green); cursor:pointer;
               padding:12px 0 12px 16px; margin-top:-12px; margin-bottom:-12px; }   /* a 44px tap target that looks like a word */
@media (min-width:1024px){ .u-sec{ margin:32px 0 6px; } .u-aside .u-sec:first-child{ margin-top:0; } }
.u-rows{ padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-rows{ padding:0; } }
.u-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:12px; min-height:64px; padding:10px 0;
        border-bottom:1px solid var(--u-line); width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; color:var(--u-t1); }
.u-row:last-child{ border-bottom:0; }
button.u-row, a.u-row{ cursor:pointer; }
.u-row .t{ font-size:16px; font-weight:600; }
.u-row .s{ font-size:13.5px; color:var(--u-t3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-row .v{ font-size:16px; font-weight:600; text-align:right; white-space:nowrap; }
.u-row .v.up{ color:var(--u-green); } .u-row .v.down{ color:var(--u-red); } .u-row .v.act{ color:var(--u-green); } .u-row .v.mute{ color:var(--u-t3); }
.u-row .v small{ display:block; font-size:13px; font-weight:500; color:var(--u-t3); }
.u-row .v small.u-up{ color:var(--u-green); } .u-row .v small.u-down{ color:var(--u-red); }
.u-row .chev{ color:var(--u-t3); width:16px; height:16px; }
.u-row.hold{ grid-template-columns:40px minmax(0,1fr) auto; }
.u-row.plain{ grid-template-columns:minmax(0,1fr) auto; }
.u-row.dim .t{ color:var(--u-t2); }
.u-logo{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
         font-size:11.5px; font-weight:700; background:var(--u-raise2); color:var(--u-t2); overflow:hidden; }

/* ── stats: Sharpe, drawdown, win rate … every number stays, easy to read ── */
.u-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:0 var(--u-pad); }
@media (min-width:700px){ .u-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .u-stats{ padding:0; grid-template-columns:repeat(4,minmax(0,1fr)); } .u-aside .u-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.u-stat{ padding:14px 0; border-bottom:1px solid var(--u-line); min-width:0; }
.u-stat:nth-child(odd){ padding-right:12px; }
.u-stat .k{ font-size:13.5px; color:var(--u-t3); font-weight:500; display:flex; align-items:center; gap:6px; }
.u-stat .v{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-stat .v.up{ color:var(--u-green); } .u-stat .v.down{ color:var(--u-red); }
.u-stat .h{ font-size:13px; color:var(--u-t3); margin-top:2px; }
/* the "?" tip: an 18px circle to look at, a 32px target to tap */
.u-tip{ position:relative; width:32px; height:32px; margin:-7px -7px -7px -5px; border:0; color:var(--u-t3); font-size:11px; font-weight:700;
        display:inline-flex; align-items:center; justify-content:center; cursor:help; background:none; padding:0; flex:none; }
.u-tip::before{ content:""; position:absolute; left:7px; top:7px; width:18px; height:18px; border-radius:50%; border:1px solid var(--u-line2); box-sizing:border-box; }

/* ── page heading + tabs ── */
.u-head{ padding:6px var(--u-pad) 0; }
@media (min-width:1024px){ .u-head{ padding:0; } }
.u-h1{ margin:8px 0 2px; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.u-sub{ font-size:15px; color:var(--u-t3); margin:0; }
.u-tabs{ display:flex; gap:6px; padding:12px var(--u-pad) 2px; overflow-x:auto; scrollbar-width:none; }
.u-tabs::-webkit-scrollbar{ display:none; }
@media (min-width:1024px){ .u-tabs{ padding:14px 0 2px; } }
.u-tabs button{ flex:none; height:38px; padding:0 16px; border-radius:999px; border:0; background:var(--u-raise); color:var(--u-t2); font-size:15px; font-weight:600; }
.u-tabs button.on{ background:var(--u-t1); color:var(--u-bg); }
.u-tabs button small{ font-size:12.5px; font-weight:500; opacity:.7; margin-left:6px; }
/* fingers: tabs are 44px tall on a phone (after the base rule, so it wins) */
@media (max-width:1023px){ .u-tabs button{ height:44px; } }

/* ── buttons ── */
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:12px;
        border:0; background:var(--u-raise2); color:var(--u-t1); font-size:15px; font-weight:600; white-space:nowrap; }
.u-btn:hover{ background:var(--u-raise3); }
.u-btn.primary{ background:var(--u-green); color:var(--u-on-green); font-weight:700; }
.u-btn.primary:hover{ filter:brightness(1.06); }
.u-btn.ghost{ background:none; color:var(--u-green); padding:0 8px; }
.u-btn.danger{ background:var(--u-red-t); color:var(--u-red); }
.u-btn.sm{ min-height:36px; padding:0 14px; font-size:14px; border-radius:10px; }
.u-btn.block{ width:100%; }
.u-btn:disabled{ opacity:.45; cursor:not-allowed; }
.u-cta{ display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; border-radius:14px; border:0;
        background:var(--u-green); color:var(--u-on-green); font-size:17px; font-weight:700; }
.u-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:16px var(--u-pad) 0; }
@media (min-width:1024px){ .u-actions{ padding:18px 0 0; } }
.u-app :focus-visible{ outline:2px solid var(--u-green); outline-offset:2px; }

/* ── one empty state: one sentence, one button ── */
.u-empty{ margin:18px var(--u-pad) 0; padding:22px; border-radius:var(--u-r); background:var(--u-raise); }
@media (min-width:1024px){ .u-empty{ margin:18px 0 0; } }
.u-empty .t{ font-size:17px; font-weight:700; }
.u-empty .s{ font-size:15px; color:var(--u-t2); margin-top:6px; line-height:1.5; }
.u-empty .u-btn{ margin-top:14px; }

/* ── notes: info / warning / problem, one line each ── */
.u-note{ display:flex; gap:10px; align-items:flex-start; margin:12px var(--u-pad) 0; padding:12px 14px; border-radius:12px;
         background:var(--u-raise); color:var(--u-t2); font-size:14.5px; line-height:1.45; }
@media (min-width:1024px){ .u-note{ margin:12px 0 0; } }
.u-note.warn{ background:var(--u-gold-t); color:var(--u-gold); }
.u-note.bad{ background:var(--u-red-t); color:var(--u-red); }
.u-note.ok{ background:var(--u-green-t); color:var(--u-green); }
.u-note b{ color:inherit; }

/* ── a quiet panel, only where things really belong together ── */
.u-panel{ margin:16px var(--u-pad) 0; padding:16px 18px; border-radius:var(--u-r); background:var(--u-raise); min-width:0; }
@media (min-width:1024px){ .u-panel{ margin:16px 0 0; } }
.u-grid2{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; }
@media (min-width:900px){ .u-grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.u-grid3{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:0 var(--u-pad); }
@media (min-width:900px){ .u-grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .u-grid3{ padding:0; } }

/* ── tables: the trade log and friends ── */
.u-tablewrap{ margin:8px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-tablewrap{ padding:0; } }
.u-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.u-table th{ text-align:left; font-size:13px; font-weight:600; color:var(--u-t3); padding:10px 12px 10px 0; border-bottom:1px solid var(--u-line2); white-space:nowrap; }
.u-table td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--u-line); white-space:nowrap; }
.u-table td.n, .u-table th.n{ text-align:right; }
.u-table tr:last-child td{ border-bottom:0; }

/* ── forms ── */
.u-field{ display:flex; flex-direction:column; gap:6px; margin-top:14px; font-size:14px; font-weight:600; color:var(--u-t2); }
.u-input, .u-select, .u-textarea{ width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--u-line2);
        background:var(--u-raise); color:var(--u-t1); font-size:16px; font-weight:500; }
.u-textarea{ min-height:96px; padding:12px 14px; resize:vertical; line-height:1.45; }
.u-input:focus, .u-select:focus, .u-textarea:focus{ outline:none; border-color:var(--u-green); }

/* ── sheets: modals on a computer, bottom sheets on a phone ── */
.u-sheet-scrim{ position:fixed; inset:0; z-index:900; background:var(--u-scrim); display:flex; align-items:flex-end; justify-content:center; }
.u-sheet{ width:100%; max-height:92vh; overflow-y:auto; background:var(--u-bg); border-radius:20px 20px 0 0; padding:8px 20px 28px; box-shadow:var(--u-pop); }
.u-sheet .grab{ width:40px; height:5px; border-radius:3px; background:var(--u-line2); margin:4px auto 10px; }
.u-sheet h2{ margin:8px 0 4px; font-size:22px; font-weight:700; letter-spacing:-.01em; }
@media (min-width:700px){ .u-sheet-scrim{ align-items:center; } .u-sheet{ width:min(560px,92vw); border-radius:20px; padding:22px 26px 26px; } .u-sheet .grab{ display:none; } }

.u-foot{ margin:28px var(--u-pad) 0; font-size:12.5px; color:var(--u-t3); line-height:1.5; }
@media (min-width:1024px){ .u-foot{ margin:32px 0 0; } }

/* ══ the Dashboard's frame (index.html shell()) ══════════════════════ */
body.qe-nav-open .u-side{ transform:none; }
body.qe-nav-open .u-scrim{ opacity:1; pointer-events:auto; }
#pageScroll{ min-width:0; }
/* a page not yet converted to the new look keeps a little air around it */
#pageScroll:not(:has(> .u-page)){ padding:16px var(--u-pad) 0; }
@media (min-width:1024px){ #pageScroll:not(:has(> .u-page)){ padding:0; } }
.u-page{ min-width:0; }

/* popovers: the algo picker, the account menu */
.u-popwrap{ position:relative; min-width:0; display:flex; justify-content:center; }
@media (min-width:1024px){ .u-popwrap{ justify-content:flex-start; } }
.u-pop{ position:absolute; top:calc(100% + 8px); z-index:960; min-width:280px; max-width:min(380px,calc(100vw - 24px));
        background:var(--u-raise); border:1px solid var(--u-line2); border-radius:16px; box-shadow:var(--u-pop); padding:8px; }
.u-pop.left{ left:0; } .u-pop.right{ right:0; } .u-pop.center{ left:50%; transform:translateX(-50%); }
@media (min-width:1024px){ .u-pop.center{ left:0; transform:none; } }
.u-pop .u-pop-h{ font-size:13px; font-weight:600; color:var(--u-t3); padding:8px 10px 4px; }
.u-opt{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 10px;
        border:0; background:none; border-radius:12px; text-align:left; color:var(--u-t1); cursor:pointer; }
.u-opt:hover{ background:var(--u-raise2); }
.u-opt.on{ background:var(--u-green-t); }
.u-opt .t{ font-size:15.5px; font-weight:600; } .u-opt.on .t{ color:var(--u-green); }
.u-opt .s{ font-size:13px; color:var(--u-t3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-opt .x{ font-size:13px; font-weight:600; color:var(--u-t3); white-space:nowrap; }
.u-opt .x.live{ color:var(--u-green); display:flex; align-items:center; gap:6px; }
.u-opt.act .t{ color:var(--u-green); }
.u-pop .u-sep{ margin:6px 4px; }
.u-who{ display:flex; align-items:center; gap:12px; padding:10px; min-width:0; }
.u-who .n{ font-weight:600; font-size:15px; } .u-who .e{ font-size:13px; color:var(--u-t3); }

/* on/off switch (light mode) */
.u-toggle{ width:40px; height:24px; border-radius:12px; background:var(--u-raise3); position:relative; flex:none; transition:background .15s; }
.u-toggle::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
.u-toggle.on{ background:var(--u-green); } .u-toggle.on::after{ left:19px; }

/* the source picker at the top of a page: which numbers you are looking at */
.u-source{ display:flex; gap:6px; padding:4px var(--u-pad) 2px; overflow-x:auto; scrollbar-width:none; }
.u-source::-webkit-scrollbar{ display:none; }
@media (min-width:1024px){ .u-source{ padding:4px 0 2px; } }
.u-source button{ flex:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:46px; padding:4px 14px;
                  border-radius:12px; border:0; background:var(--u-raise); color:var(--u-t2); text-align:left; cursor:pointer; }
.u-source button .t{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.u-source button small{ font-size:12.5px; font-weight:500; color:var(--u-t3); }
.u-source button.on{ background:var(--u-t1); color:var(--u-bg); }
.u-source button.on small{ color:var(--u-bg); opacity:.7; }
/* on a phone the three choices share the row (and may wrap their words) rather than run off the edge */
@media (max-width:1023px){ .u-source button{ flex:1 1 0; min-width:0; } .u-source button .t{ white-space:normal; line-height:1.15; } }

/* workspace switcher (investor seats) */
.u-ws{ margin:0 4px 6px; }
.u-ws .u-opt{ border:1px solid var(--u-line2); }
.u-ws.viewing .u-opt{ border-color:var(--u-gold); background:var(--u-gold-t); }

/* the chart's scrub line and label (U.chart) */
.u-chart .u-scrub{ position:absolute; top:0; bottom:0; width:1px; background:var(--u-t3); opacity:0; pointer-events:none; }
.u-chart .u-scrub-l{ position:absolute; top:-2px; transform:translateX(-50%); padding:3px 8px; border-radius:8px; background:var(--u-raise2);
                     font-size:12.5px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; }
.u-chart.scrub .u-scrub, .u-chart.scrub .u-scrub-l{ opacity:1; }
.u-chart .u-end{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:currentColor;
                 box-shadow:0 0 0 6px color-mix(in srgb, currentColor 18%, transparent); pointer-events:none; }
.u-chart .u-chart-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--u-t3); font-size:14.5px; }