/* BATCH deck shell — shared by every deck in the final BATCH style.
   <link rel="stylesheet" href="../../shared/deck/deck.css"> before the deck's own <style>.
   Spec: 003_design/BATCH_PRES_DESIGN.md. Deck-specific rules stay in the deck. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--white);overflow:hidden;
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--ink)}
a{color:var(--primary)}
a:hover{color:var(--ink)}
/* Stage: fixed 1920×1080 (16:9) canvas scaled into the space above the bar */
.viewport{position:fixed;left:0;right:0;top:0;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.canvas{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center;
  overflow:hidden;background:var(--white);border-radius:24px}
.slide{position:absolute!important;inset:0;width:1920px;height:1080px;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 420ms var(--ease-out),visibility 0s linear 420ms}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 420ms var(--ease-out)}
/* Bottom control bar — BATCH: ink bar, lime blocks, round buttons */
.bar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding:0 max(24px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(24px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:28px;z-index:10;background:var(--ink)}
.steps{flex:1;display:flex;gap:4px;height:40px;align-items:center;margin:0 8px}
.step{position:relative;flex:1;height:40px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.step::before{content:"";display:block;width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.14);
  transition:background 320ms var(--ease-ui),height 320ms var(--ease-ui)}
.step:hover::before{background:rgba(255,255,255,.34);height:12px}
.step.is-done::before{background:var(--primary)}
.step.is-done:hover::before{background:#6464e6}
.step.is-cur::before{background:var(--lime);height:12px}
.step:focus-visible{outline:none}
.step:focus-visible::before{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lime)}
/* tooltip: the slide's name, fades up above the hovered segment */
.step::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);
  transform:translate(-50%,6px);padding:9px 14px;border-radius:999px;background:var(--lime);color:var(--ink);
  font:500 12px/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity 220ms var(--ease-ui),transform 220ms var(--ease-ui);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.step:first-child::after{left:0;transform:translate(0,6px)}
.step:last-child::after{left:auto;right:0;transform:translate(0,6px)}
.step:hover::after,.step:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:80ms}
.step:first-child:hover::after,.step:first-child:focus-visible::after,
.step:last-child:hover::after,.step:last-child:focus-visible::after{transform:translate(0,0)}
@media (hover:none){.step::after{display:none}}
.counter{font:500 15px/1 var(--font-mono);letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.counter span{color:rgba(255,255,255,.4);margin:0 .5em}
.nav{display:flex;gap:10px}
.btn{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);background:transparent;color:var(--white);cursor:pointer;
  transition:background 280ms var(--ease-ui),color 280ms var(--ease-ui),border-color 280ms var(--ease-ui),transform 280ms var(--ease-ui)}
.btn--next{background:var(--primary);border-color:var(--primary)}
.btn svg{width:18px;height:18px}
.btn:hover:not(:disabled){background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn:active:not(:disabled){transform:scale(.94)}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.btn:disabled{opacity:.3;cursor:default}
/* Reveal: blocks rise in with a short stagger each time a slide opens */
.rv{opacity:0;transform:translate3d(0,28px,0) scale(.985)}
.slide.is-in .rv{opacity:1;transform:none;
  transition:opacity 700ms var(--ease-out) var(--d,0ms),transform 700ms var(--ease-out) var(--d,0ms)}
.rv[data-rv="0"]{--d:0ms}
.rv[data-rv="1"]{--d:60ms}
.rv[data-rv="2"]{--d:120ms}
.rv[data-rv="3"]{--d:180ms}
.rv[data-rv="4"]{--d:240ms}
.rv[data-rv="5"]{--d:300ms}
.rv[data-rv="6"]{--d:360ms}
.rv[data-rv="7"]{--d:420ms}
.rv[data-rv="8"]{--d:480ms}
.rv[data-rv="9"]{--d:540ms}
.rv[data-rv="10"]{--d:600ms}
.rv[data-rv="11"]{--d:660ms}
.rv[data-rv="12"]{--d:720ms}
.rv[data-rv="13"]{--d:780ms}
.rv[data-rv="14"]{--d:840ms}
.rv[data-rv="15"]{--d:900ms}
.rv[data-rv="16"]{--d:960ms}
html.m .viewport{display:block;overflow:hidden}
html.m .canvas{width:var(--mw,560px);height:auto;border-radius:0;background:transparent;transform:none!important}
html.m .slide{position:relative!important;inset:auto;width:var(--mw,560px);height:auto;min-height:var(--mh,0px);
  display:flex!important;flex-direction:column!important;gap:22px!important;padding:30px 22px 30px!important;
  opacity:1;visibility:visible;transition:none}
html.m .slide:not(.is-active){display:none!important}
html.m .slide [style*="grid-template-rows"]{grid-template-rows:none!important;grid-auto-rows:auto!important}
html.m .bar{gap:10px;padding-top:0}
html.m .steps{gap:3px;margin:0 2px;height:32px}
html.m .step{height:32px}
html.m .nav{display:contents}
html.m #prev{order:-1}
html.m .step::before{height:4px}
html.m .step.is-cur::before{height:8px}
html.m .btn{width:36px;height:36px;border-width:1.5px}
html.m .btn svg{width:15px;height:15px}
/* ===== Print / PDF (?print=1): every slide is one 1920×1080 page ===== */
@page{size:1920px 1080px;margin:0}
html.print,html.print body{height:auto;overflow:visible;background:#fff}
html.print .viewport{position:static;display:block;overflow:visible}
html.print .canvas{transform:none!important;width:1920px;height:auto;border-radius:0}
html.print .bar,html.print [data-pdf]{display:none!important}
