/* Newsdesk charts: the History map, the topic river, the posting clock, and the brief's coverage spectrum and open lanes.
   Kept apart from styles.css so the charts can grow without crowding it. Colors come from styles.css (light-dark pairs);
   the ten topic colors are below. Every animation here stops under prefers-reduced-motion. */

:root {
  --tc-0: var(--blue);
  --tc-1: var(--red);
  --tc-2: light-dark(#7c3aed, #a78bfa);
  --tc-3: light-dark(#0e8a6a, #3fd1a5);
  --tc-4: light-dark(#c27803, #f2b552);
  --tc-5: light-dark(#db2777, #f472b6);
  --tc-6: light-dark(#0891b2, #22d3ee);
  --tc-7: light-dark(#65a30d, #a3e635);
  --tc-8: light-dark(#ea580c, #fb923c);
  --tc-9: light-dark(#64748b, #94a3b8);
  --chart-grid: var(--viz-grid);
}

/* ---- Shared: chart cards, tooltips, legends ---- */
.chart-card { position: relative; }
.chart-card .panel-head { align-items: center; }
.chart-card .chart-sub { color: var(--muted); font-size: 14px; margin: 2px 0 12px; max-width: 70ch; }
.chart-box { position: relative; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.chart-box svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.chart-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; max-width: 280px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px;
  font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-up); opacity: 0; transition: opacity .15s;
}
.chart-tip.on { opacity: 1; }
.chart-tip b { font-weight: 700; }
.chart-tip .muted { color: var(--muted); }
.chart-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.chart-loading { display: grid; place-items: center; min-height: 240px; color: var(--muted); font-size: 14px; }
.patterns-page { display: grid; gap: var(--gap); }
.patterns-page > .panel { margin: 0; }

/* ======== History map (Map 2.0) ======== */
/* Dots, links and topic blobs live in one SVG that pans and zooms; topic names, the big date, the zoom buttons and
   the tour's caption float above it in screen space. --ds (set on the SVG) shrinks dots and their dates as you zoom
   in, so they grow gently instead of ballooning. */
.hmap { position: relative; }
.hm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; }
.hm-bar label.check { margin: 0; font-size: 13.5px; }
.hm-status { margin-left: auto; font: 500 12px/1.3 var(--mono); letter-spacing: .02em; }
.hm-follow-ic { width: 17px; height: 17px; flex: none; }
.hm-follow-ic path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 2.2 2.6; }
.hm-follow-ic circle { fill: var(--kind-promise); }
.hm-follow-ic circle + circle { fill: currentColor; }

.hm-wrap { margin-top: 0; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.hm-stage { display: grid; gap: 6px; min-width: 0; }
.hm-canvas {
  height: clamp(440px, 64vh, 660px); isolation: isolate; touch-action: none;
  background: radial-gradient(110% 85% at 50% 42%, color-mix(in srgb, var(--panel) 75%, transparent), transparent 72%), var(--panel-2);
}
.hm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; font-family: var(--body); }
.hm-svg:active { cursor: grabbing; }
.hm-grid-dot { fill: color-mix(in srgb, var(--ink) 11%, transparent); }

/* Dots */
.hm-node { cursor: pointer; outline: none; transition: opacity .3s var(--ease); }
.hm-dot { transform: scale(var(--ds, 1)); }
.hm-core { stroke: var(--panel); stroke-width: 2; transition: scale .35s var(--spring), stroke .2s, stroke-width .2s; }
.hm-halo { opacity: 0; transition: opacity .3s var(--ease); }
.hm-promise { fill: var(--panel); pointer-events: none; }
.hm-when {
  font-size: calc(10.5px * var(--ds, 1)); font-weight: 600; fill: var(--muted); pointer-events: none;
  paint-order: stroke; stroke: var(--panel-2); stroke-width: calc(3px * var(--ds, 1)); stroke-linejoin: round;
}
.hm-when[hidden], .hm-band[hidden] { display: none; }
.hm-node:hover .hm-core, .hm-node.hm-glow .hm-core, .hm-node.hm-held .hm-core { scale: 1.22; }
.hm-node.hm-glow .hm-halo, .hm-node.hm-held .hm-halo { opacity: .34; filter: blur(2.5px); }
.hm-node.selected .hm-core { stroke: var(--ink); stroke-width: 3; }
.hm-node.selected .hm-halo { opacity: .3; filter: blur(2.5px); }
.hm-node:focus-visible .hm-core { stroke: var(--blue); stroke-width: 3.5; }
.hm-node.linking .hm-core { stroke: var(--red); stroke-width: 4; }
.hm-node.linking .hm-halo { opacity: .4; fill: var(--red); animation: hm-breathe 1.4s ease-in-out infinite; }
.hm-svg.hm-linking .hm-node { cursor: crosshair; }
/* While linking, topic names step back so the dots under them can be picked. */
.hm-svg.hm-linking ~ .hm-labels .hm-topic { pointer-events: none; opacity: .4; }
.hm-off { opacity: 0 !important; pointer-events: none; }

/* Lines */
.hm-edge { fill: none; transition: opacity .3s var(--ease), stroke-width .2s; }
.hm-sim { stroke: color-mix(in srgb, var(--muted) 42%, transparent); stroke-width: 1.1; }
.hm-link { stroke-width: 2.6; stroke-linecap: round; }
.hm-link.suggested { stroke-dasharray: 6 5; }
.hm-edge.hm-picked { stroke-width: 3.6; }
.hm-sim.hm-picked { stroke: var(--muted); stroke-width: 1.8; }
.hm-band { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Hover a dot or a topic: it and what it touches stay bright, the rest dims */
.hm-svg.hm-dim .hm-node:not(.hm-lit) { opacity: .14; }
.hm-svg.hm-dim .hm-edge:not(.hm-lit) { opacity: .06; }
.hm-svg.hm-dim .hm-edge.hm-lit { stroke-width: 3.4; }
.hm-svg.hm-dim .hm-sim.hm-lit { stroke-width: 1.8; stroke: var(--muted); }
.hm-svg.hm-dim .hm-blob:not(.hm-hot) { opacity: .35; }

/* Topic groups: a soft blob behind the dots, a name floating above */
.hm-blob {
  fill: color-mix(in srgb, var(--tc) 10%, transparent); stroke: color-mix(in srgb, var(--tc) 34%, transparent); stroke-width: 1.3;
  pointer-events: none; opacity: 0; transition: opacity .9s var(--ease), fill .25s, stroke .25s;
}
.hm-blob.on { opacity: 1; }
.hm-blob.hm-hot { fill: color-mix(in srgb, var(--tc) 19%, transparent); stroke: color-mix(in srgb, var(--tc) 62%, transparent); }
.hm-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hm-topic {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 10px 0 8px; border-radius: 999px; white-space: nowrap; cursor: pointer; will-change: transform;
  font: 650 12.5px/1 var(--body); color: var(--ink);
  background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--tc) 42%, var(--line));
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--tc) 80%, transparent), 0 1px 2px var(--sh-1);
  transition: opacity .45s var(--ease), visibility .45s, scale .35s var(--spring), box-shadow .2s, border-color .2s;
}
.hm-topic i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 22%, transparent); }
.hm-topic b { font: 600 11px/1 var(--mono); color: var(--muted); }
.hm-topic:hover, .hm-topic:focus-visible { scale: 1.07; border-color: var(--tc); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--tc) 90%, transparent), 0 1px 2px var(--sh-1); }
.hm-topic.hm-gone { opacity: 0; visibility: hidden; scale: .9; pointer-events: none; }
.hm-arriving .hm-topic { opacity: 0; scale: .9; }
.hmap .similar-stroke { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.legend .hm-legend-topic {
  width: 17px; height: 11px; border-radius: 6px; background: color-mix(in srgb, var(--tc-3) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc-3) 45%, transparent);
}

/* Spread by date: year lines behind the dots, their names along the bottom */
.hm-years { opacity: 0; transition: opacity .6s var(--ease); }
.hm-years.on { opacity: 1; }
.hm-year { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.hm-axis { position: absolute; left: 0; bottom: 0; width: 100%; height: 28px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hm-axis.on { opacity: 1; }
.hm-axis text { font: 600 11px var(--mono); fill: var(--muted); }

/* Zoom buttons */
.hm-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; border-radius: 12px; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
}
.hm-zoom button { appearance: none; border: 0; background: transparent; color: var(--ink); width: 38px; height: 34px; font: 600 18px/1 var(--body); cursor: pointer; transition: background .15s; }
.hm-zoom button + button { border-top: 1px solid var(--line); }
.hm-zoom button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.hm-zoom button:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.hm-zoom .hm-fit { font: 700 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

/* Time-lapse: the big date, the play button and the scrubber */
.hm-date {
  position: absolute; left: 18px; top: 12px; z-index: 2; pointer-events: none; color: var(--ink);
  font: 800 clamp(30px, 4.6vw, 50px)/1 var(--display); font-stretch: 78%; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
  text-shadow: 0 2px 16px var(--panel-2), 0 0 2px var(--panel-2);
}
.hm-date.on { opacity: .92; transform: none; }
.hm-date small { display: block; margin-top: 5px; font: 600 12px/1.3 var(--mono); letter-spacing: .03em; color: var(--muted); }
.hm-time { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; }
.hm-play { flex: none; min-width: 98px; }
.hm-play svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
.hm-scrub { position: relative; flex: 1; min-width: 0; height: 50px; cursor: pointer; touch-action: none; border-radius: 10px; outline: none; }
.hm-scrub:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.hm-scrub-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-track { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.hm-fill { fill: var(--red); transition: fill .3s; }
.hm-scrub.all .hm-fill { fill: color-mix(in srgb, var(--ink) 26%, transparent); }
.hm-scrub.all .hm-knob { border-color: color-mix(in srgb, var(--ink) 45%, var(--panel)); box-shadow: var(--shadow); }
.hm-mark { opacity: .5; }
.hm-scrub-tick { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1; }
.hm-scrub-label { font: 500 10.5px var(--mono); fill: var(--muted); }
.hm-elect { --c: var(--red); }
.hm-elect line { stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .75; }
.hm-elect path { fill: var(--c); }
.hm-charge { fill: var(--muted); opacity: .1; }
.hm-charge.p-D { fill: var(--blue); }
.hm-charge.p-R { fill: var(--red); }
.hm-knob {
  position: absolute; left: 0; top: 27px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: var(--panel); border: 2.5px solid var(--red); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--red) 60%, transparent), var(--shadow);
  transition: scale .25s var(--spring);
}
.hm-scrub:hover .hm-knob, .hm-scrub.dragging .hm-knob { scale: 1.18; }

/* The side panel */
.hm-side { max-height: clamp(440px, 64vh, 660px); overflow: auto; background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel-2) 55%, var(--panel))); }
.hm-side .hm-side-sub { margin-top: 18px !important; font-size: 14px; }
.hm-side-topics { display: grid; gap: 2px; margin: 4px 0 6px; }
.hm-side-topic {
  appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid transparent; background: transparent; color: var(--ink); font: 600 13.5px/1.25 var(--body); transition: background .15s, border-color .15s, transform .2s var(--spring);
}
.hm-side-topic:hover { background: var(--panel-2); border-color: var(--line); transform: translateX(2px); }
.hm-side-topic i, .hm-side-in i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 20%, transparent); }
.hm-side-topic b { margin-left: auto; font: 600 11.5px/1 var(--mono); color: var(--muted); }
.hm-side-in { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Follow a promise: the picker */
.hm-picker {
  position: absolute; z-index: 30; top: 44px; left: 0; width: min(430px, 100%); max-height: min(70vh, 540px); overflow: auto; padding: 8px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--shadow-up);
}
.hm-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 6px 8px 10px; }
.hm-pick-head p { margin: 2px 0 0; }
.hm-pick-wait { display: flex; align-items: center; padding: 14px 10px; }
.hm-pick-empty { padding: 4px 10px 10px; }
.hm-pick-empty p { margin: 4px 0; }
.hm-trail {
  appearance: none; display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 13px;
  border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; transition: background .18s, border-color .18s, transform .25s var(--spring);
}
.hm-trail:hover, .hm-trail:focus-visible { background: color-mix(in srgb, var(--panel) 85%, transparent); border-color: var(--line); transform: translateY(-1px); outline: none; }
.hm-trail-title { font: 700 14.5px/1.3 var(--body); }
.hm-trail-text { font-size: 13px; line-height: 1.4; color: var(--muted); }
.hm-trail-meta { font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.hm-trail-path { display: flex; align-items: center; margin-top: 5px; }
.hm-trail-path i { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hm-trail-path i + i { margin-left: 16px; }
.hm-trail-path i + i::before { content: ""; position: absolute; right: 100%; top: 4px; width: 16px; height: 1px; background: var(--line); }
.hm-trail-path .hm-path-start { background: var(--kind-promise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind-promise) 22%, transparent); }

/* Follow a promise: the tour */
.hm-svg.hm-touring .hm-node:not(.hm-trail) { opacity: .16; }
.hm-svg.hm-touring .hm-edge:not(.hm-trail) { opacity: .05; }
.hm-svg.hm-touring .hm-blob { opacity: .3; }
.hm-canvas.hm-touring .hm-topic:not(:hover) { opacity: .5; }
.hm-edge.hm-trail { stroke-width: 3.2; }
.hm-node.hm-seen .hm-core { stroke: color-mix(in srgb, var(--ink) 60%, var(--panel)); stroke-width: 2.5; }
.hm-node.hm-here .hm-core { stroke: var(--ink); stroke-width: 3; scale: 1.15; }
.hm-node.hm-here .hm-halo { opacity: .42; filter: blur(3px); animation: hm-breathe 1.8s ease-in-out infinite; }
.hm-flow { fill: none; stroke-width: 5; stroke-linecap: round; opacity: .55; filter: blur(1.5px); }
.hm-spark { fill: var(--panel); stroke: currentColor; stroke-width: 3; }
.hm-spark-glow { fill: currentColor; opacity: .45; filter: blur(5px); }
.hm-pulse { color: var(--kind-promise); transition: opacity .6s var(--ease); }
.hm-pulse-done { opacity: 0; }
.hm-caption {
  position: absolute; z-index: 4; left: 14px; bottom: 14px; width: min(410px, calc(100% - 28px)); padding: 10px 14px 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--shadow-up);
}
.hm-caption.below { position: relative; left: auto; bottom: auto; width: auto; margin: 2px 0 4px; box-shadow: var(--shadow); }
.hm-cap-top { display: flex; align-items: center; gap: 10px; }
.hm-cap-step { font: 600 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hm-cap-dots { display: flex; gap: 5px; flex: 1; }
.hm-cap-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .3s, scale .3s var(--spring); }
.hm-cap-dots i.seen { background: color-mix(in srgb, var(--kind-promise) 45%, var(--line)); }
.hm-cap-dots i.on { background: var(--kind-promise); scale: 1.35; }
.hm-cap-x { margin-right: -6px; }
.hm-cap-body { margin-top: 6px; }
.hm-cap-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.hm-cap-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.hm-cap-flag { color: var(--warn); font-weight: 600; }
.hm-cap-note { margin: 4px 0 0; color: var(--muted); }
.hm-cap-text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; max-height: 6.6em; overflow: auto; }
.hm-cap-nav { display: flex; gap: 6px; margin-top: 10px; }
.hm-cap-nav .btn.primary { margin-left: auto; }

@keyframes hm-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }

@media (max-width: 859px) {
  .hm-wrap { grid-template-columns: minmax(0, 1fr); }
  .hm-side { max-height: none; }
}
@media (max-width: 640px) {
  .hm-canvas { height: min(440px, 62vh); border-radius: 14px; }
  .hm-status { margin-left: 0; width: 100%; }
  .hm-zoom button { width: 34px; height: 32px; }
  .hm-topic { height: 24px; font-size: 11.5px; gap: 5px; padding: 0 8px 0 7px; }
  .hm-topic i { width: 7px; height: 7px; }
  .hm-topic b { font-size: 10px; }
  .hm-time { gap: 8px; }
  .hm-play { min-width: 0; padding-inline: 11px; }
  .hm-caption { padding: 9px 12px 10px; }
  .hm-cap-text { font-size: 14px; }
  .hm-picker { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-node.hm-here .hm-halo, .hm-node.linking .hm-halo { animation: none; }
  .hm-topic, .hm-blob, .hm-node, .hm-edge, .hm-date, .hm-axis, .hm-years { transition: none; }
}


/* ======== Topic river ======== */

/* Stream labels: dark ink reads on most topic colors in both themes; white only on the deep ones in light mode (.lt). */
.river-card {
  min-width: 0; /* the phone chip row scrolls inside the card instead of widening the page grid */
  --rv-ink: #0b1220; --rv-halo: rgb(255 255 255 / .28);
  --rv-ink-lt: light-dark(#ffffff, #0b1220); --rv-halo-lt: light-dark(rgb(0 0 0 / .18), rgb(255 255 255 / .28));
}
.river-head { align-items: flex-start; gap: 10px 18px; }
.river-title { min-width: 0; flex: 1 1 320px; }
.river-title .chart-sub { margin-bottom: 4px; }
.river-head > .seg { flex: none; margin-top: 2px; }

/* The Who switch: whose posts the river is drawn from (his, his allies', the Democrats', everyone's on the X list). */
.river-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 12px; }
.river-who-label { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.river-who > .seg > button { padding-inline: 12px; }

/* The surge callout above the chart: a click shows that topic alone. */
.river-surge {
  appearance: none; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; width: 100%; text-align: left;
  margin: 4px 0 12px; padding: 10px 14px; border-radius: 14px; cursor: pointer; font: 500 14px/1.35 var(--body); color: var(--ink);
  background: color-mix(in srgb, var(--c) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 32%, var(--line));
  transition: transform .25s var(--spring), box-shadow .25s, border-color .2s;
}
.river-surge[hidden] { display: none; }
.river-surge:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--c); }
.river-surge:active { transform: scale(.99); }
.river-surge b { font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.river-surge span { min-width: 0; }
.river-surge em { margin-left: auto; font: 600 12.5px/1 var(--body); font-style: normal; color: var(--muted); white-space: nowrap; }
.river-surge:hover em { color: var(--ink); }
.river-surge .pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.river-surge .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); animation: rv-ping 2.4s var(--ease) infinite; }
@keyframes rv-ping { from { transform: scale(1); opacity: .55; } 70%, to { transform: scale(3.2); opacity: 0; } }

/* Topic chips: hover lights a stream up, a click shows it alone. */
.river-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.river-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; max-width: 100%;
  font: 600 13px/1.2 var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
  transition: opacity .25s, border-color .2s, background .25s, transform .3s var(--spring), box-shadow .25s;
}
.river-chip .sw {
  width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.river-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.river-chip .ct { font: 600 11.5px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.river-chip .up { font: 700 11px/1 var(--mono); color: var(--c); padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); }
.river-chip .up::before { content: "▲ "; font-size: 8px; vertical-align: 1px; }
.river-chip:hover, .river-chip.on { border-color: var(--c); transform: translateY(-1px); }
.river-chip:active { transform: scale(.95); }
.river-chip.iso { background: color-mix(in srgb, var(--c) 16%, var(--panel)); border-color: var(--c); box-shadow: 0 8px 18px -12px var(--c); }
.river-legend.hl .river-chip:not(.on), .river-legend.isolating:not(.hl) .river-chip:not(.iso) { opacity: .5; }

/* The chart */
.river-box { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 55%, var(--panel)), var(--panel-2)); }
.river-box:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.river-wait[hidden] { display: none; }
/* Posts or Share, tucked into the chart's top-left corner. */
.river-mode { position: absolute; left: 10px; top: 9px; z-index: 3; }
.river-mode[hidden] { display: none; }
.river-mode .seg { padding: 3px; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.river-mode .seg > button { padding: 5px 11px; font-size: 12.5px; }
.river-wait { gap: 10px; grid-auto-flow: column; }
.river-box .river-svg { touch-action: pan-y pinch-zoom; cursor: crosshair; -webkit-user-select: none; user-select: none; transition: opacity .3s var(--ease); }
.river-box.busy .river-svg { opacity: .5; }
.rv-stream {
  fill: var(--c); fill-opacity: .9; stroke: var(--panel-2); stroke-width: .8; stroke-linejoin: round;
  transition: opacity .3s var(--ease), fill-opacity .3s, fill .5s var(--ease);
}
.river-svg.hl .rv-stream:not(.on) { opacity: .18; }
.river-svg.hl .rv-stream.on { fill-opacity: 1; }
.rv-stream.leaving { pointer-events: none; }
.rv-tick-line { stroke: var(--chart-grid); stroke-width: 1; }
.rv-tick { font: 500 11px/1 var(--mono); fill: var(--muted); }
.rv-hatch-bg { fill: var(--panel-2); }
.rv-hatch-line { stroke: var(--line); stroke-width: 2.4; }
.rv-gap { transition: opacity .4s var(--ease); }
.rv-gap.in, .rv-gap.out { opacity: 0; }
.rv-gap-text {
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted);
  paint-order: stroke; stroke: var(--panel-2); stroke-width: 8px; stroke-linejoin: round;
}
.rv-label {
  font: 650 12px/1 var(--body); letter-spacing: .01em; fill: var(--rv-ink); pointer-events: none; opacity: 0;
  paint-order: stroke; stroke: var(--rv-halo); stroke-width: 2.5px; stroke-linejoin: round; transition: opacity .35s var(--ease);
}
.rv-label.lt { fill: var(--rv-ink-lt); stroke: var(--rv-halo-lt); }
.rv-label.on { opacity: .96; }
.river-svg.hl .rv-label.on:not(.lit) { opacity: .2; }
.rv-guide { pointer-events: none; transition: transform .16s var(--ease), opacity .2s; }
.rv-guide-line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 3; }
.rv-guide-pill { fill: var(--panel); stroke: var(--line); filter: drop-shadow(0 4px 8px var(--sh-1)); }
.rv-guide-text { font: 600 11.5px/1 var(--mono); fill: var(--ink); }
.rv-pick { fill: var(--panel); stroke: var(--ink); stroke-width: 2.5; pointer-events: none; transition: opacity .2s; }
.rv-surge-mark { pointer-events: none; transition: opacity .3s; }
.rv-dot { fill: var(--c); stroke: var(--panel); stroke-width: 2; }
.rv-ring { fill: none; stroke: var(--c); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: rv-ring 2.4s var(--ease) infinite; }
@keyframes rv-ring { from { transform: scale(1); opacity: .85; } 70%, to { transform: scale(3); opacity: 0; } }
.rv-surge-pill { fill: var(--panel); stroke: var(--c); stroke-width: 1.2; filter: drop-shadow(0 4px 10px var(--sh-1)); }
.rv-surge-text { font: 700 11.5px/1 var(--mono); fill: var(--ink); }
.river-card.offscreen .rv-ring, .river-card.offscreen .river-surge .pulse::after { animation-play-state: paused; }

/* Tooltip rows */
.rv-tip-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.rv-tip-head i, .rv-tip-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.rv-tip-row { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.rv-tip-row .muted { margin-left: auto; padding-left: 14px; font: 500 12px/1 var(--mono); }
.rv-tip-people { margin: 6px 0 4px; padding-top: 2px; border-top: 1px dashed var(--line); font-size: 12.5px; }
.rv-post .post-meta .rv-post-by { color: var(--ink); font-weight: 650; }

/* The posts behind a point */
.river-posts {
  margin-top: 14px; padding: 16px 16px 8px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); background: color-mix(in srgb, var(--c) 5%, var(--panel));
}
.rv-posts-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rv-posts-head .sw { width: 6px; align-self: stretch; min-height: 34px; border-radius: 6px; background: var(--c); flex: none; }
.rv-posts-head > div { min-width: 0; }
.panel .rv-posts-head h3 { margin: 0; font: 800 19px/1.1 var(--display); font-stretch: 85%; }
.rv-posts-head p { margin: 3px 0 0; }
.rv-posts-head .rv-close { margin-left: auto; align-self: flex-start; }
.rv-post {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 5px 14px 14px 5px;
  padding: 12px 14px; box-shadow: var(--shadow); transition: transform .3s var(--spring), box-shadow .3s;
}
.rv-post:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.rv-post-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.5; }
.rv-post .post-meta { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 10px; }
.rv-post-list.rise .rv-post { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.rv-post-list:has(> .rv-skel) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; padding-bottom: 8px; }
.rv-skel i {
  display: block; height: 11px; border-radius: 6px; margin: 7px 0;
  background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2)); background-size: 200% 100%; animation: rv-shimmer 1.2s linear infinite;
}
.rv-skel i:last-child { width: 55%; }
@keyframes rv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.river-posts .error-box { margin-bottom: 8px; }
.river-posts .tile.rv-more { display: none; }
.rv-show-more { display: flex; margin: 4px auto 10px; }

/* Empty and error states */
.river-empty { text-align: center; padding: 38px 20px 42px; color: var(--muted); }
.river-empty svg { width: 120px; height: 40px; margin: 0 auto 10px; display: block; }
.river-empty svg path { fill: color-mix(in srgb, var(--blue) 35%, transparent); }
.panel .river-empty h3 { color: var(--ink); margin: 0 0 6px; }
.river-empty p { max-width: 54ch; margin: 0 auto 14px; }
.river-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rv-moved { margin: 4px 0 12px; }
.river-error { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 0 20px; }
.river-why { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); }
.river-why b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-naming { font-style: normal; animation: rv-breathe 1.8s ease-in-out infinite; }
@keyframes rv-breathe { 50% { opacity: .45; } }

@media (max-width: 760px) {
  .river-why { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .river-head > .seg { width: 100%; }
  .river-head > .seg > button { flex: 1; padding-inline: 8px; }
  .river-who { gap: 6px; }
  .river-who > .seg { width: 100%; }
  .river-who > .seg > button { flex: 1; padding-inline: 6px; }
  .river-surge { font-size: 13.5px; padding: 9px 12px; }
  .river-surge em { margin-left: 0; }
  /* One row of chips that scrolls sideways, so the river stays on the first screen. */
  .river-legend {
    gap: 5px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -16px; padding: 2px 16px 4px;
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .river-legend::-webkit-scrollbar { display: none; }
  .river-chip { flex: none; font-size: 12px; gap: 6px; padding: 4px 9px 4px 7px; }
  .river-chip .sw { width: 8px; height: 8px; }
  .river-chip .ct { font-size: 11px; }
  .river-posts { padding: 12px 12px 4px; margin-inline: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-ring, .river-surge .pulse::after, .rv-naming, .rv-skel i { animation: none; }
  .rv-ring { opacity: .4; transform: scale(1.9); }
  .rv-guide, .rv-stream, .rv-label, .rv-gap, .river-chip, .river-chip .sw, .river-surge, .rv-post { transition: none; }
}

/* ======== Posting clock ======== */
/* A grid item sizes to its content by default: a long week label mustn't widen the card (or the page) on a phone. */
.clock-card { min-width: 0; }
.clock-head { align-items: flex-start; }
.clock-title .chart-sub { margin-bottom: 0; }
.clock-step { display: flex; align-items: center; gap: 4px; }
.clock-step[hidden] { display: none; }
.clock-arrow {
  appearance: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: transform .15s var(--ease), border-color .2s, opacity .2s;
}
.clock-arrow.next .ic { transform: scaleX(-1); }
.clock-arrow:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.clock-arrow:active:not(:disabled) { transform: scale(.88); }
.clock-arrow:disabled { opacity: .35; cursor: default; }
.clock-range { min-width: 138px; text-align: center; font: 600 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity .2s; }
.clock-range > span { display: inline-block; }
.clock-today { margin-left: 6px; }
.clock-today:disabled { opacity: .45; }
.clock-card.busy .clock-range { opacity: .5; }

/* The one line worth saying about the week. It opens and closes by morphing its height. */
.clock-callout { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: grid-template-rows .45s var(--ease), opacity .3s, margin .45s var(--ease); }
.clock-callout.on { grid-template-rows: 1fr; opacity: 1; margin: 6px 0 16px; }
.clock-callout-in { min-height: 0; overflow: hidden; }
.clock-callout-card {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: 14px;
  background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); color: var(--ink); font-size: 14.5px;
}
.clock-callout-card p { margin: 0; flex: 1 1 200px; }
.clock-callout-card b { color: var(--red-ink); font-weight: 750; }
.clock-callout-note { color: var(--muted); font-size: 13px; }
.clock-callout-note::before { content: " · "; }
.clock-callout[data-tone="quiet"] .clock-callout-card { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 28%, transparent); }
.clock-callout[data-tone="quiet"] .clock-callout-card b { color: var(--blue-ink); }
.clock-callout[data-tone="quiet"] .clock-pulse { background: var(--blue); }
/* The dot sits in the first line of words, so it stays with them when they wrap. */
.clock-pulse { position: relative; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: 0; border-radius: 50%; background: var(--red); }
.clock-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; color: inherit; opacity: 0; animation: clock-ping 1.8s var(--ease) 0.4s 4; }
.clock-callout:not([data-tone="quiet"]) .clock-pulse::after { color: var(--red); }
.clock-callout[data-tone="quiet"] .clock-pulse::after { color: var(--blue); }
@keyframes clock-ping { from { opacity: .7; transform: scale(.5); } to { opacity: 0; transform: scale(1.5); } }

.clock-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 22px 32px; align-items: start; }
.clock-main, .clock-side { min-width: 0; }

/* The face: the clock itself, a glow that warms up in a late-night week, and the radar beam that sweeps a new week in. */
.clock-face { position: relative; border-radius: 18px; cursor: pointer; outline: none; }
.clock-face:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.clock-svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* The face does its own hit-testing by angle and radius, so nothing drawn on it (the hand, labels) can catch a tap. */
.clock-svg, .clock-svg * { pointer-events: none; }
.clock-glow {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: var(--heat, 0);
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--red) 22%, transparent), color-mix(in srgb, var(--red) 7%, transparent) 55%, transparent);
  transition: opacity 1.4s var(--ease);
}
.clock-beam {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: conic-gradient(from 0deg, transparent 0turn 0.8turn, color-mix(in srgb, var(--red) 34%, transparent) 1turn);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(var(--hole, 50px) - 1px), #000 var(--hole, 50px));
  mask: radial-gradient(circle closest-side, transparent calc(var(--hole, 50px) - 1px), #000 var(--hole, 50px));
}
.clock-beam > i { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 50%; border-radius: 2px; background: linear-gradient(var(--red), transparent); }

.clock-track { fill: var(--chart-grid); }
.clock-track.off { opacity: .4; }
.clock-hatch-bg { fill: var(--chart-grid); }
.clock-hatch-line { fill: color-mix(in srgb, var(--warn) 40%, transparent); }
.clock-cells path { fill: var(--red); }
.clock-late { fill: var(--red); opacity: .85; }
.clock-norm-base { fill: none; stroke: var(--line); stroke-width: 1; }
.clock-norms path { fill: color-mix(in srgb, var(--ink) 15%, transparent); }
.clock-ticks circle { fill: var(--muted); opacity: .5; }
.clock-hours text { font: 600 10.5px/1 var(--mono); letter-spacing: .02em; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.clock-days text { font-family: var(--display); font-weight: 700; font-stretch: 78%; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.clock-days text.today { fill: var(--red-ink); font-weight: 850; }
.clock-days text.off { opacity: .4; }
.clock-spoke { fill: color-mix(in srgb, var(--ink) 6%, transparent); stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; pointer-events: none; }
.clock-hover { fill: none; stroke: var(--ink); stroke-width: 1.6; pointer-events: none; }
.clock-picked { fill: none; stroke: var(--ink); stroke-width: 2.6; pointer-events: none; }
.clock-hand line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.clock-hand circle { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.clock-big { font-family: var(--display); font-weight: 850; font-stretch: 75%; font-variant-numeric: tabular-nums; fill: var(--ink); text-anchor: middle; transition: fill .5s; }
.clock-center.hot .clock-big { fill: var(--red); }
.clock-big-label { font: 650 11.5px/1 var(--body); fill: var(--ink); text-anchor: middle; }
.clock-big-normal { font: 500 11px/1 var(--mono); fill: var(--muted); text-anchor: middle; }

.clock-key[hidden], .clock-bars-key > span[hidden] { display: none; }
.clock-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.clock-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.clock-ramp { display: inline-flex; gap: 2px; }
.clock-ramp i { width: 9px; height: 9px; border-radius: 2.5px; background: var(--red); }
.clock-ramp i:nth-child(1) { opacity: .18; }
.clock-ramp i:nth-child(2) { opacity: .38; }
.clock-ramp i:nth-child(3) { opacity: .58; }
.clock-ramp i:nth-child(4) { opacity: .78; }
.clock-swatch { display: inline-block; width: 14px; height: 9px; border-radius: 2.5px; }
.clock-swatch.norm { background: color-mix(in srgb, var(--ink) 15%, transparent); }
.clock-swatch.late { height: 3px; background: var(--red); }
.clock-swatch.wait {
  flex: none; width: 16px; height: 12px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--warn) 40%, transparent) 0 2px, var(--chart-grid) 2px 4.2px);
}

/* When some of the week's hours haven't been checked yet: say so, so an empty stretch isn't read as silence. */
.clock-stale {
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 12px; padding: 8px 10px 8px 12px;
  border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: 13px; line-height: 1.4; color: var(--ink);
}
.clock-stale[hidden] { display: none; }
.clock-stale p { margin: 0; flex: 1 1 200px; }
.clock-stale .btn { flex: none; }

/* Beside the clock: three numbers and the hour-by-hour bars. */
.clock-side { display: grid; gap: 14px; }
.clock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clock-stat {
  display: grid; gap: 5px; align-content: start; padding: 12px 14px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); transition: transform .3s var(--spring), box-shadow .3s;
}
.clock-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.clock-stat .eyebrow { font-size: 10.5px; }
.clock-stat b { font: 850 34px/1 var(--display); font-stretch: 75%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-stat-sub { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.clock-delta { display: inline-block; font: 700 11px/1 var(--mono); padding: 3px 6px; border-radius: 999px; vertical-align: 1px; }
.clock-delta.up { color: var(--red-ink); background: var(--red-soft); }
.clock-delta.down { color: var(--blue-ink); background: var(--blue-soft); }
.clock-bars-box { padding: 12px 14px 8px; }
.clock-bars-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.clock-bars-title { font: 800 15px/1.2 var(--display); font-stretch: 88%; }
.clock-bars-key { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); }
.clock-bars-key > span { display: inline-flex; align-items: center; gap: 5px; }
.clock-bars-key i { width: 10px; height: 10px; border-radius: 3px; }
.clock-bars-key i.wk { background: var(--red); }
.clock-bars-key i.nm { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.clock-bars-key i.wk.soft { background: color-mix(in srgb, var(--red) 32%, transparent); }
.clock-bars, .clock-daybars { overflow: visible; }
.clock-days-box { padding: 12px 14px 8px; }
.clock-day rect.rest { fill: color-mix(in srgb, var(--red) 32%, transparent); }
.clock-day rect.late { fill: var(--red); }
.clock-day text { text-anchor: middle; }
.clock-day .n { font: 700 11.5px/1 var(--mono); fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--panel-2); stroke-width: 4px; stroke-linejoin: round; }
.clock-day .wd { font: 700 12px/1 var(--display); font-stretch: 85%; fill: var(--ink); }
.clock-day .dt { font: 500 10.5px/1 var(--mono); fill: var(--muted); }
.clock-day.today .wd { fill: var(--red-ink); }
.clock-day.off { opacity: .4; }
.clock-day.part rect, .clock-day.part .n { opacity: .55; }
.clock-day rect { transition: opacity .2s; }
.clock-daybars:has(.hot) .clock-day:not(.hot) rect { opacity: .4; }
.clock-day-normal { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 4 3; }
.clock-bars-key i.dash { width: 14px; height: 0; border-radius: 0; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent); }
.clock-bars-key [hidden] { display: none; }
.clock-bar-week { fill: var(--red); transition: opacity .2s; }
.clock-bar-norm { fill: color-mix(in srgb, var(--ink) 15%, transparent); transition: fill .2s; }
.clock-bars:has(.hot) .clock-bar-week:not(.hot) { opacity: .4; }
.clock-bar-norm.hot { fill: color-mix(in srgb, var(--ink) 26%, transparent); }
.clock-bars-late { fill: var(--red-soft); rx: 6px; }
.clock-bars-lateword { font: 650 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--red-ink); }
.clock-bars-grid line { stroke: var(--chart-grid); stroke-width: 1; }
.clock-bars-grid text { font: 500 10px/1 var(--mono); fill: var(--muted); text-anchor: end; }
.clock-bars-axis text { font: 500 10.5px/1 var(--mono); fill: var(--muted); }

/* One hour's posts, under the clock. */
.clock-posts { margin-top: 16px; padding: 12px 14px 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.clock-posts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.clock-posts-head h3 { margin: 3px 0 10px; font: 800 18px/1.15 var(--display); font-stretch: 85%; }
.clock-posts-head .eyebrow { margin: 0; color: var(--red-ink); }
.clock-posts-wait { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.clock-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.clock-post-list li { animation: clock-rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.clock-post-night {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 2px 2px;
  font: 800 14px/1.2 var(--display); font-stretch: 88%; color: var(--ink);
}
.clock-post-night:first-child { padding-top: 0; }
.clock-post-night span { font: 500 11.5px/1 var(--mono); color: var(--muted); }
.clock-more { margin: 8px 0 0; }
@keyframes clock-rise { from { opacity: 0; transform: translateY(8px); } }
.clock-post {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 10px 9px 12px;
  border-radius: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform .25s var(--spring), border-color .2s, box-shadow .25s;
}
.clock-post:hover { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); transform: translateX(3px); box-shadow: var(--shadow); }
.clock-post time { font-size: 11.5px; font-weight: 600; color: var(--red-ink); white-space: nowrap; }
.clock-post-text {
  font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.clock-post-go { color: var(--muted); font-size: 18px; line-height: 1; transition: transform .25s var(--spring), color .2s; }
.clock-post:hover .clock-post-go { color: var(--red); transform: translateX(2px); }
.clock-body > .chart-loading { grid-column: 1 / -1; }
.clock-empty { grid-column: 1 / -1; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 240px; padding: 24px; text-align: center; }
.clock-empty p { margin: 0; max-width: 46ch; }
.clock-empty .btn { margin-top: 8px; }

@media (max-width: 960px) {
  .clock-body { grid-template-columns: minmax(0, 1fr); }
  .clock-face { max-width: 540px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .clock-step { width: 100%; }
  /* A week in another year needs two lines on a small phone; let it wrap rather than push the card wider. */
  .clock-range { flex: 1; min-width: 0; font-size: 12.5px; white-space: normal; text-wrap: balance; line-height: 1.25; }
  .clock-callout-note { display: block; }
  .clock-callout-note::before { content: none; }
  /* Three numbers as three rows: the words on the left, the number on the right. */
  .clock-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clock-stat { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 10px 14px; }
  .clock-stat .eyebrow, .clock-stat-sub { grid-column: 1; }
  .clock-stat b { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; }
  .clock-post { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .clock-post time { grid-column: 1; }
  .clock-post-text { grid-column: 1; }
  .clock-post-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-beam { display: none; }
  .clock-pulse::after { animation: none; }
}

/* ======== Coverage spectrum and open lanes ======== */
.cov-card { overflow: hidden; }
/* A thin spectrum along the top edge says what the card is about before you read a word. */
.cov-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; opacity: .85; pointer-events: none;
  background: linear-gradient(90deg, var(--lean-left), var(--lean-lean-left), var(--lean-center), var(--lean-lean-right), var(--lean-right));
}
.cov-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.cov-top .w-title { margin: 0; }
.cov-top .seg > button { display: inline-flex; align-items: center; gap: 7px; }
.cov-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font: 700 10.5px/1 var(--mono); color: var(--on-red); background: var(--red);
}
.cov-n.is-good { background: var(--good); color: var(--panel); }

/* Two views share one card: whatever belongs to the other view fades out and leaves the tab order. */
.cov-swap { display: grid; }
.cov-swap > * { grid-area: 1 / 1; min-width: 0; }
.cov-card [data-for] { transition: opacity .32s var(--ease), visibility 0s; }
.cov-card[data-view="spectrum"] [data-for="lanes"], .cov-card[data-view="lanes"] [data-for="spectrum"] {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s var(--ease), visibility 0s .24s;
}

.cov-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: flex-end; padding-top: 4px; }
.cov-stat { display: grid; gap: 3px; }
.cov-stat b { font: 850 36px/0.95 var(--display); font-stretch: 72%; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cov-stat b small { margin-left: 3px; font: 700 15px/1 var(--display); font-stretch: 80%; color: var(--muted); }
.cov-stat-label { font: 600 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cov-stat.is-red b { color: var(--red); }
.cov-stat.is-good b { color: var(--good); }
.cov-note { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 8px 0 14px !important; max-width: 72ch; }
.cov-note b { color: var(--ink); font-weight: 700; }
.cov-when { white-space: nowrap; }
.cov-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin: 4px 0 14px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--good) 55%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent);
  font-size: 13.5px; line-height: 1.4;
}
.cov-ask > div { flex: 1 1 220px; }
.cov-ask-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }

/* The chart: a header row, then one row per story (label beside the plot when there's room, above it when not). */
.cov-box { container: cov / inline-size; padding: 2px 14px 6px; }
.cov-row { position: relative; display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.cov-row.cov-head { border-top: 0; padding: 10px 0 2px; }
.cov-head .cov-label { display: none; }
.cov-hlab-story { font: 600 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@container cov (min-width: 640px) {
  .cov-row { grid-template-columns: minmax(190px, 34%) minmax(0, 1fr); gap: 18px; align-items: center; }
  .cov-head .cov-label { display: block; align-self: end; padding-bottom: 8px; }
}
.cov-label { display: grid; gap: 7px; min-width: 0; align-content: center; }
.cov-story {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: var(--ink); text-align: left;
  display: flex; gap: 10px; align-items: flex-start; min-width: 0; border-radius: 8px;
}
.cov-rank {
  font: 900 30px/0.8 var(--display); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1.2px var(--red);
  min-width: 17px; padding-top: 2px; text-align: center; flex: none; transition: transform .3s var(--spring);
}
.cov-row[data-i="0"] .cov-rank { color: var(--red); -webkit-text-stroke: 0; }
.cov-hl {
  font: 760 15.5px/1.16 var(--display); font-stretch: 86%; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-decoration: underline 1.5px transparent; text-underline-offset: 3px; transition: text-decoration-color .2s;
}
.cov-story:hover .cov-hl { text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); }
.cov-story:hover .cov-rank { transform: translateY(-2px) scale(1.08); }
.cov-story:active .cov-rank { transform: scale(.94); }

.cov-tags { justify-items: start; padding-left: 27px; }
.cov-tags > * { align-self: start; }
.cov-badge {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 10px;
  font: 650 12px/1.3 var(--body);
}
.cov-of { white-space: nowrap; font-weight: 800; }
.cov-badge .cov-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cov-badge.is-ok, .cov-badge.is-taken, .cov-badge.is-none, .cov-badge.is-thin { color: var(--muted); padding-left: 0; }
.cov-badge.is-unknown { color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); padding: 3px 9px 3px 7px; }
.cov-badge.is-official { background: color-mix(in srgb, var(--lean-official) 16%, transparent); color: var(--ink); }
.cov-badge.is-official .cov-ic { color: var(--lean-official); }
.cov-badge.is-overseas { background: color-mix(in srgb, var(--lean-international) 18%, transparent); color: var(--ink); }
.cov-badge.is-overseas .cov-ic { color: var(--lean-international); }
.cov-badge.is-local { background: color-mix(in srgb, var(--lean-local) 15%, transparent); color: var(--ink); }
.cov-badge.is-local .cov-ic { color: var(--lean-local); }
.cov-badge.is-blind { background: var(--red); color: var(--on-red); box-shadow: 0 8px 18px -10px var(--red); }
.cov-badge.is-radar, .cov-badge.is-part { background: var(--warn-soft); color: var(--warn); }
.cov-badge.is-open { background: var(--good); color: var(--panel); text-transform: uppercase; letter-spacing: .09em; font: 700 11px/1.3 var(--mono); padding: 5px 11px 5px 9px; border-radius: 999px; }
/* The ring is its own layer that only scales and fades, so the browser's compositor runs it without repainting. */
.cov-sonar { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cov-sonar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; }
.cov-card.is-live[data-view="lanes"] .cov-sonar::after { animation: cov-sonar 2.4s ease-out infinite; }
@keyframes cov-sonar { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* The plot: everything inside is placed by chart-coverage.js, so it stays hidden until it has been. */
.cov-plot { position: relative; height: 56px; min-width: 0; }
.cov-plot > .cov-layer, .cov-plot > .cov-dots { position: absolute; inset: 0; }
.cov-plot > .cov-dots { pointer-events: none; }
.cov-dot { pointer-events: auto; }
.cov-card:not(.is-laid) .cov-plot > * { visibility: hidden; }
.cov-plot > .cov-layer > * { position: absolute; }
.cov-col { border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, transparent); }
.cov-mid { border-left: 1.5px dashed color-mix(in srgb, var(--muted) 38%, transparent); }
.cov-blind {
  display: grid; grid-template-columns: 1fr 1fr; place-items: center; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--red) 55%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 15%, transparent) 0 4px, transparent 4px 10px);
  font: 700 11px/1 var(--mono); color: var(--red-ink);
}
.cov-blind span { grid-column: 1 / -1; grid-row: 1; background: var(--panel-2); padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.cov-blind.is-radar { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 14%, transparent) 0 4px, transparent 4px 10px); }
.cov-blind.is-unknown { border-color: color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 10%, transparent) 0 4px, transparent 4px 10px); }

/* Column labels: lean names over a color bar, or heat, news and the competitor channels. The header is only as tall as
   the view needs; the slack at the card's foot takes up the difference, so the card never changes height. */
.cov-head .cov-plot { height: var(--cov-head-s, 38px); transition: height .5s var(--ease); }
.cov-card[data-view="lanes"] .cov-head .cov-plot { height: var(--cov-head-l, 38px); }
.cov-slack { height: var(--cov-slack, 0px); transition: height .5s var(--ease); }
.cov-card[data-view="lanes"] .cov-slack { height: 0; }
.cov-hlab {
  bottom: 6px; text-align: center; font: 600 11.5px/1.12 var(--body); color: var(--muted); padding: 0 2px;
  overflow-wrap: anywhere;
}
.cov-plot > [data-for="spectrum"] > .cov-hlab::after {
  content: ""; display: block; height: 3px; width: min(70%, 54px); margin: 5px auto 0; border-radius: 2px; background: var(--c);
}
.cov-hlab:last-child { font-size: 11px; }
[data-for="lanes"] > .cov-hlab { bottom: 8px; }
.cov-chan > span { overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-weight: 650; }
.cov-chan.is-error > span { color: var(--muted); font-weight: 600; }
.cov-head.is-narrow .cov-chan { font-size: 10.5px; line-height: 1.1; }
.cov-head.is-narrow [data-for="spectrum"] > .cov-hlab { font-size: 10.5px; letter-spacing: -.01em; overflow-wrap: normal; }
.cov-head.is-slanted .cov-chan { overflow: visible; }
.cov-head.is-slanted .cov-chan > span {
  display: block; position: absolute; right: 50%; bottom: 0; width: 124px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: 100% 100%; transform: rotate(50deg) translateX(4px); font-size: 10.5px;
}
/* Cells on a line of their own (many channels on a phone): names stand upright over their cells, read bottom to top. */
.cov-head.is-compact .cov-h-heat, .cov-head.is-compact .cov-h-news { display: none; }
.cov-head.is-upright .cov-chan { overflow: visible; }
.cov-head.is-upright .cov-chan > span {
  display: block; position: absolute; left: 50%; bottom: 0; max-height: 108px; translate: -50% 0; rotate: 180deg;
  writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 1.15;
}

/* Dots: one per outlet, sized by its headlines. The anchor moves (translate, scale); the circle inside reacts to hover. */
.cov-dot {
  position: absolute; left: 0; top: 0; display: block; border-radius: 50%; z-index: 1; text-decoration: none;
  transition: translate .72s var(--spring) var(--d, 0ms), scale .6s var(--spring) var(--d, 0ms);
}
.cov-dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
/* Fingers need more room than a pointer: a bigger invisible target around each dot and cell. */
@media (pointer: coarse) {
  .cov-dot::before { inset: -8px; }
  .cov-cell::before { content: ""; position: absolute; inset: -3px; }
}
.cov-dot i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 1.5px var(--panel-2), 0 2px 6px -1px var(--sh-2); transition: scale .28s var(--spring), box-shadow .2s;
}
.cov-dot:hover, .cov-dot.is-on, .cov-dot:focus-visible { z-index: 3; }
.cov-dot:hover i, .cov-dot.is-on i { scale: 1.45; box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 3.5px var(--ink), 0 6px 14px -4px var(--sh-3); }
.cov-dot:focus-visible { outline-offset: 3px; }
.cov-card.is-flying .cov-dot { transition-duration: .9s, .7s; }
.cov-instant .cov-dot, .cov-instant .cov-cell, .cov-instant .cov-heat-bar i, .cov-instant .cov-head .cov-plot, .cov-instant .cov-slack { transition: none !important; }

/* Open lanes: heat, a little “in the news” cluster, then one cell per competitor channel. */
.cov-heat { display: grid; align-content: center; gap: 6px; padding-right: 4px; }
.cov-heat b { font: 850 24px/0.9 var(--display); font-stretch: 72%; font-variant-numeric: tabular-nums; }
.cov-heat-bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cov-heat-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--red); transition: width .7s var(--ease) var(--d, 0ms); }
.cov-card[data-view="lanes"] .cov-heat-bar i { width: calc(var(--h) * 10%); }
.cov-news {
  display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent); font: 500 11px/1 var(--mono); color: var(--muted);
}
.cov-news::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, var(--lean-left), var(--lean-lean-left), var(--lean-center), var(--lean-lean-right), var(--lean-right), var(--lean-official), var(--lean-international), var(--lean-local));
}
.cov-cell {
  display: grid; place-items: center; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel);
  font: 800 13px/1 var(--body); color: var(--panel); text-decoration: none; cursor: default; scale: .55;
  transition: scale .5s var(--spring) var(--d, 0ms), border-color .2s, box-shadow .2s, background-color .3s;
}
a.cov-cell { cursor: pointer; }
.cov-card[data-view="lanes"] .cov-cell { scale: 1; }
.cov-cell.is-main { background: color-mix(in srgb, var(--ink) 74%, var(--panel)); border-color: transparent; }
.cov-cell.is-part { background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 58%, var(--panel)) 50%, var(--panel) 50%); border-color: color-mix(in srgb, var(--ink) 58%, var(--panel)); }
.cov-cell.is-error { border-style: dashed; background: transparent; color: var(--muted); }
.cov-row.is-open .cov-cell.is-none { border-color: color-mix(in srgb, var(--good) 60%, var(--line)); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
.cov-cell:hover, .cov-cell.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent); }

/* An open lane glows green and breathes, slowly, while the card is on screen. */
.cov-row::before {
  content: ""; position: absolute; inset: 4px -8px; border-radius: 13px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 16%, transparent), color-mix(in srgb, var(--good) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 42%, transparent), 0 0 24px -8px color-mix(in srgb, var(--good) 70%, transparent);
  transition: opacity .45s var(--ease);
}
.cov-card[data-view="lanes"] .cov-row.is-open::before { opacity: 1; }
.cov-card.is-live[data-view="lanes"] .cov-row.is-open::before { animation: cov-breathe 3.2s ease-in-out infinite; }
@keyframes cov-breathe { 50% { opacity: .5; } }
.cov-row.is-open + .cov-row, .cov-row.is-open { border-top-color: transparent; }
.cov-card[data-view="spectrum"] .cov-row.is-open + .cov-row, .cov-card[data-view="spectrum"] .cov-row.is-open { border-top-color: var(--line); }
.cov-row.cov-head + .cov-row { border-top-color: var(--line); }

/* First look: the blindspots wait for the dots, then land with a pop. */
.cov-card.is-waiting .cov-badge.is-blind, .cov-card.is-waiting .cov-blind { opacity: 0; }
.cov-card.is-flying .cov-badge.is-blind { animation: cov-pop .6s var(--spring) both; animation-delay: calc(var(--row) * 90ms + 520ms); }
.cov-card.is-flying .cov-blind { animation: cov-fade .5s var(--ease) both; animation-delay: calc(var(--row) * 90ms + 380ms); }
@keyframes cov-pop { from { opacity: 0; scale: .7; } }
@keyframes cov-fade { from { opacity: 0; } }

.cov-tip-h { margin: 4px 0 2px; font-weight: 600; }
.cov-fail { padding: 8px 0; }

/* Legend */
.cov-legend { margin-top: 12px; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.cov-legend > div { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.cov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cov-key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.cov-key-dot.big { width: 14px; height: 14px; margin-left: -2px; }
.cov-key-blind { width: 18px; height: 12px; border-radius: 4px; border: 1.5px dashed color-mix(in srgb, var(--red) 55%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 18%, transparent) 0 3px, transparent 3px 7px); display: inline-block; }
.cov-key-cell { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--panel); display: inline-grid; place-items: center; font: 800 9px/1 var(--body); font-style: normal; }
.cov-key-cell.is-main { background: color-mix(in srgb, var(--ink) 74%, var(--panel)); border-color: transparent; }
.cov-key-cell.is-part { background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 58%, var(--panel)) 50%, var(--panel) 50%); border-color: color-mix(in srgb, var(--ink) 58%, var(--panel)); }
.cov-key-cell.is-error { border-style: dashed; background: transparent; }
.cov-key-glow { width: 18px; height: 12px; border-radius: 4px; display: inline-block; background: color-mix(in srgb, var(--good) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 50%, transparent), 0 0 10px -2px color-mix(in srgb, var(--good) 70%, transparent); }

/* Clicking a story's row: its card on the brief lights up for a moment. */
.story-card.cov-flash { position: relative; }
.story-card.cov-flash::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  animation: cov-flash 2s var(--ease) both;
}
@keyframes cov-flash {
  0% { box-shadow: 0 0 0 0 transparent; }
  14% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 60%, transparent), 0 0 44px -6px color-mix(in srgb, var(--red) 70%, transparent); }
  100% { box-shadow: 0 0 0 4px transparent, 0 0 44px -6px transparent; }
}

@media (max-width: 640px) {
  .cov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; align-items: start; }
  .cov-stat b { font-size: 31px; }
  .cov-box { padding-inline: 10px; }
  .cov-row::before { inset: 3px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cov-card [data-for], .cov-dot, .cov-dot i, .cov-cell, .cov-heat-bar i, .cov-row::before, .cov-head .cov-plot, .cov-slack { transition: none !important; }
  .cov-row::before, .cov-sonar::after { animation: none !important; }
  .story-card.cov-flash::after { animation: none; outline: 3px solid var(--red); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-tip { transition: none; }
}

/* ======== Lined up on the day (History › Elections, and the Déjà vu tab) ======== */
/* One line per election (or any set of days), so the same moment lines up across the years. Lines draw in from the
   left through a growing clip, end dots pop in after them, and a line still running ends in a pulsing dot. Hover moves
   one guide across every year at once (transform only). Outcome colors: orange lost, green won, yellow mixed, purple
   still to come; the legend and labels say it in words too. */
:root {
  --lu-lost: light-dark(#ea580c, #fb923c);
  --lu-won: light-dark(#16a34a, #4ade80);
  --lu-mixed: light-dark(#ca8a04, #facc15);
  --lu-pending: light-dark(#7c3aed, #a78bfa);
}
.lu { position: relative; min-width: 0; }
.lu-box { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 55%, var(--panel)), var(--panel-2)); }
.lu-stage { min-height: 230px; }
.lu-svg { font-family: var(--body); -webkit-user-select: none; user-select: none; transition: opacity .22s var(--ease), transform .45s var(--spring); }
.lu-svg.lu-out { opacity: 0; transform: translateY(6px) scale(.992); }
.lu-svg.lu-settle { opacity: 0; transform: translateY(-6px) scale(1.006); transition: none; }
.lu-after { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.lu-after-label { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.lu-unit { font: 500 10.5px/1 var(--mono); fill: var(--muted); }
.lu-grid line { stroke: var(--chart-grid); stroke-width: 1; }
.lu-grid text, .lu-axis text { font: 500 11px/1 var(--mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.lu-tick { stroke: var(--chart-grid); stroke-width: 1; }
.lu-day line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 4 4; }
.lu-day text { font: 700 11.5px/1 var(--body); fill: var(--ink); }
.lu-path { fill: none; stroke: var(--c); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s var(--ease), stroke-width .2s; }
.lu-area { fill: var(--c); opacity: .07; transition: opacity .25s var(--ease); }
.lu-line.live .lu-path { stroke-width: 3.2; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 55%, transparent)); }
.lu-line.live .lu-area { opacity: .14; }
.lu-dot { fill: var(--c); stroke: var(--panel); stroke-width: 2; }
.lu-pulse { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: center; animation: lu-pulse 2.2s var(--ease) infinite; }
@keyframes lu-pulse { from { transform: scale(.4); opacity: .55; } 75%, to { transform: scale(2.4); opacity: 0; } }
.lu-label {
  font: 700 11px/1 var(--mono); fill: var(--c); font-variant-numeric: tabular-nums; pointer-events: none;
  paint-order: stroke; stroke: var(--panel-2); stroke-width: 3px; stroke-linejoin: round;
}
/* Hovering a legend chip lights its line up and dims the rest. */
.lu-svg.hl .lu-line:not(.on) .lu-path { opacity: .16; }
.lu-svg.hl .lu-line:not(.on) .lu-area, .lu-svg.hl .lu-line:not(.on) .lu-end, .lu-svg.hl .lu-line:not(.on) .lu-label { opacity: .12; }
.lu-svg.hl .lu-line.on .lu-path { stroke-width: 3.6; }
.lu-svg.hl .lu-line.on .lu-area { opacity: .16; }
.lu-end, .lu-label { transition: opacity .25s var(--ease); }
.lu-hover { pointer-events: none; transition: opacity .18s var(--ease); }
.lu-cross { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 3; transition: transform .12s var(--ease); }
.lu-hdot { fill: var(--c); stroke: var(--panel); stroke-width: 2; transition: transform .12s var(--ease); }
.lu-hit { fill: transparent; cursor: crosshair; touch-action: pan-y pinch-zoom; }
.lu-empty { font: 600 14px/1 var(--body); fill: var(--muted); }

/* First draw: the vote line drops in, the "after" tint wipes in from it, end dots pop once their line has arrived. */
.lu-in .lu-day { animation: lu-drop .6s var(--spring) both; }
.lu-in .lu-after { transform-box: fill-box; transform-origin: left; animation: lu-wipe .9s var(--ease) .15s both; }
.lu-in .lu-end circle { transform-box: fill-box; transform-origin: center; animation: lu-pop .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms + 950ms); }
.lu-in .lu-end .lu-pulse { animation: lu-pulse 2.2s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 110ms + 1400ms); }
.lu-in .lu-label { animation: lu-fade .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 1050ms); }
@keyframes lu-drop { from { transform: translateY(-14px); opacity: 0; } }
@keyframes lu-wipe { from { transform: scaleX(0); } }
@keyframes lu-pop { from { transform: scale(0); } }
@keyframes lu-fade { from { opacity: 0; } }

/* Legend: one chip per line; a click hides or shows it, hovering lights it up. */
.lu-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lu-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; max-width: 100%;
  font: 500 12.5px/1.2 var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; text-align: left;
  transition: opacity .25s, border-color .2s, background .25s, transform .3s var(--spring), box-shadow .25s;
}
.lu-chip b { font: 700 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.lu-chip-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lu-sw { width: 14px; height: 4px; border-radius: 3px; background: var(--c); flex: none; transition: background-color .3s, box-shadow .3s; }
.lu-chip:hover { border-color: var(--c); transform: translateY(-1px); box-shadow: 0 8px 18px -14px var(--c); }
.lu-chip:active { transform: scale(.95); }
.lu-chip.off { opacity: .5; background: transparent; }
.lu-chip.off .lu-sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.lu-chip.empty { border-style: dashed; }

/* Tooltip rows */
.lu-tip-head { margin-bottom: 3px; }
.lu-tip-row { display: grid; grid-template-columns: 9px auto 1fr auto; align-items: center; gap: 7px; margin-top: 4px; white-space: nowrap; }
.lu-tip-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lu-tip-row b { font: 700 12px/1 var(--mono); }
.lu-tip-row .muted { font: 500 11.5px/1 var(--mono); padding-left: 8px; }
.lu-tip-foot { margin-top: 6px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .lu-svg, .lu-path, .lu-area, .lu-end, .lu-label, .lu-cross, .lu-hdot, .lu-chip { transition: none !important; }
  .lu-in .lu-day, .lu-in .lu-after, .lu-in .lu-end circle, .lu-in .lu-label, .lu-pulse { animation: none !important; }
  .lu-pulse { opacity: .25; }
}
.lu-hover.still .lu-cross, .lu-hover.still .lu-hdot { transition: none; }

/* ======== History › Elections: the "rigged" tracker, who was in charge, and the election cards ======== */
.el-page { display: grid; gap: var(--gap); }
.el-page > .panel { margin: 0; min-width: 0; }
.el-title { min-width: 0; flex: 1 1 380px; }
.el-title .chart-sub { margin-bottom: 6px; }
.el-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.el-words .search { flex: 1 1 280px; }
.el-presets { margin: 8px 0 10px; }
.el-presets .chip.on { border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--panel)); font-weight: 600; }
.el-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
.el-controls label.check { margin: 0; }
.el-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin: 0; }
.el-pick select { width: auto; min-height: 36px; padding-block: 4px; }

/* What the numbers say: after a loss against after a win, then the sentences. */
.el-findings { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 14px 26px; align-items: center; margin: 0 0 14px; }
.el-findings:has(> .el-duo[hidden]) { grid-template-columns: minmax(0, 1fr); }
.el-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.el-duo[hidden] { display: none; }
.el-stat b { display: block; font: 850 46px/0.95 var(--display); font-stretch: 72%; color: var(--c); font-variant-numeric: tabular-nums; }
.el-stat span { display: block; margin-top: 4px; max-width: 19ch; font-size: 13px; line-height: 1.3; color: var(--muted); }
.el-stat em { display: block; margin-top: 3px; font: 500 11px/1.3 var(--mono); font-style: normal; }
.el-vs { text-align: center; }
.el-vs b { display: block; font: 850 26px/1 var(--display); font-stretch: 80%; color: var(--ink); }
.el-vs span { display: block; font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.el-duo .el-stat, .el-duo .el-vs { animation: rise .55s var(--ease) both; }
.el-duo .el-vs { animation-delay: 120ms; }
.el-duo .el-stat + .el-vs + .el-stat { animation-delay: 220ms; }
.el-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.el-sum li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--muted); animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.el-sum li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.el-sum li.lead { color: var(--ink); font-weight: 600; font-size: 15px; }
.el-sum li.lead::before { background: var(--red); }
.el-chart .lu-svg { transition: opacity .3s var(--ease), transform .45s var(--spring); }
.el-chart.busy .lu-svg { opacity: .5; }
.el-chart > .chart-loading { min-height: 300px; }
.el-posts { margin-top: 14px; }
.linkish { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish:hover { color: var(--ink); }

/* Who was in charge: four rows of stretches, the elections as dots, the years, and a line for today. */
.o-lost { --c: var(--lu-lost); }
.o-won { --c: var(--lu-won); }
.o-mixed { --c: var(--lu-mixed); }
.o-pending { --c: var(--lu-pending); }
.o-none { --c: var(--muted); }
.pb-box { padding: 26px 16px 12px; }
.pb { position: relative; display: grid; gap: 5px; --name: 84px; }
.pb-row, .pb-today-wrap { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; gap: 10px; }
.pb-name { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right; }
.pb-track { position: relative; height: 30px; }
.pb-seg { position: absolute; top: 0; bottom: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; container-type: inline-size; border-radius: 7px; min-height: 0; box-shadow: none; }
.pb-seg::before { content: ""; position: absolute; inset: 0 1px; border-radius: 7px; background: var(--c); transform-origin: left center; transition: filter .2s, transform .3s var(--spring); }
.pb-seg.p-D { --c: var(--blue); }
.pb-seg.p-R { --c: var(--red); }
.pb-seg.p-x { --c: var(--muted); }
.pb-seg.t-private-citizen { --c: color-mix(in srgb, var(--muted) 30%, var(--panel)); }
.pb-seg.t-candidate { --c: color-mix(in srgb, var(--red) 40%, var(--panel)); }
.pb-seg.t-president-elect { --c: color-mix(in srgb, var(--red) 70%, var(--panel)); }
.pb-seg.t-president { --c: var(--red); }
.pb-seg.t-former-president { --c: color-mix(in srgb, var(--red) 22%, var(--panel)); }
.pb-l { position: relative; z-index: 1; display: block; padding: 0 8px; font: 700 12px/30px var(--body); color: #fff; white-space: nowrap; overflow: hidden; text-align: left; }
.t-private-citizen .pb-l, .t-candidate .pb-l, .t-former-president .pb-l { color: var(--ink); }
.pb-short { display: none; }
@container (max-width: 76px) { .pb-long { display: none; } .pb-short { display: inline; } }
@container (max-width: 24px) { .pb-l { visibility: hidden; } }
.pb-seg:hover::before, .pb-seg:focus-visible::before { filter: brightness(1.12) saturate(1.1); transform: scaleY(1.14); }
.pb-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* A small white dot marks a row someone changed (not the starting table's). */
.pb-seg.edited::after { content: ""; position: absolute; right: 6px; top: 6px; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.pb-votes .pb-track { height: 26px; }
.pb-votes .pb-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.pb-dot {
  position: absolute; top: 50%; width: 11px; height: 11px; min-height: 0; margin: -5.5px 0 0 -5.5px; padding: 0; border-radius: 50%;
  border: 2px solid var(--panel-2); background: var(--c); cursor: pointer; box-shadow: none; transition: transform .25s var(--spring);
}
.pb-dot.big { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pb-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.pb-dot:hover, .pb-dot:focus-visible { transform: scale(1.35); z-index: 2; }
.pb-dot.o-pending::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); animation: pb-ring 2.4s var(--ease) infinite; }
@keyframes pb-ring { from { transform: scale(1); opacity: .8; } 70%, to { transform: scale(2.6); opacity: 0; } }
.pb-axis .pb-track { height: 18px; }
.pb-year {
  position: absolute; top: 0; height: 100%; container-type: inline-size; border-left: 1px solid var(--line);
  padding-left: 3px; font: 500 10.5px/18px var(--mono); color: var(--muted); white-space: nowrap;
}
.pb-year > span + span { display: none; }
@container (max-width: 36px) { .pb-year > span:first-child { display: none; } .pb-year > span + span { display: inline; } }
@container (max-width: 17px) { .pb-year.odd > span + span { display: none; } }
.pb-today-wrap { position: absolute; inset: 0 0 18px; pointer-events: none; }
.pb-today-wrap .pb-track { height: 100%; }
.pb-today { position: absolute; top: -8px; bottom: 0; width: 0; border-left: 2px dashed color-mix(in srgb, var(--ink) 55%, transparent); }
.pb-today b {
  position: absolute; top: -17px; left: 0; translate: -50% 0; padding: 2px 5px; border-radius: 5px;
  font: 700 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--panel);
}
.pb-today.end b { translate: calc(-100% + 1px) 0; border-top-right-radius: 0; }
.pb-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.pb-key span { display: inline-flex; align-items: center; gap: 6px; }
.pb-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.pb-key i.p-D { --c: var(--blue); }
.pb-key i.p-R { --c: var(--red); }
.pb-key i[class^="o-"] { border-radius: 50%; }
.pb-tip-o { font-weight: 700; color: var(--c); }
/* First look: the stretches grow in row by row, their names slide in, then the elections pop onto their days. */
.pb:not(.in) .pb-seg::before { transform: scaleX(0); }
.pb:not(.in) .pb-l, .pb:not(.in) .pb-dot, .pb:not(.in) .pb-today { opacity: 0; }
.pb.in .pb-seg::before { animation: pb-grow .75s var(--ease) both; animation-delay: calc(var(--r, 0) * 110ms + var(--i, 0) * 30ms); }
.pb.in .pb-l { animation: pb-label .5s var(--ease) both; animation-delay: calc(var(--r, 0) * 110ms + var(--i, 0) * 30ms + 380ms); }
.pb.in .pb-dot { animation: pb-pop .5s var(--spring) both; animation-delay: calc(560ms + var(--i, 0) * 28ms); }
.pb.in .pb-today { animation: lu-drop .6s var(--spring) .9s both; }
@keyframes pb-grow { from { transform: scaleX(0); } }
@keyframes pb-label { from { opacity: 0; transform: translateX(-6px); } }
@keyframes pb-pop { from { transform: scale(0); } }

/* The election cards: the front says how it went, the back holds the receipts. They turn over like the wallet's cards. */
.el-cards .wall { margin: 0 calc(var(--gap) / -2); }
.el-card { height: 100%; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.el-card .flip-face { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.el-card .flip-front { border-top: 4px solid var(--c); }
.el-card .flip-body { padding: 14px 16px; gap: 6px; }
.el-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.el-when b { display: block; font: 850 38px/0.9 var(--display); font-stretch: 72%; letter-spacing: -0.01em; }
.el-when span { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.el-stamp {
  margin-top: 4px; padding: 6px 9px 5px; border: 2px solid var(--c); border-radius: 8px; white-space: nowrap;
  font: 800 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent); rotate: -6deg; animation: el-thump .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 50ms + 260ms);
}
@keyframes el-thump { from { scale: 1.9; opacity: 0; } }
.el-card .el-name { font: 800 19px/1.15 var(--display); font-stretch: 85%; margin: 6px 0 0; }
.el-result { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; }
.el-stake { margin: 0; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.el-who { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.el-chip {
  padding: 5px 8px; border-radius: 999px; font: 600 11.5px/1 var(--body); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 10%, var(--panel));
}
.el-chip.p-D { --c: var(--blue); }
.el-chip.p-R { --c: var(--red); }
.el-chip.t { --c: var(--muted); }
.el-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; }
.el-turn { margin-left: auto; }
.el-turn .ic { width: 15px; height: 15px; }
.el-card .joblog:not([hidden]) { margin-top: 10px; }
.el-back-line { margin: 6px 0 2px; font-size: 14px; }
.el-sources { margin: 4px 0; padding-left: 18px; font-size: 14px; }
.el-sources li { margin: 3px 0; overflow-wrap: anywhere; }
.el-note { margin: 4px 0; font-size: 13.5px; color: var(--muted); }
.el-origin { margin: 4px 0 0; }
.el-card.el-glow .flip-front { animation: el-glow 1.8s var(--ease); }
@keyframes el-glow { 15% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow-up); } }

/* Every state night from Wikipedia: a list that filters by year, kind and result; a row opens on its receipts. */
.elw { margin-top: 28px; }
.elw-head h3 { margin: 0 0 4px; font: 800 22px/1.1 var(--display); font-stretch: 85%; }
.elw-bar {
  position: sticky; top: calc(var(--bar-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 12px 0 8px; padding: 6px 8px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
.elw-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 2px 10px; font-size: 14px; color: var(--muted); }
.elw-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.elw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.elw-item {
  border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
  animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); transition: box-shadow .25s var(--ease), translate .25s var(--ease);
}
.elw-item:hover { translate: 0 -1px; box-shadow: var(--shadow-up); }
.elw-item.his { background: color-mix(in srgb, var(--c) 5%, var(--panel)); }
.elw-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px;
}
.elw-row:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.elw-when b { display: block; font: 800 17px/1 var(--display); font-stretch: 80%; }
.elw-when span { font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.elw-what { min-width: 0; display: grid; gap: 2px; }
.elw-what b { font-size: 15px; line-height: 1.25; }
.elw-what span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.elw-item:not(.open) .elw-what span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.elw-stamp {
  padding: 5px 8px 4px; border: 2px solid var(--c); border-radius: 8px; white-space: nowrap; color: var(--c); rotate: -4deg;
  font: 800 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--c) 8%, transparent);
}
.elw-more { padding: 0 14px 12px 100px; transform-origin: top; animation: elw-open .3s var(--ease) both; }
.elw-item:not(.open) .elw-more { animation: elw-shut .2s var(--ease) both; }
@keyframes elw-open { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } }
@keyframes elw-shut { to { opacity: 0; transform: translateY(-6px) scaleY(.96); } }
.elw-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.elw-more-btn { display: flex; margin: 12px auto 0; }
.elw-item.el-glow { animation: elw-glow 1.8s var(--ease); }
@keyframes elw-glow { 15% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow-up); } }
@media (max-width: 640px) {
  .elw-row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; padding: 10px 12px; }
  .elw-stamp { grid-column: 2; justify-self: start; rotate: 0deg; }
  .elw-more { padding: 0 12px 12px 12px; }
  /* Three rows of filters would cover a third of a phone's screen, so they scroll away with the page there. */
  .elw-bar { position: static; border-radius: 14px; }
  .elw-bar .seg button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .elw-item, .elw-more, .elw-item.el-glow { animation: none !important; }
  .elw-item { transition: none; }
}

/* Editing the table */
.el-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.el-form label { display: grid; gap: 4px; margin: 6px 0; font-weight: 500; font-size: 13.5px; }
.el-form label.wide { grid-column: 1 / -1; }
.el-wiki-note { margin: 10px 0 0; }
.el-delete { margin-left: auto; color: var(--red-ink); }
.el-delete.armed { background: var(--red); border-color: var(--red); color: #fff; }
.pw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.pw-cols h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; font-size: 15px; }
.pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.pw-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.pw-sw { flex: none; align-self: stretch; width: 6px; border-radius: 4px; background: var(--c); }
.pw-sw.p-D { --c: var(--blue); }
.pw-sw.p-R { --c: var(--red); }
.pw-sw.p-x { --c: var(--muted); }
.pw-who { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }

@media (max-width: 860px) {
  .el-findings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .el-stat b { font-size: 38px; }
  .el-duo { padding: 12px 14px; gap: 8px; }
  .pb { --name: 58px; }
  .pb-name { font-size: 9.5px; letter-spacing: .02em; }
  .pb-track { height: 26px; }
  .pb-l { line-height: 26px; font-size: 11px; padding: 0 5px; }
  .pb-box { padding-inline: 10px; }
  .pb-year { font-size: 9.5px; }
  .el-controls .seg button { padding-inline: 10px; }
  .el-form, .pw-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pb:not(.in) .pb-seg::before { transform: none; }
  .pb:not(.in) .pb-l, .pb:not(.in) .pb-dot, .pb:not(.in) .pb-today { opacity: 1; }
  .pb-seg::before, .pb-dot { transition: none; }
  .pb.in .pb-seg::before, .pb.in .pb-l, .pb.in .pb-dot, .pb.in .pb-today, .pb-dot.o-pending::after,
  .el-card, .el-stamp, .el-duo .el-stat, .el-duo .el-vs, .el-sum li, .el-card.el-glow .flip-front { animation: none !important; }
}
.lu .chart-tip { max-width: 360px; }

/* ---------- History › timeline: who was in charge, the elections, zoom ---------- */
.tlz-loading { min-height: 220px; margin-top: 10px; border-radius: 12px; background: var(--panel-2); }
.tlz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; }
.tlz-btn {
  min-width: 32px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--ink); font: 700 16px/1 var(--body); cursor: pointer; box-shadow: 0 1px 0 var(--line), 0 2px 6px rgb(0 0 0 / .06);
  transition: transform .18s var(--spring), border-color .18s;
}
.tlz-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink); }
.tlz-btn:active:not(:disabled) { transform: translateY(1px); }
.tlz-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.tlz-btn.tlz-all { font-size: 12.5px; font-weight: 600; }
.tlz-range { margin-left: 6px; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.tlz .tl-svg { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tlz.zoomed .tl-svg { cursor: grab; }
.tlz.zoomed .tl-svg:active { cursor: grabbing; }
.tlz-strip-bg { fill: var(--panel-2); }
.tlz-pres { --c: var(--muted); }
.tlz-pres.p-D { --c: var(--blue); }
.tlz-pres.p-R { --c: var(--red); }
.tlz-pres rect { fill: var(--c); opacity: .9; }
.tlz-pres text { fill: #fff; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.tlz-trump { fill: light-dark(rgb(237 28 36 / .07), rgb(241 78 84 / .12)); }
.tlz-el { cursor: pointer; outline: none; }
.tlz-el-hit { stroke: transparent; stroke-width: 14; }
.tlz-el-line { stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .75; transition: opacity .2s; }
.tlz-el:not(.big) .tlz-el-line { stroke-dasharray: none; stroke-width: 2; opacity: .9; }
.tlz-el circle { fill: var(--c); stroke: var(--panel); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .2s var(--spring); }
.tlz-el text { fill: var(--c); font: 700 11px/1 var(--body); }
.tlz-el:hover .tlz-el-line, .tlz-el:focus-visible .tlz-el-line { opacity: 1; }
.tlz-el:hover circle, .tlz-el:focus-visible circle { transform: scale(1.5); }
.tlz-el:focus-visible circle { stroke: var(--ink); }
.tlz-o { color: var(--c); }
.tl-dot.tlz-ev { fill: var(--muted); }
.legend i.tlz-ev { background: var(--muted); }
.legend .tlz-sw { width: 16px; height: 10px; border-radius: 3px; background: var(--c); }
.legend .tlz-sw.p-D { --c: var(--blue); }
.legend .tlz-sw.p-R { --c: var(--red); }
.legend .tlz-sw.tlz-trump { background: light-dark(rgb(237 28 36 / .16), rgb(241 78 84 / .26)); box-shadow: inset 0 0 0 1px rgb(237 28 36 / .35); }
.legend .tlz-key-el { width: 0; height: 12px; border-radius: 0; border-left: 2px dashed var(--c); }
/* The first look: lanes and stretches sweep in from the left, the elections drop in, the dots pop, then the arcs. */
.tlz.first .tl-lane, .tlz.first .tlz-trump, .tlz.first .tlz-pres rect { transform-box: fill-box; transform-origin: left center; animation: tlz-grow .8s var(--ease) both; }
.tlz.first .tlz-pres rect { animation-delay: calc(var(--i, 0) * 70ms); }
.tlz.first .tlz-pres text { animation: tlz-rise .5s var(--ease) .6s both; }
.tlz.first .tlz-el { animation: tlz-drop .6s var(--spring) .45s both; }
.tlz.first .tl-dot { transform-box: fill-box; transform-origin: center; animation: tlz-pop .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 12ms + 250ms); }
.tlz.first .tl-arc { animation: tlz-rise .7s var(--ease) 1s both; }
@keyframes tlz-grow { from { transform: scaleX(0); } }
@keyframes tlz-pop { from { transform: scale(0); opacity: 0; } }
@keyframes tlz-drop { from { transform: translateY(-12px); opacity: 0; } }
@keyframes tlz-rise { from { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tlz.first .tl-lane, .tlz.first .tlz-trump, .tlz.first .tlz-pres rect, .tlz.first .tlz-pres text,
  .tlz.first .tlz-el, .tlz.first .tl-dot, .tlz.first .tl-arc { animation: none; }
  .tlz-btn, .tlz-el circle { transition: none; }
}

/* ---------- History › a statement's That day strip ---------- */
.td-strip { margin: 16px 0 6px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.td-strip.in { animation: td-rise .5s var(--ease) both; }
.td-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.td-head h3 { margin: 0; }
.td-day { font: 600 12.5px/1.2 var(--mono); color: var(--muted); }
.td-wait { position: relative; overflow: hidden; height: 64px; margin-top: 10px; border-radius: 10px; background: var(--panel); }
.td-wait::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: td-shine 1.2s linear infinite;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
}
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.td-chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.4 var(--body); text-decoration: none;
  color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 35%, transparent);
}
.td-chip.p-D { --c: var(--blue); }
.td-chip.p-R { --c: var(--red-ink); }
.td-chip.t { --c: var(--ink); }
a.td-chip.el { transition: transform .18s var(--spring); }
a.td-chip.el:hover { transform: translateY(-1px); }
.td-sec { margin-top: 14px; }
.td-sec h4 { margin: 0 0 6px; font: 700 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.td-sec h4 .small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.td-events { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.45; }
.td-cat { margin-right: 4px; font: 600 11px/1 var(--mono); color: var(--muted); }
.td-events a { font-size: 12px; white-space: nowrap; }
.td-fronts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.td-front .flip-face { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.td-front .flip-body { padding: 10px; gap: 8px; }
.td-front .flip-front { min-height: 170px; }
/* The back holds every headline but never makes the card taller than its front: it scrolls instead. */
.td-front .flip-back .flip-body { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.td-front-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.td-front-top span { font: 500 11px/1 var(--mono); color: var(--muted); }
.td-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.td-lead { margin: 0; font: 700 14px/1.35 var(--body); }
.td-turn { align-self: flex-start; margin-top: auto; }
.td-heads { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.4; }
.td-wayback { margin-top: auto; font-size: 12px; }
.td-read { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.td-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.td-num { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.td-num span { font: 600 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.td-num b { font: 800 19px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.td-num small { font: 500 11px/1.2 var(--mono); color: var(--muted); }
.td-empty { margin: 10px 0 0; }
@media (max-width: 640px) {
  .td-strip { padding: 12px 12px 14px; }
  .td-fronts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .td-front { scroll-snap-align: start; }
}
/* The first look: the strip rises, then the front pages turn in one after another. */
.td-strip.in .td-front { animation: td-turn-in .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes td-rise { from { transform: translateY(8px); opacity: 0; } }
@keyframes td-shine { to { transform: translateX(100%); } }
@keyframes td-turn-in { from { transform: perspective(900px) rotateY(-70deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .td-strip.in, .td-strip.in .td-front, .td-wait::after { animation: none; }
  a.td-chip.el { transition: none; }
}

/* ---- Charts in Portuguese (chart-lang.js) ---- */
/* The PT/EN chip just before a chart's Video button, on the Portuguese desk only. */
.seg.chart-lang { flex-shrink: 0; padding: 3px; gap: 0; }
.seg.chart-lang > button { padding: 6px 10px; font: 700 11.5px/1.1 var(--mono); letter-spacing: .06em; }