/* ============================================================
   Z-VISITOR + Z-DOCK — animated journeys (visitor-docking page)
   Builds on css/zvenue.css (step list, stage, toggle, gate SVG).
   State comes from js/zvenue.js: [data-step], cumulative .r0..r6
   and timed .is-a..is-d on the .zv root.
   ============================================================ */
.vd-block + .vd-block { margin-block-start: var(--sp-6); }
.vd-head { display: flex; align-items: center; gap: .9rem; margin: 0 0 .5rem; }
.vd-badge { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: .7rem; background: var(--grad-navy); color: #fff; font: 800 1.2rem/1 var(--font-en); flex: none; }
.vd-head h3 { margin: 0; font-size: var(--fs-2xl); }
.vd-lead { margin: 0 0 var(--sp-3); max-inline-size: 48rem; color: var(--text-muted); font-size: var(--fs-lg); }
.vd-lead strong { color: var(--text); }

/* ---------- console window ---------- */
.zc {
  inline-size: 23.5rem; block-size: 28rem; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; background: #f4f6fb; color: #121a2b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 50px -18px rgba(0,0,0,.65);
  font-size: .66rem; line-height: 1.35;
}
.zc__bar { display: flex; align-items: center; gap: .35rem; padding: .5rem .7rem; background: #0d1424; color: #8a96ad; font: 500 .66rem/1 var(--font-mono); }
.zc__bar i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #2e3a52; }
.zc__bar span { margin-inline-start: .4rem; }
.zc__body { position: relative; flex: 1; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; overflow: hidden; }
.zc__app { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: .74rem; }
.zc__app small { font-weight: 600; color: #6b7487; font-size: .58rem; }
.zc-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.zc-stat span { display: flex; flex-direction: column; gap: .1rem; padding: .35rem .45rem; border-radius: .5rem; background: #fff; border: 1px solid #e3e7ef; font-size: .55rem; color: #6b7487; font-weight: 600; transition: background-color .4s, color .4s, border-color .4s; }
.zc-stat b { color: #17733f; font-size: .6rem; }
.zc-stat b::before { content: "● "; }
.zc-grp { background: #fff; border: 1px solid #e3e7ef; border-radius: .6rem; padding: .45rem .5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .45rem; }
.zc-grp > p { grid-column: 1 / -1; margin: 0; font-weight: 800; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.zf { display: flex; flex-direction: column; gap: .12rem; min-inline-size: 0; }
.zf small { color: #6b7487; font-size: .52rem; font-weight: 600; }
.zf__box { block-size: 1.35rem; display: flex; align-items: center; padding-inline: .4rem; border-radius: .35rem; background: #f1f3f8; border: 1px solid #e3e7ef; overflow: hidden; }
.zf__v { display: inline-block; white-space: nowrap; overflow: hidden; max-inline-size: 0; font-weight: 700; font-size: .62rem; transition: max-inline-size .9s steps(18); }
.zf--wide { grid-column: 1 / -1; }
.zc-btn { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem; border-radius: .55rem; background: #c8cfdc; color: #fff; font-weight: 800; font-size: .66rem; transition: background-color .35s, transform .2s; margin-block-start: auto; }

/* reveal fields as each step is reached */
.zv.r1 .zf[data-r="1"] .zf__v,
.zv.r2 .zf[data-r="2"] .zf__v,
.zv.r3 .zf[data-r="3"] .zf__v,
.zv.r4 .zf[data-r="4"] .zf__v { max-inline-size: 14rem; }
.zv.r1 .zf[data-r="1"] .zf__box,
.zv.r2 .zf[data-r="2"] .zf__box,
.zv.r3 .zf[data-r="3"] .zf__box,
.zv.r4 .zf[data-r="4"] .zf__box { background: #fff; border-color: #c9d3e8; }

/* ---------- Z-Visitor console states ---------- */
.zvv.r2 .zc-btn { background: var(--navy); }
.zvv[data-step="3"]:not(.is-a) .zc-btn { transform: scale(.96); }
.zc-done {
  position: absolute; inset: 0; z-index: 2; padding: .7rem; display: flex; flex-direction: column; gap: .45rem;
  background: #0f1b36; color: #e9eef8; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.zvv.r3:not(.r6) .zc-done { opacity: 1; visibility: visible; transition: opacity .4s; }
.zc-done__h { display: flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .74rem; }
.zc-done__h i { display: grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; border: 2px solid #2fd27a; color: #2fd27a; font-style: normal; font-size: .7rem; }
.zc-done__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .45rem; border-radius: .5rem; background: rgba(255,255,255,.06); }
.zc-done__meta small { display: block; color: #8a96ad; font-size: .5rem; text-transform: uppercase; letter-spacing: .05em; }
.zc-done__meta b { font-size: .64rem; }
.zc-done__qr { align-self: center; padding: .45rem; background: #fff; border-radius: .5rem; }
.zc-done__qr .zv-qr { inline-size: 6.2rem; block-size: 6.2rem; }
.zc-done__ok { text-align: center; color: #2fd27a; font-weight: 800; font-size: .6rem; }
.zc-done__st { text-align: center; color: #8a96ad; font-weight: 700; font-size: .6rem; }
.zc-done__st .s2 { display: none; color: #2fd27a; }
.zvv[data-step="5"].is-b .zc-done__st .s1 { display: none; }
.zvv[data-step="5"].is-b .zc-done__st .s2 { display: inline; }
.zc-ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-block-start: auto; }
.zc-ch span { padding: .45rem .2rem; border-radius: .45rem; text-align: center; font-weight: 800; font-size: .58rem; border: 1px solid rgba(255,255,255,.18); color: #b9c3d6; transition: background-color .35s, color .35s, border-color .35s; }
.zvv[data-step="4"].is-a .zc-ch .c1, .zvv.r5 .zc-ch .c1,
.zvv[data-step="4"].is-b .zc-ch .c2, .zvv.r5 .zc-ch .c2,
.zvv[data-step="4"].is-c .zc-ch .c3, .zvv.r5 .zc-ch .c3 { background: #2f6bff; border-color: #2f6bff; color: #fff; }
.zvv[data-step="4"].is-b .zc-ch .c2, .zvv.r5 .zc-ch .c2 { background: #1f9d55; border-color: #1f9d55; }

.zc-dash { position: absolute; inset: 0; z-index: 3; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; background: #0b1226; color: #e9eef8; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.zvv.r6 .zc-dash { opacity: 1; visibility: visible; transition: opacity .4s; }
.zc-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.zc-kpi span { padding: .45rem; border-radius: .5rem; background: rgba(255,255,255,.06); font-size: .55rem; color: #8a96ad; }
.zc-kpi b { display: block; color: #fff; font-size: 1rem; margin-block-start: .1rem; }
.zc-bars { display: flex; align-items: flex-end; gap: .25rem; block-size: 4.2rem; padding: .3rem .4rem 0; border-radius: .5rem; background: rgba(255,255,255,.04); }
.zc-bars i { flex: 1; background: #5ecba1; border-radius: 2px 2px 0 0; transform-origin: bottom; transform: scaleY(.1); transition: transform .8s var(--ease); }
.zvv.r6 .zc-bars i { transform: none; }
.zc-rows { display: flex; flex-direction: column; gap: .2rem; }
.zc-rows div { display: grid; grid-template-columns: 1.3fr 1fr .8fr .8fr; gap: .3rem; padding: .3rem .4rem; border-radius: .35rem; background: rgba(255,255,255,.04); font-size: .55rem; color: #b9c3d6; }
.zc-rows div:first-child { background: transparent; color: #6b7a96; font-weight: 700; text-transform: uppercase; font-size: .48rem; letter-spacing: .05em; }
.zc-rows .new { background: rgba(47,107,255,.22); color: #fff; animation: vd-row .6s var(--ease) both .3s; }
.zc-rows .new .out { opacity: 0; transition: opacity .4s; }
.zvv[data-step="6"].is-a .zc-rows .new .out { opacity: 1; }
@keyframes vd-row { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Z-Visitor scenes ---------- */
.vd-svg { display: block; inline-size: 100%; max-inline-size: 34rem; margin-inline: auto; border-radius: 18px; overflow: visible; }
.vd-card { transition: transform 1s cubic-bezier(.5,0,.2,1); transform-box: view-box; }
.zvv[data-step="1"].is-a .vd-card { transform: translate(0, 70px); }
.vd-led { fill: #4f8bff; transition: fill .3s; }
.zvv[data-step="1"].is-b .vd-led { fill: #2fd27a; }
.vd-beam { opacity: 0; }
.zvv[data-step="1"].is-c .vd-beam { opacity: 1; animation: zv-blink .5s steps(2) infinite; }
.vd-floor { fill: #1d3a7a; transition: fill .4s; }
.zvv.is-a .zv-scene.is-on .vd-floor--dest { fill: #e0a43a; }
.vd-tag { opacity: 0; transform: translateX(-10px); transition: opacity .4s .2s, transform .4s .2s; transform-box: fill-box; }
.zvv.is-a .zv-scene.is-on .vd-tag { opacity: 1; transform: none; }
.vd-pin { transform: translateY(-40px); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .3s; transform-box: fill-box; }
.zvv.is-a .zv-scene.is-on .vd-pin { transform: none; opacity: 1; }
.zv-scene__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zv-scene__chip i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #2fd27a; }

.vd-deliver { display: grid; grid-template-columns: auto minmax(0, 15rem); justify-content: center; align-items: center; gap: var(--sp-3); }
.vd-pass { inline-size: 12rem; background: #fff; color: #121a2b; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.vd-pass__top { background: var(--grad-navy); color: #fff; padding: .55rem .7rem; font-size: .72rem; }
.vd-pass__top b { display: block; font-size: .8rem; }
.vd-pass__top small { color: #c9d3e8; }
.vd-pass__qr { display: grid; place-items: center; padding: .7rem; }
.vd-pass__qr .zv-qr { inline-size: 8rem; block-size: 8rem; }
.vd-pass__ft { padding: .45rem .7rem .6rem; border-block-start: 2px dashed #dfe3ec; font-size: .64rem; font-weight: 700; text-align: center; color: #3b4559; }
.vd-chs { display: flex; flex-direction: column; gap: .6rem; }
.vd-ch { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text-on-navy-muted); font-weight: 700; font-size: var(--fs-sm); transition: background-color .35s, color .35s, border-color .35s, transform .35s; }
.vd-ch svg { inline-size: 1.4rem; block-size: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vd-ch small { display: block; font-weight: 500; font-size: var(--fs-xs); color: inherit; opacity: .8; }
.zvv[data-step="4"].is-a .vd-ch.c1,
.zvv[data-step="4"].is-b .vd-ch.c2,
.zvv[data-step="4"].is-c .vd-ch.c3 { background: #fff; color: var(--ink); border-color: #fff; transform: scale(1.04); }
.zvv[data-step="4"].is-b .vd-ch.c1, .zvv[data-step="4"].is-c .vd-ch.c1, .zvv[data-step="4"].is-c .vd-ch.c2 { color: #2fd27a; border-color: rgba(47,210,122,.5); }
.vd-chs .vd-note { color: var(--text-on-navy-muted); font-size: var(--fs-xs); }

.vd-log { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: var(--sp-3); display: flex; flex-direction: column; gap: .5rem; }
.vd-log__h { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.vd-log__h span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: #2fd27a; }
.vd-log__h span::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #2fd27a; animation: zv-blink 1s steps(2) infinite; }
.vd-ev { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .55rem .7rem; border-radius: .7rem; background: rgba(255,255,255,.05); font-size: var(--fs-sm); color: var(--text-on-navy-muted); }
.vd-ev time { font-family: var(--font-mono); color: #fff; font-size: var(--fs-xs); }
.vd-ev b { color: #fff; }
.vd-ev em { font-style: normal; font-size: var(--fs-xs); padding: .15rem .5rem; border-radius: 999px; background: rgba(47,210,122,.15); color: #2fd27a; font-weight: 700; }
.vd-ev--exit em { background: rgba(224,164,58,.18); color: #f0bf63; }
.zvv[data-step="6"] .vd-ev--new { animation: vd-row .6s var(--ease) both .4s; }
.vd-ev--exit { opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s; }
.zvv[data-step="6"].is-a .vd-ev--exit { opacity: 1; transform: none; }

/* ---------- Z-Dock console ---------- */
.zdk .zc { background: #eef1f6; }
.zd-top { display: flex; align-items: center; justify-content: space-between; padding: .45rem .55rem; border-radius: .5rem; background: #23344f; color: #fff; font-weight: 800; font-size: .66rem; }
.zd-top small { padding: .2rem .4rem; border-radius: .3rem; background: #1f9d55; font-size: .52rem; }
.zd-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.zd-st > span { position: relative; padding: .4rem .45rem; border-radius: .45rem; background: #cfd6e2; color: #3b4559; font-size: .52rem; font-weight: 700; min-block-size: 2.6rem; transition: background-color .4s, color .4s; }
.zd-st b { display: block; font-size: .6rem; margin-block-start: .15rem; }
.zd-st .v { display: none; }
.zd-st .v0 { display: block; }
/* driver status: authorized from step 2 phase a */
.zdk[data-step="2"].is-a .zd-st .s-drv, .zdk.r3 .zd-st .s-drv { background: #1f9d55; color: #fff; }
.zdk[data-step="2"].is-a .s-drv .v0, .zdk.r3 .s-drv .v0 { display: none; }
.zdk[data-step="2"].is-a .s-drv .v1, .zdk.r3 .s-drv .v1 { display: block; }
/* access card: issued (step 3) → returned (step 6 phase b) */
.zdk.r3 .zd-st .s-card { background: #e0a43a; color: var(--ink); }
.zdk.r3 .s-card .v0 { display: none; }
.zdk.r3 .s-card .v1 { display: block; }
.zdk[data-step="6"].is-b .zd-st .s-card { background: #1f9d55; color: #fff; }
.zdk[data-step="6"].is-b .s-card .v1 { display: none; }
.zdk[data-step="6"].is-b .s-card .v2 { display: block; }
/* reader */
.zd-st .s-rd { background: #d6e4ff; color: #1d3a7a; }
.zdk.r1 .s-rd .v0 { display: none; }
.zdk.r1 .s-rd .v1 { display: block; }
.zdk .zc-btn { background: #c8cfdc; }
.zdk.r4 .zc-btn { background: #1f9d55; }
.zdk[data-step="4"].is-a .zc-btn { transform: scale(.96); }
.zd-tx { display: none; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .55rem; border-radius: .5rem; background: #0f1b36; color: #e9eef8; font-size: .58rem; font-weight: 700; }
.zdk[data-step="4"].is-b .zd-tx, .zdk.r5 .zd-tx { display: flex; }
.zd-tx em { font-style: normal; padding: .12rem .4rem; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
.zd-tx .t1, .zd-tx .t2, .zd-tx .t3 { display: none; }
.zdk[data-step="5"].is-b .zd-tx .t0, .zdk.r6 .zd-tx .t0 { display: none; }
.zdk[data-step="5"].is-b .zd-tx .t1 { display: inline; background: #1f9d55; }
.zdk.r6 .zd-tx .t2 { display: inline; background: #1f9d55; }
.zdk[data-step="6"].is-b .zd-tx .t2 { display: none; }
.zdk[data-step="6"].is-b .zd-tx .t3 { display: inline; background: #e0a43a; color: var(--ink); }

/* ---------- Z-Dock yard ---------- */
.yd { display: flex; flex-direction: column; gap: var(--sp-2); }
.yd-svg { display: block; inline-size: 100%; border-radius: 18px; }
.yd .trk { transform-box: view-box; transform-origin: 0 0; transform: translate(-90px, 292px); }
.zdk[data-step="0"] .trk { animation: yd-in 2.6s cubic-bezier(.3,.6,.3,1) .4s both; }
.zdk.r1:not([data-step="5"]):not([data-step="6"]) .trk { transform: translate(52px, 292px); }
.zdk[data-step="5"] .trk { transform: translate(52px, 292px); }
.zdk[data-step="5"].is-a .trk { animation: yd-dock 3.4s ease-in-out both; }
.zdk[data-step="6"] .trk { transform: translate(282px, 168px) rotate(90deg); }
.zdk[data-step="6"].is-a .trk { animation: yd-out 3.6s ease-in both; }
@keyframes yd-in { from { transform: translate(-90px, 292px); } to { transform: translate(52px, 292px); } }
@keyframes yd-dock {
  0%   { transform: translate(52px, 292px) rotate(0deg); }
  40%  { transform: translate(250px, 292px) rotate(0deg); }
  62%  { transform: translate(330px, 262px) rotate(-35deg); }
  80%  { transform: translate(286px, 215px) rotate(60deg); }
  100% { transform: translate(282px, 168px) rotate(90deg); }
}
@keyframes yd-out {
  0%   { transform: translate(282px, 168px) rotate(90deg); }
  30%  { transform: translate(310px, 240px) rotate(45deg); }
  55%  { transform: translate(380px, 292px) rotate(0deg); }
  100% { transform: translate(600px, 292px) rotate(0deg); }
}
.yd .arm { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .7s var(--ease); }
.zdk[data-step="5"].is-a .arm-in { transform: rotate(-80deg); }
.zdk[data-step="5"].is-b .arm-in { transform: none; }
.zdk[data-step="6"].is-a .arm-out { transform: rotate(-80deg); }
.yd .cam { fill: #8fa3c4; }
.yd .flash { opacity: 0; }
.zdk[data-step="0"] .flash-in, .zdk[data-step="5"].is-a:not(.is-b) .flash-in, .zdk[data-step="6"].is-a:not(.is-b) .flash-out { animation: yd-flash 1s ease-out 2; }
@keyframes yd-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.yd .dl { transition: fill .4s; }
.yd .dl--free { fill: #2fd27a; }
.yd .dl--busy { fill: #ff5a5a; }
.yd .d2-frame { fill: none; stroke: #e0a43a; stroke-width: 3; opacity: 0; transition: opacity .4s; }
.zdk.r4:not(.r6) .d2-frame, .zdk[data-step="6"]:not(.is-a) .d2-frame { opacity: 1; animation: zv-blink 1s steps(2) 3; }
.zdk.r5 .dl-2 { fill: #ff5a5a; }
.zdk[data-step="6"].is-b .dl-2 { fill: #2fd27a; }
.yd .reached { opacity: 0; transition: opacity .4s; }
.zdk[data-step="5"].is-b .reached, .zdk[data-step="6"]:not(.is-a) .reached { opacity: 1; }
.yd .card-ic { opacity: 0; transition: opacity .3s, transform .9s var(--ease); transform-box: view-box; }
.zdk[data-step="3"] .card-ic { opacity: 1; transform: translate(-36px, 20px); }
.yd .blocked { opacity: 0; transition: opacity .3s; }
.zdk[data-step="2"]:not(.is-a) .yd .chk { animation: zv-blink .5s steps(2) infinite; }
.yd .ok-drv { opacity: 0; transition: opacity .3s; }
.zdk[data-step="2"].is-a .ok-drv { opacity: 1; }
.yd-msg { align-self: center; display: inline-flex; padding: .55rem 1rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-sm); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.yd-msg span { display: none; }
.zdk[data-step="0"] .yd-msg .m0, .zdk[data-step="1"] .yd-msg .m1, .zdk[data-step="2"]:not(.is-a) .yd-msg .m2, .zdk[data-step="2"].is-a .yd-msg .m2b, .zdk[data-step="3"] .yd-msg .m3,
.zdk[data-step="4"] .yd-msg .m4, .zdk[data-step="5"]:not(.is-b) .yd-msg .m5, .zdk[data-step="5"].is-b .yd-msg .m5b,
.zdk[data-step="6"]:not(.is-b) .yd-msg .m6, .zdk[data-step="6"].is-b .yd-msg .m6b { display: inline; }
.zdk[data-step="5"].is-b .yd-msg, .zdk[data-step="6"].is-b .yd-msg, .zdk[data-step="2"].is-a .yd-msg { background: #1f9d55; border-color: #1f9d55; }

/* ---------- installed references ---------- */
.vd-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.vd-site { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-3); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: .6rem; }
.vd-site__k { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(40,73,144,.08); color: var(--navy); font-weight: 800; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.vd-site h3 { margin: 0; font-size: var(--fs-xl); }
.vd-site p { margin: 0; color: var(--text-muted); }
.vd-site ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.vd-site li { display: flex; gap: .5rem; font-size: var(--fs-sm); }
.vd-site li::before { content: ""; flex: none; inline-size: .45rem; block-size: .45rem; margin-block-start: .45rem; border-radius: 50%; background: var(--amber); }

@media (max-width: 760px) {
  .zc { inline-size: 100%; max-inline-size: 23.5rem; }
  .vd-deliver { grid-template-columns: 1fr; justify-items: center; }
  .vd-sites { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zdk .trk { animation: none !important; }
}

/* fields fill once the card has been read */
.zvv[data-step="1"] .zf[data-r="1"] .zf__v { transition-delay: 1.7s; }
.zdk[data-step="1"] .zf[data-r="1"] .zf__v { transition-delay: .6s; }
.vd-equip { margin-block-start: var(--sp-6); }
.zv-scene.yd { justify-content: center; }

/* wide layout: steps in a row above a full-width stage */
.zv--wide { grid-template-columns: 1fr; }
.zv--wide .zv__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.zv--wide .zv__step { grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; padding: .55rem .55rem; }
.zv--wide .zv__step .zv__text { display: none !important; }
.zv--wide .zv__num { grid-row: auto; inline-size: 1.9rem; block-size: 1.9rem; }
.zv--wide .zv__name { font-size: .8rem; }
.zv--wide .zv__stage { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding-block-start: var(--sp-3); }
.zv__now { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; min-block-size: 3rem; }
.zv__now-n { font: 700 var(--fs-xs)/1 var(--font-mono); color: var(--ink); background: var(--amber); padding: .3rem .5rem; border-radius: .4rem; }
.zv__now b { font-size: var(--fs-xl); color: #fff; }
.zv__now span:last-child { flex-basis: 100%; color: var(--text-on-navy-muted); font-size: var(--fs-base); }
.zv--wide .zv__scenes { min-block-size: 29rem; }
.zdk .yd-svg { max-inline-size: 44rem; margin-inline: auto; }
@media (max-width: 1099px) {
  .zv--wide .zv__steps { display: flex; }
}
@media (max-width: 760px) {
  .zv--wide .zv__stage { grid-template-columns: 1fr; }
  .vd-deliver { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .zv--wide .zv__scenes { min-block-size: 25rem; }
  .zdk.zv--wide .zv__scenes { min-block-size: 17rem; }
}

/* ---------- hero: live 3D Z-Visitor + Z-Dock status cards (js/vd-3d.js) ---------- */
.vd3d-ui { position: absolute; inset-inline: .7rem; inset-block-start: .7rem; display: flex; justify-content: space-between; gap: .6rem; pointer-events: none; direction: inherit; }
.vd3d-card {
  display: grid; gap: .15rem; min-inline-size: 0; max-inline-size: 48%; padding: .5rem .7rem;
  border-radius: 10px; background: rgba(8, 13, 26, .82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14); border-inline-start: 3px solid #8a96ad;
  color: #fff; font-size: .74rem; line-height: 1.3; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
}
.vd3d-card b { font: 800 .64rem/1 var(--font-mono); letter-spacing: .12em; color: #9aa3b2; }
.vd3d-card .vd3d-l1 { font-weight: 700; }
.vd3d-card .vd3d-l2 { color: #b8c0cc; font-size: .68rem; }
.vd3d-card .vd3d-l2:empty { display: none; }
.vd3d-card[data-tone="info"] { border-inline-start-color: #5fa8ff; }
.vd3d-card[data-tone="ok"] { border-inline-start-color: #45d27a; }
.vd3d-card[data-tone="ok"] .vd3d-l1 { color: #6ee59a; }
.vd3d-card[data-tone="warn"] { border-inline-start-color: #f5b81c; }
.vd3d-card[data-tone="warn"] .vd3d-l1 { color: #ffd45a; }
.vd3d-card.is-pop { animation: vd3d-pop .35s ease; }
@keyframes vd3d-pop { from { opacity: .3; transform: translateY(-4px); } }

/* guard tablet form (PACI reader -> auto-fill -> selections -> Submit) */
.vd3d-tab {
  position: absolute; left: 50%; translate: -50% 0; inset-block-end: .6rem; inline-size: 12.5rem;   /* physical left: centring is direction-neutral */
  padding: .55rem; border-radius: 14px; background: #0b1220; border: 6px solid #1c2230;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .8); color: #e7ebf2; font-size: .64rem; line-height: 1.25;
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; pointer-events: none;
}
.vd3d-tab.is-on { opacity: 1; transform: none; }
.vd3d-tab__bar { font: 800 .58rem/1 var(--font-mono); letter-spacing: .1em; color: #f5b81c; margin-block-end: .4rem; }
.vd3d-tab__row { display: flex; justify-content: space-between; gap: .5rem; padding: .22rem .35rem; margin-block-end: .2rem; border-radius: 5px; background: rgba(255, 255, 255, .05); }
.vd3d-tab__row span { color: #8a96ad; white-space: nowrap; }
.vd3d-tab__row b { font-weight: 700; color: #fff; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd3d-tab__row.is-set { background: rgba(69, 210, 122, .12); animation: vd3d-pop .35s ease; }
.vd3d-tab__btn { margin-block-start: .35rem; padding: .35rem; border-radius: 6px; text-align: center; font-weight: 800; background: #2a3550; color: #8a96ad; transition: background .3s, color .3s; }
.vd3d-tab__btn.is-on { background: #f5b81c; color: #16181c; }