/* Naevik demo components — dual-video player + gallery lightbox.
   Assumes the host page defines the design tokens (--bg-0, --ink-0..3,
   --accent, --ok/--bad/--warn (+ -bg/-bd), --glass-bd, --glass-hl, --line).
   tests/demo-harness.html supplies them for standalone use. */

/* visually hidden, still available to screen readers / search / translation */
.dv-sr{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- dual-video player ---- */
.demo-dual{
  position:relative;max-width:880px;margin:30px auto 8px;
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--glass-bd);border-radius:14px;overflow:hidden;
  background:rgba(10,14,26,.6);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -22px oklch(0.82 0.14 220 / 0.18);
}
.demo-dual .dv-sr{grid-column:1 / -1}
.dv-pane{position:relative;margin:0;min-width:0}
.dv-pane + .dv-pane{border-left:1px solid var(--line)}
.dv-pane video{display:block;width:100%;height:auto;background:#05070d}
.dv-tag{
  position:absolute;top:11px;left:12px;z-index:2;margin:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;border:1px solid var(--glass-bd);color:var(--ink-1);
}
.dv-tag--no{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-bd)}
.dv-tag--yes{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}

/* shared control bar spans both panes; hover/focus/paused reveal */
.dv-controls{
  grid-column:1 / -1;display:flex;align-items:center;gap:11px;
  padding:9px 14px;border-top:1px solid var(--line);background:rgba(8,11,20,.55);
  opacity:0;transition:opacity .25s ease;
}
.demo-dual:hover .dv-controls,
.demo-dual:focus-within .dv-controls,
.demo-dual.dv-paused .dv-controls{opacity:1}
.dv-play{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  background:rgba(8,11,20,.7);border:1px solid var(--glass-bd);color:var(--accent);
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.dv-play:hover{border-color:var(--accent)}
.dv-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dv-time{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
.dv-track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;cursor:pointer}
.dv-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dv-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent);pointer-events:none}
.dv-sync{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:var(--ok);display:flex;align-items:center;gap:5px;white-space:nowrap}
.dv-sync::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}

/* ---- single composite video player (native controls) ---- */
.demo-single{
  position:relative;max-width:920px;margin:30px auto 8px;
  border:1px solid var(--glass-bd);border-radius:14px;overflow:hidden;
  background:#05070d;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -22px oklch(0.82 0.14 220 / 0.18);
}
.demo-video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#05070d}
/* the explainer has no audio track — hide the native volume/mute controls
   (WebKit + Blink; Firefox keeps its own controls but the video is silent) */
.demo-video::-webkit-media-controls-mute-button,
.demo-video::-webkit-media-controls-volume-slider,
.demo-video::-webkit-media-controls-volume-control-container{display:none !important}

.demo-cap{max-width:600px;margin:14px auto 0;text-align:center;font-size:13px;line-height:1.55;color:var(--ink-3)}

@media (max-width:720px){
  .demo-dual{grid-template-columns:1fr}
  .dv-pane + .dv-pane{border-left:none;border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion: reduce){
  .dv-controls{opacity:1;transition:none}
}

/* ---- screenshot gallery ---- */
.demo-gallery{display:flex;flex-direction:column;gap:30px;margin-top:22px}
.dg-os{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--ink-1);
  margin:0 0 11px;display:flex;align-items:center;gap:7px;
}
.dg-os::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dg-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.dg-shots{grid-template-columns:1fr}}
.dg-thumb{
  display:block;width:100%;padding:0;margin:0;cursor:zoom-in;
  border:1px solid var(--glass-bd);border-radius:9px;overflow:hidden;background:rgba(10,14,26,.5);
}
.dg-thumb:hover{border-color:var(--glass-hl)}
.dg-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dg-thumb img{display:block;width:100%;height:auto}

/* ---- lightbox ---- */
.dg-lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}
.dg-lightbox[aria-hidden="true"]{display:none}
.dg-lb-backdrop{position:absolute;inset:0;background:rgba(3,5,10,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dg-lb-stage{position:relative;z-index:1;max-width:90vw;max-height:86vh;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;overflow:hidden}
.dg-lb-img{max-width:90vw;max-height:78vh;border-radius:10px;border:1px solid var(--glass-bd);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.dg-lb-cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink-2)}
.dg-lb-close,.dg-lb-prev,.dg-lb-next{
  position:absolute;z-index:2;width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(8,11,20,.7);border:1px solid var(--glass-bd);color:var(--ink-1);
  font-size:18px;display:flex;align-items:center;justify-content:center;
}
.dg-lb-close{top:18px;right:18px}
.dg-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.dg-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.dg-lb-close:hover,.dg-lb-prev:hover,.dg-lb-next:hover{border-color:var(--accent);color:var(--ink-0)}
.dg-lb-close:focus-visible,.dg-lb-prev:focus-visible,.dg-lb-next:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.dg-lb-open{overflow:hidden}