/* ==========================================================================
   NITRATE — cast picker for the Watch player.  Pairs with watchcast.js.
   Owns exactly these two files.

   Built on tokens.css (--ground / --ink / --accent / --ok), so it inherits the
   light and dark palettes rather than defining a third one.  Every colour here
   is a token or a colour-mix of one; nothing is hard-coded to a theme.
   ========================================================================== */

.wcast {
  position: absolute;
  z-index: 9000;
  min-width: 290px;
  max-width: 380px;
  margin-top: 6px;
  background: var(--ground);
  color: var(--ink);
  border: var(--hair) solid color-mix(in srgb, var(--ink) 26%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 26%, transparent);
  font-family: var(--font-ui);
  font-size: var(--size-dense);
}

/* -- header ---------------------------------------------------------------- */
.wcast-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px var(--pad);
  border-bottom: var(--hair) solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.wcast-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.wcast-again, .wcast-x {
  background: none;
  border: var(--hair) solid color-mix(in srgb, var(--ink) 24%, transparent);
  color: inherit;
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}
.wcast-x { border: 0; font-size: 16px; line-height: 1; padding: 0 4px; }
.wcast-again:hover, .wcast-x:hover { border-color: var(--accent); color: var(--accent); }
.wcast-again[disabled] { opacity: .5; cursor: default; }

/* -- the target rows ------------------------------------------------------- */
.wcast-list { padding: 4px 0; max-height: 320px; overflow-y: auto; }

.wcast-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main pill" "why why" "alt alt";
  gap: 2px 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: inherit;
  font: inherit;
  padding: 8px var(--pad);
  cursor: pointer;
}
.wcast-row:hover  { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.wcast-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.wcast-main { grid-area: main; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wcast-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcast-sub  { opacity: .6; font-size: 11px; }
.wcast-why  { grid-area: why; opacity: .6; font-size: 11px; }
.wcast-alt  { grid-area: alt; font-size: 10.5px; opacity: .55; font-style: italic; }

/* A screen that is off, or that cannot take our stream, must LOOK like it.
   An earlier picker on this estate showed a switched-off television exactly
   like a working one and then failed silently when it was chosen. */
.wcast-row.is-off  { border-left-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.wcast-row.is-off .wcast-name { opacity: .55; }
.wcast-row.is-dead { cursor: default; opacity: .45; }
.wcast-row.is-dead:hover { background: none; }
.wcast-row.is-busy { opacity: .6; cursor: progress; }

/* -- state pill ------------------------------------------------------------ */
.wcast-pill {
  grid-area: pill;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: var(--hair) solid currentColor;
  opacity: .8;
}
.wcast-pill.p-ok   { color: var(--ok); }
.wcast-pill.p-off  { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.wcast-pill.p-dead { color: color-mix(in srgb, var(--ink) 40%, transparent); }

/* -- messages -------------------------------------------------------------- */
.wcast-note {
  padding: 8px var(--pad);
  opacity: .6;
  font-size: 11px;
  line-height: 1.45;
}
.wcast-foot:empty { display: none; }

.wcast-err {
  margin: 0 var(--pad) 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.wcast-busy { margin-bottom: 6px; }
.wcast-take {
  background: none;
  border: var(--hair) solid var(--accent);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  padding: 4px 9px;
  cursor: pointer;
}
.wcast-take:hover { background: var(--accent); color: var(--ground); }

/* -- preparing a slimmed stream -------------------------------------------
   Shown while castslim.py stream-copies a many-subtitle film down to the two
   tracks anybody here reads.  It is seconds, not minutes, so this is
   deliberately quiet: a line of explanation and an honest bar, no spinner
   theatre.  The percentage is ffmpeg's own out_time, not an animation. */
.wcast-prep {
  margin: 0 var(--pad) 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.wcast-prep-head { margin-bottom: 3px; }
.wcast-prep-why  { opacity: .6; margin-bottom: 7px; }
.wcast-prep-bar {
  height: 3px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  overflow: hidden;
}
.wcast-prep-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .5s linear;
}
.wcast-prep-pct { margin-top: 5px; opacity: .55; font-variant-numeric: tabular-nums; }

/* -- the live cast --------------------------------------------------------
   Which screen, what it is doing, and the way off it.  ⛔ NOT a transport:
   the player's own bar drives the television — see the ONE FILM, ONE POSITION
   note in watchcast.js for why a second scrubber cannot live here. */
.wcast-play { padding: 12px var(--pad) 14px; }
.wcast-on   { font-weight: 600; margin-bottom: 6px; }
.wcast-time { font-family: var(--font-mono); font-size: 11px; opacity: .7; margin-bottom: 8px; }
.wcast-hint { font-size: 11px; line-height: 1.45; opacity: .6; margin-bottom: 12px; }

.wcast-ctl { display: flex; gap: 8px; }
.wcast-btn {
  flex: 1;
  background: none;
  border: var(--hair) solid color-mix(in srgb, var(--ink) 26%, transparent);
  color: inherit;
  font: inherit;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 0;
  cursor: pointer;
}
.wcast-btn:hover { border-color: var(--accent); color: var(--accent); }

/* -- the trigger ----------------------------------------------------------- */
.wcast-trigger {
  background: none;
  border: var(--hair) solid currentColor;
  color: inherit;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 5px 12px;
  cursor: pointer;
}
.wcast-trigger:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .wcast-fill { transition: none; }
}

/* ==========================================================================
   THE PHONE.  ⛔ NOT A SECOND PICKER AND NOT A SECOND TRANSPORT — the model is
   untouched: this panel chooses a screen and reports what that screen is
   doing, and while a cast is live the TELEVISION is the playback session and
   the player's own bar commands it.  What changes below is only that a thumb
   can work the thing.

   🔴 The query is `(hover: none)`, NOT a width.  This panel is opened from
   inside the player, and a phone watching a film is held in LANDSCAPE, where
   the viewport is 844 CSS px and every `max-width` rule is false.  Sizing
   these controls off a width would leave a 17x16px close button and a 24px
   "Look again" on the one screen where they are pressed with a thumb.
   Measured before this block, at 390x844 AND at 844x390: .wcast-again was
   74.6x23.9 and .wcast-x was 17.2x16.0.
   ========================================================================== */
@media (hover: none) {
  /* The player hangs this panel in a full-width host on a phone (see
     .nwx-casthost in watch.css), so the desktop's 290-380px window becomes the
     width it is given. */
  .wcast { max-width: none; width: 100%; }

  .wcast-head { padding: 4px 6px 4px var(--pad); gap: 4px; }
  .wcast-again {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px;
  }
  .wcast-x {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 0;
  }

  /* a screen is chosen with a thumb, so a row is a thumb tall */
  .wcast-row { min-height: 48px; padding: 11px var(--pad); }
  /* The desktop's fixed 320px list is most of a LANDSCAPE phone's screen, and
     if the list does not scroll then the whole panel does — which carries the
     × away with it.  Held to a fraction of the viewport instead, so the header
     with the way out stays put in either orientation. */
  .wcast-list { max-height: min(46vh, 320px); }

  .wcast-btn, .wcast-take { min-height: 44px; font-size: 12px; padding: 0 12px; }
  .wcast-ctl { gap: 10px; }
  .wcast-trigger { min-height: 44px; padding: 0 14px; }
}