/* Instinct design system -- tokens and shared components for /flow, /signals and /analytics.
   shell.js sets <html data-theme="day|night|apple"> before the page draws; pages keep only their own
   layout in their <style> and draw every colour, face and surface from the tokens here.

   Colour has one meaning each, in every palette:
     --up / --down        what the MARKET did (moves, sparklines, returns, right / wrong)
     --pl-up / --pl-down  YOUR P&L (.pl.up / .pl.down) -- red and green even when Neutral turns --up / --down off
     --live               the live dot: green in every tone
     --buy / --sell       YOUR CALLS (the pad, lean meter, marks, launch flash, call labels)
     --thin / --absorbed  readings, not directions (also rates: --tight / --loose)
     chrome / --accent    the brand material and "selected"
   Motion is ambient only (ground drift, light sweep, chrome glint), never on numbers, and off under
   prefers-reduced-motion. */

/* ---------------------------------------------------------------- tokens: shared by Day and Night */
:root, [data-theme="day"], [data-theme="night"] {
  --font-voice:"Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-num:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-label:var(--font-num);
  --title-size:46px; --title-style:italic; --title-weight:300; --title-track:0;
  --h2-size:27px; --h2-style:italic; --h2-weight:300;
  --sym-weight:600; --sym-size:21px; --name-style:italic; --name-size:17px;
  --body-size:18px; --small-size:16px;
  --label-size:10.5px; --label-case:uppercase; --label-track:.1em; --label-weight:400;
  --num-weight:400;
  --radius-card:20px; --radius-pill:999px; --radius-badge:999px;
  --tabbar-h:62px;
  --buy-deep:#9a6f08; --sell-deep:#a8400f;
}
[data-theme="night"] {
  color-scheme:dark;
  --bg:#0a0807; --text:#f4efe7; --dim:#a89f94; --dim2:#6f675e;
  --surface:rgba(255,242,228,.045); --surface-2:rgba(255,242,228,.085);
  --hair:rgba(255,236,214,.11); --hair-2:rgba(255,236,214,.2);
  --sheet-bg:linear-gradient(180deg, #221813, #0e0b09); --scrim:rgba(5,3,2,.6);
  --edge:inset 0 1px 0 rgba(255,245,230,.06);
  --up:#3fcf86; --down:#ff5c6c; --up-rgb:63,207,134; --down-rgb:255,92,108; --up-soft:#9fe3bf; --down-soft:#ffa6b0;
  --pl-up:#3fcf86; --pl-down:#ff5c6c; --live:#3fcf86; --live-rgb:63,207,134;
  --pill-up:linear-gradient(180deg, #5bdc9a, #2fb872); --pill-down:linear-gradient(180deg, #ff7886, #e9465a);
  --pill-up-ink:#07140c; --pill-down-ink:#1d0508; --pill-flat:rgba(255,242,228,.1);
  --buy:#f4c95d; --sell:#ee6b2d; --buy-rgb:244,201,93; --sell-rgb:238,107,45;
  --thin:#c9a7ff; --absorbed:#7fd4e0; --tight:#c9a7ff; --loose:#7fd4e0; --star:#dfe1e6;
  --accent:#dfe1e6; --select:rgba(223,225,230,.75);
  --chrome:linear-gradient(115deg, #ffffff 0%, #d7d9df 14%, #9ea3ad 30%, #f3f4f7 44%, #ffffff 48%, #b3b7c0 60%, #efe6cf 76%, #c9ccd3 90%, #ffffff 100%);
  --chrome-ink:#16110e;
  --title-fill:var(--chrome);
  --spark-base:#5a5048; --vol-bar:rgba(223,225,230,.2); --vol-bar-hi:rgba(223,225,230,.32);
  --pad-felt:radial-gradient(120% 140% at 50% 0%, rgba(255,242,228,.06), rgba(0,0,0,.25)), #0f0c0a;
  --pad-shade:inset 0 0 0 1px var(--hair), inset 0 12px 34px rgba(0,0,0,.6);
  --tile-face:var(--chrome); --tile-ink:#16110e; --tile-lip:#8b8f98; --tile-drop:rgba(0,0,0,.6);
}
[data-theme="day"] {
  color-scheme:light;
  --bg:#eceae6; --text:#1d1915; --dim:#6b645b; --dim2:#a59d93;
  --surface:rgba(255,255,255,.52); --surface-2:rgba(255,255,255,.8);
  --hair:rgba(45,35,25,.12); --hair-2:rgba(45,35,25,.22);
  --sheet-bg:linear-gradient(180deg, #fcfbf9, #eeede9); --scrim:rgba(70,60,50,.25);
  --edge:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 24px rgba(60,45,30,.08);
  --up:#17955a; --down:#d12f4a; --up-rgb:23,149,90; --down-rgb:209,47,74; --up-soft:#62c08c; --down-soft:#ea7f8f;
  --pl-up:#17955a; --pl-down:#d12f4a; --live:#17955a; --live-rgb:23,149,90;
  --pill-up:linear-gradient(180deg, #3cc277, #1e9a55); --pill-down:linear-gradient(180deg, #ee5d73, #cf2f48);
  --pill-up-ink:#fff; --pill-down-ink:#fff; --pill-flat:rgba(45,35,25,.08);
  --buy:#b88308; --sell:#cf4e12; --buy-rgb:200,145,20; --sell-rgb:214,86,26;
  --thin:#8a5cd6; --absorbed:#1f8fa0; --tight:#8a5cd6; --loose:#1f8fa0; --star:#3d4048;
  --accent:#3d4048; --select:#3d4048;
  --chrome:linear-gradient(115deg, #ffffff 0%, #e4e5e9 12%, #a9adb6 26%, #fafafa 38%, #ffffff 42%, #bfc2ca 54%, #f1e6c8 68%, #d3d5db 80%, #ffffff 90%, #c4c7ce 100%);
  --chrome-ink:#1d1915;
  --title-fill:linear-gradient(110deg, #1f2025 0%, #5d616b 18%, #2a2c32 32%, #b89458 44%, #fff4dc 48%, #8a6a32 52%, #26272c 66%, #6a6e78 82%, #1f2025 100%);
  --spark-base:#b3aca2; --vol-bar:rgba(45,35,25,.1); --vol-bar-hi:rgba(45,35,25,.2);
  --pad-felt:linear-gradient(180deg, #e2e1dd, #f1f0ec);
  --pad-shade:inset 0 0 0 1px var(--hair), inset 0 8px 22px rgba(60,45,30,.14);
  --tile-face:var(--chrome); --tile-ink:#1d1915; --tile-lip:#9a9ea7; --tile-drop:rgba(60,45,30,.28);
}
/* Apple Stocks: the original look on the new components. System face, iOS colours, no material. */
[data-theme="apple"] {
  color-scheme:dark;
  --font-voice:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  --font-num:var(--font-voice); --font-label:var(--font-voice);
  --title-size:34px; --title-style:normal; --title-weight:700; --title-track:.01em;
  --h2-size:20px; --h2-style:normal; --h2-weight:700;
  --sym-weight:600; --sym-size:17px; --name-style:normal; --name-size:14px;
  --body-size:15px; --small-size:13px;
  --label-size:12px; --label-case:none; --label-track:.01em; --label-weight:600;
  --num-weight:600;
  --radius-card:12px; --radius-pill:6px; --radius-badge:6px; --tabbar-h:56px;
  --bg:#000; --text:#fff; --dim:#8e8e93; --dim2:#636366;
  --surface:#1c1c1e; --surface-2:#2c2c2e; --hair:#2c2c2e; --hair-2:#3a3a3c;
  --sheet-bg:#1c1c1e; --scrim:rgba(0,0,0,.55); --edge:none;
  --up:#30d158; --down:#ff453a; --up-rgb:48,209,88; --down-rgb:255,69,58; --up-soft:#2ec4a6; --down-soft:#ff8f70;
  --pl-up:#30d158; --pl-down:#ff453a; --live:#30d158; --live-rgb:48,209,88;
  --pill-up:#30d158; --pill-down:#ff453a; --pill-up-ink:#fff; --pill-down-ink:#fff; --pill-flat:#636366;
  --buy:#30d158; --sell:#ff453a; --buy-rgb:48,209,88; --sell-rgb:255,69,58;
  --thin:#ff453a; --absorbed:#30d158; --tight:#ff9f0a; --loose:#0a84ff; --star:#ffd60a;
  --buy-deep:#1f9e45; --sell-deep:#d93a2e;
  --accent:#0a84ff; --select:#0a84ff;
  --chrome:#636366; --chrome-ink:#fff; --title-fill:none;
  --spark-base:#636366; --vol-bar:rgba(142,142,147,.28); --vol-bar-hi:rgba(174,174,178,.5);
  --pad-felt:#1a1a1c; --pad-shade:inset 0 0 0 1px #2c2c2e, inset 0 10px 30px rgba(0,0,0,.5);
  --tile-face:linear-gradient(180deg, #fbf8ee 0%, #efe8d4 100%); --tile-ink:#1c1c1e; --tile-lip:#c9bf9f; --tile-drop:rgba(0,0,0,.55);
}

/* Neutral up / down (Settings > Up and down; shell.js sets <html data-tone="neutral">): no red or green anywhere.
   Dark themes: up white, down black, on a mid grey ground. Day: up grey, down black, on white. Buy / sell keep their
   gold and orange (Apple's green and red become those too), and the ambient glow is off. Two things keep their
   colour: the live dot (--live, green) and your P&L (--pl-up / --pl-down, red and green). */
[data-tone="neutral"][data-theme="night"], [data-tone="neutral"][data-theme="apple"] {
  color-scheme:dark;
  --pl-up:#8af5b5; --pl-down:#ffadb5;   /* your P&L stays red / green, lightened to read on the grey */
  --bg:#707073; --text:#ffffff; --dim:#e2e2e4; --dim2:#b9b9bc;
  --surface:rgba(255,255,255,.09); --surface-2:rgba(255,255,255,.16);
  --hair:rgba(255,255,255,.2); --hair-2:rgba(255,255,255,.34);
  --sheet-bg:#7b7b7e; --scrim:rgba(0,0,0,.3); --edge:inset 0 1px 0 rgba(255,255,255,.12);
  --up:#ffffff; --down:#000000; --up-rgb:255,255,255; --down-rgb:0,0,0; --up-soft:#ececee; --down-soft:#2c2c2e;
  --pill-up:#ffffff; --pill-down:#000000; --pill-up-ink:#000000; --pill-down-ink:#ffffff; --pill-flat:rgba(255,255,255,.18);
  --buy:#f4c95d; --sell:#ee6b2d; --buy-rgb:244,201,93; --sell-rgb:238,107,45; --buy-deep:#9a6f08; --sell-deep:#a8400f;
  --thin:#c9a7ff; --absorbed:#7fd4e0;
  --spark-base:#a2a2a6; --vol-bar:rgba(255,255,255,.22); --vol-bar-hi:rgba(255,255,255,.4);
  --pad-felt:#66666a; --pad-shade:inset 0 0 0 1px var(--hair), inset 0 10px 28px rgba(0,0,0,.25);
}
[data-tone="neutral"][data-theme="day"] {
  --bg:#ffffff; --surface:#f6f6f7; --surface-2:#ededef; --hair:rgba(0,0,0,.1); --hair-2:rgba(0,0,0,.2);
  --sheet-bg:#ffffff; --edge:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  /* up sits well clear of black: a pale pill with dark ink against a solid black one, a light line against a black one */
  --up:#a1a1a6; --down:#000000; --up-rgb:161,161,166; --down-rgb:0,0,0; --up-soft:#c7c7cc; --down-soft:#3a3a3c;
  --pill-up:#dcdce0; --pill-down:#000000; --pill-up-ink:#1c1c1e; --pill-down-ink:#ffffff; --pill-flat:rgba(0,0,0,.06);
  --spark-base:#c4c4c8; --pad-felt:#f2f2f3; --pad-shade:inset 0 0 0 1px var(--hair), inset 0 8px 20px rgba(0,0,0,.06);
}
[data-tone="neutral"] body::before, [data-tone="neutral"] body::after { display:none; }
[data-tone="neutral"][data-theme="apple"] .pill.up { color:var(--pill-up-ink); }   /* Apple's pills are white-on-colour */
[data-tone="neutral"] body { background:var(--bg); }

/* ---------------------------------------------------------------- page changes
   Moving between tabs is a crossfade, not a blank page: the ground, app bar and tab bar hold still
   while the content swaps (cross-document view transitions; browsers without them just navigate). */
@view-transition { navigation:auto; }
.appbar { view-transition-name:appbar; }
.tabbar { view-transition-name:tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.18s; }
@media (prefers-reduced-motion:reduce) { @view-transition { navigation:none; } }

/* ---------------------------------------------------------------- base */
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { background:transparent; color:var(--text); font-family:var(--font-voice); font-size:var(--body-size);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums lining-nums; min-height:100vh;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
a { color:var(--accent); text-decoration:none; }
.wrap { max-width:720px; margin:0 auto; padding:10px 16px 32px; }
/* figures: mono, fixed-width digits */
.num, .px, .v1, .v2, .pill, .badge, .cell, .lvl, .big, .chg, .mark, .tdone, kbd, .res, .time, .stat-tile .v, .stat-tile .s, .dt,
.status, .sub, .plab, table.segs, .stat, .wk-pct, .wk-close, .wk-vol, .wk-avg, .wk-title, .chgnote {
  font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
/* labels and tabs: small mono caps */
.label, .colh, .seg button, .tabbar a, h3, .stat-tile .k, .badge, .phint, .plbl, .lean-lbl, .side, .th-lbl, .wk-day, .wk-legend,
.bk-top a, .plab, .status, .sub, .appbar .actions a, button {
  font-family:var(--font-label); text-transform:var(--label-case); letter-spacing:var(--label-track); font-weight:var(--label-weight);
}
.up { color:var(--up); } .down { color:var(--down); }
.pl.up { color:var(--pl-up); } .pl.down { color:var(--pl-down); }   /* your P&L: red / green in every tone */
.buy { color:var(--buy); } .sell { color:var(--sell); }
.err { color:var(--down); font-family:var(--font-num); font-size:12px; margin-top:8px; }
.err:empty { display:none; }

/* ---------------------------------------------------------------- ambient ground */
body::before, body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; }
[data-theme="night"] body::before {
  background:
    radial-gradient(70% 45% at 20% -5%, rgba(238,107,45,.22) 0%, transparent 60%),
    radial-gradient(60% 40% at 90% 0%, rgba(244,201,93,.12) 0%, transparent 60%),
    radial-gradient(80% 50% at 50% 115%, rgba(201,167,255,.06) 0%, transparent 60%),
    linear-gradient(125deg, #0a0807 0%, #140c09 30%, #0b0908 55%, #120a0b 80%, #0a0807 100%);
  background-size:100% 100%, 100% 100%, 100% 100%, 300% 300%;
  animation:ground 30s ease-in-out infinite;
}
[data-theme="day"] body::before {
  background:
    radial-gradient(60% 40% at 80% 10%, rgba(244,201,93,.30) 0%, transparent 60%),
    linear-gradient(125deg, #f7f6f3 0%, #e4e6ec 14%, #f4e8f1 26%, #f3e6c9 38%, #e2eef0 50%,
                    #ebe2f3 62%, #f6f2ea 74%, #dfe2e8 86%, #f7f1e4 100%);
  background-size:100% 100%, 400% 400%;
  animation:ground 22s ease-in-out infinite;
}
[data-theme="day"] body::after {
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,0) 42%, rgba(255,255,255,.85) 49%,
                             rgba(255,250,235,.55) 52%, rgba(255,255,255,0) 58%, transparent 62%);
  background-size:300% 100%; background-repeat:no-repeat; mix-blend-mode:soft-light;
  animation:sweep 9s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes ground { 0%, 100% { background-position:0 0, 0 0, 0 0, 0% 30%; } 50% { background-position:0 0, 0 0, 0 0, 100% 70%; } }
[data-theme="day"] body::before { animation-name:ground-day; }
@keyframes ground-day { 0%, 100% { background-position:0 0, 0% 30%; } 50% { background-position:0 0, 100% 70%; } }
@keyframes sweep { 0%, 55% { background-position:130% 0; } 100% { background-position:-30% 0; } }
@keyframes glint { 0%, 100% { background-position:100% 0; } 50% { background-position:0% 0; } }

/* ---------------------------------------------------------------- app bar, title, status */
.appbar { display:flex; align-items:center; gap:10px; min-height:36px; }
.appbar .lead { flex:1; min-width:0; display:flex; align-items:center; }
.brand { display:inline-flex; align-items:center; gap:7px; color:var(--text); font-family:var(--font-voice);
  font-style:var(--title-style); font-weight:400; font-size:19px; letter-spacing:.01em; }
[data-theme="apple"] .brand { font-size:15px; font-weight:600; }
.brand svg { width:14px; height:21px; display:block; }
.brand .star-fill { fill:url(#chrome-grad); }
[data-theme="day"] .brand .star-fill { fill:url(#graphite-grad); }
[data-theme="apple"] .brand .star-fill { fill:var(--text); }
.appbar .actions { display:flex; align-items:center; gap:10px; margin-left:auto; font-size:11px; }
.appbar .actions a, .appbar .actions button { color:var(--accent); background:none; border:0; cursor:pointer; height:auto; padding:0; }
.gear svg { width:21px; height:21px; display:block; }
/* hare / scope / vs-QQQ: lit = the accent (chrome) capsule, off = a hairline outline */
.iswitch { width:44px; height:28px; padding:0; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center;
  background:none; color:var(--dim2); box-shadow:inset 0 0 0 1px var(--hair); }
.iswitch svg { width:17px; height:17px; display:block; }
.iswitch.lit { background:var(--chrome); background-size:250% 100%; color:var(--chrome-ink); box-shadow:0 1px 8px rgba(var(--buy-rgb),.18); }
.appbar .actions .iswitch { color:var(--dim2); } .appbar .actions .iswitch.lit { color:var(--chrome-ink); }
.appbar .actions .playbtn { width:28px; height:28px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--chrome); background-size:250% 100%; color:var(--chrome-ink); box-shadow:0 1px 8px rgba(var(--buy-rgb),.18); }
.playbtn svg { width:13px; height:13px; display:block; }
.title { font-family:var(--font-voice); font-size:var(--title-size); font-style:var(--title-style); font-weight:var(--title-weight);
  letter-spacing:var(--title-track); line-height:1.05; margin-top:4px; }
[data-theme="day"] .title, [data-theme="night"] .title {
  background-image:var(--title-fill); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:glint 9s ease-in-out infinite; padding-right:.08em;
}
.status, .sub { color:var(--dim); font-size:11px; margin-top:6px; min-height:16px; line-height:1.4; }
[data-theme="apple"] :is(.status, .sub) { font-size:13px; font-weight:400; }
.status .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; background:var(--dim2); }
.status .dot.live { background:var(--live); box-shadow:0 0 8px rgba(var(--live-rgb),.8); }

/* ---------------------------------------------------------------- segmented control */
.seg { display:flex; background:var(--surface); border-radius:var(--radius-pill); padding:3px; margin:14px 0 4px;
  box-shadow:inset 0 0 0 1px var(--hair); }
[data-theme="apple"] .seg { border-radius:9px; padding:2px; box-shadow:none; }
.seg button { flex:1; background:none; border:0; color:var(--dim); font-size:11.5px; padding:8px 0; border-radius:var(--radius-pill);
  cursor:pointer; height:auto; }
[data-theme="apple"] .seg button { color:var(--text); font-size:13px; padding:6px 0; border-radius:7px; }
.seg button.on { color:var(--chrome-ink); background:var(--chrome); background-size:250% 100%;
  box-shadow:0 1px 10px rgba(var(--buy-rgb),.16), inset 0 1px 0 rgba(255,255,255,.7); animation:glint 7s ease-in-out infinite; }
[data-theme="apple"] .seg button.on { color:#fff; background:#636366; box-shadow:none; animation:none; }
.seg .live { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--live); margin-left:7px; vertical-align:1px; }

/* ---------------------------------------------------------------- sections and rows */
.section { margin-top:24px; }
.section h2, .hdr h2, .dayhdr h2 { font-family:var(--font-voice); font-size:var(--h2-size); font-style:var(--h2-style);
  font-weight:var(--h2-weight); letter-spacing:.005em; line-height:1.15; }
.section .hdr, .tbl .row.hd { padding-bottom:6px; border-bottom:1px solid var(--hair); }
.lede { color:var(--dim); font-size:var(--body-size); line-height:1.4; margin-top:3px; }
[data-theme="apple"] .lede { font-size:13px; }
.colh { color:var(--dim); font-size:var(--label-size); text-align:right; }
.row { border-bottom:1px solid var(--hair); }
.sym { font-family:var(--font-voice); font-weight:var(--sym-weight); font-size:var(--sym-size); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.name { color:var(--dim); font-family:var(--font-voice); font-style:var(--name-style); font-size:var(--name-size); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.sel, .row.cur { background:var(--surface); box-shadow:inset 2px 0 0 var(--select); }
.row.lifted { background:var(--surface); opacity:.7; cursor:grabbing; }
.row.droptarget { box-shadow:inset 0 2px 0 var(--select); }
.note, .foot, .about { color:var(--dim); font-size:var(--small-size); line-height:1.5; }
.note { margin-top:8px; }
.foot { margin-top:28px; } .foot p + p { margin-top:8px; }
[data-theme="apple"] .note, [data-theme="apple"] .foot, [data-theme="apple"] .about { font-size:12px; }
.foot b, .note b { color:var(--text); font-weight:600; }

/* ---------------------------------------------------------------- pill, badge, mark */
.pill { display:inline-block; min-width:80px; padding:4px 10px; border-radius:var(--radius-pill); font-size:14px; font-weight:500;
  text-align:right; color:var(--text); background:var(--pill-flat); }
[data-theme="apple"] .pill { min-width:68px; padding:3px 7px; font-size:13.5px; font-weight:600; color:#fff; }
.pill.up { background:var(--pill-up); color:var(--pill-up-ink); box-shadow:0 2px 10px rgba(var(--up-rgb),.18); }
.pill.down { background:var(--pill-down); color:var(--pill-down-ink); box-shadow:0 2px 10px rgba(var(--down-rgb),.18); }
.pill.tight { background:var(--tight); color:var(--chrome-ink); box-shadow:none; }
.pill.loose { background:var(--loose); color:var(--chrome-ink); box-shadow:none; }
[data-theme="apple"] .pill.tight, [data-theme="apple"] .pill.loose { color:#fff; }
.badge { display:inline-block; font-size:10.5px; border-radius:var(--radius-badge); padding:4px 9px; text-align:center; }
.badge.correct { background:rgba(var(--up-rgb),.15); color:var(--up); }
.badge.wrong { background:rgba(var(--down-rgb),.15); color:var(--down); }
.badge.flat, .badge.pending, .badge.open { background:var(--surface-2); color:var(--dim); }
.sig-Thin { color:var(--thin); } .sig-Absorbed { color:var(--absorbed); }
.sig-Neutral, .sig-— { color:var(--dim); }
.mark { font-size:11px; font-weight:500; margin-left:7px; vertical-align:2px; }
.mark.buy { color:var(--buy); } .mark.sell { color:var(--sell); }

/* ---------------------------------------------------------------- cards and stat tiles */
.card, .stat-tile { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-card); box-shadow:var(--edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); }
[data-theme="apple"] .card, [data-theme="apple"] .stat-tile { border:0; }
.card { padding:16px 18px; margin-top:16px; }
.stat-tile { padding:12px 14px; }
.stat-tile .k { color:var(--dim); font-size:var(--label-size); }
.stat-tile .v { font-size:24px; font-weight:300; margin-top:6px; letter-spacing:-.01em; }
[data-theme="apple"] .stat-tile .v { font-size:22px; font-weight:700; }
.stat-tile .s { color:var(--dim); font-size:11px; margin-top:3px; }
.verdict { font-family:var(--font-voice); font-style:var(--title-style); font-weight:var(--title-weight); font-size:32px; line-height:1.15; }
[data-theme="apple"] .verdict { font-size:20px; }
.verdict.yes { color:var(--up); }
.vline { color:var(--dim); font-size:var(--body-size); line-height:1.45; margin-top:6px; }
[data-theme="apple"] .vline { font-size:14px; }
.vline b { font-family:var(--font-num); font-weight:500; font-size:.85em; }
.prog { height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; margin-top:14px; }
.prog i { display:block; height:100%; border-radius:3px; background:var(--chrome); background-size:250% 100%; animation:glint 7s ease-in-out infinite; }
[data-theme="apple"] .prog i { background:var(--accent); animation:none; }
.plab { display:flex; justify-content:space-between; color:var(--dim); font-size:10.5px; margin-top:6px; }

/* ---------------------------------------------------------------- buttons */
button { font-size:11px; font-weight:500; border:0; border-radius:var(--radius-pill); height:32px; padding:0 16px; cursor:pointer; }
[data-theme="apple"] button { font-size:14px; font-weight:600; border-radius:8px; padding:0 14px; }
button.ghost { background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--hair); }
button.danger { background:var(--down); color:var(--pill-down-ink); }
button.danger:disabled { background:var(--surface-2); color:var(--dim2); cursor:default; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }

/* ---------------------------------------------------------------- sheet (detail + settings) */
.scrim { position:fixed; inset:0; background:var(--scrim); display:none; align-items:flex-end; justify-content:center; z-index:30; }
.scrim.show { display:flex; }
.sheet { background:var(--sheet-bg); color:var(--text); width:100%; max-width:720px; border-radius:22px 22px 0 0;
  padding:10px 18px calc(28px + env(safe-area-inset-bottom)); max-height:92vh; overflow-y:auto;
  border:1px solid var(--hair); border-bottom:0; box-shadow:0 -20px 60px rgba(0,0,0,.35); }
[data-theme="apple"] .sheet { border-radius:14px 14px 0 0; border:0; padding:10px 16px 28px; }
@media (min-width:760px) { .scrim { align-items:center; } .sheet { border-radius:22px; border-bottom:1px solid var(--hair); } }
@media (prefers-reduced-motion:no-preference) { .scrim.show .sheet { animation:rise .22s ease-out; } }
@keyframes rise { from { transform:translateY(40px); opacity:0; } }
.grab { width:36px; height:5px; border-radius:3px; background:var(--hair-2); margin:0 auto 12px; }
.close { background:var(--surface-2); color:var(--text); border:0; width:32px; height:32px; padding:0; border-radius:50%; font-size:15px;
  cursor:pointer; box-shadow:inset 0 0 0 1px var(--hair); text-transform:none; letter-spacing:0; }
.sheet-hd { display:flex; justify-content:space-between; align-items:flex-start; }
h3 { font-size:var(--label-size); color:var(--dim); margin:20px 0 6px; }

/* settings */
.set-opt { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:none; color:inherit; height:auto;
  padding:12px 2px; border-bottom:1px solid var(--hair); border-radius:0; text-transform:none; letter-spacing:0; font-family:var(--font-voice); }
.set-opt .txt { flex:1; display:flex; flex-direction:column; gap:2px; }
.set-opt b { font-size:21px; font-weight:500; }
.set-opt small { color:var(--dim); font-size:16px; font-style:italic; font-weight:400; }
[data-theme="apple"] .set-opt b { font-size:17px; font-weight:600; } [data-theme="apple"] .set-opt small { font-size:13px; font-style:normal; }
.set-opt .tick { color:var(--accent); width:14px; font-size:12px; }
.swatch { width:44px; height:44px; border-radius:12px; flex:none; box-shadow:inset 0 0 0 1px var(--hair-2); }
.swatch.auto { background:linear-gradient(135deg, #f3efe6 0 50%, #120c09 50% 100%); }
.swatch.day { background:radial-gradient(circle at 70% 30%, rgba(244,201,93,.55) 0 10%, transparent 35%),
  linear-gradient(150deg, #ffffff 0%, #dcdde2 40%, #f3e8f1 60%, #b9bcc4 100%); }
.swatch.night { background:radial-gradient(circle at 30% 25%, rgba(244,201,93,.7) 0 8%, transparent 30%),
  linear-gradient(160deg, #ee6b2d 0%, #3a1c10 50%, #0a0807 100%); }
.swatch.tone-color { background:linear-gradient(135deg, #3fcf86 0 50%, #ff5c6c 50% 100%); }
.swatch.tone-neutral { background:linear-gradient(135deg, #ffffff 0 50%, #000000 50% 100%); box-shadow:inset 0 0 0 1px var(--hair-2), 0 0 0 3px #8e8e93; }
.swatch.apple { background:conic-gradient(from 200deg, #30d158 0 25%, #000 0 50%, #ff453a 0 75%, #1c1c1e 0); }

/* settings: paper status + options trading */
.ot-row { display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--hair); }
.ot-lbl { flex:1; font-family:var(--font-voice); font-size:19px; }
[data-theme="apple"] .ot-lbl { font-size:16px; }
.ot-val { font-family:var(--font-num); font-size:14px; font-variant-numeric:tabular-nums; }
.ot-val.dim { color:var(--dim); font-size:12px; } .ot-val.acc { color:var(--accent); font-size:12px; }
.ot-link { color:inherit; text-decoration:none; }
.ot-status { display:inline-flex; align-items:center; font-family:var(--font-num); font-size:12px; color:var(--dim); }
.ot-status .dot { width:7px; height:7px; border-radius:50%; margin-right:8px; background:var(--dim2); }
.ot-status.live .dot { background:var(--up); box-shadow:0 0 8px rgba(var(--up-rgb),.8); }
.ot-status.bad { color:var(--down); } .ot-status.bad .dot { background:var(--down); }
.stepper { display:inline-flex; border-radius:var(--radius-pill); background:var(--surface); box-shadow:inset 0 0 0 1px var(--hair); overflow:hidden; }
.stepper:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.stepper button { width:36px; height:30px; padding:0; background:none; border:0; color:var(--text); font-size:17px; cursor:pointer; border-radius:0;
  text-transform:none; letter-spacing:0; }
.stepper button + button { border-left:1px solid var(--hair); }
.stepper button:disabled { color:var(--dim2); cursor:default; }
.set-seg { margin:0; width:auto; }
.set-seg button { padding:6px 12px; white-space:nowrap; }
.ot-note { color:var(--dim); font-family:var(--font-num); font-size:11.5px; padding:6px 2px 4px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.ot-reset { background:none; border:0; color:var(--accent); font-size:10px; padding:0; height:auto; cursor:pointer; white-space:nowrap; }
.ot-err { color:var(--down); font-family:var(--font-num); font-size:11.5px; padding-top:6px; }

/* settings: custom hotkeys (hotkeys.js draws it) */
.hk-top { display:flex; justify-content:space-between; align-items:center; margin:4px 0 2px; }
.hk-back, .hk-reset-all { background:none; border:0; color:var(--accent); font-family:var(--font-num); font-size:12px; padding:4px 0; height:auto;
  cursor:pointer; text-transform:none; letter-spacing:0; }
.hk-note { font-family:var(--font-num); font-size:11.5px; color:var(--text); background:var(--surface); border-radius:10px; padding:8px 10px; margin:6px 0; }
.hk-note[hidden] { display:none; }
.hk-row { display:flex; align-items:center; gap:10px; padding:5px 2px; border-bottom:1px solid var(--hair); min-height:38px; }
.hk-lbl { flex:1; font-family:var(--font-voice); font-size:17px; }
[data-theme="apple"] .hk-lbl { font-size:14px; }
.hk-slots { display:flex; gap:6px; flex:none; }
.hk-cell { position:relative; width:92px; }
.hk-slot { width:100%; height:28px; padding:0 8px; border-radius:8px; background:var(--surface); color:var(--text); border:0; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hair-2); font-family:var(--font-num); font-size:12.5px; text-transform:none; letter-spacing:0; }
.hk-slot.empty { color:var(--dim2); }
.hk-slot.listen { box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); font-size:11px; animation:hkpulse 1s ease-in-out infinite alternate; }
@keyframes hkpulse { from { opacity:1; } to { opacity:.55; } }
.hk-clear { position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:var(--surface-2, var(--surface)); color:var(--dim); font-size:11px; line-height:16px; box-shadow:inset 0 0 0 1px var(--hair-2); display:none; }
.hk-cell:hover .hk-clear { display:block; }
.hk-reset { flex:none; width:24px; height:24px; padding:0; border:0; background:none; color:var(--accent); cursor:pointer; font-size:14px; }
.hk-reset[hidden] { visibility:hidden; display:block; }
.hk-row.fixed .hk-lbl { color:var(--dim); }
.hk-fixed { flex:none; width:226px; font-family:var(--font-num); font-size:11.5px; color:var(--dim2); text-align:left; padding-left:4px; }

/* ---------------------------------------------------------------- tab bar */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:center;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); }
.tabbar .tabs { display:flex; width:100%; max-width:720px; }
.tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:3px 0; color:var(--dim2); font-size:9.5px; }
[data-theme="apple"] .tabbar a { font-size:10.5px; color:var(--dim); }
.tabbar svg { width:23px; height:23px; display:block; }
.tabbar a.on { color:var(--text); }
[data-theme="apple"] .tabbar a.on { color:var(--accent); }
[data-theme="day"] .tabbar a.on svg, [data-theme="night"] .tabbar a.on svg { filter:drop-shadow(0 0 6px rgba(var(--buy-rgb),.45)); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce) {
  body::before, body::after, .title, .seg button.on, .prog i, .pad .tile { animation:none !important; }
  [data-theme="day"] body::after { display:none; }
}

/* ---- the considered strip (consider.js): a row opened in place to Buy · Sell · mic · chart + why */
.consider { padding:6px 0 12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--hair); }
.row.considering { border-bottom:0; }
.cs-bar { display:flex; gap:8px; align-items:center; }
.cs-side { flex:1; height:40px; border-radius:var(--radius-pill); background:var(--surface); font-family:var(--font-num);
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; }
.cs-side.buy { color:var(--buy); border-color:rgba(var(--buy-rgb),.55); }
.cs-side.sell { color:var(--sell); border-color:rgba(var(--sell-rgb),.55); }
.cs-side.buy.on { background:rgba(var(--buy-rgb),.18); border-color:var(--buy); }
.cs-side.sell.on { background:rgba(var(--sell-rgb),.18); border-color:var(--sell); }
.cs-side:disabled { opacity:.7; cursor:default; }
.cs-icon { width:44px; height:40px; border-radius:var(--radius-pill); background:none; color:var(--accent); cursor:pointer;
  border:1px solid var(--hair); display:inline-flex; align-items:center; justify-content:center; }
.cs-icon.live { background:var(--chrome); color:var(--chrome-ink); border-color:transparent; }
.cs-why { width:100%; box-sizing:border-box; height:38px; padding:0 12px; border-radius:var(--radius-pill); background:var(--surface);
  color:var(--text); border:1px solid var(--hair); font-family:var(--font-voice); font-style:italic; font-size:15px; }
.cs-why:focus { outline:none; border-color:var(--hair-2); }
.cs-note { color:var(--dim); font-family:var(--font-voice); font-style:italic; font-size:13px; }
.cs-note:empty { display:none; }
.cs-note.err { color:var(--sell); }