/*
 * E02 Plasticine Clay, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Modeling clay for a preschool stop-motion channel. Every control is the clay Gemini generated for this
 * design (sheets2/e02-clay-sheet.jpg): hand-pressed teal clay discs with cream clay glyphs for play,
 * pause, volume, mute, captions and fullscreen, the rolled rope (coral for what you have watched, cream
 * ahead) as the seek, and the coral clay ball as the playhead. The CSS makes no clay: a plain dark scrim
 * under the row keeps the cream time readable over any frame.
 *
 * Seek: the cream rope (seek-unplayed.png) runs the whole row; the coral rope (seek-played.png) is
 * clipped at the fill; the ball covers the join. Each rope keeps its own rolled ends.
 *
 * Signature: controls squish when pressed. A press flattens the clay disc from its base (wider and
 * shorter, 70ms), and on release it springs back past round and settles over 560ms, the way soft clay
 * does (a linear() spring). The ball squashes while you drag it. Reduced motion: nothing changes shape;
 * a press only darkens the clay.
 */

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

.sk-root[data-skin="e02"] {
  --media-accent-color: #e8735f;
  --media-accent-text-color: #1c1410;
  --media-border-radius: 24px;
  --media-font-family: "Rubik", "Inter", system-ui, sans-serif;

  --cl-teal: #1f7f86;
  --cl-cream: #f4ead2;
  --cl-coral: #e8735f;
  --cl-ink: #0f2a2c;
  --cl-spring: linear(0, .62 8%, 1.06 18%, 1.14 25%, 1.07 34%, .97 45%, .95 52%, .99 64%, 1.012 75%, 1);

  /* the ropes: caps are 1.034 (played) and 1.058 (unplayed) of the strip height */
  --cl-rope-h: 30px;

  --sk-pad: 8px;
  --sk-hit: 56px;
  --sk-icon: 56px;
  --sk-btn-radius: 50%;
  --sk-ink: #fffaf0;
  --sk-ink-2: #f1e6cc;
  --sk-surface: #16494d;
  --sk-surface-solid: #16494d;
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: 0 3px 6px rgb(0 0 0 / .25), 0 12px 26px rgb(0 0 0 / .28);
  --sk-cc-on: var(--cl-cream);
  --sk-focus: var(--cl-cream);
  --sk-focus-gap: #0b2224;
  --sk-error-accent: var(--cl-coral);
  /* a plain dark scrim under the row (not clay) */
  --cl-scrim-a: .86;
  --sk-scrim: linear-gradient(to top, rgb(8 26 28 / var(--cl-scrim-a)) 0, rgb(8 26 28 / calc(var(--cl-scrim-a) * .72)) 70px, rgb(8 26 28 / 0) 156px);
  /* captions (Nov 15, 2026): the discs' top (70px up) + a one-line cue + a gap; see the clearance block at the end */
  --sk-cue-clearance: 120px;

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

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

/* ---------- The row ---------- */

.cl-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--cl-bar-h);
  padding: var(--cl-bar-pad) calc(18px + var(--sk-hit) + 8px) var(--cl-bar-pad) 18px;
  color: var(--sk-ink);
}

/* Clay discs: the art is the whole button */
.sk-root[data-skin="e02"] :is(.cl-row .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="e02"] :is(.cl-row .sk-btn, .sk-fs) .sk-icon {
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35));
  transform-origin: 50% 88%;
  transition: scale 560ms var(--cl-spring), filter var(--sk-exit) linear;
}
.sk-root[data-skin="e02"] :is(.cl-row .sk-btn, .sk-fs):hover .sk-icon {
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .38)) brightness(1.07);
}
/* Signature: the press flattens the clay; release springs back past round and settles */
.sk-root[data-skin="e02"] :is(.cl-row .sk-btn, .sk-fs):active .sk-icon {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)) brightness(.85);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e02"] :is(.cl-row .sk-btn, .sk-fs):active .sk-icon {
    scale: 1.16 .8;
    transition: scale 70ms ease-out, filter 70ms linear;
  }
}

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

/* Captions: on = a cream bar under the disc; off = the clay dimmed (filter) */
.sk-root[data-skin="e02"] .sk-cc::after {
  bottom: -8px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--cl-ink);
}
.sk-root[data-skin="e02"] .cl-row .sk-cc:not([data-active]) .sk-icon {
  /* Nov 15, 2026: .cl-row added so this outranks the hover and press rules above (it was 0,5,0 under their 0,6,0):
     off stays dimmed under the pointer, and on phones, where Chrome keeps :hover on the disc after the tap */
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / .35)) saturate(.3) brightness(.72);
}

/* Fullscreen: the row's last disc on desktop; top-right when narrow */
.sk-root[data-skin="e02"] .sk-controls > .sk-fs {
  position: absolute;
  right: 18px;
  bottom: var(--cl-bar-pad);
}

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

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

/* ---------- Seek: the clay rope ---------- */

.cl-row .sk-seek {
  --sk-seek-hit: 48px;
  --sk-seek-radius: 24px;
  margin-inline: 8px;
}
.sk-root[data-skin="e02"] .sk-track,
.sk-root[data-skin="e02"] .sk-seek[data-interactive] .sk-track {
  height: var(--cl-rope-h);
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="e02"] .sk-track::before,
.sk-root[data-skin="e02"] .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(--cl-rope-h) * 1.058);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 116 fill;
  border-image-width: 0 calc(var(--cl-rope-h) * 1.058);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="e02"] .sk-track::before {
  filter: brightness(.86) saturate(.85);
}
.sk-root[data-skin="e02"] .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
.sk-root[data-skin="e02"] .sk-track > .sk-fill {
  border-width: 0 calc(var(--cl-rope-h) * 1.034);
  border-image-source: url(art/seek-played.png);
  border-image-slice: 0 114 fill;
  border-image-width: 0 calc(var(--cl-rope-h) * 1.034);
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}
/* the playhead: the coral clay ball */
.sk-root[data-skin="e02"] .cl-row .sk-seek .sk-thumb {
  --sk-thumb: 36px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35));
  transform-origin: 50% 90%;
  /* 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 + 4px, 100% - half width - 4px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included.
     Nov 15, 2026: moved out of the no-preference query below, where it had landed, so it
     also holds with reduced motion (the ball hung 18px off both ends of the rope there). */
  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="e02"] .cl-row .sk-seek .sk-thumb {
    transition: scale 560ms var(--cl-spring);
  }
  /* the ball squashes under your finger while you drag it, and springs back on release */
  .sk-root[data-skin="e02"] .cl-row .sk-seek[data-dragging] .sk-thumb {
    scale: 1.18 .84;
    transition: scale 70ms ease-out;
  }
}

/* Volume: a short rope beside the speaker disc, a small ball as its thumb */
.cl-row .sk-volume {
  gap: 0;
}
.sk-root[data-skin="e02"] .sk-volume-slider {
  --sk-vol-w: 100px;
  --cl-rope-h: 18px;
  margin-inline: 8px 4px;
}
.sk-root[data-skin="e02"] .sk-volume-slider .sk-track {
  height: var(--cl-rope-h);
}
.sk-root[data-skin="e02"] .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: 24px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35));
}

/* Preview: the frame on a teal clay-colored mat, the time on a cream tag */
.cl-row .sk-preview {
  bottom: calc(100% + 12px);
}
.cl-row .sk-preview-image {
  --sk-preview-radius: 14px;
  border: 4px solid var(--sk-surface);
  box-shadow: var(--sk-shadow);
}
.cl-row .sk-preview-time {
  padding: 6px 10px 5px;
  border-radius: 999px;
  background: var(--cl-cream);
  color: var(--cl-ink);
  font: 700 14px/1 var(--media-font-family);
}

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

.sk-root[data-skin="e02"] .sk-center {
  padding-bottom: var(--cl-bar-h);
}
.sk-root[data-skin="e02"] .cl-disc {
  --sk-icon: 132px;
  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="e02"] .cl-disc .sk-icon {
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .35));
  transform-origin: 50% 88%;
  transition: scale 560ms var(--cl-spring), filter var(--sk-exit) linear;
}
.sk-root[data-skin="e02"] .cl-disc:hover .sk-icon {
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .35)) brightness(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e02"] .cl-disc:active .sk-icon {
    scale: 1.12 .86;
    transition: scale 70ms ease-out;
  }
}

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

.sk-root[data-skin="e02"] .sk-spinner {
  width: 70px;
  height: 70px;
  background: none;
  box-shadow: none;
}
.sk-root[data-skin="e02"] .sk-spinner .sk-icon {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4));
}
.sk-root[data-skin="e02"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 24px;
  background: var(--sk-surface);
}
.sk-root[data-skin="e02"] .sk-error-title {
  padding-inline: 14px;
  font: 700 20px/1.2 var(--media-font-family);
}
.sk-root[data-skin="e02"] .sk-error-text {
  padding-inline: 14px;
  color: #e9f4f3;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="e02"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border-radius: 16px;
  background: var(--cl-cream);
  color: var(--cl-ink);
  font: 700 17px/1 var(--media-font-family);
}
.sk-root[data-skin="e02"] .sk-empty p {
  padding: 12px 22px;
  background: var(--sk-surface);
  font: 700 16px/1 var(--media-font-family);
}

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

@container sk (max-width: 819px) {
  .sk-root[data-skin="e02"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --cl-bar-pad: 12px;
    --cl-rope-h: 26px;
    --cl-bar-h: calc(var(--sk-hit) + var(--cl-bar-pad) * 2);
  }
  .sk-root[data-skin="e02"] .cl-disc {
    --sk-icon: 110px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="e02"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows (the rope on top); fullscreen at the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="e02"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --cl-rope-h: 22px;
    --cl-bar-pad: 8px;
    --cl-bar-h: calc(var(--cl-bar-pad) * 2 + 30px + 4px + var(--sk-hit));
  }
  .cl-row {
    display: grid;
    grid-template-columns: var(--sk-hit) var(--sk-hit) auto 1fr var(--sk-hit);
    grid-template-rows: 30px var(--sk-hit);
    gap: 4px 8px;
    padding: var(--cl-bar-pad) 12px;
  }
  .cl-row .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    --sk-seek-hit: 30px;
    margin-inline: 4px;
  }
  .cl-row .sk-play { grid-column: 1; grid-row: 2; }
  .cl-row .sk-volume { grid-column: 2; grid-row: 2; }
  .cl-row .sk-time { grid-column: 3; grid-row: 2; font-size: 17px; }
  .cl-row .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="e02"] .cl-row .sk-seek .sk-thumb {
    --sk-thumb: 28px;
  }
  .sk-root[data-skin="e02"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="e02"] .cl-disc {
    --sk-icon: 76px;
  }
  .sk-root[data-skin="e02"][data-started]:not([data-ended]) .cl-disc {
    opacity: 0;
    pointer-events: none;
  }
  /* touch (Nov 15, 2026): the core's 44px seek hit box reached 3px into the discs below; 38px fills the 30px row and
     its 4px gaps */
  @media (pointer: coarse) {
    .cl-row .sk-seek {
      height: 38px;
    }
  }
  /* the hover preview fits above the rope on phone-size players (Nov 15, 2026); the core thumbnail sizes itself from
     max-width, and its 96px min-width would not fit a 328px player */
  .cl-row .sk-preview-image {
    min-width: 56px;
    max-width: min(158px, 100cqw - 266px);
  }
}

/* ---------- Caption clearance (Nov 15, 2026) ----------
   Chrome 157 has no VTTCue.lineAlign, so a cue hangs one cue-height below the core's line. Each value is the top of
   the highest control + a one-line cue + a gap: one row of 56px discs 70px up (120, at the top of this file), the mid
   row of 48px discs 60px up (104, the old value, which already cleared there), the narrow layout's rope 86px up (108).
   The root can't query its own width, so these follow the viewport (player = viewport - 32px): the mid layout (players
   520 to 819px) is viewports 552 to 851px; a classic scrollbar can only move a mid player into the one-row value, which
   just lifts the cue higher. */
@media (max-width: 851px) {
  .sk-root[data-skin="e02"] {
    --sk-cue-clearance: 104px;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="e02"] {
    --sk-cue-clearance: 108px;
  }
}
/* Fullscreen: Chrome sizes the cue from the player's smaller side (a one-line box is about 6% of it) while the bar
   keeps its size, so the clearance follows vmin (the viewport is the player here). Registering the property makes the
   computed value a px length, which is what the core's parseFloat reads. */
@property --sk-cue-clearance {
  syntax: "<length>";
  inherits: true;
  initial-value: 104px;
}
.sk-root[data-skin="e02"]:fullscreen {
  --sk-cue-clearance: calc(80px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="e02"]:fullscreen {
    --sk-cue-clearance: calc(98px + 6.75vmin);
  }
}

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

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