/* The public airband player. Every colour and size is a token below, the
   LTF OS rule: colour by role, never by literal. Light by default, dark
   where the device asks for it. */
:root {
  color-scheme: light;
  --bg: #f4f6f9; --panel: #ffffff; --panel2: #eef1f5; --line: #d5dbe3;
  --ink: #0f1720; --text: #253241; --dim: #52606f;
  --sky: #0b6aa8; --on-sky: #ffffff;
  --green: #11733a; --red: #b3261e; --amber: #8a5300;
  --u1: 4px; --u2: 8px; --u3: 12px; --u4: 16px; --u6: 24px;
  --r1: 6px; --r2: 10px;
  --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0d1117; --panel: #161b22; --panel2: #1f2630; --line: #30363d;
    --ink: #f0f4f8; --text: #d0d7de; --dim: #9aa6b2;
    --sky: #4fa8e0; --on-sky: #06121c;
    --green: #4cc27a; --red: #ff7b72; --amber: #e3b341;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--fs-md)/1.45 var(--font); }
.lp { max-width: 960px; margin: 0 auto; padding: var(--u6) var(--u4); }
.lp-head h1 { margin: 0; color: var(--ink); font-size: var(--fs-xl); }
.lp-sub { margin: var(--u1) 0 0; color: var(--dim); }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--u3); margin: var(--u4) 0 var(--u3); }
.lp-state { font: 700 var(--fs-sm)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: var(--u2) var(--u3);
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); }
.lp-state[data-tone="live"] { color: var(--green); border-color: var(--green); }
.lp-state[data-tone="bad"] { color: var(--red); border-color: var(--red); }
.lp-state[data-tone="warn"] { color: var(--amber); border-color: var(--amber); }
.lp-vol { display: inline-flex; align-items: center; gap: var(--u2); color: var(--dim); min-height: 44px; }
.lp-vol input { width: 140px; accent-color: var(--sky); }
.lp-volv { font: var(--fs-sm) var(--mono); min-width: 4.5ch; text-align: right; }
.lp-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-note { margin: 0 0 var(--u3); padding: var(--u3); border-radius: var(--r1); background: var(--panel2); color: var(--text); border-left: 3px solid var(--amber); }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--u3); }
.lp-card { display: flex; flex-direction: column; gap: var(--u2); padding: var(--u4); border-radius: var(--r2);
  background: var(--panel); border: 1px solid var(--line); min-height: 132px; }
.lp-card[data-on="1"] { border-color: var(--green); }
.lp-card.lp-wait { border-style: dashed; }
.lp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--u2); }
.lp-card h2 { margin: 0; font-size: var(--fs-lg); color: var(--ink); line-height: 1.25; }
.lp-air { flex: none; font: 700 var(--fs-sm)/1 var(--font); letter-spacing: .06em; padding: var(--u1) var(--u2); border-radius: var(--r1);
  color: var(--dim); background: var(--panel2); visibility: hidden; }
.lp-card[data-on="1"] .lp-air { visibility: visible; color: var(--green); }
.lp-card.lp-wait .lp-air { visibility: visible; color: var(--dim); }
.lp-freq { font: var(--fs-md) var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.lp-btn { margin-top: auto; min-height: 44px; border-radius: var(--r1); border: 1px solid var(--sky); background: var(--panel); color: var(--sky);
  font: 600 var(--fs-md) var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--u2); }
.lp-btn:hover { background: var(--panel2); }
.lp-btn[aria-pressed="true"] { background: var(--sky); color: var(--on-sky); }
.lp-btn:disabled { border-color: var(--line); color: var(--dim); cursor: not-allowed; background: var(--panel2); }
.lp-btn:focus-visible, .lp-vol input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.lp-vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* The compact layout for an iframe on the company site: no page heading,
   less padding. The panel colours stay, so the text reads on any site. */
body.embed .lp { padding: var(--u3); max-width: none; }
body.embed .lp-head { display: none; }
body.embed .lp-bar { margin-top: 0; }
@media (max-width: 480px) {
  .lp-vol input { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }