/* Single stylesheet for the whole site. Every visual decision is a token below, so a design
   change only needs to replace the :root blocks (colour, type, spacing, radius, elevation).
   Templates are semantic HTML and carry no inline styles.
   Design: "Stripe Dark" (navy canvas, purple-to-cyan glow and gradient accents, hairline borders,
   rounded cards, pill badges, Inter type) with a matching Stripe-like light theme.
   Dark is the default. The colour scheme is chosen on the Settings page and applied before first
   paint by /static/theme.js, which sets <html data-theme="<scheme>"> (dark has no attribute). Each
   scheme is one token block below; the block also applies to [data-scheme="<scheme>"], so the
   Settings picker can paint a swatch in that scheme's own colours (decision 0123). */

:root {
  /* type */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* copyable ids only, never .num */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fw-medium: 500;
  --fw-bold: 600;
  --th-case: uppercase;
  --th-track: 0.06em;

  /* spacing */
  --sp-1: 3px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --page-pad: 24px;
  --page-max: 960px; /* every page is capped; dashboard pages narrow it further below */
  --card-pad: 20px;

  /* shape and elevation */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-btn: 8px;
  --r-pill: 99px;

  /* density */
  --ctl-h: 36px;
  --row-h: 48px;
  --bar-h: 60px;
  --rail-w: 64px;
}

/* colour: dark (default) */
:root, [data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0a2540;
  --bg-glow:
    radial-gradient(60% 50% at 12% -10%, rgb(99 91 255 / 38%) 0, transparent 70%),
    radial-gradient(50% 45% at 95% 0, rgb(0 212 255 / 20%) 0, transparent 70%);
  --surface: #0f2f52;
  --surface-2: #123a63;
  --hover: rgb(122 115 255 / 12%);
  --border: #1e4167;
  --border-strong: #2d5683;
  --text: #f1f5fb;
  --text-2: #a9bbd1;
  --text-3: #8199b5;
  --primary: #7a73ff;
  --primary-hover: #8f89ff;
  --on-primary: #ffffff;
  --accent-grad: linear-gradient(135deg, #635bff 0%, #00d4ff 140%);
  --link: #9ab8ff;
  --primary-soft: rgb(122 115 255 / 22%);
  --info-soft: rgb(122 115 255 / 14%);
  --focus: rgb(122 115 255 / 45%);
  --field-bg: #0a2540;
  --bar-bg: rgb(10 37 64 / 94%);
  --thead-bg: rgb(7 28 50 / 55%);
  --up: #1fd6a0;
  --up-fg: #4de8b8;
  --up-soft: rgb(31 214 160 / 15%);
  --down: #ff6b81;
  --down-fg: #ff8fa0;
  --down-soft: rgb(255 107 129 / 15%);
  --stoch-k: #ff8a3d;
  --stoch-d: #ffd43b;
  --warn: #ffc857;
  --warn-fg: #ffd47a;
  --warn-soft: rgb(255 200 87 / 15%);
  --e1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px -12px rgb(2 12 27 / 70%);
  --e2: 0 20px 50px -15px rgb(2 12 27 / 80%);
}

/* colour: light */
:root[data-theme="light"], [data-scheme="light"] {
  color-scheme: light;
  --bg: #f6f9fc;
  --bg-glow:
    radial-gradient(55% 45% at 10% -10%, rgb(99 91 255 / 14%) 0, transparent 70%),
    radial-gradient(45% 40% at 95% 0, rgb(0 212 255 / 12%) 0, transparent 70%);
  --surface: #ffffff;
  --surface-2: #f6f9fc;
  --hover: rgb(99 91 255 / 6%);
  --border: #e3e8ee;
  --border-strong: #c9d2dd;
  --text: #0a2540;
  --text-2: #425466;
  --text-3: #5b6e84;
  --primary: #635bff;
  --primary-hover: #4b45d1;
  --link: #4b45d1;
  --primary-soft: #e8e8ff;
  --info-soft: #eef0ff;
  --focus: rgb(99 91 255 / 30%);
  --field-bg: #ffffff;
  --bar-bg: rgb(255 255 255 / 94%);
  --thead-bg: #f6f9fc;
  --up: #1fb98c;
  --up-fg: #0b7a56;
  --up-soft: #d7f7c2;
  --down: #e5484d;
  --down-fg: #c1272d;
  --down-soft: #ffe3e6;
  --stoch-k: #e8590c;
  --stoch-d: #b88700;
  --warn: #f5a623;
  --warn-fg: #8a5a00;
  --warn-soft: #fff1d1;
  --e1: 0 1px 2px rgb(10 37 64 / 6%), 0 8px 24px -12px rgb(50 50 93 / 18%);
  --e2: 0 20px 50px -15px rgb(50 50 93 / 30%);
}

/* colour: midnight (dark): a neutral near-black canvas for low light and OLED screens */
:root[data-theme="midnight"], [data-scheme="midnight"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-glow:
    radial-gradient(60% 50% at 12% -10%, rgb(127 120 255 / 26%) 0, transparent 70%),
    radial-gradient(50% 45% at 95% 0, rgb(34 211 238 / 12%) 0, transparent 70%);
  --surface: #13161d;
  --surface-2: #1a1e28;
  --hover: rgb(127 120 255 / 10%);
  --border: #262b37;
  --border-strong: #363d4c;
  --text: #eef1f6;
  --text-2: #aab3c2;
  --text-3: #8690a1;
  --primary: #7f78ff;
  --primary-hover: #948eff;
  --on-primary: #ffffff;
  --accent-grad: linear-gradient(135deg, #6f67ff 0%, #22d3ee 140%);
  --link: #a6b4ff;
  --primary-soft: rgb(127 120 255 / 20%);
  --info-soft: rgb(127 120 255 / 12%);
  --focus: rgb(127 120 255 / 45%);
  --field-bg: #0b0d12;
  --bar-bg: rgb(11 13 18 / 94%);
  --thead-bg: rgb(5 6 9 / 55%);
  --up: #2bd4a0;
  --up-fg: #5ee6bb;
  --up-soft: rgb(43 212 160 / 15%);
  --down: #ff6b81;
  --down-fg: #ff92a3;
  --down-soft: rgb(255 107 129 / 15%);
  --stoch-k: #ff8a3d;
  --stoch-d: #ffd43b;
  --warn: #ffc857;
  --warn-fg: #ffd77e;
  --warn-soft: rgb(255 200 87 / 15%);
  --e1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px -12px rgb(0 0 0 / 80%);
  --e2: 0 20px 50px -15px rgb(0 0 0 / 85%);
}

/* colour: slate (dark): cool blue-grey with a teal accent; dark text on the bright primary */
:root[data-theme="slate"], [data-scheme="slate"] {
  color-scheme: dark;
  --bg: #1b222c;
  --bg-glow:
    radial-gradient(60% 50% at 12% -10%, rgb(47 184 194 / 22%) 0, transparent 70%),
    radial-gradient(50% 45% at 95% 0, rgb(129 140 248 / 16%) 0, transparent 70%);
  --surface: #242d39;
  --surface-2: #2c3745;
  --hover: rgb(47 184 194 / 10%);
  --border: #36424f;
  --border-strong: #475567;
  --text: #eceff4;
  --text-2: #b0bcc9;
  --text-3: #8d9aab;
  --primary: #2fb8c2;
  --primary-hover: #45c9d2;
  --on-primary: #0b1a1e;
  --accent-grad: linear-gradient(135deg, #1e8f98 0%, #6366f1 140%);
  --link: #7fd6dd;
  --primary-soft: rgb(47 184 194 / 20%);
  --info-soft: rgb(47 184 194 / 12%);
  --focus: rgb(47 184 194 / 45%);
  --field-bg: #1b222c;
  --bar-bg: rgb(27 34 44 / 94%);
  --thead-bg: rgb(16 21 28 / 55%);
  --up: #3ecf8e;
  --up-fg: #72e3b1;
  --up-soft: rgb(62 207 142 / 15%);
  --down: #f27185;
  --down-fg: #ff9aa8;
  --down-soft: rgb(242 113 133 / 15%);
  --stoch-k: #ff9a4d;
  --stoch-d: #ffd166;
  --warn: #f5c04a;
  --warn-fg: #ffd77e;
  --warn-soft: rgb(245 192 74 / 15%);
  --e1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px -12px rgb(5 8 12 / 70%);
  --e2: 0 20px 50px -15px rgb(5 8 12 / 80%);
}

/* colour: forest (dark): deep green with a gold accent, so the brand colour stays apart from the
   green and red state colours; dark text on the gold primary */
:root[data-theme="forest"], [data-scheme="forest"] {
  color-scheme: dark;
  --bg: #0f1f1a;
  --bg-glow:
    radial-gradient(60% 50% at 12% -10%, rgb(220 174 63 / 18%) 0, transparent 70%),
    radial-gradient(50% 45% at 95% 0, rgb(52 211 153 / 14%) 0, transparent 70%);
  --surface: #152a23;
  --surface-2: #1b352c;
  --hover: rgb(220 174 63 / 10%);
  --border: #27443a;
  --border-strong: #365a4d;
  --text: #eef6f1;
  --text-2: #a9c4b7;
  --text-3: #86a596;
  --primary: #dcae3f;
  --primary-hover: #e9bf5a;
  --on-primary: #1f1704;
  --accent-grad: linear-gradient(135deg, #b8860b 0%, #34d399 140%);
  --link: #8de7c2;
  --primary-soft: rgb(220 174 63 / 18%);
  --info-soft: rgb(255 255 255 / 7%);
  --focus: rgb(220 174 63 / 45%);
  --field-bg: #0f1f1a;
  --bar-bg: rgb(15 31 26 / 94%);
  --thead-bg: rgb(8 18 15 / 55%);
  --up: #4ade80;
  --up-fg: #86efac;
  --up-soft: rgb(74 222 128 / 15%);
  --down: #fb7185;
  --down-fg: #fda4af;
  --down-soft: rgb(251 113 133 / 15%);
  --stoch-k: #fb923c;
  --stoch-d: #fde047;
  --warn: #f59e0b;
  --warn-fg: #fbbf24;
  --warn-soft: rgb(245 158 11 / 15%);
  --e1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 10px 30px -12px rgb(2 10 7 / 70%);
  --e2: 0 20px 50px -15px rgb(2 10 7 / 80%);
}

/* colour: sepia (light): warm paper with brown text and a terracotta accent */
:root[data-theme="sepia"], [data-scheme="sepia"] {
  color-scheme: light;
  --bg: #f3ecdf;
  --bg-glow:
    radial-gradient(55% 45% at 10% -10%, rgb(180 85 45 / 12%) 0, transparent 70%),
    radial-gradient(45% 40% at 95% 0, rgb(201 150 60 / 14%) 0, transparent 70%);
  --surface: #fdf8ee;
  --surface-2: #f1e9d9;
  --hover: rgb(180 85 45 / 7%);
  --border: #e0d4bd;
  --border-strong: #c6b496;
  --text: #2a2016;
  --text-2: #5a4a35;
  --text-3: #6f5d44;
  --primary: #b4552d;
  --primary-hover: #99451f;
  --on-primary: #ffffff;
  --accent-grad: linear-gradient(135deg, #b4552d 0%, #d99a3a 140%);
  --link: #9a4520;
  --primary-soft: #f3dccf;
  --info-soft: #f4e4cf;
  --focus: rgb(180 85 45 / 30%);
  --field-bg: #fffdf7;
  --bar-bg: rgb(253 248 238 / 94%);
  --thead-bg: #f1e9d9;
  --up: #2e8b57;
  --up-fg: #1f6b42;
  --up-soft: #dcefd9;
  --down: #c0392b;
  --down-fg: #9c2a1e;
  --down-soft: #f8dcd6;
  --stoch-k: #c2410c;
  --stoch-d: #946200;
  --warn: #d08700;
  --warn-fg: #7a5200;
  --warn-soft: #f8e7bd;
  --e1: 0 1px 2px rgb(60 40 20 / 6%), 0 8px 24px -12px rgb(80 55 25 / 20%);
  --e2: 0 20px 50px -15px rgb(80 55 25 / 30%);
}

/* colour: high contrast (dark): black canvas, white text, visible borders, bold state colours */
:root[data-theme="contrast"], [data-scheme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-glow: none;
  --surface: #0d0d0d;
  --surface-2: #1a1a1a;
  --hover: rgb(255 255 255 / 10%);
  --border: #6b6b6b;
  --border-strong: #a3a3a3;
  --text: #ffffff;
  --text-2: #e5e5e5;
  --text-3: #c7c7c7;
  --primary: #b4adff;
  --primary-hover: #c9c4ff;
  --on-primary: #000000;
  --accent-grad: linear-gradient(135deg, #5b53d6 0%, #0e7490 140%);
  --link: #c9c4ff;
  --primary-soft: rgb(180 173 255 / 22%);
  --info-soft: rgb(180 173 255 / 14%);
  --focus: rgb(180 173 255 / 60%);
  --field-bg: #000000;
  --bar-bg: rgb(0 0 0 / 96%);
  --thead-bg: #141414;
  --up: #3dffb0;
  --up-fg: #6dffc4;
  --up-soft: rgb(61 255 176 / 16%);
  --down: #ff7b8e;
  --down-fg: #ffa1ae;
  --down-soft: rgb(255 123 142 / 16%);
  --stoch-k: #ff9f43;
  --stoch-d: #ffe14d;
  --warn: #ffd34d;
  --warn-fg: #ffe066;
  --warn-soft: rgb(255 211 77 / 16%);
  --e1: 0 1px 0 rgb(255 255 255 / 8%) inset, 0 10px 30px -12px rgb(0 0 0 / 80%);
  --e2: 0 20px 50px -15px rgb(0 0 0 / 90%);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--bar-h) + var(--sp-4)); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg-glow) no-repeat top / 100% 560px, var(--bg); color: var(--text);
  font: 400 var(--fs-base) / 1.55 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, p, ol, ul, dl, dd, fieldset { margin: 0; }
a { color: var(--link); text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand__img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }
.num { font-variant-numeric: tabular-nums; } /* one family: Inter with tabular figures */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* top bar, icon rail, page frame */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  height: var(--bar-h); padding-inline: var(--page-pad);
  background: var(--bar-bg); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.topbar__end { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.topbar__start { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.brand__img--personal { display: grid; place-items: center; background: var(--accent-grad); color: #fff; font-size: var(--fs-lg); }
/* the owner's Webull <-> Personal switch, in both sites' top bars (decision 0127) */
.switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.switch a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; transition: background 0.15s, color 0.15s; }
.switch a[href]:hover { background: var(--hover); color: var(--text); }
.switch a[aria-current] { background: var(--primary); color: var(--on-primary); }
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: -0.02em; white-space: nowrap; }
.user { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; color: var(--text-2); font-size: var(--fs-sm); }
.user__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-xs); }

.shell { display: flex; flex: 1; min-width: 0; }
.rail {
  position: sticky; top: var(--bar-h); align-self: flex-start;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  width: var(--rail-w); height: calc(100vh - var(--bar-h)); flex: none; padding: var(--sp-3) 0;
  background: var(--bar-bg); border-right: 1px solid var(--border);
}
.rail a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-3); transition: background 0.15s, color 0.15s; }
.rail a:hover { background: var(--hover); color: var(--text); }
.rail a[aria-current="page"] { background: var(--primary-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary-soft); }
.coming { text-align: left; display: grid; gap: var(--sp-2); }
.rail .icon { width: 20px; height: 20px; }
.rail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.page { display: grid; gap: var(--sp-6); align-content: start; flex: 1; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--sp-6) var(--page-pad); }
/* dashboard pages are capped and centred between the rail and the right edge */
.page--new, .page--alerts, .page--settings { max-width: 640px; }
.page--feed { max-width: 720px; }
.page--scorecard { max-width: 960px; }
.page--scorecard > .opts { margin-block: 0; }
.site-footer { padding: var(--sp-5) var(--page-pad); color: var(--text-3); font-size: var(--fs-sm); }
.site-footer__links { white-space: nowrap; }

/* page heads, cards */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.page-head h1, .page-head h2 { font-size: var(--fs-xl); line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: -0.025em; }
.sub { color: var(--text-2); font-size: var(--fs-base); }
.page-head .sub { margin-top: var(--sp-1); overflow-wrap: anywhere; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e1); padding: var(--card-pad); }
.card--flush { padding: 0; overflow: hidden; }
.card h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); }

/* server-rendered legal pages: cards and the closing note stack with one gap */
.legal { display: grid; gap: var(--sp-4); }
.legal .page-head { margin-bottom: 0; }

/* single-form auth pages: a narrow centred column, full width on phones */
.auth { width: 100%; max-width: 420px; margin-inline: auto; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctl-h); padding-inline: var(--sp-4); border: 1px solid transparent; border-radius: var(--r-btn);
  font: inherit; font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer;
  background: var(--surface-2); border-color: var(--border-strong); color: var(--text);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--primary); }
.btn--primary { background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: 0 1px 2px rgb(10 37 64 / 25%), 0 6px 16px -6px var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: transparent; }
.icon-btn {
  display: grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); padding: 0;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-3); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--down-soft); color: var(--down-fg); }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label, .label { padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.input, .select {
  width: 100%; min-width: 0; height: var(--ctl-h); padding-inline: var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--field-bg); color: var(--text); font: inherit;
}
.input:focus, .select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.hint { font-size: var(--fs-xs); color: var(--text-3); }
.actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); padding: var(--sp-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: grid; place-items: center; min-height: calc(var(--ctl-h) - 8px); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.25; text-align: center;
}
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }

/* Settings: the colour scheme picker, a radio list of swatch cards on the page (more than three
   options, so not a .seg; one level deep, so no outer card). A swatch is painted in its own
   scheme's tokens through data-scheme, whatever the page's theme; System shows dark and light. */
.schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-3); min-width: 0; padding: 0; border: 0; }
.scheme {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e1);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.scheme:hover { background: var(--hover); }
.scheme input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scheme:has(input:checked) { border-color: var(--primary); box-shadow: var(--e1), 0 0 0 1px var(--primary); }
.scheme:has(input:focus-visible) { box-shadow: var(--e1), 0 0 0 3px var(--focus); }
.scheme__swatch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: none; width: 56px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.scheme__swatch > span { display: grid; align-content: end; gap: 3px; padding: 5px; background: var(--bg); }
.scheme__swatch > span::before { content: ""; height: 11px; border-radius: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.scheme__swatch > span::after { content: ""; height: 5px; border-radius: 2px; background: linear-gradient(90deg, var(--primary) 0 40%, var(--up) 40% 70%, var(--down) 70%); }
.scheme__text { display: grid; gap: 1px; min-width: 0; }
.scheme__text label { font-weight: var(--fw-medium); color: var(--text); }
.scheme__desc { color: var(--text-3); font-size: var(--fs-sm); }

/* badges, conditions, notes */
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding-inline: var(--sp-3);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.badge--up { background: var(--up-soft); color: var(--up-fg); }
.badge--down { background: var(--down-soft); color: var(--down-fg); }
.badge--warn { background: var(--warn-soft); color: var(--warn-fg); }
.badge--neutral { border: 1px solid var(--border-strong); } /* a label badge stays visible on a --surface-2 inset */
.badge--neutral::before { display: none; }
.badge--primary { background: var(--primary-soft); color: var(--text); }
.badge--primary::before { background: var(--primary); }
.cond { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); }
.cond .icon { width: 14px; height: 14px; }
.cond--up { color: var(--up-fg); }
.cond--down { color: var(--down-fg); }
.note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--info-soft); font-size: var(--fs-sm); }
.note .icon { margin-top: 2px; color: var(--link); }
.note ul { margin: 0; padding-left: var(--sp-5); }
.note--up { background: var(--up-soft); }
.note--up .icon { color: var(--up-fg); }
.note--warn { background: var(--warn-soft); }
.note--warn .icon { color: var(--warn-fg); }
.note--down { background: var(--down-soft); }
.note--down .icon { color: var(--down-fg); }
.page > .note { margin-bottom: calc(var(--sp-3) * -1); }

/* rules table (hairline rows, no zebra) */
.rules { width: 100%; border-collapse: collapse; }
.rules th, .rules td { padding: 0 var(--sp-4); height: var(--row-h); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: var(--fs-base); font-weight: 400; }
.rules thead th { padding-block: var(--sp-3); background: var(--thead-bg); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); white-space: nowrap; }
.rules tbody tr { transition: background 0.15s; }
.rules tbody tr:hover { background: var(--hover); }
.rules tbody tr:last-child > * { border-bottom: 0; }
.sym { font-weight: var(--fw-bold); letter-spacing: 0.02em; }
.c-cool, .c-last { color: var(--text-2); font-size: var(--fs-sm); }
.c-del { width: 1%; text-align: right; white-space: nowrap; }
.c-del .icon-btn { display: inline-grid; vertical-align: middle; }

/* monitor status */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.stat { display: grid; gap: 2px; align-content: start; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); }
.stat dt { color: var(--text-2); font-size: var(--fs-sm); }
.stat__v { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.stats + .note { margin-top: var(--sp-3); }
.meter { display: block; width: 100%; height: 8px; margin-top: var(--sp-2); border: 0; border-radius: 99px; background: var(--surface-2); overflow: hidden; appearance: none; }
.meter::-webkit-progress-bar { background: var(--surface-2); }
.meter::-webkit-progress-value { background: var(--accent-grad); border-radius: 99px; }
.meter::-moz-progress-bar { background: var(--accent-grad); border-radius: 99px; }

/* owner-only server usage panel (status page) */
.usage { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.usage h2 { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.usage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.usage__sub { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-2); }
.usage__rows { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.usage__rows li { display: grid; grid-template-columns: 9.5rem 11rem 1fr; align-items: center; gap: var(--sp-4); }
.usage__name { color: var(--text-2); font-size: var(--fs-sm); }
.usage__val { font-weight: var(--fw-bold); }
.usage__of { color: var(--text-3); font-weight: 400; font-size: var(--fs-sm); margin-left: var(--sp-2); }
.usage__bar { position: relative; display: block; }
.usage__bar .meter { margin-top: 0; }
.usage__line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.7; }
.meter--warn::-webkit-progress-value { background: var(--warn); }
.meter--warn::-moz-progress-bar { background: var(--warn); }
.meter--down::-webkit-progress-value { background: var(--down); }
.meter--down::-moz-progress-bar { background: var(--down); }
.meter--up::-webkit-progress-value { background: var(--up); }
.meter--up::-moz-progress-bar { background: var(--up); }

/* empty state */
.empty { display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); text-align: center; }
.empty h2 { font-size: var(--fs-xl); text-transform: none; letter-spacing: 0; color: var(--text); }
.empty__art { width: 132px; height: 88px; color: var(--text-3); }
.steps { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; list-style: none; text-align: left; color: var(--text-2); font-size: var(--fs-sm); }
.steps li { display: flex; align-items: center; gap: var(--sp-4); overflow-wrap: anywhere; }
.steps li > span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.steps .icon { width: 11px; height: 11px; }
.steps .done { color: var(--text); }
.steps .done > span { background: var(--up); border-color: var(--up); color: #fff; }

/* SPY card: quote, freshness, range toggle and the hand-drawn SVG chart */
.spy { display: grid; gap: var(--sp-3); }
.spy h2 { display: flex; align-items: baseline; gap: var(--sp-3); }
.spy__name { color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; }
.spy__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.spy__price { margin-top: var(--sp-2); font-size: 36px; line-height: 1.1; font-weight: var(--fw-bold); letter-spacing: -0.03em; }
.spy__price--none { color: var(--text-3); }
.spy[data-state="stale"] .spy__price { color: var(--text-2); }
.spy__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); }
.spy__tools { display: flex; justify-content: flex-end; }
.vix { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.vix__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.vix__label { color: var(--text-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.04em; }
.vix__level { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.vix__change { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); }
.vix__change .icon { width: 14px; height: 14px; }
.vix__change { color: var(--text-2); } /* neutral: a rising VIX is not "good" the way a rising price is */
.vix__nowrap { white-space: nowrap; }
.vix[data-state="stale"] .vix__level { color: var(--text-2); }
.vix__line { margin: 0; font-size: var(--fs-sm); }
.vix__line--dim { color: var(--text-3); font-size: var(--fs-xs); }
.spy__range { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.spy__rb {
  min-width: 44px; height: calc(var(--ctl-h) - 4px); padding-inline: var(--sp-4); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.spy__rb[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.spy__chart svg { display: block; width: 100%; height: 160px; }
.spy__plot { --y-gutter: 52px; display: grid; grid-template-columns: minmax(0, 1fr) var(--y-gutter); }
.spy__yticks { position: relative; color: var(--text-3); font-size: var(--fs-xs); }
.spy__ytick { position: absolute; left: var(--sp-2); transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.candles__grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spy__prev { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.spy[data-state="stale"] .spy__chart svg { opacity: 0.6; }
.spy__chart--candles svg { height: 200px; }
.candles__day { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.candle line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.candle--up line { stroke: var(--up); }
.candle--up rect { fill: var(--up); }
.candle--down line { stroke: var(--down); }
.candle--down rect { fill: var(--down); }
.stoch { display: grid; gap: var(--sp-2); }
.stoch__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.stoch__k { color: var(--stoch-k); }
.stoch__d { color: var(--stoch-d); }
.stoch svg { display: block; width: 100%; height: 90px; }
.stoch__ref { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.stoch__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stoch__line--k { stroke: var(--stoch-k); }
.stoch__line--d { stroke: var(--stoch-d); }
.stoch__plot { position: relative; }
.stoch__mark { position: absolute; left: calc(100% - var(--y-gutter) + var(--sp-2)); transform: translateY(-50%); font-size: var(--fs-xs); color: var(--text-3); line-height: 1; }
.spy__ticks { position: relative; height: 1.4em; margin-top: var(--sp-1); color: var(--text-3); font-size: var(--fs-xs); }
.spy__tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; line-height: 1.4; }
.spy__tick--start { transform: none; }
.spy__tick--end { transform: translateX(-100%); }
.spy__axis { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); color: var(--text-3); font-size: var(--fs-xs); }
.spy__empty { display: grid; place-items: center; min-height: 96px; padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-sm); text-align: center; }

/* SPY options: a page head of its own, then one card per section (AI alert, spreads, gauge, gap tracker,
   notable gaps, chain, watchlist; the scorecard page reuses it), so each section reads as its own block and the cards stay one level deep */
.opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-block: var(--sp-4); }
.opts > .page-head { margin-bottom: 0; }
.opts > .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-content: start; min-width: 0; }
.opts h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
/* a card's title row (the section name with its badge or count) sits over a full-width hairline */
.opts > .card > h3:first-child, .opts > .card > .gauge__head {
  margin: 0 calc(var(--card-pad) * -1) var(--sp-2); padding: 0 var(--card-pad) var(--sp-4); border-bottom: 1px solid var(--border);
}
.opts > .card > .gauge__head > h3 { margin: 0; }
.opts__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.opts__head h2 { display: flex; align-items: baseline; gap: var(--sp-3); }
.opts__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); }
.opts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-5) var(--sp-6); margin: 0; padding: 0; list-style: none; }
.opts__list > li { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; padding-left: var(--sp-3); border-left: 3px solid var(--primary); }
.opts .opts__list-h { margin: 0; color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; text-transform: none; } /* group titles read like card titles, not caps labels */
.opts__notable p, .opts__notable ul { margin: 0; }
.opts__verdict { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.opts__verdict--none { color: var(--text-2); }
.opts__banner, .opts__reasons, .opts__picks { display: grid; gap: var(--sp-2); padding: 0; list-style: none; }
.opts__banner li, .opts__reasons li { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.opts__reasons--notes li { color: var(--text-3); }
.opts__score-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-width: 0; padding-left: var(--sp-3); border-left: 3px solid var(--border-strong); }
.opts__score-pick--stopped { border-left-color: var(--down); }
.opts__picks.opts__score-picks { grid-template-columns: minmax(0, 1fr); }
.opts__score-days { display: grid; gap: var(--sp-4); }
.opts__score-day { display: grid; gap: var(--sp-2); min-width: 0; }
.opts__score-day + .opts__score-day { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.opts .opts__score-day-h { margin: 0; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.opts__picks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4) var(--sp-5); }
.opts__pick { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; padding-left: var(--sp-3); border-left: 3px solid var(--border-strong); }
.opts__pick--call { border-left-color: var(--down); }
.opts__pick--put { border-left-color: var(--up); }
.opts__pick--caution { border-left-color: var(--border-strong); }
.opts__pick--caution > dl, .opts__pick--caution > .opts__why, .opts__pick--caution > .opts__more, .opts__pick--caution .opts__name { opacity: 0.55; }
.opts__caution { margin: 0; color: var(--warn-fg); font-weight: 500; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.opts__pick-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.opts__pick-h .badge, .opts__banner .badge { max-width: 100%; white-space: normal; padding-block: 2px; }
.opts__figs { display: grid; gap: var(--sp-1); margin: 0; }
.opts__figs > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); }
.opts__figs dt { min-width: 5.5rem; }
.opts__figs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.opts__why { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.opts__results { margin-top: var(--sp-2); }
.opts__shadow { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.opts__more summary { cursor: pointer; color: var(--text-3); font-size: var(--fs-xs); }
.opts__more[open] summary { margin-bottom: var(--sp-2); }
.opts__spread { display: grid; gap: var(--sp-1); min-width: 0; }
.opts__spread-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin: 0; }
.opts__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.opts__k { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); margin-right: var(--sp-1); }
.opts__legs { margin: 0; padding: 0; list-style: none; }
.opts__leg { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; border-top: 1px solid var(--border); }
.opts__action { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--th-track); }
.opts__action--sell { color: var(--down-fg, var(--text)); }
.opts__action--buy { color: var(--up-fg, var(--text)); }
.opts__leg-name { font-weight: var(--fw-medium); }
.opts__qv { color: var(--text-3); text-align: right; }
.opts__qv--used { color: var(--text); font-weight: var(--fw-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.opts__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-5); margin: 0; padding-top: var(--sp-1); border-top: 1px solid var(--border); font-size: var(--fs-base); }
.opts__spread--compact { font-size: var(--fs-sm); }
.opts__spread--compact .opts__name { font-size: var(--fs-sm); }
.opts__spread--compact .opts__leg { padding-block: 2px; gap: var(--sp-2); }
.opts__spread--compact .opts__total { font-size: var(--fs-sm); }
/* The "Can sell" line of an edge spread (decisions 0067, 0076): the count, its level badge, the draining badge and the limiting leg. */
.opts__depth { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.opts__depth--danger .opts__count { color: var(--down-fg); }
.opts__depth--warning .opts__count { color: var(--warn-fg); }
.opts__depth-key { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.opts__fragile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.opts__gaplist { display: grid; margin: 0; padding: 0; list-style: none; }
.opts__gap { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); border-top: 2px solid var(--border-strong); font-size: var(--fs-sm); min-width: 0; }
.opts__gap-h { margin: 0; }
.opts__gap-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.opts__gap-side { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; padding-left: var(--sp-3); border-left: 3px solid var(--border-strong); }
.opts__tracker { display: grid; gap: var(--sp-3); }
.opts__tracker h3 { flex-wrap: wrap; }
.opts__open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin: 0; padding-left: var(--sp-3); border-left: 3px solid var(--primary); }
.opts__gtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.opts__gtable th, .opts__gtable td { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); text-align: right; vertical-align: top; font-weight: 400; }
.opts__gtable td:last-child .num { white-space: nowrap; }
.opts__gtable th:first-child { text-align: left; }
.opts__gtable thead th { padding-block: 0 var(--sp-2); border-top: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.opts__gtable thead .sub { display: block; text-transform: none; letter-spacing: 0; }
.opts__gtable tbody th { border-left: 3px solid var(--border-strong); }
.opts__grow--call > th { border-left-color: var(--down); }
.opts__grow--put > th { border-left-color: var(--up); }
.opts__gl { display: block; }
.opts__gspy td { padding-block: var(--sp-1); border-top: 2px solid var(--primary); color: var(--primary); font-weight: var(--fw-bold); text-align: left; }
.opts__gfar, .opts__glegend { margin: 0; font-size: var(--fs-sm); }
.opts__filled { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.opts__filled li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); }
/* a table taller than the screen scrolls inside its frame, so its head can stay in view */
.opts__scroll {
  position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  max-height: calc(100vh - var(--bar-h) - 2 * var(--sp-6)); max-height: calc(100dvh - var(--bar-h) - 2 * var(--sp-6));
}
.opts__table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.opts__table th, .opts__table td { padding: 0 var(--sp-3); height: var(--row-h); border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; font-size: var(--fs-base); font-weight: 400; white-space: nowrap; }
.opts__table thead { position: sticky; top: 0; z-index: 2; }
/* collapsed borders do not travel with a stuck head (rows show through them): its hairlines are inset shadows */
.opts__table thead th { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); }
.opts__table thead th { padding-block: var(--sp-2); height: auto; background: linear-gradient(var(--thead-bg), var(--thead-bg)) var(--surface); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.opts__table tbody tr { transition: background 0.15s; }
.opts__table tbody tr:hover { background: var(--hover); }
.opts__table tbody tr:last-child > * { border-bottom: 0; }
.opts__table .opts__side-h { text-align: center; }
/* the strike column is marked by hairline side borders, not a fill; on phones it is pinned (below) */
.opts__table .opts__strike-h, .opts__table .opts__strike { text-align: center; border-inline: 1px solid var(--border); }
.opts__table .opts__strike { font-weight: var(--fw-bold); }
.opts__table--watch { min-width: 56rem; }
.opts__table--watch th, .opts__table--watch td { text-align: left; }
.opts__table--watch td.num { text-align: right; }
.opts__sym { font-weight: var(--fw-medium); }
.opts__miss { color: var(--text-3); }
.opts__act { text-align: center; }
/* per-row Watch is a tertiary text action: no border or fill, and on pointer devices it waits for the row to be hovered or focused */
.opts__watch {
  min-height: 24px; padding-inline: var(--sp-2); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  transition: color 0.15s, opacity 0.15s;
}
.opts__watch:hover { color: var(--primary); text-decoration: underline; }
.opts__watch--on { color: var(--up-fg); font-weight: var(--fw-bold); }
.opts__watch:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); }
.opts__watch:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) {
  .opts__table tbody tr:not(:hover):not(:focus-within) .opts__watch:not(.opts__watch--on) { opacity: 0; }
}
.opts__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-4); }
/* the chain card has no title: its table runs edge to edge from the card's top, the add form sits under a hairline */
.opts > .opts__chain { padding: 0; gap: 0; }
.opts__chain > .opts__scroll { border: 0; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.opts__chain > .note, .opts__chain > .spy__empty { margin: var(--card-pad) var(--card-pad) 0; }
.opts__chain > .opts__add { padding: var(--sp-4) var(--card-pad) var(--card-pad); border-top: 1px solid var(--border); }
/* the watchlist table runs edge to edge under the card's title row and fills the card to its bottom edge */
.opts__watchlist > .opts__scroll {
  margin: calc((var(--sp-2) + var(--sp-3)) * -1) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
  border: 0; border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
}
.opts__watchlist .opts__table :is(th, td):first-child { padding-left: var(--card-pad); }
.opts__watchlist .opts__table :is(th, td):last-child { padding-right: var(--card-pad); }
.opts__watchlist, .opts__gaps { display: grid; gap: var(--sp-3); }
.gauge { display: grid; gap: var(--sp-3); }
.gauge[data-stale="true"] .gauge__track, .gauge[data-stale="true"] .gauge__rows { opacity: 0.55; }
.gauge__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.gauge__move, .gauge__warn { margin: 0; font-size: var(--fs-base); }
.gauge__move .sub { display: block; }
.gauge__warn { padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn-fg); font-size: var(--fs-sm); }
/* a thin neutral track: hairline marks where the near band starts and ends, small dots coloured by zone */
.gauge__track { position: relative; height: 8px; margin: var(--sp-2) var(--sp-2) var(--sp-1); border-radius: var(--r-pill); background: var(--surface-2); }
.gauge__zone-fill { position: absolute; top: -3px; bottom: -3px; }
.gauge__zone-fill--near { border-inline: 1px solid var(--text-3); }
.gauge__spy { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); }
.gauge__dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--text); background: var(--text); box-sizing: border-box; }
.gauge__dot--inside { border-color: var(--down); background: var(--down); }
.gauge__dot--near { border-color: var(--warn); background: var(--warn); }
.gauge__dot--beyond { border-color: var(--up); background: var(--up); }
.gauge__axis { position: relative; height: 1.4em; margin-inline: var(--sp-2); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.gauge__axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.gauge__axis .gauge__axis-low { transform: translateX(-100%); }
.gauge__axis .gauge__axis-high { transform: none; }
.gauge__sides { margin-top: var(--sp-2); }
.gauge .opts__list-h { font-size: var(--fs-base); } /* sub-heads under the card title */
.gauge__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.gauge__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.gauge__strike { font-weight: var(--fw-medium); }
.gauge__nums { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); color: var(--text-2); font-size: var(--fs-sm); }
.gauge__legend { margin: 0; font-size: var(--fs-sm); }
.gauge__key { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.gauge__key li { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.gauge__key strong { color: var(--text); }
.gauge__swatch { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.gauge__swatch--spy { width: 2px; height: 16px; margin: 2px 4px 0; border-radius: 0; background: var(--text); }
.gauge__swatch--inside { background: var(--down); }
.gauge__swatch--near { background: var(--warn); }
.gauge__swatch--beyond { background: var(--up); }
.gauge__dot--key { position: static; flex: none; margin: 5px 0 0; }
.opts[data-state="loading"] { min-height: 96px; }

/* trader feed page */
.feed__day { margin-top: var(--sp-5); }
.feed__date { margin-bottom: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.feed__list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.feed__post { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md); box-shadow: var(--e1); }
.feed__meta { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }
.feed__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.feed__media { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.feed__img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.feed__img img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; }
.feed__file { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.feed__more { margin-top: var(--sp-4); }
.feed__foot { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-3); }
.page--feed .note { margin-bottom: var(--sp-3); }

/* Main page: the dashboard column plus a sticky 360px Timeline column. 1348 = 912 + 28 + 360 + 2 x 24,
   so at 1440 the dashboard keeps its 912px; at 1280 it is 780px. */
.page--rules { max-width: 1348px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.page--rules > * { grid-column: 1; min-width: 0; }
.home__rules { display: grid; gap: var(--sp-6); align-content: start; }
.home__rules > .note { margin-bottom: calc(var(--sp-3) * -1); }
.home__side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--bar-h) + var(--sp-6)); display: grid; gap: var(--sp-5); align-content: start; }

/* Timeline card */
.tl { display: grid; align-content: start; }
.tl:not(.tl--compact) { display: flex; flex-direction: column; max-height: calc(100dvh - var(--bar-h) - 2 * var(--sp-6)); padding-bottom: 0; }
.tl__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  margin: 0 calc(var(--card-pad) * -1) var(--sp-3); padding: 0 var(--card-pad) var(--sp-4); border-bottom: 1px solid var(--border);
}
.tl__head h2 { display: flex; align-items: center; gap: var(--sp-2); }
.tl__sub { padding-bottom: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }
.tl--compact .tl__sub { padding-bottom: var(--sp-2); }
.tl__list { list-style: none; margin: 0; padding: 0; }
.tl__scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  margin-inline: calc(var(--card-pad) * -1); padding: 0 var(--card-pad) var(--sp-3); border-top: 1px solid var(--border);
}

/* the next key event, pinned above the scroller: a surface-2 inset, no border of its own */
.tl__next { display: grid; gap: 2px; margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--surface-2); border-radius: var(--r-md); }
.tl__next-k { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.tl__next-k > span:first-child { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.tl__next-in { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.tl__next-name { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; }
.tl__next-name .badge { flex: none; }
.tl__next-when { color: var(--text); font-size: var(--fs-sm); }
.tl__next-more { color: var(--text-3); font-size: var(--fs-sm); }

/* day bands, like the Calendar page's day heads; sticky inside the scroller */
.tl__day {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: var(--sp-1);
  margin-inline: calc(var(--card-pad) * -1); padding: var(--sp-2) var(--card-pad);
  background: var(--surface-2); border-bottom: 1px solid var(--border); box-shadow: 0 -6px 0 var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.tl--compact .tl__day { position: static; box-shadow: none; }
.tl__rel { color: var(--text-2); font-weight: 400; }
.tl__rel::before { content: "· "; color: var(--text-3); }

/* above Now: headlines on a rail */
.tl__item, .tl__now { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--sp-4); }
.tl__time { padding: var(--sp-3) 0; text-align: right; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.6; }
.tl__body { position: relative; display: grid; gap: var(--sp-1); min-width: 0; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-left: 1px solid var(--border); }
.tl__body::before {
  content: ""; position: absolute; left: -4px; top: calc(var(--sp-3) + 6px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.tl__item--gap .tl__body::before, .tl__item--quiet .tl__body::before { display: none; }
.tl__item--quiet .tl__body { padding-block: var(--sp-2) var(--sp-3); }
.tl__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 22px; color: var(--text-3); font-size: var(--fs-xs); }
.tl__title { color: var(--link); font-weight: var(--fw-medium); line-height: 1.4; overflow-wrap: anywhere; }
.tl__item--plain .tl__title { font-weight: 400; }
.tl__item--old .tl__title { color: var(--text-2); font-weight: 400; }
.tl__why { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.tl__then { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.tl__note { color: var(--text-3); font-size: var(--fs-sm); }
.tl__gap { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.tl__gap .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--warn-fg); }

/* the Now line */
.tl__now { align-items: center; padding: var(--sp-2) 0; }
.tl__now-t { text-align: right; color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.tl__now-line { display: flex; align-items: center; gap: var(--sp-2); margin-left: -5px; color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tl__now-line::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.tl__now-line::after { content: ""; flex: 1; height: 1px; background: var(--text-3); }

/* below Now: one calendar row per event, grouped by day */
.tl3__row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.tl3__t {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-top: 2px; text-align: right;
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.45;
}
.tl__in { color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; }
.tl3__b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; padding-left: calc(var(--sp-4) + 1px); }
.tl3__l { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.tl3__l .badge { flex: none; }
.tl3__name { padding-top: 1px; color: var(--text); font-weight: var(--fw-bold); line-height: 1.4; overflow-wrap: anywhere; }
.tl3__note { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.tl3__news { min-width: 0; }
.tl3__news summary { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); line-height: 1.45; cursor: pointer; list-style: none; }
.tl3__news summary::-webkit-details-marker { display: none; }
.tl3__news-k { flex: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.tl3__news-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.tl3__news[open] .tl3__news-t { white-space: normal; color: var(--text); }
.tl3__news-b { display: grid; gap: 2px; margin-top: 2px; }
.tl3__news-meta { color: var(--text-3); font-size: var(--fs-xs); }
.tl3__news-b a { color: var(--link); }

/* ends: the desktop end link, the compact Earlier fold and foot */
.tl__end { padding: var(--sp-3) 0 var(--sp-2) calc(4.75rem + var(--sp-4)); }
.tl__end a, .tl__foot a { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.tl__earlier details { border-bottom: 1px solid var(--border); }
.tl__earlier summary { padding: var(--sp-2) 0 var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; }
.tl__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-sm);
}

/* one column: the Timeline follows the SPY card and renders compact (no inner scroller) */
@media (max-width: 1100px) {
  .page--rules { grid-template-columns: minmax(0, 1fr); }
  .home__side { grid-column: 1; grid-row: 2; position: static; }
}

/* phones: rail becomes a bottom tab bar, rows become cards, and every control is at least 44px tall.
   Option C's dense 28px controls are too small for touch. */
@media (max-width: 40rem) {
  :root { --ctl-h: 44px; --page-pad: 16px; --bar-h: 56px; }
  body { padding-bottom: 56px; }
  .user, .topbar .badge { display: none; }
  .brand { min-height: 44px; min-width: 0; white-space: normal; line-height: 1.15; font-size: var(--fs-base); }
  .topbar { gap: var(--sp-2); }
  .topbar__end { gap: var(--sp-2); }
  .topbar .btn { padding-inline: var(--sp-3); }
  /* the owner's switch stands in for the brand (its current pill leads home too), and keeps only
     its labels */
  .topbar__start:has(.switch) .brand { display: none; }
  .switch a { min-height: 36px; padding-inline: 10px; }
  .switch .icon { display: none; }
  .site-footer a { display: inline-block; padding: 14px 6px; }
  .site-footer__links { margin-inline-start: -6px; }
  .rail {
    position: fixed; inset: auto 0 0 0; z-index: 10; flex-direction: row; justify-content: space-around; gap: 0;
    width: auto; height: 56px; padding: 0; border-right: 0; border-top: 1px solid var(--border);
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* eight tabs (ten for the owner) share the bar: each is as wide as its 11px label, at least a 44px target
     (36px once there are nine, 10px labels on no floor at ten, 9px at eleven), and the spare width is shared out, so long labels such as "Calendar",
     "Earnings" and "Scorecard" side by side never run into each other */
  .rail a { flex: 1 1 auto; min-width: 44px; width: auto; height: 56px; padding-inline: 2px; border-radius: 0; box-shadow: none; grid-auto-flow: row; gap: 2px; place-content: center; font-size: 11px; }
  .rail a:first-child:nth-last-child(n+9), .rail a:first-child:nth-last-child(n+9) ~ a { min-width: 36px; padding-inline: 0; }
  .rail a:first-child:nth-last-child(n+10), .rail a:first-child:nth-last-child(n+10) ~ a { min-width: 0; font-size: 10px; }
  .rail a:first-child:nth-last-child(n+11), .rail a:first-child:nth-last-child(n+11) ~ a { font-size: 9px; letter-spacing: -0.01em; }
  .rail .icon { width: 20px; height: 20px; }
  .rail span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .form, .stats { grid-template-columns: 1fr; }
  .usage__rows li { grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); }
  .usage__bar { grid-column: 1 / -1; }
  .seg { grid-template-columns: 1fr 1fr; }
  .seg span { min-height: 44px; }
  .input, .select { font-size: 16px; }
  .actions .btn, .page-head .btn { width: 100%; }
  .page-head .btn { height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .spy__tools { justify-content: stretch; }
  .spy__tools .spy__range { display: flex; width: 100%; }
  .spy__rb { height: 44px; min-width: 44px; }
  .spy__tools .spy__rb { flex: 1; padding-inline: var(--sp-2); }
  .spy__price { font-size: 30px; }
  .spy__axis { flex-wrap: wrap; }
  .opts__gap-pair { grid-template-columns: 1fr; }
  /* the gap ladder's three columns wrap their headings and figures on phones: the gap keeps the left
     (and its bar the full row), and SPY-to-gap and the spread stack on the right under their own labels */
  .opts__gtable thead { display: none; }
  .opts__gtable, .opts__gtable tbody { display: block; }
  .opts__gtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .opts__gtable tbody th { grid-row: span 2; }
  .opts__gtable td + td { padding-top: 0; border-top: 0; }
  .opts__gtable .opts__gl { white-space: nowrap; }
  .opts__gtable td::before { display: block; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
  .opts__gtable td:nth-child(2)::before { content: "SPY to gap"; }
  .opts__gtable td:nth-child(3)::before { content: "Spread past it"; }
  .opts__gspy td { grid-column: 1 / -1; }
  .opts__gspy td::before { content: none; }
  .opts__watch { min-height: 44px; min-width: 44px; }
  .opts__scroll {
    max-height: calc(100vh - var(--bar-h) - 56px - 2 * var(--sp-4));
    max-height: calc(100dvh - var(--bar-h) - 56px - 2 * var(--sp-4));
  }
  /* the chain scrolls sideways on phones: keep the strike column in view at either edge */
  .opts__table .opts__strike-h, .opts__table .opts__strike {
    position: sticky; left: 0; right: 0; z-index: 1; border-inline: 0;
    box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border);
  }
  .opts__table .opts__strike-h { box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
  .opts__table .opts__strike { background: var(--surface); }
  .opts__add .btn { width: 100%; }
  .opts__add .field { flex: 1 1 8rem; min-width: 0; }

  .rules thead { display: none; }
  .rules, .rules tbody { display: block; }
  /* a card per rule: symbol, status and delete on one line, then the condition, then cooldown and last
     alert, which drops whole onto its own line when a timestamp does not fit beside the cooldown */
  .rules tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  }
  .rules tbody tr:last-child { border-bottom: 0; }
  .rules th, .rules td { display: block; height: auto; padding: 0; border: 0; }
  .rules .c-sym { flex: 1 1 auto; }
  .rules .c-status { order: 1; }
  .rules .c-del { order: 2; width: auto; margin-left: calc(var(--sp-3) - var(--sp-4)); }
  .rules .c-cond { order: 3; flex-basis: 100%; }
  .rules .c-cool { order: 4; white-space: nowrap; }
  .rules .c-last { order: 5; }
  .rules .c-cool::before { content: "Cooldown "; color: var(--text-3); }
  .rules .c-last::before { content: "Last alert "; color: var(--text-3); }
}

/* motion contract: hovers fade over 150ms; with reduced motion nothing animates and anchors jump */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* very narrow phones: the full brand name needs the room; stream state stays in the status section. The tab bar's
   floor drops to 36px so a user's eight tabs keep a gap between labels at 360px, and the owner's ten get 9px
   labels on no floor (8.5px at eleven) */
@media (max-width: 24rem) {
  .topbar .badge { display: none; }
  .rail a { min-width: 36px; padding-inline: 0; }
  .rail a:first-child:nth-last-child(n+9), .rail a:first-child:nth-last-child(n+9) ~ a { min-width: 28px; font-size: 10px; }
  .rail a:first-child:nth-last-child(n+10), .rail a:first-child:nth-last-child(n+10) ~ a { min-width: 0; font-size: 9px; letter-spacing: -0.01em; }
  .rail a:first-child:nth-last-child(n+11), .rail a:first-child:nth-last-child(n+11) ~ a { font-size: 8.5px; letter-spacing: -0.02em; }
}

/* client-rendered dashboard: the mount node adds no box, and the focused <main> shows no ring */
#app { display: contents; }
.page:focus { outline: none; }

/* calendar page: one card per day, rows of time and event; sources listed underneath */
.seg--two { grid-template-columns: repeat(2, 1fr); }
.cal__warnings { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cal__day { margin-bottom: var(--sp-3); }
.cal__head { padding: var(--sp-3) var(--card-pad); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
.cal__sitout { margin: var(--sp-3) var(--card-pad); }
.cal__list { list-style: none; margin: 0; padding: 0; }
.cal__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--card-pad); border-bottom: 1px solid var(--border); }
.cal__row:last-child { border-bottom: 0; }
.cal__time { color: var(--text-2); font-size: var(--fs-sm); padding-top: 2px; }
.cal__what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.cal__title { font-weight: var(--fw-medium); color: var(--text); overflow-wrap: anywhere; }
a.cal__title { color: var(--link); }
.cal__row--1 .cal__title { font-weight: 400; color: var(--text-2); }
.cal__tags { display: inline-flex; gap: var(--sp-2); }
.cal__detail { flex-basis: 100%; color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cal__sources { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.cal__sources li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.cal__sources li > span:first-child { min-width: 12rem; }
.cal__sources .badge::before { display: inline-block; }
.cal__error { flex-basis: 100%; font-size: var(--fs-sm); color: var(--down-fg); overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .cal__row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .cal__sources li > span:first-child { min-width: 0; flex-basis: 100%; }
}

/* owner-only trades page */
.page--trades { max-width: 1320px; }
.trades { display: grid; gap: var(--sp-3); }
.trades .page-head { margin-bottom: 0; }
.trades__table th, .trades__table td { padding-inline: var(--sp-3); }
.trades__table td { padding-block: var(--sp-2); vertical-align: top; white-space: nowrap; }
.trades__table td.trades__order { min-width: 16rem; white-space: normal; }
.trades__legs, .trades__execs { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
.trades__legs li { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.trades > .btn { justify-self: start; }
/* owner-only paper bot page */
.page--paper { max-width: 1100px; }
.paper { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.paper .page-head { margin-bottom: 0; }
.paper .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.paper__section { margin-top: var(--sp-3); }
.paper__bots.paper__table th:first-child { min-width: 15rem; white-space: normal; }
.paper__bots :is(th, td):not(:first-child) { text-align: right; }
.paper__up { color: var(--up-fg); }
.paper__down { color: var(--down-fg); }
.paper__curve { margin: 0; }
.paper__curve svg { display: block; width: 100%; height: auto; }
.paper__facts { flex-basis: 100%; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: var(--sp-1) 0 0; }
.paper__facts dt { color: var(--text-2); }
.paper__facts dd { margin: 0; }
.paper__stale { color: var(--warn-fg); }
.paper__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.paper__base { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.paper__axis { fill: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.paper__dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.paper__hit { fill: transparent; }
.paper__pt:hover .paper__dot { r: 6; }
.paper__sides { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.paper__sides li { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.paper__table th, .paper__table td { text-align: left; }
.paper__table td { height: auto; padding-block: var(--sp-2); }
.paper__sub { display: block; }
.paper__notes { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.paper__note--current { padding-left: var(--sp-2); border-left: 3px solid var(--warn-fg); }
.paper__note--resolved, .paper__note--restarted, .paper__note--history { color: var(--text-3); }
.paper__note--resolved strong, .paper__note--restarted strong, .paper__note--history strong { font-weight: var(--fw-regular, 400); }
.paper__avail { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.paper__table td.paper__wrap { white-space: normal; min-width: 16rem; overflow-wrap: anywhere; }
/* on a phone each table row is a block of its own: a heading line, then one labelled value a line */
@media (max-width: 40rem) {
  .paper__table thead { display: none; }
  .paper__table, .paper__table tbody { display: block; min-width: 0; }
  .paper__table tr { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
  .paper__table tbody tr:last-child { border-bottom: 0; }
  .paper__table :is(th, td) { display: block; flex: 1 0 100%; height: auto; padding: 0; border: 0; white-space: normal; text-align: right; }
  .paper__table :is(th, td).paper__head { flex: 0 1 auto; font-weight: var(--fw-bold); text-align: left; }
  .paper__table .paper__head .sub { display: inline; font-weight: 400; }
  .paper__table td[data-label]::before { content: attr(data-label); float: left; margin-right: var(--sp-3); color: var(--text-2); }
  .paper__table td.paper__wrap { min-width: 0; text-align: left; }
  .paper__table td.paper__wrap::before { float: none; display: block; }
  .paper__bots.paper__table th:first-child { flex-basis: 100%; min-width: 0; }
  .paper__bots.paper__table th .sub { display: block; }
  .paper__facts { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .paper__avail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper .opts__scroll { max-height: none; }
}

/* Earnings page (decision 0079): a week of SPY members' earnings by day and session */
.page--earnings { max-width: 1320px; }
.eb { display: grid; gap: var(--sp-4); }
.eb .page-head { margin-bottom: 0; }
.eb__tools { display: grid; gap: var(--sp-2); justify-items: end; }
.eb__sources { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.eb > .note { margin: 0; }
.eb__stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.eb__muted { color: var(--text-3); font-size: var(--fs-sm); font-weight: var(--fw-regular, 400); }
.eb__heavy { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.eb__board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 1100px) { .eb__board { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.eb__day { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e1); }
.eb__day--today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--e1); }
.eb__day--past { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.eb__dayhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.eb__dow { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.eb__md { color: var(--text-2); font-size: var(--fs-sm); }
.eb__daysum { color: var(--text-3); font-size: var(--fs-xs); }
.eb__daysum strong { color: var(--text-2); }
.eb__sess { display: grid; gap: var(--sp-2); }
.eb__sess h4 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.eb__sess h4 .icon { width: 14px; height: 14px; }
.eb__sum { margin-left: auto; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.eb__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.eb__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--r-md); border-left: 3px solid transparent; }
.eb__row:hover { background: var(--hover); }
.eb__row--heavy { background: var(--primary-soft); border-left-color: var(--primary); }
.eb__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: hsl(var(--h) 55% 42%); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; overflow: hidden; }
.eb__id { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); min-width: 0; }
.eb__id .badge { min-height: 18px; padding-inline: 7px; font-size: 10.5px; }
.eb__id .badge::before { display: none; }
.eb__sym { font-size: var(--fs-base); }
.eb__name { flex-basis: 100%; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.eb__cls { color: var(--text-2); }
.eb__w { display: grid; justify-items: end; gap: 3px; font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.eb__row--heavy .eb__w { font-weight: var(--fw-bold); }
.eb__bar { display: block; width: 44px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.eb__bar > span { display: block; height: 100%; min-width: 2px; background: var(--accent-grad); }
.eb__res { font-size: 10.5px; font-weight: var(--fw-medium); }
.eb__res--up { color: var(--up-fg); }
.eb__res--down { color: var(--down-fg); }
.eb__more { display: grid; justify-items: start; gap: 1px; padding: var(--sp-1) var(--sp-2); background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
.eb__more:hover { background: var(--hover); color: var(--text); }
.eb__more-syms { color: var(--text-3); overflow-wrap: anywhere; }
.eb__none { color: var(--text-3); font-size: var(--fs-xs); }
.eb__foot { display: grid; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.eb__foot ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }

/* Timeline: an earnings row's weight in SPY, and today's heavy reporters */
.tl__spy { color: var(--text-2); font-weight: var(--fw-medium); }
.tl__earn { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--primary); background: var(--info-soft); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.tl__earn a { flex: none; }
.tl__next-spy { font-size: var(--fs-sm); }

/* AI digests (owner only, decision 0122): a sticky date column beside the day's digest, which fills the
   viewport height in a sandboxed frame; below 900px the column collapses into a picker row (a native select) */
.page--digests { --dg-fill: calc(100vh - var(--bar-h) - 2 * var(--sp-6)); max-width: 1400px; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@supports (height: 100dvh) { .page--digests { --dg-fill: calc(100dvh - var(--bar-h) - 2 * var(--sp-6)); } }
.page--digests > .dg__all { grid-column: 1 / -1; }
.dg__col { position: sticky; top: calc(var(--bar-h) + var(--sp-6)); display: flex; flex-direction: column; max-height: var(--dg-fill); min-height: 0; }
.dg__colhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-4) var(--card-pad) var(--sp-3); border-bottom: 1px solid var(--border); }
.dg__count { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.dg__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.dg__month { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--card-pad); background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: var(--th-case); letter-spacing: var(--th-track); }
.dg__list { list-style: none; margin: 0; padding: 0; }
.dg__day { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: center; min-height: var(--row-h); padding: var(--sp-2) calc(var(--card-pad) - 3px); border-left: 3px solid transparent; border-bottom: 1px solid var(--border); color: var(--text); transition: background 0.15s; }
.dg__day:hover { background: var(--hover); }
.dg__day[aria-current="page"] { background: var(--primary-soft); border-left-color: var(--primary); }
.dg__day-name { grid-area: 1 / 1 / 2 / 2; font-weight: var(--fw-medium); line-height: 1.3; }
.dg__day-meta { grid-area: 2 / 1 / 3 / 2; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.4; }
.dg__day .badge { grid-area: 1 / 2 / 3 / 3; }
.dg__day--missing { color: var(--text-3); border-left-style: dashed; border-left-color: var(--border-strong); cursor: default; }
.dg__day--missing:hover { background: transparent; }
.dg__day--missing .dg__day-name { color: var(--text-2); font-weight: 400; }
.dg__day--missing .badge { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); }
.dg__day--missing .badge::before { display: none; }
.dg__main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; min-height: var(--dg-fill); }
.dg__main .page-head { margin-bottom: 0; align-items: flex-start; }
.dg__main .page-head > div:first-child { flex: 1 1 18rem; min-width: 0; } /* the sub line wraps before the steps do */
.dg__main .page-head .actions { flex-wrap: nowrap; }
.dg__main h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.dg__frame { display: block; flex: 1 1 auto; width: 100%; min-height: 480px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); } /* the digest's card; digest.css lays its inside out (decision 0124) */
.dg__none { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); min-height: 320px; text-align: center; color: var(--text-2); }
.dg__none h2 { font-size: var(--fs-lg); }
.dg__none-icon .icon { width: 30px; height: 30px; color: var(--text-3); }
.dg__pick { display: none; } /* phone picker; the column replaces it on wide screens */
.page--digests .btn .icon { width: 16px; height: 16px; }
.page--digests .btn--icon { width: var(--ctl-h); padding: 0; }
.page--digests .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.page--digests .btn[aria-disabled="true"]:hover { border-color: var(--border-strong); }
@media (max-width: 56.25rem) {
  .page--digests { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .dg__col, .dg__main .page-head .actions { display: none; }
  .dg__pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: var(--sp-2); }
  .dg__pick .btn { width: 44px; height: 44px; }
  .dg__pick .select { height: 44px; font-size: 16px; }
}
@media (max-width: 40rem) {
  .page--digests { --dg-fill: calc(100vh - var(--bar-h) - 56px - 2 * var(--sp-6)); }
  @supports (height: 100dvh) { .page--digests { --dg-fill: calc(100dvh - var(--bar-h) - 56px - 2 * var(--sp-6)); } }
}