/* YACHTWAVE interactive demo — KIOSK SKIN.
   =====================================================================================
   SEPARATE FROM THE DESKTOP VERSION (John, 2026-09-20). css/demo.css + css/app.css are the
   desktop/web look and contain no kiosk rule; this file + js/kiosk.js are the whole kiosk skin.
   Every rule here is scoped to `html.kiosk`, which only js/kiosk.js sets (?kiosk), so linking this
   file costs the desktop version nothing. It may later serve as a large-format desktop version too.

   THE SCREEN: 21-inch diagonal, 1920 x 1080, touch, ON A TRADE-SHOW FLOOR.
       width  = 21 x 0.8716 = 18.30 in      height = 21 x 0.4903 = 10.30 in      104.9 px per inch
       the desktop build's 34px button = 0.32 in; a 60px button = 0.57 in. A fingertip is 0.6–0.8 in.
   NOTHING HERE IS IN PIXELS: js/kiosk.js measures --ppi and every size is in inches of glass (--in).

   ⛔ SIZE FOR THE FLOOR, NOT FOR THE MINIMUM (John, 2026-09-20, said four times before it landed):
   a show floor is a standing stranger, in a hurry, reading from a step back and jabbing with a
   finger. Accessibility minimums (0.75 in targets, 0.19 in type) are the wrong yardstick and the
   second pass, built to them, was rejected as TOO SMALL. The rules now:
     touch target   dialogue 1.5 in tall · card 1.6 in · section opener / close 1.8 in ·
                    header CTA 1.0 · Product Tour 1.1 · never two targets closer than 0.4 in
     type           NOTHING under 0.26 in (27px). Body 0.36 (38px) · dialogue title 0.5 ·
                    card body 0.42 · card title 0.66 · stat numbers 1.05 · the section word 2.5 in
   HEIGHT BUDGET: 10.3 in of glass − 1.3 in header = 9.0 in for a card. That is why kiosk cards drop
   the stage label (the stepper already says it), put the step counter beside the buttons, and set
   the six "Have You Ever…" questions in two columns. Re-measure every card after any size change:
   card.offsetHeight / --ppi must stay under ~8.9.
   Tune the TOKENS first; the rules below only spend them.
   ===================================================================================== */

html.kiosk {
  --ppi: 104.9;                          /* 1920 px / 18.30 in. FIXED, not measured — see js/kiosk.js */
  /* ⭐ THE ONE DIAL. Every size in this file is multiplied by it. 1 = the "floor-max" pass John
     rejected as far too big (1.5 in buttons, 0.36 in body); 0.67 = the pass he rejected as too small
     (1.0 in, 0.27 in). 0.84 is the middle. Try a value live, no edit needed: ?kscale=0.9 on the URL
     (js/kiosk.js; it sticks per browser, ?kscale=0 clears it). Once it looks right on the real
     kiosk, write the number here. The inch figures in the comments below are AT SCALE 1. */
  --k-scale: 0.63;   /* John, 2026-09-20, judging the survey card on screen: "make EVERYTHING 25% smaller" (0.84 x 0.75) */
  /* TWO FINER DIALS on top of it, so sizes can be settled ONE THING AT A TIME with John (his method,
     2026-09-20: "play with each setting one at a time and ask me if I like it… start with button
     size"). Both multiply the master dial. Try live: ?kbtn=1.2  ?ktext=1.1  (0 clears). */
  --k-btn-scale: 1;     /* every button: height AND its label — AGREED with John 2026-09-20 (Back/Next 132px) */
  --k-text-scale: 1.1;  /* every piece of type that is not a button label — my guess; John says bigger / smaller */
  --in: calc(var(--ppi) * var(--k-scale) * 1px);   /* one inch of glass x the dial */

  /* touch targets */
  --k-btn:    calc(1.50 * var(--in) * var(--k-btn-scale));    /* Back / Next in a dialogue */
  --k-btn-lg: calc(1.60 * var(--in) * var(--k-btn-scale));    /* the button on a card */
  --k-btn-xl: calc(1.80 * var(--in) * var(--k-btn-scale));    /* section openers, the close */
  --k-gap:    calc(0.40 * var(--in));    /* minimum space between two targets */
  /* type */
  --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));

  /* shared tokens the desktop files read */
  --tooltip-w: calc(8.8 * var(--in));
  --lens-zoom: 1.6;
  --r-lens-max: calc(0.4 * var(--in));

  -webkit-tap-highlight-color: transparent;
}
html.kiosk body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
html.kiosk input { user-select: text; -webkit-user-select: text; }
html.kiosk #build-badge { display: none; }

/* ---------------- header + stepper (1.3 in tall) ---------------- */
html.kiosk #demo-header { height: calc(1.3 * var(--in)); flex-basis: calc(1.3 * var(--in)); padding: 0 calc(0.4 * var(--in)); gap: calc(0.4 * var(--in)); }
html.kiosk .hdr-logo img { height: calc(0.625 * var(--in)); }   /* +25% (John, 2026-09-20) */
html.kiosk #stepper { gap: calc(0.14 * var(--in)); }
html.kiosk .stage { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); gap: calc(0.13 * var(--in)); }
html.kiosk .stage i { width: calc(0.19 * var(--in)); height: calc(0.19 * var(--in)); }
html.kiosk .stage-sep { width: calc(0.26 * var(--in)); height: 3px; }
html.kiosk body.has-sec #stepper .stage.current { padding: calc(0.1 * var(--in)) calc(0.22 * var(--in)) calc(0.1 * var(--in)) calc(0.17 * var(--in)); }
html.kiosk .btn-cta { font-size: calc(0.3 * var(--in) * var(--k-btn-scale)); min-height: calc(1.0 * var(--in) * var(--k-btn-scale)); padding: 0 calc(0.45 * var(--in)); display: inline-flex; align-items: center; border-radius: calc(0.1 * var(--in)); }
html.kiosk #scenario-bar { height: calc(0.8 * var(--in)); flex-basis: calc(0.8 * var(--in)); font-size: var(--k-body); }
html.kiosk #scenario-bar-text { font-size: var(--k-body); }
html.kiosk #scenario-bar .sb-label { font-size: calc(0.2 * var(--in) * var(--k-text-scale)); padding: calc(0.05 * var(--in)) calc(0.12 * var(--in)); }

/* ---------------- the dialogue (8.8 in wide) ---------------- */
html.kiosk #tooltip { padding: calc(0.44 * var(--in)) calc(0.46 * var(--in)) calc(0.42 * var(--in)); border-radius: calc(0.22 * var(--in)); }
html.kiosk .tt-chapter { font-size: var(--k-label); margin-bottom: calc(0.12 * var(--in)); }
html.kiosk .tt-title { font-size: var(--k-title); margin-bottom: calc(0.14 * var(--in)); }
html.kiosk .tt-copy { font-size: var(--k-body); line-height: 1.45; margin-bottom: calc(0.4 * var(--in)); color: var(--ink); }
html.kiosk .tt-count { font-size: var(--k-label); }
html.kiosk .tt-btns { display: flex; gap: var(--k-gap); }
html.kiosk .tt-btn { font-size: calc(0.4 * var(--in) * var(--k-btn-scale)); font-weight: 800; min-height: var(--k-btn); min-width: calc(2.6 * var(--in)); padding: 0 calc(0.5 * var(--in)); border-radius: calc(0.18 * var(--in)); }
html.kiosk .tt-btn.ghost { border: 3px solid #c3cfdb; color: var(--ink); }
html.kiosk .tt-ico svg { width: calc(0.38 * var(--in)); height: calc(0.38 * var(--in)); }
html.kiosk .tt-badges img { height: calc(0.9 * var(--in)); }
html.kiosk body.has-sec #tooltip:not(.card)::before { left: calc(0.46 * var(--in)); width: calc(1 * var(--in)); height: calc(0.09 * var(--in)); }

/* ---------------- cards ---------------- */
html.kiosk #tooltip.card { width: min(calc(13.5 * var(--in)), calc(100vw - 0.8 * var(--in))); padding: calc(0.42 * var(--in)) calc(0.6 * var(--in)) calc(0.4 * var(--in)); border-radius: calc(0.32 * var(--in)); }
html.kiosk #tooltip.card.card-mid { width: min(calc(16.4 * var(--in)), calc(100vw - 0.8 * var(--in))); }
html.kiosk #tooltip.card.card-wide { width: min(calc(17.5 * var(--in)), calc(100vw - 0.8 * var(--in))); }
html.kiosk #tooltip.card .tt-chapter { display: none; }   /* height budget: the stepper already names the stage */
html.kiosk #tooltip.card .tt-title { font-size: var(--k-card-title); margin-bottom: calc(0.2 * var(--in)); }
html.kiosk #tooltip.card .tt-copy { font-size: var(--k-card-body); max-width: calc(11.6 * var(--in)); margin-bottom: calc(0.36 * var(--in)); color: var(--ink); }
html.kiosk #tooltip.card.card-mid .tt-copy, html.kiosk #tooltip.card.card-wide .tt-copy { max-width: none; }
html.kiosk #tooltip.card .tt-foot { gap: calc(0.3 * var(--in)); }
html.kiosk #tooltip.card .tt-btn { font-size: calc(0.44 * var(--in) * var(--k-btn-scale)); min-height: var(--k-btn-lg); min-width: calc(3 * var(--in)); padding: 0 calc(0.7 * var(--in)); }
/* HEIGHT BUDGET: the glass is 10.3 in tall and the header takes 1.1, so a card has ~8.8 in. The step
   counter therefore sits BESIDE the buttons on a kiosk card, not on a row of its own under them. */
html.kiosk #tooltip.card .tt-foot { flex-wrap: nowrap; }
html.kiosk #tooltip.card .tt-count { font-size: var(--k-label); order: 2; width: auto; margin: 0 0 0 calc(0.1 * var(--in)); white-space: nowrap; }
html.kiosk #tooltip.card.story { border-top-width: calc(0.14 * var(--in)); }

/* stat tiles: the number is 1.05 in tall; "Only" rides above its number so all four numbers align */
html.kiosk .cd-stats { gap: calc(0.24 * var(--in)); }
html.kiosk .cd-stat { padding: calc(0.7 * var(--in)) calc(0.24 * var(--in)) calc(0.34 * var(--in)); border-radius: calc(0.2 * var(--in)); }
html.kiosk .cd-stat b { position: relative; font-size: calc(1.05 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.18 * var(--in)); letter-spacing: -.02em; }
html.kiosk .cd-stat b i { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 calc(0.02 * var(--in)); font-size: calc(0.34 * var(--in) * var(--k-text-scale)); word-spacing: 0; }
html.kiosk .cd-stat span { font-size: calc(0.38 * var(--in) * var(--k-text-scale)); line-height: 1.32; text-align: center; hyphens: manual; }   /* justify cannot survive 3.3 in tiles at this size */
html.kiosk .cd-source { font-size: var(--k-label); margin-top: calc(0.2 * var(--in)); }
/* lists */
html.kiosk .cd-list { max-width: none; gap: calc(0.14 * var(--in)); }
html.kiosk ul.cd-list { grid-template-columns: 1fr 1fr; }   /* six questions, two columns: the height budget */
html.kiosk ol.cd-list { max-width: calc(12.5 * var(--in)); }
html.kiosk .cd-list li { font-size: calc(0.38 * var(--in) * var(--k-text-scale)); line-height: 1.3; padding: calc(0.2 * var(--in)) calc(0.3 * var(--in)) calc(0.2 * var(--in)) calc(1.02 * var(--in)); border-radius: calc(0.18 * var(--in)); }
html.kiosk .cd-list li::before { left: calc(0.28 * var(--in)); width: calc(0.5 * var(--in)); height: calc(0.5 * var(--in)); font-size: calc(0.3 * var(--in) * var(--k-text-scale)); }
html.kiosk .cd-note { font-size: calc(0.36 * var(--in) * var(--k-text-scale)); margin-top: calc(0.22 * var(--in)); color: var(--ink); }
/* the three words on their line */
html.kiosk .cd-words { max-width: none; gap: calc(0.16 * var(--in)); padding-left: calc(0.5 * var(--in)); }
html.kiosk .cd-words::before { left: calc(0.08 * var(--in)); width: calc(0.06 * var(--in)); }
html.kiosk .cd-word b { font-size: calc(0.6 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.07 * var(--in)); }
html.kiosk .cd-word span { font-size: calc(0.35 * var(--in) * var(--k-text-scale)); line-height: 1.35; color: var(--ink); }

/* the flooded section openers: the word is 2.5 in tall and has to land from across the aisle.
   "CONNECT." at 2.5 in is ~12.5 in wide on 18.3 in of glass. */
html.kiosk #tooltip.card.flood { width: min(calc(16.8 * var(--in)), calc(100vw - 1.2 * var(--in))); padding: 0; }
html.kiosk #tooltip.card.flood .tt-title { font-size: calc(2.5 * var(--in) * var(--k-text-scale)); margin: 0 0 calc(0.24 * var(--in)) calc(-0.1 * var(--in)); }
html.kiosk #tooltip.card.flood .tt-copy { max-width: calc(14.5 * var(--in)); margin-bottom: calc(0.45 * var(--in)); color: #fff; }
html.kiosk #tooltip.card.flood .sec-sub { font-size: calc(0.8 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.2 * var(--in)); }
html.kiosk #tooltip.card.flood .sec-body { font-size: calc(0.42 * var(--in) * var(--k-text-scale)); line-height: 1.4; max-width: calc(14.5 * var(--in)); }
html.kiosk #tooltip.card.flood .tt-btn { font-size: calc(0.48 * var(--in) * var(--k-btn-scale)); min-height: var(--k-btn-xl); padding: 0 calc(0.9 * var(--in)); }
html.kiosk #tooltip.card.flood .tt-btn.ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
html.kiosk #tooltip.card.flood .tt-count { color: #fff; }

/* ---------------- Product Tour button + stage menu ---------------- */
html.kiosk #tour-btn { 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)); right: calc(0.3 * var(--in)); bottom: calc(0.3 * var(--in)); border-radius: calc(0.16 * var(--in)); gap: calc(0.16 * var(--in)); }
html.kiosk #tour-btn svg { width: calc(0.36 * var(--in)); height: calc(0.36 * var(--in)); }
html.kiosk #chapter-menu { width: calc(6.6 * var(--in)); right: calc(0.3 * var(--in)); bottom: calc(1.6 * var(--in)); padding: calc(0.26 * var(--in)) calc(0.2 * var(--in)) calc(0.16 * var(--in)); border-radius: calc(0.2 * var(--in)); }
html.kiosk .cm-title { font-size: calc(0.36 * var(--in) * var(--k-text-scale)); }
html.kiosk .cm-intro, html.kiosk .cm-head, html.kiosk .cm-pct { font-size: var(--k-label); }
html.kiosk .cm-item { font-size: calc(0.34 * var(--in) * var(--k-text-scale)); min-height: calc(1.1 * var(--in)); gap: calc(0.18 * var(--in)); }
html.kiosk .cm-item b { width: calc(0.56 * var(--in)); height: calc(0.56 * var(--in)); font-size: calc(0.28 * var(--in) * var(--k-text-scale)); }
html.kiosk .cm-meta { font-size: var(--k-label); }

/* ---------------- screens ---------------- */
/* plates fill the glass: no pixel cap, only the viewport less the header and the dialogue's column
   (the lens clone sits under html.kiosk too, so it lays out identically) */
/* --plate-scale (default 1) lets one plate show smaller than full bleed — set inline on .plate by a screens.js
   `scale:` entry (first use: the /ibex/ branding plate at 0.75, John 2026-09-23) */
html.kiosk .plate img { max-height: calc((100vh - 2.0 * var(--in)) * var(--plate-scale, 1)); max-width: calc((100vw - var(--tooltip-w) - 1.4 * var(--in)) * var(--plate-scale, 1)); }
html.kiosk #stage { padding: calc(0.3 * var(--in)); }
/* the Fleet demo's phone and browser frames are pixel-capped for the desktop; scale them to the
   glass. (Side-by-side beats keep their own zoom.) ⚠️ spot-checked only — walk Fleet in kiosk mode
   before it goes on a show floor. */
html.kiosk .iphone-frame, html.kiosk .browser-frame { zoom: calc(var(--ppi) / 95); }
html.kiosk .chrome-plate .browser-frame { zoom: 1; }

/* ---------------- gate, picker, hub chooser, intro ----------------
   These are small fixed-pixel layouts, so they are scaled whole. 560px gate card x (ppi / 44) = 12.7 in
   wide: its 44px field and button come out at 1.0 in, its 14.5px body at 0.33 in. Picker / hub:
   the 1000px chooser x (ppi / 57) = 17.5 in, each whole card a 5.3 in touch target, 13px sub at 0.23 in. */
html.kiosk .gate-card { zoom: calc(var(--ppi) * var(--k-scale) / 44); }
html.kiosk .wizard-inner, html.kiosk .intro-inner { zoom: calc(var(--ppi) * var(--k-scale) / 50); }
html.kiosk .pc-sub { font-size: 15px; }   /* x the zoom = 0.26 in, the floor minimum */

/* ---------------- the close ---------------- */
html.kiosk .closing-inner { max-width: calc(17 * var(--in)); }
html.kiosk .closing-inner h1 { font-size: calc(0.95 * var(--in) * var(--k-text-scale)); margin: 0 0 calc(0.24 * var(--in)); }
html.kiosk .closing-inner > p { font-size: calc(0.42 * var(--in) * var(--k-text-scale)); max-width: calc(14.5 * var(--in)); margin-bottom: calc(0.6 * var(--in)); color: var(--ink); }
html.kiosk .close-tag { font-size: calc(0.6 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.28 * var(--in)); }
html.kiosk .close-words { font-size: calc(0.78 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.22 * var(--in)); }
html.kiosk .welcome-spine span { font-size: calc(0.28 * var(--in) * var(--k-text-scale)); }
html.kiosk .closing-ctas { gap: calc(0.45 * var(--in)); margin-bottom: calc(0.4 * var(--in)); }
html.kiosk .closing-ctas .btn-lg { font-size: calc(0.48 * var(--in) * var(--k-btn-scale)); font-weight: 800; min-height: var(--k-btn-xl); padding: 0 calc(0.9 * var(--in)); display: inline-flex; align-items: center; border-radius: calc(0.15 * var(--in)); }
html.kiosk .closing-links { font-size: calc(0.38 * var(--in) * var(--k-btn-scale)); gap: calc(0.2 * var(--in)); align-items: center; }
html.kiosk .closing-links a { min-height: calc(1.2 * var(--in) * var(--k-btn-scale)); padding: 0 calc(0.4 * var(--in)); display: inline-flex; align-items: center; }
/* pricing chapter (Fleet): the pinned finish bar */
html.kiosk .finish-bar { font-size: var(--k-body); }
html.kiosk .btn-finish { font-size: calc(0.4 * var(--in) * var(--k-btn-scale)); min-height: var(--k-btn); padding: 0 calc(0.5 * var(--in)); }

/* ---------------- dialogue foot: counter on its own line, buttons share the full row ----------------
   At these sizes "See What the Yard Gets" beside Back and the counter does not fit in one row, and a
   wrapped button label looks broken. Counter above; Back fixed, the action button takes the rest;
   labels never wrap. (Cards keep their own centred foot, above.) */
html.kiosk #tooltip:not(.card) .tt-foot { flex-direction: column; align-items: stretch; gap: calc(0.2 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-btns { width: 100%; }
html.kiosk #tooltip:not(.card) #tt-back { flex: 0 0 auto; min-width: calc(2.2 * var(--in)); }
html.kiosk #tooltip:not(.card) #tt-next { flex: 1 1 auto; padding: 0 calc(0.3 * var(--in)); }
html.kiosk .tt-btn { white-space: nowrap; }
html.kiosk .tt-count { white-space: nowrap; }

/* ---------------- the gate, brought up to the agreed sizes (John, 2026-09-20) ----------------
   The gate is scaled as one block (zoom = ppi x k-scale / 44 = 2.0), so its inner pixel sizes are
   HALF what lands on the glass. Scaling alone left "Start the Demo" at 88px beside 132px tour buttons
   and the tick lines at 25px, under the 29px minimum. Set here so that x 2.0 gives: field + button
   132px (the agreed button), button label and body 35px, tick lines 29px. */
html.kiosk .gate-card { max-width: 640px; }
html.kiosk .gate-card p { font-size: 17.5px; }
html.kiosk .gate-field { padding: 7px; gap: 10px; }
html.kiosk .gate-field input { height: 66px; font-size: 17.5px; padding: 0 16px; }
html.kiosk .gate-field button { height: 66px; font-size: 17.5px; font-weight: 800; padding: 0 26px; }
html.kiosk .gate-points { margin-top: 16px; column-gap: 24px; row-gap: 7px; }
html.kiosk .gate-points li { font-size: 14.5px; gap: 8px; }
html.kiosk .pt-check { width: 17px; height: 17px; }
html.kiosk .field-error { font-size: 14.5px; }

/* ---------------- no "Schedule a Demo" button in the kiosk header (John, 2026-09-20) ----------------
   It is an outbound link, which on a show kiosk would open a new tab and strand the visitor. With it
   gone the stages are centred on the glass, not in the space left beside the logo. */
html.kiosk #nav-cta { display: none; }
html.kiosk #stepper { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); flex: none; }

/* ---------------- the survey page: TWO CARDS, top and bottom (John, 2026-09-20) ----------------
   His layout, chosen from a sketch: the headline floats on the page, a white card holds the first
   two stats, a second white card holds the other two, the button stands underneath. (My first read
   of "2 cards top and bottom" re-tiled ONE card 2 x 2 — not what he asked.) The step carries
   cardClass `stats-split`; the desktop CSS gives it no meaning, so the web card is unchanged.
   Markup: .cd-stats > .cd-row x 2 > .cd-stat x 2  (desktop: .cd-row is display:contents). */
html.kiosk #tooltip.card.stats-split { background: transparent; box-shadow: none; padding: 0; width: min(calc(21 * var(--in)), calc(100vw - 0.8 * var(--in))); }
html.kiosk #tooltip.card.stats-split .tt-title { margin-bottom: calc(0.36 * var(--in)); }
html.kiosk .stats-split .cd-stats { display: block; }
html.kiosk .stats-split .cd-row {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border-radius: calc(0.32 * var(--in));
  box-shadow: 0 calc(0.3 * var(--in)) calc(0.7 * var(--in)) calc(-0.2 * var(--in)) rgba(11, 34, 57, .4);
  padding: calc(0.3 * var(--in)) 0; margin-bottom: calc(0.36 * var(--in));
}
html.kiosk .stats-split .cd-stat { background: none; border-radius: 0; text-align: center; padding: calc(0.62 * var(--in)) calc(0.6 * var(--in)) calc(0.3 * var(--in)); }
html.kiosk .stats-split .cd-stat + .cd-stat { border-left: 2px solid #dbe5ee; }
html.kiosk .stats-split .cd-stat b { font-size: calc(1.26 * var(--in) * var(--k-text-scale)); line-height: 1; margin-bottom: calc(0.16 * var(--in)); }
html.kiosk .stats-split .cd-stat span { font-size: calc(0.46 * var(--in) * var(--k-text-scale)); line-height: 1.3; text-align: center; text-align-last: auto; hyphens: manual; }
html.kiosk .stats-split .cd-source { margin-top: 0; }
html.kiosk #tooltip.card.stats-split .tt-copy { margin-bottom: calc(0.36 * var(--in)); }
/* "Only" sits IN FRONT of "1 in 3", on its line, not above it (John, 2026-09-20) */
html.kiosk .stats-split .cd-stat b i { position: static; display: inline; margin: 0 calc(0.18 * var(--in)) 0 0; font-size: calc(0.5 * var(--in) * var(--k-text-scale)); }
/* the survey's source line is a footnote at the very bottom-left of the SCREEN (John, 2026-09-20).
   It cannot be a position:fixed child of the card — the card's entrance animation leaves a transform
   behind, which becomes the containing block and drops the line in the middle of the page. So on the
   kiosk the in-card line is hidden and the engine prints the step's `kiosk.note` into #page-note, a
   body-level element (js/shell.js). */
html.kiosk .stats-split .cd-source { display: none; }
html.kiosk #page-note {
  position: fixed; z-index: 141; left: calc(0.45 * var(--in)); bottom: calc(0.4 * var(--in));
  font-size: var(--k-label); color: var(--gray); animation: floodFade .5s .6s both;
}
/* "Only" bigger (John, 2026-09-20): 36px -> 50px beside the 96px number */
html.kiosk .stats-split .cd-stat b i { font-size: calc(0.945 * var(--in) * var(--k-text-scale)); margin-right: calc(0.26 * var(--in)); }   /* then +50% again: 51px -> 76px */
/* card buttons: "Start Demo" 33% wider (254px -> 338px) and THAT is the minimum width of a button on
   a card (John, 2026-09-20). 338px / 66.1px per scaled inch = 5.12. */
html.kiosk #tooltip.card .tt-btn { min-width: calc(5.12 * var(--in) * var(--k-btn-scale)); }
/* the big line of each stat (number, and "Only" with it) -10% (John, 2026-09-20): 1.4 -> 1.26, 1.05 -> 0.945 */

/* ---------------- Product Tour menu, fixed (John, 2026-09-20: "all messed up") ----------------
   Two misses in the first kiosk pass: the desktop rule pins the number badge with `flex: 0 0 22px`,
   so giving it a bigger height made an OVAL; and .cm-name has its own 13.5px, so the stage names
   stayed desktop-sized while everything round them grew. Every part of the menu is set here. */
html.kiosk #chapter-menu { width: calc(7.4 * var(--in)); padding: calc(0.36 * var(--in)) calc(0.26 * var(--in)) calc(0.22 * var(--in)); }
html.kiosk .cm-title { padding: 0 calc(0.2 * var(--in)); }
html.kiosk .cm-intro { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); padding: calc(0.1 * var(--in)) calc(0.2 * var(--in)) 0; }
html.kiosk .cm-progress { gap: calc(0.2 * var(--in)); padding: calc(0.26 * var(--in)) calc(0.2 * var(--in)) calc(0.08 * var(--in)); }
html.kiosk .cm-bar { height: calc(0.12 * var(--in)); }
html.kiosk .cm-pct { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); min-width: calc(0.8 * var(--in)); }
html.kiosk .cm-head { font-size: calc(0.26 * var(--in) * var(--k-text-scale)); padding: calc(0.24 * var(--in)) calc(0.2 * var(--in)) calc(0.1 * var(--in)); }
html.kiosk .cm-item { align-items: center; gap: calc(0.26 * var(--in)); min-height: calc(1.25 * var(--in)); padding: calc(0.14 * var(--in)) calc(0.2 * var(--in)); border-radius: calc(0.16 * var(--in)); }
html.kiosk .cm-item b {
  flex: 0 0 calc(0.72 * var(--in)); width: calc(0.72 * var(--in)); height: calc(0.72 * var(--in));
  border-radius: 50%; font-size: calc(0.36 * var(--in) * var(--k-text-scale)); font-weight: 800; line-height: 1;
}
html.kiosk .cm-body { gap: calc(0.03 * var(--in)); }
html.kiosk .cm-name { font-size: calc(0.4 * var(--in) * var(--k-text-scale)); }
html.kiosk .cm-meta { font-size: calc(0.3 * var(--in) * var(--k-text-scale)); }
/* the Product Tour card runs the full height of the view — from just under the header down to the
   button — and its five stages share that height evenly, so each is a tall touch row (John, 2026-09-20) */
html.kiosk #chapter-menu:not(.hidden) { display: flex; flex-direction: column; top: calc(1.3 * var(--in) + 0.3 * var(--in)); }
html.kiosk #cm-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(0.1 * var(--in)); min-height: 0; }
html.kiosk .cm-item { flex: 1 1 0; }
html.kiosk .cm-title { font-size: calc(0.4 * var(--in) * var(--k-text-scale)); white-space: nowrap; }
/* the two survey cards 10% smaller AS OBJECTS — box and contents together — for more air round them
   (John, 2026-09-20: "too cramped"). zoom, not transform: the layout shrinks with them. */
html.kiosk .stats-split .cd-stats { zoom: .9; width: 90%; margin: 0 auto; }
/* more space above "Start Demo" (John, 2026-09-20): the gap under the second card 24px -> ~66px */
html.kiosk #tooltip.card.stats-split .tt-copy { margin-bottom: calc(1 * var(--in)); }
/* the header's progress row (Why · Build · Deliver · Connect · Get Started): +25%, then -10% (John,
   2026-09-20) = x 1.125 of the first kiosk pass — names, dots, separators, spacing and the pill */
html.kiosk #stepper { gap: calc(0.158 * var(--in)); }
html.kiosk .stage { font-size: calc(0.3375 * var(--in) * var(--k-text-scale)); gap: calc(0.146 * var(--in)); }
html.kiosk .stage i { width: calc(0.214 * var(--in)); height: calc(0.214 * var(--in)); }
html.kiosk .stage-sep { width: calc(0.2925 * var(--in)); height: 3px; }
html.kiosk body.has-sec #stepper .stage.current { padding: calc(0.1125 * var(--in)) calc(0.2475 * var(--in)) calc(0.1125 * var(--in)) calc(0.19 * var(--in)); }
/* the "Step x of y" counter bigger, everywhere it appears (John, 2026-09-20): 22px -> 30px */
html.kiosk .tt-count, html.kiosk #tooltip.card .tt-count { font-size: calc(0.42 * var(--in) * var(--k-text-scale)); font-weight: 700; }
/* the section opener's tagline stays on ONE line (John, 2026-09-20). The longest, CONNECT.'s "Stay
   Connected for the Life of the Boat", is ~1250px at this size and still ends inside the glass. */
html.kiosk #tooltip.card.flood .sec-sub { white-space: nowrap; }

/* ---------------- the step dialogue ("navigation card") -10%, its buttons -20% (John, 2026-09-20) ----------------
   Applies to the dialogue that sits beside a screen, not to the full-page cards (survey, section
   openers, story cards) or their buttons. The step counter keeps the size he set separately. */
html.kiosk { --tooltip-w: calc(7.92 * var(--in)); }
html.kiosk #tooltip:not(.card) { padding: calc(0.4 * var(--in)) calc(0.41 * var(--in)) calc(0.38 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-chapter { font-size: calc(0.27 * var(--in) * var(--k-text-scale)); }
html.kiosk #tooltip:not(.card) .tt-title { font-size: calc(0.45 * var(--in) * var(--k-text-scale)); }
html.kiosk #tooltip:not(.card) .tt-copy { font-size: calc(0.324 * var(--in) * var(--k-text-scale)); margin-bottom: calc(0.36 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-btn { min-height: calc(1.2 * var(--in) * var(--k-btn-scale)); font-size: calc(0.32 * var(--in) * var(--k-btn-scale)); border-radius: calc(0.15 * var(--in)); }
html.kiosk #tooltip:not(.card) #tt-back { min-width: calc(1.76 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-btns { gap: calc(0.32 * var(--in)); }
/* (all-caps dialogue title: tried and rejected by John, 2026-09-20 — titles stay Title Case) */

/* ---------------- the step counter sits at the TOP RIGHT OF THE DIALOGUE (John, 2026-09-20) ----------------
   "Step x of 16" looked bad beside the buttons. He meant the top right of the CARD — I first put it
   in the page header, which was a misread (#hdr-count stays in the markup, unused and hidden). It
   now shares the stage label's line: BUILD on the left, the counter on the right. Full-page cards
   keep theirs beside their buttons. */
html.kiosk #tooltip:not(.card) .tt-count {
  position: absolute; top: calc(0.62 * var(--in)); right: calc(0.41 * var(--in));
  font-size: calc(0.34 * var(--in) * var(--k-text-scale)); font-weight: 700; line-height: 1;
}
/* the step dialogue 15% TALLER with no change to any font size (John, 2026-09-20): +56px of air on a
   375px dialogue — more padding top and bottom, more room under the title and above the buttons */
html.kiosk #tooltip:not(.card) { padding-top: calc(0.64 * var(--in)); padding-bottom: calc(0.6 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-title { margin-bottom: calc(0.26 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-copy { margin-bottom: calc(0.63 * var(--in)); }
html.kiosk body.has-sec #tooltip:not(.card)::before { top: 0; }
/* taller again, and more white space between the header row (stage label + counter) and the title
   (John, 2026-09-20): +26px under the header row, +10px of padding top and bottom */
html.kiosk #tooltip:not(.card) { padding-top: calc(0.72 * var(--in)); padding-bottom: calc(0.7 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-chapter { margin-bottom: calc(0.52 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-count { top: calc(0.7 * var(--in)); }

/* ---------------- the section TAB on the step dialogue (John, 2026-09-20) ----------------
   The thin coloured line at the top of the dialogue becomes a BOX: a rectangle in the section colour,
   flush against the card's top edge, with the section name (BUILD / DELIVER / CONNECT) in white
   inside it — the book's coloured tab. The step counter stays top right, centred on the tab's height. */
html.kiosk body.has-sec #tooltip:not(.card)::before { display: none; }
html.kiosk #tooltip:not(.card) { padding-top: calc(1.2 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-chapter {
  position: absolute; top: 0; left: calc(0.41 * var(--in)); margin: 0;
  display: flex; align-items: center; height: calc(0.66 * var(--in)); padding: 0 calc(0.34 * var(--in));
  background: var(--sec, var(--blue)); color: #fff;
  font-size: calc(0.3 * var(--in) * var(--k-text-scale)); letter-spacing: .12em;
  border-radius: 0 0 calc(0.12 * var(--in)) calc(0.12 * var(--in));
}
html.kiosk body.has-sec #tooltip:not(.card) .tt-chapter { color: #fff; }
html.kiosk #tooltip:not(.card) .tt-count { top: calc(0.2 * var(--in)); }
/* the section tab: taller, square corners (John, 2026-09-20) — 44px -> 60px */
html.kiosk #tooltip:not(.card) .tt-chapter { height: calc(0.9 * var(--in)); border-radius: 0; }
html.kiosk #tooltip:not(.card) { padding-top: calc(1.44 * var(--in)); }
html.kiosk #tooltip:not(.card) .tt-count { top: calc(0.32 * var(--in)); }
/* the section tab: 25% wider (123px -> 154px) and a FIXED size for every section — BUILD, DELIVER and
   CONNECT all sit centred in the same box (John, 2026-09-20) */
html.kiosk #tooltip:not(.card) .tt-chapter { width: calc(2.33 * var(--in)); padding: 0; justify-content: center; white-space: nowrap; }
/* the section tab runs to the card's LEFT EDGE (John, 2026-09-23) — no inset; its top-left corner takes
   the card's own radius (0.22in, see html.kiosk #tooltip) so it follows the corner instead of poking out */
html.kiosk #tooltip:not(.card) .tt-chapter { left: 0; border-radius: calc(0.22 * var(--in)) 0 0 0; }
/* at least 30px MORE clear space between the dialogue and the Product Tour button (John, 2026-09-20);
   read by engine.js position() as --tour-clear */
html.kiosk { --tour-clear: 30px; }