/* ==========================================================================
   charting-v1 design system — extends StockProof's "working paper" system
   (../../stockproof/screener/static/screener/css/app.css) directly: same
   tokens, type, spacing, masthead and card vocabulary, so a user moving
   between the two bundle products in one session sees one visual identity,
   not two. The one deliberate addition is candlestick bull/bear coloring
   (see "candlestick convention" below) -- reusing the SAME --action-primary/--risk
   pair StockProof already uses for portfolio gain/loss, not a new palette.
   Self-hosted fonts vendored locally (../fonts), no CDN.
   ========================================================================== */

/* ---- data font: latin + latin-ext (latin-ext carries the ₹ glyph, U+20B9) ---- */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexMono-400.79936b18df9f.woff2") format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexMono-400-ext.8450d5944de2.woff2") format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexMono-500.b1c8a895f5fd.woff2") format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexMono-500-ext.fa8d8838b94a.woff2") format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- tokens (identical to StockProof's, both palettes) ---- */
:root {
  /* Light is a quiet, warm-neutral workstation surface: enough separation
     for dense ledgers and panes without turning every module into a card. */
  --paper: #EEF1EF;
  --surface: #FBFCFA;
  --surface-muted: #F5F7F5;
  --surface-raised: #FFFFFF;
  --ink: #182231;
  --muted: #7A878C;
  --action-primary: #1392FD;
  --action-ink: #39A5FF;
  --attention: #875710;
  --slate: #5E6D73;
  --rule: #D8DFDB;
  --rule-strong: #C5D0CA;
  --risk: #B74444;
  --on-accent: #FFFFFF;
  --action-rgb: 19,146,253;
  --attention-rgb: 135,87,16;
  --risk-rgb: 183,68,68;
  --ink-rgb: 24,34,49;
  --slate-rgb: 94,109,115;
  --action-soft: rgba(var(--action-rgb), 0.10);
  --attention-tint: rgba(var(--attention-rgb), 0.12);
  --risk-tint: rgba(var(--risk-rgb), 0.10);

  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

  /* Interaction motion is shared by both themes. Keep data values static. */
  --motion-fast: 140ms;
  --motion-standard: 200ms;
  --motion-entrance: 360ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);

  --fs-display: clamp(1.7rem, 1.15rem + 2.2vw, 2.35rem);
  --fs-h2: 1.05rem;
  --fs-body: 1rem;
  --fs-sm: 0.855rem;
  --fs-xs: 0.72rem;
  --fs-stat: clamp(1.9rem, 1.4rem + 1.6vw, 2.35rem);
  --fs-stat-na: 1.4rem;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --r: 3px; --r-lg: 6px;
  /* Content column width for data-dense pages (ledger tables, chart
     canvases, card grids -- everything that isn't prose, see --maxw-prose
     below). 1360px floor unchanged: below that, main already fills the
     viewport (minus --gutter) and nothing here needs to shrink further.
     Above the floor, --gutter (the padding inside this box, clamp(1rem,
     2vw, 2.5rem)) is already the "comfortable margin" -- so this box
     should track close to 100vw itself, not leave a second, larger,
     unrelated margin outside it. The old 78vw/2700px pair left 282px of
     dead space per side at 2560px and 570px per side beyond 2700px
     viewport width (measured) -- the page visibly not using the screen
     on any large monitor. 96vw/3600px keeps the same shape (floor, fluid
     middle, bound so the page never goes true full-bleed) but tracks the
     viewport much more closely: ~51px/side at 2560px, ~120px/side at
     3600px+, both landing in the same --s6/--s7 neighborhood as the
     rest of the spacing scale rather than reading as leftover space.
     Same token, same problem, independently in StockProof's
     screener/app.css -- fixed here on its own terms, not copied byte for
     byte, per this file's own "ported, not shared" design-token rule
     (CLAUDE.md). */
  --maxw: clamp(1360px, 96vw, 3600px);
  --maxw-prose: 46rem;

  /* ---- visual foundation v2 (docs/design-notes-v2.md) ---- */
  /* one step below --paper: a deeper ground plane so primary surfaces (the
     home proof strip, the chart-page rail) sit ON something instead of
     every element sharing one ground. Derived from the same palette, not a
     new hue. */
  --paper-deep: #E7EBE7;
  /* plotting-grid texture for the proof strip -- ink at low alpha, both themes */
  --grid-line: rgba(24, 34, 49, 0.065);
  /* Canvas tokens intentionally do not follow generic surfaces. A chart
     needs a slightly quieter field, visible grid and stronger crosshair. */
  --chart-canvas: #F8FAF9;
  --chart-grid: #DDE4E1;
  --chart-axis: #66757A;
  --chart-crosshair: #5A6A70;
  --chart-scale-border: #C5D0CA;
  /* the two ad-hoc shadows already in use (auth-card, tile hover), promoted
     to tokens so elevation is a system rather than per-rule improvisation */
  --shadow-1: 0 2px 6px rgba(var(--ink-rgb), 0.08), 0 1px 2px rgba(var(--ink-rgb), 0.06);
  --shadow-2: 0 4px 12px -6px rgba(var(--ink-rgb), 0.18);
  /* one horizontal rhythm token shared by masthead + main */
  --gutter: clamp(1rem, 2vw, 2.5rem);
  /* chart-page side rail width: wide enough for the indicator list, capped
     so an ultrawide monitor gives its extra width to the CANVAS, not the rail */
  --rail-w: clamp(20rem, 21vw, 26rem);
  --fs-hero: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);

  color-scheme: light;
  /* Global, not scoped to one control: without this every native form
     control the UA themes itself (range sliders, checkboxes, radios,
     progress bars) renders with the browser's default blue regardless of
     this system's action accent -- the replay scrubber was the visible
     case, but it's a token-system gap, not a replay-bar-specific one.
     accent-color inherits like color, so one declaration here covers every
     current and future native control site-wide; the redundant per-control
     override that used to live on .indicator-toggle input is gone. */
  accent-color: var(--action-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #06131B;
    --surface: #091A24;
    --surface-muted: #0D202A;
    --surface-raised: #0F2530;
    --ink: #E7EEF2;
    --muted: #78909A;
    --action-primary: #1392FD;
    --action-ink: #39A5FF;
    --attention: #E0A430;
    --slate: #91A5B1;
    --rule: #132B36;
    --rule-strong: #274451;
    --risk: #F28B7D;
    --on-accent: #10151E;
    --action-rgb: 19,146,253;
    --attention-rgb: 224,164,48;
    --risk-rgb: 242,139,125;
    --slate-rgb: 148,161,179;
    /* Token bug, fixed at source: this was hardcoded 0,0,0 (light mode's
       --ink, not dark mode's), the one *-rgb token that didn't track its
       own hex value the way --action-rgb/--attention-rgb/--risk-rgb/
       --slate-rgb all do above. It's the source for --shadow-1/--shadow-2
       (see their declaration on :root), so a black-on-near-black shadow
       was producing almost no visible elevation in dark mode -- the
       --grid-line value two lines down already derives --ink's real dark
       RGB (231,234,240) inline; this now uses the same triplet instead of
       silently disagreeing with it. */
    --ink-rgb: 231,234,240;
    --paper-deep: #030D13;
    --grid-line: rgba(231, 234, 240, 0.055);
    --chart-canvas: #091A24;
    --chart-grid: #132B36;
    --chart-axis: #91A5B1;
    --chart-crosshair: #64818C;
    --chart-scale-border: #274451;
    /* candlestick contrast bump (visual foundation v2 refinement, Step 4)
       -- see the comment below --bull/--bear's declaration for why these
       are their own values rather than plain --action-primary/--risk aliases. */
    --bull: #22C55E;
    --bear: #EF4444;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #06131B;
  --surface: #091A24;
  --surface-muted: #0D202A;
  --surface-raised: #0F2530;
  --ink: #E7EEF2;
  --muted: #78909A;
  --action-primary: #1392FD;
  --action-ink: #39A5FF;
  --attention: #E0A430;
  --slate: #91A5B1;
  --rule: #132B36;
  --rule-strong: #274451;
  --risk: #F28B7D;
  --on-accent: #10151E;
  --action-rgb: 19,146,253;
  --attention-rgb: 224,164,48;
  --risk-rgb: 242,139,125;
  --slate-rgb: 148,161,179;
  --ink-rgb: 231,234,240;
  --paper-deep: #030D13;
  --grid-line: rgba(231, 234, 240, 0.055);
  --chart-canvas: #091A24;
  --chart-grid: #132B36;
  --chart-axis: #91A5B1;
  --chart-crosshair: #64818C;
  --chart-scale-border: #274451;
  --bull: #22C55E;
  --bear: #EF4444;
  color-scheme: dark;
}

/* Financial direction is separate from interface emphasis. Candles and
   return values use the positive/negative pair; controls use MarketDeck
   blue through the action and selection tokens. */
:root { --bull: #22C55E; --bull-ink: var(--positive); --bear: #EF4444; --neutral: var(--slate); }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--action-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--action-primary); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
h1 { font-size: var(--fs-display); line-height: 1.08; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--slate); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
code { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; border-radius: 1px; }

input, select, textarea {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
select option, option, optgroup { background-color: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--slate); opacity: 1; }
input:disabled, select:disabled, textarea:disabled, option:disabled { color: var(--slate); opacity: 1; cursor: not-allowed; }

/* ---- masthead: shared nav shell (claude/nav-shell-design-2026-08.md) ----
   Two rows -- .topbar (persistent: mark slot / section switcher / right
   zone) and .subnav (this product's own pages, section-local, one layer
   below). See templates/base.html's own comment for the full rationale;
   this is the CSS half. */
.masthead { background: var(--surface); border-top: 4px solid var(--action-primary); border-bottom: 3px double var(--rule-strong); }
.topbar { width: 100%; margin: 0 auto; padding: var(--s4) var(--gutter); box-sizing: border-box;
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

/* Mark slot: empty until a real cross-product name exists -- a small
   geometric glyph only, deliberately no invented wordmark text (the old
   "■ CHARTING" is retired; "Charting" now lives in .section-switcher
   below). Kept clickable (home link) since a mark occupying this position
   is the universal "take me to this product's home" affordance, same as
   the old wordmark's own behavior. */
.mark-slot { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex-shrink: 0; }
.mark-glyph { width: 12px; height: 12px; background: var(--action-primary); display: inline-block; }

/* Section switcher: Screener / Charting / F&O, same order/presence on
   every page of every product in the bundle. Active = bold filled pill
   in MarketDeck blue with the shared interface typeface. */
.section-switcher { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display); }
.section-link { font-weight: 700; font-size: var(--fs-sm); color: var(--slate); text-decoration: none;
  padding: 0.35rem var(--s4); border-radius: 999px; } /* weight/padding matched to stockproof's/fo-analytics-v1's .section-pill exactly -- was 600/0.9rem, a real visible mismatch */
.section-link:hover { color: var(--ink); background: var(--paper); }
.section-link.section-active { background: var(--action-primary); color: var(--on-accent); font-weight: 800; }
.section-link.section-active:hover { background: var(--action-primary); color: var(--on-accent); }
.section-link.disabled { cursor: default; opacity: 0.6; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); flex-wrap: wrap; }
.account-area { display: flex; align-items: center; gap: var(--s3); }
.account-area a { font-weight: 500; color: var(--ink); text-decoration: none; }
.account-area a:hover { color: var(--action-primary); }
.account-area .who { color: var(--slate); font-family: var(--font-mono); font-size: var(--fs-xs); }
.account-area form { display: inline; margin: 0; }
.account-area .linkish { background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; font-weight: 500; padding: 0; }
.account-area .linkish:hover { color: var(--action-primary); }

/* Symbol chip (right zone, chart.html only -- see base.html's
   topbar_symbol_chip block): local display only, no cross-product
   context-carrying yet (see the spec's build-sequence note). */
.symbol-chip { display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r);
  padding: 0.2rem 0.55rem; }

/* Sub-nav: this product's own pages, one flat row (charting-v1's page
   count doesn't warrant StockProof's Discover/Analyze/Reference grouping
   -- see the spec's own "group sensibly if there's enough to group"
   guidance). Reuses the exact active/hover treatment the top-level nav
   used to have, one level down from where it used to live. */
.subnav { border-top: 1px solid var(--rule); padding: var(--s3) var(--gutter);
  display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); flex-wrap: wrap; }
.subnav a { font-weight: 500; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s1);
  padding-bottom: 0.2rem; box-shadow: 0 2px 0 0 transparent; }
.subnav a:hover { color: var(--action-primary); }
.subnav a.active { color: var(--action-ink); font-weight: 700; box-shadow: 0 2px 0 0 var(--action-primary); }

/* nav light/dark toggle -- a quiet segmented control, same shape as
   StockProof's own currency/theme toggles (screener/static/screener/css/
   app.css's .unit-toggle) so the two products' masthead controls read as
   one system. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 0.05rem 0.2rem 0.05rem 0.3rem; background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.4;
}
.theme-toggle .theme-tag { color: var(--slate); margin-right: 0.1rem; }
.theme-toggle .theme-opt {
  padding: 0.02rem 0.3rem; border-radius: 2px; color: var(--slate);
  text-decoration: none; font-weight: 500;
}
.theme-toggle a.theme-opt:hover { color: var(--action-primary); background: var(--paper); }
.theme-toggle .theme-opt.active { background: var(--ink); color: var(--surface); }

.nav-toggle { display: none; margin-left: auto; background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.1rem; height: 2px; background: var(--ink); }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* ---- layout ---- */
/* main is a size container (visual foundation v2): page layouts respond to
   the width they ACTUALLY have via @container queries -- deliberate,
   explicit sizing logic, not viewport guesses filtered through max-width
   math. Browsers without container-query support simply never activate the
   wide-layout rules and keep the stacked layout, which is correct. */
main { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7);
  container-type: inline-size; container-name: page; }
.page-head { margin-bottom: var(--s5); }
/* Two-column header (chart.html only) -- mirrors StockProof's own
   company_detail.html .detail-head: an .ident block (kicker/h1/captions)
   left, a per-record links/actions block right, wrapping to stack on a
   narrow container rather than a fixed breakpoint. A page-scoped modifier
   rather than making .page-head itself flex: every other .page-head user
   (scans/list.html, watchlist/list.html, scans/form.html, ...) puts h1 and
   .sub as DIRECT children with no wrapping .page-head-ident div, and those
   rely on .page-head's default block stacking -- turning .page-head itself
   into a flex row would put their kicker/h1/sub side by side instead of
   stacked. */
.page-head--split { display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s4) var(--s5); }
.page-head-ident { flex: 1 1 20rem; }
/* Same role StockProof's .detail-head .action fills, minus the mutating
   buttons -- charting-v1 has no per-chart watchlist toggle (that lives on
   the watchlist page instead), so this holds the one thing that already
   existed and already fit: the cross-product links. Right-aligned to
   match that precedent, both on the shared row and on its own row once
   flex-wrap stacks it below .page-head-ident on a narrow container. */
.page-head-links { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--s1); color: var(--slate); font-size: var(--fs-sm); margin-top: var(--s1); text-align: right; }
.page-head-links a { white-space: nowrap; }
/* the "instrument label" annotation voice -- the mono/uppercase/tracked
   style the system already uses for field labels, table heads and legends,
   named once so new work stops improvising its metrics */
.anno { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--slate); }
/* mono overline above a page h1 -- gives every page-head the same two-deck
   anatomy the masthead already has */
.kicker { display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); margin-bottom: var(--s2); }
.sub { color: var(--slate); font-size: var(--fs-sm); max-width: var(--maxw-prose); }
.page-head .sub { margin-top: var(--s2); }

/* Chart-page typographic hierarchy (visual foundation v2 refinement, Step
   5): the symbol (h1) and its current price are the primary thing this
   page is about, so the price reads at the same headline weight the
   system already uses for a summary-tile's stat (.tile-value) -- not
   competing with h1, but not a caption either. Everything else in
   .page-head (.kicker above, .sub captions/timestamps/links below)
   already reads as secondary via the existing kicker/.sub treatment;
   this is the one primary element that was missing entirely, previously
   readable only off the chart canvas's own small axis label. */
.chart-price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
  line-height: 1.05; color: var(--ink); margin: var(--s1) 0 0; font-variant-numeric: tabular-nums; }
.chart-price:empty { margin: 0; }
.chart-price-delta { font-size: var(--fs-sm); font-weight: 600; margin-left: var(--s2); }
.prose, .empty-note, .help, .limitation-note { max-width: var(--maxw-prose); }
.backlink { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }
.backlink:hover { color: var(--action-primary); }

/* ---- flash messages ---- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.messages li { padding: var(--s3) var(--s4); border-radius: var(--r); margin-bottom: var(--s2);
  font-size: var(--fs-sm); border: 1px solid var(--rule); background: var(--surface); border-left: 3px solid var(--slate); }
.messages li.success { border-left-color: var(--success); background: var(--success-soft); }
.messages li.error { border-left-color: var(--risk); background: var(--risk-tint); }
.messages li.info { border-left-color: var(--attention); background: var(--attention-tint); }

/* ---- buttons ---- */
.btn, .btn-ghost { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.5rem 1.1rem; border-radius: var(--r); cursor: pointer; height: 2.25rem;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: none; }
.btn { background: var(--action-primary); color: var(--on-accent); border: 1px solid var(--action-ink); font-weight: 600; }
.btn:hover { background: var(--action-ink); }
.btn-ghost { background: transparent; color: var(--slate); border: 1px solid var(--rule-strong); font-weight: 500; }
.btn-ghost:hover { background: var(--paper); border-color: var(--slate); color: var(--ink); }
.btn-small { font-family: var(--font-mono); font-size: var(--fs-xs); background: transparent;
  border: 1px solid var(--rule-strong); color: var(--ink); border-radius: var(--r);
  padding: 0.22rem 0.55rem; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; }
.btn-small:hover { background: var(--paper); border-color: var(--slate); }
/* A real press response on all three button variants, not just a hover
   swap -- a button that only changes on hover gives no feedback to a touch
   tap (no hover state on touch) or a fast mouse click. Lives only on
   :active, so it releases the instant the click/tap lifts. Guarded by the
   prefers-reduced-motion block right below, same convention this file
   already uses per-component (see e.g. .rail-panel-chevron/.info-bubble). */
.btn, .btn-ghost, .btn-small { transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease; }
.btn:active { background: var(--action-ink); transform: scale(0.96); }
.btn-ghost:active { background: var(--paper); border-color: var(--slate); transform: scale(0.96); }
.btn-small:active { background: var(--paper); border-color: var(--slate); transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .btn-small { transition: none; }
}

/* Cross-product deep links (charts/cross_links.py) -- previously bare <a>
   tags with no class at all, sitting unstyled on the page background (the
   thing the founder flagged as "looks like shit... forget interactive").
   .btn-small fits this row: compact, multiple links can sit side by side
   without competing for primary-action attention the way full .btn/.btn-
   ghost would. */
.page-head-links { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.page-head-links a { text-decoration: none; }
/* v1.2 item 9: touch tap targets, not just narrow-viewport layout --
   (pointer: coarse) is the correct media feature for this (a touch/pen
   input, regardless of window width) rather than max-width, which this
   codebase's earlier mobile passes already used for LAYOUT and would be
   the wrong tool here: a desktop browser resized narrow has no touch
   input to make room for, and a touch device isn't always narrow (a
   tablet in landscape). At ~30px tall (0.22rem padding + line-height),
   .btn-small -- "Clear all drawings", every drawing's own Remove/Edit --
   sat well under the ~44px minimum recommended for a finger (Apple HIG /
   Material Design both land in the 44-48px range); this is the one
   shared component behind that button everywhere it appears (watchlist,
   layouts, drawings list alike), so sizing it up here is the correct
   place to do it once rather than a drawing-tools-only duplicate. */
@media (pointer: coarse) {
  .btn-small { padding: 0.55rem 0.8rem; min-height: 2.75rem; }
}

/* ---- forms: field-row + auth-card ("credentials slip") ---- */
.auth-card { max-width: 24rem; background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--r); padding: var(--s5); position: relative; margin-top: var(--s4);
  box-shadow: var(--shadow-1); }
.auth-card.wide { max-width: none; }
/* The Replay control strip (v1.2 item 7): same box, tighter padding and no
   shadow -- it's a row of interactive controls, not a form-style card,
   now that its explanatory paragraph moved behind a tooltip (below). */
.auth-card.compact-card { padding: var(--s3) var(--s4); box-shadow: none; }
.auth-card.compact-card legend { display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--slate); padding: 0 var(--s2); }
.field-row { margin-bottom: var(--s4); }
.field-row label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); margin-bottom: var(--s1); }
.field-row input, .field-row select, .field-row textarea { width: 100%; background: var(--paper); border: 1px solid var(--rule-strong);
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-sm); padding: 0.5rem 0.6rem; border-radius: var(--r); box-sizing: border-box; }
.field-row textarea { font-family: var(--font-mono); }
.field-row input:hover, .field-row select:hover, .field-row textarea:hover { border-color: var(--slate); }
.help { font-size: var(--fs-xs); color: var(--slate); margin-top: var(--s1); display: block; line-height: 1.4; }
.auth-card .btn { width: 100%; margin-top: var(--s2); }
.auth-alt { color: var(--slate); font-size: var(--fs-sm); margin-top: var(--s4); }
.errorlist { color: var(--risk); font-size: var(--fs-xs); list-style: none; padding: 0; margin: var(--s1) 0 0; }
.cooldown-note { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--attention);
  background: var(--attention-tint); border: 1px solid rgba(var(--attention-rgb),0.45);
  border-left: 3px solid var(--attention); border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }

/* ---- ledger table ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); }
table.ledger { width: 100%; border-collapse: collapse; min-width: 480px; }
table.ledger thead th { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate);
  text-align: left; padding: var(--s3) var(--s3); white-space: nowrap;
  border-bottom: 3px double var(--rule-strong); background: var(--surface); }
table.ledger thead th.num { text-align: right; }
table.ledger tbody td { padding: var(--s3) var(--s3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); vertical-align: baseline; }
table.ledger tbody tr:last-child td { border-bottom: none; }
table.ledger tbody tr:hover td { background: var(--action-soft); }
table.ledger tbody tr.matched td { background: var(--action-soft); }

/* ---- cards: paper-card (stat) + summary-tile (headline stat) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); margin: var(--s4) 0; }
.summary-tile { background: var(--surface); border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--action-primary); border-radius: var(--r); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2); }
.summary-tile:hover { box-shadow: var(--shadow-2); }
.summary-tile .tile-label { font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.03em; color: var(--slate); text-transform: uppercase; }
.summary-tile .tile-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
  line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-tile .tile-value.gain { color: var(--positive); }
.summary-tile .tile-value.loss { color: var(--risk); }
.gain { color: var(--positive); }
.loss { color: var(--risk); }

/* ---- breadth: a plain fraction-filled bar under a summary-tile, nothing
   more -- no gauge widget, no charting library. The filled portion is the
   percentage the tile already states as a number; the bar is a restatement,
   not a second source of truth. */
.tile-bar { height: 6px; border-radius: 3px; background: var(--rule); margin-top: var(--s1); overflow: hidden; }
.tile-bar-fill { height: 100%; background: var(--action-primary); border-radius: 3px; }

/* ---- alert / caveat box (StockProof's .factor-alert treatment): a
   limitation that must be READ, never collapsed behind a <details> --
   used for the "not a recommendation" line and the autocorrelation caveat. ---- */
.alert-box { border: 1px solid rgba(var(--risk-rgb), 0.35); border-left: 4px solid var(--attention);
  background: var(--attention-tint); border-radius: var(--r); padding: var(--s3) var(--s4);
  margin: var(--s4) 0; font-size: var(--fs-sm); color: var(--ink); }
.alert-box.risk { border-left-color: var(--risk); background: var(--risk-tint); }
.alert-box strong { color: var(--ink); }
.empty-note, .partial-note { color: var(--slate); font-size: var(--fs-sm); background: var(--surface);
  border: 1px dashed var(--rule-strong); border-radius: var(--r); padding: var(--s5); }
.error-note { background: var(--risk-tint); border: 1px solid rgba(var(--risk-rgb),0.45);
  border-left: 3px solid var(--risk); padding: var(--s3) var(--s4); border-radius: var(--r); color: var(--ink); }

/* ---- definition / footnote line ---- */
.definition { color: var(--slate); font-size: var(--fs-xs); margin: var(--s2) 0 var(--s4); }

/* ---- distribution table (backtest return histogram) ---- */
table.dist-table { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
table.dist-table th { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); text-align: left; padding: var(--s2) var(--s3);
  border-bottom: 2px solid var(--rule-strong); }
table.dist-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); vertical-align: middle; }
.dist-bar-cell { width: 55%; }
.dist-bar-track { background: var(--paper); border-radius: 3px; overflow: hidden; height: 0.85rem; }
.dist-bar { background: var(--action-primary); height: 100%; border-radius: 3px; }

/* ---- scan builder: available-names reference panel ---- */
.names-ref { font-size: var(--fs-sm); }
.names-ref h2 { font-size: var(--fs-xs); margin: 0 0 var(--s2); }
.names-ref ul { list-style: none; margin: 0; padding: 0; }
.names-ref li { padding: 0.15rem 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate); }
.panel-pair { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-start; }
/* The scan-builder form (scans/form.html) is the one .panel-pair user with
   an actual form card, not a rail panel -- `max-width: none` here let it
   grow to fill whatever space was left beside .names-ref on a wide
   viewport, which read as one small card lost in a mostly-empty page
   rather than the compact, capped card every other .auth-card is. Capped
   at --maxw-prose (the existing content-width token, not a new value)
   instead of removed outright: wide enough for the rule textarea to
   breathe, narrow enough to still read as a card. */
.panel-pair > .auth-card { flex: 1 1 320px; max-width: var(--maxw-prose); margin-top: 0; }
.panel-pair > .names-ref { flex: 0 0 16rem; }
/* .auth-card .btn's width:100% is right for a narrow "credentials slip"
   (login, register, watchlist-add) where the card itself is ~24rem --
   full-width there reads as one clear call to action. At the wider cap
   above, the same rule produced one heavy full-width primary button next
   to a comparatively small form. Right-sized back to how buttons size
   everywhere else in the product (scans:list's "New scan", the toolbar
   buttons): inline, content-width, not a stretched block. */
.panel-pair > .auth-card .btn { width: auto; margin-top: var(--s3); }

/* ---- chart page ---- */
#fundamentals-panel { margin: var(--s4) 0 0; }
#fundamentals-panel summary { font-family: var(--font-display); font-weight: 700; cursor: pointer;
  color: var(--ink); }
#fundamentals-panel summary::marker { color: var(--slate); }
#fundamentals-content { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.fundamentals-row { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.fundamentals-row:last-child { border-bottom: none; }
.fundamentals-label { color: var(--slate); font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em; align-self: center; }
.fundamentals-value { font-family: var(--font-mono); text-align: right; }
#scan-performance-panel { margin: var(--s4) 0; }
#scan-performance-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
#scan-performance-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
#scan-performance-list li:last-child { border-bottom: none; }
.scan-performance-name { font-weight: 700; }
.scan-performance-stats { font-size: var(--fs-sm); color: var(--slate); }
/* ---- compact control strip (v1.2 item 7): chart-type/timeframe/Renko +
   the fullscreen toggle in one row, all sized like #fullscreen-toggle
   already was -- no stacked .field-row block label, an .sr-only label
   instead (the same pattern #replay-speed already used). See
   docs/chart-rail-collapse-proposal.md. ---- */
#chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
#chart-toolbar .control-chip { display: flex; align-items: center; gap: var(--s2); }
#chart-toolbar select, #chart-toolbar input[type="number"], #chart-toolbar input[type="text"] {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: 0.4rem 0.6rem; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); cursor: pointer; }
#chart-toolbar input[type="number"] { width: 5rem; cursor: text; }
#chart-toolbar input[type="text"] { width: 11rem; cursor: text; }
#chart-toolbar select:hover, #chart-toolbar input[type="number"]:hover, #chart-toolbar input[type="text"]:hover {
  border-color: var(--action-primary); color: var(--action-ink); }
#chart-toolbar input[type="text"]:focus { border-color: var(--action-primary); outline: none; }
/* fullscreen-toggle is the row's last child regardless of the Renko chip's
   hidden/shown state, and stays pinned to the strip's right edge either way */
#fullscreen-toggle { margin-left: auto; }
#renko-settings { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* Compare mode's chip (docs/compare-mode-proposal.md): the server's
   coverage note ("171 of 6,629 bars paired ...") or its plain reason when
   nothing can be drawn, in the same annotation voice as the legend tags;
   an error is the product's --risk tone, an active comparison the ink. */
#compare-form { flex-wrap: wrap; }
.compare-status { font-size: var(--fs-xs); color: var(--slate); max-width: 34rem; line-height: 1.3; }
.compare-status:empty { display: none; }
.compare-status--active { color: var(--ink); }
.compare-status--error { color: var(--risk); }
/* the display:flex above outweighs the UA's [hidden]{display:none}, so the
   attribute chart.js toggles (renkoSettings.hidden = !isRenko) never
   actually hid the row -- restate it at higher specificity */
#renko-settings[hidden] { display: none; }
#replay-controls { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
#replay-controls button { font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 0.4rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); cursor: pointer; }
#replay-controls button:hover:not(:disabled) { border-color: var(--action-primary); color: var(--action-ink); }
#replay-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
#replay-controls select, #replay-controls input[type="date"] { width: auto; }
#replay-scrubber { flex: 1 1 12rem; min-width: 8rem; }
#replay-status { font-size: var(--fs-xs); color: var(--slate); white-space: nowrap; }
.indicator-toggle:has(input:disabled) { opacity: 0.5; }
#drawing-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }
#drawing-toolbar button:disabled:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ---- collapsible rail panels (v1.2 item 5): native <details>, closed by
   default -- see docs/chart-rail-collapse-proposal.md. Shared chrome for
   both #indicator-toggles and #drawing-toolbar-card, now <details
   class="rail-panel"> rather than a permanently-expanded <fieldset>. ---- */
.rail-panel { border: 1px solid var(--rule-strong); background: var(--surface);
  border-radius: var(--r); }
/* <summary> DELIBERATELY keeps its native display (list-item) rather than
   becoming display:flex directly -- that was tried first and it broke
   native keyboard activation: Enter/Space stopped toggling the <details>
   even though the element stayed focusable and mouse clicks still worked
   (confirmed live -- a real, narrow Chromium quirk where changing a
   <summary>'s own display away from list-item silently drops its default
   keydown handling, not just its marker). list-style:none suppresses the
   native disclosure triangle WITHOUT changing display, which keeps that
   native behavior intact; the actual icon-first row layout lives on the
   inner .rail-panel-summary-row span instead. */
.rail-panel > summary { list-style: none; cursor: pointer; user-select: none;
  padding: var(--s2) var(--s3); color: var(--ink); }
.rail-panel > summary::-webkit-details-marker { display: none; }
.rail-panel > summary:hover { color: var(--action-ink); }
.rail-panel > summary:focus-visible { outline: 2px solid var(--action-primary); outline-offset: -2px; }
/* v1.2 item 9: this row IS how a touch user reaches the drawing-tools
   panel at all (it's collapsed by default -- see the rail-collapse work).
   Full-width already makes it a forgiving target horizontally; this adds
   the same vertical headroom .btn-small/#drawing-toolbar button get. */
@media (pointer: coarse) {
  .rail-panel > summary { padding: var(--s3) var(--s3); min-height: 2.75rem; }
}
.rail-panel-summary-row { display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  text-transform: uppercase; white-space: nowrap; }
.rail-panel-icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--slate); }
.rail-panel-title { flex: 1 1 auto; }
.rail-panel-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--slate);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.05rem 0.5rem; font-size: var(--fs-xs); }
.rail-panel-chevron { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; color: var(--slate);
  transition: transform 0.15s ease; }
.rail-panel[open] > summary .rail-panel-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .rail-panel-chevron { transition: none; } }
.rail-panel-body { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); }

/* Always a single vertical list -- the rail is narrow in every layout
   (stacked or workbench), so there is no width at which a wrapping tag-
   cloud reads better than a plain settings list, and (per the proposal)
   dropping the wrap entirely is what fixes the rail's horizontal-overflow
   bug at its root: a column-direction flex container that's ALSO wrap-
   capable starts a second column instead of scrolling vertically the
   moment its height is constrained by its own parent (#chart-rail's
   max-height) -- see the bug's traced mechanism in the proposal doc. */
#indicator-toggles .rail-panel-body { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--s2); }
.indicator-toggle { display: flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-sm); font-weight: 400; color: var(--ink); }
.indicator-toggle label { display: inline-flex; align-items: center; }
.indicator-toggle input { margin-right: var(--s2); }
/* The Mansfield RS coverage note (chart.html / chart.js's
   updateRelativeStrengthNote) sits on its own row under the toggle, not
   inline beside the label where it would squeeze the label into three
   lines. Scoped to the one toggle that carries a note so the wrap cannot
   affect any other row. */
.indicator-toggle:has(#mansfield-rs-note) { flex-wrap: wrap; }
#mansfield-rs-note { flex-basis: 100%; margin: 0; }

/* Indicator captions (visual foundation v2 refinement, Step 2): every
   caption's full text is kept verbatim -- it documents a real, deliberate
   convention decision (Aroon's 25-vs-14 default, VWAP's anchored-not-
   intraday caveat, Ichimoku's truncation note, ...) -- just relocated
   behind a small info icon instead of sitting as permanent paragraph text
   under every checkbox. CSS-only disclosure (:hover for a mouse,
   :focus-within so a keyboard Tab or a touch tap -- which focuses the
   button -- reveals it too, and blurring/tapping elsewhere hides it
   again) -- no JS needed, matching this page's other no-JS disclosures
   (the mobile nav toggle aside, which needs its aria-expanded state
   tracked). The icon sits OUTSIDE the <label> (a sibling, not nested
   inside it) specifically so clicking it doesn't also toggle the
   indicator's own checkbox -- a <button> nested inside a <label for>
   would double-fire the checkbox's default click-forwarding behavior. */
.info-tip { position: relative; display: inline-flex; }
.info-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--slate); font-family: var(--font-mono);
  font-style: italic; font-size: 0.65rem; line-height: 1; padding: 0; cursor: help;
  position: relative; }
.info-icon:hover, .info-icon:focus-visible { border-color: var(--action-primary); color: var(--action-ink); }
/* v1.2 item 9: the visible "i" badge stays small (growing it to a full
   44px circle inline with checkbox/legend text would look absurd) --
   instead an invisible ::after pseudo-element expands the actual
   TAPPABLE area around it. A pseudo-element is hit-tested as part of its
   own element, so this genuinely enlarges what registers as "tapped the
   icon", not just what's painted. See .btn-small's comment above for why
   (pointer: coarse), not a width breakpoint. */
@media (pointer: coarse) {
  .info-icon::after { content: ""; position: absolute; inset: -0.85rem; }
}
.info-bubble { position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 5;
  width: max-content; max-width: min(22rem, calc(100vw - 3rem)); background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; line-height: 1.45;
  padding: var(--s2) var(--s3); border-radius: var(--r); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-2px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease; }
.info-tip:hover .info-bubble, .info-tip:focus-within .info-bubble { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .info-bubble { transition: none; } }

/* An explicit CSS height in EVERY state is what makes chart sizing
   deliberate rather than emergent (the fullscreen work's core finding --
   see the item-6 report): without a rule here, #chart-container's normal-
   mode size is whatever the chart library's autoSize wrapper last set it
   to, so exiting fullscreen had no external size to shrink back to and
   the canvas silently stayed fullscreen-sized. Every state (normal,
   fullscreen, workbench) therefore sets height in CSS, and autoSize's
   ResizeObserver tracks it.

   The value is viewport-relative (visual foundation v2): 58dvh means a
   tall monitor finally gets a TALL chart instead of a fixed 480px
   letterbox that only ever got wider; the 420px floor keeps small
   laptops at least as usable as the old fixed value, and the 900px cap
   stops a portrait/4K monitor from pushing every control off-screen.
   chart.js's createChart({height: 480}) is only the pre-first-layout
   value; autoSize takes over from this rule immediately. */
#chart-container { margin-top: var(--s4); border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); overflow: hidden; height: clamp(420px, 58dvh, 900px); }

/* ---- chart workbench (visual foundation v2): canvas column + rail ----
   Once the page container is wide enough, #chart-workspace stops being a
   vertical stack and becomes a two-region grid: the canvas column keeps
   everything that manipulates the chart directly (type/timeframe/replay/
   the canvas itself), and the rail holds reference-and-settings panels
   (indicators, drawing tools, fundamentals, scan performance). Extra
   width on a wide monitor buys MORE VISIBLE CONTENT AT ONCE, never a
   wider letterbox. Below the threshold nothing here applies and the
   stacked layout is exactly the pre-v2 one. */
@container page (min-width: 1200px) {
  /* fit-content(--rail-w), not a flat var(--rail-w): a FIXED column width
     would hold the rail at the same ~21vw regardless of whether its
     panels are collapsed or expanded, defeating the point of collapsing
     them -- two ~40px "Indicators 17 >" / "Drawing tools 7 >" summary
     rows don't need the same width a 17-row checkbox list does.
     fit-content sizes the column to what its content actually needs, up
     to the --rail-w cap: narrow with both panels collapsed (the default),
     growing back to --rail-w the moment a panel is expanded and its
     content needs the room. This is what makes the canvas column
     genuinely dominate the fullscreen viewport by default, not just the
     rail's vertical space. */
  #chart-workspace { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(var(--rail-w));
    gap: var(--s5); align-items: start; }
  /* the rail scrolls independently and stays put while the user works the
     chart -- a workbench, not a page */
  /* overflow-x:hidden is deliberate, not the implicit "one axis non-
     visible forces the other to auto" behavior overflow-y:auto alone
     would give: an .info-bubble tooltip (position:absolute, opacity:0/
     visibility:hidden until hover) still occupies its full ~22rem layout
     box even while invisible, and CSS visibility/opacity never remove an
     element from layout -- so with only overflow-y set, that inert box
     was inflating #chart-rail's scrollWidth and producing a permanent
     horizontal scrollbar for content nobody could see (confirmed live:
     scrollWidth 561px in a ~305px rail, entirely from indicator captions'
     tooltip boxes, not from the checkbox list itself -- see
     docs/chart-rail-collapse-proposal.md's follow-up note). Explicit
     overflow-x:hidden clips a rarely-hovered tooltip at the rail's edge
     instead of leaving a permanent scrollbar for content that's normally
     invisible -- the right trade-off between the two. */
  #chart-rail { position: sticky; top: var(--s4);
    max-height: calc(100dvh - var(--s6)); overflow-y: auto; overflow-x: hidden; }
}
/* the rail's own gap is the spacing system for its panels, in stacked and
   workbench mode alike -- zero out the panels' standalone margins */
#chart-rail { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; margin-top: var(--s4); }
#chart-rail > *, #chart-rail #fundamentals-panel, #chart-rail #indicator-toggles { margin-top: 0; margin-bottom: 0; }
/* THE OVERFLOW FIX (v1.2 items 5/7 -- see docs/chart-rail-collapse-
   proposal.md): #chart-rail is itself a column-direction flex container
   with a max-height (above). Flex items default to flex-shrink:1, so
   without this, the rail's own overflow-y:auto never gets to do its job
   -- the flexbox algorithm SQUEEZES each panel's height to fit first,
   which is what turned #indicator-toggles' internal wrap-capable layout
   into a silent second column (confirmed live: scrollWidth 561px in a
   346px box). flex-shrink:0 makes every panel keep its natural height,
   so "more content than fits" is always the rail's scrollbar's problem,
   never an invisible shrink. */
#chart-rail > * { flex-shrink: 0; }
#chart-main { min-width: 0; }
@container page (min-width: 1200px) {
  #chart-rail { margin-top: 0; }
}

/* ---- fullscreen chart toggle (v1.2 item 6) ---- */
#fullscreen-toggle { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); cursor: pointer; }
#fullscreen-toggle:hover { border-color: var(--action-primary); color: var(--action-ink); }

/* #chart-workspace itself lays out normally (no rules needed) until
   .is-fullscreen is toggled on it -- see chart.js's applyFullscreenUI.
   position: fixed lifts it out of <main>'s max-width/padding entirely, so
   it always fills the true viewport regardless of page layout.

   #chart-container gets an explicit height (75dvh) rather than a flexbox
   flex-grow share of whatever's left after its siblings -- a first attempt
   at this used flex: 1 1 auto, and on a real ~720px-tall viewport with
   several controls (chart-toolbar, chart-controls, replay, indicator
   toggles, events-status, drawing toolbar) all wanting their natural
   height, the combined total exceeded the viewport, so flex-shrink pulled
   the canvas down to its min-height FLOOR (256px) -- SMALLER than the
   normal-layout 480px default, the opposite of what "fullscreen" should
   do. A direct height keeps the canvas a guaranteed, generous size on any
   real screen regardless of how many controls are stacked around it; if
   they don't all fit in the remaining ~25dvh, #chart-workspace's own
   overflow-y: auto makes them reachable by scrolling instead of stealing
   space from the canvas. #chart-container has no CSS height of its own in
   the normal (non-fullscreen) layout above -- see chart.js's
   createChart({autoSize:true}) comment and the 3dcca20 fix it documents --
   so this height change is exactly what gives the container's
   ResizeObserver something new to observe; autoSize.js does the rest. */
#chart-workspace.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  /* Tighter than the normal-mode workbench gutter/grid-gap (--s5) --
     fullscreen's whole point is maximizing real screen use, so the margin
     given up to breathing room is deliberately smaller here specifically
     (not changed globally: the normal workbench keeps its roomier
     spacing). The higher-specificity #id.class selector overrides the
     plain #id workbench gap rule regardless of source order. */
  padding: var(--s4);
  gap: var(--s4);
  overflow-y: auto;
  height: 100vh;
  height: 100dvh; /* mobile browsers resize the *viewport*, not just hide/show chrome over a fixed 100vh -- see the item-6 report's mobile findings */
}
#chart-workspace.is-fullscreen #chart-toolbar { margin-bottom: var(--s2); }
#chart-workspace.is-fullscreen #chart-container,
#chart-workspace.is-fullscreen #data-unavailable {
  height: 75vh;
  height: 75dvh;
  min-height: 20rem; /* floor so a short/landscape mobile viewport never collapses the canvas to near-0 -- see the item-6 report's mobile findings */
}

/* Page chrome that stays OUTSIDE #chart-workspace (see chart.html) hides
   while it's fullscreen, and the page itself stops scrolling behind the
   fixed overlay. */
body.chart-fullscreen-active { overflow: hidden; }
body.chart-fullscreen-active .masthead,
body.chart-fullscreen-active .page-head,
body.chart-fullscreen-active #events-disclosure,
body.chart-fullscreen-active #fundamentals-panel,
body.chart-fullscreen-active #scan-performance-panel { display: none; }

#events-status { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.event-status-line { padding: var(--s2) var(--s3); border-radius: var(--r); font-size: var(--fs-sm);
  font-family: var(--font-mono); border: 1px solid var(--rule); }
.linkish { background: none; border: none; color: var(--action-ink); cursor: pointer; font: inherit;
  padding: 0; text-decoration: underline; }
.linkish:hover { color: var(--action-primary); }
.watch-badge { display: inline-block; margin-right: var(--s2); padding: 0.05rem 0.4rem; border-radius: var(--r);
  background: var(--action-soft); border: 1px solid rgba(var(--action-rgb),0.4); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-xs); }
.event-status-available { background: var(--success-soft); border-color: rgba(var(--positive-rgb),0.4); color: var(--success); }
.event-status-unconfirmed_symbol { background: var(--attention-tint); border-color: rgba(var(--attention-rgb),0.4); color: var(--ink); }
.event-status-unavailable { background: var(--risk-tint); border-color: rgba(var(--risk-rgb),0.4); color: var(--ink); }
/* Structurally not applicable to this instrument (an index has no
   dividends/PIT filings/bulk deals) -- deliberately NOT in the
   available/attention/risk tint family those three sit in. Those three are
   fetch outcomes on a scale from fine to broken; this one isn't on that
   scale at all, so it reads as quiet, neutral chrome (dashed rule, muted
   ink) rather than as a milder shade of "something went wrong". */
.event-status-not_applicable { background: var(--paper); border-style: dashed;
  border-color: var(--rule-strong); color: var(--slate); }

#drawing-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
#drawing-toolbar button { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); cursor: pointer; }
#drawing-toolbar button:hover { border-color: var(--action-primary); color: var(--action-ink); }
#drawing-toolbar button.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* v1.2 item 9: these seven ARE the drawing tools -- the one tap target
   this whole feature most needs to get right on a touch device. Same
   (pointer: coarse) reasoning as .btn-small's comment above. */
@media (pointer: coarse) {
  #drawing-toolbar button { padding: 0.7rem 0.9rem; min-height: 2.75rem; }
}
#drawing-hint { font-size: var(--fs-xs); color: var(--slate); font-family: var(--font-mono); min-height: 1.2em; margin-top: var(--s3); }

#drawings-panel { display: flex; gap: var(--s6); align-items: flex-start; flex-wrap: wrap; margin-top: var(--s4); }
#drawings-list { list-style: none; margin: 0; padding: 0; min-width: 16rem; }
#drawings-list li { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }

/* ---- saved chart layouts (v1.2 item 6) ---- */
#layout-save-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
#layout-save-form .field-row { margin-bottom: 0; flex: 1 1 12rem; }
#layouts-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.layout-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.layout-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-delete-form { margin: 0; }

.ca-badge { display: inline-block; margin-left: var(--s2); padding: 0.05rem 0.4rem; border-radius: var(--r);
  background: var(--attention); color: var(--on-accent); font-family: var(--font-mono); font-size: var(--fs-xs);
  cursor: pointer; user-select: none; letter-spacing: 0.02em; }

/* ---- home / entry page (visual foundation v2) ----
   .main-bleed lets the home page own its full width: the proof band runs
   edge to edge, and each section re-centers its own content with the
   shared --maxw/--gutter rhythm.

   Real depth zones (depth-polish pass): --paper-deep, previously used only
   for the hero band, now grounds the WHOLE home page content. The masthead
   keeps its own --surface + double-rule border (this file's .masthead), so
   it stays crisply separated at the top; below it, one continuous deep
   zone holds the strip and the cards (.proof-band no longer cuts it off
   with its own hard border-bottom), and both read as elevated --surface
   objects sitting ON that ground -- the figure/ground move the strip
   always made, now applied consistently instead of stopping at the
   band's edge. */
main.main-bleed { max-width: none; padding: 0; background: var(--paper-deep); }
main.main-bleed > .messages { max-width: var(--maxw); margin: var(--s4) auto 0; padding: 0 var(--gutter); }

.proof-band { padding: var(--s7) 0 var(--s5); }
.proof-band-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero-title { font-size: var(--fs-hero); line-height: 1.05; }
.proof-lede { margin: var(--s3) 0 0; max-width: var(--maxw-prose); }

/* Jump-to-chart search (accounts/views.py's jump_to_chart_view): the
   home page's own fix for the confirmed "reaching a chart requires the
   watchlist detour" gap. Reuses .field-row/.btn as-is for the label and
   button, just laid out in one row instead of a stacked auth-card form --
   this is a single-purpose navigation utility, not a data-entry card.
   The input's background is --surface (not .field-row's default --paper)
   to match the figure/ground grammar the rest of this page already
   established: real interactive objects sit as --surface on the
   --paper-deep hero ground, exactly like the strip and the cards below. */
.symbol-jump { margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s3); max-width: var(--maxw-prose); }
.symbol-jump .field-row { margin-bottom: 0; flex: 1 1 16rem; }
.symbol-jump input { background: var(--surface); }
.symbol-jump .btn { flex: 0 0 auto; }

/* the strip itself: real data, drawn like an instrument trace on graph
   paper -- grid lines from the SVG (year boundaries), ink line, blue
   match ticks. See accounts/hero.py for what the numbers are. */
.proof-strip { margin: var(--s6) 0 0; }
/* hero scale (execution pass, technique 5): tall enough that the trace is
   the largest single object on the page, and elevated with --shadow-1 so
   it reads as THE primary object sitting on the --paper-deep ground --
   the same figure/ground move the chart-page rail makes. */
.proof-svg { display: block; width: 100%; height: clamp(220px, 42dvh, 460px);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r);
  box-shadow: var(--shadow-1); }
.proof-grid { stroke: var(--grid-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.proof-line { stroke: var(--ink); stroke-width: 1.75px; }
/* Width/density-aware tick weight (visual foundation v2 refinement, Step
   3): an isolated match keeps a crisp, fully-opaque tick; matches packed
   close together in a dense run (.w2/.w3, computed server-side --
   accounts/hero.py's _weight_class) get progressively thinner and fainter
   so a dense run reads as a soft cluster instead of overlapping into one
   solid filled block. The media query below thins EVERY tick further
   still on a narrow viewport -- the width half of the fix, since a
   non-scaling-stroke tick stays the same few screen pixels wide even as
   the viewBox is squeezed narrower, so the SAME x-spacing (in view units)
   overlaps sooner on a phone than on a desktop. */
.proof-match { stroke: var(--action-primary); stroke-width: 2px; opacity: 1; }
.proof-match.w2 { stroke-width: 1.4px; opacity: 0.72; }
.proof-match.w3 { stroke-width: 1px; opacity: 0.5; }
@media (max-width: 640px) {
  .proof-match { stroke-width: 1.4px; }
  .proof-match.w2 { stroke-width: 1px; opacity: 0.65; }
  .proof-match.w3 { stroke-width: 0.75px; opacity: 0.45; }
}
.proof-years { position: relative; height: 1.4em; margin-top: var(--s1); }
.proof-years span { position: absolute; transform: translateX(3px); white-space: nowrap; }
/* the strip's evidence at stat scale (execution pass, technique 1): the
   measured figures -- bar count, match count -- lead in mono; the
   symbol/rule identifier chips sit at the row's far end (they name what
   is measured, they aren't measurements) and drop under the figures when
   the row wraps on a narrow viewport. */
.proof-figures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4) var(--s6);
  margin: var(--s4) 0 0; }
.proof-figure { display: flex; flex-direction: column; gap: var(--s1); }
.pf-num { font-family: var(--font-mono); font-size: var(--fs-stat); line-height: 1;
  color: var(--ink); display: inline-flex; align-items: baseline; gap: var(--s2); }
.pf-label { color: var(--slate); }
.proof-idchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-left: auto; }
@media (max-width: 640px) { .proof-idchips { margin-left: 0; } }
.proof-chip { display: inline-flex; align-items: baseline; gap: 0.3rem;
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--r);
  padding: 0.25rem 0.6rem; font-size: var(--fs-xs); color: var(--ink); }
code.proof-chip { font-family: var(--font-mono); }
.proof-match-swatch { width: 3px; height: 0.72em; background: var(--action-primary);
  display: inline-block; align-self: center; }
.proof-footnote { margin-top: var(--s3); max-width: var(--maxw-prose); }
.proof-empty { margin-top: var(--s6); }

/* draw-in: the line traces itself, then the match ticks appear -- the
   product's actual order of operations (ingest, then evaluate). Static
   final state under prefers-reduced-motion.

   The dash lives only INSIDE the keyframes, ending on dasharray none:
   with vector-effect: non-scaling-stroke, Chrome computes the dash
   pattern in screen space instead of pathLength units, so a persistent
   stroke-dasharray: 1 leaves the "finished" line as a 1px dotted pattern
   that visually vanishes wherever the path is smooth (found in browser
   verification at 1440/3440). The base rule carries no dash at all, so
   the no-animation path (reduced motion, old browsers) is always solid. */
.proof-line { animation: proof-draw 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both; }
@keyframes proof-draw {
  0%     { stroke-dasharray: 1; stroke-dashoffset: 1; }
  99.99% { stroke-dasharray: 1; stroke-dashoffset: 0; }
  100%   { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.proof-matches { opacity: 0; animation: proof-reveal 0.9s ease 2.9s forwards; }
@keyframes proof-reveal { to { opacity: 1; } }

/* One page-load entrance (execution pass, technique 3): kicker →
   headline → subhead → jump-to-chart search → strip → workspace label →
   cards → session row, each settling in with a short fade + small rise --
   papers onto a desk, not elements sliding in from off-screen. The
   strip's draw-in above is retimed (0.7s delay) to take its place in
   this same sequence, so the page has ONE choreography, not scattered
   animation. Static under prefers-reduced-motion, same rule as the strip
   has always followed. */
.enter { opacity: 0; animation: home-enter 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0s); }
@keyframes home-enter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.enter-1 { --enter-delay: 0s; }
.enter-2 { --enter-delay: 0.09s; }
.enter-3 { --enter-delay: 0.18s; }
.enter-4 { --enter-delay: 0.30s; }
.enter-5 { --enter-delay: 0.42s; }
.enter-6 { --enter-delay: 0.66s; }
.enter-7 { --enter-delay: 0.76s; }
.enter-8 { --enter-delay: 0.86s; }
.enter-9 { --enter-delay: 0.96s; }
.enter-10 { --enter-delay: 1.10s; }

@media (prefers-reduced-motion: reduce) {
  .proof-line { animation: none; }
  .proof-matches { animation: none; opacity: 1; }
  .enter { animation: none; opacity: 1; }
  .ledger-card { transition: none; }
}

/* dead-gap fix (depth-polish pass): the footnote already carries its own
   margin-top, so the band's own bottom padding is trimmed (above) and this
   top padding is trimmed too -- the remaining space is claimed
   deliberately by .home-section-label below, not left empty. */
.home-body { max-width: var(--maxw); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s7); }
.home-section-label { display: block; color: var(--slate); margin: 0 0 var(--s3); }

/* Ledger cards (execution pass, techniques 1/2/4; widened + accented in
   the depth-polish pass): three deliberately UNEQUAL cards, weighted by
   actual importance -- the watchlist is the product's navigation hub
   (CLAUDE.md), scans second, alerts a log you check -- each leading with
   this user's real figure at stat scale (accounts/home_stats.py). A zero
   figure recedes to slate: an honest zero-state, never hidden, never
   faked. Cards rest flat and lift on hover with the existing elevation
   tokens -- no new shadow values.

   The width ratio alone (previously 5:4:3, primary ~1.7x tertiary) read
   as "three similar boxes, mildly resized" rather than a deliberate
   hierarchy -- widened to 7:4:3 (primary ~2.3x tertiary) and paired with
   a single unambiguous marker: a --action-primary top accent bar on the
   PRIMARY card only. One marker on the one card that matters, not
   decoration repeated on all three (which would just relabel "equal"). */
.ledger-cards { display: grid; grid-template-columns: 7fr 4fr 3fr; gap: var(--s4); }
.ledger-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5);
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink); min-height: 9.5rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.ledger-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px);
  border-color: var(--action-primary); }
.ledger-card:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }
.lc-primary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--action-primary); }
.lc-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); }
.lc-figure { font-family: var(--font-mono); font-size: var(--fs-stat); line-height: 1;
  margin-top: auto; }
.lc-primary .lc-figure { font-size: calc(var(--fs-stat) * 1.3); }
.lc-zero { color: var(--slate); }
.lc-meaning { color: var(--slate); }
@media (max-width: 900px) {
  .ledger-cards { grid-template-columns: 1fr; }
  .lc-primary .lc-figure { font-size: var(--fs-stat); }
  .ledger-card { min-height: 0; }
}

.home-session { display: flex; align-items: baseline; gap: var(--s4); margin-top: var(--s6); }
.home-logout { margin: 0; }

/* ---- utility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .panel-pair > .names-ref { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .topbar { padding: var(--s3) var(--s4); }
  .nav-toggle { display: flex; }
  .subnav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .subnav.open { display: flex; }
  main { padding: var(--s5) var(--s4) var(--s6); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- OHLC crosshair legend (chart-experience polish, item 1) ----
   The hovered bar's date / O H L C / volume / change, pinned to the
   canvas's top-left corner -- the position every mainstream charting
   platform puts it, so nothing about it needs learning. It reads in the
   system's existing vocabulary rather than a new one: mono tabular
   numerals for the values (.mono), the .anno annotation voice for the
   O/H/L/C/VOL/CHG captions, and the same .gain/.loss tone the watchlist's
   change column and the header badge use for the change cell. It floats
   over the chart's own surface on a translucent wash of that surface, so
   candles that scroll underneath it stay faintly visible instead of
   being hidden behind an opaque card. pointer-events: none -- it must
   never intercept a hover, click-to-pin or drawing-tool click meant for
   the chart under it. chart.js sets #chart-container position: relative
   (its tooltip needs it too), which is what these absolute offsets
   anchor to. */
.chart-legend { position: absolute; top: var(--s2); left: var(--s2); z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; gap: 0.15rem; padding: var(--s1) var(--s2);
  border-radius: var(--r); background: color-mix(in srgb, var(--surface) 84%, transparent);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  line-height: 1.35; color: var(--ink); max-width: calc(100% - var(--s4)); }
.chart-legend:empty { display: none; }
.chart-legend-row { display: flex; flex-wrap: wrap; column-gap: var(--s3); row-gap: 0.1rem; }
.chart-legend-cell { white-space: nowrap; }
/* The caption inherits .anno's tracked-uppercase-slate voice; only the
   spacing to its value is local. */
.chart-legend-cell .anno { margin-right: 0.35em; }
.chart-legend-date { font-weight: 600; }
/* The context tag beside the date -- timeframe ("weekly", "week ending"),
   a Heikin-Ashi note, "Renko" -- is the same annotation voice as the
   captions, not a second style. */
.chart-legend-tag { color: var(--slate); }
/* The header badge's honest thin-history state (one stored bar, so no
   prior close): the annotation voice, not a gain/loss tone, and inline
   beside the price like the real badge -- .help would break onto its own
   line (display: block). */
.chart-price-delta--na { color: var(--slate); font-weight: 500; font-size: var(--fs-xs); }

/* Single sign-in path (2026-09-03): the factory account is the only way to
   create an account, and the primary way to log in. The product's own
   username/password form survives for pre-pilot accounts and staff, folded
   under a <details> on the login page so it never competes with the one
   button new users should press. */
.auth-legacy { margin-top: var(--s4, 1rem); border-top: 1px solid var(--rule, var(--border, #2E3A4B)); padding-top: var(--s3, .75rem); }
.auth-legacy > summary { cursor: pointer; list-style: none; font-size: var(--fs-sm, .855rem); color: var(--slate, var(--muted, #94A1B3)); }
.auth-legacy > summary::-webkit-details-marker { display: none; }
.auth-legacy > summary::before { content: "\25B8\00a0"; }
.auth-legacy[open] > summary::before { content: "\25BE\00a0"; }
.auth-legacy[open] > summary { margin-bottom: var(--s3, .75rem); }

/* ---- watchlist state tags (watchlist/list.html) ----
   Neutral, mono, no tint: a stored fact stated inline ("new 52-wk
   high", a matching watched scan's name), deliberately NOT the success-
   green .watch-badge or the attention-colored .ca-badge, so a tag here
   never reads as approval or urgency -- see the page's framing note. */
.state-tag { display: inline-block; margin-left: var(--s2); padding: 0.05rem 0.4rem; border-radius: var(--r);
  border: 1px solid var(--rule-strong); color: var(--slate); font-family: var(--font-mono);
  font-size: var(--fs-xs); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Chart workspace V2 — visual reconstruction from the approved desktop
   reference. This block deliberately scopes the dense workspace treatment
   to the chart page while retaining the shared application shell.
   ========================================================================== */

/* App shell */
.masthead {
  border-top: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--paper-deep) 72%, var(--surface));
}
.topbar {
  min-height: 3.35rem;
  padding: 0.45rem var(--gutter);
  gap: var(--s4);
  flex-wrap: nowrap;
}
.mark-slot {
  width: auto;
  height: 2rem;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
}
.mark-slot:hover { color: var(--ink); }
.brand-mark { width: 1.15rem; height: 1.15rem; fill: var(--action-primary); }
.mark-word { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.section-switcher { gap: 0.15rem; align-self: stretch; }
.section-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  padding: 0 var(--s3);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--slate);
}
.section-link:hover { color: var(--ink); background: transparent; }
.section-link.section-active,
.section-link.section-active:hover {
  color: var(--action-ink);
  background: transparent;
  font-weight: 600;
}
.section-link.section-active::after {
  content: "";
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: -0.46rem;
  height: 2px;
  background: var(--action-primary);
}
.topbar-right { gap: var(--s3); flex-wrap: nowrap; min-width: 0; }
.topbar-symbol-search {
  width: clamp(18rem, 30vw, 28rem);
  height: 2rem;
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: 0 var(--s3);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-raised));
}
.topbar-symbol-search:focus-within { border-color: var(--action-primary); box-shadow: 0 0 0 1px rgba(var(--action-rgb), 0.18); }
.topbar-symbol-search svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; fill: var(--slate); }
.topbar-symbol-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: 0.72rem var(--font-body);
}
.theme-toggle { border-radius: 999px; padding: 0.1rem 0.25rem; }
.subnav {
  min-height: 2.15rem;
  padding: 0 var(--gutter);
  gap: 1.65rem;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface));
  flex-wrap: nowrap;
}
.subnav > a,
.subnav-market > summary {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 0 transparent;
  cursor: pointer;
  list-style: none;
}
.subnav > a.active,
.subnav-market.active > summary {
  color: var(--action-ink);
  box-shadow: 0 2px 0 var(--action-primary);
  font-weight: 600;
}
.subnav-market { position: relative; }
.subnav-market > summary::-webkit-details-marker { display: none; }
.subnav-market-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 1px);
  left: -0.75rem;
  min-width: 11rem;
  padding: var(--s2);
  border: 1px solid var(--rule-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
.subnav-market-menu a { display: block; padding: var(--s2) var(--s3); color: var(--ink); text-decoration: none; font-size: var(--fs-xs); }
.subnav-market-menu a:hover { color: var(--action-ink); background: var(--action-soft); }

/* Page frame and instrument strip */
main.chart-workspace-page {
  width: 100%;
  max-width: none;
  padding: 0 var(--gutter) var(--s6);
  background: var(--paper-deep);
  container-type: inline-size;
}
.chart-workspace-page > .messages { margin: var(--s3) 0; }
.instrument-header {
  min-height: 4.7rem;
  display: grid;
  grid-template-columns: minmax(12.5rem, 1.1fr) minmax(14rem, 1.35fr) minmax(22rem, 1.85fr) minmax(14.5rem, 1.2fr) auto;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
}
.instrument-header > * { min-width: 0; }
.instrument-identity,
.instrument-price-block,
.instrument-stats,
.week-range {
  min-height: 3.05rem;
  padding: 0 var(--s4);
  border-right: 1px solid var(--rule);
}
.instrument-identity {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-left: 0.25rem;
}
.instrument-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--action-rgb), 0.38);
  border-radius: 50%;
  background: rgba(var(--action-rgb), 0.12);
  color: var(--action-primary);
}
.instrument-avatar svg { width: 1rem; height: 1rem; fill: currentColor; }
.instrument-title-row { display: flex; align-items: center; gap: var(--s2); }
.instrument-title-row h1 { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.15; font-weight: 600; white-space: nowrap; }
.instrument-tag {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--slate);
  font: 0.61rem/1.2 var(--font-mono);
}
.instrument-symbol { display: flex; gap: var(--s3); margin: 0.25rem 0 0; color: var(--slate); font-size: 0.67rem; }
.instrument-price-block { display: flex; flex-direction: column; justify-content: center; }
.instrument-header .chart-price { margin: 0; display: flex; align-items: baseline; gap: 0.55rem; font-family: var(--font-body); font-size: clamp(1.4rem, 1.6vw, 1.85rem); font-weight: 500; line-height: 1; white-space: nowrap; }
.instrument-header .chart-price-delta { color: var(--positive); font-size: 0.88rem; font-weight: 600; }
.instrument-header .chart-price-delta.loss { color: var(--negative); }
.instrument-as-of { min-height: 1em; margin: 0.35rem 0 0; color: var(--slate); font-size: 0.67rem; }
.instrument-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: var(--s3);
}
.instrument-stats div { min-width: 0; }
.instrument-stats dt,
.week-range > span { color: var(--slate); font-size: 0.64rem; line-height: 1.2; white-space: nowrap; }
.instrument-stats dd { margin: 0.25rem 0 0; font: 500 0.72rem/1.1 var(--font-mono); white-space: nowrap; }
.week-range { display: flex; flex-direction: column; justify-content: center; }
.week-range-values { display: flex; justify-content: space-between; gap: var(--s4); margin-top: 0.2rem; font-size: 0.67rem; font-weight: 400; }
.week-range-values b { font-weight: 400; }
.week-range progress {
  width: 100%;
  height: 0.25rem;
  margin-top: 0.35rem;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--rule-strong);
}
.week-range progress::-webkit-progress-bar { background: var(--rule-strong); }
.week-range progress::-webkit-progress-value { background: var(--action-primary); }
.week-range progress::-moz-progress-bar { background: var(--action-primary); }
.related-menu { position: relative; justify-self: end; margin-left: var(--s3); }
.related-menu > summary {
  min-width: 7.25rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: 0 var(--s3);
  list-style: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
}
.related-menu > summary::after { content: "⌄"; color: var(--slate); }
.related-menu > summary::-webkit-details-marker { display: none; }
.related-menu-list {
  position: absolute;
  z-index: 90;
  top: calc(100% + var(--s1));
  right: 0;
  width: 14rem;
  padding: var(--s2);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.related-menu-list a { display: block; padding: var(--s2) var(--s3); color: var(--ink); text-decoration: none; font-size: var(--fs-xs); }
.related-menu-list a:hover { background: var(--action-soft); color: var(--action-ink); }

/* Workspace composition */
.chart-workspace-page {
  --chart-canvas-h: clamp(31rem, 59dvh, 47rem);
  --chart-inspector-w: clamp(20.5rem, 21vw, 23.5rem);
  --chart-toolbar-h: 2.55rem;
}
.chart-workspace-page #chart-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chart-inspector-w);
  gap: var(--s2);
  align-items: start;
  margin-top: var(--s2);
}
.chart-workspace-page #chart-workspace.inspector-closed { grid-template-columns: minmax(0, 1fr); }
.chart-workspace-page #chart-main { width: 100%; min-width: 0; }
.chart-workspace-page #chart-toolbar {
  min-height: var(--chart-toolbar-h);
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--s1);
  margin: 0;
  padding: 0.18rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r) var(--r) 0 0;
  background: var(--surface);
}
.toolbar-control,
.toolbar-button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  padding: 0 var(--s3);
  font: 500 0.68rem/1 var(--font-body);
  white-space: nowrap;
}
.toolbar-control { padding: 0; border-color: var(--rule); }
.toolbar-control > label:not(.sr-only) { padding-left: var(--s3); color: var(--slate); font-size: 0.62rem; }
.chart-workspace-page #chart-toolbar select {
  width: auto;
  height: 1.95rem;
  padding: 0 1.55rem 0 var(--s2);
  border: 0;
  border-radius: var(--r);
  background-color: transparent;
  color: var(--ink);
  font: 500 0.68rem/1 var(--font-body);
  cursor: pointer;
}
.toolbar-button { cursor: pointer; }
.toolbar-button:hover,
.toolbar-button.is-active { border-color: var(--rule-strong); color: var(--action-ink); background: var(--action-soft); }
.toolbar-button:disabled { opacity: 0.45; cursor: not-allowed; }
.toolbar-button svg { width: 0.84rem; height: 0.84rem; fill: currentColor; flex: 0 0 auto; }
.toolbar-push { margin-left: auto; }
.toolbar-icon-button { padding-inline: var(--s3); }
.chart-workspace-page #fullscreen-toggle {
  padding: 0 var(--s3);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0;
}
#chart-popovers { position: relative; }
.toolbar-popover {
  position: absolute;
  z-index: 35;
  top: var(--s1);
  left: 0;
  right: 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.toolbar-popover[hidden] { display: none !important; }
.toolbar-popover > label,
.toolbar-popover > legend { color: var(--slate); font: 500 0.66rem/1 var(--font-body); }
.toolbar-popover input[type="text"],
.toolbar-popover input[type="number"],
.toolbar-popover input[type="date"],
.toolbar-popover select {
  height: 1.95rem;
  padding: 0 var(--s2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font: 0.68rem var(--font-body);
}
.chart-stage {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  min-height: var(--chart-canvas-h);
  border: 1px solid var(--rule-strong);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
  background: var(--surface);
}
.chart-canvas-shell { min-width: 0; min-height: 0; }
.chart-workspace-page #chart-container,
.chart-workspace-page #data-unavailable {
  width: 100%;
  height: var(--chart-canvas-h);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--chart-canvas);
}
.chart-workspace-page #data-unavailable { display: grid; place-items: center; padding: var(--s5); }
.chart-workspace-page #data-unavailable[hidden] { display: none; }
.chart-workspace-page #drawing-toolbar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  border-right: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface));
}
.chart-workspace-page #drawing-toolbar button {
  width: 100%;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}
.chart-workspace-page #drawing-toolbar button:hover,
.chart-workspace-page #drawing-toolbar button.active {
  border-color: var(--rule);
  background: var(--action-soft);
  color: var(--action-ink);
}
.chart-workspace-page #drawing-toolbar button.active { box-shadow: inset 2px 0 var(--action-primary); }
.chart-workspace-page #drawing-toolbar button:disabled { opacity: 0.35; }
.chart-workspace-page #drawing-toolbar button svg { width: 1rem; height: 1rem; fill: currentColor; }
.chart-workspace-page #drawing-toolbar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.rotate-icon { transform: rotate(90deg); }

/* Inspector */
.chart-workspace-page #chart-rail {
  min-width: 0;
  min-height: 0;
  height: calc(var(--chart-canvas-h) + var(--chart-toolbar-h));
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  position: sticky;
  align-self: start;
  top: var(--s2);
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.chart-workspace-page #chart-rail > .inspector-panel {
  min-height: 0;
  flex: 1 1 auto;
}
.chart-workspace-page #chart-rail[hidden] { display: none; }
.inspector-tabs {
  min-height: var(--chart-toolbar-h);
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule-strong);
}
.inspector-tab,
.inspector-close {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  font: 500 0.66rem/1 var(--font-body);
}
.inspector-tab { flex: 1 1 auto; padding: 0 var(--s2); white-space: nowrap; }
.inspector-tab span { color: inherit; }
.inspector-tab:hover { color: var(--ink); }
.inspector-tab.is-active { color: var(--action-ink); }
.inspector-tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: -1px;
  height: 2px;
  background: var(--action-primary);
}
.inspector-close { flex: 0 0 2.25rem; font-size: 1.1rem; color: var(--ink); }
.inspector-close:hover { color: var(--action-ink); }
.inspector-panel {
  display: none;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s3);
  scrollbar-color: var(--rule-strong) transparent;
  scrollbar-width: thin;
}
.inspector-panel.is-active { display: block; }
.inspector-panel[hidden] { display: none; }
.indicator-search {
  height: 2rem;
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding: 0 var(--s2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
}
.indicator-search:focus-within { border-color: var(--action-primary); }
.indicator-search svg { width: 0.78rem; height: 0.78rem; fill: var(--slate); }
.indicator-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: 0.68rem var(--font-body);
}
.indicator-groups { display: flex; flex-direction: column; }
.indicator-group { border-bottom: 1px solid var(--rule); }
.indicator-group:last-child { border-bottom: 0; }
.indicator-group > summary {
  position: relative;
  min-height: 1.95rem;
  display: flex;
  align-items: center;
  list-style: none;
  color: var(--ink);
  cursor: pointer;
  font: 600 0.69rem/1.2 var(--font-body);
}
.indicator-group > summary::before {
  content: "›";
  width: 0.95rem;
  color: var(--slate);
  transform: rotate(0);
  transition: transform 120ms ease;
}
.indicator-group[open] > summary::before { transform: rotate(90deg); }
.indicator-group > summary::-webkit-details-marker { display: none; }
.indicator-group-list { padding: 0 0 var(--s2) 0.95rem; }
.chart-workspace-page .indicator-toggle {
  min-height: 1.85rem;
  display: flex;
  align-items: center;
  gap: var(--s1);
  color: var(--ink);
  font-size: 0.68rem;
}
.chart-workspace-page .indicator-toggle label { min-width: 0; flex: 1 1 auto; display: flex; align-items: flex-start; cursor: pointer; line-height: 1.28; }
.chart-workspace-page .indicator-toggle label span { min-width: 0; white-space: normal; }
.chart-workspace-page .indicator-toggle input { width: 0.82rem; height: 0.82rem; margin: 0 var(--s2) 0 0; flex: 0 0 auto; }
.chart-workspace-page .indicator-toggle .info-tip { margin-left: auto; }
.chart-workspace-page .indicator-toggle .info-icon { width: 0.95rem; height: 0.95rem; }
.chart-workspace-page .indicator-toggle[hidden],
.indicator-group[hidden] { display: none; }
.indicator-search-empty { margin: var(--s5) 0; color: var(--slate); text-align: center; font-size: var(--fs-xs); }
.inspector-help { margin: 0 0 var(--s4); color: var(--slate); font-size: var(--fs-xs); line-height: 1.45; }
.inspector-section-title,
#layout-save-form > label { display: block; margin-bottom: var(--s2); color: var(--slate); font: 600 0.64rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; }
.chart-workspace-page #drawing-hint { min-height: 1.1rem; margin: 0 0 var(--s3); color: var(--action-ink); }
.chart-workspace-page #drawings-panel { display: block; margin: 0; }
.chart-workspace-page #drawings-list { min-width: 0; margin-bottom: var(--s3); }
.chart-workspace-page #drawings-list li { gap: var(--s2); font-size: 0.68rem; }
.chart-workspace-page #layout-save-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.chart-workspace-page #layout-save-form > label { grid-column: 1 / -1; margin: 0; }
.chart-workspace-page #layout-name {
  min-width: 0;
  height: 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 0 var(--s2);
  font: 0.68rem var(--font-body);
}
.chart-workspace-page #layouts-list { margin-top: var(--s4); }

/* Thin information strip below the working chart */
.chart-status-strip {
  min-height: 1.8rem;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s2);
  color: var(--slate);
  border-bottom: 1px solid var(--rule);
}
.chart-status-strip #events-disclosure { flex: 1 1 auto; margin: 0; font-size: 0.61rem; white-space: nowrap; }
.chart-status-strip #events-disclosure span { margin-left: var(--s2); color: var(--action-ink); }
.chart-workspace-page #events-status {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  overflow: hidden;
}
.chart-workspace-page .event-status-line {
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--slate) !important;
  font: 0.58rem/1.2 var(--font-body);
  white-space: nowrap;
}
.chart-workspace-page .event-status-line::before { content: ""; display: inline-block; width: 0.38rem; height: 0.38rem; margin-right: 0.3rem; border-radius: 50%; background: var(--slate); }
.chart-workspace-page .event-status-available::before { background: var(--success); }
.chart-workspace-page .event-status-unavailable::before { background: var(--risk); }
.chart-workspace-page .event-status-unconfirmed_symbol::before { background: var(--attention); }
.chart-support-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.chart-support-panels > * { margin: 0 !important; }

/* Fullscreen keeps the same composition, simply using the whole viewport. */
.chart-workspace-page #chart-workspace.is-fullscreen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chart-inspector-w);
  gap: var(--s2);
  padding: var(--s2);
  background: var(--paper-deep);
  overflow: hidden;
}
.chart-workspace-page #chart-workspace.is-fullscreen.inspector-closed { grid-template-columns: minmax(0, 1fr); }
.chart-workspace-page #chart-workspace.is-fullscreen #chart-container,
.chart-workspace-page #chart-workspace.is-fullscreen #data-unavailable {
  height: calc(100dvh - 5.8rem);
  min-height: 24rem;
}
.chart-workspace-page #chart-workspace.is-fullscreen .chart-stage { min-height: calc(100dvh - 5.8rem); }
.chart-workspace-page #chart-workspace.is-fullscreen #chart-rail { height: calc(100dvh - var(--s4)); top: 0; }

@container page (max-width: 1180px) {
  .instrument-header { grid-template-columns: 1fr 1fr 2fr auto; }
  .week-range { display: none; }
  .chart-workspace-page #chart-workspace { grid-template-columns: minmax(0, 1fr) 19.5rem; }
  .toolbar-button { padding-inline: var(--s2); }
}

@media (max-width: 900px) {
  .topbar-symbol-search { display: none; }
  .chart-workspace-page #chart-workspace { display: block; }
  .chart-workspace-page #chart-rail { position: static; width: 100%; height: 28rem; margin-top: var(--s2); }
  .instrument-header { grid-template-columns: 1fr 1fr; padding: var(--s2) 0; }
  .instrument-stats { display: none; }
  .related-menu { margin-right: var(--s2); }
}

@media (max-width: 640px) {
  .mark-word { display: none; }
  .section-switcher { overflow-x: auto; }
  .chart-workspace-page { --chart-canvas-h: 30rem; }
  .instrument-header { grid-template-columns: 1fr; }
  .instrument-price-block { border-right: 0; padding-block: var(--s2); }
  .related-menu { display: none; }
  .chart-workspace-page #chart-toolbar { overflow-x: auto; }
  .toolbar-push { margin-left: 0; }
  .chart-status-strip #events-disclosure { white-space: normal; }
  .chart-workspace-page #events-status { display: none; }
}

/* ---- scans workspace: isolated from frozen workspace/chart/watchlist surfaces ---- */
.scans-page, .scan-builder, .scan-results, .scan-backtest { max-width: 1500px; }
.scan-workspace, .scan-run-workspace, .scan-backtest-workspace { max-width: 100%; }
.scan-page-header, .scan-run-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.scan-page-header .sub { margin: var(--s2) 0 0; }
.scan-primary-action { margin-top: var(--s2); white-space: nowrap; }
.scan-summary-strip, .scan-run-summary, .scan-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule-strong); background: var(--surface); margin-bottom: var(--s5); }
.scan-summary-strip > div, .scan-run-summary > div, .scan-metrics > div { padding: var(--s3) var(--s4); border-right: 1px solid var(--rule); min-height: 4.4rem; display: flex; flex-direction: column; justify-content: space-between; }
.scan-summary-strip > div:last-child, .scan-run-summary > div:last-child, .scan-metrics > div:last-child { border-right: 0; }
.scan-summary-strip span, .scan-run-summary span, .scan-metrics span, .scan-section-heading span { font: 500 var(--fs-xs)/1.2 var(--font-mono); letter-spacing: .06em; color: var(--slate); text-transform: uppercase; }
.scan-summary-strip strong, .scan-run-summary strong, .scan-metrics strong { font: 700 1.45rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.scan-table-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s3); }
.scan-search { min-width: min(100%, 19rem); flex: 1 1 16rem; }.scan-search input { width: 100%; padding: .53rem .7rem; font: 400 var(--fs-sm) var(--font-body); border: 1px solid var(--rule-strong); border-radius: var(--r); }
.scan-filter-group { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; }.scan-filter { padding: .48rem .65rem; border: 0; border-right: 1px solid var(--rule); background: var(--surface); color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); cursor: pointer; }.scan-filter:last-child { border-right: 0; }.scan-filter.is-active { color: var(--on-accent); background: var(--action-primary); }
.scan-sort { display: flex; align-items: center; gap: var(--s2); color: var(--slate); font-size: var(--fs-xs); }.scan-sort select { padding: .47rem .45rem; border: 1px solid var(--rule-strong); border-radius: var(--r); font: 500 var(--fs-xs) var(--font-mono); }
.scans-ledger-wrap { border-radius: var(--r); }.scans-ledger { min-width: 1040px; }.scans-ledger tbody td, .scan-results-table tbody td { vertical-align: middle; }.scan-name a { color: var(--ink); font-weight: 700; }.scan-name a:hover { color: var(--action-primary); }.scan-meta { display: block; margin-top: .18rem; color: var(--slate); font-size: var(--fs-xs); }.scan-rule { width: 31%; max-width: 29rem; }.scan-rule code, .scan-rule-display { color: var(--ink); line-height: 1.45; }.scan-rule code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.scan-state-badge { display: inline-block; padding: .13rem .45rem; border: 1px solid rgba(var(--action-rgb), .5); border-radius: var(--r); background: var(--action-soft); color: var(--ink); font: 500 var(--fs-xs) var(--font-mono); }.scan-state-muted { color: var(--slate); font: 400 var(--fs-xs) var(--font-mono); }.scan-watch-form { display: inline; margin-left: var(--s2); }.scan-text-action { padding: 0; border: 0; background: transparent; color: var(--action-ink); font: 500 var(--fs-xs) var(--font-mono); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }.scan-history { white-space: nowrap; }.scan-actions { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }.scan-actions a, .scan-page-actions a { border: 1px solid var(--rule-strong); border-radius: var(--r); color: var(--ink); font: 500 var(--fs-xs) var(--font-mono); text-decoration: none; padding: .34rem .5rem; }.scan-actions a:hover, .scan-page-actions a:hover { border-color: var(--action-primary); color: var(--action-ink); }.scan-actions .scan-action-run, .scan-action-run { border-color: var(--action-primary); color: var(--action-ink); }.scan-actions .scan-action-delete { border-color: rgba(var(--risk-rgb), .6); color: var(--risk); }.scan-no-results { margin-top: var(--s4); }
.scan-empty-workspace { max-width: 58rem; border: 1px solid var(--rule-strong); border-left: 3px solid var(--action-primary); background: var(--surface); padding: var(--s5); }.scan-empty-workspace p { color: var(--slate); margin: var(--s2) 0 var(--s5); }.scan-empty-workspace ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); list-style: none; padding: 0; margin: 0; }.scan-empty-workspace li { font-size: var(--fs-sm); }.scan-empty-workspace li span { display: inline-flex; width: 1.35rem; height: 1.35rem; margin-right: var(--s2); align-items: center; justify-content: center; border: 1px solid var(--rule-strong); color: var(--action-ink); font: 500 var(--fs-xs) var(--font-mono); }
.scan-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); align-items: start; gap: var(--s6); }.scan-builder-main { max-width: 54rem; }.scan-builder-main > .backlink { display: inline-block; margin-bottom: var(--s4); }.scan-editor { border: 1px solid var(--rule-strong); background: var(--surface); padding: var(--s5); }.scan-editor .field-row input, .scan-editor .field-row textarea { background: var(--paper); }.scan-rule-editor textarea { min-height: 13rem; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.55; }.scan-editor .btn { width: auto; margin-top: var(--s3); }.scan-reference-rail { border-left: 1px solid var(--rule-strong); padding-left: var(--s5); }.scan-reference-rail > p { margin: var(--s2) 0 var(--s4); color: var(--slate); font-size: var(--fs-sm); }.scan-reference-rail section { border-top: 1px solid var(--rule); padding: var(--s3) 0; }.scan-reference-rail h3 { margin: 0 0 var(--s2); color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }.scan-reference-names { display: flex; flex-wrap: wrap; gap: .35rem; }.scan-reference-names code { color: var(--ink); font-size: var(--fs-xs); }.scan-syntax-examples { margin-top: var(--s6); }.scan-syntax-examples > div { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }.scan-syntax-examples code { padding: .35rem .45rem; border: 1px solid var(--rule); background: var(--surface); font-size: var(--fs-xs); }.scan-syntax-examples p { color: var(--slate); font-size: var(--fs-xs); }
.scan-run-header { margin-top: var(--s4); }.scan-rule-display { display: block; max-width: 58rem; margin-top: var(--s3); overflow-wrap: anywhere; font-size: var(--fs-sm); }.scan-page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }.scan-run-summary { grid-template-columns: repeat(3, minmax(0, 13rem)); }.scan-run-summary strong.mono { font-size: 1rem; }.scan-results-table { min-width: 810px; }.scan-results-table tbody tr.matched td:first-child { border-left: 3px solid var(--action-primary); }.scan-methodology { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); border-left: 3px solid var(--attention); background: var(--attention-tint); padding: var(--s3) var(--s4); font-size: var(--fs-sm); margin: var(--s4) 0; }.scan-methodology span { color: var(--slate); }.scan-backtest-form { max-width: 29rem; padding: var(--s5); background: var(--surface); border: 1px solid var(--rule-strong); }.scan-backtest-form .btn { width: auto; }.scan-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }.scan-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }.scan-metrics small { margin-top: .25rem; color: var(--slate); font-size: var(--fs-xs); }.scan-distribution { max-width: 56rem; }.scan-delete-workspace { max-width: 46rem; }.scan-delete-panel { margin-top: var(--s4); padding: var(--s5); border: 1px solid rgba(var(--risk-rgb), .55); border-left: 3px solid var(--risk); background: var(--surface); }.scan-delete-panel p { color: var(--slate); }.scan-delete-panel > code { display: block; margin: var(--s4) 0; padding: var(--s3); overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--rule); }.scan-delete-panel form { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s5); }.scan-delete-button { background: var(--risk); border-color: var(--risk); color: var(--on-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 860px) { .scan-builder-layout { grid-template-columns: 1fr; }.scan-reference-rail { border-left: 0; border-top: 1px solid var(--rule-strong); padding: var(--s5) 0 0; }.scan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.scan-metrics > div:nth-child(2) { border-right: 0; } }
@media (max-width: 640px) { .scan-page-header, .scan-run-header { flex-direction: column; }.scan-page-actions { justify-content: flex-start; }.scan-primary-action { margin-top: 0; }.scan-summary-strip, .scan-run-summary { grid-template-columns: 1fr; }.scan-summary-strip > div, .scan-run-summary > div { border-right: 0; border-bottom: 1px solid var(--rule); }.scan-summary-strip > div:last-child, .scan-run-summary > div:last-child { border-bottom: 0; }.scan-empty-workspace ol { grid-template-columns: 1fr; }.scan-table-tools { align-items: stretch; }.scan-filter-group { width: 100%; }.scan-filter { flex: 1; }.scan-sort { justify-content: space-between; }.scan-sort select { flex: 1; }.scan-metrics { grid-template-columns: 1fr; }.scan-metrics > div { border-right: 0; border-bottom: 1px solid var(--rule); }.scan-metrics > div:last-child { border-bottom: 0; } }

/* ===========================================================================
   Home / Workspace — chart-led desktop landing page
   ========================================================================== */
.workspace-home {
  min-height: calc(100dvh - 5.5rem);
  color: var(--ink);
  background:
    radial-gradient(circle at 57% 16%, rgba(var(--action-rgb), 0.055), transparent 34rem),
    var(--paper-deep);
}
.workspace-home > .messages { max-width: 96rem; }
.workspace-shell { max-width: 96rem; margin: 0 auto; padding: 1.15rem 1.35rem 2rem; }
.home-topbar-search .search-shortcut {
  display: grid; place-items: center; flex: 0 0 1.25rem; height: 1.2rem;
  border-radius: var(--r); background: var(--paper); color: var(--slate);
  font: 500 0.65rem/1 var(--font-mono);
}
.workspace-intro {
  display: grid; grid-template-columns: minmax(24rem, 0.78fr) minmax(44rem, 1.55fr);
  align-items: start; gap: 2rem; min-height: 12.2rem; padding: 0.85rem 1.45rem 1.1rem;
}
.workspace-status-row { display: flex; align-items: center; gap: var(--s3); margin-bottom: 0.55rem; color: var(--slate); font-size: 0.7rem; }
.market-status { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--success); }
.market-status-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--success); }
.workspace-intro h2 { margin: 0; max-width: 28rem; font: 800 clamp(2.4rem, 3.2vw, 3.45rem)/0.98 var(--font-display); letter-spacing: -0.045em; }
.workspace-intro h2 span { color: var(--action-ink); }
.workspace-intro-copy > p { max-width: 33rem; margin: 0.65rem 0 0; color: var(--slate); font-size: 0.95rem; line-height: 1.4; }
.workspace-intro-actions { display: flex; gap: 0.65rem; margin-top: 0.95rem; }
.workspace-primary-action,
.workspace-secondary-action { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0 1rem; border: 1px solid var(--action-primary); border-radius: var(--r-lg); text-decoration: none; font-size: 0.76rem; font-weight: 600; }
.workspace-primary-action { background: var(--action-primary); color: var(--on-accent); }
.workspace-primary-action:hover { color: var(--on-accent); filter: brightness(1.05); }
.workspace-secondary-action { color: var(--ink); background: transparent; border-color: var(--rule-strong); }
.workspace-secondary-action:hover { color: var(--action-ink); border-color: var(--action-primary); }

.market-card-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.3rem; }
.market-card { min-width: 0; min-height: 5.85rem; display: flex; flex-direction: column; padding: 0.78rem 0.85rem; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); text-decoration: none; opacity: 0; animation: snapshot-card-enter 380ms cubic-bezier(0.2, 0.72, 0.28, 1) forwards; animation-delay: calc(150ms + var(--market-card-index, 0) * 38ms); transition: border-color 160ms ease, background-color 160ms ease; }
.market-card:hover { border-color: color-mix(in srgb, var(--action-primary) 74%, var(--rule)); background: color-mix(in srgb, var(--action-soft) 38%, var(--surface)); color: var(--ink); }
@keyframes snapshot-card-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.market-card-top { display: flex; justify-content: space-between; gap: var(--s2); color: var(--slate); font-size: 0.61rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.market-card-top span:first-child { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.market-card-price { margin-top: 0.42rem; font-size: 0.9rem; font-weight: 500; }
.market-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.3rem; margin-top: auto; }
.market-change { padding-top: 0.3rem; font: 500 0.64rem/1 var(--font-mono); white-space: nowrap; }
.gain { color: var(--positive) !important; }
.loss { color: var(--risk) !important; }
.market-spark { width: 4.15rem; height: 1.45rem; overflow: visible; opacity: 0.72; transition: opacity 160ms ease, filter 160ms ease; }
.market-card:hover .market-spark { opacity: 1; filter: drop-shadow(0 0 2px rgba(var(--action-rgb), 0.24)); }
.market-spark path,
.quick-spark path,
.continue-spark path { fill: none; stroke: currentColor; stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.market-spark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: workspace-trace 760ms cubic-bezier(0.2, 0.72, 0.28, 1) 420ms forwards; }
@keyframes workspace-trace { to { stroke-dashoffset: 0; } }

.workspace-grid { display: grid; grid-template-columns: minmax(15.5rem, 18rem) minmax(32rem, 1fr) minmax(16.5rem, 19rem); gap: 0.65rem; align-items: stretch; }
.workspace-panel,
.featured-chart-panel { min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 8px 26px -26px rgba(var(--ink-rgb), 0.7); }
.workspace-panel { display: flex; flex-direction: column; }
.workspace-panel-head { min-height: 3.45rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0.62rem 0.78rem; border-bottom: 1px solid var(--rule); }
.workspace-panel-head h2,
.market-tab-panel h2,
.continue-head h2 { margin: 0.16rem 0 0; font: 700 0.9rem/1.15 var(--font-display); letter-spacing: -0.01em; text-transform: none; }
.workspace-panel-head > a,
.continue-head > a { color: var(--action-ink); font-size: 0.66rem; text-decoration: none; }
.panel-eyebrow { display: block; color: var(--slate); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.quick-column-head { min-height: 1.85rem; display: grid; grid-template-columns: 1fr 5rem 4.2rem; align-items: center; gap: 0.4rem; padding: 0 0.78rem; border-bottom: 1px solid var(--rule); color: var(--slate); font-size: 0.58rem; }
.quick-column-head span:nth-child(n+2) { text-align: right; }
.quick-rows { flex: 1 1 auto; }
.quick-row { position: relative; min-height: 3rem; display: grid; grid-template-columns: minmax(4.45rem, 1fr) 3.15rem 4.15rem 3.25rem; align-items: center; gap: 0.25rem; padding: 0 0.65rem; overflow: hidden; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background-color 140ms ease; }
.quick-row:hover { color: var(--ink); background: var(--action-soft); }
.quick-symbol { min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.quick-symbol strong { overflow: hidden; font-size: 0.68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; transition: color 140ms ease; }
.quick-row:hover .quick-symbol strong,
.quick-row:focus-visible .quick-symbol strong { color: var(--action-ink); }
.quick-symbol small { color: var(--slate); font-size: 0.55rem; }
.quick-spark { width: 3.15rem; height: 1.35rem; opacity: 0.68; transition: opacity 140ms ease, filter 140ms ease; }
.quick-row:hover .quick-spark,
.quick-row:focus-visible .quick-spark { opacity: 1; filter: drop-shadow(0 0 2px rgba(var(--action-rgb), 0.22)); }
.quick-price,
.quick-change { text-align: right; font-size: 0.59rem; white-space: nowrap; }
.quick-change { font-family: var(--font-mono); }
.quick-open { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.8rem; background: linear-gradient(90deg, transparent 0, var(--surface) 42%); color: var(--action-ink); font-size: 0.65rem; font-weight: 600; opacity: 0; transition: opacity 140ms ease; }
.quick-row:hover .quick-open,
.quick-row:focus-visible .quick-open { opacity: 1; }
.quick-add { min-height: 2.55rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 0.78rem; color: var(--slate); font-size: 0.62rem; text-decoration: none; transition: color 140ms ease, background-color 140ms ease; }
.quick-add:hover { color: var(--action-ink); background: var(--action-soft); }

.featured-chart-panel { display: flex; flex-direction: column; }
.featured-chart-head { min-height: 3.45rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 0.7rem; border-bottom: 1px solid var(--rule); }
.featured-instrument { min-width: 0; display: flex; align-items: center; gap: 0.52rem; }
.featured-instrument h2 { margin: 0; font: 700 0.92rem/1 var(--font-display); white-space: nowrap; }
.instrument-chip { padding: 0.18rem 0.34rem; border-radius: var(--r); background: var(--paper); color: var(--slate); font-size: 0.53rem; }
.featured-price { margin-left: 0.15rem; font-size: 0.81rem; }
.featured-change { font: 500 0.7rem/1 var(--font-mono); }
.chart-actions { display: flex; align-items: center; gap: 0.16rem; }
.chart-actions a { min-height: 1.8rem; display: inline-flex; align-items: center; padding: 0 0.52rem; border: 1px solid transparent; border-radius: var(--r); color: var(--slate); background: transparent; font: 500 0.61rem/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.chart-actions a:hover,
.chart-actions a.is-active { border-color: var(--rule-strong); background: var(--paper); color: var(--ink); }
.chart-actions a:active { border-color: var(--action-primary); background: var(--action-soft); }
.chart-actions a:last-child { margin-left: 0.25rem; color: var(--action-ink); }
.workspace-chart { position: relative; min-height: 22.5rem; flex: 1 1 auto; overflow: hidden; background: color-mix(in srgb, var(--paper-deep) 48%, var(--surface)); outline: none; }
.workspace-chart[data-chart-range-current="3M"] { --candle-step: 20.5ms; --volume-step: 12ms; }
.workspace-chart[data-chart-range-current="6M"] { --candle-step: 10.15ms; --volume-step: 5.95ms; }
.workspace-chart[data-chart-range-current="1Y"] { --candle-step: 5.3ms; --volume-step: 3.1ms; }
.workspace-chart:focus-visible { box-shadow: inset 0 0 0 2px var(--action-primary); }
.workspace-chart > svg { display: block; width: 100%; height: 22.5rem; }
.chart-ohlc { position: absolute; z-index: 3; top: 0.48rem; left: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--slate); font: 400 0.56rem/1 var(--font-mono); pointer-events: none; }
.chart-ohlc span:first-child { color: var(--ink); }
.workspace-grid-lines line { stroke: var(--grid-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.workspace-close-trace { fill: none; stroke: var(--action-primary); stroke-width: 1.15; opacity: 0.1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: workspace-trace 1.55s cubic-bezier(0.18, 0.68, 0.24, 1) 300ms forwards; }
.workspace-candle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: candle-enter 230ms cubic-bezier(0.18, 0.68, 0.24, 1) forwards; animation-delay: calc(300ms + var(--candle-index) * var(--candle-step, 20.5ms)); }
.workspace-candle line { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.workspace-candle rect { fill: currentColor; }
.workspace-candle.gain { color: var(--positive); }
.workspace-candle.loss { color: var(--risk); }
@keyframes candle-enter { from { opacity: 0; transform: scaleY(0.2); } to { opacity: 1; transform: none; } }
.workspace-volumes rect { opacity: 0; fill: currentColor; animation: volume-enter 220ms cubic-bezier(0.18, 0.68, 0.24, 1) forwards; animation-delay: calc(900ms + var(--candle-index) * var(--volume-step, 12ms)); }
.workspace-volumes rect.gain { color: var(--positive); }
.workspace-volumes rect.loss { color: var(--risk); }
@keyframes volume-enter { to { opacity: 0.26; } }
.workspace-axis-labels { fill: var(--slate); font: 500 11px var(--font-mono); }
.current-price-line { stroke: var(--action-primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; animation: marker-settle 220ms cubic-bezier(0.2, 0.72, 0.28, 1) 1.98s forwards; vector-effect: non-scaling-stroke; }
.current-price-marker { opacity: 0; animation: marker-settle 220ms cubic-bezier(0.2, 0.72, 0.28, 1) 1.98s forwards; }
.current-price-marker rect { fill: var(--action-primary); }
.current-price-marker.loss rect { fill: var(--risk); }
.current-price-marker text { fill: var(--on-accent); font: 500 10px var(--font-mono); }
@keyframes marker-settle { 0% { opacity: 0; transform: translateY(3px); filter: none; } 70% { opacity: 1; filter: drop-shadow(0 0 3px rgba(var(--action-rgb), 0.3)); } 100% { opacity: 1; filter: none; } }
.featured-chart-panel.is-range-loading .workspace-chart { opacity: 0.44; transition: opacity 140ms ease-out; }
.workspace-chart.is-range-update { animation: range-panel-reveal 380ms cubic-bezier(0.2, 0.72, 0.28, 1) both; }
.workspace-chart.is-range-update .workspace-close-trace { animation: workspace-trace 360ms cubic-bezier(0.2, 0.72, 0.28, 1) forwards; }
.workspace-chart.is-range-update .workspace-candle { animation: candle-enter 250ms cubic-bezier(0.2, 0.72, 0.28, 1) forwards; animation-delay: calc(var(--candle-index) * 0.6ms); }
.workspace-chart.is-range-update .workspace-volumes rect { animation: volume-enter 210ms cubic-bezier(0.2, 0.72, 0.28, 1) forwards; animation-delay: calc(90ms + var(--candle-index) * 0.35ms); }
.workspace-chart.is-range-update .current-price-line,
.workspace-chart.is-range-update .current-price-marker { animation: marker-settle 190ms ease-out 170ms forwards; }
@keyframes range-panel-reveal { from { opacity: 0.25; } to { opacity: 1; } }
.chart-crosshair line { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.65; vector-effect: non-scaling-stroke; }
.chart-crosshair circle { fill: var(--surface); stroke: var(--action-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-tooltip { position: absolute; z-index: 5; width: 10.1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.28rem 0.55rem; padding: 0.55rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow-1); color: var(--slate); font: 500 0.56rem/1.2 var(--font-mono); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { grid-column: 1 / -1; color: var(--ink); font-family: var(--font-body); }
.chart-data-note { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.35rem; display: flex; justify-content: space-between; color: var(--slate); font-size: 0.54rem; pointer-events: none; }

.workspace-panel-tabs { min-height: 2.55rem; display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.workspace-panel-tabs button { position: relative; flex: 1 1 auto; border: 0; background: transparent; color: var(--slate); font: 500 0.66rem var(--font-body); cursor: pointer; transition: color 140ms ease, background-color 140ms ease; }
.workspace-panel-tabs button:hover { color: var(--ink); background: var(--action-soft); }
.workspace-panel-tabs button.is-active { color: var(--action-ink); }
.workspace-panel-tabs button.is-active::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -1px; height: 2px; background: var(--action-primary); }
.market-tab-panel { padding: 0.78rem; }
.market-tab-panel[hidden] { display: none; }
.market-tab-panel > h2 { margin-bottom: 0.55rem; }
.market-list { border-top: 1px solid var(--rule); }
.market-list a { min-height: 2.65rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.55rem; padding-inline: 0.2rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 0.62rem; transition: background-color 140ms ease; }
.market-list a:hover { color: var(--ink); background: var(--action-soft); }
.market-list a > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.market-list strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.market-list small { color: var(--slate); font-size: 0.52rem; }
.market-list a > span:last-child { width: 3.7rem; text-align: right; font: 500 0.6rem var(--font-mono); }
.rail-section-title { margin: 0.7rem 0 0.3rem; color: var(--slate); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.workspace-summary-list { border-top: 1px solid var(--rule); }
.workspace-summary-list a { min-height: 2.65rem; display: grid; grid-template-columns: minmax(5rem, 0.76fr) minmax(6.5rem, 1.24fr); align-items: center; gap: 0.5rem; padding: 0.34rem 0.2rem; border-bottom: 1px solid var(--rule); color: var(--slate); text-decoration: none; transition: background-color 140ms ease; }
.workspace-summary-list a:hover { background: var(--action-soft); color: var(--action-ink); }
.summary-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.summary-copy strong { color: var(--ink); font-size: 0.64rem; font-weight: 600; }
.summary-copy small { overflow: hidden; color: var(--slate); font-size: 0.51rem; text-overflow: ellipsis; white-space: nowrap; }
.summary-action { color: var(--action-ink); font-size: 0.55rem; font-weight: 600; line-height: 1.18; text-align: right; }
.activity-state { display: flex; flex-direction: column; align-items: flex-start; min-height: 17rem; padding-top: 1.4rem; }
.activity-mark { width: 2rem; height: 0.2rem; margin-bottom: 1rem; background: var(--action-primary); }
.activity-state strong { font: 700 0.9rem/1.2 var(--font-display); }
.activity-state p { margin: 0.55rem 0 0.9rem; color: var(--slate); font-size: 0.68rem; line-height: 1.45; }
.activity-state a { color: var(--action-ink); font-size: 0.66rem; }

.workspace-value-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.65rem; }
.workspace-value-strip a { min-height: 4.65rem; display: flex; flex-direction: column; justify-content: center; gap: 0.28rem; padding: 0.7rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 83%, transparent); color: var(--ink); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
.workspace-value-strip a:hover { border-color: var(--action-primary); background: color-mix(in srgb, var(--action-soft) 32%, var(--surface)); color: var(--ink); }
.workspace-value-strip strong { font: 600 0.76rem/1.2 var(--font-body); }
.workspace-value-strip span { color: var(--slate); font-size: 0.64rem; line-height: 1.35; }

.continue-section { margin-top: 0.65rem; padding: 0.78rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 76%, transparent); }
.continue-head { display: flex; align-items: center; justify-content: space-between; min-height: 2.35rem; padding: 0 0.2rem 0.65rem; }
.continue-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.continue-card { min-width: 0; min-height: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 0.65rem; padding: 0.65rem 0.72rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
.continue-card:hover { border-color: var(--action-primary); background: color-mix(in srgb, var(--action-soft) 30%, var(--surface)); color: var(--ink); }
.continue-card > div { min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
.continue-card strong { overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; transition: color 140ms ease; }
.continue-card:hover strong,
.continue-card:focus-visible strong { color: var(--action-ink); }
.continue-card > div span { padding: 0.12rem 0.25rem; border-radius: var(--r); background: var(--paper); color: var(--slate); font-size: 0.49rem; }
.continue-price { font-size: 0.62rem; }
.continue-spark { width: 4.1rem; height: 1.35rem; opacity: 0.72; transition: opacity 140ms ease, filter 140ms ease; }
.continue-card:hover .continue-spark,
.continue-card:focus-visible .continue-spark { opacity: 1; filter: drop-shadow(0 0 2px rgba(var(--action-rgb), 0.22)); }
.continue-change { text-align: right; font: 500 0.58rem/1 var(--font-mono); }
.history-card { grid-column: span 2; min-width: 0; min-height: 4.5rem; display: grid; grid-template-columns: minmax(10rem, 0.85fr) 1fr; align-items: center; gap: 0.8rem; padding: 0.65rem 0.8rem; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.history-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.history-card-copy strong { font: 700 0.73rem/1.2 var(--font-display); }
.history-card-copy > span:last-child { overflow: hidden; color: var(--slate); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; }
.history-card svg { width: 100%; height: 2.8rem; }
.history-line { fill: none; stroke: var(--action-primary); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: workspace-trace 1.8s ease 1s forwards; }
.workspace-footer { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.8rem; color: var(--slate); font-size: 0.62rem; }
.workspace-footer strong { color: var(--ink); font-weight: 500; }
.footer-market-state { display: inline-flex; align-items: center; gap: 0.45rem; }
.workspace-empty { padding: var(--s5); color: var(--slate); font-size: 0.7rem; line-height: 1.45; }
.chart-empty { min-height: 24rem; display: grid; place-items: center; }

.workspace-intro.home-enter,
.workspace-grid.home-enter { opacity: 1; animation: none; transform: none; }
.workspace-grid > .workspace-panel { opacity: 0; animation: workspace-enter 320ms cubic-bezier(0.2, 0.72, 0.28, 1) 120ms forwards; }
.home-enter { opacity: 0; animation: workspace-enter var(--motion-entrance) var(--motion-ease) forwards; animation-delay: var(--home-delay); }
.home-enter-1 { --home-delay: 0ms; }
.home-enter-2 { --home-delay: 0ms; }
.home-enter-3 { --home-delay: 260ms; }
.home-enter-4 { --home-delay: 350ms; }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.workspace-primary-action:active { filter: brightness(0.96); }
.workspace-secondary-action:active,
.market-card:active,
.quick-row:active,
.market-list a:active,
.workspace-summary-list a:active,
.workspace-value-strip a:active,
.continue-card:active { background: color-mix(in srgb, var(--action-soft) 62%, var(--surface)); }
.workspace-primary-action:focus-visible,
.workspace-secondary-action:focus-visible,
.market-card:focus-visible,
.quick-row:focus-visible,
.quick-add:focus-visible,
.workspace-panel-head > a:focus-visible,
.chart-actions a:focus-visible,
.workspace-panel-tabs button:focus-visible,
.market-list a:focus-visible,
.workspace-summary-list a:focus-visible,
.activity-state a:focus-visible,
.workspace-value-strip a:focus-visible,
.continue-head > a:focus-visible,
.continue-card:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .home-enter,
  .workspace-grid > .workspace-panel,
  .market-card,
  .workspace-chart.is-range-update,
  .workspace-candle,
  .workspace-volumes rect,
  .current-price-line,
  .current-price-marker,
  .market-spark path,
  .history-line,
  .workspace-close-trace,
  .market-status-dot { animation: none; opacity: 1; stroke-dashoffset: 0; filter: none; }
  .workspace-chart.is-range-update .workspace-close-trace,
  .workspace-chart.is-range-update .workspace-candle,
  .workspace-chart.is-range-update .workspace-volumes rect,
  .workspace-chart.is-range-update .current-price-line,
  .workspace-chart.is-range-update .current-price-marker { animation: none; opacity: 1; stroke-dashoffset: 0; filter: none; }
  .featured-chart-panel.is-range-loading .workspace-chart { opacity: 1; transition: none; }
}
@media (max-width: 1260px) {
  .workspace-intro { grid-template-columns: minmax(22rem, 0.72fr) 1.4fr; padding-inline: 0; }
  .workspace-grid { grid-template-columns: 15rem minmax(31rem, 1fr) 16rem; }
  .featured-change { display: none; }
  .continue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .history-card { grid-column: span 4; }
}
@media (max-width: 980px) {
  .workspace-intro { grid-template-columns: 1fr; align-items: start; }
  .market-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid { grid-template-columns: 1fr; }
  .quick-panel,
  .market-panel { min-height: auto; }
  .workspace-value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-card { grid-column: span 2; }
}
@media (max-width: 640px) {
  .workspace-shell { padding: 1rem 0.75rem; }
  .workspace-intro { min-height: auto; padding-bottom: 1rem; }
  .workspace-intro h2 { font-size: 2.25rem; }
  .market-card-row,
  .workspace-value-strip,
  .continue-grid { grid-template-columns: 1fr; }
  .history-card { grid-column: span 1; grid-template-columns: 1fr; }
  .featured-chart-head { align-items: flex-start; flex-direction: column; padding-block: 0.65rem; }
  .workspace-chart,
  .workspace-chart > svg { min-height: 21rem; height: 21rem; }
  .chart-actions { width: 100%; overflow-x: auto; }
  .workspace-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0.35rem; }
}

/* Home workspace refinement — each region owns one distinct job. */
.workspace-home { min-height: calc(100dvh - 5.5rem); }
.workspace-shell { max-width: 104rem; padding: 0.78rem 1.6rem 0; }
.workspace-intro {
  min-height: 4.35rem; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 0.15rem 0.55rem 0.55rem;
}
.workspace-intro h2 { max-width: none; font: 700 1.58rem/1.1 var(--font-display); letter-spacing: -0.025em; }
.workspace-intro-copy > p { max-width: none; margin: 0.3rem 0 0; font-size: 0.78rem; }
.workspace-intro-meta { display: flex; align-items: center; gap: 0.75rem; color: var(--slate); font-size: 0.65rem; }
.workspace-motto { max-width: 12rem; margin-left: 0.55rem; padding-left: 1rem; border-left: 1px solid var(--rule-strong); font-size: 0.76rem; line-height: 1.35; }

.market-card-row { gap: 0.72rem; margin: 0 0 0.72rem; }
.market-card { min-height: 4.85rem; padding: 0.65rem 0.78rem; }
.market-card-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.market-card-price { margin-top: 0.3rem; color: var(--ink); font-size: 1.03rem; font-weight: 500; }
.market-card .market-change { display: block; padding-top: 0.23rem; font-size: 0.58rem; }
.market-card .neutral { color: var(--slate) !important; }

.workspace-grid { grid-template-columns: minmax(18.5rem, 0.98fr) minmax(42rem, 2.08fr) minmax(18rem, 0.97fr); gap: 0.72rem; }
.workspace-panel, .featured-chart-panel { border-radius: 0.52rem; }
.workspace-panel-head { min-height: 3.25rem; padding: 0.55rem 0.78rem; }
.workspace-panel-head h2, .continue-head h2 { font-size: 0.86rem; }
.sample-notice { padding: 0.5rem 0.78rem; border-bottom: 1px solid var(--rule); color: var(--slate); font-size: 0.57rem; line-height: 1.35; }
.sample-notice strong { color: var(--ink); font-weight: 500; }
.quick-column-head { min-height: 1.72rem; grid-template-columns: 1fr 5rem 4.2rem; }
.quick-row { min-height: 3.15rem; grid-template-columns: minmax(5rem, 1fr) 4.6rem 3.65rem; padding: 0 0.78rem; }
.quick-symbol strong { font-size: 0.7rem; }
.quick-symbol small { font-size: 0.54rem; }
.quick-price, .quick-change { font-size: 0.6rem; }
.quick-add { min-height: 2.48rem; border-top: 1px solid var(--rule); color: var(--action-ink); }

.featured-chart-head { min-height: 4.1rem; padding: 0.45rem 0.75rem; }
.featured-instrument { display: flex; flex-direction: column; align-items: flex-start; gap: 0.26rem; }
.featured-title-line, .featured-price-line { display: flex; align-items: center; gap: 0.48rem; }
.featured-title-line h2 { font-size: 1rem; }
.featured-price { margin-left: 0; font-size: 0.95rem; font-weight: 500; }
.featured-change { font-size: 0.66rem; }
.chart-actions a { min-height: 1.88rem; font-size: 0.62rem; }
.chart-actions a.chart-advanced { margin-left: 0.45rem; border-color: var(--rule); color: var(--ink); }
.workspace-chart, .workspace-chart > svg { min-height: 22rem; height: 22rem; }
.chart-ohlc { top: 0.48rem; }
.chart-data-note { display: none; }

.market-panel-head { border-bottom: 1px solid var(--rule); }
.workspace-panel-tabs { min-height: 2.15rem; }
.workspace-panel-tabs button { font-size: 0.61rem; }
.workspace-panel-tabs button.is-active::after { left: 0.7rem; right: 0.7rem; }
.market-tab-panel { padding: 0.68rem 0.76rem; }
.pulse-section-title, .pulse-subhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pulse-section-title { min-height: 1.5rem; color: var(--ink); font-size: 0.62rem; font-weight: 600; }
.pulse-section-title small { color: var(--slate); font-size: 0.52rem; font-weight: 400; }
.breadth-row { min-height: 1.5rem; display: grid; grid-template-columns: minmax(5.3rem, 1fr) 4rem 4rem 2.3rem; align-items: center; gap: 0.4rem; color: var(--slate); font-size: 0.56rem; }
.breadth-row > strong { color: var(--ink); font-size: 0.54rem; font-weight: 400; text-align: right; }
.breadth-track { height: 0.33rem; overflow: hidden; border-radius: 1rem; background: var(--rule-strong); }
.breadth-track > span { display: block; height: 100%; min-width: 0.18rem; border-radius: inherit; background: currentColor; }
.breadth-row > small { font: 500 0.5rem/1 var(--font-mono); text-align: right; }
.regime-row { min-height: 1.75rem; display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1px solid var(--rule); color: var(--slate); font-size: 0.57rem; }
.regime-row strong { display: flex; align-items: center; gap: 0.35rem; font-size: 0.54rem; font-weight: 500; }
.regime-dot { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; }
.pulse-subhead { min-height: 1.75rem; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--rule); color: var(--slate); font-size: 0.56rem; font-weight: 600; }
.pulse-subhead a { color: var(--action-ink); font-size: 0.54rem; font-weight: 400; text-decoration: none; }
.leader-preview a { min-height: 1.38rem; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 2.8rem; align-items: center; gap: 0.3rem; color: var(--ink); font-size: 0.55rem; text-decoration: none; }
.leader-preview a:hover { background: var(--action-soft); }
.leader-preview strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.leader-preview a > span:last-child { text-align: right; }
.leader-rank { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 0.25rem; background: var(--paper); color: var(--slate); font: 500 0.52rem/1 var(--font-mono); }
.activity-summary { min-height: 1.55rem; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 0.5rem; color: var(--slate); font-size: 0.55rem; }
.activity-summary span { display: flex; justify-content: space-between; }
.activity-summary strong { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.pulse-empty { padding: 0.65rem 0; }

.leader-list { margin-top: 0.35rem; border-top: 1px solid var(--rule); }
.leader-list a { min-height: 2.55rem; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 2.8rem 4.2rem; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 0.58rem; text-decoration: none; }
.leader-list a:hover { background: var(--action-soft); }
.leader-list strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.leader-spark { width: 4.1rem; height: 1.2rem; }
.leader-spark path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.panel-footer-link { min-height: 2.5rem; display: flex; align-items: center; color: var(--action-ink); font-size: 0.58rem; text-decoration: none; }
.activity-metrics { display: grid; gap: 0.5rem; margin-top: 0.55rem; }
.activity-metrics a { min-height: 4rem; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem; align-items: center; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.activity-metrics a:hover { border-color: var(--action-primary); background: var(--action-soft); }
.activity-metrics span { font-size: 0.61rem; }
.activity-metrics strong { font: 600 1rem/1 var(--font-mono); }
.activity-metrics small { grid-column: 1 / -1; color: var(--slate); font-size: 0.52rem; }

.workspace-value-strip { gap: 0.72rem; margin-top: 0.72rem; }
.workspace-value-strip a { position: relative; min-height: 4.15rem; padding: 0.65rem 0.95rem; }
.workspace-value-strip strong { font-size: 0.72rem; }
.workspace-value-strip span { font-size: 0.59rem; }
.workspace-value-strip small { position: absolute; right: 0.9rem; top: 50%; color: var(--action-ink); font-size: 0.54rem; opacity: 0; transform: translateY(-50%); transition: opacity 140ms ease; }
.workspace-value-strip a:hover small, .workspace-value-strip a:focus-visible small { opacity: 1; }

.continue-section { margin-top: 0.72rem; padding: 0; border: 0; background: transparent; }
.continue-head { min-height: 2.35rem; padding: 0 0.15rem 0.45rem; }
.continue-head .panel-eyebrow { display: none; }
.continue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.72rem; }
.workflow-card { position: relative; min-width: 0; min-height: 4.95rem; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: 0.68rem 4.8rem 0.68rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 83%, transparent); color: var(--ink); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
.workflow-card:hover { border-color: var(--action-primary); background: color-mix(in srgb, var(--action-soft) 32%, var(--surface)); color: var(--ink); }
.workflow-type { color: var(--slate); font-size: 0.51rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.workflow-card > strong { overflow: hidden; font-size: 0.69rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workflow-card > small { overflow: hidden; color: var(--slate); font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.workflow-action { position: absolute; right: 0.8rem; color: var(--action-ink); font-size: 0.54rem; }

.workspace-footer { min-height: 2.4rem; margin: 0.72rem -1.6rem 0; padding: 0 1.75rem; border-top: 1px solid var(--rule); }
.workspace-footer > strong { color: var(--ink); }
.workspace-footer > span { flex: 1 1 auto; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--rule-strong); }
.workspace-footer > a { color: var(--action-ink); text-decoration: none; }

@media (max-width: 1260px) {
  .workspace-grid { grid-template-columns: 15rem minmax(31rem, 1fr) 16rem; }
  .breadth-row { grid-template-columns: minmax(4.5rem, 1fr) 3.4rem; }
  .breadth-track, .breadth-row > small { display: none; }
}
/* Preserve the approved three-pane workspace on normal laptop widths without
   letting the desktop chart column force a horizontal document scrollbar. */
@media (max-width: 1360px) and (min-width: 981px) {
  .workspace-grid { grid-template-columns: minmax(15rem, 0.98fr) minmax(31rem, 2.08fr) minmax(15rem, 0.97fr); }
}
@media (max-width: 980px) {
  .workspace-intro { align-items: flex-start; flex-direction: column; gap: 0.45rem; padding-block: 0.5rem 0.8rem; }
  .workspace-intro-meta { flex-wrap: wrap; }
  .workspace-motto { margin-left: 0; }
  .workspace-grid { grid-template-columns: 1fr; }
  .market-card-row, .workspace-value-strip, .continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breadth-row { grid-template-columns: minmax(5.3rem, 1fr) 4rem 4rem 2.3rem; }
  .breadth-track, .breadth-row > small { display: block; }
}
@media (max-width: 640px) {
  .workspace-shell { padding: 0.75rem; }
  .workspace-intro h2 { font-size: 1.45rem; }
  .workspace-intro-meta { font-size: 0.58rem; }
  .workspace-motto { display: none; }
  .market-card-row, .workspace-value-strip, .continue-grid { grid-template-columns: 1fr; }
  .featured-chart-head { min-height: auto; }
  .workspace-chart, .workspace-chart > svg { min-height: 21rem; height: 21rem; }
  .breadth-row { grid-template-columns: minmax(5rem, 1fr) 3.6rem 3.6rem 2.2rem; }
  .workflow-card { padding-right: 4.2rem; }
  .workspace-footer { margin-inline: -0.75rem; padding: 0.7rem 0.9rem; }
  .workspace-footer > span { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* Workspace desktop legibility pass. Keep the larger shell and controls scoped to
   the authenticated Home surface so shared navigation stays unchanged elsewhere. */
@media (min-width: 1261px) {
  body:has(.workspace-home) .topbar { min-height: 3.7rem; padding-block: 0.55rem; }
  body:has(.workspace-home) .mark-word { font-size: 1.14rem; }
  body:has(.workspace-home) .section-link { padding-inline: 0.9rem; font-size: 0.82rem; white-space: nowrap; }
  body:has(.workspace-home) .topbar-symbol-search { width: clamp(20rem, 31vw, 30rem); height: 2.3rem; }
  body:has(.workspace-home) .topbar-symbol-search input { font-size: 0.8rem; }
  body:has(.workspace-home) .theme-toggle,
  body:has(.workspace-home) .account-area { font-size: 0.74rem; white-space: nowrap; }
  body:has(.workspace-home) .account-area .who { font-size: 0.67rem; }
  body:has(.workspace-home) .subnav { min-height: 2.5rem; }
  body:has(.workspace-home) .subnav > a,
  body:has(.workspace-home) .subnav > details > summary { min-height: 2.5rem; font-size: 0.82rem; }

  .workspace-shell { max-width: 112rem; padding: 0.95rem 1.35rem 0; }
  .workspace-intro { min-height: 5rem; padding: 0.22rem 0.55rem 0.68rem; }
  .workspace-intro h2 { font-size: 1.88rem; }
  .workspace-intro-copy p { font-size: 0.9rem; }
  .workspace-intro-meta { font-size: 0.73rem; }
  .workspace-motto { font-size: 0.84rem; }

  .market-card-row { gap: 0.82rem; margin-bottom: 0.82rem; }
  .market-card { min-height: 5.65rem; padding: 0.78rem 0.92rem; }
  .market-card-top { font-size: 0.68rem; }
  .market-card-price { margin-top: 0.48rem; font-size: 1.15rem; }
  .market-card .market-change { font-size: 0.66rem; }
  .market-sparkline { width: 4.8rem; height: 1.7rem; }

  .workspace-grid { gap: 0.82rem; }
  .workspace-panel-head { min-height: 3.75rem; padding: 0.68rem 0.92rem; }
  .workspace-panel-head h2,
  .continue-head h2 { font-size: 1rem; }
  .panel-eyebrow { font-size: 0.61rem; }
  .workspace-panel-head > a { font-size: 0.68rem; }
  .sample-notice { padding: 0.62rem 0.92rem; font-size: 0.65rem; }
  .quick-column-head { min-height: 2rem; font-size: 0.61rem; }
  .quick-row { min-height: 3.75rem; padding-inline: 0.92rem; }
  .quick-symbol strong { font-size: 0.8rem; }
  .quick-symbol small { font-size: 0.64rem; }
  .quick-price,
  .quick-change { font-size: 0.69rem; }
  .quick-add { min-height: 2.9rem; font-size: 0.68rem; }

  .featured-chart-head { min-height: 4.75rem; padding: 0.58rem 0.88rem; }
  .featured-title-line h2 { font-size: 1.15rem; }
  .featured-title-line small { font-size: 0.68rem; }
  .featured-price { font-size: 1.08rem; }
  .featured-change { font-size: 0.75rem; }
  .chart-actions a { min-height: 2.25rem; padding-inline: 0.72rem; font-size: 0.72rem; }
  .workspace-chart,
  .workspace-chart > svg { min-height: 24rem; height: 24rem; }
  .chart-ohlc { font-size: 0.65rem; }

  .workspace-panel-tabs { min-height: 2.65rem; }
  .workspace-panel-tabs button { font-size: 0.71rem; }
  .market-tab-panel { padding: 0.82rem 0.9rem; }
  .pulse-section-title { min-height: 1.85rem; font-size: 0.7rem; }
  .pulse-section-title small { font-size: 0.59rem; }
  .breadth-row { min-height: 1.85rem; font-size: 0.7rem; }
  .breadth-row > strong { font-size: 0.68rem; }
  .breadth-row > small { font-size: 0.63rem; }
  .regime-row { min-height: 2rem; font-size: 0.7rem; }
  .regime-row strong { font-size: 0.67rem; }
  .pulse-subhead { min-height: 2rem; font-size: 0.69rem; }
  .pulse-subhead a { font-size: 0.66rem; }
  .leader-preview a { min-height: 1.68rem; font-size: 0.68rem; }
  .leader-rank { width: 1.3rem; height: 1.3rem; font-size: 0.58rem; }
  .activity-summary { min-height: 1.9rem; font-size: 0.68rem; }

  .workspace-value-strip { gap: 0.82rem; margin-top: 0.82rem; }
  .workspace-value-strip a { min-height: 4.85rem; padding: 0.82rem 1.05rem; }
  .workspace-value-strip strong { font-size: 0.82rem; }
  .workspace-value-strip span { font-size: 0.68rem; }
  .workspace-value-strip small { font-size: 0.61rem; }

  .continue-section { margin-top: 0.82rem; }
  .continue-head { min-height: 2.75rem; padding-bottom: 0.58rem; }
  .continue-grid { gap: 0.82rem; }
  .workflow-card { min-height: 5.7rem; gap: 0.26rem; padding: 0.78rem 5.2rem 0.78rem 1rem; }
  .workflow-type { font-size: 0.58rem; }
  .workflow-card > strong { font-size: 0.8rem; }
  .workflow-card > small { font-size: 0.64rem; }
  .workflow-action { right: 0.95rem; font-size: 0.62rem; }

  .workspace-footer { min-height: 2.8rem; margin: 0.82rem -1.35rem 0; padding-inline: 1.5rem; font-size: 0.66rem; }
}

@media (min-width: 1261px) and (max-width: 1400px) {
  body:has(.workspace-home) .topbar { gap: 0.85rem; }
  body:has(.workspace-home) .section-link { padding-inline: 0.65rem; font-size: 0.78rem; }
  body:has(.workspace-home) .topbar-symbol-search { width: clamp(17rem, 25vw, 22rem); }
  body:has(.workspace-home) .topbar-right { gap: 0.8rem; }
}

/* ---- Watchlist control center -------------------------------------------------
   Page-scoped by .watchlist-page so the accepted Home and Chart workspaces keep
   their frozen geometry. The table remains the dominant object; supporting
   metrics and controls are deliberately shallow, low-radius, and border-led. */
main.watchlist-page {
  max-width: 112rem;
  min-height: calc(100dvh - 6.5rem);
  padding: 1.25rem 1.6rem 2rem;
}
.watchlist-page > .messages { margin-bottom: 0.8rem; }
.watchlist-overview {
  display: grid;
  grid-template-columns: minmax(31rem, 1.15fr) minmax(34rem, 0.95fr);
  align-items: end;
  gap: 1.15rem;
}
.watchlist-heading { margin: 0 0 1rem; }
.watchlist-heading .kicker { margin-bottom: 0.35rem; font-size: 0.62rem; }
.watchlist-heading h1 {
  font-size: clamp(1.9rem, 2.4vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.watchlist-heading .sub { max-width: none; margin-top: 0.35rem; font-size: 0.82rem; }
.watchlist-add {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
}
.watchlist-add-field { position: relative; }
.watchlist-add-field input {
  width: 100%;
  height: 2.7rem;
  padding: 0 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  font: 400 0.8rem var(--font-body);
}
.watchlist-add-field input:hover { border-color: var(--slate); }
.watchlist-add-field input:focus { border-color: var(--action-primary); outline: 0; box-shadow: 0 0 0 2px var(--action-soft); }
.watchlist-add-button {
  min-width: 10.5rem;
  height: 2.7rem;
  padding: 0 1rem;
  border: 1px solid var(--action-ink);
  border-radius: var(--r-lg);
  background: var(--action-primary);
  color: var(--on-accent);
  font: 600 0.78rem var(--font-body);
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}
.watchlist-add-button:hover { background: var(--action-ink); }
.watchlist-add-button:active { transform: scale(0.98); }
.watchlist-form-errors { grid-column: 1 / -1; margin-top: -0.25rem; }
.watchlist-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
}
.watchlist-metric {
  position: relative;
  min-height: 6.55rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.watchlist-metric::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 0;
  width: 2px;
  height: 1.35rem;
  background: var(--action-primary);
  opacity: 0.7;
}
.watchlist-metric--negative::before { background: var(--risk); }
.watchlist-metric dt {
  color: var(--slate);
  font: 500 0.64rem var(--font-body);
  letter-spacing: 0.01em;
}
.watchlist-metric dd {
  margin: 0;
  color: var(--ink);
  font: 700 1.65rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.watchlist-metric--positive dd { color: var(--positive); }
.watchlist-metric--negative dd { color: var(--risk); }
.watchlist-metric small { color: var(--slate); font-size: 0.58rem; line-height: 1.25; }
.watchlist-fact-note {
  margin: 0.8rem 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--slate);
  font-size: 0.65rem;
  line-height: 1.45;
}
.watchlist-ledger {
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.watchlist-toolbar {
  min-height: 3.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.62rem 0.72rem;
  border-bottom: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--surface) 91%, var(--paper-deep));
}
.watchlist-filters,
.watchlist-tools { display: flex; align-items: center; gap: 0.4rem; }
.watchlist-filters { flex: 1 1 auto; min-width: 0; }
.watchlist-filters button {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--slate);
  font: 500 0.68rem var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.watchlist-filters button span { color: inherit; font: 500 0.6rem var(--font-mono); opacity: 0.82; }
.watchlist-filters button:hover { color: var(--ink); background: var(--action-soft); }
.watchlist-filters button.is-active {
  border-color: var(--action-primary);
  background: color-mix(in srgb, var(--action-soft) 60%, transparent);
  color: var(--action-ink);
  font-weight: 600;
}
.watchlist-tools { flex: 0 0 auto; }
.watchlist-tools input,
.watchlist-tools select {
  height: 2.15rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background-color: var(--paper);
  color: var(--ink);
  font: 400 0.68rem var(--font-body);
}
.watchlist-tools input { width: clamp(11.5rem, 16vw, 17.5rem); padding: 0 0.7rem; }
.watchlist-tools select { min-width: 8.8rem; padding: 0 1.8rem 0 0.65rem; }
.watchlist-tools input:hover,
.watchlist-tools select:hover { border-color: var(--slate); }
.watchlist-tools input:focus,
.watchlist-tools select:focus { border-color: var(--action-primary); outline: 0; box-shadow: 0 0 0 2px var(--action-soft); }
.watchlist-table-scroll { overflow-x: auto; background: var(--surface); }
.watchlist-table {
  width: 100%;
  min-width: 79rem;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.watchlist-table th {
  height: 3rem;
  padding: 0.52rem 0.72rem;
  border-bottom: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--surface) 88%, var(--paper-deep));
  color: var(--slate);
  font: 500 0.62rem/1.25 var(--font-body);
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}
.watchlist-table th span { display: block; font-size: 0.56rem; }
.watchlist-table th.num { text-align: right; }
.watchlist-table td {
  min-height: 3.65rem;
  padding: 0.62rem 0.72rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.32;
  vertical-align: middle;
}
.watchlist-table tbody tr:last-child td { border-bottom: 0; }
.watchlist-table tbody tr:hover td { background-color: var(--action-soft); }
.watchlist-table tbody tr[hidden] { display: none; }
.watchlist-symbol-cell { min-width: 10.75rem; }
.watchlist-symbol {
  display: block;
  width: fit-content;
  color: var(--action-ink);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
}
.watchlist-symbol:hover { text-decoration: underline; }
.watchlist-company {
  display: block;
  max-width: 11rem;
  margin-top: 0.18rem;
  overflow: hidden;
  color: var(--slate);
  font-size: 0.64rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watchlist-price { font-size: 0.75rem !important; font-weight: 500; }
.watchlist-change span,
.watchlist-change small { display: block; }
.watchlist-change small { margin-top: 0.12rem; font: 500 0.62rem var(--font-mono); }
.watchlist-date { color: var(--slate) !important; font-size: 0.64rem !important; }
.watchlist-rs { min-width: 8.1rem; white-space: nowrap; }
.watchlist-rank { display: inline-block; min-width: 2.5rem; color: var(--ink); }
.watchlist-rs small,
.watchlist-sma small,
.watchlist-action-state small { display: block; margin-top: 0.2rem; font-size: 0.56rem; }
.watchlist-sma { min-width: 10.2rem; }
.watchlist-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  margin: 0.08rem 0.18rem 0.08rem 0;
  padding: 0 0.46rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--slate);
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
}
.watchlist-badge.is-positive {
  border-color: rgba(var(--positive-rgb), 0.25);
  background: var(--positive-soft);
  color: var(--positive);
}
.watchlist-badge.is-negative {
  border-color: rgba(var(--risk-rgb), 0.26);
  background: var(--risk-tint);
  color: var(--risk);
}
.watchlist-badge.is-muted { color: var(--slate); }
.watchlist-badge.is-scan { border-color: var(--rule); background: color-mix(in srgb, var(--paper) 72%, var(--action-soft)); color: var(--ink); }
.watchlist-week52 { min-width: 6.4rem; }
.watchlist-action-state { min-width: 9.25rem; }
.watchlist-action-state strong { display: block; font-size: 0.68rem; font-weight: 500; }
.watchlist-scans { min-width: 8rem; max-width: 12rem; }
.watchlist-actions-head,
.watchlist-row-actions {
  position: sticky;
  right: 0;
  z-index: 1;
  border-left: 1px solid var(--rule);
  background: var(--surface) !important;
}
.watchlist-actions-head { z-index: 2; min-width: 10.6rem; }
.watchlist-table tbody tr:hover .watchlist-row-actions { background: color-mix(in srgb, var(--surface) 82%, var(--action-soft)) !important; }
.watchlist-row-actions { white-space: nowrap; }
.watchlist-row-actions form { display: inline; margin: 0 0 0 0.32rem; }
.watchlist-open,
.watchlist-remove {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.62rem;
  border-radius: var(--r);
  font: 600 0.62rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.watchlist-open { border: 1px solid var(--action-primary); color: var(--action-ink); background: transparent; }
.watchlist-open:hover { background: var(--action-soft); color: var(--action-ink); }
.watchlist-remove { border: 1px solid var(--rule-strong); background: transparent; color: var(--slate); }
.watchlist-remove:hover { border-color: rgba(var(--risk-rgb), 0.5); background: var(--risk-tint); color: var(--risk); }
.watchlist-no-results { padding: 2.5rem 1rem; color: var(--slate); font-size: 0.75rem; text-align: center; }
.watchlist-ledger-footer {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--rule-strong);
  color: var(--slate);
  font-size: 0.62rem;
}
.watchlist-empty {
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 2.5rem;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  text-align: center;
}
.watchlist-empty h2 { font-size: 1.05rem; text-transform: none; }
.watchlist-empty p { max-width: 34rem; margin: 0.55rem 0 1rem; color: var(--slate); font-size: 0.78rem; }
.watchlist-empty-link { color: var(--action-ink); font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.watchlist-definitions { margin-top: 0.75rem; color: var(--slate); font-size: 0.64rem; }
.watchlist-definitions summary { width: fit-content; color: var(--slate); cursor: pointer; }
.watchlist-definitions summary:hover { color: var(--action-ink); }
.watchlist-definitions > div { max-width: 76rem; padding: 0.45rem 0 0.2rem 1rem; border-left: 1px solid var(--rule-strong); }
.watchlist-definitions p { margin: 0.25rem 0; }

@media (max-width: 1180px) {
  .watchlist-overview { grid-template-columns: 1fr; }
  .watchlist-metrics { grid-template-columns: repeat(4, minmax(8rem, 1fr)); }
  .watchlist-metric { min-height: 5.6rem; }
  .watchlist-toolbar { align-items: flex-start; flex-direction: column; }
  .watchlist-filters { width: 100%; overflow-x: auto; padding-bottom: 0.1rem; }
  .watchlist-tools { width: 100%; }
  .watchlist-tools input { flex: 1 1 auto; width: auto; }
}
@media (max-width: 760px) {
  main.watchlist-page { padding: 1rem 0.75rem 1.5rem; }
  .watchlist-add { grid-template-columns: 1fr; }
  .watchlist-add-button { width: 100%; }
  .watchlist-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watchlist-metric { min-height: 5.2rem; }
  .watchlist-tools { align-items: stretch; flex-direction: column; }
  .watchlist-tools input,
  .watchlist-tools select { width: 100%; }
  .watchlist-ledger-footer { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .watchlist-add-button { transition: none; }
}

/* ---- Market intelligence: scoped to the stored RS ledger and breadth
   snapshot, preserving the accepted workspace, chart, watchlist and scans. */
main.market-page { max-width: 1500px; padding-top: 1.35rem; }
.market-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: 1.05rem; border-bottom: 1px solid var(--rule-strong); }
.market-heading { margin-bottom: 1rem; }.market-heading h1 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.55rem); letter-spacing: -0.035em; text-transform: uppercase; }.market-heading .sub { margin-bottom: 0; }
.market-view-switcher { display: flex; gap: .15rem; flex: 0 0 auto; padding-bottom: .75rem; }.market-view-switcher a { padding: .43rem .68rem; border: 1px solid transparent; color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }.market-view-switcher a:hover { color: var(--ink); background: var(--paper); }.market-view-switcher a.active { border-color: var(--rule-strong); background: var(--surface); color: var(--action-ink); }
.market-empty, .market-stale { margin-top: var(--s4); }.market-empty { max-width: 54rem; padding: var(--s5); border: 1px dashed var(--rule-strong); background: var(--surface); color: var(--slate); font-size: var(--fs-sm); }.market-empty strong { display: block; margin-bottom: var(--s1); color: var(--ink); }
.market-metadata { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1rem 0; border: 1px solid var(--rule-strong); background: var(--surface); }.market-metadata > div { min-height: 4.1rem; padding: .65rem .8rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; }.market-metadata > div:last-child { border-right: 0; }.market-metadata span, .section-eyebrow { color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }.market-metadata strong { color: var(--ink); font-size: .83rem; font-weight: 600; line-height: 1.2; }
.market-definitions, .market-unranked { margin: 1rem 0; border: 1px solid var(--rule-strong); background: var(--surface); }.market-definitions summary, .market-unranked summary { padding: .7rem .85rem; color: var(--ink); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }.market-definitions summary:hover, .market-unranked summary:hover { color: var(--action-ink); }.market-definitions > div { max-width: 74rem; padding: 0 .85rem .75rem; border-top: 1px solid var(--rule); color: var(--slate); font-size: var(--fs-sm); line-height: 1.5; }.market-definitions p { margin: .45rem 0; }
.market-workspace { margin-top: 1.2rem; }.market-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: .75rem; }.market-section-head h2, .breadth-detail-grid h2 { margin: .18rem 0 0; font-size: 1.1rem; }.market-export { color: var(--action-ink); font: 600 var(--fs-xs) var(--font-mono); text-decoration: none; text-transform: uppercase; }.market-export:hover { text-decoration: underline; }
.market-table-tools { display: flex; align-items: end; flex-wrap: wrap; gap: .65rem 1rem; padding: .7rem .8rem; border: 1px solid var(--rule-strong); border-bottom: 0; background: color-mix(in srgb, var(--surface) 82%, var(--paper)); }.market-table-tools label { display: flex; flex-direction: column; gap: .28rem; color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }.market-table-tools input, .market-table-tools select { height: 2rem; min-width: 8.5rem; padding: .25rem .45rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: var(--fs-sm) var(--font-body); }.market-search input { min-width: 15rem; }.market-result-count { margin-left: auto; padding-bottom: .38rem; color: var(--slate); font-size: var(--fs-xs); }.market-table-scroll { border-radius: 0; }.market-ledger { min-width: 820px; }.market-ledger tbody td { vertical-align: middle; }.market-symbol { display: inline-block; min-width: 9.5rem; font-weight: 500; }.market-company { display: inline-block; margin-left: .4rem; color: var(--slate); font-size: var(--fs-xs); }.market-chart-link { color: var(--action-ink); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; white-space: nowrap; }.market-chart-link:hover { text-decoration: underline; }
.market-unranked summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }.market-unranked summary small { color: var(--slate); font: var(--fs-xs) var(--font-mono); }.market-unranked > p { max-width: 60rem; margin: 0; padding: 0 .85rem .7rem; color: var(--slate); font-size: var(--fs-sm); }.market-unranked .table-scroll { margin: 0 .85rem .85rem; }
.breadth-highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }.breadth-card { min-height: 11rem; padding: 1rem; border: 1px solid var(--rule-strong); border-top: 3px solid var(--action-primary); background: var(--surface); display: flex; flex-direction: column; }.breadth-card > span { color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }.breadth-card > strong { margin: .5rem 0 .65rem; color: var(--ink); font: 800 clamp(2.1rem, 1.5rem + 1.7vw, 3rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }.breadth-card > small { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }.breadth-card > em { margin-top: .3rem; color: var(--slate); font-size: var(--fs-xs); font-style: normal; line-height: 1.35; }.breadth-card--low { border-top-color: var(--risk); }.breadth-card--low > strong { color: var(--risk); }.breadth-bar { height: 5px; margin: 0 0 .7rem; overflow: hidden; background: var(--rule); }.breadth-bar i { display: block; height: 100%; min-width: 2px; background: var(--action-primary); }
.breadth-detail-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(23rem, 1.15fr); gap: 1rem; padding: 1rem; border: 1px solid var(--rule-strong); background: var(--surface); }.breadth-detail-grid p { max-width: 38rem; margin: .5rem 0 0; color: var(--slate); font-size: var(--fs-sm); }.breadth-detail-grid dl { margin: 0; border-left: 1px solid var(--rule); }.breadth-detail-grid dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; padding: .56rem .85rem; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }.breadth-detail-grid dl > div:last-child { border-bottom: 0; }.breadth-detail-grid dt { color: var(--slate); font: var(--fs-xs) var(--font-mono); text-transform: uppercase; }.breadth-detail-grid dd { margin: 0; color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .market-page-head { align-items: flex-start; flex-direction: column; gap: 0; }.market-view-switcher { padding-bottom: .8rem; }.market-metadata { grid-template-columns: repeat(3, minmax(0, 1fr)); }.market-metadata > div:nth-child(3) { border-right: 0; }.market-metadata > div:nth-child(-n + 3) { border-bottom: 1px solid var(--rule); }.breadth-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }.breadth-detail-grid { grid-template-columns: 1fr; }.breadth-detail-grid dl { border-left: 0; border-top: 1px solid var(--rule); padding-top: .5rem; } }
@media (max-width: 600px) { main.market-page { padding: 1rem .75rem 1.5rem; }.market-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }.market-metadata > div { border-bottom: 1px solid var(--rule); }.market-metadata > div:nth-child(even) { border-right: 0; }.market-metadata > div:last-child { border-bottom: 0; }.market-table-tools { align-items: stretch; flex-direction: column; }.market-table-tools label, .market-table-tools input, .market-table-tools select, .market-search input { width: 100%; }.market-result-count { margin-left: 0; }.breadth-highlights { grid-template-columns: 1fr; }.breadth-card { min-height: 9rem; }.breadth-detail-grid dl > div { grid-template-columns: 1fr; gap: .2rem; } }

/* ===========================================================================
   Home hero — isolated brand layer above the accepted Workspace content
   ========================================================================== */
.charting-home-hero {
  position: relative;
  isolation: isolate;
  width: min(112rem, 100%);
  height: clamp(21.5rem, 26vw, 28.5rem);
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--md-home-line);
  background: var(--md-home-bg);
  color: var(--md-text);
}
.charting-home-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, var(--md-sidebar) 0%, rgba(3, 18, 32, 0.98) 26%, rgba(3, 18, 32, 0.68) 43%, rgba(3, 18, 32, 0.12) 64%),
    linear-gradient(0deg, rgba(3, 19, 28, 0.72) 0%, rgba(3, 19, 28, 0) 34%);
  content: "";
  pointer-events: none;
}
.home-hero-visual,
.home-hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero-visual { z-index: 0; display: block; }
.home-hero-visual img {
  object-fit: cover;
  object-position: 56% 50%;
  animation: home-hero-image-enter 900ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}
.home-hero-copy {
  position: relative;
  z-index: 2;
  width: min(48%, 47rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem clamp(1.6rem, 3.4vw, 4rem) 1.25rem;
  animation: home-hero-copy-enter 520ms cubic-bezier(0.2, 0.72, 0.28, 1) 80ms both;
}
.home-hero-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--md-text-secondary);
  font: 500 0.69rem/1.2 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.charting-home-hero h1 {
  margin: 0;
  color: var(--md-text);
  font: 700 clamp(2.45rem, 3.25vw, 4rem)/0.99 var(--font-display);
  letter-spacing: -0.047em;
  text-wrap: balance;
}
.charting-home-hero h1 span { color: var(--action-primary); }
.home-hero-summary {
  max-width: 36rem;
  margin: 0.8rem 0 0;
  color: var(--md-text-secondary);
  font-size: clamp(0.83rem, 0.83vw, 1rem);
  line-height: 1.45;
}
.home-hero-search {
  width: min(100%, 39rem);
  height: 3rem;
  display: flex;
  align-items: stretch;
  margin-top: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--md-home-line-mid);
  border-radius: 5px;
  background: rgba(7, 24, 42, 0.88);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.home-hero-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--action-soft), 0 14px 32px -20px rgba(0, 0, 0, 0.95);
}
.home-hero-search input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--md-text);
  font: 400 0.84rem var(--font-body);
}
.home-hero-search input::placeholder { color: var(--md-text-muted); opacity: 1; }
.home-hero-search button {
  flex: 0 0 auto;
  min-width: 5.7rem;
  margin: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--action-primary);
  color: #ffffff;
  font: 600 0.76rem var(--font-body);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.home-hero-search button:hover { background: var(--action-hover); }
.home-hero-search button:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
.home-hero-quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem 0.7rem;
  margin-top: 0.65rem;
  font: 500 0.6rem/1.3 var(--font-mono);
  letter-spacing: 0.035em;
}
.home-hero-quick > span { color: var(--md-text-faint); text-transform: uppercase; }
.home-hero-quick a { color: var(--md-link-muted); text-decoration: none; transition: color 140ms ease; }
.home-hero-quick a:hover,
.home-hero-quick a:focus-visible { color: var(--action-hover); }
.home-hero-facts {
  width: min(100%, 42rem);
  display: grid;
  grid-template-columns: 0.86fr 1.1fr 1.45fr;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(127, 174, 188, 0.18);
}
.home-hero-facts span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  padding: 0 0.72rem;
  border-left: 1px solid rgba(127, 174, 188, 0.2);
  color: var(--md-text-muted);
  font-size: 0.58rem;
  line-height: 1.3;
}
.home-hero-facts span:first-child { padding-left: 0; border-left: 0; }
.home-hero-facts strong {
  overflow: hidden;
  color: var(--md-text-secondary);
  font-size: 0.65rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes home-hero-image-enter {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}
@keyframes home-hero-copy-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1180px) {
  .home-hero-copy { width: 54%; }
  .charting-home-hero h1 { font-size: clamp(2.4rem, 4.1vw, 3.3rem); }
  .home-hero-facts { grid-template-columns: 0.82fr 1fr 1.3fr; }
}
@media (max-width: 860px) {
  .charting-home-hero {
    height: auto;
    min-height: 31rem;
  }
  .charting-home-hero::before {
    background:
      linear-gradient(90deg, rgba(3, 19, 28, 0.98) 0%, rgba(3, 19, 28, 0.88) 55%, rgba(3, 19, 28, 0.42) 100%),
      linear-gradient(0deg, #03131c 0%, rgba(3, 19, 28, 0.1) 50%);
  }
  .home-hero-visual img { object-position: 68% 50%; opacity: 0.72; }
  .home-hero-copy {
    width: 100%;
    min-height: 31rem;
    justify-content: flex-end;
    padding: 2.5rem 1.35rem 1.35rem;
  }
  .charting-home-hero h1 { max-width: 38rem; font-size: clamp(2.35rem, 7vw, 3.5rem); }
  .home-hero-summary { font-size: 0.9rem; }
  .home-hero-search { max-width: 36rem; }
  .home-hero-facts { max-width: 38rem; }
}
@media (max-width: 560px) {
  .charting-home-hero { min-height: 33rem; }
  .home-hero-copy { min-height: 33rem; padding-inline: 1rem; }
  .charting-home-hero h1 { font-size: clamp(2.15rem, 10.8vw, 3.05rem); }
  .home-hero-summary br { display: none; }
  .home-hero-search { height: auto; flex-direction: column; border-radius: 4px; }
  .home-hero-search input { min-height: 2.85rem; }
  .home-hero-search button { min-height: 2.65rem; border-top: 1px solid rgba(255, 255, 255, 0.14); border-left: 0; }
  .home-hero-quick { max-height: 3rem; overflow: hidden; }
  .home-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero-facts span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-visual img,
  .home-hero-copy { animation: none; }
  .home-hero-search,
  .home-hero-search button,
  .home-hero-quick a { transition: none; }
}

/* ---- Alert activity: persisted daily-event log --------------------------------
   Kept entirely under .alerts-page so frozen workspace, chart, watchlist,
   scans and market views retain their accepted geometry. */
main.alerts-page { max-width: 112rem; min-height: calc(100dvh - 6.5rem); padding: 1.25rem 1.6rem 2rem; }
.alerts-workspace { max-width: 100%; }
.alerts-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: 1rem; border-bottom: 1px solid var(--rule-strong); }
.alerts-header > div { padding-bottom: 1rem; }
.alerts-header .kicker { margin-bottom: .35rem; font-size: .62rem; }
.alerts-header h1 { margin: 0; font-size: clamp(1.9rem, 2.4vw, 2.55rem); font-weight: 700; letter-spacing: -.035em; text-transform: uppercase; }
.alerts-header .sub { margin: .35rem 0 0; max-width: 48rem; font-size: .82rem; }
.alerts-header-note { max-width: 15.5rem; margin: 0 0 1rem; color: var(--slate); font: 400 var(--fs-xs)/1.45 var(--font-mono); text-align: right; }
.alerts-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--rule-strong); background: var(--surface); }
.alerts-summary > div { display: flex; min-height: 5.4rem; flex-direction: column; justify-content: space-between; padding: .72rem .9rem; border-right: 1px solid var(--rule); }
.alerts-summary > div:last-child { border-right: 0; }
.alerts-summary dt { color: var(--slate); font: 500 var(--fs-xs)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.alerts-summary dd { margin: .45rem 0 .1rem; color: var(--ink); font: 700 1.55rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.alerts-summary .alerts-summary-date { font: 500 1.03rem/1.2 var(--font-mono); letter-spacing: -.04em; }
.alerts-summary small { color: var(--slate); font-size: var(--fs-xs); }
.alerts-fact-note { margin: .7rem 0 1.15rem; color: var(--slate); font-size: var(--fs-xs); }
.alerts-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14.5rem, 15.25rem); align-items: start; gap: 1rem; }
.alerts-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: .65rem; }
.alerts-section-head .kicker { margin-bottom: .22rem; font-size: .61rem; }
.alerts-section-head h2 { margin: 0; font-size: 1.08rem; }
.alerts-result-count { color: var(--slate); font: 400 var(--fs-xs) var(--font-mono); white-space: nowrap; }
.alerts-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: .55rem; }
.alerts-filter-group { display: inline-flex; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--r); }
.alerts-filter { padding: .48rem .58rem; border: 0; border-right: 1px solid var(--rule); background: var(--surface); color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); cursor: pointer; }
.alerts-filter:last-child { border-right: 0; }.alerts-filter.is-active { background: var(--action-primary); color: var(--on-accent); }
.alerts-search { min-width: min(100%, 14rem); flex: 1 1 14rem; }.alerts-search input { width: 100%; padding: .53rem .65rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 400 var(--fs-sm) var(--font-body); }
.alerts-search input:focus, .alerts-sort select:focus { border-color: var(--action-primary); outline: 0; box-shadow: 0 0 0 2px var(--action-soft); }
.alerts-sort { display: flex; align-items: center; gap: .35rem; color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); white-space: nowrap; }.alerts-sort select { padding: .47rem .42rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 500 var(--fs-xs) var(--font-mono); }
.alerts-ledger-wrap { border-radius: var(--r); }.alerts-ledger { min-width: 1030px; }.alerts-ledger tbody td { vertical-align: middle; }.alerts-ledger th:nth-child(1) { width: 8.4rem; }.alerts-ledger th:nth-child(2) { width: 8.6rem; }.alerts-ledger th:nth-child(3) { width: 8.9rem; }.alerts-ledger th:nth-child(5) { width: 10.4rem; }.alerts-ledger th:nth-child(6) { width: 9.2rem; }.alerts-ledger th:nth-child(7) { width: 7.3rem; }
.alerts-as-of small, .alerts-source small, .alerts-recorded small { display: block; margin-top: .18rem; color: var(--slate); font-size: var(--fs-xs); }
.alerts-symbol a { color: var(--ink); font-weight: 500; text-decoration: none; }.alerts-symbol a:hover { color: var(--action-ink); text-decoration: underline; text-underline-offset: 2px; }
.alerts-type-badge { display: inline-block; padding: .18rem .4rem; border: 1px solid var(--rule-strong); border-radius: var(--r); color: var(--ink); font: 500 .64rem/1.15 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }.alerts-type-badge.is-scan { border-color: rgba(var(--action-rgb), .55); background: var(--action-soft); color: var(--action-ink); }.alerts-type-badge.is-cross { background: var(--paper); color: var(--slate); }
.alerts-event { min-width: 20rem; line-height: 1.45; }.alerts-source > span, .alerts-source > a { color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }.alerts-source > a:hover { color: var(--action-ink); text-decoration: underline; text-underline-offset: 2px; }.alerts-recorded { white-space: nowrap; }
.alerts-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .32rem; white-space: nowrap; }.alerts-actions a { color: var(--action-ink); font: 500 var(--fs-xs) var(--font-mono); text-decoration: none; }.alerts-actions a:hover { text-decoration: underline; text-underline-offset: 2px; }
.alerts-no-results { margin: .8rem 0; padding: 2rem 1rem; border: 1px solid var(--rule-strong); color: var(--slate); font-size: var(--fs-sm); text-align: center; }
.alerts-rail { border-left: 1px solid var(--rule-strong); padding-left: 1rem; }.alerts-rail section + section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }.alerts-rail .kicker { margin-bottom: .5rem; font-size: .61rem; }.alerts-rail ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.05rem; color: var(--slate); font-size: var(--fs-xs); line-height: 1.45; }.alerts-quick-links { display: grid; gap: .55rem; }.alerts-quick-links a { color: var(--action-ink); font: 500 var(--fs-xs) var(--font-mono); text-decoration: none; }.alerts-quick-links a:hover { text-decoration: underline; text-underline-offset: 2px; }
.alerts-empty { max-width: 45rem; margin-top: 1.15rem; padding: 1.35rem 1.45rem; border: 1px solid var(--rule-strong); border-left: 3px solid var(--action-primary); background: var(--surface); }.alerts-empty .kicker { margin-bottom: .4rem; font-size: .61rem; }.alerts-empty h2 { margin: 0; font-size: 1.25rem; }.alerts-empty p { margin: .55rem 0 1rem; color: var(--slate); font-size: var(--fs-sm); line-height: 1.5; }.alerts-empty-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.alerts-empty-actions a { padding: .38rem .55rem; border: 1px solid var(--rule-strong); border-radius: var(--r); color: var(--ink); font: 500 var(--fs-xs) var(--font-mono); text-decoration: none; }.alerts-empty-actions a:hover { border-color: var(--action-primary); color: var(--action-ink); }
@media (max-width: 1360px) { .alerts-layout { grid-template-columns: 1fr; }.alerts-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--rule-strong); border-left: 0; padding: 1rem 0 0; }.alerts-rail section + section { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--rule); padding-left: 1rem; } }
@media (max-width: 760px) { main.alerts-page { padding: 1rem .75rem 1.5rem; }.alerts-header { align-items: flex-start; flex-direction: column; gap: 0; }.alerts-header-note { max-width: none; margin: 0 0 .9rem; text-align: left; }.alerts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.alerts-summary > div:nth-child(2) { border-right: 0; }.alerts-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }.alerts-toolbar { align-items: stretch; }.alerts-filter-group { width: 100%; }.alerts-filter { flex: 1; }.alerts-search { flex-basis: 100%; }.alerts-sort { justify-content: space-between; }.alerts-sort select { flex: 1; }.alerts-rail { grid-template-columns: 1fr; }.alerts-rail section + section { border-top: 1px solid var(--rule); border-left: 0; padding-top: 1rem; padding-left: 0; } }

/* Responsive system. Desktop composition and tokens above remain the source of truth. */
.mobile-product-menu, .mobile-draw-toggle, .chart-more-toggle { display: none; }
.alerts-log, .alerts-layout > * { min-width: 0; }
.scan-reference-group { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.scan-reference-group summary { list-style: none; }
.scan-reference-group summary::-webkit-details-marker { display: none; }
.scan-reference-group h3 { display: inline; margin: 0 0 var(--s2); color: var(--slate); font: 500 var(--fs-xs) var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .topbar { gap: .5rem; }
  .section-switcher { gap: 0; }
  .section-link { padding-inline: .55rem; }
  .topbar-symbol-search { width: min(24vw, 14rem); }
  .chart-workspace-page #chart-toolbar { overflow-x: auto; scrollbar-width: thin; }
  .chart-workspace-page #chart-toolbar > * { flex-shrink: 0; }
  .chart-workspace-page #chart-workspace.is-fullscreen { grid-template-columns: 1fr; overflow: auto; }
  .chart-workspace-page #chart-workspace.is-fullscreen #chart-rail { position: static; width: 100%; height: min(28rem, 50dvh); }
}

@media (max-width: 900px) {
  .topbar-symbol-search { display: flex; order: 3; flex: 1 1 100%; width: 100%; max-width: none; }
  .chart-workspace-page #chart-workspace.is-fullscreen { display: block; }
  .chart-workspace-page #chart-workspace.is-fullscreen #chart-rail { margin-top: var(--s2); }
  .workspace-grid .featured-chart-panel { order: 1; }
  .workspace-grid .market-panel { order: 2; }
  .workspace-grid .quick-panel { order: 3; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .mark-slot { grid-column: 1; }
  .section-switcher { grid-column: 2; }
  .topbar-right { display: contents; }
  .topbar-right .theme-toggle { grid-column: 3; margin-left: 0; }
  .topbar-right .account-area { grid-column: 4; white-space: nowrap; }
  .topbar-symbol-search { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
  /* One compact product bar and an always available, horizontally scrollable section rail. */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; padding: .5rem .75rem; }
  .mark-slot { width: auto; justify-content: flex-start; gap: .45rem; }
  .mark-word { display: inline; font-size: 1rem; }
  .section-switcher { display: none; }
  .topbar-right { display: contents; }
  .topbar-right .theme-toggle { grid-column: 2; min-height: 2.5rem; }
  .topbar-right .account-area { display: none; }
  .topbar-symbol-search { display: flex; grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
  body:has(.workspace-home) .topbar-symbol-search { display: none; }
  .mobile-product-menu { display: block; position: relative; grid-column: 3; grid-row: 1; z-index: 100; }
  .mobile-product-menu > summary { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; list-style: none; }
  .mobile-product-menu > summary::-webkit-details-marker { display: none; }
  .mobile-product-menu[open] > summary { background: var(--action-soft); }
  .mobile-product-menu nav, .mobile-account { display: grid; gap: .15rem; }
  .mobile-menu-panel { position: absolute; top: calc(100% + .3rem); right: 0; width: min(17rem, calc(100vw - 1.5rem)); padding: .55rem; border: 1px solid var(--rule-strong); background: var(--surface); box-shadow: var(--shadow-1); }
  .mobile-product-menu nav a, .mobile-product-menu nav span, .mobile-account > * { padding: .55rem .6rem; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
  .mobile-product-menu nav span { color: var(--slate); }
  .mobile-account { border-top: 1px solid var(--rule); margin-top: .35rem; padding-top: .35rem; }
  .mobile-account form { margin: 0; }
  .mobile-account button { border: 0; background: none; padding: 0; color: var(--action-ink); font: inherit; cursor: pointer; }
  .subnav, .subnav.open { display: flex; width: 100%; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 1.1rem; overflow-x: auto; padding: .15rem .75rem 0; scrollbar-width: thin; }
  .subnav > * { flex: 0 0 auto; min-height: 2.65rem; display: inline-flex; align-items: center; white-space: nowrap; }
  .subnav a { padding-bottom: 0; }
  .subnav-market-menu { z-index: 101; }

  /* The atmospheric hero stays behind the copy rather than becoming a separate image. */
  .charting-home-hero { min-height: 27rem; }
  .home-hero-copy { min-height: 27rem; justify-content: center; padding: 1.8rem 1rem 1.2rem; }
  .charting-home-hero::before { background: linear-gradient(90deg, rgba(3,19,28,.95), rgba(3,19,28,.55)), linear-gradient(0deg, #03131c, transparent 70%); }
  .home-hero-visual img { object-position: 70% 50%; }
  .home-hero-summary br + span { margin-left: .25em; }
  .home-hero-quick { max-height: none; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: .4rem; }
  .home-hero-quick > * { flex: 0 0 auto; }
  .home-hero-quick a { display: inline-flex; align-items: center; min-height: 2rem; }
  .home-hero-facts { margin-top: .4rem; }
  .home-hero-facts span:last-child { display: flex; grid-column: 1 / -1; margin-top: .45rem; padding: .45rem 0 0; border-top: 1px solid rgba(127,174,188,.18); border-left: 0; }
  .home-hero-facts span:last-child strong { white-space: normal; }
  .market-card-row, .workspace-value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-card { min-height: 5.6rem; }
  .continue-grid { grid-template-columns: 1fr; }
  .workspace-chart, .workspace-chart > svg { min-height: 19rem; height: 19rem; }

  /* Chart: full-width canvas, compact tool tray, inspector below the chart on demand. */
  .chart-workspace-page { --chart-canvas-h: clamp(19rem, 43dvh, 23rem); }
  .instrument-header { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; }
  .instrument-identity { min-width: 0; }
  .instrument-price-block { grid-column: 1 / -1; }
  .related-menu { display: block; grid-column: 2; grid-row: 1; align-self: start; }
  .chart-workspace-page #chart-toolbar { position: relative; min-height: 2.8rem; flex-wrap: wrap; overflow-x: visible; }
  .chart-workspace-page #chart-toolbar > .toolbar-control:nth-child(2) select { max-width: 6.3rem; }
  .chart-workspace-page #chart-toolbar .toolbar-timeframe > label { display: none; }
  .chart-workspace-page #chart-toolbar .toolbar-control:nth-child(3),
  .chart-workspace-page #chart-toolbar #compare-toggle,
  .chart-workspace-page #chart-toolbar #replay-toggle,
  .chart-workspace-page #chart-toolbar #layout-panel-toggle,
  .chart-workspace-page #chart-toolbar #save-chart-button { display: none; }
  .chart-workspace-page #chart-toolbar.more-open { flex-wrap: wrap; overflow-x: visible; }
  .chart-workspace-page #chart-toolbar.more-open .toolbar-control:nth-child(3),
  .chart-workspace-page #chart-toolbar.more-open #compare-toggle,
  .chart-workspace-page #chart-toolbar.more-open #replay-toggle,
  .chart-workspace-page #chart-toolbar.more-open #layout-panel-toggle,
  .chart-workspace-page #chart-toolbar.more-open #save-chart-button { display: inline-flex; order: 1; }
  .chart-workspace-page #chart-toolbar .chart-more-toggle { display: inline-flex; order: 0; margin-left: auto; }
  .chart-workspace-page #chart-toolbar .chart-more-toggle { border-color: var(--rule-strong); background: var(--paper); }
  .chart-workspace-page #fullscreen-toggle { padding-inline: .55rem; }
  .chart-workspace-page #fullscreen-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .chart-workspace-page #chart-toolbar .toolbar-timeframe { order: -4; }
  .chart-workspace-page #chart-toolbar > .toolbar-control:nth-child(2) { order: -3; }
  #indicator-panel-toggle { order: -2; }
  #fullscreen-toggle { order: -1; }
  .chart-workspace-page #chart-toolbar .toolbar-button, .chart-workspace-page #chart-toolbar select { min-height: 2.4rem; }
  .mobile-draw-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; margin: .5rem 0; padding: 0 .8rem; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 600 var(--fs-sm) var(--font-body); cursor: pointer; }
  .mobile-draw-toggle[aria-expanded="true"] { border-color: var(--action-primary); color: var(--action-ink); background: var(--action-soft); }
  .chart-stage { grid-template-columns: minmax(0, 1fr); }
  .chart-workspace-page #drawing-toolbar { display: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .chart-workspace-page .drawing-tray-open #drawing-toolbar { display: flex; flex-direction: row; overflow-x: auto; }
  .chart-workspace-page #drawing-toolbar button { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; }
  .chart-workspace-page #drawing-toolbar button.active { box-shadow: inset 0 -2px var(--action-primary); }
  .chart-workspace-page #chart-rail { height: min(31rem, 65dvh); }
  .chart-workspace-page #chart-workspace.is-fullscreen { padding: .35rem; }
  .chart-workspace-page #chart-workspace.is-fullscreen #chart-container, .chart-workspace-page #chart-workspace.is-fullscreen #data-unavailable { height: calc(100dvh - 10rem); min-height: 19rem; }
  .chart-workspace-page #chart-workspace.is-fullscreen .chart-stage { min-height: calc(100dvh - 10rem); }
  .toolbar-popover { position: relative; top: 0; min-width: 0; box-shadow: none; }
  .toolbar-popover .info-tip { position: static; }
  .toolbar-popover .info-bubble { left: auto; right: .5rem; max-width: calc(100vw - 3rem); }
  #compare-form input { min-width: 0; flex: 1 1 11rem; }
  #replay-controls { flex-wrap: wrap; }
  #replay-scrubber { flex: 1 1 100%; }
  .chart-support-panels { grid-template-columns: 1fr; }

  .scan-summary-strip, .scan-run-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-summary-strip > div, .scan-run-summary > div { min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .scan-summary-strip > div:nth-child(even), .scan-run-summary > div:nth-child(even) { border-right: 0; }
  .scan-summary-strip > div:last-child, .scan-run-summary > div:last-child { border-bottom: 0; }
  .scan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-metrics > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .scan-metrics > div:nth-child(even) { border-right: 0; }
  .scan-metrics > div:nth-child(n+3) { border-bottom: 0; }
  .scan-reference-rail section { padding: .55rem 0; }
  .scan-reference-group { padding: .65rem 0; }
  .scan-reference-group summary { cursor: pointer; }
  .scan-reference-group summary { display: flex; align-items: center; min-height: 2.65rem; }
  .scan-reference-group summary::before { content: '+ '; color: var(--action-ink); font-weight: 700; }
  .scan-reference-group[open] summary::before { content: '− '; }
  .scan-reference-group .scan-reference-names { padding: .65rem 0 .2rem 1rem; }
  .scan-distribution { width: 100%; table-layout: fixed; }
  .scan-distribution th:first-child, .scan-distribution td:first-child { width: 6.7rem; }
  .scan-distribution th:nth-child(2), .scan-distribution td:nth-child(2) { width: 3.2rem; }
  .breadth-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breadth-card { min-height: 10rem; padding: .8rem; }
  .breadth-card > strong { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .watchlist-filters button, .scan-filter, .market-view-switcher a { min-height: 2.65rem; }
  .alerts-layout { grid-template-columns: minmax(0, 1fr); }
  .alerts-filter-group { max-width: 100%; overflow-x: auto; }
  .alerts-filter { flex: 0 0 auto; min-height: 2.65rem; }
  .alerts-search input, .alerts-sort select { min-height: 2.65rem; }
}

/* Motion and interaction polish. These rules change feedback, not geometry. */
.section-link,
.subnav > a,
.subnav-market > summary,
.theme-toggle .theme-opt,
.market-view-switcher a,
.mobile-product-menu > summary {
  transition: color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.subnav > a:hover,
.subnav-market > summary:hover { color: var(--action-ink); }
.subnav > a:active,
.subnav-market > summary:active,
.market-view-switcher a:active,
.mobile-product-menu > summary:active { background: var(--action-soft); }
.subnav-market[open] > summary { color: var(--action-ink); }
.mobile-product-menu[open] > .mobile-menu-panel,
.subnav-market[open] > .subnav-market-menu {
  animation: motion-menu-in var(--motion-standard) var(--motion-ease) both;
}
.mobile-product-menu nav a,
.mobile-account button,
.subnav-market-menu a { transition: color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.mobile-product-menu nav a:hover,
.mobile-product-menu nav a:focus-visible,
.mobile-product-menu nav a:active { color: var(--action-ink); background: var(--action-soft); }

.toolbar-button,
.chart-workspace-page #chart-toolbar select,
.mobile-draw-toggle,
.chart-workspace-page #drawing-toolbar button,
.inspector-tab,
.inspector-close,
.indicator-group > summary,
.indicator-toggle,
.toolbar-popover button {
  transition: color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.chart-workspace-page #chart-toolbar select:hover,
.chart-workspace-page #chart-toolbar select:focus-visible { background-color: var(--action-soft); }
.toolbar-button:active,
.mobile-draw-toggle:active,
.chart-workspace-page #drawing-toolbar button:active,
.inspector-tab:active,
.inspector-close:active { background: var(--action-soft); }
.toolbar-button[aria-expanded="true"],
.chart-more-toggle[aria-expanded="true"] { border-color: var(--action-primary); color: var(--action-ink); background: var(--action-soft); }
.chart-workspace-page #chart-rail:not([hidden]) { animation: motion-panel-in var(--motion-standard) var(--motion-ease) both; }
.toolbar-popover:not([hidden]) { animation: motion-panel-in var(--motion-standard) var(--motion-ease) both; }
.inspector-panel.is-active:not([hidden]) { animation: motion-content-in var(--motion-fast) var(--motion-ease) both; }
.indicator-group > summary:hover,
.indicator-toggle:hover { background: color-mix(in srgb, var(--action-soft) 38%, transparent); }
.inspector-tab::after {
  content: "";
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: -1px;
  height: 2px;
  background: var(--action-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.inspector-tab.is-active::after { transform: scaleX(1); }

.workspace-panel-tabs button::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -1px;
  height: 2px;
  background: var(--action-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.workspace-panel-tabs button.is-active::after { transform: scaleX(1); }
.market-tab-panel:not([hidden]) { animation: motion-content-in var(--motion-fast) var(--motion-ease) both; }
.summary-tile { transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.summary-tile:hover { box-shadow: none; border-color: var(--action-primary); background: color-mix(in srgb, var(--action-soft) 20%, var(--surface)); }
.ledger-card { transition: border-color var(--motion-standard) var(--motion-ease), background-color var(--motion-standard) var(--motion-ease), transform var(--motion-standard) var(--motion-ease); }
.ledger-card:hover { box-shadow: none; transform: translateY(-1px); background: color-mix(in srgb, var(--action-soft) 16%, var(--surface)); }
.market-card,
.continue-card,
.workflow-card,
.workspace-value-strip a { transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }

.watchlist-filters button,
.scan-filter,
.alerts-filter,
.scan-actions a,
.scan-page-actions a,
.scan-text-action,
.watchlist-open,
.watchlist-remove,
.market-chart-link,
.alerts-actions a,
.alerts-quick-links a,
.alerts-source > a,
.scan-reference-group summary,
.market-definitions summary,
.market-unranked summary,
.watchlist-definitions summary {
  transition: color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.scan-filter:not(.is-active):hover,
.alerts-filter:not(.is-active):hover { background: var(--action-soft); color: var(--ink); }
.scan-text-action:hover,
.scan-text-action:focus-visible { color: var(--action-primary); }
.scan-filter:active,
.alerts-filter:active,
.watchlist-filters button:active,
.scan-actions a:active,
.watchlist-open:active,
.scan-reference-group summary:active,
.market-definitions summary:active,
.market-unranked summary:active,
.watchlist-definitions summary:active { background: var(--action-soft); }
.scan-reference-group summary:hover h3,
.scan-reference-group summary:focus-visible h3 { color: var(--action-ink); }
.scan-syntax-examples code { transition: border-color var(--motion-fast) var(--motion-ease); }
.scan-syntax-examples code:hover { border-color: var(--rule-strong); }

table.ledger tbody td,
.watchlist-table tbody td { transition: background-color var(--motion-fast) var(--motion-ease); }
table.ledger tbody tr:not(.matched):hover td,
.watchlist-table tbody tr:hover td { background-color: color-mix(in srgb, var(--action-soft) 34%, var(--surface)); }
.watchlist-table tbody tr:hover .watchlist-row-actions { background: color-mix(in srgb, var(--action-soft) 34%, var(--surface)) !important; }
.watchlist-metric,
.breadth-card { transition: border-color var(--motion-fast) var(--motion-ease); }
.watchlist-metric:hover,
.breadth-card:hover { border-color: var(--rule-strong); }

.watchlist-tools input,
.watchlist-tools select,
.scan-search input,
.scan-sort select,
.alerts-search input,
.alerts-sort select,
.market-table-tools input,
.market-table-tools select,
.watchlist-add-field input,
.indicator-search { transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
:is(.watchlist-tools, .scan-search, .scan-sort, .alerts-search, .alerts-sort, .market-table-tools, .watchlist-add-field) :is(input, select):focus-visible,
.indicator-search:focus-within { outline: 2px solid var(--action-primary); outline-offset: 2px; }
:is(.btn, .btn-ghost, .btn-small, .watchlist-add-button, .toolbar-button, .scan-filter, .alerts-filter):disabled { cursor: not-allowed; }

@media (max-width: 640px) {
  .chart-workspace-page .drawing-tray-open #drawing-toolbar { animation: motion-content-in var(--motion-standard) var(--motion-ease) both; }
  .chart-workspace-page #chart-toolbar.more-open > :is(.toolbar-control:nth-child(3), #compare-toggle, #replay-toggle, #layout-panel-toggle, #save-chart-button) {
    animation: motion-content-in var(--motion-fast) var(--motion-ease) both;
  }
  .chart-workspace-page #chart-rail:not([hidden]) { animation: motion-content-in var(--motion-standard) var(--motion-ease) both; }
}
@keyframes motion-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes motion-panel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes motion-content-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* Existing chart and hero rules above restore their final, readable state. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ledger-card:hover { transform: none; }
}
/* MarketDeck progressive auth uses Charting's own color tokens. */
.marketdeck-auth-open { overflow: hidden; }
.marketdeck-auth-backdrop[hidden] { display: none; }
.marketdeck-auth-backdrop {
  position: fixed; inset: 0; z-index: 1000; padding: 1rem;
  display: grid; place-items: center; background: rgba(0, 0, 0, .58);
}
.subnav > button[data-marketdeck-auth-required] {
  border: 0; background: transparent; font: 500 .76rem var(--font-body);
  color: var(--ink); padding: 0; cursor: pointer;
}
.subnav > button[data-marketdeck-auth-required]:hover { color: var(--action-ink); }
.quick-add[data-marketdeck-auth-required] { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.marketdeck-auth-dialog {
  position: relative; width: min(100%, 30rem); max-height: calc(100vh - 2rem);
  overflow: auto; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-2);
}
.marketdeck-auth-dialog:focus { outline: none; }
.marketdeck-auth-brand { margin: 0 0 1rem; color: var(--action-primary); font: 800 1rem var(--font-display); }
.marketdeck-auth-dialog h2 { margin: 0 2rem .75rem 0; font: 800 clamp(1.5rem, 5vw, 2rem)/1.15 var(--font-display); }
.marketdeck-auth-dialog p { line-height: 1.5; }
.marketdeck-auth-context { color: var(--muted); min-height: 1.5em; }
.marketdeck-auth-primary, .marketdeck-auth-secondary, .marketdeck-auth-explore {
  box-sizing: border-box; display: block; width: 100%; padding: .8rem 1rem;
  margin-top: .75rem; border-radius: var(--r); text-align: center;
  font: 600 1rem var(--font-body); cursor: pointer;
}
.marketdeck-auth-primary { background: var(--action-primary); color: var(--on-accent); text-decoration: none; }
.marketdeck-auth-secondary { background: var(--surface-muted); color: var(--ink); border: 1px solid var(--rule-strong); text-decoration: none; }
.marketdeck-auth-explore { background: transparent; color: var(--muted); border: 0; }
.marketdeck-auth-close { position: absolute; top: .8rem; right: .8rem; border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.marketdeck-auth-dialog :focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }
.marketdeck-auth-return[hidden] { display: none; }
.marketdeck-auth-return {
  position: fixed; z-index: 100; right: 1rem; bottom: 1rem;
  width: min(24rem, calc(100vw - 2rem)); padding: 1rem 2.5rem 1rem 1rem;
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--action-primary);
  border-radius: var(--r); background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-2); font-size: var(--fs-sm);
}
.marketdeck-auth-return a, .marketdeck-auth-return button:not(#marketdeck-auth-return-close) { display: block; margin-top: .5rem; color: var(--action-ink); font: 600 var(--fs-sm) var(--font-body); }
.marketdeck-auth-return a[hidden], .marketdeck-auth-return button[hidden] { display: none; }
.marketdeck-auth-return button { border: 0; background: transparent; cursor: pointer; }
#marketdeck-auth-return-close { position: absolute; top: .4rem; right: .5rem; color: var(--muted); font-size: 1.2rem; }

/* ========================================================================
   MarketDeck visual system — Charting
   Dark-only production contract. Interaction, financial direction, status,
   and information each have an explicit semantic role so component state
   cannot accidentally inherit a market-direction colour.
   ======================================================================== */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --md-bg-deep: #070b10;
  --md-bg: #0a1017;
  --md-sidebar: #031220;
  --md-topbar: #050d18;
  --md-surface-1: #0d131b;
  --md-surface-2: #121a24;
  --md-surface-3: #182332;
  --md-border-subtle: #1b2734;
  --md-border: #293846;
  --md-border-strong: #3a4d60;
  --md-border-active: #176fd1;
  --md-text: #f4f7fb;
  --md-text-secondary: #b4bfcd;
  --md-text-muted: #7f8d9e;
  --md-text-faint: #617185;
  --md-link: #eef4fb;
  --md-link-muted: #d5deea;
  --md-primary: #1392fd;
  --md-primary-hover: #39a5ff;
  --md-primary-active: #0877e6;
  --md-primary-soft: rgba(19, 146, 253, 0.09);
  --md-primary-strong-soft: rgba(19, 146, 253, 0.15);
  --md-positive: #22c55e;
  --md-negative: #ef4444;
  --md-warning: #f59e0b;
  --md-info: #22d3ee;
  --md-home-bg: #000b17;
  --md-home-surface: #07182a;
  --md-home-raised: #0a2035;
  --md-home-hover: #0d2842;
  --md-home-line: #132a42;
  --md-home-line-mid: #1b3c5e;

  --action-primary: var(--md-primary);
  --action-hover: var(--md-primary-hover);
  --action-active: var(--md-primary-active);
  --action-ink: var(--md-primary-hover);
  --action-rgb: 19, 146, 253;
  --action-soft: var(--md-primary-soft);
  --action-strong-soft: var(--md-primary-strong-soft);
  --selection: var(--md-primary);
  --selection-ink: var(--md-text);
  --selection-soft: var(--md-primary-soft);
  --focus: var(--md-primary);
  --link: var(--md-primary-hover);
  --link-hover: var(--md-text);
  --positive: var(--md-positive);
  --positive-rgb: 34, 197, 94;
  --positive-soft: rgba(34, 197, 94, 0.10);
  --negative: var(--md-negative);
  --negative-rgb: 239, 68, 68;
  --negative-soft: rgba(239, 68, 68, 0.10);
  --success: var(--md-positive);
  --success-soft: rgba(34, 197, 94, 0.10);
  --error: var(--md-negative);
  --error-soft: rgba(239, 68, 68, 0.10);
  --info: var(--md-info);
  --info-rgb: 34, 211, 238;
  --info-soft: rgba(34, 211, 238, 0.10);
  --border-neutral: var(--md-border);
  --border-subtle: var(--md-border-subtle);

  --paper: var(--md-bg);
  --surface: var(--md-surface-1);
  --surface-muted: var(--md-surface-2);
  --surface-raised: var(--md-surface-3);
  --ink: var(--md-text);
  --muted: var(--md-text-muted);
  --attention: var(--md-warning);
  --slate: var(--md-text-secondary);
  --rule: var(--md-border-subtle);
  --rule-strong: var(--md-border);
  --risk: var(--md-negative);
  --on-accent: #ffffff;
  --attention-rgb: 245, 158, 11;
  --risk-rgb: 239, 68, 68;
  --ink-rgb: 244, 247, 251;
  --slate-rgb: 180, 191, 205;
  --paper-deep: var(--md-bg-deep);
  --grid-line: rgba(180, 191, 205, 0.055);
  --chart-canvas: var(--md-surface-1);
  --chart-grid: var(--md-border-subtle);
  --chart-axis: var(--md-text-muted);
  --chart-crosshair: var(--md-text-faint);
  --chart-scale-border: var(--md-border);
  --bull: var(--positive);
  --bear: var(--negative);
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --fs-display: clamp(30px, 1.4rem + 1.5vw, 40px);
  --fs-h2: 19px;
  --fs-body: 14.5px;
  --fs-sm: 12.5px;
  --fs-xs: 11px;
  --r: 6px;
  --r-lg: 8px;
  color-scheme: dark;
  accent-color: var(--md-primary);
}

body.marketdeck-app {
  min-width: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--md-bg-deep);
  color: var(--md-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.marketdeck-app h1,
.marketdeck-app h2,
.marketdeck-app h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
.marketdeck-app h2 { text-transform: none; }
:where(.marketdeck-app) a { color: var(--link); }
:where(.marketdeck-app) a:hover { color: var(--link-hover); }
.marketdeck-app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.marketdeck-skip {
  position: fixed; z-index: 120; top: 8px; left: 8px; padding: 8px 12px;
  border-radius: 6px; background: var(--md-primary); color: #fff;
  transform: translateY(-160%);
}
.marketdeck-skip:focus { transform: translateY(0); }

.marketdeck-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.suite-sidebar {
  position: sticky; top: 0; z-index: 40; display: flex; flex: 0 0 188px;
  flex-direction: column; width: 188px; height: 100vh;
  border-right: 1px solid var(--md-border-subtle); background: var(--md-sidebar);
}
.suite-sidebar-head { flex: 0 0 auto; padding: 12px 12px 11px; border-bottom: 1px solid var(--md-border-subtle); }
.suite-brand { display: inline-flex; color: var(--md-text); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.suite-brand::first-letter { color: var(--md-primary); }
.suite-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 15px 8px; }
.suite-rail-label { display: block; padding: 0 8px 7px; color: var(--md-text-faint); font: 500 9px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.suite-product-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.suite-product {
  position: relative; display: flex; align-items: center; gap: 9px; min-height: 43px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
  color: var(--md-link); text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.suite-product:hover { background: var(--md-surface-3); color: var(--md-text); }
.suite-product-current { border-color: rgba(19, 146, 253, 0.13); background: var(--md-primary-strong-soft); }
.suite-product-current::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: -8px; width: 2px; background: var(--md-primary); }
.suite-product-icon { display: inline-flex; flex: 0 0 26px; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--md-primary-soft); color: var(--md-primary); }
.suite-product-icon svg { width: 15px; height: 15px; }
.suite-product-name { display: block; color: var(--md-link); font-size: 13px; font-weight: 500; line-height: 1.25; }
.suite-product-desc { display: block; color: var(--md-text-faint); font-size: 10.5px; line-height: 1.3; }
.suite-product-current .suite-product-name { color: var(--md-text); font-weight: 600; }
.suite-product-disabled { opacity: 0.44; cursor: not-allowed; }
.suite-product-disabled .suite-product-icon { background: var(--md-border-subtle); color: var(--md-text-muted); }
.suite-sidebar-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--md-border-subtle); }
.suite-account { display: flex; align-items: center; gap: 9px; min-width: 0; }
.suite-avatar { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--md-primary-strong-soft); color: var(--md-text); font: 500 12px var(--font-mono); }
.suite-account-name, .suite-account-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-account-name { color: var(--md-text); font-size: 12px; font-weight: 500; }
.suite-account-role { color: var(--md-text-faint); font-size: 10.5px; }
.suite-sidebar-foot form { margin: 7px 0 0; }
.suite-account-action { width: 100%; min-height: 30px; padding: 4px 8px; border: 1px solid var(--md-border-subtle); border-radius: 6px; background: transparent; color: var(--md-link-muted); font: 500 11px var(--font-body); cursor: pointer; }
.suite-account-action:hover { border-color: var(--md-border); background: var(--md-surface-3); color: var(--md-text); }
.suite-auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.suite-auth-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; border: 1px solid var(--md-border); border-radius: 6px; color: var(--md-link); font-size: 11px; text-decoration: none; }
.suite-auth-actions a:hover { background: var(--md-surface-3); }

.marketdeck-workspace { flex: 1 1 auto; min-width: 0; min-height: 100vh; }
.marketdeck-app .masthead { border: 0; background: var(--md-topbar); }
.marketdeck-app .topbar {
  position: sticky; top: 0; z-index: 35; display: flex; flex-wrap: nowrap;
  align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 14px;
  border-bottom: 1px solid var(--md-border-subtle); background: var(--md-topbar);
}
.marketdeck-app .mark-slot { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 7px; width: auto; height: 36px; color: var(--md-text); text-decoration: none; }
.marketdeck-app .brand-mark { width: 17px; height: 17px; fill: var(--md-primary); }
.marketdeck-app .mark-suite, .marketdeck-app .mark-word { color: var(--md-text); font-size: 14px; font-weight: 600; }
.marketdeck-app .mark-divider { color: var(--md-text-faint); }
.marketdeck-app .topbar-right { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; margin-left: auto; }
.marketdeck-app .topbar-symbol-search { height: 36px; max-width: 620px; border-color: var(--md-border); border-radius: 8px; background: var(--md-surface-1); }
.marketdeck-app .topbar-symbol-search:focus-within { border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-soft); }
.marketdeck-app .topbar-symbol-search input { color: var(--md-text); }
.marketdeck-app .topbar-symbol-search input::placeholder { color: var(--md-text-muted); }
.topbar-account { display: none; }
.local-nav-toggle { display: none; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--md-border); border-radius: 6px; background: var(--md-surface-1); color: var(--md-text); cursor: pointer; }
.marketdeck-app .nav-toggle-bars,
.marketdeck-app .nav-toggle-bars::before,
.marketdeck-app .nav-toggle-bars::after { background: currentColor; }

.suite-mobile-nav { display: none; }
.marketdeck-app .subnav {
  position: relative; z-index: 28; display: flex; align-items: center; gap: 3px;
  min-height: 42px; padding: 3px 14px; border-top: 0;
  border-bottom: 1px solid var(--md-border-subtle); background: var(--md-topbar);
}
.marketdeck-app .subnav > a,
.marketdeck-app .subnav > button,
.marketdeck-app .subnav-market > summary {
  min-height: 34px; padding: 7px 11px; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--md-link-muted);
  font: 500 12.5px/1.4 var(--font-body); text-decoration: none; cursor: pointer;
}
.marketdeck-app .subnav > a:hover,
.marketdeck-app .subnav > button:hover,
.marketdeck-app .subnav-market > summary:hover { background: var(--md-surface-3); color: var(--md-text); }
.marketdeck-app .subnav > a.active,
.marketdeck-app .subnav-market.active > summary { background: var(--md-primary-soft); box-shadow: inset 0 -2px 0 var(--md-primary); color: var(--md-text); font-weight: 600; }
.marketdeck-app .subnav-market-menu { border-color: var(--md-border); border-radius: 8px; background: var(--md-surface-2); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); }
.marketdeck-app .subnav-market-menu a { color: var(--md-link-muted); }
.marketdeck-app .subnav-market-menu a:hover { background: var(--md-surface-3); color: var(--md-text); }
.local-nav-scrim { position: fixed; inset: 0; z-index: 70; border: 0; background: rgba(0, 0, 0, 0.62); }

.marketdeck-app main { background: var(--md-bg-deep); }
.marketdeck-app main.main-bleed { background: var(--md-home-bg); }
.marketdeck-app input,
.marketdeck-app select,
.marketdeck-app textarea { border-color: var(--md-border); border-radius: 8px; background: var(--md-surface-1); color: var(--md-text); }
.marketdeck-app input::placeholder,
.marketdeck-app textarea::placeholder { color: var(--md-text-muted); }
.marketdeck-app button,
.marketdeck-app .btn,
.marketdeck-app .btn-small { border-radius: 6px; }

.marketdeck-app .workspace-home,
.marketdeck-app .workspace-shell { background: var(--md-home-bg); }
.marketdeck-app .charting-home-hero h1 span { color: var(--md-primary); }
.marketdeck-app .home-hero-search { border-color: var(--md-home-line-mid); background: rgba(7, 24, 42, 0.94); }
.marketdeck-app .home-hero-search:focus-within { border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-soft); }
.marketdeck-app .home-hero-search button { background: var(--md-primary); color: #fff; }
.marketdeck-app .home-hero-search button:hover { background: var(--md-primary-hover); }
.marketdeck-app .home-hero-quick a:hover,
.marketdeck-app .home-hero-quick a:focus-visible { color: var(--md-text); }
.marketdeck-app .market-status-dot { background: var(--md-positive); }

@media (max-width: 1024px) {
  .suite-sidebar { display: none; }
  .suite-mobile-nav { position: sticky; top: 48px; z-index: 34; display: block; min-width: 0; border-bottom: 1px solid var(--md-border-subtle); background: var(--md-topbar); }
  .suite-mobile-scroll { display: flex; align-items: center; gap: 3px; min-width: 0; height: 42px; padding: 0 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--md-border-strong) transparent; }
  .suite-mobile-link { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 6px; color: var(--md-link-muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
  .suite-mobile-link:hover { background: var(--md-surface-3); color: var(--md-text); }
  .suite-mobile-current, .suite-mobile-current:hover { background: var(--md-primary-soft); box-shadow: inset 0 -2px 0 var(--md-primary); color: var(--md-text); }
  .suite-mobile-disabled { color: var(--md-text-faint); cursor: not-allowed; }
  .suite-mobile-last { gap: 6px; padding-right: 22px; }
  .topbar-account { display: flex; }
  .marketdeck-app .account-area a,
  .marketdeck-app .account-area .linkish { color: var(--md-link); }
  .marketdeck-app .account-area .who { color: var(--md-text-muted); }
}

/* The 188px suite rail reduces the content container before the viewport's
   historical home-page breakpoint does. Collapse the three-pane home grid
   while that reduced container cannot satisfy its minimum tracks. */
@media (min-width: 981px) and (max-width: 1260px) {
  .workspace-intro { align-items: flex-start; flex-direction: column; gap: 7px; }
  .workspace-intro-meta { flex-wrap: wrap; }
  .workspace-motto { margin-left: 0; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .market-card-row,
  .workspace-value-strip,
  .continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1261px) {
  .workspace-grid {
    grid-template-columns: minmax(15rem, 0.98fr) minmax(31rem, 2.08fr) minmax(15rem, 0.97fr);
  }
}

@media (max-width: 767px) {
  body.local-nav-open { overflow: hidden; }
  .marketdeck-app .topbar { position: relative; min-height: 52px; padding: 8px 12px; }
  .local-nav-toggle { display: inline-flex; flex-basis: 44px; width: 44px; height: 44px; }
  .marketdeck-app .mark-suite,
  .marketdeck-app .mark-divider { display: none; }
  .marketdeck-app .mark-word { font-size: 13px; }
  .marketdeck-app .topbar-right { gap: 8px; }
  .marketdeck-app .topbar-symbol-search { min-width: 0; height: 40px; }
  .marketdeck-app .home-topbar-search { display: none; }
  .marketdeck-app .topbar-account { gap: 8px; }
  .marketdeck-app .topbar-account .who,
  .marketdeck-app .topbar-account form,
  .marketdeck-app .topbar-account a:last-child { display: none; }
  .marketdeck-app .topbar-account a { min-height: 40px; padding: 9px 4px; }
  .suite-mobile-nav { top: 0; }
  .suite-mobile-nav::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 34px; pointer-events: none; background: linear-gradient(90deg, rgba(5, 13, 24, 0), var(--md-topbar)); }
  .suite-mobile-scroll { height: 46px; padding: 0 42px 0 12px; scroll-padding-inline: 12px; }
  .suite-mobile-link { min-height: 44px; padding: 0 12px; font-size: 13.5px; }
  .marketdeck-app .subnav {
    position: fixed; inset: 0 auto 0 0; z-index: 80; display: flex;
    flex-direction: column; align-items: stretch; gap: 3px; width: min(82vw, 320px);
    height: 100dvh; padding: 68px 12px 20px; overflow-y: auto;
    border-right: 1px solid var(--md-border); border-bottom: 0; background: var(--md-sidebar);
    visibility: hidden; transform: translateX(-102%);
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .marketdeck-app .subnav::before { content: "Charting"; position: absolute; top: 19px; left: 20px; color: var(--md-text); font-size: 15px; font-weight: 600; }
  .marketdeck-app .subnav.subnav-open { visibility: visible; transform: translateX(0); transition: transform 200ms ease, visibility 0s linear 0s; }
  .marketdeck-app .subnav > a,
  .marketdeck-app .subnav > button,
  .marketdeck-app .subnav-market > summary { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; }
  .marketdeck-app .subnav-market-menu { position: static; margin: 3px 0 7px; box-shadow: none; }
  .marketdeck-app .subnav-market-menu a { min-height: 42px; padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .marketdeck-app .subnav { transition: none; }
  .suite-product { transition: none; }
}