/*
 * D01 Paper Play, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Construction paper laid over the picture, all of it the paper art Gemini generated for this design
 * (sheets2/d01-paper-sheet2.jpg): coral thumbprint discs for play and pause, teal paper discs with
 * cream cut-paper icons for volume, mute, captions and fullscreen, the torn teal strip with its coral
 * and cream paper tracks as the seek, and the coral thumbprint disc as the playhead. Each piece keeps
 * the soft shadow it was generated with, so the paper sits on the footage. The CSS draws no paper:
 * a plain dark scrim under the two rows keeps the time readable over any frame.
 *
 * Seek: the torn strip is seek-unplayed.png across the whole row; the played strip (seek-played.png)
 * is clipped at the fill and to the track's own rows only, so the torn edges above and below always
 * come from one piece of paper and only the track changes from cream to coral.
 *
 * Signature, the paper layers lift: on hover a disc lifts 2px onto a deeper shadow, on press it settles
 * flat; the center disc lifts 4px. Reduced motion keeps the shadow change and drops the movement.
 */

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

.sk-root[data-skin="d01"] {
  --media-accent-color: #dd5641;
  --media-accent-text-color: #fff9ee;
  --media-border-radius: 12px;
  --media-font-family: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pp-teal: #176a73;
  --pp-cream: #f6efdf;
  --pp-coral: #dd5641;
  --pp-ink-dark: #0f3a3f;

  /* lift shadows layered over the shadow baked into the art */
  --pp-rest: drop-shadow(0 1px 1px rgb(0 0 0 / .18));
  --pp-up: drop-shadow(0 3px 2px rgb(0 0 0 / .2)) drop-shadow(0 8px 10px rgb(0 0 0 / .22));
  --pp-down: drop-shadow(0 .5px 0 rgb(0 0 0 / .3));

  /* seek strip: the torn paper is 110px tall in the art; the track runs 34.5% to 53.6% of it */
  --pp-strip-h: 56px;
  --pp-strip-slice: 43;
  --pp-track-top: 31%;
  --pp-track-bottom: 40%;
  --pp-track-mid: 45%;

  --sk-pad: 6px;
  --sk-hit: 54px;
  --sk-icon: 54px;
  --sk-btn-radius: 50%;
  --sk-ink: #fff9ee;
  --sk-ink-2: #f6ecd9;
  --sk-surface: var(--pp-teal);
  --sk-surface-solid: var(--pp-teal);
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-hairline-strong: rgb(0 0 0 / .4);
  --sk-shadow: 0 1px 0 rgb(0 0 0 / .22), 0 4px 10px rgb(0 0 0 / .24);
  --sk-focus: #fff9ee;
  --sk-focus-gap: #0b3a3f;
  --sk-cc-on: #fff9ee;
  --sk-error-accent: var(--pp-coral);
  /* a plain dark scrim (not paper) under the rows, so the cream time reads on the brightest frame */
  --pp-scrim-a: .84;
  --sk-scrim: linear-gradient(to top, rgb(10 22 26 / var(--pp-scrim-a)) 0, rgb(10 22 26 / calc(var(--pp-scrim-a) * .75)) 90px, rgb(10 22 26 / 0) 190px);
  --sk-cue-clearance: 150px;

  --pp-bar-h: calc(var(--pp-strip-h) + var(--sk-hit) + 22px);
}

/* Captions stay in the core's plain face */
.sk-root[data-skin="d01"] > mux-video {
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------- The bar: two rows, the torn strip on top, paper discs below ---------- */

.pp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: var(--pp-strip-h) var(--sk-hit);
  row-gap: 4px;
  height: var(--pp-bar-h);
  padding: 2px 16px 12px;
  color: var(--sk-ink);
}
.pp-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pp-row--ctrl {
  gap: 8px;
  padding-right: calc(var(--sk-hit) + 10px);
}
.pp-spacer {
  flex: 1 1 auto;
}

/* ---------- Buttons: the paper discs, lifting on hover ---------- */

.sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs) .sk-icon {
  filter: var(--pp-rest);
  transition: filter var(--sk-exit) linear, translate var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs):hover .sk-icon {
  filter: var(--pp-up);
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs):active .sk-icon {
  filter: var(--pp-down);
  transition-duration: 60ms;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs):hover .sk-icon {
    translate: 0 -2px;
  }
  .sk-root[data-skin="d01"] :is(.pp-bar .sk-btn, .sk-fs):active .sk-icon {
    translate: 0 0;
  }
}

/* Focus: a cream ring outside a dark teal gap, round with the disc */
.sk-root[data-skin="d01"] .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 disc's paper dimmed (a filter on the PNG) */
.sk-root[data-skin="d01"] .sk-cc::after {
  bottom: -6px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--pp-ink-dark);
}
.sk-root[data-skin="d01"] .sk-cc:not([data-active]) .sk-icon {
  filter: var(--pp-rest) saturate(.35) brightness(.72);
}
/* Off states share one language: a thin strip of coral paper laid diagonally
   across the disc, torn ends and all, in the same coral as the played strip.
   The strip is a sliver of the entry's own played-strip paper
   (art/strip-off.png, cut from art/seek-played.png across its coral band),
   its long edges clipped to a torn line; it crosses corner to corner of the
   disc and lifts with it on hover, like the paper piece it is. Captions off
   and muted wear the same strip. */
.sk-root[data-skin="d01"] .sk-cc:not([data-active])::before,
.sk-root[data-skin="d01"] .sk-mute[data-muted]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 18px;
  background: url(art/strip-off.png) center / cover no-repeat;
  clip-path: polygon(1% 22%, 16% 6%, 34% 16%, 52% 2%, 70% 14%, 86% 5%, 99% 20%, 98% 74%, 84% 92%, 66% 82%, 48% 97%, 30% 84%, 14% 95%, 2% 80%);
  translate: -50% -50%;
  rotate: -38deg;
  filter: var(--pp-rest);
  transition: filter var(--sk-exit) linear, translate var(--sk-exit) var(--sk-ease);
  pointer-events: none;
}
.sk-root[data-skin="d01"] .sk-cc:not([data-active]):hover::before,
.sk-root[data-skin="d01"] .sk-mute[data-muted]:hover::before {
  filter: var(--pp-up);
  translate: -50% calc(-50% - 2px);
  transition-duration: var(--sk-enter);
}

/* Fullscreen: at the end of the button row on desktop, top-right when narrow */
.sk-root[data-skin="d01"] .sk-controls > .sk-fs {
  position: absolute;
  right: 16px;
  bottom: 12px;
}

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

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

/* ---------- Seek: the torn teal strip, cream track turning coral ---------- */

.pp-row--seek .sk-seek {
  --sk-seek-hit: var(--pp-strip-h);
  --sk-seek-radius: 6px;
  height: var(--pp-strip-h);
}
.sk-root[data-skin="d01"] .sk-track,
.sk-root[data-skin="d01"] .sk-seek[data-interactive] .sk-track {
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="d01"] .sk-track::before,
.sk-root[data-skin="d01"] .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(--pp-strip-h) * .39);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--pp-strip-slice) fill;
  border-image-width: 0 calc(var(--pp-strip-h) * .39);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
/* buffered: the cream track a shade brighter, inside the track rows only */
.sk-root[data-skin="d01"] .sk-track > .sk-buffer {
  filter: brightness(1.08) contrast(1.05);
  clip-path: inset(var(--pp-track-top) calc(100% - var(--media-slider-buffer, 0%)) var(--pp-track-bottom) 0);
}
/* played: the coral paper track, clipped at the fill and to the track rows */
.sk-root[data-skin="d01"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(var(--pp-track-top) calc(100% - var(--media-slider-fill, 0%)) var(--pp-track-bottom) 0);
}
/* the playhead: the coral thumbprint disc, on the track's center line.
   Its travel is inset by its own radius at both ends (the core centers it on
   the fill percentage, so an unclamped disc spills half its width past the
   strip at 0% and 100%): the left position is clamped into
   [radius, 100% - radius], so the disc always sits fully inside the strip. */
.sk-root[data-skin="d01"] .pp-row--seek .sk-thumb {
  --sk-thumb: 32px;
  top: var(--pp-track-mid);
  /* the clamp bounds the UNSCALED box; the interactive grow (scale 1.12)
     eats 1.92px a side, which the extra inset covers */
  left: clamp(calc(var(--sk-thumb) / 2 + 3px), var(--media-slider-fill), calc(100% - var(--sk-thumb) / 2 - 3px));
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="d01"] .pp-row--seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease), filter var(--sk-exit) linear;
  }
  .sk-root[data-skin="d01"] .pp-row--seek .sk-seek[data-interactive] .sk-thumb {
    scale: 1.12;
    filter: drop-shadow(0 4px 4px rgb(0 0 0 / .32));
    transition-duration: var(--sk-enter);
  }
}

/* Volume: a short torn strip beside the speaker disc, a small thumbprint as its thumb */
.pp-bar .sk-volume {
  gap: 0;
}
.sk-root[data-skin="d01"] .sk-volume-slider {
  --sk-vol-w: 104px;
  --pp-strip-h: 32px;
  margin-inline: 6px 2px;
}
.sk-root[data-skin="d01"] .sk-volume-slider .sk-track {
  height: var(--pp-strip-h);
}
.sk-root[data-skin="d01"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 20px;
  top: var(--pp-track-mid);
  /* same containment as the seek playhead: travel inset by the disc radius */
  left: clamp(var(--sk-thumb) / 2, var(--media-slider-fill), calc(100% - var(--sk-thumb) / 2));
  background: url(art/knob.png) center / contain no-repeat;
}

/* Preview: the storyboard frame on cream paper, the time in Nunito on teal */
.pp-row--seek .sk-preview {
  bottom: calc(100% + 6px);
}
.pp-row--seek .sk-preview-image {
  --sk-preview-radius: 4px;
  border: 4px solid var(--pp-cream);
  box-shadow: 0 2px 0 rgb(0 0 0 / .2), 0 8px 18px rgb(0 0 0 / .35);
}
.pp-row--seek .sk-preview-time {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--pp-teal);
  font: 800 15px/1 var(--media-font-family);
}

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

.sk-root[data-skin="d01"] .sk-center {
  padding-bottom: var(--pp-bar-h);
}
.sk-root[data-skin="d01"] .pp-bigplay {
  --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="d01"] .pp-bigplay .sk-icon {
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / .2)) drop-shadow(0 10px 16px rgb(0 0 0 / .22));
  transition: filter var(--sk-exit) linear, translate var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="d01"] .pp-bigplay:hover .sk-icon {
  filter: drop-shadow(0 6px 4px rgb(0 0 0 / .2)) drop-shadow(0 16px 22px rgb(0 0 0 / .26));
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="d01"] .pp-bigplay:hover .sk-icon {
    translate: 0 -4px;
  }
  .sk-root[data-skin="d01"] .pp-bigplay:active .sk-icon {
    translate: 0 0;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3));
  }
}

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

/* Loading: the paper gear disc turns */
.sk-root[data-skin="d01"] .sk-spinner {
  width: 68px;
  height: 68px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-root[data-skin="d01"] .sk-spinner .sk-icon {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / .4));
}

/* Error: a cream card with teal ink and a coral button */
.sk-root[data-skin="d01"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 18px;
  background: var(--pp-cream);
  color: var(--pp-ink-dark);
  box-shadow: 0 2px 0 rgb(0 0 0 / .2), 0 12px 28px rgb(0 0 0 / .35);
}
.sk-root[data-skin="d01"] .sk-error-title {
  padding-inline: 14px;
  font: 900 20px/1.2 var(--media-font-family);
}
.sk-root[data-skin="d01"] .sk-error-text {
  padding-inline: 14px;
  color: #1d4b50;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="d01"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--pp-coral);
  color: #fff9ee;
  font: 900 17px/1 var(--media-font-family);
}
.sk-root[data-skin="d01"] .sk-error-close:focus-visible {
  outline-color: var(--pp-ink-dark);
  box-shadow: 0 0 0 2px var(--pp-cream);
}
.sk-root[data-skin="d01"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--pp-teal);
  font: 800 17px/1 var(--media-font-family);
}

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

@container sk (max-width: 819px) {
  .sk-root[data-skin="d01"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --pp-strip-h: 50px;
    --pp-bar-h: calc(var(--pp-strip-h) + var(--sk-hit) + 22px);
  }
  .sk-root[data-skin="d01"] .pp-bigplay {
    --sk-icon: 108px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="d01"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: the same two rows, tighter; fullscreen moves to the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="d01"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --pp-strip-h: 40px;
    --pp-bar-h: calc(var(--pp-strip-h) + var(--sk-hit) + 14px);
  }
  .pp-bar {
    row-gap: 2px;
    padding: 2px 10px 8px;
  }
  .pp-row--ctrl {
    gap: 6px;
    padding-right: 0;
  }
  .pp-bar .sk-time {
    font-size: 17px;
  }
  .sk-root[data-skin="d01"] .pp-row--seek .sk-thumb {
    --sk-thumb: 26px;
  }
  .sk-root[data-skin="d01"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="d01"] .pp-bigplay {
    --sk-icon: 76px;
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is */
  .sk-root[data-skin="d01"][data-started]:not([data-ended]) .pp-bigplay {
    opacity: 0;
    pointer-events: none;
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 551px) {
  .sk-root[data-skin="d01"] {
    --sk-cue-clearance: 112px;
  }
}

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

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="d01"] {
    --sk-scrim: linear-gradient(to top, rgb(10 22 26) 0, rgb(10 22 26) calc(var(--pp-bar-h) + 6px), rgb(10 22 26 / 0) calc(var(--pp-bar-h) + 6px));
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="d01"] {
    --sk-focus-w: 3px;
  }
  .pp-bar .sk-time {
    text-shadow: none;
  }
}

/* Forced colors: the paper art stays; the chrome and the progress use system colors */
@media (forced-colors: active) {
  .pp-bar {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="d01"] .pp-row--seek .sk-track {
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="d01"] .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="d01"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="d01"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .sk-root[data-skin="d01"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}