/* Shortwave Signal Archive — Home receiver. History uses its editorial sheet; type.css is shared. */
:root {
  color-scheme: dark;
  --receiver-bg: #17171B;
  --receiver-text: #F2EDE4;
  --receiver-secondary: #B1AAA5;
  --receiver-signal: #E8AC83;
  --receiver-accent: #B4A6D1;
  --receiver-divider: #454248;
  --receiver-boundary: #7E7773;
  --receiver-selected: #322820;
  --receiver-focus: #F3C29C;
  --receiver-error: #F0A29D;
  --receiver-button-ink: #232126;
  --page-gutter: clamp(1rem, 3.5vw, 4rem);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; }
html { background: var(--receiver-bg); scrollbar-color: var(--receiver-boundary) var(--receiver-bg); }
body { margin: 0; background: var(--receiver-bg); color: var(--receiver-text); font: var(--text-body)/1.5 var(--font-device); }
[hidden] { display: none !important; }
::selection { background: var(--receiver-signal); color: var(--receiver-button-ink); }
a { color: inherit; text-underline-offset: .3em; text-decoration-thickness: 1px; }
button, input { font: inherit; }
a, button, label { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--receiver-focus); outline-offset: 4px; }
button:disabled { color: var(--receiver-secondary); border-color: var(--receiver-divider); cursor: default; }
.page-width { width: min(100% - var(--page-gutter) * 2, 90rem); margin-inline: auto; }
.skip-link { position: fixed; z-index: 3; inset: .75rem auto auto .75rem; padding: .75rem 1rem; background: var(--receiver-signal); color: var(--receiver-button-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Header and footer */
.receiver-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; min-height: 4.5rem; border-bottom: 1px solid var(--receiver-divider); }
.receiver-header a, .receiver-footer a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }
.receiver-wordmark { font: 800 var(--text-small)/1 var(--font-display); letter-spacing: .04em; text-decoration: none; }
.receiver-header nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--text-small); }
.receiver-header nav a { text-decoration: none; }
.receiver-header [aria-current] { color: var(--receiver-signal); text-decoration: underline; }
.receiver-header a:hover, .receiver-footer a:hover { color: var(--receiver-signal); }

/* Identity */
.receiver { padding-top: clamp(1.5rem, 4vw, 3.5rem); scroll-margin-top: 1rem; }
.receiver-identity { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.receiver-identity h1 { margin: 0; font: 800 var(--text-display)/.95 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.receiver-identity h1 span { color: var(--receiver-signal); }
.receiver-identity p { margin: 0; color: var(--receiver-secondary); }

/* Presets: two keys; the lit slab travels to the selected one */
.presets { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0; border: 0; border-block: 1px solid var(--receiver-boundary); }
.presets::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--receiver-signal); transition: transform 220ms var(--ease-out), background-color 220ms; }
[data-selected="02"] .presets::before { transform: translateX(100%); background: var(--receiver-accent); }
.preset { position: relative; display: block; min-width: 0; }
.preset + .preset { border-left: 1px solid var(--receiver-divider); }
.preset input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.preset-face { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); min-height: 6rem; padding: 1rem clamp(.75rem, 2vw, 1.5rem); transition: color 220ms, background-color 140ms; }
.preset-number { color: var(--receiver-secondary); font: 400 clamp(1.75rem, 4.2vw, 3.25rem)/1 var(--font-data); font-variant-numeric: tabular-nums; transition: color 220ms; }
.preset-name { min-width: 0; overflow-wrap: anywhere; }
.preset-name strong { display: block; font: 500 var(--text-lead)/1.2 var(--font-device); }
.preset-name > span { display: block; margin-top: .375rem; color: var(--receiver-secondary); font: var(--text-label)/1.5 var(--font-data); transition: color 220ms; }
.preset input:not(:checked):hover + .preset-face { background: var(--receiver-selected); }
.preset input:checked + .preset-face, .preset input:checked + .preset-face .preset-number, .preset input:checked + .preset-face .preset-name > span { color: var(--receiver-button-ink); }
.preset input:focus-visible + .preset-face { outline: 3px solid var(--receiver-focus); outline-offset: 3px; }

/* Receiver body */
.receiver-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.receiver-controls { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.tuner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tuner-number { min-width: 2ch; color: var(--receiver-divider); font: 400 clamp(3rem, 6vw, 4.5rem)/.85 var(--font-data); font-variant-numeric: tabular-nums; transition: color 220ms; }
[data-connection="loading"] .tuner-number { color: var(--receiver-secondary); }
[data-connection="opened"] .tuner-number, [data-connection="slow"] .tuner-number { color: var(--receiver-signal); }
[data-connection="opened"][data-tuned="02"] .tuner-number, [data-connection="slow"][data-tuned="02"] .tuner-number { color: var(--receiver-accent); }
.tuner-text { min-width: 0; overflow-wrap: anywhere; }
.tuned-state { margin: 0 0 .375rem; font: 500 var(--text-lead)/1.25 var(--font-device); }
.player-status { max-width: 46ch; margin: 0; color: var(--receiver-secondary); font-size: var(--text-small); }
[data-connection="error"] .player-status, [data-connection="slow"] .player-status { color: var(--receiver-error); }
.receiver-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.receiver-actions button { min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--receiver-boundary); border-radius: 0; font: 400 var(--text-label)/1.5 var(--font-data); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color 140ms, color 140ms, border-color 140ms; }
.tune-button { color: var(--receiver-button-ink); background: var(--receiver-signal); border-color: var(--receiver-signal) !important; }
.tune-button:hover { background: var(--receiver-focus); }
.tune-button[aria-disabled="true"] { color: var(--receiver-signal); background: var(--receiver-selected); cursor: default; }
.disconnect-button { background: transparent; color: var(--receiver-text); }
.disconnect-button:hover:enabled { color: var(--receiver-signal); border-color: var(--receiver-signal); }
.receiver-actions button:active:enabled { border-color: var(--receiver-text); }
.youtube-button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--receiver-signal); color: var(--receiver-signal); font: 400 var(--text-label)/1.5 var(--font-data); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color 140ms; }
.youtube-button:hover { background: var(--receiver-selected); }
.player-dock { max-width: 34rem; margin: 1.5rem 0; }
.player-title { margin: 0 0 .625rem; color: var(--receiver-secondary); font: 400 var(--text-label)/1.5 var(--font-data); }
.player-mount { width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 1px solid var(--receiver-boundary); background: var(--receiver-bg); }
.player-mount iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.player-source { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--receiver-secondary); font-size: var(--text-small); text-decoration: none; }
.player-source:hover { color: var(--receiver-signal); }
.player-standby { display: none; max-width: 34rem; aspect-ratio: 16 / 9; place-content: center; gap: .25rem; border: 1px solid var(--receiver-divider); color: var(--receiver-secondary); font: var(--text-label)/1.5 var(--font-data); text-align: center; }
.player-standby span:first-child { letter-spacing: .06em; text-transform: uppercase; }
.direct-listening { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--receiver-divider); }
.direct-label { margin: 0; color: var(--receiver-secondary); font: var(--text-label)/1.5 var(--font-data); }
.direct-listening ul { margin: 0; padding: 0; list-style: none; }
.direct-listening a { display: flex; align-items: center; gap: .5rem; width: fit-content; min-height: 2.75rem; color: var(--receiver-secondary); font-size: var(--text-small); text-decoration: none; }
.direct-listening a:hover, .archive-invitation a:hover { color: var(--receiver-signal); }
.direct-preset { color: var(--receiver-secondary); font: var(--text-label)/1 var(--font-data); }
.fallback-note { margin: 0 0 1rem; color: var(--receiver-secondary); }
.direct-description { margin: 0 0 1rem; color: var(--receiver-secondary); font-size: var(--text-small); }
[data-receiver-ready] .fallback-note, [data-receiver-ready] .direct-description { display: none; }
[data-receiver-ready] .direct-listening ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }

/* ASCII scene */
.receiver-art { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.ascii-window { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 7 / 6; overflow: hidden; border: 1px solid var(--receiver-divider); }
.receiver-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.receiver-canvas[data-ascii-ready="true"] { opacity: 1; }
/* The static scenes are the renderer's own output at 72 by 36 cells, so the canvas replaces a matching picture. */
.receiver-fallback { position: absolute; inset: 0; width: 72ch; height: fit-content; margin: auto; color: var(--receiver-signal); font: 700 clamp(.4rem, 1.1vw, 1rem)/1.12 var(--font-data); font-size: 2.1cqw; white-space: pre; }
.receiver-fallback b { color: var(--receiver-text); font-weight: inherit; }
.receiver-fallback i { color: var(--receiver-boundary); font-style: normal; }
.fallback-night { display: none; color: var(--receiver-accent); }
[data-selected="02"] .fallback-listener { display: none; }
[data-selected="02"] .fallback-night { display: block; }
.receiver-canvas[data-ascii-ready="true"] ~ .receiver-fallback { display: none; }
.receiver-art figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; color: var(--receiver-secondary); font: var(--text-label)/1.5 var(--font-data); }
.ascii-window::after { content: ""; position: absolute; inset: 45% 0 auto; height: 2px; background: var(--receiver-signal); opacity: 0; pointer-events: none; }
.is-acquiring .ascii-window::after { animation: acquire-signal 400ms var(--ease-out) 1; }
@keyframes acquire-signal { 0% { opacity: .6; transform: translateY(-4rem) scaleX(.2); } 70% { opacity: .3; } 100% { opacity: 0; transform: translateY(4rem) scaleX(1); } }

/* Footnote, invitation, footer */
.receiver-footnote { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); padding: 1rem 0 1.5rem; border-top: 1px solid var(--receiver-divider); color: var(--receiver-secondary); font-size: var(--text-small); }
.receiver-footnote p { margin: 0; max-width: 65ch; }
.archive-invitation { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; padding: clamp(2.5rem, 6vw, 5rem) 0; border-top: 1px solid var(--receiver-divider); }
.archive-invitation h2 { margin: 0; font: 400 var(--text-headline)/1.15 var(--font-reading); letter-spacing: -.015em; text-wrap: balance; }
.archive-invitation p { max-width: 52ch; margin: 1.25rem 0 .75rem; color: var(--receiver-secondary); }
.archive-invitation a { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; text-decoration: none; }
.archive-cassette { container-type: inline-size; min-width: 0; color: var(--receiver-accent); }
.archive-cassette pre { margin: 0; white-space: pre; font: 400 var(--text-label)/1.3 var(--font-data); font-size: min(1rem, 5.6cqw); }
.receiver-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding: 1rem 0; border-top: 1px solid var(--receiver-divider); }
.receiver-footer p { margin: 0; color: var(--receiver-secondary); font: var(--text-label)/1.5 var(--font-data); }
.receiver-footer > a:last-child { gap: .5rem; font-size: var(--text-small); text-decoration: none; }

@media (min-width: 64rem) {
  [data-receiver-ready] .player-standby { display: grid; }
  [data-receiver-ready] .player-dock:not([hidden]) + .player-standby { display: none; }
}
@media (max-width: 63.99rem) {
  .receiver-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .receiver-controls { grid-column: 1; grid-row: 1; }
  .receiver-art { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; }
  .receiver-art figcaption { order: -1; gap: .5rem; margin-top: 0; padding: .625rem 0; border-top: 1px solid var(--receiver-divider); }
  .receiver-footnote { grid-template-columns: 1fr; gap: .5rem; }
  .archive-invitation { grid-template-columns: 1fr; align-items: start; }
  .archive-cassette { max-width: 22rem; }
}
@media (max-width: 30rem) {
  .receiver-header { min-height: 3.5rem; gap: 0 .75rem; }
  .receiver-header nav { gap: .875rem; }
  .receiver-identity { display: block; }
  .receiver-identity p { margin-top: .5rem; font-size: var(--text-small); }
  .preset-face { grid-template-columns: 1fr; align-content: start; gap: .5rem; min-height: 0; padding: .75rem; }
  .preset-name strong { font-size: var(--text-body); }
  .tuner { gap: 1rem; }
  .receiver-body { gap: 2rem; }
  .receiver-footer p { flex-basis: 100%; order: 3; padding-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .presets::before, .preset-face, .preset-number, .preset-name > span, .tuner-number, .receiver-actions button, .youtube-button { transition: none; }
  .is-acquiring .ascii-window::after { animation: none; }
}
@media print {
  /* Paper: the archive's ink-on-paper values, so the page stays legible without printed backgrounds. */
  :root { color-scheme: light; --receiver-bg: #F2EDE4; --receiver-text: #232126; --receiver-secondary: #68615D; --receiver-signal: #8E4827; --receiver-accent: #64517E; --receiver-divider: #C7BEB3; --receiver-boundary: #82766F; --receiver-selected: #E8DACE; --receiver-focus: #6748A3; --receiver-error: #993E3B; --receiver-button-ink: #F2EDE4; }
  .skip-link, .presets::before, .receiver-actions, .player-dock, .player-standby, .receiver-art { display: none !important; }
  .preset input:checked + .preset-face, .preset input:checked + .preset-face .preset-number, .preset input:checked + .preset-face .preset-name > span { color: var(--receiver-signal); }
}