/*
 * Z02 Subtitle Stage, on the shared core (build 3, Nov 8, 2026).
 *
 * The caption line is the hero. The core's real caption track renders LARGE: Archivo ExtraBold, a
 * strong grotesque, on one measured dark band just above the control row (the cue rules live in
 * z02-cues.js, adopted into <mux-video>'s shadow root, and read the custom properties set here).
 * Everything else steps back into one quiet smoked bar, scaled up for the same low-vision audience
 * (Gus, Nov 7, 2026): bigger glyphs, thicker lines, and the captions chip still the largest
 * control, all with breathing room inside the bar. The center disc keeps its original size; only
 * its play triangle grows. Captions stay a real toggleable track; nothing is burned in.
 *
 * Every control image is the ChatGPT sheet's own art (round3/sheets/z02-subtitle-sheet.png), cut with
 * build/tools/cut_art.py: white glyphs, the white CC chip, the fine seek line split at its baked
 * handle, the lone handle, the opaque smoky center disc. The CSS draws surfaces (the bar, the band,
 * a blur behind the disc), never a glyph.
 *
 * Off states, this entry's own: captions off returns the chip to its plain face at reduced emphasis
 * (a quieter, dimmer, slightly smaller chip); muted shows the sheet's mute face, painted by the
 * Video.js mute component itself.
 */

@font-face {
  font-family: "Archivo";
  src: url(fonts/Archivo-800.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.sk-root[data-skin="z02"] {
  --media-accent-color: #ffffff;
  --media-accent-text-color: #0e0c0b;
  --media-border-radius: 18px;
  --media-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* smoke: the one surface color, for the bar, the band, the chips and the cards */
  --z2-smoke: 20 18 16;
  --z2-bar-a: .88;
  --z2-scrim: rgb(14 12 11 / .84);

  /* the hero caption (read by z02-cues.js inside the shadow root) */
  --z2-cue-font: "Archivo", "Inter", system-ui, sans-serif;
  --z2-cue-size: max(15px, 136%);
  --z2-band-pad: .24em .6em .3em;
  --z2-band-r: 14px;
  --z2-band-max: 92%;

  /* seek strip geometry: the line's end cap is .5385 of the strip height (art.json, cap 14 of 26) */
  --z2-strip-h: 12px;
  --z2-strip-slice: 14;
  --z2-cap: .5385;

  /* the bar: Gus's scale-up (Nov 7, 2026, 9:33 PM CT): every control bigger, every line thicker,
     and the bar grows with them so each glyph keeps real breathing room on all sides (the icon
     sits 12px inside its 56px button, and the button sits 10px inside the bar's edge) */
  --z2-inset: 20px;
  --z2-bottom: 16px;
  --z2-bar-pad: 10px;
  --z2-bar-h: calc(var(--sk-hit) + var(--z2-bar-pad) * 2);
  --z2-cc-w: 84px;

  --sk-pad: var(--z2-bar-pad);
  --sk-hit: 56px;
  --sk-icon: 32px;
  --sk-r-outer: var(--media-border-radius);
  --sk-ink: #ffffff;
  --sk-ink-2: #c9c4c0;
  --sk-surface: rgb(var(--z2-smoke) / .9);
  --sk-surface-solid: rgb(var(--z2-smoke));
  --sk-blur: 18px;
  --sk-hairline: rgb(255 255 255 / .1);
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .2), 0 12px 30px rgb(0 0 0 / .3);
  --sk-focus: #ffffff;
  --sk-focus-gap: #0e0c0b;
  --sk-error-accent: #ffffff;
  /* no gradient scrim over the picture: it would sit over the caption band and dim the words */
  --sk-scrim: none;
  /* the band rests a measured 14px above the bar: bar bottom 16 + bar 76 + 14. The core parses this
     with parseFloat, so it stays a plain px value (a calc() here reads as 0) */
  --sk-cue-clearance: 106px;
}

/* where the cue box is styleable (Chromium, WebKit) the band is anchored by its bottom edge at this
   height, read inside the shadow root; it follows the container, like the bar it rests on */
.sk-root[data-skin="z02"] > mux-video {
  --z2-cue-bottom: calc(var(--z2-bottom) + var(--z2-bar-h) + 14px);
}

/* ---------- The bar: one quiet row of smoked glass, scaled up ---------- */

.z2-bar {
  position: absolute;
  left: var(--z2-inset);
  right: var(--z2-inset);
  bottom: var(--z2-bottom);
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--z2-bar-h);
  padding: var(--z2-bar-pad) calc(var(--z2-bar-pad) + var(--sk-hit) + 6px) var(--z2-bar-pad) var(--z2-bar-pad);
  border-radius: var(--sk-r-outer);
  background: rgb(var(--z2-smoke) / var(--z2-bar-a));
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
  backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
  box-shadow: inset 0 0 0 1px var(--sk-hairline), var(--sk-shadow);
  color: var(--sk-ink);
}

/* Buttons: the art is the glyph; hover lights a quiet tile behind it (concentric: 18 - 6 = 12px) */
.sk-root[data-skin="z02"] :is(.z2-bar .sk-btn, .sk-fs) {
  --sk-btn-radius: var(--sk-r-inner);
  transition: background-color var(--sk-exit) linear;
}
.sk-root[data-skin="z02"] :is(.z2-bar .sk-btn, .sk-fs):hover {
  background-color: rgb(255 255 255 / .1);
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z02"] :is(.z2-bar .sk-btn, .sk-fs) .sk-icon {
    transition: scale var(--sk-exit) var(--sk-ease), opacity var(--sk-exit) linear;
  }
  .sk-root[data-skin="z02"] :is(.z2-bar .sk-btn, .sk-fs):active .sk-icon {
    scale: .92;
    transition-duration: 60ms;
  }
}

/* Fullscreen sits at the bar's end (it is last in the markup so narrow layouts can move it) */
.sk-root[data-skin="z02"] .sk-controls > .sk-fs {
  position: absolute;
  right: calc(var(--z2-inset) + var(--z2-bar-pad));
  bottom: calc(var(--z2-bottom) + var(--z2-bar-pad));
}

/* ---------- Captions chip: the largest control on the bar ---------- */

.sk-root[data-skin="z02"] .z2-bar .sk-cc {
  width: var(--z2-cc-w);
}
.sk-root[data-skin="z02"] .z2-bar .sk-cc .sk-icon {
  width: calc(var(--z2-cc-w) - 12px);
  height: 48px;
}
/* the chip itself is the state: no extra on-bar under it */
.sk-root[data-skin="z02"] .sk-cc::after {
  content: none;
}
/* captions off: the chip returns to its plain face at reduced emphasis, quieter, dimmer, smaller */
.sk-root[data-skin="z02"]:not([data-captions]) .z2-bar .sk-cc .sk-icon {
  opacity: .42;
  scale: .86;
}
.sk-root[data-skin="z02"]:not([data-captions]) .z2-bar .sk-cc:hover .sk-icon {
  opacity: .62;
}

/* ---------- Time: tabular figures, quiet ---------- */

.z2-bar .sk-time {
  padding: 0 8px 0 10px;
  gap: .3em;
  font: 500 20px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.z2-bar .sk-time media-time-separator,
.z2-bar .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the sheet's fine line, white played, warm gray ahead ---------- */

.z2-bar .sk-seek {
  --sk-seek-hit: 48px;
  --sk-seek-radius: var(--sk-r-inner);
  margin-inline: 8px 4px;
}
.sk-root[data-skin="z02"] .sk-track,
.sk-root[data-skin="z02"] .sk-seek[data-interactive] .sk-track {
  height: var(--z2-strip-h);
  border-radius: calc(var(--z2-strip-h) / 2);
  background: none;
  overflow: hidden;
}
.sk-root[data-skin="z02"] .sk-seek[data-interactive] {
  --z2-strip-h: 14px;
}
/* unplayed: the strip under everything; lifted a step so the line reads on the smoke (3:1 floor) */
.sk-root[data-skin="z02"] .sk-track::before,
.sk-root[data-skin="z02"] .sk-track > :is(.sk-buffer, .sk-fill) {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--z2-strip-h) * var(--z2-cap));
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--z2-strip-slice) fill;
  border-image-width: 0 calc(var(--z2-strip-h) * var(--z2-cap));
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="z02"] .sk-track::before {
  filter: brightness(1.3);
}
/* buffered: the same gray line, lighter */
.sk-root[data-skin="z02"] .sk-track > .sk-buffer {
  filter: brightness(1.8);
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the white strip, clipped at the fill */
.sk-root[data-skin="z02"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}

/* the thumb: the sheet's lone white handle */
.sk-root[data-skin="z02"] .sk-seek .sk-thumb {
  --sk-thumb: 26px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45));
  /* thumb containment (U16 standard): the core centers the thumb on the fill percentage, so
     unclamped it spills half its width past the track at 0% and 100%. Travel is clamped to
     [half width + 4px, 100% - half width - 4px]: the 4px covers the 1.15 drag grow (26px -> 29.9px),
     so the handle stays fully inside its track at both ends at every width. */
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 4px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 4px));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z02"] .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="z02"] .sk-seek[data-interactive] .sk-thumb {
    scale: 1.15;
    transition-duration: var(--sk-enter);
  }
}

/* ---------- Volume: the mute glyph and a short run of the same line ---------- */

.z2-bar .sk-volume {
  gap: 0;
}
.sk-root[data-skin="z02"] .sk-volume-slider {
  --sk-vol-w: 84px;
  --z2-strip-h: 10px;
  margin-inline: 4px 2px;
}
.sk-root[data-skin="z02"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 20px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45));
  /* thumb containment (U16 standard): travel clamped to [half width, 100% - half width]; the
     volume handle never grows (the core reveals it by scale 0 -> 1 only), so no extra allowance. */
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 0px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 0px));
}

/* Preview: the storyboard frame, the time on a smoke chip */
.z2-bar .sk-preview {
  bottom: calc(100% + 14px);
}
.z2-bar .sk-preview-image {
  --sk-preview-radius: 10px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18), var(--sk-shadow);
}
.z2-bar .sk-preview-time {
  padding: 5px 9px;
  border-radius: 8px;
  background: rgb(var(--z2-smoke) / .94);
  box-shadow: inset 0 0 0 1px var(--sk-hairline);
  font: 500 16px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
}

/* ---------- Center play: the sheet's opaque smoky disc, frosted by the picture behind it ---------- */

.sk-root[data-skin="z02"] .sk-center {
  padding-bottom: calc(var(--z2-bottom) + var(--z2-bar-h) * .5);
}
.sk-root[data-skin="z02"] .sk-bigplay {
  --sk-icon: 104px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--sk-icon);
  height: var(--sk-icon);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* a blur of the picture behind the disc, so the smoke reads as frosted glass (a surface, not art) */
.sk-root[data-skin="z02"] .sk-bigplay::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sk-root[data-skin="z02"] .sk-bigplay .sk-icon {
  opacity: .9;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .28));
  transition: opacity var(--sk-exit) linear;
}
.sk-root[data-skin="z02"] .sk-bigplay:hover .sk-icon {
  opacity: 1;
  transition-duration: var(--sk-enter);
}
/* Gus's correction (Nov 7, 2026, 9:33 PM CT): the disc keeps its ORIGINAL size; only the triangle
   inside it grows. The disc art carries a baked triangle (about 38x45px at this size), so the
   sheet's own play glyph is layered over it at 58x68px (its triangle about 54x64px, +42%), centered
   on the baked one and large enough to cover it completely. Both visible faces of this button
   (play, replay) are the same disc, and the button itself hides while the video plays, so the
   overlay needs no state rules of its own. */
.sk-root[data-skin="z02"] .sk-bigplay .z2-tri {
  width: 58px;
  height: 68px;
  translate: 4px 0;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / .25));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z02"] .sk-bigplay .sk-icon {
    transition: opacity var(--sk-exit) linear, scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="z02"] .sk-bigplay:hover .sk-icon {
    scale: 1.04;
    transition-duration: var(--sk-enter);
  }
  .sk-root[data-skin="z02"] .sk-bigplay:active .sk-icon {
    scale: .97;
    transition-duration: 60ms;
  }
}

/* ---------- Designed states ---------- */

/* Loading: the sheet's white gear turns on a smoke disc */
.sk-root[data-skin="z02"] .sk-spinner {
  width: 76px;
  height: 76px;
  background: rgb(var(--z2-smoke) / .86);
}
.sk-root[data-skin="z02"] .sk-spinner .sk-icon {
  width: 40px;
  height: 40px;
}

/* Error: a smoke card; the white pill button echoes the CC chip (8px pad + 10px corners = 18px card) */
.sk-root[data-skin="z02"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 18px;
  background: rgb(var(--z2-smoke) / .94);
}
.sk-root[data-skin="z02"] .sk-error-title {
  padding-inline: 14px;
  font: 800 20px/1.2 "Archivo", var(--media-font-family);
}
.sk-root[data-skin="z02"] .sk-error-text {
  padding-inline: 14px;
  color: #e6e1dc;
}
.sk-root[data-skin="z02"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #0e0c0b;
  font: 800 16px/1 "Archivo", var(--media-font-family);
}
.sk-root[data-skin="z02"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 12px;
  background: rgb(var(--z2-smoke) / .92);
  font: 800 16px/1 "Archivo", var(--media-font-family);
}

/* ---------- Mid widths: a tighter row; volume is mute plus hotkeys below 680px ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="z02"] :is(.sk-controls, .sk-center),
  .sk-root[data-skin="z02"] > mux-video {
    --z2-inset: 12px;
    --z2-bottom: 10px;
    --z2-cc-w: 78px;
  }
  .z2-bar {
    gap: 6px;
  }
  .z2-bar .sk-time {
    padding: 0 4px 0 6px;
    font-size: 17px;
  }
  .sk-root[data-skin="z02"] .sk-bigplay {
    --sk-icon: 88px;
  }
  .sk-root[data-skin="z02"] .sk-bigplay .z2-tri {
    width: 49px;
    height: 58px;
    translate: 3px 0;
  }
  /* the paused disc stays clear of the caption band (one line, about 10.6% of the player high, 100px up) on short players:
     the area it centers in ends higher there (Nov 15, 2026: at a 520px player it covered the band's top 5px). From about
     570px wide this is the plain half-bar rule again */
  .sk-root[data-skin="z02"] .sk-center {
    padding-bottom: max(calc(var(--z2-bottom) + var(--z2-bar-h) * .5), calc(300px - 44.33cqw));
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="z02"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows inside the one bar (the seek on top), fullscreen at its end ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="z02"] :is(.sk-controls, .sk-center),
  .sk-root[data-skin="z02"] > mux-video {
    --z2-band-r: 8px;
    --z2-inset: 8px;
    --z2-bottom: 8px;
    --z2-bar-pad: 6px;
    --z2-cc-w: 68px;
    --sk-hit: 48px;
    --sk-icon: 28px;
    --z2-bar-h: calc(var(--z2-bar-pad) * 2 + 36px + 4px + 48px);
  }
  .z2-bar {
    display: grid;
    grid-template-columns: var(--sk-hit) var(--sk-hit) auto 1fr var(--z2-cc-w) var(--sk-hit);
    grid-template-rows: 36px var(--sk-hit);
    gap: 4px 4px;
    padding: var(--z2-bar-pad);
    border-radius: 14px;
  }
  .z2-bar .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    --sk-seek-hit: 36px;
    margin-inline: 12px;
  }
  .z2-bar .sk-play { grid-column: 1; grid-row: 2; }
  .z2-bar .sk-volume { grid-column: 2; grid-row: 2; }
  .z2-bar .sk-time { grid-column: 3; grid-row: 2; font-size: 15px; }
  .z2-bar .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="z02"] .z2-bar .sk-cc .sk-icon {
    height: 40px;
  }
  .sk-root[data-skin="z02"] .sk-bigplay {
    --sk-icon: 64px;
  }
  .sk-root[data-skin="z02"] .sk-bigplay .z2-tri {
    width: 36px;
    height: 42px;
    translate: 2px 0;
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is */
  .sk-root[data-skin="z02"][data-started]:not([data-ended]) .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  /* the bar sits above the center layer, so on phones the paused disc must clear the seek row's touch box (44px, from
     106px up): the area it centers in ends higher on short players, 6px above that box (Nov 15, 2026: at 360 a tap on the
     lower triangle seeked). Players from about 410px wide keep the plain half-bar rule */
  .sk-root[data-skin="z02"] .sk-center {
    padding-bottom: max(calc(var(--z2-bottom) + var(--z2-bar-h) * .5), calc(288px - 56.25cqw));
  }
  /* the preview stands above the seek, the top row of the bar: its frame shrinks so the whole preview stays inside the
     player (Nov 15, 2026: it rose 39 to 56px out of the top on phones) */
  .z2-bar .sk-preview-image {
    max-width: min(160px, 100cqw - 280px);
  }
}
/* phones (under a 380px player): the bottom row needs 346px with the full time, so the time shows the current time only (the
   seek still announces "N seconds of 51 seconds") and the preview shows its time chip only, no frame (Nov 15, 2026: the CC
   chip covered fullscreen by 15px at 375 and 30px at 360, and the seek ran past the bar) */
@container sk (max-width: 379px) {
  .z2-bar .sk-time :is(media-time-separator, media-time[data-type="duration"]) {
    display: none;
  }
  .z2-bar .sk-preview-image {
    display: none;
  }
}
@media (pointer: coarse) {
  .sk-root[data-skin="z02"] .z2-bar .sk-seek {
    height: max(var(--sk-seek-hit, 32px), 44px);
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 851px) {
  .sk-root[data-skin="z02"] {
    --sk-cue-clearance: 100px; /* 10 + 76 + 14 */
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="z02"] {
    --sk-cue-clearance: 122px; /* 8 + (6 + 36 + 4 + 48 + 6) + 14 */
  }
}

/* ---------- Preference fallbacks ---------- */

/* Reduced transparency and more contrast: solid smoke, solid band, no blur */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="z02"] {
    --z2-bar-a: 1;
    --z2-scrim: rgb(14 12 11);
    --sk-blur: 0px;
  }
  .sk-root[data-skin="z02"] .sk-bigplay::before {
    display: none;
  }
  .sk-root[data-skin="z02"] .sk-bigplay .sk-icon {
    opacity: 1;
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="z02"] {
    --sk-focus-w: 3px;
  }
  .sk-root[data-skin="z02"] .sk-track::before {
    filter: brightness(1.6);
  }
  .sk-root[data-skin="z02"]:not([data-captions]) .z2-bar .sk-cc .sk-icon {
    opacity: .6;
  }
}

/* Forced colors: the bar and band take system colors; the white glyph art keeps a CanvasText
   outline so it reads on a light or dark Canvas (images are never recolored) */
@media (forced-colors: active) {
  .z2-bar {
    background: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sk-root[data-skin="z02"] :is(.z2-bar .sk-btn, .sk-fs, .sk-bigplay, .sk-spinner) .sk-icon {
    filter: drop-shadow(1px 0 0 CanvasText) drop-shadow(-1px 0 0 CanvasText) drop-shadow(0 1px 0 CanvasText) drop-shadow(0 -1px 0 CanvasText);
  }
  .sk-root[data-skin="z02"] .sk-fs {
    background: Canvas;
  }
  .sk-root[data-skin="z02"] .sk-bigplay::before {
    display: none;
  }
  .sk-root[data-skin="z02"] .sk-track {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="z02"] .sk-track::before {
    border-image: none;
    background: Canvas;
    filter: none;
  }
  .sk-root[data-skin="z02"] .sk-track > .sk-buffer {
    border-image: none;
    background: repeating-linear-gradient(90deg, CanvasText 0 1px, Canvas 1px 4px);
    filter: none;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z02"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z02"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="z02"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}