/* GreatSignal — minimal sheet. Deliberately small.
   Two themes:
     • default (dark)  — terminal-y, easier on the eyes during long sessions
     • .theme-paper    — TradingView-style cream/ink, applied via html.theme-paper
   Theme class is toggled by the nav button and persisted to localStorage.
*/
:root {
  --bg0:  #0f1117;
  --bg1:  #161922;
  --bg2:  #1d2230;
  --bd:   #262b3a;
  --bd1:  #353a4d;
  --tx0:  #e6e9ef;
  --tx1:  #b3b9c8;
  --tx2:  #7d8497;
  --tx3:  #565b6c;
  --tx4:  #3a3e4d;
  --accent:    #f9a825;
  --accent-2:  #2196f3;
  --green: #26a69a;
  --red:   #ef5350;
}

/* ── Paper theme ── TradingView-style cream + ink + amber highlight ────── */
html.theme-paper {
  --bg0:  #f5f3eb;   /* warm paper */
  --bg1:  #fbfaf3;   /* card surface — slightly lighter than page */
  --bg2:  #efece2;   /* nav strip + table headers */
  /* Borders bumped darker so table outlines / pill outlines read against
     the cream paper bg instead of dissolving into it. */
  --bd:   #c4bea8;   /* was #d8d3c4 */
  --bd1:  #9c9580;   /* was #b9b29c */
  /* Ink ramp pulled down ~10-15% across the board for better legibility
     on cream. Primary text was fine; secondary / muted were too washed out. */
  --tx0:  #0e0e0e;   /* primary ink — was #1a1a1a */
  --tx1:  #2a2820;   /* body text — was #3d3a32 */
  --tx2:  #524f44;   /* secondary copy — was #6e6a5e */
  --tx3:  #7c7869;   /* muted hints — was #95907f */
  --tx4:  #9c9682;   /* disabled / placeholder — was #b4ae9b */
  --accent:    #b88a1a;   /* warm gold — same role as v1's amber but darker for legibility on paper */
  --accent-2:  #1463a8;   /* serious blue for links */
  --green:     #1f7a6e;
  --red:       #b73d3d;
}
/* The X sign-in button stays black-on-white in both themes — it's X's brand */
html.theme-paper .btn-x { background: #000; color: #fff; border-color: #000; }
/* In dark mode the source badges have a transparent tinted background, which
   reads fine. On paper the same alpha is too pale — bump it. */
html.theme-paper .src-bb       { background: rgba(20,99,168,0.12); color: #1463a8; }
html.theme-paper .src-parabola { background: rgba(122,57,140,0.12); color: #7a398c; }
html.theme-paper .src-manual   { background: rgba(184,138,26,0.16); color: #8b6510; }
html.theme-paper .badge-manual { background: rgba(184,138,26,0.16); color: #8b6510; }
html.theme-paper .badge-pinned { background: rgba(184,138,26,0.22); color: #8b6510; }
html.theme-paper .error        { background: rgba(183,61,61,0.08); border-color: rgba(183,61,61,0.30); color: #b73d3d; }
html.theme-paper .picks-table  { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
html.theme-paper .login-card   { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
html.theme-paper .post-body    { background: #faf8ef; }
html.theme-paper code          { background: #efece2; color: #6e6a5e; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg0);
  color: var(--tx0);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }
code { font-family: ui-monospace, Menlo, monospace; background: var(--bg2); padding: 1px 6px; border-radius: 3px; font-size: 12px; }

/* ── nav ──────────────────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: var(--bg1);
  border-bottom: 1px solid var(--bd);
}
/* Brand mark: small square logo + wordmark. Wordmark uses Playfair
   Display in BOTH themes (consistent vintage feel across dark + paper).
   Only the logo's saturation and the brand-name color vary by theme. */
.topnav .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 19px; letter-spacing: 0.015em; color: var(--tx0);
}
.topnav .brand:hover { color: var(--tx0); }
.topnav .brand .brand-mark {
  width: 24px; height: 24px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  /* Slightly subdued in dark mode so the dim ramp isn't disrupted; paper
     mode lifts the saturation back. */
  filter: saturate(0.85) brightness(0.95);
}
html.theme-paper .topnav .brand .brand-mark { filter: none; }
.topnav .brand .brand-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 800;
  color: var(--tx0);
  letter-spacing: 0.005em;
}
.topnav .brand:hover .brand-name { color: var(--accent); }
.topnav .nav-link {
  color: var(--tx2);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.topnav .nav-link:hover  { color: var(--tx0); }
.topnav .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.topnav .spacer { flex: 1; }
.topnav .user   { font-size: 12px; color: var(--tx2); }
.topnav .link-btn {
  background: transparent; border: 0; color: var(--tx2);
  cursor: pointer; font-size: 12px; padding: 4px 0;
}
.topnav .link-btn:hover { color: var(--red); }
.logout-form { display: inline; margin: 0; }

/* ── User dropdown menu (under @handle in the nav) ───────────────────── */
.user-menu { position: relative; }
.user-trigger {
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer;
  color: var(--tx2); font: inherit; font-size: 12px;
  padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px;
}
.user-trigger:hover { color: var(--tx0); border-color: var(--bd); }
.user-menu.open .user-trigger { color: var(--tx0); border-color: var(--bd1); background: var(--bg2); }
.user-caret { font-size: 9px; color: var(--tx3); }
.user-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 180px; z-index: 100;
  background: var(--bg1); border: 1px solid var(--bd1); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  overflow: hidden;
}
.user-menu.open .user-dropdown { display: block; }
.user-dropdown-header {
  padding: 8px 12px;
  background: var(--bg2); border-bottom: 1px solid var(--bd);
  color: var(--accent); font-size: 12px; font-weight: 600;
}
.user-dropdown-item {
  display: block; width: 100%;
  padding: 8px 12px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--tx1); font: inherit; font-size: 13px;
  text-align: left; text-decoration: none;
}
.user-dropdown-item:hover  { background: var(--bg2); color: var(--tx0); }
.user-dropdown-item.active { color: var(--accent); background: rgba(249,168,37,0.08); }
.user-dropdown-signout { color: var(--red); border-top: 1px solid var(--bd); }
.user-dropdown-signout:hover { background: rgba(239,83,80,0.10); color: var(--red); }
html.theme-paper .user-dropdown { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
html.theme-paper .user-dropdown-item.active { background: rgba(184,138,26,0.12); color: #8b6510; }
html.theme-paper .user-dropdown-signout      { color: var(--red); }
html.theme-paper .user-dropdown-signout:hover { background: rgba(183,61,61,0.08); }

/* ── Scanners dropdown (left side of nav, after the brand) ──────────── */
.scanners-menu { position: relative; }
.scanners-trigger {
  background: transparent; border: 0;
  cursor: pointer; font: inherit;
  color: var(--tx2); font-size: 13px;
  padding: 4px 0; display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 2px solid transparent;
}
.scanners-trigger:hover  { color: var(--tx0); }
.scanners-trigger.active { color: var(--accent); border-bottom-color: var(--accent); }
.scanners-menu.open .scanners-trigger { color: var(--tx0); }
.scanners-dropdown {
  display: none;
  position: absolute; left: 0; top: calc(100% + 4px);
  min-width: 240px; z-index: 100;
  background: var(--bg1); border: 1px solid var(--bd1); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  overflow: hidden;
}
.scanners-menu.open .scanners-dropdown { display: block; }
html.theme-paper .scanners-dropdown { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }

.scanners-dropdown a.user-dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* Coming-soon items: muted, non-clickable, "Soon" pill on the right. */
.scanners-soon {
  color: var(--tx3) !important;
  cursor: default;
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
}
.scanners-soon:hover { background: transparent !important; color: var(--tx3) !important; }
.scanners-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg2); color: var(--tx3);
  text-transform: uppercase;
}
.scanners-tag-live {
  background: rgba(38,166,154,0.15); color: var(--green);
}
html.theme-paper .scanners-tag-live { background: rgba(31,122,110,0.15); color: var(--green); }

.nav-paid {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
  background: rgba(249,168,37,0.15); color: var(--accent);
  vertical-align: middle;
}
html.theme-paper .nav-paid { background: rgba(184,138,26,0.16); color: #8b6510; }

/* Theme toggle in the nav. Renders ◐ in dark mode (clicking → paper),
   ◑ in paper mode (clicking → dark). Just a button, no JS framework. */
.theme-toggle {
  background: transparent; border: 1px solid var(--bd1);
  color: var(--tx2); cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0; margin-right: 4px;
}
.theme-toggle:hover { color: var(--tx0); border-color: var(--accent); }

main { padding: 26px 22px 60px; max-width: 1200px; margin: 0 auto; }

footer {
  text-align: center; color: var(--tx3); font-size: 11px;
  padding: 20px 22px; border-top: 1px solid var(--bd);
}

/* ── login ────────────────────────────────────────────────────────── */
body.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  position: relative;             /* anchors .login-theme-toggle */
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 36px 40px;
  width: min(440px, 92vw);
  text-align: center;
}

/* Discreet theme toggle in the top-right of the login card. Smaller +
   quieter than the nav toggle — the login screen is meant to feel calm,
   so this fades in on hover and otherwise sits out of the way. */
.login-theme-toggle {
  position: absolute;
  top: 12px; right: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--tx3);
  cursor: pointer;
  font-size: 13px; line-height: 1;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.55;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
}
.login-theme-toggle:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.login-card h1   { font-size: 22px; margin: 0 0 6px; letter-spacing: 0.06em; }
.login-card .badge-v2 { color: var(--accent); font-size: 14px; vertical-align: super; }
.login-card .tagline  { color: var(--tx2); margin: 0 0 22px; font-size: 13px; }
.btn-x {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 6px;
  background: #000; color: #fff;
  font-weight: 600; font-size: 14px;
  border: 1px solid var(--bd1);
}
.btn-x:hover { background: #111; color: #fff; }
.sep      { border: 0; border-top: 1px solid var(--bd); margin: 22px 0 14px; }
.muted    { color: var(--tx3); }
.small    { font-size: 12px; }
.error {
  background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.35);
  color: var(--red); padding: 10px 14px; border-radius: 6px;
  margin-bottom: 18px; font-size: 12px; text-align: left;
}
/* Soft notice on the login card when an unauthenticated visitor was bounced
   back here from a protected route. Same shape as .error but neutral, not red. */
.signin-prompt {
  background: rgba(33,150,243,0.08); border: 1px solid rgba(33,150,243,0.28);
  color: var(--tx1); padding: 9px 14px; border-radius: 6px;
  margin-bottom: 18px; font-size: 12px; text-align: left;
}
.signin-prompt code { background: transparent; color: var(--accent-2); padding: 0; font-size: 12px; }

/* ── region tabs ──────────────────────────────────────────────────── */
.region-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bd);
  padding-bottom: 6px;
}
.region-tabs .tab {
  padding: 8px 14px;
  color: var(--tx2);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.region-tabs .tab:hover  { color: var(--tx0); }
.region-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.region-tabs .count {
  font-size: 11px; color: var(--tx3);
  background: var(--bg2); padding: 1px 6px; border-radius: 8px;
}
.region-tabs .tab.active .count { color: var(--accent); background: rgba(249,168,37,0.08); }

/* ── region header ────────────────────────────────────────────────── */
.region-header h2 {
  margin: 4px 0 4px; font-size: 22px; font-weight: 700;
  letter-spacing: 0.02em;
}
.region-header .sep-arrow { color: var(--tx3); margin: 0 6px; font-weight: 400; }
.region-header .blurb { color: var(--tx2); margin: 0 0 18px; font-size: 13px; }

/* ── date navigator (per-day picks snapshot) ─────────────────────── */
.date-nav {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 14px; padding: 8px 10px;
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  font-size: 13px;
}
.date-nav .dn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px;
  background: var(--bg2); border: 1px solid var(--bd1);
  color: var(--tx1); text-decoration: none; font-size: 14px;
}
.date-nav .dn-arrow:hover { color: var(--accent); border-color: var(--accent); }
.date-nav .dn-arrow.dn-disabled { opacity: 0.35; pointer-events: none; }
.date-nav .dn-select,
.date-nav .dn-input {
  background: var(--bg2); color: var(--tx0);
  border: 1px solid var(--bd1); border-radius: 4px;
  padding: 4px 8px; font-size: 13px; font-family: inherit;
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.date-nav .dn-select:hover, .date-nav .dn-input:hover { border-color: var(--accent); }
.date-nav .dn-select:focus, .date-nav .dn-input:focus { border-color: var(--accent); outline: none; }
html.theme-paper .date-nav .dn-select,
html.theme-paper .date-nav .dn-input { color-scheme: light; }

/* Default everywhere: native calendar <input type=date>. Desktop users
   prefer the calendar grid even with gap days (just shows empty state
   if they land on a no-scan day). The mobile rule below swaps to the
   dropdown only when both: (a) viewport is narrow AND (b) history is
   short (≤14 days). Long mobile history sticks with the calendar. */
.date-nav .dn-select { display: none; }
.date-nav .dn-input  { display: inline-block; }
.date-nav .dn-today {
  font-size: 11px; padding: 3px 8px; border-radius: 4px;
  background: var(--accent); color: var(--bg0); text-decoration: none;
  font-weight: 600;
}
.date-nav .dn-today:hover { opacity: 0.9; }
.date-nav .dn-explainer { margin-left: auto; font-size: 11px; color: var(--tx3); }
.date-nav .dn-explainer b { color: var(--tx1); font-weight: 600; }

/* ── exchange row ─────────────────────────────────────────────────── */
.exchange-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.ex-pill {
  padding: 5px 11px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--bd);
  color: var(--tx1); font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ex-pill:hover  { color: var(--tx0); border-color: var(--bd1); }
.ex-pill.active { color: var(--accent); border-color: var(--accent); background: rgba(249,168,37,0.06); }
.ex-pill .count { font-size: 10px; color: var(--tx3); }
.ex-pill.active .count { color: var(--accent); }
/* Not-scanned: muted text + dashed border so it reads as "this pill exists
   but we're not pulling data for it yet." Still clickable so the user can
   confirm the empty state. */
.ex-pill.ex-not-scanned { color: var(--tx3); border-style: dashed; opacity: 0.7; }
.ex-pill.ex-not-scanned:hover { color: var(--tx2); }
.ex-pill.ex-not-scanned .count { color: var(--tx4); }

/* ── picks table ──────────────────────────────────────────────────── */
.picks-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  overflow: hidden;
}
.picks-table th {
  text-align: left; padding: 8px 12px;
  background: var(--bg2); color: var(--tx2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--bd);
}
.picks-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--bd);
  font-size: 13px; color: var(--tx0); white-space: nowrap;
}
.picks-table tr:last-child td { border-bottom: none; }
.picks-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.picks-table .num.neg { color: var(--red); }
/* Overview-only: center the numeric columns (BB onwards). The simulate
   table keeps right-alignment because its money/price columns line up
   better that way. Scoped via .sortable so simulate isn't affected. */
.picks-table.sortable th.num,
.picks-table.sortable td.num { text-align: center; }
/* Alert rows — outliers on both p_top AND rsi_div get a tinted background
   so they're impossible to miss. Subtle but consistent in both themes. */
.picks-table .row-alert td { background: rgba(239,83,80,0.06); }
.picks-table .row-alert td:first-child { box-shadow: inset 3px 0 0 var(--red); }
html.theme-paper .picks-table .row-alert td { background: rgba(183,61,61,0.06); }
.alert-glyph { font-size: 13px; vertical-align: middle; }
/* Sits to the right of the 🚨 in the ticker cell on alert rows.
   Italic + bold + uppercase + smaller, in the alert red so it ties
   visually to the row tint. */
.top-detected {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--red);
  vertical-align: middle;
  margin-left: 2px;
}

/* ── preface card ─────────────────────────────────────────────────── */
.preface {
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.preface h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx2);
}
.preface p {
  margin: 0 0 8px;
  font-size: 13px; line-height: 1.6; color: var(--tx1);
}
.preface p:last-child { margin-bottom: 0; }
.preface .last-scan {
  border-top: 1px dashed var(--bd);
  padding-top: 10px;
  color: var(--tx3);
}
.preface .last-scan b { color: var(--accent); }

/* Collapsible variant of .preface — a native <details> element styled to
   look like the existing card. Strips the browser's default disclosure
   triangle and adds our own chevron that rotates when opened. */
.preface-collapsible { padding: 0; }
.preface-collapsible > summary {
  list-style: none;             /* Firefox */
  cursor: pointer;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  user-select: none;
}
.preface-collapsible > summary::-webkit-details-marker { display: none; }
.preface-collapsible > summary::marker                  { display: none; }
.preface-collapsible .preface-title {
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx2);
  font-weight: 700;
}
.preface-collapsible .preface-meta {
  font-size: 11px; color: var(--tx3);
}
.preface-collapsible .preface-meta b { color: var(--accent); font-weight: 600; }
.preface-collapsible .preface-chevron {
  margin-left: auto;
  color: var(--tx3); font-size: 12px;
  transition: transform 120ms ease;
}
.preface-collapsible[open] > summary .preface-chevron { transform: rotate(180deg); }
.preface-collapsible[open] > summary { border-bottom: 1px dashed var(--bd); }
.preface-collapsible > summary:hover .preface-title,
.preface-collapsible > summary:hover .preface-chevron { color: var(--tx0); }
.preface-collapsible .preface-body { padding: 14px 18px 16px; }
.preface-collapsible .preface-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--tx1); }
.preface-collapsible .preface-body p:last-child { margin-bottom: 0; }

/* ── Ticker link in picks-table ───────────────────────────────────── */
.picks-table a.ticker-link {
  color: var(--tx0); text-decoration: none;
}
.picks-table a.ticker-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Stacked ticker cell: ticker + alert/badge on line 1, company name in
   muted small text on line 2, exchange in even smaller subtler text on
   line 3. Replaces the standalone Exchange column. */
.picks-table .ticker-cell { line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.picks-table .ticker-cell .ticker-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.picks-table .ticker-cell .ticker-company {
  font-size: 11px; color: var(--tx2); margin-top: 2px;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.picks-table .ticker-cell .ticker-exchange {
  font-size: 9px; color: var(--tx3); margin-top: 1px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Sortable headers: pointer + tiny arrow slot that fills in on click. */
.picks-table th.sortable-col {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.picks-table th.sortable-col:hover { color: var(--tx0); }
.picks-table th.sortable-col[data-sort-dir] { color: var(--accent); }
.picks-table th.sortable-col .sort-arrow {
  display: inline-block;
  min-width: 10px;
  margin-left: 2px;
  font-size: 9px;
  color: var(--accent);
}

/* Column widths + emphasis. BB % is the primary signal — bigger, bolder,
   accent-tinted background. The other five numeric columns share equal
   widths so the table reads as "one standout + five context columns." */
.picks-table .col-bb { width: 13%; }
.picks-table .col-equal { width: 11%; }
/* Bold + amber accent on BB so the eye lands there first. Subtle column
   tint reinforces it without making the row feel busy. */
.picks-table td.col-bb {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.picks-table th.col-bb {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg2));
}
.picks-table th.col-bb:hover { color: var(--accent); }
/* Alert-row tint should still win visually over the column tint — bump it
   slightly inside the BB cell so the row coloring stays continuous. */
.picks-table .row-alert td.col-bb {
  background: color-mix(in srgb, var(--red) 8%, color-mix(in srgb, var(--accent) 4%, transparent));
}

/* ── Split view: table left, chart right (desktop only) ─────────────
   Default state when split is ENABLED but no ticker is selected: the
   table takes the full width and the chart pane is collapsed. As soon
   as the user clicks a ticker (.chart-open added by JS), the layout
   flips to a two-column grid and the chart pane appears. Click the same
   ticker again or the × button → back to full-width table. */
.overview-body { display: block; }
.overview-body.split { display: block; }
.overview-body.split .overview-chart-col { display: none; }
@media (min-width: 1024px) {
  .overview-body.split.chart-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .overview-body.split.chart-open .overview-chart-col {
    display: flex; flex-direction: column;
  }
  .overview-body.split.chart-open .overview-table-col { min-width: 0; overflow-x: auto; }
  .overview-body.split.chart-open .picks-table { font-size: 12px; }
  .overview-body.split.chart-open .picks-table th,
  .overview-body.split.chart-open .picks-table td { padding: 6px 8px; }
  /* Cramped split: drop the heavy fundamentals columns so the table can
     breathe alongside the chart. BB / RSI / RSI %ile / Price / Daily
     Outflow stay visible. Mobile (single column) keeps every column. */
  .overview-body.split.chart-open th.col-float,
  .overview-body.split.chart-open td.col-float,
  .overview-body.split.chart-open th.col-short,
  .overview-body.split.chart-open td.col-short { display: none; }
}
.overview-chart-col {
  position: sticky; top: 12px;
  background: var(--bg1);
  border: 1px solid var(--bd); border-radius: 6px;
  min-height: 420px;
  flex-direction: column;
}

/* Close button + TradingView fallback link in the chart pane header. */
.chart-pane-header { position: relative; }
.chart-pane-close {
  margin-left: auto;
  background: transparent; border: 1px solid var(--bd1);
  color: var(--tx2); cursor: pointer;
  width: 24px; height: 24px; border-radius: 4px;
  font-size: 14px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.chart-pane-close:hover { color: var(--red); border-color: var(--red); }
.chart-pane-close.hidden { display: none; }

.tv-fallback {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: transparent; border: 1px solid var(--bd1);
  color: var(--tx2); text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tv-fallback:hover { color: var(--accent); border-color: var(--accent); }
.tv-fallback.hidden { display: none; }
/* Standalone chart page: the link sits in the h2 — keep it light. */
.region-header h2 .tv-fallback {
  font-size: 12px;
  font-weight: 400;
  vertical-align: middle;
  margin-left: 12px;
}
.chart-pane-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: baseline; gap: 10px;
}
.chart-pane-header .ph-title { font-size: 14px; font-weight: 700; color: var(--tx0); }

/* ── TradingView Advanced Chart embed (chart.html + split-view pane) ─── */
.chart-tf-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 10px;
}
.chart-tf {
  font-size: 12px; padding: 4px 11px; border-radius: 4px;
  background: var(--bg2); border: 1px solid var(--bd);
  color: var(--tx1); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.chart-tf:hover  { color: var(--tx0); border-color: var(--bd1); }
.chart-tf.active { color: var(--accent); border-color: var(--accent); background: rgba(249,168,37,0.07); }

.tv-chart-shell {
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: 6px;
  overflow: hidden;
}
.tv-chart-container {
  /* Fill the viewport below nav + header + tf row. The widget reads
     `autosize: true` and matches its parent. */
  width: 100%;
  height: calc(100vh - 280px);
  min-height: 480px;
}

/* ── Chart placeholder (standalone + split pane) ──────────────────── */
.chart-shell {
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  padding: 18px;
}
.chart-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px;
  color: var(--tx3);
  flex: 1;
}
.chart-placeholder .ph-glyph {
  font-size: 56px; line-height: 1; color: var(--bd1); margin-bottom: 14px;
}
.chart-placeholder .ph-title {
  font-size: 14px; color: var(--tx1); font-weight: 600; margin-bottom: 6px;
}
.chart-placeholder .ph-blurb {
  font-size: 12px; color: var(--tx3); max-width: 360px; line-height: 1.55;
}

/* ── Settings / Onboarding cards ──────────────────────────────────── */
.saved-banner {
  background: rgba(38,166,154,0.10);
  border: 1px solid rgba(38,166,154,0.35);
  color: var(--green);
  padding: 8px 14px; border-radius: 6px;
  margin-bottom: 14px; font-size: 12px; font-weight: 600;
}
.settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.setting-card {
  background: var(--bg1); border: 1px solid var(--bd);
  border-radius: 6px; padding: 18px 20px;
}
.setting-card.setting-wide { grid-column: 1 / -1; }
.setting-card h3 {
  margin: 0 0 12px; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tx2);
}
.setting-card .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.setting-card .kv dt { color: var(--tx3); }
.setting-card .kv dd { margin: 0; color: var(--tx0); }
.btn-ghost {
  background: transparent; border: 1px solid var(--bd1); color: var(--tx2);
  padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer;
  margin-top: 12px;
}
.btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; }

.onboard-card {
  background: var(--bg1); border: 1px solid var(--bd);
  border-radius: 8px; padding: 22px 26px;
  max-width: 640px;
}
.onboard-card h3 {
  margin: 0 0 14px; font-size: 14px;
  color: var(--tx0); font-weight: 700;
}

/* Full-width onboarding form: replaces the narrow .onboard-card for the
   chart-provider picker. The form itself has no card chrome — the two big
   cards inside ARE the visual. */
.onboard-wide { width: 100%; max-width: none; padding: 0; }
.onboard-wide h3 {
  margin: 0 0 16px; font-size: 14px;
  color: var(--tx0); font-weight: 700;
  letter-spacing: 0.04em;
}

/* Two-up provider picker. Grid collapses to single column on mobile. */
.provider-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 720px) {
  .provider-picker { grid-template-columns: 1fr 1fr; }
}

.provider-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg1); border: 1.5px solid var(--bd);
  border-radius: 10px; padding: 28px 24px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.provider-card:hover { border-color: var(--bd1); transform: translateY(-1px); }
.provider-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg1));
}
/* The radio itself sits at top-right as a small indicator — the whole card
   is the click target via the wrapping <label>. */
.provider-card input[type=radio] {
  position: absolute; top: 12px; right: 12px;
  width: 16px; height: 16px;
  accent-color: var(--accent);
}

.provider-logo {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  border-radius: 12px;
  background: var(--bg0);
  border: 1px solid var(--bd);
  margin-bottom: 14px;
}
.provider-logo-internal { color: var(--accent); }
html.theme-paper .provider-logo { background: #fff; border-color: var(--bd1); }

.provider-title {
  font-size: 16px; font-weight: 700; color: var(--tx0);
  margin-bottom: 6px;
}
.provider-title .opt-hint { font-size: 12px; font-weight: 400; color: var(--tx3); margin-left: 4px; }
.provider-blurb {
  font-size: 12px; color: var(--tx2); line-height: 1.55;
  max-width: 340px;
}
.opt-card {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 14px;
  background: var(--bg0); border: 1px solid var(--bd); border-radius: 6px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.opt-card:hover { border-color: var(--bd1); }
.opt-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg0));
}
.opt-card input { grid-row: span 2; align-self: center; }
.opt-card .opt-title { font-size: 14px; font-weight: 600; color: var(--tx0); }
.opt-card .opt-hint  { color: var(--tx3); font-size: 12px; font-weight: 400; margin-left: 4px; }
.opt-card .opt-blurb { font-size: 12px; color: var(--tx2); line-height: 1.5; grid-column: 2; }

.split-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg0); border: 1px dashed var(--bd);
  border-radius: 6px; padding: 10px 14px; margin: 12px 0;
  font-size: 12px; color: var(--tx2); cursor: pointer;
}
.split-toggle.disabled { opacity: 0.45; cursor: not-allowed; }
.split-toggle input { margin-top: 2px; }

.onboard-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btn-primary {
  background: var(--accent); color: #1a1a1a;
  border: 0; padding: 8px 18px; border-radius: 4px;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }
html.theme-paper .btn-primary { color: #fff; }

/* ── /trade-planner ─────────────────────────────────────────────────── */
.paid-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  background: rgba(249,168,37,0.18); color: var(--accent);
  padding: 2px 8px; border-radius: 4px;
  margin-left: 10px; vertical-align: middle;
}
html.theme-paper .paid-badge { background: rgba(184,138,26,0.16); color: #8b6510; }

.sim-config {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-end;
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  padding: 14px 18px; margin-bottom: 18px;
}

/* Trader filter row — exchange picker + date navigator side by side,
   sits above .sim-config and the table. Mirrors the overview's date-nav
   styling so the two pages feel related. */
.trader-filters {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  margin: 8px 0 12px;
}
.trader-filters .cfg-inline {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.trader-filters .cfg-inline label {
  font-size: 11px; color: var(--tx2); letter-spacing: 0.04em; text-transform: uppercase;
}
.trader-filters .cfg-inline select {
  background: var(--bg0); border: 1px solid var(--bd1); border-radius: 4px;
  color: var(--tx0); padding: 4px 8px; font-size: 13px;
  font-family: inherit; outline: none;
}
.trader-filters .cfg-inline select:focus { border-color: var(--accent); }
.trader-filters .date-nav { margin: 0; }
.trader-filters .date-nav .dn-explainer { display: none; }
.sim-config .cfg { display: flex; flex-direction: column; gap: 4px; }
.sim-config .cfg-summary { flex: 1; min-width: 220px; align-self: flex-end; }
.sim-config label {
  font-size: 11px; color: var(--tx2); letter-spacing: 0.04em; text-transform: uppercase;
}
.sim-config input, .sim-config select {
  background: var(--bg0); border: 1px solid var(--bd1); border-radius: 4px;
  color: var(--tx0); padding: 6px 9px; font-size: 13px;
  font-family: inherit; outline: none;
}
.sim-config input:focus, .sim-config select:focus {
  border-color: var(--accent);
}
.sim-config input[type=number] { width: 140px; font-variant-numeric: tabular-nums; }
.sim-portfolio { display: flex; gap: 6px; }
.sim-portfolio select { width: 95px; }
.sim-pctgroup  { display: flex; align-items: center; gap: 4px; }
.sim-pctgroup input { width: 70px; }
.sim-pctgroup span  { color: var(--tx2); font-size: 13px; }

.sim-table .row-noedge td {
  opacity: 0.45;
  font-style: italic;
}
/* Inline legend chip in the Trade Planner blurb — matches the dim italic
   treatment of skipped rows so the explanation reads at a glance. */
.row-noedge-legend {
  opacity: 0.55; font-style: italic; color: var(--tx2);
}
/* Capped marker — appears on rows where the hard portfolio cap shrank the
   position below the risk-per-trade target (or starved it entirely). */
.badge-capped {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(249,168,37,0.18); color: var(--accent);
  text-transform: uppercase; margin-left: 4px;
  vertical-align: middle;
}
html.theme-paper .badge-capped { background: rgba(184,138,26,0.16); color: #8b6510; }
.sim-table .row-capped td { opacity: 0.85; }
.sim-table .pos { color: var(--green); }
.sim-table .neg { color: var(--red); }
#sim-summary b { color: var(--tx0); }
#sim-summary b.pos { color: var(--green); }
#sim-summary b.neg { color: var(--red); }

/* Disclaimer below the picks table — fine print, not a banner. */
.picks-disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  border-top: 1px dashed var(--bd);
  color: var(--tx3);
  font-size: 11px; line-height: 1.5;
}
.picks-disclaimer b { color: var(--tx2); }
.picks-table .reason { white-space: normal; color: var(--tx2); font-size: 12px; max-width: 320px; }
.src {
  display: inline-block; padding: 1px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.src-bb       { background: rgba(33,150,243,0.15); color: var(--accent-2); }
.src-parabola { background: rgba(171,71,188,0.15); color: #ce93d8; }
.src-manual   { background: rgba(249,168,37,0.15); color: var(--accent); }

.badge-manual {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: rgba(249,168,37,0.15); color: var(--accent);
  margin-left: 4px;
}

.empty-state {
  background: var(--bg1); border: 1px dashed var(--bd);
  border-radius: 6px; padding: 30px 20px; text-align: center;
}

/* ── posts ────────────────────────────────────────────────────────── */
.post-list { display: grid; gap: 10px; }
.post-card {
  display: block;
  background: var(--bg1); border: 1px solid var(--bd);
  border-radius: 6px; padding: 16px 18px;
  color: var(--tx0);
}
.post-card:hover { border-color: var(--accent); }
.post-card h3 { margin: 0 0 4px; font-size: 15px; }
.badge-pinned {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: rgba(249,168,37,0.2); color: var(--accent);
  font-weight: 700; letter-spacing: 0.06em; margin-bottom: 6px;
}
.back-link { display: inline-block; margin-bottom: 14px; color: var(--tx2); font-size: 12px; }
.back-link:hover { color: var(--accent); }
.post h2 { margin: 4px 0 6px; }
.post-body {
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  padding: 16px 18px; white-space: pre-wrap; font-family: inherit; font-size: 13px;
  color: var(--tx1); line-height: 1.7;
}


/* ── About page ─────────────────────────────────────────────────────── */
.about-page { max-width: 740px; margin: 24px auto 80px; padding: 0 18px; }
.about-hero { text-align: center; margin-bottom: 28px; }
/* Hero h1: inline rounded-square logo next to the wordmark, in the same
   Playfair Display face the nav brand uses on paper — applied in both
   themes here because the About page is the "marquee" view and benefits
   from the vintage feel even in dark mode. */
.about-hero h1 {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 38px; line-height: 1;
  /* Primary ink, not the amber accent — works in dark mode (near-white)
     and paper mode (near-black) without two overrides. */
  color: var(--tx0);
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.about-hero-mark {
  display: block;
  width: 46px; height: 46px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.04);
}
html.theme-paper .about-hero-mark {
  box-shadow: 0 2px 10px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.about-hero .tagline {
  font-size: 14px; color: var(--tx2); margin: 0;
  font-style: italic;
}

.about-card {
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 8px;
  padding: 18px 22px; margin-bottom: 14px;
}
.about-card h2 {
  font-size: 14px; color: var(--accent); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.about-card p {
  color: var(--tx1); font-size: 14px; line-height: 1.6; margin: 0 0 10px;
}
.about-card p:last-child { margin-bottom: 0; }
.about-card ol, .about-card ul { color: var(--tx1); font-size: 14px; line-height: 1.7; margin: 0; padding-left: 20px; }
.about-card li + li { margin-top: 4px; }
.about-card a { color: var(--accent); text-decoration: none; }
.about-card a:hover { text-decoration: underline; }
.about-card b { color: var(--tx0); font-weight: 600; }
.exchange-list { columns: 2; column-gap: 24px; }
.exchange-list li { break-inside: avoid; }
@media (max-width: 640px) { .exchange-list { columns: 1; } }
.about-card-muted { background: var(--bg0); }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ────────────────────────────────────────────────────────────────────────
   Two breakpoints used here:
     ≤ 720px = phone / small tablet portrait → most mobile rules
     ≤ 480px = small phone                   → most aggressive trimming
   The desktop styles above are the canonical layout; these rules
   override only when the viewport actually gets narrow. */

/* Tab label swap: full ("United States") on wide, short ("US") on narrow.
   Both labels are always in the markup; CSS toggles which is visible. */
.region-tabs .label-short { display: none; }

/* Same pattern for nav labels + user handle: short versions hidden on
   desktop, swapped in below the mobile breakpoint. */
.nav-label-short    { display: none; }
.user-handle-short  { display: none; }

@media (max-width: 720px) {
  /* ── Region tabs: short labels + horizontal scroll if needed ──── */
  .region-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .region-tabs .tab { white-space: nowrap; padding: 7px 11px; flex-shrink: 0; }
  .region-tabs .label-full  { display: none; }
  .region-tabs .label-short { display: inline; }

  /* ── Date-nav: hide the "in your local time…" trailing clause ──
     Mobile sees just "Picks for Sunday, May 24" instead of the
     four-line wrap that the full string used to produce. */
  .dn-long { display: none; }
  .date-nav { flex-wrap: wrap; gap: 6px; }
  .date-nav .dn-explainer { width: 100%; margin: 0; font-size: 11px; }

  /* ── Date picker on mobile: dropdown when history is short, calendar
     when long. Default (set higher up) is calendar everywhere; this
     rule overrides ONLY for narrow viewports with ≤14 days, where the
     dropdown is more thumb-friendly. .dn-many (>14 days) is left in
     the default calendar state. */
  .date-nav:not(.dn-many) .dn-select { display: inline-block; }
  .date-nav:not(.dn-many) .dn-input  { display: none; }

  /* ── Overview picks table: hide non-essential columns ──
     Ticker, BB %, RSI stay. Anything tagged .col-mobile-hide
     disappears so the remaining three columns get real estate. */
  .picks-table.sortable .col-mobile-hide { display: none; }
  .picks-table.sortable .col-bb { width: 25%; }
  .picks-table.sortable .col-equal { width: 22%; }
  .picks-table .ticker-cell .ticker-company {
    max-width: 130px;
    /* Truncate long company names so they don't overflow into the next col */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Trade Planner table: horizontal scroll wrapper ──
     Keep all columns visible (price-sized for sizing math); table
     becomes wider than viewport, container scrolls horizontally so
     it doesn't break the page margins. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Bleed slightly past main's padding so the table can use the
       full viewport width on phones (more visible columns before swipe). */
    margin-left:  -22px;
    margin-right: -22px;
    padding: 0 22px 8px;
  }
  .table-scroll .picks-table {
    min-width: 760px;   /* enough for all Trade Planner columns at readable size */
    font-size: 12px;
  }

  /* ── Nav: try one row, wrap to two only if items don't fit ──────
     IMPORTANT: no overflow-x on the nav. overflow:auto creates a
     stacking context that CLIPS the Scanners + User dropdowns.
     Layout intent:
       Wide phone / landscape: everything on row 1
         [brand] [Scanners ▾] [Planner]      [◐] [@▾]
       Narrow phone where it doesn't fit: theme+user wrap naturally
         [brand] [Scanners ▾] [Planner]
                                 [◐] [@▾]
     Spacer hidden so we don't force-push the right side onto its own
     row; margin-left:auto on .theme-toggle does soft right-alignment
     that gives up gracefully on wrap. */
  .topnav {
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 6px;
    align-items: center;
  }
  .topnav .spacer { display: none; }
  .topnav .theme-toggle { margin-left: auto; }
  /* Mobile-only chrome trim:
       • brand wordmark hidden (logo mark stays)
       • Trade Planner link → "Planner"
       • @handle → just "@" icon trigger */
  .topnav .brand-name      { display: none; }
  .nav-label-full          { display: none; }
  .nav-label-short         { display: inline; }
  .user-handle-full        { display: none; }
  .user-handle-short {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--accent);
    font-weight: 700; font-size: 13px;
    margin-right: 2px;
  }
  .topnav .nav-link,
  .topnav .scanners-trigger  { font-size: 12px; padding: 2px 0; }
  .topnav .user,
  .topnav .user-trigger      { font-size: 11px; padding: 4px 6px; }
  /* Dropdowns: bump z-index well above table headers + sticky chrome. */
  .scanners-dropdown,
  .user-dropdown { z-index: 200; }
  main { padding: 18px 14px 40px; }

  /* ── Onboarding & misc cards: tighter padding on small screens ── */
  .login-card { padding: 28px 22px; }
  .about-page { padding: 0 14px; }
  .about-card { padding: 16px 18px; }
}

@media (max-width: 480px) {
  /* On the smallest phones, drop the page H2 and exchange-row a bit
     so the table gets more vertical real estate. */
  .region-header h2 { font-size: 18px; }
  .region-header .blurb { font-size: 12px; }
  .preface-collapsible > summary { padding: 10px 14px; }
  .picks-table th, .picks-table td { padding: 6px 8px; font-size: 11px; }
}

/* ────────────────────────────────────────────────────────────────────────
   Vintage display face — applied in BOTH themes for consistency.
   ────────────────────────────────────────────────────────────────────────
   Page headers + chrome titles use Playfair Display regardless of theme,
   so flipping dark↔paper only changes colors, not type. Body copy stays
   in the system stack — only the marquee surfaces get the 1920s feel. */
.region-header h2,
.login-card h1,
.preface-title,
.about-card h2,
.about-card h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* (.topnav .brand styling lives in the global block higher up.) */
.region-header h2 {
  font-size: 30px;
  letter-spacing: 0.005em;
  margin: 6px 0 4px;
}
.login-card h1 {
  font-size: 30px;
  letter-spacing: 0.01em;
}
.preface-title {
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 16px;
}
.login-card .tagline { font-style: italic; color: var(--tx2); }

/* Paper-mode nav polish: slightly warmer top bar with a hairline divider
   under the brand mark, refined link weight, and tighter caps treatment
   on the section dividers. Dark-mode nav is untouched. */
/* Nav typography — applied in BOTH themes so font-family is identical
   across the dark/paper toggle. Paper just changes background colors. */
.topnav .nav-link,
.topnav .scanners-trigger {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-style: italic;
}
.topnav .nav-link:hover,
.topnav .scanners-trigger:hover { color: var(--accent); }
.topnav .nav-link.active,
.topnav .scanners-trigger.active { font-style: normal; font-weight: 600; }
.topnav .user-trigger {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
}
/* Wordmark gets a small separator dot before the nav links in both themes
   so the brand stands apart visually from the navigation items. */
.topnav .brand::after {
  content: "·";
  margin-left: 14px;
  color: var(--tx3);
  font-weight: 400;
  font-style: normal;
}

/* Paper-only chrome — color / background / border tweaks. NO font-family
   here; type stays the same across themes. */
html.theme-paper .topnav {
  background: linear-gradient(180deg, #fbfaf3 0%, #efece2 100%);
  border-bottom-color: var(--bd1);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 11px 24px;
}
html.theme-paper .topnav .nav-link { color: var(--tx1); }
html.theme-paper .topnav .theme-toggle     { border-color: var(--bd1); color: var(--tx2); }
html.theme-paper .topnav .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Login card: rounded-square logo above the brand, vintage italic tagline.
   Sized to a portrait-friendly 120px square with rounded corners — same
   crop as the favicon / nav mark, just bigger. */
.login-logo {
  display: block;
  margin: 0 auto 14px;
  width: 120px;
  height: 120px;
  max-width: 60%;
  object-fit: cover;
  border-radius: 18px;
  /* Soft frame so the cream-paper background of the logo sits nicely on
     the dark theme too. Slight inner shadow gives the framed-portrait
     vibe that matches the MartisBot aesthetic. */
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
}
html.theme-paper .login-logo {
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.login-card .tagline { line-height: 1.5; }

/* Footer block on the login card: italic Pulchritudinous quip + credits.
   Subtle so the X sign-in button stays the visual primary. */
.login-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px dashed var(--bd);
}
.login-quip {
  margin: 0 0 6px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--tx2);
  letter-spacing: 0.01em;
}
.login-credits {
  margin: 0;
  font-size: 11px;
  color: var(--tx3);
}
.login-credits a {
  color: var(--accent-2);
  text-decoration: none;
}
.login-credits a:hover { color: var(--accent); text-decoration: underline; }

/* ── 404 page ─────────────────────────────────────────────────────────
   Friendly MartisBot apology. Logo at the top, Playfair headline, blurb,
   primary button back to the homepage. Same visual rhythm as the login
   card so the brand feels consistent. */
.notfound {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 56px 22px 64px;
  max-width: 540px;
  margin: 0 auto;
}
.notfound-logo {
  width: 132px; height: 132px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 22px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
}
html.theme-paper .notfound-logo {
  box-shadow: 0 6px 22px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(0,0,0,0.04);
}
.notfound-headline {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 28px; font-weight: 700;
  color: var(--tx0);
  margin: 0 0 10px;
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.notfound-blurb {
  margin: 0 0 22px;
  font-style: italic;
  max-width: 420px;
}
.notfound-btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 22px;
  font-size: 14px;
}

/* ── Admin events dashboard ───────────────────────────────────────── */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stat {
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 6px;
  padding: 14px 18px;
}
.admin-stat-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tx2); margin-bottom: 4px;
}
.admin-stat-value {
  font-size: 26px; font-weight: 700;
  color: var(--tx0);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.admin-stat-meta { margin-top: 4px; }

.admin-section { margin: 28px 0; }
.admin-section h3 {
  margin: 0 0 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tx2);
}
.admin-two-col {
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 900px) {
  .admin-two-col { grid-template-columns: 1fr 1fr; }
}
.admin-table { font-size: 12px; }
.admin-table th, .admin-table td { padding: 6px 10px; }
.admin-events-stream { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }

.admin-kind {
  display: inline-block;
  padding: 1px 7px; border-radius: 3px;
  background: var(--bg2); color: var(--tx2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kind-login        { background: rgba(38,166,154,0.18); color: var(--green); }
.kind-logout       { background: rgba(239,83,80,0.14);  color: var(--red); }
.kind-page_view    { background: rgba(33,150,243,0.14); color: var(--accent-2); }
.kind-ticker_click { background: rgba(249,168,37,0.16); color: var(--accent); }
.kind-chart_open   { background: rgba(171,71,188,0.16); color: #ce93d8; }
html.theme-paper .kind-login        { background: rgba(31,122,110,0.16); color: var(--green); }
html.theme-paper .kind-logout       { background: rgba(183,61,61,0.10);  color: var(--red); }
html.theme-paper .kind-page_view    { background: rgba(20,99,168,0.12);  color: var(--accent-2); }
html.theme-paper .kind-ticker_click { background: rgba(184,138,26,0.16); color: #8b6510; }
html.theme-paper .kind-chart_open   { background: rgba(122,57,140,0.12); color: #7a398c; }