/* ============================================================================
   Ticker Lab — Base styles (D6-F2)
   Reset + base + utility classes, all consuming tokens.css. Pure CSS, no
   framework. Fonts (Inter + JetBrains Mono) are self-hosted via
   static/fonts/fonts.css, linked ahead of this file in base.html — no Google
   Fonts / CDN at runtime (brief 00 tasks 2+3).
   ============================================================================ */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd,
ul, ol, fieldset { margin: 0; padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* --- Base ----------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "tnum" 1;   /* tabular numerals in data context */
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

/* Literal code keeps a true monospace face (--font-mono now resolves to Inter). */
code, pre, kbd, samp { font-family: var(--font-code); }

::placeholder { color: var(--color-text-faint); }

::selection { background: var(--color-accent-soft); color: var(--color-text); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Slim, dark scrollbars to match the surface palette. */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* --- Section header label (// DALAL STREET PULSE) ------------------------- */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
}

/* --- Utility classes ------------------------------------------------------ */
.font-mono     { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.text-accent   { color: var(--color-accent); }
.text-growth   { color: var(--color-growth); }
.text-danger   { color: var(--color-danger); }
.text-muted    { color: var(--color-text-secondary); }
.text-faint    { color: var(--color-text-faint); }
.text-gold     { color: var(--color-gold); }

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.surface-raised {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.border-subtle { border: 1px solid var(--color-border); }

.tnum { font-variant-numeric: tabular-nums; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { background: var(--color-border); text-decoration: none; }
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-on-accent); }
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Form controls -------------------------------------------------------- */
.input, .select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.input:focus, .select:focus { border-color: var(--color-accent); }

/* --- Layout shell --------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sidebar);
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-8) var(--space-8) var(--space-16);
}

/* --- Brand lockup (shared, see components/_brand.html) -------------------- */
.brand-lockup {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-2);
  color: var(--color-text);
}
.brand-lockup:hover { text-decoration: none; color: var(--color-text); }
.brand-mark { display: block; flex: 0 0 34px; width: 34px; height: 34px; }
.brand-mark svg,
.brand-mark img { width: 100%; height: 100%; max-width: 34px; max-height: 34px; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-word {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.brand-word .accent { color: var(--color-accent-text); }   /* adapts per theme */
.brand-tagline {
  font-family: var(--font-code);   /* logo stays JetBrains Mono (operator: don't change the logo) */
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* --- Sidebar nav ---------------------------------------------------------- */
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); }
.nav-group-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.nav-item {
  position: relative;          /* anchors the active ::before accent bar */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
/* Leading nav icon — house style (inline SVG, currentColor so it tracks the
   item's text colour: muted when inactive, accent on .active). */
.nav-ico {
  flex: 0 0 16px; width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item:hover { background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; }
/* Active item — soft-accent pill + accent label/icon + a 2px inset LEFT accent
   bar. The bar is an absolutely-positioned ::before (not a border-left), so the
   pill keeps its full radius and there's no square-corner-on-one-side. */
.nav-item.active { background: var(--color-accent-soft); color: var(--color-accent-text); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 58%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.nav-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}

/* --- "What's new" card (sidebar, static release nudge) -------------------- */
/* Sits in the bottom band above the footer (margin-top:auto). Surface card,
   .5px border, muted text — quieter than the nav so it never competes. */
.whats-new {
  margin-top: auto;
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: .5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.whats-new:hover { background: var(--color-surface-raised); border-color: var(--color-border-strong); text-decoration: none; }
.whats-new-ico {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--color-accent-text);
}
.whats-new-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.whats-new-title {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text); line-height: var(--leading-tight);
}
.whats-new-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-faint);
}

/* --- Theme toggle (sidebar footer) ---------------------------------------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; background: transparent;
  color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast); }
.theme-toggle:hover { background: var(--color-surface-raised); color: var(--color-text); }
.theme-toggle .ico { width: 18px; height: 18px; }
/* dark default: show moon; light: show sun */
.theme-toggle .ico-sun { display: none; }
:root.light .theme-toggle .ico-sun { display: block; }
:root.light .theme-toggle .ico-moon { display: none; }

/* --- Sidebar footer / user ------------------------------------------------ */
/* position:relative anchors the absolutely-positioned .popover-menu (D9-L4). */
.sidebar-footer { margin-top: auto; position: relative; }
/* The chip is a <button>: reset UA chrome, fill the width, keep it left-aligned
   to read like the old div. (D9-L4) */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  appearance: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.user-chip:hover { background: var(--color-surface-raised); border-color: var(--color-border-strong); }
/* caret affordance — points down when closed, flips up when the menu is open */
.user-chip::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--color-text-faint);
  border-bottom: 1.5px solid var(--color-text-faint);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}
.user-chip[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.user-avatar {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.user-meta { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.user-name { max-width: 100%; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tier { font-size: var(--text-2xs); color: var(--color-text-secondary); text-transform: capitalize; }

/* D9-L4: real popover. Out of normal flow (so the footer stays a compact, never-
   clipped chip) and opens UPWARD over the nav — the chip sits at the viewport
   bottom, so there's no room below. Hidden until .is-open is toggled by the chip. */
.popover-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
}
.popover-menu.is-open { display: flex; }
.popover-menu a {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.popover-menu a:hover { background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; }

/* --- Page header (legacy bespoke; still used by scanner/eod/auth/admin) ---- */
.page-head { margin-bottom: var(--space-6); }
.page-head h1 { margin-top: var(--space-1); }
.page-sub { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-1); }

/* --- Shared compact page header (mockup command bar) ---------------------- */
.page-header { border-bottom: .5px solid var(--color-border); padding-bottom: var(--space-3); margin: 0 0 var(--space-4); }
.page-context { margin: 0 0 var(--space-3); font-family: var(--font-body); font-weight: var(--weight-normal); font-size: var(--text-xs); color: var(--color-text-faint); line-height: var(--leading-normal); letter-spacing: 0; }
.page-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-secondary); font-size: var(--text-xs); }
.page-context-sep { color: var(--color-text-faint); }
.page-subtitle { font-family: var(--font-body); color: var(--color-text-faint); }
.command-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
/* command-bar tabs: borderless pills (scoped so sub-tab .tab-bar keeps its underline) */
.page-header .tab-bar { border-bottom: 0; margin: 0; align-items: center; flex-wrap: wrap; }
.tab-btn { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); background: transparent; border: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background var(--transition-fast); }
.tab-btn:hover { background: var(--color-accent-soft); color: var(--color-text); text-decoration: none; }
.tab-btn.is-active { background: var(--color-accent-soft); color: var(--color-accent-text); }
.command-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* control chip (search, date) */
.ctl { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: .5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.ctl svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* timeframe segmented (15M / 1H / 1D) */
.segmented { display: inline-flex; background: var(--color-surface); border: .5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.segmented-opt { font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); color: var(--color-text-secondary); background: transparent; border: 0; cursor: pointer; }
.segmented-opt.is-active { background: var(--color-accent); color: var(--color-text-on-accent); }
/* date-range chip = native <details>, no JS */
.date-chip { position: relative; }
.date-chip > summary { list-style: none; cursor: pointer; }
.date-chip > summary::-webkit-details-marker { display: none; }
.date-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-popover); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }

/* --- Cards / panels ------------------------------------------------------- */
.card { padding: var(--space-5); }
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}
.stat-label { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.stat-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-medium); }

/* --- Filter bar ----------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.pill-group { display: inline-flex; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px; }
.pill {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
}
.pill.active { background: var(--color-accent); color: var(--color-text-on-accent); }

/* --- Tabs ----------------------------------------------------------------- */
.tab-bar { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab.active { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* --- Data table ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
table.data thead th {
  position: sticky; top: 0;
  background: var(--color-surface-raised);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
  padding: var(--space-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-strong);
}
table.data tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
table.data tbody tr:hover { background: var(--color-surface); }
table.data td.num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--font-mono); }

/* --- Article cards (Scanner) --------------------------------------------- */
.feed { display: flex; flex-direction: column; gap: var(--space-3); }
.article-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.article-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); text-decoration: none; }
.article-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.article-title { font-family: var(--font-heading); font-size: var(--text-md); color: var(--color-text); }
.article-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.article-card.locked { filter: blur(3px); pointer-events: none; user-select: none; }

.lock-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
}

/* --- Badges --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge-growth  { color: var(--color-growth);  background: var(--color-growth-soft);  border-color: var(--color-growth-soft); }
.badge-danger  { color: var(--color-danger);  background: var(--color-danger-soft);  border-color: var(--color-danger-soft); }
.badge-neutral { color: var(--color-neutral); background: var(--color-neutral-soft); border-color: var(--color-neutral-soft); }
.badge-accent  { color: var(--color-accent);  background: var(--color-accent-soft);  border-color: var(--color-accent-soft); }
.badge-warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning-soft); }
.badge-symbol  { color: var(--color-text); background: var(--color-surface-raised); border-color: var(--color-border-strong); }

/* shared upcoming corp-event bell (_corp_event_badge.html). Sits next to a
   symbol cell; colour flips with the theme via the same tokens as the chips. */
.corp-bell { display: inline-flex; align-items: center; vertical-align: middle; cursor: default; }
.corp-bell svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.corp-bell--result { color: var(--color-warning); }   /* a results date — highlighted */
.corp-bell--quiet  { color: var(--color-text-faint); } /* other corp event — quieter  */

/* value colouring for signed numbers */
.val-pos { color: var(--color-growth); }
.val-neg { color: var(--color-danger); }

/* missing-number placeholder (shared _num.html en-dash) */
.num-na  { color: var(--color-text-faint); }

/* --- Scanner: per-symbol consensus (Cards + Table, D6-P1.1) --------------- */
/* accessible-hidden label (visual-less, screen-reader only) */
.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;
}

/* free-tier sample-data strip (non-blurred — the permanent free experience) */
.sample-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--color-accent-soft); border: .5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.sample-strip .btn { white-space: nowrap; }

/* command-bar stats + freshness (mono, in the controls slot) */
.scanner-stats { display: inline-flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.scanner-stats b { color: var(--color-text); font-weight: var(--weight-medium); }
.scanner-fresh { font-size: var(--text-xs); color: var(--color-text-faint); }

/* Phase 2 filter row — layout only over the shared .filter-bar/.select/.input/.ctl
   tokens (no new hexes, no new chip colors). The shared .select/.input are
   width:100% for stacked forms; inline here, so cap their width and let the search
   field grow. The CSV link reuses the .ctl chip, pushed to the row's far end. */
.scanner-filters { margin-bottom: var(--space-4); position: relative; }
.scanner-filters .select { width: auto; min-width: 130px; }
.scanner-filters .scanner-search { width: auto; flex: 1 1 220px; min-width: 180px; }
.scanner-export { text-decoration: none; cursor: pointer; }
.scanner-export:hover { color: var(--color-text); }

/* Sort = an icon button + dropdown (acts on the set), grouped with CSV on the
   right. It replaced the old .seg-sort segmented control, which read as the same
   pill language as the sub-category chips below -- the icon button removes that
   collision. The .sort-control wrapper carries margin-left:auto so the sort button
   and the CSV link sit together on the row's far end. The menu borrows the
   .popover-menu look (raised surface, strong border, shadow) but opens DOWNWARD
   under the icon. Existing tokens only -- no new hexes. */
.sort-control { position: relative; margin-left: auto; }
.sort-toggle { cursor: pointer; }
.sort-toggle .sort-current { font-family: var(--font-body); }
.sort-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 144px;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
}
.sort-menu.is-open { display: flex; }
.sort-opt {
  font-family: var(--font-body); font-size: var(--text-sm); text-align: left;
  padding: var(--space-2) var(--space-3); color: var(--color-text-secondary);
  background: transparent; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap; transition: background var(--transition-fast);
}
.sort-opt:hover { background: var(--color-accent-soft); color: var(--color-text); }
.sort-opt.is-active { background: var(--color-accent-soft); color: var(--color-accent-text); }

/* Sort pill (components/_sortpill.html) — two .btn segments joined into one
   control: [↑|↓ direction toggle][field ⌄]. Reuses the .sort-menu / .sort-opt
   dropdown above (anchored to the pill via position:relative). Grouped with the
   Columns / CSV buttons on a table's action row. Existing tokens only. */
.sortpill { position: relative; display: inline-flex; align-items: stretch; }
.sortpill > .btn { white-space: nowrap; }
.sortpill-dir { padding-left: var(--space-3); padding-right: var(--space-3); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sortpill-field { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sortpill > .btn:hover { z-index: 1; }       /* hovered segment's border shows fully */
.sortpill .sort-current { font-family: var(--font-body); }

/* On the Changes tab the filters never apply, so the whole filter row collapses
   (display:none, not visibility:hidden) -- this lifts the digest so its "Sentiment
   shifts since the last scan …" headline sits right below the tabs.
   Scoped under `.tlx` (the form is always inside `<div class="tlx scanner">`) so
   its specificity (0,3,0) outranks `.tlx .filters { display:flex }` in
   components.css (0,2,0); an unscoped `.scanner-filters.filters-inert` (0,2,0)
   ties on specificity and LOSES on source order (components.css loads last),
   leaving the row visible. */
.tlx .scanner-filters.filters-inert { display: none; }

/* The page-level loading indicator is an .htmx-indicator (opacity-toggled), which
   would otherwise reserve a blank line above the results when idle. Collapse it
   when idle; htmx re-adds .htmx-request to the indicator for the request's life. */
#scanner-loading { display: none; }
#scanner-loading.htmx-request { display: inline-flex; }

/* Part B -- dependent sub-category chip row. Sits on its OWN line below the filter
   controls (flex-basis:100% forces the wrap within .filter-bar). Shown only for
   Type = Earnings / Market Event; the controller toggles the row + the active
   group via the `hidden` attribute (the [hidden] rules re-assert display:none over
   the flex base). Chips use the soft-accent active-pill language, existing tokens
   only. */
.subfilter-row { flex-basis: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.subfilter-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.subfilter-row[hidden], .subfilter-group[hidden] { display: none; }
.subfilter-chip {
  font-family: var(--font-body); font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3); color: var(--color-text-secondary);
  background: var(--color-surface); border: .5px solid var(--color-border);
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.subfilter-chip:hover { background: var(--color-accent-soft); color: var(--color-text); }
.subfilter-chip.is-active { background: var(--color-accent-soft); color: var(--color-accent-text); border-color: transparent; }

/* consensus bar — thin stacked bull/neutral/bear, shared by cards + table */
.consensus-bar {
  display: inline-flex; height: 6px; width: 100%; min-width: 48px;
  border-radius: var(--radius-pill); overflow: hidden;
  background: var(--color-border); vertical-align: middle;
}
.consensus-bar--sm { width: 56px; min-width: 56px; }
.consensus-bar .seg { display: block; height: 100%; }
.seg-bull { background: var(--color-growth); }
.seg-neut { background: var(--color-neutral); }
.seg-bear { background: var(--color-danger); }

/* cards grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-4); align-items: stretch; }
.consensus-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-surface);
  border: .5px solid var(--color-border); border-radius: var(--radius-lg);
}
.cc-head { display: flex; align-items: center; gap: var(--space-2); }
.cc-symbol { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text); }
.cc-cat { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--color-text-faint); }
.cc-bias { margin-left: auto; }
.cc-consensus { display: flex; align-items: center; gap: var(--space-2); }
.cc-consensus .consensus-bar { flex: 1; }
.cc-mix { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; }
.cc-calls { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.cc-descriptor { font-style: italic; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: var(--space-1) 0 0; }
.cc-echo { font-size: var(--text-xs); color: var(--color-text-faint); }
.cc-houses { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Three distinguishable chip treatments (existing tokens only) so the kinds are
   separable at a glance: analyst = the neutral grey base .chip; event =
   accent(blue)-tinted; earnings = a muted amber/warning tint. The amber collides
   with neither the grey analyst chip, the blue .chip-event, nor the bias
   green/red (--color-growth / --color-danger). Subtle, not loud. */
.chip { display: inline-flex; align-items: center; padding: 1px var(--space-2); font-size: var(--text-2xs); color: var(--color-text-secondary); background: var(--color-surface-raised); border: .5px solid var(--color-border); border-radius: var(--radius-sm); white-space: nowrap; }
.chip-event { color: var(--color-accent-text); background: var(--color-accent-soft); border-color: transparent; }
.chip-earnings { color: var(--color-warning); background: var(--color-warning-soft); border-color: transparent; }
.chip-more { color: var(--color-text-faint); }
.cc-divider { height: .5px; background: var(--color-border); margin: var(--space-1) 0; }
.cc-headlines { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; }
.cc-headlines li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: baseline; font-size: var(--text-xs); }
.hl-date { color: var(--color-text-faint); white-space: nowrap; }
.hl-title { color: var(--color-text-secondary); line-height: var(--leading-normal); }
.hl-src { grid-column: 2; color: var(--color-text-faint); font-size: var(--text-2xs); }
.cc-more { display: inline-block; font-size: var(--text-xs); color: var(--color-accent-text); margin-top: var(--space-1); }

/* dense consensus table */
.scanner-table { table-layout: fixed; }
.scanner-table tbody td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
.scanner-table tbody tr:nth-child(even) { background: var(--color-zebra); }
.scanner-table tbody tr:hover { background: var(--color-surface-raised); }
.st-c-sym { width: 12%; } .st-c-type { width: 13%; } .st-c-bias { width: 10%; } .st-c-calls { width: 7%; }
.st-c-cons { width: 15%; } .st-c-house { width: 14%; } .st-c-latest { width: 17%; } .st-c-upd { width: 12%; }
.st-symbol { font-family: var(--font-heading); font-weight: var(--weight-medium); color: var(--color-text); }
.st-type { font-size: var(--text-xs); color: var(--color-text-secondary); }
.st-house { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--color-text-secondary); }
.cons-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.st-mix { font-size: var(--text-xs); color: var(--color-text-secondary); }
.st-latest { overflow: hidden; text-overflow: ellipsis; color: var(--color-text-secondary); font-size: var(--text-sm); }
.st-updated { color: var(--color-text-faint); font-size: var(--text-xs); }

/* Changes digest (filter-bar rework) -- a LIGHT, transition-only digest of the
   per-symbol diff vs. the previous scan: a summary line + one row per entry. The
   consensus bar / b.n.b mix / call count are deliberately GONE here (they live in
   Cards/Table). Layout only over existing tokens (bias .badge, text-faint); no
   new hexes, no new chip colors, nothing below 11px (--text-2xs). */
.digest { display: flex; flex-direction: column; gap: var(--space-6); }
.digest-summary { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.digest-group { display: flex; flex-direction: column; gap: var(--space-2); }
.digest-head {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); text-transform: uppercase;
  letter-spacing: var(--tracking-mono); color: var(--color-text-faint);
}
.digest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* Generous line spacing via row padding + a hairline rule, not boxed cards. */
.digest-row {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0; border-bottom: .5px solid var(--color-border);
}
.digest-row:last-child { border-bottom: 0; }
.digest-sym { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); min-width: 96px; }
.digest-move { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.digest-arrow, .digest-dot { color: var(--color-text-faint); }
.digest-tag { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--color-text-faint); }
.digest-note { font-size: var(--text-sm); color: var(--color-text-secondary); }
.digest-row--dropped .digest-sym { color: var(--color-text-secondary); }

/* --- Flash messages ------------------------------------------------------- */
.flash-stack { position: fixed; top: var(--space-5); right: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }
.flash {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  min-width: 260px;
}
.flash-success { border-left: 3px solid var(--color-growth); }
.flash-error   { border-left: 3px solid var(--color-danger); }
.flash-info    { border-left: 3px solid var(--color-accent); }

/* --- Empty state ---------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}
.empty-state .empty-icon { font-size: var(--text-2xl); opacity: 0.5; }
.empty-state .empty-title { font-family: var(--font-heading); font-size: var(--text-md); color: var(--color-text); }

/* --- HTMX loading indicator ----------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity var(--transition-base); }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.loading-row { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Misc ----------------------------------------------------------------- */
.divider { height: 1px; background: var(--color-border); margin: var(--space-4) 0; border: none; }
.muted-footer { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-faint); font-size: var(--text-xs); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 820px) {
  .sidebar { position: fixed; transform: translateX(-100%); }
  .content { padding: var(--space-5); }
}

/* --- Auth (sidebar-less, centered sign-in / sign-up) ---------------------- */
/* hide_chrome pages drop the sidebar + account chip; .auth-shell self-centers. */
.app-shell.is-auth .content { max-width: none; padding-bottom: var(--space-8); }

.auth-shell { max-width: 420px; margin: var(--space-12) auto; padding: 0 var(--space-4); }
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); }
.auth-title { font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-xl); text-align: center; margin: 0 0 var(--space-1); }
.auth-sub { font-size: var(--text-sm); color: var(--color-text-secondary);
  text-align: center; margin: 0 0 var(--space-6); }
.auth-field { margin-bottom: var(--space-4); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-1); }
.auth-label { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.auth-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }
.auth-forgot { font-size: var(--text-sm); color: var(--color-text-faint); }
.auth-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }
.auth-google { width: 100%; justify-content: center; gap: var(--space-2);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); }
.auth-google-ico { flex: 0 0 auto; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text-faint); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); margin: var(--space-5) 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth-alt { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }
.auth-disclaimer { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-faint);
  text-align: center; line-height: var(--leading-normal); }
.auth-error { border-left: 3px solid var(--color-danger); background: var(--color-danger-soft);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* ============================================================================
   Public landing (GET /) -- scoped under .is-landing so nothing leaks to app
   pages. Ported from the frozen landing mockup; every value consumes an EXISTING
   token (sole token add: --text-hero in tokens.css). Logo = brand() macro; theme
   toggle = the shared .theme-toggle markup (no new JS). (landing_page brief)
   ============================================================================ */

/* Full-bleed shell: no sidebar, content manages its own widths (opts out of the
   .is-auth centring; the body class sets is-landing INSTEAD of is-auth). */
.app-shell.is-landing { display: block; }
.app-shell.is-landing .content { max-width: none; margin: 0; padding: 0; }

/* Shared constrained inner wrapper for every landing band. */
.is-landing .lp-wrap { max-width: var(--content-max); margin: 0 auto; width: 100%; padding: 0 var(--space-6); }

/* --- Public top nav (full-width band, constrained inner) ------------------ */
.is-landing .public-nav { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.is-landing .public-nav .lp-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.is-landing .public-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.is-landing .public-links > a:not(.btn) { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-radius: var(--radius-md); }
.is-landing .public-links > a:not(.btn):hover { color: var(--color-text); background: var(--color-surface-raised); text-decoration: none; }

/* --- Hero (two-column) --------------------------------------------------- */
.is-landing .hero { padding: var(--space-16) 0 var(--space-12); }
.is-landing .hero .lp-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.is-landing .hero-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.is-landing .hero-title { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0 0 var(--space-5); }
.is-landing .hero-title span { display: block; }
.is-landing .hero-title .accent-text { color: var(--color-accent-text); }
.is-landing .hero-sub { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-secondary); max-width: 52ch; margin: 0 0 var(--space-6); }
.is-landing .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Sample consensus card (static illustrative) ------------------------- */
.is-landing .hero-visual { display: flex; justify-content: center; }
.is-landing .sample { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.is-landing .sample-head { display: flex; align-items: center; gap: var(--space-2); }
.is-landing .sample-sym { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); }
.is-landing .sample-cat { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--color-text-faint); }
.is-landing .sample-flag { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-faint); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.is-landing .sample .badge { align-self: flex-start; }
.is-landing .sample .consensus-bar { height: 8px; }
.is-landing .sample-conv { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 0; }
.is-landing .sample-houses { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* --- Stats strip --------------------------------------------------------- */
.is-landing .stats { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.is-landing .stats .lp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.is-landing .stat-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.is-landing .stat-num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-medium); color: var(--color-text); font-variant-numeric: tabular-nums; }
.is-landing .stat-cap { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); }

/* --- Products + Why shared card + icon language -------------------------- */
.is-landing .prod { padding: var(--space-16) 0; }
.is-landing .why { padding: var(--space-16) 0; border-top: 1px solid var(--color-border); }
.is-landing .prod .section-label, .is-landing .why .section-label { display: block; margin: 0 0 var(--space-6); }
.is-landing .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.is-landing .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.is-landing .prod-card, .is-landing .why-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.is-landing .prod-head { display: flex; align-items: center; gap: var(--space-2); }
.is-landing .prod-head h3, .is-landing .why-card h3 { font-size: var(--text-md); margin: 0; }
.is-landing .prod-card p, .is-landing .why-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0; }
/* house-style inline-SVG tiles (currentColor); product = accent, why = tinted */
.is-landing .prod-ico, .is-landing .why-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-text); }
.is-landing .prod-ico svg, .is-landing .why-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-landing .why-ico--growth { background: var(--color-growth-soft); color: var(--color-growth); }
.is-landing .why-ico--accent { background: var(--color-accent-soft); color: var(--color-accent-text); }

/* --- Pricing teaser ------------------------------------------------------ */
.is-landing .price { padding: var(--space-16) 0; border-top: 1px solid var(--color-border); }
.is-landing .price .lp-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.is-landing .price-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; }
.is-landing .price-line { font-size: var(--text-base); color: var(--color-text-secondary); margin: 0; }

/* --- Footer disclaimer --------------------------------------------------- */
.is-landing .lp-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.is-landing .lp-footer .lp-wrap { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.is-landing .lp-disclaimer { font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--color-text-faint); margin: 0; max-width: 80ch; }

/* --- Responsive: single-column hero / products / why <= 860px ------------- */
@media (max-width: 1024px) {
  .is-landing .prod-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .is-landing .hero .lp-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
  .is-landing .hero-visual { justify-content: flex-start; }
  .is-landing .prod-grid { grid-template-columns: 1fr; }
  .is-landing .why-grid { grid-template-columns: 1fr; }
  .is-landing .stats .lp-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .is-landing .stats .lp-wrap { grid-template-columns: 1fr; }
}

/* ============================================================================
   Home dashboard (authed GET /) -- the logged-in face of `/`. Scoped under
   .home-dash so nothing leaks to the landing (.is-landing) or other app pages.
   This is an APP-SHELL page (not the marketing landing): the H1 uses --text-xl,
   not --text-hero. Tokens only -- no new hexes/tokens. (home_dashboard brief P5)
   ============================================================================ */
/* Header -- greeting + inline plan chip + subtitle */
.home-dash .dash-header { margin: 0 0 var(--space-6); }
.home-dash .dash-title {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--color-text); margin: 0;
}
.home-dash .plan-chip {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent-text); background: var(--color-accent-soft);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
}
.home-dash .dash-sub { font-size: var(--text-base); color: var(--color-text-secondary); margin: var(--space-2) 0 0; }

/* Section label ("Your tools") -- reuses .section-label (mono uppercase) */
.home-dash .dash-section { display: block; margin: 0 0 var(--space-4); }

/* Tools grid -- launch cards */
.home-dash .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: 0 0 var(--space-8); }
.home-dash .tool-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.home-dash .tool-card:hover { border-color: var(--color-accent); transform: translateY(-2px); text-decoration: none; }
.home-dash .tool-ico {
  flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-accent-text);
}
.home-dash .tool-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-dash .tool-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.home-dash .tool-top { display: flex; align-items: center; gap: var(--space-2); }
.home-dash .tool-name { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text); }
.home-dash .tool-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-faint); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill); padding: 0 var(--space-2);
}
.home-dash .tool-blurb { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-secondary); margin: var(--space-1) 0 0; }
.home-dash .tool-open { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent-text); }

/* Two-up row -- market snapshot + what's new */
.home-dash .dash-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.home-dash .dash-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.home-dash .panel-title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text); margin: 0 0 var(--space-1); }
.home-dash .panel-asof { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-faint); margin: 0 0 var(--space-4); }
.home-dash .snap-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.home-dash .snap-cell { flex: 1; text-align: center; display: flex; flex-direction: column; gap: var(--space-1); }
.home-dash .snap-num { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--color-text); font-variant-numeric: tabular-nums; }
.home-dash .snap-cap { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); }
.home-dash .nw { display: flex; align-items: flex-start; gap: var(--space-3); }
.home-dash .nw-ico {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; color: var(--color-accent-text);
}
.home-dash .nw-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.home-dash .nw-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); }
.home-dash .nw-tag { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); }
.home-dash .nw-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent-text); }

/* Narrow: stack the tools grid + the duo row */
@media (max-width: 920px) {
  .home-dash .tool-grid, .home-dash .dash-duo { grid-template-columns: 1fr; }
}

/* ============================================================================
   Admin Console (api.routers.admin) -- scoped under .admin-console. Tokens only,
   no new hexes; reuses .surface/.card/.btn/.input/.table-wrap/table.data/.badge/
   .empty-state patterns. ASCII + LF. (admin_console brief)
   ============================================================================ */
.admin-console { display: flex; flex-direction: column; gap: var(--space-6); }

/* Coded flash banner (PRG ?notice=) -- mirrors the .flash left-border accents. */
.admin-notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}
.admin-notice--success { border-left: 3px solid var(--color-growth); }
.admin-notice--error   { border-left: 3px solid var(--color-danger); }
.admin-notice--info    { border-left: 3px solid var(--color-accent); }

/* A titled block: a // SECTION label + its controls, on a surface card. */
.admin-section {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.admin-section .section-label { margin-bottom: var(--space-1); }
.admin-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}

.admin-help  { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0; max-width: 70ch; }
.admin-faint { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; }

/* Inline help tooltip for the admin body. The shared `.tlx-tip` is scoped under
   `.tlx`; the admin console body renders OUTSIDE that surface, so this is an
   un-scoped twin (same look/behaviour, tokens only, pure-CSS hover bubble). Used
   to fold the long .admin-help prose off the panel so the rows read clean. */
.admin-tip {
  position: relative; display: inline-flex; align-items: center;
  margin-left: var(--space-1); color: var(--color-text-faint); cursor: help;
  vertical-align: middle;
}
.admin-tip > i { font-size: 12px; }
.admin-tip:hover, .admin-tip:focus-within { color: var(--color-text-secondary); outline: none; }
.admin-tip::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 6px); z-index: var(--z-popover);
  width: max-content; max-width: 300px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs); line-height: var(--leading-normal);
  white-space: normal; text-transform: none; letter-spacing: normal;
  font-weight: 400; font-family: var(--font-body);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-fast);
  pointer-events: none;
}
.admin-tip:hover::after, .admin-tip:focus-within::after { opacity: 1; visibility: visible; }
.admin-empty {
  font-size: var(--text-sm); color: var(--color-text-faint);
  padding: var(--space-4); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* Email-search row. */
.admin-search { display: flex; align-items: center; gap: var(--space-2); }
.admin-search .input { width: auto; min-width: 220px; }

/* Users table -- reuses table.data; cap the action column, center rows. */
.admin-table tbody td { vertical-align: middle; }
.admin-table .admin-col-action { text-align: right; }
.admin-table .badge { margin-left: var(--space-1); }

/* Inline add form (comp email). */
.admin-inline-form { display: flex; align-items: center; gap: var(--space-2); }
.admin-inline-form .input { width: auto; flex: 1 1 260px; min-width: 200px; }

/* Chip list (comp emails) -- one row per entry: value + Remove. */
.admin-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-chip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: .5px solid var(--color-border);
}
.admin-chip-row:last-child { border-bottom: 0; }

/* Stacked form (EOD upload, maintenance message). */
.admin-stack-form { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.admin-field { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; max-width: 420px; }
.admin-label { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Flag row -- a state badge + its toggle button/form. */
.admin-flag { display: flex; align-items: center; gap: var(--space-3); }

/* ============================================================================
   User Setup (merged editor) -- api.routers.admin /users. Tokens only, no new
   hexes; reuses .admin-section / .admin-chip-row / .badge / .btn / .input.
   (user_setup merge brief)
   ============================================================================ */

/* Destructive action (bulk-deactivate / confirm) -- danger outline button. */
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.btn-danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
/* Compact button size — e.g. the per-row Clear in the EOD ingest-status table. */
.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

/* Combobox row. */
.us-picker { display: flex; align-items: center; gap: var(--space-2); }
.us-picker .input { flex: 1; }

/* Read-only editor panel for the selected email. */
.us-editor {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.us-empty {
  font-size: var(--text-sm); color: var(--color-text-faint);
  padding: var(--space-4); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.us-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.us-email { font-size: var(--text-md); color: var(--color-text); }

/* Checkbox rows. */
.us-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.us-chk { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.us-chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); cursor: pointer; }
.us-chk input:disabled { cursor: not-allowed; opacity: 0.45; }
.us-chk-body { display: flex; flex-direction: column; gap: var(--space-1); }
.us-chk-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.us-chk-note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: var(--leading-normal); }
.us-apply { display: flex; align-items: center; gap: var(--space-3); }

/* Email + badges on the left of an exception / deactivated row. */
.us-exc-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Inactive note + list footer. */
.us-note {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
}
.us-meta { font-size: var(--text-xs); color: var(--color-text-faint); }
.us-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}
.us-foot-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================================
   EOD Uploads tab (api.routers.admin /eod) -- two-column upload (form + per-date
   file checklist), calendar button, and self-stopping ingest-status poll. Tokens
   only, no new hexes; reuses .admin-section / .btn / .input / .badge / table.data
   / .num-na. ASCII + LF. (eod_tab_polish brief)
   ============================================================================ */
.eod-upload-grid {
  display: grid;
  grid-template-columns: clamp(240px, 30%, 340px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.eod-upload-grid .admin-stack-form { width: 100%; }
.eod-upload-grid .admin-field { max-width: none; }
.eod-upload-grid .admin-notice { width: 100%; }

/* Compact upload form — label | control rows (replaced the 2-col upload grid when
   the "Files for this date" checklist column was retired). The label column is
   fixed-width so Trade date / NSE files align; controls cap their own width. */
.admin-form-compact { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.afc-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; }
.afc-row > .admin-label { margin: 0; padding-top: var(--space-2); white-space: nowrap; }
.afc-row .eod-date-row { max-width: 280px; }
.afc-files { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.afc-files .admin-faint { margin: 0; }
.afc-files .input { max-width: 320px; }
.afc-submit { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* Trade-date field + calendar button on one row. */
.eod-date-row { display: flex; align-items: stretch; gap: var(--space-2); }
.eod-date-row .input { flex: 1; }
.eod-cal-btn { padding: var(--space-2) var(--space-3); }
.eod-cal-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Right column: "Files for this date" checklist. */
.eod-checklist-col { display: flex; flex-direction: column; gap: var(--space-2); }
.eod-checklist-col .section-label { margin-bottom: var(--space-1); }
.eod-check-cap { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; }
.eod-check { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.eod-check-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}
.eod-check-ico { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; }
.eod-check-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.eod-check-label { flex: 1; }
.eod-check-state {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-text-faint);
}
.eod-check--present .eod-check-ico,
.eod-check--present .eod-check-state { color: var(--color-growth); }
.eod-check--absent  .eod-check-ico,
.eod-check--absent  .eod-check-state { color: var(--color-danger); }
.eod-check--nodata  .eod-check-ico,
.eod-check--unknown .eod-check-ico { color: var(--color-text-faint); }

.eod-poll-note { margin-top: var(--space-2); }

/* Danger zone: "Clear this date" (destructive full-footprint delete). Collapsed
   <details>; danger token marks it distinct from Upload. Tokens only, no hexes. */
.eod-clear { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.eod-clear-summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-danger);
}
.eod-clear-summary::-webkit-details-marker { display: none; }
.eod-clear-summary::before { content: "+ "; }
.eod-clear[open] .eod-clear-summary::before { content: "- "; }
.eod-clear-body {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-danger-soft);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
}
.eod-clear-lead { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.eod-clear-lead strong { color: var(--color-text); }
.eod-clear-warn {
  font-size: var(--text-xs); line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
}
.eod-clear-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.eod-clear-count-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); }
.eod-clear-count-label { color: var(--color-text-secondary); }
.eod-clear-count-val { color: var(--color-text-faint); font-size: var(--text-2xs); }
.eod-clear-total { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); border-top: .5px solid var(--color-border); padding-top: var(--space-2); }
.eod-clear-total strong { color: var(--color-text); }
.eod-clear-form { display: flex; flex-direction: column; gap: var(--space-2); }

/* Pre-upload warn-and-confirm panel: a file whose date breaks its per-type rule.
   Warning token (amber) marks it as caution, distinct from the danger-zone red.
   Tokens only, no hexes. */
.eod-confirm { border-color: var(--color-warning-soft); }
.eod-confirm .section-label { color: var(--color-warning); }
.eod-confirm-lead { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.eod-confirm-lead strong { color: var(--color-text); }
.eod-confirm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.eod-confirm-row {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
}
.eod-confirm-file { font-size: var(--text-xs); color: var(--color-text); word-break: break-all; }
.eod-confirm-msg { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.eod-confirm-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .eod-upload-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Account popover pages -- Pricing / Account / Support (popover_pages brief).
   Scoped under .pricing / .account / .support so nothing leaks elsewhere.
   Layout only over existing tokens; reuses .card/.btn/.badge/.input patterns.
   ============================================================================ */

/* --- Pricing (public) ---------------------------------------------------- */
.pricing { max-width: var(--content-max); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin: 0 0 var(--space-8);
}
.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-card--featured { border-color: var(--color-accent); }
.pricing-card--soon { background: var(--color-bg); border-style: dashed; }
.pricing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pricing-name { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-text); margin: 0; }
.pricing-price { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--color-text); margin: 0; font-variant-numeric: tabular-nums; }
.pricing-per { font-family: var(--font-body); font-weight: var(--weight-normal); font-size: var(--text-sm); color: var(--color-text-secondary); }
.pricing-sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.pricing-feats { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-feats li { position: relative; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.pricing-feats li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-accent); }
.pricing-cta { margin-top: auto; padding-top: var(--space-3); }
.pricing-cta .btn { width: 100%; justify-content: center; }
.pricing-current {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: var(--space-2) var(--space-3); font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent-text); background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft); border-radius: var(--radius-md);
}
.pricing-muted { display: inline-block; width: 100%; text-align: center; font-size: var(--text-sm); color: var(--color-text-faint); }
.pricing-note {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  margin: 0 0 var(--space-8); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* Coded PRG flash on /pricing (e.g. a checkout-start error redirect). */
.pricing-notice {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border); border-radius: var(--radius-md);
}
.pricing-notice--error { border-left-color: var(--color-danger); }
.pricing-legal { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.pricing-legal-title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.pricing-legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-legal-list li { font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--color-text-faint); max-width: 80ch; }
.pricing-legal-list strong { color: var(--color-text-secondary); font-weight: var(--weight-semibold); }
.pricing-policy-links { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); }
.pricing-dot { margin: 0 var(--space-2); color: var(--color-text-faint); }

/* --- Account (auth) ------------------------------------------------------ */
.account { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-4); }
.account-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.account-section { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; }
.account-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: .5px solid var(--color-border); }
.account-row:last-of-type { border-bottom: 0; }
.account-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.account-value { font-size: var(--text-sm); color: var(--color-text); text-align: right; }
.account-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; line-height: var(--leading-relaxed); }
.account-cta { margin-top: var(--space-2); }
/* Editable phone row: label left, inline (input + Save) right; centre-aligned
   so the control sits level with the label rather than on the text baseline. */
.account-phone-row { align-items: center; }
.account-phone-form { display: flex; gap: var(--space-2); align-items: center; }
.account-phone-input { width: 11rem; max-width: 100%; }
.account-phone-save { flex: 0 0 auto; }
.account-error { font-size: var(--text-sm); color: var(--color-danger); margin: var(--space-2) 0 0; }
.account-success { font-size: var(--text-sm); color: var(--color-growth); margin: var(--space-2) 0 0; }

/* --- Support (public) ---------------------------------------------------- */
.support { max-width: 640px; }
.support-banner {
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left-width: 3px; border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text);
}
.support-banner--success { border-left-color: var(--color-growth); }
.support-banner--error   { border-left-color: var(--color-danger); }
.support-banner--info    { border-left-color: var(--color-accent); }
.support-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.support-form { display: flex; flex-direction: column; gap: var(--space-4); }
.support-field { display: flex; flex-direction: column; gap: var(--space-1); }
.support-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.support-textarea { resize: vertical; min-height: 140px; line-height: var(--leading-normal); font-family: inherit; }
.support-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.support-direct { font-size: var(--text-sm); color: var(--color-text-faint); }

/* --- Disclaimer (public) ------------------------------------------------- */
/* Static long-form legal body. Section labels reuse the uppercase-mono eyebrow
   from .account-section / .pricing-legal-title; bullets reuse the accent-dot of
   .pricing-feats. Readable measure capped at 80ch. */
.disclaimer { max-width: 760px; }
.disclaimer-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.disclaimer-section { display: flex; flex-direction: column; gap: var(--space-2); }
.disclaimer-h2 {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-secondary); margin: 0;
}
.disclaimer-section p {
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary); margin: 0; max-width: 80ch;
}
.disclaimer-section strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.disclaimer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.disclaimer-list li {
  position: relative; padding-left: var(--space-4);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary); max-width: 80ch;
}
.disclaimer-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px;
  border-radius: var(--radius-pill); background: var(--color-accent);
}

/* ==========================================================================
   LC-1 — Legal pages, signup consent, footer links, Legal submenu, cookies
   ========================================================================== */

/* --- /legal/* pages: markdown rendered into .legal-content ----------------- */
.legal { max-width: 860px; display: flex; flex-direction: column; gap: var(--space-5); }
.legal-toc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.legal-toc-label {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-secondary); margin-bottom: var(--space-2);
}
.legal-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-6); }
.legal-toc-item { break-inside: avoid; margin: 0 0 var(--space-1); }
.legal-toc-item a { font-size: var(--text-sm); color: var(--color-text-secondary); }
.legal-toc-item a:hover { color: var(--color-accent); text-decoration: none; }
.legal-toc-l3 { padding-left: var(--space-3); }

.legal-content {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  color: var(--color-text-secondary); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); max-width: 82ch;
}
.legal-content h1 { font-size: var(--text-lg, 1.25rem); color: var(--color-text); margin: 0 0 var(--space-4); }
.legal-content h2 {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-secondary);
  margin: var(--space-6) 0 var(--space-2); scroll-margin-top: var(--space-5);
}
.legal-content h3 { font-size: var(--text-sm); color: var(--color-text); margin: var(--space-4) 0 var(--space-2); scroll-margin-top: var(--space-5); }
.legal-content p, .legal-content li { margin: 0 0 var(--space-3); }
.legal-content ul, .legal-content ol { margin: 0 0 var(--space-3) var(--space-4); padding: 0; }
.legal-content em { color: var(--color-text-faint); }
.legal-content a { color: var(--color-accent); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.legal-content code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-surface-raised); padding: 1px 5px; border-radius: var(--radius-sm); }
.legal-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: var(--text-xs); }
.legal-content th, .legal-content td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); }
.legal-content th { color: var(--color-text); font-weight: var(--weight-semibold); background: var(--color-surface-raised); }
.legal-content hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }

/* --- Consent UI (signup form + /auth/consent interstitial) ----------------- */
.consent-block { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.consent-item { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.consent-check { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-accent); }
.consent-item a { color: var(--color-accent); text-decoration: underline; }
[data-consent-submit]:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Footer legal links (LC-1 expansion) ----------------------------------- */
.muted-footer-disclaimer { margin: 0 0 var(--space-2); max-width: 92ch; }
.muted-footer-links { margin: 0; color: var(--color-text-faint); line-height: var(--leading-relaxed); }
.muted-footer-links a { color: var(--color-text-secondary); }
.muted-footer-links a:hover { color: var(--color-text); }

/* --- Legal submenu inside the account popover (native <details>) ----------- */
.popover-submenu { border-radius: var(--radius-sm); }
.popover-submenu-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
  color: var(--color-text-secondary); border-radius: var(--radius-sm);
  cursor: pointer; list-style: none; user-select: none;
}
.popover-submenu-trigger::-webkit-details-marker { display: none; }
.popover-submenu-trigger::marker { content: ""; }
.popover-submenu-trigger:hover { background: var(--color-surface-raised); color: var(--color-text); }
.popover-submenu-caret { font-size: var(--text-xs); transition: transform var(--transition-fast); }
.popover-submenu[open] .popover-submenu-caret { transform: rotate(90deg); }
.popover-submenu-items { display: flex; flex-direction: column; gap: 2px; padding-left: var(--space-3); }
.popover-submenu-items a { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.popover-submenu-items a:hover { background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; }
.popover-submenu-items a.is-active { color: var(--color-accent); }

/* --- Cookie banner (rendered only when ANALYTICS_ENABLED=true) -------------- */
.cookie-banner {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  max-width: 720px; margin: 0 auto; z-index: var(--z-popover);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-text { margin: 0; }
.cookie-banner-text a { color: var(--color-accent); }
.cookie-banner-actions { display: flex; gap: var(--space-2); }

/* --- Account "Privacy & Data" controls ------------------------------------- */
.account-privacy-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.account-privacy-row:first-of-type { border-top: 0; }
.account-privacy-copy { flex: 1 1 auto; }
.account-privacy-row .account-label { display: block; color: var(--color-text); font-size: var(--text-sm); }
.account-privacy-row .account-hint { margin: var(--space-1) 0 0; max-width: 60ch; }
.account-privacy-row form { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.account-delete-reason { max-width: 220px; }
.account-delete-btn { color: var(--color-down, #e5484d); border-color: var(--color-down, #e5484d); }
.account-deletion-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  border: 1px solid var(--color-down, #e5484d); border-radius: var(--radius-md);
  background: var(--color-down-soft, rgba(229, 72, 77, 0.08));
}
.account-deletion-banner p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.account-deletion-banner strong { color: var(--color-text); }

/* --- P5 repoints: landing pricing teaser + home-dash upgrade nudge -------- */
.is-landing .price-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.home-dash .dash-upgrade { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-3) 0 0; }

/* ============================================================================
   Workspace top tab-strip (Data | Screener | Dashboard) + Screener tab
   PRIMARY content-area nav: a boxed segmented control (mockup switcher,
   tokenised). Deliberately distinct from the secondary underline .tab-bar
   (Data's Cash/F&O/Key-Strikes sub-tabs) and the borderless command-bar
   .tab-btn pills. Existing tokens only — no new hexes.
   ============================================================================ */
.workspace-tabs { display: inline-flex; gap: 2px; margin: 0 0 var(--space-5); padding: 3px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.workspace-tab { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-secondary); background: transparent; border: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
.workspace-tab:hover { color: var(--color-text); text-decoration: none; }
.workspace-tab.is-active { background: var(--color-accent); color: var(--color-text-on-accent); }

/* Screener layout: sticky filter panel left, results right (mirrors the IA
   screener grid; collapses to one column on narrow viewports). */
.ws-screener-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); align-items: start; }
.ws-filter-panel { position: sticky; top: var(--space-4); }
.ws-filter-group { margin-bottom: var(--space-5); }
.ws-filter-group h4 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.ws-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ws-range-row label { font-size: var(--text-xs); color: var(--color-text-secondary); }
@media (max-width: 820px) { .ws-screener-grid { grid-template-columns: 1fr; } }

/* Quick-screen presets row — chips that pre-fill + run the existing filter form.
   .preset-chip is dedicated (the Scanner .chip is a different, micro chip). */
.preset-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.preset-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-faint); font-weight: var(--weight-semibold); }
.preset-chip { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.preset-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.preset-chip.is-active { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-text); }
.preset-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.preset-chip:disabled:hover { color: var(--color-text-secondary); border-color: var(--color-border); }

/* ── Screener criteria rebuild ─────────────────────────────────────────────
   Cash/F&O segment toggle, the collapsible grouped criteria bank, and the
   chip-style boolean toggles. These are global classes (the screener body is
   `.tlx`, but base.css is unscoped, so they apply there). */

/* Always-visible action bar (segment · symbol · criteria toggle · run). */
.scr-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* Segmented Cash / F&O control. */
.scr-seg { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px; }
.scr-seg button { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); background: transparent; border: 0; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.scr-seg button:hover { color: var(--color-text); }
.scr-seg button.on { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: var(--weight-semibold); }

/* The criteria toggle's active-count badge. */
.scr-count { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; display: none; align-items: center; justify-content: center; border-radius: var(--radius-pill); }
.scr-count.on { display: inline-flex; background: var(--color-accent-soft); color: var(--color-accent-text); }

/* Collapsible criteria bank + the three groups. */
.scr-criteria { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.scr-criteria.is-collapsed { display: none; }
.scr-group { display: flex; flex-direction: column; gap: var(--space-2); }
.scr-group + .scr-group { border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }
.scr-group-head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); color: var(--color-text); }
.scr-group-head i { color: var(--color-accent); transform: translateY(1px); }
.scr-group-sub { text-transform: none; letter-spacing: 0; font-weight: var(--weight-normal); color: var(--color-text-faint); font-size: var(--text-2xs); }
.scr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* F&O-only criteria: hidden in the Cash segment. `.scr-controls` sets
   display:flex, which out-specifies the UA `[hidden]{display:none}` rule, so the
   blocks would otherwise leak into Cash — this class+attribute selector (0,2,0)
   wins back. The Cash segment must show ZERO F&O criteria. */
.scr-fno-only[hidden] { display: none; }

/* Relationship cluster: tighten the in-box selects so [left][op][right] reads
   as one control. (.ddl > select chrome-stripping comes from components.css.) */
.tlx .scr-rel { gap: 6px; }
.tlx .scr-rel-lbl { font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.tlx .scr-rel > select { font-size: 12px; padding: 2px 2px; }

/* Chip-style boolean toggle (checkbox hidden; the pill reflects :checked). */
.scr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; user-select: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.scr-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.scr-toggle i { font-size: 13px; }
.scr-toggle:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.scr-toggle:has(input:checked) { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent-text); }
.scr-toggle:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Dashboard PLANNED stub — quiet centred panel. */
.ws-stub { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-12) var(--space-6); }
.ws-stub .ws-stub-icon { font-size: var(--text-2xl); opacity: 0.5; }
.ws-stub .ws-stub-title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text); }
.ws-stub .ws-stub-sub { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 46ch; }