/* DAWStream listener — visual language borrowed from gameaudio.gg:
   Montserrat, #e86f1d accent, deep neutral surfaces. */

@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/montserrat-regular.woff2) format('woff2');
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/montserrat-500.woff2) format('woff2');
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/montserrat-700.woff2) format('woff2');
}

:root {
  --accent: #e86f1d;
  --bg: #0c0f16;
  --surface: #14171f;
  --surface-2: #1b1f2a;
  --line: #262b38;
  --text: #e2e5f1;
  --muted: #9397ad;
  --faint: #565973;
  --ok: #22c55e;
  --warn: #ffba08;
  --bad: #ef4444;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* Author `display` rules outrank the UA stylesheet's [hidden] { display: none },
   so every hidden section needs this or it renders anyway. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background-image: radial-gradient(900px 500px at 50% -10%, #1a1f2c 0%, transparent 70%);
}

/* ---- top bar ---- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 26px; width: auto; display: block; }
.brand-text { font-weight: 700; letter-spacing: .3px; font-size: 17px; }
.acc { color: var(--accent); }

.session-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
  max-width: 46vw; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.session-chip span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px #22c55e26; }
.dot.stale { background: var(--warn); box-shadow: 0 0 0 3px #ffba0826; }

/* ---- layout ---- */

main {
  flex: 1; width: 100%; max-width: 560px;
  margin: 0 auto; padding: 34px 20px 44px;
  display: flex; flex-direction: column; gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

h1 { font-size: 21px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.2px; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }

/* ---- gate ---- */

.btn {
  padding: 13px 18px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; }

.err {
  margin: 12px 0 0; padding: 10px 13px;
  background: #ef444414; border: 1px solid #ef444440; border-radius: 9px;
  color: #fca5a5; font-size: 13.5px;
}

/* ---- transport ---- */

.player { display: flex; flex-direction: column; gap: 16px; margin-top: 150px; }

.transport-card { display: flex; align-items: center; gap: 20px; }

.playbtn {
  flex: none; width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.playbtn:hover { border-color: var(--accent); }
.playbtn:active { transform: scale(.96); }
.playbtn.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
.playbtn svg { width: 26px; height: 26px; fill: currentColor; }
.playbtn .ico-stop { display: none; }
.playbtn.playing .ico-play { display: none; }
.playbtn.playing .ico-stop { display: block; }
.playbtn:disabled { opacity: .5; cursor: default; }

.transport-meta { min-width: 0; flex: 1; }

/* One line, non-negotiable. Overflow is resolved by hiding the listeners
   pill (see fitStatusLine in app.js), never by wrapping. */
.status-line { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; margin-bottom: 7px; }
.status-line .badge { flex: none; }

.badge {
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff; white-space: nowrap;
}
/* The state pill swaps between Listening/Buffering/Stopped/Re-syncing at
   runtime; content-width sizing made each swap nudge the row and occasionally
   wrap it. Reserve the width of the widest routine state so the pill changes
   in place. (The rare long pills — Audio Wizard offline — may still be wider,
   but they change once, not every few seconds.) */
#stateBadge { min-width: 94px; text-align: center; }
.badge.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.badge.ok { background: var(--ok); }
.badge.warn { background: var(--warn); color: #1a1a1a; }
.badge.bad { background: var(--bad); }

.timecode {
  font-size: 27px; font-weight: 700; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  transition: opacity .5s ease;
}

.daw-meta {
  color: var(--muted); font-size: 13px;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.daw-meta .sep { color: var(--faint); margin: 0 5px; }

/* ---- meters ---- */

.meters { display: flex; flex-direction: column; gap: 7px; padding: 18px 22px; }

.meter {
  position: relative; height: 13px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
}
.meter .fill {
  position: absolute; inset: 0 100% 0 0;
  background: var(--meter-color, var(--ok));
  transition: right .045s linear, background-color .18s linear;
}
.meter .ch {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: var(--faint); z-index: 2; line-height: 1;
}
.loudness {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.loudness-reading { display: flex; flex-direction: column; min-width: 0; }
.loudness-reading:nth-child(2) { text-align: center; }
.loudness-reading:last-child { text-align: right; }
.loudness-label {
  color: var(--faint); font-size: 9px; font-weight: 600;
  letter-spacing: .35px; text-transform: uppercase; white-space: nowrap;
}
.loudness-reading strong { color: var(--text); font-size: 14px; font-weight: 600; }
.loudness-reading em { color: var(--muted); font-size: 9px; font-style: normal; }

@media (max-width: 360px) {
  .loudness { gap: 5px; }
  .loudness-label { font-size: 8px; letter-spacing: 0; }
  .loudness-reading strong { font-size: 12px; }
  .loudness-reading em { font-size: 8px; }
}

/* ---- controls ---- */

.controls { display: flex; flex-direction: column; gap: 20px; }
.ctl { display: flex; flex-direction: column; gap: 8px; }
.ctl-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.ctl-label em { font-style: normal; color: var(--text); font-weight: 700; float: right; }
.hint { font-size: 12px; color: var(--faint); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 3px; background: var(--line); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 3px solid var(--surface);
  background: var(--accent); cursor: pointer; box-shadow: 0 0 0 1px var(--accent);
}

/* ---- diagnostics ---- */

.diag { padding: 0; }
.diag summary {
  padding: 15px 22px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--muted); list-style: none;
}
.diag summary::-webkit-details-marker { display: none; }
.diag summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 1.35em;
  line-height: 1;
  display: inline-block;
  margin-right: 7px;
  transform: translateY(-0.5px);
}
.diag[open] summary::before { content: "▾ "; }
.diag dl { margin: 0; padding: 0 22px 18px; display: flex; flex-direction: column; gap: 7px; }
.diag dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.diag dt { color: var(--faint); }
.diag dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.diag dd.em { font-weight: 700; }
.uiver { color: var(--line); margin-left: 8px; font-size: 11px; }

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--line); padding: 16px 22px;
  display: flex; justify-content: center;
  font-size: 12.5px; color: var(--faint);
}

@media (max-width: 480px) {
  /* .player carries a deliberate 150px top margin for the desktop look. On a
     phone that is most of the viewport, so it goes — the transport belongs
     just under the bar. main keeps a small inset; the sides and bottom too. */
  .player { margin-top: 0; }
  main { padding: 12px 14px 34px; }
  .topbar { padding: 12px 14px; }
  .card { padding: 18px; }
  .transport-card { gap: 15px; }
  .playbtn { width: 56px; height: 56px; }
  .timecode { font-size: 23px; }
}

/* ---- U1 (DEC-254): the BPM pill ----
   Product layer on top of the design, APPENDED so everything above stays byte-identical to
   Research/web-design/css/style.css — the gate compares exactly that, and tools/lib/design_delta.mjs
   is the one definition of what this appendix may contain. #tempo moved from the .daw-meta subline
   into the status line, in the slot the listeners badge occupied. Tabular figures plus a width
   reserved for the widest routine reading ("240 BPM") keep the row still while digits roll. */
#tempo { min-width: 78px; text-align: center; font-variant-numeric: tabular-nums; }