/* YACHTWAVE® Delivery Platform — IBEX 2026 BOOTH demo — the booth's OWN layer.
   =====================================================================================
   THE RULE (John, 2026-09-23): the booth demo uses the shared look (../../css/demo.css, app.css,
   kiosk.css) and puts everything BOOTH-ONLY here, loaded after them. A rule that only the show
   kiosk needs goes in this file, never in the shared kiosk skin — /mdp/ and /fleet/ must not see it,
   and one glance at this file has to show everything that makes the booth different.
   Same units as kiosk.css: --in is one inch of glass × the master dial; nothing in px.
   Kiosk mode is always on in this folder (index.html), so `html.kiosk` is always true here.
   ===================================================================================== */

/* no Product Tour button on the three flooded section openers (John, 2026-09-29: "take the
   product tour button OFF teh 3 transition screens") — BUILD. (B-0), DELIVER. (D-0), CONNECT. (C-0).
   The engine marks the stage `flood` on exactly those beats (engine.js: mode-card + flood-<sec>);
   #tour-btn is fixed at body level, so :has() reaches it. Every other beat keeps the button. */
html.kiosk body:has(#stage.flood) #tour-btn { display: none; }

/* the LENS CLONE loses its .chrome-plate ancestor (it sits in .lens-inner), so kiosk.css's generic
   `.browser-frame { zoom: calc(var(--ppi)/95) }` (~1.10) would re-apply to the clone and the magnifier
   would show the screen ~10% larger than the stage it mirrors. Keep the clone at the stage's zoom. */
html.kiosk #lens .browser-frame, html.kiosk #lens .iphone-frame { zoom: 1; }

/* ---------------- booth master scale (John, 2026-09-29) ----------------
   On the real show kiosks everything rendered ~too big — the screens' actual resolution is not
   the 1920 x 1080 the shared skin's fixed --ppi assumes ("the resolution must not be what i
   thought. things are huge"). Booth-only override of kiosk.css's ⭐ ONE DIAL: the shared 0.63
   x 0.8 = a global 20% reduction of every --in-derived size, here and in kiosk.css. /mdp/ and
   /fleet/ keep 0.63. ⚠️ A ?kscale value stored in the kiosk's browser (localStorage yw_kscale,
   set inline on <html>) still outranks this line — clear it once with ?kscale=0. */
html.kiosk { --k-scale: 0.504; }

/* ---------------- the ATTRACT screen (js/ibex.js) ----------------
   The "advertisement" the kiosk shows before anyone touches it, and returns to after
   `attract.idleMinutes` (5) with no touch. Sits above everything, including the page footnote (250). */
#attract { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  text-align: center; }
#attract.hidden { display: none; }
#attract .at-inner { max-width: min(calc(22 * var(--in)), calc(100vw - 1.2 * var(--in))); padding: 0 calc(0.6 * var(--in)); }   /* wide text block (John, 2026-09-23): the headline sits on ONE line at 1920px; was 14in */
#attract .at-logo img { height: calc(1.1 * var(--in)); width: auto; max-width: 100%; display: inline-block; margin-bottom: calc(0.7 * var(--in)); }
#attract .at-tagline { font-size: calc(0.5 * var(--in) * var(--k-text-scale)); font-weight: 900; letter-spacing: .06em; margin-bottom: calc(0.8 * var(--in)); }   /* now the row before the button (John, 2026-09-23) */
/* the MAJOR heading is the booth's one stat, set as the website's /ibex sets it (html/ibex.php .ibex-stat):
   navy, weight 800, tight tracking, the "1" in the wall's orange #FA884C — the same orange as the booth wall */
#attract h1 { font-size: calc(1.0 * var(--in) * var(--k-text-scale)); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; color: var(--navy, #0B2239); margin: 0 0 calc(0.4 * var(--in)); }
#attract h1 .hi { color: #FA884C; }
/* the second line, under the stat */
#attract .at-subhead { font-size: calc(0.62 * var(--in) * var(--k-text-scale)); font-weight: 700; line-height: 1.2; color: var(--navy, #0B2239); margin-bottom: calc(0.35 * var(--in)); }
#attract p { font-size: calc(0.4 * var(--in) * var(--k-text-scale)); line-height: 1.45; color: var(--gray, #5A6A80); margin: 0 auto calc(1.1 * var(--in)); max-width: calc(18 * var(--in)); }   /* was 11in; sits above the tagline now — gap widened (John, 2026-09-23) */
/* the one touch target: section-opener size (1.8 in at scale 1), and it breathes so a passer-by sees it move */
#attract .at-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: inherit;
  min-height: calc(1.8 * var(--in) * var(--k-btn-scale)); padding: 0 calc(1.2 * var(--in));
  font-size: calc(0.44 * var(--in) * var(--k-btn-scale)); font-weight: 800; border-radius: calc(0.2 * var(--in));
  background: var(--blue, #0478CC); color: #fff; box-shadow: 0 calc(0.2 * var(--in)) calc(0.5 * var(--in)) -10px rgba(4, 120, 204, .55);
  animation: at-breathe 2.4s ease-in-out infinite; }
@keyframes at-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #attract .at-btn { animation: none; } }
#attract .at-note { margin-top: calc(0.7 * var(--in)); font-size: calc(0.3 * var(--in) * var(--k-text-scale)); color: var(--gray, #5A6A80); letter-spacing: .04em; }

/* ---------------- Product Tour stages 25% smaller (John, 2026-09-23: "steps too big") ----------------
   The shared kiosk skin runs the card full-height and lets the five rows share it evenly; here the
   card sizes to its content (still anchored just above the Product Tour button) and every part of
   a row — badge, name, meta, gaps, padding — is x 0.75 of the kiosk value. Title, intro and the
   progress bar are untouched. */
html.kiosk #chapter-menu:not(.hidden) { display: block; top: auto; }
html.kiosk #cm-list { display: flex; flex-direction: column; gap: calc(0.175 * var(--in)); }   /* +10% of a row's 0.94in between rows (John, 2026-09-23); was 0.08in */
html.kiosk .cm-item { flex: none; min-height: calc(0.94 * var(--in)); gap: calc(0.2 * var(--in)); padding: calc(0.1 * var(--in)) calc(0.15 * var(--in)); border-radius: calc(0.12 * var(--in)); }
html.kiosk .cm-item b { flex: 0 0 calc(0.54 * var(--in)); width: calc(0.54 * var(--in)); height: calc(0.54 * var(--in)); font-size: calc(0.27 * var(--in) * var(--k-text-scale)); }
html.kiosk .cm-name { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); }
html.kiosk .cm-meta { font-size: calc(0.225 * var(--in) * var(--k-text-scale)); }
/* about one stage row's worth of air under the last stage (John, 2026-09-23) — the kiosk's 0.22in bottom pad + 0.94in */
html.kiosk #chapter-menu { padding-bottom: calc(1.16 * var(--in)); }

/* a step heading may carry a \n for a set line break (B-2, John 2026-09-23); the engine sets it as text */
#tt-title { white-space: pre-line; }

/* a plate's page title (`title:` in screens.js) — John, 2026-09-23: large bold, CENTRED IN THE VIEW directly under the
   blue bar, with equal padding above and below. The h2 is pinned (fixed) across the full width; the empty .plate-title
   keeps the same height in the flow so the picture starts below it. */
html.kiosk { --pt-size: calc(0.713 * var(--in) * var(--k-text-scale)); --pt-pad: calc(0.482 * var(--in)); --pt-pad-top: calc(1.018 * var(--in)); }   /* space above = space below (John, 2026-09-23): measured on the 1920x1080 render, bar-to-letters = letters-to-window = ~77px; the two pads sum to the same spacer so the picture does not move */
html.kiosk .plate-title { height: calc(var(--pt-size) * 1.15 + var(--pt-pad-top) + var(--pt-pad)); flex: none; }
/* the in-stage h2 is only the SOURCE: #stage is its own stacking context, so it can never rise above #dim (129).
   ibex.js mirrors its text into one body-level #page-title, which is what shows (John, 2026-09-23: the orange read dim). */
html.kiosk #stage .plate-title-fixed, html.kiosk #lens .plate-title-fixed { display: none; }
html.kiosk #page-title.hidden { display: none; }
html.kiosk .plate-title-fixed, html.kiosk #page-title { position: fixed; left: 0; right: 0; top: calc(1.3 * var(--in) + var(--pt-pad-top)); z-index: 132;   /* above #dim (129), below the lens and dialogue */
  margin: 0; text-align: center; font-size: var(--pt-size); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--navy, #0B2239); pointer-events: none; }
html.kiosk .plate-title-fixed .hi, html.kiosk #page-title .hi { color: #FA884C; }   /* the booth orange, as the attract stat's 1 */
/* a white card behind the page title, a little padding, centred (John, 2026-09-23). Symmetric vertical padding, so the
   space above the card still equals the space below it. */
html.kiosk #page-title { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 1.2 * var(--in));
  top: calc(1.3 * var(--in) + var(--pt-pad-top) - var(--pt-card-pad-y)); padding: var(--pt-card-pad-y) calc(0.45 * var(--in));
  background: #fff; border-radius: calc(0.2 * var(--in)); box-shadow: 0 calc(0.08 * var(--in)) calc(0.3 * var(--in)) -6px rgba(11, 34, 57, .25); }
html.kiosk { --pt-card-pad-y: calc(0.18 * var(--in)); }

/* Android WebView (Fully Kiosk) inflates text it deems too small — "text autosizing" / font
   boosting — which smushes the px-precise HTML plate rebuilds (John's booth photo, 2026-09-29:
   small labels overlapping and clipping while big text sits right). This kills the boosting; the
   WebView's separate MINIMUM-font-size clamp (default 8px on Android, absent on desktop — why the
   rebuilds looked right on a desktop) can only be fixed in the Fully app's settings, not CSS. */
html, body { -webkit-text-size-adjust: none; text-size-adjust: none; }

/* ---------------- HTML plates (screens.js `html:`) — the Production Build Order rebuilt in HTML (John, 2026-09-23) ----------------
   --u is one design px of the original 1000x1007 file, sized exactly as kiosk.css sizes a plate <img>, so the spots line up.
   Colours and positions measured on mdp_build_order.webp. */
/* --u-box sizes the OUTER box; --u is the CONTENT design unit, a fixed 2px, so the rebuild's smallest
   label lays out at 12.6px — above Android WebView's 8px minimum-font clamp (measured on the booth
   tablet: a 5px font renders 8px) — and .plate-scale scales the whole layout back down to the box. */
html.kiosk .plate-html { --u: 2px; --u-box: min(calc((100vh - 2.0 * var(--in)) * var(--plate-scale, 1) / var(--ph)), calc((100vw - 0.85 * var(--tooltip-w) - 1.4 * var(--in)) * var(--plate-scale, 1) / var(--pw)), var(--u-cap, 1px));   /* natural-size cap, as an <img> plate's width/height attrs cap it. Back to the full design size (1px default; John 2026-09-29 evening — the day's 0.8/0.9 cuts were chasing the WebView font-clamp inflation); a plate may override via `cap:` in screens.js (inline --u-cap). Keep in step with PLATE_NATURAL in js/screens.js */
  width: calc(var(--pw) * var(--u-box)); height: calc(var(--ph) * var(--u-box)); line-height: 1.2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1A202C; -webkit-font-smoothing: antialiased; }
/* the CLAMP DODGE (John's smushed-kiosk photo, 2026-09-29): inside .plate-scale one design px is a
   FIXED 2px — the rebuild's smallest label (6.3 design px) lays out at 12.6px, above Android
   WebView's 8px minimum-font-size clamp, which was inflating sub-8px text in place and bursting the
   px-precise boxes (desktop Chrome has no such clamp, so it looked right there). js/ibex.js measures
   the plate and sets --k-plate = plate width / (--pw * 2), scaling the wrapper down to the box —
   transformed glyphs are past the clamp. Everything inside still says calc(N * var(--u)); only which
   --u it sees changed. Spots and the lens read the OUTER box and are untouched. */
html.kiosk .plate-html .plate-scale { position: absolute; left: 0; top: 0;
  width: calc(var(--pw) * 2px); height: calc(var(--ph) * 2px);
  transform-origin: 0 0; transform: scale(var(--k-plate, 0.5)); }
  /* --k-plate = box width / (--pw * 2), set by js/ibex.js */
.plate-html .bo-page { position: absolute; left: calc(161 * var(--u)); top: 0; width: calc(665 * var(--u)); height: calc(955 * var(--u));
  background: #fff; overflow: hidden; box-shadow: 0 calc(28 * var(--u)) calc(36 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, .45); }
.plate-html .bo-top { height: calc(51 * var(--u)); background: #2580C9; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(13 * var(--u)) 0 calc(12 * var(--u)); }
.plate-html .bo-brand { font-size: calc(12.6 * var(--u)); font-weight: 700; letter-spacing: calc(1.35 * var(--u)); }
.plate-html .bo-doc { text-align: right; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.plate-html .bo-doc b { font-size: calc(12.4 * var(--u)); font-weight: 700; }
.plate-html .bo-doc span { font-size: calc(7.8 * var(--u)); opacity: .92; }
.plate-html .bo-info { position: relative; margin: calc(11 * var(--u)) calc(9 * var(--u)) 0; height: calc(60 * var(--u)); background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(11, 34, 57, .10); border-radius: calc(3 * var(--u)); }
.plate-html .bo-f { position: absolute; top: calc(17 * var(--u)); display: flex; flex-direction: column; }
.plate-html .bo-f span, .plate-html .bo-lang span, .plate-html .bo-status span, .plate-html .bo-lbl { font-size: calc(6.3 * var(--u)); text-transform: uppercase; letter-spacing: calc(0.5 * var(--u)); color: #8A93A3; }
.plate-html .bo-f b { font-size: calc(9.4 * var(--u)); font-weight: 400; color: #6E7583; margin-top: calc(2 * var(--u)); }
.plate-html .bo-f:not(.big) { top: calc(28 * var(--u)); }
.plate-html .bo-f.big b { font-size: calc(17.5 * var(--u)); font-weight: 700; color: #2B6399; margin-top: calc(1 * var(--u)); }
.plate-html .bo-lang { position: absolute; right: calc(15 * var(--u)); top: calc(11 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(3 * var(--u)); }
.plate-html .bo-sel { width: calc(113 * var(--u)); height: calc(22 * var(--u)); box-sizing: border-box; border: calc(1 * var(--u)) solid #E6EAF0; border-radius: calc(3 * var(--u));
  display: flex; align-items: center; padding: 0 calc(7 * var(--u)); font-size: calc(8.8 * var(--u)); color: #677890; position: relative; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.05); }
.plate-html .bo-sel i { position: absolute; right: calc(8 * var(--u)); top: calc(9 * var(--u)); border: calc(3.2 * var(--u)) solid transparent; border-top-color: #8A93A3; }
.plate-html .bo-status { display: flex; gap: calc(3 * var(--u)); margin: calc(7 * var(--u)) calc(9 * var(--u)) 0; height: calc(42 * var(--u)); }
.plate-html .bo-status > div { position: relative; background: #F8AA23; border-radius: calc(3 * var(--u)); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(13 * var(--u)); gap: calc(3 * var(--u)); }
.plate-html .bo-status > div:first-child { width: calc(265 * var(--u)); }
.plate-html .bo-status > div:last-child { flex: 1; }
.plate-html .bo-status span { color: rgba(255, 255, 255, .8); letter-spacing: calc(0.8 * var(--u)); font-weight: 700; }
.plate-html .bo-status b { font-size: calc(10.4 * var(--u)); font-weight: 800; letter-spacing: calc(1.1 * var(--u)); }
.plate-html .bo-status em { position: absolute; right: calc(13 * var(--u)); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: calc(3 * var(--u)); font-style: normal; }
.plate-html .bo-sec { margin: calc(17 * var(--u)) calc(9 * var(--u)) 0; height: calc(22 * var(--u)); background: #2E4156; border-radius: calc(2 * var(--u)); color: #fff;
  display: flex; align-items: center; padding: 0 calc(13 * var(--u)); font-size: calc(7.4 * var(--u)); font-weight: 700; letter-spacing: calc(1.6 * var(--u)); }
.plate-html .bo-sec + .bo-item { margin-top: calc(8 * var(--u)); }
.plate-html .bo-item { margin: calc(7 * var(--u)) calc(9 * var(--u)) 0; box-shadow: 0 calc(1 * var(--u)) calc(5 * var(--u)) rgba(11, 34, 57, .07); }
.plate-html .bo-item + .bo-sec { margin-top: calc(17 * var(--u)); }
.plate-html .bo-ih { height: calc(40 * var(--u)); background: #F6F8FA; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(13 * var(--u)); box-sizing: border-box; }
.plate-html .bo-t { font-size: calc(9.9 * var(--u)); font-weight: 700; color: #1A202C; }
.plate-html .bo-d { font-size: calc(6.5 * var(--u)); color: #7A8190; margin-top: calc(2.5 * var(--u)); }
.plate-html .bo-badge { font-size: calc(6.3 * var(--u)); font-weight: 700; letter-spacing: calc(1 * var(--u)); padding: calc(2.5 * var(--u)) calc(6.5 * var(--u)); border-radius: calc(2 * var(--u)); }
.plate-html .bo-badge.ok { background: #E3F6EE; color: #2F9A72; }
.plate-html .bo-badge.pend { background: #E9EDF1; color: #7A8190; }
.plate-html .bo-badge.rev { background: #FFF3D6; color: #D5A24A; }
.plate-html .bo-res, .plate-html .bo-int, .plate-html .bo-note { box-sizing: border-box; padding: calc(11 * var(--u)) calc(13 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(4.5 * var(--u)); }
.plate-html .bo-res { height: calc(42 * var(--u)); background: #fff; }
.plate-html .bo-int, .plate-html .bo-note { height: calc(39 * var(--u)); }
.plate-html .bo-v { font-size: calc(8.9 * var(--u)); color: #30333F; }
.plate-html .bo-int { background: #FFF6F5; border-top: calc(1 * var(--u)) dashed #F09A93; }
.plate-html .bo-int .bo-lbl { color: #D0463A; font-weight: 700; }
.plate-html .bo-int .bo-v { font-style: italic; color: #6B7A99; }
.plate-html .bo-note { background: #FFFCEC; border-top: calc(1 * var(--u)) dashed #F1D48A; }
.plate-html .bo-note .bo-lbl { color: #E3A23B; font-weight: 700; }
.plate-html .bo-note .bo-v { color: #5F6670; }

/* ---------------- stage bar jumps to each section's start (John, 2026-09-24) — ibex.js STAGE BAR JUMPS ---------------- */
#stepper .stage { cursor: pointer; }
#stepper .stage:hover { color: #fff; }

/* ---------------- STAFF NAV (John, 2026-09-24) — ibex.js: faint back/next chevrons under the header, for the person
   BEHIND the kiosk. Deliberately quiet: no fill, no border, a thin low-contrast stroke; the tap area (1.6in since 2026-09-24, was 0.6in) is much larger
   than the glyph (0.3in) so it is easy to hit without being seen. Above the dim and lens, below the attract screen. ---------------- */
.staff-nav {
  /* touch area 1.6 x 1.6 in from the corner under the header (John, 2026-09-24: "make the touch area much larger so it is
     easy to do upside down"); the chevron keeps its old spot — centre 0.38 in from the edge, 1.68 in from the top */
  position: fixed; z-index: 145; top: calc(1.3 * var(--in)); box-sizing: border-box;   /* where a tall tooltip rises into the zone, ibex.js clips the tooltip out of it (clip-path also clips touches) */
  width: calc(1.6 * var(--in)); height: calc(1.6 * var(--in)); padding: calc(0.23 * var(--in)) 0 0; margin: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-start;
  opacity: .3; transition: opacity .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.staff-nav.hidden { display: none; }
#staff-prev { left: 0; justify-content: flex-start; padding-left: calc(0.23 * var(--in)); }
#staff-next { right: 0; justify-content: flex-end; padding-right: calc(0.23 * var(--in)); }
.staff-nav svg { width: calc(0.3 * var(--in)); height: calc(0.3 * var(--in)); fill: none; stroke: #5A6A80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.staff-nav:hover, .staff-nav:active { opacity: .7; }
.staff-nav:focus { outline: none; }
.staff-nav.on-flood svg { stroke: #fff; }   /* the blue section openers: same faint chevron, white instead of grey */

/* ---------------- OPENER COUNTER (John, 2026-09-24) — ibex.js: on the flooded openers the counter leaves the (transparent)
   card and sits left of the Product Tour button, in the kiosk counter's type, white on the flood ---------------- */
html.kiosk #tooltip.card.flood .tt-count { display: none !important; }
#opener-count {
  position: fixed; z-index: 145; white-space: nowrap; pointer-events: none; color: #fff;
  font-size: calc(0.42 * var(--in) * var(--k-text-scale)); font-weight: 700; line-height: 1.2;
}
#opener-count.hidden { display: none; }

/* ---------------- D-0b's bin and D-4's owner are PHOTOS, not devices (John, 2026-09-24): rounded, soft shadow ---------------- */
html.kiosk .plate img[src$="deliver_bin_v1.webp"], html.kiosk .plate img[src$="deliver_owner_generator_v1.webp"] { border-radius: calc(0.18 * var(--in)); box-shadow: 0 calc(0.25 * var(--in)) calc(0.6 * var(--in)) calc(-0.15 * var(--in)) rgba(11, 34, 57, .35); }
/* BIN → APP crossfade (ibex.js): the new plate fades in while a fixed copy of the bin fades out over it */
@keyframes plateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plateFadeOut { from { opacity: 1; } to { opacity: 0; } }
html.kiosk .plate.plate-fade-in { animation: plateFadeIn .7s ease both; }
.plate-ghost { position: fixed; z-index: 128; pointer-events: none; object-fit: contain; animation: plateFadeOut .7s ease both; }   /* under #dim (129) and the lens */

/* ---------------- D-1 / D-2 tablet glass rebuilt in HTML (John, 2026-09-24) — screens.js documentsHTML(). Every size is plate px
   x --u, so it is sharp at any size and under any lens. The photographed bezel (deliver_documents_bezel_v1.webp, screen blanked) is the backdrop. ---------------- */
.plate-html .dc { position: absolute; inset: 0; font-family: 'Inter', sans-serif; }
.plate-html .dc > * { position: absolute; }
.plate-html .dc-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .dc-glass { background: #FAFBFD; }
.plate-html .dc-side { background: #212A44; width: calc(300 * var(--u)) !important; }   /* runs under the panel so its rounded corner shows navy */
.plate-html .dc-rule { background: #39415A; }
.plate-html .dc-on { background: #373F57; }
.plate-html .dc-sico { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-snav, .plate-html .dc-mi, .plate-html .dc-ver, .plate-html .dc-title, .plate-html .dc-th, .plate-html .dc-t { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .dc-snav { color: #fff; font-size: calc(14.4 * var(--u)); font-weight: 700; }
.plate-html .dc-mi { color: #fff; font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: calc(1.75 * var(--u)); }
.plate-html .dc-out { font-size: calc(13.2 * var(--u)); font-weight: 700; letter-spacing: calc(2.2 * var(--u)); color: #E8EAF0; }
.plate-html .dc-ver { color: #8C93A6; font-size: calc(11.5 * var(--u)); }
.plate-html .dc-es, .plate-html .dc-av { border-radius: 50%; background: #4CCC8D; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-es { font-size: calc(10.5 * var(--u)); }
.plate-html .dc-av { font-size: calc(19 * var(--u)); }
.plate-html .dc-badge { border-radius: calc(9 * var(--u)); background: #454D64; color: #D5D8DF; font-size: calc(10.5 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-bell { border-radius: 50%; background: #fff; color: #212A44; font-size: calc(9 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-panel { background: #FAFBFD; border-radius: calc(30 * var(--u)) 0 0 calc(30 * var(--u)); }
.plate-html .dc-title { color: #1E2638; font-size: calc(23.8 * var(--u)); font-weight: 800; letter-spacing: calc(-0.2 * var(--u)); }
.plate-html .dc-box, .plate-html .dc-seg { background: #fff; border: calc(1 * var(--u)) solid #E3E7EE; border-radius: calc(6 * var(--u)); box-sizing: border-box; }
.plate-html .dc-box > *, .plate-html .dc-seg > * { position: absolute; }
.plate-html .dc-box span { transform: translateY(-50%); font-size: calc(14 * var(--u)); color: #7B8494; white-space: nowrap; line-height: 1; }
.plate-html .dc-box span.dk { color: #2B3345; }
.plate-html .dc-seg i { background: #E3E7EE; }
.plate-html .dc-seg b { left: 0; top: 0; width: calc(35 * var(--u)); height: 100%; background: #F1F3F7; border-radius: calc(5 * var(--u)) 0 0 calc(5 * var(--u)); }
.plate-html .dc-gl { fill: none; stroke: #8792A4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-gl.dk { stroke: #3F475C; color: #3F475C; stroke-width: 0; }
.plate-html .dc-seg .dc-gl.dk:last-child { stroke-width: 2.2; }
.plate-html .dc-help { border-radius: 50%; background: #8E99AB; color: #fff; font-size: calc(17 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-thead { background: #E4E8F0; border-radius: calc(6 * var(--u)); }
.plate-html .dc-th { color: #5B6478; font-size: calc(11.3 * var(--u)); font-weight: 700; letter-spacing: calc(0.6 * var(--u)); }
.plate-html .dc-row { background: #fff; border-radius: calc(4 * var(--u)); box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(30, 38, 56, .09); }
.plate-html .dc-tile { background: #29314A; border-radius: calc(4 * var(--u)); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-tile svg { width: 72%; height: 72%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-t { color: #7A8394; font-size: calc(13.9 * var(--u)); }
.plate-html .dc-t.b { color: #1E2638; font-weight: 500; font-size: calc(13.6 * var(--u)); }
.plate-html .dc-date { font-size: calc(12.6 * var(--u)); }
.plate-html .dc-pill { border-radius: calc(3 * var(--u)); color: #fff; font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: calc(0.5 * var(--u)); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-pill.ok { background: #4CCC8D; }
.plate-html .dc-pill.bad { background: #EE5A5F; }
.plate-html .dc-kebab { border: calc(1.1 * var(--u)) solid #C9CED8; border-radius: calc(3 * var(--u)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--u)); padding: 0 calc(3 * var(--u)); }
.plate-html .dc-kebab i { display: block; height: calc(1.8 * var(--u)); background: #2E3549; border-radius: calc(1 * var(--u)); }
.plate-html .dc-fab { border-radius: 50%; background: #29314A; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(30, 38, 56, .3); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-fab svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- LENS PLACE sheet (John, 2026-09-24, D-2) — ibex.js: the Volvo Penta operator's manual ABOVE the lens,
   framed exactly like the lens (#lens in demo.css: white fill + 3px white rim + --lens-pad, same shadow; ibex.js copies the
   lens's corner radius), running down BEHIND it — the lens (z 131) overlaps its lower part. Fades up once the lens has landed. ---------------- */
#lens-sheet { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; box-sizing: border-box;
  background: #fff; border: 3px solid #fff; padding: var(--lens-pad, 10px);
  box-shadow: 0 30px 60px -16px rgba(11, 34, 57, .6), 0 0 0 1px rgba(11, 34, 57, .16), 0 6px 18px -6px rgba(11, 34, 57, .35); }
#lens-sheet.hidden { display: none; }
#lens-sheet.in { animation: sheetIn .45s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(calc(0.25 * var(--in))); } to { opacity: 1; transform: none; } }

/* ---------------- D-3's orientation clip, playing (John, 2026-09-24) — screens.js videoPlateHTML(); plate px x --u ---------------- */
.plate-html .vp { position: absolute; inset: 0; }
.plate-html .vp-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .vp-screen { position: absolute; overflow: hidden; border-radius: calc(20 * var(--u)); background: #0B2239; }
.plate-html .vp-screen video { position: absolute; left: 0; top: 0; width: 100%; height: calc(549 * var(--u)); object-fit: cover; display: block; }
.plate-html .vp-track { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(8 * var(--u)); background: #878E8E; }
.plate-html .vp-fill { position: absolute; inset: 0; background: #0478CC; transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s linear; }

/* ---------------- B-5b / C-1 laptop glass rebuilt in HTML (John, 2026-09-24) — screens.js buildsHTML(); plate px x --u.
   The laptop photo (connect_builds_bezel_v1.webp) is the backdrop. ---------------- */
.plate-html .bd { position: absolute; inset: 0; font-family: 'Inter', sans-serif; }
.plate-html .bd > *, .plate-html .bd-card > *, .plate-html .bd-stat > *, .plate-html .bd-box > *, .plate-html .bd-fab > *, .plate-html .bd-notch > * { position: absolute; }
.plate-html .bd-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .bd-glass { background: #F4F6F9; }
.plate-html .bd-side { background: #2579CD; }
.plate-html .bd-foot { background: #1F6DBB; }
.plate-html .bd-hr { background: rgba(255, 255, 255, .16); }
.plate-html .bd-brand, .plate-html .bd-lab, .plate-html .bd-item, .plate-html .bd-ver, .plate-html .bd-crumb, .plate-html .bd-org,
.plate-html .bd-slab, .plate-html .bd-sval, .plate-html .bd-ssub, .plate-html .bd-box span, .plate-html .bd-name, .plate-html .bd-hull,
.plate-html .bd-st, .plate-html .bd-sub, .plate-html .bd-cap { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .bd-brand { color: #fff; font-size: calc(8.6 * var(--u)); font-weight: 800; letter-spacing: calc(0.1 * var(--u)); }
.plate-html .bd-lab { color: rgba(255, 255, 255, .62); font-size: calc(5.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.55 * var(--u)); }
.plate-html .bd-item { color: #fff; font-size: calc(7.4 * var(--u)); font-weight: 600; }
.plate-html .bd-item.b { font-weight: 700; }
.plate-html .bd-on { background: rgba(255, 255, 255, .17); border-radius: calc(3 * var(--u)); }
.plate-html .bd-sico { fill: none; stroke: #fff; color: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.plate-html .bd-sico.f { stroke: none; }
.plate-html .bd-count { border-radius: 50%; background: #fff; color: #2579CD; font-size: calc(5.6 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .bd-av { border-radius: 50%; background: #fff; color: #2579CD; font-size: calc(5 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .bd-ver { color: rgba(255, 255, 255, .7); font-size: calc(5.6 * var(--u)); }
.plate-html .bd-top { background: #fff; border-bottom: calc(0.6 * var(--u)) solid #E7EBF1; box-sizing: border-box; }
.plate-html .bd-crumb { color: #5F6B7A; font-size: calc(7.3 * var(--u)); }
.plate-html .bd-crumb span { color: #A3ACB9; margin: 0 calc(1.5 * var(--u)); }
.plate-html .bd-crumb b { color: #1E2638; font-weight: 700; }
.plate-html .bd-org { color: #1E2638; font-size: calc(6.8 * var(--u)); font-weight: 700; }
.plate-html .bd-notch { background: #000; border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); }
.plate-html .bd-notch i { border-radius: 50%; background: #1B2230; }
.plate-html .bd-stat { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(3.5 * var(--u)); box-sizing: border-box; }
.plate-html .bd-slab { color: #56617A; font-size: calc(5.6 * var(--u)); font-weight: 700; letter-spacing: calc(0.3 * var(--u)); }
.plate-html .bd-sval { color: #1E2638; font-size: calc(10.5 * var(--u)); font-weight: 800; }
.plate-html .bd-sval.ok { color: #2E7D5B; }
.plate-html .bd-sval.warn { color: #C2410C; }
.plate-html .bd-ssub { color: #5F6B7A; font-size: calc(5.8 * var(--u)); }
.plate-html .bd-box { background: #fff; border: calc(0.6 * var(--u)) solid #DCE2EA; border-radius: calc(3 * var(--u)); box-sizing: border-box; overflow: hidden; }
.plate-html .bd-box span { font-size: calc(6.6 * var(--u)); color: #7B8494; }
.plate-html .bd-box span.dk { color: #1E2638; }
.plate-html .bd-box span.b { font-weight: 700; }
.plate-html .bd-act { background: #E6F0FB; }
.plate-html .bd-vr { background: #DCE2EA; }
.plate-html .bd-gl { fill: none; stroke: #7B8494; color: #7B8494; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .bd-gl.dk { stroke: #3B4456; color: #3B4456; }
.plate-html .bd-gl.bl { stroke: #2579CD; color: #2579CD; }
.plate-html .bd-gl.f { stroke: none; }
.plate-html .bd-card { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)); box-sizing: border-box; overflow: hidden; box-shadow: 0 calc(0.6 * var(--u)) calc(1.5 * var(--u)) rgba(30, 38, 56, .05); }
.plate-html .bd-pic { object-fit: cover; object-position: 50% 50%; }
.plate-html .bd-pill { background: #fff; border-radius: calc(2.5 * var(--u)); color: #1E2638; font-size: calc(5.6 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .15); }
.plate-html .bd-name { color: #1E2638; font-size: calc(8.3 * var(--u)); font-weight: 700; }
.plate-html .bd-hull { color: #1F78D1; font-size: calc(7 * var(--u)); font-weight: 700; letter-spacing: calc(0.35 * var(--u)); }
.plate-html .bd-dot { border-radius: 50%; background: #EF5A5A; }
.plate-html .bd-st { color: #1E2638; font-size: calc(6.8 * var(--u)); font-weight: 600; }
.plate-html .bd-mico { fill: none; stroke: none; color: #7B8494; }
.plate-html .bd-sub { color: #6B7688; font-size: calc(6.6 * var(--u)); }
.plate-html .bd-sub.dk { color: #1E2638; }
.plate-html .bd-cap { color: #56617A; font-size: calc(4.9 * var(--u)); font-weight: 700; letter-spacing: calc(0.25 * var(--u)); }
.plate-html .bd-rule { background: #E7EBF0; }
.plate-html .bd-fab { border-radius: 50%; background: #1F78D1; box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(30, 38, 56, .25); }
.plate-html .bd-fab.g { background: #C9D0DA; }
.plate-html .bd-fab svg { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .bd-fab.g svg { stroke: #2B3345; stroke-width: 2.8; }

/* ---------------- CONNECT 3–6: browser captures on the laptop (John, 2026-09-24) — screens.js laptopShotHTML() ---------------- */
/* NO LAPTOP (John, 2026-09-29, kiosk session: "you can delete the image of the laptop since it is
   not aligning"). The photographed laptop (connect_builds_bezel_v1.webp) is hidden everywhere it
   backdrops a screen — buildsHTML/dealerHTML (.bd-bezel) and the laptopShotHTML captures (.ls-bezel
   + its drawn .ls-notch) — leaving the app screen floating clean; every screen area carries its own
   #F4F6F9 background. GEOMETRY IS UNTOUCHED (the glass keeps its 162,17.5 875.5x619 slot in the
   1200x724 plate), so spots, lens zooms and the ls text overlays all stay aligned; the freed border
   is simply transparent. The tablet (.dc-bezel, documents) is NOT the laptop and stays. To bring
   the laptop back, delete this rule. */
html.kiosk .plate-html .bd-bezel, html.kiosk .plate-html .ls-bezel, html.kiosk .plate-html .ls-notch { display: none; }

/* <img> plates reclaim the dialogue's narrowing too (John, 2026-09-29 evening, same order):
   kiosk.css budgets their width against the ROOT --tooltip-w, but the booth dialogue is 0.85 of it
   (the #tooltip scope above) — mirror of the 0.85 inside .plate-html's --u. Keep the three 0.85s
   in step. */
html.kiosk .plate img { max-width: calc((100vw - 0.85 * var(--tooltip-w) - 1.4 * var(--in)) * var(--plate-scale, 1)); }
/* ⛔ THE PLATE-IMAGE CAPS MUST NOT REACH INSIDE AN HTML REBUILD (found 2026-09-30 by reproducing the
   booth in desktop Chrome at 1024x576). The caps above (and kiosk.css's max-height) size a plain
   <img> plate to the glass, but they also matched every <img> INSIDE .plate-scale, where content is
   laid out at 2px per design px: a 1751px capture was capped to the ~594px viewport budget and THEN
   scaled by --k-plate, painting at a third of its box while every box still measured right. That
   was the "small background screenshot" and the magnifier framing empty space, on every engine. */
html.kiosk .plate-html .plate-scale img { max-width: none; max-height: none; }
/* …and the STAGE's layout reserve must match the budget, or a width-limited plate overflows: demo.css
   pads mode-browser 'chrome-plate' stages by the FULL root --tooltip-w + 40px, and with the budgets at
   0.85 the D-4 owner photo grew past its wrap and off the LEFT edge (John, 2026-09-29: "the image
   (delivery) is off left side of page"). FOUR 0.85s now in step: the #tooltip scope, both plate width
   budgets, and this padding. */
html.kiosk #stage.mode-browser:has(.chrome-plate) { padding-right: calc(0.85 * var(--tooltip-w) + 40px); }

/* the CROPPED builds plate (John, 2026-09-29, "make the background screenshot larger"): the plate
   box is now the glass alone (screens.js `builds`, 876x619, cap 1.2), and this shifts the rebuild's
   unchanged 1200x724-space coordinates so the glass's old 162,17.5 corner sits at the plate's 0,0.
   Only buildsHTML carries .crop; dealerHTML shares .bd and keeps the full-plate geometry. */
html.kiosk .plate-html .bd.crop, html.kiosk .plate-html .ls.crop { position: absolute; left: calc(-162 * var(--u)); top: calc(-17.5 * var(--u)); }   /* .ls.crop added 2026-09-29: every laptopShot plate is cropped too */

.plate-html .ls { position: absolute; inset: 0; }
.plate-html .ls > *, .plate-html .ls-notch > * { position: absolute; }
.plate-html .ls-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .ls-glass { overflow: hidden; background: #F4F6F9; }
.plate-html .ls-glass img { display: block; width: 100%; height: 100%; }
.plate-html .ls-txt { transform: translateY(-50%); white-space: nowrap; line-height: 1; font-family: 'Inter', sans-serif; color: #1E2638; }
.plate-html .ls-notch { background: #000; border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); }
.plate-html .ls-notch i { border-radius: 50%; background: #1B2230; }

/* ---------------- C-5a DealerLINK™ PLACEHOLDER screen (John, 2026-09-24) — screens.js dealerHTML(); reuses the .bd-* Builds styles ---------------- */
.plate-html .dl-bullet { border-radius: 50%; background: rgba(255, 255, 255, .8); }
.plate-html .dl-h, .plate-html .dl-sub, .plate-html .dl-th, .plate-html .dl-td, .plate-html .dl-ph { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .dl-h { color: #1E2638; font-size: calc(11 * var(--u)); font-weight: 800; }
.plate-html .dl-sub { color: #5F6B7A; font-size: calc(6.4 * var(--u)); }
.plate-html .dl-table { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)); box-sizing: border-box; }
.plate-html .dl-thead { background: #F8FAFC; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0; box-sizing: border-box; }
.plate-html .dl-th { color: #56617A; font-size: calc(5.3 * var(--u)); font-weight: 700; letter-spacing: calc(0.3 * var(--u)); }
.plate-html .dl-td { color: #1E2638; font-size: calc(6.8 * var(--u)); display: flex; align-items: center; gap: calc(2.5 * var(--u)); }
.plate-html .dl-td.b { font-weight: 700; }
.plate-html .dl-td.dl-num { color: #3B4456; }   /* not ".n" — app.css owns that (a blue badge) */
.plate-html .dl-rule { background: #EEF1F5; }
.plate-html .dl-pill { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); padding: calc(1.6 * var(--u)) calc(3.5 * var(--u)); border-radius: calc(2.5 * var(--u)); font-size: calc(5.6 * var(--u)); font-weight: 700; border: calc(0.6 * var(--u)) solid; }
.plate-html .dl-pill i { width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: currentColor; }
.plate-html .dl-pill.bl { color: #1F6FC5; background: #E8F1FC; border-color: #BFD8F5; }
.plate-html .dl-pill.gr { color: #56617A; background: #F1F3F6; border-color: #D7DCE3; }
.plate-html .dl-pill.am { color: #B45309; background: #FEF3E2; border-color: #F7D6A8; }
.plate-html .dl-pill.ok { color: #1F7A52; background: #E4F6EE; border-color: #B7E4CF; }
.plate-html .dl-ph { color: #FA884C; border: calc(0.6 * var(--u)) solid #FA884C; border-radius: calc(2.5 * var(--u)); padding: calc(1.6 * var(--u)) calc(3.5 * var(--u)); font-size: calc(5 * var(--u)); font-weight: 700; letter-spacing: calc(0.5 * var(--u)); opacity: .8; }
/* laptopShotHTML overlay classes (C-5b / C-5c's sidebar user, 2026-09-24) */
.plate-html .ls-txt.side { color: #fff; font-weight: 700; }
.plate-html .ls-txt.av { color: #2476C8; font-weight: 800; transform: translate(-50%, -50%); }
/* LENS PLACE cutout (C-6's YachtLINK™ device, 2026-09-24): a transparent product shot — no frame, a soft drop shadow */
#lens-sheet.cut { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 calc(0.25 * var(--in)) calc(0.3 * var(--in)) rgba(11, 34, 57, .45)); }

/* ---------------- the header's stage bar 10% smaller (John, 2026-09-24) — kiosk.css's last pass x 0.9: names, dots, separators,
   spacing and the current pill. The header itself (1.3 in) is unchanged, so the staff chevron zones under it do not move. ---------------- */
html.kiosk #stepper { gap: calc(0.1422 * var(--in)); }
html.kiosk .stage { font-size: calc(0.30375 * var(--in) * var(--k-text-scale)); gap: calc(0.1314 * var(--in)); }
html.kiosk .stage i { width: calc(0.1926 * var(--in)); height: calc(0.1926 * var(--in)); }
html.kiosk .stage-sep { width: calc(0.26325 * var(--in)); height: 3px; }
html.kiosk body.has-sec #stepper .stage.current { padding: calc(0.10125 * var(--in)) calc(0.22275 * var(--in)) calc(0.10125 * var(--in)) calc(0.171 * var(--in)); }
/* C-6's YachtLINK™ device alone (John, 2026-09-24): a cut-out product shot, no frame, a soft drop shadow */
html.kiosk .plate img[src$="yachtlink_device_v2.webp"] { filter: drop-shadow(0 calc(0.3 * var(--in)) calc(0.4 * var(--in)) rgba(11, 34, 57, .4)); }
/* C-6's device is a cut-out: no dim, no ring on that step, so it stands on the plain stage rather than in a pale box (2026-09-24) */
body:has(#browser-screen img[src$="yachtlink_device_v2.webp"]) #dim,
body:has(#browser-screen img[src$="yachtlink_device_v2.webp"]) #spotlight { visibility: hidden; }
/* the closing screen is a full-screen overlay (z 200) over the header: its Back chevron sits in the same spot, above it (John, 2026-09-24) */
.staff-nav.on-closing { z-index: 210; }
/* the closing screen's main title on ONE line (John, 2026-09-24: "last page put main title on 1 line") */
html.kiosk .closing-inner { max-width: none; }
html.kiosk .closing-inner h1#close-h { white-space: nowrap; }
html.kiosk .closing-inner > p { margin-left: auto; margin-right: auto; }
/* a card that opts in (cardClass 'count-out', S-1 Zero Effort Setup — John, 2026-09-24): its counter moves beside Product Tour too */
html.kiosk #tooltip.card.count-out .tt-count { display: none !important; }
/* a card with no counter at all (cardClass 'no-count', S-1 — John, 2026-09-24: "step 1 of 1 not needed") */
html.kiosk #tooltip.card.no-count .tt-count { display: none !important; }
#opener-count.dk { color: #5A6A80; }

/* S-1 Zero-Effort Setup: every list item on one line (John, 2026-09-24: "make zero effort card wider so text fits on 1 line …
   you can also reduce the side padding"). Longest item measures ~15.4in unwrapped; card 17in with 0.35in sides (was 16.4in / 0.6in),
   and the numbered list loses kiosk.css's 12.5in cap. */
html.kiosk #tooltip.card.card-setup { width: min(calc(17 * var(--in)), calc(100vw - 0.4 * var(--in))); padding-left: calc(0.35 * var(--in)); padding-right: calc(0.35 * var(--in)); }
html.kiosk #tooltip.card.card-setup ol.cd-list { max-width: none; }
html.kiosk #tooltip.card.card-setup .cd-list li { white-space: nowrap; }
/* …and room to breathe (John, 2026-09-24: "too cramped, put some vertical space between steps and title") */
html.kiosk #tooltip.card.card-setup .tt-title { margin-bottom: calc(0.7 * var(--in)); }
html.kiosk #tooltip.card.card-setup ol.cd-list { gap: calc(0.26 * var(--in)); }
html.kiosk #tooltip.card.card-setup .cd-note { margin-top: calc(0.35 * var(--in)); }

/* ---------------- "Schedule an IBEX Demo" -> QR modal (John, 2026-09-26; js/ibex.js, window.DEMO.qr) ----------------
   The button is on every tour page, BOTTOM LEFT of the screen (John, 2026-09-30: "move the schedule ibex meeting to
   bottom left corner"; it sat top right in the header until then). It is still shell.js's header anchor (#nav-cta),
   overriding kiosk.css's `html.kiosk #nav-cta { display: none }` for this demo only (/mdp/ keeps it hidden), moved to
   <body> by js/ibex.js so it can layer above the lens. The mirror of the Product Tour
   button bottom right: same size, same corner inset, solid blue on the pale stage. z 150 = #tour-btn: above the dim
   and lens, under the closing screen (200) and the intro (300), which carry their own copy. */
html.kiosk #nav-cta { display: inline-flex; align-items: center; justify-content: center; margin: 0;
  position: fixed; left: calc(0.3 * var(--in)); bottom: calc(0.3 * var(--in)); z-index: 150;
  font-size: calc(0.3 * var(--in) * var(--k-btn-scale)); min-height: calc(1.1 * var(--in) * var(--k-btn-scale));
  padding: 0 calc(0.45 * var(--in)); border-radius: calc(0.16 * var(--in));
  background: var(--blue, #0478CC); color: #fff; box-shadow: 0 10px 30px -8px rgba(4, 120, 204, .5); }
/* js/ibex.js re-parents #nav-cta to <body> (why: there); off with the shell, as engine.js's show() takes #tour-btn off */
html.kiosk body:has(#shell.hidden) #nav-cta { display: none; }
/* on the three blue flooded openers (B-0, D-0, C-0) the Product Tour button is hidden (above) but this one stays,
   inverted so it reads on the blue: white, blue text — the header's own colours */
html.kiosk body:has(#stage.flood) #nav-cta { background: #fff; color: var(--blue, #0478CC); box-shadow: 0 10px 30px -8px rgba(11, 34, 57, .35); }
/* the header stepper was tightened ~12% on 2026-09-30 so "Get Started" cleared the button when it still lived top
   right at the kiosk's real width (1024 CSS px). The button has left the header; the tighter stepper is kept as is. */
html.kiosk #stepper { gap: calc(0.11 * var(--in)); }
html.kiosk .stage { font-size: calc(0.27 * var(--in) * var(--k-text-scale)); gap: calc(0.1 * var(--in)); }
html.kiosk .stage-sep { width: calc(0.18 * var(--in)); }
/* the intro's copy of it: the same corner, so the button is in one place from the first touch on; blue-outlined
   on white, because the intro has no blue behind it (was top right, where the header's sat) */
#attract .at-cta { position: absolute; left: calc(0.3 * var(--in)); bottom: calc(0.3 * var(--in)); display: inline-flex; align-items: center;
  font-size: calc(0.3 * var(--in) * var(--k-btn-scale)); min-height: calc(1.1 * var(--in) * var(--k-btn-scale)); padding: 0 calc(0.45 * var(--in)); border-radius: calc(0.16 * var(--in));
  border: 0; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--blue, #0478CC); box-shadow: inset 0 0 0 2px var(--blue, #0478CC); }

/* the modal: above everything, the intro included (attract z 300). Sized in screen px for the 21in / 1920px booth
   screen (~105 px per physical inch): code 260px = about 2.5in (was 320px; smaller, John 2026-09-26). */
#qr-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 34, 57, .55); animation: floodFade .2s both; }
#qr-modal.hidden { display: none; }
#qr-modal .qr-box { position: relative; background: #fff; border-radius: 20px; padding: 44px 56px 40px; text-align: center;
  max-width: calc(100vw - 80px); box-shadow: 0 24px 60px -12px rgba(11, 34, 57, .45);
  zoom: 0.8; }   /* whole modal 20% smaller (John, 2026-09-29, kiosk sizing session). zoom is safe here — the box is flex-centred by #qr-modal, nothing measures it in JS; the QR itself renders 260 -> 208px, still an easy phone scan */
#qr-modal h2 { margin: 0 0 10px; font-size: 40px; font-weight: 800; letter-spacing: -0.015em; color: var(--navy, #0B2239); }
#qr-modal .qr-lede { margin: 0 0 30px; font-size: 22px; line-height: 1.4; color: var(--gray, #5A6A80); }
#qr-modal .qr-body { display: flex; align-items: center; justify-content: center; gap: 48px; text-align: left; }
#qr-modal .qr-body img { width: 195px; height: 195px; display: block; flex: none; }   /* just the code 25% smaller, 260 -> 195 (John, 2026-09-29); on the glass that's 195 x the box's 0.8 zoom = 156px rendered */
/* the steps: numbered badges on a rail, so the three read as one sequence (John, 2026-09-26: "design the steps a
   little better"). Each is a badge + a line of text; the rail runs badge to badge behind them. */
#qr-modal .qr-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 34px; }
#qr-modal .qr-steps::before { content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; border-radius: 2px;
  background: linear-gradient(var(--blue, #0478CC), rgba(4, 120, 204, .25)); }
#qr-modal .qr-steps li { position: relative; display: flex; align-items: center; gap: 22px; }
#qr-modal .qr-n { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--blue, #0478CC); color: #fff; font-size: 26px; font-weight: 800;
  box-shadow: 0 0 0 6px #fff, 0 6px 16px -4px rgba(4, 120, 204, .5); }   /* the white ring cuts the rail cleanly */
#qr-modal .qr-t { font-size: 26px; line-height: 1.3; font-weight: 600; color: var(--navy, #0B2239); }
#qr-modal .qr-t b { font-weight: 800; color: var(--blue, #0478CC); }
#qr-modal .qr-done { margin-top: 34px; min-width: 240px; min-height: 64px; font-size: 22px; font-weight: 800; border: 0; cursor: pointer;
  font-family: inherit; border-radius: 12px; }
#qr-modal .qr-x { position: absolute; top: 12px; right: 16px; width: 56px; height: 56px; border: 0; background: none; cursor: pointer;
  font-size: 40px; line-height: 1; color: var(--gray, #5A6A80); }

/* the survey's source line sits directly under the last % card, centred, 10% smaller (John, 2026-09-26) — the
   in-card .cd-source comes back (kiosk.css hid it for the bottom-left #page-note, no longer used by this demo) */
html.kiosk .stats-split .cd-source { display: block; text-align: center; margin-top: calc(0.22 * var(--in)); font-size: calc(var(--k-label) * 0.9); }

/* ---------------- every dialogue box / card 10% smaller (John, 2026-09-29, same kiosk session:
   "in rest of demo screenshot size is good but the 'cards' can be reduced by 10%") ----------------
   Scoped to #tooltip, which is every white box in the tour: the dialogue beside a screenshot, the
   transition cards and the flooded section openers. The screenshot plates are untouched on purpose —
   .plate img budgets its width from the ROOT's --tooltip-w (an inherited computed value this scope
   cannot reach), so the screens keep their size even as the dialogue narrows. Same mechanism and
   same ⚠️s as the Why block below: not zoom (engine.js centres by offsetWidth), and the --k-* /
   --tooltip-w formulas are VERBATIM copies from kiosk.css's html.kiosk block — change them there,
   change them here. The Why card (#tooltip.card.stats-split, below) outranks this and stays 0.8. */
html.kiosk #tooltip {
  --in: calc(var(--ppi) * var(--k-scale) * 0.85 * 1px);   /* 0.9 -> 0.85 (John, 2026-09-29 evening: "a little more graphic and a little less card/text") */
  --k-btn:    calc(1.50 * var(--in) * var(--k-btn-scale));
  --k-btn-lg: calc(1.60 * var(--in) * var(--k-btn-scale));
  --k-btn-xl: calc(1.80 * var(--in) * var(--k-btn-scale));
  --k-gap:    calc(0.40 * var(--in));
  --k-label:  calc(0.30 * var(--in) * var(--k-text-scale));
  --k-body:   calc(0.36 * var(--in) * var(--k-text-scale));
  --k-title:  calc(0.50 * var(--in) * var(--k-text-scale));
  --k-card-body:  calc(0.42 * var(--in) * var(--k-text-scale));
  --k-card-title: calc(0.66 * var(--in) * var(--k-text-scale));
  --tooltip-w: calc(7.92 * var(--in));   /* copies kiosk.css's LATER 7.92 override (the 2026-09-20 "navigation card -10%"), not the 8.8 original — with the local --in the dialogue is 10% narrower than today */
}

/* ---------------- a step dialogue grows to keep its title on ONE line (John, 2026-09-29, same
   kiosk session: "if we have room and the 1st line of the card wraps lets make the card wider.
   example build step 4" — B-3, 'End the "Where's My Boat?" Call', which wrapped once the dialogue
   narrowed) ----------------
   width: fit-content between the standard --tooltip-w and a cap, with the TITLE as the only child
   allowed to drive it: .tt-copy gets the width:0 / min-width:100% trick so long body copy still
   wraps at whatever width the title set. A title longer than the cap wraps as before (#tt-title is
   pre-line, and B-2's set \n breaks still count as separate lines). "If we have room" is the
   engine's job — it measures offsetWidth and collision-avoids, so a wider box only lands where it
   fits. Step dialogues only; the centred full-page cards keep their set widths. */
html.kiosk #tooltip:not(.card) { width: fit-content; min-width: var(--tooltip-w); max-width: min(calc(9 * var(--in)), calc(100vw - 1 * var(--in))); }   /* cap 12 -> 9 (2026-09-30): at the kiosk's real 1024px width a 12in dialogue was over half the screen and sat on the magnifier or the page title on eight steps; 9 still holds B-3's title on one line */
/* the body AND the footer row (Back + Next + counter, whose intrinsic width exceeds --tooltip-w and
   would widen EVERY dialogue) lay out at the box's width without driving it */
html.kiosk #tooltip:not(.card) .tt-copy, html.kiosk #tooltip:not(.card) .tt-foot { width: 0; min-width: 100%; }
/* a title too long for ONE line even at the cap gains nothing from a wider box (it widened AND still
   wrapped, and the wide box sat on the magnifier): js/ibex.js marks the dialogue .tt-std and it keeps
   the standard width, its title wrapping as before (2026-09-30) */
html.kiosk #tooltip.tt-std:not(.card) { width: var(--tooltip-w); max-width: var(--tooltip-w); }

/* ---------------- the Why page, ANOTHER 20% smaller (John, 2026-09-29, on the real kiosks:
   the booth-wide 0.504 pass left the intro perfect but W-2 — the booth's whole Why stage — still
   too tall, its Next button pressed against the bottom of the glass) ----------------
   Everything on the card sizes off --in, so a card-scoped --in at 0.8x shrinks it uniformly.
   ⚠️ NOT zoom: the engine centres #tooltip by offsetWidth/offsetHeight, and zoom scales the
   element's own left/top out from under that math. The five --k-* tokens the card's subtree reads
   are re-declared VERBATIM from kiosk.css's html.kiosk block so they recompute with the local
   --in (inherited tokens keep the values they computed at root) — if kiosk.css's formulas change,
   change these copies too. */
html.kiosk #tooltip.card.stats-split {
  --in: calc(var(--ppi) * var(--k-scale) * 0.7 * 1px);   /* 0.8 -> 0.7 (2026-09-30): measured at the kiosk's real 1024x576 viewport the card was 519px tall and ran 20px off the bottom, cutting the Next button */
  --k-btn-lg: calc(1.60 * var(--in) * var(--k-btn-scale));
  --k-gap:    calc(0.40 * var(--in));
  --k-label:  calc(0.30 * var(--in) * var(--k-text-scale));
  --k-card-body:  calc(0.42 * var(--in) * var(--k-text-scale));
  --k-card-title: calc(0.66 * var(--in) * var(--k-text-scale));
}

/* ---------------- APP DRAWER (John, 2026-10-05) — ibex.js: a tab on the left edge slides out a drawer that
   switches the kiosk between this demo and the live web apps (window.DEMO.apps in index.html). The tab is
   vertically centred: the staff chevron's touch zone sits above it (top 1.3in, 1.6in tall) and the Schedule
   button below. Above the attract screen (300), under the QR modal (400). ---------------- */
#app-drawer, #app-tab { --ad-w: calc(5.5 * var(--in)); --ad-tab-w: calc(0.95 * var(--in)); --ad-tab-h: calc(1.9 * var(--in)); --ad-speed: .28s; }
#app-tab {
  position: fixed; z-index: 360; left: 0; top: 50%; transform: translate(0, -50%); transition: transform var(--ad-speed) ease;
  width: var(--ad-tab-w); height: var(--ad-tab-h); margin: 0; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy, #0B2239); border-radius: 0 var(--r-control) var(--r-control) 0;
  box-shadow: 0 6px 18px -6px rgba(11, 34, 57, .45); opacity: .85;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#app-tab svg { width: calc(0.42 * var(--in)); height: calc(0.42 * var(--in)); fill: none; stroke: #fff; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ad-speed) ease; }
#app-tab:focus { outline: none; }
#app-tab.open { transform: translate(var(--ad-w), -50%); opacity: 1; }   /* rides on the drawer's edge */
#app-tab.open svg { transform: rotate(180deg); }

#app-drawer { position: fixed; inset: 0; z-index: 350; pointer-events: none; }
#app-drawer.open { pointer-events: auto; }
#app-drawer .ad-scrim { position: absolute; inset: 0; background: rgba(11, 34, 57, .35); opacity: 0; transition: opacity var(--ad-speed) ease; }
#app-drawer.open .ad-scrim { opacity: 1; }
#app-drawer .ad-panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--ad-w); box-sizing: border-box;
  padding: calc(0.4 * var(--in)) calc(0.3 * var(--in)); background: #fff;
  transform: translateX(-100%); transition: transform var(--ad-speed) ease, box-shadow var(--ad-speed) ease;
  display: flex; flex-direction: column; justify-content: center;
}
#app-drawer.open .ad-panel { transform: none; box-shadow: 0 0 40px -10px rgba(11, 34, 57, .5); }   /* shadow only when open, or it bleeds onto the screen's left edge */
#app-drawer .ad-title { margin: 0 0 calc(0.25 * var(--in)); padding: 0 calc(0.15 * var(--in));
  font-size: calc(0.24 * var(--in) * var(--k-text-scale)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray, #5A6A80); }
#app-drawer .ad-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(0.24 * var(--in)); }
#app-drawer .ad-item {
  display: flex; align-items: center; gap: calc(0.18 * var(--in)); width: 100%; box-sizing: border-box; margin: 0;
  min-height: calc(1.25 * var(--in)); padding: calc(0.18 * var(--in)) calc(0.24 * var(--in)); border: 0; border-radius: var(--r-card);   /* a finger-sized tile (John, 2026-10-05) */
  background: var(--yw-grey, #F1F5F9); color: var(--navy, #0B2239); text-align: left; text-decoration: none; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#app-drawer .ad-item:active { background: #D9EBF7; }
#app-drawer .ad-item.on { background: var(--blue, #0478CC); color: #fff; }
#app-drawer .ad-label { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); font-weight: 800; line-height: 1.15; }
#app-drawer .ad-sub { font-size: calc(0.2 * var(--in) * var(--k-text-scale)); font-weight: 500; opacity: .75; }
#app-drawer .ad-icon { flex: none; width: calc((0.89 * var(--in) + 4px) * .9); height: calc((0.89 * var(--in) + 4px) * .9); border-radius: var(--r-item); object-fit: cover;
  box-shadow: 0 0 0 1px rgba(11, 34, 57, .08); }   /* each site's own icon, left of its name (John, 2026-10-05; then 10% smaller) */
#app-drawer .ad-icon[src$="brandmark.svg"] { box-shadow: none; }   /* the round brandmark: no square hairline around a circle */
#app-drawer .ad-item.on .ad-icon { width: calc((0.89 * var(--in) + 4px) * .9 - 4px); height: calc((0.89 * var(--in) + 4px) * .9 - 4px); margin: 2px; box-shadow: 0 0 0 2px #fff; }   /* the 2px ring + 4px smaller = the same footprint as the others (John: match sizes) */
#app-drawer .ad-text { display: flex; flex-direction: column; gap: calc(0.04 * var(--in)); min-width: 0; }