/* bardRF · Pulsar: tokens, type, both views, phones, reduced motion. */

@font-face { font-family: 'Archivo'; src: url('fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #060606;
  --bone: #ece7dc;
  --bone-dim: rgba(236, 231, 220, 0.45);
  --rule: rgba(236, 231, 220, 0.14);
  --accent: #ff4a26;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --fade: 300ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--bone); }
body { font: 400 14px/1.4 var(--mono); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol { margin: 0; }
ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

/* One stage fills the window. --u is 1% of its width, or of a 16:9 height on
   wide, short windows, so the composition scales as a whole. */
.stage {
  position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
  container-type: size; --u: min(1cqw, 1.78cqh); --gutter: max(16px, 4.5cqw);
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity var(--fade) ease; }
.stage[data-view="art"] .instrument,
.stage[data-view="instrument"] .art { opacity: 0; }
.stage.frozen .layer { filter: brightness(0.6); }

/* Header */
.top {
  position: absolute; z-index: 2; top: max(16px, calc(var(--u) * 3.2)); left: var(--gutter); right: var(--gutter);
  display: flex; align-items: baseline; gap: calc(var(--u) * 3);
  font-size: max(11px, var(--u)); letter-spacing: 0.14em; text-transform: uppercase;
}
.station { font: 800 max(14px, calc(var(--u) * 1.5))/1 var(--display); font-stretch: 125%; letter-spacing: 0.08em; }
.spacer { flex: 1; }
.switch { display: flex; gap: calc(var(--u) * 1.4); }
.switch button { opacity: 0.45; padding-bottom: 0.4em; border-bottom: 1px solid transparent; }
.switch button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--bone); }
.marker { display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.marker .dot { width: 0.6em; height: 0.6em; border-radius: 50%; border: 1px solid currentColor; }
.marker[data-tone="live"] { color: var(--accent); }
.marker[data-tone="live"] .dot { background: currentColor; }
.marker[data-tone="dim"] { color: var(--bone-dim); }
.marker[data-tone="dim"] .dot { display: none; }

/* Band along the bottom */
.band { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: max(16px, calc(var(--u) * 4.5)); display: grid; align-items: end; }
.block { grid-area: block; min-width: 0; }
.voices { grid-area: voices; min-width: 0; }
.log { grid-area: log; min-width: 0; }
.headline { font: 900 calc(var(--u) * 8)/0.82 var(--display); font-stretch: 62%; letter-spacing: -0.01em; text-transform: uppercase; }
.sub { display: flex; flex-direction: column; margin-top: calc(var(--u) * 1.2); font-size: max(10px, var(--u)); line-height: 1.7; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.sub span:empty { display: none; }
.label { margin-bottom: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 0.7); border-bottom: 1px solid var(--rule); font: 400 max(10px, calc(var(--u) * 0.9))/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-dim); }
.voice-list li { --level: 0; }
.voice-list .note { font-weight: 500; }
.voice-list li[data-loudest] .note { color: var(--accent); }
.log-list { font-size: max(10px, calc(var(--u) * 0.95)); line-height: 1.8; white-space: nowrap; overflow: hidden; }
.log-list .time { margin-right: 1em; color: var(--bone-dim); }

.controls { grid-area: controls; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.6); text-align: right; }
.listen { position: relative; display: inline-flex; align-items: center; gap: 0.7em; padding-bottom: 0.45em; font: 700 max(13px, calc(var(--u) * 1.4))/1 var(--display); font-stretch: 125%; letter-spacing: 0.2em; text-transform: uppercase; }
.listen::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.listen:disabled { opacity: 0.4; }
.listen:disabled::after,
.stage.resting .listen::after { background: var(--bone); }
.listen[data-busy="true"]::after { background: linear-gradient(90deg, var(--rule) 0 35%, var(--accent) 50%, var(--rule) 65% 100%); background-size: 300% 100%; animation: sweep 1.2s linear infinite; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.listen .icon { display: none; }
.listen[data-icon="play"] .icon { display: block; width: 0; height: 0; border-left: 0.62em solid currentColor; border-top: 0.38em solid transparent; border-bottom: 0.38em solid transparent; }
.listen[data-icon="pause"] .icon { display: block; width: 0.6em; height: 0.75em; border-left: 0.2em solid currentColor; border-right: 0.2em solid currentColor; }
.volume { display: inline-flex; align-items: center; gap: 0.8em; font-size: max(10px, calc(var(--u) * 0.85)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }
.volume input { -webkit-appearance: none; appearance: none; width: max(80px, calc(var(--u) * 7)); height: 16px; margin: 0; background: transparent; cursor: pointer; }
.volume input::-webkit-slider-runnable-track { height: 1px; background: rgba(236, 231, 220, 0.35); }
.volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--bone); }
.volume input::-moz-range-track { height: 1px; background: rgba(236, 231, 220, 0.35); }
.volume input::-moz-range-progress { height: 1px; background: var(--bone); }
.volume input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--bone); }
.notice { max-width: 34ch; font-size: max(11px, var(--u)); line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase; }
.stage.has-notice .listen,
.stage.has-notice .volume { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Art view: headline bottom left; note grid and Listen bottom right. */
.stage[data-view="art"] .band { grid-template-columns: 1fr auto; grid-template-areas: "block voices" "block controls"; row-gap: calc(var(--u) * 2.2); }
.stage[data-view="art"] .voices .label,
.stage[data-view="art"] .log,
.stage[data-view="art"] .modeline,
.stage[data-view="art"] .bar { display: none; }
.stage[data-view="art"] .voice-list { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 3.6)); gap: calc(var(--u) * 0.6) calc(var(--u) * 1); justify-content: end; font-size: max(11px, calc(var(--u) * 1.2)); line-height: 1; text-align: right; }
.stage[data-view="art"] .voice-list li { opacity: calc(0.18 + 0.82 * var(--level)); }

/* Instrument view: one band of four columns. */
.stage[data-view="instrument"] .band { grid-template-columns: 1.15fr 1.1fr 1.35fr auto; grid-template-areas: "block voices log controls"; column-gap: calc(var(--u) * 3.5); }
.stage[data-view="instrument"] .headline { font-size: calc(var(--u) * 5.6); }
.stage[data-view="instrument"] .tagline { display: none; }
.stage[data-view="instrument"] .voice-list { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(var(--u) * 0.9); height: max(56px, calc(var(--u) * 7.5)); }
.stage[data-view="instrument"] .log-list { height: max(56px, calc(var(--u) * 7.5)); }
.stage[data-view="instrument"] .voice-list li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.6em; min-width: 0; }
.stage[data-view="instrument"] .bar { display: block; width: 40%; height: calc((100% - 1.6em) * var(--level)); min-height: 1px; background: var(--bone); }
.stage[data-view="instrument"] .note { font-size: max(9px, calc(var(--u) * 0.85)); color: var(--bone-dim); }

/* Phones */
@media (max-width: 699px) {
  .top { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; }
  .station { margin-right: auto; }
  .spacer { display: none; }
  .tuning { order: 3; flex-basis: 100%; font-size: 10px; color: var(--bone-dim); }
  .headline { font-size: 15cqw; }
  .controls { gap: 12px; }
  .stage[data-view="art"] .band { grid-template-columns: 1fr auto; grid-template-areas: "block block" "voices controls"; row-gap: 20px; column-gap: 16px; }
  .stage[data-view="art"] .voice-list { grid-template-columns: repeat(4, auto); gap: 6px 12px; justify-content: start; text-align: left; }
  .stage[data-view="art"] .tagline { display: none; }
  .stage[data-view="instrument"] .band { grid-template-columns: 1fr auto; grid-template-areas: "block controls" "voices voices"; row-gap: 16px; }
  .stage[data-view="instrument"] .headline { font-size: 11cqw; }
  .stage[data-view="instrument"] .log { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
  .listen[data-busy="true"]::after { animation: none; background: var(--accent); }
}