/* Blocked In by TruckerVerse. Tokens: SPEC A.8; glare: audit 9.11; the night look: docs/round7/01 section 6; play layout: audit 3.4. */

:root{
  --bg:#F2EBDD; --panel:#FBF7EF; --ink:#0F2D5C; --ink-2:#3E5579; --rule:rgba(15,45,92,.16);
  --accent:#F5A524; --accent-hi:#FFB736; --on-accent:#0F2D5C; --locked:rgba(15,45,92,.34);
  --star-off:rgba(15,45,92,.18); --scrim:rgba(8,27,56,.55); --shadow:rgba(8,27,56,.22);
  --asphalt:#2A3447; --asphalt-2:#1C2434; --stall:rgba(242,235,221,.15); --curb:rgba(242,235,221,.40);
  --plate:#F2EBDD; --plate-band:#1E3A8A; --plate-ink:#0F2D5C;
  --display:"Archivo","Inter",system-ui,sans-serif;
  --body:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --soft:rgba(245,165,36,.14); --veh-edge:#F2EBDD; --focus:var(--ink); --danger:#8A1F1F; --bld:#3E5579;
  /* GB5: the flatbed's deck keeps its bone edge at 3:1 in every palette (layout.test.js). */
  --deck:#3E5579;
  /* GA6: "Follow TruckerVerse" platform marks: black by day, white in the dark looks and at night, never amber (MONETISATION.md). */
  --brand-glyph:#000000;
  --eroad:#0B7A3E; --on-eroad:#FFFFFF; --seg-done:var(--ink);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081B38; --panel:#0F2D5C; --ink:#F2EBDD; --ink-2:#9DB2D4; --rule:rgba(242,235,221,.14);
    --on-accent:#081B38; --locked:rgba(242,235,221,.30); --star-off:rgba(242,235,221,.18);
    --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.4); --soft:rgba(245,165,36,.12); --focus:var(--accent-hi); --danger:#F2A0A0; color-scheme:dark;
    --brand-glyph:#FFFFFF; --seg-done:var(--accent);
  }
}
:root[data-theme="dark"]{
  --bg:#081B38; --panel:#0F2D5C; --ink:#F2EBDD; --ink-2:#9DB2D4; --rule:rgba(242,235,221,.14);
  --on-accent:#081B38; --locked:rgba(242,235,221,.30); --star-off:rgba(242,235,221,.18);
  --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.4); --soft:rgba(245,165,36,.12); --focus:var(--accent-hi); --danger:#F2A0A0; color-scheme:dark;
  --brand-glyph:#FFFFFF; --seg-done:var(--accent);
}
/* Night look 22:00-04:59 (GB3, round7/01 s6), keyed on data-night (the hour, or the look test): dimmed navy, soft amber text, on by default. Light,
   the Settings switch (data-nightlook="off") and Sunlight (A111.14) win, so each night selector excludes all three. The wind-down: data-late alone. Contrast: night-look.test.js. */
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]){
  --bg:#071530; --panel:#0D2348; --ink:#DCC394; --ink-2:#B39568; --rule:rgba(220,195,148,.30);
  --accent:#E39A2D; --accent-hi:#F2B04C; --on-accent:#071530; --locked:rgba(220,195,148,.42);
  --star-off:rgba(220,195,148,.50); --scrim:rgba(0,0,0,.65); --shadow:rgba(0,0,0,.5); --soft:rgba(227,154,45,.14);
  --asphalt:#161F31; --asphalt-2:#0E1524; --stall:rgba(220,195,148,.18); --curb:rgba(220,195,148,.50);
  --plate:#DCC79F; --plate-band:#22386B; --plate-ink:#0F2246; --veh-edge:#D3BC93; --focus:#F2B04C; --danger:#F2A88E; --bld:#3A4A66; --deck:#3A4A66;
  --brand-glyph:#FFFFFF; --seg-done:var(--accent);
  color-scheme:dark;
}
/* Sunlight / high contrast, audit 3.5 */
:root[data-contrast="high"]{
  --bg:#FFFFFF; --panel:#FFFFFF; --ink:#061A3A; --ink-2:#1F3557;
  --rule:rgba(6,26,58,.70); --locked:rgba(6,26,58,.55); --star-off:rgba(6,26,58,.55);
  --accent:#F5A524; --accent-hi:#FFB736; --on-accent:#061A3A; --focus:#061A3A;
  --asphalt:#1B2230; --asphalt-2:#0A0E15; --stall:rgba(255,255,255,.40); --curb:#FFFFFF;
  --veh-edge:#FFFFFF; --soft:rgba(245,165,36,.18); --danger:#7A0E0E; --deck:#4A6390;
  --brand-glyph:#000000; --seg-done:var(--ink);
  color-scheme:light;
}
:root[data-contrast="high"] .btn,:root[data-contrast="high"] .seg-btn,:root[data-contrast="high"] .bay,:root[data-contrast="high"] .leg-row{border-width:2px}
:root[data-contrast="high"] body{font-weight:500}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* Wind-down 22:00-04:59 (C19): home items that wait for the day go the moment data-late is set, before home is redrawn. */
:root[data-late="1"] #teamsCard,:root[data-late="1"] #friendsChip,:root[data-late="1"] #homeGoal,:root[data-late="1"] #leagueChip,:root[data-late="1"] .daily-earlier{display:none!important}
/* GB3: the same for the new day-only items (invite, since and reply cards, parking and weekday lines). */
:root[data-late="1"] #homeInvite,:root[data-late="1"] #sinceCard,:root[data-late="1"] #parkingAsk,:root[data-late="1"] #parkingLine,:root[data-late="1"] #dailyCounts,:root[data-late="1"] .daily-week,:root[data-late="1"] .reply-card{display:none!important}
/* Round 8 (PV1, slim point 4 (b)): the early previews card is offered by day only; it goes the moment data-late is set. */
:root[data-late="1"] #previewCard{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh}
html.sheet-open body{overflow:hidden}
.app{max-width:460px;margin:0 auto;padding-inline:16px;padding-block:calc(10px + env(safe-area-inset-top,0px)) calc(36px + env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus, var(--ink));outline-offset:2px}
p{margin:0}
h1,h2,h3{margin:0}
svg{flex:none}
.screen{display:block;animation:screen-in .22s ease-out}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}}
/* returning players skip the static first screen */
html[data-returning="1"] #screen-first{display:none}
#screen-first{animation:none} /* painted before any script: no entry fade */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{width:20px;height:20px;flex:none}

/* brand, top bars */
.top,.sub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:44px;border-radius:8px;padding-right:4px}
.pict{width:46px;height:auto}
.pict .b{fill:var(--ink)} .pict .ko{fill:var(--bg)} .pict .dot{fill:var(--accent)}
.wm{font:800 19px/1 var(--display);letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.wm .v{color:var(--accent)}
.coins{display:inline-flex;align-items:center;gap:6px;font:800 15px/1 var(--display);font-variant-numeric:tabular-nums;padding:7px 11px;border-radius:999px;border:1.5px solid var(--rule);min-height:34px}
.coin{width:16px;height:16px;flex:none}
.back{background:none;border:0;cursor:pointer;font-weight:600;padding:10px 6px 10px 2px;min-height:44px;min-width:44px;color:var(--ink);display:inline-flex;align-items:center;gap:4px;border-radius:8px}
.back .chev{font-size:24px;line-height:1;margin-top:-3px}

/* first screen */
.first{display:flex;flex-direction:column;min-height:calc(100vh - 46px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - 46px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.first-top{display:grid;gap:12px}
.first-brand{display:flex;align-items:center;gap:8px;min-height:48px}
.first-brand .pict{width:40px}
.lang-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
/* GB4: at 320 px the first screen was wider than the phone in NL (327 px) and BG (323 px), so the picture goes under 360 px
   like #brandLink's; wordmark and chip cannot shrink. */
@media (max-width:359px){
  .first-brand .pict{display:none}
}
.first-art{border-radius:14px;overflow:hidden}
.first-art svg{display:block;width:100%;height:auto}
.first-title{font:800 clamp(30px,9vw,40px)/1 var(--display);letter-spacing:-.03em;text-wrap:balance}
.first-safety{font-size:16px}
.first-choices{margin-top:auto;padding-top:20px;display:grid;gap:12px}
.choice-card{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;border-radius:14px;border:2px solid var(--ink);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}
.choice-ico{display:flex;align-items:center;gap:6px;flex:none}
.choice-ico .pict{width:42px}
.choice-ico .pict .ko{fill:var(--panel)}
.choice-text{display:grid;gap:2px;min-width:0}
.choice-l{font:800 17px/1.15 var(--display)}
.choice-s{font-size:14px;color:var(--ink-2);line-height:1.3}
.choice-quiet{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 6px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;border-radius:10px}
.choice-quiet .choice-l{font:600 16px/1.2 var(--body);text-decoration:underline;text-underline-offset:3px}
.btn.first-play{width:100%;min-height:56px;font-size:18px}
.pplay{width:24px;height:24px}

/* home */
.hero{padding-block:22px 18px;position:relative}
.eyebrow,.k{font:600 14px/1.2 var(--body);letter-spacing:.05em;color:var(--ink-2);margin:0}
.k{text-transform:uppercase}
.eyebrow{font-size:14px;letter-spacing:.02em} /* carries "TruckerVerse" */
.hero h1,.h-sub{font:800 clamp(46px,14vw,66px)/.9 var(--display);letter-spacing:-.04em;margin:8px 0 0;text-wrap:balance}
/* The dashed amber bar under the title is the title's own background (the same 92 x 7 px, 14 px under the text); its ::after is the plate. */
.hero h1{padding-bottom:21px;background:repeating-linear-gradient(90deg,var(--accent) 0 15px,transparent 15px 24px) 0 100%/92px 7px no-repeat}
/* v2.5.1 (founder 18-10): the website's EUROPE plate, a picture (generated content, empty alternative text): no text, name or translation. */
.hero h1::after{content:"EUROPE";content:"EUROPE" / "";display:inline-block;vertical-align:middle;margin-left:14px;padding:.42em .62em .38em;border-radius:.3em;background:#006B38;box-shadow:inset 0 0 0 2px #006B38,inset 0 0 0 4px #F2EBDD;color:#FFFFFF;font:800 max(13px,.21em)/1 var(--display);letter-spacing:.1em;white-space:nowrap}
@media (forced-colors:active){.hero h1::after{border:1px solid CanvasText}}
.hero .badge-tag{position:absolute;top:19px;right:0} /* beta pill: out of the flow at the end of the eyebrow line (22 px padding, centred on its 17 px), so the title and the hero are the same height with it and without it */
.lede{margin-top:14px;color:var(--ink-2);max-width:36ch}
.h-sub{font-size:40px;margin-top:6px}
.s{color:var(--ink-2);font-size:14px}
.resume{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--soft);border:1.5px solid var(--accent);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.resume-text{min-width:0;display:grid;gap:4px}
.resume-where{display:flex;align-items:center;gap:8px;font:800 16px/1.15 var(--display);min-width:0}
.resume-where span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily{background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:16px;display:grid;gap:14px;position:relative;overflow:hidden}
.daily:not(.is-done)::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:repeating-linear-gradient(90deg,var(--accent) 0 18px,transparent 18px 28px)}
.daily-head{display:flex;gap:12px;align-items:center}
.daily-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.daily-done{display:flex;align-items:center;gap:8px;font-weight:600;flex-basis:100%;min-height:32px}
.streak{font-size:14px;color:var(--ink-2);border-top:1px dashed var(--rule);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.streak b{color:var(--ink);font-family:var(--display);font-weight:800}
.streak .ico{width:18px;height:18px;color:var(--ink)}
.next-daily{flex-basis:100%}
.update-card{margin:0 0 12px;padding:12px 14px;border:1.5px solid var(--accent);border-radius:14px;background:var(--soft);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-note{flex-basis:100%}
.feedback-card{margin-top:12px}
.feedback{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-weight:600}
.feedback .ico{width:18px;height:18px}
.convoy-card{margin-top:12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;display:grid;gap:8px}
/* GB3: home cards; "Invite a colleague" is one quiet card under the header (A101), so Play stays the one main action. */
.invite{margin:4px 0 6px}
.invite-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--rule);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}
.invite-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft)}
.invite-ico .ico{width:20px;height:20px}
.invite-text{display:grid;gap:2px;min-width:0}
.invite-title{font:800 17px/1.15 var(--display)}
.invite-line{line-height:1.3}
/* the "New since your previous break" card: a title, up to four 48 px rows (icon, line, chevron), a quiet Close */
.since-card{margin:0 0 12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:16px;background:var(--panel);display:grid;gap:8px}
.since-title{margin:0}
.since-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 10px;border:0;border-radius:10px;background:var(--soft);color:var(--ink);text-align:left;cursor:pointer;font:600 16px/1.25 var(--body)}
.since-row .ico{flex:none;width:22px;height:22px}
.since-line{flex:1;min-width:0}
.since-row .chev{flex:none;font-size:22px;line-height:1;color:var(--ink-2)}
.since-close{justify-self:start}
/* the daily card's two quiet lines: the weekday line under daily.sub, and the day's counts under the title block */
.daily-week,.daily-blocked{margin-top:2px}
.daily-blocked,.blocked-line{text-wrap:balance}
.daily-counts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0}
@media (max-width:359px){.daily-counts{flex-direction:column;gap:4px}}
/* the reply card (the asker's, in the feedback card's place) and the D10 question */
.reply-card{display:grid;gap:8px}
.reply-actions{display:flex;flex-wrap:wrap;gap:8px}
.reply-actions .btn{min-height:44px}
.parking-ask{margin-top:12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;display:grid;gap:10px}
.parking-ask-q{margin:0;font:800 17px/1.2 var(--display)}
.parking-consent{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--ink)}
.parking-ask-actions{display:flex;flex-wrap:wrap;gap:8px}
.parking-ask-actions .btn{flex:1 1 140px;min-height:44px}
@media (max-width:359px){.parking-ask-actions .btn{flex-basis:100%}}
.parking-line{margin-top:18px}
.convoy-name{display:flex;align-items:center;gap:8px;font:800 17px/1.2 var(--display)}
.bar{display:block;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.league-chip{margin-top:12px}
.chip-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule);text-decoration:none;font-weight:600}
.install-card-slot{margin-top:12px}
.install-card{padding:12px 14px;border:1.5px dashed var(--accent);border-radius:14px;display:grid;gap:8px;background:var(--soft)}
.install-title{font:800 17px/1.15 var(--display)}
.install-actions{display:flex;flex-wrap:wrap;gap:8px}
.mytruck{display:flex;align-items:center;gap:14px;padding-block:18px;border-bottom:1px solid var(--rule)}
.mt-art{width:96px;flex:none}
.mt-art svg{display:block;width:100%;height:auto}
.mt-text{flex:1;min-width:0;overflow-wrap:anywhere}

/* the route */
.route h2{font:800 22px/1 var(--display);letter-spacing:-.02em;margin:24px 0 14px}
.legs{list-style:none;margin:0;padding:0 0 0 26px;position:relative;display:grid;gap:10px}
.legs::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:3px;background:repeating-linear-gradient(to bottom,var(--ink-2) 0 10px,transparent 10px 19px);opacity:.4}
/* P2: no content-visibility per row; its paint containment clipped the dot and the focus ring. */
.leg{position:relative}
.leg::before{content:"";position:absolute;left:-24px;top:22px;width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.leg.locked::before{background:var(--locked)}
.leg.complete::before{background:var(--ink)}
.leg-row{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.leg.current .leg-row{border-color:var(--accent);background:var(--soft)}
.leg-row:disabled{cursor:default}
/* GA7: a route plate has one width, the widest sign's (40 px), so every country name starts at one x. */
.leg-row .plate{min-width:40px}
.leg-row .plate b{flex:1 0 auto;justify-content:center;padding:0 4px}
.leg-main{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px}
.leg-name{font:800 17px/1.1 var(--display);grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* GB3: at 320 px a route row has 109 px for the name (BG Netherlands needs 121); at 340 px or less it is 14 px and may break,
   never cut. */
@media (max-width:340px){
  .leg-name{font-size:14px;white-space:normal;overflow-wrap:anywhere}
}
.leg-bar{display:block;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.leg-bar>i{display:block;height:100%;background:var(--accent)}
/* S3 (GB3): five segments of one 6 px space, one per stop, each filled by its stretch's starred levels (--f, 0 to 1); the row
   keeps its height. */
.leg-bar.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;background:none;overflow:visible}
.leg-bar.seg>i{position:relative;height:100%;border-radius:3px;background:var(--rule);overflow:hidden}
.leg-bar.seg>i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--f) * 100%);background:var(--accent)}
.leg-done{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.leg-stars{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.leg-lock{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.leg-lock .ico{width:16px;height:16px}
.route-end{margin-top:18px;font-weight:600;color:var(--ink-2)}
.foot{margin-top:30px;font-size:14px;color:var(--ink-2);display:grid;gap:10px;justify-items:start}
.foot a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
.foot-safety{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.foot-safety::before{content:"P";content:"P" / "";flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--plate-band);color:#F2EBDD;font:800 14px/1 var(--display)}

/* country view */
.country-title{display:flex;align-items:center;gap:10px;font-size:34px}
.bays-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px}
.stretch{content-visibility:auto;contain-intrinsic-size:auto 206px}
.stretch-h{font:700 15px/1.35 var(--body);color:var(--ink);margin-bottom:2px}
.bay-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:8px}
.bay{width:100%;aspect-ratio:1/1.08;min-height:52px;min-width:44px;border-radius:9px;border:1.5px solid var(--rule);border-top:5px solid var(--rule);background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;color:var(--ink)}
.bay .no{font:800 18px/1 var(--display);font-variant-numeric:tabular-nums}
.bay .mini{font-size:14px;letter-spacing:1px;color:var(--ink);line-height:1}
.bay.done{background:var(--panel);border-top-color:var(--accent)}
.bay.boss{border-style:double;border-width:3px;border-top-width:5px}
.bay.current{border-color:var(--accent);border-top-color:var(--accent);background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px var(--shadow)}
.bay.current .mini{color:var(--on-accent)}
.bay:disabled{cursor:default;color:var(--locked);border-style:dashed;border-top-style:solid}

/* plate chip */
.plate{display:inline-flex;align-items:stretch;height:24px;border-radius:4px;background:var(--plate);border:1.5px solid var(--plate-ink);overflow:hidden;color:var(--plate-ink);flex:none;vertical-align:middle}
.plate::before{content:"";width:7px;background:var(--plate-band)}
.plate b{display:flex;align-items:center;padding:0 7px;font:800 14px/1 var(--display);letter-spacing:.04em}

/* buttons */
.btn{font:600 15px/1.1 var(--body);min-height:44px;min-width:44px;padding:0 16px;border-radius:10px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
.btn .ico{width:20px;height:20px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn:not(.primary):hover{background:var(--soft)}
.btn:active{transform:translateY(1px)}
.btn.quiet{border-color:transparent;padding:0 10px;text-decoration:underline;text-underline-offset:3px}
.btn.wide{width:100%}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.armed{background:var(--soft);font-weight:800}
.btn:disabled{opacity:.45;cursor:default}
.linkish{background:none;border:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0;font-size:14px;min-height:44px;min-width:44px}
.linkish.armed{color:var(--ink);font-weight:600}
.badge.poor{display:inline-block;font-size:14px;font-weight:600;color:var(--ink);background:var(--soft);border:1px solid var(--accent);border-radius:6px;padding:2px 6px;line-height:1.25}

/* play */
html[data-screen="play"] .app{padding-inline:6px;padding-bottom:0}
#screen-play{display:flex;flex-direction:column;min-height:calc(100vh - 10px - env(safe-area-inset-top,0px));min-height:calc(100dvh - 10px - env(safe-area-inset-top,0px))}
/* The HUD is one row when title, stars, bumps and clock fit, else two (48 px, inside the 52 px of board.js availHeight, so the
   lot never moves). It decides on the widths the counters reserve, never the digits shown. */
.hud{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:4px 8px;min-height:52px;padding-inline:6px}
.hud-mid{flex:999 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font:800 16px/1.1 var(--display);white-space:nowrap;overflow:hidden}
.hud-end{flex:1 1 auto;display:flex;align-items:center;gap:8px}
/* Last resort only: a title that is longer than a whole row (none of the nine languages is, at 320 px) still ends in an ellipsis. */
#hudTitle{overflow:hidden;text-overflow:ellipsis}
/* Under 360 px the title is 15 px: DE "Der Parkplatz deines Freundes" is 243 px at 16 px, the first row leaves 242. */
@media (max-width:359px){.hud-mid{font-size:15px}}
.stars{display:inline-flex;gap:2px;flex:none;align-items:center}
.stars.step{font:600 14px/1 var(--body);color:var(--ink-2);padding:6px 10px;border-radius:999px;border:1.5px solid var(--rule)}
.star{width:20px;height:20px;stroke:var(--ink);stroke-width:1.5px;stroke-linejoin:round}
.star.on{fill:var(--accent)} .star.off{fill:transparent}
.stars.big .star{width:40px;height:40px;stroke-width:1.2px}
/* The counters reserve their widest usual value (two digits, 59:59), so the clock never grows at 10:00 and moves the title. */
.bumps{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;font:800 16px/1 var(--display);font-variant-numeric:tabular-nums;flex:none;margin-left:auto;min-width:calc(20px + 2ch)}
.bumps .ico{width:16px;height:16px;color:var(--accent)}
.hud-clock{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;font:600 15px/1 var(--body);font-variant-numeric:tabular-nums;min-width:calc(20px + 5ch);color:var(--ink-2);flex:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.bumps[hidden]+.hud-clock{margin-left:auto}
.hud-clock .ico{width:16px;height:16px}
/* v2.6.0 (FC1, R8-92): the trucks-left count stands out of the flow, so it moves nothing (fitLeft omits it without room); one width per lot. */
.hud-mid{position:relative}
.hud-left{position:absolute;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:calc(19px + 1ch);font-variant-numeric:tabular-nums;color:var(--ink)}
.hud-left[data-w="2"]{min-width:calc(19px + 2ch)}
.hud-left[hidden]{display:none}
.hud-left .ico{width:16px;height:16px;flex:none;color:var(--ink-2)}
/* Under 360 px (INDEX R8-96) the count is smaller, as the title already is there: a 14 px icon, a 2 px gap and 14 px digits, in the same
   colours (so the same contrast), which lets it stand on more of the narrow phones; it still moves nothing and is still omitted without room. */
@media (max-width:359px){.hud-left{gap:2px;font-size:14px;min-width:calc(16px + 1ch)}.hud-left[data-w="2"]{min-width:calc(16px + 2ch)}.hud-left .ico{width:14px;height:14px}}
#screen-play .foot-safety{margin:0;padding:0 0 4px;gap:6px;font-size:14px;line-height:18px;white-space:nowrap;color:var(--ink-2);font-weight:500}
#screen-play .foot-safety::before{width:18px;height:18px;font-size:12px}
/* Under 360 px the play line may take two lines (the parked-only text is 310 to 321 px against 284 in six languages; nowrap
   widened the page, P0-04). From 360 px up the one line of SPEC 7.2 stands. */
@media (max-width:359px){
  #screen-play .foot-safety{white-space:normal;text-wrap:balance;font-size:13px;line-height:16px;min-height:32px;padding-bottom:0}
}
.play-band{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:0 6px 6px}
.play-band .league-chip{margin:0}
.play-band .chip-link{min-height:36px;font-size:14px}
.convoy-band{display:grid;gap:4px;font-size:14px}
.band-line{display:flex;align-items:center;gap:6px;font-weight:600}
.band-line .ico{width:16px;height:16px}
.coach{margin:2px 6px 8px;padding:10px 14px;border-left:5px solid var(--accent);background:var(--soft);border-radius:4px 10px 10px 4px;font:600 16px/1.35 var(--body);min-height:44px;display:flex;align-items:center}
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 14px;margin:2px 0 8px;border:1.5px solid var(--accent);border-radius:12px;background:var(--panel)}
.banner-text{flex:1 1 200px;display:grid;gap:2px;font-size:14px;color:var(--ink-2)}
.banner-title{font:800 17px/1.15 var(--display);color:var(--ink)}
.banner-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Break nudge (P0-04): fixed, out of the flow */
.break-overlay{position:fixed;z-index:15;top:calc(8px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(428px,calc(100% - 16px));margin:0;box-shadow:0 10px 28px var(--shadow)}
.break-block{margin:0}
.board-wrap{display:flex;flex-direction:column;align-items:center;padding-block:6px}
.board{position:relative;overflow:hidden;border-radius:14px;background:var(--asphalt-2);box-shadow:0 12px 30px var(--shadow);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.lot{position:absolute;background-color:var(--asphalt);background-image:linear-gradient(to right,var(--stall) 2px,transparent 2px),linear-gradient(to bottom,var(--stall) 2px,transparent 2px);outline:2px dashed var(--curb);outline-offset:3px;border-radius:3px}
/* PM1 (R8-74): the markings strip, after #board in the DOM and above it on screen; static, tokens only, Sunlight in ink outlines. The
   drawing sits in 14 px from each side (the board's corner radius), so the yard meets only the straight top edge of the board. */
.scenery{order:-1;flex:none;overflow:hidden;pointer-events:none;padding-inline:14px}
.scenery svg{display:block;width:100%;height:100%}
.mk-g{fill:var(--asphalt-2)}
.mk-d{fill:var(--asphalt)}
.mk-k{fill:var(--curb)}
.mk-b{fill:var(--asphalt-2);stroke:var(--curb);stroke-width:1.5}
.mk-s{fill:none;stroke:var(--stall);stroke-width:2}
.mk-p{fill:none;stroke:var(--curb);stroke-width:2.5}
.mk-h{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.45}
:root[data-contrast="high"] .mk-g{fill:none}
:root[data-contrast="high"] .mk-d,:root[data-contrast="high"] .mk-k,:root[data-contrast="high"] .mk-b,:root[data-contrast="high"] .mk-s,:root[data-contrast="high"] .mk-p,:root[data-contrast="high"] .mk-h{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:1}
.veh{position:absolute;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;z-index:2;border-radius:10px}
.veh svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.veh:disabled{cursor:default;z-index:3}
.veh:focus-visible{outline:3px solid var(--accent-hi);outline-offset:-1px}
.veh.coach-target{z-index:4}
.veh.coach-target::after{content:"";position:absolute;inset:-5px;border:3px solid var(--accent-hi);border-radius:12px;pointer-events:none;animation:coach 1.2s ease-in-out infinite}
@keyframes coach{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.05)}}
.veh.coach-nudge svg{animation:nudge .6s ease-out}
@keyframes nudge{30%{transform:scale(1.06)}}
/* the light silhouette edge on every vehicle */
svg .edge{stroke:rgba(8,27,56,.55);stroke-width:2}
.veh svg .edge{stroke:var(--veh-edge,#F2EBDD);stroke-opacity:.9;stroke-width:3}
:root[data-contrast="high"] .veh svg .edge,:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]) .veh svg .edge{stroke-opacity:1}
/* the player's truck */
.veh.mine::after{content:"";position:absolute;inset:2px;border:2px dashed var(--accent-hi);border-radius:10px;pointer-events:none}
/* press feedback at pointerdown */
.veh svg{transition:transform 120ms cubic-bezier(.2,.8,.2,1),filter 120ms cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.veh.pressing svg{transform:scale(.96);filter:brightness(1.12);transition:none}
/* contact mark, bumped outline */
.board canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.spark{position:absolute;z-index:6;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;background:var(--accent-hi);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark .22s ease-out both}
@keyframes spark{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.1);opacity:0}}
.veh.bumped{outline:3px solid var(--accent-hi);outline-offset:-2px;animation:bumped .7s ease-in both}
@keyframes bumped{0%,40%{outline-color:var(--accent-hi)}100%{outline-color:transparent}}
.star.lost{animation:star-lost .42s cubic-bezier(.3,1.4,.5,1) both;transform-origin:50% 55%}
@keyframes star-lost{0%{fill:var(--accent);transform:scale(1)}35%{fill:var(--accent);transform:scale(1.35)}100%{fill:transparent;transform:scale(1)}}
.sheet .stars.big .star.on{animation:star-in .28s cubic-bezier(.3,1.5,.5,1) both}
.sheet .stars.big .star.on:nth-child(1){animation-delay:.36s}
.sheet .stars.big .star.on:nth-child(2){animation-delay:.47s}
.sheet .stars.big .star.on:nth-child(3){animation-delay:.58s}
@keyframes star-in{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
/* composited coach path */
.coach-path{position:absolute;z-index:1;pointer-events:none;--t:6px;border-radius:999px;opacity:.95}
.coach-path .dash{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.coach-path .dash::before{content:"";position:absolute;top:0;bottom:0;left:-20px;right:-20px;
  background:repeating-linear-gradient(90deg,var(--accent-hi) 0 12px,transparent 12px 20px);animation:dash-x .9s linear infinite}
.coach-path[data-dir="up"] .dash::before,.coach-path[data-dir="down"] .dash::before{left:0;right:0;top:-20px;bottom:-20px;
  background:repeating-linear-gradient(180deg,var(--accent-hi) 0 12px,transparent 12px 20px);animation-name:dash-y}
.coach-path[data-dir="left"] .dash::before,.coach-path[data-dir="up"] .dash::before{animation-direction:reverse}
@keyframes dash-x{from{transform:translateX(-20px)}to{transform:translateX(0)}}
@keyframes dash-y{from{transform:translateY(-20px)}to{transform:translateY(0)}}
.coach-path::after{content:"";position:absolute;width:0;height:0;border:calc(var(--t) * 1.5) solid transparent}
.coach-path[data-dir="right"]::after{left:100%;top:50%;transform:translateY(-50%);border-left:calc(var(--t) * 2) solid var(--accent-hi);border-right:0}
.coach-path[data-dir="left"]::after{right:100%;top:50%;transform:translateY(-50%);border-right:calc(var(--t) * 2) solid var(--accent-hi);border-left:0}
.coach-path[data-dir="down"]::after{top:100%;left:50%;transform:translateX(-50%);border-top:calc(var(--t) * 2) solid var(--accent-hi);border-bottom:0}
.coach-path[data-dir="up"]::after{bottom:100%;left:50%;transform:translateX(-50%);border-bottom:calc(var(--t) * 2) solid var(--accent-hi);border-top:0}
.veh::before{content:"";position:absolute;inset:-3px;border-radius:12px;pointer-events:none;opacity:0;box-shadow:0 0 0 3px var(--accent-hi),0 0 14px 4px var(--accent)}
.veh.hint::before{animation:hint-ring .8s ease-in-out 3}
@keyframes hint-ring{50%{opacity:1}}
.finger{position:absolute;z-index:7;width:40px;height:40px;margin:-6px 0 0 -10px;pointer-events:none;animation:finger 1.1s ease-in-out infinite}
.finger svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes finger{0%,100%{transform:translate(6px,10px) scale(1)}50%{transform:translate(0,0) scale(.92)}}
.play-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px 6px calc(12px + env(safe-area-inset-bottom,0px))}
.play-foot .btn{min-height:56px;padding:4px;gap:2px;font-size:14px;line-height:1.15;flex-direction:column}
.play-foot .btn>span{white-space:nowrap}
/* v2.6.3 (SF1): the icon-less Skip label may wrap, or DE, BG and HU widen the tutorial page past the phone */
#skipTutBtn>span{white-space:normal}
.play-foot .btn .ico{width:20px;height:20px}
#hintBtn{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-content:center;column-gap:3px;row-gap:2px}
#hintBtn>.ico,#hintBtn>.coin,#hintBtn>#hintCost{grid-row:1}
#hintBtn>[data-i18n]{grid-row:2;grid-column:1/-1}
#hintBtn .coin{width:14px;height:14px}
/* night NPC palette by index, so seeds keep their layouts; the chevron is dark navy on the boxes (4.02 to 6.10:1) */
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box]{--chev:rgba(14,24,48,.85)}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="0"]{--box:#B9AE9A}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="1"]{--box:#A39A88}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="2"]{--box:#9A8F7A}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="3"]{--box:#AFA592}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="4"]{--box:#8E8571}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-box="5"]{--box:#A79D88}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="0"]{--cab:#1A2C52}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="1"]{--cab:#24365C}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="2"]{--cab:#202A40}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="3"]{--cab:#141C2E}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="4"]{--cab:#2A3A5E}
:root[data-night]:not([data-theme="light"]):not([data-nightlook="off"]):not([data-contrast="high"]) .veh[data-cab="5"]{--cab:#13284F}
:root[data-contrast="high"] .veh[data-cab="0"]{--cab:#0B1F4D}
:root[data-contrast="high"] .veh[data-cab="1"]{--cab:#1E3260}
:root[data-contrast="high"] .veh[data-cab="2"]{--cab:#26324A}
:root[data-contrast="high"] .veh[data-cab="3"]{--cab:#14181F}
:root[data-contrast="high"] .veh[data-cab="4"]{--cab:#2C3B5C}
:root[data-contrast="high"] .veh[data-cab="5"]{--cab:#0F2D5C}
:root[data-contrast="high"] .veh[data-box="2"]{--box:#A9BCDB}
:root[data-contrast="high"] .veh[data-box="4"]{--box:#93A8CB;--chev:rgba(6,26,58,.85)}

/* garage */
.bridge-card{margin-top:20px;padding:14px 16px;border:1.5px solid var(--accent);border-radius:14px;background:var(--soft);display:grid;gap:8px}
.garage-preview{padding:12px 0 4px;max-width:300px;width:100%}
.garage-preview svg{display:block;width:100%;height:auto}
.g-name{font:800 18px/1.1 var(--display);margin-top:8px;overflow-wrap:anywhere}
.count{font-size:14px;color:var(--ink-2);margin:10px 0 14px}
.liveries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.liv{border:1.5px solid var(--rule);border-radius:12px;padding:12px;display:grid;gap:8px;align-content:start;background:transparent;overflow-wrap:anywhere}
.liv.sel{border-color:var(--accent);background:var(--soft)}
.liv-art{position:relative}
.liv-art svg{display:block;width:100%;height:auto}
.lock-badge{position:absolute;right:-4px;top:-6px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.lock-badge .ico{width:14px;height:14px}
.liv-name{font:800 15px/1.1 var(--display)}
.liv .btn{min-height:44px;font-size:14px;padding:0 10px}
.liv-progress{display:block;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.liv-progress>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.tag{font-size:14px;color:var(--ink-2);line-height:1.3}
.tag.on{color:var(--ink);font-weight:600;min-height:44px;display:flex;align-items:center;gap:6px}
.tag.on .ico{width:18px;height:18px}
.tag.merch{font-weight:600;color:var(--ink)}
.company{margin-top:24px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;display:grid;gap:10px}
.company-form{display:grid;gap:12px}

/* forms */
.acc-panel{display:grid;gap:14px;margin-top:6px}
.acc-panel .h-sub{font-size:34px}
.acc-panel .lede{margin-top:0}
.acc-choices{display:grid;gap:12px;margin-top:18px}
.acc-row{display:flex;flex-wrap:wrap;gap:8px}
.acc-row.yesno .btn{flex:1;min-height:56px;font-size:17px}
.acc-no{display:grid;gap:10px}
.acc-in{display:grid;gap:12px;margin-top:14px;justify-items:start}
.acc-type{display:flex;align-items:center;gap:8px;font:800 18px/1.2 var(--display)}
.acc-number,.done-number{font:800 22px/1.2 var(--display);font-variant-numeric:tabular-nums}
.field{display:grid;gap:6px}
.field-l{font-weight:600;font-size:15px}
.field input,.field select{font:500 17px/1.2 var(--body);min-height:48px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--ink-2);background:var(--panel);color:var(--ink);width:100%}
.phone-row{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:10px}
.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:15px;line-height:1.35;cursor:pointer}
.check input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.check a{font-weight:600;text-underline-offset:3px}
.field-err{color:var(--danger);font-weight:600;font-size:15px}
.mydata-body{display:grid;gap:14px;margin-top:14px;justify-items:start}
.mydata-del{display:grid;gap:10px;justify-items:start;padding-top:12px;border-top:1px dashed var(--rule)}

/* settings */
.set-group{margin-top:22px;display:grid;gap:10px;justify-items:start}
.set-h{font:800 18px/1.1 var(--display);letter-spacing:-.01em}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg-btn{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.seg-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* round 8 (C7 7.1): the twelve self-names wrap in rows of three at 320 px and of four at 375 px (measured: Nederlands is the widest) */
.lang-row .seg-btn,.lang-list .seg-btn{flex:0 1 auto;padding:0 7px}
.set-switches{gap:4px;justify-items:stretch}
.set-switch{width:100%}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:8px 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);text-align:left;cursor:pointer}
.sw-text{display:grid;gap:2px}
.sw-l{font-weight:600}
.sw-knob{flex:none;width:48px;height:28px;border-radius:999px;background:var(--rule);position:relative;border:1.5px solid var(--ink-2)}
.sw-knob::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--ink-2);transition:transform .15s}
.switch[aria-checked="true"] .sw-knob{background:var(--accent);border-color:var(--ink)}
.switch[aria-checked="true"] .sw-knob::after{transform:translateX(20px);background:var(--ink)}
.set-data{padding:14px 16px;border:1.5px dashed var(--rule);border-radius:14px;width:100%}
.set-data p{color:var(--ink-2);font-size:15px}
.set-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.reset{margin-top:26px}
.version{margin-top:6px}

/* leagues */
.league-body{display:grid;gap:14px;margin-top:10px}
.league-body .lede{margin-top:0}
.league-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lr{display:grid;grid-template-columns:2.5ch 1fr auto auto;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1.5px solid var(--rule);border-radius:10px}
.lr.you{border-color:var(--accent);background:var(--soft);font-weight:600}
.lr-rank{font:800 16px/1 var(--display);font-variant-numeric:tabular-nums}
.lr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-stars,.lr-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-time{color:var(--ink-2);font-size:14px}
.league-you{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--panel);border:1.5px solid var(--rule)}
.league-you b{font:800 17px/1 var(--display)}

/* modal sheet, finish sheets */
.modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fade .18s ease-out}
.sheet{background:var(--panel);color:var(--ink);width:100%;max-width:460px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;border-radius:18px 18px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;align-content:start;animation:rise .36s var(--ease-spring)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(40px);opacity:.4}}
.sheet h2{font:800 32px/1 var(--display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.sheet-truck svg{display:block;width:100%;height:auto}
.sheet-truck{max-width:240px}
.m-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.m-line{font-weight:600;display:flex;align-items:center;gap:6px}
.m-line .ico{width:18px;height:18px;color:var(--accent)}
.m-time{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.m-time .ico{width:18px;height:18px}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:30px;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.chip.coins{background:var(--accent);color:var(--on-accent)}
.chip.par{border:1.5px solid var(--ink);color:var(--ink)}
.m-points{font-weight:600}
.m-note{font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.m-note b{color:var(--ink);font-family:var(--display);font-weight:800}
.goal-line{margin-top:2px}
.m-note .ico{width:18px;height:18px;color:var(--ink)}
.late-note{color:var(--ink);font-weight:600;padding:10px 12px;border-radius:10px;background:var(--soft)}
/* primary action: full width, 56 px, always last */
.m-actions{display:grid;gap:8px;margin-top:4px}
.m-actions.row{display:flex;flex-wrap:wrap}
.m-secondary{display:flex;flex-wrap:wrap;gap:4px 8px}
.m-actions .btn.primary.wide{min-height:56px;font-size:17px}
/* A finish sheet is long, so the primary action (last, full width) sticks to the foot (offset 0, A114.6) with --panel painted
   over the content; the second shadow fills the gap below it and one corner radius past it so no wedge shows. Keep in step with
   .sheet padding (layout.test.js). */
.sheet.finish .m-actions{display:contents}
.sheet.finish .m-actions .btn.primary.wide{position:sticky;bottom:0px;z-index:1;box-shadow:0 0 0 10px var(--panel),0 calc(28px + env(safe-area-inset-bottom,0px)) 0 calc(14px + env(safe-area-inset-bottom,0px)) var(--panel)}
.quiet-link{font-size:14px;display:flex;flex-wrap:wrap;gap:4px 16px}
.quiet-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-underline-offset:3px}
.unlock-card{display:grid;gap:8px;justify-items:start;padding:12px 14px;border:1.5px solid var(--accent);border-radius:14px;background:var(--soft)}
.reveal{animation:reveal .5s cubic-bezier(.2,.8,.2,1) .45s both}
@keyframes reveal{from{transform:translateX(-36px);opacity:0}}
.share{margin:0;padding:12px;border-radius:10px;border:1px dashed var(--rule);font:500 14px/1.45 var(--body);white-space:pre-wrap;word-break:break-word;user-select:all;-webkit-user-select:all}
.share-row{display:flex;align-items:center;gap:14px}
.share-row .m-note{flex:1;min-width:0}
.share-preview{display:block;width:120px;max-width:100%;height:auto;border-radius:12px;box-shadow:0 8px 20px var(--shadow);flex:none}
.bridge{border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule);padding-block:14px;display:grid;gap:8px;justify-items:start}
.bridge-tag{font:800 20px/1.1 var(--display);letter-spacing:-.02em}
.bridge-list{display:grid;gap:8px;width:100%}
.card-link{justify-content:flex-start;width:100%}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp-cell{display:grid;gap:6px;justify-items:start;padding:12px;border:1.5px solid var(--rule);border-radius:12px}
.cmp-who{font-weight:600;display:grid;gap:2px}
.cmp-name{font-size:14px;color:var(--ink-2);font-weight:500}
.cmp-time{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.cmp-time .ico{width:16px;height:16px}
.verdict{font:800 18px/1.25 var(--display)}
.cmp-account{margin-top:-2px}
.lang-list{display:flex;flex-wrap:wrap;gap:8px}

/* toast */
.toast{position:fixed;left:50%;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-size:14px;width:max-content;max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity .2s linear,transform .3s var(--ease-spring);z-index:30;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px var(--shadow)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.top{bottom:auto;padding:8px 14px;transform:translate(-50%,-12px)}
.toast.top.on{transform:translate(-50%,0)}
.toast.has-act{pointer-events:auto}
.toast-act{background:var(--accent);color:#081B38;border:0;border-radius:8px;font-weight:600;min-height:44px;min-width:44px;padding:0 14px;cursor:pointer;flex:0 0 auto}

/* boot error */
.boot-error{padding:40px 0;display:grid;gap:14px;justify-items:start;font-weight:600}

/* Calm motion */
:root[data-calm="1"] .spark{display:none}
:root[data-calm="1"] .screen{animation:none}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .toast{transition:none}
  .veh.pressing svg{transform:none}
  .spark{animation:spark-rm .3s linear both!important;animation-duration:.3s!important}
  .star.lost,.sheet .stars.big .star.on{animation:none}
  .veh.hint::before{animation:none;opacity:1}
  .veh.coach-target::after{animation:none}
  .coach-path .dash::before{animation:none!important}
  .finger{animation:none}
  .modal,.sheet,.reveal{animation:none}
  .screen,.card-in,.nav-tab .ico,.nav-play .nav-disc,.sheet .strip-seg li{animation:none;transition:none}
  .clear-glow{animation:clear-glow .5s linear both!important;animation-duration:.5s!important}
}
@keyframes spark-rm{0%{opacity:1;transform:none}100%{opacity:0;transform:none}}

@media (min-width:700px){
  .app{padding-block:24px 48px}
}

/* a first-screen tap made while the game is loading */
.waiting{cursor:progress}
.waiting::after{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* ===== round 3 (SPEC v2.1): garage v2, hero truck, passport, truck stop, roles, shunter, clip ===== */
.ico.big{width:44px;height:44px}
.coach{justify-content:space-between;gap:10px}
.coach-chip{flex:none;min-height:26px}
.hud-obj{display:inline-flex;align-items:center;flex:none;color:var(--ink)}
.hud-obj .ico{width:20px;height:20px;color:var(--accent)}
/* v2.6.3 (SF1): a 44 px target in the icon's own 20 px (its padding taken back by the margin), square so all of it takes the tap */
.hud-obj-btn{position:relative;z-index:1;display:flex;padding:12px;margin:-12px;border:0;border-radius:0;background:none;cursor:pointer}
.hud-obj-btn:focus-visible{outline-offset:-3px}
#restartBtn.raised{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.veh.ringed::after{border-style:solid;border-color:var(--ink)}   /* the teaching ring: not the dashed amber ring of the player's own truck */
.obj-line.met{color:var(--ink)}
.obj-line.miss{color:var(--ink-2)}

/* home: my truck with two buttons, the truck stop block */
.mytruck{flex-wrap:wrap}
.mt-btns{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.stopcard{display:grid;gap:10px;padding-block:18px;border-bottom:1px solid var(--rule)}
.stop-art{border-radius:14px;overflow:hidden;background:var(--asphalt-2)}
.stop-svg{display:block;width:100%;height:auto;aspect-ratio:400/160}
.stop-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stop-row .s[data-ready]{color:var(--ink);font-weight:600}
.stop-row .btn.ready{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.stop-fresh{animation:stop-in .4s ease-out both}
@keyframes stop-in{from{opacity:0}}
:root[data-calm="1"] .stop-fresh{animation:none}
/* Round 8 (PV1, slim point 4 (a) and (c)): the early previews of the special trucks, a quiet card after the truck stop in the same
   flat style: the offer line, the four lots as rows of the since-card's kind (icon, name, chevron; one column, so the longest name of
   the twelve languages keeps whole words at 320 px; at least 44 px each) and a quiet Not now. Tokens only, so the dark look and
   Sunlight follow; the card is never shown at night. */
.preview-card{display:grid;gap:10px;padding-block:18px;border-bottom:1px solid var(--rule);contain-intrinsic-size:auto 182px}
.preview-title{margin:0;font:700 16px/1.3 var(--body);color:var(--ink)}
.preview-row{display:grid;gap:8px}
.preview-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 12px;border:0;border-radius:10px;background:var(--soft);color:var(--ink);text-align:left;cursor:pointer;font:600 16px/1.25 var(--body)}
.preview-btn .ico{flex:none;width:22px;height:22px;color:var(--ink-2)}
.preview-name{flex:1;min-width:0}
.preview-btn .chev{flex:none;font-size:22px;line-height:1;color:var(--ink-2)}
.preview-later{justify-self:start}
.preview-lede{margin:0;font-size:15px;color:var(--ink-2)}
.preview-btn .plate{min-width:40px}
.preview-btn .plate b{flex:1;justify-content:center}

/* garage tabs and part tiles */
.garage-tabs{margin:2px 0 12px}
.garage-tabs{gap:6px}
.garage-tabs .seg-btn{min-height:44px;padding:0 11px}
.garage-parts{display:grid;gap:10px}
.horn-art{display:grid;place-items:center;aspect-ratio:3/1;border-radius:10px;background:var(--soft);color:var(--ink)}
.horn-note{margin:0}
.horn-note a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.liv-art .stamp-svg,.liv-art svg{display:block}

/* passport */
.passport-summary{display:flex;flex-wrap:wrap;gap:4px 12px;font-weight:600;color:var(--ink)}
.stamps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stamp{display:grid;gap:6px;justify-items:center;align-content:start;width:100%;min-height:44px;padding:12px 8px;border:1.5px solid var(--rule);border-radius:14px;background:transparent;color:var(--ink);cursor:pointer;text-align:center}
.stamp:disabled{cursor:default}
/* A passport cell is as tall as its row (GA9): the <li> is a flex row so the button stretches; min-width 0 keeps a long name in
   its 1fr track. */
.stamp-cell{display:flex}
.stamp-cell>.stamp{flex:1 1 auto;min-width:0}
.stamp-cell.stamped .stamp{border-color:var(--accent)}
.stamp-cell.gold .stamp{border-color:var(--accent-hi);background:var(--soft)}
.stamp-art{display:block;width:100%;max-width:120px}
.stamp-art svg{display:block;width:100%;height:auto}
.stamp-name{font:800 15px/1.1 var(--display)}
.stamp-line{line-height:1.25}
.pp-actions{display:flex;margin-top:18px}
.pp-actions .btn.primary{min-height:56px;font-size:17px;width:100%}
.stamp-reveal .stamp-art{width:96px}
.country-passport{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center}
.country-passport a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-underline-offset:3px}

/* truck stop screen */
.stop-art.large{margin-top:12px}
.stop-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.stop-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 12px;border:1.5px solid var(--rule);border-radius:12px}
.stop-item.built{border-color:var(--accent);background:var(--soft)}
.stop-text{min-width:0;display:grid;gap:2px}
.stop-act{display:grid;gap:4px;justify-items:end;flex:none;max-width:48%}
.stop-act .btn{min-height:44px;padding:0 12px}

/* share grid and the clip sheet */
.sgrid-wrap{display:grid;gap:6px}
.sgrid{margin:0;display:grid;gap:2px;font-size:20px;line-height:1.3}
.sgrid-row{white-space:nowrap;letter-spacing:.02em;overflow:hidden}
.sheet .unlock-card{grid-template-columns:minmax(0,112px) 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:6px}
.sheet .unlock-card .sheet-truck,.sheet .unlock-card .stamp-art{grid-row:1 / span 2;max-width:112px;width:100%}
.sheet .unlock-card .m-line{align-self:end}
.sheet .unlock-card .btn{align-self:start}
.clip-stage{position:relative;justify-self:center;height:min(44vh,340px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#081B38}
.clip-canvas{display:block;width:100%;height:100%}
.clip-video{display:block;width:100%;height:100%;object-fit:contain;background:#081B38}
.clip-ring{position:absolute;top:8px;right:8px;width:52px;height:52px;pointer-events:none}
.clip-ring svg{display:block;width:52px;height:52px}

/* round 5 (v2.3): "Move my game", progress-code boxes, LiveOps cards. Tokens only; every tap target is a .btn (44 px). */
#setMove .btn{min-width:min(100%,260px)}
.code-box{display:block;width:100%;min-height:120px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--ink-2);background:var(--panel);color:var(--ink);font:500 17px/1.35 var(--body);resize:vertical;word-break:break-all;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.code-box[readonly]{border-style:dashed;background:var(--soft)}
.code-err{margin:0}
.code-sum{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:600}
.live-notice,.live-card{margin:0 0 12px;padding:12px 14px;border-radius:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.live-notice{border:1.5px solid var(--rule);background:var(--panel)}
.live-card{border:1.5px solid var(--rule);background:var(--panel)} /* round-5 review: quieter than the amber update card */
.live-from{flex-basis:100%;font-size:14px;font-weight:600;color:var(--ink-2)}
.live-text{flex-basis:100%;color:var(--ink)}
.live-actions{display:flex;flex-wrap:wrap;gap:8px}
.daily-live{display:grid;gap:4px}
.live-event{font-weight:600;color:var(--ink)}
.live-note{margin:0}
/* round-5 review: during an update reload the screen, a sheet and a toast are hidden behind a calm static view (brand mark,
   never a blank page). */
html[data-reloading] .app,html[data-reloading] .modal,html[data-reloading] .toast{visibility:hidden}
.reload-view{display:none}
html[data-reloading] .reload-view{display:flex;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;gap:10px;background:var(--bg)}
.reload-view .pict{width:56px}
.reload-view .wm{font-size:24px}
#firstCode.linkish{font-size:16px;color:var(--ink)}
.install-steps{margin:0;padding-left:1.4em;display:grid;gap:6px}
.install-steps li{padding-left:2px}
.code-box[aria-invalid="true"]{border-color:var(--danger)}
.code-from{margin:0;color:var(--ink-2)}
.first-note{margin:0 0 4px}


/* ===== round 6 (SPEC v2.4, docs/round6/11 section 10, the U8 list) ===== */
/* Route-to-home in one layout (08): home's lower parts skip layout and paint until near the viewport; while
   #screen-home.cv-hold is set the route and footer are skipped outright, so the first frame lays home out once. */
#myTruck{content-visibility:auto;contain-intrinsic-size:auto 182px}
#stopCard{content-visibility:auto;contain-intrinsic-size:auto 272px}
#screen-home .route{content-visibility:auto;contain-intrinsic-size:auto 942px}
/* v2.5: the footer lost its three buttons to the bottom bar: 96 px at 375 px (EN, 2026-10-09) plus the 12 px of pass 0 */
#homeFoot{content-visibility:auto;contain-intrinsic-size:auto 108px}
#teamsCard{content-visibility:auto;contain-intrinsic-size:auto 220px}
#feedbackCard{content-visibility:auto;contain-intrinsic-size:auto 76px}
#screen-home.cv-hold #myTruck,#screen-home.cv-hold #stopCard,#screen-home.cv-hold #teamsCard,#screen-home.cv-hold #feedbackCard{content-visibility:visible}
#screen-home.cv-hold .route,#screen-home.cv-hold #homeFoot,#screen-home.cv-hold #previewCard{content-visibility:hidden}

/* the next-goal line under the daily card (04 section 3): one plain line */
#homeGoal{margin:10px 2px 0}
/* the quiet way into the earlier parkings, in the daily card (05 section 5) */
.daily-earlier{justify-self:start;margin:-6px 0 -4px -10px}
/* the friends ranking chip (01 section 2.5): a chip like the league chip, never a rank */
.chip-row{margin-top:12px}

/* the Driver/Player badge (01 section 3): its words on bone with a thin outline, amber for drivers; never a check mark,
   a shield or a tick */
.badge-tag{display:inline-flex;align-items:center;flex:none;padding:2px 7px;border-radius:5px;background:var(--plate);color:var(--plate-ink);border:1px solid var(--plate-ink);font:600 14px/1.15 var(--body);letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.badge-tag[data-badge="driver"]{border-color:var(--accent)}
:root[data-contrast="high"] .badge-tag{border-width:2px}
#friendsBody{display:grid;gap:14px;margin-top:10px}
#friendsBody .lede{margin-top:0}
/* round-6 fix: the whole generated name stays readable at 360 px in every language; the badge wraps under it */
.lr-who{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
.lr-who .lr-name{min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.cmp-name .badge-tag{margin-left:2px}
.friends-seen{color:var(--ink)}
.league-you.none{color:var(--ink-2)}

/* Drivers vs Players (02 section 3): the title, the lines with a thin bar of the same navy for both teams */
.teams-card{margin-top:12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:14px;display:grid;gap:8px}
.teams-title{font:800 19px/1.15 var(--display);letter-spacing:-.01em}
.teams-head{font-weight:600;font-size:15px;margin-top:2px}
.teams-line{display:grid;gap:4px;font-weight:600;font-variant-numeric:tabular-nums}
.teams-bar{display:block;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.teams-bar>i{display:block;height:100%;border-radius:3px;background:var(--ink)}
:root[data-contrast="high"] .teams-bar{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.teams-prev{font-weight:600}
.teams-you{font-weight:600;color:var(--ink)}
.teams-card .quiet-link{margin-top:-6px}

/* the +30 line and the value line of the driver ask (03 section 2) */
.invite-line,.driver-value{color:var(--ink-2)}

/* the confirm sheet of a sign-in link (07 section 1.4) */
.link-account,.link-number{font:800 18px/1.25 var(--display)}
.link-who{display:grid;gap:12px}   /* round-6 fix: the body and the account lines, one block that describes the dialog */

/* earlier parkings (05 section 2): a month per block, Monday-first, every day a 44 px button; a played day shows its
   stars, any other day is a plain day of a calendar */
#earlierBody{display:grid;gap:22px;margin-top:16px}
.cal-month{content-visibility:auto;contain-intrinsic-size:auto 332px}

/* P2: content-visibility paint containment cut off focus rings, so each box gets a 6 px gutter that moves nothing (6 px
   padding, -6 px margin, 12 px more estimated size); #myTruck and #stopCard take the sides only. */
#myTruck,#stopCard,#screen-home .route,#homeFoot,#feedbackCard,.stretch,.cal-month{padding-inline:6px;margin-inline:-6px}
#screen-home .route,#homeFoot,#feedbackCard,.stretch,.cal-month{padding-bottom:6px;margin-bottom:-6px}
#myTruck,#stopCard{border-bottom-color:transparent;background:linear-gradient(var(--rule),var(--rule)) 50% 100%/calc(100% - 12px) 1px no-repeat border-box}
#myTruck,#stopCard,#screen-home .route,#homeFoot,#teamsCard,#feedbackCard,.stretch,.cal-month{overflow-clip-margin:6px}
.cal-title{font:800 20px/1.1 var(--display);letter-spacing:-.01em;margin-bottom:10px}
/* round-6 fix: seven 44 px columns and six gaps of 3 px fit the 328 px of a 360 px phone (4 px gaps needed 332) */
.cal-week,.cal-days{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:3px}
.cal-week{margin-bottom:4px;font-size:14px;font-weight:600;color:var(--ink-2);text-align:center}
.day-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:52px;padding:4px 0;border-radius:9px;border:1.5px solid var(--rule);background:transparent;color:var(--ink);font:800 16px/1 var(--display);font-variant-numeric:tabular-nums;cursor:pointer}
.day-cell:hover{background:var(--soft)}
.dc-stars{gap:0}
.dc-stars .star{width:12px;height:12px;stroke-width:2px}
.earlier-none{color:var(--ink-2)}

/* first screen at 700 px height or less: the parked-truck picture goes so Just play and the code link stay in view (never
   smaller text) */
@media (max-height:700px){
  .first-art{display:none}
}

/* ===== round 7 (SPEC v2.5, docs/round7/01 section 1 with the shell draft's 1.1 and 1.6; unit GA1): the bottom bar ===== */
/* The gear opens Settings from every bar screen but Settings (48 px). Home's header sits inside the 16 px gutters; the picture
   hides below 360 px (shell draft 1.1). Five-digit coins enter the right gutter by up to 10 px at 360 to 369 px, never the
   edge; open with the architect. */
.gear{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.gear .ico{width:24px;height:24px}
.top .coins,.sub-top .coins{margin-left:auto}
@media (max-width:389px){
  #screen-home .top{gap:8px}
}
@media (max-width:359px){
  #brandLink .pict{display:none}
}
/* The bar is fixed (html[data-nav], set by main.js show() before the frame), so showing it moves nothing. 64 px plus the safe
   area, five equal slots across the 460 px column; scrim (20) and toast (30) above it. The 1 px --rule line is an inset shadow,
   not a border (a border took a pixel from the content box). */
.nav-bar{position:fixed;left:0;right:0;bottom:0;z-index:9;margin:0 auto;width:100%;max-width:460px;height:calc(64px + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px);background:var(--panel);box-shadow:inset 0 1px 0 var(--rule);display:none}
html[data-nav="1"] .nav-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
/* A whole slot is the target (56 x 56 px; 64 x 64 at 320 px): icon above a 14 px label of at most two lines, wrapped at a space
   or soft hyphen (nav.* values only), never an ellipsis; the label line is at most 60 px (shell draft 1.2, A12). */
.nav-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-width:56px;min-height:56px;height:100%;padding:5px 0 4px;border:0;border-radius:0;background:none;color:var(--ink-2);cursor:pointer;font:inherit}
.nav-tab .ico{width:24px;height:24px}
.nav-l{display:block;max-width:60px;font-size:14px;font-weight:500;line-height:1.1;text-align:center;overflow-wrap:normal;hyphens:manual}
/* the active tab: ink, a bold label and a 3 x 24 px amber bar above the icon, with aria-current (never colour alone) */
.nav-tab[aria-current="page"]{color:var(--ink)}
.nav-tab[aria-current="page"] .nav-l{font-weight:700}
.nav-tab[aria-current="page"]::before{content:"";position:absolute;top:1px;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:2px;background:var(--accent)}
/* The raised Play: a 60 px disc, top 18 px above the bar. 22:00-04:59 it is quiet (WELLBEING.md 2), following data-late alone
   (applyLate flips it, no redraw). Where the night palette does not apply the glyph is ink: amber is under 3:1 on bone and
   Sunlight's white (WCAG 1.4.11). */
.nav-play{justify-content:flex-end;color:var(--ink)}
.nav-play .nav-disc{position:absolute;top:-18px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--bg)}
.nav-play .nav-disc .ico{width:28px;height:28px}
:root[data-late="1"] .nav-play .nav-disc{background:var(--panel);color:var(--accent);box-shadow:0 0 0 4px var(--bg),inset 0 0 0 2px var(--accent)}
:root[data-late="1"][data-theme="light"] .nav-play .nav-disc,:root[data-late="1"][data-nightlook="off"] .nav-play .nav-disc,:root[data-late="1"][data-contrast="high"] .nav-play .nav-disc{color:var(--ink)}
/* the page ends 16 px above the top of the raised Play; a toast sits above it (the top toast keeps its place) */
html[data-nav="1"] .app{padding-bottom:calc(64px + 18px + 16px + env(safe-area-inset-bottom,0px))}
html[data-nav="1"] .toast:not(.top){bottom:calc(64px + 18px + 12px + env(safe-area-inset-bottom,0px))}
/* the League/Friends switch of the two ranking screens while the Rankings tab is drawn (navbar.js) */
.rank-switch{margin-top:6px}

/* ===== round 7 (unit GA6): Settings > TruckerVerse, the Follow sheet, the opinion sheet, About this game ===== */
/* A9 (WCAG 2.4.11): the fixed bar never hides a focused control; keyboard scrolling stops above the bar and the raised Play. */
html[data-nav="1"]{scroll-padding-bottom:calc(64px + 18px + 16px + env(safe-area-inset-bottom,0px))}
/* The group: four full-width rows of at least 56 px, icon, label (16 px) and, where it leaves the game, the out mark; a long
   label wraps, never an ellipsis. */
.set-tv{justify-items:stretch;gap:0}
.set-tv .set-h{margin-bottom:6px}
.set-row{width:100%;min-height:56px;justify-content:flex-start;gap:12px;padding:8px 2px;border:0;border-bottom:1px solid var(--rule);border-radius:0;font:500 16px/1.25 var(--body);text-align:left}
.set-row .ico{flex:none;width:24px;height:24px;color:var(--ink-2)}
.set-row > span{flex:1 1 auto;min-width:0}
.set-row-l{display:grid;gap:2px}
.set-row[aria-disabled="true"]{cursor:default}
/* The Follow sheet: rows of at least 56 px, the mark in a 40 px tile (8 px clear space, no outline or fill), brand name over
   the app's line. */
.social-list{display:grid}
.social-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 2px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.social-row:last-child{border-bottom:0}
.social-row:hover{background:var(--soft)}
.social-row > .ico{flex:none;width:20px;height:20px;color:var(--ink-2)}
.social-tile{flex:none;display:grid;place-items:center;width:40px;height:40px}
.brand-glyph{display:block;width:24px;height:24px;fill:var(--brand-glyph)}
.social-text{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.social-name{font-weight:700;font-size:16px;line-height:1.2}
.social-line{font-size:14px;line-height:1.3;color:var(--ink-2)}
/* The opinion sheet: three stacked 56 px answers; the chosen one has the amber border and the check mark (never colour alone).
   The border is 2 px on all, so choosing moves nothing. */
.opinion-q{font-weight:600}
.opinion-choices{display:grid;gap:8px}
.opinion-choice{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 14px;border:2px solid var(--rule);border-radius:10px;background:transparent;color:var(--ink);font:600 16px/1.2 var(--body);text-align:left;cursor:pointer}
.opinion-choice .ico{flex:none;width:20px;height:20px;visibility:hidden}
.opinion-choice[aria-pressed="true"]{border-color:var(--accent)}
.opinion-choice[aria-pressed="true"] .ico{visibility:visible}
.opinion-topics{display:flex;flex-wrap:wrap;gap:8px}
.opinion-lot{font-weight:600;color:var(--ink)}
/* The sheet is taller than a small phone (675 px against 552 at 320 x 568), so its actions stick to the foot and Close and Send stay in
   view (A114.17 c). The block carries the sheet's bottom padding, painted, so nothing scrolls past under it; scroll-padding keeps a focused answer clear of it (WCAG 2.4.11). */
.sheet.tv-opinion{padding-bottom:0;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.sheet.tv-opinion .m-actions{position:sticky;bottom:0;z-index:1;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--panel);box-shadow:0 -10px 0 0 var(--panel)}
/* About this game: the last block of Settings, three short lines, nothing that moves. */
.set-about{margin-top:28px;gap:6px}
.set-about .version{margin-top:0}

/* ===== round 7 (SPEC v2.5, docs/round7/02 sections 2, 3 and 5; unit GA7): garage view switch, its three tabs and sections,
   mudflap swatches, My cab ===== */
/* The view switch "My truck | My cab": two 44 px links filling the column; the open one carries aria-current and reads like a
   pressed segment. */
.garage-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0 2px}
.garage-view .seg-btn{min-height:44px;display:flex;align-items:center;justify-content:center;padding:4px 8px;text-align:center;text-decoration:none;line-height:1.15}
.garage-view .seg-btn[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* Three tabs in one row at 320 px in nine languages (3 x 92 px): equal thirds; a long label wraps inside its button. */
.garage-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.garage-tabs .seg-btn{padding:4px;font-size:14px;line-height:1.15;white-space:normal;hyphens:auto;overflow-wrap:anywhere}
/* A section of a tab, and of My cab's list: its heading, then its grid. */
.g-sec{display:grid;gap:8px}
.g-sec-h{font:800 17px/1.15 var(--display);letter-spacing:-.01em;margin:8px 0 0}
#liveries{margin-top:8px}
/* Part and cab tiles: three columns (90 px at 320); a name may take three lines and hyphenates, so no language scrolls
   sideways. */
.garage-parts .liv,.cab-tiles .liv{padding:8px;gap:6px;grid-template-columns:minmax(0,1fr)}
.garage-parts .liv-name,.cab-tiles .liv-name{font-size:14px;hyphens:auto;overflow-wrap:anywhere}
.garage-parts .tag,.cab-tiles .tag{font-size:13px;hyphens:auto;overflow-wrap:anywhere}
.garage-parts .tag.on,.cab-tiles .tag.on{flex-wrap:wrap;gap:2px 4px}
.garage-parts .liv .btn,.cab-tiles .liv .btn{padding:0 6px;font-size:14px;width:100%}
.garage-parts .badge.poor,.cab-tiles .badge.poor{font-size:13px}
.garage-parts .liveries.parts,.cab-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* My cab tile names under 360 px (A111.7, AUD-11): the 14 px / 800 name took four to six lines in a 91 px tile in seven
   languages (budget three). Style only, three columns kept: 13 px, weight 600, -.02em, 5 px side padding; the button keeps its
   44 px. */
@media (max-width:359px){
.cab-tiles .liv{padding:8px 5px}
.cab-tiles .liv-name{font-size:13px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-inline:-2px}
}
/* Garage part tiles get the same under 360 px (GB5): names such as "Three-star mudflaps" took four or five lines at 14 px /
   800. */
@media (max-width:359px){
.garage-parts .liv{padding:8px 5px}
.garage-parts .liv-name{font-size:13px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-inline:-2px}
}
/* A mudflap swatch is an object icon (portrait), drawn at the height of a truck tile's drawing, never stretched. */
.liv-art svg.flap-swatch{width:auto;height:56px;margin:0 auto}
/* My cab: the scene keeps its 4:3 shape (288 x 216 at 320) so nothing moves when it is redrawn; no containment, it would clip
   the scene's edge. */
.cab-scene{margin-top:12px;border-radius:14px;overflow:hidden;background:var(--asphalt-2)}
.cab-scene svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.cab-caption{margin-top:10px}
.cab-list{display:grid;gap:14px;margin-top:8px}
.cab-lede{margin-top:0}
/* The element just bought fades in once (opacity only); never under Calm or reduced motion. */
.cab-fresh{animation:cab-in .3s ease-out both}
@keyframes cab-in{from{opacity:0}}
:root[data-calm="1"] .cab-fresh{animation:none}
@media (prefers-reduced-motion: reduce){.cab-fresh{animation:none}}
/* The Co-Driver row: the pennants earned, left to right, never an empty slot. */
.codriver .s{margin:0}
.codriver-row svg{display:block;height:36px;width:auto;max-width:100%}
/* A My cab milestone on a finish sheet: the tile's drawing, small. */
.sheet-truck.cab-reveal{max-width:168px}
/* GA8 Help me out: the tool row has four columns from the first frame, so the board is sized once; the tool waits invisible and
   only its visibility flips (160 ms fade unless Calm or reduced motion). No column is narrower than its label (minmax,
   max-content). */
.play-foot.has-help{grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1.3fr);column-gap:4px;padding-inline:2px}
.play-foot.has-help .btn{padding-inline:2px}
#helpBtn.help-in{animation:help-in .16s ease-out both}
@keyframes help-in{from{opacity:0}}
:root[data-calm="1"] #helpBtn.help-in{animation:none}
@media (prefers-reduced-motion: reduce){#helpBtn.help-in{animation:none}}
@media (max-width:359px){.play-foot.has-help .btn{font-size:13px}}
.help-note{margin-top:4px}
/* GA8 W1: the watch screen borrows the play screen's look: the board as in play (read only), the tool row of three 56 px
   columns under it. */
.watch-eyebrow{margin-top:4px}
#screen-watch .h-sub{font-size:34px}
.watch-lede{margin-top:8px}
.watch-wrap{margin-top:10px}
.watch-board .veh{cursor:default}
/* Watch tool row: W1's 92 px columns hold no 16-character label at 14 px (NL 110 px, PL 133 px), so the row takes the play
   screen's 6 px gutter and a label wraps balanced. Play and Pause are one line, so the toggle never changes the row's height. */
.watch-foot{padding-inline:0;margin-inline:-10px}
.watch-foot .btn>span{white-space:normal;text-wrap:balance}
/* GB5: at the end the toggle is hidden (Play there would only do what Watch again does) and the row closes up to the two
   buttons left. */
.watch-foot.ended{grid-template-columns:1fr 1fr}
/* GA8 review: the board is fitted to the room under the header (ui/watch.js watchRoom); when even the smallest board does not
   fit, the row is .pinned to the foot of the window so its buttons stay reachable. */
.watch-foot.pinned{position:sticky;bottom:0;z-index:4;background:var(--bg)}
/* Under 700 px of height the header gives room back to the lot: a title of 26 px and a line of 15 px, tighter gaps. */
@media (max-height:700px){
  #screen-watch .h-sub{font-size:26px}
  .watch-lede{margin-top:4px;font-size:15px;line-height:1.35}
  .watch-wrap{margin-top:4px}
}
/* GA9: the corridor strip: five segments, 6 px gap, 8 px high. States differ by shape, never by two close colours: done fills
   the box, current is a 2 px ring, later a 2 px line. Each token meets 3:1 on the page in every palette (a test reads them). */
.strip{display:grid;gap:8px;margin-top:12px}
.strip-seg{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.strip-seg li{flex:1;height:8px;border-radius:4px;background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 2px no-repeat}
.strip-seg li.done{background:var(--seg-done)}
.strip-seg li.cur{background:none;box-shadow:inset 0 0 0 2px var(--seg-done)}
/* The line under the segments wraps instead of cutting (the count takes its own line at 320 px); a name is never cut. It is
   information, so it sits under the stretch headings: 14 px in the quiet ink against the heading's 15 px. */
.strip-line{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.strip-name{min-width:0}
.strip-count{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-2)}
/* The E-road chip: white on the E-road green of the road signs (5.4:1), the same in every palette, as the signs are. */
.eroad{display:inline-block;padding:1px 5px;border-radius:4px;background:var(--eroad);color:var(--on-eroad);font:800 13px/1.3 var(--display);letter-spacing:.02em;vertical-align:1px}
.stretch-sub{margin:0 0 8px}
/* 24 px of air between the strip and the first stretch heading, so the two never read as one block. */
.strip + .bays-list{margin-top:24px}
/* Lena's pictures: dimmed at night whatever the night-look switch says (display only, the approved file is unchanged). */
:root[data-late="1"] .lena-img{filter:brightness(.82)}
/* A postcard arrives with a 200 ms fade (none under Calm or reduced motion) into a fixed 3:4 box, so nothing moves. */
.pc-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.pc-img.in{animation:pc-in .2s ease-out}
@keyframes pc-in{from{opacity:0}}
:root[data-calm="1"] .moment .reveal,:root[data-calm="1"] .pc-img.in{animation:none}
@media (prefers-reduced-motion: reduce){.pc-img.in{animation:none}}
/* Passport cell: the postcard thumbnail at 3:4 with the stamp over its upper right corner (40% of the cell, turned -6 degrees,
   on the page colour). */
.stamp.pc{position:relative}
.pc-thumb{display:block;width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--soft)}
.pc-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.stamp-art.pc-stamp{position:absolute;top:4px;right:2px;width:40%;max-width:none}
.pc-stamp svg,.moment-stamp svg{transform:rotate(-6deg);background:var(--panel);border-radius:15%}
.pp-postcards{margin-top:6px}
/* The AI line at the foot of the passport, 16 px under the share row; written with both classes because plain
   .ai-line{margin:0} further down has the same weight and comes later (GA9 review). */
.ai-line.pp-ai{margin-top:16px}
/* The postcard sheet: the whole card at 3:4, never wider than the sheet. The card keeps L-S4's min(55vh, 460px), so the sheet
   is longer than a phone and also carries .finish: the primary sticks to the foot and shows in the first view. */
.pc-full{margin:0;justify-self:center;height:min(55vh,460px);aspect-ratio:3/4;max-width:100%;border-radius:12px;background:var(--soft)}
.pc-full.pc-none{display:none}
.pc-stamp-row{display:flex;align-items:center;gap:12px}
.pc-stamp-row .stamp-art{width:72px;flex:none}
.pc-stamp-row .s{margin:0}
.ai-line{margin:0}
/* The country moment: the finished country's postcard in its 3:4 box with the stamp over its corner (96 px), Lena's line in a
   bubble with her name, the corridor row. Without a picture the stamp stands where the box was. */
.moment{display:grid;gap:10px;justify-items:center;text-align:center}
.moment-card{position:relative;margin:8px 0 0;height:min(40vh,340px);aspect-ratio:3/4;max-width:100%;border-radius:12px;background:var(--soft)}
.moment-stamp{position:absolute;top:-12px;right:-12px;width:96px}
/* Over a picture the stamp is at most 38% of the card's width and hangs 8% past the edge: a fixed 96 px stamp covered Lena's
   face (37% to 65% of the width) on a 320 px phone. Without a picture (.pc-none) it is static at 96 px. */
.moment-card:not(.pc-none) .moment-stamp{width:min(96px,38%);right:-8%}
.moment-card.pc-none{height:auto;aspect-ratio:auto;margin:0;background:none}
.moment-card.pc-none img{display:none}
.moment-card.pc-none .moment-stamp{position:static}
.moment-stamp-only{width:96px}
.moment .s{margin:0}
.moment-lena{justify-self:stretch;display:grid;gap:2px;padding:10px 12px;border-radius:14px 14px 14px 4px;border:1.5px solid var(--rule);background:var(--soft);text-align:left}
.moment-who{margin:0;font:800 13px/1.2 var(--display);color:var(--ink-2)}
.moment-say{margin:0;font-size:15px;line-height:1.35;color:var(--ink)}
.corridor-row{justify-self:stretch;margin:0;display:flex;align-items:center;gap:8px;font-weight:600;text-align:left;color:var(--ink)}
.corridor-row .eroad{flex:none}

/* ===== round 7, pass B (unit GB4): spring motion, Lena as host, clear cue, tool cards, asks, flash, bay 50 ===== */

/* 7.19 (round7/01 s5): ONE spring token: a damped spring (ratio 0.72) sampled in 18 steps where the browser has linear(), a
   cubic-bezier with the same overshoot elsewhere. Only transform and opacity move. Closing a sheet is instant. */
:root{--ease-spring:cubic-bezier(.22,1.18,.36,1)}
@supports (animation-timing-function:linear(0,1)){:root{--ease-spring:linear(0,0.071,0.229,0.415,0.592,0.742,0.857,0.939,0.992,1.022,1.035,1.038,1.035,1.029,1.022,1.015,1.009,1.005,1)}}
/* a card that appears on a screen that is already painted eases in (never on a screen's first paint) */
@keyframes card-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.card-in{animation:card-in .3s var(--ease-spring) both}
/* the bar's tabs and the raised Play press down to 92 % and spring back on release: a transition, so it costs nothing until a tap */
.nav-tab .ico,.nav-play .nav-disc{transition:transform .26s var(--ease-spring)}
.nav-tab:not(.nav-play):active .ico{transform:scale(.92);transition-duration:.06s}
.nav-play:active .nav-disc{transform:scale(.92);transition-duration:.06s}
/* Calm motion: everything above appears at once */
:root[data-calm="1"] .sheet,:root[data-calm="1"] .modal,:root[data-calm="1"] .toast,:root[data-calm="1"] .card-in,:root[data-calm="1"] .nav-tab .ico,:root[data-calm="1"] .nav-play .nav-disc,:root[data-calm="1"] .sheet .strip-seg li,:root[data-calm="1"] .reveal,:root[data-calm="1"] .sheet .stars.big .star.on{animation:none;transition:none}

/* 02 s12: the clear cue. The rear lamps of the last vehicle flash twice (WAAPI); under the OS reduced-motion setting a soft
   amber glow lights the board edge it left by (opacity only); under Calm nothing. Nothing runs while idle. */
.clear-glow{position:absolute;z-index:6;pointer-events:none;border-radius:6px;background:var(--accent-hi);box-shadow:0 0 14px 6px var(--accent);opacity:0;animation:clear-glow .5s linear both}
@keyframes clear-glow{0%{opacity:0}45%{opacity:.9}100%{opacity:0}}
:root[data-calm="1"] .clear-glow{display:none}

/* 05 s1: Lena as host: a round portrait (48 px on a sheet, 56 px on the first screen), her line in a bubble, the full AI line
   under it. No motion, day or night. */
.host{display:flex;align-items:center;gap:12px;min-height:48px}
.host-img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--rule)}
.host-say{flex:1;min-width:0;margin:0;padding:10px 12px;border:1.5px solid var(--rule);border-radius:14px 14px 14px 4px;background:var(--soft);font-size:15px;line-height:1.35;color:var(--ink);text-align:left}
.host-ai{margin:0}
.first-lena{display:grid;gap:6px}
.first-lena .host{min-height:56px}
.first-lena .host-img{width:56px;height:56px}
.first-lena[hidden]{display:none}
/* L-S1: no Lena block on a screen of 700 px or less (the first screen is then as after round 6); onboarding.js decides once
   when it draws, and a phone turned to a lower window is answered here. */
@media (max-height:700px){.first-lena{display:none!important}}
/* L-S1 and the hour: no Lena block from 22:00 to 04:59. The first screen is not redrawn at the edge, so it follows data-late
   alone: the welcome goes at once and the picture (a class, not [hidden]) returns with no redraw. */
:root[data-late="1"] .first-lena{display:none!important}
:root:not([data-late="1"]) .first-art.gives-way{display:none}

/* A32: bay 50 is named "Tight squeeze": a pill beside the HUD title and after the level title in the finish eyebrow. A name,
   not a prompt: no animation, ink on the page colour (4.5:1), border --ink-2 (3:1). */
.yard-tag{display:inline-flex;align-items:center;flex:none;padding:3px 8px;border:1.5px solid var(--ink-2);border-radius:999px;color:var(--ink);font:700 12px/1.2 var(--body);white-space:nowrap}
.yard-tag[hidden]{display:none}

/* 05 section 3 S4: the line of a finished stop and its mini strip (the strip rules of the country view apply); the newly done
   segment fills in 240 ms */
.stop-done{display:grid;gap:8px}
.stop-done-line{margin:0;font-weight:600;color:var(--ink)}
.sheet .strip-seg li{transition:background-color .24s linear}
/* Reduced motion, said again where it wins: the base rules of .card-in, the bar's tabs and the strip's segments come after the
   block at the head of the file with the same specificity. Keep this block last. */
@media (prefers-reduced-motion: reduce){
  .card-in,.nav-tab .ico,.nav-play .nav-disc,.sheet .strip-seg li{animation:none;transition:none}
}

/* 06 section 1: the tool card sits in its slot right under the host block; an empty slot takes no room and no gap */
.tool-slot:empty{display:none}
.tool-card .tool-source{margin:0}

/* the two quiet offers at the foot of a finish sheet (sound, parking) and the passport link of the country moment */
.ask-offer{display:grid;gap:6px;justify-items:start}
.ask-offer .m-note{margin:0}
.ask-offer .btn{min-height:44px}
.moment-passport{justify-content:center;margin:0}

/* 04 section 2 F1: the headlight flash on today's daily, a quiet 44 px ghost button with the lamps drawn in code */
.flash-row{display:flex;align-items:center}
.flash-btn{min-height:44px;gap:8px}
.flash-btn .ico{width:24px;height:24px}
.flash-done{margin:0;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.flash-count{margin:0}
.flash-count[hidden]{display:none}
/* Wind-down (social draft 6.1, as the home items at the head of the file): a finish sheet is not redrawn at 22:00, so its
   day-only parts (flash button and line, day's count, tool card and slot, quiet offers) go the moment data-late is set. */
:root[data-late="1"] .flash-row,:root[data-late="1"] .flash-count,:root[data-late="1"] .tool-slot,:root[data-late="1"] .tool-card,:root[data-late="1"] .ask-offer{display:none!important}

/* ===== round 7, pass B (unit GB5): My cab tap target and name row, passport relay and convoy rows, mentor button, coffee
   lines, postcard sheet card ===== */
/* My cab: the stage holds the air freshener's 48 x 48 tap target over the scene (the scene is rewritten whole, so the button
   cannot live inside it and keep focus). */
.cab-stage{position:relative;margin-top:12px}
.cab-stage .cab-scene{margin-top:0}
.cab-fresh-btn{position:absolute;top:0;left:calc(50% - 24px);width:48px;height:48px;padding:0;border:0;border-radius:24px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cab-fresh-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.cab-board-row{margin-top:6px}
/* Passport relay and convoy rows (03 s4, 04 s6): eleven plate badges in route order, six and five to a row. An earned mark is
   filled with bold letters, an unearned one an outline (never colour alone); the convoy's country has a second ring. */
.pp-row{margin-top:20px;display:grid;gap:6px}
.pp-row .s{margin:0}
.pp-h{font:800 17px/1.15 var(--display);letter-spacing:-.01em;margin:0}
.pp-badges{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:359px){.pp-badges{gap:4px}}
.pp-badge{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:44px;padding:0;border-radius:10px;border:2px solid var(--ink-2);background:transparent;color:var(--ink-2);font:800 15px/1 var(--display)}
.pp-badge.on{background:var(--accent);border-color:var(--ink);color:var(--on-accent)}
.pp-badge.here{border-color:var(--accent);box-shadow:0 0 0 2px var(--ink)}
.pp-badge.on.here{border-color:var(--ink)}
button.pp-badge{cursor:pointer}
button.pp-badge:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Wind-down: the relay badges are not buttons from 22:00 (cab.js and passport.js draw marks) and the mentor button goes the
   moment data-late is set. */
:root[data-late="1"] button.pp-badge{pointer-events:none}
:root[data-late="1"] .pp-mentor{display:none!important}
.pp-mentor{display:flex;justify-content:center;margin-top:10px}
.pp-mentor .btn{min-height:44px}
/* The truck stop's coffee counter line sits under the count, from the first cup (04 section 4 K2). */
.stop-coffee{display:block;margin-top:4px}
/* The watch screen's coffee button (04 section 4 K1): under the tool row, quiet, by day. */
.watch-coffee{display:flex;justify-content:center;margin-top:8px}
.watch-coffee .btn{min-height:44px}
/* The reply card's extra lines (04 s2, s4): friends who flashed their headlights (counts only) and the asker's coffee button, a
   quiet 44 px button. */
.flash-got{display:flex;align-items:center;gap:8px;margin:0}
.flash-got .ico{width:20px;height:20px;flex:none}
.coffee-row{display:flex;align-items:center}
.coffee-btn{min-height:44px;gap:8px}
.coffee-btn .ico{width:24px;height:24px}
.coffee-done{margin:0;min-height:44px;display:flex;align-items:center;color:var(--ink)}
:root[data-late="1"] .watch-coffee,:root[data-late="1"] .coffee-row{display:none!important}
/* A114.7 (b): the postcard sheet's card keeps L-S4's min(55vh, 460px) in windows 860 px tall or more, else min(40vh, 340px), so
   Share and Close show beside the sticky primary at 375 x 812. */
@media (max-height:859px){.pc-full{height:min(40vh,340px)}}
.presented,.park-line{overflow-wrap:anywhere;margin:4px 0 8px}
.pres-mark{display:inline-block;width:24px;height:24px;vertical-align:middle}
.pres-mark svg,.pt-mark svg{display:block;width:100%;height:100%}
.pt-top{display:flex;justify-content:space-between;gap:8px}
.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
@media (min-width:600px){.pt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pt-box{grid-template-rows:48px auto;text-align:center}