/* AI Test Drive, the advisor drive screens: a minimal frame for the car on the design kit (docs/drive-screens.md).
   A slim bar in the organisation's colour (it runs up under the status bar), one column, big type, buttons in thumb
   reach. While driving: one big status and nothing else to read or tap. */
.dv { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ground); }
.dv-top { background: var(--side-bg); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--safe-top)) calc(16px + var(--safe-right)) 10px calc(16px + var(--safe-left)); font-weight: 600; min-height: 48px; }
.dv-org { font-family: var(--display); font-size: 17px; letter-spacing: var(--track-display, 0); display: inline-flex; align-items: center; }
.dv-org img { height: 26px; width: auto; display: block; }
.dv-top-r { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; }
.dv-top-status { opacity: 0.85; }
/* Report a problem in the bar: the kit's top-bar button, its form dropping down under it (kit.css .fb-pop). */
.dv-top .fb-top { font-size: 14px; min-height: 44px; min-width: 44px; }
.dv-main { flex: 1 1 auto; width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
  padding: 20px calc(16px + var(--safe-right)) calc(96px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.dv-h1 { font-family: var(--display); color: var(--heading); font-size: 28px; line-height: 1.15; margin: 0; }
.dv-sub { color: var(--ink-2); font-size: 16px; margin: -4px 0 0; }
.dv-note, .dv-foot { color: var(--muted); font-size: 15px; }
.dv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dv-back { align-self: flex-start; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.dv-mode { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mint-dark); }
.dv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dv-exp { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-height: 88px; }
.dv-exp b { font-size: 19px; color: var(--heading); font-family: var(--display); }
.dv-exp:hover { border-color: var(--line-hover); }
.dv-meta { color: var(--muted); font-size: 15px; }
.dv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dv-card h2 { font-size: 18px; margin: 0; color: var(--heading); }
.dv-card p, .dv-card li { font-size: 16px; }
.dv-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.dv-read { border-left: 3px solid var(--mint); padding-left: 12px; font-style: italic; }
.dv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.dv-facts div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.dv-facts dt { font-size: 13px; color: var(--muted); }
.dv-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.dv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dv-two .btn { white-space: normal; min-height: 52px; }
.dv-check { font-size: 16px; }
.dv-go { margin-top: 4px; }
.btn.block { width: 100%; }

/* ---------- getting ready and driving ---------- */
.dv-drive { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.dv-status { border-radius: 28px; min-height: 46vh; min-height: 46dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff; background: var(--navy); transition: background-color .25s var(--ease); }
.getting-ready .dv-status { min-height: 30vh; min-height: 30dvh; }
.dv-word { font-family: var(--display); font-size: clamp(44px, 13vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.dv-subw { font-size: 21px; font-weight: 600; opacity: 0.92; }
.dv-status.go { background: #1f7a52; }
.dv-status.talk { background: var(--navy); }
.dv-status.dir { background: #2453a6; }
.dv-status.amber { background: #f0b429; color: #1b1b1b; }
.dv-status.navy { background: var(--navy-2); }
:root[data-theme="dark"] .dv-status.talk, :root[data-theme="dark"] .dv-status.navy { background: #2e2b36; }
:root[data-theme="dark"] .dv-status.go { background: #17694a; }
.dv-checklist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dv-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; font-weight: 600; color: var(--ink); }
.dv-checklist li small { display: block; font-size: 15px; font-weight: 500; margin-top: 2px; }
.dv-checklist small.ok { color: var(--good-dark); }
.dv-checklist small.warn { color: var(--amber-dark); }
.dv-checklist .tick { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }
.dv-checklist li.done .tick { background: #1f7a52; border-color: #1f7a52; }
.dv-weather { font-size: 16px; color: var(--ink-2); margin: 0; }
.dv-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-controls .btn { width: 100%; }
.dv-done { display: flex; flex-direction: column; gap: 16px; }
.dv-headline { font-size: 18px; color: var(--ink); }
.dv-points { list-style: none; padding: 0 !important; }
.dv-points li { display: flex; gap: 10px; align-items: flex-start; }
.dv-points small { display: block; color: var(--muted); font-size: 14px; }
.dv-foot .link-btn { min-height: 44px; }

/* The phone on its side in a holder: the status on the left, the checklist or controls on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .dv-main { max-width: none; padding-top: 12px; }
  .dv-drive { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .dv-status, .getting-ready .dv-status { min-height: calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom)); grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .dv-status { transition: none; } }
/* The modes in plain words (issue #161): a short line in the list, the full words on getting ready and under the list. */
.dv-mode-short { font-weight: 500; text-transform: none; letter-spacing: 0; }
.dv-mode-facts { grid-template-columns: 1fr; margin-bottom: 4px; }
.dv-mode-facts dd { font-size: 15px; font-weight: 400; line-height: 1.45; }
.dv-modes { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
.dv-modes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--heading); }
.dv-modes dl { display: grid; gap: 12px; margin: 8px 0 0; }
.dv-modes dt { font-weight: 600; }
.dv-modes dd { margin: 2px 0 0; color: var(--ink-2); }
/* The training path, the recall check, the coaching points and the next step (issue #162). One column on a phone; on a
   big screen the home page and the debrief use two columns, so nothing is stretched across the width. */
.dv-h2 { font-family: var(--display); color: var(--heading); font-size: 21px; margin: 6px 0 0; }
.dv-cols, .dv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dv-path h3 { margin: 0; font-size: 18px; color: var(--heading); font-family: var(--display); }
.dv-path-mode { color: var(--ink-2); font-size: 15px; }
.dv-path-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dv-path-head .pill { align-self: center; }
@media (max-width: 600px) { .dv-path .row-actions, .dv-path .row-actions .btn { width: 100%; } }
.dv-path b, .dv-coach b { font-size: 17px; color: var(--heading); }
.dv-path small, .dv-coach small { font-size: 14px; }
.dv-q { gap: 8px; }
.dv-q legend { font-size: 17px; font-weight: 600; color: var(--heading); line-height: 1.35; margin-bottom: 8px; }
.dv-q-n { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.dv-q label span { font-size: 16px; color: var(--ink); }
.dv-q + .dv-q { margin-top: 12px; }
.dv-why { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.dv-recall .tile { align-self: stretch; }
.dv-next { box-shadow: inset 3px 0 0 var(--amber, #d97706); }
.dv-next h2 { font-family: var(--display); font-size: 21px; line-height: 1.2; }
.dv-next p { margin: 0; }
.dv-coach .dv-when { color: var(--muted); font-weight: 600; }
.dv-said { display: block; quotes: none; font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--line-strong); padding-left: 10px; margin-top: 2px; }
.dv-said span { font-weight: 600; }
@media (min-width: 1100px) {
  .dv-main.wide { max-width: 1120px; padding-top: 32px; }
  .dv-main.wide .dv-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}
/* The quiet screen while moving (issue #165): above walking pace, what is happening now in one big word on plain black
   or white, with the state as a thick coloured band (green listening, blue a direction, amber paused, grey the coach),
   nothing to read, and for a passenger a large Pause (or Resume) and End. The full screens come back once still. */
.dv-main:has(.dv-quiet) { padding-bottom: calc(16px + var(--safe-bottom)); }
.dv-quiet { --q-bg: #ffffff; --q-ink: #000000; --q-band: #1f7a52; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px;
  min-height: calc(100dvh - 48px - var(--safe-top) - 36px - var(--safe-bottom)); }
:root[data-theme="dark"] .dv-quiet { --q-bg: #000000; --q-ink: #ffffff; --q-band: #3fbf83; }
.dv-quiet.dir { --q-band: #1d4ed8; } :root[data-theme="dark"] .dv-quiet.dir { --q-band: #6ea2ff; }
.dv-quiet.talk, .dv-quiet.navy { --q-band: #3d3a45; } :root[data-theme="dark"] .dv-quiet.talk, :root[data-theme="dark"] .dv-quiet.navy { --q-band: #b9b4c4; }
.dv-quiet.amber { --q-band: #b45309; } :root[data-theme="dark"] .dv-quiet.amber { --q-band: #f0b429; }
.dv-quiet-now { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 28px 20px; border-radius: 28px; background: var(--q-bg); color: var(--q-ink); border: 4px solid var(--q-ink); border-top: 22px solid var(--q-band); }
.dv-quiet-word { font-family: var(--display); font-size: clamp(56px, 17vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.01em; }
.dv-quiet-sub { font-size: 24px; font-weight: 700; }
.dv-quiet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dv-big { min-height: 96px; border-radius: 22px; font: 800 30px/1.1 var(--display); padding: 12px; cursor: pointer;
  background: var(--q-bg); color: var(--q-ink); border: 4px solid var(--q-ink); touch-action: manipulation; }
.dv-big.primary { background: var(--q-ink); color: var(--q-bg); }
.dv-big:focus-visible { outline: 4px solid var(--q-band); outline-offset: 3px; }
@media (orientation: landscape) and (max-height: 520px) {
  .dv-quiet { flex-direction: row; min-height: calc(100dvh - 48px - var(--safe-top) - 28px - var(--safe-bottom)); }
  .dv-quiet-now { flex: 1.4 1 0; }
  .dv-quiet-actions { flex: 1 1 0; grid-template-columns: 1fr; align-content: stretch; }
  .dv-big { min-height: 72px; }
}
/* A mode coming soon (its client's or prospect demo's choice): a quiet card in the list of drives, with its label and
   description, that cannot be started. Not a button, so it is never a target; the text keeps full contrast. */
.dv-soon { cursor: default; background: transparent; border-style: dashed; min-height: 0; }
.dv-soon:hover { border-color: var(--line); }
.dv-soon-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dv-soon .dv-mode { color: var(--ink-2); }
.dv-soon-text { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
/* The branded launch screen (splash.js): the brand's logo centred, light (white, the brand's own logo) or dark (the brand
   colour, its logo for dark backgrounds), with clear space round the logo of at least the logo's height (--splash-h on
   every side), clear of the safe areas, and "DriveCoach by Boundless" small at the foot with DriveCoach.io under it as a link. Over everything until the first
   screen is ready, then faded out. */
html.dv-splashing, html.dv-splashing body { background: var(--splash-under, var(--splash-bg)); }
/* The kit's strip over the status bar takes the splash colour too, so the status bar matches it while it shows. */
html.dv-splashing body::before { background: var(--splash-under, var(--splash-bg)) !important; }
.dv-splash { --splash-h: clamp(44px, 9vh, 84px); position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--splash-bg, #ffffff); color: var(--splash-text, #5c5966); transition: opacity 0.24s ease;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.dv-splash.out { opacity: 0; pointer-events: none; }
.dv-splash-mark { padding: var(--splash-h); display: flex; align-items: center; justify-content: center; max-width: 100%; }
.dv-splash-mark img { display: block; height: var(--splash-h); width: auto; max-width: min(360px, calc(100vw - 2 * var(--splash-h) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); object-fit: contain; }
.dv-splash-mark b { font-family: var(--display); font-size: 28px; line-height: var(--splash-h); }
.dv-splash-by { position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 13px; letter-spacing: 0.02em; color: var(--splash-text, #5c5966); }
.dv-splash-by span { display: block; }
.dv-splash-by a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 16px; color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; }
/* In the DriveCoach app: a quick fade in from the app's own launch screen (splash.js; --splash-under holds the page on
   the app's plain colour until it has faded in). */
.dv-splash.fade-in { animation: dv-splash-in 0.2s ease-out backwards; }
@keyframes dv-splash-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dv-splash { transition: none; } .dv-splash.fade-in { animation: none; } }
/* The sound check's calm screen (drive.js SoundScreen). */
.dv-sound h2 { margin: 0 0 6px; font-size: 20px; }
.dv-sound p { margin: 0 0 10px; }
.dv-sound-tips { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.dv-listen-only { margin: 0; }

/* Home's mode cards, Select your vehicle and the demo flows (Jamie, 11 November 2026). */
.dv-mode-card { flex-direction: row; align-items: center; gap: 16px; min-height: 112px; }
.dv-mode-card:disabled { cursor: default; opacity: 1; }
.dv-mode-card:disabled .dv-mode-icon, .dv-mode-card:disabled .dv-chev { opacity: 0.45; }
.dv-mode-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--heading); color: var(--card); display: flex; align-items: center; justify-content: center; }
.dv-mode-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-mode-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-mode-card b { font-size: 22px; }
.dv-chev { flex: none; font-size: 24px; line-height: 1; color: var(--muted); }
.dv-vehicle { min-height: 88px; justify-content: center; }
.dv-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.dv-demo-map { padding: 12px; color: var(--ink); }
.dv-demo-map svg { display: block; width: 100%; height: auto; }
.dv-demo-map g.on circle { fill: var(--heading); }
.dv-demo-map g.on text { fill: var(--card); }
.dv-demo-map g.off circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dv-demo-map g.off text { fill: var(--ink-2); }
.dv-demo-map text { font-size: 12px; font-weight: 600; }
.dv-demo-here { fill: var(--mint-dark); }
.dv-demo-points { list-style: none; margin: 0; padding: 0; }
.dv-demo-points li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line); }
.dv-demo-points li:first-child { border-top: 0; }
.dv-demo-points .n { flex: none; width: 20px; font-size: 13px; color: var(--muted); }
.dv-demo-points .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 16px; }
.dv-demo-points .t small { color: var(--ink-2); font-size: 14px; }
.dv-demo-rec { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.dv-demo-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint-dark); }
.dv-person { flex-direction: row; align-items: flex-start; gap: 14px; }
.dv-person-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--heading); color: var(--card); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 19px; font-weight: 600; }
.dv-statement { font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0; }
.dv-sign { display: flex; flex-direction: column; gap: 6px; }
.dv-sign-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.dv-sign-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.dv-sign-pad { width: 100%; height: 190px; border-radius: var(--radius); border: 1px solid var(--line-hover); background: var(--card); color: var(--ink); touch-action: none; }

/* Pictures (November 2026): a vehicle's picture where it is chosen and on getting ready, and the launch picture behind
   the launch screen with the logo on a panel over it. */
.dv-vehicle-pic, .dv-prepare-pic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--line); }
.dv-vehicle-pic { margin-bottom: 8px; }
.dv-prepare-pic { border-radius: var(--radius); }
.dv-pic-wait { opacity: 0.6; }
.dv-wordmark { display: inline-flex; flex-direction: column; line-height: 1.05; }
.dv-wordmark b { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.dv-wordmark small { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.dv-splash-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-splash.pic .dv-splash-mark, .dv-splash.pic .dv-splash-by { position: relative; z-index: 1; background: var(--splash-bg); background: color-mix(in srgb, var(--splash-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.dv-splash.pic .dv-splash-mark { padding: calc(var(--splash-h) * 0.6) calc(var(--splash-h) * 0.8); border-radius: 20px; margin: 0 24px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
.dv-splash.pic .dv-splash-by { position: absolute; left: 50%; right: auto; transform: translateX(-50%); padding: 10px 14px 0; border-radius: 16px; white-space: nowrap; }