/* ═══════════════════════════════════════════════════════════
       "QUIET MONEY" — LIGHT THEME (default)
       Warm paper, one cobalt accent, flat surfaces. Calm = trustworthy.
    ═══════════════════════════════════════════════════════════ */
    :root, [data-theme="light"] {
      --bg:            #FAFAF7;
      --bg2:           #F1F2EE;
      --bg3:           #E9EBE6;
      --surface:       #FFFFFF;
      --surface-solid: #FFFFFF;
      --surface2:      #F6F7F4;
      --glass:         #FFFFFF;
      --glass-border:  #E7E9EE;
      --glass-shine:   #F1F2EE;
      --border:        #E7E9EE;
      --border2:       #D8DCE3;
      --text:          #101E33;
      --text-muted:    #51607A;
      --text-dim:      #8A96AB;
      --accent:        #2E5BFF;
      --accent2:       #1B3FD6;
      --accent3:       #0E9F6E;
      --accent-glow:   #EEF2FF;
      --brand-tint:    #EEF2FF;
      --gradient-1:    linear-gradient(135deg, #2E5BFF 0%, #1B3FD6 100%);
      --gradient-2:    linear-gradient(135deg, #2E5BFF 0%, #2E5BFF 100%);
      --gradient-3:    linear-gradient(135deg, #1B3FD6 0%, #2E5BFF 100%);
      --gradient-hero: linear-gradient(180deg, #F4F5F1 0%, #FAFAF7 100%);
      --buy:           #0E9F6E;
      --sell:          #DC4C4C;
      --warn:          #C77D0A;
      /* Congressional entry/exit. Deliberately NOT --buy/--sell: those colour
         the price line itself, and a marker in the same hue as the line it
         sits on reads as part of the line. */
      --cong-buy:      #0F766E;
      --cong-sell:     #B45309;
      --shadow-sm:     0 1px 2px rgba(16,30,51,0.05);
      --shadow-md:     0 4px 12px rgba(16,30,51,0.07);
      --shadow-glow:   0 4px 12px rgba(16,30,51,0.07);
      --nav-bg:        rgba(250,250,247,0.92);
      --card-hover-border: #C9D4F5;
    }

    /* ═══════════════════════════════════════════════════════════
       DARK THEME — secondary, for people who prefer it
    ═══════════════════════════════════════════════════════════ */
    [data-theme="dark"] {
      --bg:            #0D1321;
      --bg2:           #131A2B;
      --bg3:           #1A2235;
      --surface:       #151C2E;
      --surface-solid: #151C2E;
      --surface2:      #1A2235;
      --glass:         #151C2E;
      --glass-border:  rgba(255,255,255,0.08);
      --glass-shine:   rgba(255,255,255,0.04);
      --border:        rgba(255,255,255,0.08);
      --border2:       rgba(255,255,255,0.14);
      --text:          #EDF0F5;
      --text-muted:    #9AA6BB;
      --text-dim:      #6E7A90;
      --accent:        #6C8CFF;
      --accent2:       #8CA4FF;
      --accent3:       #2FBF8B;
      --accent-glow:   rgba(108,140,255,0.12);
      --brand-tint:    rgba(108,140,255,0.12);
      --gradient-1:    linear-gradient(135deg, #6C8CFF 0%, #4A6CF0 100%);
      --gradient-2:    linear-gradient(135deg, #6C8CFF 0%, #6C8CFF 100%);
      --gradient-3:    linear-gradient(135deg, #4A6CF0 0%, #6C8CFF 100%);
      --gradient-hero: linear-gradient(180deg, #10172A 0%, #0D1321 100%);
      --buy:           #2FBF8B;
      --sell:          #F07A7A;
      --warn:          #E0A33E;
      --cong-buy:      #2DD4BF;
      --cong-sell:     #FBBF24;
      --shadow-sm:     0 1px 2px rgba(0,0,0,0.35);
      --shadow-md:     0 6px 18px rgba(0,0,0,0.4);
      --shadow-glow:   0 6px 18px rgba(0,0,0,0.4);
      --nav-bg:        rgba(13,19,33,0.92);
      --card-hover-border: rgba(108,140,255,0.35);
    }

    /* ═══════════════════════════════════════════════════════════
       SHARED TOKENS
    ═══════════════════════════════════════════════════════════ */
    :root {
      --font-display: 'Fraunces', Georgia, serif;
      --font-body:    'Inter', system-ui, sans-serif;
      --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
      --radius:       8px;
      --radius-lg:    12px;
      --radius-xl:    20px;
      --nav-h:        64px;
      --max-w:        1440px;
      --content-pad:  clamp(20px, 4vw, 64px);
      --ease:         cubic-bezier(0.4, 0, 0.2, 1);
      --t:            0.15s var(--ease);
    }

    /* ═══════════════════════════════════════════════════════════
       RESET
    ═══════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }

    body {
      background:  var(--bg);
      color:       var(--text);
      font-family: var(--font-body);
      font-weight: 400;
      min-height:  100vh;
      line-height: 1.6;
      overflow-x:  hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3 { letter-spacing: -0.015em; }

    /* The one place monospace earns its keep: figures that sit in a column and
       need to line up digit-for-digit (prices, percentages, tickers). Body copy,
       labels and headings all run in Inter — see the `table` rule below. */
    .tnum, td[data-num], .price, .pct, .ticker {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    /* ═══════════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════════ */
    .hero-bg {
      position:   relative;
      width:      100%;
      min-height: clamp(280px, 36vw, 460px);
      background: var(--gradient-hero);
      overflow:   hidden;
    }

    /* Quiet Money: no floating orbs, no animated decorations. The hero is a
       calm paper gradient with a bottom hairline. */
    .hero-bg { border-bottom: 1px solid var(--border); }

    /* Quiet Money: the hero is clean paper — no photographic texture. */
    .hero-image-layer { display: none; }

    /* ── Filing tape ──────────────────────────────────────────────
       The one piece of motion on the site. It is made of real filing rows
       (see _build_filing_tape) rather than shapes, which is the whole reason
       it earns its place next to the "no floating orbs" rule above. Slow
       enough that it reads as texture, not animation. */
    .hero-tape {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      z-index: 0;
      pointer-events: none;
    }
    /* Fades the ground back in under the copy. Without this the tagline
       drops below AA contrast wherever a row passes behind it. */
    .hero-tape-veil {
      position: absolute; inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(100deg, var(--bg) 0%, var(--bg) 34%, rgba(0,0,0,0) 68%),
        linear-gradient(0deg,   var(--bg) 0%, rgba(0,0,0,0) 52%);
      opacity: 0.88;
    }
    @media (max-width: 760px) {
      /* On phones the copy fills the hero, so the tape would only ever sit
         behind text. Cheaper and calmer to drop it entirely. */
      .hero-tape, .hero-tape-veil { display: none; }
    }

    .hero-content {
      position: relative; z-index: 2;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--content-pad);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: clamp(36px, 5vw, 64px);
      padding-top: calc(var(--nav-h) + clamp(36px, 5vw, 56px));
    }

    .hero-eyebrow {
      font-family: var(--font-body);
      font-size: 0.85rem; font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--accent);
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 10px;
    }


    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5.5vw, 4.2rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -0.01em;
      color: var(--text);
      max-width: 720px;
    }

    .hero-tagline {
      margin-top: 14px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--text-muted);
      max-width: 520px;
      line-height: 1.5;
    }

    .hero-sub {
      margin-top: 16px;
      color: var(--text-muted);
      font-size: 0.9rem;
      display: flex; align-items: center;
      gap: 16px; flex-wrap: wrap;
    }

    .hero-sub .dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--text-dim);
    }

    /* ═══════════════════════════════════════════════════════════
       NAV — glass
    ═══════════════════════════════════════════════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 200;
      height: var(--nav-h);
      background: var(--nav-bg);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid var(--glass-border);
      transition: background 0.5s ease, box-shadow 0.3s ease;
    }

    [data-theme="light"] nav {
      box-shadow: 0 1px 0 rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
    }

    nav.nav-scrolled {
      background: rgba(6,9,15,0.96);
      box-shadow: 0 4px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(28px) saturate(1.6);
      -webkit-backdrop-filter: blur(28px) saturate(1.6);
    }

    [data-theme="light"] nav.nav-scrolled {
      background: rgba(255,255,255,0.97);
      box-shadow: 0 4px 24px rgba(15,23,42,0.1), 0 1px 0 rgba(15,23,42,0.06);
    }

    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--content-pad);
      height: 100%;
      display: flex; align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .nav-brand {
      font-family: var(--font-body);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink, var(--text));
      text-decoration: none;
      display: flex; align-items: center; gap: 9px;
      white-space: nowrap;
      transition: opacity var(--t);
    }
    .nav-brand .brand-mark {
      width: 24px; height: 24px;
      flex-shrink: 0;
      display: block;
      color: var(--text);   /* the rings inherit this via currentColor */
    }
    .nav-brand .brand-word b { font-weight: 700; }
    .nav-brand .brand-word span { font-weight: 500; color: var(--text-muted); }
    .nav-brand:hover { opacity: 0.85; }


    .nav-right { display: flex; align-items: center; gap: 4px; }

    .nav-links {
      display: flex; align-items: center;
      gap: 2px; list-style: none;
      position: relative;
    }

    .nav-links a {
      position: relative;
      color: var(--text-muted);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 0.9rem; font-weight: 500;
      letter-spacing: 0;
      white-space: nowrap;
      padding: 8px 14px;
      border-radius: var(--radius);
      transition: color var(--t), background var(--t);
    }

    .nav-links a:hover { color: var(--text); background: var(--glass-shine); }
    .nav-links a.active { color: var(--accent); font-weight: 500; }

    /* Quiet "there's a fresh one" marker on the Brief link. Only rendered
       while the latest brief is actually current, so it never cries wolf. */
    .nav-dot {
      display: inline-block; width: 5px; height: 5px;
      margin-left: 5px; vertical-align: 2px;
      border-radius: 50%; background: var(--accent);
    }

    /* Sliding gradient underline — follows hover, rests on the active page */
    .nav-indicator {
      position: absolute;
      bottom: -2px;
      left: 0;
      height: 2px;
      width: 0;
      border-radius: 2px;
      background: var(--accent);
      opacity: 0;
      transform: translateX(0);
      transition: transform 0.34s var(--ease), width 0.34s var(--ease), opacity 0.2s var(--ease);
      pointer-events: none;
      z-index: 0;
    }
    .nav-indicator.ready { opacity: 1; }
    .nav-links a { z-index: 1; }

    [data-theme="light"] .nav-links a:hover {
      background: var(--bg2);
    }

    /* Watchlist star (nav) */
    .wl-nav-star {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: var(--radius);
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--t), background var(--t);
      flex-shrink: 0;
    }
    .wl-nav-star:hover { color: var(--accent); background: var(--glass-shine); }
    .wl-nav-star.active { color: var(--accent); }
    .wl-nav-star .wl-nav-count {
      position: absolute; top: 2px; right: 0;
      min-width: 15px; height: 15px; padding: 0 4px;
      border-radius: 8px;
      background: var(--accent); color: #fff;
      font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
    }

    /* Theme toggle */
    /* ── Language switcher ── */
    .lang-switch { position: relative; margin-left: 8px; flex-shrink: 0; }
    .lang-btn {
      display: flex; align-items: center; gap: 6px;
      height: 38px; padding: 0 10px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 0.85rem; font-weight: 500;
      cursor: pointer; transition: all var(--t);
    }
    .lang-btn:hover { color: var(--accent); border-color: var(--card-hover-border); }
    .lang-menu {
      position: absolute; top: calc(100% + 6px); right: 0;
      min-width: 140px; list-style: none;
      background: var(--surface-solid);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: 5px; z-index: 200;
      display: none;
    }
    .lang-switch.open .lang-menu { display: block; }
    .lang-menu a {
      display: block; padding: 8px 10px;
      border-radius: 6px;
      color: var(--text); text-decoration: none;
      font-size: 0.9rem;
    }
    .lang-menu a:hover { background: var(--surface2); }
    .lang-menu a.on { color: var(--accent); font-weight: 600; }
    /* The bar holds five controls (menu, watchlist, search, language, theme)
       plus the wordmark. Below 860px the language label collapses to the globe;
       below 520px the wordmark collapses to the "B" mark, which is what keeps
       the theme toggle on screen. Without this the last control is pushed past
       the viewport — and body{overflow-x:hidden} clips it silently rather than
       letting the page scroll, so it just looks missing. */
    @media (max-width: 860px) { .lang-btn span { display: none; } .lang-btn { padding: 0 9px; } }
    @media (max-width: 520px) {
      .nav-brand .brand-word { display: none; }
      .lang-switch { margin-left: 4px; }
      .theme-toggle { margin-left: 4px; }
    }

    .theme-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      color: var(--text-muted);
      transition: all var(--t);
      margin-left: 8px;
      flex-shrink: 0;
    }

    .theme-toggle:hover {
      color: var(--accent);
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-glow);
    }

    .theme-toggle .sun  { display: none; }
    .theme-toggle .moon { display: block; }
    [data-theme="light"] .theme-toggle .sun  { display: block; }
    [data-theme="light"] .theme-toggle .moon { display: none; }

    .nav-toggle {
      display: none; background: none; border: none;
      cursor: pointer; padding: 8px; color: var(--text);
    }

    @media (max-width: 820px) {
      .nav-toggle { display: flex; align-items: center; }
      .nav-links { display: none; }
      .nav-indicator { display: none !important; }
      /* Right-anchored dropdown card (not a full-width centered bar) */
      .nav-links.open {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute;
        top: calc(var(--nav-h) - 6px);
        right: 12px; left: auto;
        width: min(240px, 74vw);
        background: var(--surface-solid);
        border: 1px solid var(--border2);
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3);
        padding: 8px; gap: 2px;
        overflow: hidden;
        animation: slideDown 0.2s var(--ease);
      }
      [data-theme="light"] .nav-links.open {
        box-shadow: 0 18px 44px rgba(15,23,42,0.18), 0 2px 10px rgba(15,23,42,0.08);
      }
      .nav-links.open a {
        display: flex; align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 9px;
        font-family: var(--font-body);
        font-size: 0.95rem;
        letter-spacing: 0;
        text-align: left;
        color: var(--text-muted);
        transition: background var(--t), color var(--t);
      }
      .nav-links.open a:hover {
        background: var(--glass-shine);
        color: var(--text);
      }
      .nav-links.open a.active {
        color: var(--accent);
        background: var(--accent-glow);
        font-weight: 500;
      }
      [data-theme="light"] .nav-links.open a.active {
        background: rgba(3,105,161,0.07);
      }
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════════════════════
       PAGE WRAP
    ═══════════════════════════════════════════════════════════ */
    .page-wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 40px var(--content-pad) 100px;
    }

    /* ═══════════════════════════════════════════════════════════
       PAGE HEADER (inner pages)
    ═══════════════════════════════════════════════════════════ */
    .page-header {
      padding-top: calc(var(--nav-h) + 56px);
      padding-bottom: 40px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 40px;
      position: relative;
      overflow: hidden;
    }

    .page-header::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 5% 50%, rgba(34,211,238,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 95% 20%, rgba(167,139,250,0.04) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    .page-header > * { position: relative; z-index: 1; }

    [data-theme="light"] .page-header {
      border-bottom-color: rgba(15,23,42,0.1);
    }

    [data-theme="light"] .page-header::before {
      background:
        radial-gradient(ellipse 60% 80% at 5% 50%, rgba(3,105,161,0.03) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 95% 20%, rgba(109,40,217,0.02) 0%, transparent 60%);
    }

    /* Plain-language kicker. Deliberately not the tiny uppercase letterspaced
       label this used to be — that reads as decoration, not information. */
    .page-header .eyebrow {
      font-size: 0.9rem; font-weight: 600;
      color: var(--accent);
      margin-bottom: 10px;
      display: flex; align-items: center; gap: 8px;
    }

    .page-header h1 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 3rem);
      line-height: 1.1;
      color: var(--text);
    }

    .page-header .subtitle {
      margin-top: 12px;
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.6;
      max-width: 640px;
    }

    /* ═══════════════════════════════════════════════════════════
       GLASS CARDS
    ═══════════════════════════════════════════════════════════ */
    .card {
      background: var(--glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 24px;
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
      position: relative;
      overflow: hidden;
    }

    [data-theme="light"] .card {
      background: #ffffff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
      opacity: 0;
      transition: opacity var(--t);
    }

    .card:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-md);
    }

    [data-theme="light"] .card:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-md);
    }

    .card:hover::before { opacity: 1; }

    .card-label {
      font-size: 0.8rem; font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    /* ═══════════════════════════════════════════════════════════
       STAT CHIPS
    ═══════════════════════════════════════════════════════════ */
    .stats-row {
      display: flex; gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 36px;
    }

    .stat-chip {
      position: relative;
      background: var(--glass);
      backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      cursor: pointer;
      transition: all var(--t);
      user-select: none;
      flex: 1 1 130px;
      min-width: 120px;
      max-width: 210px;
      overflow: hidden;
    }

    [data-theme="light"] .stat-chip {
      background: #ffffff;
      backdrop-filter: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .stat-chip::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 3px;
      background: var(--gradient-1);
      opacity: 0;
      transition: opacity var(--t);
    }

    .stat-chip:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-md);
    }

    .stat-chip:hover::before { opacity: 1; }

    .stat-chip .stat-value {
      font-family: var(--font-display);
      font-size: 2rem;
      color: var(--text);
      line-height: 1;
    }

    .stat-chip .stat-label {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-top: 6px;
    }

    /* Tooltip */
    .stat-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      width: 280px;
      background: var(--surface-solid);
      color: var(--text);
      border: 1px solid var(--border2);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      font-family: var(--font-body);
      font-size: 0.82rem;
      line-height: 1.55;
      z-index: 50;
      box-shadow: var(--shadow-md);
      pointer-events: none;
    }

    .stat-tooltip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: var(--surface-solid);
    }

    .stat-tooltip strong {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 0.85rem;
      color: var(--accent);
    }

    .stat-chip.active .stat-tooltip,
    .stat-chip:hover .stat-tooltip {
      display: block;
      animation: tooltipIn 0.2s ease both;
    }

    @keyframes tooltipIn {
      from { opacity: 0; transform: translateX(-50%) translateY(6px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ═══════════════════════════════════════════════════════════
       TABLE
    ═══════════════════════════════════════════════════════════ */
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-border);
      background: var(--glass);
      backdrop-filter: blur(12px);
    }

    [data-theme="light"] .table-wrap {
      background: #ffffff;
      backdrop-filter: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    /* On phones a wide table has to scroll sideways. Make that discoverable:
       a one-line "swipe" hint above the table and a soft fade on the right
       edge so it's obvious there's more content off-screen. Any page that
       replaces its table with a stacked card layout on mobile hides this via
       .has-mobile-cards. */
    .table-scroll-hint { display: none; }
    @media (max-width: 640px) {
      .table-scroll-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--text-dim);
        margin-bottom: 8px;
      }
      .table-scroll-hint::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, var(--border2), transparent);
      }
      .has-mobile-cards .table-scroll-hint { display: none; }
    }

    /* Tables are prose + numbers, so they run in the body face. Monospace is
       reserved for the cells that actually need column-aligned digits — see
       the .tnum / td[data-num] / .price / .pct rule near the top. */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }

    thead th {
      background: var(--bg2);
      color: var(--text-muted);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 10px 12px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      /* Sticky to the top of the .table-wrap scroll container (which has
         overflow-x:auto). Using top:var(--nav-h) here would push the header
         down INTO the table, not below the nav. */
      position: sticky;
      top: 0;
      z-index: 5;
    }

    /* Subtle shadow under the header once it sticks */
    thead th::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: var(--border2);
    }

    tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background var(--t), box-shadow var(--t);
    }

    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover {
      background: var(--accent-glow);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    tbody td {
      padding: 8px 12px;
      vertical-align: middle;
      color: var(--text);
    }

    /* Inter ships tabular figures, so numeric columns still line up
       digit-for-digit without setting the whole table in monospace. */
    thead th, tbody td { font-variant-numeric: tabular-nums; }

    /* ═══════════════════════════════════════════════════════════
       BADGES
    ═══════════════════════════════════════════════════════════ */
    .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 500;
    }

    /* Confidence tier pill — used on dashboard rows, watchlist, consensus, digest */
    .conf-pill {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.78rem; font-weight: 600;
      font-variant-numeric: tabular-nums;
      padding: 3px 9px; border-radius: 999px; white-space: nowrap;
      border: 1px solid transparent;
    }
    .conf-pill b { font-weight: 700; }
    .conf-pill--strong   { color: var(--buy);     background: color-mix(in srgb, var(--buy)  12%, transparent); border-color: color-mix(in srgb, var(--buy)  30%, transparent); }
    .conf-pill--high     { color: var(--accent3); background: color-mix(in srgb, var(--accent3) 12%, transparent); border-color: color-mix(in srgb, var(--accent3) 30%, transparent); }
    .conf-pill--moderate { color: var(--warn);    background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
    .conf-pill--weak     { color: var(--text-muted); background: var(--surface2); border-color: var(--border2); }
    .conf-pill--bearish  { color: var(--sell);   background: color-mix(in srgb, var(--sell) 12%, transparent); border-color: color-mix(in srgb, var(--sell) 30%, transparent); }
    .conf-pill--sm { font-size: 0.56rem; padding: 2px 7px; letter-spacing: 0.05em; }

    /* Stock logo — used in every list/hero. Loads /api/logo/<ticker>; if the
       image 404s or errors, JS swaps in a coloured monogram (same visual
       language as the politician fallback avatars). */
    .stock-logo {
      display: inline-flex; align-items: center; justify-content: center;
      width: var(--logo-size, 20px); height: var(--logo-size, 20px);
      border-radius: 50%; overflow: hidden; flex-shrink: 0;
      background: var(--surface); border: 1px solid var(--border);
      vertical-align: middle;
    }
    .stock-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10%; background: var(--surface); }
    .stock-logo-mono {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      font-family: var(--font-body); font-weight: 700; color: #fff; letter-spacing: -0.01em;
      background: var(--accent);
      font-size: calc(var(--logo-size, 20px) * 0.5);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    }
    .stock-logo--lg { --logo-size: 40px; }
    .stock-logo--xl { --logo-size: 64px; }

    .badge-sector  { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border2); }
    .badge-buy     { background: rgba(14,159,110,0.09); color: var(--buy); border: 1px solid rgba(14,159,110,0.22); }
    .badge-sell    { background: rgba(220,76,76,0.08); color: var(--sell); border: 1px solid rgba(220,76,76,0.2); }
    .badge-held    { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
    .badge-region-europe   { background: rgba(14,159,110,0.07);  color: var(--accent3); border: 1px solid rgba(14,159,110,0.2); }
    .badge-region-asia     { background: rgba(199,125,10,0.07);  color: var(--warn);    border: 1px solid rgba(199,125,10,0.2); }
    .badge-region-usa      { background: var(--brand-tint);      color: var(--accent);  border: 1px solid var(--card-hover-border); }
    .badge-region-americas { background: rgba(220,76,76,0.06); color: var(--sell);     border: 1px solid rgba(220,76,76,0.15); }

    /* ═══════════════════════════════════════════════════════════
       SCORE BAR
    ═══════════════════════════════════════════════════════════ */
    .score-bar-wrap { display: flex; align-items: center; gap: 10px; }

    .score-bar-bg {
      flex: 1; height: 4px;
      background: var(--border);
      border-radius: 2px;
      min-width: 50px; max-width: 100px;
      overflow: hidden;
    }

    .score-bar-fill {
      height: 100%; border-radius: 2px;
      background: var(--accent);
    }

    [data-theme="light"] .score-bar-fill {
      box-shadow: none;
    }

    /* Confidence-tier bar fills so the bar matches its pill (one metric).
       Flat fills, no glow — the colour alone carries the tier. */
    .score-bar-fill.conf-fill--strong   { background: var(--buy); }
    .score-bar-fill.conf-fill--high     { background: var(--accent3); }
    .score-bar-fill.conf-fill--moderate { background: var(--warn); }
    .score-bar-fill.conf-fill--weak     { background: var(--sell); opacity: 0.85; }
    .score-bar-fill.conf-fill--bearish  { background: var(--sell); opacity: 0.85; }

    .score-pct {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--accent);
      min-width: 56px;
      text-align: right;
      white-space: nowrap;
      cursor: help;
    }

    /* ═══════════════════════════════════════════════════════════
       TREND / STALE / DISCLAIMER
    ═══════════════════════════════════════════════════════════ */
    .trend-up   { color: var(--buy); }
    .trend-down { color: var(--sell); }
    .trend-flat { color: var(--text-dim); }
    .stale-warn { font-size: 0.82rem; color: var(--warn); }

    .disclaimer {
      margin-top: 48px;
      padding: 18px 24px;
      background: rgba(251,191,36,0.04);
      border: 1px solid rgba(251,191,36,0.12);
      border-radius: var(--radius-lg);
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    [data-theme="light"] .disclaimer {
      background: var(--bg2);
      border-color: var(--border);
    }

    .disclaimer strong { color: var(--warn); font-weight: 500; }

    /* ═══════════════════════════════════════════════════════════
       ABOUT SECTION
    ═══════════════════════════════════════════════════════════ */
    .about-section {
      margin-top: 64px;
      padding-top: 48px;
      border-top: 1px solid var(--border);
    }

    .about-eyebrow {
      font-size: 0.9rem; font-weight: 600;
      color: var(--accent);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }

    .about-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      color: var(--text);
      margin-bottom: 28px;
      line-height: 1.2;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .about-card {
      background: var(--glass);
      backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 26px 28px;
      transition: all var(--t);
    }

    .about-card:hover {
      border-color: var(--card-hover-border);
      box-shadow: var(--shadow-glow);
    }

    [data-theme="light"] .about-card {
      background: #ffffff;
      backdrop-filter: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    [data-theme="light"] .about-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--card-hover-border);
    }

    .about-card h3 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      color: var(--text);
      margin-bottom: 12px;
    }

    .about-card p, .about-card li {
      font-family: var(--font-body);
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    .about-card ul { padding-left: 1.2em; margin-top: 8px; }

.about-card ul.two-col {
      columns: 2;
      column-gap: 24px;
      padding-left: 0;
      list-style: none;
    }
    .about-card ul.two-col li {
      break-inside: avoid;
      padding-left: 0;
    }
    .about-card li { margin-bottom: 6px; }

    .about-card.warn-card {
      border-color: rgba(251,191,36,0.15);
      background: rgba(251,191,36,0.03);
    }
    .about-card.warn-card h3 { color: var(--warn); }

    .about-signature {
      margin-top: 20px;
      font-size: 0.88rem;
      color: var(--text-dim);
    }
    .about-signature span { color: var(--accent); font-weight: 500; }

    @media (max-width: 768px) {
      .about-grid { grid-template-columns: 1fr; }
      .about-card ul.two-col { columns: 1; }
    }

    @media (max-width: 640px) {
      :root { --content-pad: 16px; }
      .page-wrap { padding: 28px var(--content-pad) 80px; }
      .page-header { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 24px; margin-bottom: 28px; }
      .page-header h1 { font-size: 1.6rem; }
      .hero-bg { min-height: 70vh; }
      footer { grid-template-columns: 1fr; gap: 28px; padding: 32px var(--content-pad) 20px; }
      .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
    }

    /* ═══════════════════════════════════════════════════════════
       UTILITIES
    ═══════════════════════════════════════════════════════════ */
    .mt-8  { margin-top: 8px; }
    .mt-16 { margin-top: 16px; }
    .mt-24 { margin-top: 24px; }
    .mt-32 { margin-top: 32px; }
    .mb-16 { margin-bottom: 16px; }
    .mb-24 { margin-bottom: 24px; }

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

    /* Skip-to-content link — visible only when focused via keyboard (Tab).
       Lets keyboard / screen-reader users jump past the fixed nav. */
    .skip-link {
      position: absolute;
      top: -60px; left: 12px;
      z-index: 1000;
      padding: 10px 18px;
      border-radius: var(--radius);
      background: var(--accent);
      color: #04121a;
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      box-shadow: var(--shadow-md);
      transition: top 0.2s var(--ease);
    }
    .skip-link:focus {
      top: 12px;
      outline: 2px solid var(--text);
      outline-offset: 2px;
    }

    /* ═══════════════════════════════════════════════════════════
       SEARCH / FILTER BAR  (shared: investors, congress)
    ═══════════════════════════════════════════════════════════ */
    .inv-search-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      align-items: center;
    }

    .inv-search-input {
      flex: 1;
      min-width: 200px;
      max-width: 340px;
      padding: 10px 16px;
      border-radius: var(--radius);
      border: 1px solid var(--border2);
      background: var(--surface-solid);
      color: var(--text);
      font-size: 0.9rem;
      outline: none;
      transition: border-color var(--t), box-shadow var(--t);
    }

    .inv-search-input::placeholder { color: var(--text-dim); }
    .inv-search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .inv-filter-btn {
      padding: 10px 18px;
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      background: var(--surface-solid);
      color: var(--text-muted);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--t);
      white-space: nowrap;
    }

    .inv-filter-btn.active, .inv-filter-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-glow);
    }

    .inv-count-label {
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-left: auto;
    }

    @media (max-width: 480px) {
      .inv-search-bar { gap: 8px; }
      .inv-search-input { min-width: 0; max-width: 100%; width: 100%; flex-basis: 100%; }
      .inv-filter-btn { padding: 9px 12px; font-size: 0.82rem; flex: 1 1 auto; text-align: center; }
    }

    .section-label {
      font-size: 0.85rem; font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 14px;
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media (max-width: 700px) {
      .two-col { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════════════════════ */
    /* Quiet Money: no scroll-entrance choreography. Content is just there.
       The classes remain (templates use them) but are inert. */
    .fade-up, .fade-up-1, .fade-up-2, .fade-up-3, .fade-up-4, .fade-up-5 { animation: none; }

    /* ═══════════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════════ */
    .footer-outer {
      border-top: 1px solid var(--border);
      margin-top: 80px;
    }

    [data-theme="light"] .footer-outer {
      background: var(--bg2);
    }
    footer {
      padding: 56px var(--content-pad) 32px;
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: 48px;
    }
    .footer-brand-name {
      font-family: var(--font-body);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px;
    }
    .footer-brand-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--buy);
      flex-shrink: 0;
    }
    .footer-tagline {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 260px;
      margin-bottom: 18px;
    }
    .footer-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.78rem;
      color: var(--text-dim);
      border: 1px solid var(--border2);
      border-radius: 4px; padding: 3px 8px;
      margin-right: 6px; margin-bottom: 6px;
    }
    .footer-col-title {
      font-size: 0.8rem;
      color: var(--text);
      margin-bottom: 14px;
      font-weight: 600;
    }
    .footer-links {
      list-style: none;
      display: flex; flex-direction: column; gap: 9px;
    }
    .footer-links a {
      font-size: 0.88rem;
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--t);
    }
    .footer-links a:hover { color: var(--accent); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding: 16px var(--content-pad);
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 8px;
    }
    .footer-bottom span {
      font-size: 0.82rem;
      color: var(--text-dim);
    }
    .footer-bottom a { color: var(--text-dim); text-decoration: none; transition: color var(--t); }
    .footer-bottom a:hover { color: var(--accent); }
    @media (max-width: 860px) {
      footer { grid-template-columns: 1fr 1fr; gap: 32px; }
    }

    /* ═══════════════════════════════════════════════════════════
       SKELETON SHIMMER (loading states)
    ═══════════════════════════════════════════════════════════ */
    .skeleton {
      position: relative;
      overflow: hidden;
      background: var(--surface2);
      border-radius: var(--radius);
    }
    .skeleton::after {
      content: '';
      position: absolute; inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
      animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer { 100% { transform: translateX(100%); } }

    /* Dim + non-interactive while an async swap is in flight */
    .is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s ease; }

    /* ═══════════════════════════════════════════════════════════
       REDUCED MOTION — respect the OS/browser preference
    ═══════════════════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* ═══════════════════════════════════════════════════════════
       BACK TO TOP BUTTON
    ═══════════════════════════════════════════════════════════ */
    #back-top {
      position: fixed;
      bottom: 28px; right: 28px;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border2);
      color: var(--text-muted);
      font-size: 1rem;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity var(--t), transform var(--t), border-color var(--t);
      z-index: 500;
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(12px);
    }
    #back-top.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    #back-top:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    [data-theme="light"] #back-top {
      background: #ffffff;
      box-shadow: var(--shadow-md);
    }

    /* ═══════════════════════════════════════════════════════════
       NEWSLETTER CTA (shared across all pages)
    ═══════════════════════════════════════════════════════════ */
    /* A calm bordered panel on the page's own surface colour. This used to be
       a purple/cyan/green gradient with a circled icon — leftover from the old
       palette, and the loudest thing on every page. */
    .nl-cta {
      position: relative;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface);
      overflow: hidden;
      margin: 64px 0 0;
      padding: 0;
    }
    .nl-cta-bg, .nl-cta-border, .nl-cta-icon { display: none; }
    .nl-cta-inner {
      position: relative;
      text-align: left;
      padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 40px);
      max-width: 620px;
    }
    .nl-cta h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      color: var(--text);
      margin-bottom: 10px;
      line-height: 1.15;
    }
    .nl-cta .nl-sub {
      font-size: 0.95rem;
      color: var(--text-muted);
      max-width: 460px;
      margin: 0 0 24px;
      line-height: 1.6;
    }
    .nl-form {
      display: flex;
      gap: 10px;
      max-width: 420px;
    }
    .nl-input {
      flex: 1;
      min-width: 0;
      padding: 12px 18px;
      border-radius: var(--radius);
      border: 1px solid var(--border2);
      background: var(--surface-solid);
      color: var(--text);
      font-size: 0.92rem;
      outline: none;
      transition: border-color var(--t), box-shadow var(--t);
    }
    .nl-input::placeholder { color: var(--text-dim); }
    .nl-input:focus {
      border-color: var(--accent2);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
    }
    [data-theme="light"] .nl-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(3,105,161,0.1);
    }
    .nl-submit {
      padding: 12px 24px;
      border: none;
      border-radius: var(--radius);
      background: var(--accent);
      color: #fff;
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity var(--t), transform var(--t);
      white-space: nowrap;
    }
    .nl-submit:hover { background: var(--accent2); }
    .nl-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .nl-msg {
      font-size: 0.88rem;
      margin-top: 14px;
      min-height: 20px;
    }
    .nl-msg.success { color: var(--buy); }
    .nl-msg.error { color: var(--sell); }
    .nl-fine {
      font-size: 0.8rem;
      color: var(--text-dim);
      margin-top: 10px;
    }
    .nl-alert-opt {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      margin-top: 12px;
      user-select: none;
    }
    .nl-alert-opt input[type="checkbox"] {
      width: 14px; height: 14px;
      accent-color: var(--accent);
      flex-shrink: 0;
      cursor: pointer;
    }
    .nl-alert-opt span {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.4;
    }
    @media (max-width: 480px) {
      .nl-form { flex-direction: column; }
      .nl-form input, .nl-form button { width: 100%; }
      .nl-cta { margin-top: 32px; }
    }

    /* ══ REVEAL — a long list, collapsed until asked ══════════════════════
       Several pages carry lists nobody scrolls to the end of: 400 conflict
       rows, 292 politician cards, 201 stocks. On a phone that is minutes of
       thumb between one section and the next, and the page below may as well
       not exist.

       TWO MECHANISMS, ON PURPOSE

       The nth-child rules below make the FIRST PAINT short, before any script
       runs — cutting in JS alone would show the full list and then snatch it
       back, which is worse than not collapsing.

       Once the script runs it takes over: it marks overflow items with
       .reveal-cut and sets data-managed, which switches these rules off. That
       hand-off is what lets a collapsed list live inside a filtered grid. The
       CSS counts DOM position; a search that hides nine of the first ten cards
       would leave one card and a fade over nothing. The script counts what is
       actually VISIBLE, so it cooperates with any page's own filter without
       that page having to know this component exists.

       Everything is gated on .has-js: with no scripting the button cannot
       work, so nothing is hidden and the reader gets the whole list.

       USAGE
         <div class="reveal" id="x" data-show="12" data-show-mobile="4">
           <div class="reveal-item">…</div>     ← siblings of each other
         </div>
         <button class="reveal-btn" data-reveal="x" data-noun="trade">
           <span class="label"></span><span class="chev">▼</span>
         </button>                                                          */

    .reveal { position: relative; }

    /* Pre-script cut. Enumerated because nth-child cannot take a variable.

       These were generated by a Jinja loop over a list of thresholds while
       this CSS lived inline in base.html. It is a static file now, so the
       rules are written out — and the list's job, keeping thresholds in step
       with the data-show values templates use, is done by a test instead:
       test_every_reveal_threshold_has_a_rule fails if a template uses a value
       with no rule here. That test found one on the way in: /history used
       data-show-mobile="2", which the list never contained, so on a phone the
       whole history showed until the script ran and then jumped shut. */
    
    .has-js .reveal.is-collapsed[data-show="3"]:not([data-managed]) > .reveal-item:nth-child(n+4),
    .has-js .reveal.is-collapsed[data-show="3"]:not([data-managed]) > * > .reveal-item:nth-child(n+4) { display: none; }
    .has-js .reveal.is-collapsed[data-show="4"]:not([data-managed]) > .reveal-item:nth-child(n+5),
    .has-js .reveal.is-collapsed[data-show="4"]:not([data-managed]) > * > .reveal-item:nth-child(n+5) { display: none; }
    .has-js .reveal.is-collapsed[data-show="5"]:not([data-managed]) > .reveal-item:nth-child(n+6),
    .has-js .reveal.is-collapsed[data-show="5"]:not([data-managed]) > * > .reveal-item:nth-child(n+6) { display: none; }
    .has-js .reveal.is-collapsed[data-show="6"]:not([data-managed]) > .reveal-item:nth-child(n+7),
    .has-js .reveal.is-collapsed[data-show="6"]:not([data-managed]) > * > .reveal-item:nth-child(n+7) { display: none; }
    .has-js .reveal.is-collapsed[data-show="8"]:not([data-managed]) > .reveal-item:nth-child(n+9),
    .has-js .reveal.is-collapsed[data-show="8"]:not([data-managed]) > * > .reveal-item:nth-child(n+9) { display: none; }
    .has-js .reveal.is-collapsed[data-show="10"]:not([data-managed]) > .reveal-item:nth-child(n+11),
    .has-js .reveal.is-collapsed[data-show="10"]:not([data-managed]) > * > .reveal-item:nth-child(n+11) { display: none; }
    .has-js .reveal.is-collapsed[data-show="12"]:not([data-managed]) > .reveal-item:nth-child(n+13),
    .has-js .reveal.is-collapsed[data-show="12"]:not([data-managed]) > * > .reveal-item:nth-child(n+13) { display: none; }
    .has-js .reveal.is-collapsed[data-show="14"]:not([data-managed]) > .reveal-item:nth-child(n+15),
    .has-js .reveal.is-collapsed[data-show="14"]:not([data-managed]) > * > .reveal-item:nth-child(n+15) { display: none; }
    .has-js .reveal.is-collapsed[data-show="15"]:not([data-managed]) > .reveal-item:nth-child(n+16),
    .has-js .reveal.is-collapsed[data-show="15"]:not([data-managed]) > * > .reveal-item:nth-child(n+16) { display: none; }
    .has-js .reveal.is-collapsed[data-show="20"]:not([data-managed]) > .reveal-item:nth-child(n+21),
    .has-js .reveal.is-collapsed[data-show="20"]:not([data-managed]) > * > .reveal-item:nth-child(n+21) { display: none; }
    .has-js .reveal.is-collapsed[data-show="25"]:not([data-managed]) > .reveal-item:nth-child(n+26),
    .has-js .reveal.is-collapsed[data-show="25"]:not([data-managed]) > * > .reveal-item:nth-child(n+26) { display: none; }

    /* Post-script cut. One class, applied to whatever overflowed. */
    .has-js .reveal.is-collapsed .reveal-item.reveal-cut { display: none !important; }

    /* A soft fade over the last visible rows, so it reads as "there is more"
       rather than "the list ends here". */
    .has-js .reveal.is-collapsed::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none;
    }
    /* Nothing was cut, so there is nothing to hint at. */
    .has-js .reveal.is-collapsed[data-nothing-hidden]::after { content: none; }

    .reveal-btn { display: none; }
    .has-js .reveal-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; margin: 4px 0 32px; padding: 11px 18px;
      background: var(--surface); color: var(--text-muted);
      border: 1px solid var(--border); border-radius: var(--radius);
      font-family: inherit; font-size: 0.82rem; letter-spacing: 0.03em;
      cursor: pointer; transition: all var(--t);
    }
    .has-js .reveal-btn:hover { border-color: var(--accent); color: var(--accent); }
    .reveal-btn .chev { transition: transform var(--t); font-size: 0.7rem; }
    .reveal-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
    /* A "See more" that shows nothing more is worse than no button. */
    .has-js .reveal-btn[hidden] { display: none; }

    @media (max-width: 768px) {
      
      .has-js .reveal.is-collapsed[data-show-mobile="2"]:not([data-managed]) > .reveal-item:nth-child(n+3),
      .has-js .reveal.is-collapsed[data-show-mobile="2"]:not([data-managed]) > * > .reveal-item:nth-child(n+3) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="3"]:not([data-managed]) > .reveal-item:nth-child(n+4),
      .has-js .reveal.is-collapsed[data-show-mobile="3"]:not([data-managed]) > * > .reveal-item:nth-child(n+4) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="4"]:not([data-managed]) > .reveal-item:nth-child(n+5),
      .has-js .reveal.is-collapsed[data-show-mobile="4"]:not([data-managed]) > * > .reveal-item:nth-child(n+5) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="5"]:not([data-managed]) > .reveal-item:nth-child(n+6),
      .has-js .reveal.is-collapsed[data-show-mobile="5"]:not([data-managed]) > * > .reveal-item:nth-child(n+6) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="6"]:not([data-managed]) > .reveal-item:nth-child(n+7),
      .has-js .reveal.is-collapsed[data-show-mobile="6"]:not([data-managed]) > * > .reveal-item:nth-child(n+7) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="8"]:not([data-managed]) > .reveal-item:nth-child(n+9),
      .has-js .reveal.is-collapsed[data-show-mobile="8"]:not([data-managed]) > * > .reveal-item:nth-child(n+9) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="10"]:not([data-managed]) > .reveal-item:nth-child(n+11),
      .has-js .reveal.is-collapsed[data-show-mobile="10"]:not([data-managed]) > * > .reveal-item:nth-child(n+11) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="12"]:not([data-managed]) > .reveal-item:nth-child(n+13),
      .has-js .reveal.is-collapsed[data-show-mobile="12"]:not([data-managed]) > * > .reveal-item:nth-child(n+13) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="14"]:not([data-managed]) > .reveal-item:nth-child(n+15),
      .has-js .reveal.is-collapsed[data-show-mobile="14"]:not([data-managed]) > * > .reveal-item:nth-child(n+15) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="15"]:not([data-managed]) > .reveal-item:nth-child(n+16),
      .has-js .reveal.is-collapsed[data-show-mobile="15"]:not([data-managed]) > * > .reveal-item:nth-child(n+16) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="20"]:not([data-managed]) > .reveal-item:nth-child(n+21),
      .has-js .reveal.is-collapsed[data-show-mobile="20"]:not([data-managed]) > * > .reveal-item:nth-child(n+21) { display: none; }
      .has-js .reveal.is-collapsed[data-show-mobile="25"]:not([data-managed]) > .reveal-item:nth-child(n+26),
      .has-js .reveal.is-collapsed[data-show-mobile="25"]:not([data-managed]) > * > .reveal-item:nth-child(n+26) { display: none; }
      .has-js .reveal.is-collapsed::after { height: 48px; }
    }