/* Poursuivant: the wake up Hautacam. Scoped under .viz-poursuivant. */
.viz-poursuivant{--pours-hill:#222528}

/* Ticker cards: stamped 00:00 until the wake reaches them. */
/* Article prose (p/li margins, ol/ul indents, table type) must not leak into the figure. */
.viz.viz-poursuivant p,.viz.viz-poursuivant li{margin:0}
.viz.viz-poursuivant ol,.viz.viz-poursuivant ul{padding:0}
.viz.viz-poursuivant .viz-legend{margin:10px 0 0}
.viz.viz-poursuivant .pours-ticker{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px}
.pours-ticker:empty{display:none}
.pours-card{display:grid;gap:2px;align-content:start;border-top:1px solid var(--viz-line);padding:9px 0 2px;
  transition:opacity .45s ease,transform .45s ease,border-color .3s ease}
.viz-poursuivant[data-step=pre] .pours-card{opacity:0;transform:translateY(5px)}
.pours-card.is-reached{border-color:var(--viz-faint)}
.pours-card:hover{border-color:var(--viz-ink)}
.pours-togo{font:9px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-faint)}
.pours-stamp{display:flex;flex-wrap:wrap;gap:0 9px;align-items:baseline;font:15px/1.35 var(--mono);font-variant-numeric:tabular-nums}
.pours-zero{position:relative;color:var(--viz-accent);transition:color .4s ease}
.pours-zero::after{content:'';position:absolute;left:-2px;right:-2px;top:55%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.pours-rebuilt{color:var(--viz-ink);opacity:0;transition:opacity .4s ease .15s}
.is-reached .pours-zero{color:var(--viz-faint)}
.is-reached .pours-zero::after{transform:scaleX(1)}
.is-reached .pours-rebuilt{opacity:1}
.pours-card-text{font-size:11px;line-height:1.4;color:var(--viz-muted)}

/* Chart */
.pours-chart{position:relative;min-height:200px}
.viz-poursuivant:not([data-viz-state=loading]):not([data-viz-state=ready]) .pours-chart{display:none}
.pours-svg{overflow:visible;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.pours-svg:focus{outline:none}
.pours-svg:focus-visible{outline:2px solid var(--viz-accent);outline-offset:4px}
.pours-grid line{stroke:var(--viz-grid);stroke-width:1}
.viz-stage .pours-ylab{font-size:10px;fill:var(--viz-faint);font-variant-numeric:tabular-nums}
.viz-stage .pours-head{font-size:9px;letter-spacing:.06em;fill:var(--viz-faint)}
.pours-hill{fill:var(--pours-hill)}
.pours-hill-edge{stroke:var(--viz-line);stroke-width:1}
.viz-stage .pours-hill-lab{font-size:9px;letter-spacing:.03em;fill:var(--viz-faint)}
.pours-hill-lab{transition:opacity .4s ease}
.viz-poursuivant:is([data-step=run],[data-step=summit]) .pours-hill-lab{opacity:0}
.pours-splits line{stroke:var(--viz-accent);stroke-width:1;opacity:.7}
.viz-stage .pours-split{font-size:10px;fill:var(--viz-muted);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s ease}
.viz-stage .pours-split.is-on{opacity:1}

.pours-wash{opacity:.07;stroke:none}
.has-hot .pours-wash{opacity:.03}
.pours-wake{fill:none;stroke-width:1.5;stroke-linecap:round;transition:opacity .2s ease,stroke-width .2s ease}
.pours-leader{stroke:var(--viz-accent);stroke-width:2;stroke-linecap:round}
.has-hot .pours-wake{opacity:.16}
.has-hot .pours-wake.is-hot{opacity:1;stroke:var(--viz-ink);stroke-width:2}

.pours-dot{stroke:var(--viz-bg);stroke-width:4;paint-order:stroke;opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.pours-dot.is-on{opacity:1;transform:none}
.has-hot .pours-dot.is-on{opacity:.22}
.has-hot .pours-dot.is-on.is-hot{opacity:1;fill:var(--viz-ink)}
.lead-hot .pours-dot.is-on{opacity:.22}

.pours-lead-dot{fill:var(--viz-accent);stroke:var(--viz-bg);stroke-width:4;paint-order:stroke}
.pours-rider{stroke:var(--viz-bg);stroke-width:3;paint-order:stroke;transition:opacity .4s ease}
.pours-play{stroke:var(--viz-faint);stroke-width:1;opacity:.6;transition:opacity .4s ease}
.viz-stage .pours-clock{font-size:11px;fill:var(--viz-ink);font-variant-numeric:tabular-nums}
.viz-poursuivant[data-step=pre] .pours-rider,.viz-poursuivant[data-step=pre] .pours-play,
.viz-poursuivant[data-step=summit] .pours-rider,.viz-poursuivant[data-step=done] .pours-rider,
.viz-poursuivant[data-step=summit] .pours-play,.viz-poursuivant[data-step=done] .pours-play{opacity:0}

.pours-guide{stroke:var(--viz-muted);stroke-width:1;opacity:0}
.pours-guide.is-on{opacity:.5}
.viz-stage .pours-val{font-size:10px;fill:var(--viz-ink);font-variant-numeric:tabular-nums;stroke:var(--viz-bg);stroke-width:4px;paint-order:stroke;stroke-linejoin:round}
.viz-stage .pours-yunit{font-size:10px;fill:var(--viz-faint);stroke:var(--viz-bg);stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
/* The check against the hand timing: rebuilt summit ring beside each hand-timed dot. */
.pours-checks{transition:opacity .6s ease .3s}
.viz-poursuivant:not([data-step=done]) .pours-checks{opacity:0;transition:none}
.pours-check line{stroke:var(--viz-ink);stroke-width:1;opacity:.3;transition:opacity .2s ease}
.pours-check circle{fill:var(--viz-bg);stroke:var(--viz-ink);stroke-width:1;opacity:.75;transition:opacity .2s ease,stroke-width .2s ease}
.has-hot .pours-check line{opacity:.1}
.has-hot .pours-check circle{opacity:.25}
.has-hot .pours-check.is-hot line{opacity:.8}
.has-hot .pours-check.is-hot circle{opacity:1;stroke-width:1.5}

/* Summit column */
.pours-row{transition:opacity .45s ease}
.viz-poursuivant[data-step=pre] .pours-row,.viz-poursuivant[data-step=run] .pours-row{opacity:0}
.pours-row-in{transition:opacity .2s ease}
.viz-poursuivant[data-step=done] .has-hot .pours-row-in{opacity:.3}
.viz-poursuivant[data-step=done] .has-hot .pours-row-in.is-hot{opacity:1}
.pours-judge{transition:opacity .5s ease}
.viz-poursuivant:not([data-step=done]) .pours-judge{opacity:0}
.pours-tie{fill:none;stroke:var(--viz-line);stroke-width:1}
.viz-stage .pours-name{font:12px var(--sans);fill:var(--viz-ink)}
.viz-poursuivant:not(.is-wide) .pours-name{font-size:11.5px}
.viz-stage .pours-num{font-size:11px;fill:var(--viz-ink);font-variant-numeric:tabular-nums}

/* Board: the table view. Visible without JS and on narrow screens; the wide chart draws it in place. */
.viz.viz-poursuivant .pours-board{width:100%;border-collapse:collapse;margin:16px 0 0;font:11px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--viz-ink);transition:opacity .45s ease}
.viz.viz-poursuivant .pours-board caption{text-align:left;font:9px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-faint);padding-bottom:4px}
.viz.viz-poursuivant .pours-board :is(th,td){padding:4px 0 4px 8px;border-bottom:1px solid var(--viz-grid);text-align:right;font-weight:400;transition:opacity .45s ease,color .2s ease}
.viz.viz-poursuivant .pours-board thead th{color:var(--viz-faint);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.viz.viz-poursuivant .pours-board th:first-child{padding-left:0;text-align:left}
.viz.viz-poursuivant .pours-board tbody th{font:12px/1.4 var(--sans)}
.pours-board tbody tr{transition:background-color .2s ease}
.pours-board tr.is-hot{background:var(--viz-raised)}
.viz-poursuivant[data-step=pre] .pours-board,.viz-poursuivant[data-step=run] .pours-board{opacity:.35}
.viz-poursuivant:is([data-step=pre],[data-step=run],[data-step=summit]) .pours-board :is(td,th):nth-child(n+3){opacity:0}
.viz-poursuivant.is-wide .pours-board{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Controls, readout, legend */
.pours-controls{align-items:flex-start;flex-wrap:nowrap;gap:16px}
.pours-controls button{flex:none}
.viz.viz-poursuivant .pours-readout{margin:0;min-height:3em;font-size:11.5px;color:var(--viz-muted)}
.pours-readout span{display:block}
.pours-readout span:first-child{color:var(--viz-ink)}
.pours-readout .pours-aside{color:var(--viz-muted);margin-top:2px}
.viz-poursuivant:not([data-viz-state=ready]) .pours-controls,.viz-poursuivant:not([data-viz-state=ready]) .pours-legend{display:none}
.pours-legend i{background:none}
.pours-legend .pours-key-dot{width:8px;height:8px;border-radius:50%;background:#bbd6e4}
.pours-legend .pours-key-line{height:1.5px;background:linear-gradient(90deg,#e2f1fa,#3d6d85)}
.pours-legend .pours-key-ring{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--viz-ink)}

@container viz (max-width:780px){
  .viz.viz-poursuivant .pours-ticker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}
}
@container viz (max-width:420px){
  .viz.viz-poursuivant .pours-ticker{gap:6px 10px}
  .pours-stamp{font-size:13px;gap:0 7px}
  .pours-card-text{font-size:10.5px}
}
@media(max-width:800px){
  .pours-controls{flex-wrap:wrap;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .viz-poursuivant *,.viz-poursuivant *::after{transition:none!important}
}