/* The landing page's live channel section (templates/_live_channel.html).
   Colours come from tokens.css only; the canvas reads the same tokens at draw
   time, so the plot and the page cannot disagree about the palette. */

.lc { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 60rem) { .lc { grid-template-columns: minmax(0, 1fr); } }

.lc-scope { min-width: 0; }
.lc-status { display: flex; gap: var(--s2); align-items: baseline; margin: 0 0 var(--s3); font-size: var(--fs-sm); color: var(--ink-70); min-height: 1.6em; }

.lc-figure { margin: 0; border: 1px solid var(--rule); background: var(--surface); padding: var(--s4); }
.lc-plot { position: relative; }
.lc-still, .lc-spectrum, .lc-waterfall { display: block; width: 100%; }
.lc-still[hidden], .lc-spectrum[hidden], .lc-waterfall[hidden] { display: none; }
.lc-still { height: auto; aspect-ratio: 560 / 150; overflow: visible; }
.lc-spectrum { aspect-ratio: 10 / 3; }
.lc-waterfall { aspect-ratio: 50 / 11; margin-top: var(--s3); border-top: 1px solid var(--rule); }
.lc-still polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lc-still-trace--1 polyline { stroke: var(--ink); }
.lc-still-trace--2 polyline { stroke: var(--signal); }

.lc-axis { display: flex; justify-content: space-between; gap: var(--s3); margin: var(--s1) 0 0; font-size: var(--fs-micro); color: var(--ink-45); letter-spacing: 0.02em; }
.lc-axis span:nth-child(2) { text-align: center; }
.lc-axis[hidden] { display: none; }

.lc-figure figcaption { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-70); }
.lc-key { display: inline-flex; align-items: center; gap: var(--s1); margin-right: var(--s3); font-weight: 600; color: var(--ink); }
.lc-key::before { content: ''; width: 1.2em; height: 2px; background: var(--ink); }
.lc-key--2::before { background: var(--signal); }
.lc-figure:has(.lc-still[hidden]) .lc-key { display: none; }

.lc-controls { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.lc-controls .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lc-controls .btn[hidden] { display: none; }

.lc-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3) var(--s5); margin: var(--s3) 0; }
.lc-readout div { margin: 0; }
.lc-readout dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-45); }
.lc-readout dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); }

.lc-counter { margin: 0; max-width: 22rem; text-align: right; font-size: var(--fs-xs); color: var(--ink-70); }
.lc-counter b { display: block; font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 500; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.lc-approx { color: var(--ink-45); }
@media (max-width: 40rem) { .lc-counter { text-align: left; } }

/* The floor drawing's own rules are in base.css (`.floor-*`); these add only
   what the receiver picker needs: capturing, hover, focus, selected. */
.lc-floor { margin: 0 0 var(--s5); border: 1px solid var(--rule); background: var(--surface); padding: var(--s3); }
.lc-floor .lc-node--live { cursor: pointer; }
.lc-floor .lc-node--live .floor-node-dot { fill: var(--signal); }
.lc-floor .lc-node--live .floor-node-label { fill: var(--ink); }
.lc-floor .lc-node--live:hover .floor-node-halo,
.lc-floor .lc-node--live:focus-visible .floor-node-halo { fill: var(--signal-ghost); }
.lc-floor .lc-node--live:focus-visible { outline: none; }
.lc-floor .lc-node--selected .floor-node-halo { fill: var(--signal-line); animation: lc-pulse 1.6s var(--easing) infinite; }
.lc-floor .lc-node--selected .floor-node-dot { fill: var(--signal-ink); }
.lc-floor figcaption { margin: var(--s2) 0 0; }
@keyframes lc-pulse { 50% { opacity: 0.35; } }

/* The closing strip that replaced three link-only bands. */
.closing-links { display: grid; gap: var(--s2); margin-top: var(--s5); }
.closing-links p { margin: 0; }