/* Watch kit styles. Re-theme by overriding the variables on :root (or any ancestor). Fonts inherit from the site. */
:root {
  --kit-ink: #0a0a0b;        /* "screen" panels */
  --kit-paper: #ffffff;
  --kit-accent: #ffe600;     /* play icon, focus ring, chips */
  --kit-on-accent: #0a0a0b;
  --kit-muted: #b9b9bd;      /* secondary text on --kit-ink (AA on #0a0a0b) */
  --kit-line: #2b2b2e;
  --kit-focus: #0a0a0b;      /* focus ring on light backgrounds; the accent ring sits outside it */
  --kit-radius: 0;           /* square edges by default */
  --kit-gap: 1rem;
}
.kit-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kit-film, .kit-watchbox, .kit-rail, .kit-story, .kit-side { font: inherit; }
.kit-film { margin: 1.5rem 0; }
.kit-frame { position: relative; aspect-ratio: 16 / 9; background: var(--kit-ink); color: #fff; overflow: hidden; border-radius: var(--kit-radius); }
.kit-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.kit-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--kit-ink); }
.kit-play { position: absolute; inset: 0; width: 100%; display: flex; align-items: flex-end; gap: .9rem; padding: clamp(.75rem, 2vw, 1.25rem); background: linear-gradient(to top, rgba(10,10,11,.92), rgba(10,10,11,.1) 60%); color: #fff; border: 0; font: inherit; text-align: left; cursor: pointer; }
.kit-icon { flex: none; display: inline-block; width: 3.25rem; height: 3.25rem; background: var(--kit-accent); position: relative; }
.kit-icon::after { content: ""; position: absolute; left: 1.2rem; top: .95rem; border-style: solid; border-width: .7rem 0 .7rem 1.1rem; border-color: transparent transparent transparent var(--kit-on-accent); }
.kit-icon-sm { width: 1.5rem; height: 1.5rem; } .kit-icon-sm::after { left: .55rem; top: .38rem; border-width: .38rem 0 .38rem .6rem; }
.kit-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.kit-title { font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.4rem); line-height: 1.2; }
.kit-maker { color: var(--kit-muted); font-size: .9rem; }
.kit-len { margin-left: .5rem; padding: 0 .35rem; background: #fff; color: var(--kit-ink); font-size: .8rem; }
.kit-play:hover .kit-icon, .kit-card-btn:hover .kit-icon { transform: scale(1.06); }
.kit-icon { transition: transform .15s ease; }
.kit-credit { margin: .5rem 0 0; font-size: .875rem; color: inherit; opacity: .85; }
.kit-credit a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.kit-stop { margin-top: .5rem; }
.kit-stop, .kit-d-close, .kit-chapter { min-height: 44px; padding: .4rem .9rem; font: inherit; background: var(--kit-ink); color: #fff; border: 2px solid var(--kit-ink); border-radius: var(--kit-radius); cursor: pointer; }
.kit-stop:hover, .kit-d-close:hover, .kit-chapter:hover { background: var(--kit-accent); color: var(--kit-on-accent); }
.kit-chapters { margin-top: .75rem; } .kit-chap-h { margin: 0 0 .35rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.kit-chapters ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kit-t { font-variant-numeric: tabular-nums; opacity: .75; margin-left: .35rem; }
.kit-alt { margin-top: .75rem; border: 2px solid var(--kit-ink); } .kit-alt summary { padding: .6rem .9rem; cursor: pointer; font-weight: 700; min-height: 44px; box-sizing: border-box; } .kit-alt-body { padding: 0 .9rem .9rem; }
/* focus: visible on dark and light */
.kit-play:focus-visible, .kit-card-btn:focus-visible, .kit-chip:focus-visible, .kit-stop:focus-visible, .kit-d-close:focus-visible, .kit-chapter:focus-visible, .kit-card-src:focus-visible, .kit-alt summary:focus-visible, .kit-credit a:focus-visible, .kit-iframe:focus-visible {
  outline: 3px solid var(--kit-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--kit-accent); }
.kit-play:focus-visible { outline-color: #fff; outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--kit-accent); }
/* side-by-side film and text */
.kit-side { display: grid; gap: calc(var(--kit-gap) * 1.5); align-items: start; margin: 1.5rem 0; }
@media (min-width: 52rem) { .kit-side { grid-template-columns: 1fr 1fr; } .kit-side-left .kit-side-film { order: -1; } }
.kit-side .kit-film { margin: 0; }
/* watch box and rail */
.kit-watchbox { background: var(--kit-ink); color: #fff; padding: clamp(1rem, 3vw, 1.75rem); margin: 2rem 0; border-radius: var(--kit-radius); }
.kit-rail { margin: 2rem 0; }
.kit-h { margin: 0 0 1rem; font-size: 1.25rem; }
.kit-watchbox .kit-h { color: var(--kit-accent); }
.kit-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kit-gap); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kit-cards-rail { grid-auto-flow: column; grid-auto-columns: minmax(15rem, 18rem); grid-template-columns: none; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x proximity; }
.kit-cards-rail > li { scroll-snap-align: start; }
.kit-card { display: flex; flex-direction: column; gap: .35rem; }
.kit-card-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 0; background: none; color: inherit; border: 0; font: inherit; text-align: left; cursor: pointer; }
.kit-card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--kit-ink); overflow: hidden; border-radius: var(--kit-radius); }
.kit-card-thumb .kit-thumb { opacity: 1; }
.kit-card-thumb .kit-icon { position: absolute; left: .6rem; bottom: .6rem; width: 2.25rem; height: 2.25rem; } .kit-card-thumb .kit-icon::after { left: .8rem; top: .6rem; border-width: .5rem 0 .5rem .8rem; }
.kit-card-title { font-weight: 700; line-height: 1.25; } .kit-card-maker { font-size: .85rem; opacity: .8; }
.kit-card-src { font-size: .85rem; color: inherit; text-underline-offset: .15em; min-height: 24px; }
/* inline play chip */
.kit-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .25rem .8rem .25rem .5rem; background: var(--kit-ink); color: #fff; border: 2px solid var(--kit-ink); border-radius: var(--kit-radius); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.kit-chip:hover { background: var(--kit-accent); color: var(--kit-on-accent); }
.kit-chip:hover .kit-icon { background: var(--kit-ink); } .kit-chip:hover .kit-icon::after { border-left-color: var(--kit-accent); }
/* dialog */
.kit-dialog { width: min(92vw, 62rem); padding: 0; border: 3px solid var(--kit-accent); background: var(--kit-ink); color: #fff; border-radius: var(--kit-radius); }
.kit-dialog::backdrop { background: rgba(10,10,11,.82); }
.kit-d-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; }
.kit-d-title { margin: 0; font-size: 1.05rem; } .kit-d-close { border-color: #fff; }
.kit-d-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.kit-d-credit { padding: 0 .9rem .9rem; margin: .6rem 0 0; color: #fff; }
/* numbered picture story */
.kit-story { list-style: none; counter-reset: kit-s; margin: 2rem 0; padding: 0; display: grid; gap: calc(var(--kit-gap) * 1.5); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.kit-step { counter-increment: kit-s; position: relative; } .kit-step figure { margin: 0; } .kit-step img { display: block; width: 100%; height: auto; }
.kit-step::before { content: counter(kit-s); position: absolute; top: 0; left: 0; z-index: 1; min-width: 2.25rem; padding: .25rem .5rem; background: var(--kit-accent); color: var(--kit-on-accent); font-weight: 800; text-align: center; }
.kit-step figcaption { margin-top: .5rem; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .kit-icon { transition: none; } .kit-play:hover .kit-icon, .kit-card-btn:hover .kit-icon { transform: none; } .kit-cards-rail { scroll-behavior: auto; scroll-snap-type: none; } }
@media (forced-colors: active) { .kit-play, .kit-chip, .kit-stop { border: 2px solid ButtonText; } .kit-icon { forced-color-adjust: none; } .kit-play:focus-visible, .kit-card-btn:focus-visible { outline: 3px solid Highlight; box-shadow: none; } }