/* FedM8 design standards: shared styles for the video section (/design/v/).
   Builds on /design/assets/design-site.css. Each video page maps the --ds-* variables on body[data-design]. */

body.ds[data-design="v-index"] {
  --ds-bg: #f5f6f8; --ds-surface: #ffffff; --ds-ink: #182231; --ds-muted: #526071; --ds-line: #e4e8ee;
  --ds-accent: #193b5d; --ds-accent-ink: #ffffff; --ds-soft: #e8edf5; --ds-focus: #2b6cb0;
  --pc-surface: var(--ds-surface); --pc-ink: var(--ds-ink); --pc-muted: var(--ds-muted); --pc-line: var(--ds-line);
  --pc-line-strong: #cfd7e2; --pc-accent: var(--ds-accent); --pc-accent-ink: var(--ds-accent-ink); --pc-soft: var(--ds-soft);
  --pc-act-ink: var(--ds-accent); --pc-font: var(--ds-font-sans);
}

/* ---------- card previews ---------- */
.pv-v001 { background: radial-gradient(260px 160px at 18% 0%, #183252, rgba(24, 50, 82, 0) 70%), #0b1626; }
.pv-v001 .pv-pill { position: absolute; left: 14px; top: 10px; width: 92px; height: 10px; border-radius: 99px; border: 1px solid rgba(214, 181, 108, .7); background: rgba(196, 163, 90, .16); }
.pv-v001 .pv-pill2 { position: absolute; right: 14px; top: 10px; width: 110px; height: 10px; border-radius: 99px; border: 1px dashed #3a5070; }
.pv-v001 .pv-win { position: absolute; left: 14px; right: 14px; top: 28px; height: 112px; border-radius: 6px; background: #f5f6f8; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); overflow: hidden; }
.pv-v001 .pv-win::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 22%; background: #fcfcfd; border-right: 1px solid #e4e8ee; }
.pv-v001 .pv-win::after { content: ""; position: absolute; left: 28%; top: 16px; width: 46%; height: 10px; border-radius: 3px; background: #182231; box-shadow: 0 20px 0 -2px #c9d1dc, 0 44px 0 6px #ffffff; }
.pv-v001 .pv-ring { position: absolute; left: 30%; top: 96px; width: 30%; height: 22px; border: 2px solid #c4a35a; border-radius: 6px; box-shadow: 0 0 0 3px rgba(196, 163, 90, .25); }
.pv-v001 .pv-cap { position: absolute; left: 22%; right: 22%; bottom: 14px; height: 9px; border-radius: 4px; background: #f2f5f9; opacity: .85; }


/* ---------- shared layout bits ---------- */
.vs-cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.vs-small { margin: 6px 0 0; font-size: 13.5px; color: var(--ds-muted); }
.vs-player { margin: 0; }
.vs-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #0b1626; box-shadow: 0 10px 30px rgba(11, 22, 38, .25); }
.vs-player figcaption { margin-top: 8px; font-size: 13px; color: var(--ds-muted); }
.vs-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vs-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--ds-line); border-radius: 6px; background: var(--ds-surface); color: var(--ds-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.vs-links a:hover { background: var(--ds-soft); }
.vs-stills { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin: 16px 0; }
.vs-still { margin: 0; }
.vs-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid #1d2c42; background: #0b1626; }
.vs-still figcaption { margin-top: 6px; font-size: 13px; color: var(--ds-muted); }
.vs-still figcaption b { color: var(--ds-ink); font-weight: 650; }
.vs-tc { font: 600 11.5px/1 var(--ds-font-mono); color: var(--ds-muted); margin-right: 6px; }

/* ---------- frame geometry map (percentages of 1920 x 1080) ---------- */
.vs-map { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(60% 65% at 18% 0%, #183252, rgba(24, 50, 82, 0) 70%), radial-gradient(47% 56% at 100% 100%, #1b2b20, rgba(27, 43, 32, 0) 60%), #0b1626; color: #f2f5f9; font-size: clamp(9px, 1.2vw, 13px); }
.vs-map > div { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 6px; }
.vs-map-win { left: 6.77%; top: 7.78%; width: 86.46%; height: 80.37%; border-radius: 1.6% / 2.9%; background: rgba(245, 246, 248, .14); outline: 1px dashed rgba(242, 245, 249, .55); flex-direction: column; gap: 4px; }
.vs-map-win b { font-weight: 650; }
.vs-map-pre { left: 6.77%; top: 2.04%; width: 21%; height: 3.9%; border-radius: 99px; border: 1px solid rgba(214, 181, 108, .7); background: rgba(196, 163, 90, .16); }
.vs-map-smp { right: 6.77%; top: 2.04%; width: 30%; height: 3.9%; border-radius: 99px; border: 1px dashed #3a5070; color: #b9c6d6; }
.vs-map-cap { left: 8.3%; right: 8.3%; top: 88.5%; height: 11.5%; color: #f2f5f9; outline: 1px dashed rgba(214, 181, 108, .55); }
.vs-map-dim { right: 7.5%; bottom: 13.5%; color: #b9c6d6; font: 500 11px/1.3 var(--ds-font-mono); }

@media (max-width: 760px) {
  .vs-map { font-size: 9px; }
  .vs-map-dim { display: none; }
}