/*
 * B06 Sticker Book, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * For a kids' reading and science app. Every control is a die-cut sticker Gemini generated for this
 * design (sheets2/b06-sticker-sheet.jpg), white border and all: cherry play and pause, the mint volume
 * pill with its three dots (kept, as generated), the mint mute pill, the purple fullscreen square, the
 * navy captions tag, the white-edged sky and sunny seek, and the yellow sticker dot as the handle. The
 * stickers keep their own shapes, so the pills and the tag are wider than the round ones. A plain dark
 * scrim (not a sticker) under the row keeps the time readable.
 *
 * Seek: the white-edged capsule is seek-unplayed.png (sky inside); seek-played.png (sunny inside) is
 * clipped at the fill and to the inside rows, so the white die-cut edge always comes from one sticker.
 *
 * Signature: a sticker lifts 2px onto a deeper shadow on hover and presses flat on click, 160ms, no
 * bounce. Reduced motion: only the shadow changes.
 */

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

.sk-root[data-skin="b06"] {
  --media-accent-color: #ffc928;
  --media-accent-text-color: #1d2147;
  --media-border-radius: 24px;
  --media-font-family: "Grandstander", "Inter", system-ui, sans-serif;

  --sb-navy: #1d2147;

  /* capsule: 110px tall in the art; caps .5566 of it; the inside runs 29% to 71% */
  --sb-strip-h: 46px;
  --sb-in-top: 27%;
  --sb-in-bottom: 27%;

  --sb-rest: drop-shadow(0 2px 2px rgb(0 0 0 / .22));
  --sb-up: drop-shadow(0 4px 3px rgb(0 0 0 / .2)) drop-shadow(0 8px 12px rgb(0 0 0 / .22));
  --sb-down: drop-shadow(0 1px 1px rgb(0 0 0 / .25));

  --sk-pad: 8px;
  --sk-hit: 56px;
  --sk-icon: 56px;
  --sk-btn-radius: 18px;
  --sk-ink: #ffffff;
  --sk-ink-2: #fff3c8;
  --sk-surface: var(--sb-navy);
  --sk-surface-solid: var(--sb-navy);
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: 0 3px 0 rgb(0 0 0 / .18), 0 10px 22px rgb(0 0 0 / .25);
  --sk-cc-on: #ffffff;
  --sk-focus: var(--sb-navy);
  --sk-focus-gap: #ffffff;
  --sk-focus-w: 3px;
  --sk-error-accent: #ffc928;
  /* a plain dark scrim under the row (not a sticker) */
  --sb-scrim-a: .84;
  --sk-scrim: linear-gradient(to top, rgb(14 16 38 / var(--sb-scrim-a)) 0, rgb(14 16 38 / calc(var(--sb-scrim-a) * .72)) 74px, rgb(14 16 38 / 0) 160px);
  /* captions (Nov 15, 2026): the stickers' top (72px up) + a one-line cue + a gap; see the clearance block at the end */
  --sk-cue-clearance: 120px;

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

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

/* ---------- The row: stickers on one baseline ---------- */

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

/* The stickers keep their own shapes: the pills and the tag are wider than the round ones */
.sk-root[data-skin="b06"] .sk-mute { width: calc(var(--sk-hit) * 1.8); }
.sk-root[data-skin="b06"] .sk-cc { width: calc(var(--sk-hit) * 1.4); }
.sk-root[data-skin="b06"] .sk-fs { width: calc(var(--sk-hit) * 1.107); }
.sk-root[data-skin="b06"] .sk-mute .sk-icon { width: calc(var(--sk-icon) * 1.8); }
.sk-root[data-skin="b06"] .sk-cc .sk-icon { width: calc(var(--sk-icon) * 1.4); }
.sk-root[data-skin="b06"] .sk-fs .sk-icon { width: calc(var(--sk-icon) * 1.107); }
.sk-root[data-skin="b06"] :is(.sk-mute, .sk-cc) {
  --sk-btn-radius: 999px;
}

/* Signature: lift on hover, flat on press, 160ms, no bounce */
.sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs) {
  transition: none;
}
.sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs) .sk-icon {
  filter: var(--sb-rest);
  transition: filter 160ms linear, translate 160ms cubic-bezier(.3, .7, .4, 1);
}
.sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs):hover .sk-icon {
  filter: var(--sb-up);
}
.sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs):active .sk-icon {
  filter: var(--sb-down);
  transition-duration: 60ms;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs):hover .sk-icon {
    translate: 0 -2px;
  }
  .sk-root[data-skin="b06"] :is(.sb-row .sk-btn, .sk-fs):active .sk-icon {
    translate: 0 0;
  }
}

/* Focus: a navy ring with a white halo beyond it (reads over bright and dark frames) */
.sk-root[data-skin="b06"] :is(.sk-btn, .sk-error-close):focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 calc(2px + var(--sk-focus-w) + 2px) #ffffff;
}
.sk-root[data-skin="b06"] .sk-seek:has(media-slider-thumb:focus-visible),
.sk-root[data-skin="b06"] .sk-volume-slider:has(media-slider-thumb:focus-visible) {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 calc(2px + var(--sk-focus-w) + 2px) #ffffff;
}

/* Captions: on = a white bar under the tag (shape and position); off = the tag greyed (filter) */
.sk-root[data-skin="b06"] .sk-cc::after {
  bottom: -8px;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--sb-navy);
}
.sk-root[data-skin="b06"] .sk-cc:not([data-active]) .sk-icon {
  filter: var(--sb-rest) saturate(.2) brightness(.8);
}
/* off stays greyed while hovered or pressed (Nov 15, 2026): the lift rule above outranks the rule before this one, and
   on touch Chrome keeps :hover on a tapped button, so a tap to turn captions off showed no change to the tag */
.sk-root[data-skin="b06"] .sb-row .sk-cc:not([data-active]):hover .sk-icon {
  filter: var(--sb-up) saturate(.2) brightness(.8);
}
.sk-root[data-skin="b06"] .sb-row .sk-cc:not([data-active]):active .sk-icon {
  filter: var(--sb-down) saturate(.2) brightness(.8);
}

/* Fullscreen: the last sticker of the row on desktop, top-right when narrow */
.sk-root[data-skin="b06"] .sk-controls > .sk-fs {
  position: absolute;
  right: 18px;
  bottom: var(--sb-bar-pad);
}

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

.sb-row .sk-time {
  padding: 0 4px;
  font: 800 21px/1 var(--media-font-family);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 var(--sb-navy), 0 0 10px rgb(10 12 30 / .6);
}
.sb-row .sk-time media-time-separator,
.sb-row .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the white-edged capsule, sky turning sunny ---------- */

.sb-row .sk-seek {
  --sk-seek-hit: var(--sb-strip-h);
  --sk-seek-radius: 999px;
  height: var(--sb-strip-h);
  margin-inline: 2px;
}
.sk-root[data-skin="b06"] .sk-track,
.sk-root[data-skin="b06"] .sk-seek[data-interactive] .sk-track {
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
.sk-root[data-skin="b06"] .sk-track::before,
.sk-root[data-skin="b06"] .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(--sb-strip-h) * .5566);
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 61 fill;
  border-image-width: 0 calc(var(--sb-strip-h) * .5566);
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="b06"] .sk-track::before {
  filter: var(--sb-rest);
}
.sk-root[data-skin="b06"] .sk-track > .sk-buffer {
  filter: brightness(1.1) saturate(.9);
  clip-path: inset(var(--sb-in-top) calc(100% - var(--media-slider-buffer, 0%)) var(--sb-in-bottom) 0);
}
.sk-root[data-skin="b06"] .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(var(--sb-in-top) calc(100% - var(--media-slider-fill, 0%)) var(--sb-in-bottom) 0);
}
/* the handle: the yellow sticker dot */
.sk-root[data-skin="b06"] .sb-row .sk-seek .sk-thumb {
  --sk-thumb: 40px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .3));
  /* 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%. This must live in the base rule: it sat inside the
     reduced-motion media query, so for reduced-motion users it vanished and the 40px handle spilled 20px past
     both capsule ends (coordinator audit g2a, Nov 15, 2026). */
  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));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b06"] .sb-row .sk-seek .sk-thumb {
    transition: translate 160ms cubic-bezier(.3, .7, .4, 1), filter 160ms linear;
  }
  .sk-root[data-skin="b06"] .sb-row .sk-seek[data-interactive] .sk-thumb {
    translate: -50% calc(-50% - 2px);
    filter: drop-shadow(0 5px 5px rgb(0 0 0 / .3));
  }
}

/* Volume: a short capsule beside the pill, the yellow dot as its handle */
.sb-row .sk-volume {
  gap: 0;
}
.sk-root[data-skin="b06"] .sk-volume-slider {
  --sk-vol-w: 100px;
  --sb-strip-h: 30px;
  margin-inline: 6px 2px;
}
.sk-root[data-skin="b06"] .sk-volume-slider .sk-track {
  height: var(--sb-strip-h);
}
.sk-root[data-skin="b06"] .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: 26px;
  background: url(art/knob.png) center / contain no-repeat;
}

/* Preview: the frame on a white sticker edge, the time on a navy tag */
.sb-row .sk-preview {
  bottom: calc(100% + 10px);
}
.sb-row .sk-preview-image {
  --sk-preview-radius: 14px;
  border: 4px solid #ffffff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .18), 0 10px 22px rgb(0 0 0 / .3);
}
.sb-row .sk-preview-time {
  padding: 5px 10px 4px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--sb-navy);
  font: 800 15px/1 var(--media-font-family);
}

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

.sk-root[data-skin="b06"] .sk-center {
  padding-bottom: var(--sb-bar-h);
}
.sk-root[data-skin="b06"] .sb-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="b06"] .sb-bigplay .sk-icon {
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / .2)) drop-shadow(0 10px 18px rgb(0 0 0 / .22));
  transition: filter 160ms linear, translate 160ms cubic-bezier(.3, .7, .4, 1);
}
.sk-root[data-skin="b06"] .sb-bigplay:hover .sk-icon {
  filter: drop-shadow(0 7px 4px rgb(0 0 0 / .2)) drop-shadow(0 16px 22px rgb(0 0 0 / .25));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b06"] .sb-bigplay:hover .sk-icon {
    translate: 0 -3px;
  }
  .sk-root[data-skin="b06"] .sb-bigplay:active .sk-icon {
    translate: 0 0;
  }
}

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

.sk-root[data-skin="b06"] .sk-spinner {
  width: 70px;
  height: 70px;
  background: none;
  box-shadow: none;
}
.sk-root[data-skin="b06"] .sk-spinner .sk-icon {
  width: 70px;
  height: 70px;
  filter: var(--sb-rest);
}
.sk-root[data-skin="b06"] .sk-error {
  gap: 8px;
  padding: 22px 8px 8px;
  border: 4px solid #ffffff;
  border-radius: 24px;
  background: var(--sb-navy);
  box-shadow: var(--sk-shadow);
}
.sk-root[data-skin="b06"] .sk-error-title {
  padding-inline: 14px;
  font: 800 21px/1.2 var(--media-font-family);
}
.sk-root[data-skin="b06"] .sk-error-text {
  padding-inline: 14px;
  color: #eef0ff;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="b06"] .sk-error-close {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border-radius: 14px;
  background: #ffc928;
  color: var(--sb-navy);
  font: 800 18px/1 var(--media-font-family);
}
.sk-root[data-skin="b06"] .sk-empty p {
  padding: 12px 22px 10px;
  border: 4px solid #ffffff;
  background: var(--sb-navy);
  font: 800 17px/1 var(--media-font-family);
}

/* ---------- Mid widths: two rows (the seek on top) so the track keeps its room ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="b06"] :is(.sk-controls, .sk-center) {
    --sk-hit: 50px;
    --sk-icon: 50px;
    --sb-strip-h: 40px;
    --sb-bar-pad: 12px;
    --sb-bar-h: calc(var(--sb-bar-pad) * 2 + var(--sb-strip-h) + 6px + var(--sk-hit));
  }
  .sb-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-rows: var(--sb-strip-h) var(--sk-hit);
    gap: 6px 10px;
    padding: var(--sb-bar-pad) 14px;
  }
  .sb-row .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: 0;
  }
  .sb-row .sk-play { grid-column: 1; grid-row: 2; }
  .sb-row .sk-volume { grid-column: 2; grid-row: 2; }
  .sb-row .sk-time { grid-column: 3; grid-row: 2; }
  .sb-row .sk-cc { grid-column: 5; grid-row: 2; margin-right: calc(var(--sk-hit) * 1.107 + 10px); }
  .sk-root[data-skin="b06"] .sk-controls > .sk-fs {
    right: 14px;
  }
  .sk-root[data-skin="b06"] .sb-bigplay {
    --sk-icon: 108px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="b06"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: 44px stickers, fullscreen at the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="b06"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --sb-strip-h: 34px;
    --sb-bar-pad: 8px;
    --sb-bar-h: calc(var(--sb-bar-pad) * 2 + var(--sb-strip-h) + 4px + var(--sk-hit));
  }
  .sb-row {
    gap: 4px 6px;
    padding: var(--sb-bar-pad) 8px;
  }
  .sb-row .sk-cc {
    margin-right: 0;
  }
  .sb-row .sk-time {
    padding: 0 2px;
    font-size: 15px;
  }
  .sk-root[data-skin="b06"] .sb-row .sk-seek .sk-thumb {
    --sk-thumb: 30px;
  }
  .sk-root[data-skin="b06"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .sk-root[data-skin="b06"] .sb-bigplay {
    --sk-icon: 76px;
  }
  .sk-root[data-skin="b06"][data-started]:not([data-ended]) .sb-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  /* the hover preview fits above the seek 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 */
  .sb-row .sk-preview-image {
    min-width: 64px;
    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 highest sticker + a one-line cue + a gap: one row 72px up (120), two rows 108px up (146), narrow 90px up (118).
   The player is the viewport less 32px, so the two-row band (players 520 to 819px) is viewports 552 to 851px; the
   query runs to 871px so a classic scrollbar can't drop a two-row player into the one-row value. */
@media (max-width: 871px) {
  .sk-root[data-skin="b06"] {
    --sk-cue-clearance: 146px;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="b06"] {
    --sk-cue-clearance: 118px;
  }
}
/* 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: 96px;
}
.sk-root[data-skin="b06"]:fullscreen {
  --sk-cue-clearance: calc(84px + 6.75vmin);
}
@media (max-width: 819px) {
  .sk-root[data-skin="b06"]:fullscreen {
    --sk-cue-clearance: calc(120px + 6.75vmin);
  }
}
@media (max-width: 519px) {
  .sk-root[data-skin="b06"]:fullscreen {
    --sk-cue-clearance: calc(102px + 6.75vmin);
  }
}

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

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