/* per-video pages (/v/{slug}); builds on site.css tokens, dark only like the rest of the site */
.vpage { max-width: 820px; padding-bottom: 24px; }
.vpage h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.12; letter-spacing: -.01em; margin: 4px 0 18px; }
.vpage h2 { font-size: 22px; margin: 0 0 12px; }
.vpage section { padding: 20px 0; }
.vdate { margin: 28px 0 0; font-size: 14px; }
.vsummary { font-size: 19px; margin: 18px 0 10px; }
.vstamp { display: inline-block; font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin: 4px 0; }
.small { font-size: 13px; }
.vmethod { color: var(--muted); }
.vlist { margin: 0; padding-left: 20px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.vlist a { color: var(--home-text); }
.vlist a:hover { color: var(--amber); }
.vchapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vchapters .mono { color: var(--amber); display: inline-block; min-width: 3.2em; }
.vchapters a { text-decoration: none; }
.vchapters a:hover { text-decoration: underline; }

.vembed { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.vembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsoon { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.vsoon img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .35; }
.vsoon p { position: absolute; inset: auto 0 0 0; margin: 0; padding: 14px 16px; background: linear-gradient(transparent, rgba(11, 27, 43, .92)); font-weight: 600; }

.vfig { position: relative; margin: 0; }
.vfig figcaption h3 { margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--text); display: block; }
.vfig figcaption p { margin: 0 0 10px; font-size: 14px; }
.vlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.vlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.vplot { overflow: hidden; }
svg.vchart { display: block; max-width: 100%; height: auto; font-family: var(--font); }
.vchart text { fill: var(--muted); font-size: 12px; }
.vchart .vlabel { fill: var(--text); font-size: 13px; }
.vchart .vlabel.fowler { fill: #FF8A57; font-weight: 700; }
.vchart .vlabel.dobes { fill: #6FA3FF; font-weight: 700; }
.vchart .vval { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vchart .vval.small { font-size: 10.5px; }
.vchart .vsmall { font-size: 11px; }
.vchart .vaxis { font-size: 12px; fill: var(--text); }
.vchart .vgrid { stroke: var(--line); stroke-width: 1; }
.vchart .vgap { stroke: var(--line); stroke-dasharray: 3 4; }
.vchart .vzero { stroke: var(--muted); stroke-width: 1; }
.vchart .vhit { fill: transparent; }
.vchart .hot { cursor: pointer; outline: none; }
.vchart .hot:hover .vhit, .vchart .hot:focus .vhit { fill: rgba(255, 255, 255, .06); }
.vchart .hot:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.vchart .hot:hover rect:not(.vhit), .vchart .hot:focus rect:not(.vhit), .vchart .hot:hover circle, .vchart .hot:focus circle { filter: brightness(1.2); }

.vtip {
  position: absolute; pointer-events: none; z-index: 5; max-width: 250px;
  background: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.vtip b { display: block; }

.tn-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 4px; }
.tn-col { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.tn-season { font-size: 13px; color: var(--muted); }
.tn-big { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tn-arrow { font-size: 22px; color: var(--muted); }
.tn-col dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 8px 0 0; font-size: 13px; }
.tn-col dt { color: var(--muted); }
.tn-col dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .vsummary { font-size: 17px; }
  .tn-grid { grid-template-columns: 1fr; }
  .tn-arrow { transform: rotate(90deg); justify-self: center; }
}