/* station.css: THE STANDARD (1.18, PR 7). The six stations' chrome on the
   system: the bar in the station's accent with one chip (mono 12 px, a
   hairline pill, an icon from the sprite beside the text the station
   writes), the section labels at the floor, the stations' buttons as the
   site's machined press, the voice line, the Feed's plate index, the
   market's skeleton rows, The Quant's poster. Linked right after site.css
   by every station (the `station` head flag), before the station's own
   sheet, which sets --st-acc and keeps its own layout. */

/* ── the bar: the station's name in its accent, one chip ──────────────── */
.station-bar { gap: var(--s3); }
.bar-title { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-acc, var(--gold-lt)); white-space: nowrap; }
.bar-spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--hair-strong); color: var(--ink2); font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.chip .ico { width: 16px; height: 16px; flex: none; color: var(--ink-mute); }
.chip b { font-weight: 600; }
.chip .i-spark { display: none; color: var(--gold); }
.chip--cal { color: var(--gold-lt); border-color: rgba(var(--gold-rgb), 0.45); }
.chip--cal .i-spark { display: block; }
.chip--cal .ico { color: var(--gold); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); flex: none; }
.chip.on .dot { background: var(--up); box-shadow: 0 0 8px rgba(var(--up-rgb), 0.6); }
.chip.off .dot { background: var(--down); }
.chip.live .dot { background: var(--pearl); }
.chip.live.sample { color: var(--gold-lt); border-color: rgba(var(--gold-rgb), 0.45); }
.chip.live.sample .dot { background: var(--gold); }
@media (max-width: 400px) { .chip { padding: 0 10px 0 8px; letter-spacing: 0.06em; } .bar-title { letter-spacing: 0.1em; } }

/* ── labels, the voice, the glyph inside a line ───────────────────────── */
.sec, .season-sec, .core-sec, .sk-eyebrow, .ev-tag { font: 600 12px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.sec { color: var(--st-acc, var(--gold-lt)); }
.ico-inline { width: 16px; height: 16px; vertical-align: -3px; margin: 0 4px 0 2px; }
.ico-inline:first-child { margin-left: 0; }
a .ico-inline, button .ico-inline { color: currentColor; }

/* ── the machined press: the stations' buttons are the site's ─────────── */
button.primary, button.ghost, .ghost-btn, .share-btn { width: 100%; }
.btn.danger { color: var(--down); }
.btn.ghost-link { min-height: 44px; }

/* ── the Feed's plate index: eleven pages before the deck mounts ────────── */
.plate-index { display: grid; gap: var(--s5); max-width: var(--w-page); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s8); }
.plate-index .t-label { color: var(--ink-mute); }
.plate-index .t-h3 { margin: 0; }
.plates { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plate-card { display: grid; gap: var(--s3); color: inherit; text-decoration: none !important; }
.plate-card .ge { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.plate-card .gt { font: 600 clamp(19px, 1.6vw, 22px)/1.25 var(--num); color: var(--ink); letter-spacing: -0.015em; }
.plate-card .gd { font: 400 15px/1.5 var(--sans); color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plate-card:hover .gt { color: #fff; }
.plate { position: relative; overflow: hidden; aspect-ratio: 8 / 3; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 var(--rim); }
.plate img, .plate svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; object-fit: contain; display: block; }
.plate__labs { display: none; }
#deck.is-live .plate-index { display: none; }

/* ── the market's skeleton: sixteen hairline rows before the board ─────── */
.skel-board { display: grid; gap: var(--s6); }
.skel-group { display: grid; }
.skel-group > i { display: block; height: 12px; width: 120px; border-radius: 6px; margin: 0 0 10px; background: var(--hair); }
.skel-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 44px; border-top: 1px solid var(--hair); }
.skel-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--hair), rgba(140, 160, 190, 0.05), var(--hair)); }
.skel-row i:first-child { width: 42%; }
.skel-row i:last-child { width: 18%; }

/* ── The Quant's poster: the station before its desk mounts ───────────── */
.station-poster { display: grid; gap: var(--s4); padding: var(--s6) var(--s5); margin: var(--s6) 0; max-width: 560px; }
.station-poster .t-label { display: inline-flex; align-items: center; gap: 8px; color: var(--st-acc, var(--gold-lt)); }
.station-poster .t-label .ico { width: 16px; height: 16px; }
.station-poster .t-h3, .station-poster .t-body, .station-poster .t-voice { margin: 0; }
.station-poster .btn { justify-self: start; }
.station-poster[hidden] { display: none; }
.station-poster__go { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ── EVERY VISITOR (1.19): under a thin station's instrument, what the page
   is, three questions with their answers, and one hairline card to the
   game (scripts/site-stations.mjs) ──────────────────────────────────────── */
.station-about { display: grid; gap: var(--s4); max-width: 720px; margin: var(--s7) auto 0; padding: var(--s8) var(--gutter) var(--s7); border-top: 1px solid var(--hair); }
.station-about > * { margin: 0; }
.station-about > .t-label { color: var(--st-acc, var(--gold-lt)); }
.station-about__qa { display: grid; gap: var(--s5); margin: var(--s3) 0; }
.station-about__qa > div { padding-top: var(--s4); border-top: 1px solid var(--hair); }
.station-about__qa h3 { margin: 0 0 var(--s2); }
.station-about__qa p { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink2); }
@media (min-width: 900px) {
  .station-about { max-width: 1040px; }
  .station-about__qa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
}
.station-app { display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; text-decoration: none !important; font: 400 15px/1.45 var(--sans); color: var(--ink2); }
.station-app b { display: block; color: var(--gold-lt); font-weight: 600; }
.station-app .ico { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--gold-lt); }
.station-app:hover, .station-app:focus-visible { border-color: rgba(var(--gold-rgb), 0.45); }