/*
 * E03 Layered Plywood, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Birch plywood for a woodworking school's lesson videos. Every control is the wood Gemini generated
 * for this design (sheets2/e03-ply-sheet.jpg): stacked plywood discs with walnut inlay glyphs for play,
 * pause, volume, mute, captions and fullscreen, the grooved birch board with its laminated edge as the
 * seek (walnut fills the groove as it plays), and the lone walnut peg riding in the groove. A plain dark
 * scrim (not wood) under the two rows keeps the time readable over any frame.
 *
 * Seek: the empty-groove board (seek-unplayed.png) runs the whole row; the walnut-filled board
 * (seek-played.png) is clipped at the fill and to the groove's rows, so the birch around the groove and
 * the ply edge always come from one board; the peg covers the join.
 *
 * Signature: the peg slides in its groove with soft detents. While you drag, point at or arrow through a
 * slider, the peg dips up to 3px as it passes each 10% (20% on the volume), then rises out of it. The
 * dip is computed in CSS from the slider's own fill value, so seeking itself is untouched: the peg sits
 * at the true position and nothing snaps. Reduced motion: no dip.
 *
 *   --pl-off = fill - round(nearest, fill, step)   (a length: margin percentages resolve against the
 *   dip      = max(0, 3px - |off| * .4)              slider's width, the same width the fill spans)
 */

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

.sk-root[data-skin="e03"] {
  --media-accent-color: #c9a26b;
  --media-accent-text-color: #2a1608;
  --media-border-radius: 16px;
  --media-font-family: "Outfit", "Inter", system-ui, sans-serif;

  --pl-birch: #e8cfa3;
  --pl-walnut: #5b3a22;
  --pl-ink: #2a1608;
  --pl-step: 10%;

  /* the board: 110px tall in the art; caps .5775 of it; the groove runs 20% to 58%, centered at 39% */
  --pl-board-h: 60px;
  --pl-groove-top: 19%;
  --pl-groove-bottom: 41%;
  --pl-groove-mid: 38%;

  --sk-pad: 8px;
  --sk-hit: 54px;
  --sk-icon: 54px;
  --sk-btn-radius: 50%;
  --sk-ink: #fff8ec;
  --sk-ink-2: #f0e2c8;
  --sk-surface: #3c2614;
  --sk-surface-solid: #3c2614;
  --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(--pl-birch);
  --sk-focus: #fff8ec;
  --sk-focus-gap: #2a1608;
  --sk-error-accent: var(--pl-birch);
  /* a plain dark scrim (not wood) under the rows */
  --pl-scrim-a: .86;
  --sk-scrim: linear-gradient(to top, rgb(24 14 6 / var(--pl-scrim-a)) 0, rgb(24 14 6 / calc(var(--pl-scrim-a) * .75)) 92px, rgb(24 14 6 / 0) 200px);
  /* captions (Nov 15, 2026): the board's top (132px up) + a one-line cue + a gap; see the clearance block at the end */
  --sk-cue-clearance: 184px;

  --pl-bar-h: calc(var(--pl-board-h) + var(--sk-hit) + 20px);
}

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

/* ---------- Two rows: the board on top, the discs below ---------- */

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

/* Plywood discs: the art is the whole button */
.sk-root[data-skin="e03"] :is(.pl-board .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="e03"] :is(.pl-board .sk-btn, .sk-fs) .sk-icon {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
  transition: filter var(--sk-exit) linear, translate var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="e03"] :is(.pl-board .sk-btn, .sk-fs):hover .sk-icon {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .4)) brightness(1.06);
  transition-duration: var(--sk-enter);
}
/* pressed: the top ply seats down onto the stack */
.sk-root[data-skin="e03"] :is(.pl-board .sk-btn, .sk-fs):active .sk-icon {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)) brightness(.94);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e03"] :is(.pl-board .sk-btn, .sk-fs):active .sk-icon {
    translate: 0 1.5px;
  }
}

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

/* Captions: on = a birch bar under the disc; off = the disc dimmed (filter) */
.sk-root[data-skin="e03"] .sk-cc::after {
  bottom: -7px;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--pl-ink);
}
.sk-root[data-skin="e03"] .pl-board .sk-cc:not([data-active]) .sk-icon {
  /* Nov 15, 2026: .pl-board 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 2px 3px rgb(0 0 0 / .35)) saturate(.3) brightness(.7);
}

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

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

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

/* ---------- Seek: the grooved board ---------- */

.pl-row1 .sk-seek {
  --sk-seek-hit: var(--pl-board-h);
  --sk-seek-radius: 14px;
  height: var(--pl-board-h);
}
.sk-root[data-skin="e03"] .sk-track,
.sk-root[data-skin="e03"] .sk-seek[data-interactive] .sk-track {
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="e03"] .sk-track::before,
.sk-root[data-skin="e03"] .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(--pl-board-h) * .5775);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 64 fill;
  border-image-width: 0 calc(var(--pl-board-h) * .5775);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="e03"] .sk-track::before {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / .35));
}
.sk-root[data-skin="e03"] .sk-track > .sk-buffer {
  filter: brightness(.93) sepia(.15);
  clip-path: inset(var(--pl-groove-top) calc(100% - var(--media-slider-buffer, 0%)) var(--pl-groove-bottom) 0);
}
.sk-root[data-skin="e03"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(var(--pl-groove-top) calc(100% - var(--media-slider-fill, 0%)) var(--pl-groove-bottom) 0);
}
/* the peg: the lone walnut peg from the sheet, standing in the groove */
.sk-root[data-skin="e03"] .pl-row1 .sk-thumb {
  --sk-thumb-w: calc(var(--pl-board-h) * .44 * .817);
  /* thumb containment (Gus's rule, Nov 7; re-anchored Nov 7 9:20 PM after Gus's
     screenshot caught the peg's circle riding the board's rounded end caps):
     the board's end caps are border-image zones .5775 x board-h wide (34.65px),
     where the bar's end rounds down. Travel is clamped so the peg's left edge
     never goes left of the left cap's inner edge, and its right edge never goes
     right of the right cap's inner edge: the circle stays on the straight run
     of the bar at both ends, mid-drag grow included. */
  left: clamp(calc(var(--pl-board-h) * .5775 + var(--sk-thumb-w) / 2), var(--media-slider-fill), calc(100% - var(--pl-board-h) * .5775 - var(--sk-thumb-w) / 2));
  top: var(--pl-groove-mid);
  width: calc(var(--pl-board-h) * .44 * .817);
  height: calc(var(--pl-board-h) * .44);
  border-radius: 0;
  background: url(art/peg.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(20 8 2 / .5));
}
/* Signature: soft detents. The dip follows the true position, so it never moves the value. */
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e03"] :is(.sk-seek, .sk-volume-slider):is([data-dragging], [data-pointing], :focus-within) .sk-thumb {
    --pl-off: calc(var(--media-slider-fill) - round(nearest, var(--media-slider-fill), var(--pl-step)));
    margin-top: max(0px, 3px - max(var(--pl-off), -1 * var(--pl-off)) * .4);
  }
  .sk-root[data-skin="e03"] :is(.sk-seek, .sk-volume-slider)[data-interactive] .sk-thumb {
    filter: drop-shadow(0 3px 4px rgb(20 8 2 / .5));
  }
}

/* Volume: a short board beside the speaker disc; the peg is the level, so it is always drawn */
.pl-row2 .sk-volume {
  gap: 0;
}
.sk-root[data-skin="e03"] .sk-volume-slider {
  --sk-vol-w: 112px;
  --pl-board-h: 34px;
  --pl-step: 20%;
  margin-inline: 8px 4px;
}
.sk-root[data-skin="e03"] .sk-volume-slider .sk-track {
  height: var(--pl-board-h);
}
.sk-root[data-skin="e03"] .sk-volume-slider .sk-thumb {
  --sk-thumb-w: calc(var(--pl-board-h) * .5 * .817);
  /* thumb containment (Gus's rule, Nov 7; re-anchored Nov 7 9:20 PM with the
     seek peg): the volume board carries the same border-image end caps
     (.5775 x its 34px board height = 19.64px), so travel is clamped cap-inset
     the same way and the peg's circle stays on the straight run at both ends. */
  left: clamp(calc(var(--pl-board-h) * .5775 + var(--sk-thumb-w) / 2), var(--media-slider-fill), calc(100% - var(--pl-board-h) * .5775 - var(--sk-thumb-w) / 2));
  top: var(--pl-groove-mid);
  width: calc(var(--pl-board-h) * .5 * .817);
  height: calc(var(--pl-board-h) * .5);
  border-radius: 0;
  background: url(art/peg.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(20 8 2 / .5));
  scale: 1;
  opacity: 1;
}

/* Preview: the frame on a birch mat, the time on a walnut tag */
.pl-row1 .sk-preview {
  bottom: calc(100% + 4px);
}
.pl-row1 .sk-preview-image {
  --sk-preview-radius: 6px;
  border: 4px solid var(--pl-birch);
  box-shadow: 0 2px 0 #b58a54, 0 8px 18px rgb(0 0 0 / .35);
}
.pl-row1 .sk-preview-time {
  padding: 6px 10px 5px;
  border-radius: 6px;
  background: var(--pl-walnut);
  font: 600 14px/1 var(--media-font-family);
}

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

.sk-root[data-skin="e03"] .sk-center {
  padding-bottom: var(--pl-bar-h);
}
.sk-root[data-skin="e03"] .pl-disc {
  --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="e03"] .pl-disc .sk-icon {
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35));
  transition: filter var(--sk-exit) linear, translate var(--sk-exit) var(--sk-ease);
}
.sk-root[data-skin="e03"] .pl-disc:hover .sk-icon {
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .38)) brightness(1.05);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="e03"] .pl-disc:active .sk-icon {
    translate: 0 3px;
  }
}

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

.sk-root[data-skin="e03"] .sk-spinner {
  width: 70px;
  height: 70px;
  background: none;
  box-shadow: none;
}
.sk-root[data-skin="e03"] .sk-spinner .sk-icon {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / .4));
}
.sk-root[data-skin="e03"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border-radius: 16px;
  background: var(--pl-birch);
  color: var(--pl-ink);
  box-shadow: 0 4px 0 #b58a54, var(--sk-shadow);
}
.sk-root[data-skin="e03"] .sk-error-title {
  padding-inline: 14px;
  font: 600 20px/1.2 var(--media-font-family);
}
.sk-root[data-skin="e03"] .sk-error-text {
  padding-inline: 14px;
  color: #3e2410;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="e03"] .sk-error-close {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border-radius: 8px;
  background: var(--pl-walnut);
  color: #fff8ec;
  font: 600 17px/1 var(--media-font-family);
}
.sk-root[data-skin="e03"] .sk-error-close:focus-visible {
  outline-color: var(--pl-ink);
  box-shadow: 0 0 0 2px var(--pl-birch);
}
.sk-root[data-skin="e03"] .sk-empty p {
  padding: 12px 20px;
  background: var(--sk-surface);
  font: 600 16px/1 var(--media-font-family);
}

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

@container sk (max-width: 819px) {
  .sk-root[data-skin="e03"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --pl-board-h: 52px;
    --pl-bar-h: calc(var(--pl-board-h) + var(--sk-hit) + 20px);
  }
  .sk-root[data-skin="e03"] .pl-disc {
    --sk-icon: 108px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="e03"] .sk-volume-slider {
    display: none;
  }
}

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

@container sk (max-width: 519px) {
  .sk-root[data-skin="e03"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --pl-board-h: 40px;
    --pl-bar-h: calc(var(--pl-board-h) + var(--sk-hit) + 14px);
  }
  .pl-board {
    row-gap: 2px;
    padding: 2px 10px 8px;
  }
  .pl-row2 {
    gap: 6px;
    padding-right: 0;
  }
  .pl-row2 .sk-time {
    font-size: 17px;
  }
  .sk-root[data-skin="e03"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="e03"] .pl-disc {
    --sk-icon: 76px;
  }
  .sk-root[data-skin="e03"][data-started]:not([data-ended]) .pl-disc {
    opacity: 0;
    pointer-events: none;
  }
  /* the hover preview fits above the board 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 */
  .pl-row1 .sk-preview-image {
    min-width: 56px;
    max-width: min(158px, 100cqw - 256px);
  }
}

/* ---------- 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 board (the highest control) + a one-line cue + a gap: the desktop layout's board 132px up (184, at the top of this
   file), the mid layout's 118px up (152, the old value, which already cleared there), the narrow layout's 96px up (120).
   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 desktop value, which
   just lifts the cue higher. */
@media (max-width: 851px) {
  .sk-root[data-skin="e03"] {
    --sk-cue-clearance: 152px;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="e03"] {
    --sk-cue-clearance: 120px;
  }
}
/* 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: 152px;
}
.sk-root[data-skin="e03"]:fullscreen {
  --sk-cue-clearance: calc(144px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="e03"]:fullscreen {
    --sk-cue-clearance: calc(108px + 6.75vmin);
  }
}

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

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