/*
 * Z07 The Vibe Room (renamed from Darkroom at Gus's word, Nov 7, 2026), on the shared core (build 3, Nov 8, 2026).
 *
 * A player for the darkroom: safelight red on near-black, chunky glove-friendly controls on 48px
 * targets, and a seek built like an enlarger timer rail (a heavy rail with a round handle).
 *
 * Every control image is the Gemini sheet's own art (round3/sheets/z07-darkroom-sheet.jpg), cut with
 * build/tools/cut_art.py: the chunky cream glyphs, the cream CC chip, the heavy rail split at its baked
 * crimson handle, the lone crimson handle, the near-black center disc. The CSS draws surfaces and light
 * (the bar, the safelight bloom, the focus glow), never a glyph.
 *
 * Signature, the safelight: a soft red glow blooms behind the center play while the video is PAUSED,
 * slowly, like the lamp over the bench warming up, and dims away to working darkness when it plays.
 * It is light only (a radial gradient behind the disc), and it is gone under reduced motion and
 * reduced transparency.
 *
 * Off states, this entry's own: captions off dims the CC face; muted shows the sheet's mute face,
 * painted by the Video.js mute component itself.
 *
 * Ambient-light gel picker (U26, Gus-approved Nov 7, 2026): a "Gel" button opens a gel-filter swatch
 * book of six lights. z07-gel.js sets data-gel on the root; here each gel sets --z7-gel (the light, as
 * an rgb triplet) and --z7-gel-filter (a measured filter that turns the sheet's crimson rail art into
 * that light). Only four things read them: the paused bloom, the seek rail's played run, its round
 * handle, and the CC chip's underline bar. Safelight red is the default: no data-gel, no filter, the
 * shipped look unchanged.
 */

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

.sk-root[data-skin="z07"] {
  --media-accent-color: #942130;
  --media-accent-text-color: #f6e5c7;
  --media-border-radius: 20px;

  --z7-black: #1c1817;
  --z7-cream: #f6e5c7;
  --z7-cream-2: #cdbca0;
  --z7-crimson: #942130;
  --z7-safelight: 206 30 26;

  /* rail geometry: the rail's round end is .4915 (played) / .4833 (unplayed) of the strip height */
  --z7-rail-h: 20px;
  --z7-slice-p: 54;
  --z7-slice-u: 53;
  --z7-cap-p: .4915;
  --z7-cap-u: .4833;

  /* the bar */
  --z7-inset: 20px;
  --z7-bottom: 18px;
  --z7-bar-pad: 9px;
  --z7-bar-h: calc(var(--sk-hit) + var(--z7-bar-pad) * 2);
  --z7-cc-w: 58px;
  --z7-bloom-r: 150px;

  --sk-pad: var(--z7-bar-pad);
  --sk-hit: 48px;
  --sk-icon: 30px;
  --sk-r-outer: var(--media-border-radius);
  --sk-ink: var(--z7-cream);
  --sk-ink-2: var(--z7-cream-2);
  --sk-surface: rgb(28 24 23 / .96);
  --sk-surface-solid: var(--z7-black);
  --sk-blur: 0px;
  --sk-hairline: rgb(246 229 199 / .08);
  --sk-shadow: 0 2px 6px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .4);
  --sk-focus: var(--z7-cream);
  --sk-focus-gap: var(--z7-black);
  --sk-error-accent: var(--z7-cream);
  --sk-scrim: none;
  /* Chromium hangs the cue box from the core's line, so the line sits a caption-height above the bar
     (plain px: the core reads it with parseFloat) */
  --sk-cue-clearance: 124px;
}


/* ---------- Gels: the light color and the filter that retints the crimson rail art ---------- */
/* Each filter was fitted against the art's own crimson (133, 0, 1) and then MEASURED in Chromium on the
   real strip and handle (within 2 of the target on every channel; build/.work/z07gel/verify.json):
   grayscale + sepia give a neutral warm base from the art's own luminance, then saturate, hue-rotate
   and brightness set the gel. Same cut art, retinted; nothing redrawn. */
.sk-root[data-skin="z07"][data-gel="amber"] { /* amber */
  --z7-gel: 232 150 40;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(3.45) hue-rotate(-5.5deg) brightness(4.61);
}
.sk-root[data-skin="z07"][data-gel="green"] { /* deep green */
  --z7-gel: 40 150 80;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(2.95) hue-rotate(89.0deg) brightness(3.52);
}
.sk-root[data-skin="z07"][data-gel="moonlight"] { /* moonlight blue */
  --z7-gel: 120 160 235;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(2.15) hue-rotate(-179.5deg) brightness(4.55);
}
.sk-root[data-skin="z07"][data-gel="magenta"] { /* magenta */
  --z7-gel: 214 48 160;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(13.25) hue-rotate(-70.0deg) brightness(2.31);
}
.sk-root[data-skin="z07"][data-gel="warmwhite"] { /* warm white */
  --z7-gel: 255 210 152;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(16.75) hue-rotate(-16.0deg) brightness(8.71);
}
.sk-root[data-skin="z07"][data-gel="cyan"] { /* electric cyan */
  --z7-gel: 0 225 255;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(20.15) hue-rotate(-168.5deg) brightness(4.07);
}
.sk-root[data-skin="z07"][data-gel="ultraviolet"] { /* ultraviolet */
  --z7-gel: 124 58 237;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(19.25) hue-rotate(-109.0deg) brightness(1.99);
}
.sk-root[data-skin="z07"][data-gel="chrome"] { /* chrome: deep steel, exaggerated to read instantly (Gus, Nov 8: visual performance, not realism) */
  --z7-gel: 100 118 138;
  --z7-gel-filter: grayscale(1) sepia(1) saturate(0.80) hue-rotate(-188.0deg) brightness(3.40);
}
/* The seek preview's time tab takes the picked color as well; cream text on it fell to 1.1 to 3.8:1 on seven colors (release
   run, Nov 15, 2026). Dark ink on the light colors, a deeper tab where neither ink reaches 4.5:1 (magenta, chrome): every tab is
   4.6:1 or more, and red keeps its cream on crimson (6.7:1). */
.sk-root[data-skin="z07"]:is([data-gel="amber"], [data-gel="green"], [data-gel="moonlight"], [data-gel="warmwhite"], [data-gel="cyan"]) {
  --z7-tab-ink: var(--z7-black);
}
.sk-root[data-skin="z07"][data-gel="magenta"] {
  --z7-tab: 168 42 126;
}
.sk-root[data-skin="z07"][data-gel="chrome"] {
  --z7-tab: 86 99 115;
}

/* ---------- Chrome theatrics (Gus, Nov 8, 2026: "add an artificial shininess, glitter, sparkles;
   make it look CHROME"). A flat steel color still read as plain light gray, so chrome alone gets
   the metal treatment on the same retint targets: hard metallic bands, white-hot sparkle stars and
   glitter on the runs and knobs, a white-core bloom. Pure CSS light effects, no art is touched. */
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-center::before {
  background: radial-gradient(circle var(--z7-bloom-r) at 50% 50%,
    rgb(255 255 255 / .55) 0%,
    rgb(178 198 219 / .38) 34%,
    rgb(var(--z7-gel) / .16) 62%,
    rgb(var(--z7-gel) / 0) 100%);
}
/* the played runs: a metal band overlay (dark, steel, white-hot line, steel, dark) with glitter */
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-track > .sk-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 38%, rgb(255 255 255 / 1) 0 1.5px, rgb(255 255 255 / .45) 3px, transparent 5px),
    radial-gradient(circle at 47% 62%, rgb(255 255 255 / .95) 0 1.2px, rgb(255 255 255 / .4) 2.6px, transparent 4.2px),
    radial-gradient(circle at 74% 34%, rgb(255 255 255 / 1) 0 1.5px, rgb(255 255 255 / .45) 3px, transparent 5px),
    radial-gradient(circle at 90% 60%, rgb(255 255 255 / .9) 0 1px, rgb(255 255 255 / .35) 2.2px, transparent 3.6px),
    linear-gradient(180deg, #232a31 0%, #59636e 26%, #aeb9c6 40%, #ffffff 50%, #c3cedb 58%, #59636e 76%, #1c2229 100%);
  opacity: .94;
}
/* the knobs: a white-hot sheen pool plus a four-point sparkle star riding the rim */
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .38) 26%, rgb(255 255 255 / 0) 55%);
}
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-thumb::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 0; /* inside the handle box, so inside the rail at 100% too (it ran 1px past the seek rail's end at -3px) */
  width: 13px;
  height: 13px;
  z-index: 4;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  filter: drop-shadow(0 0 3px rgb(255 255 255 / .95));
}
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-volume-slider .sk-thumb::before {
  width: 10px;
  height: 10px;
  top: -2px;
  right: 0;
}
/* the underlines (CC bar and the VIBE mark): a horizontal chrome strip, bright core, dark edges */
.sk-root[data-skin="z07"][data-gel="chrome"] .sk-cc::after {
  background: linear-gradient(90deg, #39434d 0%, #78838f 28%, #ffffff 50%, #78838f 72%, #39434d 100%);
}
.sk-root[data-skin="z07"][data-gel="chrome"] .z7-gel-mark {
  background: linear-gradient(90deg, #39434d 0%, #78838f 28%, #ffffff 50%, #78838f 72%, #39434d 100%);
  box-shadow: 0 0 7px rgb(255 255 255 / .75);
}

/* ---------- The bar: one heavy near-black slab, lit at its edge by the safelight ---------- */

.z7-bar {
  position: absolute;
  left: var(--z7-inset);
  right: var(--z7-inset);
  bottom: var(--z7-bottom);
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--z7-bar-h);
  padding: var(--z7-bar-pad) calc(var(--z7-bar-pad) + var(--sk-hit) + 8px) var(--z7-bar-pad) var(--z7-bar-pad);
  border-radius: var(--sk-r-outer);
  background: rgb(28 24 23 / .96);
  box-shadow:
    inset 0 0 0 1px var(--sk-hairline),
    0 0 22px 2px rgb(var(--z7-gel, var(--z7-safelight)) / .28),
    var(--sk-shadow);
  color: var(--sk-ink);
}

/* Chunky buttons: the art is the glyph; hover lays a crimson tile behind it (20 - 9 = 11px corners) */
.sk-root[data-skin="z07"] :is(.z7-bar .sk-btn, .sk-fs) {
  --sk-btn-radius: var(--sk-r-inner);
  transition: background-color var(--sk-exit) linear;
}
.sk-root[data-skin="z07"] :is(.z7-bar .sk-btn, .sk-fs):hover {
  background-color: rgb(var(--z7-gel, 148 33 48) / .42);
  transition-duration: var(--sk-enter);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z07"] :is(.z7-bar .sk-btn, .sk-fs) .sk-icon {
    transition: scale var(--sk-exit) var(--sk-ease), filter var(--sk-exit) linear;
  }
  .sk-root[data-skin="z07"] :is(.z7-bar .sk-btn, .sk-fs):active .sk-icon {
    scale: .9;
    transition-duration: 60ms;
  }
}

/* Focus: the core's cream ring outside a near-black gap, plus the safelight's soft red glow */
.sk-root[data-skin="z07"] :is(.sk-btn, .sk-error-close):focus-visible {
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap), 0 0 14px 5px rgb(var(--z7-gel, var(--z7-safelight)) / .55);
}
.sk-root[data-skin="z07"] .sk-seek:has(media-slider-thumb:focus-visible),
.sk-root[data-skin="z07"] .sk-volume-slider:has(media-slider-thumb:focus-visible) {
  box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap), 0 0 14px 5px rgb(var(--z7-gel, var(--z7-safelight)) / .5);
}

/* Fullscreen sits at the bar's end (last in the markup so narrow layouts can move it) */
.sk-root[data-skin="z07"] .sk-controls > .sk-fs {
  position: absolute;
  right: calc(var(--z7-inset) + var(--z7-bar-pad));
  bottom: calc(var(--z7-bottom) + var(--z7-bar-pad));
}

/* ---------- Captions chip ---------- */

.sk-root[data-skin="z07"] .z7-bar .sk-cc {
  width: var(--z7-cc-w);
}
.sk-root[data-skin="z07"] .z7-bar .sk-cc .sk-icon {
  width: calc(var(--z7-cc-w) - 12px);
  height: 34px;
}
/* on: a short crimson bar under the chip (shape and position, not color alone) */
.sk-root[data-skin="z07"] .sk-cc::after {
  bottom: 3px;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgb(var(--z7-gel, 148 33 48)); /* gel retint target (c); default = the crimson #942130 */
  opacity: 0;
}
.sk-root[data-skin="z07"][data-captions] .sk-cc::after {
  opacity: 1;
  scale: 1 1;
}
/* off: the CC face dims, like a print left in the stop bath too long */
.sk-root[data-skin="z07"]:not([data-captions]) .z7-bar .sk-cc .sk-icon {
  filter: brightness(.48) saturate(.7);
}
.sk-root[data-skin="z07"]:not([data-captions]) .z7-bar .sk-cc:hover .sk-icon {
  filter: brightness(.64) saturate(.8);
}

/* ---------- Time: large tabular figures, cream ---------- */

.z7-bar .sk-time {
  padding: 0 6px 0 10px;
  gap: .28em;
  font: 700 22px/1 "Montserrat", var(--media-font-family);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.z7-bar .sk-time media-time-separator,
.z7-bar .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the enlarger timer rail, crimson run, cream ahead, round crimson handle ---------- */

.z7-bar .sk-seek {
  --sk-seek-hit: 48px;
  --sk-seek-radius: var(--sk-r-inner);
  margin-inline: 10px 6px;
}
.sk-root[data-skin="z07"] .sk-track,
.sk-root[data-skin="z07"] .sk-seek[data-interactive] .sk-track {
  height: var(--z7-rail-h);
  border-radius: calc(var(--z7-rail-h) / 2);
  background: none;
  overflow: hidden;
}
/* unplayed: the cream rail, held a step down until the stream reaches it */
.sk-root[data-skin="z07"] .sk-track::before,
.sk-root[data-skin="z07"] .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(--z7-rail-h) * var(--z7-cap-u));
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 var(--z7-slice-u) fill;
  border-image-width: 0 calc(var(--z7-rail-h) * var(--z7-cap-u));
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}
.sk-root[data-skin="z07"] .sk-track::before {
  filter: brightness(.8);
}
/* buffered: the cream rail at its full tone */
.sk-root[data-skin="z07"] .sk-track > .sk-buffer {
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* played: the crimson run, clipped at the fill */
.sk-root[data-skin="z07"] .sk-track > .sk-fill {
  border-width: 0 calc(var(--z7-rail-h) * var(--z7-cap-p));
  border-image-source: url(art/seek-played.png);
  border-image-slice: 0 var(--z7-slice-p) fill;
  border-image-width: 0 calc(var(--z7-rail-h) * var(--z7-cap-p));
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}

/* gel retint targets: the played runs of BOTH rails. U26 retinted the seek run
   only; Gus's word Nov 7 9:27 PM ("the volume rail and anything else crimson,
   this is basically replacing with the new color") extends the same measured
   filter to the volume run. The volume knob below takes it too. */
.sk-root[data-skin="z07"] .sk-track > .sk-fill {
  filter: var(--z7-gel-filter, none);
}

/* the handle: the sheet's lone crimson handle, round and heavy (gel retint target b2) */
.sk-root[data-skin="z07"] .sk-seek .sk-thumb {
  --sk-thumb: 32px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: var(--z7-gel-filter, ) drop-shadow(0 2px 3px rgb(0 0 0 / .6));
  /* thumb containment (U16 standard): the core centers the thumb on the fill percentage, so
     unclamped it spills half its width past the rail at 0% and 100%. Travel is clamped to
     [half width + 2px, 100% - half width - 2px]: the 2px covers the 1.1 drag grow (32px -> 35.2px),
     so the handle stays fully inside its rail at both ends at every width. */
  left: clamp(calc(var(--sk-thumb-w, var(--sk-thumb)) / 2 + 2px), var(--media-slider-fill), calc(100% - var(--sk-thumb-w, var(--sk-thumb)) / 2 - 2px));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z07"] .sk-seek .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="z07"] .sk-seek[data-interactive] .sk-thumb {
    scale: 1.1;
    transition-duration: var(--sk-enter);
  }
}

/* ---------- Volume: the speaker glyph and a short run of the same rail ---------- */

.z7-bar .sk-volume {
  gap: 0;
}
.sk-root[data-skin="z07"] .sk-volume-slider {
  --sk-vol-w: 76px;
  --z7-rail-h: 12px;
  margin-inline: 6px 4px;
}
.sk-root[data-skin="z07"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 22px;
  z-index: 3;
  background: url(art/knob.png) center / contain no-repeat;
  filter: var(--z7-gel-filter, ) drop-shadow(0 1px 2px rgb(0 0 0 / .6));
  /* thumb containment (U16 standard): travel clamped to [half width, 100% - half width]; the
     volume handle never grows (the core reveals it by scale 0 -> 1 only), so no extra allowance. */
  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));
}

/* Preview: the storyboard frame in a near-black mat, the time on a crimson tab */
.z7-bar .sk-preview {
  bottom: calc(100% + 16px);
}
.z7-bar .sk-preview-image {
  --sk-preview-radius: 8px;
  border: 4px solid var(--z7-black);
  box-shadow: 0 0 0 1px rgb(var(--z7-gel, var(--z7-safelight)) / .5), var(--sk-shadow);
}
.z7-bar .sk-preview-time {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(var(--z7-tab, var(--z7-gel, 148 33 48)));
  color: var(--z7-tab-ink, var(--z7-cream));
  font: 700 15px/1 "Montserrat", var(--media-font-family);
  font-variant-numeric: tabular-nums;
}

/* ---------- Center play: the sheet's near-black disc, and the safelight behind it ---------- */

.sk-root[data-skin="z07"] .sk-center {
  --z7-center-pad: calc(var(--z7-bottom) + var(--z7-bar-h) * .5);
  padding-bottom: var(--z7-center-pad);
}
.sk-root[data-skin="z07"] .sk-bigplay {
  --sk-icon: 112px;
  position: relative;
  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="z07"] .sk-bigplay .sk-icon {
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45));
}

/* Signature: the safelight bloom (gel retint target a). Light only, centered on the disc (the box shares the disc's center:
   the same bottom padding as the grid that centers it). It fades in slowly while paused and dims away
   when the video plays, waits or errors. */
.sk-root[data-skin="z07"] .sk-center::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--z7-center-pad) 0;
  z-index: -1;
  background: radial-gradient(circle var(--z7-bloom-r) at 50% 50%,
    rgb(var(--z7-gel, var(--z7-safelight)) / .62) 0%,
    rgb(var(--z7-gel, var(--z7-safelight)) / .34) 38%,
    rgb(var(--z7-gel, var(--z7-safelight)) / .12) 66%,
    rgb(var(--z7-gel, var(--z7-safelight)) / 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.4, 0, .6, 1);
}
.sk-root[data-skin="z07"] .sk-center {
  isolation: isolate;
}
.sk-root[data-skin="z07"][data-paused]:not([data-waiting]):not([data-error]):not([data-empty]) .sk-center::before {
  opacity: 1;
  transition: opacity 1400ms cubic-bezier(.2, .6, .3, 1);
}
.sk-root[data-skin="z07"][data-paused]:not([data-waiting]):not([data-error]):not([data-empty]) .sk-center:has(.sk-bigplay:hover)::before {
  opacity: 1;
  filter: brightness(1.15);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z07"] .sk-center::before {
    scale: .82;
    transition: opacity 700ms cubic-bezier(.4, 0, .6, 1), scale 700ms cubic-bezier(.4, 0, .6, 1);
  }
  .sk-root[data-skin="z07"][data-paused]:not([data-waiting]):not([data-error]):not([data-empty]) .sk-center::before {
    scale: 1;
    transition: opacity 1400ms cubic-bezier(.2, .6, .3, 1), scale 1800ms cubic-bezier(.2, .6, .3, 1);
  }
  .sk-root[data-skin="z07"] .sk-bigplay:hover .sk-icon {
    scale: 1.03;
    transition: scale var(--sk-enter) var(--sk-ease);
  }
  .sk-root[data-skin="z07"] .sk-bigplay:active .sk-icon {
    scale: .97;
    transition-duration: 60ms;
  }
}

/* ---------- The gel picker: a button on the slab and a gel-filter swatch book ---------- */

.z7-bar .z7-gel {
  position: relative;
  flex: none;
}
/* the trigger: chunky cream type with a bar of the current light under it (type and a color bar, no
   drawn glyph: the sheet has no gel icon, and control art is never drawn) */
.sk-root[data-skin="z07"] .z7-gel-btn {
  width: 56px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 5px;
  color: var(--z7-cream);
  font: 700 14px/1 "Montserrat", var(--media-font-family);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.z7-gel-word {
  padding-left: .12em; /* optical: balances the trailing letter-spacing */
}
.z7-gel-mark {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--z7-gel, var(--z7-safelight)));
  box-shadow: 0 0 6px rgb(var(--z7-gel, var(--z7-safelight)) / .6);
}
.sk-root[data-skin="z07"] .z7-gel[data-open] .z7-gel-btn {
  background-color: rgb(var(--z7-gel, 148 33 48) / .42); /* the hover tile's color: it follows the pick (it stayed crimson) */
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="z07"] .z7-gel-btn:active .z7-gel-word {
    scale: .92;
  }
}

/* the tray: grows from the button (trigger origin), near-black like the slab */
.z7-gel-tray {
  position: absolute;
  right: -10px;
  bottom: calc(100% + var(--z7-bar-pad) + 10px);
  z-index: 5;
  width: 264px;
  padding: 10px 10px 12px;
  border-radius: 16px;
  background: rgb(28 24 23 / .97);
  box-shadow: inset 0 0 0 1px rgb(246 229 199 / .1), var(--sk-shadow);
  color: var(--z7-cream);
  transform-origin: calc(100% - 38px) 100%;
  opacity: 0;
  scale: .92;
  translate: 0 6px;
  transition: opacity 120ms linear, scale 120ms ease-in, translate 120ms ease-in;
}
.z7-gel-tray[hidden] {
  display: none;
}
.z7-gel[data-shown] .z7-gel-tray {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition: opacity 160ms linear, scale 200ms var(--sk-ease), translate 200ms var(--sk-ease);
}
.z7-gel-title {
  margin: 2px 6px 9px;
  color: var(--z7-cream-2);
  font: 700 11px/1 "Montserrat", var(--media-font-family);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.z7-gel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* each gel: a chip of tinted film with its name, a 70px-tall target */
.z7-gel-chip {
  display: grid;
  grid-template-rows: 32px auto;
  align-content: start;
  gap: 7px;
  min-height: 70px;
  padding: 6px 5px 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--z7-cream-2);
  font: 700 11px/1.15 "Montserrat", var(--media-font-family);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--sk-exit) linear;
}
.z7-gel-chip:hover {
  background-color: rgb(246 229 199 / .08);
  transition-duration: var(--sk-enter);
}
.z7-gel-swatch {
  display: block;
  border-radius: 6px;
  background:
    linear-gradient(155deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0) 46%),
    rgb(var(--g));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35);
}
.z7-gel-chip[data-gel="red"] { --g: 206 30 26; }
.z7-gel-chip[data-gel="amber"] { --g: 232 150 40; }
.z7-gel-chip[data-gel="green"] { --g: 40 150 80; }
.z7-gel-chip[data-gel="moonlight"] { --g: 120 160 235; }
.z7-gel-chip[data-gel="magenta"] { --g: 214 48 160; }
.z7-gel-chip[data-gel="warmwhite"] { --g: 255 210 152; }
.z7-gel-chip[data-gel="cyan"] { --g: 0 225 255; }
.z7-gel-chip[data-gel="ultraviolet"] { --g: 124 58 237; }
.z7-gel-chip[data-gel="chrome"] { --g: 100 118 138; }
/* chrome's swatch is the metal itself, EXAGGERATED for the back row (Gus's standing visual rule,
   Nov 8, 2026: this is a visual performance, not factual realism; if it reads subtle it is wrong).
   Hard-edged reflection bands plus artificial shine: two four-point sparkle stars (Gus: "glitter,
   sparkles, make it look Chrome"). */
.z7-gel-chip[data-gel="chrome"] .z7-gel-swatch {
  position: relative;
  background:
    linear-gradient(100deg, #05070a 0%, #05070a 10%, #2b333c 10%, #2b333c 24%, #78838f 24%, #78838f 36%, #ffffff 36%, #ffffff 46%, #e8eef5 46%, #e8eef5 50%, #59636e 50%, #59636e 62%, #d7dee7 62%, #d7dee7 65%, #232a31 65%, #232a31 82%, #05070a 82%, #05070a 100%);
}
.z7-gel-chip[data-gel="chrome"] .z7-gel-swatch::before,
.z7-gel-chip[data-gel="chrome"] .z7-gel-swatch::after {
  content: "";
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  filter: drop-shadow(0 0 3px rgb(255 255 255 / .95));
  pointer-events: none;
}
.z7-gel-chip[data-gel="chrome"] .z7-gel-swatch::before {
  width: 17px;
  height: 17px;
  top: 5px;
  left: 30%;
}
.z7-gel-chip[data-gel="chrome"] .z7-gel-swatch::after {
  width: 11px;
  height: 11px;
  bottom: 5px;
  right: 14%;
}
/* the chosen gel: a cream ring around its chip of film and its name at full cream (shape, not color alone) */
.z7-gel-chip[aria-checked="true"] {
  color: var(--z7-cream);
}
.z7-gel-chip[aria-checked="true"] .z7-gel-swatch {
  outline: 2px solid var(--z7-cream);
  outline-offset: 2px;
}

/* the controls never fade out from under an open tray */
.sk-root[data-skin="z07"] .sk-controls:has(.z7-gel[data-open]) {
  opacity: 1;
}
.sk-root[data-skin="z07"] .sk-controls:has(.z7-gel[data-open]) > * {
  pointer-events: auto;
}

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

/* Loading: the sheet's cream gear turns on a near-black disc */
.sk-root[data-skin="z07"] .sk-spinner {
  width: 64px;
  height: 64px;
  background: rgb(28 24 23 / .94);
  box-shadow: inset 0 0 0 1px var(--sk-hairline), 0 0 18px 2px rgb(var(--z7-gel, var(--z7-safelight)) / .3);
}
.sk-root[data-skin="z07"] .sk-spinner .sk-icon {
  width: 34px;
  height: 34px;
}

/* Error: a near-black card; the crimson button's 9px corners plus the 9px pad make the card's 18px */
.sk-root[data-skin="z07"] .sk-error {
  gap: 8px;
  padding: 24px 9px 9px;
  border-radius: 18px;
  background: rgb(28 24 23 / .97);
  box-shadow: inset 0 0 0 1px var(--sk-hairline), 0 0 26px 2px rgb(var(--z7-gel, var(--z7-safelight)) / .3), var(--sk-shadow);
}
.sk-root[data-skin="z07"] .sk-error-title {
  padding-inline: 14px;
  font: 700 20px/1.2 "Montserrat", var(--media-font-family);
}
.sk-root[data-skin="z07"] .sk-error-text {
  padding-inline: 14px;
  color: var(--z7-cream-2);
}
.sk-root[data-skin="z07"] .sk-error-close {
  width: 100%;
  height: 52px;
  margin-top: 10px;
  border-radius: 9px;
  background: var(--z7-crimson);
  color: var(--z7-cream);
  font: 700 17px/1 "Montserrat", var(--media-font-family);
}
.sk-root[data-skin="z07"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 12px;
  background: rgb(28 24 23 / .95);
  color: var(--z7-cream);
  font: 700 16px/1 "Montserrat", var(--media-font-family);
}

/* ---------- Mid widths: a tighter slab; volume is mute plus hotkeys below 680px ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="z07"] :is(.sk-controls, .sk-center) {
    --z7-inset: 12px;
    --z7-bottom: 12px;
    --z7-bar-pad: 7px;
    --z7-cc-w: 54px;
    --z7-rail-h: 18px;
    --z7-bloom-r: 120px;
  }
  .z7-bar {
    gap: 4px;
  }
  .z7-bar .sk-time {
    padding: 0 4px 0 6px;
    font-size: 19px;
  }
  .sk-root[data-skin="z07"] .sk-seek .sk-thumb {
    --sk-thumb: 28px;
  }
  .sk-root[data-skin="z07"] .sk-bigplay {
    --sk-icon: 92px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="z07"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows in the one slab (the rail on top), still 48px targets ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="z07"] :is(.sk-controls, .sk-center) {
    --z7-inset: 8px;
    --z7-bottom: 8px;
    --z7-bar-pad: 6px;
    --z7-cc-w: 50px;
    --z7-rail-h: 16px;
    --z7-bloom-r: 84px;
    --z7-bar-h: calc(var(--z7-bar-pad) * 2 + var(--sk-hit) + 4px + var(--sk-hit));
    --z7-center-pad: calc(var(--z7-bottom) + var(--z7-bar-h));
  }
  .z7-bar {
    display: grid;
    grid-template-columns: var(--sk-hit) var(--sk-hit) auto 1fr var(--z7-cc-w) var(--sk-hit);
    grid-template-rows: var(--sk-hit) var(--sk-hit);
    gap: 4px 2px;
    padding: var(--z7-bar-pad);
    border-radius: 16px;
  }
  .z7-bar .sk-seek {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: center;
    --sk-seek-hit: 48px; /* the row's full 48px for every pointer, as on touch (30px with a mouse before Nov 15, 2026) */
    margin-inline: 12px 8px;
  }
  .z7-bar .z7-gel { grid-column: 6; grid-row: 1; }
  .sk-root[data-skin="z07"] .z7-gel-btn {
    width: var(--sk-hit);
  }
  /* no room above the slab on a phone: the swatch book opens over the slab itself, its bottom on the
     slab's bottom edge (the button sits in row 1, so that is one row, the gap and the pad below it),
     still growing from the button's corner */
  .z7-gel-tray {
    right: -6px;
    bottom: calc(-1 * (var(--sk-hit) + 4px + var(--z7-bar-pad)));
    width: 300px;
    padding: 8px 8px 9px;
    transform-origin: calc(100% - 30px) calc(100% - 76px);
    translate: 0 4px;
  }
  .z7-gel-title {
    margin: 2px 4px 7px;
  }
  .z7-gel-chip {
    grid-template-rows: 22px auto;
    gap: 5px;
    min-height: 54px;
    padding: 5px 3px;
    font-size: 10px;
  }
  .z7-bar .sk-play { grid-column: 1; grid-row: 2; }
  .z7-bar .sk-volume { grid-column: 2; grid-row: 2; }
  .z7-bar .sk-time { grid-column: 3; grid-row: 2; padding: 0 2px; gap: .2em; font-size: 13px; }
  .z7-bar .sk-cc { grid-column: 5; grid-row: 2; }
  .sk-root[data-skin="z07"] .sk-seek .sk-thumb {
    --sk-thumb: 26px;
  }
  .sk-root[data-skin="z07"] .sk-bigplay {
    --sk-icon: min(68px, calc(56.25cqw - 128px)); /* 4px clear of the slab and the top on the smallest phones (56px at 360) */
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is;
     the bloom goes with the disc */
  .sk-root[data-skin="z07"][data-started]:not([data-ended]) .sk-bigplay {
    opacity: 0;
    pointer-events: none;
  }
  .sk-root[data-skin="z07"][data-started]:not([data-ended]) .sk-center::before {
    display: none;
  }
}

/* ---------- Release run, Nov 15, 2026: fit the swatch book, the preview and the captions inside short players ---------- */

/* Short players (under 700px): the 288px swatch book rose past the player's top (the root clips), cutting its title and, at
   600px and below, the whole first row. A compact book with 48px chips (every target stays 48px) fits above the slab on mid
   players and over it on phones; under a 356px player the decorative title goes as well. */
@container sk (max-width: 699px) {
  .z7-gel-tray {
    width: 300px;
    padding: 8px 8px 9px;
  }
  .z7-gel-title {
    margin: 2px 4px 6px;
  }
  .z7-gel-grid {
    gap: 4px;
  }
  .z7-gel-chip {
    grid-template-rows: 16px auto;
    gap: 4px;
    min-height: 48px;
    padding: 5px 3px;
    font-size: 10px;
  }
}
@container sk (max-width: 355px) {
  .z7-gel-title {
    display: none;
  }
}

/* Mid players: the core's inline clamp keeps the 158px preview inside the SEEK, so where the one-row seek is narrower than the
   preview (players of about 520 to 555px) it hung up to 24px off the player's left edge (the B05 class). The same clamp,
   restated with a floor: the preview never starts left of 8px inside the player (the seek begins 81px in: 12 inset + 7 pad +
   48 Play + 4 gap + 10 margin). Wider seeks never reach the floor. */
@container sk (min-width: 520px) and (max-width: 819px) {
  .z7-bar .sk-preview {
    left: max(-73px, min(max(0px, calc(var(--media-slider-pointer) - 79px)), calc(100% - 158px))) !important;
  }
}

/* Narrow players: the seek is the slab's top row, so the room above it is the player's height (56.25cqw) less 114px; the
   preview (frame + 6px + the 27px time tab, 16px up) rose out of the top on every phone. The frame shrinks to fit; under a
   372px player (where it would be under 80px wide) the time tab rides alone. */
@container sk (max-width: 519px) {
  .z7-bar .sk-preview-image {
    min-width: 0;
    max-width: min(160px, 100cqw - 292px);
  }
}
@container sk (max-width: 371px) {
  .z7-bar .sk-preview-image {
    display: none;
  }
}

/* Phones: the core floors the cue line at 40% of the player height and Chrome hangs the cue below the line, so under a ~410px
   player the caption sat under the two-row slab (0 to 20px past its top at 430 to 360) and no clearance could lift it.
   z07-gel.js moves the caption box up by --z7-cue-lift inside mux-video's shadow root: what the floor leaves, the slab top
   (120px up) + a 4px gap + one cue line (6% of the height) - the 40% line, in px of the 16:9 player (h = 56.25cqw), so
   124px - 30cqw, never below 0. Registered as a length, so it is computed here on mux-video and inherits as px. */
@property --z7-cue-lift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@container sk (max-width: 519px) {
  .sk-root[data-skin="z07"] > mux-video {
    --z7-cue-lift: max(0px, calc(124px - 30cqw));
  }
}
.sk-root[data-skin="z07"]:fullscreen > mux-video {
  --z7-cue-lift: 0px;
}
@media (pointer: coarse) {
  .sk-root[data-skin="z07"] .z7-bar .sk-seek {
    height: max(var(--sk-seek-hit, 32px), 48px);
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 851px) {
  .sk-root[data-skin="z07"] {
    --sk-cue-clearance: 112px;
  }
}
@media (max-width: 551px) {
  .sk-root[data-skin="z07"] {
    --sk-cue-clearance: 140px; /* 8 + (6 + 48 + 4 + 48 + 6) + a line + a gap */
  }
}
/* Fullscreen (Nov 15, 2026): Chrome sizes cue text from the screen (a one-line cue box is about 6% of the smaller side) while the
   slab stays 66px, so the fixed clearance put cues 3 to 33px into the slab on 800 to 1440px screens. In fullscreen the viewport is
   the player, so the clearance follows vmin: the slab top (18 + 66px) + a 4px gap + one cue line (6.75vmin, the run's measured
   allowance). Registered as a length so the core reads it in px. */
@property --sk-cue-clearance {
  syntax: "<length>";
  inherits: true;
  initial-value: 96px;
}
.sk-root[data-skin="z07"]:fullscreen {
  --sk-cue-clearance: calc(88px + 6.75vmin);
}
@media (max-width: 519px) {
  .sk-root[data-skin="z07"]:fullscreen {
    --sk-cue-clearance: calc(124px + 6.75vmin);
  }
}

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

/* Reduced motion: no bloom at all (the brief: killed, not just slowed), no growth */
@media (prefers-reduced-motion: reduce) {
  .sk-root[data-skin="z07"] .sk-center::before {
    display: none;
  }
  .z7-gel-tray,
  .z7-gel[data-shown] .z7-gel-tray {
    scale: 1;
    translate: none;
    transition: opacity 80ms linear;
  }
}
/* Reduced transparency and more contrast: solid slab, no bloom, no glows */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .z7-bar {
    background: var(--z7-black);
    box-shadow: inset 0 0 0 1px rgb(246 229 199 / .2), var(--sk-shadow);
  }
  .sk-root[data-skin="z07"] .sk-center::before {
    display: none;
  }
  .sk-root[data-skin="z07"] :is(.sk-btn, .sk-error-close):focus-visible,
  .sk-root[data-skin="z07"] .sk-seek:has(media-slider-thumb:focus-visible),
  .sk-root[data-skin="z07"] .sk-volume-slider:has(media-slider-thumb:focus-visible) {
    box-shadow: 0 0 0 var(--sk-focus-off) var(--sk-focus-gap);
  }
  .sk-root[data-skin="z07"] :is(.sk-spinner, .sk-error) {
    box-shadow: inset 0 0 0 1px rgb(246 229 199 / .2);
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="z07"] {
    --sk-focus-w: 3px;
  }
  .sk-root[data-skin="z07"] .sk-track::before {
    filter: none;
  }
  .sk-root[data-skin="z07"]:not([data-captions]) .z7-bar .sk-cc .sk-icon {
    filter: brightness(.62) saturate(.7);
  }
}

/* Forced colors: the slab takes system colors; the cream glyph art keeps a CanvasText outline so it
   reads on a light or dark Canvas (images are never recolored); the bloom is gone */
@media (forced-colors: active) {
  .z7-bar {
    background: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  .sk-root[data-skin="z07"] .sk-center::before {
    display: none;
  }
  .sk-root[data-skin="z07"] :is(.z7-bar .sk-btn, .sk-fs, .sk-spinner) .sk-icon {
    filter: drop-shadow(1px 0 0 CanvasText) drop-shadow(-1px 0 0 CanvasText) drop-shadow(0 1px 0 CanvasText) drop-shadow(0 -1px 0 CanvasText);
  }
  .sk-root[data-skin="z07"] .sk-fs {
    background: Canvas;
  }
  .sk-root[data-skin="z07"] .sk-cc::after {
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z07"] .sk-track {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="z07"] .sk-track::before {
    border-image: none;
    background: Canvas;
    filter: none;
  }
  .sk-root[data-skin="z07"] .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="z07"] .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    filter: none;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="z07"] .z7-gel-btn {
    color: ButtonText;
  }
  .z7-gel-mark {
    background: CanvasText;
    box-shadow: none;
  }
  .z7-gel-tray {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .z7-gel-title,
  .z7-gel-chip {
    color: CanvasText;
  }
  .z7-gel-chip {
    border: 1px solid CanvasText;
  }
  .z7-gel-swatch {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
  .z7-gel-chip[aria-checked="true"] {
    border: 2px solid Highlight;
  }
  .z7-gel-chip[aria-checked="true"] .z7-gel-swatch {
    outline-color: Highlight;
  }
  .sk-root[data-skin="z07"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .sk-root[data-skin="z07"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}