/*
 * C02 Waveform Dock, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * A smoked glass dock floats above the picture. The controls are the art Gemini generated for this
 * design (sheets2/c02-waveform-sheet.jpg): the coral play and pause discs, and the five outline badges
 * (volume, mute, captions, fullscreen, gear). The badges were drawn in dark ink for the magenta page;
 * on the dark dock they are shown inverted by a CSS filter on the PNG (an image operation, like the
 * light icons in the winning render), never redrawn.
 *
 * Its seek bar is the video's own audio waveform: waveform.js paints bars from build-time peaks on a
 * canvas and applies them as a PNG mask on the stock Video.js time slider track, so every tone below
 * (unplayed, buffered, pointer, played) is clipped to the bars. The tones are the sheet's: coral
 * #FF6A64 for played, light #CDCACC for unplayed (medians of the sheet's bar pixels).
 * Radius system: 32px dock = 24px play circle + 8px pad; 44px chips are circles on that pad.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url(fonts/BricolageGrotesque-600.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url(fonts/Manrope-600.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.sk-root[data-skin="c02"] {
  /* v10 customization surface */
  --media-accent-color: #ff6b57;
  --media-accent-text-color: #17171c;
  --media-border-radius: 32px;
  --media-font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Glass, sized against the sample's brightest frame (BUILD-LOG, C02 contrast) */
  --sk-pad: 8px;
  --sk-ink: #f4f4f6;
  --sk-ink-2: #cacad2;
  --sk-surface: rgb(23 23 28 / .78);
  --sk-surface-solid: #17171c;
  --sk-blur: 24px;
  --sk-hairline: rgb(255 255 255 / .10);
  --sk-hairline-strong: rgb(255 255 255 / .24);
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 12px 32px rgb(0 0 0 / .28);

  /* Waveform tones from the sheet: unplayed light, buffered lighter, pointer near white, played coral */
  --sk-track: #a9a6a8;
  --sk-buffer: #cdcacc;
  --wd-hover: #ecebec;
  --sk-fill: #ff6a64;
  --sk-vol-fill: #ff6a64;
  --sk-cc-on: #ff6a64;

  --sk-focus: #ffffff;
  --sk-focus-gap: #17171c;
  --sk-scrim: none;
  /* Nov 15, 2026: Chrome has no VTTCue.lineAlign, so a cue hangs below the core's line instead of sitting on it;
     136 = the dock's top (64px + 20px) + a one-line cue on the 630px page player + a gap (104 left the cue's
     lower part behind the dock) */
  --sk-cue-clearance: 136px;

  --wd-coral: #ff6b57;
  --wd-coral-hover: #ff8070;
  --wd-deep: #17171c;
  --wd-dock-w: min(720px, 100% - 32px);
  --wd-dock-h: 64px;
  --wd-dock-bottom: 20px;
}

/* ---------- The dock ---------- */

.wd-dock {
  position: absolute;
  left: 50%;
  bottom: var(--wd-dock-bottom);
  display: flex;
  align-items: center;
  gap: 4px;
  width: var(--wd-dock-w);
  height: var(--wd-dock-h);
  /* the right pad leaves room for fullscreen, which sits over the dock's end (see .sk-fs) */
  padding: var(--sk-pad) calc(var(--sk-pad) + var(--sk-hit) + 4px) var(--sk-pad) var(--sk-pad);
  border-radius: var(--sk-r-outer);
  background: var(--sk-surface);
  -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);
  translate: -50% 0;
}

/* Chips: the outline badges from the sheet, 44px circles on the 8px pad, inverted to light ink */
.sk-root[data-skin="c02"] .sk-btn {
  --sk-btn-radius: 50%;
  --sk-icon: 44px;
  transition: none;
}
.sk-root[data-skin="c02"] :is(.sk-mute, .sk-cc, .sk-fs) .sk-icon {
  filter: invert(1);
  transition: filter var(--sk-exit) linear;
}
.sk-root[data-skin="c02"] :is(.sk-mute, .sk-cc, .sk-fs):hover .sk-icon {
  filter: invert(1) brightness(1.08) drop-shadow(0 0 6px rgb(255 255 255 / .35));
  transition-duration: var(--sk-enter);
}
/* Captions off: the badge dims (filter); on: the coral bar under it */
.sk-root[data-skin="c02"] .sk-cc:not([data-active]) .sk-icon {
  filter: invert(1) brightness(.62);
}
.sk-root[data-skin="c02"] .sk-cc::after {
  bottom: 2px;
}

/* Play: the sheet's 48px coral disc; its 24px radius + the 8px pad = the dock's 32px corner */
.wd-dock .sk-play {
  --sk-icon: 48px;
  width: 48px;
  height: 48px;
}
.wd-dock .sk-play .sk-icon {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25));
  transition: filter var(--sk-exit) linear;
}
.wd-dock .sk-play:hover .sk-icon {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)) brightness(1.08);
  transition-duration: var(--sk-enter);
}

/* Time: Manrope, tabular, reserved width (core) */
.wd-dock .sk-time {
  padding: 0 6px 0 8px;
  font: 600 14px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
}
.wd-dock .sk-time media-time[data-type="duration"],
.wd-dock .sk-time media-time-separator {
  color: var(--sk-ink-2);
}

/* Volume: an 80px slider, its thumb revealed from the mute button's edge (core) */
.wd-dock .sk-volume-slider {
  --sk-vol-w: 80px;
  margin-inline: 2px 6px;
}
.wd-dock .sk-volume-slider .sk-track {
  background: var(--sk-track);
}
/* thumb containment (Gus's rule, Nov 7): 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, 100% - half width] so the thumb stays fully
   inside its track at both ends. (The seek playhead is a 2px line, contained by
   design, and needs no clamp.) */
.wd-dock .sk-volume-slider .sk-thumb {
  left: clamp(calc(var(--sk-thumb, 12px) / 2), var(--media-slider-fill), calc(100% - var(--sk-thumb, 12px) / 2));
}

/* Fullscreen sits over the dock's last slot on desktop; it moves to the top-right when narrow */
.sk-root[data-skin="c02"] .sk-fs {
  position: absolute;
  right: calc((100% - var(--wd-dock-w)) / 2 + var(--sk-pad));
  bottom: calc(var(--wd-dock-bottom) + (var(--wd-dock-h) - var(--sk-hit)) / 2);
}

/* ---------- The waveform seek ---------- */

.wd-seek {
  --sk-seek-hit: 40px;
  --sk-seek-radius: 20px;
  --wd-wave-h: 32px;
  margin-inline: 8px 4px;
}

/* Until the peaks arrive (or if they never do) the stock line track shows */
.wd-seek[data-wave] .sk-track {
  height: var(--wd-wave-h);
  border-radius: 0;
  transition: none;
  -webkit-mask: var(--wd-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--wd-mask) 0 0 / 100% 100% no-repeat;
}

/* Pointer preview: bars up to the pointer brighten, then the played fill (coral) sits on top */
.wd-hover {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--media-slider-pointer, 0%);
  background: var(--wd-hover);
  opacity: 0;
  transition: opacity var(--sk-exit) linear;
}
.wd-seek[data-pointing] .wd-hover {
  opacity: 1;
  transition-duration: var(--sk-enter);
}

/* Playhead: a slim ink line marks the played edge by shape, not by color alone, and grows to the
   full hit height while the slider is in use */
.wd-seek .sk-thumb {
  width: 2px;
  height: 40px;
  border-radius: 1px;
  background: var(--sk-ink);
  box-shadow: 0 0 0 1px rgb(23 23 28 / .6);
}
@media (prefers-reduced-motion: no-preference) {
  .wd-seek .sk-thumb {
    scale: 1 .6;
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .wd-seek[data-interactive] .sk-thumb {
    scale: 1 1;
    transition-duration: var(--sk-enter);
  }
}

/* Time tag and storyboard frame, scaling up from the pointer (core motion) */
.wd-seek .sk-preview {
  bottom: calc(100% + 18px);
}
.wd-seek .sk-preview-image {
  --sk-preview-radius: 12px;
}
.wd-seek .sk-preview-time {
  padding: 6px 10px;
  background: var(--wd-deep);
  box-shadow: inset 0 0 0 1px var(--sk-hairline-strong);
  font: 600 13px/1 var(--media-font-family);
}

/* ---------- Center play: the coral disc on a smoked pill, "Play 0:51" (decorative; the dock's Play is
   the real one) ---------- */

.sk-root[data-skin="c02"] .wd-bigplay {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 26px 0 6px;
  border: 0;
  border-radius: 36px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
  backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
  color: var(--sk-ink);
  font: 600 19px/1 "Bricolage Grotesque", var(--media-font-family);
  letter-spacing: -.005em;
  box-shadow: inset 0 0 0 1px var(--sk-hairline), var(--sk-shadow);
  cursor: pointer;
  --sk-icon: 60px;
}
.sk-root[data-skin="c02"] .wd-bigplay .sk-icon {
  transition: filter var(--sk-exit) linear;
}
.sk-root[data-skin="c02"] .wd-bigplay:hover .sk-icon {
  filter: brightness(1.08);
  transition-duration: var(--sk-enter);
}
.wd-bigplay-glyph {
  display: grid;
}
.wd-bigplay-label {
  white-space: nowrap;
}
.wd-bigplay-time {
  font-variant-numeric: tabular-nums;
}
.wd-when-ended,
.wd-bigplay[data-ended] .wd-when-play,
.wd-bigplay[data-ended] .wd-bigplay-time {
  display: none;
}
.wd-bigplay[data-ended] .wd-when-ended {
  display: inline;
}

/* ---------- Designed states in the dock's glass ---------- */

.sk-root[data-skin="c02"] .sk-spinner {
  width: 64px;
  height: 64px;
}
/* Loading: the gear badge, inverted to light ink on the smoked chip, turns */
.sk-root[data-skin="c02"] .sk-spinner .sk-icon {
  width: 52px;
  height: 52px;
  filter: invert(1);
}

/* Error: 32px corners; the full-width button (22px radius + 10px pad) sits concentric in them */
.sk-root[data-skin="c02"] .sk-error {
  gap: 8px;
  padding: 24px 10px 10px;
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
  backdrop-filter: blur(var(--sk-blur)) saturate(1.1);
}
.sk-root[data-skin="c02"] .sk-error-title {
  padding-inline: 14px;
  font: 600 18px/1.2 "Bricolage Grotesque", var(--media-font-family);
}
.sk-root[data-skin="c02"] .sk-error-text {
  padding-inline: 14px;
  color: var(--sk-ink-2);
}
.sk-root[data-skin="c02"] .sk-error-close {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 10px;
  border-radius: calc(var(--sk-r-outer) - 10px);
  background: var(--wd-coral);
  color: var(--wd-deep);
}
.sk-root[data-skin="c02"] .sk-empty p {
  padding: 12px 20px;
  -webkit-backdrop-filter: blur(var(--sk-blur));
  backdrop-filter: blur(var(--sk-blur));
}

/* ---------- Mid widths: the waveform keeps its room; volume is mute plus the arrow-key hotkeys ---------- */

@container sk (max-width: 639px) {
  .wd-dock .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: a two-row dock, waveform on top; fullscreen moves to the top-right ----------
   Compact so a phone-portrait player (about 185px tall) keeps room for a caption line above it:
   6px pad, 40px seek row, 44px control row, 28px corners = the 44px play circle's 22px + 6px pad. */

@container sk (max-width: 519px) {
  .wd-dock {
    --wd-dock-bottom: 8px;
    display: grid;
    grid-template-columns: var(--sk-hit) auto 1fr var(--sk-hit) var(--sk-hit);
    grid-template-rows: 40px var(--sk-hit);
    gap: 2px 4px;
    height: 98px;
    padding: 6px;
    border-radius: 28px;
  }
  .wd-dock .sk-play {
    --sk-icon: var(--sk-hit);
    width: var(--sk-hit);
    height: var(--sk-hit);
  }
  .wd-dock .wd-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center; /* on touch the core grows the hit to 44px; it spills into the pad, not the row below */
    margin-inline: 12px;
  }
  .wd-dock .sk-play { grid-column: 1; grid-row: 2; }
  .wd-dock .sk-time { grid-column: 2; grid-row: 2; }
  .wd-dock .sk-volume { grid-column: 4; grid-row: 2; }
  .wd-dock .sk-cc { grid-column: 5; grid-row: 2; }
  .wd-dock .sk-volume-slider { display: none; }
  /* Nov 15, 2026: the hover preview fits above the seek on short players: the frame scales to the player (it
     sizes itself from max-width; 64 to 160px) and sits 6px above the seek (at 18px with a 158px frame its top
     was cut off by up to 58px) */
  .wd-seek .sk-preview {
    bottom: calc(100% + 6px);
  }
  .wd-seek .sk-preview-image {
    min-width: 64px;
    max-width: min(160px, 100cqw - 260px);
  }

  .sk-root[data-skin="c02"] .sk-fs {
    top: 12px;
    right: 12px;
    bottom: auto;
    background: var(--sk-surface);
    -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);
  }
  .sk-root[data-skin="c02"] .sk-fs:hover {
    background: rgb(40 40 46 / .82);
  }

  /* The center play shrinks to a circle, centers in the picture above the dock, and only shows
     before the first play (and at the end), so a paused caption keeps the little room there is */
  .sk-root[data-skin="c02"] .sk-center {
    padding-bottom: calc(98px + 8px);
  }
  .sk-root[data-skin="c02"][data-started]:not([data-ended]) .wd-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  .sk-root[data-skin="c02"] .wd-bigplay {
    --sk-icon: 60px;
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .sk-root[data-skin="c02"] .wd-bigplay-label {
    display: none;
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
/* Nov 15, 2026: 138 = the two-row dock's top (98px + 8px) + a one-line cue + a gap (114 left the cue's lower
   half behind the dock). Below a 400px viewport the core's 40% floor on the cue line binds instead. */
@media (max-width: 551px) {
  .sk-root[data-skin="c02"] {
    --sk-cue-clearance: 138px;
  }
}

/* Nov 15, 2026, fullscreen: Chrome sizes cue text from the player's smaller side (a one-line cue box is about
   6.75% of it) while the dock stays put, so a fixed clearance fell 23 to 65px short on 720 to 1440px screens.
   In fullscreen the viewport is the player, so the clearance follows vmin: the dock's top + a 12px gap + one
   cue line. Registered as a length so the core reads it in px. */
@property --sk-cue-clearance {
  syntax: "<length>";
  inherits: true;
  initial-value: 96px;
}
.sk-root[data-skin="c02"]:fullscreen {
  --sk-cue-clearance: calc(96px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="c02"]:fullscreen {
    --sk-cue-clearance: calc(118px + 6.75vmin);
  }
}

/* ---------- Preference fallbacks (re-stated: skin tokens outrank the core's generic ones) ---------- */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="c02"] {
    --sk-surface: var(--sk-surface-solid);
    --sk-blur: 0px;
    --sk-hairline: var(--sk-hairline-strong);
  }
  .wd-dock,
  .sk-root[data-skin="c02"] .sk-fs,
  .sk-root[data-skin="c02"] .sk-error {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="c02"] {
    --sk-track: #c2bfc1;
    --sk-buffer: #dedcdd;
    --wd-hover: #f4f3f4;
    --sk-ink-2: #e4e4ea;
    --sk-focus-w: 3px;
  }
}

@media (forced-colors: active) {
  .wd-dock,
  .sk-root[data-skin="c02"] .wd-bigplay {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="c02"] .wd-bigplay {
    background: ButtonFace;
    color: ButtonText;
  }
  /* Bars stay readable in any theme by pattern, not hue (system colors can all be dark, as in High
     Contrast White): unplayed bars sparsely hatched, buffered densely hatched, played solid
     CanvasText, playhead in Highlight */
  .wd-seek[data-wave] .sk-track {
    border: 0;
    background: repeating-linear-gradient(to bottom, CanvasText 0 1px, Canvas 1px 4px);
    forced-color-adjust: none;
  }
  .wd-seek[data-wave] .sk-buffer {
    background: repeating-linear-gradient(to bottom, CanvasText 0 1px, Canvas 1px 2px);
  }
  .wd-seek[data-wave] .sk-fill {
    background: CanvasText;
  }
  .wd-hover {
    display: none;
  }
  .wd-seek .sk-thumb {
    width: 3px;
    background: Highlight;
    box-shadow: none;
    forced-color-adjust: none;
  }
}