/* ──────────────────────────────────────────────────────────────────────────
   trader-news dashboard
   Design notes:
     - GitHub-dark inspired palette, financial-terminal density
     - Single accent (amber) for actions, semantic green/red for direction
     - Purple subtle accent on AI surfaces
     - Generous whitespace, monospace numerics, clear hierarchy
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   THEMES
   - Default (:root) = PAPER — warm cream + ink, the new default
   - [data-theme="dark"]  = the original GitHub-dark palette
   - [data-theme="bright"] = clean white modern
   Each theme also exposes --xxx-rgb triplets so we can do rgba() overlays
   that adapt automatically per theme.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── PAPER (default) — old book, sepia ink, parchment ──────────────── */
  --bg-0:        #f4ecd6;       /* aged paper */
  --bg-1:        #fbf6e6;       /* lighter paper (cards) */
  --bg-2:        #ede3c4;       /* slightly darker (inputs / subtle) */
  --bg-3:        #e2d5af;

  --border:      #d8caa0;       /* warm border like printed page edge */
  --border-2:    #b8a878;

  --fg-0:        #2a2419;       /* deep brown-black ink */
  --fg-1:        #443a29;
  --fg-2:        #7a6b50;
  --fg-3:        #a39376;

  --accent:      #8b4513;       /* sepia/sienna ink */
  --accent-hi:   #a55a26;
  --accent-lo:   #6b3410;
  --accent-fg:   #fbf6e6;       /* paper-colored text on accent surfaces */
  --accent-rgb:  139, 69, 19;

  --ai:          #5c3a8b;       /* fountain-pen purple */
  --ai-hi:       #7a5fad;
  --ai-rgb:      92, 58, 139;

  --pos:         #2d5f3f;       /* forest-ink green */
  --pos-bg:      rgba(45, 95, 63, 0.10);
  --pos-rgb:     45, 95, 63;
  --neg:         #8b2c2c;       /* oxblood */
  --neg-bg:      rgba(139, 44, 44, 0.10);
  --neg-rgb:     139, 44, 44;

  --shadow-1:    0 1px 2px rgba(60,40,15,0.08), 0 1px 3px rgba(60,40,15,0.10);
  --shadow-2:    0 4px 16px rgba(60,40,15,0.16);

  /* Common */
  --radius:      8px;
  --radius-lg:   12px;
  --mono:        ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* ── DARK (the original) ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-0:        #0d1117;
  --bg-1:        #161b22;
  --bg-2:        #1c2128;
  --bg-3:        #21262d;

  --border:      #21262d;
  --border-2:    #30363d;

  --fg-0:        #e6edf3;
  --fg-1:        #c9d1d9;
  --fg-2:        #7d8590;
  --fg-3:        #484f58;

  --accent:      #e6b450;
  --accent-hi:   #f1c073;
  --accent-lo:   #a37e2c;
  --accent-fg:   #1d1300;
  --accent-rgb:  230, 180, 80;

  --ai:          #a371f7;
  --ai-hi:       #bc8cff;
  --ai-rgb:      163, 113, 247;

  --pos:         #3fb950;
  --pos-bg:      rgba(63, 185, 80, 0.12);
  --pos-rgb:     63, 185, 80;
  --neg:         #f85149;
  --neg-bg:      rgba(248, 81, 73, 0.12);
  --neg-rgb:     248, 81, 73;

  --shadow-1:    0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-2:    0 4px 14px rgba(0,0,0,0.4);
}

/* ── BRIGHT — clean white, vibrant accent ──────────────────────────────── */
[data-theme="bright"] {
  --bg-0:        #ffffff;
  --bg-1:        #f8f9fa;
  --bg-2:        #eef0f2;
  --bg-3:        #e3e6ea;

  --border:      #e1e4e8;
  --border-2:    #c8ced4;

  --fg-0:        #1f2328;
  --fg-1:        #404448;
  --fg-2:        #656d76;
  --fg-3:        #8c959f;

  --accent:      #d97706;       /* warm amber, more readable on white */
  --accent-hi:   #f08c1e;
  --accent-lo:   #a35500;
  --accent-fg:   #ffffff;
  --accent-rgb:  217, 119, 6;

  --ai:          #7c3aed;       /* royal purple */
  --ai-hi:       #9255f5;
  --ai-rgb:      124, 58, 237;

  --pos:         #16a34a;
  --pos-bg:      rgba(22, 163, 74, 0.10);
  --pos-rgb:     22, 163, 74;
  --neg:         #dc2626;
  --neg-bg:      rgba(220, 38, 38, 0.08);
  --neg-rgb:     220, 38, 38;

  --shadow-1:    0 1px 2px rgba(20,30,40,0.06), 0 1px 3px rgba(20,30,40,0.08);
  --shadow-2:    0 4px 14px rgba(20,30,40,0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

/* Paper-mode typography flourish: serif headings + slight subtle paper texture. */
:root .brand h1,
:root .section-head h2,
:root .section-head h3,
:root .ai-card-head h2,
:root .ai-card-head h3,
:root .ticker-hero-sym,
:root .ticker-hero-name,
:root .highlight-head h3,
:root .gate h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  letter-spacing: 0;
}
/* Subtle parchment grain — a tiny SVG noise as a data-URL background */
:root body {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(139, 100, 50, 0.012) 0px,
      rgba(139, 100, 50, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(139, 100, 50, 0.012) 0px,
      rgba(139, 100, 50, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
}

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

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Now rendered as a <button> — strip default button chrome */
  background: none;
  border: none;
  padding: 4px 6px;
  margin: -4px -6px;          /* keep visual position identical */
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 8px;
  transition: background 0.12s;
}
.brand:hover {
  background: var(--bg-2);
}
.brand:active { background: var(--bg-3); }
.brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lo) 100%);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
  position: relative;
}
.brand-mark::after {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border-radius: 3px;
  background: var(--bg-0);
}

.brand h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-0);
}
.brand .tagline {
  margin: 1px 0 0;
  color: var(--fg-2);
  font-size: 0.78rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.05s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: wait; opacity: 0.55; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); }

.btn-ghost {
  color: var(--fg-1);
  border-color: var(--border-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--fg-0);
}

.btn-icon {
  padding: 8px;
  color: var(--fg-2);
  border-color: var(--border-2);
}
.btn-icon:hover:not(:disabled) { color: var(--fg-0); background: var(--bg-2); }

/* ── Theme switcher (segmented control) ──────────────────────────────────── */

.theme-switch {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 2px;
  gap: 1px;
}
.theme-btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  color: var(--fg-3);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  min-width: 32px;
  min-height: 32px;
}
.theme-btn:hover { color: var(--fg-1); background: var(--bg-3); }
.theme-btn.active {
  color: var(--accent-fg);
  background: var(--accent);
}
.theme-btn.active:hover { background: var(--accent-hi); }

.btn small { color: inherit; opacity: 0.7; font-weight: 500; }

/* ── Menu dropdown ───────────────────────────────────────────────────────── */

.menu { position: relative; }

.menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  min-width: 200px;
  padding: 6px;
  z-index: 50;
}

.menu-item {
  appearance: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--fg-1);
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  display: block;
}
.menu-item:hover { background: var(--bg-3); color: var(--fg-0); }
.menu-item.danger { color: var(--neg); }
.menu-item.danger:hover { background: var(--neg-bg); color: var(--neg); }

/* ── Status bar ──────────────────────────────────────────────────────────── */

.status-bar {
  padding: 9px 28px;
  background: var(--bg-0);
  color: var(--fg-2);
  font-size: 0.78rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}

.status-text.is-loading::after {
  content: "…";
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: ""; }
  40%     { content: "."; }
  60%     { content: ".."; }
  80%,100% { content: "..."; }
}

/* ── Dashboard layout ────────────────────────────────────────────────────── */

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 28px 60px;
}

/* ── Section heading ─────────────────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 4px 14px;
}
.section-head h2, .section-head h3 {
  margin: 0;
  color: var(--fg-0);
  font-weight: 600;
}
.section-head h2 { font-size: 1.05rem; letter-spacing: 0.01em; }
.section-head h3 { font-size: 0.95rem; }
.section-sub {
  color: var(--fg-2);
  font-size: 0.78rem;
}

/* ── Hero row: Best | Market Read | Worst ─────────────────────────────────── */

.hero-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) minmax(220px, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  align-items: stretch;
}

@media (max-width: 1000px) {
  .hero-row {
    grid-template-columns: 1fr;
  }
  .hero-side { order: 2; }
  .hero-main { order: 1; }
}

.hero-side, .hero-main { display: flex; }
.hero-side > *, .hero-main > * { flex: 1; min-width: 0; }
.hero-main > .ai-card { margin-bottom: 0; }   /* override default 32px */

/* ── Best / Worst cards ──────────────────────────────────────────────────── */

.highlight-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 2px 8px rgba(0,0,0,0.22);
}
.highlight-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.highlight-card.best::before  { background: linear-gradient(180deg, var(--pos) 0%, transparent 100%); }
.highlight-card.worst::before { background: linear-gradient(180deg, var(--neg) 0%, transparent 100%); }

.highlight-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.highlight-head h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.highlight-card.best  .highlight-head h3 { color: var(--pos); }
.highlight-card.worst .highlight-head h3 { color: var(--neg); }
.highlight-head h3::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.highlight-card.best  .highlight-head h3::before { background: var(--pos); box-shadow: 0 0 6px var(--pos); }
.highlight-card.worst .highlight-head h3::before { background: var(--neg); box-shadow: 0 0 6px var(--neg); }

.highlight-sub {
  display: block;
  margin-top: 3px;
  color: var(--fg-3);
  font-size: 0.68rem;
  font-family: var(--mono);
}

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.highlight-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}
.highlight-row + .highlight-row { border-top: 1px solid var(--border); }
.highlight-row:hover { background: var(--bg-2); }

.hl-top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
}
.hl-top .hl-bands  { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.hl-top .hl-pct    { justify-self: end; }
.band-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-3);
  font-size: 0.7rem;
}

.hl-sym {
  font-weight: 700;
  color: var(--fg-0);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.hl-pct {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.88rem;
}

/* Secondary line: score stats, monospace + small */
.hl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fg-3);
  padding-left: 1px;
}
.hl-stats span      { white-space: nowrap; }
.hl-stats b         { color: var(--fg-1); font-weight: 600; }
.hl-stats b.pct-up   { color: var(--pos); }
.hl-stats b.pct-down { color: var(--neg); }
.hl-stats b.pct-flat { color: var(--fg-2); }

.highlight-empty {
  padding: 14px 6px;
  color: var(--fg-3);
  font-style: italic;
  font-size: 0.82rem;
  text-align: center;
  list-style: none;
}

/* ── AI Market card (top of page) ────────────────────────────────────────── */

.ai-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--ai-rgb),0.08) 0%, rgba(var(--ai-rgb),0) 90%),
    var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 32px;
  overflow: hidden;
}
.ai-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ai) 0%, transparent 100%);
}

.ai-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ai-card-head h2, .ai-card-head h3 {
  margin: 0;
  color: var(--fg-0);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-card-head h2::before, .ai-card-head h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai);
  box-shadow: 0 0 8px var(--ai);
}

.ai-text {
  margin: 0;
  color: var(--fg-0);
  font-size: 1.02rem;
  line-height: 1.8;
  letter-spacing: 0.005em;
  font-weight: 400;
  max-width: 780px;        /* readable line length, like an article */
}
.ai-text.muted { color: var(--fg-2); }

/* Markdown-rendered structure */
.ai-text p {
  margin: 0 0 14px;
}
.ai-text p:last-child { margin-bottom: 0; }

.ai-text em {
  font-style: italic;
  color: var(--ai-hi);
}
.ai-text strong {
  font-weight: 600;
  color: var(--fg-0);
}
.ai-text ul {
  margin: 6px 0 14px;
  padding-left: 22px;
}
.ai-text li { margin-bottom: 4px; }
.ai-text code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

.ai-meta {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--fg-3);
  font-family: var(--mono);
}

/* (Back-bar styles moved into the topbar-shell block below since it now lives
 *  inside #back-bar-slot rather than being rendered inside the dashboard.) */

/* ── Movers carousel (the centerpiece) ───────────────────────────────────── */

.carousel-section { margin-top: 8px; position: relative; }

/*
 * "Free-floating" carousel:
 *   - Breaks out of the dashboard's 1200px max-width to span full viewport
 *   - Real edge fade via mask-image (cards literally fade to transparent,
 *     not an overlay gradient covering them)
 *   - Scrollbar hidden — drag is the primary input
 *   - First/last cards have generous padding so they breathe instead of
 *     being flush against the screen edge
 */
.carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%);
}

.carousel-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  /* large side padding so first/last card aren't flush with viewport edge */
  padding: 8px max(40px, calc((100vw - 1200px) / 2 + 28px)) 18px;
  scroll-snap-type: x proximity;
  scroll-padding: 8px;
  cursor: grab;
  user-select: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.carousel-grid::-webkit-scrollbar { display: none; }   /* Chromium/Safari */

.carousel-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.carousel-grid.is-dragging .day-card,
.carousel-grid.is-dragging .day-card * {
  pointer-events: none;
}

.carousel-grid > .day-card { scroll-snap-align: start; }

.day-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* floating tile: subtle elevation that lifts on hover */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 2px 8px rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.4);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.day-card:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 6px 18px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.5);
}

.day-card-head {
  padding: 14px 16px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06) 0%, transparent 100%);
  transition: background 0.15s;
}
.day-card-head:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb),0.12) 0%, transparent 100%); }

.day-card-date {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: 0.04em;
}

.latest-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  vertical-align: middle;
  font-family: -apple-system, sans-serif;
}

.day-card.is-latest {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}
.day-card-sub {
  margin-top: 2px;
  color: var(--fg-2);
  font-size: 0.7rem;
}

.day-card-body {
  flex: 1;
  padding: 6px;
}

.mover-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 6px;
}
.mover-row:hover { background: var(--bg-2); }

.mover-row + .mover-row { border-top: 1px solid var(--border); }

.mover-sym {
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: 0.03em;
  font-size: 0.95rem;
}

.mover-pct {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
}

.mover-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--fg-3);
  font-family: var(--mono);
  margin-top: 1px;
}

.mover-empty {
  text-align: center;
  padding: 18px 8px;
  color: var(--fg-3);
  font-size: 0.78rem;
  font-style: italic;
}

/* ── Simulation footer on day cards ─────────────────────────────────────── */

.sim-footer {
  margin-top: auto;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  font-size: 0.78rem;
}
.sim-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sim-row + .sim-row { margin-top: 3px; }
.sim-row-detail {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fg-3);
}
.sim-label {
  color: var(--fg-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.sim-pct {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.92rem;
}
.sim-pnl { color: inherit; }

/* Carry tint into the footer when colored pct class is applied */
.sim-footer.pct-up   .sim-pct,
.sim-footer.pct-up   .sim-pnl { color: var(--pos); }
.sim-footer.pct-down .sim-pct,
.sim-footer.pct-down .sim-pnl { color: var(--neg); }

/* ── Simulation summary block (day-view) ────────────────────────────────── */

.day-sim { margin-top: 8px; }

.sim-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.sim-stat { display: flex; flex-direction: column; gap: 4px; }
.sim-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  font-weight: 600;
}
.sim-stat-val {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg-0);
}

/* ── pct color helpers ──────────────────────────────────────────────────── */

.pct-up    { color: var(--pos); }
.pct-down  { color: var(--neg); }
.pct-flat  { color: var(--fg-2); }

/* ── Band pills ──────────────────────────────────────────────────────────── */

.band-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.band-above   { background: rgba(var(--neg-rgb), 0.14); color: var(--neg); }
.band-in_band { background: rgba(var(--pos-rgb), 0.14); color: var(--pos); }
.band-below   { background: rgba(125, 133, 144, 0.14); color: var(--fg-2); }

/* ── Day view ────────────────────────────────────────────────────────────── */

.day-view { margin-top: 8px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 26px;
}

.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 3px solid;
}
.stat-card.above   { border-left-color: var(--neg); }
.stat-card.in_band { border-left-color: var(--pos); }
.stat-card.below   { border-left-color: var(--fg-2); }

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  margin-bottom: 10px;
  font-weight: 600;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat-grid > div { display: flex; flex-direction: column; }

.stat-num {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-0);
}
.stat-cap {
  font-size: 0.66rem;
  color: var(--fg-3);
  margin-top: 1px;
  text-transform: lowercase;
}

.day-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.day-table thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-2);
  color: var(--fg-2);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.day-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.day-table tbody tr:hover { background: var(--bg-2); }
.day-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.td-sym .link-sym { color: var(--accent-hi); font-weight: 600; letter-spacing: 0.04em; }
.td-score, .td-pct {
  font-family: var(--mono);
  text-align: right;
}

/* ── Ticker view ─────────────────────────────────────────────────────────── */

.ticker-view { margin-top: 8px; }

.ticker-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.ticker-hero-sym {
  font-size: 2rem;
  margin: 0;
  color: var(--fg-0);
  letter-spacing: 0.05em;
  font-family: var(--mono);
}
.ticker-hero-name {
  margin: 6px 0 0;
  color: var(--fg-1);
  font-size: 1rem;
}
.ticker-hero-meta {
  margin: 4px 0 0;
  color: var(--fg-2);
  font-size: 0.8rem;
}

.ticker-hero-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.ticker-hero-stats > div { display: flex; flex-direction: column; align-items: flex-end; }

.ticker-desc {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 18px 16px;
  margin-bottom: 18px;
}
.ticker-desc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg-1);
  padding: 4px 0;
  list-style: none;
}
.ticker-desc summary::before {
  content: '▾ ';
  color: var(--fg-2);
  font-size: 0.8em;
}
.ticker-desc[open] summary::before { content: '▴ '; }
.ticker-desc p {
  margin: 10px 0 0;
  color: var(--fg-2);
  line-height: 1.6;
  font-size: 0.88rem;
}

.ticker-history, .ticker-news { margin-top: 20px; }

.ticker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ticker-table th, .ticker-table td {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.ticker-table thead th {
  background: var(--bg-2);
  color: var(--fg-2);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: none;
}

#news-container {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 18px;
}
#news-container .article {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
#news-container .article:last-child { border-bottom: none; }
.article a { color: var(--accent-hi); }
.article .meta {
  display: block;
  color: var(--fg-3);
  font-size: 0.72rem;
  margin-top: 3px;
}

.source-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: middle;
}
.source-tag.yahoo  { background: rgba(var(--accent-rgb),0.18); color: var(--accent-hi); }
.source-tag.google { background: rgba(120,180,255,0.18); color: #88bbff; }

.ticker-technicals {
  margin-top: 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.ticker-technicals summary { cursor: pointer; color: var(--fg-2); padding: 4px 0; list-style: none; }
.ticker-technicals summary::before { content: '▾ '; color: var(--fg-3); font-size: 0.8em; }
.ticker-technicals[open] summary::before { content: '▴ '; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--fg-2);
}
.empty-state h2 {
  color: var(--fg-0);
  font-weight: 500;
  margin: 0 0 8px;
}
.empty-state.inline {
  padding: 24px 12px;
  background: var(--bg-1);
  border-radius: var(--radius);
  border: 1px dashed var(--border-2);
}

/* ── Confirm modal ───────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 380px;
  box-shadow: var(--shadow-2);
}
.modal h3 { margin: 0 0 8px; color: var(--fg-0); }
.modal p  { margin: 0 0 16px; color: var(--fg-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-danger {
  background: var(--neg);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: var(--neg); filter: brightness(1.1); }

/* ── Chat section ───────────────────────────────────────────────────────── */

.chat-section { margin-top: 36px; }

.chat-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 2px 12px rgba(0,0,0,0.3);
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.chat-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--fg-3);
}

.btn-small {
  padding: 5px 11px;
  font-size: 0.78rem;
}

.chat-messages {
  padding: 16px 18px;
  max-height: 560px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(ellipse at top, rgba(var(--ai-rgb),0.05) 0%, transparent 50%),
    var(--bg-1);
}

.chat-empty {
  color: var(--fg-2);
  font-style: italic;
  text-align: center;
  padding: 32px 12px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
.chat-msg.user { align-items: flex-end; }
.chat-msg.ai   { align-items: flex-start; }

.chat-msg-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-3);
}
.chat-msg.user .chat-msg-label { color: var(--accent); }
.chat-msg.ai   .chat-msg-label { color: var(--ai-hi);  }

.chat-msg-text {
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.65;
  font-size: 0.93rem;
  max-width: 80%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-msg.user .chat-msg-text {
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--fg-0);
  border-bottom-right-radius: 3px;
}

.chat-msg.ai .chat-msg-text {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-0);
  border-bottom-left-radius: 3px;
  white-space: normal;       /* let renderMD's <p>/<br> work */
}
.chat-msg.ai .chat-msg-text.ai-text {
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 80%;            /* override the article max-width inside chat */
}

.chat-msg.ai.pending .chat-msg-text { color: var(--fg-2); }
.chat-msg.ai.error   .chat-msg-text {
  background: rgba(var(--neg-rgb),0.08);
  border-color: rgba(var(--neg-rgb),0.3);
  color: var(--neg);
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
.chat-form textarea {
  appearance: none;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--fg-0);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 9px 12px;
  resize: vertical;
  min-height: 38px;
  max-height: 140px;
}
.chat-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.15);
}
.chat-form textarea::placeholder { color: var(--fg-3); }
.chat-form textarea:disabled { opacity: 0.6; cursor: wait; }

/* Subtle scrollbar inside chat messages */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 3px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  text-align: center;
  padding: 18px;
  color: var(--fg-3);
  font-size: 0.74rem;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  font-family: var(--mono);
}

/* ──────────────────────────────────────────────────────────────────────────
   TOTP SETUP MODAL
   ────────────────────────────────────────────────────────────────────────── */

.totp-modal {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-2);
  max-height: 90vh;
  overflow-y: auto;
}
.totp-modal h3 {
  margin: 0 0 6px;
  color: var(--fg-0);
  font-size: 1.1rem;
}
.totp-sub {
  margin: 0 0 18px;
  font-size: 0.82rem;
  color: var(--fg-2);
  line-height: 1.55;
}

.totp-deeplink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.96rem;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.18) inset;
  transition: background 0.12s;
}
.totp-deeplink:hover { background: var(--accent-hi); }
.totp-install-hint {
  margin: 0 0 18px;
  font-size: 0.76rem;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.6;
}
.totp-install-hint a { color: var(--fg-2); text-decoration: underline; }

.totp-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0 14px;
}
.totp-qr {
  width: 220px;
  height: 220px;
  border: 8px solid #fff;
  border-radius: 10px;
  background: #fff;
}
.totp-or {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--fg-3);
  text-align: center;
}

.totp-divider {
  text-align: center;
  font-size: 0.7rem;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  margin: 12px 0;
}
.totp-divider::before, .totp-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border);
}
.totp-divider::before { left: 0; }
.totp-divider::after  { right: 0; }

.totp-manual {
  margin: 12px 0 18px;
  font-size: 0.85rem;
}
.totp-manual summary {
  cursor: pointer;
  color: var(--fg-2);
  font-size: 0.78rem;
}
.totp-manual summary:hover { color: var(--fg-0); }
.totp-secret-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.totp-secret {
  flex: 1;
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--fg-0);
  word-break: break-all;
  border: 1px solid var(--border);
}

.totp-confirm {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.totp-confirm label {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-1);
  font-weight: 600;
  margin-bottom: 8px;
}
.totp-confirm-row {
  display: flex;
  gap: 8px;
}
#totp-code {
  flex: 1;
  padding: 11px 13px;
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  color: var(--fg-0);
  font-family: var(--mono);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  text-align: center;
}
#totp-code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18);
}
.totp-confirm-msg {
  margin: 10px 0 0;
  font-size: 0.82rem;
  min-height: 1.2em;
  text-align: center;
}
.totp-confirm-msg.err { color: var(--neg); }
.totp-confirm-msg.ok  { color: var(--pos); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────────
   PENDING-SESSIONS NOTIFICATION (red dot on ⋮ + badge in menu)
   ────────────────────────────────────────────────────────────────────────── */

.menu { position: relative; }
.menu-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  background: var(--neg);
  border: 2px solid var(--bg-0);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--neg-rgb), 0.4);
  animation: menu-dot-pulse 2s ease-in-out infinite;
}
@keyframes menu-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--neg-rgb), 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--neg-rgb), 0);   }
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--neg);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9px;
  font-family: var(--mono);
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACTIVE SESSIONS VIEW
   ────────────────────────────────────────────────────────────────────────── */

.sessions-section { margin-bottom: 26px; }
.sessions-section-head {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--fg-1);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sessions-section-head.pending-head { color: var(--neg); }
.sessions-section-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: var(--bg-2);
  color: var(--fg-2);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.sessions-section-head.pending-head .sessions-section-count {
  background: var(--neg);
  color: #fff;
}
.sessions-section-sub {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--fg-2);
  line-height: 1.5;
}

.session-card.is-pending {
  border-color: rgba(var(--neg-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--neg-rgb), 0.05), var(--bg-1));
}
.session-card.is-pending .session-icon {
  background: rgba(var(--neg-rgb), 0.12);
  color: var(--neg);
}
.session-badge.pending {
  background: var(--neg);
  color: #fff;
  animation: pending-badge-pulse 2s ease-in-out infinite;
}
@keyframes pending-badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
.session-card.is-pending .session-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sessions-view { max-width: 760px; margin: 0 auto; }
.sessions-bulk {
  text-align: right;
  margin-bottom: 14px;
}
.sessions-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.session-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.session-card.is-current {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), var(--bg-1));
}
.session-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: 8px;
  color: var(--fg-1);
}
.session-card.is-current .session-icon {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.session-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-line-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-0);
}
.session-device {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 1px 7px;
  border-radius: 3px;
  font-weight: 700;
}
.session-line-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--fg-2);
  flex-wrap: wrap;
}
.session-flag { font-size: 1.05rem; line-height: 1; }
.session-loc { color: var(--fg-1); }
.session-ip {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.session-line-3 {
  font-size: 0.72rem;
  color: var(--fg-3);
  margin-top: 2px;
}
.session-actions {
  flex-shrink: 0;
}
.btn.btn-small {
  padding: 6px 10px;
  font-size: 0.78rem;
  min-height: 30px;
}

@media (max-width: 600px) {
  .session-card {
    flex-wrap: wrap;
  }
  .session-actions { width: 100%; text-align: right; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TECHNICALS (ticker drill-down)
   ────────────────────────────────────────────────────────────────────────── */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.tech-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tech-card.is-pos { border-color: rgba(var(--pos-rgb), 0.35); }
.tech-card.is-neg { border-color: rgba(var(--neg-rgb), 0.35); }

.tech-cap {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  font-weight: 600;
}
.tech-val {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg-0);
  margin-top: 2px;
}
.tech-card.is-pos .tech-val { color: var(--pos); }
.tech-card.is-neg .tech-val { color: var(--neg); }
.tech-sub {
  font-size: 0.75rem;
  color: var(--fg-2);
  font-family: var(--mono);
}

/* RSI bar with three zones */
.tech-card-rsi.rsi-overbought { border-color: rgba(var(--neg-rgb), 0.45); }
.tech-card-rsi.rsi-oversold   { border-color: rgba(var(--pos-rgb), 0.45); }
.rsi-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  margin: 8px 0 6px;
  overflow: hidden;
  display: flex;
  background: var(--bg-2);
}
.rsi-zone {
  height: 100%;
}
.rsi-zone-oversold   { width: 30%; background: rgba(var(--pos-rgb), 0.20); }
.rsi-zone-neutral    { width: 40%; background: rgba(125, 125, 125, 0.20); }
.rsi-zone-overbought { width: 30%; background: rgba(var(--neg-rgb), 0.20); }
.rsi-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  background: var(--fg-0);
  border-radius: 1px;
  transform: translateX(-50%);
}
.rsi-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--fg-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Component strength bars */
.tech-strengths {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tech-section-head {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tech-section-sub {
  margin: 0 0 12px;
  font-size: 0.74rem;
  color: var(--fg-2);
  line-height: 1.5;
}
.tech-strength-row {
  display: grid;
  grid-template-columns: 140px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.tech-strength-label {
  font-size: 0.78rem;
  color: var(--fg-1);
}
.tech-strength-track {
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}
.tech-strength-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent) 80%, var(--accent-hi));
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tech-strength-pct {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--fg-2);
  text-align: right;
}
.tech-meta {
  text-align: center;
  margin: 14px 0 0;
  font-size: 0.72rem;
  color: var(--fg-3);
  font-family: var(--mono);
}

/* Mobile: stack the strength row labels above the bar to save horizontal space */
@media (max-width: 600px) {
  .tech-strength-row {
    grid-template-columns: 1fr 50px;
    grid-template-areas: "label pct" "bar bar";
    gap: 4px 10px;
  }
  .tech-strength-label { grid-area: label; }
  .tech-strength-pct   { grid-area: pct; }
  .tech-strength-track { grid-area: bar; }
}

/* ──────────────────────────────────────────────────────────────────────────
   EXPAND-CARD MODAL (desktop only)
   ────────────────────────────────────────────────────────────────────────── */

/* Make every card a positioning context so the absolute expand button anchors
   to that card. (These rules just add `position: relative` if not already.) */
.day-card, .ai-card, .highlight-card, .chat-card { position: relative; }

/* The small ⤢ button — invisible until the card is hovered (desktop only) */
.expand-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s, background 0.12s, color 0.12s;
  z-index: 5;
  padding: 0;
}
.day-card:hover .expand-btn,
.ai-card:hover .expand-btn,
.highlight-card:hover .expand-btn,
.chat-card:hover .expand-btn,
.expand-btn:focus {
  opacity: 1;
  transform: translateY(0);
}
.expand-btn:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* Hide expand button on mobile / narrow viewports — desktop-only feature */
@media (max-width: 900px) {
  .expand-btn { display: none; }
}

/* Body lock while a modal is open so background doesn't scroll */
body.modal-open { overflow: hidden; }

/* Full-screen overlay with backdrop blur */
.expand-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: expand-fade-in 0.16s ease;
}
@keyframes expand-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.expand-modal {
  /* Text-scale variable: every text-using rule inside the modal multiplies its
     base size by this. Set on inline style at open-time; user can change live. */
  --exp-text-scale: 1.15;

  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: expand-pop 0.18s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes expand-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.expand-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.expand-modal-title-wrap { flex: 1; min-width: 0; text-align: center; }
.expand-modal-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--fg-0);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.expand-modal-sub {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--fg-2);
}
.expand-modal-nav, .expand-modal-close {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.expand-modal-nav:hover,
.expand-modal-close:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* Slider row right under the title bar */
.expand-modal-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-0);
}
.exp-scale-label {
  font-family: var(--mono);
  color: var(--fg-2);
  font-weight: 600;
  user-select: none;
  line-height: 1;
}
.exp-scale-label.small { font-size: 11px; }
.exp-scale-label.large { font-size: 17px; }

#exp-scale-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
  cursor: pointer;
}
#exp-scale-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}
#exp-scale-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: pointer;
}

.expand-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  /* Day-switch animation properties */
  will-change: transform, opacity;
}

/* Directional slide + fade for day-to-day switching */
.exp-anim-out-next { animation: exp-out-left  0.14s ease-in forwards; }
.exp-anim-out-prev { animation: exp-out-right 0.14s ease-in forwards; }
.exp-anim-in-next  { animation: exp-in-right  0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.exp-anim-in-prev  { animation: exp-in-left   0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes exp-out-left  { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(-32px); } }
@keyframes exp-out-right { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(32px);  } }
@keyframes exp-in-right  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0);     } }
@keyframes exp-in-left   { from { opacity: 0; transform: translateX(-32px); }to { opacity: 1; transform: translateX(0);     } }

/* ── Per-kind body styling ─────────────────────────────────────────────── */

/* Prose (AI text) — bigger, max-width for readability */
.exp-prose {
  max-width: 780px;
  margin: 0 auto;
  font-size: calc(1.05rem * var(--exp-text-scale));
  line-height: 1.75;
  color: var(--fg-1);
}
.exp-prose p { margin: 0 0 14px; }
.exp-prose strong { color: var(--fg-0); }
.exp-prose ul, .exp-prose ol { padding-left: 22px; margin: 0 0 14px; }
.exp-prose li { margin: 4px 0; }

/* Tables inside the modal also scale */
.expand-modal-body .day-table,
.expand-modal-body .ticker-table {
  font-size: calc(0.9rem * var(--exp-text-scale));
}
.expand-modal-body .day-table th,
.expand-modal-body .day-table td {
  padding: calc(8px * var(--exp-text-scale)) calc(10px * var(--exp-text-scale));
}

/* Day expanded */
.exp-day h3 {
  margin: 0 0 12px;
  font-size: calc(0.92rem * var(--exp-text-scale));
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.exp-mover-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}
.exp-mover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.exp-mover-row:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}
.exp-mover-sym {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--fg-0);
  font-size: calc(0.98rem * var(--exp-text-scale));
  min-width: 60px;
}
.exp-mover-pct {
  font-family: var(--mono);
  font-weight: 600;
  font-size: calc(0.95rem * var(--exp-text-scale));
  min-width: 64px;
  text-align: right;
}
.exp-mover-meta {
  flex: 1;
  text-align: right;
  font-size: calc(0.82rem * var(--exp-text-scale));
  color: var(--fg-2);
}
.exp-mover-meta b { color: var(--fg-1); font-family: var(--mono); }

.exp-sim {
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.exp-sim h3 {
  margin: 0 0 14px;
  font-size: calc(0.88rem * var(--exp-text-scale));
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.exp-sim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.exp-sim-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.exp-sim-num {
  font-family: var(--mono);
  font-size: calc(1.15rem * var(--exp-text-scale));
  font-weight: 700;
  color: var(--fg-0);
}
.exp-sim-cap {
  font-size: calc(0.74rem * var(--exp-text-scale));
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.exp-hint {
  text-align: center;
  font-size: calc(0.8rem * var(--exp-text-scale));
  color: var(--fg-3);
  font-style: italic;
  margin: 14px 0 0;
}

/* Chat expanded */
.exp-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}
.exp-chat-status {
  text-align: center;
  font-size: 0.74rem;
  color: var(--fg-3);
  margin-bottom: 10px;
  font-family: var(--mono);
}
.exp-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exp-chat-msg { display: flex; flex-direction: column; gap: 4px; }
.exp-chat-msg.user { align-items: flex-end; }
.exp-chat-msg.ai   { align-items: flex-start; }
.exp-chat-msg-label {
  font-size: calc(0.7rem * var(--exp-text-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-3);
}
.exp-chat-msg.user .exp-chat-msg-label { color: var(--accent); }
.exp-chat-msg.ai   .exp-chat-msg-label { color: var(--ai-hi); }
.exp-chat-msg-text {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 78%;
  font-size: calc(1rem * var(--exp-text-scale));
  line-height: 1.6;
  color: var(--fg-0);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.exp-chat-msg.user .exp-chat-msg-text {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.exp-chat-msg.ai.pending .exp-chat-msg-text { color: var(--fg-2); }
.exp-chat-msg.ai.error .exp-chat-msg-text {
  background: rgba(var(--neg-rgb), 0.08);
  border-color: rgba(var(--neg-rgb), 0.3);
  color: var(--neg);
}
.exp-chat-form {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.exp-chat-form textarea {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--fg-0);
  font: inherit;
  font-size: calc(0.98rem * var(--exp-text-scale));
  resize: vertical;
  min-height: 64px;
}
.exp-chat-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

/* Modal scrollbar polish */
.expand-modal-body::-webkit-scrollbar,
.exp-chat-messages::-webkit-scrollbar { width: 8px; }
.expand-modal-body::-webkit-scrollbar-track,
.exp-chat-messages::-webkit-scrollbar-track { background: transparent; }
.expand-modal-body::-webkit-scrollbar-thumb,
.exp-chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   STICKY TOP BAR + STICKY BACK BUTTON + SEARCH + SKELETONS
   + PULL-TO-REFRESH + TOOLTIPS + CHAT STARTERS + CHEAT SHEET + TABLE POLISH
   ────────────────────────────────────────────────────────────────────────── */

/* Sticky shell wraps topbar + status so they stay pinned together */
.topbar-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-0);
  box-shadow: 0 1px 0 var(--border);
  transition: box-shadow 0.2s;
}
.topbar-shell .topbar,
.topbar-shell .status-bar,
.topbar-shell .brand-mark,
.topbar-shell .brand-text,
.topbar-shell .search-wrap,
.topbar-shell .theme-switch,
.topbar-shell #btn-refresh-all,
.topbar-shell .search-hint {
  transition:
    opacity    0.32s cubic-bezier(0.4, 0.0, 0.2, 1),
    padding    0.32s cubic-bezier(0.4, 0.0, 0.2, 1),
    margin     0.32s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform  0.32s cubic-bezier(0.4, 0.0, 0.2, 1),
    max-width  0.32s cubic-bezier(0.4, 0.0, 0.2, 1),
    max-height 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Collapsed state: hides only the search bar and the status strip (latest date,
   history, last-run). Brand, theme switcher, Refresh, and the ⋮ menu all stay
   visible since the user wants them accessible without scrolling back up.
   Uses max-height (not display:none) so the layout shrinks SMOOTHLY rather
   than snapping — abrupt shrinks were causing scroll-position clamps on short
   sub-views, which produced fake direction reversals and flicker. */
.topbar-shell .status-bar {
  max-height: 60px;
  overflow: hidden;
  /* Already inherits the topbar-shell .topbar/.status-bar transition list */
}
.topbar-shell.collapsed .status-bar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  pointer-events: none;
}
.topbar-shell.collapsed .search-wrap {
  opacity: 0;
  max-width: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Back-bar now lives inside #back-bar-slot inside the sticky topbar-shell.
   No own sticky / no negative margins / no animated top — it just flows as
   the last row of the shell, sharing the shell's sticky behavior so it can't
   visually conflict with the topbar above it. */
#back-bar-slot:empty { display: none; }
.back-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 28px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
}
.back-bar .btn { padding: 6px 12px; font-size: 0.85rem; min-height: 32px; }
.back-bar .back-context {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

/* ── Quick search bar ─────────────────────────────────────────────────────── */

.search-wrap {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 180px;
  margin: 0 14px;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 11px;
  color: var(--fg-3);
  pointer-events: none;
}
#search-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--fg-0);
  border-radius: var(--radius);
  padding: 9px 34px 9px 34px;
  font: inherit;
  font-size: 0.88rem;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#search-input::placeholder { color: var(--fg-3); }
#search-input:focus {
  outline: none;
  background: var(--bg-1);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}
.search-hint {
  position: absolute;
  right: 9px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fg-3);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  pointer-events: none;
  transition: opacity 0.12s;
}
#search-input:focus ~ .search-hint { opacity: 0; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  max-height: 360px;
  overflow-y: auto;
  z-index: 100;
  padding: 4px;
}
.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--fg-1);
}
.search-row:hover,
.search-row.active {
  background: var(--bg-2);
  color: var(--fg-0);
}
.search-row .search-sym {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.search-row .search-sym mark {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--fg-0);
  padding: 0 2px;
  border-radius: 2px;
}
.search-row .search-score {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-3);
}
.search-empty, .search-loading {
  padding: 14px;
  text-align: center;
  color: var(--fg-3);
  font-size: 0.82rem;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────────── */

@keyframes skeleton-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    var(--bg-3) 50%,
    var(--bg-2) 100%
  );
  background-size: 1600px 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  border-radius: 4px;
  color: transparent;
  user-select: none;
}
.skeleton-hero {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.skeleton-hero > div { height: 220px; border-radius: var(--radius-lg); }
@media (max-width: 1000px) {
  .skeleton-hero { grid-template-columns: 1fr; }
  .skeleton-hero > div { height: 140px; }
}
.skeleton-carousel-head { height: 22px; width: 240px; margin: 0 0 12px; }
.skeleton-carousel-row {
  display: flex;
  gap: 14px;
  overflow: hidden;
  padding: 4px 28px 18px;
}
.skeleton-day-card {
  flex: 0 0 220px;
  height: 280px;
  border-radius: 10px;
}
.skeleton-chat { height: 240px; border-radius: var(--radius-lg); margin-top: 24px; }
.skeleton-row { height: 14px; margin: 8px 0; border-radius: 4px; }
.skeleton-row.w-80 { width: 80%; }
.skeleton-row.w-60 { width: 60%; }

/* ── Pull-to-refresh indicator ────────────────────────────────────────────── */

.pull-indicator {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-70px);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-2);
  color: var(--fg-1);
  font-size: 0.82rem;
  opacity: 0;
  transition: transform 0.15s ease-out, opacity 0.15s;
  pointer-events: none;
}
.pull-indicator.visible { opacity: 1; }
.pull-indicator.ready  { color: var(--accent); border-color: var(--accent); }
.pull-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--fg-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  transition: transform 0.05s linear;
}
.pull-indicator.refreshing { transform: translateX(-50%) translateY(0) !important; opacity: 1; }
.pull-indicator.refreshing .pull-spinner { animation: pull-spin 0.7s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }

/* ── Info tooltip (?) — works on hover AND tap-to-toggle ──────────────────── */

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--mono);
  cursor: help;
  user-select: none;
  vertical-align: middle;
  border: 1px solid var(--border);
  padding: 0;
  line-height: 1;
}
.info-tip:hover, .info-tip:focus, .info-tip.open {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  outline: none;
}
.info-tip-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: 90vw;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 12px 14px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--fg-1);
  text-align: left;
  line-height: 1.55;
  z-index: 150;
  display: none;
  cursor: default;
}
.info-tip-pop strong { color: var(--fg-0); }
.info-tip:hover .info-tip-pop,
.info-tip:focus .info-tip-pop,
.info-tip.open .info-tip-pop { display: block; }
.info-tip-pop .band-key {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin-top: 8px;
  align-items: center;
}

/* ── Chat starter chips ───────────────────────────────────────────────────── */

.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
  padding: 0 16px;
}
.chat-starter-chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-1);
  font: inherit;
  font-size: 0.82rem;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1.3;
  text-align: left;
}
.chat-starter-chip:hover {
  background: var(--bg-3);
  color: var(--fg-0);
  border-color: var(--border-2);
}
.chat-starter-chip:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

/* ── Keyboard shortcuts cheat sheet (uses existing .modal-overlay) ────────── */

.shortcut-modal {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-2);
}
.shortcut-modal h3 {
  margin: 0 0 16px;
  color: var(--fg-0);
  font-size: 1.05rem;
}
.shortcut-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  align-items: center;
}
.shortcut-grid kbd {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  color: var(--fg-0);
  padding: 3px 8px;
  border-radius: 5px;
  min-width: 24px;
  text-align: center;
  display: inline-block;
}
.shortcut-grid .desc { color: var(--fg-1); font-size: 0.86rem; }
.shortcut-modal .modal-actions { margin-top: 18px; justify-content: flex-end; display: flex; gap: 8px; }

/* ── Cleaner tables: zebra striping for readability ───────────────────────── */

.day-table tbody tr:nth-child(odd),
.ticker-table tbody tr:nth-child(odd) {
  background: rgba(var(--accent-rgb), 0.025);
}
.day-table tbody tr:hover,
.ticker-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.10);
}

/* Sticky first column on mobile when table scrolls horizontally */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin: 0 -4px;     /* let it bleed slightly to use phone edges */
}
.table-scroll::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  background: linear-gradient(to right, transparent, var(--bg-0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.table-scroll.is-scrollable::after { opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE — phones first, then narrower phones, then touch-only tweaks
   ────────────────────────────────────────────────────────────────────────── */

/* ── Phones + small tablets (under ~768px) ─────────────────────────────── */
@media (max-width: 768px) {

  /* Top bar — tighter padding, hide tagline, smaller brand */
  .topbar {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;     /* allow search to wrap to its own row */
  }
  /* Search gets its own row on phones */
  .search-wrap {
    order: 3;
    flex: 1 0 100%;
    margin: 6px 0 2px;
    max-width: 100%;
  }
  .search-hint { display: none; }   /* hide "/" hint on touch */
  .brand { gap: 8px; flex: 1; }
  .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
  .brand-mark::after { top: 5px; left: 5px; right: 5px; bottom: 5px; }
  .brand h1 { font-size: 0.92rem; }
  .brand .tagline { display: none; }    /* save horizontal space */
  .actions { gap: 6px; }
  .btn { padding: 10px 12px; font-size: 0.82rem; min-height: 40px; }
  .btn-icon { padding: 10px; min-width: 40px; min-height: 40px; }
  .theme-switch { padding: 1px; }
  .theme-btn { padding: 6px; min-width: 30px; min-height: 30px; }
  .theme-btn svg { width: 14px; height: 14px; }

  /* Status bar */
  .status-bar {
    padding: 8px 14px;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dashboard padding tighter — every pixel counts on a 390px-wide screen */
  .dashboard { padding: 16px 14px 40px; max-width: 100%; }

  /* Section heads stack and shrink */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 4px 12px;
    border-bottom: none;
    padding-bottom: 0;
  }
  .section-head h2 { font-size: 1rem; }
  .section-head h3 { font-size: 0.92rem; }
  .section-sub { font-size: 0.72rem; }

  /* AI cards — slightly tighter */
  .ai-card { padding: 16px 18px; margin-bottom: 22px; }
  .ai-card-head { flex-direction: row; gap: 8px; }
  .ai-card-head h2, .ai-card-head h3 { font-size: 0.92rem; }
  .ai-text { font-size: 0.95rem; line-height: 1.7; max-width: none; }

  /* Hero already collapses at 1000px — make sure spacing looks right */
  .hero-row { gap: 12px; margin-bottom: 22px; }

  /* Highlight cards (best/worst) — full width, slightly tighter */
  .highlight-card { padding: 12px 14px; }
  .highlight-head h3 { font-size: 0.78rem; }
  .highlight-row { padding: 9px 6px; }
  .hl-sym { font-size: 0.9rem; }
  .hl-stats {
    gap: 3px 10px;
    font-size: 0.66rem;
  }

  /* Carousel — slightly bigger cards for fat-finger taps */
  .carousel-grid {
    grid-auto-columns: 230px;
    gap: 12px;
    padding: 8px 24px 14px;
  }
  .day-card { border-radius: 10px; }
  .day-card-head { padding: 12px 14px 9px; }
  .day-card-date { font-size: 0.82rem; }
  .day-card-sub { font-size: 0.66rem; }
  .mover-row { padding: 11px 12px; }    /* taller for touch */
  .mover-sym { font-size: 0.92rem; }

  /* Day view — stat cards stack, table shrinks */
  .stat-row { grid-template-columns: 1fr; gap: 10px; margin: 14px 0 20px; }
  .stat-card { padding: 12px 14px; }
  .stat-grid { gap: 8px; }
  .stat-num { font-size: 0.9rem; }
  .stat-cap { font-size: 0.65rem; }
  .day-table { font-size: 0.8rem; }
  .day-table th, .day-table td { padding: 8px 8px; }

  /* Day view sim summary — 2x2 grid on phone */
  .sim-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 16px; }
  .sim-stat-val { font-size: 0.98rem; }

  /* Ticker view — stack hero vertically */
  .ticker-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 18px;
  }
  .ticker-hero-sym { font-size: 1.55rem; }
  .ticker-hero-name { font-size: 0.95rem; }
  .ticker-hero-meta { font-size: 0.78rem; }
  .ticker-hero-stats {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .ticker-hero-stats > div { align-items: flex-start; }

  .ticker-table { font-size: 0.8rem; }
  .ticker-table th, .ticker-table td { padding: 7px 8px; }

  /* News articles — slightly tighter */
  #news-container .article { padding: 10px 0; font-size: 0.85rem; }
  .article a { line-height: 1.4; }

  /* Chat — taller, smaller bubbles */
  .chat-section { margin-top: 28px; }
  .chat-head { padding: 9px 14px; }
  .chat-status { font-size: 0.65rem; }
  .chat-messages { max-height: 480px; padding: 14px 14px; gap: 14px; }
  .chat-msg-text { font-size: 0.9rem; max-width: 90%; }
  .chat-msg.ai .chat-msg-text.ai-text { font-size: 0.92rem; max-width: 90%; }
  .chat-form { padding: 10px 14px; gap: 8px; }
  .chat-form textarea { font-size: 0.92rem; }

  /* Back bar — tighter inside the topbar shell */
  .back-bar { padding: 6px 14px; }

  /* Footer */
  .footer { padding: 14px; font-size: 0.7rem; margin-top: 24px; }
}

/* ── Small phones (under 480px) — iPhone SE, narrow Androids ───────────── */
@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .brand h1 { font-size: 0.86rem; }
  .btn-primary .btn-label { font-size: 0.78rem; }

  .dashboard { padding: 12px 10px 36px; }

  /* 2x2 stats grid even on small phones */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sim-summary { grid-template-columns: repeat(2, 1fr); }

  .day-table, .ticker-table { font-size: 0.76rem; }
  .day-table th, .day-table td,
  .ticker-table th, .ticker-table td { padding: 6px 6px; }

  .ticker-hero-sym { font-size: 1.4rem; }
  .ticker-hero-stats { gap: 8px; }
  .ticker-hero-stats .stat-num { font-size: 0.82rem; }

  /* Carousel cards a hair narrower so two are slightly visible at once */
  .carousel-grid { grid-auto-columns: 210px; padding: 6px 18px 12px; }

  /* Chat */
  .chat-messages { max-height: 420px; }
  .chat-msg-text { font-size: 0.88rem; max-width: 92%; }
}

/* ── Touch devices: disable hover lifts, beef up tap targets ───────────── */
@media (hover: none) and (pointer: coarse) {
  .day-card:hover {
    transform: none;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03) inset,
      0 2px 8px rgba(0,0,0,0.25),
      0 1px 2px rgba(0,0,0,0.4);
  }
  .highlight-row:hover, .mover-row:hover, .day-table tbody tr:hover {
    background: transparent;
  }
  /* Tap feedback instead of hover */
  .day-card:active, .highlight-row:active, .mover-row:active,
  .day-table tbody tr:active, .ticker-card:active {
    background: var(--bg-2);
  }
  /* Form inputs — larger touch area */
  .chat-form textarea, .gate input {
    font-size: 16px;   /* 16px prevents iOS Safari from auto-zooming on focus */
    min-height: 44px;
  }
  /* Make the drag-to-scroll carousel feel right with native momentum */
  .carousel-grid {
    cursor: default;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}