/* SPCX · Mission Control — dashboard styles.
   Type: IBM Plex Sans for labels and prose, IBM Plex Mono (tabular) for
   numbers only, Chakra Petch for the station's headings. Every text colour
   below clears WCAG AA (4.5:1) on --space and on --panel-solid. */

:root {
  --space: #05070d;
  --space-2: #080c16;
  --panel: rgba(11, 17, 29, .78);
  --panel-solid: #0b111d;
  --panel-2: #101a2b;
  --line: rgba(130, 160, 215, .14);
  --line-2: rgba(130, 160, 215, .28);
  --line-3: rgba(130, 160, 215, .45);

  --ink: #eef2fb;     /* 17:1 */
  --ink-2: #c6cfe0;   /* 12:1 */
  --dim: #a3afc6;     /*  8.6:1 */
  --faint: #8592ab;   /*  6.0:1 on --panel-solid */

  --up: #3ee0b0;
  --down: #ff6b7b;
  --link: #8fb0ff;
  --phos: #25e0c8;    /* station phosphor */
  --amber: #f5a524;
  --focus: #8fb0ff;

  --t-milestone: #34e1b4;
  --t-index: #7ea2ff;
  --t-earnings: #d29bff;
  --t-unlock: #f5a524;
  --t-other: #a3afc6;

  --c-sma: #ffd166;
  --c-ema: #ff9ad5;
  --c-bb: #b49cff;
  --c-vwap: #5cc8ff;
  --c-vol: #8592ab;
  --c-ext: #7ea2ff;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --disp: "Chakra Petch", var(--sans);

  --r: 14px;
  --r-s: 9px;
  --pad: clamp(14px, 3vw, 32px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-color: rgba(130,160,215,.3) var(--space); scroll-padding-top: 72px; }
html, body { margin: 0; }
body {
  background: var(--space); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: rgba(37,224,200,.3); color: #eafff8; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--space); }
::-webkit-scrollbar-thumb { background: rgba(130,160,215,.28); border-radius: 7px; border: 3px solid var(--space); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
button[aria-disabled="true"] { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--panel-solid); border: 1px solid var(--line-3); border-radius: var(--r-s); color: var(--ink);
}
.skip:focus { top: 10px; }
.ico { width: 16px; height: 16px; flex: none; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--faint); cursor: help; }

#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bgwash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 82% -10%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(700px 520px at 6% 8%, rgba(37,224,200,.06), transparent 58%),
    linear-gradient(transparent, var(--space) 85%);
}
.app { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 var(--pad) 36px; }

/* ── top bar ───────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  height: 56px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
  background: rgba(7,10,19,.88);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.home { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); padding: 6px 4px; border-radius: 8px; }
.home:hover { text-decoration: none; }
.home:hover .home-arrow { color: var(--phos); }
.home-arrow { color: var(--dim); font-size: 16px; }
.brand { font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.brand .b2 { color: var(--phos); text-shadow: 0 0 18px rgba(37,224,200,.45); }
.crumb { color: var(--faint); }
.crumb-here { color: var(--dim); font-size: 14px; letter-spacing: .02em; }
.mini {
  margin-left: auto; display: flex; align-items: baseline; gap: 10px; font-size: 14px;
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.mini.show { opacity: 1; transform: none; }
.mini-sym { font-family: var(--disp); font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.mini-px { font-weight: 600; color: var(--ink); }

/* ── shared bits ───────────────────────────────────────── */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); backdrop-filter: blur(8px);
}
/* HUD corner brackets, echoing the home page's reticle */
/* no background at rest: a painted pseudo over the text stops axe from
   checking the panel's contrast, even at opacity 0 */
.panel::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 6; opacity: 0;
  transition: opacity .22s ease, inset .22s ease; --rc: rgba(91,140,255,.5);
}
.panel:hover::before, .panel:focus-within::before {
  opacity: 1; inset: 5px;
  background:
    linear-gradient(var(--rc), var(--rc)) 0 0/14px 1.5px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 0 0/1.5px 14px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 100% 0/14px 1.5px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 100% 0/1.5px 14px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 0 100%/14px 1.5px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 0 100%/1.5px 14px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 100% 100%/14px 1.5px no-repeat,
    linear-gradient(var(--rc), var(--rc)) 100% 100%/1.5px 14px no-repeat;
}

.eyebrow, .card h2 {
  margin: 0; font-family: var(--disp); font-weight: 600; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px;
  border-radius: 9px; border: 1px solid var(--line-2); background: rgba(16,26,43,.7);
  color: var(--ink); font-size: 14px; font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.btn:hover { border-color: var(--line-3); background: var(--panel-2); }
.btn-quiet { background: transparent; }
.btn-primary { background: rgba(143,176,255,.16); border-color: rgba(143,176,255,.6); }
.btn-primary:hover { background: rgba(143,176,255,.26); border-color: var(--link); }
.btn.spinning .ico { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.chg { font-weight: 600; white-space: nowrap; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }

/* skeletons */
.skel {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(130,160,215,.10), rgba(130,160,215,.2), rgba(130,160,215,.10));
  background-size: 300% 100%; animation: shimmer 1.6s ease-in-out infinite;
}
span.skel { display: inline-block; vertical-align: middle; }
.skel-price { width: 210px; height: 46px; border-radius: 10px; }
.skel-num { width: 76px; height: 15px; }
.skel-line { height: 15px; margin: 10px 0; }
.w40 { width: 40%; } .w60 { width: 60%; } .w75 { width: 75%; } .w90 { width: 90%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── hero: quote + next up ─────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 14px 28px; align-items: stretch; margin: 14px 0 14px;
}
.quote { display: flex; flex-direction: column; gap: 8px; justify-content: center; padding: 2px 0; outline: none; }
.q-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.q-id h1 { margin: 0; font-family: var(--disp); font-weight: 700; font-size: 30px; letter-spacing: .05em; line-height: 1.1; }
.q-co { margin: 0; color: var(--dim); font-size: 15px; }
.q-sep { margin: 0 8px; color: var(--faint); }
.q-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
/* proportional face with tabular figures: a monospace price gives the decimal point a full-width cell */
.price, .price.num { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: clamp(42px, 5.4vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.price.none { font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; letter-spacing: 0; color: var(--dim); }
.q-price .chg { font-size: clamp(18px, 1.8vw, 22px); }
.chg-when { color: var(--dim); font-size: 15px; }
.q-ext { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 15px; }
.q-ext[hidden] { display: none; }
.ext-lab { color: var(--amber); font-weight: 600; }
.ext-px { font-weight: 600; color: var(--ink); font-size: 17px; }
.q-ext .chg { font-size: 15px; }
.ext-when { color: var(--faint); font-size: 14px; }
.q-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; color: var(--dim); }
.sess {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.sess.open { border-color: rgba(62,224,176,.5); }
.sess.open .dot { background: var(--up); box-shadow: 0 0 10px var(--up); animation: pulse 2s ease-in-out infinite; }
.sess.pre, .sess.post { border-color: rgba(245,165,36,.5); }
.sess.pre .dot, .sess.post .dot { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
@keyframes pulse { 50% { opacity: .35; } }
.q-detail { color: var(--ink-2); }
.updated { color: var(--dim); }
.stale {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  color: #ffd391; background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.45); font-weight: 500;
}
.stale[hidden] { display: none; }
.stale::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* accent bars are inset shadows, not pseudo-elements: axe cannot check text
   contrast under a painted pseudo */
.nextup {
  padding: 16px 20px 16px 22px; display: flex; flex-direction: column; gap: 8px; --tc: var(--line-3);
  box-shadow: inset 3px 0 0 var(--tc), -10px 0 28px -22px var(--tc);
}
.nx-body { display: flex; flex-direction: column; gap: 7px; }
.nx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.nx-title { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.nx-date { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.nx-when { text-align: right; flex: none; line-height: 1.05; }
.nx-n { display: block; font-family: var(--mono); font-weight: 600; font-size: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.nx-u { display: block; color: var(--dim); font-size: 14px; margin-top: 1px; }

.nx-when.today .nx-n { font-family: var(--sans); font-size: 26px; color: var(--tc); }
.nx-sum { margin: 0; color: var(--ink-2); font-size: 15px; }
.nx-why { margin: 0; color: var(--dim); font-size: 14px; }
.nx-why b { color: var(--ink-2); font-weight: 600; }
.nx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
/* hero: NEXT UP, chips, link on one line when it fits. Sidebar: NEXT UP and the
   link share the first line, the chips get the second (never three lines) */
.nx-head .nx-row { flex: 1 1 auto; order: 1; }
.nx-link-slot { order: 2; margin-left: auto; white-space: nowrap; }
.nx-link-slot:empty { display: none; }
.side .nx-link-slot { order: 1; }
.side .nx-head .nx-row { order: 2; flex-basis: 100%; }
.nx-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.nx-row:empty { display: none; }
.nx-link { font-size: 14px; font-weight: 500; }
.nx-row .nx-link { margin-left: auto; white-space: nowrap; }
.nx-msg { margin: 0; color: var(--ink-2); font-size: 15px; }
.nx-msg + .btn { align-self: flex-start; }

/* tags: type + status (status is always a word, never a bare abbreviation) */
.tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ttag, .stag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px;
  border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap;
}
.ttag { color: var(--ink-2); background: rgba(130,160,215,.08); border: 1px solid var(--line); }
.npill {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 20px;
  color: var(--ink); background: color-mix(in srgb, var(--tc) 20%, var(--panel-solid)); border: 1px solid var(--tc);
}
.ttag svg { width: 14px; height: 14px; color: var(--tc, var(--t-other)); }
.stag { color: var(--ink-2); border: 1px solid var(--line-2); }
.stag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.stag.s-happened { color: var(--dim); }
.stag.s-happened::before { background: currentColor; }
.stag.s-confirmed { color: var(--ink); border-color: var(--line-3); }
.stag.s-confirmed::before { background: currentColor; }
.stag.s-expected::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.stag.s-estimated { border-style: dashed; border-color: var(--line-3); }
.stag.s-estimated::before { border-style: dashed; }
/* "possible": a floor, not a date: hollow dotted ring, quieter text */
.stag.s-possible { color: var(--dim); border-style: dotted; border-color: var(--line-3); }
.stag.s-possible::before { border-style: dotted; background: transparent; }

.t-milestone { --tc: var(--t-milestone); }
.t-index { --tc: var(--t-index); }
.t-earnings { --tc: var(--t-earnings); }
.t-unlock { --tc: var(--t-unlock); }
.t-other { --tc: var(--t-other); }

/* ── notice (refresh problems, stale data) ─────────────── */
.notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px;
  border-radius: 12px; font-size: 15px; color: #ffe2b8;
  background: rgba(245,165,36,.09); border: 1px solid rgba(245,165,36,.45);
}
.notice[hidden] { display: none; }
.notice.err { color: #ffd7dc; background: rgba(255,107,123,.08); border-color: rgba(255,107,123,.5); }
.notice b { color: #fff; }
.notice .btn { margin-left: auto; }

/* ── layout ────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 16px; }

/* ── chart panel ───────────────────────────────────────── */
/* z-index: the panel is its own stacking context (backdrop-filter), so without
   it the later side panels would paint over its popover, tips and menu */
.chartp { padding: 16px 18px 14px; min-width: 0; z-index: 2; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
/* title and subtitle share a line on wide screens, to bring the plot up */
.chart-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.chart-head h2 { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 20px; letter-spacing: .03em; }
.chart-sub { margin: 0; color: var(--dim); font-size: 14px; }
.chart-perf { margin: 0; font-size: 15px; font-weight: 600; }
.chart-perf .lab { font-family: var(--sans); font-weight: 400; color: var(--dim); margin-right: 8px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 8px 0 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Indicators: one button that opens the four line toggles with what each means */
.ind { display: inline-flex; }
.ind-btn .chev { width: 14px; height: 14px; margin-left: -2px; color: var(--dim); }
.ind-btn[aria-expanded="true"] { color: var(--ink); border-color: rgba(143,176,255,.55); }
.ind-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ind-sws { display: inline-flex; gap: 3px; }
.ind-sws:empty { display: none; }
.ind-sws .sw { width: 12px; }
.ind-sws .sw::before { opacity: 1; }
.ind-panel {
  position: absolute; z-index: 40; width: min(380px, calc(100vw - 40px)); padding: 10px; border-radius: 12px;
  background: #0e1626; border: 1px solid var(--line-3); box-shadow: 0 16px 36px -12px rgba(0,0,0,.8);
  display: flex; flex-direction: column; gap: 4px;
}
.ind-head { margin: 2px 6px 6px; color: var(--dim); font-size: 14px; }
.ind-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-2);
}
.ind-opt:hover { background: rgba(143,176,255,.08); }
.ind-opt[aria-pressed="true"] { background: rgba(143,176,255,.12); border-color: rgba(143,176,255,.55); color: var(--ink); }
.ind-opt .sw { margin-top: 6px; }
.ind-opt[aria-pressed="true"] .sw::before { opacity: 1; }
.ind-txt { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.4; }
.ind-txt b { color: var(--ink); font-weight: 600; }
.ind-txt span { color: var(--dim); }
.ind-opt::after {
  content: ""; flex: none; margin-left: auto; margin-top: 3px; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--line-3);
}
.ind-opt[aria-pressed="true"]::after {
  border-color: var(--link); background: var(--link) center/12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2305070d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.grp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grp-label { color: var(--dim); font-size: 14px; font-weight: 500; white-space: nowrap; }
.seg {
  display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(5,7,13,.45); overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 7px; background: transparent;
  color: var(--dim); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.seg button:hover { color: var(--ink); background: rgba(143,176,255,.1); }
.seg button[aria-pressed="true"] { color: #fff; background: rgba(143,176,255,.24); box-shadow: inset 0 0 0 1px rgba(143,176,255,.7); }
.seg button:focus-visible { outline-offset: -2px; }
.seg button .n { margin-left: 6px; color: var(--faint); font-family: var(--mono); font-size: 13px; }
.seg button[aria-pressed="true"] .n { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* static on purpose: the tip is placed against the panel (spcx.js), so a
   horizontally scrolling chip row on phones cannot clip it */
.tipwrap { display: inline-flex; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 13px 4px 10px;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  color: var(--dim); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-3); }
.chip[aria-pressed="true"] { color: var(--ink); background: rgba(143,176,255,.12); border-color: rgba(143,176,255,.55); }
.chip[aria-disabled="true"] { color: var(--faint); border-style: dashed; background: transparent; }
.chip[aria-disabled="true"] .sw { opacity: .5; }
/* the swatch shows the line or mark the toggle draws; hollow when off */
.sw { width: 18px; height: 10px; flex: none; position: relative; color: var(--sc, var(--dim)); }
.sw::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px; background: currentColor; opacity: .45; }
.chip[aria-pressed="true"] .sw::before { opacity: 1; }
.sw-sma { --sc: var(--c-sma); } .sw-ema { --sc: var(--c-ema); } .sw-vwap { --sc: var(--c-vwap); }
.sw-bb { --sc: var(--c-bb); }
.sw-bb::before { top: 1px; height: 8px; background: transparent; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0; }
.sw-vol { --sc: var(--c-vol); }
.sw-vol::before { top: auto; bottom: 0; height: 10px; border-radius: 1px; background:
  linear-gradient(currentColor, currentColor) 0 100%/3px 50% no-repeat,
  linear-gradient(currentColor, currentColor) 5px 100%/3px 100% no-repeat,
  linear-gradient(currentColor, currentColor) 10px 100%/3px 70% no-repeat,
  linear-gradient(currentColor, currentColor) 15px 100%/3px 40% no-repeat; }
.sw-ext { --sc: var(--c-ext); }
.sw-ext::before { top: 0; height: 10px; background: currentColor; opacity: .3; border-radius: 2px; }
.chip[aria-pressed="true"] .sw-ext::before { opacity: .55; }
.sw-cat { --sc: var(--t-unlock); }
.sw-cat::before { left: 4px; right: auto; top: 0; width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid currentColor; }

.tip {
  position: absolute; top: 0; left: 0; z-index: 40; width: max-content; max-width: min(320px, calc(100vw - 40px));
  padding: 10px 12px; border-radius: 10px; background: #0e1626; border: 1px solid var(--line-3);
  color: var(--ink-2); font-size: 14px; line-height: 1.45; white-space: normal;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); display: none;
}
/* display:none while hidden: a merely invisible tip still widens the page */
.tipwrap.show .tip { display: block; }

/* readout above the plot: always shows the bar under the crosshair, or the latest bar */
.readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-height: 26px; margin: 0 0 6px;
  font-size: 14px; color: var(--dim);
}
.ro-time { color: var(--ink); font-weight: 600; }
.ro-tag { color: var(--amber); font-weight: 500; }
.ro-i { white-space: nowrap; }
.ro-i b { margin-left: 6px; color: var(--ink); font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ro-i b.up { color: var(--up); } .ro-i b.down { color: var(--down); }
.ro-i.close b { font-weight: 600; font-size: 15px; }
.ro-ov { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ro-ov i { width: 12px; height: 3px; border-radius: 2px; background: var(--sc); display: inline-block; transform: translateY(-3px); }
.ro-ov b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ro-ov.sma { --sc: var(--c-sma); } .ro-ov.ema { --sc: var(--c-ema); } .ro-ov.bb { --sc: var(--c-bb); } .ro-ov.vwap { --sc: var(--c-vwap); }

.plot { position: relative; height: clamp(380px, 56vh, 600px); border-radius: 10px; }
.chart { position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.chart:focus-visible { outline-offset: 4px; }
.bands, .pins { position: absolute; left: 0; top: 0; pointer-events: none; }
.bands { z-index: 0; overflow: hidden; }
.pins { z-index: 2; }
.sband { position: absolute; top: 0; bottom: 0; background: rgba(126,162,255,.075); }
.sband-lab { position: absolute; left: 8px; bottom: 8px; color: var(--faint); font-size: 13px; white-space: nowrap; }
.wband { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--tc) 9%, transparent); border-top: 3px solid color-mix(in srgb, var(--tc) 60%, transparent); }
.pin-line { position: absolute; top: 36px; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--tc) 50%, transparent); }
.pin-line.on { border-left-style: solid; border-left-color: var(--tc); }
.pin {
  position: absolute; top: 8px; width: 28px; height: 28px; margin-left: -14px; padding: 0;
  display: grid; place-items: center; pointer-events: auto; border-radius: 50%;
  background: var(--panel-solid); border: 2px solid var(--tc); color: var(--tc);
  box-shadow: 0 0 0 3px rgba(5,7,13,.7);
}
.pin svg { width: 14px; height: 14px; }
.pin.s-estimated { border-style: dashed; }
.pin.past { opacity: .8; }
.pin.cluster { --tc: var(--ink-2); color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.pin:hover, .pin.on { background: color-mix(in srgb, var(--tc) 22%, var(--panel-solid)); }
.pin:focus-visible { outline-offset: 3px; }
/* max-height is a backstop: clusters already render as at most four compact rows */
.pop {
  position: absolute; z-index: 3; width: min(340px, calc(100% - 16px)); max-height: calc(100% - 52px); overflow: hidden;
  padding: 12px 14px; border-radius: 12px;
  background: #0d1524; border: 1px solid var(--line-3); box-shadow: 0 16px 36px -12px rgba(0,0,0,.8);
  pointer-events: none;
}
.pop.sticky { pointer-events: auto; }
.pop.is-list { width: min(400px, calc(100% - 16px)); }
.pop[hidden] { display: none; }
.pop-date { color: var(--dim); font-size: 14px; }
.pop-title { margin: 2px 0 6px; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; }
.pop-sum { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.pop-count { margin: 0 0 6px; color: var(--dim); font-size: 14px; }
.pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pop-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px;
  padding: 6px 0 6px 10px; border-top: 1px solid var(--line); box-shadow: inset 2px 0 0 var(--tc);
}
.pop-d { color: var(--dim); font-size: 14px; white-space: nowrap; }
.pop-t { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
.pop-list .stag { align-self: center; }
.pop-list.no-chip li { grid-template-columns: auto minmax(0, 1fr); }
.pop-more { margin: 8px 0 0; color: var(--dim); font-size: 14px; }
.pop-open { margin-top: 10px; }

.chart-state {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; border-radius: 10px; background: rgba(9,14,24,.92);
}
.chart-state[hidden] { display: none; }
.chart-state .state-msg { margin: 0; color: var(--ink-2); font-size: 15px; position: relative; }
.chart-state .state-msg b { display: block; color: var(--ink); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.chart-state .state-why { margin: 0; color: var(--dim); font-size: 14px; max-width: 46ch; position: relative; }
.chart-state.loading { background: transparent; }
.chart-state.loading .state-msg { color: var(--dim); }
.skel-chart {
  position: absolute; inset: 10px 70px 34px 10px; border-radius: 8px; opacity: .9;
  background:
    linear-gradient(170deg, transparent 47%, rgba(130,160,215,.16) 48%, rgba(130,160,215,.16) 49%, transparent 50%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(130,160,215,.06) 59px 60px);
}
.skel-chart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(130,160,215,.08), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: sweep 1.8s ease-in-out infinite;
}
@keyframes sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.chart-state .ico-big { width: 34px; height: 34px; color: var(--down); position: relative; }

.legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.legend[hidden] { display: none; }
.lg-row { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.lg-row i { width: 14px; height: 3px; flex: none; border-radius: 2px; background: var(--sc); transform: translateY(-3px); }
.lg-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lg-row.sma { --sc: var(--c-sma); } .lg-row.ema { --sc: var(--c-ema); } .lg-row.bb { --sc: var(--c-bb); } .lg-row.vwap { --sc: var(--c-vwap); }
.lg-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.lg-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.lg-mark svg { width: 14px; height: 14px; color: var(--tc); }

/* ── side cards ────────────────────────────────────────── */
.card { padding: 16px 18px; }
.card-sub { margin: 2px 0 0; color: var(--dim); font-size: 14px; }
.card-sub:empty { display: none; }
.stats { margin: 10px 0 0; }
.stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(130,160,215,.08); }
.stat:last-child { border-bottom: 0; }
.stat dt { color: var(--dim); font-size: 14px; }
.stat dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; text-align: right; }
.stat dd .sub { display: block; color: var(--faint); font-family: var(--sans); font-size: 13px; font-weight: 400; }
.stat dd.text { font-family: var(--sans); }
.gauge { margin-top: 14px; }
.gauge + .gauge { margin-top: 18px; }
.g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.g-name { color: var(--ink-2); font-weight: 500; }
.g-pos { color: var(--dim); }
.track { position: relative; height: 8px; border-radius: 6px; background: rgba(130,160,215,.14); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(126,162,255,.55), rgba(62,224,176,.8)); }
.mark { position: absolute; top: 50%; left: 0; width: 4px; height: 18px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--panel-solid), 0 0 10px rgba(238,242,251,.5); }
.mark[hidden] { display: none; }
.g-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 14px; color: var(--ink-2); }

/* ── catalyst calendar ─────────────────────────────────── */
.cats { margin-top: 16px; padding: 20px 22px 22px; }
.cats-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; }
.cats-title h2 { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 22px; letter-spacing: .03em; }
.cats-intro { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; max-width: 68ch; }
.cats-verified { margin: 4px 0 0; color: var(--dim); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.cats-verified:empty { display: none; }
.cats-verified.unverified { color: #ffd391; }
.cats-verified.unverified::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--amber); }
.cats-verified.verified::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.cats-how { margin-top: 8px; max-width: 80ch; color: var(--dim); font-size: 14px; }
.cats-how summary { cursor: pointer; color: var(--link); font-weight: 500; width: max-content; max-width: 100%; }
.cats-how p { margin: 6px 0 0; color: var(--ink-2); }
.cats-filter { margin-top: 16px; }

.ribbon { position: relative; height: 96px; margin: 18px 4px 6px; }
.ribbon[hidden] { display: none; }
.rb-axis { position: absolute; left: 0; right: 0; top: 63px; height: 2px; border-radius: 2px; background: rgba(130,160,215,.22); }
.rb-past { position: absolute; left: 0; top: 63px; height: 2px; border-radius: 2px; background: rgba(130,160,215,.45); }
.rb-mon { position: absolute; top: 74px; transform: translateX(-50%); color: var(--faint); font-size: 13px; white-space: nowrap; }
.rb-mon::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 5px; background: rgba(130,160,215,.35); }
.rb-mon.edge-l { transform: none; }
.rb-mon.edge-l::before { left: 0; }
.rb-mon.edge-r { transform: translateX(-100%); }
.rb-mon.edge-r::before { left: 100%; }
.rb-today { position: absolute; top: 4px; bottom: 30px; width: 0; border-left: 2px solid var(--phos); }
.rb-today span {
  position: absolute; top: -2px; left: 0; transform: translateX(-50%); padding: 1px 8px; border-radius: 6px;
  background: rgba(37,224,200,.14); border: 1px solid rgba(37,224,200,.55); color: #a8fff0; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.rb-dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--tc); border: 2px solid var(--space); box-shadow: 0 0 0 1px var(--tc);
  transition: transform .15s ease, opacity .15s ease;
}
.rb-dot.s-estimated, .rb-dot.s-expected { background: var(--space); border: 2px solid var(--tc); box-shadow: none; }
.rb-dot.s-estimated { border-style: dashed; }
/* several days too close to tell apart: one numbered dot */
.rb-dot.count {
  width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center;
  background: var(--panel-solid); border: 1.5px solid var(--tc); box-shadow: none;
  color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; line-height: 1;
}
.rb-dot.count.t-other { --tc: var(--ink-2); }
.rb-dot.past { opacity: .55; }
.rb-dot.count.past { opacity: .7; }
.rb-dot.next { box-shadow: 0 0 0 1px var(--tc), 0 0 14px var(--tc); }
/* "possible": a faint dotted ring that never draws the eye */
.rb-dot.rb-possible { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--space); border: 1.5px dotted var(--tc); box-shadow: none; opacity: .7; }
.rb-dot.dim { opacity: .15; }
.rb-dot.hot { transform: scale(1.35); opacity: 1; z-index: 2; }
.rb-win { position: absolute; height: 6px; margin-top: -3px; border-radius: 3px; background: color-mix(in srgb, var(--tc) 45%, transparent); cursor: default; }
.rb-win::before { content: ""; position: absolute; left: 0; top: -2px; width: 2px; height: 10px; border-radius: 1px; background: var(--tc); }
.rb-win.s-estimated { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tc) 50%, transparent) 0 6px, transparent 6px 9px); }
.rb-win.dim { opacity: .15; }
.rb-win.hot { height: 8px; margin-top: -4px; z-index: 2; }

.cats-msg { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-3); color: var(--ink-2); font-size: 15px; }
.cats-msg[hidden] { display: none; }
.cats-msg .btn { margin-left: 10px; }
.cats-lists { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.cats-lists[hidden] { display: none; }
.cat-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 600; color: var(--ink); }
.cat-sec-h .count { color: var(--faint); font-size: 14px; font-weight: 500; }
.cat-empty { margin: 0; color: var(--dim); font-size: 15px; }
.cat-empty[hidden] { display: none; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ccard {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 15px 18px; min-width: 0;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(13,20,34,.72); outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.ccard { box-shadow: inset 3px 0 0 var(--tc, var(--line-3)); }
.ccard:hover, .ccard.hot { border-color: var(--line-2); background: rgba(16,26,43,.85); }
.ccard.flash { border-color: var(--tc); box-shadow: inset 3px 0 0 var(--tc), 0 0 0 1px var(--tc), 0 0 26px -8px var(--tc); }
.ccard.is-next { border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: inset 3px 0 0 var(--tc), 0 0 28px -14px var(--tc); }
/* a card focused by a marker jump keeps a visible ring after the flash fades */
.ccard.jumped:focus { box-shadow: inset 3px 0 0 var(--tc, var(--line-3)), 0 0 0 2px var(--focus); }
.back-btn { align-self: flex-start; min-height: 32px; padding: 4px 12px; margin-bottom: 2px; }
.cc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-date { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.cc-trade { margin: -4px 0 0; color: var(--dim); font-size: 14px; }
.cc-rel { color: var(--dim); font-size: 14px; white-space: nowrap; }
.cc-rel.soon { color: var(--ink); font-weight: 600; }
.cc-rel.npill { color: var(--ink); font-size: 13px; }
.cc-rel.possible { color: var(--dim); }
.nobr { white-space: nowrap; }
.nx-title, .cc-title, .pop-title { text-wrap: balance; }
.side .nx-title { font-size: 19px; }
.cc-title { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.3; }
.cc-sum { margin: 0; color: var(--ink-2); font-size: 15px; }
.cc-why { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.cc-why b { display: block; color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1px; }
.cc-src { margin: 0; color: var(--dim); font-size: 14px; min-width: 0; }
.cc-src > b { display: block; color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.cc-src ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-src li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cc-src .kind { flex: none; min-width: 52px; color: var(--faint); font-size: 13px; }
/* two lines before the cut, so the filing stays identifiable; the padding and the
   6px gap give each link a 24px target (WCAG 2.2 target size). relative keeps the
   link's sr-only text inside its clip, or it widens the page */
.cc-src a, .cc-src .plain {
  position: relative; min-width: 0; overflow: hidden; padding-block: 2px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere;
}
.cc-src a::after { content: " ↗"; }
.cc-src .none { color: var(--faint); }
.cc-note { margin: 0; color: #ffd391; font-size: 14px; }
.cards-past .ccard { background: rgba(10,15,26,.6); }
.cards-past .cc-title { color: var(--ink-2); }
.more { margin-top: 12px; }

.status-key { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.status-key[hidden] { display: none; }
.key-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.key-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px 20px; margin: 0; }
.key-list div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.key-list dd { margin: 0; color: var(--dim); font-size: 14px; }

/* ── footer ────────────────────────────────────────────── */
.app > footer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.foot-home { color: var(--ink-2); font-weight: 500; }
.foot-home:hover { color: var(--phos); }
.route b { color: var(--up); font-weight: 500; }
.disclaimer { margin: 10px 0 0; color: var(--faint); font-size: 14px; }
.noscript { padding: 16px; border: 1px solid var(--line-3); border-radius: 12px; }

/* ── responsive ────────────────────────────────────────── */
/* wide screens: Next up moves to the top of the sidebar (spcx.js), so the quote
   spans the hero: price on the left, session and refresh on the right */
@media (min-width: 1121px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .quote {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id meta" "price meta" "ext meta";
    column-gap: 40px; row-gap: 8px; align-items: center;
  }
  .q-id { grid-area: id; }
  .q-price { grid-area: price; }
  .q-ext { grid-area: ext; }
  .q-meta { grid-area: meta; justify-content: flex-end; max-width: 470px; }

  /* columns that end together: measured at 1280, the chart panel is ~730px and
     Next up + Trading range + Listing ~940px, so Session (~330px as a card)
     becomes a ~170px key-stats strip under the chart (6 across from 1366px) */
  /* the chart row is a 1fr track, so it stretches to the sidebar's height when the
     sidebar is taller, and the plot grows into the extra space: the columns end
     together at any viewport height, not just the one measured */
  .grid { grid-template-areas: "chart side" "lower side"; grid-template-rows: 1fr auto; }
  .chartp { grid-area: chart; align-self: stretch; display: flex; flex-direction: column; }
  /* the base height sits just under the balancing height (~390–475px measured),
     so the plot grows to meet the sidebar instead of overshooting it */
  .chartp .plot { flex: 1 0 auto; height: clamp(380px, 46vh, 460px); }
  .side { grid-area: side; }
  .grid > #session-card { grid-area: lower; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding: 14px 18px 10px; }
  .grid > #session-card .stats { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 4px; }
  .grid > #session-card .stat { flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 0 3px; border-bottom: 0; border-top: 1px solid rgba(130,160,215,.08); }
  .grid > #session-card .stat dd { text-align: left; }
}
@media (min-width: 1366px) {
  .grid > #session-card .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* 1121–1239px: a narrower status column, so the price column doesn't wrap */
@media (min-width: 1121px) and (max-width: 1239px) {
  .q-meta { max-width: 360px; }
}
/* 1121–1279px: the toolbar takes three rows, so the plot's base is lower */
@media (min-width: 1121px) and (max-width: 1279px) {
  .chartp .plot { height: clamp(360px, 42vh, 400px); }
}
@media (max-width: 1120px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .topbar { position: static; height: 50px; }
  .crumb, .crumb-here { display: none; }
  .mini { display: none; }
  .q-id h1 { font-size: 26px; }
  .q-co { font-size: 14px; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .chartp { padding: 14px 12px 12px; }
  /* phones: one row per control group, label on the left, the row scrolls sideways */
  .toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .toolbar .grp { display: contents; }
  .grp-label { font-size: 13px; }
  .cats-filter { flex-direction: column; align-items: stretch; gap: 6px; }
  .seg, .toolbar .chips { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; justify-self: start; max-width: 100%; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .scroller:not(.at-end):not(.tip-open) { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .seg button { padding: 4px 11px; }
  .plot { height: 320px; }
  /* phones: the marker detail is a sheet in the flow right after the plot, inside
     the chart panel (spcx.js moves it there), so it never hangs over the next panel */
  .pop, .pop.is-list {
    position: static; width: auto; max-height: none; margin-top: 10px;
    background: var(--panel-2); box-shadow: none;
  }
  .ind { justify-self: start; }
  .readout { font-size: 13px; gap: 2px 14px; }
  .cats { padding: 16px 14px 18px; }
  .cats-title h2 { font-size: 20px; }
  .cats-intro, .cc-sum, .nx-sum { font-size: 14px; }
  .nx-title { font-size: 19px; }
  .nx-n { font-size: 28px; }
  .ccard { padding: 12px 14px 13px 16px; }
  .cc-title { font-size: 16px; }
  .ttag, .stag { font-size: 13px; }
  .cc-why, .cc-src, .key-list dd, .legend, .disclaimer, .app > footer { font-size: 13px; }
  .notice { font-size: 14px; }
  .notice .btn { margin-left: 0; }
}

/* Reduced motion: the starfield is drawn once (see spcx.js) and nothing here
   moves. Kept last so it outranks every animated rule above. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skel, .skel-chart::after, .sess.open .dot, .btn.spinning .ico { animation: none; }
  .panel::before, .mini, .tip, .chip, .seg button, .btn, .ccard, .rb-dot { transition: none; }
  .mini { transform: none; }
}