/*
 * A14 Candy Shell, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Glossy candy plastic for a summer festival archive. Every control is the candy art Gemini generated
 * for this design (sheets2/a14-candy-sheet.jpg): glossy teal domes for play, pause, volume, mute,
 * captions and fullscreen, the teal capsule with its molded groove as the seek, and the white ball as
 * the thumb (cut off its own teal disc with a circular crop). The sheet came back in one teal; states
 * are tints on the PNG (CSS filters), never a redrawn color. A plain dark scrim (not plastic) keeps the
 * white time readable over any frame.
 *
 * Seek: the capsule is seek-unplayed.png across the row; seek-played.png (the white fill in the groove)
 * is clipped at the fill and to the groove's rows, so the shell above and below always comes from one
 * capsule; the ball covers the edge.
 *
 * Signature: a press squashes the candy 4% in 60ms and it springs back in 200ms without overshoot;
 * the ball grows 12% while the seek is in use. Reduced motion: the press is a tint only.
 */

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

.sk-root[data-skin="a14"] {
  --media-accent-color: #1fa6b8;
  --media-accent-text-color: #ffffff;
  --media-border-radius: 28px;
  --media-font-family: "Baloo 2", "Inter", system-ui, sans-serif;

  --cs-teal: #0b7f8f;
  --cs-ink: #062a30;

  /* the capsule: 110px tall in the art; caps .536 of its height; the groove runs 26% to 56% */
  --cs-strip-h: 42px;
  --cs-strip-slice: 59;
  --cs-groove-top: 26%;
  --cs-groove-bottom: 44%;
  --cs-groove-mid: 41%;

  --sk-pad: 8px;
  --sk-hit: 54px;
  --sk-icon: 54px;
  --sk-btn-radius: 50%;
  --sk-ink: #ffffff;
  --sk-ink-2: #e6fbff;
  --sk-surface: #0a6d7b;
  --sk-surface-solid: #0a6d7b;
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .2), 0 12px 28px rgb(0 0 0 / .28);
  --sk-cc-on: #ffffff;
  --sk-focus: #ffffff;
  --sk-focus-gap: #05343b;
  --sk-error-accent: #1fa6b8;
  /* a plain dark scrim under the row (not plastic) */
  --cs-scrim-a: .88;
  --sk-scrim: linear-gradient(to top, rgb(4 26 32 / var(--cs-scrim-a)) 0, rgb(4 26 32 / calc(var(--cs-scrim-a) * .7)) 70px, rgb(4 26 32 / 0) 150px);
  /* Nov 15, 2026: Chrome has no VTTCue.lineAlign, so a cue hangs below the core's line instead of sitting on it;
     120 = the 86px row + a one-line cue + a gap (104 left the cue box resting on the domes) */
  --sk-cue-clearance: 120px;

  --cs-bar-pad: 16px;
  --cs-bar-h: calc(var(--sk-hit) + var(--cs-bar-pad) * 2);
}

.sk-root[data-skin="a14"] > mux-video {
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------- The row of candy, centered and floating ---------- */

.cs-row {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(900px, 100% - 32px);
  height: var(--cs-bar-h);
  padding: var(--cs-bar-pad) calc(var(--sk-hit) + 8px) var(--cs-bar-pad) 0;
  translate: -50% 0;
  color: var(--sk-ink);
}

/* Candy domes: the art is the whole button */
.sk-root[data-skin="a14"] :is(.cs-row .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="a14"] :is(.cs-row .sk-btn, .sk-fs) .sk-icon {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .3));
  transform-origin: 50% 85%;
  transition: filter var(--sk-exit) linear, scale 200ms cubic-bezier(.2, .9, .3, 1);
}
.sk-root[data-skin="a14"] :is(.cs-row .sk-btn, .sk-fs):hover .sk-icon {
  filter: drop-shadow(0 4px 7px rgb(0 0 0 / .32)) brightness(1.1) saturate(1.1);
  transition-duration: var(--sk-enter), 200ms;
}
.sk-root[data-skin="a14"] :is(.cs-row .sk-btn, .sk-fs):active .sk-icon {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)) brightness(.88);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a14"] :is(.cs-row .sk-btn, .sk-fs):active .sk-icon {
    scale: 1.04 .96;
    transition: filter 60ms linear, scale 60ms ease-out;
  }
}

/* Focus: a white ring outside a dark teal gap, round with the dome */
.sk-root[data-skin="a14"] .sk-btn:focus-visible {
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
}

/* Captions: on = a white bar under the dome; off = the dome's candy greyed (a filter on the PNG) */
.sk-root[data-skin="a14"] .sk-cc::after {
  bottom: -7px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--cs-ink);
}
.sk-root[data-skin="a14"] .sk-cc:not([data-active]) .sk-icon {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .3)) saturate(.25) brightness(.8);
}

/* Fullscreen: the last dome of the row on desktop, top-right on phones */
.sk-root[data-skin="a14"] .sk-controls > .sk-fs {
  position: absolute;
  right: max(16px, (100% - 900px) / 2);
  bottom: var(--cs-bar-pad);
}

/* ---------- Time ---------- */

.cs-row .sk-time {
  padding: 2px 4px 0;
  font: 800 20px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgb(2 18 22 / .85), 0 0 10px rgb(2 18 22 / .5);
}
.cs-row .sk-time media-time-separator,
.cs-row .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the candy capsule ---------- */

.cs-row .sk-seek {
  --sk-seek-hit: var(--cs-strip-h);
  --sk-seek-radius: 22px;
  height: var(--cs-strip-h);
  margin-inline: 4px;
}
.sk-root[data-skin="a14"] .sk-track,
.sk-root[data-skin="a14"] .sk-seek[data-interactive] .sk-track {
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="a14"] .sk-track::before,
.sk-root[data-skin="a14"] .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(--cs-strip-h) * .536);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--cs-strip-slice) fill;
  border-image-width: 0 calc(var(--cs-strip-h) * .536);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="a14"] .sk-track > .sk-buffer {
  filter: brightness(1.45) saturate(.8);
  clip-path: inset(var(--cs-groove-top) calc(100% - var(--media-slider-buffer, 0%)) var(--cs-groove-bottom) 0);
}
.sk-root[data-skin="a14"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(var(--cs-groove-top) calc(100% - var(--media-slider-fill, 0%)) var(--cs-groove-bottom) 0);
}
/* the thumb: the white ball, on the groove line */
.sk-root[data-skin="a14"] .cs-row .sk-seek .sk-thumb {
  --sk-thumb: 30px;
  top: var(--cs-groove-mid);
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a14"] .cs-row .sk-seek .sk-thumb {
  /* 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 + 3px, 100% - half width - 3px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included. */
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 3px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 3px));
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="a14"] .cs-row .sk-seek[data-interactive] .sk-thumb {
    scale: 1.12;
    transition-duration: var(--sk-enter);
  }
}

/* Volume: a short capsule beside the speaker dome */
.cs-row .sk-volume {
  gap: 0;
}
.sk-root[data-skin="a14"] .sk-volume-slider {
  --sk-vol-w: 100px;
  --cs-strip-h: 28px;
  margin-inline: 6px 2px;
}
.sk-root[data-skin="a14"] .sk-volume-slider .sk-track {
  height: var(--cs-strip-h);
}
.sk-root[data-skin="a14"] .sk-volume-slider .sk-thumb {
  /* 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 + 0px, 100% - half width - 0px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included. */
  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));
  --sk-thumb: 20px;
  top: var(--cs-groove-mid);
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35));
}

/* Preview: the frame on a rounded teal mat, the time in Baloo */
.cs-row .sk-preview {
  bottom: calc(100% + 10px);
}
.cs-row .sk-preview-image {
  --sk-preview-radius: 14px;
  border: 4px solid #0a6d7b;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35);
}
.cs-row .sk-preview-time {
  padding: 5px 10px 3px;
  border-radius: 999px;
  background: #0a6d7b;
  font: 800 15px/1 var(--media-font-family);
}

/* ---------- Center play: the glossy play dome (decorative; the row's Play is the real one) ---------- */

.sk-root[data-skin="a14"] .sk-center {
  padding-bottom: var(--cs-bar-h);
}
.sk-root[data-skin="a14"] .cs-dome {
  --sk-icon: 128px;
  display: grid;
  place-items: center;
  width: var(--sk-icon);
  height: var(--sk-icon);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.sk-root[data-skin="a14"] .cs-dome .sk-icon {
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / .3));
  transform-origin: 50% 85%;
  transition: filter var(--sk-exit) linear, scale 200ms cubic-bezier(.2, .9, .3, 1);
}
.sk-root[data-skin="a14"] .cs-dome:hover .sk-icon {
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / .3)) brightness(1.08) saturate(1.1);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a14"] .cs-dome:active .sk-icon {
    scale: 1.04 .96;
    transition: scale 60ms ease-out;
  }
}

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

.sk-root[data-skin="a14"] .sk-spinner {
  width: 68px;
  height: 68px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-root[data-skin="a14"] .sk-spinner .sk-icon {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35));
}
.sk-root[data-skin="a14"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 28px;
  background: #0a6d7b;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), var(--sk-shadow);
}
.sk-root[data-skin="a14"] .sk-error-title {
  padding-inline: 14px;
  font: 800 21px/1.15 var(--media-font-family);
}
.sk-root[data-skin="a14"] .sk-error-text {
  padding-inline: 14px;
  color: #e6fbff;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="a14"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border-radius: 20px;
  background: #ffffff;
  color: var(--cs-ink);
  font: 800 17px/1 var(--media-font-family);
}
.sk-root[data-skin="a14"] .sk-error-close:focus-visible {
  outline-color: #ffffff;
}
.sk-root[data-skin="a14"] .sk-empty p {
  padding: 12px 22px 10px;
  background: #0a6d7b;
  font: 800 17px/1 var(--media-font-family);
}

/* ---------- Mid widths ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="a14"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --cs-bar-pad: 12px;
    --cs-strip-h: 38px;
    --cs-bar-h: calc(var(--sk-hit) + var(--cs-bar-pad) * 2);
  }
  .sk-root[data-skin="a14"] .cs-dome {
    --sk-icon: 108px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="a14"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows (the capsule on top); fullscreen becomes a dome at the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="a14"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --cs-strip-h: 32px;
    --cs-bar-pad: 8px;
    --cs-bar-h: calc(var(--cs-bar-pad) * 2 + var(--cs-strip-h) + 4px + var(--sk-hit));
  }
  .cs-row {
    display: grid;
    grid-template-columns: var(--sk-hit) var(--sk-hit) auto 1fr var(--sk-hit);
    grid-template-rows: var(--cs-strip-h) var(--sk-hit);
    gap: 4px 8px;
    width: calc(100% - 20px);
    padding: var(--cs-bar-pad) 0;
  }
  .cs-row .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: 0;
  }
  .cs-row .sk-play { grid-column: 1; grid-row: 2; }
  .cs-row .sk-volume { grid-column: 2; grid-row: 2; }
  .cs-row .sk-time { grid-column: 3; grid-row: 2; font-size: 17px; }
  .cs-row .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="a14"] .cs-row .sk-seek .sk-thumb {
    --sk-thumb: 24px;
  }
  .sk-root[data-skin="a14"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="a14"] .cs-dome {
    --sk-icon: 76px;
  }
  .sk-root[data-skin="a14"][data-started]:not([data-ended]) .cs-dome {
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="a14"] {
    --sk-cue-clearance: 116px;
  }
}

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

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="a14"] {
    --sk-scrim: linear-gradient(to top, rgb(4 26 32) 0, rgb(4 26 32) calc(var(--cs-bar-h) + 6px), rgb(4 26 32 / 0) calc(var(--cs-bar-h) + 6px));
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="a14"] {
    --sk-focus-w: 3px;
  }
  .cs-row .sk-time {
    text-shadow: none;
  }
}
@media (forced-colors: active) {
  .cs-row {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="a14"] .cs-row .sk-track {
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="a14"] .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="a14"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="a14"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="a14"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}