/* Session summary and replay (replay-ui.js, visual.js). Kit tokens and glyphs only. */

/* The replay needs the map and its callouts side by side: the summary screen widens to fit, and
   the rows under it (save line, actions) keep the narrower measure. */
#summaryScreen .summary { max-width: 1072px; }
#summaryScreen .sumHead, #summaryScreen .sumSave, #summaryScreen .sumActs, #summaryScreen #summaryEmpty { max-width: 728px; width: 100%; }
.vz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.vz > *, .vz-deck > * { min-width: 0; }
.vz-deck { display: grid; gap: 12px; }
.vz-heroTime { margin: 0; font-size: 99px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vz-heroTime small { font-size: var(--t-l); letter-spacing: 0; color: var(--muted); }
@media (max-width: 480px) { .vz-heroTime { font-size: 66px; } .vz { gap: 33px; } }

/* ---------- angle picker, sort ---------- */
.vz-groups { margin: 0; overflow-x: auto; scrollbar-width: none; }
.vz-groups label { flex: 1 0 auto; }
.vz-groups span { min-height: 44px; padding: 10px 8px; font-size: var(--t-xs); text-transform: uppercase; white-space: nowrap; }
.vz-sort { min-height: 36px; min-width: 44px; padding: 4px 10px; font-size: var(--t-xs); border-color: var(--line); color: var(--muted); }
.vz-sort[aria-pressed=true] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- the map ----------
   Calm by default: one stick figure, this rep's gun path and the focused layer, in SVG ink.
   Heat (glyph cells in Departure Mono) only when asked for. */
.vz-map { --cell: 11px; position: relative; isolation: isolate; overflow: hidden; font-family: var(--mono);
  font-size: min(var(--cell), calc((100vw - 34px) / (var(--cols) * 0.6))); line-height: 1;
  width: calc(var(--cols) * 1ch); height: calc(var(--rows) * 1em); background: var(--surface); outline: 1px solid var(--line); touch-action: pan-y; }
.vz-cells { position: absolute; inset: 0; margin: 0; font: inherit; line-height: 1; letter-spacing: 0; white-space: pre; }
.vz-cells i { font-style: normal; }
/* heat is opt-in: three amber steps, no faint speckle */
.hm-1 { color: color-mix(in srgb, var(--ok) 38%, var(--surface)); }
.hm-2 { color: color-mix(in srgb, var(--ok) 62%, var(--surface)); }
.hm-3 { color: color-mix(in srgb, var(--ok) 85%, var(--surface)); }
.vz-legend i { font-style: normal; font-family: var(--mono); }
.vz-legend .lg-path { color: var(--mark); } .vz-legend .lg-body { color: var(--muted); }

.vz-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vz-ink line, .vz-ink polyline, .vz-ink path, .vz-ink circle, .vz-ink rect, .vz-ink polygon { vector-effect: non-scaling-stroke; fill: none; stroke: var(--muted); stroke-width: 1px; }
.vz-ink .plain { stroke: var(--text); }
.vz-ink .ref { stroke: var(--muted); stroke-dasharray: 2 3; }
.vz-ink rect.target, .vz-ink path.target { fill: color-mix(in oklch, var(--good) 16%, transparent); stroke: color-mix(in oklch, var(--good) 45%, transparent); stroke-dasharray: 1 2; }
.vz-ink .target-edge { stroke: color-mix(in oklch, var(--good) 70%, transparent); stroke-dasharray: 1 3; }
.vz-ink .target-line { stroke: var(--good); stroke-dasharray: 5 3; }
.vz-ink .chord { stroke: var(--text); stroke-dasharray: 4 3; }
.vz-ink .good { stroke: var(--good); } .vz-ink .ok { stroke: var(--ok); } .vz-ink .work { stroke: var(--work); }
.vz-ink .weak { stroke-dasharray: 4 2; }
.vz-ink .bone { stroke-width: 3px; stroke-linecap: round; }
.vz-ink .trace, .vz-ink .arc, .vz-ink .arrow { stroke-width: 2px; }
.vz-ink .gap { fill: color-mix(in oklch, var(--muted) 18%, transparent); stroke: none; }
.vz-ink .gap.work { fill: color-mix(in oklch, var(--work) 26%, transparent); }
.vz-ink .gap.ok { fill: color-mix(in oklch, var(--ok) 22%, transparent); }
.vz-ink .gap.good { fill: color-mix(in oklch, var(--good) 18%, transparent); }
.vz-ink circle.dot { stroke: var(--surface); stroke-width: 1.5px; fill: var(--text); }
.vz-ink circle.dot.good { fill: var(--good); } .vz-ink circle.dot.ok { fill: var(--ok); } .vz-ink circle.dot.work { fill: var(--work); }
.vz-ink circle.dot.hollow { fill: none; stroke: var(--text); }
.vz-ink circle.dot.ghost { fill: var(--muted); }
.vz-ink .ghost { stroke: var(--muted); stroke-dasharray: 2 2; stroke-width: 1.5px; }
.vz-ink text.lbl { font-family: var(--mono); font-size: 0.95px; fill: var(--text); stroke: var(--surface); stroke-width: 0.28px; paint-order: stroke; vector-effect: none; text-transform: uppercase; }
.vz-ink text.lbl.ref { fill: var(--muted); }
.vz-ink text.lbl.small { font-size: 0.7px; }
.vz-ink text.lbl.target { fill: var(--good); }
.vz-ink text.lbl.good { fill: var(--good); } .vz-ink text.lbl.ok { fill: var(--ok); } .vz-ink text.lbl.work { fill: var(--work); }
.vz-ink .layer.side text { display: none; }
.vz-ink .layer.faint { opacity: 0.35; }
.vz-ink .nolabels text { display: none; }
.vz-ink .peer { opacity: 0.55; }
/* the one body, the one path, the gun */
.vz-ink .body { stroke: color-mix(in oklch, var(--text) 45%, var(--surface)); stroke-width: 1.5px; stroke-linecap: round; }
.vz-ink .path-now { stroke: var(--mark); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.vz-ink .path-rest { stroke: color-mix(in oklch, var(--mark) 30%, var(--surface)); stroke-width: 1px; stroke-linejoin: round; }
.vz-map.heat .vz-ink .path-rest { display: none; }
.vz-ink circle.dot.gun { fill: var(--mark); }
.vz-ink circle.dot.hollow.ghost { fill: none; stroke: var(--text); stroke-width: 1.5px; stroke-dasharray: 2 2; }
/* reference lines speak for themselves: only the measured value is written on the map */
.vz-ink text.lbl.ref, .vz-ink text.lbl.target { display: none; }
.vz-depthCard { margin: 0; display: grid; gap: 4px; max-width: 240px; }
.vz-depthCard[hidden] { display: none; }
.vz-depthCard .vz-ink { position: static; display: block; width: 100%; height: auto; background: var(--surface); outline: 1px solid var(--line); overflow: hidden; }
.vz-depthCard .fine { margin: 0; font-size: 12px; text-wrap: pretty; }
.vz-depthCard.faint .vz-ink g { opacity: 0.35; }
@media (min-width: 720px) { .vz-replayBody .vz-map, .vz-sessionPage .vz-map { --cell: 13.75px; } }

/* ---------- phases ---------- */
.ph-pre { color: var(--line-strong); } .ph-meet { color: color-mix(in srgb, var(--ok) 50%, var(--surface)); } .ph-press { color: var(--ok); } .ph-hold { color: color-mix(in oklch, var(--text) 30%, var(--surface)); } .ph-after { color: var(--faint); } .ph-reaction { color: var(--muted); }
.ph-med { color: var(--faint); }

/* ---------- stats ---------- */
.vz-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 24px; margin: 0; }
.vz-stat { border-top: 1px solid var(--line); padding: 8px 0 12px; }
.vz-stat dt { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.vz-stat dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.vz-stat small { color: var(--muted); margin-left: 1px; }
.vz-stat .fine { font-size: 13px; }

/* ---------- phase bars (replace the rep table) ---------- */
.vz-bars { --w: 60; display: grid; gap: 8px; }
.vz-barsHead { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vz-barList { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; width: max-content; min-width: 100%; }
.vz-barRow, .vz-axis { display: grid; grid-template-columns: 5ch 5ch calc(var(--w) * 1ch) minmax(14ch, auto); gap: 0 1.5ch; align-items: center; width: 100%; }
.vz-barRow { min-height: 36px; padding: 2px 6px; border: 0; border-bottom: 1px solid var(--line); justify-content: start; text-transform: none; text-align: left; font-size: var(--t-xs); }
.vz-axis { padding: 0 6px 4px; font-size: var(--t-xs); }
.vz-axis pre, .vz-bar { margin: 0; font: inherit; white-space: pre; line-height: 1; color: var(--faint); }
.vz-axis .fine { margin: 0; font-size: 12px; }
.vz-bar i { font-style: normal; }
.vz-barN { color: var(--muted); }
.vz-barT { font-variant-numeric: tabular-nums; }
.vz-barIssue { color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.vz-barRow[aria-pressed=true] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--text); }
.vz-barRow.ns .vz-barT { color: var(--work); }
.vz-ns { text-transform: none; font-family: var(--sans); }
.vz-phaseKey { display: flex; flex-wrap: wrap; gap: 4px 2.5ch; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }
.vz-phaseKey i { font-style: normal; margin-right: 1ch; }
@media (max-width: 719px) {
  .vz-barRow { grid-template-columns: 5ch 5ch 1fr; grid-template-areas: "n t i" "b b b"; row-gap: 4px; padding: 8px 6px; }
  .vz-barN { grid-area: n; } .vz-barT { grid-area: t; } .vz-barIssue { grid-area: i; justify-self: end; } .vz-bar { grid-area: b; }
  .vz-axis { grid-template-columns: 0 0 calc(var(--w) * 1ch); } .vz-axis .fine { display: none; }
  .vz-barList { width: 100%; }
}

/* ---------- direction C: replay ---------- */
.vz-deckHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vz-deckHead output { text-transform: uppercase; font-size: var(--t-xs); min-width: 16ch; text-align: center; font-variant-numeric: tabular-nums; }
.vz-deckHead .vz-playBtn { min-width: 10ch; }
.vz-deckHead button { min-height: 44px; min-width: 44px; padding: 0 10px; }
.vz-deckHead .vz-speed { margin-left: auto; display: flex; gap: 2px; }
.vz-deckHead .vz-speed button { font-size: var(--t-xs); border-color: var(--line); color: var(--muted); }
.vz-deckHead .vz-speed button[aria-pressed=true] { background: var(--text); color: var(--bg); }
.vz-replayBody { display: grid; grid-template-columns: max-content minmax(260px, 1fr); gap: 24px; align-items: start; }
.vz-replayBar { display: grid; gap: 4px; margin-top: 6px; }
.vz-pair { display: grid; grid-template-columns: 7ch minmax(0, 1fr) 5ch; gap: 1ch; align-items: center; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vz-pair span:last-child { text-align: right; color: var(--text); }
.vz-pairBar { display: flex; height: 10px; }
.vz-pairBar i { display: block; height: 100%; background: currentColor; }
.vz-now { display: flex; justify-content: space-between; gap: 2ch; margin: 8px 0 0; font-size: var(--t-xs); color: var(--muted); }
.vz-nowLine { font-variant-numeric: tabular-nums; min-width: 18ch; }
.vz-callouts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vz-callout { border: 1px solid var(--line); background: var(--surface); }
.vz-callout > button, .vz-callout:not([data-k]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5ch; align-items: baseline; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; font-size: var(--t-xs); text-align: left; text-transform: none; cursor: pointer; }
.vz-callout > button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.vz-callout .vz-cVal { color: var(--muted); font-variant-numeric: tabular-nums; }
.vz-callout.pending { opacity: 0.45; }
.vz-callout.now { border-color: var(--text); }
.vz-nowTip { margin: 4px 0 0; min-height: calc(3 * 1.45em); font-family: var(--sans); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.vz-reps > summary { font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.vz-sessionPage { display: grid; grid-template-columns: max-content minmax(240px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 879px) { .vz-replayBody, .vz-sessionPage { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.vz-more > summary { font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }

/* ---------- session summary (Replay): the time, what to work on, what went well, vs last session ---------- */
.vz-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px 56px; align-items: start; }
.vz-sumTime { display: grid; gap: 8px; }
.vz-sumSub, .vz-trail { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vz-sumSub span { white-space: nowrap; }
.vz-sumNote { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.vz-sumSub .good { color: var(--good); } .vz-sumSub .work { color: var(--work); }
.vz-trail { display: flex; flex-wrap: wrap; gap: 0 1ch; }
.vz-trail i { font-style: normal; color: var(--faint); }
.vz-trail .cur { color: var(--text); }
.vz-sumLists { display: grid; gap: 16px; max-width: 64ch; }
.vz-sumList { margin: 0; padding: 0; list-style: none; }
.vz-sumList li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0 1.5ch; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-s, 14px); }
.vz-sumTip { display: block; margin-top: 2px; text-transform: none; font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.vz-sumN { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vz-was { display: block; color: var(--muted); }
.vz-watch { min-height: 40px; padding: 0 10px; font-size: var(--t-xs); border-color: var(--line); color: var(--text); touch-action: manipulation; }
@media (pointer: coarse) { .vz-watch { min-height: 44px; } }
@media (max-width: 879px) {
  .vz-summary { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vz-sumList li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vz-sumList li .vz-watch { grid-column: 2 / -1; justify-self: start; margin-top: 6px; }
}
.vz-side { display: grid; gap: 12px; align-content: start; }