/* All Boards — Pulse Live, Table Talk and Stay Awhile taking turns on one
   screen. The bar is the same one the board family wears (see pulse-live.css);
   the stage is three iframes, one on air at a time. */

@font-face {
  font-family: 'InterBlack';
  src: url('../assets/fonts/inter-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  color: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'InterBlack', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --orange: #fc560a;
  --cream: #efd9b9;
  --brown: #4e342e;
  --teal: #077f80;
  --ink: #140d08;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- masthead ---------- */
.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  border-bottom: 3px solid var(--orange);
  white-space: nowrap;
}
.brand {
  justify-self: start;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--cream);
  text-decoration: none;
  text-transform: uppercase;
}
.brand b { color: var(--orange); font-weight: 900; }

/* the three channels: name over source, with a fill that drains while on air */
.channels { justify-self: center; display: flex; border: 1px solid rgba(252, 86, 10, .4); }
.chan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 118px;
  min-height: 44px;
  padding: 7px 14px 9px;
  color: var(--cream);
  opacity: .6;
  overflow: hidden;
}
.chan + .chan { border-left: 1px solid rgba(252, 86, 10, .4); }
.chan:hover { opacity: .9; }
.chan-name { font-family: var(--display); font-weight: 900; font-size: 12px; letter-spacing: .26em; }
.chan-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.chan[aria-selected="true"] { opacity: 1; color: var(--orange); background: rgba(252, 86, 10, .1); }
.chan-fill {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--orange);
  transform-origin: left center;
  transform: scaleX(0);
}
.chan[aria-selected="true"] .chan-fill { transform: scaleX(var(--left, 1)); }

.status { justify-self: end; display: flex; align-items: center; gap: 12px; }
.ic-bar {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .12em; line-height: 1;
  min-width: 26px; height: 26px; padding: 0 7px;
  border: 1px solid rgba(252, 86, 10, .4);
  color: var(--orange); opacity: .85; text-decoration: none;
}
.ic-bar:hover { opacity: 1; }

.modes { display: flex; border: 1px solid rgba(252, 86, 10, .4); overflow: hidden; }
.mode {
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .14em;
  padding: 6px 9px; color: var(--orange); opacity: .75; text-decoration: none;
}
.mode + .mode { border-left: 1px solid rgba(252, 86, 10, .4); }
.mode.on { background: var(--orange); color: var(--ink); opacity: 1; }
a.mode:hover { opacity: 1; }
.modes-row { display: none; }

.live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 900; font-size: 11px; letter-spacing: .3em;
  background: var(--orange); color: var(--ink);
  padding: 6px 10px 6px 9px;
}
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: blink 1.6s ease-in-out infinite; }
.live-badge[aria-pressed="true"] { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); }
.live-badge[aria-pressed="true"] i { background: var(--orange); animation: none; opacity: .5; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- stage ---------- */
.stage { position: relative; flex: 1; min-height: 0; background: #000; }
.screen {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s ease, visibility 0s; }
.hold-note {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0, 0, 0, .78); color: var(--cream); border: 1px solid rgba(252, 86, 10, .5);
  padding: 7px 12px; pointer-events: none;
}

/* ---------- narrow screens: the family switch gets its own row ---------- */
@media (max-width: 1240px) {
  .status .modes { display: none; }
  .modes-row { display: flex; border-bottom: 1px solid rgba(252, 86, 10, .4); }
  .modes-row .mode { flex: 1; text-align: center; padding: 7px 4px; }
}

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; gap: 10px; padding: 6px 10px; }
  .brand-pre { display: none; }
  .channels { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .chan { flex: 1; min-width: 0; padding: 6px 10px 8px; }
  .status { gap: 8px; }
  .status .modes { display: none; }
  .modes-row { display: flex; border-bottom: 1px solid rgba(252, 86, 10, .4); }
  .modes-row .mode { flex: 1; text-align: center; padding: 8px 4px; }
  .hold-note { width: max-content; max-width: 92vw; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.on { transition: none; }
  .live-badge i { animation: none; }
}