/* Newsroom wall: /{tracker}/n/{country}. Canvas does the drawing; this styles the HUD around it. */
:root {
  --hud: calc(1.15 * var(--text-scale, 1));   /* top bar and crawl type, relative to the rest (and the text size setting) */
  --bg: #070a10;
  --bg2: #0d1422;
  --ink: #eef1f6;
  --ink-2: #a9b3c4;
  --ink-3: #6c7789;
  --panel: rgba(12, 17, 28, 0.72);
  --panel-solid: #0e1420;
  --line: rgba(160, 180, 210, 0.14);
  --live: #ff5252;
  --tag-red: #c8102e; --tag-hot: #b23a0a; --tag-amber: #8f5300; --tag-slate: #465065;
  --crawl: #6d28d9;
  --accent: #ffb547;
  --shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.45);
  --card-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.7), 0 0.3rem 1rem rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f1efe9;
  --bg2: #e6e3da;
  --ink: #12161d;
  --ink-2: #4a5262;
  --ink-3: #7d8494;
  --panel: rgba(255, 253, 248, 0.8);
  --panel-solid: #fffdf8;
  --line: rgba(30, 40, 60, 0.12);
  --live: #e0323c;
  --crawl: #5b21b6;
  --accent: #d9771f;
  --shadow: 0 0.6rem 2rem rgba(60, 50, 30, 0.14);
  --card-shadow: 0 1.4rem 3.5rem rgba(40, 30, 15, 0.28), 0 0.3rem 1rem rgba(40, 30, 15, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "News Cycle", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
canvas#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }
#grid { position: fixed; left: -80px; top: -80px; width: calc(100vw + 160px); height: calc(100vh + 160px); pointer-events: none; will-change: transform; }
canvas#wall { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: default; touch-action: none; -webkit-user-select: none; user-select: none; }
canvas#labels { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }
canvas#link { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; z-index: 8; }   /* after .spot: the connector sits on top of the card shadow */
canvas#wall.pointing { cursor: pointer; }
canvas#wall.grabbing { cursor: grabbing; }

#flash.on { display: block; }
#flash {
  position: fixed; inset: 0; pointer-events: none; opacity: 0; display: none;   /* shown only while it animates: a full-screen blend layer costs every frame */
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 255, 255, 0.55), rgba(255, 210, 160, 0.12) 30%, transparent 65%);
  mix-blend-mode: screen;
}
:root[data-theme="light"] #flash {
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 170, 70, 0.35), rgba(255, 120, 80, 0.08) 30%, transparent 65%);
  mix-blend-mode: multiply;
}

/* top bar: KPI numbers share the headline's size and KPI captions the subtitle's, at every breakpoint */
.hud-top {
  --title-fs: calc(1.9rem * var(--hud)); --sub-fs: calc(0.72rem * var(--hud));
  --sub-gap: calc(0.4rem * var(--hud)); --sub-lh: 1.4;
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(1.1rem + var(--safe, 0px)) calc(1.4rem + var(--safe, 0px)) calc(3.6rem * var(--hud));
  background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 40%, color-mix(in srgb, var(--bg) 55%, transparent) 72%, transparent 100%);
  pointer-events: none;
}
.brand { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
/* the headline keeps one line: the KPIs drop one by one (fitHud in newsroom.js) before it may wrap */
.stats .stat.dropped { display: none; }
.stats { flex: none; margin-left: 1.5rem; }
.title-block .kicker { margin-top: var(--sub-gap); }
.kicker .live-dot { width: 0.76em; height: 0.76em; }
/* never wraps: the KPIs make room first, then the shorter wording, then an ellipsis */
.title-block { min-width: 0; }
.title-block .kicker { white-space: nowrap; }
.title-block .kicker > span:not(.live-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.title-block .k-short, .hud-top.tight .k-text { display: none; }
.hud-top.tight .k-short { display: inline; }
.kicker {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--sub-fs); line-height: var(--sub-lh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2);
}
h1 { margin: 0; font-size: var(--title-fs); line-height: 1; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.3em; }
/* breaks after the comma on narrow screens, never inside "not yet in [flag] Sweden" */
.h1-home { display: inline-flex; align-items: center; gap: 0.26em; white-space: nowrap; }
.home-flag { width: 0.84em; height: 0.84em; border-radius: 50%; box-shadow: 0 0 0 2px var(--line); }
/* the home country is a button: a searchable list of every country with sources */
.home-pick {
  all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 0.26em;
  border-radius: 0.2em; padding: 0 0.12em; margin: 0 -0.12em; transition: background 0.2s, box-shadow 0.2s;
}
.home-pick:hover, .home-pick[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.home-pick:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.home-caret {
  width: 0.24em; height: 0.24em; margin: -0.12em 0.22em 0 -0.06em; flex: none;
  border-right: 0.07em solid var(--ink-3); border-bottom: 0.07em solid var(--ink-3); transform: rotate(45deg);
  transition: transform 0.25s, border-color 0.2s;
}
.home-pick:hover .home-caret { border-color: var(--accent); }
.home-pick[aria-expanded="true"] .home-caret { transform: translateY(0.1em) rotate(225deg); border-color: var(--accent); }
/* "pushed by 4+" is a button too: the consensus level */
.cons-pick {
  all: unset; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35em;
  color: inherit;
}
.cons-pick:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pick-caret {
  width: 0.38em; height: 0.38em; margin: -0.2em 0.35em 0 -0.12em; flex: none;
  border-right: 0.12em solid var(--ink-3); border-bottom: 0.12em solid var(--ink-3); transform: rotate(45deg); transition: transform 0.25s, border-color 0.2s;
}
.cons-pick:hover .pick-caret { border-color: var(--accent); }
.cons-pick[aria-expanded="true"] .pick-caret { transform: translateY(0.15em) rotate(225deg); border-color: var(--accent); }
.pick-pop {
  position: fixed; z-index: 11; width: 17rem; max-width: calc(100vw - 2rem);
  background: var(--panel-solid); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 0 0 0.5rem 0.5rem; box-shadow: var(--card-shadow); overflow: hidden;
  transform-origin: top left; animation: pop-in 0.18s cubic-bezier(.2,.8,.2,1);
}
.pick-pop[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-0.4rem) scale(0.98); } }
.pick-pop input {
  display: block; width: 100%; margin: 0; padding: 0.75rem 0.9rem; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-size: 1rem; outline: none;
}
.pick-pop input::placeholder { color: var(--ink-3); }
.pick-pop ul { list-style: none; margin: 0; padding: 0.3rem 0; max-height: min(22rem, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.pick-pop li {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.9rem; cursor: pointer;
  font-size: 0.95rem; font-weight: 700; color: var(--ink-2); border-left: 3px solid transparent;
}
.pick-pop li img, .pick-pop li .noflag { width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line); }
.pick-pop li .noflag { background: var(--line); }
.pick-pop li.active { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.pick-pop li[aria-selected="true"] { color: var(--ink); border-left-color: var(--accent); }
.pick-pop li[hidden] { display: none; }
.pick-pop .pick-head { padding: 0.7rem 0.9rem 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.cons-pop { width: 15rem; }
.cons-pop ul { outline: none; max-height: min(32rem, 75vh); }
.cons-pop li b { min-width: 2.2em; font-size: 1.05rem; color: inherit; font-variant-numeric: tabular-nums; }
.cons-pop li span { font-weight: 400; font-size: 0.82rem; color: var(--ink-3); }
.pick-pop li.country-empty { cursor: default; color: var(--ink-3); font-weight: 400; }
.live-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--live); display: inline-block; flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 70%, transparent);
  animation: live 1.6s infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 65%, transparent); }
  70% { box-shadow: 0 0 0 0.55rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.stats { display: flex; gap: calc(1.6rem * var(--hud)); align-items: flex-start; }
.stat { display: flex; flex-direction: column; align-items: flex-end; }
.stat b { font-size: var(--title-fs); line-height: 1; font-variant-numeric: tabular-nums; font-weight: 700; }
.stat span { font-size: var(--sub-fs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700; margin-top: var(--sub-gap); line-height: var(--sub-lh); }
.stat b.bump { animation: bump 0.6s ease-out; }
.stat b i { display: inline-block; width: 0.55em; text-align: center; font-style: normal; }
.stat b i.sep { width: 0.26em; }
@keyframes bump { 0% { color: var(--accent); } }   /* a changed KPI flashes yellow, no jump */

/* big event banner */
.event {
  position: fixed; left: calc(1.6rem + var(--safe, 0px)); bottom: calc(4.1rem + calc(3.3rem * var(--hud)) + var(--safe, 0px)); z-index: 6; max-width: min(64rem, calc(100vw - 4rem));
  pointer-events: none; opacity: 0; transform: translateY(1rem);
  transition: opacity 0.5s, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.event.on { opacity: 1; transform: none; }
/* scrim so the big headline never fights the bubbles behind it */
.event::before {
  content: ""; position: absolute; z-index: -1; left: -6rem; right: -8rem; top: -3rem; bottom: -3rem;
  background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 50%, transparent 75%);
  pointer-events: none;
}
.event-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border-radius: 0.25rem; color: #fff; background: var(--tag-red);
}
.event-kicker.claimed { background: #157f3b; }
.event-headline {
  text-wrap: balance;   /* no orphans on the big headline */
  margin-top: 0.6rem; font-size: 3.3rem; line-height: 1.06; font-weight: 700;
  text-shadow: 0 0.15rem 1.5rem var(--bg), 0 0 0.4rem var(--bg);
}
.event-headline .caret { display: inline-block; width: 0.08em; height: 0.9em; background: var(--accent); margin-left: 0.06em; vertical-align: -0.08em; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* story forming: the tag breathes and three dots dance until the headline types in */
.event-kicker.forming { animation: tag-pulse 1.1s ease-in-out infinite; transform-origin: left center; }
@keyframes tag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tag-red) 55%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 0 0.45rem transparent; transform: scale(1.06); }
}
.dots { display: inline-flex; gap: 0.18em; margin-left: 0.3em; align-items: flex-end; height: 0.7em; }
.dots i { width: 0.22em; height: 0.22em; border-radius: 50%; background: currentColor; animation: dot-hop 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
/* resting on the first line's baseline, like an ellipsis typed where the headline begins (hops go up from there) */
.dots.big { position: absolute; left: 0; top: 0; margin-left: 0; gap: 0.16em; height: 1.06em; box-sizing: border-box; padding-bottom: 0.2em; align-items: flex-end; }
.event-headline { position: relative; }
.event .ghost { visibility: hidden; }
.event-meta .ghost { display: contents; }
.dots.big i { width: 0.2em; height: 0.2em; color: var(--ink); }
@keyframes dot-hop { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-0.35em); opacity: 1; } }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.7rem; font-size: 0.95rem; font-weight: 700; color: var(--ink-2); text-shadow: 0 0 0.6rem var(--bg); }
.event-meta img { width: 1.25rem; height: 1.25rem; border-radius: 50%; opacity: 0; transform: scale(0.3); animation: pop 0.45s cubic-bezier(.3,1.6,.5,1) forwards; box-shadow: 0 0 0 2px var(--bg); }
@keyframes pop { to { opacity: 1; transform: none; } }

/* spotlight card, anchored to a bubble by JS */
.spot {
  position: fixed; left: 0; top: 0; z-index: 8; width: 21.5em; pointer-events: none;   /* above the HUD scrims, below the drawer */
  /* no backdrop-filter: blurring the live canvas behind the card re-renders it every frame */
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  border: 1px solid var(--line); border-radius: 0.5em; box-shadow: var(--card-shadow);
  padding: 1em 1.05em 0.95em; opacity: 0; transform: scale(0.9); transform-origin: 50% 50%;   /* shrinks and fades in place */
  transition: opacity 0.6s ease-in, transform 0.65s cubic-bezier(.4,0,.6,1);
}
.spot { border: 3.5px solid var(--spot-accent, var(--line)); font-size: calc(1.22rem * var(--text-scale, 1) * var(--spot-fit, 1)); }   /* everything inside is in em: scales with this */
.spot.on { opacity: 1; transform: none; transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.2,.9,.25,1.08); }
.spot.quick { transition: opacity 0.25s ease-in, transform 0.28s cubic-bezier(.4,0,.6,1); }   /* the viewer's own pick: */
.spot.quick.on { transition: opacity 0.35s ease-out, transform 0.42s cubic-bezier(.2,.9,.25,1.08); }   /* the cycle's, faster */
.spot.on { pointer-events: auto; }   /* takes the mouse: a clicked card's button, and holding the cycle's card */
.spot.held .s-fuse i, .spot.held .s-fuse b, .spot.held .s-fuse s, .spot.held .s-fuse b::after { animation-play-state: paused; }   /* held: the fuse stops and fades away */
.spot .s-fuse { transition: opacity 0.4s ease; }
.spot.held .s-fuse { opacity: 0; }
.spot .s-open { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: 0.15em; margin-left: 0.35em; padding: 0.35em 0.6em;
  border: 1px solid var(--spot-accent, var(--line)); border-radius: 0.3em; background: color-mix(in srgb, var(--spot-accent, var(--ink)) 18%, transparent); color: var(--ink);
  transition: background 0.15s ease; font: inherit; font-size: 0.52em; line-height: 1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.spot .s-open svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spot .s-open:hover { background: color-mix(in srgb, var(--spot-accent, var(--ink)) 40%, transparent); }
.spot .s-why { display: block; width: fit-content; line-height: 1.5;   /* block: no text-strut gap above it */
   font-size: 0.54em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.15em 0.4em; border-radius: 0.2em; margin-bottom: 0.75em; color: #fff; }
.spot .s-why.fresh { background: var(--tag-red); }
.spot .s-why.growing { background: var(--tag-amber); }            /* gaining sources, slowly */
.spot .s-why.growing.hot { background: var(--tag-hot); }        /* gaining fast: 3+ sources in the last hour */
.spot .s-why.big { background: var(--tag-slate); }                /* big but quiet: least urgent */
.spot .s-why.emerging { background: var(--tag-slate); }           /* below the threshold, out at the edge */
.spot .s-k { font-size: 0.64em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); display: flex; gap: 0.5em; }
.spot .s-k .hot { color: var(--live); }
.spot .s-h { font-size: 1.55em; font-weight: 700; line-height: 1.2; margin-top: 0.32em; text-wrap: balance; }
.spot .s-s { font-size: 0.85em; line-height: 1.45; color: var(--ink-2); margin-top: 0.85em; text-wrap: pretty; }
.spot .s-w { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.75em; }
.spot .s-w span { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.66em; font-weight: 700; padding: 0.25em 0.55em; border-radius: 1em; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.spot .s-w span img { width: 1.1em; height: 1.1em; border-radius: 50%; }
.spot .s-stacks { display: flex; gap: 1.6em; margin-top: 1.25em; align-items: flex-start; }
.spot .stack { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; }
.spot .pile { display: flex; padding-left: 0.42em; }
.spot .pile > * { margin-left: -0.42em; flex: none; box-shadow: 0 0 0 2px var(--panel-solid); }
.spot .pile img { width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--panel-solid); }
.spot .pile .cc-chip { min-width: 1.2em; height: 1.2em; }
.spot .stack span { font-size: 0.64em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.spot .stack span b { font-size: 1.48em; color: var(--ink); letter-spacing: 0; margin-right: 0.15em; }
.spot .s-latest { text-wrap: pretty; margin-top: 1.1em; padding-top: 0.9em; border-top: 1px solid var(--line); font-size: 0.78em; line-height: 1.45; color: var(--ink-2); }
.spot .s-latest b { color: var(--ink); }
/* status tag with the fuse burning in the space to its right */
.spot .s-top { display: flex; align-items: center; gap: 0.9em; margin-bottom: 0.4em; }
.spot .s-top .s-why { flex: none; margin-bottom: 0; }
.spot .s-fuse { position: relative; height: 2px; flex: 1; min-width: 2em; margin-right: 4px; }
/* keyboard browsing hints: keycaps with drawn icons, three groups spread evenly along the card's foot */
.spot .s-keys { display: flex; justify-content: space-between; align-items: center; margin-top: 1em; padding-top: 0.8em; border-top: 1px solid var(--line);
  font-size: 0.56em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.spot .s-keys .kg { display: flex; align-items: center; gap: 0.7em; }
.spot .s-keys kbd { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 0.4em; box-sizing: border-box;
  color: var(--ink-2); background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, var(--panel-solid)), color-mix(in srgb, var(--ink) 9%, var(--panel-solid)));
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: 0 0.14em 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.spot .s-keys kbd svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spot .s-keys kbd.wide { width: auto; min-width: 2.6em; padding: 0 0.55em; }
.spot .s-keys kbd.txt { font: inherit; font-size: 1em; letter-spacing: 0.06em; text-transform: lowercase; }
/* inverted T: up on top, left/down/right below */
.spot .s-keys .arrows { display: grid; grid-template-columns: repeat(3, 1.7em); grid-template-rows: repeat(2, 1.7em); gap: 0.18em; }
.spot .s-keys .arrows kbd { width: 1.7em; height: 1.7em; border-radius: 0.3em; }
.spot .s-keys .arrows .up { grid-area: 1 / 2; }
.spot .s-keys .arrows .left { grid-area: 2 / 1; } .spot .s-keys .arrows .left svg { rotate: -90deg; }
.spot .s-keys .arrows .down { grid-area: 2 / 2; } .spot .s-keys .arrows .down svg { rotate: 180deg; }
.spot .s-keys .arrows .right { grid-area: 2 / 3; } .spot .s-keys .arrows .right svg { rotate: 90deg; }
.spot .s-fuse .track { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--spot-accent, var(--line)) 16%, transparent); }
.spot .s-fuse i, .spot .s-fuse b { position: absolute; inset: 0; display: block; animation: fuse linear forwards; will-change: transform; }
.spot .s-fuse i { background: var(--spot-accent, var(--ink-3)); }
/* the burning end: rides the right edge of the shrinking bar, unclipped */
.spot .s-fuse b::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--spot-accent, #fff); animation: spark 0.3s ease-in-out infinite alternate; }
@keyframes spark { from { transform: scale(0.7); opacity: 0.8; } to { transform: scale(1.2); opacity: 1; } }
/* sparkles thrown off where the fuse has just burned */
.spot .s-fuse s { position: absolute; right: -1px; top: -1px; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--spot-accent, #fff) 55%, #fff); box-shadow: 0 0 4px 1px var(--spot-accent, #fff); opacity: 0; animation: ember 0.7s ease-out infinite; }
.spot .s-fuse s:nth-child(1) { --dx: 9px;  --dy: -8px;  animation-delay: 0s; }
.spot .s-fuse s:nth-child(2) { --dx: 14px; --dy: -3px;  animation-delay: 0.12s; }
.spot .s-fuse s:nth-child(3) { --dx: 7px;  --dy: 6px;   animation-delay: 0.24s; }
.spot .s-fuse s:nth-child(4) { --dx: 12px; --dy: -11px; animation-delay: 0.35s; }
.spot .s-fuse s:nth-child(5) { --dx: 16px; --dy: 4px;   animation-delay: 0.47s; }
.spot .s-fuse s:nth-child(6) { --dx: 5px;  --dy: -5px;  animation-delay: 0.58s; }
@keyframes ember { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); } }
@keyframes fuse { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* cable-news crawl */
.crawl {
  position: fixed; left: var(--safe, 0px); right: var(--safe, 0px); bottom: var(--safe, 0px); height: calc(3.3rem * var(--hud)); z-index: 5;
  display: flex; align-items: stretch;
  background: var(--bg);
  border-top: 2px solid var(--crawl);
}
/* the dark fade rising off the bottom edge, like the one under the header */
.crawl::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 5.5rem; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 100%);
}
.crawl-label {
  flex: none; display: flex; align-items: center; gap: 0.55rem; padding: 0 1.2rem 0 1.3rem;
  background: var(--crawl); color: #fff;
  font-size: calc(0.95rem * var(--hud)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%); padding-right: 2rem;
}
.crawl-brand {
  flex: none; display: flex; align-items: center; padding: 0 1.3rem 0 2rem; margin-left: -0.6rem;
  background: #141922; color: #e9edf3;                     /* dark muted slate; a warm light grey in the light theme */
  font-size: calc(0.95rem * var(--hud)); font-weight: 700; letter-spacing: 0.04em;
  clip-path: polygon(0.9rem 0, 100% 0, 100% 100%, 0 100%);
}
:root[data-theme="light"] .crawl-brand { background: #e2ded3; color: #12161d; }
.crawl-brand span { opacity: 0.72; }
.crawl-brand i { font-style: normal; font-weight: 400; opacity: 0.72; margin-right: 0.35em; }
.crawl-track { flex: 1; position: relative; overflow: hidden; margin-left: -0.6rem;
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 3rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 3rem), transparent); }
.crawl-belt { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.ci { flex: none; display: inline-flex; align-items: center; gap: calc(0.55rem * var(--hud)); padding: 0 calc(1.4rem * var(--hud)); font-size: calc(1.12rem * var(--hud)); font-weight: 700; cursor: pointer; }
.ci + .ci { border-left: 1px solid var(--line); }
.ci img.ic { width: calc(1rem * var(--hud)); height: calc(1rem * var(--hud)); border-radius: 50%; }
.ci img.fl { width: calc(1rem * var(--hud)); height: calc(1rem * var(--hud)); border-radius: 50%; }
.ci .flags { display: inline-flex; gap: 0.15rem; }
/* optical centring: each text box is trimmed to its capitals (cap height to baseline), so centring the row
   centres the letters themselves, whatever their size or case; pills get even padding around their caps */
.ci > span:not(.flags):not(.rk), .ci .rk b { text-box: trim-both cap alphabetic; }
.ci .rk b { font-weight: inherit; }
.ci .src { font-size: calc(0.78rem * var(--hud)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ci .meta { font-size: calc(0.8rem * var(--hud)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ci .meta .hot { color: var(--live); }
.ci .pill { font-size: calc(0.7rem * var(--hud)); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.45em 0.6em; border-radius: 0.2rem; color: #fff; background: var(--tag-slate); }
.ci .pill.new { background: var(--tag-red); }
.ci .pill.got { background: #157f3b; color: #fff; }   /* same green as the "Picked up" banner tag */
.ci .pill.in { background: var(--tag-amber); }

/* controls */
.controls { position: fixed; right: calc(1.2rem + var(--safe, 0px)); bottom: calc(0.8rem + calc(3.3rem * var(--hud)) + var(--safe, 0px)); z-index: 7; display: flex; gap: 0.35rem; opacity: 0.25; transition: opacity 0.3s; }
.controls:hover, body.mouse .controls { opacity: 1; }
.controls button { display: inline-grid; place-items: center; padding: 0; line-height: 1; }
.controls button svg { display: block; width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* viewer settings that hide parts of the HUD */
.stat.off { display: none; }
body.no-crawl .crawl { display: none; }
body.no-head .hud-top .brand { display: none; }
body.no-head .hud-top .stats { margin-left: auto; }   /* the numbers stay in their corner */
body.no-hud .hud-top { display: none; }
/* an uploaded logo: a circle before the headline, as tall as the headline and the live line together */
.brand-logo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover;   /* sized to the text rows in JS */
  box-shadow: 0 0 0 2px var(--line), var(--card-shadow); background: var(--panel-solid); align-self: flex-start; }
.brand-logo[hidden] { display: none; }
body.no-crawl .controls { bottom: calc(0.8rem + var(--safe, 0px)); }
body.no-crawl .event { bottom: calc(2.4rem + var(--safe, 0px)); }
body.settings-open canvas#wall { cursor: default; }
.controls button {
  width: 2.1rem; height: 2.1rem; border-radius: 0.3rem; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer;
}
.controls button:hover { background: var(--panel-solid); }
body.idle:not(.drawer-open) canvas#wall { cursor: none; }   /* hide the cursor over the wall only, never over the story panel */

/* story timeline: a centered popup over the dimmed wall, in the wall's style */
.drawer {
  position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 2rem;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  font-size: 1.1rem;
}
.drawer.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.drawer-panel {
  position: relative; width: min(40rem, 100%); max-height: min(85vh, 60rem); display: flex; flex-direction: column;
  background: var(--panel-solid); border: 3.5px solid var(--accent); border-radius: 0.5em;   /* the card's border, in the accent */
  box-shadow: var(--shadow); overflow: hidden;
  transform: translateY(0.8rem) scale(0.97); transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.drawer.on .drawer-panel { transform: none; }
/* popup buttons, in the card's "Show timeline" style: accent outline and tint, stronger tint on hover (opaque mix:
   the close button floats over the scrolling list) */
.drawer-close, .drawer .d-tl a { border: 1px solid var(--accent); border-radius: 0.3em; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-solid)); transition: background 0.15s ease; }
.drawer-close:hover, .drawer .d-tl a:hover { background: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); }
.drawer-close { position: absolute; top: 0.8em; right: calc(0.8em + 14px); z-index: 1; width: 1.9em; height: 1.9em; padding: 0; display: grid; place-items: center; font-size: 0.9em; }   /* clear of the list's scrollbar */
.drawer-close svg { width: 0.75em; height: 0.75em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4em 1.6em 2em; }
.drawer .d-k { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding-right: 3em; }
.drawer .d-h { margin: 0.4em 0 0; font-size: 1.6em; line-height: 1.15; font-weight: 700; text-wrap: balance; }
.drawer .d-s { margin: 0.9em 0 0; font-size: 0.85em; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.drawer .d-stack { display: flex; align-items: center; gap: 0.7em; margin-top: 1.1em; font-size: 0.72em; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.drawer .d-stack b { color: var(--ink); font-size: 1.3em; letter-spacing: 0; }
.drawer .pile { display: inline-flex; padding-left: 0.4em; }
.drawer .pile > * { margin-left: -0.4em; width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel-solid); }
.drawer .d-tl-head { margin-top: 1.6em; padding-bottom: 0.5em; border-bottom: 1px solid var(--line); font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.drawer .d-tl { list-style: none; margin: 0; padding: 0; }
.drawer .d-tl li { display: grid; grid-template-columns: 1.7em 1fr; gap: 0.7em; padding: 0.85em 0; border-bottom: 1px solid var(--line); }
.drawer .d-tl .ic { width: 1.7em; height: 1.7em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; background: var(--line); }
.drawer .d-src { display: flex; align-items: center; gap: 0.4em; font-size: 0.7em; color: var(--ink-3); }
.drawer .d-src b { color: var(--ink); font-size: 1.1em; }
.drawer .d-src .fl { width: 1em; height: 1em; border-radius: 50%; }
.drawer .d-src time { margin-left: auto; font-variant-numeric: tabular-nums; }
.drawer .d-x { margin-top: 0.3em; font-size: 0.85em; line-height: 1.4; color: var(--ink-2); }
.drawer .d-tl a { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: 0.15em; margin-left: 0.4em; padding: 0.35em 0.6em;
  font-size: 0.6em; line-height: 1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.drawer .d-tl a svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawer .d-tl li.d-loading { display: block; color: var(--ink-3); font-size: 0.8em; }

.status { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; transition: opacity 0.6s;
  text-shadow: 0 0 1rem var(--bg), 0 0 2.5rem var(--bg), 0 0 5rem var(--bg); text-align: center; width: max-content; max-width: calc(100vw - 2rem); }
/* soft dark pool behind the status text */
.status::before { content: ""; position: absolute; z-index: -1; inset: -6rem -9rem; border-radius: 50%; filter: blur(3.5rem);
  background: radial-gradient(closest-side, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 40%, color-mix(in srgb, var(--bg) 40%, transparent) 75%, transparent); }
.status.off { opacity: 0; }
:root[data-theme="light"] .status { color: var(--ink-3); }

@media (max-width: 900px) {
  .hud-top { --title-fs: calc(1.3rem * var(--hud)); --sub-fs: calc(0.64rem * var(--hud)); }
  .event { max-width: calc(100vw - 2rem); left: 1rem; }
  .event-headline { font-size: 2.1rem; }
}
/* phones */
@media (max-width: 600px), (max-height: 500px) {
  .hud-top { padding: 0.7rem 0.8rem calc(2.4rem * var(--hud)); }
  .brand { gap: 0.55rem; }
  .hud-top { --title-fs: calc(1.1rem * var(--hud)); --sub-fs: calc(0.58rem * var(--hud)); }
  .hud-top { --sub-gap: calc(0.25rem * var(--hud)); }
  .stats { gap: calc(0.8rem * var(--hud)); }
  .crawl { height: calc(2.5rem * var(--hud)); }
  .crawl-label { font-size: calc(0.7rem * var(--hud)); padding: 0 1.4rem 0 0.8rem; }
  .crawl-brand { font-size: calc(0.7rem * var(--hud)); padding: 0 0.8rem 0 1.4rem; }
  .ci { font-size: calc(0.92rem * var(--hud)); padding: 0 calc(0.9rem * var(--hud)); }
  .ci .src, .ci .meta { font-size: calc(0.68rem * var(--hud)); }
  .event { left: 0.8rem; bottom: calc(1.1rem + calc(2.5rem * var(--hud))); max-width: calc(100vw - 1.6rem); }
  .event-kicker { font-size: 0.65rem; }
  .event-headline { font-size: 1.65rem; }
  .event-meta { font-size: 0.75rem; }
  .controls { bottom: calc(0.5rem + calc(2.5rem * var(--hud))); right: 0.6rem; }
  .drawer { padding: 0; font-size: 1rem; }
  .drawer-panel { width: 100vw; height: 100%; max-height: none; border-radius: 0; border-width: 3.5px 0 0; }
  .drawer-body { padding: 1.1em 1em 2.5em; }
  .spot { display: none; }
  .status { font-size: 1.1rem; }
}
@media (min-width: 2400px) { html { font-size: 22px; } }
@media (min-width: 3400px) { html { font-size: 30px; } }

/* country without a flag asset: ISO code chip instead of a blank dot */
.cc-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.2rem; border-radius: 0.65rem; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.02em; background: var(--ink-3); color: var(--bg); }
.ci .cc-chip { min-width: 1rem; height: 1rem; }
.event-meta .pile { display: inline-flex; padding-left: 0.4rem; margin-right: 0.35rem; }
.event-meta .pile > * { margin-left: -0.4rem; box-shadow: 0 0 0 2px var(--bg); }
.event-meta .cc-chip { opacity: 0; transform: scale(0.3); animation: pop 0.45s cubic-bezier(.3,1.6,.5,1) forwards; }
.ci .rk { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 0.85rem; }

/* settings: a centered panel over the dimmed wall, in the timeline popup's style */
.settings {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 2rem;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; font-size: 1.05rem;
}
.settings.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.settings-panel {
  position: relative; width: min(44rem, 100%); max-height: min(88vh, 64rem); display: flex; flex-direction: column;
  background: var(--panel-solid); border: 3.5px solid var(--accent); border-radius: 0.5em; box-shadow: var(--shadow); overflow: hidden;
  transform: translateY(0.8rem) scale(0.97); transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.settings.on .settings-panel { transform: none; }
.set-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5em 1.7em 1em; }
.set-close { right: calc(0.8em + 14px); }
.set-head { padding-right: 3em; }
.set-kicker { display: inline-block; font-size: 0.62em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--tag-slate); padding: 0.3em 0.6em; border-radius: 0.2em; }
.set-head h2 { margin: 0.35em 0 0; font-size: 1.9em; line-height: 1.1; font-weight: 700; }
.set-head p { margin: 0.4em 0 0; font-size: 0.82em; color: var(--ink-3); }
.set-body section { margin-top: 1.5em; }
.set-body h3 { margin: 0; padding-bottom: 0.55em; border-bottom: 1px solid var(--line); font-size: 0.62em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6em 1.4em; padding: 0.8em 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); transition: opacity 0.2s; }
.set-row:last-child { border-bottom: 0; }
.set-row.wide { grid-template-columns: 1fr; }
.set-row.dim { opacity: 0.4; }
.set-row.fold { max-height: 7em; overflow: hidden; transition: max-height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s, padding 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s; }
.set-row.fold.closed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; pointer-events: none; }
.set-l b { display: block; font-size: 0.95em; font-weight: 700; color: var(--ink); }
.set-l span { display: block; margin-top: 0.15em; font-size: 0.74em; line-height: 1.35; color: var(--ink-3); }
/* switch */
.set-toggle { position: relative; width: 2.6em; height: 1.45em; padding: 0; border-radius: 1em; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: color-mix(in srgb, var(--ink) 10%, var(--panel-solid)); transition: background 0.2s, border-color 0.2s; }
.set-toggle i { position: absolute; top: 50%; left: 0.18em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--ink-3); transform: translateY(-50%); transition: transform 0.25s cubic-bezier(.3,1.4,.5,1), background 0.2s; }
.set-toggle[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 45%, var(--panel-solid)); border-color: var(--accent); }
.set-toggle[aria-checked="true"] i { transform: translate(1.12em, -50%); background: var(--accent); }
/* segmented choice and chips: the card's button style (accent outline, tint, stronger when chosen) */
.set-seg { display: inline-flex; border: 1px solid var(--accent); border-radius: 0.35em; overflow: hidden; }
.set-seg button, .set-chip { font: inherit; font-size: 0.74em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
.set-seg button { padding: 0.55em 0.9em; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; white-space: nowrap; }
.set-seg button:first-child { border-left: 0; }
.set-seg button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.set-seg button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--ink); }
.set-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
.set-chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.85em; border-radius: 2em; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; }
.set-chip i { width: 0.7em; height: 0.7em; border-radius: 50%; opacity: 0.35; transition: opacity 0.15s; }
.set-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.set-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.set-chip[aria-pressed="true"] i { opacity: 1; }
/* slider */
.set-range { display: flex; align-items: center; gap: 0.8em; }
.set-logo { display: flex; align-items: center; gap: 0.6em; }
.set-colors { display: flex; flex-wrap: wrap; gap: 0.5em; }
.set-swatch { position: relative; width: 2.1em; height: 2.1em; padding: 0; border-radius: 50%; cursor: pointer; background: var(--sw);
  border: 2px solid var(--panel-solid); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); transition: box-shadow 0.15s, transform 0.15s; }
.set-swatch:hover { transform: scale(1.08); }
.set-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.set-swatch.auto { width: auto; padding: 0 0.8em; border-radius: 2em; background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); height: 2.9em; }
.set-swatch.custom { background: var(--sw, conic-gradient(#ff5252, #fecc02, #4fe0a0, #4fb6ff, #c592ff, #ff3d8b, #ff5252)); overflow: hidden; }
.set-swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.set-logo img, .set-logo i { width: 2.6em; height: 2.6em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.set-logo i { background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--ink) 8%, transparent) 4px 8px); }
.set-upload { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-solid)); color: var(--ink); }
.set-upload:hover { background: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); }
.set-remove { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink-2); }
.set-remove:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.set-c { display: flex; align-items: center; justify-content: flex-end; gap: 0.6em; }
.set-row.wide .set-c { justify-content: flex-start; flex-direction: row-reverse; align-items: flex-start; }
.set-row.wide .set-c .set-chips { flex: 1; }
/* back to the default: only on a row whose value was changed */
.set-undo { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; padding: 0; border-radius: 0.3em; cursor: pointer;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-solid)); color: var(--ink); transition: background 0.15s, opacity 0.2s; }
.set-undo:hover { background: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); }
.set-undo[hidden] { display: grid; visibility: hidden; opacity: 0; }   /* keeps its place: nothing moves when it appears */
.set-undo svg { width: 0.95em; height: 0.95em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-range output { min-width: 3em; white-space: nowrap; text-align: right; font-size: 0.85em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.set-range input { width: 11em; accent-color: var(--accent); cursor: pointer; }
.set-foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.9em 1.7em; border-top: 1px solid var(--line); }
.set-btn { font: inherit; font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.7em 1.1em; border-radius: 0.3em; cursor: pointer; transition: background 0.15s; }
.set-reset { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink-2); }
.set-reset:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.set-done { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); color: var(--ink); }
.set-done:hover { background: color-mix(in srgb, var(--accent) 60%, var(--panel-solid)); }
.controls #btn-faq { font-weight: 700; }
/* FAQ: the settings panel's frame, with questions that fold open */
.faq-q { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.faq-q:last-child { border-bottom: 0; }
.faq-q summary { list-style: none; display: flex; align-items: baseline; gap: 0.6em; padding: 0.75em 0; font-weight: 700; cursor: pointer; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before { content: "+"; flex: none; width: 1em; color: var(--accent); font-weight: 700; text-align: center; transition: transform 0.2s; }
.faq-q[open] summary::before { transform: rotate(45deg); }
.faq-q summary:hover { color: var(--accent); }
.faq-a { padding: 0 0 0.9em 1.6em; font-size: 0.9em; line-height: 1.5; color: var(--ink-2); }
.faq-sets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin-top: 0.6em; font-size: 0.85em; color: var(--ink-3); }
.faq-set { font: inherit; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 1em; padding: 0.15em 0.7em; cursor: pointer; }
.faq-set:hover { background: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); }
.faq-set::after { content: " →"; }
/* the settings row an FAQ answer pointed to */
.set-row.faq-hit { animation: faq-hit 2.4s ease-out; border-radius: 0.3em; }
@keyframes faq-hit { 0%, 35% { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 0.4em transparent; } }
@media (max-width: 600px), (max-height: 500px) {
  .settings { padding: 0; font-size: 1rem; }
  .settings-panel { width: 100vw; height: 100%; max-height: none; border-radius: 0; border-width: 3.5px 0 0; }
  .set-scroll { padding: 1.1em 1em 1em; }
  .set-row { grid-template-columns: 1fr; }
  .set-foot { padding: 0.8em 1em; }
}