/*
 * CryptoBubbles design system.
 *
 * One stylesheet for every page. Colours are tokens so the dark theme only
 * swaps variables ([data-theme="dark"] on <html>, set before first paint by
 * the inline script in views/layouts/boilerplate.ejs). Served with a
 * content-hash query string (app.locals.siteCss), so edits reach returning
 * visitors despite the 7-day static cache.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --surface: #f4f5f6;
  --card: #ffffff;
  --ink: #1d1d22;
  --ink-2: #3c4046;
  --muted: #5f6368;
  --faint: #9aa0a6;
  --line: #e3e5e8;
  --line-2: #eef0f2;
  --row-line: #f0f1f3;
  --row-hover: #f2f4f5;
  --row-sel: #e3f1f1;
  --input-line: #c9cdd2;
  --dark: #141418;
  --dark-2: #1b1b21;
  --on-dark: #ffffff;
  --on-dark-muted: #c3c7ce;
  --accent: #0b7f84;
  --accent-hover: #075b5f;
  --brand: #4cafb1;
  --brand-ink: #0d1b1c;
  --up: #0b6f73;
  --down: #a3245e;
  --warm: #a35400;
  --cool: #1565c0;
  --track: #eef0f2;
  --track-mid: #9aa0a6;
  --label-bg: rgba(255, 255, 255, 0.92);
  --shadow: 0 24px 64px rgba(20, 20, 24, 0.24);
  --dots: rgba(20, 20, 24, 0.10);
  --star: #e8a200;
  /* Score history chart bands: one warm and one cool hue, pale near zero
     and deeper toward the extremes, grey for stable. */
  --band-euphoria: #ef7155;
  --band-fomo: #f8a06a;
  --band-heated: #fcc58f;
  --band-healthy: #fde3c8;
  --band-stable: #ececea;
  --band-weak: #dbe9f8;
  --band-fear: #b5d1f2;
  --band-panic: #86b0e8;
  --band-capitulation: #5b8bd9;
  /* Score bars (table, quick view): the same two hues, deeper toward the
     extremes. Light values match metaBg in utils/scores.js bandFor. */
  --bar-euphoria: #c43a1c;
  --bar-fomo: #d95a22;
  --bar-heated: #e57a30;
  --bar-healthy: #eb9a4c;
  --bar-stable: #9aa0a6;
  --bar-weak: #6fa3e6;
  --bar-fear: #4a86dc;
  --bar-panic: #2f68c9;
  --bar-capitulation: #1f4aa8;
  --zero: #7a8088;
  --heated: #c76a00;
  --fear: #1565c0;
  --delta-up-bg: #fff1e0;
  --delta-up: #8a4600;
  --delta-down-bg: #e3effc;
  --delta-down: #0d47a1;
  --range-band: #6cbcbe;
  --chart-up: #b8e0e0;
  --chart-down: #f3a8cc;
  --chart-line: #2b2e33;
  --chart-tick: #5f6368;
  --chart-grid: #eef0f2;
  /* Brand teal, from near-black. The homepage hero swaps it for the
     market mood's band (.hero.mood-*). */
  --hero: linear-gradient(110deg, #12363b 0%, #0f5f66 55%, #12828a 100%);
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  color-scheme: light;
}

/* Dark theme: only tokens change. Heat cells keep their light shades with
   dark text, as in the mockup. */
[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a20;
  --card: #14171c;
  --ink: #e6e8eb;
  --ink-2: #c9cdd3;
  --muted: #a3a9b1;
  --faint: #8b9199;
  --line: #262a33;
  --line-2: #1f232a;
  --row-line: #1f232a;
  --row-hover: #1c2027;
  --row-sel: #15302f;
  --input-line: #333944;
  --dark: #0a0b0e;
  --accent: #5cc2c4;
  --accent-hover: #8adbdc;
  --up: #5cc2c4;
  --down: #f27bb0;
  --warm: #ffb366;
  --cool: #7ab8ff;
  --track: #262a33;
  --track-mid: #6b7280;
  --label-bg: rgba(15, 17, 21, 0.88);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  --dots: rgba(255, 255, 255, 0.06);
  --star: #ffd166;
  /* Dark steps run the other way: near zero sits close to the card,
     the extremes are the brightest. */
  --band-euphoria: #b5513a;
  --band-fomo: #8e4b22;
  --band-heated: #683f1a;
  --band-healthy: #4a321c;
  --band-stable: #1e2127;
  --band-weak: #1d3350;
  --band-fear: #244878;
  --band-panic: #2e5c9c;
  --band-capitulation: #3f72c4;
  /* On the dark track the extremes are the brightest. */
  --bar-euphoria: #ff9c6a;
  --bar-fomo: #d98446;
  --bar-heated: #b46f38;
  --bar-healthy: #8f5a2e;
  --bar-stable: #6b7280;
  --bar-weak: #3f6699;
  --bar-fear: #4f80c8;
  --bar-panic: #6a9ae6;
  --bar-capitulation: #8fb6ff;
  --zero: #6b7280;
  --heated: #ffb366;
  --fear: #7ab8ff;
  --delta-up-bg: #3a2610;
  --delta-up: #ffc58a;
  --delta-down-bg: #12263d;
  --delta-down: #a8ccff;
  --range-band: #3f9496;
  --chart-up: #1f5557;
  --chart-down: #5e2445;
  --chart-line: #e6e8eb;
  --chart-tick: #a3a9b1;
  --chart-grid: #1f232a;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Controls that need JS; the js class is set in <head> before first paint. */
html:not(.js) .js-only { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-secondary { color: var(--muted); }
.show-sm { display: none; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--card); color: var(--ink); }
.skip-link:focus { top: 12px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
/* Band colours (utils/scores.js) are dark; lighten them on the dark theme. */
.tint { color: var(--c); }
/* Score text on dark: lifted toward white, still clearly orange or blue
   (6:1 or more on cards and hovered rows). */
[data-theme="dark"] .tint { color: color-mix(in srgb, var(--c) 60%, #ffffff); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.dots { background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 22px 22px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-dark { background: var(--dark); color: #ffffff; }
.btn-dark:hover { background: #2a2a31; color: #ffffff; }
[data-theme="dark"] .btn-dark { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .btn-dark:hover { background: #ffffff; color: var(--bg); }
.btn-light { background: #ffffff; color: var(--dark); }
.btn-light:hover { background: #eef0f2; color: var(--dark); }
.btn-line { border-color: var(--input-line); color: var(--ink); background: var(--card); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #ffffff; }
.btn-ghost:hover { border-color: #ffffff; color: #ffffff; }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-brand:hover { background: #63c0c2; color: var(--brand-ink); }
.btn-caps { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.btn-icon { width: 44px; padding: 0; }
.btn-sm { padding: 0 16px; font-size: 14px; }
.btn-line[aria-pressed="true"], .btn-line[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.is-copied, .is-copied:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header { background: var(--dark); color: #ffffff; position: relative; z-index: 40; }
.site-header .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 36px; max-width: 1400px; margin: 0 auto; padding: 14px 24px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 26px; line-height: 1; }
.logo svg { width: 26px; height: 26px; color: var(--brand); }
.logo .l-crypto { color: var(--brand); letter-spacing: -0.01em; }
.logo .l-bubbles { color: #ffffff; background: var(--brand); padding: 1px 10px 3px; border-radius: 6px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.site-nav a { color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 12px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; }
.theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .site-header, [data-theme="dark"] .site-footer { border-color: var(--line-2); border-style: solid; border-width: 0 0 1px; }
[data-theme="dark"] .site-footer { border-width: 1px 0 0; }
[data-theme="dark"] .section-dark { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
[data-theme="dark"] .method-card { border: 1px solid var(--line); }
/* Logos with transparent dark glyphs would vanish on the dark theme. */
[data-theme="dark"] .cb-row-main img, [data-theme="dark"] .rank-item img, [data-theme="dark"] .mover img,
[data-theme="dark"] .chip img, [data-theme="dark"] .qv-logo, [data-theme="dark"] .data-table .coin img { background: #ffffff; }

/* ── Hero strip (homepage) ────────────────────────────────────────────────── */
.hero { background: var(--hero); color: #ffffff; }
/* Tinted by the market mood, in the score charts' two hues: orange above
   zero and blue below, deeper toward the extremes, grey when stable.
   White text keeps at least 5:1 on every stop. */
.hero.mood-euphoria { background: linear-gradient(110deg, #4a0f08 0%, #a32a12 55%, #c2381c 100%); }
.hero.mood-fomo { background: linear-gradient(110deg, #43170a 0%, #963a12 55%, #b24a18 100%); }
.hero.mood-heated { background: linear-gradient(110deg, #3d1f0a 0%, #8a4512 55%, #a85a1a 100%); }
.hero.mood-healthy { background: linear-gradient(110deg, #33240f 0%, #6e4c22 55%, #8a6230 100%); }
.hero.mood-stable { background: linear-gradient(110deg, #1e2329 0%, #3a434d 55%, #56616d 100%); }
.hero.mood-weak { background: linear-gradient(110deg, #13294a 0%, #1f4c8a 55%, #2d66b3 100%); }
.hero.mood-fear { background: linear-gradient(110deg, #0f2350 0%, #1a4699 55%, #2459c2 100%); }
.hero.mood-panic { background: linear-gradient(110deg, #0c1c4a 0%, #173ea3 55%, #1f4fd0 100%); }
.hero.mood-capitulation { background: linear-gradient(110deg, #0a1545 0%, #1531a6 55%, #1c3fd8 100%); }
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 28px; padding-bottom: 28px; }
.hero-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.hero-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.01em; }
.hero-sub { font-size: 17px; }
.hero-sub a { color: inherit; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.glass { border-radius: 16px; background: rgba(10, 10, 25, 0.24); border: 1px solid rgba(255, 255, 255, 0.22); }
.stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 18px; }
.stat-k { font-size: 13px; }
.stat-v { font-family: var(--num); font-size: 20px; font-weight: 600; }
.stat-v small { font-size: 15px; font-weight: 400; }
.mood { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.mood-score { font-family: var(--num); font-size: 40px; font-weight: 600; line-height: 1; }
.mood-text { display: flex; flex-direction: column; gap: 2px; }
.mood-k { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.mood-s { font-size: 13px; }
a.mood { color: #ffffff; text-decoration: none; }
a.mood:hover { background: rgba(10, 10, 25, 0.38); color: #ffffff; }
.mood-spark { width: 96px; height: 34px; flex-shrink: 0; overflow: visible; }
.mood-spark polyline { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mood-spark line { stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hero-movers { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-movers-k { margin-right: 4px; color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.hero-movers-k:hover { color: #ffffff; text-decoration: underline; }
.mchip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 6px; border-radius: 999px; background: rgba(10, 10, 25, 0.24); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; font-size: 14px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.mchip:hover { background: rgba(10, 10, 25, 0.38); color: #ffffff; }
.mchip img { width: 22px; height: 22px; border-radius: 50%; background: #ffffff; }
.mchip b { padding: 1px 9px; border-radius: 999px; font-family: var(--num); font-size: 13px; font-weight: 600; }
.mchip.up b { background: #fff1e0; color: #8a4600; }
.mchip.down b { background: #e3effc; color: #0d47a1; }

/* ── Table toolbar ────────────────────────────────────────────────────────── */
.scores { padding: 20px 0 48px; }
.scores .wrap { display: flex; flex-direction: column; gap: 16px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.toolbar-note { font-size: 14px; color: var(--muted); }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-link { text-align: center; font-size: 13px; }
.page-link a { color: var(--muted); text-decoration: none; }
.page-link a:hover { text-decoration: underline; }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { width: 230px; height: 44px; padding: 0 14px 0 38px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--card); font-size: 14px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap select { width: 220px; height: 44px; padding: 0 38px 0 16px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
.select-wrap svg { position: absolute; right: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.fchip:hover { border-color: var(--ink); }
.toolbar-actions .fchip { min-height: 44px; }
.fchip svg { width: 15px; height: 15px; }
.fchip-n { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface); font-family: var(--num); font-size: 12px; text-align: center; }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fchip[aria-pressed="true"] .fchip-n { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.fchip[data-filter="mine"][aria-pressed="true"] svg { fill: var(--star); stroke: var(--star); }
.view-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.view-status #view-text { color: var(--ink-2); font-weight: 500; }
.view-status .link-btn { min-height: 36px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.col-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 32px; padding: 18px 22px; border-radius: 16px; background: var(--surface); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.empty-note { padding: 28px; border: 1px dashed var(--input-line); border-radius: 16px; text-align: center; font-size: 15px; color: var(--muted); }
.loading-more { text-align: center; font-size: 13px; color: var(--muted); min-height: 20px; }

/* ── Dense coin table ─────────────────────────────────────────────────────── */
.cb-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)); gap: 16px 24px; align-items: start; }
/* overflow: clip, unlike hidden, leaves the column header free to stick to
   the top of the screen; older browsers fall back to hidden and it scrolls. */
.cb-block { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; overflow: clip; background: var(--card); }
.cb-inner { min-width: 620px; }
.cb-cols { display: grid; grid-template-columns: 22px 48px minmax(56px, 1fr) 34px 50px 50px 50px 38px 42px 38px minmax(104px, 1.4fr); align-items: center; gap: 0 4px; text-align: center; }
.cb-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; background: var(--surface); color: var(--muted); font-size: 12px; }
.cb-head .cb-cols { flex: 1; min-width: 0; padding: 4px 10px; }
.cb-head .h { height: 30px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.cb-head button.h { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cb-head button.h:hover { background: var(--line); color: var(--ink); }
.cb-head button.h.is-active { color: var(--ink); font-weight: 600; }
.cb-row { display: flex; align-items: center; border-top: 1px solid var(--row-line); }
.cb-row-main { flex: 1; min-width: 0; height: 32px; padding: 0 10px; color: var(--ink); text-decoration: none; font-family: var(--num); font-size: 13px; }
.cb-row-main:hover, .cb-row-main:focus-visible { background: var(--row-hover); color: var(--ink); }
.cb-row.is-open { background: var(--row-sel); }
.cb-star { width: 30px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.cb-star:hover { color: var(--star); }
.has-stars .cb-head::before { content: ''; width: 30px; flex-shrink: 0; }
.has-stars .cb-head .cb-cols, .has-stars .cb-row-main { padding-left: 0; }
.cb-star[aria-pressed="true"], .qv-star[aria-pressed="true"] { color: var(--star); }
[data-star][aria-pressed="true"] svg { fill: var(--star); stroke: var(--star); }
.btn[data-star][aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: var(--dark); }
.cb-row-main img { width: 18px; height: 18px; border-radius: 50%; justify-self: center; }
.cb-row-main .c-rank { color: var(--muted); }
.cb-row-main .c-num i { margin-left: 2px; font-size: 11px; }
/* Five wide characters (e.g. Chinese) are wider than the column; keep the
   row one line high. */
.cb-row-main .c-sym { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat { height: 24px; line-height: 24px; border-radius: 4px; }
.heat small { font-size: 0.85em; }
.heat.hd { color: #111111; }
.heat.hl { color: #ffffff; }
.heat.hn { color: var(--faint); }
/* Risk score cell: the number, then the bar on a track of its own, so the
   number never covers the bar. Phones stack them (see the media query). */
.risk { height: 24px; display: flex; align-items: center; gap: 6px; }
.risk-num { min-width: 46px; text-align: right; font-weight: 600; white-space: nowrap; }
.risk-num .ico { font-size: 11px; margin-left: 2px; }
.risk-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.risk-mid { position: absolute; left: 50%; top: -5px; width: 1px; height: 16px; background: var(--track-mid); }
.risk-bar { position: absolute; top: -2px; height: 10px; border-radius: 3px; }
.risk.is-pegged .risk-num { flex: 1; text-align: center; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.risk.is-pegged .risk-track { display: none; }

/* ── Quick view ───────────────────────────────────────────────────────────── */
.qv { position: fixed; z-index: 60; top: 88px; left: 50%; transform: translateX(-50%); width: 780px; max-width: calc(100% - 24px); max-height: calc(100vh - 104px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.qv[hidden] { display: none; }
/* The top bar (star, copy, Full page, close) stays at the top while the
   panel scrolls. It reaches over the panel's padding so what scrolls under
   it is hidden; table.js adds is-scrolled for the line beneath it. */
.qv-head { display: flex; align-items: center; gap: 12px; position: sticky; top: -22px; z-index: 3; margin: -22px -24px -10px; padding: 22px 24px 10px; background: var(--card); }
.qv.is-scrolled .qv-head { box-shadow: 0 1px 0 var(--line); }
.qv-logo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.qv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qv-title h2 { font-size: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-title span { font-size: 14px; color: var(--muted); }
.qv-close { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.qv-close svg { width: 18px; height: 18px; }
.qv-itsa { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.qv-itsa img { height: 20px; width: auto; }
.qv-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: center; }
.qv-price { display: flex; flex-direction: column; gap: 10px; }
.qv-price-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qv-price-now .v { font-family: var(--num); font-size: 36px; font-weight: 600; line-height: 1; }
.qv-chip { padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-family: var(--num); font-size: 15px; font-weight: 600; }
.qv-chip.up { background: color-mix(in srgb, var(--up) 13%, transparent); }
.qv-chip.down { background: color-mix(in srgb, var(--down) 12%, transparent); }
.qv .up { color: var(--up); }
.qv .down { color: var(--down); }
.qv-from { font-size: 14px; color: var(--muted); }
.qv-from b { font-family: var(--num); }
.qv-score { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-radius: 16px; background: var(--surface); }
.qv-label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.qv-score-big { display: flex; align-items: baseline; gap: 10px; }
.qv-score-big .s { font-family: var(--num); font-size: 40px; font-weight: 600; line-height: 1; }
.qv-score-big .b { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.qv-score-peg { font-size: 22px; font-weight: 600; }
.qv-score-sub { font-size: 13px; color: var(--ink-2); }
.qv-score-sub b { font-family: var(--num); }
.qv-meter { position: relative; height: 8px; border-radius: 4px; background: var(--line); }
.qv-meter .mid { position: absolute; left: 50%; top: -3px; width: 2px; height: 14px; background: var(--zero); }
.qv-meter .bar { position: absolute; top: 0; height: 8px; border-radius: 4px; }
/* One slider: all-time low to all-time high, 24h range as a band, price as the marker. */
.price-range { display: flex; flex-direction: column; gap: 8px; }
.price-range-ends { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.price-range-ends > div { display: flex; flex-direction: column; }
.price-range-ends .r { text-align: right; }
.price-range-ends .k { font-size: 12px; color: var(--muted); }
.price-range-ends .v { font-family: var(--num); font-size: 16px; font-weight: 600; }
.price-range-track { position: relative; height: 18px; }
.price-range-track .t { position: absolute; left: 0; right: 0; top: 5px; height: 8px; border-radius: 4px; background: var(--track); }
.price-range-track .e { position: absolute; top: 1px; width: 2px; height: 16px; background: var(--faint); }
.price-range-track .e.l { left: 0; }
.price-range-track .e.r { right: 0; }
.price-range-track .band { position: absolute; top: 5px; height: 8px; min-width: 6px; border-radius: 4px; background: var(--range-band); }
.price-range-track .now { position: absolute; top: 0; width: 18px; height: 18px; margin-left: -9px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--ink); }
.price-range-label { position: relative; height: 18px; font-family: var(--num); font-size: 13px; color: var(--ink-2); }
.price-range-label > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.price-range-label b { color: var(--up); }
.price-range-label b.now { color: var(--ink); }
/* In the coin page banner, whose colour follows the band: light on dark, the
   same in both themes. */
.price-range-on-dark { max-width: 560px; }
.price-range-on-dark .price-range-ends .k { color: rgba(255, 255, 255, 0.82); }
.price-range-on-dark .price-range-ends .v { color: #ffffff; }
.price-range-on-dark .price-range-track .t { background: rgba(255, 255, 255, 0.22); }
.price-range-on-dark .price-range-track .e { background: rgba(255, 255, 255, 0.6); }
.price-range-on-dark .price-range-track .band { background: rgba(255, 255, 255, 0.78); }
.price-range-on-dark .price-range-track .now { background: #141418; border-color: #ffffff; box-shadow: 0 0 0 1px rgba(20, 20, 24, 0.45); }
.price-range-on-dark .price-range-label { color: rgba(255, 255, 255, 0.9); }
.price-range-on-dark .price-range-label b, .price-range-on-dark .price-range-label b.now { color: #ffffff; }
/* Charts: one at a time behind tabs. */
.qv-chart { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.qv-tabs { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 999px; background: var(--surface); }
.qv-tab { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.qv-tab:hover { color: var(--ink); }
.qv-tab[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 20, 24, 0.16); }
.qv-panel { display: flex; flex-direction: column; gap: 6px; }
.qv-caption { min-height: 20px; font-size: 13px; color: var(--muted); }
.qv-panel .chart-box { position: relative; height: 170px; }
.qv-changes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: center; }
.qv-changes > div { display: flex; flex-direction: column; gap: 2px; }
.qv-changes .k { font-size: 12px; color: var(--muted); }
.qv-changes .v { font-family: var(--num); font-size: 17px; font-weight: 600; }
.qv-facts { padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.qv-facts b { font-family: var(--num); font-size: 15px; color: var(--ink); }
/* Copy link: an icon on wide screens, labelled on phones. */
.qv-copy { width: 44px; padding: 0; }
.qv-copy .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The score chart, compact: three scale marks and three dates; the caption
   explains the dashed lines. */
.qv .sc-note { display: none; }
.qv .sc-x span:nth-child(2), .qv .sc-x span:nth-child(4) { display: none; }
.qv .sc-y { width: 30px; font-size: 11px; }
.qv .sc-y span:nth-child(2), .qv .sc-y span:nth-child(4) { display: none; }
.qv .sc-x, .qv .sc-note { font-size: 11px; }
.qv .sc-main { gap: 4px; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding: 80px 0; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin-bottom: 36px; }
.section-head h2 { font-size: 40px; }
.section-head p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.section-grey { background-color: var(--surface); }
.section-dark { background-color: var(--dark); color: #ffffff; }
.section-dark .label { color: var(--on-dark-muted); }
.section-dark .section-head p { color: var(--on-dark-muted); }
.section-dark.dots { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.card-head h3 { font-size: 22px; font-weight: 600; }
.card-head span { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.rank-item:hover { color: var(--ink); background: var(--row-hover); }
.rank-item .pos { width: 16px; font-family: var(--num); color: var(--muted); }
.rank-item img { width: 30px; height: 30px; border-radius: 50%; }
.rank-item .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-item .who b { font-size: 16px; font-weight: 600; }
.rank-item .who span { font-size: 13px; color: var(--muted); }
.rank-item .val { font-family: var(--num); font-size: 24px; font-weight: 600; }
.weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.weight { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.weight .pct { font-family: var(--num); font-size: 44px; font-weight: 600; }
.weight h3 { font-size: 22px; font-weight: 600; }
.weight p { font-size: 16px; line-height: 1.6; color: var(--on-dark-muted); }
.prose-dark { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin-top: 40px; font-size: 16px; line-height: 1.65; color: var(--on-dark-muted); }
.prose-dark h3 { font-size: 20px; font-weight: 600; color: #ffffff; margin-top: 8px; }
.trust { padding: 48px 0; border-bottom: 1px solid var(--line-2); }
.trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; }
.trust-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent); }
.cta { padding: 110px 0; text-align: center; background: radial-gradient(ellipse at center, rgba(91, 60, 196, 0.10) 0%, rgba(15, 125, 134, 0.07) 35%, transparent 70%); }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 820px; }
.cta h2 { font-size: 46px; }
.cta p { font-size: 19px; color: var(--ink-2); }
.cta .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: var(--on-dark-muted); padding: 64px 0 40px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 380px; font-size: 15px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 64px; }
.footer-cols nav { display: flex; flex-direction: column; gap: 4px; }
.footer-cols .h { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #a9aeb6; margin-bottom: 6px; }
.footer-cols a { color: #ffffff; text-decoration: none; font-size: 15px; padding: 6px 0; }
.footer-cols a:hover { color: var(--brand); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.6; color: #a9aeb6; }
.footer-bottom p { max-width: 900px; }
.footer-bottom img { height: 34px; width: auto; }

/* ── Coin page ────────────────────────────────────────────────────────────── */
/* The page sets the coin's logo colours inline (utils/logoColors.js); this
   is the banner until they have been worked out. */
.coin-hero { color: #ffffff; background: var(--hero); }
.coin-hero .wrap-narrow { display: flex; flex-direction: column; gap: 28px; padding-top: 36px; padding-bottom: 56px; }
.crumbs { font-size: 14px; }
.crumbs a { color: inherit; }
.crumbs span[aria-hidden] { margin: 0 8px; }
.coin-hero .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 40px; }
.coin-id { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.coin-id .name { display: flex; align-items: center; gap: 20px; }
.coin-id .name img { width: 72px; height: 72px; border-radius: 50%; background: #ffffff; flex-shrink: 0; }
.coin-id h1 { font-size: 52px; line-height: 1.05; }
.coin-id h1 .h1-rest { display: block; margin-top: 8px; font-size: 22px; font-weight: 400; line-height: 1.3; }
.score-card .label { color: inherit; }
.coin-id .sub { font-size: 20px; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pill { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 15px; }
.price-big { font-family: var(--num); font-size: 34px; font-weight: 600; }
.coin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.score-card { flex: 0 1 440px; display: flex; flex-direction: column; gap: 16px; padding: 28px 30px; border-radius: 24px; background: rgba(5, 10, 30, 0.30); border: 1px solid rgba(255, 255, 255, 0.24); }
.score-card .big { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.score-card .big .s { font-family: var(--num); font-size: 96px; font-weight: 600; line-height: 0.9; }
.score-card .big .b { font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.score-card .pegged-note { font-size: 30px; font-weight: 600; }
.meter { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); }
.meter .mid { position: absolute; left: 50%; top: -5px; width: 2px; height: 20px; background: rgba(255, 255, 255, 0.8); }
.meter .bar { position: absolute; top: 0; height: 10px; border-radius: 5px; }
/* Light tints, so the bar reads on any logo colour behind it. */
.meter .bar.warm { background: #ffc58a; }
.meter .bar.cool { background: #a8ccff; }
.meter .bar.flat { background: #e6e8eb; }
.meter-scale { display: flex; justify-content: space-between; font-size: 13px; margin-top: 8px; }
.subscores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.subscores div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.subscores b { font-family: var(--num); font-size: 26px; font-weight: 600; }
.coin-body { padding: 56px 0 24px; }
.coin-body .wrap-narrow { display: flex; flex-direction: column; gap: 32px; }
.narrative { display: flex; flex-direction: column; gap: 16px; max-width: 820px; font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.narrative h2, .h-small { font-size: 28px; color: var(--ink); }
.h-small { margin-bottom: 16px; }
.panel { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.panel-head h2 { font-size: 28px; }
.panel-head .sub { font-size: 15px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.chart-box { position: relative; height: 260px; }
.panel-title { display: flex; flex-direction: column; gap: 6px; max-width: 680px; }
.panel .sub { font-size: 15px; line-height: 1.5; color: var(--muted); }
/* The palest band swatches would vanish into the card without an edge. */
.legend-bands { gap: 8px 14px; font-size: 13px; }
.legend-bands span { gap: 6px; }
.legend-bands i { box-shadow: inset 0 0 0 1px var(--line); }
.legend-bands .legend-dash { display: none; }
.legend-dash i { width: 18px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0; box-shadow: none; }

/* ── Score history charts (views/partials/scoreChart.ejs) ─────────────────── */
.score-chart { display: flex; gap: 10px; }
.sc-y { position: relative; width: 36px; flex-shrink: 0; font-family: var(--num); font-size: 13px; color: var(--muted); }
.sc-y span { position: absolute; right: 0; transform: translateY(-50%); }
.sc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-plot { position: relative; touch-action: pan-y; }
.sc-plot svg { display: block; overflow: visible; }
.score-chart line, .score-chart polyline { vector-effect: non-scaling-stroke; }
.sc-grid { stroke: var(--line-2); }
/* Crisp edges, so neighbouring stripes meet without a light seam. */
.sc-band { shape-rendering: crispEdges; }
.sc-heated { stroke: var(--heated); stroke-dasharray: 5 5; }
.sc-fear { stroke: var(--fear); stroke-dasharray: 5 5; }
.sc-zero { stroke: var(--zero); }
.sc-line { fill: none; stroke: var(--chart-line); stroke-width: 1.6; stroke-linejoin: round; }
.sc-note { position: absolute; right: 6px; font-size: 12px; pointer-events: none; }
.sc-note-heated { color: var(--warm); }
.sc-note-fear { color: var(--cool); }
.sc-x { display: flex; justify-content: space-between; font-family: var(--num); font-size: 13px; color: var(--muted); }
.sc-mark { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--chart-line); border: 2px solid var(--card); pointer-events: none; }
.sc-tip { position: absolute; top: -30px; transform: translateX(-50%); padding: 3px 10px; border-radius: 8px; background: var(--dark); color: #ffffff; font-family: var(--num); font-size: 13px; white-space: nowrap; pointer-events: none; }

/* ── Market mood and movers (homepage) ────────────────────────────────────── */
.mood-section { padding: 0 0 64px; }
.mood-section .wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.mood-panel { flex: 2 1 640px; min-width: 0; }
.movers { flex: 1 1 360px; min-width: 0; gap: 6px; }
.panel h2 { font-size: 28px; }
.movers h3 { margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.movers h3.up { color: var(--warm); }
.movers h3.down { color: var(--cool); }
.mover { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.mover:hover { background: var(--row-hover); color: var(--ink); }
.mover img { width: 28px; height: 28px; border-radius: 50%; }
.mover .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mover .who b { font-size: 15px; font-weight: 600; }
.mover .who > span { font-family: var(--num); font-size: 13px; color: var(--muted); }
.mover .delta { padding: 3px 10px; border-radius: 999px; font-family: var(--num); font-size: 15px; font-weight: 600; }
.mover .delta.up { background: var(--delta-up-bg); color: var(--delta-up); }
.mover .delta.down { background: var(--delta-down-bg); color: var(--delta-down); }
.embed { flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
.embed-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.embed-main h2 { font-size: 24px; font-weight: 600; }
.embed-main p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.embed-main .btn { align-self: flex-start; }
.embed pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--dark); color: #e6e8eb; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.embed-preview { flex: 0 1 300px; display: flex; flex-direction: column; gap: 10px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.fact-card { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: var(--surface); }
.fact-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.fact-card .r { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.fact-card .r span:last-child { font-family: var(--num); font-size: 17px; }
.fact-card .up { color: var(--up); font-weight: 600; }
.fact-card .down { color: var(--down); font-weight: 600; }
.fact-card .site-link { margin-top: 12px; font-size: 15px; }
.method-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 40px; border-radius: 24px; color: #ffffff; background-color: var(--dark); background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 22px 22px; }
.method-card > div { flex: 1 1 520px; display: flex; flex-direction: column; gap: 12px; }
.method-card h2 { font-size: 28px; }
.method-card p { font-size: 17px; line-height: 1.6; color: var(--on-dark-muted); }
.method-card .btn { flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip img { width: 30px; height: 30px; border-radius: 50%; }
.chip .n { font-size: 16px; font-weight: 500; }
.chip .s { font-family: var(--num); font-size: 15px; font-weight: 600; }
.chip-back { padding-left: 14px; }
.chip-text { padding-left: 16px; }
.chip-back svg { width: 18px; height: 18px; }
.small-print { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ── Ranking list pages ───────────────────────────────────────────────────── */
.page-hero { background: var(--hero); color: #ffffff; }
.page-hero .wrap-narrow { display: flex; flex-direction: column; gap: 14px; padding-top: 36px; padding-bottom: 40px; }
.page-hero h1 { font-size: 44px; }
.page-hero p { font-size: 18px; line-height: 1.55; max-width: 820px; }
.page-hero .crumbs { color: #ffffff; }
.listpage { padding: 40px 0 72px; }
.listpage .wrap-narrow { display: flex; flex-direction: column; gap: 24px; }
.updated { font-size: 14px; color: var(--muted); }
.table-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.table-card .cb-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.data-table thead th { background: var(--surface); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.data-table td.n, .data-table th.n { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table .coin { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.data-table .coin img { width: 22px; height: 22px; border-radius: 50%; }
.data-table .sym { color: var(--muted); font-size: 13px; margin-left: 6px; }
.data-table .pos { color: var(--up); }
.data-table .neg { color: var(--down); }
.other-lists { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }

/* ── Information pages ────────────────────────────────────────────────────── */
.textpage { max-width: 924px; margin: 0 auto; padding: 40px 32px 80px; display: flex; flex-direction: column; gap: 16px; }
.textpage .updated { font-size: 14px; color: var(--muted); }
.textpage h1 { font-size: 40px; margin: 4px 0 8px; }
.textpage h2 { font-size: 22px; font-weight: 600; margin-top: 24px; }
.textpage p, .textpage li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.textpage ul { margin: 0; padding-left: 22px; }
.textpage .crumbs { color: var(--muted); }
.textpage table { width: 100%; border-collapse: collapse; font-size: 15px; }
.textpage th, .textpage td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.textpage thead th { background: var(--surface); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.textpage code { font-size: 0.9em; }
.notfound { padding: 96px 0; text-align: center; }
.notfound .wrap-narrow { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.notfound h1 { font-size: 64px; }

/* ── Tablets in landscape ─────────────────────────────────────────────────── */
/* iPads in landscape (1024-1311px) used to get one stretched table under a
   banner that wrapped to 365px. Here the banner keeps to one row plus the
   This week chips, and the two tables sit side by side, as on desktop:
   without the rank$ column (rows are in market cap order already) and with
   the risk bar under the number, as on phones. */
@media (min-width: 1024px) and (max-width: 1311px) {
  .hero .wrap { gap: 14px 24px; padding-top: 20px; padding-bottom: 20px; }
  .hero-text { flex: 1 1 300px; }
  .hero-kicker, .hero-sub { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-stats { flex-wrap: nowrap; gap: 10px; }
  .hero-stats .stat-dom { display: none; }
  .mood, .stat { padding: 8px 14px; }
  .mood { gap: 12px; }
  .mood-score { font-size: 32px; }
  .mood-s { display: none; }
  .mood-spark { width: 72px; height: 28px; }
  .stat-v { font-size: 18px; }
  /* One line of chips that scrolls sideways, as on phones. */
  .hero-movers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hero-movers::-webkit-scrollbar { display: none; }
  .hero-movers-k { flex-shrink: 0; white-space: nowrap; }

  .cb-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cb-inner { min-width: 0; }
  .cb-cols { grid-template-columns: 18px 40px minmax(48px, 1fr) 42px 42px 42px 36px 38px 36px minmax(64px, 0.9fr); gap: 0 3px; }
  .cb-head .h[data-sort="rank"], .cb-row-main .c-rank { display: none; }
  .cb-row-main .c-num { white-space: nowrap; }
  .cb-head .cb-cols, .cb-row-main { padding: 0 6px; }
  .cb-star, .has-stars .cb-head::before { width: 26px; }
  .risk { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; }
  .risk-num { min-width: 0; text-align: center; line-height: 1.1; }
  .risk-track { flex: none; height: 4px; border-radius: 2px; }
  .risk-mid { top: -2px; height: 8px; }
  .risk-bar { top: 0; height: 4px; border-radius: 2px; }
  .risk.is-pegged .risk-num { flex: none; }
}

/* ── Phones and small tablets ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wrap, .wrap-narrow { padding: 0 16px; }
  .site-header .bar { padding: 6px 12px 6px 8px; }
  .logo { font-size: 21px; }
  .logo svg { display: none; }
  .menu-toggle { display: inline-flex; order: -1; }
  .site-nav { display: none; order: 10; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 8px 8px; }
  .site-header.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; font-size: 13px; }
  .header-actions .hide-sm { display: none; }
  .hero .wrap { padding-top: 14px; padding-bottom: 14px; gap: 10px; }
  .hero-kicker, .hero-sub { display: none; }
  .hero h1 { font-size: 26px; }
  .hero-stats { align-items: center; gap: 6px 12px; }
  .hero-stats .stat { display: none; }
  .mood { gap: 8px; padding: 4px 14px 4px 10px; border-radius: 999px; }
  .mood-score { font-size: 20px; }
  .mood-k { font-size: 11px; letter-spacing: 0.14em; }
  .mood-s { display: none; }
  .mood-spark { width: 52px; height: 22px; }
  /* Edge to edge so chips scroll off the screen, not off the padding.
     A flex item's width ignores negative margins, so set it. */
  .hero-movers { flex-basis: calc(100% + 32px); flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .hero-movers::-webkit-scrollbar { display: none; }
  .hero-movers-k { font-size: 11px; letter-spacing: 0.14em; flex-shrink: 0; }
  .mchip { min-height: 40px; font-size: 13px; }
  .hero-updated { font-size: 13px; }
  .scores { padding-top: 10px; }
  .scores .wrap { padding: 0 4px; gap: 10px; }
  .toolbar { padding: 0 8px; }
  .toolbar-note { display: none; }
  .toolbar-actions { width: 100%; flex-wrap: nowrap; }
  /* Search is just the magnifier until used, then takes the whole row
     (is-searching, set by public/js/table.js). 16px text stops iOS Safari
     zooming the page when the field is focused. */
  .toolbar-actions .search { flex: none; width: 44px; }
  .search input { width: 100%; padding: 0 0 0 42px; font-size: 16px; }
  .toolbar-actions:not(.is-searching) .search input { cursor: pointer; }
  .toolbar-actions:not(.is-searching) .search input::placeholder { color: transparent; }
  .toolbar-actions.is-searching .search { flex: 1; }
  .toolbar-actions.is-searching .search input { padding-right: 14px; }
  .toolbar-actions.is-searching > :not(.search) { display: none; }
  .toolbar-actions .select-wrap { flex: 1; min-width: 0; }
  .select-wrap select { width: 100%; padding: 0 32px 0 14px; }
  .select-wrap svg { right: 12px; }
  .toolbar-actions .btn { flex: none; min-width: 44px; padding: 0 14px; }
  #key-toggle { width: 44px; padding: 0; }
  .fchip { font-size: 13px; padding: 0 12px; }
  .vh-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .view-status { padding: 0 8px; font-size: 13px; gap: 0 12px; }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .col-key { margin: 0 8px; padding: 14px 16px; }
  .empty-note { margin: 0 8px; }
  .cb-tables { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cb-block { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
  .cb-inner { min-width: 0; }
  .cb-cols { grid-template-columns: 16px 34px minmax(38px, 1fr) 22px 34px 34px 34px 24px 26px 24px 58px; gap: 0 2px; }
  .cb-head { font-size: 10px; }
  .cb-head .cb-cols, .cb-row-main { padding: 0 4px; }
  .cb-row-main { height: 30px; font-size: 11px; }
  .cb-row-main img { width: 15px; height: 15px; }
  .heat { height: 22px; line-height: 22px; border-radius: 3px; }
  /* Phones: thin bar under the number. */
  .risk { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; }
  .risk-num { min-width: 0; text-align: center; line-height: 1.1; }
  .risk-num .ico { display: none; }
  .risk-track { flex: none; height: 4px; border-radius: 2px; }
  .risk-mid { top: -2px; height: 8px; }
  .risk-bar { top: 0; height: 4px; border-radius: 2px; }
  .risk.is-pegged .risk-num { flex: none; font-size: 9px; }
  .cb-row-main .c-num i { display: none; }
  .cb-star, .has-stars .cb-head::before { display: none; }
  .has-stars .cb-head .cb-cols, .has-stars .cb-row-main { padding-left: 4px; }
  .qv { top: 64px; left: 8px; right: 8px; width: auto; max-width: none; transform: none; padding: 14px 14px 16px; border-radius: 18px; }
  .qv-head { top: -14px; margin: -14px -14px -8px; padding: 14px 14px 8px; }
  .qv-title h2 { font-size: 19px; }
  .qv-summary { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .qv-price-now .v { font-size: 30px; }
  .qv-score { padding: 12px 14px; }
  .qv-score-big .s { font-size: 30px; }
  .price-range-ends .k { font-size: 11px; }
  .price-range-ends .v { font-size: 14px; }
  .price-range-label { font-size: 12px; }
  .qv-tabs { display: flex; align-self: stretch; }
  .qv-tab { flex: 1; min-height: 40px; padding: 0 8px; font-size: 13px; }
  .qv-panel .chart-box { height: 140px; }
  .qv-changes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  .qv-changes .v { font-size: 15px; }
  .qv-facts { font-size: 13px; }
  .qv-copy { width: auto; padding: 0 16px; }
  .qv-copy .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  /* Name and close on the first line, the other buttons on a second one,
     so long coin names are not cut short. */
  .qv-head { flex-wrap: wrap; }
  .qv-head > * { order: 2; }
  .qv-head .qv-logo, .qv-head .qv-title { order: 0; }
  .qv-head [data-qv-close] { order: 1; }
  .qv-head::after { content: ''; order: 1; flex-basis: 100%; }
  .section { padding: 56px 0; }
  .section-head h2, .cta h2 { font-size: 30px; }
  .coin-id h1 { font-size: 36px; }
  .coin-id h1 .h1-rest { font-size: 17px; }
  .narrative { font-size: 17px; }
  .narrative h2, .h-small { font-size: 23px; }
  .coin-id .name img { width: 52px; height: 52px; }
  .score-card .big .s { font-size: 72px; }
  .panel { padding: 22px 18px 18px; }
  .panel-head h2 { font-size: 22px; }
  .chart-box { height: 200px; }
  .mood-section { padding-bottom: 40px; }
  .mood-section .wrap { padding: 0 8px; }
  .panel h2 { font-size: 23px; }
  .sc-y { width: 28px; font-size: 11px; }
  .sc-x { font-size: 11px; }
  /* Too narrow for the line labels: they land on the chart line. The
     legend names the dashed lines instead. */
  .sc-note { display: none; }
  .legend-bands .legend-dash { display: inline-flex; }
  .method-card { padding: 28px 22px; }
  .page-hero h1, .textpage h1 { font-size: 32px; }
  .textpage { padding: 28px 16px 56px; }
  .textpage table { display: block; overflow-x: auto; }
}