/* Earlyink: Stack.
   One call at a time. Today is a short deck of the reader's three calls: decide on each (save or pass), then the
   edition ends. Ink-blue and chalk; Anybody (a variable-width display face) for numerals and headlines, Schibsted
   Grotesk for reading, IBM Plex Mono for numbers. Light by default; dark is a choice in the menu. Amber is rationed: filled ticks, the primary button, the progress
   marker, the "since you last looked" dot and focus. Green and red only for outcomes in the record. */

:root {
  color-scheme: light;
  --paper: #eef1f7;        --paper-raised: #ffffff;  --surface-2: #e3e8f2;
  --ink: #121833;          --ink-2: #454d69;         --ink-3: #5a6280;
  --rule: #d9deea;         --rule-strong: #b8c0d6;
  --accent: #9c4a00;       --accent-mark: #c96a00;   --accent-soft: #fbe8d2;
  --accent-fill: #f5a043;  --on-accent: #0e1326;
  --hit: #186a42;          --miss: #b3261e;

  --display: "Anybody", "Arial Black", system-ui, sans-serif;
  --read: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--read);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --measure: 680px; --margin-col: 120px; --gutter: 16px; --deck: 980px;
  --radius: 10px; --radius-card: 18px; --radius-deck: 24px; --pill: 999px;
  --hair: 1px solid var(--rule);
  --hair-strong: 1px solid var(--rule-strong);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-base: 180ms; --t-deck: 280ms;

  /* Older names used by the Explore renderers and static pages. */
  --bg: var(--paper); --surface: var(--paper-raised);
  --line: var(--rule); --line-strong: var(--rule-strong);
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3);
  --accent-ink: var(--on-accent); --good: var(--hit); --warn: #8a5a00; --bad: var(--miss);
  --r: var(--radius);
}
/* Light by default, whatever the device prefers; dark only when the reader chooses it in the menu. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1326; --paper-raised: #151b33; --surface-2: #1c2442;
  --ink: #eef0f7; --ink-2: #aab1c8; --ink-3: #8b94ae;
  --rule: #252d4a; --rule-strong: #3d4870;
  --accent: #f5a043; --accent-mark: #f5a043; --accent-soft: #2a2414;
  --hit: #6fd09b; --miss: #ff8a7a; --warn: #e3a33b;
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
kbd { font: 500 12px var(--mono); border: var(--hair-strong); border-radius: var(--radius); padding: 0 5px; color: var(--ink-2); }
code { font-family: var(--mono); font-size: .92em; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--ink); color: var(--paper); padding: 6px 10px; border-radius: var(--radius); }
.skip:focus { left: 8px; }

/* Masthead ------------------------------------------------------------------ */
.mast { display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap; padding: var(--s-4) var(--gutter) var(--s-3);
  max-width: calc(var(--deck) + 2 * var(--gutter)); margin: 0 auto; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 800 21px/1 var(--display); font-stretch: 130%; letter-spacing: -.02em; }
.wordmark .mark { width: 26px; height: 26px; flex: none; }
.wordmark .wm span { color: var(--accent); }
.wordmark:hover { text-decoration: none; }
.daynav { display: inline-flex; align-items: center; gap: 2px; }
.daynav button { border: 0; background: none; width: 30px; height: 30px; font-size: 18px; color: var(--ink-2); border-radius: var(--pill); }
.daynav button:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.daynav button:disabled { opacity: .3; cursor: default; }
.daynav-label { position: relative; font: 500 14px var(--read); color: var(--ink-2); padding: 2px 4px; cursor: pointer; }
.daynav-label select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.daynav-label:hover { color: var(--ink); }
.mnav { display: flex; gap: var(--s-4); margin-left: auto; font-weight: 500; font-size: 14px; }
.mnav a { color: var(--ink-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.mnav a:hover { color: var(--ink); text-decoration: none; }
.mnav a.active { color: var(--ink); border-bottom-color: var(--accent-fill); }
.record-badge { font: 400 13px var(--read); color: var(--ink-3); }
.record-badge:hover { color: var(--ink); }
.record-badge:empty { display: none; }
.menu { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; border: var(--hair-strong); background: none; height: 34px; padding: 0 14px; border-radius: var(--pill); font: 600 13.5px var(--read); color: var(--ink); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--ink); }
.menu-pop { position: absolute; right: 0; top: 42px; z-index: 30; width: 320px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-raised); border: var(--hair-strong); border-radius: var(--radius-card); padding: var(--s-2); display: grid; gap: 2px; box-shadow: 0 16px 40px rgb(14 19 38 / .16); }
.menu-h { margin: var(--s-3) 12px 4px; font: 600 11.5px var(--read); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.menu-who + .menu-h { margin-top: var(--s-2); }
.menu-item { display: grid; gap: 1px; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.menu-item:hover, .menu-item.active { background: var(--surface-2); text-decoration: none; }
.menu-item b { font: 600 15px var(--read); }
.menu-item span { font-size: 13px; color: var(--ink-3); }
.menu-who { margin: 6px 12px 0; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 720px) {
  .mast { gap: var(--s-2) var(--s-3); }
  .daynav { order: 2; }
  .menu { order: 3; margin-left: auto; position: static; }
  .mnav { order: 4; width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0; font-size: 15px; }
  .mnav a { padding: 8px 0; }
  .record-badge { display: none; }
  .mast { gap: var(--s-2); }
  .wordmark { font-size: 19px; gap: 6px; }
  .wordmark .mark { width: 22px; height: 22px; }
  .daynav button { width: 26px; }
  .menu-btn { padding: 0 12px; }
  .call-h { flex-direction: column; gap: 6px; }
  /* On a phone the menu is a full-width panel under the masthead, with thumb-sized rows. */
  .menu-pop { position: fixed; left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); width: auto; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); }
  .menu-item { padding: 12px; }
  .dn-time, .dn-wk { display: none; }
}

/* The edition: one reading column with a margin ------------------------------- */
.main { outline: none; padding: 0 var(--gutter) var(--s-8); }
.edition, .explore { max-width: calc(var(--measure) + var(--margin-col) + var(--s-5)); margin: 0 auto; }
.thesis, .call, .notthis { display: grid; grid-template-columns: var(--margin-col) minmax(0, var(--measure)); gap: 0 var(--s-5); }
.margin { font-size: 12px; line-height: 1.6; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.margin .no { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.margin .hit, .hit { color: var(--hit); }
.margin .miss, .miss { color: var(--miss); }
.margin .saved-mark { color: var(--ink); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mark); vertical-align: 1px; margin-left: 2px; }
@media (max-width: 720px) {
  .thesis, .call, .notthis { grid-template-columns: minmax(0, 1fr); }
  .margin { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding-top: 0; margin-bottom: 4px; }
}

.thesis { padding: var(--s-7) 0 var(--s-5); border-bottom: var(--hair-strong); }
.headline { font: 800 36px/1.06 var(--display); font-stretch: 112%; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.dek { font: 400 18px/28px var(--read); color: var(--ink-2); margin: var(--s-3) 0 0; max-width: 62ch; }
.brief { margin-top: var(--s-4); }
.brief p { font: 400 17px/27px var(--read); color: var(--ink-2); margin: 0 0 var(--s-3); max-width: 62ch; }
.brief.closed { display: none; }
.since { margin: var(--s-4) 0 0; font-size: 14px; color: var(--ink-2); }
.since .dot { margin: 0 8px 0 0; }
.quiet { border: 0; background: none; padding: 0; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.quiet:hover { color: var(--ink); text-decoration-color: var(--ink); }
#brief-toggle { margin-top: var(--s-3); }
@media (max-width: 720px) { .headline { font-size: 28px; } .thesis { padding-top: var(--s-5); } }

/* A call ---------------------------------------------------------------------- */
.calls { border-top: 0; }
.call { padding: var(--s-5) var(--s-5); margin-bottom: var(--s-3); background: var(--paper-raised); border: var(--hair); border-radius: var(--radius-card); outline-offset: 3px; }
.call:focus { outline: 2px solid var(--accent); }
.call:focus:not(:focus-visible) { outline: none; }
.call.open { border-color: var(--rule-strong); }
.call-h { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.call-t { font: 750 22px/1.15 var(--display); font-stretch: 102%; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
.call-t a:hover { text-decoration-color: var(--rule-strong); }
.one { margin: var(--s-2) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.call.open .one { -webkit-line-clamp: unset; display: block; }
.verdict { margin: var(--s-2) 0 0; font: 500 13px var(--read); color: var(--ink); }
.for { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.call-actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.call.passed { padding: var(--s-3) var(--s-5); background: transparent; border-style: dashed; }
.passed-line { margin: 0; color: var(--ink-3); font-size: 14px; }
.passed-line span:first-child { text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.new-rule { height: 1px; background: var(--accent-mark); margin-top: -1px; animation: since 600ms var(--ease) 1; }
@keyframes since { from { opacity: 0; } to { opacity: 1; } }
.saved-mark.stamp { display: inline-block; animation: stamp var(--t-fast) var(--ease); }
@keyframes stamp { from { transform: scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .new-rule, .saved-mark.stamp, .more { animation: none; } }

.ticks { display: inline-flex; gap: 3px; flex-shrink: 0; padding-top: 6px; }
.ticks i { display: block; width: 12px; height: 5px; border-radius: 3px; background: var(--rule); }
.ticks i.on { background: var(--accent-mark); }

/* Expanded body: the order is the argument. */
.more { animation: grow var(--t-base) var(--ease); }
@keyframes grow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sec { margin-top: var(--s-5); }
.sec h3, .kicker { font: 600 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-2); }
.sec.lead h3 { color: var(--accent); }
.sec p { margin: 0; font: 400 16px/26px var(--read); color: var(--ink); max-width: 64ch; }
.sec.lead p { color: var(--ink); }
.sec .mono.small { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; font-family: var(--mono); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-5); }
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } }
.two .sec p { font-size: 16px; line-height: 25px; }
.ways { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.ways li { counter-increment: w; padding: var(--s-3) 0 var(--s-3) 26px; border-top: var(--hair); position: relative; }
.ways li::before { content: counter(w); position: absolute; left: 0; top: var(--s-3); font: 500 13px var(--mono); color: var(--ink-3); }
.ways b { font: 600 17px/24px var(--read); }
.ways p { font-size: 16px; line-height: 25px; margin-top: 2px; }
.ways dl, dl.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 12px; margin: var(--s-2) 0 0; font-size: 13.5px; }
.ways dt, dl.kv dt { color: var(--ink-3); }
.ways dd, dl.kv dd { margin: 0; }
.crowd { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); font-size: 14px; }
.crowd .scale { display: inline-flex; gap: 4px; }
.crowd .scale i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); }
.crowd .scale i.on { background: var(--ink); border-color: var(--ink); }
details > summary { cursor: pointer; list-style: none; color: var(--ink-2); font-size: 14px; margin-top: var(--s-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: " ▸"; }
details[open] > summary::after { content: " ▾"; }
details[open] > summary { margin-bottom: var(--s-2); }
details p { font-size: 15px !important; line-height: 24px !important; color: var(--ink-2) !important; }
.comps { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.comps li { padding: var(--s-2) 0; border-top: var(--hair); font-size: 14px; }
.comps a { font-weight: 600; }
.comps p { margin: 2px 0 0; }
.risks { margin: 0; padding-left: 18px; font: 400 16px/25px var(--read); color: var(--ink); }
.risks li { margin-bottom: 4px; }
.risks li::marker { color: var(--ink-3); }
.ev { list-style: none; margin: 0; padding: 0; counter-reset: ev; }
.ev li { counter-increment: ev; border-top: var(--hair); }
.ev a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; font-size: 14px; }
.ev a::before { content: counter(ev); font: 500 12.5px var(--mono); color: var(--ink-3); padding-top: 1px; }
.ev .et { overflow: hidden; text-overflow: ellipsis; }
.ev .src { color: var(--ink-3); font: 400 12px var(--mono); white-space: nowrap; }
@media (max-width: 600px) { .ev a { grid-template-columns: 22px minmax(0, 1fr); } .ev .src { grid-column: 2; white-space: normal; } }
.call-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--hair); }
.call-foot .spacer { flex: 1; }

/* Buttons: pills in ink; the primary action is the one amber fill. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; min-height: 36px; padding: 0 14px;
  border-radius: var(--pill); border: 1.5px solid var(--ink); background: transparent; font: 600 13.5px var(--sans); color: var(--ink); }
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.big { min-height: 46px; padding: 0 26px; font-size: 15px; }
.btn.done { border-color: var(--hit); color: var(--hit); }
.btn.done::after { content: " ✓"; }
.btn.done:hover { background: transparent; }
.btn:disabled { opacity: .4; cursor: default; }
@media (pointer: coarse) { .btn { min-height: 44px; } .quiet { padding: 10px 0; } }

/* Not this ------------------------------------------------------------------ */
.notthis { padding: var(--s-5) 0; }
.nt-t { font: 750 20px/1.25 var(--display); font-stretch: 102%; letter-spacing: -.01em; margin: 0; }
.notthis p { margin: var(--s-2) 0 0; font: 400 16px/25px var(--read); color: var(--ink-2); max-width: 62ch; }
.notthis p.small { font: 400 13px var(--sans); color: var(--ink-3); }

/* End of the edition ------------------------------------------------------------- */
.end { padding: var(--s-6) 0 0 calc(var(--margin-col) + var(--s-5)); }
@media (max-width: 720px) { .end { padding-left: 0; } }
.end-main { font: 400 18px/28px var(--read); margin: 0; max-width: 62ch; color: var(--ink-2); }
.end-big { display: block; font: 800 28px/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; color: var(--ink); margin-bottom: var(--s-2); }
.end-main a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.end-links { margin: var(--s-2) 0 0; font-size: 14px; color: var(--ink-2); }
.end-links a, .end-links .quiet { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.end-small { margin: var(--s-3) 0 0; font-size: 12px; color: var(--ink-3); }
.subscribe { margin-top: var(--s-5); max-width: 420px; }
.sub-form label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.sub-row { display: flex; gap: 6px; }
.sub-row input { flex: 1; min-width: 0; padding: 0 10px; min-height: 36px; border: var(--hair-strong); border-radius: var(--radius); background: var(--paper-raised); }
.note { margin: var(--s-6) 0 0; padding: var(--s-3) var(--s-4); border: var(--hair-strong); border-radius: var(--radius); font-size: 14px; color: var(--ink-2); }
.empty-line { padding: var(--s-5) 0; color: var(--ink-3); font: 400 17px/27px var(--read); }
.back { margin: var(--s-5) 0 0; font-size: 14px; }

/* Today as a deck: one call at a time ------------------------------------------- */
.edition.today { max-width: var(--deck); }
.today .thesis { display: block; padding: var(--s-6) 0 var(--s-5); border-bottom: 0; }
.today #brief-toggle { margin-top: var(--s-3); display: inline-block; }
.today .brief .dek { margin: 0 0 var(--s-3); color: var(--ink); }
.today .headline { font-size: 30px; }
.today .dek { font-size: 16px; line-height: 25px; }
.today .kick { margin: 0 0 var(--s-2); font: 500 13px var(--read); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.today .kick .dot { margin: 0 4px 0 0; }
.today .headline { max-width: 26ch; }
.deck-intro { border-top: var(--hair); padding-top: var(--s-5); margin-bottom: var(--s-4); }
.deck-h { margin: 0; font: 800 22px/1.15 var(--display); font-stretch: 110%; letter-spacing: -.015em; }
.deck-sub { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-2); max-width: 70ch; }
.deck-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.prog { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.prog button { height: 18px; padding: 7px 0; border: 0; background: none; border-radius: var(--pill); }
.prog button::before { content: ""; display: block; height: 4px; border-radius: var(--pill); background: var(--rule); transition: background var(--t-base); }
.prog button.done::before { background: var(--ink); }
.prog button.passed::before { background: var(--ink-3); }
.prog button.now::before { background: var(--accent-fill); }
.prog-label { font: 500 13px var(--read); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deck { position: relative; }
.stack-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-6) var(--s-6) var(--s-5);
  border-radius: var(--radius-deck); min-height: 420px; margin: 0; overflow: hidden; }
.stack-card.enter-r { animation: deck-r var(--t-deck) var(--ease); }
.stack-card.enter-l { animation: deck-l var(--t-deck) var(--ease); }
@keyframes deck-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes deck-l { from { opacity: 0; transform: translateX(-28px); } }
.sc-num { font: 900 136px/.8 var(--display); font-stretch: 150%; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ink-3); user-select: none; }
.sc-main { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.sc-pills { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.sc-pills > span { padding: 4px 11px; border-radius: var(--pill); border: var(--hair); display: inline-flex; align-items: center; gap: 6px; }
.sc-pills > span.acc { color: var(--accent); border-color: currentColor; font-weight: 600; }
.sc-pills .dot { margin: 0; }
.sc-pills .hit { border-color: currentColor; }
.stack-card .call-t { font: 800 36px/1.04 var(--display); font-stretch: 105%; letter-spacing: -.025em; }
.stack-card .one { font-size: 18px; line-height: 1.5; -webkit-line-clamp: unset; display: block; margin: 0; }
.sc-pull { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--ink-2); }
.sc-pull .ticks { padding-top: 0; }
.sc-next { border-left: 3px solid var(--accent-fill); padding: 2px 0 2px var(--s-4); font-size: 15.5px; line-height: 1.55; max-width: 66ch; }
.sc-next b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.stack-card .for { font-size: 13px; }
.stack-card .more .sec:first-child { margin-top: var(--s-2); }
.sc-acts { margin-top: auto; padding-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.sc-acts .btn.done { border-color: var(--hit); background: transparent; color: var(--hit); }
.sc-links { display: inline-flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.kbd-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.kbd-hint kbd { font-size: 11px; }
.deck-end { padding: var(--s-6); border-radius: var(--radius-deck); background: var(--paper-raised); border: var(--hair); display: grid; gap: var(--s-4); }
.today .notthis { display: block; border-top: var(--hair); padding-bottom: 0; }
.today .notthis .margin { flex-direction: row; padding: 0 0 4px; font: 600 12px var(--read); letter-spacing: .08em; text-transform: uppercase; }
.today .list-end { border-top: var(--hair); margin-top: var(--s-5); padding-top: var(--s-5); }
.deck-end .end-links, .deck-end .end-small { margin: 0; }
.deck-end .subscribe { margin-top: 0; }
.today .list-end { padding-left: 0; }
@media (prefers-reduced-motion: reduce) { .stack-card.enter-r, .stack-card.enter-l { animation: none; } }
@media (max-width: 720px) {
  .today .headline { font-size: 25px; }
  .stack-card { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) var(--s-4); min-height: 0; gap: var(--s-2); }
  .sc-num { font-size: 64px; }
  .stack-card .call-t { font-size: 27px; }
  .stack-card .one { font-size: 16px; }
  .kbd-hint { display: none; }
  .sc-acts .btn.big { flex: 1 1 120px; }
  .deck-end { padding: var(--s-5) var(--s-4); }
  .deck-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .deck-bar .quiet { grid-column: 1 / -1; justify-self: start; }
}

/* Explore, Board, Record ---------------------------------------------------------- */
.xbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); padding: var(--s-6) 0 var(--s-4); }
.xtitle { min-width: 0; flex: 1 1 320px; }
.xsub { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-2); max-width: 64ch; }
.xctl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.pick select { min-height: 32px; padding: 0 30px 0 12px; border: var(--hair-strong); border-radius: var(--pill); background: var(--paper-raised); font: 500 13px var(--read); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A readable list: title, one line of meaning, a quiet line of facts. */
.plist { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.plist > li { padding: var(--s-4) 0; border-top: var(--hair); display: grid; gap: 4px; }
.plist > li:first-child { border-top: 0; }
.plist .t { font: 650 17px/1.35 var(--read); color: var(--ink); }
.plist p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); max-width: 70ch; }
.plist .meta { font-size: 13px; color: var(--ink-3); }
.plist .meta .kind { display: inline-block; font: 600 11px var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: var(--hair-strong); border-radius: var(--pill); padding: 1px 8px; margin-right: 4px; }
.plist .meta a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-strong); }
.plist .behind { justify-self: start; margin-top: 4px; font: 600 12.5px var(--read); color: var(--accent); padding: 3px 10px; border: 1px solid currentColor; border-radius: var(--pill); }
.plist .behind:hover { text-decoration: none; background: var(--accent-soft); }
.plist .rising { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.plist .chips { margin-top: 2px; }
.plist.media > li { grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.mitem .thumb { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.mitem .thumb.sq { aspect-ratio: 1; width: 88px; }
.mitem .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mitem > div { display: grid; gap: 4px; min-width: 0; }
@media (max-width: 560px) { .plist.media > li { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); } .mitem .thumb.sq { width: 72px; } .xbar { padding-top: var(--s-5); } }
.xbar h1 { font: 800 30px/1.1 var(--display); font-stretch: 115%; letter-spacing: -.02em; margin: 0; margin-right: auto; }
.xbar .search { flex: 1 1 260px; max-width: 360px; }
.tabs { display: flex; gap: var(--s-5); border-bottom: var(--hair-strong); margin-bottom: var(--s-4); font-weight: 500; font-size: 14px; overflow-x: auto; }
.tabs a { padding: var(--s-2) 0; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.xhead { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; margin: 0 0 var(--s-3); }
.xhead p { margin: 0; color: var(--ink-3); font-size: 13px; flex-basis: 100%; }
.xsec { margin-bottom: var(--s-6); }
.explore .call { grid-template-columns: 70px minmax(0, 1fr); }
@media (max-width: 720px) { .explore .call { grid-template-columns: minmax(0, 1fr); } }
.ticker-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: var(--s-4) 0; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .board { grid-template-columns: minmax(0, 1fr); } }
.col { padding-top: var(--s-2); }
.scard { padding: var(--s-3) var(--s-4); margin-top: var(--s-2); background: var(--paper-raised); border: var(--hair); border-radius: var(--radius-card); display: grid; gap: 6px; }
.scard p { margin: 0; }
.scard .t { font: 600 16px/22px var(--read); }
.scard.stale { opacity: .62; }
.scard select, .scard textarea { width: 100%; border: var(--hair-strong); border-radius: var(--radius); background: var(--paper-raised); padding: 6px 8px; font-size: 13px; }
.scard textarea { min-height: 56px; resize: vertical; }
.passed-list { margin-top: var(--s-6); }
.passed-list ul { list-style: none; padding: 0; margin: 0; }
.passed-list li { padding: 6px 0; border-top: var(--hair); font-size: 14px; color: var(--ink-2); }
.ledger { list-style: none; margin: var(--s-3) 0 var(--s-5); padding: 0; }
.ledger li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px var(--s-4); padding: var(--s-3) 0; border-top: var(--hair); align-items: baseline; }
.ledger .no { color: var(--ink-2); font-size: 13px; }
.ledger .t { font: 500 17px/24px var(--read); grid-column: 2; }
.ledger li > span:nth-of-type(2) { grid-column: 2; }
.ledger li > span:nth-of-type(3) { grid-column: 3; grid-row: 1; text-align: right; }
.ledger .hit { color: var(--hit); }
.ledger .miss { color: var(--miss); }
@media (max-width: 600px) { .ledger li { grid-template-columns: 44px minmax(0, 1fr); } .ledger li > span:nth-of-type(3) { grid-column: 2; grid-row: auto; text-align: left; } }

/* Shortcut sheet and onboarding ------------------------------------------------------ */
.keys, .onb { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: var(--gutter); }
.keys-box, .onb-box { width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  background: var(--paper-raised); border: var(--hair-strong); border-radius: var(--radius-deck); padding: var(--s-5) var(--s-6); }
html.modal-open, html.modal-open body { overflow: hidden; }
/* Onboarding: the body scrolls, the actions stay pinned and visible. */
.onb-box { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.onb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--s-5) var(--s-6) var(--s-4); }
.onb-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px var(--s-2);
  padding: var(--s-3) var(--s-6); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); border-top: var(--hair); background: var(--paper-raised); }
.onb-hint { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--miss); text-align: right; }
.onb-hint:empty { display: none; }
.tracks.need .track { border-color: var(--miss); }
.onb button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 560px) {
  /* A bottom sheet on phones: full width, as tall as the visible screen allows, buttons full width and thumb-sized. */
  .onb { place-items: end stretch; padding: 0; }
  .onb-box { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: var(--radius-deck) var(--radius-deck) 0 0; border-bottom: 0; }
  .onb-body { padding: var(--s-5) var(--s-4) var(--s-4); }
  .onb-actions { padding-left: var(--s-4); padding-right: var(--s-4); }
  .onb-actions .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; }
  .onb-hint { text-align: left; }
  .tick-input { font-size: 16px; } /* below 16px iOS zooms the page on focus */
}
.keys-box { width: min(420px, 100%); }
.keys-box h2, .onb-box h2 { font: 800 26px/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; margin: 0 0 var(--s-3); }
.keys-box dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 var(--s-5); }
.keys-box dd { margin: 0; color: var(--ink-2); }
.onb-box h3 { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: var(--s-5) 0 var(--s-2); }
.onb-box .muted { margin: 0; }
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onb-mark { color: var(--ink); margin-bottom: var(--s-3); }
.onb-mark .mark { width: 44px; height: 44px; display: block; }
@media (max-width: 560px) { .tracks { grid-template-columns: minmax(0, 1fr); } .keys-box { padding: var(--s-4); } }
.track { text-align: left; padding: 12px; border-radius: var(--radius); border: var(--hair-strong); background: none; }
.track b { display: block; font-size: 15px; margin-bottom: 3px; }
.track span { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; display: block; }
.track.on { border-color: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-fill); }
.chip-btn { border: var(--hair-strong); background: none; border-radius: var(--pill); padding: 5px 12px; font-size: 13px; }
.chip-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tick-input { width: 100%; min-height: 38px; padding: 0 12px; border-radius: var(--radius); border: var(--hair-strong); background: none; margin-bottom: 10px; text-transform: uppercase; font-family: var(--mono); }

/* Shared controls ------------------------------------------------------------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.seg.wrap { flex-wrap: wrap; }
.seg button { border: 1px solid transparent; background: none; padding: 5px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.search { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: 36px; border: var(--hair-strong); border-radius: var(--radius); background: var(--paper-raised); }
.search.big { flex: 1 1 320px; }
.search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s-2); }
.tag { display: inline-block; font: 500 12px var(--sans); padding: 3px 10px; border-radius: var(--pill); border: var(--hair); color: var(--ink-2); white-space: nowrap; }
.ticker { display: inline-block; font: 500 13px var(--mono); padding: 2px 9px; border: var(--hair-strong); border-radius: var(--pill); color: var(--ink); }
.ticker:hover { border-color: var(--ink); text-decoration: none; }
.why { color: var(--ink-3); font-size: 12.5px; }
.link { color: var(--ink); font-weight: 500; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.linkbtn { border: 0; background: none; padding: 0; font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Reused Explore renderers: news, feed, media, trends, papers, search ---------------- */
.page { max-width: none !important; }
.ph { margin: var(--s-6) 0 var(--s-4); }
.ph h1 { font: 800 28px/1.1 var(--display); font-stretch: 112%; letter-spacing: -.02em; margin: 2px 0 0; }
.ph p { margin: 6px 0 0; color: var(--ink-2); max-width: 64ch; }
.ph .date { font: 400 12px var(--mono); color: var(--ink-3); }
.panel { background: none; border: 0; border-top: var(--hair); }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: var(--hair); }
.panel-h h2 { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.panel-b { padding: 12px 0; }
.empty { padding: var(--s-6) 0; color: var(--ink-3); font: 400 17px/27px var(--read); }
.empty b { display: block; color: var(--ink-2); font-weight: 500; }
.notice { padding: 10px 14px; border: var(--hair-strong); color: var(--ink-2); font-size: 13.5px; margin-bottom: 20px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 12px; }
.frow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: var(--hair); }
.frow:first-child { border-top: 0; }
.frow .sc { font: 500 13px var(--mono); color: var(--ink-3); text-align: right; padding-top: 3px; }
.frow .sc.hi { color: var(--ink); }
.frow .t { font: 500 17px/24px var(--read); }
.frow .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 400 12px var(--mono); color: var(--ink-3); margin-top: 3px; }
.frow p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; max-width: 75ch; }
.frow .meta.also-line { display: block; font-family: var(--sans); }
.frow a.also { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
.count-line { font: 400 12px var(--mono); color: var(--ink-3); margin: 0 0 8px; }
.news-group + .news-group { margin-top: var(--s-5); }
.news-group > h2 { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; display: flex; gap: 8px; }
.news-group > h2 span { font-family: var(--mono); letter-spacing: 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.mcard { display: flex; flex-direction: column; border-top: var(--hair) !important; }
.mcard .thumb { display: block; background: var(--surface-2); aspect-ratio: 16 / 9; overflow: hidden; margin-top: var(--s-3); }
.mcard .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mcard .thumb img.sq { object-fit: contain; padding: 18px; }
.mbody { padding: 10px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mbody .meta { font: 400 12px var(--mono); color: var(--ink-3); }
.mbody .t { font: 500 17px/24px var(--read); }
.mbody p { margin: 0; color: var(--ink-2); font-size: 14px; }
.mlinks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.noimg { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-size: 13px; }
.trends { border-top: var(--hair); }
.trend { display: grid; grid-template-columns: 80px minmax(0, 1fr) 70px; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: var(--hair); align-items: start; }
.trend h2 { margin: 0 0 4px; font: 500 18px/24px var(--read); }
.trend p { margin: 0; color: var(--ink-2); }
.trend details { grid-column: 2 / -1; }
.dirw { font: 500 12px var(--mono); padding-top: 4px; color: var(--ink-3); }
.dirw.new, .dirw.rising { color: var(--ink); }
.evcount { font: 400 12px var(--mono); color: var(--ink-3); text-align: right; }
.evcount b { display: block; font-size: 18px; color: var(--ink); font-weight: 500; }
@media (max-width: 600px) { .trend { grid-template-columns: minmax(0, 1fr); gap: 4px; } .evcount { text-align: left; } }
.archive { list-style: none; margin: 0; padding: 0; }
.archive li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: var(--hair); }
.archive .yr { font: 400 15px var(--mono); color: var(--ink-3); }
.archive .t { font: 500 17px/24px var(--read); }
.archive p { margin: 4px 0; color: var(--ink-2); }
.wgrid { display: grid; gap: 0; }

/* Momentum marks (pipeline-drawn SVG) ---------------------------------------------- */
.spark { display: block; overflow: visible; }
.spark .now { fill: var(--accent-mark); }
.spark .past { fill: var(--ink-3); }
.spark .zero { fill: var(--rule-strong); }
.spark .hit { fill: transparent; }
.spark .hit:hover { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.strip .on { fill: var(--ink); }
.strip .off { fill: var(--rule); }
.rising-list { list-style: none; margin: 0; padding: 0; }
.rising-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: var(--hair); }
.rising-list b { font: 500 17px/24px var(--read); }
.rising-list .meta { grid-column: 1 / -1; font: 400 12px var(--mono); color: var(--ink-3); }
.mtile { display: grid; gap: 8px; padding: 14px 0; border-top: var(--hair); }
.mtile-h { display: flex; justify-content: space-between; gap: 8px; font: 500 17px/24px var(--read); }
.mtile-v b { font: 500 22px var(--mono); }
.mtile-s { display: grid; gap: 6px; }
.delta { margin-left: 8px; font: 400 12.5px var(--mono); color: var(--ink-2); }
.delta.up { color: var(--hit); }
.delta.down { color: var(--ink-3); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 var(--s-5); margin-bottom: 18px; }
.mone { max-width: 320px; }
.stage-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font-family: var(--mono); }

@media print { .mast, .call-actions, .call-foot, .end-links, .subscribe { display: none; } body { background: #fff; } }