/* live.css — page styles for /live.html (evidence radar).
   Linked after /styles.css in pipeline/templates/evidence_radar.html.j2 (a standalone template).
   Shared tokens/components live in styles.css; keep only what is unique to this page here. */
:root{
  /* radar-local names mapped onto the site's Atlas tokens (styles.css) */
  --card:var(--surface); --card-hi:var(--surface2); --line:var(--border);
  --muted:var(--text-muted); --faint:var(--ink-3);
  --toward:var(--right); --against:var(--wrong);
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);
  background:radial-gradient(1100px 460px at 50% -130px,rgba(var(--orange-rgb),.12),transparent 70%),var(--bg);
  font:16px/1.5 var(--f-ui)}
.wrap{max-width:732px;margin:0 auto;padding:32px 16px 80px}
a,a:hover{color:inherit;text-decoration:none}

.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--heat);font-weight:600;margin:0 0 7px}
h1{font-family:var(--f-display);font-weight:500;font-size:var(--t-h1);line-height:1.08;margin:0 0 15px;letter-spacing:-.025em}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.pill{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  background:rgba(var(--ink-rgb),.02);box-shadow:inset 0 1px 0 rgba(var(--ink-rgb),.03)}
.pill b{color:var(--ink)}
.pill.hot{color:var(--heat);border-color:rgba(var(--orange-rgb),.45);background:rgba(var(--orange-rgb),.08)}
.stamp{color:var(--faint);font-size:12.5px;margin:11px 0 0}

/* direction bar — the LOUD, primary signal */
.dir{margin:2px 0 2px}
.dir-top{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:13px;flex-wrap:wrap}
.dir-chip{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;
  padding:7px 14px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.dir-reason{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:280px;text-align:right}
.against .dir-chip{background:rgba(var(--red-rgb),.16);border:1px solid rgba(var(--red-rgb),.45);color:var(--against)}
.toward  .dir-chip{background:rgba(var(--green-rgb),.15);border:1px solid rgba(var(--green-rgb),.45);color:var(--toward)}
.mixed   .dir-chip{background:rgba(var(--muted-rgb),.10);border:1px solid var(--line);color:var(--muted)}
/* conviction — our leaning_* verdict shown against the live news lean */
.vbadge{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;border:1px dashed;white-space:nowrap}
.v-leaning_wrong{color:var(--against);border-color:rgba(var(--red-rgb),.5);background:rgba(var(--red-rgb),.08)}
.v-leaning_confirmed{color:var(--toward);border-color:rgba(var(--green-rgb),.5);background:rgba(var(--green-rgb),.08)}
.conviction{margin:11px 0 0;font-size:13px;font-weight:600;line-height:1.4}
.conv-agree{color:var(--toward)}
.conv-diverge{color:var(--heat)}
.conv-holding{color:var(--muted)}
.bigtrack{position:relative;height:14px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(var(--red-rgb),.65) 0%,rgba(var(--red-rgb),.22) 30%,
    rgba(var(--muted-rgb),.30) 50%,rgba(var(--green-rgb),.22) 70%,rgba(var(--green-rgb),.65) 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.bigtrack .knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
  border:3px solid var(--bg)}
.against .knob{background:var(--against);box-shadow:0 0 0 2px var(--against),0 4px 14px rgba(var(--red-rgb),.55)}
.toward  .knob{background:var(--toward);box-shadow:0 0 0 2px var(--toward),0 4px 14px rgba(var(--green-rgb),.5)}
.mixed   .knob{background:var(--muted);box-shadow:0 0 0 2px var(--muted)}
.dir-labels{display:flex;justify-content:space-between;margin-top:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.dir-labels .away{color:var(--against)} .dir-labels .mid{color:var(--faint)} .dir-labels .twd{color:var(--toward)}

/* buzz meter — equalizer = how LOUD, never a trajectory */
.buzz{margin:16px 0 2px;padding:13px 15px;background:var(--card-hi);border:1px solid var(--line);
  border-radius:12px;display:flex;align-items:center;gap:16px}
.eq{display:flex;align-items:flex-end;gap:3px;height:36px;flex:0 0 auto}
.eq span{width:5px;border-radius:2px;background:var(--heat);opacity:.9}
.buzz-meta{min-width:0}
.buzz-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--heat);
  background:rgba(var(--orange-rgb),.13);border:1px solid rgba(var(--orange-rgb),.32);padding:2px 9px;border-radius:999px}
.buzz-line{font-size:13px;color:var(--ink);margin:6px 0 0;font-weight:650}
.buzz-note{font-size:11.5px;color:var(--faint);margin:4px 0 0;line-height:1.4}
.buzz-note i{font-style:italic;color:var(--muted)}

.hero{position:relative;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(var(--orange-rgb),0.10),var(--card) 58%);
  box-shadow:0 24px 60px -28px rgba(var(--orange-rgb),.30),inset 0 1px 0 rgba(var(--ink-rgb),.05);
  padding:22px 22px 20px;margin:22px 0 28px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--heat),rgba(var(--orange-rgb),0))}
.hero .tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--heat);margin:0 0 11px}
.hero .claim{font-family:var(--f-display);font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);line-height:1.22;font-weight:500;margin:0 0 16px;letter-spacing:-.015em}

.receipts-head{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--faint);
  margin:18px 0 0}
.receipts{margin:9px 0 0;padding:11px 0 0;border-top:1px solid var(--line);list-style:none;
  display:grid;grid-template-columns:auto minmax(0,1fr) max-content max-content;column-gap:12px;row-gap:9px;align-items:center}
.receipts li{display:contents}
.receipts .ico, .card .receipt .ico{font-weight:600;font-size:13px}
.ico.against{color:var(--against)} .ico.toward{color:var(--toward)} .ico.mixed{color:var(--faint)}
.receipts .title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13.5px}
.receipts .src, .card .receipt .src{justify-self:end;color:var(--faint);font-size:12.5px;white-space:nowrap}
.read{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  color:var(--heat);border:1px solid rgba(var(--orange-rgb),.38);background:rgba(var(--orange-rgb),.09);border-radius:999px;padding:3px 11px;transition:.15s}
.read:hover{background:rgba(var(--orange-rgb),.18);border-color:rgba(var(--orange-rgb),.6)}
.exticon{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sec{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:30px 0 13px}

/* recently settled: left the live lane, joined the record */
.settled{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;background:rgba(var(--ink-rgb),.012);overflow:hidden}
.settled li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:12px 16px;border-top:1px solid var(--line)}
.settled li:first-child{border-top:0}
.s-mark{grid-row:1 / span 2;font-weight:600;font-size:16px;line-height:1.3}
.s-confirmed .s-mark{color:var(--toward)} .s-wrong .s-mark{color:var(--against)}
.s-text{color:var(--ink);font-size:14.5px;line-height:1.35}
.s-text:hover{text-decoration:underline;text-decoration-color:var(--line)}
.s-meta{color:var(--faint);font-size:12.5px}
.s-confirmed .s-meta b{color:var(--toward)} .s-wrong .s-meta b{color:var(--against)}
.settled-note{color:var(--faint);font-size:12.5px;line-height:1.6;margin:10px 0 0}

/* compact "also moving" card */
.card{display:grid;grid-template-columns:1fr auto;gap:7px 18px;align-items:center;
  background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin:0 0 11px;
  box-shadow:var(--shadow)}
.card .claim{grid-column:1;font-family:var(--f-display);font-size:1.18rem;font-weight:500;line-height:1.3;margin:0}
.card .viz{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:10px;justify-self:end}
.vrow{display:flex;align-items:center;gap:12px}
.eq.sm{height:24px;gap:2px}
.eq.sm span{width:4px}
.card .count{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.card .count b{color:var(--ink);font-size:16px;font-weight:750}
.cdir{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.cdir-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:750;white-space:nowrap}
.against .cdir-chip{color:var(--against)} .toward .cdir-chip{color:var(--toward)} .mixed .cdir-chip{color:var(--muted)}
.track{position:relative;height:7px;width:140px;border-radius:5px;
  background:linear-gradient(90deg,rgba(var(--red-rgb),.6),rgba(var(--muted-rgb),.16) 50%,rgba(var(--green-rgb),.6));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.track .mark{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card),0 0 12px rgba(0,0,0,.6)}
.against .mark{background:var(--against);box-shadow:0 0 0 3px var(--card),0 0 12px rgba(var(--red-rgb),.6)}
.toward  .mark{background:var(--toward);box-shadow:0 0 0 3px var(--card),0 0 12px rgba(var(--green-rgb),.55)}
.mixed   .mark{background:var(--muted);box-shadow:0 0 0 3px var(--card)}
.card .receipt{grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr) max-content max-content;column-gap:11px;align-items:center;font-size:13px;color:var(--faint);margin:2px 0 0}
.card .receipt .title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}

details.quiet{margin-top:8px;border:1px dashed var(--line);border-radius:13px;padding:2px 18px;background:rgba(var(--ink-rgb),.012)}
details.quiet summary{cursor:pointer;color:var(--muted);font-size:14px;padding:14px 0;font-weight:600;list-style:none}
details.quiet summary::-webkit-details-marker{display:none}
details.quiet summary::before{content:"▸  ";color:var(--faint)}
details.quiet[open] summary::before{content:"▾  "}
details.quiet ul{margin:0 0 13px;padding:0;list-style:none}
details.quiet li{padding:9px 0;border-top:1px solid var(--line);color:var(--faint);font-size:14px}

footer{margin-top:42px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;line-height:1.65}
footer b{color:var(--muted)}
footer em{color:var(--ink);font-style:normal}
footer a,footer a:hover{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

@media(max-width:560px){
  .dir-reason{text-align:left;max-width:none}
  .card{grid-template-columns:1fr}
  .card .viz{grid-column:1;grid-row:auto;align-items:flex-start;justify-self:start;flex-direction:row;flex-wrap:wrap;gap:16px}
  .cdir{align-items:flex-start}
}
.vbadge-row{margin:0 0 9px}
/* The radar is a board, not prose: its claim, coverage and settled links show no underline
   until hover. Overrides styles.css `main p a, main li a` (the page body is <main>); the
   explainer <footer> keeps its own underlined links. Claims link to their /p/ page. */
main.wrap :is(.claim,.receipts,.receipt,.settled,.quiet) a{text-decoration:none}
main.wrap :is(.claim,.receipts,.receipt,.settled,.quiet) a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em}