/* ==========================================================================
   tvos.css — shell + widget classes. Requires tokens.css.
   TV classes are prefixed .tv-, phone classes .ph-, widgets .w-.
   State hooks: .is-focused  .is-pressed  .is-disabled / [disabled]  .is-live
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
.caps { text-transform: uppercase; letter-spacing: var(--track-caps); }
.num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--c-muted); }
.amber { color: var(--c-accent); }

/* ============================ TV SHELL =================================== */
.tv {
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink);
  font: 500 var(--tv-t-body)/1.2 var(--f-display); font-stretch: 100%;
  padding: var(--tv-safe-y) var(--tv-safe-x);
  display: flex; flex-direction: column; gap: 2.5rem;
}
/* production: .tv { width:100vw; height:100vh; } with html.tv root sizing */

.tv-ident {                      /* top bar: station ident + clock */
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--tv-col);
  padding-bottom: 1.25rem; border-bottom: var(--tv-hair) solid var(--c-rule);
}
.tv-ident__station { display: flex; align-items: center; gap: 1rem;
  font: 700 var(--tv-t-title)/1 var(--f-display); font-stretch: 68%; letter-spacing: 0.02em; text-transform: uppercase; }
.tv-ident__chan { font: 500 var(--tv-t-meta)/1 var(--f-mono); color: var(--c-muted); }
.tv-ident__clock { font: 500 var(--tv-t-title)/1 var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tv-ident__date { font: 500 var(--tv-t-meta)/1 var(--f-mono); color: var(--c-muted); text-align: right; margin-top: .5rem; }

.tv-tally {                      /* square tally lamp */
  display: inline-block; width: 1.25rem; height: 1.25rem; background: var(--c-accent-dim);
}
.tv-tally.is-live { background: var(--c-accent); }

.tv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 34rem; gap: 4rem; }

.tv-section-head { display: flex; justify-content: space-between; align-items: baseline;
  font: 600 var(--tv-t-meta)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); padding-bottom: .75rem; border-bottom: var(--tv-hair) solid var(--c-rule); margin-bottom: var(--tv-gap); }

/* ---- app grid: channels -------------------------------------------------- */
.tv-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 19.5rem; gap: var(--tv-gap); }
.tv-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.25rem 1.75rem 1.5rem; border: var(--tv-hair) solid var(--c-rule-strong); border-radius: var(--r-1);
  background: var(--c-surface); color: var(--c-ink);
  transition: background-color var(--m-snap) var(--e-snap), color var(--m-snap) var(--e-snap);
}
.tv-tile::before {               /* tally bar slot, empty until focused */
  content: ""; position: absolute; left: -0.125rem; right: -0.125rem; top: -0.125rem; height: var(--tv-tally);
  background: transparent;
}
.tv-tile__ch { display: flex; justify-content: space-between; font: 500 var(--tv-t-meta)/1 var(--f-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tv-tile__name { font: 800 var(--tv-t-tile)/.9 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .01em; }
.tv-tile__sub { font: 500 var(--tv-t-meta)/1.15 var(--f-display); color: var(--c-muted); }
.tv-tile__who { display: none; font: 600 var(--tv-t-meta)/1 var(--f-mono); text-transform: uppercase; }

.tv-tile.is-focused {            /* readable at 3 m: full inversion + tally bar */
  background: var(--c-focus-bg); color: var(--c-focus-ink); border-color: var(--c-focus-bg);
  outline: var(--tv-focus-ring) solid var(--c-focus-bar); outline-offset: .375rem;
}
.tv-tile.is-focused::before { background: var(--c-focus-bar); }
.tv-tile.is-focused .tv-tile__ch,
.tv-tile.is-focused .tv-tile__sub { color: #3B3A33; }
.tv-tile.is-focused .tv-tile__who { display: inline-flex; align-items: center; gap: .5rem; }
.tv-tile.is-running .tv-tile__ch::after { content: "RUNNING"; color: var(--c-accent); }
.tv-tile.is-focused.is-running .tv-tile__ch::after { color: #6B4A00; }

.tv-tile.is-empty { background: transparent; border-style: dashed; border-color: var(--c-rule); justify-content: space-between; }
.tv-tile.is-empty .tv-tile__name { font-size: var(--tv-t-title); color: var(--c-muted); font-weight: 600; }

/* ---- right rail: pairing + remotes --------------------------------------- */
.tv-rail { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.tv-qr { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: end; }
.tv-qr__plate {                  /* the only white on the TV: quiet zone */
  background: var(--c-qr-light); padding: 1.25rem; border-radius: 0; line-height: 0;
}
.tv-qr__plate img { display: block; width: var(--tv-qr); height: var(--tv-qr); image-rendering: pixelated; }
.tv-qr__text { display: flex; flex-direction: column; gap: .75rem; font: 500 var(--tv-t-meta)/1.15 var(--f-display); color: var(--c-muted); }
.tv-qr__code { font: 600 var(--tv-t-title)/1 var(--f-mono); color: var(--c-ink); letter-spacing: .08em; }

.tv-remotes { display: flex; flex-direction: column; }
.tv-remote { display: grid; grid-template-columns: 1.25rem 1fr auto; align-items: center; gap: 1.25rem;
  padding: 1rem 0; border-bottom: var(--tv-hair) solid var(--c-rule); font: 500 var(--tv-t-body)/1 var(--f-display); }
.tv-remote__dot { width: 1.25rem; height: 1.25rem; background: var(--c-ok); }
.tv-remote.is-offline .tv-remote__dot { background: transparent; border: .1875rem solid var(--c-rule-strong); }
.tv-remote.is-offline .tv-remote__name { color: var(--c-muted); }
.tv-remote__meta { font: 500 var(--tv-t-meta)/1 var(--f-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.tv-remote.is-driving .tv-remote__meta { color: var(--c-accent); }

/* ---- legend strip (no cursor: tell people what the remote does) ---------- */
.tv-legend { display: flex; gap: 3rem; align-items: center; padding-top: 1.25rem; border-top: var(--tv-hair) solid var(--c-rule);
  font: 500 var(--tv-t-meta)/1 var(--f-mono); color: var(--c-muted); text-transform: uppercase; }
.tv-key { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; height: 2.75rem; padding: 0 .75rem; margin-right: .75rem;
  border: var(--tv-hair) solid var(--c-rule-strong); border-radius: var(--r-1); color: var(--c-ink); font-weight: 600; }
.tv-legend__end { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- app active ---------------------------------------------------------- */
.tv-app { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-display); }
.tv-app__view { position: absolute; inset: 0; }           /* full-bleed app surface */
.tv-app__slate { position: absolute; top: var(--tv-safe-y); left: var(--tv-safe-x); right: var(--tv-safe-x);
  display: flex; align-items: stretch; height: 4.5rem; background: var(--c-bg); border: var(--tv-hair) solid var(--c-rule); }
.tv-app__slate > * { display: flex; align-items: center; padding: 0 1.5rem; border-right: var(--tv-hair) solid var(--c-rule);
  font: 500 var(--tv-t-meta)/1 var(--f-mono); text-transform: uppercase; color: var(--c-muted); }
.tv-app__slate > .tv-app__tally { background: var(--c-accent); color: var(--c-accent-ink); font-weight: 600; border-right: 0; }
.tv-app__slate > .tv-app__title { font: 700 var(--tv-t-body)/1 var(--f-display); font-stretch: 68%; color: var(--c-ink); letter-spacing: .04em; }
.tv-app__slate > .grow { flex: 1; border-right: 0; }
.tv-app__slate > :last-child { border-right: 0; }

/* ======================== PHONE REMOTE =================================== */
.ph {
  position: relative; width: 390px; height: 844px; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink);
  font: 500 var(--ph-t-body)/1.3 var(--f-display);
  padding: 54px var(--ph-pad) 34px;          /* production: env(safe-area-inset-*) */
  display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
.ph-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }   /* top 40%: read-only */
.ph-controls { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } /* bottom 60%: hands */

/* channel readout: recessed LCD strip */
.ph-readout {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  height: 48px; padding: 0 14px; background: var(--c-surface-2);
  border: 1px solid var(--c-rule); border-radius: var(--r-1);
  box-shadow: inset 0 2px 0 var(--c-shadow);
  font: 500 var(--ph-t-readout)/1 var(--f-mono); font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.ph-readout__ch { color: var(--c-muted); font-size: var(--ph-t-label); }
.ph-readout__app { color: var(--c-accent); letter-spacing: .06em; }
.ph-readout__link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); letter-spacing: .08em; }
.ph-readout__link::before { content: ""; width: 8px; height: 8px; background: var(--c-ok); }
.ph-readout.is-offline .ph-readout__app { color: var(--c-danger); }
.ph-readout.is-offline .ph-readout__link::before { background: var(--c-danger-fill); animation: ph-blink 1s steps(1) infinite; }
@keyframes ph-blink { 50% { opacity: 0; } }

.ph-meta { display: flex; justify-content: space-between; font: 500 var(--ph-t-label)/1 var(--f-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ======================== WIDGETS (.w-*) ================================= */
/* ---- key: the one physical button every widget is made of ----------------- */
.w-key {
  -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer;
  position: relative; min-width: var(--ph-tap); min-height: var(--ph-tap); height: var(--ph-key);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 12px; background: var(--c-raised); color: var(--c-ink);
  border: 1px solid #34352E; border-top-color: #3E3F37; border-radius: var(--r-1);
  box-shadow: 0 4px 0 var(--c-shadow), inset 0 1px 0 rgba(236,230,214,.05);
  font: 700 var(--ph-t-key)/1 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em;
  transform: translateY(0);
  transition: transform var(--m-release) var(--e-snap), box-shadow var(--m-release) var(--e-snap);
}
.w-key small { font: 500 var(--ph-t-micro)/1 var(--f-mono); color: var(--c-muted); letter-spacing: .08em; }
.w-key:active, .w-key.is-pressed {           /* 4px travel, shadow gone, cap darkens */
  transform: translateY(4px); background: var(--c-raised-down);
  box-shadow: 0 0 0 var(--c-shadow), inset 0 2px 3px rgba(0,0,0,.55);
  transition-duration: var(--m-press);
}
.w-key:disabled, .w-key.is-disabled {
  background: var(--c-surface); color: #6E6B60; border-color: var(--c-rule); box-shadow: none; transform: none; cursor: default;
}
.w-key:disabled small, .w-key.is-disabled small { color: #6E6B60; }
.w-key:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.w-key--primary { background: var(--c-accent); color: var(--c-accent-ink); border-color: #FFC233; box-shadow: 0 4px 0 #6B4A00; }
.w-key--primary small { color: #4A3400; }
.w-key--primary:active, .w-key--primary.is-pressed { background: #E09B00; box-shadow: 0 0 0 #6B4A00, inset 0 2px 3px rgba(0,0,0,.35); }
.w-key svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: square; }

/* ---- label --------------------------------------------------------------- */
.w-label { display: flex; flex-direction: column; gap: 6px; }
.w-label__kicker { font: 500 var(--ph-t-label)/1 var(--f-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }
.w-label__text { font: 800 var(--ph-t-title)/1 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .01em; }
.w-label__sub { font: 500 var(--ph-t-body)/1.3 var(--f-display); color: var(--c-muted); }
.w-label--big .w-label__text { font-size: 44px; }

/* ---- dpad: 3×3, square cross, OK in amber ------------------------------- */
.w-dpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; width: 100%; aspect-ratio: 1 / 1; max-height: 310px; }
.w-dpad .w-key { height: auto; }
.w-dpad__up    { grid-area: 1 / 2; }
.w-dpad__left  { grid-area: 2 / 1; }
.w-dpad__ok    { grid-area: 2 / 2; }
.w-dpad__right { grid-area: 2 / 3; }
.w-dpad__down  { grid-area: 3 / 2; }
.w-dpad__corner { display: flex; align-items: center; justify-content: center; font: 500 10px/1 var(--f-mono); color: #4E4D45; }

/* ---- nav row: back / home(hold) / extra ---------------------------------- */
.w-nav { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--ph-gap); }
.w-key--hold { overflow: hidden; }
.w-key--hold::after {            /* charge bar fills while held; JS fires at --m-hold */
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform 0ms;
}
.w-key--hold:active::after, .w-key--hold.is-pressed::after { transform: scaleX(1); transition: transform var(--m-hold) var(--e-linear); }
.w-key--hold.is-charging::after { transform: scaleX(.6); }   /* mockup only: mid-hold */

/* ---- transport ----------------------------------------------------------- */
.w-transport { display: flex; flex-direction: column; gap: 12px; }
.w-transport__row { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: var(--ph-gap); }
.w-transport__row--vol { grid-template-columns: 1fr 1fr 1fr; }
.w-transport .w-key--play { height: 88px; }
.w-transport .w-key--seek { height: 88px; }
.w-scrub { display: flex; flex-direction: column; gap: 8px; }
.w-scrub__bar { position: relative; height: 8px; background: var(--c-surface-2); border: 1px solid var(--c-rule); }
.w-scrub__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-accent); }
.w-scrub__ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--c-bg) calc(10% - 1px) 10%); }
.w-scrub__time { display: flex; justify-content: space-between; font: 500 var(--ph-t-readout)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.w-key.is-on { color: var(--c-accent); }       /* latched (e.g. MUTE on) */
.w-key.is-on::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--c-accent); }

/* ---- big button ---------------------------------------------------------- */
.w-big {
  -webkit-appearance: none; appearance: none; margin: 0; width: 100%; height: 360px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--c-accent); color: var(--c-accent-ink); border: 1px solid #FFC233; border-radius: var(--r-1);
  box-shadow: 0 8px 0 #6B4A00; transform: translateY(0);
  font: 900 var(--ph-t-giant)/.9 var(--f-display); font-stretch: 62%; letter-spacing: .04em; text-transform: uppercase;
  transition: transform var(--m-release) var(--e-snap), box-shadow var(--m-release) var(--e-snap);
}
.w-big small { font: 600 var(--ph-t-label)/1 var(--f-mono); letter-spacing: .1em; color: #4A3400; }
.w-big:active, .w-big.is-pressed { transform: translateY(8px); box-shadow: 0 0 0 #6B4A00, inset 0 4px 10px rgba(0,0,0,.35); background: #E09B00; transition-duration: var(--m-press); }
.w-big:disabled, .w-big.is-disabled { background: var(--c-surface); color: #6E6B60; border: 1px dashed var(--c-rule-strong); box-shadow: none; transform: none; }
.w-big:disabled small, .w-big.is-disabled small { color: var(--c-muted); }
.w-big.is-locked { background: var(--c-ink); color: var(--c-ink-inv); border-color: var(--c-ink); box-shadow: 0 8px 0 #57544A; }

/* ---- text input ---------------------------------------------------------- */
.w-input { display: flex; flex-direction: column; gap: 8px; }
.w-input__label { font: 500 var(--ph-t-label)/1 var(--f-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }
.w-input__row { display: grid; grid-template-columns: 1fr auto; gap: var(--ph-gap); }
.w-input__field {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: var(--ph-key); padding: 0 14px;
  background: var(--c-surface-2); color: var(--c-ink); caret-color: var(--c-accent);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-1); box-shadow: inset 0 2px 0 var(--c-shadow);
  font: 500 20px/1 var(--f-mono);    /* ≥16px stops iOS zoom-on-focus */
}
.w-input__field::placeholder { color: #8A8577; }
.w-input__field:focus, .w-input__field.is-focused { outline: none; border-color: var(--c-accent); box-shadow: inset 0 2px 0 var(--c-shadow), 0 0 0 1px var(--c-accent); }
.w-input__field:disabled { color: #6E6B60; border-color: var(--c-rule); }
.w-input__hint { display: flex; justify-content: space-between; font: 500 12px/1 var(--f-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- small key: secondary actions, still ≥ 56px ------------------------- */
.w-key--small { height: var(--ph-tap); font-size: 16px; padding: 0 10px; }
.w-row { display: flex; flex-wrap: wrap; gap: var(--ph-gap); }
.w-row > .w-key { flex: 1 1 0; }

/* ---- gamepad: d-pad left thumb, A/B right thumb (landscape-friendly) ---- */
.w-gamepad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.w-gamepad .w-dpad { max-height: none; }
.w-gamepad__ab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-gamepad__ab .w-key { height: 88px; font-size: 28px; }

/* ---- status block (reconnecting) ---------------------------------------- */
.w-steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 14px; }
.w-steps > i { background: var(--c-surface-2); border: 1px solid var(--c-rule); }
.w-steps > i.on { background: var(--c-danger-fill); border-color: var(--c-danger-fill); }