/* ============================================================
   GHOSTHUNTER — fx-drive
   Protective drive: the #drive section with its launch plate, and
   the full-viewport dialog (canvas, HUD, comms log, cards).
   Colours are the :root tokens from index.html. Threat red is on
   the exposure ticks and figures, the exposure tag and the two lamps
   in the plate's mirror, because each of those means threat. Nothing
   else is coloured.
   No backdrop-filter anywhere in the dialog: a blur over a live
   WebGL canvas is re-run every frame, and the budget is an iGPU.
   ============================================================ */

/* the scene's fog colour (drive-contract.md): plate and dialog sit on the same night */
.drive-plate,.drive-doc{--drive-night:#0c0c0c}

/* ---------- section ---------- */
/* reveal delays for the section head and plate. Classes, where the rest of the page writes
   style="--d:…": this markup is built by fx-drive.js at run time, and the production policy
   (style-src 'self') refuses a style attribute that a script writes */
.drive-d1{--d:.08s}.drive-d2{--d:.16s}.drive-d3{--d:.1s}
#drive{border-top:1px solid var(--border)}   /* #training above is also unraised: the rule keeps them apart */

.drive-plate{
  position:relative;aspect-ratio:16 / 7;min-height:340px;
  max-width:100%;   /* the ratio turns the minimum height into a width (777 px): it may not pass the column, 761 to 869 px wide */
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--drive-night);overflow:hidden;
}
.dp-art{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease-out) calc(var(--d,0s) + .25s)}
.drive-plate.in .dp-art{opacity:1}
/* reduced motion (html.rm) */html.rm .dp-art{opacity:1}
.dp-art svg{width:100%;height:100%}
/* the button and meta line sit on the road: darken under them, leave the edges to the drawing */
.dp-art::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 58% at 50% 50%, rgba(12,12,12,.86), rgba(12,12,12,0) 100%);
}

/* plate drawing: ink lines on dark solids, the cinema's look in 2D */
.dp-ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.dp-solid{fill:var(--drive-night);stroke:var(--ink);stroke-width:1;stroke-opacity:.2;vector-effect:non-scaling-stroke}
.dp-road{fill:#080808;stroke:none}
.dp-cab{fill:var(--bg);stroke:var(--ink);stroke-width:1;stroke-opacity:.34;vector-effect:non-scaling-stroke}
.dp-cab--mass{stroke:none}   /* header and pillars: solids without their own edge */
.dp-lit{fill:var(--ink);stroke:none}
.dp-tail{fill:var(--threat);stroke:none}

/* corner marks: the cinema HUD's, shared by the plate and the dialog */
.dp-c,.dd-c{position:absolute;width:24px;height:24px;border:1px solid var(--border-strong);pointer-events:none}
.dp-c.c-tl{top:18px;left:18px;border-right:0;border-bottom:0}
.dp-c.c-tr{top:18px;right:18px;border-left:0;border-bottom:0}
.dp-c.c-bl{bottom:18px;left:18px;border-right:0;border-top:0}
.dp-c.c-br{bottom:18px;right:18px;border-left:0;border-top:0}

.dp-ro,.dd-ro{
  position:absolute;display:flex;align-items:center;gap:12px;
  font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dp-tl{top:30px;left:54px}
.dp-tr{top:30px;right:54px}
.dp-bl{bottom:30px;left:54px}
.dp-br{bottom:30px;right:54px}

.dp-core{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:24px;text-align:center;
}
.dp-meta{font:500 11px/1.6 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}
.dp-meta span + span::before{content:"\00b7";margin:0 .6em}   /* the separator travels with the phrase, so a wrap never strands one */
.dp-note{font-size:14px;line-height:1.55;color:var(--text-dim);max-width:60ch;text-wrap:balance}
.dp-note:empty{display:none}
.drive-plate .btn[aria-disabled=true]{
  background:none;color:var(--text-faint);border-color:var(--border-strong);cursor:default;
}

/* exposure meter: five ticks, red as it rises. fx-drive.js sets each tick's fill (--f, 0..1),
   so a call that adds half a tick's worth shows as half a tick */
.dd-meter{display:inline-flex;gap:4px;align-items:center}
.dd-meter i{position:relative;overflow:hidden;width:14px;height:3px;border-radius:1px;background:var(--border-strong)}
.dd-br .dd-meter i{width:18px;height:4px}   /* the HUD's is the one read at a glance, mid-run */
.dd-meter i::after{
  content:"";position:absolute;inset:0;background:var(--threat);
  transform:scaleX(var(--f,0));transform-origin:left center;transition:transform var(--t-base,.55s) var(--ease-out);
}
.dd-meter.is-hot i::after{background:var(--threat-hi)}
@media(forced-colors:active){.dd-meter i,.dd-meter i::after{forced-color-adjust:none}}

@media (max-width:760px){
  .drive-plate{aspect-ratio:auto;min-height:380px}
  .dp-ro{display:none}                     /* a phone crops the drawing to the road: the readouts would sit on the mirror and the dash */
  .dp-c.c-tl,.dp-c.c-bl{left:12px}
  .dp-c.c-tr,.dp-c.c-br{right:12px}
  .dp-c.c-tl,.dp-c.c-tr{top:12px}
  .dp-c.c-bl,.dp-c.c-br{bottom:12px}
  .dp-meta{display:flex;flex-direction:column;gap:2px;letter-spacing:.2em}   /* three short lines read as a list; one long one breaks mid-phrase */
  .dp-meta span + span::before{content:none}
}

/* ============================================================
   DIALOG
   ============================================================ */
.drive-doc{
  position:fixed;inset:0;margin:0;padding:0;border:0;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  background:var(--drive-night);color:var(--text);overflow:hidden;
  opacity:0;transition:opacity .25s var(--ease-out-expo,var(--ease-out));
}
.drive-doc.is-open{opacity:1}
.drive-doc::backdrop{background:var(--drive-night)}
/* showModal() locks nothing, and fx-smooth only holds the page still while it is running (it stands down
   for GH.reduced, touch and ?ss=0). The same lock as the menu, index.html body.menu-open. */
html:has(dialog.drive-doc[open]){overflow:hidden}
.drive-doc:focus{outline:none}

.dd-stage,.dd-canvasbox,.dd-plate,.dd-shade,.dd-hud,.dd-mid,.dd-low{position:absolute;inset:0}
/* a finger on the picture must not drag the page beneath; the cards above are their own scrollers */
.dd-stage{touch-action:none}
/* author display rules (.doc-row is flex) outrank the UA's [hidden] */
.drive-doc [hidden]{display:none!important}
/* stacking: picture, log, cards, then the HUD, so Pause and Leave stay in reach over a scrim */
.dd-comms{z-index:1}
.dd-low{z-index:2}
.dd-mid{z-index:3}
.dd-hud{z-index:4}
.dd-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity var(--t-slow,.9s) var(--ease-out)}
.drive-doc.is-live .dd-canvas{opacity:1}
/* the static plate is the ground of the text walk-through only */
.dd-plate{display:none;opacity:.55}
.dd-plate svg{width:100%;height:100%}
.drive-doc.is-text .dd-plate{display:block}
.drive-doc.is-text .dd-canvasbox{display:none}
/* readouts sit on the picture: shade the top and bottom edges, leave the road alone */
.dd-shade{
  pointer-events:none;
  background:linear-gradient(180deg, rgba(12,12,12,.62) 0, rgba(12,12,12,0) 17%, rgba(12,12,12,0) 66%, rgba(12,12,12,.74) 100%);
}

/* ---------- HUD ---------- */
.dd-hud{pointer-events:none}
.dd-c.c-tl{top:26px;left:26px;border-right:0;border-bottom:0}
.dd-c.c-tr{top:26px;right:26px;border-left:0;border-bottom:0}
.dd-c.c-bl{bottom:26px;left:26px;border-right:0;border-top:0}
.dd-c.c-br{bottom:26px;right:26px;border-left:0;border-top:0}
.dd-tl{top:40px;left:62px}
.dd-tr{top:30px;right:62px;gap:8px;pointer-events:auto}
.dd-bl{bottom:38px;left:62px}
.dd-br{bottom:38px;right:62px}
.dd-statline{bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:var(--text-dim,#8a8a8a)} /* ?drive_stats=1 only */
.dd-ro b{font-weight:500;color:var(--text)}
.dd-ro .dd-sep{color:var(--border-strong)}
.dd-br.is-hot > span:first-child{color:var(--threat)}
.dd-br .dd-xv{min-width:2ch;color:var(--text-faint)}
.dd-br.has-x .dd-xv{color:var(--threat)}
.dd-br.is-hot .dd-xv{color:var(--threat-hi)}
.dd-status{
  position:absolute;top:92px;left:50%;transform:translateX(-50%);
  font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text);
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(12,12,12,.6);
  white-space:nowrap;opacity:0;transition:opacity var(--t-fast,.22s);
}
.dd-status.is-on{opacity:1}
/* the pause and leave cards own the middle: the count stands down under them and comes back with the run */
.drive-doc:has(.dd-mid.is-scrim) .dd-status{opacity:0}

/* HUD chips: the nav's SND chip, same metrics */
.dd-chip{
  font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-faint);background:rgba(12,12,12,.5);cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;
  transition:color var(--t-fast,.22s),border-color var(--t-base,.55s);
}
.dd-chip[aria-pressed=true]{color:var(--text);border-color:var(--border-strong)}
/* hover only where there is a pointer to hover with: on touch it sticks to the last chip tapped and reads as pressed */
@media (hover:hover){
  .dd-chip:hover{color:var(--text);border-color:var(--border-strong)}
}
.dd-chip:focus-visible{outline-offset:2px}

/* a finger needs more than the nav chip's 26 px */
@media (pointer:coarse){
  .dd-chip{min-height:38px;padding:0 11px}
}

/* ---------- comms log: the last three radio lines ---------- */
/* top right, under the chips: the cards own the bottom, and from the driver's
   seat of a right-hand-drive car the interior mirror, where the tail shows,
   fills the top left */
.dd-comms{
  position:absolute;right:62px;top:84px;width:min(400px,30vw);
  display:flex;flex-direction:column;gap:1px;pointer-events:none;   /* one log, ruled between lines */
}
.dd-line{
  font:400 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--text);
  padding:8px 12px 9px;border-left:1px solid var(--accent-line);
  /* the log lies over lit windows and the door glass: each line carries its own ground,
     dense enough to hold white type over a lit pane */
  background:rgba(12,12,12,.88);
  transition:color var(--t-base,.55s),border-color var(--t-base,.55s);
}
/* speaker left, run clock right */
.dd-line .who{
  display:flex;justify-content:space-between;gap:12px;
  font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:3px;
}
.dd-line .at{letter-spacing:.12em;font-variant-numeric:tabular-nums}
/* the newest line is the one being said: ink rule, brighter speaker. Older lines step back
   in colour and keep their ground, so a lit pane never reads through them; three are kept */
.dd-line:last-child{border-left-color:var(--ink)}
.dd-line:last-child .who > :first-child{color:var(--text-dim)}
.dd-line:nth-last-child(2){color:var(--text-dim)}
.dd-line:nth-last-child(3){color:var(--text-faint)}
.dd-line:nth-last-child(3) .who{opacity:.7}
.dd-line.is-typing .tx::after{
  content:"";display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-.15em;
  background:var(--ink);animation:dd-caret .9s steps(1) infinite;
}
@keyframes dd-caret{50%{opacity:0}}
/* reduced motion (html.rm): the global .001s duration would strobe an infinite animation */
html.rm .dd-line.is-typing .tx::after{animation:none}

/* ---------- card layers ---------- */
.dd-mid,.dd-low{display:flex;justify-content:center;pointer-events:none}
.dd-mid{align-items:center;padding:84px 24px 72px}
.dd-low{align-items:flex-end;padding:96px 24px 84px}
/* a card never climbs over the radio log: fx-drive.js publishes the log's foot as --comms-b */
.dd-low{padding-top:max(96px, calc(var(--comms-b, 0px) + 14px))}
/* pause and the leave prompt sit over a live decision: dim it and take its clicks */
.dd-mid.is-scrim{background:rgba(12,12,12,.66);pointer-events:auto}

/* .doc supplies border, radius, #141414 ground and shadow; its overflow is
   reopened on the y axis because the debrief can outgrow a short viewport */
.dd-card{
  pointer-events:auto;width:min(560px,100%);max-height:100%;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s var(--ease-out-expo,var(--ease-out)),transform .25s var(--ease-out-expo,var(--ease-out));
}
.dd-card.is-on{opacity:1;transform:none}
.dd-card:focus{outline:none}
.dd-brief{width:min(620px,100%)}
.dd-debrief{width:min(780px,100%)}
.dd-pause,.dd-confirm{width:min(420px,100%)}

.dd-card .doc-head{position:relative;gap:14px}
.dd-card .doc-head > :first-child{margin-right:auto}
.dd-card .doc-row .dk{width:96px}
.dd-tag{
  border:1px solid var(--border-strong);border-radius:var(--radius);padding:3px 9px;color:var(--text-dim);
  white-space:nowrap;   /* a pill stays in one piece */
}
.dd-tag.is-threat{color:var(--threat);border-color:var(--threat-line);background:var(--threat-wash)}

.dd-body{padding:22px 20px 20px;border-bottom:1px solid var(--border)}
.dd-h{font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.dd-h.is-band{font-size:clamp(22px,2.2vw,26px)}   /* the verdict is the debrief's headline; the figures under it are the evidence */
.dd-p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-dim);max-width:60ch}
.dd-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;
  padding:16px 20px;border-top:1px solid var(--border);
}
/* these feet follow an element that already draws the rule */
.dd-outcome .dd-foot,.dd-pause .dd-foot,.dd-confirm .dd-foot{border-top:0}
/* a card taller than a short screen scrolls under its own actions, which stay in reach;
   the shadow is the rule a borderless foot needs once text passes beneath it */
.dd-card .dd-foot{position:sticky;bottom:0;z-index:1;background:#141414;box-shadow:0 -1px 0 var(--border)}
.dd-keys{font:400 10px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);flex:1 1 120px}
.dd-keys > span{display:block}
.dd-brief .dd-keys{flex-basis:300px}
.dd-brief .doc-row .dk{width:26px}
.dd-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dd-card .btn{font-size:14px;padding:10px 18px}

/* ---------- decision ---------- */
.dd-count{color:var(--text);font-variant-numeric:tabular-nums}
/* the hairline lies on the head's own bottom rule and drains left; fx-drive.js
   sets the transition duration to the time left, so a pause can freeze it */
.dd-timer{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.dd-timer i{display:block;height:100%;background:var(--ink);transform-origin:left center}
/* reduced motion (html.rm): fx-drive.js steps the line once a second instead of draining it */
.dd-prompt{padding:18px 20px;font-size:17px;line-height:1.45;color:var(--text);border-bottom:1px solid var(--border);text-wrap:balance}
.dd-opt{
  display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;
  padding:13px 20px;background:none;border:0;border-bottom:1px solid var(--border);
  font:400 15px/1.45 var(--sans);color:var(--text-dim);cursor:pointer;
  transition:background var(--t-fast,.22s),color var(--t-fast,.22s);
}
.dd-opt:last-child{border-bottom:0}
.dd-opt:focus-visible{background:var(--surface-hi);color:var(--text)}
@media (hover:hover){
  .dd-opt:hover{background:var(--surface-hi);color:var(--text)}
}
.dd-opt:focus-visible{outline-offset:-3px}   /* the card clips: keep the ring inside it */
.dd-opt kbd{
  flex:none;font:500 10px/1 var(--mono);color:var(--text-faint);
  border:1px solid var(--border-strong);border-radius:2px;padding:4px 6px;
}

/* ---------- outcome ---------- */
.dd-outcome .dv{color:var(--text-dim);min-height:1.55em}
.dd-outcome .dd-you .dv{color:var(--text)}
.dd-teamcall{
  display:block;margin-bottom:4px;color:var(--text);
}
.dd-teamcall:empty{display:none}
.dd-team{animation:dd-in var(--t-base,.55s) var(--ease-out)}   /* the team's answer arrives after the outcome */
@keyframes dd-in{from{opacity:0}}

/* ---------- debrief ---------- */
.dd-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.dd-stats > div{display:flex;flex-direction:column;justify-content:space-between;gap:9px;padding:13px 20px 14px;border-left:1px solid var(--border)}
.dd-stats > div:first-child{border-left:0}
.dd-stats .dk{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
/* the figures are the headline of the card */
.dd-score{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the account: call, yours, the team's, what it added. One grid for the head row and the rows */
.dd-calls{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--border)}
.dd-calls-head,.dd-calls li{
  display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,1fr) 34px;gap:16px;align-items:baseline;
  padding:9px 20px;border-bottom:1px solid var(--border);
}
.dd-calls-head{
  padding-top:10px;padding-bottom:8px;background:var(--bg-raised);
  font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
}
.dd-calls-head > :last-child,.dd-calls .x{text-align:right}
.dd-calls li{font-size:13.5px;line-height:1.45;color:var(--text-dim)}
.dd-calls li:last-child{border-bottom:0}
.dd-calls .n{font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.dd-calls .tm em{
  font:500 9.5px/1.6 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-right:8px;
}
.dd-calls .tm em.k{display:none}             /* the head row names this column; a phone has no head row */
/* what to read in a row: a matched call is the visitor's own, a missed one is the team's */
.dd-calls li.is-match .you,.dd-calls li:not(.is-match) .tm{color:var(--text)}
.dd-calls .x{position:relative;font:500 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--text-faint);font-variant-numeric:tabular-nums}
.dd-calls .x.is-threat{color:var(--threat)}
.dd-close{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-dim)}
.dd-close:empty{display:none}

/* ---------- wide screens: the calls go to a right-hand rail ---------- */
/* Bottom centre is where the road is: a card there hides the van, the cones and the
   gate it is asking about. From the right-hand seat the right of the frame is the
   A-pillar and the door glass, so the cards stack there under the radio log and the
   windscreen stays clear. The text walk-through has no picture to protect. */
@media (min-width:1180px) and (min-height:700px){
  .drive-doc:not(.is-text) .dd-low{justify-content:flex-end;padding-right:62px}
  .drive-doc:not(.is-text) .dd-low .dd-card{width:min(480px,36vw)}
}
/* a short wide window: two radio lines, and only the newest while the outcome (the tallest
   card) is read, so the card is not squeezed into a scroll under the log */
@media (min-width:1180px) and (min-height:700px) and (max-height:840px){
  .drive-doc:not(.is-text) .dd-line:nth-last-child(3){display:none}
  .drive-doc:not(.is-text):has(.dd-outcome.is-on) .dd-line:not(:last-child){display:none}
}

/* ---------- visually hidden live region (fx-console's .sr-only, restated so this file stands alone) ---------- */
.dd-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .dd-c.c-tl,.dd-c.c-bl{left:12px}
  .dd-c.c-tr,.dd-c.c-br{right:12px}
  .dd-c.c-tl,.dd-c.c-tr{top:12px}
  .dd-c.c-bl,.dd-c.c-br{bottom:12px}
  .dd-tl{top:26px;left:26px}
  .dd-tl .dd-long{display:none}
  .dd-tr{top:46px;right:20px;gap:6px}
  .dd-bl{bottom:24px;left:26px;gap:8px}
  .dd-bl .dd-long,.dd-bl .dd-hdg{display:none}
  .dd-br .dd-meter i{width:12px;height:3px}
  .dd-br{bottom:24px;right:26px;gap:8px}
  .dd-ro{letter-spacing:.16em}
  .dd-chip{letter-spacing:.16em;padding:7px 8px}
  .dd-status{top:max(96px, calc(var(--comms-b, 0px) + 12px))}   /* the log is full width here: the count sits under it, not on it */
  .dd-comms{left:26px;right:26px;top:96px;width:auto}   /* under the chips, full width */
  .dd-line{font-size:11.5px}
  .dd-line:nth-last-child(3){display:none}
  .dd-mid{padding:84px 12px 56px}
  .dd-low{padding:96px 12px 52px;padding-top:max(96px, calc(var(--comms-b, 0px) + 12px))}
  .drive-doc:has(.dd-outcome.is-on) .dd-line:not(:last-child){display:none}   /* the outcome needs the height more than the radio does */
  .dd-prompt{font-size:16px;padding:14px 16px}
  .dd-opt{padding:12px 16px}
  .dd-card .doc-head{flex-wrap:wrap;row-gap:8px}   /* a tag that cannot share the row drops under the call's name whole */
  .dd-card .doc-head,.dd-card .doc-row,.dd-foot,.dd-close{padding-left:16px;padding-right:16px}
  .dd-body{padding:18px 16px 16px}
  .dd-card .doc-row{flex-direction:column;gap:4px;padding-top:12px;padding-bottom:12px}
  .dd-foot{padding-top:12px;padding-bottom:12px}
  .dd-card .doc-row .dk{width:auto}
  .dd-brief .doc-row{flex-direction:row;gap:12px}   /* a two-digit index can keep its column: the brief then fits a phone unscrolled */
  .dd-brief .doc-row .dk{width:20px}
  .dd-calls-head{display:none}
  .dd-calls li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 16px}
  .dd-calls .n{grid-column:1}
  .dd-calls .x{grid-column:2;grid-row:1}
  .dd-calls .you,.dd-calls .tm{grid-column:1 / -1}
  .dd-calls .tm em.k{display:inline}
  .dd-score{font-size:18px}
  .dd-stats > div{padding:12px 16px}
  .dd-stats .dd-meter{display:none}        /* the HUD's own meter is still in view under the card */
  .dd-stats .dk{line-height:1.35}          /* 'Calls matched' takes two lines at this width */
}
/* ---------- short screens ---------- */
/* a small phone with its browser bars showing: under two radio lines a call's third option falls off the
   card, so the call keeps the newest line only */
@media (max-height:600px) and (max-width:760px){
  .drive-doc:has(.dd-decision.is-on) .dd-line:not(:last-child){display:none}
}
/* a phone on its side, or with its browser bars showing. The corner marks go and the HUD closes up to
   the edges, so the cards clear the chips above and the speed and exposure row below. The log keeps its
   newest line and stands down while a call or its outcome is up: there is room for the card or the log */
@media (max-height:560px){
  .dd-c{display:none}
  .dd-tl{top:22px}
  .dd-tr{top:8px}
  .dd-bl,.dd-br{bottom:12px}
  .dd-comms{top:54px}
  .dd-line:not(:last-child){display:none}
  .drive-doc:has(.dd-low .dd-card.is-on) .dd-comms{display:none}
  .dd-status{top:58px}
  .dd-low,.dd-mid{padding:54px 12px 30px}
}
/* the log reaches the middle from here down: the count goes under it */
@media (max-height:560px) and (max-width:840px){
  .dd-status{top:max(58px, calc(var(--comms-b, 0px) + 10px))}
}
/* a narrow short screen keeps two rows up top: the readout, then the chips */
@media (max-height:560px) and (max-width:560px){
  .dd-tl{top:14px}
  .dd-tr{top:30px}
  .dd-comms{top:76px}
  .dd-status{top:max(80px, calc(var(--comms-b, 0px) + 10px))}
  .dd-low,.dd-mid{padding-top:76px}
}
/* the outcome is the tallest card and the team's answer is its point, so the log stands down while it
   is read. Not the wide rail (1180 x 700 and up), which keeps its newest line and already fits */
@media (max-height:740px) and (max-width:1179.98px), (max-height:699.98px){
  .drive-doc:has(.dd-outcome.is-on) .dd-comms{display:none}
  .dd-outcome .dd-foot{padding-top:8px;padding-bottom:8px}
}
/* shorter still: the visitor made that call a second ago, so its row goes first. .is-auto is reserved for
   a call the clock made, whose "Taken for you" row is news: the row stays once fx-drive.js marks the card */
@media (max-height:660px) and (max-width:1020px){
  .dd-outcome:not(.is-auto) .dd-you{display:none}
  .dd-outcome .doc-row{padding-top:9px;padding-bottom:9px}
}
/* on its side the outcome takes the width it has and keeps its labels beside the text, as on a desk:
   fewer lines, less height */
@media (max-height:560px) and (min-width:561px) and (max-width:1020px){
  .dd-outcome{width:min(780px,100%)}
  .dd-outcome .doc-head{padding-top:9px;padding-bottom:9px}
  .dd-outcome .doc-row{flex-direction:row;gap:16px}
  .dd-outcome .doc-row .dk{width:96px}
}

/* ---------- reduced motion ---------- */
/* reduced motion (html.rm) */html.rm .drive-doc,html.rm .dd-card,html.rm .dd-canvas{transition:none}
html.rm .drive-doc.is-open,html.rm .dd-card.is-on{opacity:1;transform:none}

/* ---------- print: the overlay never prints; the section prints as text ---------- */
@media print{
  .drive-doc{display:none!important}
  #drive{border-top:0}
  .drive-plate{aspect-ratio:auto;min-height:0;display:block;background:none;border:0;border-radius:0;overflow:visible}
  .dp-art,.dp-c,.dp-ro,.drive-plate .btn,.dp-note{display:none!important}
  .dp-core{display:block;padding:0;text-align:left}
  .dp-meta{color:var(--text-dim)}
}