/* Facthem — directo
 *
 * Follows the Facthem design system (see fact_them_fr/DESIGN.md): dark
 * rose-charcoal palette, squarish 6px corners, Inter, verdict colours as the
 * only saturated colours in the UI, claim cards with a *top* border in the
 * verdict colour. Live-only components (player, speaker rail, pipeline rail)
 * are built from the same tokens rather than inventing a second language.
 */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --c-bg: #0d0d0d;
  --c-surface: #141414;
  --c-surface-2: #1c1c1c;
  --c-border: #2a2424;
  --c-text: #e4e0e0;
  --c-text-muted: #9a8e8e;
  --c-accent: #c8607a;
  --c-accent-dim: rgba(200, 96, 122, .12);

  --c-verdadero: #3da966;
  --c-falso: #c43e5e;
  --c-enganoso: #b07825;
  --c-parcial: #3890bc;
  --c-nv: #5c4a52;

  --c-verdadero-bg: rgba(61, 169, 102, .07);
  --c-falso-bg: rgba(196, 62, 94, .08);
  --c-enganoso-bg: rgba(176, 120, 37, .07);
  --c-parcial-bg: rgba(56, 144, 188, .07);
  --c-nv-bg: rgba(255, 255, 255, .02);

  --radius: 6px;
  --radius-sm: 4px;
  --radius-xs: 2px;
  --header-h: 56px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .6);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .7);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-accent); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  background: rgba(13, 13, 13, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  min-height: var(--header-h);
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.brand {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #f0b8c4 0%, #c8607a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-tag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.header-spacer { flex: 1; }

.session-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text);
}

/* ── On-air indicator ─────────────────────────────────────────────────────── */
.onair {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-falso);
  border: 1px solid rgba(196, 62, 94, .4);
  background: rgba(196, 62, 94, .12);
  border-radius: var(--radius-xs);
  padding: .25rem .55rem;
}
.onair[hidden] { display: none; }
.onair::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

/* ── Stage chips ──────────────────────────────────────────────────────────── */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, .04);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.chip.on { color: var(--c-verdadero); border-color: rgba(61, 169, 102, .35); background: var(--c-verdadero-bg); }
.chip.model { color: var(--c-accent); border-color: rgba(200, 96, 122, .4); background: var(--c-accent-dim); }
.chip.off { opacity: .4; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 1.25rem;
  padding: 1.25rem 1.75rem 2.5rem;
  align-items: start;
  flex: 1;
}
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

.col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.panel-title .count { margin-left: auto; color: var(--c-text); font-weight: 800; }

summary.panel-title { cursor: pointer; list-style: none; }
summary.panel-title::-webkit-details-marker { display: none; }
summary.panel-title::after { content: '▾'; margin-left: auto; }
details[open] summary.panel-title::after { content: '▴'; }

.subhead {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-muted); padding: 0 1rem .5rem;
}

.hint { font-size: .68rem; line-height: 1.5; color: var(--c-text-muted); margin-top: .5rem; }

/* ── Verdict summary: one stacked bar ─────────────────────────────────────── */
.summary-bar {
  padding: .75rem 0 .85rem;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: .25rem;
}
.sb-track {
  display: flex; height: 5px;
  border-radius: 3px; overflow: hidden;
  background: var(--c-border);
}
.sb-seg { display: block; min-width: 3px; }
.sb-legend { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin-top: .6rem; }
.sb-key {
  font-size: .68rem; color: var(--c-text-muted);
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: none; padding: 0; border: 0;   /* never inherit the segment fill */
}
.sb-key .dot { width: 6px; height: 6px; border-radius: 50%; align-self: center; }
.sb-key b { color: var(--c-text); font-weight: 700; }

/* Fills only — the legend takes its colour from the dot, not from the key. */
.sb-seg.sb-verdadero, .sb-key .dot.sb-verdadero { background: var(--c-verdadero); }
.sb-seg.sb-parcial,   .sb-key .dot.sb-parcial   { background: var(--c-parcial); }
.sb-seg.sb-enganoso,  .sb-key .dot.sb-enganoso  { background: var(--c-enganoso); }
.sb-seg.sb-falso,     .sb-key .dot.sb-falso     { background: var(--c-falso); }
.sb-seg.sb-nv,        .sb-key .dot.sb-nv        { background: var(--c-nv); }

/* ── Player ───────────────────────────────────────────────────────────────── */
.player-wrap { position: relative; background: #000; }
/* height:auto beats the iframe's own height="360" attribute, so the box follows 16:9. */
video, #yt-player { width: 100%; height: auto; display: block; background: #000; aspect-ratio: 16/9; }
#yt-player iframe { width: 100%; height: 100%; display: block; }
video[hidden], #yt-player[hidden] { display: none; }

#play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 13, .72);
  backdrop-filter: blur(2px);
  border: 0;
  color: var(--c-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
#play-overlay[hidden] { display: none; }

/* ── Now speaking ─────────────────────────────────────────────────────────── */
.now {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--c-border);
}
.now-avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-2);
  border: 2px solid var(--c-border);
}
.now-avatar.live { border-color: var(--c-accent); }
.now-name { font-size: .92rem; font-weight: 700; }
.now-how { font-size: .7rem; color: var(--c-text-muted); }

.clocks {
  margin-left: auto;
  text-align: right;
  font-size: .66rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  white-space: nowrap;
}
.clocks strong { color: var(--c-text); font-weight: 700; }

/* ── Speaker rail ─────────────────────────────────────────────────────────── */
.rail { display: flex; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.person {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .65rem .3rem .3rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  font-size: .78rem;
}
.person img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.person.active { border-color: var(--c-accent); background: var(--c-accent-dim); }
.person small { display: block; font-size: .62rem; color: var(--c-text-muted); }

/* ── Caption ticker ───────────────────────────────────────────────────────── */
.caption {
  padding: .8rem 1rem 1rem;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--c-text-muted);
  min-height: 4.2em;
  font-style: italic;
}
.caption b { color: var(--c-text); font-weight: 500; font-style: normal; }

/* ── Controls ─────────────────────────────────────────────────────────────── */
.controls { display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1rem 1rem; }
.ctl-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ctl-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-muted); white-space: nowrap; min-width: 7.5rem;
}
.ctl-label b { color: var(--c-text); font-weight: 800; }
.controls input[type=number] { width: 5.5rem; font: inherit; font-size: .85rem; padding: .35rem .5rem; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); }
.ctl-buttons .toggles { margin-left: auto; display: inline-flex; gap: 1rem; }
.toggle {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted);
}
.toggle input { accent-color: var(--c-accent); margin: 0; }
.ctl-notes:empty, .ctl-notes:not(:has(:not([hidden]))) { display: none; }
.note { font-size: .7rem; color: var(--c-text-muted); line-height: 1.4; }
.note.warn { color: #c9a94a; }
button.btn.admin { border-color: rgba(200, 96, 122, .5); color: var(--c-accent); }
button.btn.admin.on { background: var(--c-accent-dim); }
.btn-row { display: flex; align-items: flex-end; gap: .5rem; }
button.btn {
  font-family: inherit; font-size: .8rem; font-weight: 600;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
button.btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
button.btn.primary { background: var(--c-accent-dim); border-color: rgba(200, 96, 122, .45); color: var(--c-accent); }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .6rem; padding: 0 1rem 1rem; }
.stat {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: .6rem .5rem;
  text-align: center;
}
.stat b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.stat small { font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-muted); }

/* ── Cost ─────────────────────────────────────────────────────────────────── */
.cost { padding: 0 1rem 1rem; }
.cost-total {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(135deg, #f0b8c4 0%, #c8607a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cost-detail { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.cost-detail span {
  font-size: .62rem; color: var(--c-text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  padding: .15rem .4rem;
}

/* ── Pipeline trace ───────────────────────────────────────────────────────── */
.trace {
  max-height: 190px; overflow-y: auto;
  padding: .6rem 1rem;
  font: .68rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c-text-muted);
}
.trace .t { color: #6b5b60; }
.trace .k { color: var(--c-accent); }

/* ── Claim feed — the point of the page ─────────────────────────────────────
   No outer panel: a card inside a card inside a card read as clutter, and the
   cards already carry their own border and verdict colour. The column is just
   a heading, a summary bar and a stack of cards on the page background. */
.feed-panel {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.feed-panel > .panel-title {
  font-size: .78rem; color: var(--c-text); letter-spacing: .06em;
  border-bottom: 0; padding-left: 0; padding-right: 0;
}
.feed-panel > .panel-title .count {
  background: var(--c-accent-dim); color: var(--c-accent);
  border: 1px solid rgba(200, 96, 122, .4); border-radius: var(--radius-xs);
  padding: .1rem .45rem; font-size: .75rem;
}

.feed {
  max-height: calc(100vh - var(--header-h) - 9rem);
  overflow-y: auto;
  padding: .25rem 0 .5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  /* Room for the share menu to open without being clipped by the scroller. */
  scrollbar-gutter: stable;
}

/* Unverifiable-and-unsure claims: kept, but folded away so they don't bury the
   resolved ones. Same card styling inside, quieter container. */
.weak-drawer {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  margin-top: .75rem;
}
.weak-drawer > summary {
  list-style: none; cursor: pointer;
  padding: .7rem 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-muted);
  display: flex; align-items: center; gap: .5rem;
}
.weak-drawer > summary::-webkit-details-marker { display: none; }
.weak-drawer > summary::after { content: '▾'; margin-left: auto; }
.weak-drawer[open] > summary::after { content: '▴'; }
.weak-drawer > summary:hover { color: var(--c-text); }
.weak-count {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--c-border);
  border-radius: var(--radius-xs); padding: .05rem .35rem; color: var(--c-text);
}
.weak-list { max-height: 40vh; padding: 0 .75rem .75rem; }
.weak-list .claim-card { opacity: .72; }

/* Diagnostics are secondary by construction: collapsed, and visually recessive
   even when open, so they never compete with the claims. */
.diagnostics { background: transparent; }
.diagnostics[open] { background: var(--c-surface); }
.diagnostics > summary.panel-title { color: var(--c-text-muted); }
.feed-empty {
  color: var(--c-text-muted);
  font-size: .82rem;
  text-align: center;
  padding: 2.5rem 1rem;
  font-style: italic;
}

/* ── Claim card (Facthem design system) ───────────────────────────────────── */
.claim-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-nv);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .1s, opacity .3s;
  animation: enter .3s ease;
}
@keyframes enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.claim-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.claim-card[data-state="forming"] { border-style: dashed; border-top-style: solid; opacity: .68; }
.claim-card[data-state="pending"] { border-top-color: var(--c-accent); background: linear-gradient(180deg, var(--c-accent-dim) 0%, var(--c-surface) 35%); }
.claim-card[data-resultado="verdadero"] { border-top-color: var(--c-verdadero); background: linear-gradient(180deg, var(--c-verdadero-bg) 0%, var(--c-surface) 35%); }
.claim-card[data-resultado="falso"]     { border-top-color: var(--c-falso);     background: linear-gradient(180deg, var(--c-falso-bg) 0%, var(--c-surface) 35%); }
.claim-card[data-resultado="enganoso"]  { border-top-color: var(--c-enganoso);  background: linear-gradient(180deg, var(--c-enganoso-bg) 0%, var(--c-surface) 35%); }
.claim-card[data-resultado="parcial"]   { border-top-color: var(--c-parcial);   background: linear-gradient(180deg, var(--c-parcial-bg) 0%, var(--c-surface) 35%); }
.claim-card[data-resultado="nv"]        { border-top-color: var(--c-nv);        background: linear-gradient(180deg, var(--c-nv-bg) 0%, var(--c-surface) 35%); }

.claim-header { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.claim-header img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--c-surface-2); }
.politician-name { font-weight: 700; font-size: .85rem; }
.politician-name.unknown { color: var(--c-text-muted); font-style: italic; }
/* The moment in the debate the claim was made — and a control that seeks there. */
.claim-at {
  font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--c-text-muted);
  border: 1px solid var(--c-border); border-radius: var(--radius-xs);
  padding: .12rem .4rem; cursor: pointer; background: none; font-family: inherit;
  display: inline-flex; align-items: center; gap: .25rem;
}
.claim-at .clock-icon { font-size: .8em; opacity: .8; }
.claim-at:hover { color: var(--c-accent); border-color: var(--c-accent); }

.resultado-badge {
  margin-left: auto;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: .28rem .6rem; border-radius: var(--radius-xs);
  text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.resultado-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.resultado-verdadero { background: rgba(61, 169, 102, .15); color: var(--c-verdadero); border: 1px solid rgba(61, 169, 102, .4); }
.resultado-falso     { background: rgba(196, 62, 94, .15);  color: var(--c-falso);     border: 1px solid rgba(196, 62, 94, .4); }
.resultado-enganoso  { background: rgba(176, 120, 37, .15); color: var(--c-enganoso);  border: 1px solid rgba(176, 120, 37, .4); }
.resultado-parcial   { background: rgba(56, 144, 188, .15); color: var(--c-parcial);   border: 1px solid rgba(56, 144, 188, .4); }
.resultado-nv        { background: rgba(92, 74, 82, .2);    color: #8a7880;            border: 1px solid rgba(92, 74, 82, .35); }
.resultado-pending   { background: var(--c-accent-dim);     color: var(--c-accent);    border: 1px solid rgba(200, 96, 122, .4); }

/* A card exists from the moment the claim is detected — verification takes tens
   of seconds and lands later. The badge is a real spinner, not the static dot
   the finished verdicts use, so "still working" is unmistakable at a glance. */
.resultado-pending::before {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid rgba(200, 96, 122, .3);
  border-top-color: var(--c-accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .resultado-pending::before { animation: pulse 1.4s ease-in-out infinite; }
  .onair::before { animation: none; }
}
.resultado-forming   { background: rgba(255, 255, 255, .04); color: var(--c-text-muted); border: 1px solid var(--c-border); }

/* The claim is the card's content, not a quote pinned inside it — a bordered,
   shaded inset made every card look like two nested boxes. */
.claim-text {
  font-size: .89rem; line-height: 1.6; color: var(--c-text);
}

.claim-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.claim-tags span {
  font-size: .62rem; color: var(--c-text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  padding: .15rem .4rem;
}
.claim-tags span b { color: var(--c-text); }
/* A value the extractor returned that is not in the pipeline's vocabulary.
   Visible drift beats a category that silently looks official. */
.claim-tags span.off-vocab { border-style: dashed; opacity: .75; }

/* Collapsed by default: the feed stays scannable while a debate is running,
   and the full verification — reasoning, caveats, sources — is one click away. */
.claim-actions { display: flex; align-items: center; gap: .5rem; }
.detail-toggle {
  font-family: inherit;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-muted);
  background: none; border: 1px solid var(--c-border); border-radius: var(--radius-xs);
  padding: .28rem .55rem; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.detail-toggle::after { content: ' ▾'; }
/* Reserved row while the claim is being verified: same box as the real
   button, so the card does not grow when the verdict lands. */
.detail-toggle.placeholder { visibility: hidden; pointer-events: none; }
.detail-toggle[aria-expanded="true"]::after { content: ' ▴'; }
.detail-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }
.verdict-detail[hidden] { display: none; }
.verdict { margin-top: .7rem; }
.verdict-headline { font-size: .84rem; line-height: 1.6; }

.verdict-detail {
  margin-top: .55rem; padding: .75rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.verdict ul { margin: .5rem 0 0 1.1rem; font-size: .78rem; color: var(--c-text-muted); }
.sources { margin-top: .6rem; display: flex; flex-direction: column; gap: .25rem; }
.sources a { font-size: .74rem; text-decoration: none; }
.sources a:hover { text-decoration: underline; }
.sources a::before { content: '↗ '; color: var(--c-text-muted); }
/* Source tier: a primary official statistic and a paper summarising it are not
   the same evidence, so the tier is shown, not just the link. */
.src-tier {
  display: inline-block; margin-right: .35rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .08rem .3rem; border-radius: var(--radius-xs);
  border: 1px solid var(--c-border); background: rgba(255, 255, 255, .04);
  color: var(--c-text-muted); vertical-align: 1px;
}
.src-primaria  { color: var(--c-verdadero); border-color: rgba(61, 169, 102, .4); }
.src-academica { color: var(--c-parcial);   border-color: rgba(56, 144, 188, .4); }

.confidence { margin-top: .7rem; }
.confidence-track { height: 4px; background: var(--c-border); border-radius: var(--radius-xs); overflow: hidden; }
.confidence-fill { height: 100%; background: var(--c-accent); }
.claim-foot {
  margin-top: .5rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-muted);
}

/* ── Share (matches the rest of Facthem) ──────────────────────────────────── */
.share-wrapper { position: relative; margin-left: auto; display: inline-flex; }
.share-btn {
  background: none; border: 1px solid var(--c-border); border-radius: var(--radius-xs);
  padding: .22rem .4rem; color: var(--c-text-muted); cursor: pointer;
  display: flex; align-items: center; font-family: inherit;
  transition: border-color .12s, color .12s;
}
.share-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.share-menu {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 150px; z-index: 200; overflow: hidden;
  display: flex; flex-direction: column;
}
.share-menu[hidden] { display: none; }
.share-option {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .8rem; font: 500 .78rem/1.4 inherit; font-family: inherit;
  letter-spacing: 0; text-transform: none;
  color: var(--c-text); background: none; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .1s;
}
.share-option:hover { background: rgba(255, 255, 255, .06); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  padding: 1rem 1.75rem;
  color: var(--c-text-muted);
  font-size: .72rem;
}

/* ── Debug: text processing (checkbox-gated) ─────────────────────────────── */
.dbg-toggle { margin-left: auto; font-size: .7rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--c-text-muted); cursor: pointer; }
.subhead { display: flex; align-items: center; gap: .5rem; }
.dbg { padding: 0 1rem 1rem; font-size: .78rem; }
.dbg-win { border-left: 2px solid var(--c-accent); padding: .35rem .6rem; margin: .5rem 0; background: rgba(255,255,255,.03); }
.dbg-win.skipped { border-left-color: #6b5b60; opacity: .8; }
.dbg-win.pending { border-left-color: #b9a44c; }
.dbg-win .meta { color: var(--c-text-muted); font-size: .68rem; margin-bottom: .2rem; }
.dbg-win .text { white-space: pre-wrap; line-height: 1.4; }
.dbg-win .result { margin-top: .3rem; font-weight: 600; }
.dbg-win .result.none { color: var(--c-text-muted); font-weight: 500; }
.dbg-win ul { margin: .2rem 0 0 1rem; padding: 0; }
.dbg-current { margin: 0 0 .8rem; padding: .5rem .7rem; border: 1px dashed var(--c-accent); border-radius: 6px; font-size: .78rem; }
.dbg-current .meta { color: var(--c-text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.dbg-current .text { white-space: pre-wrap; line-height: 1.4; max-height: 9rem; overflow-y: auto; }
.dbg-current .result { margin-top: .3rem; font-weight: 600; }
.dbg-current .result.none { color: var(--c-text-muted); font-weight: 500; }
.claim-card.future { opacity: .35; position: relative; }
.claim-card.future::before { content: 'más adelante en la emisión'; position: absolute; top: .4rem; right: .6rem; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.party { display: inline-block; vertical-align: middle; margin-left: .25rem; padding: .05rem .38rem; border-radius: 999px; border: 1px solid var(--c-border); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
/* ── No layout jitter from ticking numbers ────────────────────────────────
   Every number that updates on a timer uses fixed-width digits, and the
   blocks that hold them reserve their width, so nothing beside them moves. */
.clocks, .resultado-badge, .claim-at, .stat b, .cost-total, .cost-detail, .note, #delay-val, .now-how, .claim-foot, .trace {
  font-variant-numeric: tabular-nums;
}
.clocks { min-width: 10.5rem; flex: none; }
.resultado-badge { min-width: 9.5rem; text-align: center; box-sizing: border-box; }
.claim-at { min-width: 4.6rem; justify-content: center; }
.now > div:not(.clocks) { flex: 1; min-width: 0; }

/* The hidden attribute must win over every display rule (flex/grid/inline-flex). */
[hidden] { display: none !important; }
a.brand { text-decoration: none; color: inherit; }
a.brand:hover { color: var(--c-accent); }

/* ── Polish pass (2026-09-08) ─────────────────────────────────────────────
   Same palette and type; fixes the things that read as sloppy: verdict
   badges of different sizes, the default scrollbar, uneven card headers,
   chips and avatars at slightly different sizes. */

/* Thin, quiet scrollbars everywhere something scrolls. */
.feed, .trace, .dbg, .dbg-current .text, .weak-list, html {
  scrollbar-width: thin;
  scrollbar-color: #3a3236 transparent;
}
.feed::-webkit-scrollbar, .trace::-webkit-scrollbar, .dbg::-webkit-scrollbar, .dbg-current .text::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-track, .trace::-webkit-scrollbar-track { background: transparent; }
.feed::-webkit-scrollbar-thumb, .trace::-webkit-scrollbar-thumb { background: #3a3236; border-radius: 3px; }
.feed::-webkit-scrollbar-thumb:hover { background: #4a4046; }
.feed { padding-right: .35rem; }

/* Card header: one line, everything vertically centred, the badge one size. */
.claim-header { align-items: center; flex-wrap: nowrap; gap: .55rem; margin-bottom: .7rem; }
.claim-header img { width: 28px; height: 28px; flex: none; }
.politician-name {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
}
.claim-at { flex: none; height: 1.5rem; padding: 0 .5rem; min-width: 4.8rem; justify-content: center; }
.resultado-badge {
  flex: none; width: 12rem; height: 1.6rem; padding: 0 .5rem; margin-left: auto;
  justify-content: center; box-sizing: border-box;
}
.resultado-badge::before { flex: none; }
.claim-text { line-height: 1.5; }
.claim-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.claim-tags span { line-height: 1.3; }
.claim-actions { display: flex; align-items: center; gap: .5rem; }
.claim-actions .share-wrapper { margin-left: auto; }

/* Speaker panel and rail: consistent avatar sizes and chip placement. */
.now { align-items: center; }
.now-avatar { width: 44px; height: 44px; flex: none; }
.now-name { display: flex; align-items: center; gap: .35rem; line-height: 1.2; }
.person { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; box-sizing: border-box; }
.person img { flex: none; }
.person > div { display: flex; flex-direction: column; line-height: 1.25; }
.person > div > .party { margin-left: 0; margin-top: .05rem; align-self: flex-start; }
.party { line-height: 1.2; }

/* Panel headers and the summary bar line up with the cards below them. */
.feed-panel > .panel-title { align-items: center; }
.summary-bar { margin-bottom: .9rem; }
.sb-legend { align-items: center; }

/* Controls: buttons the same height, toggles aligned with them. */
.ctl-buttons { align-items: center; }
button.btn { height: 2.2rem; display: inline-flex; align-items: center; box-sizing: border-box; }
.toggle { height: 2.2rem; }

/* Diagnostics stats: one row height, no wrapping surprises. */
.stat { display: flex; flex-direction: column; justify-content: center; min-height: 4.4rem; box-sizing: border-box; }
.stat small { line-height: 1.25; }

/* Rail: one line per person — avatar, short name, party. The highlighted chip is the one speaking. */
.rail { gap: .4rem; padding: .6rem 1rem; }
.person { min-height: 0; padding: .3rem .6rem .3rem .35rem; gap: .45rem; border-radius: 999px; }
.person img { width: 22px; height: 22px; }
.person-name { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.person .party { margin-left: 0; }
.person small { display: none; }

/* Pause notice: the transcript box becomes the message, for everyone. */
.caption.paused {
  font-size: 1.05rem; line-height: 1.5; font-style: normal; font-weight: 600;
  color: var(--c-text); text-align: center; padding: 1.4rem 1rem;
  background: var(--c-surface-2);
}
.onair.paused { color: #c9a94a; border-color: rgba(201, 169, 74, .5); }
.onair.paused::before { background: #c9a94a; animation: none; }
.rail { flex-wrap: nowrap; overflow: hidden; }

/* ── Verification detail: three labelled blocks and one footer ───────────── */
.verdict-detail { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--c-border); }
.vd + .vd { margin-top: .8rem; }
.vd h4 {
  margin: 0 0 .3rem; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-muted); display: flex; align-items: center; gap: .5rem;
}
.vd-period { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--c-text); font-size: .66rem;
  padding: .05rem .4rem; border: 1px solid var(--c-border); border-radius: 999px; }
.verdict-headline { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--c-text); }
.vd ul { margin: 0 0 0 1rem; padding: 0; font-size: .78rem; line-height: 1.5; color: var(--c-text-muted); }
.vd ul li + li { margin-top: .2rem; }
.sources { margin-top: 0; gap: .35rem; }
.sources a.src { display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem; align-items: start; font-size: .76rem; text-decoration: none; color: var(--c-text); }
.sources a.src::before { content: none; }
.sources a.src:hover b { text-decoration: underline; color: var(--c-accent); }
.sources .src-tier { width: 5.6rem; box-sizing: border-box; text-align: center; margin: 0; vertical-align: 0; padding: .14rem .3rem; }
.sources .src-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sources .src-body b { font-weight: 600; }
.sources .src-body small { font-size: .7rem; line-height: 1.4; color: var(--c-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.claim-foot { display: flex; align-items: center; gap: 1.1rem; margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--c-border);
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.claim-foot .confidence { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.claim-foot .confidence-track { display: inline-block; width: 6rem; height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; }
.claim-foot .confidence-fill { display: block; height: 100%; background: var(--c-accent); }

/* ── Fixed-height transcript boxes: text changes must not move the layout ── */
.caption {
  height: 8.2rem; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.caption.paused { justify-content: center; }
.dbg-current { height: 11.5rem; display: flex; flex-direction: column; box-sizing: border-box; }
.dbg-current .text { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.dbg-current .result { flex: none; }

/* ── Motion pass (2026-09-09) ──────────────────────────────────────────────
   Motion tells the viewer *what just changed* on a page where things change
   on their own: a claim arriving, a verdict landing, the speaker switching,
   the tally moving. Every animation is short (≤ 500 ms), runs once, uses the
   existing palette, and is switched off under prefers-reduced-motion. */

.claim-card { --vc: var(--c-nv); --vc-soft: var(--c-nv-bg); }
.claim-card[data-state="pending"]        { --vc: var(--c-accent);    --vc-soft: var(--c-accent-dim); }
.claim-card[data-resultado="verdadero"]  { --vc: var(--c-verdadero); --vc-soft: rgba(61, 169, 102, .13); }
.claim-card[data-resultado="falso"]      { --vc: var(--c-falso);     --vc-soft: rgba(196, 62, 94, .14); }
.claim-card[data-resultado="enganoso"]   { --vc: var(--c-enganoso);  --vc-soft: rgba(176, 120, 37, .13); }
.claim-card[data-resultado="parcial"]    { --vc: var(--c-parcial);   --vc-soft: rgba(56, 144, 188, .13); }

/* Expand/collapse of the full verification: a height tween instead of a
   jump. `hidden` is no longer used on the panel; `.open` is. */
.verdict-detail {
  margin: 0; padding: 0; border: 0;
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s .32s;
}
.verdict-detail.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
.vd-inner { overflow: hidden; min-height: 0; }
.vd-pad { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--c-border); }

/* The confidence bar fills when the panel opens, not before. */
.claim-foot .confidence-fill { transform-origin: left; transform: scaleX(0); transition: transform .55s .12s cubic-bezier(.2, .8, .2, 1); }
.verdict-detail.open .confidence-fill { transform: scaleX(1); }

/* Press feedback on every clickable control. */
button.btn, .detail-toggle, .claim-at, .share-btn, .share-option, .feed-new { transition: transform .08s ease, color .12s, border-color .12s, background .12s; }
button.btn:active, .detail-toggle:active, .claim-at:active, .share-btn:active, .feed-new:active { transform: scale(.96); }
.claim-at:hover .clock-icon { transform: rotate(-20deg); }
.claim-at .clock-icon { display: inline-block; transition: transform .2s ease; }

/* Rail chips: colour changes tween instead of snapping. */
.person { transition: border-color .25s ease, background .25s ease; }

/* Verdict tally: segments grow into place, a count that changes bumps. */
.sb-seg { transition: flex-grow .6s cubic-bezier(.2, .8, .2, 1); }
.sb-seg.empty { min-width: 0; }
.sb-key[hidden] { display: none; }

/* "New claims above" pill: shown when a card lands while the feed is
   scrolled down, so nothing arrives unseen. */
.feed-new {
  position: sticky; top: .2rem; z-index: 3; align-self: center;
  font: 700 .66rem/1 inherit; font-family: inherit; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent); background: var(--c-surface-2);
  border: 1px solid rgba(200, 96, 122, .5); border-radius: 999px;
  padding: .45rem .8rem; cursor: pointer; box-shadow: var(--shadow-md);
}
.feed-new b { color: var(--c-text); }
.feed-new:hover { background: var(--c-accent-dim); }

@media (prefers-reduced-motion: no-preference) {
  /* Arrival: the card drops in and its top edge glows for a moment. */
  /* The entrance itself is scripted (growIn); the glow waits for it. */
  .claim-card { animation: card-glow 2.6s ease-out .65s backwards; }
  @keyframes card-glow { 0% { box-shadow: 0 4px 28px var(--vc-soft); } 100% { box-shadow: var(--shadow); } }

  /* In flight: a light travels along the top edge while the verifier works. */
  .claim-card[data-state="pending"]::after {
    content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
    background: linear-gradient(90deg, transparent 0 30%, #f0b8c4 50%, transparent 70% 100%);
    background-size: 300% 100%;
    animation: scan 1.8s linear infinite;
    pointer-events: none;
  }
  @keyframes scan { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  /* Verdict lands: the top edge sweeps in the verdict colour, the badge
     stamps, the card flashes once, the actions row rises into place. */
  .claim-card.reveal::after {
    content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
    background: var(--vc); transform-origin: left;
    animation: sweep .5s cubic-bezier(.2, .8, .2, 1) both, fade-out .4s .7s ease both;
    pointer-events: none;
  }
  /* Same first two names as the base rule, so adding .reveal mid-entrance
     keeps those animations running instead of restarting them. */
  .claim-card.reveal { animation: card-glow 2.6s ease-out .65s backwards, card-flash 1.4s ease-out; }
  .claim-card.reveal .resultado-badge { animation: badge-pop .55s cubic-bezier(.3, .7, .2, 1); }
  @keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .claim-card.reveal::after { animation-duration: .8s, .6s; animation-delay: 0s, 1s; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes card-flash { 0% { box-shadow: inset 0 0 0 100vmax var(--vc-soft), 0 0 0 1px var(--vc); } 100% { box-shadow: var(--shadow); } }
  @keyframes badge-pop { 0% { transform: scale(.88); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* Captions: the newest chunk lands word by word (as if being spoken), the
     previous one settles from bright to muted; older text is just text. */
  .caption b.fresh .w { display: inline-block; animation: word-in .38s ease both; animation-delay: calc(var(--i) * 28ms); }
  @keyframes word-in { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
  .caption .settling { animation: settle .9s ease both; }
  @keyframes settle { from { color: var(--c-text); } to { color: var(--c-text-muted); } }

  /* Speaker change: the block washes accent for a beat, the avatar scales in
     with a ring, name and source slide in, the rail chip pings. */
  .now.swap { animation: now-wash .9s ease-out; }
  @keyframes now-wash { 0% { box-shadow: inset 3px 0 0 var(--c-accent), inset 0 0 0 100vmax var(--c-accent-dim); } 100% { box-shadow: inset 0 0 0 var(--c-accent), inset 0 0 0 100vmax transparent; } }
  .now.swap .now-avatar { animation: avatar-in .5s cubic-bezier(.2, 1.2, .4, 1); }
  .now.swap .now-name, .now.swap .now-how { animation: slide-in .35s ease both; }
  .now.swap .now-how { animation-delay: .06s; }
  @keyframes avatar-in { 0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(200, 96, 122, .7); } 60% { transform: scale(1.04); } 100% { transform: none; box-shadow: 0 0 0 10px transparent; } }
  @keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  .person.just { animation: ring .8s ease-out; }
  .person.flip-new { animation: chip-in .3s ease; }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(200, 96, 122, .65); } 100% { box-shadow: 0 0 0 10px transparent; } }
  @keyframes chip-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

  /* Counters bump when they change. */
  .bump { animation: bump .4s cubic-bezier(.2, 1.4, .4, 1); display: inline-block; }
  @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

  /* On air: a beacon, not a blink. */
  .onair::before { animation: beacon 1.8s ease-out infinite; }
  @keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(196, 62, 94, .6); opacity: 1; } 70% { box-shadow: 0 0 0 7px transparent; opacity: 1; } 100% { box-shadow: 0 0 0 7px transparent; opacity: 1; } }

  /* Share menu pops from its corner; the pill drops in. */
  .share-menu { transform-origin: bottom right; animation: pop .16s cubic-bezier(.2, .9, .3, 1.2); }
  .feed-new { animation: pop .2s cubic-bezier(.2, .9, .3, 1.2); transform-origin: top center; }
  @keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .claim-card, .verdict, .share-menu, .feed-new, .person { animation: none; }
  .claim-card { opacity: 1; }
  .verdict-detail, .sb-seg, .confidence-fill, .person, button.btn, .claim-at .clock-icon { transition: none; }
  .claim-foot .confidence-fill { transform: none; }
}

/* ── Unverifiable claims: leave visibly, land visibly ─────────────────────── */
.nv-note {
  margin: 0 0 .6rem; padding: .45rem .6rem;
  font-size: .72rem; line-height: 1.45; color: var(--c-text-muted);
  border: 1px dashed var(--c-border); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}
.claim-card[data-resultado="nv"] .resultado-badge { color: #a89aa0; border-color: rgba(168, 154, 160, .45); }
.weak-drawer { transition: border-color .3s ease, box-shadow .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes drawer-received {
    0% { border-color: rgba(200, 96, 122, .6); box-shadow: 0 4px 24px var(--c-accent-dim); }
    100% { border-color: var(--c-border); box-shadow: none; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .weak-drawer.received { animation: drawer-received 2s ease-out; }
  @keyframes drawer-catch { 0% { transform: none; } 35% { transform: translateY(4px); } 100% { transform: none; } }
}

/* ── Claim time: plain text after the name, not a boxed control ─────────── */
.claim-at {
  border: 0; background: none; padding: 0; height: auto; min-width: 0;
  font-size: .7rem; color: var(--c-text-muted); letter-spacing: .02em;
  text-decoration: underline transparent; text-underline-offset: .2em;
  transition: color .15s, text-decoration-color .15s;
}
.claim-at .clock-icon { display: none; }
.claim-at:hover { color: var(--c-accent); border: 0; text-decoration-color: var(--c-accent); }

/* The feed animates heights above the viewport; scroll anchoring would
   re-adjust scrollTop every frame and make the push stutter. */
.feed { overflow-anchor: none; }

/* While the page rebuilds from history nothing animates or transitions;
   `settling` is removed by the script once the replay has landed. */
body.settling *, body.settling *::before, body.settling *::after { animation: none !important; transition: none !important; }

/* Admin: claims the pipeline has found but the viewer clock has not reached
   yet — visible, quiet, with the time until they surface. */
body.admin .claim-card.future { opacity: .55; }
body.admin .claim-card.future::before { content: 'en verificación · sale en ' attr(data-eta); }

/* ── Mobile (≤ 760px): one column, in reading order ────────────────────────
   Video edge to edge with the speaker under it, no transcript, the claims
   right below on the page's own scroll, the unverifiable ones last. */
@media (max-width: 760px) {
  .site-header { padding: 0 .9rem; gap: .6rem; min-height: 48px; }
  .site-header .session-title { flex-basis: 100%; order: 5; font-size: .74rem; padding-bottom: .4rem; }
  .layout { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; padding: 0 0 2rem; }
  /* Video and speaker stay on screen while the claims scroll underneath. */
  .site-header { position: static; }
  body:not(.admin) .col { position: sticky; top: 0; z-index: 5; }
  body:not(.admin) .col > .panel { overflow: visible; }
  .col, .feed-panel { gap: 0; width: 100%; min-width: 0; max-width: 100%; }
  .col > .panel { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }

  /* Video + speaker only. The rail and the transcript need a bigger screen. */
  .rail, .caption { display: none !important; }
  .now { padding: .65rem .9rem; gap: .65rem; }
  .now-avatar { width: 38px; height: 38px; }
  .now-name { font-size: .88rem; }
  .clocks { min-width: 0; font-size: .62rem; }

  /* Claims: no inner scroller — the page scrolls. */
  .feed-panel { padding: 0 .75rem; }
  .feed-panel > .panel-title { padding: .6rem 0 .45rem; }
  .summary-bar { padding: .4rem 0 .6rem; }
  .feed { max-height: none; overflow: visible; padding: 0; gap: .6rem; }
  .feed-new { display: none !important; }

  .weak-drawer { margin: .9rem 0 0; }
  .weak-list { padding: 0 .5rem .5rem; }

  .claim-card { padding: .85rem .9rem; }
  .claim-header { gap: .45rem; }
  .claim-header img { width: 24px; height: 24px; }
  .politician-name { font-size: .8rem; }
  .claim-header .party { display: none; }   /* no room next to the badge; the speaker block shows it */
  .resultado-badge { width: auto; min-width: 0; padding: 0 .5rem; height: 1.5rem; font-size: .58rem; }
  .claim-text { font-size: .86rem; }
  .claim-card.future::before { position: static; display: block; margin-bottom: .35rem; }

  .site-footer { padding: .9rem; font-size: .68rem; }
}

/* ── Public desktop: the video takes the height the screen offers ──────────
   The left column is sized from the viewport height (video + speaker +
   rail + transcript ≈ 23rem of chrome), so the picture is as big as fits
   and nothing is left empty under the transcript. Admin keeps the split it
   has, its controls need the room. */
@media (min-width: 1001px) {
  /* The page itself never scrolls: header, one screen of layout, footer.
     The claims column is exactly as tall as the video column and scrolls
     inside; the video column width is set by the script (fitDesktop) from
     the height that is actually left once speaker, rail and transcript are
     accounted for. */
  body:not(.admin) { height: 100vh; overflow: hidden; }
  body:not(.admin) .layout {
    flex: 1; min-height: 0; align-items: stretch;
    grid-template-columns: minmax(0, var(--video-col, calc((100vh - 23rem) * 16 / 9))) minmax(380px, 1fr);
  }
  /* Both columns are the full layout height: the left panel stretches and
     the transcript box absorbs whatever the video cannot use. */
  body:not(.admin) .col { display: flex; flex-direction: column; min-height: 0; }
  body:not(.admin) .col > .panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  body:not(.admin) .player-wrap, body:not(.admin) .now, body:not(.admin) .rail { flex: none; }
  body:not(.admin) .caption { flex: 1; height: auto; min-height: 8.2rem; }
  body:not(.admin) .feed-panel { display: flex; flex-direction: column; min-height: 0; }
  body:not(.admin) .feed-panel > .panel-title, body:not(.admin) .summary-bar, body:not(.admin) .weak-drawer { flex: none; }
  body:not(.admin) .feed { flex: 1; min-height: 0; max-height: none; }
  body:not(.admin) .weak-list { max-height: 32vh; }
}

/* ── idle: no sitting being verified ────────────────────────────────────── */
.layout.idle { display: block; max-width: 720px; margin: 2rem auto; }
.feed .feed-empty.idle { display: block; padding: 3.5rem 1.5rem; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--c-text); max-width: none; margin: 0 auto; }
.feed-empty.idle a { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.feed-empty.idle a:hover { text-decoration: underline; }
.feed-empty.idle .idle-archive { margin: 1.4rem 0 0; color: var(--c-text-muted); font-size: .95rem; }
.feed-empty.idle .idle-donate { margin: 1.6rem 0 0; font-size: .95rem; color: var(--c-text-muted); }
.feed-empty.idle .donate-btn {
  display: inline-block; margin-left: .35rem; padding: .25rem .7rem; font-size: .9rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--c-accent); color: var(--c-accent); text-decoration: none;
  transition: background .15s, color .15s;
}
.feed-empty.idle .donate-btn:hover { background: var(--c-accent); color: #fff; text-decoration: none; }

/* The empty slot a leaving card hands over to (see relocateCard). */
.claim-slot { flex: none; overflow: hidden; }
.sb-key.sb-waiting { color: var(--c-text-muted); font-style: italic; }