/* Newsdesk. One set of colors with light and dark values (the theme follows the system unless Settings picks one),
   a glass top bar that frosts as you scroll, Masonry walls for cards, and a bottom tab bar on phones. */

/* ---- Fonts (self-hosted, latin only; licenses in /fonts/LICENSE.txt) ---- */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(/fonts/public-sans.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(/fonts/public-sans-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-700.woff2) format("woff2"); font-weight: 700 900; font-display: swap; }

/* ---- Colors: light-dark(light, dark), picked by color-scheme ---- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#eef1f6, #0a0f1b);
  --panel: light-dark(#ffffff, #111a2b);
  --panel-2: light-dark(#f3f5f9, #172238);
  --ink: light-dark(#111827, #e8edf6);
  --muted: light-dark(#586274, #95a2b9);
  --line: light-dark(#d7dde8, #24314a);
  /* The TPK logo's red, rgb(237, 28, 36), and blue, rgb(56, 113, 193): the same in both themes. The -ink colors are
     for small words (a touch deeper on white, a touch lighter on dark, so they stay easy to read); -soft are tints. */
  --red: #ed1c24;
  --red-ink: light-dark(#c9181f, #f14e54);
  --red-soft: light-dark(#fde8e9, #3f1219);
  --on-red: #ffffff;
  --blue: #3871c1;
  --blue-ink: light-dark(#3871c1, #6a94d0);
  --blue-soft: light-dark(#e8eff8, #1a2d4c);
  --good: light-dark(#127a55, #41d197);
  --good-soft: light-dark(#def3ea, #0f3326);
  --warn: light-dark(#9a620a, #f2b552);
  --warn-soft: light-dark(#fcefd6, #3a2a10);
  --glass: light-dark(rgba(255, 255, 255, 0.7), rgba(15, 22, 38, 0.68));
  --glass-line: light-dark(rgba(17, 24, 39, 0.08), rgba(255, 255, 255, 0.08));
  --glow-1: light-dark(rgba(237, 28, 36, 0.13), rgba(237, 28, 36, 0.22));
  --glow-2: light-dark(rgba(56, 113, 193, 0.15), rgba(56, 113, 193, 0.32));
  --sh-1: light-dark(rgba(17, 24, 39, 0.05), rgba(0, 0, 0, 0.3));
  --sh-2: light-dark(rgba(17, 24, 39, 0.22), rgba(0, 0, 0, 0.75));
  --sh-3: light-dark(rgba(17, 24, 39, 0.34), rgba(0, 0, 0, 0.9));
  --shadow: 0 1px 2px var(--sh-1), 0 10px 28px -16px var(--sh-2);
  --shadow-up: 0 2px 6px var(--sh-1), 0 22px 44px -20px var(--sh-3);
  --term-bg: light-dark(#0f1720, #060a12);

  /* Names older parts of the app use */
  --accent: var(--red);
  --accent-soft: var(--red-soft);
  --warn-bg: var(--warn-soft);
  --warn-line: light-dark(#ecd48a, #6b5a22);
  --viz-1: var(--blue);
  --viz-grid: light-dark(#e6eaf1, #1f2a40);

  /* News leans, sources and kinds */
  --lean-left: var(--blue);
  --lean-lean-left: light-dark(#92b1dd, #88aada);
  --lean-center: #9ca3af;
  --lean-lean-right: light-dark(#f4777c, #f36b71);
  --lean-right: var(--red);
  --lean-official: light-dark(#ca8a04, #facc15);
  --lean-international: light-dark(#0d9488, #2dd4bf);
  --lean-local: light-dark(#7c3aed, #a78bfa);
  --src-truth: light-dark(#6d4aff, #a78bfa);
  --src-x: light-dark(#0284c7, #38bdf8);
  --src-youtube: var(--red);
  --src-news: light-dark(#b7791f, #facc15);
  --src-event: light-dark(#0f766e, #2dd4bf);
  --src-statement: light-dark(#c026d3, #e879f9);
  --kind-credit: light-dark(#16a34a, #4ade80);
  --kind-blame: var(--red);
  --kind-promise: light-dark(#7c3aed, #a78bfa);
  --kind-claim: var(--blue);
  --kind-attack: light-dark(#ea580c, #fb923c);
  --kind-other: light-dark(#6b7280, #9ca3af);
  --kind-none: light-dark(#c4c9d4, #3a4560);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --gap: 18px;
  --radius: 18px;
  --tabbar-h: 0px;
  /* The top bar's full height: row 1 (the logo, the EN | PT desk switch, the coins and the buttons) over row 2 (the
     sections). In the Android app the page runs up behind the phone's status bar, so the bar grows by that inset;
     everything that sticks under the bar uses this instead of a fixed number of pixels. While row 1 is tucked away
     (scrolling down a long page) only row 2 counts; phones have no row 2 (the tab bar at the bottom takes over). */
  --bar-row1-h: 66px;
  --bar-row1: calc(var(--bar-row1-h) + env(safe-area-inset-top, 0px));
  --bar-row2: 50px;
  --bar-h: calc(var(--bar-row1) + var(--bar-row2));
  /* The thin line under the bar: red to blue on the English desk, blue to red on the Portuguese desk (desk.js). */
  --desk-line: linear-gradient(90deg, var(--red), var(--blue));
  --desk-ink: var(--red);
}
html.bar-tucked { --bar-h: calc(var(--bar-row2) + env(safe-area-inset-top, 0px)); }
html[data-desk="pt"] { --desk-line: linear-gradient(90deg, var(--blue), var(--red)); --desk-ink: var(--blue); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- Base ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Clipping on html too lets body clip for real, so a page sliding in never widens the phone's view. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0.4em 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ic { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.aurora {
  position: absolute; inset: 0 0 auto; height: 620px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 340px at 6% -80px, var(--glow-1), transparent 70%),
    radial-gradient(820px 380px at 94% -100px, var(--glow-2), transparent 70%);
}

.wrap { position: relative; z-index: 1; max-width: 1680px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
main.wrap { padding-bottom: calc(80px + var(--tabbar-h)); min-height: 70vh; }
#view[data-page="story"], #view[data-page="projects"], #view[data-page="ask"] { max-width: 1280px; }
#view[data-page="history"] { max-width: 1480px; }
#setup-warnings:empty { display: none; }

/* ---- Glass top bar: two rows ----
   Row 1 holds the logo, the EN | PT desk switch, the coins and the buttons; row 2 holds the sections, centered. Row 1
   is laid out as spare space in quarters (a quarter left of the logo, half between the switch and the coins, a quarter
   right of the buttons), so the row reads centered at every width. Scrolling down a long page tucks row 1 away
   (deskbar.js adds .tuck) and a small logo slides in next to the sections; scrolling up, or reaching for the top edge,
   brings it back. */
.bar { position: sticky; top: 0; z-index: 40; --s: 0; transition: transform .52s var(--spring); }
.bar::before {
  content: ""; position: absolute; inset: 0; opacity: var(--s);
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border-bottom: 1px solid var(--glass-line); box-shadow: 0 12px 30px -24px var(--sh-3);
}
.bar-in { position: relative; max-width: 1708px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
/* Row 1 is a grid of five columns: [room] [logo, wordmark, EN | PT] [gap] [dot, coins, buttons] [room]. The two groups
   are as wide as what's in them (auto). The gap is 50px, and only shrinks (to 20px at least) when a window is too
   narrow. The room left over goes 3 parts left of the logo and 4 parts right of the gear, so the right-hand group sits
   a little further in, over the centered sections. To adjust: 50px is the gap; 3fr and 4fr are the left and right
   room (1fr and 1fr would center row 1 exactly). Phones split their room their own way further down. */
.bar-row1 {
  height: var(--bar-row1); padding-top: env(safe-area-inset-top, 0px);
  display: grid; grid-template-columns: 3fr auto minmax(20px, 50px) auto 4fr; align-items: center;
  transition: opacity .3s, transform .52s var(--spring);
}
.bar-left { grid-column: 2; display: flex; align-items: center; gap: 18px; min-width: 0; }
.bar-row1 .bar-end { grid-column: 4; margin-left: 0; justify-self: end; }
.bar-row2 { height: var(--bar-row2); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bar-row2 .topnav { grid-column: 2; }
.bar.tuck { transform: translateY(calc(-1 * var(--bar-row1-h))); }
.bar.tuck .bar-row1 { opacity: 0; transform: translateY(8px); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.tk {
  height: 40px; width: auto; background: #fff; border-radius: 11px; padding: 3px 4px; box-shadow: var(--shadow);
  transform: scale(calc(1 - var(--s) * 0.08)); transition: transform .2s var(--ease);
}
.word { height: 19px; width: auto; filter: drop-shadow(0 1px 0 light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6))); }

/* The logo is a card with the English logo on its front and the Brazilian one on its back; switching desks turns it
   over (with a sheen running across), and the small logo on row 2 turns with it. */
.bar .mark {
  position: relative; display: block; width: 54px; height: 46px; flex: none; perspective: 500px;
  transform: scale(calc(1 - var(--s) * 0.08)); transition: transform .2s var(--ease);
}
.mark-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--spring); }
.mk-face {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 3px 4px; border-radius: 11px;
  background: #fff; box-shadow: var(--shadow); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mk-face img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mk-face.back { transform: rotateY(180deg); }
.mk-face::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-18deg);
}
.mark.sheen .mk-face::after { animation: desk-sheen .75s .25s ease-out; }
@keyframes desk-sheen { 0% { left: -60%; opacity: 0; } 30% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
html[data-desk="pt"] .bar .mark-in { transform: rotateY(180deg); }
.bar .mini {
  grid-column: 1; justify-self: start; position: relative; display: block; width: 40px; height: 34px; perspective: 400px;
  opacity: 0; transform: translateX(-14px) scale(.6); pointer-events: none;
  transition: opacity .3s, transform .52s var(--spring);
}
.bar.tuck .mini { opacity: 1; transform: none; pointer-events: auto; transition-delay: .1s; }
.mini .mk-face { padding: 2px 3px; border-radius: 8px; }

/* The wordmark is cut into twelve slats, each with the English wordmark on its front and the Brazilian one on its
   back; switching desks turns them one after another, left to right going Portuguese and right to left coming back.
   (deskbar.js builds the slats; until then the plain English wordmark shows.) */
.bar .word {
  position: relative; display: flex; height: 19px; width: auto; aspect-ratio: 1276 / 97; flex: none; perspective: 600px;
  filter: none; --n: 11;
}
.bar .word > img { display: block; height: 100%; width: auto; filter: drop-shadow(0 1px 0 light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6))); }
.slat { position: relative; flex: 1 1 0; min-width: 0; }
.flip {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.3, 1.35, .5, 1) calc((var(--n) - var(--i)) * 40ms);
}
.sl-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sl-face img {
  position: absolute; top: 0; left: calc(var(--i) * -100%); height: 100%; width: calc(1200% + 1px); max-width: none; display: block;
  filter: drop-shadow(0 1px 0 light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6))); pointer-events: none;
}
.sl-face.back { transform: rotateY(180deg); }
html[data-desk="pt"] .bar .flip { transform: rotateY(180deg); transition-delay: calc(var(--i) * 40ms); }

/* The EN | PT desk switch: a square glass pill, red on the English desk and blue on the Portuguese one. */
.bar .desk-switch {
  padding: 3px; gap: 0; border-radius: 0; flex: none; overflow: visible;
  background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 2px 2px 6px -1px color-mix(in srgb, var(--desk-ink) 50%, transparent); transition: box-shadow .4s;
}
.bar .desk-switch > button { padding: 7px 13px; border-radius: 0; font: 700 13px/1.1 var(--body); letter-spacing: .06em; }
.bar .desk-switch > button.on { color: #fff; }
.bar .desk-switch:not(.has-pill) > button.on { background: var(--desk-ink); box-shadow: none; }
.bar .desk-switch .pill {
  top: 3px; bottom: 3px; border-radius: 0;
  background: linear-gradient(135deg, var(--desk-ink), color-mix(in srgb, var(--desk-ink) 72%, #000));
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--desk-ink) 70%, transparent);
  transition: transform .55s var(--spring), width .55s var(--spring), background .4s, box-shadow .4s, opacity .2s;
}

/* The line under the bar, in the desk's colours; switching desks wipes the new desk's line across the old one. */
.bar-accent { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; opacity: calc(.45 + var(--s) * .55); }
.bar-accent i { position: absolute; inset: 0; display: block; }
.bar-accent .now { background: var(--desk-line); }
.bar-accent .next { transform: translateX(-100%); }
.bar-accent .next.go { transform: none; transition: transform .62s cubic-bezier(.65, 0, .35, 1); }
.bar-accent .next::after { content: ""; position: absolute; right: -6px; top: -5px; width: 70px; height: 12px; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); }

/* Switching desks deals the page's cards out before the other desk's deal in (ui.js's usual rise). */
#view > .desk-out {
  transform: perspective(900px) rotateX(9deg) translateY(14px) scale(.97); opacity: 0; transform-origin: 50% 100%; pointer-events: none;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1) calc(var(--k, 0) * 45ms), opacity .38s ease calc(var(--k, 0) * 45ms);
}

.topnav {
  position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius:0px;
}
.topnav a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: color .25s; border-radius:0px;
}
.topnav a:hover, .topnav a.active { color: var(--ink); }
.pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 0px; background: var(--panel); box-shadow: 0 1px 2px var(--sh-1), 0 6px 16px -8px var(--sh-2);
  pointer-events: none; opacity: 0; transition: transform .55s var(--spring), width .55s var(--spring), opacity .2s;
}
.topnav .pill { top: 5px; bottom: 5px; }
#topnav .pill { border-radius: 0px; }
.no-anim .pill { transition: none !important; }
/* The menu's motion (ui.js, "the nav's motion"): a glass lens glides after your pointer from tab to tab, the words
   roll up letter by letter, a red light runs along the rim nearest your pointer, and the red line under the active
   tab stretches across to the next one like a rubber band. */
.nav-lens {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); translate: var(--x, 0) 0; scale: .82;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  transition: translate .5s var(--spring), width .5s var(--spring), scale .45s var(--spring), opacity .3s;
}
#topnav .nav-lens { border-radius: 0px; }
.nav-lens.shown { opacity: 1; scale: 1; }
.topnav.pressing .nav-lens { scale: .92; }
.nav-line {
  position: absolute; left: 0; top: 0; z-index: 1; height: 3px; border-radius: 3px; pointer-events: none; opacity: 0;
  background: var(--red); box-shadow: 0 1px 8px color-mix(in srgb, var(--red) 45%, transparent); transform-origin: 0 50%;
}
.tabbar .nav-line { height: 2.5px; }
.roll { display: inline-flex; overflow: hidden; line-height: 1.3; }
.roll i { position: relative; font-style: normal; white-space: pre; transition: transform .5s var(--ease) calc(var(--i) * 18ms); }
.roll i::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
@media (hover: hover) { .topnav a:hover .roll i { transform: translateY(-100%); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topnav::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--red), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .5s;
}
.tabs .pill { border-radius: 0px; }
#view.wrap .tabs { border-radius: 0px; box-shadow:2px 2px 6px -1px rgba(56, 113, 193, 0.65); }
.topnav.lit::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .topnav a:hover .roll i { transform: none; } .topnav::before { display: none; } }
.live {
  font: 700 10px/1 var(--mono); background: var(--red); color: var(--on-red); padding: 3px 5px; border-radius: 999px;
  animation: tally 2.2s ease-out infinite;
}
@keyframes tally { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.bar-end { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.spend {
  display: flex; align-items: baseline;
  font: 500 12.5px/1 var(--mono); color: var(--muted); padding: 17px 4px 18px 4px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--panel) 50%, transparent);
  overflow: hidden; min-width: 0;  height:50px; box-sizing:border-box;
}
header span#spend.spend { border-radius:0px; }
.spend .sp-rest { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spend .sp-rest b { margin-left:-3px; }
.spend:empty { display: none; }
.spend b { color: var(--ink); font-weight: 600; }
/* Showcase mode: a badge saying this copy runs on saved data (see src/showcase). */
.sc-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; cursor: help;
  font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--good); padding: 9px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good-soft) 70%, transparent);
}
.sc-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: sc-breathe 2.6s ease-in-out infinite; }
@keyframes sc-breathe { 50% { opacity: .35; transform: scale(.8); } }
@media (max-width: 1440px) { .sc-pill .sc-date { display: none; } }
@media (prefers-reduced-motion: reduce) { .sc-pill::before { animation: none; } }
.iconbtn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted); text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease);
}
.iconbtn:hover, .iconbtn.active { background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--ink); border-color: var(--glass-line); }
.iconbtn:active { transform: scale(.9); }

/* ---- Phone tab bar ---- */
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--glass), var(--bg) 45%); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  border-top: 1px solid var(--glass-line);
}
.tabbar a {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 7px 0 2px;
  font-size: 10.5px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .25s;
}
.tabbar a.active { color: var(--ink); }
.tabbar .ic { transition: transform .2s var(--ease); }
.tabbar a:active .ic { transform: scale(.86); }
.tabbar .pill { top: 8px; bottom: auto; height: 30px; }
.tabbar a.active .ic { animation: tab-pop .6s var(--ease); }
@keyframes tab-pop { 0% { transform: scale(.82); } 40% { transform: translateY(-3px) scale(1.14); } 100% { transform: none; } }
.tabbar .live { position: absolute; top: 2px; left: calc(50% + 6px); padding: 2px 4px; font-size: 9px; }
/* Nine tabs on a narrow phone: a little less room each, so the labels don't run into each other. */
@media (max-width: 430px) { .tabbar { padding-inline: 2px; } .tabbar a { font-size: 9.5px; letter-spacing: -.015em; } }
@media (max-width: 370px) { .tabbar a { font-size: 9px; } }

/* In the Android app, while the page scrolls (device.js adds .app-scrolling, and takes it off when the page comes to
   rest), the glass that stays on screen drops its blur and goes solid: blurring what slides under it again on every
   frame was a quarter to a third of the work of drawing a scroll frame in tests. A smaller blur doesn't help (it timed
   a little slower), since a big one is worked out on a shrunken copy. */
html.app-scrolling .bar::before, html.app-scrolling :is(.bar .desk-switch, .topnav, .tabbar, .story-bar, .elw-bar) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.app-scrolling .bar::before { background: linear-gradient(var(--glass), var(--glass)), var(--bg); }
html.app-scrolling .tabbar { background: linear-gradient(color-mix(in srgb, var(--glass), var(--bg) 45%), color-mix(in srgb, var(--glass), var(--bg) 45%)), var(--bg); }
html.app-scrolling :is(.story-bar, .elw-bar) { background: var(--bg); }

/* ---- Page heads ---- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin: 22px 0 24px; }
.page-head h1 {
  font: 850 clamp(34px, 3.8vw, 54px)/0.98 var(--display); font-stretch: 78%; letter-spacing: -0.01em;
  margin-top: 6px; text-wrap: balance;
}
.page-head > div:first-child { min-width: 0; max-width: 100%; }
.sub { color: var(--muted); margin-top: 10px; max-width: 70ch; }
.page-foot { margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eyebrow { font: 600 11.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.page-head .eyebrow { color: var(--red-ink); }
.back {
  display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: color .2s, transform .2s var(--ease);
}
.back:hover { color: var(--ink); transform: translateX(-3px); }
.page-head .back { margin-bottom: 6px; }
/* The front page before today's brief is built: the newest brief, with a ribbon saying whose day it is. */
.stale-note {
  display: flex; gap: 14px; align-items: center; margin: -6px 0 22px; padding: 12px 18px; border-radius: 0px;
  background: var(--warn-soft); border: 1px solid var(--warn-line); animation: rise .5s var(--ease) both;
}
.stale-note p { margin: 0; max-width: 90ch; }
.stale-clock { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--warn); }
.stale-clock::before, .stale-clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; border-radius: 2px; background: var(--warn); transform-origin: 50% 100%; }
.stale-clock::before { height: 6px; margin-left: -1px; transform: rotate(-60deg); }
.stale-clock::after { height: 9px; margin-left: -1px; animation: clock-sweep 1.4s .25s var(--ease) both; }
@keyframes clock-sweep { from { transform: rotate(-360deg); } }

/* ---- Buttons and fields ---- */
button#tl-run { margin-bottom: 3px; }
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 14px/1.1 var(--body); padding: 10px 17px; min-height: 40px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none;
  transition: transform .15s var(--ease), border-color .2s, background .2s, box-shadow .2s, filter .2s; border-radius:0px;
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); }

#view.wrap .btn.small{ box-shadow:1px 1px 3px 0px rgba(255,255,255,0.6);}
#view.wrap .btn:hover{ font-weight:900; transition:all 200ms ease-in-out; border-color:#444; box-shadow:none !important;}
.btn:active { transform: scale(.95); }
.btn.primary { background: var(--red); border-color: var(--red); color: var(--on-red); box-shadow: 0 10px 22px -12px var(--red); }
.btn.primary:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.small { padding: 7px 12px; min-height: 32px; font-size: 13px; }
.btn.ghost { background: transparent; }
.icon-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  min-width: 32px; min-height: 32px; padding: 4px 8px; border-radius: 999px; transition: background .2s, color .2s, transform .15s var(--ease);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn:active { transform: scale(.88); }

input[type="text"], input[type="search"], input[type="date"], input[type="number"], textarea, select {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 12px; width: 100%; min-height: 40px;
  transition: border-color .2s, box-shadow .2s;
  border-radius:0px;
}
input[type="number"] { width: 70px; padding: 7px 8px; }
select {
  width: auto; max-width: 100%; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; border-radius:0px;
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--red); width: 16px; height: 16px; }
input[type="color"] { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; }
label.check input { width: 16px; flex: none; }
.inline-fields { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.inline-fields label { margin: 8px 0; display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 14px; }
.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row input { min-height: 46px; border-radius: 999px; padding-inline: 18px; font-size: 15px; }

/* ---- Panels and cards ---- */
.panel, .story-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: var(--gap);
  box-shadow:2px 2px 6px -1px rgba(56, 113, 193, 0.65); border-radius:0px;
}
.panel h2 { font: 800 22px/1.1 var(--display); font-stretch: 85%; margin-bottom: 6px; }
.panel h3 { font: 800 17px/1.15 var(--display); font-stretch: 88%; margin: 22px 0 8px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2, .panel-head h3 { margin-bottom: 0; }
.card-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.kv strong { font-weight: 700; }
details { margin-top: 10px; }
summary {
  cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 8px; padding: 2px 0; transition: color .2s;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s var(--ease); margin: 0 3px 0 1px;
}
details[open] > summary::before { transform: rotate(45deg); }
summary:hover { color: var(--ink); }
details.panel > summary { font: 800 17px/1.2 var(--display); font-stretch: 88%; color: var(--ink); }

@keyframes rise { from { opacity: 0; translate: 0 14px; scale: .985; } }
#view[data-mode="first"] > *, #view[data-mode="enter"] > *,
#view[data-mode="first"] .tile > *, #view[data-mode="enter"] .tile > * {
  animation: rise .56s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
/* Walls rise card by card, so whatever holds a wall stays put instead of rising twice. */
#view[data-mode] > .wall, #view[data-mode] > :has(.wall) { animation: none; }

/* ---- Segmented tabs with a sliding pill ---- */
.tabs, .seg {
  position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; max-width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; vertical-align: middle;
}
.tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.tabs > a, .seg > button {
  position: relative; z-index: 1; padding: 8px 15px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 13.5px/1.1 var(--body); color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .25s;
}
.tabs > a:hover, .seg > button:hover, .tabs > a.active, .seg > button.on { color: var(--ink); }
.tabs:not(.has-pill) > a.active, .seg:not(.has-pill) > button.on { background: var(--panel); box-shadow: var(--shadow); }
.h-views > a { padding: 7px 14px; }

/* ---- Masonry walls ---- */
.wall { position: relative; container: wall / inline-size; margin-inline: calc(var(--gap) / -2); }
.wall > .wall-sizer, .wall > .tile { width: 100%; }
.wall > .wall-sizer { height: 0; }
.wall > .tile { padding: calc(var(--gap) / 2); transition-timing-function: var(--ease) !important; }
.wall > .tile > * { margin: 0 !important; }
/* Narrow cards (posts, clips): as many columns as fit about 300px each */
@container wall (min-width: 600px) { .wall > .wall-sizer, .wall > .tile { width: 50%; } .wall > .tile.w2 { width: 100%; } }
@container wall (min-width: 920px) { .wall > .wall-sizer, .wall > .tile { width: 33.333%; } .wall > .tile.w2 { width: 66.666%; } }
@container wall (min-width: 1240px) { .wall > .wall-sizer, .wall > .tile { width: 25%; } .wall > .tile.w2 { width: 50%; } }
@container wall (min-width: 1560px) { .wall > .wall-sizer, .wall > .tile { width: 20%; } .wall > .tile.w2 { width: 40%; } }
/* Truth Social posts read better a little wider: four columns at most. */
@container wall (min-width: 1560px) { .wall.max4 > .wall-sizer, .wall.max4 > .tile { width: 25%; } .wall.max4 > .tile.w2 { width: 50%; } }
/* Wide cards (the brief, Settings): at most three columns */
@container wall (min-width: 600px) { .wall.roomy > .wall-sizer, .wall.roomy > .tile { width: 100%; } }
@container wall (min-width: 720px) { .wall.roomy > .wall-sizer, .wall.roomy > .tile { width: 50%; } .wall.roomy > .tile.w2 { width: 100%; } }
@container wall (min-width: 1200px) { .wall.roomy > .wall-sizer, .wall.roomy > .tile { width: 33.333%; } .wall.roomy > .tile.w2 { width: 66.666%; } }
/* Without Masonry (script blocked), a plain grid */
.wall:not(.is-masonry) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.wall:not(.is-masonry) > .tile { width: auto; }
.wall:not(.is-masonry) > .wall-sizer { display: none; }
.wall-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); box-shadow:0px 0px 9px -2px #3871c1; padding: 18px 20px; border-radius:0px; }

.w-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.w-title a { color: var(--red-ink); text-decoration: none; letter-spacing: .02em; }
.w-title a:hover { text-decoration: underline; }

/* ---- Brief: story cards ---- */
.story-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
.rank {
  font: 900 64px/0.8 var(--display); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1.6px var(--red);
  padding-top: 4px; min-width: 30px; text-align: center; user-select: none;
}
.story-card.hero .rank { color: var(--red); -webkit-text-stroke: 0; font-size: clamp(80px, 7vw, 108px); }
.hook { font: 800 24px/1.06 var(--display); font-stretch: 80%; margin: 8px 0 10px; letter-spacing: -0.005em; text-wrap: balance; }
.story-card.hero .hook { font-size: clamp(28px, 2.7vw, 40px); }
.story-card p { max-width: 75ch; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.chip {
  appearance: none; font: inherit; font-size: 12.5px; line-height: 1.3; padding: 6px 11px; border-radius: 999px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  transition: border-color .2s, transform .15s var(--ease), background .2s;
}
.chip:hover { border-color: var(--red); }
.chip:active { transform: scale(.96); }
.chip.solid { cursor: default; border-style: solid; }
.chip b { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); margin-right: 5px; }
.chip.solid:hover { border-color: var(--line); }
.meta-row {
  display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; margin: 16px 0 6px; padding-top: 14px; border-top: 1px dashed var(--line);
  font: 500 12px/1.2 var(--mono); color: var(--muted);
}
.meta-row > span { display: inline-flex; align-items: center; gap: 8px; }
.heat { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.heat i { width: 4px; border-radius: 2px; background: var(--line); display: inline-block; height: 5px; }
.heat i:nth-child(2) { height: 6px; } .heat i:nth-child(3) { height: 7px; } .heat i:nth-child(4) { height: 8px; } .heat i:nth-child(5) { height: 9px; }
.heat i:nth-child(6) { height: 10px; } .heat i:nth-child(7) { height: 11px; } .heat i:nth-child(8) { height: 12px; } .heat i:nth-child(9) { height: 13px; } .heat i:nth-child(10) { height: 14px; }
.heat i.on { background: var(--red); }
.leanbar { display: inline-flex; height: 8px; width: 110px; border-radius: 999px; overflow: hidden; background: var(--line); }
.leanbar span { display: block; height: 100%; }
.lean-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.lean-left { background: var(--lean-left); }
.lean-lean-left { background: var(--lean-lean-left); }
.lean-center { background: var(--lean-center); }
.lean-lean-right { background: var(--lean-lean-right); }
.lean-right { background: var(--lean-right); }
.lean-official { background: var(--lean-official); }
.lean-international { background: var(--lean-international); }
.lean-local { background: var(--lean-local); }
.coverage { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.coverage li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.coverage li:last-child { border-bottom: none; }
.coverage a { text-decoration: none; }
.coverage a:hover { text-decoration: underline; }
.outlet { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-width: 140px; }

/* Competitor boxes: covered, mentioned briefly, or not in their latest videos */
.comp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0 2px; }
.comp-label { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-right: 4px; }
.comp {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; white-space: nowrap; border-radius: 8px;
  font: 600 11.5px/1.1 var(--mono); color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); background: var(--panel-2); transition: border-color .2s, transform .15s var(--ease);
}
a.comp:hover { border-color: var(--muted); }
a.comp:active { transform: scale(.96); }
.comp-box {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--panel);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 900; line-height: 1; flex: none;
}
.comp-main { color: var(--good); background: var(--good-soft); border-color: transparent; }
.comp-main .comp-box { background: var(--good); border-color: var(--good); color: var(--panel); }
.comp-part { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.comp-part .comp-box { border-color: var(--warn); background: linear-gradient(135deg, var(--warn) 50%, var(--panel) 50%); }
.comp-go { font-size: 11px; }
.comp-panel h3 a { text-decoration: none; }
.comp-panel h3 a:hover { text-decoration: underline; }
.comp-when { min-width: 92px; white-space: nowrap; }

/* Brief side tiles */
.mini { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; }
.mini .mono { font-size: 11.5px; color: var(--muted); }
.mini-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.big-num { font: 850 46px/1 var(--display); font-stretch: 75%; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--blue); }
.bars span.today { background: var(--red); }
.axis { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--muted); margin-top: 6px; }

/* ---- Truth Social ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 9px; padding: 0 16px; height: 46px; border-radius: 999px; cursor: text;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.search input, .search input:focus { flex: 1; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.search.big { height: 54px; }
.search.big input { font-size: 17px; }
.toolbar .seg { background: var(--panel); box-shadow: var(--shadow); }
.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px 4px; }
.days::-webkit-scrollbar { display: none; }
.days { transition: opacity .3s; }
.days.dim { opacity: .45; }
.day {
  flex: none; display: grid; gap: 4px; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); text-decoration: none; transition: background-color .25s, color .25s, border-color .25s, transform .15s var(--ease);
}
.day:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.day:active { transform: scale(.96); }
.day b { font: 800 16px/1 var(--display); font-stretch: 85%; white-space: nowrap; }
.day small { font: 500 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.day.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.day.on small { color: inherit; opacity: .7; }
.day.pick { cursor: pointer; }
.day.pick input { width: 112px; height: auto; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font: 500 11px/1 var(--mono); color: var(--muted); }
.truth-count { margin: 4px 0 14px; }
.truth-source.on-backup, .truth-source.is-down { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.truth-source.on-backup { color: var(--warn); background: var(--warn-soft); }
.truth-source.is-down { color: var(--red-ink); background: var(--red-soft); }
.tile.pop > * { animation: rise .4s var(--ease) both; }
.truth-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.day-list {
  position: sticky; top: 82px; max-height: calc(100vh - 104px); overflow: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow);
}
.day-list a {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 10px; text-decoration: none; font-size: 14px;
  transition: background .2s, color .2s;
}
.day-list a:hover { background: var(--panel-2); }
.day-list a.active { background: var(--ink); color: var(--bg); font-weight: 700; }
.day-list a.active .muted { color: inherit; opacity: .7; }
.day-list .month { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 11px 6px; }
.post { border-left: 3px solid var(--red); padding: 10px 14px; background: var(--panel-2); border-radius: 0 12px 12px 0; margin: 10px 0; }
.post-text { white-space: pre-wrap; word-break: break-word; }
.post-meta { font: 500 11.5px/1.3 var(--mono); color: var(--muted); margin-top: 8px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.post-meta a { color: var(--muted); }
.post-meta a:hover { color: var(--ink); }
.wall .post {
  border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 16px 18px 13px; box-shadow: var(--shadow);
}
.wall .post.big { border-top: 3px solid var(--red); }
.wall .post.big .post-text { font: 800 23px/1.1 var(--display); font-stretch: 80%; }
.wall .post .post-meta { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 12px; }
/* Photos at the column's width and their own height (Masonry fits the taller posts in); videos as same-size thumbnails. */
.post-text:empty { display: none; }
.post-media { display: grid; gap: 8px; margin-top: 12px; }
.post-text:empty + .post-media { margin-top: 0; }
.pm { position: relative; display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.pm img, .pm video { display: block; width: 100%; transition: transform .5s var(--ease); }
.pm.image img { height: auto; max-height: 760px; object-fit: cover; object-position: top; }
.pm.video { aspect-ratio: 16 / 9; background: #05070c; }
.pm.video img, .pm.video video { height: 100%; object-fit: cover; }
.pm:hover img, .pm:hover video { transform: scale(1.025); }
.pm-play {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(6, 9, 16, .55); border: 1.5px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--ease), background .3s;
}
.pm-play::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -38% -50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.pm:hover .pm-play { transform: scale(1.1); background: var(--red); border-color: var(--red); }
.pm-tag {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 6px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(6, 9, 16, .6);
}
.modal-box.viewer {
  position: relative; display: grid; width: auto; max-width: min(1200px, 100%); padding: 0; overflow: hidden;
  background: #05070c; border-color: rgba(255, 255, 255, .1);
}
.viewer img, .viewer video { display: block; max-width: 100%; max-height: calc(92vh - 42px); max-height: calc(92dvh - 42px); margin: auto; }
.viewer .viewer-close { position: absolute; top: 10px; right: 10px; z-index: 1; color: #fff; background: rgba(6, 9, 16, .6); }
.viewer .viewer-close:hover { background: var(--red); color: #fff; }
.viewer-open { justify-self: end; padding: 13px 16px; font: 500 11.5px/1 var(--mono); color: rgba(255, 255, 255, .7); }
.viewer-open:hover { color: #fff; }
.post-date { margin: 0 0 8px; }
#truth-results > .panel-head { margin: 2px 0 12px; }
#truth-results > .panel-head h2 { font: 800 26px/1.05 var(--display); font-stretch: 80%; }
a.mini-text:hover { color: var(--red-ink); }
mark { background: color-mix(in srgb, var(--red) 24%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---- Ask the notebook ---- */
.ask-title { font: 800 26px/1.05 var(--display); font-stretch: 82%; margin: 6px 0 6px; }
.ask-answer p { font-size: 16px; line-height: 1.65; max-width: 760px; }
.ask-events { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; max-width: 760px; }
.ask-events li { font-size: 14px; line-height: 1.5; padding-left: 12px; border-left: 2px solid var(--line); }
.ask-events .ask-ev-day { font-weight: 700; white-space: nowrap; }
.day-list a .ask-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { padding: 2px 0 14px 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--red); }
.tl-period { font-weight: 800; font-size: 14px; }
.tl-post { font-size: 13px; margin: 4px 0; }
.ctx-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* Monthly column chart: thin bars, rounded tops, hairline grid */
.mchart { position: relative; margin: 16px 0 6px; }
.mchart-title { font: 600 12px/1.3 var(--mono); color: var(--muted); margin-bottom: 10px; }
.mchart-body { display: grid; grid-template-columns: 30px 1fr; gap: 8px; }
.mchart-y { position: relative; height: 170px; }
.mchart-y span { position: absolute; right: 0; transform: translateY(50%); font: 500 11px/1 var(--mono); color: var(--muted); }
.mchart-plot { position: relative; height: 170px; margin-bottom: 24px; }
.mchart-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--viz-grid); }
.mchart-cols { position: absolute; inset: 0; display: flex; gap: 2px; }
.mchart-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; outline: none; }
.mchart-bar { width: 100%; max-width: 24px; background: var(--viz-1); border-radius: 4px 4px 0 0; position: relative; transform-origin: bottom; animation: grow .7s var(--ease) both; }
@keyframes grow { from { scale: 1 0; } }
.mchart-col:hover .mchart-bar, .mchart-col:focus-visible .mchart-bar { filter: brightness(1.18); }
.mchart-col:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--viz-1) 45%, transparent); border-radius: 4px; }
.mchart-val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11px; font-weight: 700; color: var(--ink); }
.mchart-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font: 500 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.mchart-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 8px)); z-index: 5; pointer-events: none;
  display: flex; gap: 6px; align-items: baseline; white-space: nowrap; font-size: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; box-shadow: var(--shadow-up);
}
.mchart-tip[hidden] { display: none; }
.mchart-tip strong { color: var(--ink); }
.mchart-tip span { color: var(--muted); }
.mtable { border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.mtable th, .mtable td { text-align: left; padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---- Clips ---- */
.comp-form .inline-fields { margin-top: 6px; }
.num-range { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.folder-line { margin-top: 6px; }
.folder-line code, .notice code { word-break: break-all; }
.idea-row { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px; margin: 8px 0; }
.moments { margin-top: 12px; }
.moment {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: border-color .25s, box-shadow .3s var(--ease);
}
.panel .moment { background: var(--panel-2); box-shadow: none; }
.moment.selected { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 28%, transparent); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: transform .6s var(--ease), opacity .3s; }
.thumb:hover img { transform: scale(1.04); opacity: 1; }
.thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb .play span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; padding-left: 3px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform .3s var(--spring);
}
.thumb:hover .play span { transform: scale(1.12); }
.thumb .range { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .74); color: #fff; font: 600 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 6px; }
.thumb .l3 {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .92); color: #111; font: 700 10px/1 var(--mono); padding: 4px 7px 4px 4px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb .l3 i { flex: none; width: 4px; height: 12px; background: var(--red); border-radius: 1px; }
.moment .thumb { border-radius: 12px; margin: 8px 8px 0; }
.moment-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.moment-body p { margin: 0; }
.m-label { font: 600 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.quote { font-style: italic; font-weight: 500; font-size: 15.5px; line-height: 1.45; }
.score { font: 700 11.5px/1 var(--mono); padding: 4px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red-ink); }
.moment-foot .score { background: none; padding: 0 2px; font-size: 12px; }
.moment-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.moment-foot { display: flex; align-items: center; margin-top: auto; padding-top: 4px; gap: 8px; flex-wrap: wrap; }
.moment-foot .add { margin-left: auto; min-width: 74px; }
.moment-foot .badge { font: 600 11px/1 var(--mono); padding: 5px 7px; border-radius: 6px; }
.vid-meta { font-size: 12.5px; color: var(--muted); }
.vid-meta a { text-decoration: none; }
.vid-meta a:hover { text-decoration: underline; }
.twin:empty { display: none; }

/* The clip tray: floats over the results while you pick. */
.tray {
  position: fixed; left: 50%; bottom: calc(18px + var(--tabbar-h)); z-index: 30; width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px; padding: 9px 9px 9px 20px; border-radius: 999px; background: var(--ink); color: var(--bg);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .55); translate: -50% 160%; opacity: 0; pointer-events: none;
  transition: translate .55s var(--spring), opacity .3s;
}
.tray.up { translate: -50% 0; opacity: 1; pointer-events: auto; }
.tray .count { display: inline-block; font-weight: 700; }
.tray .tray-len { font: 500 13px/1 var(--mono); opacity: .7; }
.tray .btn { margin-left: auto; }

.reel-list { list-style: none; padding: 0; margin: 10px 0; }
.reel-item { display: grid; grid-template-columns: 34px 128px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.reel-item:last-child { border-bottom: none; }
.reel-num { font: 900 26px/1 var(--display); font-stretch: 70%; color: var(--red); text-align: center; }
.reel-item img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.reel-item img[data-preview] { cursor: pointer; transition: transform .25s var(--ease); }
.reel-item img[data-preview]:hover { transform: scale(1.04); }
.time-edit { display: inline-flex; align-items: center; gap: 2px; }
.time-edit input { width: 76px; min-height: 32px; padding: 4px 6px; text-align: center; font-family: var(--mono); font-size: 13px; }
.reel-controls { display: flex; flex-direction: column; gap: 2px; }
.reel-label { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.meter.ok { color: var(--good); font-weight: 600; }
.meter.off { color: var(--warn); font-weight: 600; }
.export-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.export-row label { margin: 0; }
.export-row input { flex: 1; min-width: 220px; width: auto; }
.swap-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.swap-row .thumb { border-radius: 10px; overflow: hidden; }
.sheet-text { font-family: var(--mono); font-size: 12.5px; min-height: 220px; }
.rights-list { list-style: none; padding: 0; margin: 6px 0 10px; }
.rights-list li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.player-wrap { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.player-wrap iframe, .player-wrap > div { width: 100%; height: 100%; }
.reel-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; flex-wrap: wrap; }

/* ---- Story workspace and script ---- */
.crumb { margin: 22px 0 12px; }
.story-head { position: relative; }
.story-title { font: 850 clamp(30px, 3.4vw, 50px)/1 var(--display); font-stretch: 78%; letter-spacing: -0.01em; margin: 6px 0 14px; text-wrap: balance; }
.story-head > p { max-width: 80ch; }
/* Tabs under the story card; they stay in reach while you scroll a long script. */
.story-bar {
  position: sticky; top: calc(var(--bar-h) + 8px); z-index: 6; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px;
  margin: 18px 0 16px; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.story-bar .seg { background: var(--panel); box-shadow: var(--shadow); }
.story-bar .actions { padding-right: 2px; }
.tab-count { font: 600 10.5px/1 var(--mono); margin-left: 6px; color: var(--red-ink); }
.tab-count:empty { display: none; }
.story-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--gap); align-items: start; }
.story-cols.solo { grid-template-columns: minmax(0, 1fr); }
.story-main { min-width: 0; display: grid; gap: var(--gap); }
.stab-panel { display: grid; gap: var(--gap); }
.stab-panel[hidden] { display: none; }
.story-main .panel { margin: 0; }
.story-side { position: sticky; top: calc(var(--bar-h) + 74px); max-height: calc(100vh - var(--bar-h) - 94px); overflow: auto; border-radius: var(--radius); scrollbar-width: thin; }
.story-side .panel { margin: 0; }
.leanbar.wide { width: 100%; height: 10px; margin: 2px 0 6px; }
.side-coverage { font-size: 13.5px; }
.side-coverage li { flex-direction: column; gap: 2px; }
.side-coverage .outlet { min-width: 0; font-size: 12.5px; }
.stats { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin: 8px 0 12px; }
.stats strong { color: var(--ink); }
.rundown { margin: 16px 0; }
.seg-heading { font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 24px 0 6px; }
.seg-text { font-size: 17px; line-height: 1.7; white-space: pre-wrap; margin: 0 0 12px; max-width: 68ch; }
.seg-clip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 14px 0; max-width: 68ch;
  border: 2px solid var(--red); background: var(--red-soft); border-radius: 14px; padding: 12px 16px;
}
.seg-clip .cue { font: 700 12.5px/1 var(--mono); color: var(--red-ink); letter-spacing: .05em; white-space: nowrap; }
.title-list { margin: 6px 0 0; padding-left: 22px; }
.title-list li { margin: 5px 0; }
.copyable { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .2s; }
.copyable:hover { border-bottom-color: var(--muted); }

/* ---- Fact-check (Script tab): claims marked green, amber or red, in a card and over the script ---- */
.fc-card { scroll-margin-top: calc(var(--bar-h) + 84px); margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.fc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; }
.fc-head h3 { margin: 0 0 2px; }
.fc-head p { margin: 0; }
.fc-summary { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 14px 0 4px; }
.fc-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font: 700 13px/1 var(--body); animation: rise .45s var(--spring) both;
}
.fc-pill i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.fc-pill + .fc-pill { animation-delay: 70ms; }
.fc-pill + .fc-pill + .fc-pill { animation-delay: 140ms; }
.fc-green { --fc: var(--good); --fc-soft: var(--good-soft); }
.fc-amber { --fc: var(--warn); --fc-soft: var(--warn-soft); }
.fc-red { --fc: var(--red-ink); --fc-soft: var(--red-soft); }
.fc-pill.fc-green, .fc-pill.fc-amber, .fc-pill.fc-red { color: var(--fc); background: var(--fc-soft); }
.fc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.fc-item {
  position: relative; padding: 12px 16px 12px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: inset 4px 0 0 var(--fc); animation: rise .45s var(--ease) both;
}
.fc-item p { margin: 4px 0; }
.fc-badge { display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--fc); background: var(--fc-soft); padding: 4px 8px; border-radius: 6px; }
.fc-claim { font-weight: 700; }
.fc-why { color: var(--muted); font-size: 14px; }
.fc-fix { font-size: 14px; }
.fc-fix b { color: var(--fc); }
.fc-links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: 13.5px; }
.fc-links a { color: var(--blue-ink); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.fc-links a:hover { text-decoration: underline; }
.fc-allgood { color: var(--good); font-weight: 700; margin: 10px 0 0; }
.fc-greens { margin-top: 12px; }
.fc-mark {
  color: inherit; background: color-mix(in srgb, var(--fc) 16%, transparent); border-bottom: 2px solid var(--fc);
  border-radius: 4px 4px 0 0; padding: 0 2px; cursor: pointer; transition: background .2s;
}
.fc-mark:hover, .fc-mark:focus-visible { background: color-mix(in srgb, var(--fc) 30%, transparent); }
.fc-flash { animation: fc-flash 1.3s var(--ease); }
@keyframes fc-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc, var(--blue)) 45%, transparent); } }
.fc-item.fc-flash { animation: fc-flash 1.3s var(--ease); box-shadow: inset 4px 0 0 var(--fc); }
.tab-count[data-fc]::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; vertical-align: 1px; background: var(--good);
}
.tab-count[data-fc="amber"]::after { background: var(--warn); }
.tab-count[data-fc="red"]::after { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
/* The Publish tab's dot (Ready to upload?) shows before there's a pack, with no ✓ beside it. */
.tab-count[data-fc]:empty { display: inline; margin-left: 1px; }

/* ---- Publish pack (Publish tab): each piece of the upload page on its own card with a copy button ---- */
.pub-stats { margin-top: 16px; }
.pub-wall { margin-top: 12px; }
.pub-card { padding: 14px 16px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.pub-card p { margin: 6px 0 0; }
.pub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pub-head .w-title { flex: 1; margin: 0; }
.pub-count { font: 600 11.5px/1 var(--mono); padding: 4px 8px; border-radius: 999px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); transition: color .2s, background .2s; }
.pub-count.near { color: var(--warn); }
.pub-count.warn, .pub-count.over { color: var(--red-ink); background: var(--red-soft); border-color: transparent; }
.copy-btn { min-width: 74px; justify-content: center; }
.copy-btn.copied { color: var(--good); background: var(--good-soft); border-color: transparent; animation: copied .35s var(--spring); }
@keyframes copied { 40% { transform: scale(1.08); } }
.pub-alts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.pub-alts .chip { margin: 0; text-align: left; }
.pub-alts .chip small { font: 600 10.5px/1 var(--mono); color: var(--muted); margin-left: 8px; }
.pub-desc {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; max-height: 560px; overflow: auto;
  padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); scrollbar-width: thin;
}
.pub-desc a { color: var(--blue-ink); text-decoration: none; }
.pub-desc a:hover { text-decoration: underline; }
.chap-list { display: grid; gap: 6px; margin-bottom: 8px; }
.chap-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 6px; align-items: center; animation: rise .35s var(--ease) both; }
.chap-row input { min-height: 36px; padding: 6px 10px; }
.chap-time { text-align: center; font-family: var(--mono) !important; font-size: 13.5px !important; }
@media (max-width: 640px) {
  .chap-time { font-size: 16px !important; }
  /* The story tabs share a phone's width while they fit; past that (eight of them on a small phone) they slide sideways
     instead of squeezing their names on top of each other, and the open tab is kept in view. The counts sit up in the corner. */
  .story-bar .story-tabs { display: flex; width: 100%; gap: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .story-bar .story-tabs::-webkit-scrollbar { display: none; }
  .story-bar .story-tabs > button { flex: 1 0 auto; padding-inline: 7px; font-size: 12.5px; position: relative; }
  .story-bar .story-tabs .tab-count { position: absolute; top: 3px; right: 2px; margin: 0; font-size: 9px; }
  .story-bar .story-tabs .tab-count[data-fc]::after { width: 6px; height: 6px; margin-left: 2px; box-shadow: none; }
  .story-bar .actions:empty { display: none; } /* no empty second row under the full-width tabs */
}
@media (max-width: 389px) { .story-bar .story-tabs > button { padding-inline: 5px; font-size: 12px; } }
.chap-time.bad { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.pub-warn { color: var(--red-ink); font-weight: 600; font-size: 13.5px; }
.pub-tags { margin: 0; }
.pub-comment { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.pub-dale.on { background: var(--warn-soft); border-color: var(--warn-line); }
.pub-dale label.check { margin: 0 0 4px; }
.pub-steps { margin: 8px 0 0; padding-left: 22px; font-size: 14px; display: grid; gap: 6px; }
.pub-empty { margin-top: 16px; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--line); }
.pub-empty p { margin: 0 0 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.week-list { margin: 8px 0 4px; padding-left: 20px; }
.week-list li { margin: 3px 0; }

/* ---- Projects ---- */
.plist { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); margin-bottom: var(--gap); }
.prow {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; text-decoration: none;
  animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  border-radius:0px;
  box-shadow:2px 2px 6px -1px rgba(56, 113, 193, 0.65);
  transition:all 220ms ease-in-out;
}
.prow:hover { transform: translateX(4px); box-shadow: var(--shadow-up); box-shadow:inset 3px 3px 8px 0px rgba(0, 0, 0, 1); border-color:black; transition:all 220ms ease-in-out; }
.prow:active { transform: scale(.985); }
.pdate { display: grid; justify-items: center; gap: 3px; border-right: 1px solid var(--line); padding-right: 14px; }
.pdate b { font: 850 30px/1 var(--display); font-stretch: 75%; }
.pdate small { font: 600 10.5px/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
.pmain { min-width: 0; display: grid; gap: 3px; }
.ptitle { font-weight: 700; line-height: 1.3; }
.pmain small { color: var(--muted); font-size: 13px; }
.hub-list h2 { margin: 6px 0 12px; }
@media (max-width: 520px) {
  .prow { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 14px; }
  .prow .pdate { grid-row: span 2; padding-right: 12px; }
  .prow .badge { grid-column: 2; justify-self: start; }
}
/* ---- A story's track: Picked → Clips → Script → Recorded → Edited → Published ---- */
.story-track { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.track {
  --n: 6; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative;
}
/* The rail behind the dots, and its filled part up to the step it's on. */
.track::before, .track::after {
  content: ""; position: absolute; top: 15px; left: calc(50% / var(--n)); height: 3px; border-radius: 3px; background: var(--line);
  width: calc(100% - 100% / var(--n));
}
.track::after {
  background: linear-gradient(90deg, var(--blue), var(--good)); width: calc((100% - 100% / var(--n)) * var(--done) / (var(--n) - 1));
  transition: width .7s var(--ease); animation: track-fill .9s var(--ease) both;
}
@keyframes track-fill { from { width: 0; } }
.tstep { position: relative; z-index: 1; display: flex; justify-content: center; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.tbtn {
  display: grid; justify-items: center; gap: 4px; padding: 0 2px; background: none; border: 0; color: inherit; font: inherit; text-align: center;
  min-width: 0; max-width: 100%;
}
button.tbtn { cursor: pointer; }
.tdot {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--mono);
  background: var(--panel); border: 2px solid var(--line); color: var(--muted); transition: transform .3s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.tstep.on .tdot { background: var(--good); border-color: var(--good); color: var(--panel); }
.tstep.here .tdot { box-shadow: 0 0 0 5px var(--good-soft); }
.tstep.manual:not(.on) .tdot { border-style: dashed; border-color: var(--blue); color: var(--blue-ink); }
button.tbtn:hover .tdot { transform: scale(1.12); }
button.tbtn:active .tdot { transform: scale(.94); }
.tlabel { font-weight: 700; font-size: 13.5px; }
.tbtn small { font: 500 11px/1.25 var(--mono); color: var(--muted); }
.tstep.manual:not(.on) small { color: var(--blue-ink); }
.track-out { margin: 12px 0 0; }
.track-out a { font-weight: 600; }
@media (max-width: 620px) {
  .tlabel { font-size: 11.5px; }
  .tbtn small { font-size: 9.5px; }
  .tdot { width: 28px; height: 28px; font-size: 11.5px; }
  .track::before, .track::after { top: 13px; }
}

/* The small track on a Projects row: six dots and the step it's on. */
.mtrack { display: grid; justify-items: end; gap: 5px; white-space: nowrap; }
.mtrack b { font: 600 11px/1 var(--mono); color: var(--muted); }
.mtrack.out b { color: var(--good); }
.mtrack small { font: 500 10.5px/1 var(--mono); color: var(--muted); }
.mdots, .bdots { display: inline-flex; gap: 4px; }
.mdots i, .bdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background-color .3s; }
.mdots i.on, .bdots i.on { background: var(--good); }
.mdots i.here { box-shadow: 0 0 0 3px var(--good-soft); }
@media (max-width: 520px) {
  .prow .mtrack { grid-column: 2; justify-self: start; justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }
}
.week-out { font: 600 11.5px/1 var(--mono); color: var(--good); margin-left: 4px; white-space: nowrap; }

/* The board: one column per step. Scrolls sideways on narrower screens. */
.board {
  display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; margin-bottom: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
.bcol { scroll-snap-align: start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-width: 0; animation: rise .5s var(--ease) both; }
.bcol:nth-child(2) { animation-delay: 50ms; } .bcol:nth-child(3) { animation-delay: 100ms; } .bcol:nth-child(4) { animation-delay: 150ms; }
.bcol:nth-child(5) { animation-delay: 200ms; } .bcol:nth-child(6) { animation-delay: 250ms; }
.bcol h3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.bcol h3 b { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--ink); }
.bcol[data-step="published"] h3 b { background: var(--good-soft); border-color: transparent; color: var(--good); }
.bcol.none { opacity: .7; }
.bcol .muted { margin: 4px; }
.bcards { display: grid; gap: 8px; }
.bcard {
  display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: inherit; text-decoration: none; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.bcard:active { transform: scale(.98); }
.btitle { font-weight: 700; font-size: 14px; line-height: 1.3; }
.bcard small { color: var(--muted); font-size: 12px; }
.bdots i { width: 7px; height: 7px; }
.board-note { margin: -8px 0 var(--gap); }
@media (max-width: 720px) { .board { grid-template-columns: repeat(6, 78%); } }
#p-view { margin-right: 4px; }

.badge.blue { color: var(--blue-ink); background: var(--blue-soft); border-color: transparent; }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.project-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px; margin: 0 -12px;
  text-decoration: none; border-radius: 12px;
  /* A straight divider lined up with the text, which a border on a rounded row can't do. */
  background: linear-gradient(var(--line), var(--line)) 50% 100% / calc(100% - 24px) 1px no-repeat;
  transition: background-color .2s, transform .3s var(--ease);
}
.project-row:last-child { background: none; }
.project-row h3 { margin: 0; font: 700 16px/1.3 var(--body); font-stretch: 100%; }
a.project-row:hover { background: var(--panel-2); transform: translateX(4px); }
a.project-row:active { transform: scale(.99); }
.badge {
  font: 600 11px/1 var(--mono); padding: 6px 9px; border-radius: 0px; white-space: nowrap; display: inline-block;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.badge.good, .badge.ev-good { color: var(--good); background: var(--good-soft); border-color: transparent; }
.badge.ev-warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.badge.ev-risky { color: var(--red-ink); background: var(--red-soft); border-color: transparent; }
/* Two desks: a Portuguese story's tag on Projects and the story page, and the country tag on the Portuguese desk's own outlets. */
.lang-tag, .region-tag {
  display: inline-grid; place-items: center; vertical-align: 2px; font: 700 9.5px/1 var(--mono); letter-spacing: .08em; font-style: normal;
  padding: 3px 5px 2px; border-radius: 4px; margin-right: 7px; color: var(--blue-ink); background: var(--blue-soft);
}
.region-tag { color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); margin-right: 6px; }
.prow .lang-tag { margin-right: 8px; }

/* ---- Settings ---- */
.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.srow > span:first-child { display: grid; gap: 2px; }
.srow small { font-size: 12px; color: var(--muted); }
.srow .mono { font: 600 12.5px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.srow .mono.warn { color: var(--warn); }
.backup-left-out { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn-line); font-size: 13px; }
.backup-left-out ul { margin: 6px 0 0; padding-left: 18px; }
.lean-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 12px; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.lean-legend span { display: inline-flex; align-items: center; gap: 6px; }
.feed-list { list-style: none; padding: 0; margin: 8px 0; columns: 2 180px; column-gap: 18px; font-size: 13.5px; }
.feed-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; break-inside: avoid; }
.feed-list .feed-name { flex: 1; min-width: 0; }
.feed-last { display: inline-flex; align-items: center; gap: 0; flex: none; font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.feed-list li.is-picked { animation: feed-picked 1.6s ease-out; border-radius: 6px; }
@keyframes feed-picked { 0%, 30% { background: color-mix(in srgb, var(--warn) 22%, transparent); } 100% { background: transparent; } }
/* Each feed's dot: green working, a yellow ring for gone quiet (answers, but empty), red failing, gray not fetched yet. */
.feed-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.feed-dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--good); transition: transform .15s ease; }
.feed-dot:hover, .feed-dot:focus-visible { transform: scale(1.35); }
.feed-key { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--good); vertical-align: 0; }
.feed-dot.is-quiet, .feed-key.is-quiet { background: transparent; box-shadow: inset 0 0 0 3.5px var(--warn); }
.feed-key.is-quiet { box-shadow: inset 0 0 0 2.5px var(--warn); }
.feed-dot.is-failing, .feed-key.is-failing { background: var(--red); }
.feed-dot.is-none, .feed-key.is-none { background: var(--line); }
.feed-dots-sum { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { .feed-list li.is-picked { animation: none; background: color-mix(in srgb, var(--warn) 18%, transparent); } .feed-dot { transition: none; } }
#feed-settings details { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.link-type-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
/* Name above link, with the remove button beside both, so a channel reads as one block at any width. */
.channel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; margin: 0 0 14px; }
.channel-row input[data-field="name"] { font-weight: 600; }
.channel-row input[data-field="url"] { grid-column: 1; grid-row: 2; }
.channel-row .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
.link-type-row input[data-field="color"] { width: 42px; height: 40px; padding: 3px; flex: none; }
.link-type-row input[data-field="label"] { flex: 1 1 150px; width: auto; }
.link-type-row input[data-field="meaning"] { flex: 3 1 260px; width: auto; }
.link-type-row span.icon-btn { width: 32px; }
#competitor-settings .inline-fields { margin-top: 10px; }
/* Settings › X accounts: a row per account (name over @handle, what X calls it under), his own fixed first, two
   columns where there's room. */
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; margin: 12px 0 0; }
#x-rows { display: contents; }
.x-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; margin: 0 0 14px; }
.x-row input[data-field="name"] { font-weight: 600; }
.x-row select[data-field="side"] { grid-column: 2; grid-row: 1; width: auto; }
.x-handle { grid-column: 1 / span 2; grid-row: 2; display: flex; align-items: center; gap: 6px; margin: 0; }
.x-handle span { color: var(--muted); font-weight: 600; }
.x-handle input { flex: 1 1 auto; min-width: 0; }
.x-row .icon-btn { grid-column: 3; grid-row: 1 / span 2; }
.x-row .x-note { grid-column: 1 / -1; margin: -2px 0 0; }
.x-his { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 10px 14px; margin: 0 0 14px; }
.x-his .x-note { margin: 2px 0 0; }
.x-bad { color: var(--red-ink); }
.x-key { display: flex; gap: 10px; align-items: baseline; }
.x-key .ok-dot, .x-key .warn-dot { flex: none; display: inline-block; transform: translateY(-1px); }
#x-settings .inline-fields { margin-top: 4px; }
/* Settings › X accounts › X budget (lib/xapi.ts): the day's line with today's spend under it, then a row per part
   that reads X (what it is, its share, today and this month, a bar of today against its share). */
#x-settings .xb { border-top: 1px solid var(--line); margin: 16px 0 0; padding: 14px 0 0; }
#x-settings .xb h3 { margin: 0 0 4px; font-size: 15px; }
#x-settings .xb > p { margin: 0 0 10px; }
#x-settings .xb-share { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; white-space: nowrap; }
#x-settings .xb-share > span[aria-hidden] { color: var(--muted); }
#x-settings .xb-share input { width: 84px; font: 600 14px var(--mono); text-align: right; }
#x-settings .xb-line b { margin-right: 6px; }
#x-settings .xb-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 10px 14px; margin: 0 0 12px; }
#x-settings .xb-today { display: flex; flex-wrap: wrap; gap: 2px 14px; justify-content: flex-end; }
#x-settings .xb-day .xb-bar { grid-column: 1 / -1; }
#x-settings .xb-bar { display: flex; height: 6px; border-radius: 99px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
#x-settings .xb-bar i { display: block; height: 100%; background: var(--xb-c, var(--blue)); }
#x-settings .xb-rows { display: grid; gap: 12px; }
#x-settings .xb-row { display: grid; grid-template-columns: minmax(0, 1fr) 158px minmax(128px, max-content); gap: 6px 16px; align-items: center; }
#x-settings .xb-row b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 7px 1px 0; background: var(--xb-c, transparent); vertical-align: middle; }
#x-settings .xb-other b::before { display: none; }
#x-settings .xb-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#x-settings .xb-used { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: var(--mono); }
/* A buy's dollars a month (Déjà vu counts' $56.70) stay on one line. */
#x-settings .xb-used span { white-space: nowrap; }
#x-settings .xb-row .xb-bar { grid-column: 1 / -1; }
#x-settings .xb-other .xb-share { font-weight: 400; }
#x-settings #xb-sum { margin: 12px 0 0; }
/* What the History bank answered itself instead of buying again (data bank Phase 2). */
#x-settings .xb-saved { color: var(--good); cursor: help; }
@media (max-width: 560px) {
  #x-settings .xb-day { grid-template-columns: 1fr; }
  #x-settings .xb-today { justify-content: flex-start; }
  #x-settings .xb-row { grid-template-columns: minmax(0, 1fr) auto; }
  #x-settings .xb-share { justify-self: start; }
  #x-settings .xb-what { grid-column: 1 / -1; }
  #x-settings .xb-used { align-items: flex-end; }
}
/* Settings › Their history on X: a row per person (tick, name, price or progress, the note under it), then Buy and
   its one inline ask. */
#xh-settings .xh-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; align-items: start; }
#xh-settings .xh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; align-content: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
#xh-settings .xh-who { display: flex; gap: 10px; align-items: baseline; margin: 0; cursor: pointer; min-width: 0; }
#xh-settings .xh-who input { flex: none; transform: translateY(2px); }
#xh-settings .xh-who input:disabled + span { cursor: default; }
#xh-settings .xh-price, #xh-settings .xh-pct, #xh-settings .xh-done { font: 600 13px/1 var(--mono); white-space: nowrap; }
#xh-settings .xh-done { color: var(--good); }
#xh-settings .xh-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
#xh-settings .xh-bar i { display: block; height: 100%; background: var(--blue); border-radius: inherit; transition: width .4s ease; }
#xh-settings .xh-note { grid-column: 1 / -1; margin: 0; }
#xh-settings .xh-bad { color: var(--red-ink); }
#xh-settings .xh-row .btn { grid-column: 1 / -1; justify-self: start; }
#xh-settings .xh-buy { margin: 14px 0 0; }
#xh-settings .xh-buy > p { margin: 0 0 6px; }
#xh-settings .xh-confirm { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
#xh-settings .xh-confirm p { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { #xh-settings .xh-bar i { transition: none; } }
/* A card opened from another page's Settings link starts below the sticky top bar, not under it. */
.wall .panel[id] { scroll-margin-top: calc(var(--bar-h) + 16px); }
.theme-seg { margin: 6px 0 4px; }
.seg .ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }

/* ---- History ---- */
.h-searchbar { display: flex; gap: 10px; align-items: center; }
.h-searchbar .search { flex: 1 1 auto; }
.h-searchbar .btn { height: 54px; padding-inline: 24px; }
.sugg { margin: 12px 0 10px; }
.h-more { margin: 0 0 18px; }
.h-more > summary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.h-more[open] { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); }
.h-filters { margin-top: 4px; }
.h-filters label { margin: 4px 0; }
.h-short { width: 140px !important; }
.h-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 12px; }
.h-head h2 { margin: 0; }
.h-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.h-head .seg { background: var(--panel); box-shadow: var(--shadow); }
.h-tools { margin: 0 0 12px; }
.h-list { display: grid; gap: 10px; }
.h-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 15px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.h-list.enter > .h-row { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.h-found { margin-top: 16px; border: 1px dashed var(--line); border-radius: 16px; padding: 2px 14px; background: var(--panel); }
.h-found > summary { cursor: pointer; padding: 10px 0; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.h-found > summary .muted { font-weight: 400; }
.h-found > .h-list { padding-bottom: 12px; }
.h-side { display: grid; gap: 10px; justify-items: start; }
.h-pick { margin: 0; }
.h-main { display: flex; gap: 14px; align-items: flex-start; }
.h-score { font: 500 11.5px/1.3 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.h-score b { font-size: 15px; color: var(--ink); }
.h-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; }
.h-link { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1.3 var(--mono); color: var(--muted); text-decoration: none; }
.h-link:hover { text-decoration: underline; }
.h-link i { flex: none; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.h-link.suggested i { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
@media (max-width: 640px) {
  .h-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  .h-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .h-main { flex-direction: column; }
  .h-main .h-thumb { width: 100%; }
  .h-searchbar .btn { padding-inline: 18px; }
  .sugg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .sugg::-webkit-scrollbar { display: none; }
  .sugg .chip { flex: none; }
}
/* Find anyone (people-picker.js): a name box with a list of people under it, or the person picked as a chip with a ✕. */
.pp { position: relative; display: inline-block; min-width: 0; vertical-align: middle; }
.pp[hidden] { display: none; }
.pp .pp-box { display: block; position: relative; }
.pp .pp-input { width: 240px; max-width: 100%; }
.pp .pp-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: max-content; min-width: 100%; max-width: min(440px, calc(100vw - 32px));
  max-height: 330px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.pp .pp-list[hidden] { display: none; }
.pp .pp-item { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.pp .pp-item:hover, .pp .pp-item[aria-selected="true"] { background: var(--panel-2); }
.pp .pp-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--blue); }
.pp .pp-item-name { font-weight: 700; color: var(--ink); }
.pp .pp-item-line { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.pp .pp-item-count { font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.pp .pp-nothing .pp-item-name, .pp .pp-nothing .pp-item-line { opacity: .6; }
.pp .pp-empty { padding: 10px 12px; font-size: 13.5px; color: var(--muted); }
.pp .pp-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel)); color: var(--ink); font-size: 14px;
}
.pp .pp-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pp .pp-more { font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.pp .pp-clear { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.pp .pp-clear:hover { background: var(--panel-2); color: var(--ink); }
.pp .pp-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* History › Filters › Who, and the card that says who a search reads and what of theirs is in the bank. */
.h-filters .h-who-field { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-weight: 500; font-size: 14px; min-width: 0; }
.h-who-card { margin: 0 0 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 16px 16px 0; box-shadow: var(--shadow); }
.h-who-card .h-who-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.h-who-card .h-who-head b { font-size: 16px; }
.h-who-card .h-who-accounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.h-who-card .h-who-acc { font-size: 12.5px; padding: 3px 9px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; overflow-wrap: anywhere; }
.h-who-card .h-who-acc b { font: 600 11.5px/1 var(--mono); margin-left: 2px; }
.h-who-card .h-who-acc.none { opacity: .55; }
@media (max-width: 640px) {
  .h-filters .h-who-field { flex: 1 1 100%; margin: 2px 0; }
  .h-filters .h-who-field .pp { flex: 1 1 auto; }
  .h-filters .h-who-field .pp-input { width: 100%; }
}
.h-thumb { position: relative; width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.h-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: transform .5s var(--ease); }
.h-thumb:hover img { transform: scale(1.05); }
.h-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.h-thumb .play span { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: grid; place-items: center; color: #fff; font-size: 13px; padding-left: 2px; }
.h-thumb .range { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .75); color: #fff; font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; }
.h-body { min-width: 0; }
.h-meta { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.h-meta strong { color: var(--ink); }
.h-title { margin-top: 2px; }
.h-text { margin: 6px 0 4px; white-space: pre-wrap; word-break: break-word; font-size: 15.5px; max-width: 95ch; }
.h-gist { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.src-badge, .kind-badge, .link-badge {
  font: 700 10.5px/1.5 var(--mono); padding: 1px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; letter-spacing: .02em;
}
.src-badge, .kind-badge { color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); }
.src-badge.src-truth { --c: var(--src-truth); }
.src-badge.src-x { --c: var(--src-x); }
.src-badge.src-youtube { --c: var(--src-youtube); }
.src-badge.src-news { --c: var(--src-news); }
.src-badge.src-event { --c: var(--src-event); }
.src-badge.src-statement { --c: var(--src-statement); }
.src-badge.src-x-found { --c: var(--src-x); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--src-x) 50%, transparent); }
.kind-badge.kind-credit { --c: var(--kind-credit); }
.kind-badge.kind-blame { --c: var(--kind-blame); }
.kind-badge.kind-promise { --c: var(--kind-promise); }
.kind-badge.kind-claim { --c: var(--kind-claim); }
.kind-badge.kind-attack { --c: var(--kind-attack); }
.kind-badge.kind-other { --c: var(--kind-other); }
/* Labels that stick (src/history/labels.ts): Claude's kept calls on X posts, under a result's words. */
.kind-badge.lbl-answers-him-yes { --c: var(--src-x); }
.kind-badge.lbl-answers-him-no { --c: var(--muted); }
.h-lbl-line { margin-top: 2px; }
.link-badge { color: #fff; }

.h-linkrow { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.h-linkrow.suggested { border-style: dashed; }
.h-linkrow.rejected { opacity: .6; }
.h-linkrow .card-actions { margin-top: 6px; }
.h-mini { font-size: 14px; background: var(--panel-2); border-radius: 10px; padding: 9px 11px; margin-top: 6px; }
.h-mini a { text-decoration: none; }
.h-mini a:hover { text-decoration: underline; }
.h-simrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.h-simlink { display: flex; gap: 6px; align-items: center; }
.h-simlink select { padding: 4px 28px 4px 8px; min-height: 32px; font-size: 13px; }
.h-arrow { text-align: center; font-size: 20px; color: var(--muted); }
.h-linkcard { border-bottom: 1px solid var(--line); padding: 16px 0; }
.h-linkcard:last-child { border-bottom: none; }
.h-linkcard select { padding: 4px 28px 4px 10px; min-height: 32px; font-size: 13px; }
.h-pair { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: center; }
.h-pair .h-arrow { align-self: center; }
.h-counts th { font-weight: 700; padding-right: 18px; white-space: nowrap; }
.h-log { max-height: 320px; }

/* Timeline */
.tl-wrap { position: relative; overflow-x: auto; margin-top: 10px; }
.tl-svg { display: block; font-family: var(--body); }
.tl-lane { fill: var(--panel-2); }
.tl-lane-label { fill: var(--muted); font-size: 12px; font-weight: 700; }
.tl-grid { stroke: var(--viz-grid); stroke-width: 1; }
.tl-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.tl-election { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.tl-election-label { fill: var(--red-ink); font-size: 11px; font-weight: 700; }
.tl-dot { stroke: var(--panel); stroke-width: 1.5; cursor: pointer; transition: r .2s var(--spring); }
.tl-dot:hover { stroke: var(--ink); stroke-width: 2; r: 8.5; }
.tl-dot.picked { stroke: var(--ink); stroke-width: 2.5; }
.tl-arc { fill: none; stroke-width: 2; opacity: .85; }
.tl-arc.suggested, .map-link.suggested { stroke-dasharray: 5 4; }
.kind-fill-credit { fill: var(--kind-credit); background: var(--kind-credit); }
.kind-fill-blame { fill: var(--kind-blame); background: var(--kind-blame); }
.kind-fill-promise { fill: var(--kind-promise); background: var(--kind-promise); }
.kind-fill-claim { fill: var(--kind-claim); background: var(--kind-claim); }
.kind-fill-attack { fill: var(--kind-attack); background: var(--kind-attack); }
.kind-fill-other { fill: var(--kind-other); background: var(--kind-other); }
.kind-fill-none { fill: var(--kind-none); background: var(--kind-none); }
.similar-stroke { background: var(--line); }
.legend { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend b { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.storyboard { margin-top: 6px; }
.sb-row { display: grid; grid-template-columns: auto 104px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sb-row:last-child { border-bottom: none; }
.sb-row a { text-decoration: none; }
.sb-row a:hover { text-decoration: underline; }
.sb-date { color: var(--muted); font: 500 12.5px/1.4 var(--mono); white-space: nowrap; }

/* Map */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; margin-top: 10px; }
.map-canvas { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); overflow: hidden; }
.map-svg { display: block; touch-action: none; cursor: grab; font-family: var(--body); max-width: 100%; }
.map-svg:active { cursor: grabbing; }
.map-similar { stroke: var(--line); stroke-width: 1.2; }
.map-link { stroke-width: 3; }
.map-node { cursor: pointer; }
.map-node circle { stroke: var(--panel); stroke-width: 2; transition: stroke-width .2s; }
.map-node text { font-size: 10.5px; fill: var(--muted); pointer-events: none; }
.map-node:hover circle { stroke: var(--ink); }
.map-node.selected circle { stroke: var(--ink); stroke-width: 3; }
.map-node.linking circle { stroke: var(--red); stroke-width: 4; }
.src-fill-truth { fill: var(--src-truth); background: var(--src-truth); }
.src-fill-x { fill: var(--src-x); background: var(--src-x); }
.src-fill-youtube { fill: var(--src-youtube); background: var(--src-youtube); }
.src-fill-news { fill: var(--src-news); background: var(--src-news); }
.src-fill-event { fill: var(--src-event); background: var(--src-event); }
.src-fill-statement { fill: var(--src-statement); background: var(--src-statement); }
.src-fill-x-found { fill: color-mix(in srgb, var(--src-x) 45%, transparent); background: color-mix(in srgb, var(--src-x) 45%, transparent); }
.map-side { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--panel); align-self: start; }
.map-side h3 { margin-top: 0 !important; }
.side-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.map-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; box-shadow: var(--shadow-up);
}
.map-tip[hidden] { display: none; }

/* Said it before */
.sb-item { border-left: 3px solid var(--red); background: var(--panel-2); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 10px 0; }
.sb-item label.check { margin: 0 0 4px; font-size: 13px; }
.sb-after { margin-top: 8px; padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.sb-after b { display: block; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.sb-after p { margin: 3px 0 0; line-height: 1.45; }
.sb-after p span { font-weight: 700; }

/* ---- Feedback: logs, notices, empty states, skeletons ---- */
.joblog {
  background: var(--term-bg); color: #cfe3d6; font: 12.5px/1.65 var(--mono); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px; padding: 12px 15px; margin: 14px 0; max-height: 240px; overflow: auto;
}
.spinner {
  width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.notice { background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 14px; padding: 11px 15px; margin: 14px 0 0; font-size: 14px; }
.error-box { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 8px; }
.skel {
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%); background-size: 300% 100%;
  animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-page { padding-top: 22px; animation: fade-in .3s var(--ease) both; }
.skel-title { height: 48px; width: min(420px, 70%); margin-bottom: 14px; }
.skel-sub { height: 16px; width: min(560px, 90%); border-radius: 8px; }
.skel-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); margin-top: 30px; }
.skel-card { height: 230px; border-radius: var(--radius); }
.skel-card:nth-child(2) { height: 300px; }
.skel-card:nth-child(3) { height: 190px; }
.skel-page .empty { padding: 28px 0; }
@keyframes fade-in { from { opacity: 0; } }

/* ---- Modal (a sheet from the bottom on phones) and toast ---- */
.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(6, 9, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal.closing { pointer-events: none; }
.modal-box {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; padding: 22px;
  width: min(960px, 100%); max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow-up);
}
.modal-box.narrow { width: min(580px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.modal-head h2 { font: 800 24px/1.05 var(--display); font-stretch: 82%; }
.modal-box h3 { font: 800 16px/1.2 var(--display); font-stretch: 88%; margin: 16px 0 4px; }
.toast {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(24px + var(--tabbar-h)); z-index: 80; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; text-align: center;
  box-shadow: var(--shadow-up);
}

/* ---- Page transitions: the old page fades out on a layer above while the new one slides in ---- */
.ghost-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ghost-page { position: absolute; margin: 0 !important; max-width: none !important; }
.ghost-page * { animation: none !important; }
/* A back swipe in the Android app (ui.js backPreview): the page shrinks into a card over a darker surround. The frame
   sits just under the page, the card's size, and moves with it; its huge shadow is the surround. */
html.back-peek #view { will-change: transform; }
.back-frame {
  position: fixed; z-index: 0; pointer-events: none; will-change: transform, opacity;
  box-shadow: 0 18px 50px light-dark(rgba(17, 24, 39, .28), rgba(0, 0, 0, .7)), 0 0 0 200vmax light-dark(rgba(17, 24, 39, .16), rgba(0, 0, 0, .5));
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }

/* Teleprompter: white on black, big type, a reading line a third of the way down */
.prompter { position: fixed; inset: 0; z-index: 70; background: #000; color: #fff; display: flex; flex-direction: column; }
.prompter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 14px; background: #111; border-bottom: 1px solid #2a2a2a;
  font-size: 14px; color: #bbb; transition: opacity 0.3s;
}
.prompter.playing .prompter-bar { opacity: 0.25; }
.prompter.playing .prompter-bar:hover { opacity: 1; }
.prompter-bar .btn { background: #1d1d1d; border-color: #333; color: #eee; }
.prompter-bar .btn.primary { background: var(--accent); border-color: var(--accent); }
.prompter-bar .spacer { flex: 1; }
.prompter-bar .val { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.prompter-stage { position: relative; flex: 1; overflow: hidden; }
.prompter-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; cursor: pointer; }
.prompter-scroll::-webkit-scrollbar { display: none; }
.prompter-scroll.mirror { transform: scaleX(-1); }
.prompter-text { max-width: 1100px; margin: 0 auto; padding: 32vh 6vw 75vh; line-height: 1.45; font-weight: 600; }
.prompter-text p { margin: 0 0 1.1em; white-space: pre-wrap; }
.prompter-text .p-head { font-size: 0.45em; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 1.6em 0 0.4em; }
.prompter-text .p-cue { font-size: 0.5em; color: var(--red); font-weight: 800; letter-spacing: 0.05em; margin: 0 0 1.4em; }
.prompter-text .p-num { color: var(--red); margin-right: 0.4em; }
.prompter-line { position: absolute; left: 0; right: 0; top: 32vh; height: 0; border-top: 2px solid rgba(237, 28, 36, 0.6); pointer-events: none; }
.prompter-line::before { content: "▶"; position: absolute; left: 10px; top: -0.75em; color: rgba(237, 28, 36, 0.85); font-size: 20px; }
.prompter-help { font-size: 12px; color: #777; }
@media (max-width: 760px) { .prompter-help { display: none; } }

/* ---- Narrower windows: row 1 tucks the coins' amounts away (wallet.css) and then drops the wordmark; row 2 tightens
   the tabs and shortens three labels ---- */
.topnav .ns { display: none; }
@media (max-width: 1180px) { .topnav a { padding-inline: 12px; } }
@media (max-width: 1060px) { .topnav .nl { display: none; } .topnav .ns { display: inline; } .topnav a { padding-inline: 10px; } }
@media (max-width: 980px) { .bar .word { display: none; } .bar-left { gap: 12px; } }
@media (min-width: 860px) and (max-width: 920px) { .topnav a { padding-inline: 8px; } .bar-row1 .bar-end { gap: 3px; } }

/* ---- Installed app: no text selection on controls, the update bar, pull down to refresh, shared links ---- */
.btn, .iconbtn, .icon-btn, .topnav, .tabbar, .tabs, .seg, .brand, .chip { -webkit-user-select: none; user-select: none; }
.topnav a, .tabbar a, .brand { -webkit-touch-callout: none; }
.update-bar {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(18px + var(--tabbar-h)); z-index: 70;
  display: flex; align-items: center; gap: 14px; padding: 7px 7px 7px 18px; width: max-content; max-width: calc(100% - 32px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-up);
  font-weight: 600; font-size: 14px; animation: rise .45s var(--spring) both;
}
/* A pull from the top is ours, so the browser's own stretch and glow stay out of it. */
html.pull-ready, html.pull-ready body { overscroll-behavior-y: none; }
.ptr {
  --d: 0px; --turn: 0deg;
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 45; width: 40px; height: 40px; margin-left: -20px;
  display: grid; place-items: center; border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-up); color: var(--muted);
  transform: translateY(var(--d)) scale(calc(.6 + min(var(--d), 64px) / 160px));
}
.ptr svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; rotate: var(--turn); transition: color .2s; }
.ptr.armed, .ptr.busy { color: var(--red); }
.ptr.busy svg { animation: spin .8s linear infinite; }
.ptr.settling { transition: transform .26s var(--ease), opacity .26s; }
@keyframes spin { to { rotate: 360deg; } }

.share-text { font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.share-video {
  position: relative; display: block; width: min(480px, 100%); aspect-ratio: 16 / 9; margin-bottom: var(--gap);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--panel-2);
}
.share-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-video span {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 999px; background: rgba(10, 15, 27, .78); color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.share-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); align-items: start; }
.share-cards .panel { margin: 0; }
.share-stories { display: grid; gap: 8px; margin-top: 12px; }
.share-story {
  display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font: inherit;
  transition: border-color .2s, transform .15s var(--ease);
}
.share-story:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); }
.share-story:active { transform: scale(.98); }
.share-story b { font-weight: 650; line-height: 1.3; }

/* ---- Phones and small tablets: a tab bar at the bottom takes over from the top nav ---- */
@media (max-width: 859px) {
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); --bar-row1-h: 58px; --bar-row2: 0px; --gap: 14px; }
  .topnav, .bar-row2 { display: none; }
  .tabbar { display: grid; }
  .bar-row1 { grid-template-columns: 1fr auto 2fr auto 1fr; }
  .bar-left { gap: 8px; }
  .brand { gap: 9px; }
  .bar .mark { width: 46px; height: 40px; }
  .mk-face { border-radius: 10px; }
  .bar .word { display: flex; height: 14px; }
  .bar .desk-switch > button { padding: 5px 7px; font-size: 11.5px; letter-spacing: .05em; }
  .bar .iconbtn { width: 34px; height: 34px; }
  .bar-row1 .bar-end { gap: 2px; }
  .truth-layout, .two-col { grid-template-columns: minmax(0, 1fr); }
  .day-list {
    position: relative; top: 0; max-height: none; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px;
    scrollbar-width: none; box-shadow: none;
  }
  .day-list::-webkit-scrollbar { display: none; }
  .story-cols { grid-template-columns: minmax(0, 1fr); }
  .story-side { position: static; max-height: none; }
  .story-bar { top: calc(var(--bar-h) + 6px); border-radius: 20px; }
  .day-list { align-items: center; }
  .day-list a { flex: none; align-items: baseline; gap: 8px; padding: 8px 12px; font-size: 13.5px; line-height: 1.25; }
  .day-list .month { flex: none; padding: 0 4px 0 8px; font-size: 10px; white-space: nowrap; }
  .day-list a .ask-q { max-width: 62vw; }
  .map-wrap, .h-pair { grid-template-columns: minmax(0, 1fr); }
  .h-pair .h-arrow { transform: rotate(90deg); }
}
/* Row 1 on phones: the logo, the EN | PT switch, the status dot (only when something needs a look), the four coins and
   six buttons. Where they don't all fit, they step aside in this order: the wordmark, the Mission control wall, the
   about page, the tour (Settings and quick jump reach all three), quick jump, and on the very narrowest phones the
   wiki. Each width is where the next one has to go to keep at least 12px between the switch and what follows it
   (measured again when X's coin joined); the status dot takes 36px, so with it showing each step comes about 38px
   sooner. */
@media (max-width: 745px) { .bar .word { display: none; } }
@media (max-width: 783px) { .bar-row1:has(#health-dot:not([hidden])) .word { display: none; } }
@media (max-width: 539px) { #wall-btn { display: none; } }
@media (max-width: 579px) { .bar-row1:has(#health-dot:not([hidden])) #wall-btn { display: none; } }
@media (max-width: 503px) { #about-btn { display: none; } }
@media (max-width: 539px) { .bar-row1:has(#health-dot:not([hidden])) #about-btn { display: none; } }
@media (max-width: 467px) { #tour-btn { display: none; } }
@media (max-width: 503px) { .bar-row1:has(#health-dot:not([hidden])) #tour-btn { display: none; } }
@media (max-width: 431px) { #qj-btn { display: none; } }
@media (max-width: 467px) { .bar-row1:has(#health-dot:not([hidden])) #qj-btn { display: none; } }
@media (max-width: 367px) { #wiki-btn { display: none; } }
@media (max-width: 401px) { .bar-row1:has(#health-dot:not([hidden])) #wiki-btn { display: none; } }
/* The narrowest phones (under 432px when the status dot shows): everything in row 1 gets a little smaller and the coins
   sit closer, still apart. */
@media (max-width: 395px) {
  .bar-row1 { padding-inline: 12px; }
  .bar .iconbtn { width: 32px; height: 32px; }
  .bar .desk-switch > button { padding-inline: 6px; }
  .bar-row1 .coin-row { gap: 2px; padding: 0 5px; }
}
@media (max-width: 431px) {
  .bar-row1:has(#health-dot:not([hidden])) { padding-inline: 12px; }
  .bar-row1:has(#health-dot:not([hidden])) .iconbtn { width: 32px; height: 32px; }
  .bar-row1:has(#health-dot:not([hidden])) .desk-switch > button { padding-inline: 6px; }
  .bar-row1:has(#health-dot:not([hidden])) .coin-row { gap: 2px; padding: 0 5px; }
}
/* Narrower than any phone sold lately (under 368px with the dot): the logo, the switch and the coins shrink a little
   more, so the four coins still never touch the switch. */
@media (max-width: 333px) {
  .bar .mark { width: 40px; height: 35px; }
  .bar .desk-switch > button { padding-inline: 4px; }
  .bar-row1 .coin-row { gap: 1px; padding: 0 3px; }
  .bar-row1 .coin-face { width: 24px; height: 24px; }
}
@media (max-width: 367px) {
  .bar-row1:has(#health-dot:not([hidden])) .mark { width: 40px; height: 35px; }
  .bar-row1:has(#health-dot:not([hidden])) .desk-switch > button { padding-inline: 4px; }
  .bar-row1:has(#health-dot:not([hidden])) .coin-row { gap: 1px; padding: 0 3px; }
  .bar-row1:has(#health-dot:not([hidden])) .coin-face { width: 24px; height: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .page-head { margin: 14px 0 18px; }
  .page-head .actions { width: 100%; }
  .panel, .story-card { padding: 16px; border-radius: 16px; }
  .story-card { grid-template-columns: minmax(0, 1fr); }
  .rank { text-align: left; font-size: 50px; }
  .story-card.hero .rank { font-size: 72px; }
  .hook { font-size: 22px; }
  .story-card.hero .hook { font-size: 27px; }
  .search-row { flex-wrap: wrap; }
  .search-row input { flex: 1 1 100%; }
  /* 16px stops phones from zooming into a field when it's tapped */
  input[type="text"], input[type="search"], input[type="date"], input[type="number"], textarea, select { font-size: 16px; }
  .idea-row, .swap-row { grid-template-columns: minmax(0, 1fr); }
  .reel-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
  .reel-item img { display: none; }
  .day.pick input { font-size: 16px; width: 140px; }
  .h-thumb { width: 116px; }
  .sb-row { grid-template-columns: auto minmax(0, 1fr); }
  .sb-date { grid-column: 2; }
  .mtable { display: block; overflow-x: auto; }
  .h-counts tbody { display: block; }
  .h-counts tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; border-bottom: 1px solid var(--line); }
  .h-counts th, .h-counts td { border: 0; padding-bottom: 2px; }
  .h-counts td.small { grid-column: 1 / -1; padding: 0 0 8px; }
  .inline-fields label { margin: 2px 0; }
  div.project-row { flex-wrap: wrap; }
  div.project-row > div:first-child { flex-basis: 100%; }
  .outlet { min-width: 0; }
  .coverage li { flex-wrap: wrap; gap: 2px 10px; }
  .modal { place-items: end stretch; padding: 0; }
  .modal-box, .modal-box.narrow {
    width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .seg-clip { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---- Thumbnail pieces (the Publish tab's editor in studio.css, and Shorts) ---- */
#thumb-canvas {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 14px; background: #1b2436; cursor: grab; touch-action: none;
  box-shadow: var(--shadow-up); animation: rise .5s var(--ease) both;
}
#thumb-canvas.dragging { cursor: grabbing; }
.thumb-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 6px 0; max-height: 260px; overflow: auto; padding: 2px; }
.tframe {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--panel-2); cursor: pointer;
  aspect-ratio: 16 / 9; transition: transform .25s var(--ease), border-color .2s;
}
.tframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tframe small { position: absolute; left: 4px; bottom: 3px; font: 600 9.5px/1 var(--mono); color: #fff; text-shadow: 0 1px 3px #000; }
.tframe:hover { transform: scale(1.04); }
.tframe.on { border-color: var(--red); }
.tframe.also { border-color: var(--blue); }
.thumb-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; margin: 10px 0; }
.thumb-row label { margin: 0; }
.thumb-row input[type="range"] { width: 100%; accent-color: var(--red); }
.swatch {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--line); cursor: pointer; padding: 0;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink); }
#thumb-saved .mono { font: 500 11.5px/1.3 var(--mono); word-break: break-all; }
.thumb-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); gap: 14px 12px; margin-top: 8px; }
.fcard { margin: 0; display: grid; gap: 7px; animation: rise .5s var(--ease) both; }
.fcard img, .fcard canvas { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--panel-2); display: block; }
.fcard.mine canvas { box-shadow: 0 0 0 2px var(--red); }
.fcard figcaption { display: grid; gap: 2px; }
.fcard b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcard small { color: var(--muted); font-size: 11.5px; }

/* ---- Shorts (the story's Shorts tab) ---- */
.shorts-opts { max-width: 560px; }
.shorts-opts .thumb-row { grid-template-columns: 86px minmax(0, 1fr); margin: 8px 0; }
.shorts-opts .seg { justify-self: start; }
.sh-frame-note { margin: -2px 0 4px 96px; }
.sh-focus { display: flex; align-items: center; gap: 8px; }
.sh-focus small { color: var(--muted); font-size: 12px; }
.sh-warn { margin: 0 0 12px; padding: 10px 14px 10px 30px; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn-line); font-size: 13.5px; }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 16px; margin-top: 4px; }
.short-card {
  display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border-radius: 20px;
  background: var(--panel-2); border: 1px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms);
}
.short-phone {
  aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #05070c; border: 3px solid #0a0f1b; box-shadow: var(--shadow-up);
  transition: transform .3s var(--ease);
}
.short-phone:hover { transform: translateY(-2px); }
.short-phone video { width: 100%; height: 100%; object-fit: cover; display: block; background: #05070c; }
.short-meta .eyebrow { margin: 2px 0 0; }
.short-meta label { margin: 10px 0 4px; }
.short-meta textarea { min-height: 76px; }
.sh-why { margin: 8px 0 0; }
.sh-out:empty { display: none; }
@media (max-width: 560px) {
  .sh-frame-note { margin-left: 0; }
  .short-card { grid-template-columns: minmax(0, 1fr); }
  .short-phone { width: min(100%, 250px); justify-self: center; }
}

/* ---- Own stories: "Fill it in from my notes" in the story header ---- */
.fill-in {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 16px 0 4px; padding: 14px 18px;
  border-radius: 16px; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  animation: rise .5s var(--ease) both;
}
.fill-in p { margin: 4px 0 0; max-width: 80ch; }
.fill-in .btn { flex: none; }
.fill-in.done { padding: 8px 14px; background: var(--panel-2); border-color: var(--line); }
@media (max-width: 640px) { .fill-in { flex-direction: column; align-items: stretch; } }
#own-notes { width: 100%; margin-bottom: 6px; }

/* ---- Deleting: the Delete button, the toast's Undo, and Projects › Recently deleted ---- */
.crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crumb-end { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.del-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.del-btn:hover:not(:disabled) { color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft); }
.toast-action {
  margin-left: 10px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
}
.toast-action:hover { background: var(--panel-2); }
#trash-panel summary { cursor: pointer; font-weight: 600; }
.trash-list { list-style: none; margin: 10px 0 0; padding: 0; }
.trash-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.trash-list .trash-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .trash-list li { flex-wrap: wrap; } .trash-list .trash-title { flex-basis: 100%; white-space: normal; } }