/* face.css — TooBits face + readout-player chrome.
 *
 * The face stays at full intensity (#00ff88); the surrounding player
 * chrome borrows the host site's palette (--rule, --bg) when present and
 * falls back to muted-green defaults so it works standalone in the
 * toobits-voice/web/ demo too.
 */

/* Tunable palette (fallbacks if the host page doesn't define --rule etc.) */
:root {
  --tb-bg:        #0a0a0a;
  --tb-face:      #00ff88;          /* bright — the focal point */
  --tb-transcript:rgba(0, 255, 136, 0.92);   /* bright body text */
  --tb-chrome:    rgba(0, 255, 136, 0.55);   /* controls */
  --tb-chrome-hi: rgba(0, 255, 136, 0.85);
  --tb-line:      rgba(0, 255, 136, 0.22);
  --tb-title:     rgba(0, 255, 136, 0.45);
}

/* ── The face itself ──────────────────────────────────────────────────── */

.toobits-face {
  display: block;
  color: var(--tb-face);
  background: var(--tb-bg);

  width: 100%;
  height: auto;
  max-width: 1200px;
  user-select: none;
}
.toobits-face.toobits-face--glow {
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.55))
          drop-shadow(0 0 14px rgba(0, 255, 136, 0.25));
}
.toobits-face.toobits-face--small  { max-width: 480px; }
.toobits-face.toobits-face--medium { max-width: 800px; }


/* ── Readout player chrome ────────────────────────────────────────────── */

.toobits-player {
  display: flex;
  flex-direction: column;
  margin: 2em 0;        /* fills the article container width — matches hr */
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* universal player dimension across the site */

  background: var(--bg, var(--tb-bg));
  border: 1px solid var(--rule, var(--tb-line));
  color: var(--tb-transcript);

  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 22px;
  line-height: 1.45;
}

.toobits-player__face-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 10px 0 10px;        /* push face down ~10% of player height */
  position: relative;
  flex: none;
  /* z-index varies per mode — set by .toobits-player--<mode> */
}
.toobits-player__face-wrap .toobits-face {
  max-width: 100%;
  background: transparent;
}

/* Transcript viewport — mode-agnostic baseline. Mode modifier classes
 * (.toobits-player--standard, .toobits-player--star-wars, …) override
 * positioning/mask. The player is a 16:9 fixed-aspect box; the viewport
 * fills the space between the face-wrap (above) and the scrub+controls
 * strip (below) via `flex: 1` in standard mode, or via absolute-
 * positioned overlay in star-wars mode. */
.toobits-player__transcript-viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;                    /* permit flex shrinkage inside 16:9 box */
  overflow: hidden;
  padding: 0 22px 10px 22px;
  pointer-events: none;             /* face stays clickable through any overlap */
  display: flex;
  align-items: flex-end;
}
.toobits-player__transcript {
  /* see below */
}

/* ── Mode: standard ─────────────────────────────────────────────────────
 * Baseline. Transcript fills the space between face-wrap and scrub via
 * flex: 1 (inherited from the base rule). Tight fade — text dissolves
 * near the top of the viewport but does NOT extend up under the face.
 * Calmer, more traditional caption-track feel. */
.toobits-player--standard .toobits-player__transcript-viewport {
  -webkit-mask-image: linear-gradient(to bottom,
                        transparent       0%,
                        rgba(0,0,0,0.15)  8%,
                        rgba(0,0,0,0.55) 25%,
                        black            55%);
          mask-image: linear-gradient(to bottom,
                        transparent       0%,
                        rgba(0,0,0,0.15)  8%,
                        rgba(0,0,0,0.55) 25%,
                        black            55%);
}

/* ── Mode: star-wars ─────────────────────────────────────────────────────
 * Transcript overlays the entire player area above the controls strip;
 * text crawls UP behind the face (which has z-index 2) with a long
 * gradual fade. Scrub + controls stay anchored at the bottom (also
 * z-index 2 so transcript text doesn't bleed in front of them). */
.toobits-player--star-wars .toobits-player__face-wrap {
  z-index: 2;                       /* face paints OVER the transcript */
  padding-top: 40px;                /* nudge face down ~10% of player height */
}
.toobits-player--star-wars .toobits-player__face-wrap .toobits-face {
  /* Shrink the rendered face via transform — preserves the SVG box's
   * layout dimensions so face-wrap height matches what it would be at
   * full scale. */
  transform: scale(0.9);
  transform-origin: center;
}
.toobits-player--star-wars .toobits-player__scrub {
  margin-top: auto;                 /* push scrub + controls to bottom of
                                       the 16:9 box; transcript is absolute-
                                       positioned so it doesn't participate
                                       in the flex push */
  z-index: 2;
  position: relative;
  /* No background override — keep the base rgb(55, 55, 55) unplayed-track
   * color. Transcript text doesn't reach the scrub strip (viewport inset
   * stops 56px above the bottom), so no need for an opaque cover here. */
}
.toobits-player--star-wars .toobits-player__controls {
  z-index: 2;
  position: relative;
  background: var(--bg, var(--tb-bg));
}
.toobits-player--star-wars .toobits-player__transcript-viewport {
  /* Absolute overlay so the viewport can extend up behind the face
   * area while scrub+controls stay anchored at the bottom (flex
   * children, z-index 2, opaque bg). */
  position: absolute;
  inset: 0 0 56px 0;                /* leave ~56px strip for scrub+controls */
  flex: none;
  -webkit-mask-image: linear-gradient(to bottom,
                        transparent       0%,
                        transparent      18%,
                        rgba(0,0,0,0.05) 30%,
                        rgba(0,0,0,0.15) 45%,
                        rgba(0,0,0,0.40) 60%,
                        rgba(0,0,0,0.75) 75%,
                        black            92%);
          mask-image: linear-gradient(to bottom,
                        transparent       0%,
                        transparent      18%,
                        rgba(0,0,0,0.05) 30%,
                        rgba(0,0,0,0.15) 45%,
                        rgba(0,0,0,0.40) 60%,
                        rgba(0,0,0,0.75) 75%,
                        black            92%);
}
.toobits-player__transcript {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  /* Override the shared --tb-transcript alpha for the scrolling text
   * specifically — slightly more transparent so it reads as ambient
   * backdrop, not foreground content competing with the face/captions. */
  color: rgba(0, 255, 136, 0.74);
  font-size: 12px;
  font-weight: normal;
  line-height: 1.45;
}

/* Captions strip — absolute-positioned over the player chrome, just
 * above the scrub bar. Hidden by default; the `.is-on` modifier is
 * added by the player JS when the viewer toggles CC. The strip is
 * separate from `.toobits-player__transcript` (which is the
 * star-wars-mode flowing transcript): captions show the single
 * current cue only, in YouTube/Netflix style.
 *
 * The cue text is wrapped in an inner <span> so we can paint a
 * text-hugging semi-opaque backdrop (display:inline +
 * box-decoration-break:clone) instead of a full-width bar — this
 * keeps the strip from clashing with the transcript text behind it
 * but only covers the bit of background the caption actually
 * occupies. */
.toobits-player__captions {
  position: absolute;
  left: 0; right: 0;
  bottom: 56px;                       /* sits just above scrub+controls strip */
  z-index: 3;                         /* over face + transcript */
  pointer-events: none;
  display: none;                      /* hidden until CC toggled on */
  padding: 0 18px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.8;                   /* breathing room for the boxed bg */
}
.toobits-player__captions.is-on {
  display: block;
}
.toobits-player__captions:empty {
  display: none;                      /* collapse between cues / before load */
}
.toobits-player__captions > span {
  display: inline;                    /* required for box-decoration-break */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  background: rgba(0, 0, 0, 0.78);    /* semi-opaque backdrop */
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.toobits-player:fullscreen .toobits-player__captions {
  font-size: 26px;
  bottom: 80px;
  padding: 0 4vw;
  line-height: 1.7;
}
.toobits-player:fullscreen .toobits-player__captions > span {
  padding: 6px 14px;
}

/* CC toggle — same shape as the mute / fullscreen buttons. When active
 * (captions on), the button takes the active green colour. The button
 * triggers an above-the-button popup menu listing available languages
 * (probed by the player JS via HEAD requests for sibling .vtt files). */
.toobits-player__cc {
  appearance: none;
  background: transparent;
  color: var(--tb-chrome);
  border: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 80ms ease;
  position: relative;            /* anchor for the absolute-positioned menu */
}
.toobits-player__cc svg {
  display: block;
  width: 18px;
  height: 18px;
}
.toobits-player__cc:hover,
.toobits-player__cc:focus-visible {
  color: var(--tb-face);
  outline: none;
}
.toobits-player__cc.is-active {
  color: var(--tb-face);
}
.toobits-player:fullscreen .toobits-player__cc { width: 40px; height: 40px; }
.toobits-player:fullscreen .toobits-player__cc svg { width: 24px; height: 24px; }

/* Captions language menu — popup above the CC button. Closed by
 * default; `.is-open` is toggled by the player JS. The menu lives as
 * an absolute child of the controls bar (not the cc button) so its
 * width can comfortably exceed the button's 28px frame. */
.toobits-player__cc-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.toobits-player__cc-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid var(--tb-line);
  min-width: 140px;
  padding: 4px 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.toobits-player__cc-menu.is-open {
  display: flex;
}
.toobits-player__cc-menu-row {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--tb-chrome);
  text-align: left;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background 60ms ease, color 60ms ease;
}
.toobits-player__cc-menu-row:hover,
.toobits-player__cc-menu-row:focus-visible {
  background: rgba(0, 255, 136, 0.08);
  color: var(--tb-face);
  outline: none;
}
.toobits-player__cc-menu-row.is-current {
  color: var(--tb-face);
}
.toobits-player__cc-menu-row.is-current::before {
  content: "✓ ";
  margin-right: 2px;
}
.toobits-player:fullscreen .toobits-player__cc-menu {
  font-size: 18px;
  min-width: 200px;
}
.toobits-player:fullscreen .toobits-player__cc-menu-row {
  padding: 10px 20px;
}


/* Scrub bar — thin horizontal progress line, no surrounding borders.
 * Style mirrors a typical inline-video-player progress bar (e.g. Bunny). */
.toobits-player__scrub {
  position: relative;
  height: 4px;
  margin: 6px 14px 0 14px;
  background: rgb(55, 55, 55);
  cursor: pointer;
  touch-action: none;
}
.toobits-player__scrub-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: rgb(119, 119, 119);
  pointer-events: none;
  transition: width 100ms linear;
}
.toobits-player__scrub-fill.is-scrubbing { transition: none; }

.toobits-player__scrub-markers {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.toobits-player__scrub-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: #000000;
  pointer-events: auto;
  cursor: pointer;
}
.toobits-player__scrub-marker:hover {
  background: #000000;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/* Controls bar. */
.toobits-player__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
}

.toobits-player__playpause {
  appearance: none;
  background: transparent;
  color: #ffffff;
  border: 0;
  cursor: pointer;

  width: 36px;          /* ~12% larger */
  height: 36px;
  padding: 0;
  font-family: inherit;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 80ms ease;
}
.toobits-player__playpause svg {
  display: block;       /* removes baseline gap, perfectly centered via flex */
  width: 16px;
  height: 16px;
}
.toobits-player__playpause:hover,
.toobits-player__playpause:focus-visible {
  background: #ff8800;          /* orange-fill on the button itself */
  outline: none;
}
.toobits-player__playpause.is-playing {
  /* Stay white triangle, no border. */
}

.toobits-player__time {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--tb-title);
  margin-left: auto;
}

/* Mute toggle — speaker icon; same hover behaviour as the fullscreen
 * button (colour shift, no bg fill). */
.toobits-player__mute {
  appearance: none;
  background: transparent;
  color: var(--tb-chrome);
  border: 0;
  cursor: pointer;

  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 80ms ease;
}
.toobits-player__mute svg {
  display: block;
  width: 16px;
  height: 16px;
}
.toobits-player__mute:hover,
.toobits-player__mute:focus-visible {
  color: var(--tb-face);
  outline: none;
}

/* Volume slider — slim horizontal range styled to match the scrubber. */
.toobits-player__volume {
  appearance: none;
  -webkit-appearance: none;
  width: 70px;
  height: 4px;
  background: rgb(55, 55, 55);
  border-radius: 0;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 0;
}
.toobits-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(119, 119, 119);
  cursor: pointer;
  border: 0;
}
.toobits-player__volume::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(119, 119, 119);
  cursor: pointer;
  border: 0;
}

/* Prev / next track buttons — playlist clients only. Same shape as the
 * mute / fullscreen buttons (transparent, color-shift on hover). */
.toobits-player__prev,
.toobits-player__next {
  appearance: none;
  background: transparent;
  color: var(--tb-chrome);
  border: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 80ms ease, opacity 80ms ease;
}
.toobits-player__prev svg,
.toobits-player__next svg {
  display: block;
  width: 16px;
  height: 16px;
}
.toobits-player__prev:hover,
.toobits-player__next:hover,
.toobits-player__prev:focus-visible,
.toobits-player__next:focus-visible {
  color: var(--tb-face);
  outline: none;
}
.toobits-player__prev:disabled,
.toobits-player__next:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Fullscreen toggle — same shape as the play button, no hover fill, just
 * a colour-shift to bright green on hover. */
.toobits-player__fullscreen {
  appearance: none;
  background: transparent;
  color: var(--tb-chrome);
  border: 0;
  cursor: pointer;

  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 80ms ease;
}
.toobits-player__fullscreen svg {
  display: block;
  width: 16px;
  height: 16px;
}
.toobits-player__fullscreen:hover,
.toobits-player__fullscreen:focus-visible {
  color: var(--tb-face);
  outline: none;
}

/* When the player itself is the fullscreen element, fill the screen with
 * its bg colour and scale up the chrome so it matches the larger face. */
.toobits-player:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  justify-content: center;
  background: var(--bg, var(--tb-bg));
  font-size: 36px;            /* scales `em`-based viewport heights up */
}
.toobits-player:fullscreen .toobits-player__face-wrap {
  flex: 1 1 auto;
  align-items: center;
  padding: 0;
}
.toobits-player:fullscreen .toobits-face {
  max-width: 90vw;
}
.toobits-player:fullscreen .toobits-player__transcript {
  font-size: 24px;            /* matches the 10% bump from 11→12 at standard size */
}
.toobits-player:fullscreen .toobits-player__time {
  font-size: 16px;
}
.toobits-player:fullscreen .toobits-player__playpause    { width: 48px; height: 48px; }
.toobits-player:fullscreen .toobits-player__playpause svg { width: 22px; height: 22px; }
.toobits-player:fullscreen .toobits-player__fullscreen   { width: 40px; height: 40px; }
.toobits-player:fullscreen .toobits-player__fullscreen svg { width: 22px; height: 22px; }
.toobits-player:fullscreen .toobits-player__mute         { width: 40px; height: 40px; }
.toobits-player:fullscreen .toobits-player__mute svg     { width: 22px; height: 22px; }
.toobits-player:fullscreen .toobits-player__volume       { width: 100px; }