/* The video player chrome, form states and the cookie banner.
   The player always sits on the video, so its colours are fixed dark tokens. */
:root {
  --player-scrim: oklch(14% 0.04 272 / 0.62);
  --player-scrim-strong: oklch(14% 0.04 272 / 0.88);
  --player-ink: oklch(98% 0.008 294);
  --player-track: oklch(98% 0.008 294 / 0.4);
  --player-edge: oklch(98% 0.008 294 / 0.24);
  --player-bg: oklch(26% 0.07 272);
  --player-fs-bg: oklch(8% 0.02 272);
  --player-focus: oklch(78% 0.17 314);
}

/* ─── Skip link, honeypot ─────────────────────────────────────────────── */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-2xl)); z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); font-weight: 600; transition: transform var(--dur-short) var(--ease-out); }
.skip:focus-visible { transform: translateY(calc(var(--space-2xl) + var(--space-md))); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Video player ────────────────────────────────────────────────────── */
.screen { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--player-bg); }
.screen video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--player-bg); }
.sound {
  position: absolute; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-raised);
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md);
  border: 1px solid var(--player-edge); border-radius: var(--radius-pill); cursor: pointer;
  font: 600 var(--text-sm)/1 var(--font-body); color: var(--player-ink); background: var(--player-scrim);
  transition: background-color var(--dur-short) var(--ease-out);
}
.sound:hover { background: var(--player-scrim-strong); }
.sound:active { transform: translateY(1px); }
.sound:focus-visible, .vbar-btn:focus-visible { outline: 2px solid var(--player-focus); outline-offset: 2px; }
.sound .sound-on, .sound[aria-pressed="true"] .sound-off { display: none; }
.sound[aria-pressed="true"] .sound-on { display: block; }
.vbar {
  position: absolute; inset: auto 0 0 0; z-index: var(--z-base);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xl) calc(var(--space-4xl) + var(--space-xl)) var(--space-md) var(--space-md);
  background: linear-gradient(180deg, transparent, var(--player-scrim-strong));
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
}
html:not(.js) .vbar { display: none; }
.screen:hover .vbar, .vbar:focus-within, .screen.show-controls .vbar, .screen:fullscreen .vbar { opacity: 1; }
.vbar-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--player-edge); border-radius: var(--radius-pill); cursor: pointer;
  color: var(--player-ink); background: var(--player-scrim); transition: background-color var(--dur-short) var(--ease-out);
}
.vbar-btn:hover { background: var(--player-scrim-strong); }
.vbar-btn:active { transform: translateY(1px); }
.vbar-btn .i-play, .vbar-btn.is-paused .i-pause { display: none; }
.vbar-btn.is-paused .i-play { display: block; }
.vbar-time { flex: none; min-width: 3.2em; font: 500 var(--text-xs)/1 var(--font-body); color: var(--player-ink); font-variant-numeric: tabular-nums; text-align: center; }
.vbar-seek { --p: 0%; flex: 1; min-width: 0; height: 20px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.vbar-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--player-focus) var(--p), var(--player-track) var(--p)); }
.vbar-seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--player-focus) var(--p), var(--player-track) var(--p)); }
.vbar-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--player-ink); }
.vbar-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--player-ink); }
.vbar-seek:focus-visible { outline: 2px solid var(--player-focus); outline-offset: 2px; border-radius: var(--radius-input); }
.vbar-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--player-focus); }
.vbar-seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--player-focus); }
.screen:fullscreen { border-radius: 0; background: var(--player-fs-bg); display: grid; place-items: center; }
.screen:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 60rem) {
  .vbar { padding: var(--space-xl) calc(var(--space-4xl) + var(--space-xs)) var(--space-xs) var(--space-xs); gap: var(--space-xs); }
  .vbar-time[data-time-dur] { display: none; }
  .sound { right: var(--space-xs); bottom: var(--space-xs); }
}

/* ─── Form states (main.js writes .done, .is-error, .is-invalid) ─────── */
.form-status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.form-status.is-error { color: var(--color-error); }
.consent.is-invalid span { color: var(--color-error); }
input[aria-invalid="true"] { border-color: var(--color-error); }
.done { padding: var(--space-sm) 0; }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.done-mark { width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center; margin-bottom: var(--space-md); color: var(--color-success); border: 1px solid var(--color-success); }
.done h3 { margin-bottom: var(--space-xs); }
.done p { color: var(--color-ink-2); }
.done-quick { display: flex; align-items: center; gap: var(--space-sm); }
.done-quick .done-mark { width: 40px; height: 40px; margin: 0; flex: none; }

/* ─── Cookie banner (consent.js builds it) ────────────────────────────── */
.cookie-banner {
  position: fixed; z-index: var(--z-toast); inset: auto var(--space-md) max(var(--space-md), env(safe-area-inset-bottom)) var(--space-md);
  max-width: 560px; margin: 0 auto; padding: var(--space-md) var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center;
  background: var(--color-paper-2); color: var(--color-ink-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  font-size: var(--text-sm);
}
.cookie-banner p { flex: 1 1 280px; }
.cookie-banner a { color: var(--color-ink); }
.cookie-actions { display: flex; gap: var(--space-xs); }