/* BatSwing blog visuals (shared). DESIGN.md: direction D: paper, ink, pitch, grass. */
.viz { margin:2rem 0 0; padding:.75rem; background:var(--tint); }
.viz-stage { position:relative; overflow:hidden; background:var(--paper); }
.viz-poster { display:block; width:100%; height:auto; }
.viz-canvas { position:absolute; inset:0; display:block; opacity:0; transition:opacity .5s ease-out; cursor:grab; }
.viz-canvas:active { cursor:grabbing; }
.viz.viz-live .viz-canvas { opacity:1; }
.viz.viz-live .viz-poster { visibility:hidden; position:absolute; }
.viz-badge { position:absolute; z-index:3; left:.625rem; top:.625rem; padding:.25rem .5rem; background:rgba(255,255,255,.92); border:1px solid var(--grass); color:var(--pitch); font:600 .6875rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; pointer-events:none; }
.viz-hint { position:absolute; z-index:3; right:.625rem; bottom:.625rem; padding:.2rem .5rem; background:rgba(255,255,255,.88); color:var(--pitch); font:600 .6875rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; pointer-events:none; display:none; }
.viz.viz-live .viz-hint { display:block; }
.viz-loading .viz-stage::after { content:"Loading the interactive view"; position:absolute; z-index:3; right:.625rem; bottom:.625rem; padding:.2rem .5rem; background:rgba(255,255,255,.9); color:var(--mid); font:600 .6875rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }

/* labels pinned to 3D points */
.viz-labels { position:absolute; inset:0; pointer-events:none; z-index:2; }
.viz-label { position:absolute; left:0; top:0; white-space:nowrap; will-change:transform; font:600 .75rem/1.2 var(--mono); color:var(--pitch); }
.viz-label.band { font-weight:600; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); }
.viz-label.end { font-size:.6875rem; font-weight:400; color:var(--mid); }
.viz-label.land { padding:.2rem .45rem; background:rgba(255,255,255,.92); border-left:2px solid var(--grass); color:var(--ink); }
.viz-label.zone { font:900 1.125rem/1 var(--display); color:var(--pitch); margin-top:-.7rem; }
.viz-label.zone-sub { font-size:.6875rem; font-weight:400; color:var(--mid); margin-top:.7rem; }
.viz-label.foot { padding:.2rem .45rem; background:var(--pitch); color:var(--paper); font-size:.6875rem; letter-spacing:.06em; }
.viz-label.foot-sm { font-size:.6875rem; color:var(--ink); }

/* controls */
.viz-ui { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.75rem; }
.viz-btn,.viz-chip,.viz-play { min-height:2.25rem; padding:.4rem .8rem; border:1px solid var(--pitch); background:transparent; color:var(--pitch); font:600 .6875rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; }
.viz-btn[aria-pressed="true"],.viz-chip[aria-pressed="true"],.viz-play:hover,.viz-btn:hover,.viz-chip:hover { background:var(--pitch); color:var(--paper); }
.viz-btn:focus-visible,.viz-chip:focus-visible,.viz-play:focus-visible,.viz-tick:focus-visible,.viz-scrub input:focus-visible { outline:3px solid var(--grass); outline-offset:2px; }
.viz-steps { display:flex; flex-wrap:wrap; gap:.375rem; width:100%; }
.viz-chip { min-height:2rem; padding:.3rem .6rem; border-color:var(--hair); color:var(--mid); background:var(--paper); }
.viz-foot { margin-top:.5rem; }
.viz-foot .viz-steps::before { content:"Phase"; align-self:center; margin-right:.25rem; color:var(--mid); font:600 .6875rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }

/* batter legend: what is from footage and what is illustrative */
.viz-legend { position:absolute; z-index:3; left:.625rem; bottom:.625rem; display:flex; flex-direction:column; gap:.2rem; padding:.3rem .5rem; background:rgba(255,255,255,.9); color:var(--ink); font:600 .6875rem/1.3 var(--mono); pointer-events:none; }
.viz-legend span { display:flex; align-items:center; gap:.4rem; }
.viz-legend i { width:.75rem; height:.75rem; border-radius:50%; background:var(--pitch); }
.viz-legend i.illus { background:rgba(76,85,96,.45); }

/* swing scrubber */
.viz-ui:has(.viz-scrub) { flex-wrap:nowrap; gap:.875rem; }
.viz-play { flex:none; min-width:5.25rem; background:var(--pitch); color:var(--paper); }
.viz-play:hover { background:var(--ink); }
.viz-scrub { position:relative; flex:1; min-width:0; padding-bottom:2.3rem; }
.viz-scrub input { width:100%; margin:0; accent-color:var(--grass); height:2rem; cursor:pointer; }
.viz-ticks { position:absolute; left:.5rem; right:.5rem; bottom:0; height:2.2rem; }
.viz-tick { position:absolute; top:0; transform:translateX(-50%); padding:.15rem .25rem; border:0; background:none; color:var(--mid); font:600 .6875rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.viz-tick::before { content:""; position:absolute; left:50%; top:-.45rem; width:1px; height:.35rem; background:var(--grass); }
.viz-tick.on { color:var(--pitch); }
.viz-tick.low { top:.75rem; }
.viz-tick.low::before { top:-1.2rem; height:1.1rem; }
.viz-phase { flex:none; min-width:9.5rem; font:900 1.125rem/1 var(--display); color:var(--pitch); text-align:right; }
.viz figcaption { margin-top:.75rem; color:var(--mid); font-size:.8125rem; line-height:1.5; }
.viz figcaption strong { color:var(--ink); }
html:not(.js) .viz-ui, .viz.viz-failed .viz-ui, .viz.viz-failed .viz-foot { display:none; }

@media (max-width:640px) {
  .viz { padding:.5rem; }
  .viz-label.zone { font-size:.9375rem; }
  .viz-label.land { font-size:.6875rem; }
  .viz-ui:has(.viz-scrub) { flex-wrap:wrap; }
  .viz-scrub { order:3; flex-basis:100%; }
  .viz-phase { margin-left:auto; }
  .viz-tick { font-size:.6875rem; letter-spacing:.04em; }
  .viz-btn { flex:1 1 auto; padding:.4rem .5rem; letter-spacing:.06em; }
}
@media (prefers-reduced-motion:reduce) { .viz-canvas { transition:none; } }
.viz:not(.viz-live) .viz-badge { display:none; }