/* ──────────────────────────────────────────────────────────────────────────
   Alex Automations — station interface

   The page is presented as a single-viewport instrument: six "stations" on a
   signal path, navigated by wheel, keys, swipe or the index rail.

   Everything app-like is scoped under html.js. Without JavaScript the same
   markup renders as an ordinary scrolling document — no hidden content, no
   trapped scroll, nothing lost.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --ok:#1E7F52;
  --warm:#B4621B;
  --shadow:0 1px 2px rgba(19,30,48,.04), 0 8px 24px rgba(19,30,48,.06);
  --ease:cubic-bezier(.22,.7,.3,1);
  --chrome:.8rem;
}

/* ── app shell ─────────────────────────────────────────────────────────── */
html.js:not(.simpel), html.js:not(.simpel) body{height:100%;overflow:hidden}
html.js:not(.simpel) body{position:fixed;inset:0;width:100%}

#circuit{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
html:not(.js) #circuit{display:none}

.stage{position:fixed;inset:0;z-index:1}
html:not(.js) .stage, html.simpel .stage{position:static}

.station{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:5.2rem 0 4.6rem;
  opacity:0;visibility:hidden;
  transform:translateY(calc(var(--dir, 1) * 3.5%));
  transition:opacity .5s var(--ease), transform .55s var(--ease), visibility .55s;
}
.station.active{opacity:1;visibility:visible;transform:none}
html:not(.js) .station, html.simpel .station{position:relative;opacity:1;visibility:visible;
  transform:none;padding:3rem 0;transition:none}

/* Content taller than the viewport scrolls inside its own station; the
   controller only advances once that inner scroll reaches its end.
   The scroller spans the full width and holds the reading column inside it —
   overflow-y:auto also computes overflow-x to auto, so a column with its own
   max-width here would clip anything deliberately wider than it. */
.station-inner{width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html:not(.js) .station-inner, html.simpel .station-inner{max-height:none;overflow:visible}
.wrap-wide{max-width:66rem;margin:0 auto;padding:0 1.5rem}
.station-inner::-webkit-scrollbar{width:6px}
.station-inner::-webkit-scrollbar-thumb{background:var(--mist);border-radius:3px}

/* ── fixed chrome ──────────────────────────────────────────────────────── */
.chrome{position:fixed;z-index:3;font-family:'IBM Plex Mono',monospace;font-size:var(--chrome);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.chrome a,.chrome button{pointer-events:auto}
html:not(.js) .chrome{display:none}
/* in de gewone weergave blijft de chrome staan, maar plakt hij niet vast */
html.simpel .chrome-bl,html.simpel .chrome-br{display:none}

.chrome-tl{top:1.6rem;left:1.6rem;display:flex;align-items:center;gap:.55rem}
.chrome-tr{top:1.6rem;right:1.6rem}
.chrome-bl{bottom:1.6rem;left:1.6rem;line-height:1.7}
.chrome-br{bottom:1.6rem;right:1.6rem;text-align:right;font-variant-numeric:tabular-nums}

.chrome .sep{opacity:.4;margin:0 .45rem}
.chrome .live{color:var(--ok)}
.chrome-tl .brand-mark{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
html.js .chrome-tl .brand-mark{animation:pulse 2.4s ease-in-out infinite}

/* station index rail */
.rail{position:fixed;z-index:3;right:1.2rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.1rem;align-items:flex-end}
html:not(.js) .rail, html.simpel .rail{display:none}
.rail button{
  display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  background:none;border:0;cursor:pointer;
  /* het zichtbare streepje is klein, het aanraakvlak niet */
  min-height:2.75rem;padding:0 0 0 1rem;
  font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:.6;transition:opacity .25s var(--ease), color .25s var(--ease);
}
.rail button .tick{width:1.1rem;height:2px;background:currentColor;border-radius:1px;transition:width .3s var(--ease)}
.rail button .name{opacity:0;transform:translateX(.3rem);transition:opacity .25s var(--ease), transform .25s var(--ease)}
.rail button:hover,.rail button:focus-visible{opacity:1;color:var(--accent);outline:none}
.rail button:hover .name,.rail button:focus-visible .name{opacity:1;transform:none}
.rail button[aria-current="true"]{opacity:1;color:var(--accent)}
.rail button[aria-current="true"] .tick{width:2rem}
.rail button[aria-current="true"] .name{opacity:1;transform:none}

/* advance hint */
.hint{position:fixed;z-index:3;left:50%;bottom:1.5rem;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.5rem;transition:opacity .4s var(--ease)}
html:not(.js) .hint, html.simpel .hint{display:none}
.hint.gone{opacity:0}
.hint .arrow{display:inline-block}
html.js .hint .arrow{animation:nudge 1.9s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(.22rem);opacity:1}}

/* weergaveknop: terug naar gewoon scrollen */
.weergave{
  display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .9rem;
  border:1px solid var(--mist);border-radius:999px;cursor:pointer;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.weergave:hover{color:var(--accent);border-color:var(--accent)}
.weergave:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:34rem){ .weergave{padding:0 .7rem;font-size:.72rem;letter-spacing:.04em} }

/* thema-knop */
.thema{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--mist);border-radius:999px;cursor:pointer;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  color:var(--muted);font-size:1rem;line-height:1;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.thema:hover{color:var(--accent);border-color:var(--accent)}
.thema:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chrome-tr{display:flex;align-items:center;gap:.5rem}

/* ── station content rhythm ────────────────────────────────────────────── */
.station h2{margin-bottom:1.1rem}
.station .lede{color:var(--muted);max-width:34rem}

.eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";flex:0 0 2.6rem;height:1px;background:var(--accent)}
.eyebrow .code{opacity:.55}

/* ── demo cards ────────────────────────────────────────────────────────── */
.democards{display:grid;gap:1.1rem;margin-top:1.5rem}
.democard{
  border:1px solid var(--mist);border-radius:.9rem;background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.democard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.democard:focus-within{border-color:var(--accent)}

.preview{
  position:relative;padding:1.15rem 1.2rem;min-height:8.6rem;
  background:var(--pv-bg);color:var(--pv-ink);border-bottom:1px solid var(--mist);
  font-size:.8rem;
}
.preview .pv-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.preview .pv-name{font-family:'Sora',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:-.01em}
.preview .pv-badge{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:.3rem;background:var(--pv-badge-bg);color:var(--pv-badge-ink);white-space:nowrap;
}
.preview .pv-row{display:flex;justify-content:space-between;gap:.8rem;padding:.34rem 0;border-bottom:1px solid var(--pv-line)}
.preview .pv-row:last-child{border-bottom:0}
.preview .pv-row b{font-weight:500}
.preview .pv-row span{color:var(--pv-muted);font-variant-numeric:tabular-nums}

.pv-bakkerij{--pv-bg:#FBF6EE;--pv-ink:#2E2118;--pv-muted:#7A6A5B;--pv-line:#EFE3D2;--pv-badge-bg:#F2E5D2;--pv-badge-ink:#8A5622}
.pv-kapsalon{--pv-bg:#FAF6F4;--pv-ink:#2A1E24;--pv-muted:#8A7078;--pv-line:#EFE2E6;--pv-badge-bg:#F6E7EC;--pv-badge-ink:#8E3B5C}
.pv-monitor{--pv-bg:#111A27;--pv-ink:#E8EEF8;--pv-muted:#8A98AE;--pv-line:#243349;--pv-badge-bg:rgba(61,220,151,.14);--pv-badge-ink:#3DDC97}

.pv-steps{display:flex;gap:.3rem;margin:.55rem 0 .5rem}
.pv-steps i{flex:1;height:3px;border-radius:2px;background:#EFE2E6;transition:background .45s var(--ease)}
.pv-steps i.on{background:#8E3B5C}
.pv-slots{display:flex;flex-wrap:wrap;gap:.32rem}
.pv-slot{font-family:'IBM Plex Mono',monospace;font-size:.68rem;padding:.24rem .45rem;border-radius:.32rem;
  border:1px solid #EFE2E6;color:#8A7078;transition:all .3s var(--ease)}
.pv-slot.picked{background:#F6E7EC;border-color:#8E3B5C;color:#8E3B5C;font-weight:600}
.pv-slot.gone{opacity:.4;text-decoration:line-through}

/* machine room */
.pv-machine{--pv-bg:#0C121C;--pv-ink:#E8EEF8;--pv-muted:#8A98AE;--pv-line:#22314A;
  --pv-badge-bg:rgba(61,220,151,.14);--pv-badge-ink:#3DDC97;
  background-image:linear-gradient(rgba(34,49,74,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,49,74,.5) 1px,transparent 1px);
  background-size:18px 18px}
.pv-flow{display:flex;align-items:center;gap:.3rem;margin-top:.45rem}
.pv-flow.indent{margin-left:2.6rem}
.pv-block{font-size:.63rem;padding:.28rem .45rem;border-radius:.35rem;border:1px solid #22314A;
  background:#111A27;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-block.trig{border-color:rgba(61,220,151,.45);color:#3DDC97}
.pv-block.act{border-color:rgba(110,143,209,.45);color:#9DB8E8}
.pv-wire{flex:1;height:1px;background:#3E5478;position:relative;min-width:.9rem}
.pv-wire.short{flex:0 0 1.4rem}
.pv-wire i{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#3DDC97}
html.js .pv-wire i{animation:runwire 2.6s linear infinite}
@keyframes runwire{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* restaurant floor plan */
.pv-resto{--pv-bg:#14231D;--pv-ink:#F6F1E7;--pv-muted:#A8B3AC;--pv-line:#24352D;
  --pv-badge-bg:rgba(192,138,75,.18);--pv-badge-ink:#E0B579}
.pv-plan{position:relative;height:4.6rem;border:1px dashed #2A3B33;border-radius:.4rem;margin-top:.3rem}
.pv-plan .tbl{position:absolute;width:.85rem;height:.85rem;border-radius:50%;background:#3A4741;
  transform:translate(-50%,-50%)}
.pv-plan .tbl.free{background:#F6F1E7}
.pv-plan .tbl.sel{background:#C08A4B;box-shadow:0 0 0 3px rgba(192,138,75,.3)}

/* garage */
.pv-garage{--pv-bg:#141922;--pv-ink:#EAEFF6;--pv-muted:#8C99AA;--pv-line:#2C3849;
  --pv-badge-bg:rgba(245,137,43,.16);--pv-badge-ink:#F5892B}
.pv-plate{display:inline-flex;align-items:stretch;border-radius:.25rem;overflow:hidden;margin:.15rem 0 .5rem}
.pv-plate .eu{background:#0B3B96;color:#FFD617;font-size:.5rem;font-weight:700;padding:.2rem .22rem;
  display:grid;place-items:center}
.pv-plate .nr{background:#FFD617;color:#14181F;font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;padding:.16rem .45rem;letter-spacing:.04em}

/* florist */
.pv-bloem{--pv-bg:#FDF7F4;--pv-ink:#33272C;--pv-muted:#8A7A80;--pv-line:#EADFDA;
  --pv-badge-bg:#F6ECE6;--pv-badge-ink:#C4657F}
.pv-bouquet{position:relative;height:4.8rem;margin-top:.2rem}
.pv-bouquet .bl{position:absolute;width:.85rem;height:.85rem;border-radius:50%;background:var(--c)}
.pv-bouquet .bl.sm{width:.6rem;height:.6rem}
.pv-bouquet .bl::after{content:"";position:absolute;left:50%;top:80%;width:1px;height:1.5rem;
  background:#5E7F63;transform:translateX(-50%)}
.pv-bouquet .wrapcone{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:0;border-left:1.1rem solid transparent;border-right:1.1rem solid transparent;
  border-bottom:1.5rem solid #EADFDA}

/* gym */
.pv-gym{--pv-bg:#101012;--pv-ink:#F2F2F4;--pv-muted:#9A9AA6;--pv-line:#2A2A32;
  --pv-badge-bg:rgba(255,90,31,.16);--pv-badge-ink:#FF5A1F}
.pv-class{position:relative;padding:.3rem 0 .45rem;border-bottom:1px solid var(--pv-line);
  display:flex;justify-content:space-between;gap:.6rem;font-size:.7rem}
.pv-class:last-child{border-bottom:0}
.pv-class b{font-weight:500}
.pv-class span{color:var(--pv-muted);font-family:'IBM Plex Mono',monospace;font-size:.64rem}
.pv-class .fill{position:absolute;left:0;bottom:0;height:2px;background:#FFC53D;border-radius:1px}
.pv-class .fill.full{background:#FF5A1F}
.pv-class .fill.ok{background:#B8F14C}

/* ground station */
.pv-space{--pv-bg:#05070E;--pv-ink:#DCE6F5;--pv-muted:#7F8DA6;--pv-line:#1D2A42;
  --pv-badge-bg:rgba(122,162,255,.14);--pv-badge-ink:#7AA2FF}
.pv-orbit{position:relative;height:4.1rem;margin:.15rem 0 .35rem}
.pv-orbit .globe{position:absolute;left:50%;top:50%;width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;
  border-radius:50%;background:radial-gradient(circle at 34% 32%,#1B3358,#0D1A31 62%,#070D18);
  border:1px solid rgba(122,162,255,.34)}
.pv-orbit .ring{position:absolute;left:50%;top:50%;border:1px solid rgba(122,162,255,.22);border-radius:50%}
.pv-orbit .ring.r1{width:4.3rem;height:2.1rem;margin:-1.05rem 0 0 -2.15rem;transform:rotate(-18deg)}
.pv-orbit .ring.r2{width:5.4rem;height:2.9rem;margin:-1.45rem 0 0 -2.7rem;transform:rotate(24deg)}
.pv-orbit .sat{position:absolute;width:4px;height:4px;border-radius:50%;box-shadow:0 0 6px currentColor}
.pv-orbit .sat.s1{background:#3DDC97;color:#3DDC97;left:calc(50% + 1.9rem);top:calc(50% - .75rem)}
.pv-orbit .sat.s2{background:#7AA2FF;color:#7AA2FF;left:calc(50% - 2.4rem);top:calc(50% + .55rem)}
.pv-tel{display:flex;justify-content:space-between;gap:.5rem;font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;color:var(--pv-muted);border-top:1px solid var(--pv-line);padding-top:.35rem}

.pv-sensors{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.2rem}
.pv-sensor{background:rgba(255,255,255,.035);border:1px solid var(--pv-line);border-radius:.45rem;padding:.45rem .55rem}
.pv-sensor .lbl{font-size:.63rem;color:var(--pv-muted);letter-spacing:.04em}
.pv-sensor .tmp{font-family:'IBM Plex Mono',monospace;font-size:.92rem;font-variant-numeric:tabular-nums;margin-top:.05rem}
.pv-sensor svg{display:block;width:100%;height:.9rem;margin-top:.15rem}

.democard .card-body{padding:1.1rem 1.2rem 1.25rem}
.democard h3{font-family:'Sora',sans-serif;font-weight:500;font-size:1rem;overflow-wrap:break-word;hyphens:auto}
.democard .meta{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--muted);margin:.28rem 0 .5rem}
.democard p{color:var(--muted);font-size:.94rem}
.democard .demo-link{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.4rem;
  font-size:.97rem;font-weight:500;color:var(--accent);text-decoration:none}
.democard:hover .demo-link{text-decoration:underline}

@media(min-width:46rem){.democards{grid-template-columns:repeat(3,1fr)}}

/* ── process steps ─────────────────────────────────────────────────────── */
.stappen{list-style:none;display:grid;gap:1rem;margin-top:1.6rem;counter-reset:stap}
@media(min-width:56rem){.stappen{grid-template-columns:repeat(4,1fr);gap:.9rem}}

.stap{
  position:relative;background:var(--card);border:1px solid var(--mist);border-radius:.8rem;
  padding:1.5rem 1.15rem 1.15rem;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.stap:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}

.stap .num{
  position:absolute;top:-.85rem;left:1.1rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;font-weight:500;
  box-shadow:0 0 0 4px var(--paper);
}
/* the trace between steps — same motif as the background circuit */
@media(min-width:56rem){
  .stap::before{
    content:"";position:absolute;top:0;left:2.8rem;right:-.9rem;height:1px;
    background:var(--mist);
  }
  .stap:last-child::before{display:none}
}

.stap h3{font-family:'Sora',sans-serif;font-weight:500;font-size:1.02rem;margin-bottom:.4rem;
  overflow-wrap:break-word;hyphens:auto}
.stap .duur{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  color:var(--accent);background:var(--accent-soft);padding:.14rem .5rem;border-radius:.3rem;
  margin-bottom:.6rem;
}
.stap p{color:var(--muted);font-size:.88rem;line-height:1.55}
.stap .jij{
  display:block;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--mist);
  font-size:.82rem;color:var(--muted);
}
.stap .jij b{color:var(--ink);font-weight:500}

.nudge{
  margin-top:1.5rem;padding:.95rem 1.1rem;border-left:2px solid var(--accent);
  background:var(--accent-soft);border-radius:0 .5rem .5rem 0;
  font-size:.9rem;color:var(--ink);max-width:46rem;line-height:1.6;
}


/* ── zie je eigen zaak ─────────────────────────────────────────────────── */
.eigenzaak{
  margin-top:1.5rem;background:var(--card);border:1px solid var(--mist);border-radius:.9rem;
  padding:1.2rem 1.3rem;
}
.ez-kop{margin-bottom:1rem}
.ez-kop .lab{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.25rem}
.ez-uitleg{display:block;font-size:.88rem;color:var(--muted)}

.ez-rij{display:grid;gap:.9rem}
@media(min-width:46rem){.ez-rij{grid-template-columns:1.4fr 1fr auto;align-items:end}}
.ez-veld > span{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.ez-veld input,.ez-veld select{
  width:100%;border:1px solid var(--mist);border-radius:.5rem;padding:.55rem .7rem;
  font:inherit;font-size:.93rem;background:var(--card);color:var(--ink);
}
.ez-veld input:focus,.ez-veld select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

.ez-kleuren{display:flex;gap:.35rem;flex-wrap:wrap}
.ez-kleuren button{
  width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.ez-kleuren button:hover{transform:scale(1.12)}
.ez-kleuren button[aria-pressed="true"]{border-color:var(--ink);transform:scale(1.12)}
.ez-kleuren button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ez-acties{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.ez-acties .btn{font-size:.92rem;padding:.6rem 1.1rem;cursor:pointer}
.ez-status{font-size:.84rem;color:var(--ok)}

@media (prefers-reduced-motion:reduce){ .ez-kleuren button{transition:none} }

/* ── intro-call booking ────────────────────────────────────────────────── */
.boek{background:var(--card);border:1px solid var(--mist);border-radius:.9rem;padding:1.5rem;margin-top:1.3rem;max-width:46rem}
.boek-grid{display:grid;gap:1rem}
@media(min-width:40rem){.boek-grid{grid-template-columns:1fr 1fr;gap:1.1rem}}
.veld{margin-bottom:1.2rem}
.veld:last-of-type{margin-bottom:0}
.veld .lab{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}

.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips button{
  border:1px solid var(--mist);background:var(--card);border-radius:.5rem;padding:.45rem .7rem;
  font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;line-height:1.25;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.chips button small{display:block;font-size:.7rem;color:var(--muted)}
.chips button:hover{border-color:var(--accent)}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.chips button[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.chips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.inp{display:block}
.inp span{display:block;font-size:.84rem;color:var(--muted);margin-bottom:.3rem}
.inp input{
  width:100%;border:1px solid var(--mist);border-radius:.5rem;padding:.6rem .75rem;
  font:inherit;font-size:.95rem;background:var(--card);color:var(--ink);
}
.inp input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.inp input[aria-invalid="true"]{border-color:#B4341F}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.boek-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.3rem}
.boek-foot button:disabled{background:var(--mist);color:var(--muted);cursor:not-allowed}
.boek-foot button[data-busy="true"]{opacity:.7;cursor:progress}
.boek-sum{font-size:.88rem;color:var(--muted)}
.boek-sum b{color:var(--ink);font-weight:500}
.boek-err{margin-top:.8rem;font-size:.88rem;color:#B4341F;background:#FBEDEA;
  border-left:2px solid #B4341F;border-radius:0 .4rem .4rem 0;padding:.6rem .8rem}
.boek-note{margin-top:.9rem;font-size:.82rem;color:var(--muted);line-height:1.55;max-width:38rem}
.boek-note .mail{font-family:'IBM Plex Mono',monospace;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent)}
.fallback{margin-top:1rem}

/* confirmation + backstage timeline */
.boek-klaar{background:var(--card);border:1px solid var(--mist);border-radius:.9rem;padding:1.6rem;
  margin-top:1.3rem;max-width:46rem}
.boek-klaar .vink{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ok-soft, #E4F2EA);
  color:var(--ok);display:grid;place-items:center;font-size:1.2rem;margin-bottom:.8rem}
.boek-klaar h3{font-family:'Sora',sans-serif;font-weight:600;font-size:1.15rem;margin-bottom:.3rem}
.boek-klaar .wanneer{color:var(--muted);font-size:.95rem;margin-bottom:1.1rem}
.boek-klaar .wanneer b{color:var(--ink);font-weight:500}

.tijdlijn{list-style:none;border-left:1px solid var(--mist);margin-left:.45rem;padding-left:1.1rem}
.tijdlijn li{position:relative;padding:.32rem 0;font-size:.88rem;color:var(--muted);
  opacity:.35;transition:opacity .3s var(--ease), color .3s var(--ease)}
.tijdlijn li.on{opacity:1;color:var(--ink)}
.tijdlijn li::before{
  content:"";position:absolute;left:-1.42rem;top:.72rem;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--mist);transition:background .3s var(--ease);
}
.tijdlijn li.on::before{background:var(--ok)}
.tijdlijn li .ms{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--muted);margin-left:.5rem}

@media (prefers-reduced-motion:reduce){
  .tijdlijn li,.tijdlijn li::before,.chips button{transition:none}
}

/* ── small screens ─────────────────────────────────────────────────────── */
@media(max-width:46rem){
  .rail{right:.9rem;gap:.7rem}
  .rail button .name{display:none}
  .chrome-bl{display:none}
  .chrome-tl,.chrome-tr{top:1.1rem}
  .chrome-tl{left:1.1rem}
  .chrome-tr{right:1.1rem}
  .chrome-br{bottom:1.1rem;right:1.1rem}
  .station{padding:4.4rem 0 4.2rem}
}

/* ── reduced motion: keep the interface, drop the movement ─────────────── */
@media (prefers-reduced-motion:reduce){
  .station{transition:opacity .01s linear;transform:none}
  .station.active{transform:none}
  html.js .chrome-tl .brand-mark,html.js .hint .arrow{animation:none}
  .democard,.pv-steps i,.pv-slot,.rail button,.rail button .tick,.rail button .name{transition:none}
  .democard:hover{transform:none}
  html.js .pv-wire i{animation:none;left:50%}
}