/* ============================================================
   SCANIA · TEST DRIVE — Sales Force Boost 2026
   Visual system derived from the Figma evaluation tool
   ============================================================ */

@property --mx  { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --my  { syntax: '<percentage>'; initial-value: 10%; inherits: false; }
@property --gx1 { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --gy1 { syntax: '<percentage>'; initial-value: 5%;  inherits: false; }
@property --gx2 { syntax: '<percentage>'; initial-value: 80%; inherits: false; }
@property --gy2 { syntax: '<percentage>'; initial-value: 10%; inherits: false; }

@property --gx1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --gy1 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --gx2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --gy2 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --gx3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --gy3 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }

@keyframes glow-orb1 {
  0%   { --gx1: 20%; --gy1:  5%; }
  25%  { --gx1: 72%; --gy1: 28%; }
  50%  { --gx1: 50%; --gy1: 75%; }
  75%  { --gx1: 12%; --gy1: 52%; }
  100% { --gx1: 20%; --gy1:  5%; }
}
@keyframes glow-orb2 {
  0%   { --gx2: 80%; --gy2: 10%; }
  33%  { --gx2: 22%; --gy2: 65%; }
  66%  { --gx2: 68%; --gy2: 88%; }
  100% { --gx2: 80%; --gy2: 10%; }
}
@keyframes glow-orb3 {
  0%   { --gx3: 50%; --gy3: 90%; }
  25%  { --gx3: 15%; --gy3: 40%; }
  50%  { --gx3: 85%; --gy3: 55%; }
  75%  { --gx3: 40%; --gy3: 20%; }
  100% { --gx3: 50%; --gy3: 90%; }
}
@keyframes spotlight-move {
  0%   { --mx: 20%; --my: 10%; }
  20%  { --mx: 72%; --my: 28%; }
  40%  { --mx: 55%; --my: 78%; }
  60%  { --mx: 82%; --my: 52%; }
  80%  { --mx: 18%; --my: 68%; }
  100% { --mx: 20%; --my: 10%; }
}
@keyframes hex-pulse {
  0%, 100% { opacity: .38; }
  50%       { opacity: .62; }
}


@font-face {
  font-family: 'ScaniaSansHeadline';
  src: url('assets/ScaniaSansHeadline-Bold.woff2') format('woff2'),
       url('assets/ScaniaSansHeadline-Bold.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
}

@font-face {
  font-family: 'ScaniaSansHeadline';
  src: url('assets/ScaniaSansHeadline-Regular.woff2') format('woff2'),
       url('assets/ScaniaSansHeadline-Regular.woff') format('woff');
  font-weight: 100 600;
  font-style: normal;
}

@font-face {
  font-family: 'ScaniaSans';
  src: url('assets/ScaniaSans-Regular.woff2') format('woff2'),
       url('assets/ScaniaSans-Regular.woff') format('woff');
  font-weight: 100 600;
  font-style: normal;
}

@font-face {
  font-family: 'ScaniaSans';
  src: url('assets/ScaniaSans-Bold.woff2') format('woff2'),
       url('assets/ScaniaSans-Bold.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
}

:root {
  /* core palette */
  --navy-900: #02102c;   /* page / screen base */
  --navy-850: #06173a;
  --navy-800: #0a1e44;   /* raised surfaces */
  --navy-700: #11264f;   /* inputs / tracks */
  --navy-600: #1b3262;   /* borders */
  --ink: #eaf2ff;
  --ink-dim: #9fb2d0;
  --ink-faint: #5e6f8f;

  /* accent */
  --teal: #18c8d4;
  --teal-bright: #2ee6ef;
  --teal-deep: #0a8f9a;

  /* brand colours (for bars / pills / radar) */
  --scania-a: #1ad7e0;  --scania-b: #0a8f9a;
  --volvo-a:  #62299b;  --volvo-b:  #efb4d8;
  --daf-a:    #7c2d10;  --daf-b:    #ff8000;
  --merc-a:   #c2c2c2;  --merc-b:   #3a3a3a;
  --man-a:    #b45309;  --man-b:    #f7a525;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --maxw-phone: 460px;

  --font: 'ScaniaSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;            /* no rubber-band / pull-to-refresh */
  -webkit-tap-highlight-color: transparent;
  /* pan-x/pan-y (not "manipulation") so pinch-zoom is blocked too, not just
     double-tap zoom — this is a kiosk, panning/scrolling (admin's Results
     page) still needs to work, actual zooming doesn't. */
  touch-action: pan-x pan-y;
  /* No text selection anywhere in the kiosk/admin UI — a long-press
     shouldn't pop a selection handle on a touchscreen app. Inputs/
     textareas are exempted right below so typing a code or pasting a
     webhook URL in the admin panel still works normally. */
  -webkit-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

body { padding-top: calc(64px + env(safe-area-inset-top)); }
/* test page has no top nav; also a safety net against document-level scroll
   if --vh (see core.js) is ever briefly off — the kiosk flow is a fixed
   single viewport and should never be scrollable regardless. */
body.test { padding-top: env(safe-area-inset-top); overflow: hidden; }
body.is-intro .bg-hex { animation: hex-pulse 20s ease-in-out infinite; }
body.is-intro .bg-glow {
  animation: glow-orb1 40s ease-in-out infinite, glow-orb2 28s ease-in-out infinite, glow-orb3 52s ease-in-out infinite;
  background:
    radial-gradient(circle 55vmin at var(--gx1) var(--gy1), var(--glow-c1, rgba(7,169,158,.65)) 30%, transparent 70%),
    radial-gradient(circle 50vmin at var(--gx2) var(--gy2), var(--glow-c2, rgba(1,152,195,.55)) 30%, transparent 70%),
    radial-gradient(circle 52vmin at var(--gx3) var(--gy3), rgba(7,169,158,.45) 30%, transparent 70%);
  filter: blur(35px);
}


.bg-hex-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  filter: blur(60px);
}
body.is-intro .bg-hex-glow {
  opacity: 1;
  transition: opacity 0.5s;
  background: radial-gradient(60% 60% at 50% 38%, var(--glow-hex-c, rgba(18,200,212,.35)) 0%, transparent 70%);
}
body.test.is-intro .bg-hex-glow { opacity: 0; }

/* tactile press feedback (touch + click) */
.pill, .vehicle, .btn, .btn-pill, .navlink, .iconbtn, .linkbtn, .cover, .options .pill {
  -webkit-user-select: none;
  user-select: none;
}
.pill:active, .vehicle:active, .btn:active, .btn-pill:active, .iconbtn:active { transform: scale(.97); }
.cover:active { transform: scale(.995); }

/* ---------- decorative background ---------- */
.bg-hex,
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-hex {
  opacity: .6;
  animation: none;
  background-image: url("assets/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-glow {
  --gx1: 20%; --gy1: 5%;
  --gx2: 80%; --gy2: 10%;
  --gx3: 50%; --gy3: 90%;
  background:
    radial-gradient(55% 45% at var(--gx1) var(--gy1), var(--glow-c1, rgba(24,200,212,.22)), transparent 70%),
    radial-gradient(45% 40% at var(--gx2) var(--gy2), var(--glow-c2, rgba(60,110,220,.16)), transparent 70%);
  animation: none;
}

/* ---------- top nav ---------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: calc(64px + var(--safe-top, 0px));   /* 64px of bar below the iPad status bar, so the logo and links are not squeezed into what is left */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-top, 0px) calc(22px + env(safe-area-inset-right)) 0 calc(22px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(2, 16, 44, .92), rgba(2, 16, 44, .55));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 50, 98, .6);
}
.topnav__brand {
  background: none;
  border: none;
  cursor: default;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.topnav__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(24, 200, 212, .4);
  border-radius: 999px;
  padding: 4px 10px;
}
/* logo is now an image (assets/scania-logo.svg) — sized by height per context */
.logo {
  display: inline-block;
  width: auto;
  height: 22px;
  vertical-align: middle;
}
.topnav .logo { height: 22px; }
.screen__head .logo { height: 19px; }
.cover > .logo { height: 26px; align-self: flex-start; }   /* don't stretch in column flex */
.slide--cover .logo { align-self: flex-start; }
.topnav__links { display: flex; gap: 6px; align-items: center; }
.navlink {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-dim);
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all .18s ease;
}
.navlink:hover { color: #fff; background: rgba(27, 50, 98, .5); }
.navlink.is-active {
  color: var(--navy-900);
  background: var(--teal);
  border-color: var(--teal);
}
.navlink--ext { color: var(--teal); border-color: rgba(24, 200, 212, .35); }
.navlink--ext:hover { background: rgba(24, 200, 212, .12); color: var(--teal-bright); }

/* test page (no top nav) — invisible corner tap target for the admin page.
   Flush against the physical top-right corner (not inset from it) and
   sized well beyond a normal button, so tapping anywhere in that corner —
   not one precise little spot — opens admin. */
.admin-link {
  position: fixed;
  top: 0;
  right: 0;
  width: 130px;
  height: 100px;
  display: block;
  z-index: 60;
  color: var(--ink-faint);
  text-decoration: none;
  border: none;
  opacity: 0;
}
.sync-badge {
  position: fixed; left: 14px; bottom: 12px; z-index: 60;
  display: none;
  padding: 6px 12px;
  border: 1px solid rgba(255, 190, 80, .55);
  border-radius: 999px;
  background: rgba(40, 28, 6, .8);
  color: #ffbe50;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  cursor: pointer;
}
body.is-intro .sync-badge:not([hidden]) { display: block; }
.screen__head-left, .screen__head-right { display: flex; align-items: center; gap: 14px; }
.restart-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  opacity: .45;
  transition: all .18s ease;
  display: none;
}
.restart-link:hover { opacity: 1; color: var(--ink-dim); border-color: var(--navy-600); background: rgba(2, 16, 44, .5); }

/* ---------- app shell ---------- */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 34px 20px 80px;
}

/* ---------- the "screen" (phone-style card) ---------- */
.screen {
  position: relative;
  width: 100%;
  max-width: var(--maxw-phone);
  min-height: 720px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(20, 44, 92, .55), rgba(2, 16, 44, .2) 38%),
    var(--navy-900);
  border: 1px solid rgba(27, 50, 98, .8);
  box-shadow: var(--shadow);
  padding: 26px 26px 24px;
  --pad-x: 26px;
  --pad-top: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  animation: fade .32s ease both;
}
.screen::before {  /* pattern texture inside the screen */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: url("assets/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.screen > * { position: relative; z-index: 1; }

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* screen header (in-screen Scania + vehicle chip) — bleeds edge-to-edge past
   .screen's own padding (via matching --pad-x/--pad-top custom props). Same
   background as the screen itself — the separation from the content below
   comes from a light glow cast off its bottom edge, not a colour change. */
.screen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;   /* 26px (.vehicle-chip height) + this rule's own 14px+14px padding, so the header's total height stays fixed whether or not a chip is present */
  position: relative;
  z-index: 1;
  background: var(--navy-900);
  margin: calc(-1 * var(--pad-top, 26px)) calc(-1 * var(--pad-x, 26px)) 36px calc(-1 * var(--pad-x, 26px));
  padding: 14px var(--pad-x, 26px);
}
.screen__head::before {
  /* isolates the glow (::after) from the page's decorative bg-glow blobs,
     which sit right at the top of the page (teal left, blue right) and
     would otherwise tint the glow unevenly and inconsistently between
     screens/vehicles. Fades out rather than cutting off hard, so it
     never reads as a visible block — by the point it's fully transparent,
     the glow itself (::after) has already faded to nothing too. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 64px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-900) 35%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}
.screen__head::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 8px 20px -6px rgba(255,255,255,.4);
  z-index: 1;
  pointer-events: none;
}
.screen__head .logo { font-size: 18px; }

.vehicle-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0 13px;
  border-radius: 999px;
  border: none;
  color: #fff;
  background: transparent;
  box-shadow: 0 0 14px -2px var(--chip, var(--teal));
  white-space: nowrap;
  position: relative;
}
/* Cab Assessment's intro shows its pre-set vehicle as this chip — make it
   bigger there specifically, not the (unrelated) one in the question-flow
   header, which stays at its current size. */
.cover .vehicle-chip { font-size: 20px; height: 46px; padding: 0 26px; }
/* Cab Assessment's per-vehicle countdown (see cab.js): white while time
   remains, red and counting up ("+0:42") once it's run out. Tabular
   figures so the digits don't jiggle sideways every second. */
.cab-timer {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
  margin-right: 6px;
}
.cab-timer.is-over { color: #ff5a5a; }
@media (min-width: 760px) { .cab-timer { font-size: 22px; margin-right: 10px; } }
.vehicle-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--chip, var(--teal)), var(--chip-b, var(--chip, var(--teal))));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.screen__title {
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.07px;
  text-transform: uppercase;
  margin: 0;
}
.question-icon { display: block; box-sizing: border-box; width: 112px; height: 112px; object-fit: contain; opacity: 1; margin-bottom: 20px; background: var(--navy-800); border-radius: 10px; padding: 14px; }
.route-icon { display: block; box-sizing: border-box; width: auto; max-width: 100%; height: clamp(130px, 22vh, 290px); object-fit: contain; opacity: 1; margin: 0 auto 12px; background: var(--navy-800); border-radius: 10px; padding: 14px; }
.question-head { display: flex; align-items: stretch; gap: 28px; margin-top: clamp(24px, 5vh, 44px); }
/* Cab Assessment: the icon sits beside just the title (not the whole
   instruction block below it) — center them against each other instead of
   stretching the icon to the title's full height. */
.question-head--cab { gap: clamp(24px, 5vh, 44px); align-items: center; }
.question-head .route-icon { flex: 0 0 auto; width: 34%; max-width: 230px; height: 100%; margin: 0; }
.question-head .question-icon { flex: 0 0 auto; margin: 0; }
.question-head__text { flex: 1 1 auto; min-width: 0; }
.question-head__text .screen__title { margin-top: 0; }
.question-head__text .screen__sub-group { margin-top: 16px; }
.question-head--cab > .screen__title { margin-top: 0; flex: 1 1 auto; min-width: 0; }
/* the instruction text runs full-width below the icon+title row, instead of
   sharing a narrower column with the icon — gives a long multi-sentence
   instruction (e.g. "Cab Entry") the whole width to wrap cleanly into. */
.question-head--cab + .screen__sub-group { margin-top: 16px; }
.screen__sub-group .screen__sub { margin: 0; }
.question-metrics { margin-top: clamp(20px, 10vh, 84px); }
.question-metrics-cab { margin-top: clamp(24px, 10vh, 90px); }
.screen__sub {
  color: var(--ink-dim);
  font-family: 'ScaniaSans', var(--font);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.07px;
  line-height: 1.2;
  margin: 34px 0 0;
  /* avoids a single stray word getting wrapped onto its own line at the
     end of a paragraph (e.g. "...the bed with the\niPad.") */
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .question-head { flex-direction: column; align-items: stretch; margin-top: 26px; }
  .question-head--cab { gap: 24px; }
  .question-head .route-icon { width: auto; max-width: 100%; height: clamp(64px, 11vh, 128px); margin: 0 auto 8px; }
  .question-head .question-icon { width: 92px; height: 92px; margin: 0 auto 12px; }
  .question-metrics { margin-top: 20px; }
  .question-metrics-cab { margin-top: 32px; }
  body.test .stepper { margin-bottom: 28px; }
  .metric { margin-bottom: 22px; }
  .screen__title { font-size: 20px; }
  .screen__sub { font-size: 18px; }
}
.screen__label {
  color: #fff;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.vehicle-section {
  margin-top: 100px;
}

/* ---------- confirm modal ---------- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 16, 44, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fade .2s ease both;
}
/* For any confirm-box with a text input (the admin code prompts): centering
   via align-items on a full-viewport-height flex container recalculates —
   and visibly jumps — every time the on-screen keyboard opens or closes and
   resizes the visual viewport. Anchoring near the top with a fixed pixel
   offset instead means it never has to move once the keyboard appears. */
.confirm-overlay--top {
  align-items: flex-start;
  padding-top: max(80px, env(safe-area-inset-top));
}
.confirm-box {
  position: relative;
  background: linear-gradient(160deg, #0d2150, #02102c);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 40px 40px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.confirm-box__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #aebfde;
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.confirm-box__close:hover { background: rgba(255,255,255,.08); color: #fff; }
.confirm-box__close svg { width: 16px; height: 16px; display: block; }
.confirm-box__title {
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.confirm-box__msg {
  font-size: 15px;
  color: #aebfde;
  line-height: 1.6;
  margin: 0 0 32px;
}
.confirm-box__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.confirm-box__btns button {
  flex: 1;
  padding: 14px 20px;
  border-radius: 999px;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .16s ease;
}
.confirm-box__btns .btn-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #aebfde;
}
.confirm-box__btns .btn-cancel:hover { border-color: #fff; color: #fff; }
.confirm-box__btns .btn-confirm {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
}
.confirm-box__btns .btn-confirm:hover { opacity: .85; }

/* "Test connection" (admin Sheets sync) — spinner morphs into a check or cross */
.testconn-box .confirm-box__btns { justify-content: center; }
.testconn-box .btn-cancel { flex: 0 0 auto; padding-left: 32px; padding-right: 32px; }
.testconn-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  box-sizing: border-box;
}
.testconn-icon--spin {
  border: 4px solid rgba(255, 255, 255, .15);
  border-top-color: var(--teal);
  animation: testconn-spin .8s linear infinite;
}
.testconn-icon--ok { background: rgba(46, 204, 113, .15); border: 2px solid #2ecc71; color: #2ecc71; }
.testconn-icon--fail { background: rgba(255, 90, 90, .15); border: 2px solid #ff5a5a; color: #ff5a5a; }
@keyframes testconn-spin { to { transform: rotate(360deg); } }

/* ---------- language/country selects ---------- */
.lang-select-wrap {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lang-select-wrap .screen__label {
  width: 100%;
  max-width: 480px;
  text-align: left;
  margin: 0 0 10px;
}
.lang-select-wrap .screen__label + .std-select + .screen__label,
.lang-select-wrap .screen__label + .lang-picker + .screen__label {
  margin-top: 56px;
}

/* Language picker — a custom dropdown instead of a native <select>, only
   because a native <option> can't render the "AI-translated" icon next
   to a language's name (browsers ignore any markup inside <option> and
   show text only). Closed, it's styled identically to .std-select. */
.lang-picker { position: relative; width: 100%; max-width: 480px; }
.lang-picker__trigger {
  width: 100%;
  text-align: left;
  font-weight: 400;
}
.lang-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: #02102c;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 20;
  padding: 6px;
}
.lang-picker__opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.lang-picker__opt:hover { background: rgba(255,255,255,0.08); }
.lang-picker__opt.is-selected { background: rgba(24,200,212,.16); color: var(--teal); }
.lang-picker__ai {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  /* the source SVG is drawn in dark navy (for a light background) —
     force it to solid white so it reads against this dark dropdown
     instead of swapping in a separate light/dark asset */
  filter: brightness(0) invert(1);
}
.std-select {
  width: 100%;
  max-width: 480px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23aebfde' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.std-select:focus { outline: none; border-color: var(--teal); }
.std-select option { background: #02102c; color: #fff; }

/* ---------- footer actions ---------- */
.screen__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.linkbtn {
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px;
  transition: color .18s ease;
}
.linkbtn:hover { color: var(--teal-bright); }
.linkbtn[disabled] { opacity: .3; cursor: not-allowed; pointer-events: none; }
.linkbtn .arrow { width: 40px; height: 13px; }

/* ---------- option pills (language) ---------- */
.options { display: flex; flex-direction: column; gap: 13px; align-items: center; margin-top: 180px; }
.pill {
  width: 70%;
  min-width: 180px;
  box-sizing: border-box;
  text-align: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--navy-600);
  background: rgba(10, 30, 68, .35);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s ease;
}
.pill:hover { border-color: var(--teal); color: #fff; }
.pill.is-selected {
  background: #fff;
  color: var(--navy-900);
  border-color: #fff;
}

/* ---------- vehicle grid ---------- */
.vgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 11px;
  margin-top: 6px;
}
.vehicle {
  padding: 11px 8px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #fff;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .2px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: all .16s ease;
  /* Full vehicle names vary a lot in length (e.g. "Mercedes Actros 1851
     LS 4x2 E6" vs "MAN TGX") — wrap onto a second line for the longer
     ones instead of clipping with an ellipsis, since a truncated model
     name is actively misleading on an evaluation button. The pill's
     border-radius still rounds fully, so a wrapped 2-line button reads
     as a slightly taller capsule rather than a perfect circle-ended
     pill — an acceptable tradeoff for never hiding part of a name. */
  white-space: normal;
  position: relative;
}
.vehicle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--brand, var(--navy-600)), var(--brand-b, var(--brand, var(--navy-600))));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.vehicle:hover {
  transform: none;
}
.vehicle.is-selected {
  background: linear-gradient(135deg, var(--brand, var(--teal)), var(--brand-b, var(--brand, var(--teal))));
  color: #fff;
  border: 1.5px solid #fff;
  box-shadow: 0 0 22px -3px var(--brand, var(--teal)), 0 0 28px -8px var(--brand-b, var(--brand, var(--teal)));
}
/* DAF's two-tone orange pair blends into a muddy mid-tone at the midpoint of a
   smooth gradient — use hard stops so it reads as two crisp blocks of colour instead. */
.vehicle[data-brand="daf"]::before {
  background: linear-gradient(135deg, var(--brand, #7c2d10) 0%, var(--brand, #7c2d10) 25%, var(--brand-b, #ff8000) 75%, var(--brand-b, #ff8000) 100%);
}
.vehicle.is-selected[data-brand="daf"] {
  background: linear-gradient(135deg, var(--brand, #7c2d10) 0%, var(--brand, #7c2d10) 25%, var(--brand-b, #ff8000) 75%, var(--brand-b, #ff8000) 100%);
}
.vehicle-chip[data-brand="daf"]::before {
  background: linear-gradient(135deg, var(--chip, #7c2d10) 0%, var(--chip, #7c2d10) 25%, var(--chip-b, #ff8000) 75%, var(--chip-b, #ff8000) 100%);
}
/* Mercedes runs its silver/black pair the other way (bottom-left to top-right). */
.vehicle[data-brand="mercedes"]::before {
  background: linear-gradient(315deg, var(--brand, #c2c2c2), var(--brand-b, var(--brand, #c2c2c2)));
}
.vehicle.is-selected[data-brand="mercedes"] {
  background: linear-gradient(315deg, var(--brand, #c2c2c2), var(--brand-b, var(--brand, #c2c2c2)));
}
.vehicle-chip[data-brand="mercedes"]::before {
  background: linear-gradient(315deg, var(--chip, #c2c2c2), var(--chip-b, var(--chip, #c2c2c2)));
}
.bar-fill[data-brand="mercedes"] {
  background: linear-gradient(270deg, var(--a, #c2c2c2), var(--b, #3a3a3a));
}
.vehicle.is-selected::before { display: none; }

/* ---------- progress stepper ---------- */
.stepper { display: flex; align-items: center; margin: 6px 0 clamp(28px, 8vh, 100px); }
.stepper__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--navy-600);
  flex: 0 0 auto;
  transition: all .25s ease;
}
.stepper__line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--navy-600);
  transition: background .25s ease;
}
.stepper__dot.is-done { background: var(--step, var(--teal)); }
.stepper__line.is-done { background: var(--step, var(--teal)); }
.stepper__dot.is-current {
  width: 15px; height: 15px;
  background: var(--step, var(--teal));
  box-shadow: 0 0 14px -1px var(--step, var(--teal));
}

/* ---------- sliders ---------- */
.metric { margin-bottom: 30px; }
.metric__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.metric__label { font-size: 15px; font-weight: 600; }
.metric__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--teal-bright);
  font-variant-numeric: tabular-nums;
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--track, var(--navy-700));
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 3px solid var(--track, var(--teal));
  box-shadow: 0 0 14px -1px var(--track, var(--teal-bright));
  cursor: pointer;
  transition: transform .12s ease;
}
.slider::-webkit-slider-thumb:active { transform: scale(1.12); }
.slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 3px solid var(--track, var(--teal));
  box-shadow: 0 0 14px -1px var(--track, var(--teal-bright));
  cursor: pointer;
}
.metric__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: .04em;
}

/* ---------- cover / intro ---------- */
.cover {
  max-width: 520px;
  min-height: 660px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  cursor: pointer;
  border: 1px solid rgba(24, 200, 212, .25);
  background:
    radial-gradient(120% 90% at 42% 28%, rgba(46, 230, 239, .55), transparent 55%),
    radial-gradient(120% 120% at 80% 90%, rgba(10, 60, 70, .9), transparent 60%),
    linear-gradient(150deg, #07303a 0%, #042033 45%, #02102c 100%);
  box-shadow: var(--shadow);
  animation: fade .4s ease both;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: url("assets/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cover > * { position: relative; z-index: 1; }
/* Cab Assessment's vehicle chip sits as its own flex child between the logo
   and the text block, not inside either — the auto margins soak up the free
   space above and below it, centering it in the large empty gap rather than
   sitting flush against the logo or the text. */
.cover__chip-mid { align-self: flex-start; margin: auto 0; }
.cover__bottom {
  display: grid;
  grid-template-areas: "eyebrow eyebrow" "title cta";
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px 0;
}
/* Cab Assessment's title ("ASSESSMENT") runs much wider than Test Drive's,
   so sharing a row with the cta squeezed it into an awkward 3-line wrap —
   give the cta its own full-width row underneath instead. */
.form-cab .cover__bottom { grid-template-areas: "eyebrow eyebrow" "title title" "cta cta"; }
.form-cab .cover__cta { justify-self: start; margin-top: 6px; }
.cover__eyebrow {
  grid-area: eyebrow;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(234, 242, 255, .8);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cover__title {
  grid-area: title;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: clamp(52px, 10vw, 88px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: 0.07px;
  text-transform: uppercase;
  margin: 0;
}
/* Test Drive and Cab Assessment run in different rooms/setups, so their
   intro titles can be sized independently instead of sharing one value. */
.form-testdrive .cover__title { font-size: clamp(64px, 14vw, 140px); }
.cover__cta {
  grid-area: cta;
  margin-top: 0;
  font-family: 'ScaniaSansHeadline', var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
}
.cover__cta .arrow {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

/* ---------- thank you ---------- */
.thanks { text-align: center; align-items: center; justify-content: center; }
.thanks .screen__head { align-self: stretch; }
.thanks__wrap { margin: auto; display: flex; flex-direction: column; align-items: center; }
.thanks__title { font-family: 'ScaniaSansHeadline', var(--font); font-size: 44px; font-weight: 900; text-transform: uppercase; margin: 0 0 14px; letter-spacing: -.03em; }
.thanks__msg { color: #fff; font-size: 15px; max-width: 320px; line-height: 1.5; }
.thanks__btns { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.thanks__countdown { color: var(--ink-faint); font-size: 13px; margin-top: 28px; letter-spacing: .04em; }
.btn-pill {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--teal);
  background: rgba(2, 16, 44, .4);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s ease;
}
.btn-pill:hover { background: var(--teal); color: var(--navy-900); }
.btn-pill.ghost { border-color: var(--navy-600); }
.btn-pill.ghost:hover { background: var(--navy-700); color: #fff; }

/* ============================================================
   RESULTS  (wide landscape views)
   ============================================================ */
.results { width: 100%; max-width: 1180px; }
.results__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
}
.results__head h1 {
  letter-spacing: -.02em;
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: .01em;
}
.results__head p { color: var(--ink-dim); margin: 6px 0 0; font-size: 14px; }
.results__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; }
.results__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filter-bar--market { margin-bottom: 22px; }
.filter-bar__label { font-size: 12px; font-weight: 700; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; margin-right: 4px; white-space: nowrap; }
.filter-btn { background: rgba(2,16,44,.6); border: 1.5px solid rgba(27,50,98,.9); border-radius: 999px; color: var(--ink-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 6px 16px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.filter-btn:hover { border-color: var(--teal); color: #fff; }
.filter-btn.is-active { background: var(--teal); border-color: var(--teal); color: var(--navy-900); }
.filter-select {
  background: rgba(2,16,44,.6);
  border: 1.5px solid rgba(27,50,98,.9);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 34px 6px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aebfde' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .15s;
}
.filter-select:hover, .filter-select:focus { outline: none; border-color: var(--teal); }
.filter-select option { background: #02102c; color: #fff; }

.form-switcher { display: flex; gap: 0; margin-bottom: 24px; background: rgba(255,255,255,.04); border-radius: 999px; padding: 3px; border: 1px solid rgba(255,255,255,.08); width: fit-content; }
.conn-test-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.conn-test-row .form-switcher { margin-bottom: 0; }
.conn-test-row__tools { display: flex; align-items: center; gap: 8px; }

/* icon-only "Refresh results" button — idle arrow, spins while loading,
   swaps to a checkmark on completion, then settles back to the arrow. */
.btn-icon {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
}
/* Absolutely positioned rather than flex-centered: an SVG flex item sized
   only through CSS width/height was measuring 0 wide in Chrome here even
   with matching width/height attributes — sidestep it by taking both
   icons out of flex layout entirely. */
.btn-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}
.btn-icon .icon-check { display: none; }
.btn-icon.is-loading { cursor: default; }
.btn-icon.is-loading .icon-refresh { animation: btn-icon-spin .8s linear infinite; }
.btn-icon.is-done .icon-refresh { display: none; }
.btn-icon.is-done .icon-check { display: block; }
@keyframes btn-icon-spin { to { transform: rotate(360deg); } }
.form-btn { background: transparent; border: none; color: var(--ink-dim); font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .05em; padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.form-btn.is-active { background: var(--teal); color: var(--navy-900); }
body.admin .form-btn { font-size: 13px; padding: 7px 18px; }

.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-dim);
}
.empty h2 { color: var(--ink); font-weight: 800; text-transform: uppercase; }

/* landscape card */
.card {
  position: relative;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(20, 44, 92, .4), rgba(2, 16, 44, .1) 40%),
    var(--navy-900);
  border: 1px solid rgba(27, 50, 98, .8);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: url("assets/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.card__title { font-size: 22px; font-weight: 800; text-transform: uppercase; margin: 0; line-height: 1.1; max-width: 60%; letter-spacing: -.02em; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 22px;
}

/* horizontal bars */
.bars { display: flex; flex-direction: column; gap: 13px; }
.bar-row { display: flex; align-items: center; gap: 0; }
.bar-track {
  position: relative;
  flex: 1;
  height: 34px;
  border-radius: 8px;
  background: rgba(10, 30, 68, .5);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 18px -4px var(--b);
  display: flex;
  align-items: center;
  min-width: 64px;
  transition: width .9s cubic-bezier(.2, .8, .25, 1);
}
.bar-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  padding-left: 14px;
  text-shadow: none;
  white-space: nowrap;
  font-family: 'ScaniaSansHeadline', var(--font);
}
.bar-score {
  width: 46px;
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: 'ScaniaSansHeadline', var(--font);
  color: #fff;
  padding-left: 10px;
}
.bar-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-right: 56px;
  color: var(--ink-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 6px;
}

/* radar / group card */
.group-card { display: grid; grid-template-columns: max-content 1fr; gap: 20px; align-items: center; }
.group-list { display: flex; flex-direction: column; gap: 7px; padding-right: 6px; }
.group-row { display: flex; align-items: center; gap: 12px; }
.group-row .vehicle {
  flex: 1;
  cursor: default;
  font-size: 11px;
  padding: 8px 10px;
}
.group-row .vehicle::before { content: ''; position: absolute; inset: 0; border-radius: 999px; padding: 1.5px; background: linear-gradient(135deg, var(--brand, var(--navy-600)), var(--brand-b, var(--brand, var(--navy-600)))); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.group-row .vehicle:hover { transform: none; box-shadow: none; }
.group-row__score { font-size: 15px; font-weight: 800; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.radar-wrap { display: flex; flex-direction: column; align-items: center; margin-top: -24px; }
.radar-legend--interactive { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.radar-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; user-select: none; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); transition: color .15s, border-color .15s; }
.radar-tag:hover { border-color: rgba(255,255,255,.22); }
.radar-tag__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--c); opacity: .25; transition: opacity .15s; flex-shrink: 0; }
.radar-tag.is-on { color: #fff; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.radar-tag.is-on .radar-tag__swatch { opacity: 1; }

/* ============================================================
   EDITOR
   ============================================================ */
.editor { width: 100%; max-width: 880px; }
.editor__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.editor__head h1 { font-size: 30px; font-weight: 900; text-transform: uppercase; margin: 0; letter-spacing: -.02em; }
.editor__hint { color: var(--ink-dim); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }

/* ---------- sheets config ---------- */
.group-setter { display: flex; align-items: center; gap: 10px; }
.group-setter__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.group-setter__wrap { position: relative; }
.group-setter__toggle {
  background: rgba(2,16,44,.6); border: 1.5px solid rgba(27,50,98,.9);
  border-radius: 999px; color: var(--ink-dim); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; padding: 8px 18px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s; width: 160px; text-align: center;
}
.group-setter__toggle.is-set { border-color: var(--teal); color: #fff; }
.group-setter__toggle:hover { border-color: var(--teal); color: #fff; }
.group-setter__dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: rgba(4,20,54,.97); border: 1px solid rgba(27,50,98,.9);
  border-radius: 12px; padding: 6px; z-index: 100;
  display: grid; grid-template-columns: 1fr; gap: 4px;
  width: 160px; opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity .15s, transform .15s;
}
.group-setter__dropdown.is-open { opacity: 1; pointer-events: all; transform: translateY(0); }
.group-setter__item {
  background: none; border: none; border-radius: 8px; color: var(--ink-dim);
  font-size: 13px; font-weight: 700; padding: 8px 12px; cursor: pointer;
  text-align: center; transition: background .12s, color .12s;
}
.group-setter__item:hover { background: rgba(27,50,98,.6); color: #fff; }
.group-setter__item.is-active { background: var(--teal); color: var(--navy-900); }
.sheets-cfg { background: rgba(10,30,68,.45); border: 1px solid rgba(27,50,98,.8); border-radius: 14px; padding: 22px 24px; margin-bottom: 32px; }
.sheets-cfg__title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; color: var(--teal-bright); }
.sheets-cfg__hint { color: var(--ink-dim); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.sheets-cfg__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sheets-cfg__input { flex: 1; min-width: 240px; background: rgba(2,16,44,.6); border: 1px solid rgba(27,50,98,.9); border-radius: 8px; color: #fff; font-size: 13px; padding: 10px 14px; outline: none; }
.sheets-cfg__input:focus { border-color: var(--teal); }
.sheets-cfg__input[readonly] { color: var(--ink-dim); background: rgba(2,16,44,.3); cursor: not-allowed; }
.sheets-cfg__input[readonly]:focus { border-color: rgba(27,50,98,.9); }
.sheets-cfg__status { font-size: 13px; color: var(--ink-dim); margin: 10px 0 0; }

.qcard {
  background: linear-gradient(180deg, rgba(20, 44, 92, .35), rgba(2, 16, 44, .1) 50%), var(--navy-900);
  border: 1px solid rgba(27, 50, 98, .8);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.qcard__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.qcard__idx {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--teal);
  color: var(--navy-900);
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.qcard__code { font-size: 12px; color: var(--ink-dim); opacity: .7; cursor: help; }
.qcard__bar .spacer { flex: 1; }
.tr-badge { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.tr-badge--ok { color: #5fe0a0; border-color: rgba(95, 224, 160, .4); }
.tr-badge--stale { color: #ffbe50; border-color: rgba(255, 190, 80, .55); }
.tr-badge--unverified { color: var(--ink-dim); border-color: var(--navy-600); }
.tr-badge--missing { color: var(--ink-faint); border-color: var(--navy-600); }
.tr-badge__btn { padding: 5px 12px; font-size: 12px; }
.qcard__catlabel { font-size: 15px; font-weight: 800; color: var(--teal-bright); }

.lang-edit-bar { background: rgba(10,30,68,.45); border: 1px solid rgba(27,50,98,.8); border-radius: 14px; padding: 20px 24px; margin-bottom: 32px; }
.lang-edit-bar label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.lang-edit-bar__hint { color: var(--ink-dim); font-size: 13px; margin: 12px 0 0; line-height: 1.5; }
.field__en { display: block; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-dim); opacity: .7; font-weight: 400; margin-top: 2px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.input, .textarea {
  width: 100%;
  background: var(--navy-700);
  border: 1px solid var(--navy-600);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;            /* >=16px avoids iOS focus-zoom */
  padding: 12px 14px;
  resize: vertical;
}
.input:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24, 200, 212, .15); }

.renumber-bar { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 14px 18px; border: 1px dashed var(--navy-600); border-radius: var(--radius-sm); }
.renumber-bar p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.icon-picker { display: flex; align-items: center; gap: 12px; }
.icon-picker__preview, .icon-picker__empty {
  width: 64px; height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--navy-800);
  border: 1px solid var(--navy-600);
  object-fit: contain;
  padding: 6px;
}
.icon-picker__preview--cab { background: #10305f; }   /* cab icons are white line art — need a dark ground */
.icon-picker__empty {
  display: grid; place-items: center;
  font-size: 10px; color: var(--ink-faint); text-align: center;
}

.metric-edit {
  border: 1px dashed var(--navy-600);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
}
.metric-edit__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 64px;
  gap: 10px;
  align-items: end;
}

.iconbtn {
  background: rgba(10, 30, 68, .6);
  border: 1px solid var(--navy-600);
  color: var(--ink-dim);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: all .15s ease;
}
.iconbtn:hover { color: #fff; border-color: var(--teal); }
.iconbtn.danger:hover { color: #fff; background: #c1121f; border-color: #c1121f; }
.iconbtn[disabled] { opacity: .25; cursor: not-allowed; }

.btn {
  background: var(--teal);
  border: none;
  color: var(--navy-900);
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .16s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--navy-600); }
.btn.secondary:hover { border-color: var(--teal); }
.btn.add { width: 100%; background: transparent; color: var(--teal); border: 1.5px dashed var(--teal); margin-top: 4px; }
.btn.add:hover { background: rgba(24, 200, 212, .1); }

.editor__foot {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding: 16px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: linear-gradient(0deg, var(--navy-900) 30%, transparent);
  border-radius: var(--radius);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--teal);
  color: var(--navy-900);
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 999px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .group-card { grid-template-columns: 1fr; }
  .group-list { max-height: none; order: 2; }
  .card__title { max-width: 100%; }
  .cover__title { font-size: clamp(52px, 10vw, 88px); }
  .metric-edit__grid { grid-template-columns: 1fr 1fr; }
  .topnav__links .navlink { padding: 8px 9px; font-size: 12px; }
}
@media (max-width: 480px) {
  .cover__bottom {
    grid-template-areas: "eyebrow" "chip" "title" "cta";
    grid-template-columns: 1fr;
  }
  .cover__cta { align-self: start; margin-top: 18px; }

  /* narrow phones: two columns leaves too little width for longer vehicle
     names (e.g. "Volvo FH Electric", "Mercedes eActros") and they get
     ellipsis-truncated — shrink the pill typography so full names fit
     while keeping the 2-column grid (a 1-column grid would double the
     list height and overflow the fixed-height kiosk screen). */
  .vehicle { font-size: 10px; letter-spacing: .5px; padding: 8px 5px; }
}

/* ============================================================
   TOUCH DEVICES — bigger hit targets, no sticky hover
   ============================================================ */
@media (pointer: coarse) {
  /* sliders: easy to grab, and dragging never scrolls the page */
  .slider { height: 10px; touch-action: none; }
  .slider::-webkit-slider-thumb { width: 32px; height: 32px; border-width: 4px; }
  .slider::-moz-range-thumb { width: 32px; height: 32px; border-width: 4px; }
  .iconbtn { width: 44px; height: 44px; font-size: 17px; }
  .navlink { padding: 12px 15px; }
  .linkbtn { padding: 18px 4px; min-height: 56px; }
}

/* neutralise hover styles that would "stick" after a tap */
@media (hover: none) {
  .vehicle:hover { transform: none; box-shadow: none; }
  .pill:hover { color: var(--ink); border-color: var(--navy-600); }
  .navlink:hover { background: none; color: var(--ink-dim); }
  .btn:hover { filter: none; }
  .btn.add:hover { background: transparent; }
  .btn-pill:hover { background: rgba(2, 16, 44, .4); color: #fff; }
  .btn-pill.ghost:hover { background: rgba(2, 16, 44, .4); }
  .iconbtn:hover { color: var(--ink-dim); border-color: var(--navy-600); }
  .linkbtn:hover { color: var(--ink); gap: 10px; }
}

/* ============================================================
   iPad / TABLET — kiosk-sized evaluation screen, both orientations
   (scoped to iPad-class viewports ≤1366px so large desktops are unchanged;
   covers every iPad size in portrait and landscape)
   ============================================================ */
@media (min-width: 760px) and (max-width: 1366px) {
  .app {
    align-items: center;
    min-height: calc(100dvh - 64px - env(safe-area-inset-top));
    padding: 30px 28px calc(46px + env(safe-area-inset-bottom));
  }
  /* no nav to restart. Uses --vh, not 100dvh — .app's own height (below, in
     the fullscreen kiosk block) is already set from --vh; min-height and
     height are different properties and don't override one another, so a
     stale dvh-based min-height here could still force .app taller than the
     real viewport even after that fix, pushing .cover (centered inside it)
     down and off the bottom of the screen. */
  body.test .app { min-height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-top)); }
  body.test .screen__foot  { margin-top: auto; }
  body.admin .app { align-items: flex-start; }

  /* Lock all admin UI element sizes — prevent tablet overrides from inflating them */
  body.admin .btn { font-size: 13px; padding: 11px 18px; }
  body.admin .filter-btn { font-size: 12px; padding: 6px 16px; }
  body.admin .radar-tag { font-size: 11px; padding: 5px 10px; }
  body.admin .navlink { font-size: 13px; padding: 8px 14px; }
  body.admin .vehicle { font-size: 11px; padding: 8px 10px; }

  /* the evaluation "screen" fills the iPad comfortably and adapts to orientation */
  .screen {
    max-width: 700px;
    min-height: min(960px, calc(100dvh - 150px - env(safe-area-inset-top)));
    padding: 44px 48px 38px;
    --pad-x: 48px;
    --pad-top: 44px;
    border-radius: 28px;
  }
  .screen__head .logo { height: 23px; }
  .question-icon { width: 112px; height: 112px; margin-bottom: 24px; }
  /* narrower gap between the cab-assessment icon and its instruction text —
     the default clamp(24px, 5vh, 44px) left the text column too narrow for
     a long multi-sentence instruction (e.g. "Cab Entry"), wrapping it into
     three ragged lines instead of two clean ones. */
  .question-head--cab { gap: 24px; }
  .route-icon { height: clamp(120px, 15vh, 220px); }
  .screen__title { font-size: 30px; margin-top: 32px; }
  .screen__sub { font-size: 20px; margin-top: 28px; }
  .screen__label { font-size: 18px; margin: 32px 0 22px; }

  /* stepper */
  .stepper__dot { width: 14px; height: 14px; }
  .stepper__dot.is-current { width: 19px; height: 19px; }

  /* language pills */
  .options { gap: 18px; margin-top: 180px; }
  .pill { width: 64%; font-size: 15px; padding: 18px 24px; letter-spacing: .14em; }

  /* vehicle grid */
  .vehicle-section { margin-top: 100px; }
  .vgrid { gap: 20px 16px; margin-top: 16px; }
  .vehicle { padding: 10px 5px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .group-row .vehicle { font-size: 11px; padding: 8px 10px; min-height: unset; }
  .vehicle-chip { font-size: 14px; padding: 0 20px; height: 32px; }
  .screen__head { min-height: 60px; }   /* 32px (.vehicle-chip height on tablet) + 14px+14px padding */

  /* sliders / metrics */
  .metric { margin-bottom: 42px; }
  .metric__label { font-size: 19px; }
  .metric__top { margin-bottom: 16px; }
  .metric__value { font-size: 21px; }
  .metric__ends { font-size: 15px; margin-top: 18px; }
  .slider { height: 10px; }
  .slider::-webkit-slider-thumb { width: 30px; height: 30px; border-width: 4px; }
  .slider::-moz-range-thumb { width: 30px; height: 30px; border-width: 4px; }

  /* footer actions */
  .screen__foot { padding-top: 34px; }
  .linkbtn { font-size: 18px; }
  .linkbtn .arrow { width: 48px; height: 15px; }

  /* cover */
  .cover {
    max-width: 640px;
    min-height: min(920px, calc(100dvh - 120px - env(safe-area-inset-top)));
    padding: 44px;
    border-radius: 28px;
  }
  .cover__eyebrow { font-size: 18px; }
  .cover__title { font-size: clamp(52px, 10vw, 88px); }
  .cover__cta { font-size: 15px; margin-top: 26px; }

  /* thank you */
  .thanks__title { font-size: 58px; }
  .thanks__msg { font-size: 18px; max-width: 380px; }
  .btn-pill { padding: 16px 26px; font-size: 14px; }
}

/* iPad landscape: let the screen breathe horizontally without getting too tall.
   max-height was 800px, which excluded the iPad 9th gen — the model actually
   deployed on the kiosk tablet, at 1080x810 landscape (810 > 800) — raised to
   830px so it's included, while iPad Pro 11"/12.9" (834px/1024px) still fall
   through to the roomier default tablet rules above. */
@media (min-width: 760px) and (max-width: 1366px) and (orientation: landscape) and (max-height: 830px) {
  .cover__title { font-size: 76px; }
  .form-testdrive .cover__title { font-size: 96px; }
  .screen { padding: 20px clamp(28px,6vw,80px) 20px; --pad-x: clamp(28px,6vw,80px); --pad-top: 20px; }
  .screen__title { font-size: 22px; }
  .screen__label { margin: 16px 0 12px; }
  /* the vehicle grid's 100px top margin (set for the roomier default tablet
     rules above) pushed a 6-row grid down far enough to overlap the
     absolutely-positioned footer on the iPad 9th gen's 810px-tall landscape
     viewport — confirmed by measuring the grid's bottom edge past the
     footer's top edge at that exact size. */
  .vehicle-section { margin-top: 24px; }
  .vgrid { gap: 8px 11px; }
  .vehicle { padding: 7px 8px; }
  .screen__foot { margin-top: 16px; }
  /* Moved the question head up (40.5px → 16px) to free up room for a
     question-to-slider gap that's the same fixed size on every question,
     instead of the roomy ~81px default some categories got and the cramped
     16px others needed to avoid overlapping the footer. */
  body.test .screen__body .question-head { margin-top: 16px; }
  body.test .screen__body .question-metrics-cab,
  body.test .screen__body .question-metrics { margin-top: 36px; }
  /* A Cab Assessment category with 2+ sliders and a long instruction (e.g.
     an admin-edited "Cab Entry" or "Driver ergonomics") still needed its
     icon, instruction and inter-slider spacing tightened further on top of
     the above to fit above the footer on the iPad 9th gen's exact 1080x810
     landscape viewport — measured overlaps of up to 156px before these. */
  body.test .screen__body:has(.metric:nth-of-type(2)) .question-icon,
  body.test .screen__body:has(.metric:nth-of-type(2)) .route-icon { width: 70px; height: 70px; }
  body.test .screen__body:has(.metric:nth-of-type(2)) .screen__sub { font-size: 14px; line-height: 1.3; }
  body.test .screen__body:has(.metric:nth-of-type(2)) .metric { margin-bottom: 8px; }
  /* the gap above the instruction text now lives on the .screen__sub-group
     wrapper, not on each individual .screen__sub paragraph inside it — Test
     Drive still nests that group inside .question-head__text, while Cab
     Assessment's icon+title row now has it as a plain sibling, so both
     need their own selector here. */
  body.test .screen__body:has(.metric:nth-of-type(2)) .question-head__text .screen__sub-group { margin-top: 8px; }
  body.test .screen__body:has(.metric:nth-of-type(2)) .question-head--cab + .screen__sub-group { margin-top: 2px; }
  body.test .screen__body:has(.metric:nth-of-type(2)) .question-metrics-cab { margin-top: 8px; }
  /* Cab Assessment: every question gets those same compact sizes, not just
     the ones with several sliders — the icon, text and gaps no longer change
     size from one question to the next. The tallest question (three sliders)
     decides what fits, so that is the size they all share. */
  body.test .screen__body:has(.question-head--cab) .question-icon { width: 70px; height: 70px; }
  body.test .screen__body:has(.question-head--cab) .screen__sub { font-size: 14px; line-height: 1.3; }
  body.test .screen__body:has(.question-head--cab) .metric { margin-bottom: 8px; }
  body.test .screen__body:has(.question-head--cab) .question-head--cab + .screen__sub-group { margin-top: 2px; }
  body.test .screen__body:has(.question-head--cab) .question-metrics-cab { margin-top: 8px; }
  /* Same centring as in portrait (see there) for the three-slider question:
     in a browser window rather than the full-screen app it ran into the
     BACK/NEXT buttons while sitting well below the progress bar. */
  body.test .screen:has(.metric:nth-of-type(3)) .stepper { margin-bottom: 0; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-head--cab { margin-top: auto; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-metrics-cab { margin-bottom: auto; }
  body.test .screen { padding: 12px clamp(28px,6vw,80px) 12px; --pad-x: clamp(28px,6vw,80px); --pad-top: 12px; }
  body.test .screen__title { margin-top: 0; }
  body.test .screen__foot  { margin-top: 12px; }
}

/* Narrow laptop windows that are also very short (e.g. ~1280x680): the
   iPad-landscape rules above already sit at their floor for icon, text and
   gaps between sliders, and the three-slider question was still ~16px too
   tall — so tighten the spacing inside each slider as well. */
@media (min-width: 760px) and (max-width: 1366px) and (orientation: landscape) and (max-height: 700px) {
  body.test .screen__body:has(.question-head--cab) .metric__top { margin-bottom: 8px; }
  body.test .screen__body:has(.question-head--cab) .metric__ends { margin-top: 8px; }
}

/* Laptop / desktop windows: wider than the tablet rules above stop at
   (1366px) but often short — a MacBook browser window is typically ~780-860px
   tall — and with the full-size desktop spacing the Cab Assessment questions
   with several sliders ran into the BACK/NEXT buttons ("Cab Entry" by ~190px
   at 1440x780, the two-slider "Driver ergonomics" by ~30px). Compact them the
   same way the iPad landscape rules do, just less tightly since there's more
   room, and centre the three-slider one between the progress bar and the
   footer. Questions with a single slider already fit and are left alone. */
@media (min-width: 1367px) and (max-height: 1000px) {
  body.test .screen__body:has(.question-head--cab) .question-icon { width: 80px; height: 80px; }
  body.test .screen__body:has(.question-head--cab) .screen__sub { font-size: 17px; line-height: 1.3; }
  body.test .screen__body:has(.question-head--cab) .metric { margin-bottom: 16px; }
  body.test .screen__body:has(.question-head--cab) .question-head--cab + .screen__sub-group { margin-top: 10px; }
  body.test .screen__body:has(.question-head--cab) .question-metrics-cab { margin-top: 30px; }
  body.test .screen:has(.metric:nth-of-type(3)) .stepper { margin-bottom: 0; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-head--cab { margin-top: auto; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-metrics-cab { margin-bottom: auto; }
}
/* Very short windows (small MacBook screen with a bookmarks bar, ~700px):
   the above is still ~20px short, even for the long single-slider questions,
   so tighten the gap under the progress bar and the multi-slider spacing a
   bit more. */
@media (min-width: 1367px) and (max-height: 740px) {
  body.test .screen:has(.question-head--cab) .stepper { margin-bottom: 20px; }
  body.test .screen__body .question-head--cab { margin-top: 16px; }
  body.test .screen__body:has(.question-head--cab) .question-icon { width: 70px; height: 70px; }
  body.test .screen__body:has(.question-head--cab) .screen__sub { font-size: 15px; }
  body.test .screen__body:has(.question-head--cab) .metric { margin-bottom: 10px; }
  body.test .screen__body:has(.question-head--cab) .question-metrics-cab { margin-top: 20px; }
}

/* iPad / kiosk-tablet PORTRAIT: the tall aspect ratio leaves a lot of vertical
   room between the header/stepper and the footer buttons — most questions
   have at most two sliders, so the content block ends up pinned to the top
   with a large empty gap beneath it. Centre it in the space rather than
   top-anchoring, biased toward the top third (the padding-bottom shrinks the
   box being centred against, from the bottom only, pulling the centred
   content upward). */
@media (min-width: 760px) and (max-width: 1366px) and (orientation: portrait) {
  body.test .screen__body { justify-content: center; padding-bottom: 16vh; }
  /* Question screens: centering the whole block (icon + title + sliders) as
     a unit means its top edge shifts depending on how many sliders that
     question has — pin the title to a fixed distance from the top instead,
     so it's the same on every question regardless of content length. The
     sliders below just follow their own normal spacing under it. */
  body.test .screen__body:has(> .question-head) { justify-content: flex-start; padding-bottom: 0; }
  /* Language and vehicle-choice screens: centring each one on its own content put the title at a different height
     depending on how much there is below it. Pin the title to the same distance from the top on all of them. */
  body.test .screen__body:has(> .screen__title:first-child) { justify-content: flex-start; padding-top: 9vh; padding-bottom: 0; }
  /* Fixed distance from the progress bar to the question, the same on every
     question regardless of how many sliders or how long the instruction is —
     moved up further (15vh → 10vh → 8vh → 8vh-20px) so a tall question (e.g.
     Cab Entry's 3-line head + 3-sentence instruction) doesn't sit noticeably
     lower than a short one. */
  body.test .screen__body .question-head { margin-top: calc(8vh - 20px); }
  /* Cab Assessment only — moved up an additional 40px on top of the shared
     value above, since its questions (icon+title row, then a separate
     full-width instruction block) run taller than Test Drive's. */
  body.test .screen__body .question-head--cab { margin-top: calc(8vh - 60px); }
  /* The Cab Assessment question with three sliders ("Cab Entry") is the
     tallest one, and when the page is open in a browser rather than as the
     full-screen app (address bar and toolbars eat into the height) it no
     longer fit — its last slider ran into the BACK/NEXT buttons. Instead
     of pinning it to the top like the others, centre it in the space
     between the progress bar and the footer. Auto margins rather than
     justify-content:center, on purpose: when there is less room than it
     needs they collapse to zero and it simply sits at the top, instead of
     being pushed up underneath the progress bar. */
  body.test .screen:has(.metric:nth-of-type(3)) .stepper { margin-bottom: 0; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-head--cab { margin-top: auto; }
  body.test .screen__body:has(.metric:nth-of-type(3)) .question-metrics-cab { margin-bottom: auto; }
  /* Test Drive only: a category with a 3rd slider pushed its last slider's
     end-labels under the footer buttons at the iPad 9th gen's exact
     810x1080 portrait size (a 23px overlap), so it tightens the gap between
     sliders. Cab Assessment no longer needs this — its three-slider question
     is centred (see above) — and uses one slider gap for every question
     instead (next rule). */
  body.test .screen__body:has(.metric:nth-of-type(3)):not(:has(.question-head--cab)) .metric { margin-bottom: 10px; }
  /* Cab Assessment: the same gap between sliders on every question — the
     three-slider one used to be packed tighter than the two-slider one. */
  body.test .screen__body:has(.question-head--cab) .metric { margin-bottom: 24px; }
  /* force the break at the title's own dash (see splitTitleAtDash in
     cab.js) rather than wherever the browser's word-wrap happens to land —
     keeps every dashed title to a clean two lines instead of occasionally
     spilling onto a third. Landscape leaves this inline (its narrower
     22px title font usually fits on one line anyway, and there's no
     vertical room to spare for a forced second line there). */
  .question-head--cab .screen__title .title-break { display: block; }
}

/* ============================================================
   TEST PAGE — fullscreen kiosk
   The flow fills the whole screen instead of floating as a card
   on a background. (Higher specificity wins over the blocks above.)
   ============================================================ */
body.test .app {
  padding: 0;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  align-items: stretch;
  justify-content: center;
}
body.test .screen {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 0;
  overflow: visible;   /* .app (same fixed height) clips vertically instead — mixing
                          overflow-x:visible with overflow-y:hidden computes to
                          overflow-x:auto per spec, which still clipped the header bleed */
  background: transparent;       /* no card surface — the page fills the screen */
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding:
    calc(clamp(40px, 8svh, 100px) + env(safe-area-inset-top))
    clamp(24px, 5vw, 60px)
    calc(90px + env(safe-area-inset-bottom) + var(--lift, 0px))
    clamp(24px, 5vw, 60px);
  --pad-x: clamp(24px, 5vw, 60px);
  --pad-top: calc(clamp(40px, 8svh, 100px) + env(safe-area-inset-top));
}
body.test .screen::before { opacity: .08; }   /* subtle pattern on question screens */
/* on wide screens the "screen" column itself is capped at 820px and centered,
   so the header's edge-to-edge bleed (above) only reached the column's own
   edges, not the window's — stretch it the rest of the way to the true
   viewport edges, padding out the extra so the logo/chip don't shift. */
body.test .screen__head {
  width: 100vw;
  margin-left: calc(-1 * var(--pad-x, 26px) - max(0px, (100vw - 820px) / 2));
  margin-right: calc(-1 * var(--pad-x, 26px) - max(0px, (100vw - 820px) / 2));
  padding-left: calc(var(--pad-x, 26px) + max(0px, (100vw - 820px) / 2));
  padding-right: calc(var(--pad-x, 26px) + max(0px, (100vw - 820px) / 2));
}
body.test .screen__foot {
  position: absolute;
  bottom: calc(30px + env(safe-area-inset-bottom) + var(--lift, 0px));
  left: clamp(24px, 5vw, 60px);
  right: clamp(24px, 5vw, 60px);
  padding-top: 0;
  margin-top: 0;
}
body.test .screen__foot .linkbtn { padding-left: 0; padding-right: 0; }

body.test .cover {
  max-width: none;
  width: 100%;
  margin: 0;
  min-height: calc(var(--vh, 1vh) * 100);
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding:
    calc(17px + env(safe-area-inset-top))   /* the logo's centre lines up with the logo in the header row of the other screens */
    clamp(28px, 6vw, 80px)
    calc(48px + env(safe-area-inset-bottom) + var(--lift, 0px))
    clamp(28px, 6vw, 80px);
}
body.test .bg-hex { display: none; }
body.test.is-intro .bg-hex { display: block; opacity: .7; }
/* The intro cover's own pattern layer must line up with the full-page pattern behind it (.bg-hex, fixed to the
   viewport). body.test is pushed down by the iPad status bar when the app runs from the home screen
   (env(safe-area-inset-top)), which moved the cover, and its pattern, away from the fixed one — the two patterns then
   read as one doubled pattern. Pull the cover's layer back up by that amount and give it the viewport's height. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
/* extra room under the intro text and the Back/Next buttons in the kiosk flow */
body.test { --lift: 60px; }
body.test .cover::before {
  top: calc(-1 * var(--safe-top));
  bottom: auto;
  height: calc(var(--vh, 1vh) * 100);
}
/* In the home-screen app the iPad status bar (clock, wifi, battery) sits over the strip above the content. On every
   screen except the intro, give that strip the header row's colour so the header seems to run all the way to the top. */
body.test:not(.is-intro)::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  background: var(--navy-900);
  z-index: 1;
  pointer-events: none;
}

/* fullscreen mode: belt-and-braces so nothing peeks at the edges */
body.test:fullscreen,
body.test:-webkit-full-screen { background: var(--navy-900); }

/* ============================================================
   PRESENT — 16:9 results slideshow (admin)
   A 720-unit-tall stage whose width follows the screen's aspect ratio (--sw), scaled to fit, so slides are pixel-consistent.
   ============================================================ */
.deck {
  position: fixed; inset: 0; z-index: 200;
  background: var(--navy-900);
  display: flex; flex-direction: column;
}
.slide-stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slide-stage { width: var(--sw, 1280px); height: var(--sh, 720px); flex: 0 0 auto; transform: scale(var(--s, 1)); transform-origin: center center; }

.slide {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  border-radius: 24px;
  background: var(--navy-900);
  padding: 66px 76px; display: flex; flex-direction: column;
}
.slide::before {
  content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none;
  background-image: url("assets/pattern.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide > * { position: relative; z-index: 1; }
.slide__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
.slide__title { font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1.02; margin: 0; max-width: 74%; letter-spacing: -.01em; font-family: 'ScaniaSansHeadline', var(--font); }
.slide__brand { display: inline-block; width: auto; height: 20px; opacity: .35; align-self: flex-start; }

.slide__bars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.slide .bar-track { height: 60px; border-radius: 14px; }
.slide .bar-fill { border-radius: 14px; min-width: 130px; }
.slide .bar-name { font-size: 24px; padding-left: 28px; }
.slide .bar-score { font-size: 20px; width: 64px; padding-left: 14px; font-family: 'ScaniaSansHeadline', var(--font); }
.slide__axis { margin-top: 8px; padding-right: 43px; font-size: 17px; border-top: none; padding-top: 0; }
.scale-rule { position: relative; height: 1px; background: rgba(255,255,255,.18); margin-right: 43px; margin-top: 22px; margin-bottom: 8px; }
.scale-rule::before, .scale-rule::after { content: ''; position: absolute; top: -5px; width: 1px; height: 11px; background: rgba(255,255,255,.18); }
.scale-rule::before { left: 0; }
.scale-rule::after { right: 0; }

.slide--group .slide__head { margin-bottom: 20px; }
.slide--group .slide__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 292px 1fr; gap: 20px; align-items: center; }
/* the radar is the focus: it climbs up beside the title and out to the slide's right edge */
.slide--group .slide__radar { margin: -70px -56px -50px 0; }
.slide--group .slide__list { gap: 12px; }
.slide--group .slide__veh { padding: 8px 10px; font-size: 20px; line-height: 1.15; white-space: nowrap; min-height: 50px; display: flex; align-items: center; justify-content: center; }
.slide__list { display: flex; flex-direction: column; gap: 6px; }
.slide__listrow { display: flex; align-items: center; gap: 14px; }
.slide__veh {
  flex: 1; text-align: center; padding: 8px 14px; border-radius: 999px;
  /* gradient outline as a real border (padding-box fill + border-box gradient): a masked ::before ring rendered
     unevenly under the stage's fractional scale (top/left about twice as thick as bottom/right) */
  border: 2px solid transparent;
  background: linear-gradient(var(--navy-900), var(--navy-900)) padding-box,
              linear-gradient(135deg, var(--brand, var(--navy-600)), var(--brand-b, var(--brand, var(--navy-600)))) border-box;
  font-weight: 700; font-size: 14.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
/* Cab Assessment: the radar takes the whole slide and the model tags sit below it in one row */
.slide--group.is-row { padding: 34px 64px 34px; }
.slide--group.is-row .slide__head { position: absolute; left: 64px; top: 34px; margin: 0; z-index: 2; }
.slide--group.is-row .slide__body { display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-height: 0; }
.slide--group.is-row .slide__radar { order: 1; flex: 1; min-height: 0; margin: 0; width: 100%; }
.slide--group.is-row .slide__radar > div { height: 100%; }
.slide--group.is-row .slide__radar svg { height: 100%; width: 100%; max-width: none !important; }
.slide--group.is-row .slide__list { order: 2; flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
.slide--group.is-row .slide__listrow { gap: 10px; flex: 0 0 auto; }
.slide--group.is-row .slide__veh { flex: 0 0 auto; width: 210px; }
.slide--group.is-row .slide__score { width: auto; min-width: 40px; text-align: left; }
/* Test Drive with six vehicles or fewer: large tags, widened so the longer truck names stay on one line */
.slide--group.is-wide .slide__body { grid-template-columns: 420px 1fr; }
.slide--group.is-wide .slide__veh { font-size: 18px; white-space: nowrap; }
/* more than six vehicles (Test Drive): wider column, one-line tags so all twelve fit */
.slide--group.is-compact .slide__body { grid-template-columns: 340px 1fr; }
.slide--group.is-compact .slide__list { gap: 6px; }
.slide--group.is-compact .slide__veh { padding: 5px 12px; font-size: 14.5px; min-height: 34px; white-space: nowrap; }
.slide__score { font-size: 21px; font-weight: 800; width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.slide__radar { display: flex; align-items: center; justify-content: center; }

.slide--cover {
  justify-content: space-between;
  background:
    radial-gradient(120% 90% at 40% 26%, rgba(46, 230, 239, .5), transparent 55%),
    radial-gradient(120% 120% at 82% 92%, rgba(10, 60, 70, .9), transparent 60%),
    linear-gradient(150deg, #07303a 0%, #042033 45%, #02102c 100%);
}
.slide--cover .logo { height: 34px; }
.slide__lockup { height: 32px; width: auto; align-self: flex-start; }   /* full lock-up on slides 2 and 3 */
.slide--cover .logo-lockup { height: 32px; width: auto; align-self: flex-start; }   /* full lock-up: emblem + wordmark */
/* Cab: the radar slide has its logo at 64px / 34px, so the cover's logo sits exactly there too (the cover's own padding is 76px / 66px) */
.slide--cover-row .logo-lockup { position: relative; left: -12px; top: -32px; }
/* Same start-page motion as the apps: three blurred orbs drifting (glow-orb1-3)
   behind the cover, and the hex pattern pulsing. Sizes are the apps' vmin values
   at this 720px-tall stage. */
.slide--cover::before { opacity: .5; animation: hex-pulse 20s ease-in-out infinite; }
.slide > .slide--cover__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --gx1: 20%; --gy1: 5%; --gx2: 80%; --gy2: 10%; --gx3: 50%; --gy3: 90%;
  animation: glow-orb1 40s ease-in-out infinite, glow-orb2 28s ease-in-out infinite, glow-orb3 52s ease-in-out infinite;
  background:
    radial-gradient(circle 396px at var(--gx1) var(--gy1), rgba(7,169,158,.65) 30%, transparent 70%),
    radial-gradient(circle 360px at var(--gx2) var(--gy2), rgba(1,152,195,.55) 30%, transparent 70%),
    radial-gradient(circle 375px at var(--gx3) var(--gy3), rgba(7,169,158,.45) 30%, transparent 70%);
  filter: blur(35px);
}
/* same values as the apps' cover eyebrow on the iPad (.cover__eyebrow: 18px, 1px tracking, 6px margin + 6px grid gap) */
.slide--cover__eyebrow { font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: rgba(234, 242, 255, .8); margin-bottom: 12px; font-family: 'ScaniaSansHeadline', var(--font); }
.slide--cover__title { font-size: 112px; line-height: .9; font-weight: 900; text-transform: uppercase; margin: 0; letter-spacing: -.01em; font-family: 'ScaniaSansHeadline', var(--font); }
.slide--cover__meta { margin-top: 26px; font-size: 22px; color: rgba(234, 242, 255, .8); letter-spacing: .04em; }

.deck__controls { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px calc(18px + env(safe-area-inset-bottom)); }
.deck__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--navy-600);
  background: rgba(10, 30, 68, .6); color: #fff; font-size: 22px; cursor: pointer;
  display: grid; place-items: center; transition: all .15s ease;
}
.deck__btn:hover { border-color: var(--teal); background: rgba(24, 200, 212, .15); }
.deck__btn[disabled] { opacity: .3; cursor: not-allowed; }
.deck__counter { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink-dim); min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }

/* Summary slide */
/* ---------- split-market category slides ---------- */
.slide--split-markets { justify-content: flex-start; }
.split-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; flex: 1; margin-top: 8px; min-height: 0; }
.split-panel { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid rgba(255,255,255,.08); padding-left: 28px; }
.split-panel:first-child { border-left: none; padding-left: 0; }
.split-panel__market { font-family: 'ScaniaSansHeadline', var(--font); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 6px; }
.split-panel__bars { flex: 1; }

/* ---------- market comparison slide ---------- */
.slide--markets { justify-content: flex-start; }
.market-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 28px; flex: 1; margin-top: 12px; align-items: start; }
.market-col { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.market-col__name { font-family: 'ScaniaSansHeadline', var(--font); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-bright); }
.market-col__overall { font-family: 'ScaniaSansHeadline', var(--font); font-size: 56px; font-weight: 900; line-height: 1; color: #fff; }
.market-col__of { font-size: 22px; color: rgba(255,255,255,.4); margin-left: 4px; }
.market-col__cats { display: flex; flex-direction: column; gap: 10px; }
.market-cat-row { display: grid; grid-template-columns: 1fr 120px 36px; gap: 10px; align-items: center; }
.market-cat-row__label { font-size: 13px; color: #aebfde; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-cat-row__track { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.market-cat-row__fill { height: 100%; background: var(--teal); border-radius: 999px; }
.market-cat-row__score { font-size: 13px; font-weight: 700; color: #fff; text-align: right; }

.slide--summary { justify-content: flex-start; padding-bottom: 40px; }
.slide--summary .slide__head { margin-bottom: 6px; }
.summary__ranking { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 1; margin-top: 6px; }
.summary__row { display: grid; grid-template-columns: 36px 1fr 64px; gap: 8px 16px; align-items: center; padding: 12px 20px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.summary__row.is-top3 { padding: 10px 20px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.summary__row.is-winner { padding: 14px 24px; background: rgba(255,255,255,.07); border-color: var(--brand, rgba(255,255,255,.15)); opacity: 0; transform: scale(.92); }
.summary__row.is-winner.is-revealed { animation: winnerReveal 1.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes winnerReveal {
  0%   { opacity: 0; transform: scale(.92); box-shadow: 0 0 0 0 var(--brand,#fff); filter: blur(4px); }
  30%  { opacity: 1; transform: scale(1); box-shadow: 0 0 32px 8px var(--brand,#fff); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--brand,#fff) 22%, transparent); filter: blur(0); }
}
.summary__rank { font-family: 'ScaniaSansHeadline', var(--font); font-size: 16px; font-weight: 800; color: var(--ink-dim); text-align: center; }
.summary__row.is-top3 .summary__rank { font-size: 18px; }
.summary__row.is-winner .summary__rank { font-size: 24px; color: #fff; }
.summary__vname { font-family: 'ScaniaSansHeadline', var(--font); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.summary__row.is-top3 .summary__vname { font-size: 18px; }
.summary__row.is-winner .summary__vname { font-size: 26px; }
.summary__vscore { font-family: 'ScaniaSansHeadline', var(--font); font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.summary__row.is-top3 .summary__vscore { font-size: 20px; }
.summary__row.is-winner .summary__vscore { font-size: 30px; }
.summary__rest { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; padding: 10px 20px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); }
.summary__rest-item { display: flex; align-items: center; gap: 8px; }
.summary__rest-rank { font-family: 'ScaniaSansHeadline', var(--font); font-size: 12px; font-weight: 800; color: var(--ink-dim); }
.summary__rest-name { font-family: 'ScaniaSansHeadline', var(--font); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ink-dim); }
.summary__rest-score { font-family: 'ScaniaSansHeadline', var(--font); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.summary__cats { grid-column: 2 / 4; display: flex; gap: 5px 18px; flex-wrap: wrap; }
.summary__cat { display: flex; align-items: center; gap: 5px; }
.summary__cat-label { font-size: 13.3px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .03em; }
.summary__cat-score { font-family: 'ScaniaSansHeadline', var(--font); font-size: 16px; font-weight: 800; }
.deck__close {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); right: 24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--navy-600);
  background: rgba(10, 30, 68, .6); color: #fff; font-size: 19px; cursor: pointer;
  transition: all .15s ease;
}
.deck__close:hover { border-color: var(--teal); background: rgba(24, 200, 212, .15); }

/* ============================================================
   ADMIN — form-specific colour themes via data-form attribute
   ============================================================ */

body.admin .bg-hex { display: none; }

/* Test Drive: #01B2D3 accent */
body.admin[data-form="testdrive"] {
  --teal: #01B2D3;
  --teal-bright: #00d4f8;
  --teal-deep: #0188a0;
}
body.admin[data-form="testdrive"] .bg-glow {
  background:
    radial-gradient(55% 45% at var(--gx1) var(--gy1), rgba(1, 178, 211, .22), transparent 70%),
    radial-gradient(45% 40% at var(--gx2) var(--gy2), rgba(60, 110, 220, .14), transparent 70%);
}

/* Cab Assessment: turquoise accent */
body.admin[data-form="cab"] {
  --teal: #00C9B1;
  --teal-bright: #00e8cc;
  --teal-deep: #009e8a;
}
body.admin[data-form="cab"] .form-btn.is-active {
  background: var(--teal);
  color: var(--navy-900);
}
body.admin[data-form="cab"] .bg-glow {
  background:
    radial-gradient(55% 45% at var(--gx1) var(--gy1), rgba(24, 200, 212, .26), transparent 70%),
    radial-gradient(45% 40% at var(--gx2) var(--gy2), rgba(0, 160, 140, .16), transparent 70%);
}
body.admin[data-form="cab"] .topnav {
  border-bottom-color: rgba(24, 200, 212, .2);
}
body.admin[data-form="cab"] .topnav__tag {
  color: var(--teal);
  border-color: rgba(24, 200, 212, .4);
}

/* fullscreen: slide edge to edge, buttons appear only while the mouse moves */
.deck.is-full .slide { border-radius: 0; }
.deck.is-full .deck__controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.deck.is-full .deck__close { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.deck.is-full.is-active .deck__controls, .deck.is-full.is-active .deck__close { opacity: 1; pointer-events: auto; }
.deck.is-full:not(.is-active) { cursor: none; }