/* Motorworks concept B, "the motorsport workshop" (chosen by Sean 2026-10-11).
   Page chrome only: an enamel menu, paper car/record sheets and one red primary action.
   Loaded after motorworks-club-theme.css; the remaining station surfaces share its navy palette. */
/* Concept pass 2 (2026-10-12): the concept's chrome is a teal navy (sampled: nav #0c1b24, rail #142832, panel
   #061f2b, stat strip #0f2029), not the purple navy the first pass used, so the shared shell tokens follow it too. */
:root {
  --b-navy:#132a36; --b-navy-deep:#0b1b25; --b-card:#122733; --b-line:#2c4452; --b-line-soft:#1d3441;
  --b-white:#eeece6; --b-soft:#b9c6cc; --b-red:#be2d28; --b-red-hi:#a5261f;
  --b-paper:#eeece6; --b-paper-hi:#fbfaf7; --b-ink:#1b2433; --b-ink-soft:#4f5664; --b-rule:#cfccc4;
  --b-panel:rgba(4,22,32,.92); --b-panel-solid:#071e2a; --b-strip:#0f2029; --b-seg:#38474d; --b-mint:#43c89a; --b-loss:#d5342d;
  --club-green:#132a36; --club-deep:#0b1b25; --club-red:#be2d28;
}

/* Keep the real car sheet and navigation available during a cold scene load. The old flat car and
   undressed 3D platform are failure fallbacks, not interim artwork for a working WebGL renderer. */
#garage .garage-scene-loading { display:none; position:absolute; top:32px; left:32px; margin:0;
  color:var(--b-white); font:400 16px/1.4 var(--face-body); z-index:2; }
#garage #car-stage[data-scene-state="loading"] .garage-scene-loading { display:block; }
#garage #car-stage[data-scene-state="loading"] :is(#hero-car,#hero-car-3d canvas,.lane,.start-line,.pit-lights,.stage-readout,.turntable-cue) {
  visibility:hidden;
}

/* Garage control rail: enamel, numbered positions and one paper selection. */
:root { --b-nav-h:76px; }
.shell:has(> #garage:not([hidden])) { position:relative; }
.shell:has(> #garage:not([hidden])) > .topbar {
  height:var(--b-nav-h); min-height:var(--b-nav-h); padding:0 24px; background:#20211e;
  border-bottom:1px solid #555247; color:#f2eada;
}
/* The official BroTeam pill and wordmark as one horizontal mark (from BroTeamLogoWhiteFixed.png, Sean 2026-10-17). */
.shell:has(> #garage:not([hidden])) .club-brand-art { width:auto; height:44px; object-fit:contain; }
.shell:has(> #garage:not([hidden])) .brand-copy { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.shell:has(> #garage:not([hidden])) .brand-copy strong {
  font:800 25px/1 'Big Shoulders Display',sans-serif; letter-spacing:.035em; color:#f2eada;
}
.shell:has(> #garage:not([hidden])) .brand-copy small { display:none; }
#garage > .garage-directory {
  position:absolute; left:292px; top:0; z-index:30; width:auto; height:var(--b-nav-h); min-height:var(--b-nav-h);
  display:flex; gap:0; padding:0; margin:0; border:0; background:transparent;
}
#garage .garage-directory a, #garage .garage-directory a:first-of-type,
#garage .garage-directory a[aria-current="page"] {
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px;
  flex:0 0 auto; min-height:var(--b-nav-h); min-width:88px; padding:9px 18px;
  background:transparent; color:#e0d8c8; border:0; border-top:3px solid transparent; border-radius:0;
  box-shadow:none; text-decoration:none; transform:none;
}
/* No 01-05 index over the station names (Sean 2026-10-17: the nav read as machine-made). */
#garage .garage-directory .station-index { display:none; }
#garage .garage-station-copy small { display:none; }
#garage .garage-station-copy strong { display:block; padding:0; font:600 19px/1.15 'IBM Plex Sans Condensed',sans-serif;
  color:inherit; letter-spacing:0; box-shadow:none; text-transform:none; }
#garage .garage-directory a[aria-current="page"], #garage .garage-directory a[aria-current="page"]:hover {
  background:#eee5d0; color:#231f18; border-top-color:#eee5d0; box-shadow:none;
}
#garage .garage-directory a[aria-current="page"] .station-index { color:#5a5246; }
#garage .garage-directory a:not([aria-current="page"]):hover { background:#36362f; color:#fff5e5; box-shadow:none; }
#garage .garage-directory a:focus-visible { outline:2px solid #f2eada; outline-offset:-5px; }
#garage .garage-directory a[aria-current="page"]:focus-visible { outline-color:#231f18; }
.shell:has(> #garage:not([hidden])) .topbar-context .poster-grow { order:-1; }
.shell:has(> #garage:not([hidden])) .topbar-context :is(.poster-car,.poster-points,.poster-cup) { color:#f2eada; }
.shell:has(> #garage:not([hidden])) .topbar-context .poster-car { font:500 14px/1.2 var(--face-body); }
.shell:has(> #garage:not([hidden])) .topbar-context .poster-points { gap:6px; }
.shell:has(> #garage:not([hidden])) .topbar-context .poster-points b { font:600 16px/1 var(--face-mono); }
.shell:has(> #garage:not([hidden])) .topbar-context :is(.poster-points small,.poster-cup) { color:#d0c7b5; font:400 12px/1.2 var(--face-body); }
.shell:has(> #garage:not([hidden])) .session-tools :is(.connection,.text-button) { color:#ded5c3; font:400 13px/1.2 var(--face-body); }
.shell:has(> #garage:not([hidden])) .session-tools .text-button { min-height:44px; padding-inline:12px; }
.shell:has(> #garage:not([hidden])) .session-tools .text-button:hover { color:#fff; }
.shell:has(> #garage:not([hidden])) .session-tools .connection.online { display:none; }
body:has(#garage:not([hidden])) .topbar-context :is(#topbar-car-chip,.poster-class) { display:none; }
@media (min-width:1101px) and (max-width:1439px) {
  .shell:has(> #garage:not([hidden])) .brand-copy { display:none; }
  #garage > .garage-directory { left:156px; }
  #garage .garage-directory a, #garage .garage-directory a:first-of-type,
  #garage .garage-directory a[aria-current="page"] { min-width:82px; padding-inline:15px; }
  .shell:has(> #garage:not([hidden])) .poster-cup { display:none; }
}
@media (max-width:1100px) {
  .shell:has(> #garage:not([hidden])) > .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:54px 44px; height:98px; min-height:98px; padding:0 12px; gap:0 8px; }
  .shell:has(> #garage:not([hidden])) .brand { grid-column:1; grid-row:1; }
  .shell:has(> #garage:not([hidden])) .brand-copy { display:none; }
  /* Narrow: the pill alone (the lockup's left end), so the station names keep their room. */
  .shell:has(> #garage:not([hidden])) .club-brand-art { width:26px; height:30px; object-fit:cover; object-position:left center; }
  #garage > .garage-directory { left:52px; right:0; height:54px; min-height:54px; }
  #garage .garage-directory a, #garage .garage-directory a:first-of-type,
  #garage .garage-directory a[aria-current="page"] { height:54px; min-height:54px; min-width:0; padding:0 10px; border-top-width:3px; gap:0; }
  #garage .garage-directory .station-index { display:none; }
  #garage .garage-station-copy strong { font-size:16px; }
  .shell:has(> #garage:not([hidden])) .topbar-context { grid-column:1; grid-row:2; display:block; min-width:0; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-ctx { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-grow { display:none; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-car { max-width:130px; font-size:13px; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-points { margin:0; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-points b { font-size:14px; }
  .shell:has(> #garage:not([hidden])) .topbar-context .poster-cup { display:none; }
  .shell:has(> #garage:not([hidden])) .session-tools { grid-column:2; grid-row:2; margin:0; gap:0; }
  .shell:has(> #garage:not([hidden])) .session-tools .text-button { min-height:44px; padding:0 8px; font-size:12px; }
}
/* A Drive-enabled phone has six destinations. Give them a full row rather than pushing Drive offscreen. */
@media (max-width:600px) {
  .shell:has(> #garage:not([hidden])[data-drive-open="true"]) { --b-nav-h:142px; }
  .shell:has(> #garage:not([hidden])[data-drive-open="true"]) > .topbar {
    grid-template-columns:48px minmax(0,1fr); grid-template-rows:44px 54px 44px; height:142px; min-height:142px; }
  .shell:has(> #garage:not([hidden])[data-drive-open="true"]) .topbar-context {
    grid-column:2; grid-row:1; }
  .shell:has(> #garage:not([hidden])[data-drive-open="true"]) .session-tools {
    grid-column:1 / -1; grid-row:3; justify-self:end; }
  #garage[data-drive-open="true"] > .garage-directory {
    left:0; right:0; top:44px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; }
  #garage[data-drive-open="true"] .garage-directory a,
  #garage[data-drive-open="true"] .garage-directory a:first-of-type,
  #garage[data-drive-open="true"] .garage-directory a[aria-current="page"] {
    padding:0 4px; min-width:0; font-size:14px; }
  #garage[data-drive-open="true"] .garage-station-copy strong { font-size:14px; }
}
@media (max-width:360px) {
  #garage[data-drive-open] > .garage-directory { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
  #garage[data-drive-open="true"] > .garage-directory { grid-template-columns:repeat(6,minmax(0,1fr)); }
  #garage[data-drive-open] .garage-directory a,
  #garage[data-drive-open] .garage-directory a:first-of-type,
  #garage[data-drive-open] .garage-directory a[aria-current="page"] { padding-inline:1px; }
  #garage[data-drive-open] .garage-station-copy strong { font-size:13px; }
}
#garage :focus-visible, .pair :focus-visible { outline:2px solid var(--b-white); outline-offset:2px; }
#garage :is(.workshop-wall,.workshop-inspection-detail,.poster-sheet,.poster-foot,.poster-legend,.slot-car-radio) :focus-visible,
.pair .pair-desk :focus-visible { outline-color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-part:focus-visible,
#garage[data-station="workshop"] .workshop-category-rail :focus-visible { outline-offset:-3px; }

/* My car: a bounded scrutineering sheet in normal grid flow over the workshop.
   Identity, circuit and actions share one paper backing; long content grows it instead of colliding with a footer. */
#garage > .stage-pocket { display:none; }
#garage.garage:not([data-focus])[data-station="car"] {
  --bay-paper:#eee5d0; --bay-ink:#28241d; --bay-soft:#62584a;
  display:grid; position:static; padding:0; gap:0;
  grid-template-columns:minmax(0,1fr) clamp(320px,26vw,380px) 28px;
  /* One row per named area (directory, status, primary, circuit, recovery, recall, filler, notice): a shorter list
     put the stretch row on "recovery" and pushed the Garage ~360px past the scene (grey band, Sean 2026-10-17). */
  grid-template-rows:28px auto auto auto auto auto minmax(28px,1fr) auto;
  min-height:calc(100svh - var(--b-nav-h)); align-items:start; background:#24241e;
}
#garage:not([data-focus])[data-station="car"] .car-stage {
  grid-column:1 / -1; grid-row:1 / -1; width:100%; height:max(620px,calc(100svh - var(--b-nav-h)));
  min-height:0; margin:0; border:0; z-index:auto; animation:none; transform:none; opacity:1; isolation:auto; perspective:none;
}
#garage:not([data-focus])[data-station="car"] .car-stage:has(.car-3d.room-ready) { isolation:auto; perspective:none; }
#garage:not([data-focus])[data-station="car"] .car-3d.room-ready { inset:0; z-index:0; }
#garage:not([data-focus])[data-station="car"] > .bay-ticket-stock {
  display:block; grid-column:2; grid-row:2 / 6; align-self:stretch; margin:0; min-height:0;
  background:#eee5d0; border:0; border-radius:2px; z-index:1;
  box-shadow:0 6px 22px #0005;
}
#garage:not([data-focus])[data-station="car"] > .stage-pocket {
  display:flex; position:relative; grid-column:2; grid-row:2; inset:auto; width:auto; max-width:none; height:auto; min-height:0;
  flex-direction:column; align-items:stretch; justify-content:start; gap:0; padding:25px 26px 0;
  background:transparent; border:0; border-radius:0; z-index:2; color:var(--bay-ink); pointer-events:auto;
}
#garage:not([data-focus])[data-station="car"] .stage-pocket .identity { max-width:none; min-width:0; padding:0 0 16px; }
#garage:not([data-focus])[data-station="car"] .identity h1 {
  font:800 38px/1.02 'Big Shoulders Display',sans-serif; color:#28241d; letter-spacing:0;
  white-space:normal; overflow:visible; overflow-wrap:anywhere; text-transform:none;
}
#garage:not([data-focus])[data-station="car"] .identity p { margin:7px 0 0; color:#62584a; font:400 14px/1.4 'IBM Plex Sans',sans-serif; overflow-wrap:anywhere; }
#garage:not([data-focus])[data-station="car"] .car-sheet { display:grid; grid-template-columns:1fr 1fr; gap:0 20px;
  max-width:none; margin:0; padding:0; border:0; }
#garage:not([data-focus])[data-station="car"] .car-sheet > div { display:block; min-width:0; padding:10px 0;
  border-top:1px solid #c9bfac; }
#garage:not([data-focus])[data-station="car"] .car-sheet dt { margin:0; color:#62584a; font:400 12px/1.4 'IBM Plex Sans',sans-serif; white-space:normal; }
#garage:not([data-focus])[data-station="car"] .car-sheet dd { margin:3px 0 0; color:#28241d;
  font:600 23px/1.15 'IBM Plex Sans Condensed',sans-serif; white-space:normal; overflow:visible; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#garage:not([data-focus])[data-station="car"] .car-sheet > [data-stat="fitted"] { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; }
#garage:not([data-focus])[data-station="car"] .car-sheet > [data-stat="fitted"] dd { margin:0; font:500 16px/1.4 var(--face-mono); }
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts { position:static; display:block; min-width:0; margin:0; padding:0; border:0; }
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head { display:inline-flex; align-items:center; min-height:44px; width:auto; padding:0; border:0; background:none; }
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head > strong {
  color:#40382e; font:600 14px/1.4 'IBM Plex Sans',sans-serif; text-decoration:underline; text-underline-offset:3px;
}
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head > small { display:none; }
#garage:not([data-focus])[data-station="car"] > :is(.status-strip,.circuit-card,.actions) {
  grid-column:2; position:relative; align-self:start; margin:0; background:transparent; border:0; color:#28241d; z-index:2;
}
#garage:not([data-focus])[data-station="car"] > .status-strip { grid-row:3; display:block; min-height:0; padding:2px 26px 4px; }
#garage:not([data-focus])[data-station="car"] > .status-strip :is(.status-main,.status-sub) { color:#62584a; font:400 13px/1.4 'IBM Plex Sans',sans-serif; }
#garage:not([data-focus])[data-station="car"] > .status-strip .status-main { color:#28241d; font-weight:600; }
#garage:not([data-focus])[data-station="car"] > .circuit-card { grid-row:4; padding:10px 26px 16px; }
#garage:not([data-focus])[data-station="car"] .circuit-copy { display:block; border-top:1px solid #c9bfac; padding-top:14px; }
#garage:not([data-focus])[data-station="car"] .circuit-copy h2 { margin:0 0 3px; color:#62584a; font:400 12px/1.4 'IBM Plex Sans',sans-serif; }
#garage:not([data-focus])[data-station="car"] .circuit-copy h2::after { content:none; }
#garage:not([data-focus])[data-station="car"] .circuit-card .track-name { margin:0; color:#28241d; font:600 17px/1.35 'IBM Plex Sans Condensed',sans-serif; }
#garage:not([data-focus])[data-station="car"] .circuit-card .track-name[data-surface]::after { content:" \00B7  " attr(data-surface); color:#62584a; font-weight:400; }
#garage:not([data-focus])[data-station="car"] .circuit-card .track-detail { display:none; }
#garage:not([data-focus])[data-station="car"] > .actions { grid-row:5; display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0 26px 18px; }
#garage:not([data-focus])[data-station="car"] > .actions > :is(#join,#leave,#drive-heat,#refresh,#recall) {
  position:relative; inset:auto; align-self:stretch; justify-self:auto; width:100%; max-width:none; min-height:48px; margin:0;
}
#garage:not([data-focus])[data-station="car"] > .actions > :is(#join,#leave,#drive-heat) { border-radius:2px; box-shadow:none; }
#garage:not([data-focus])[data-station="car"] .action.primary { border:1px solid #8c261e; background:#b33127; color:#fff4e5; }
#garage:not([data-focus])[data-station="car"] .action.primary:hover { background:#93271f; }
#garage:not([data-focus])[data-station="car"] #join-copy { padding:12px 16px; font:600 17px/1.2 'IBM Plex Sans',sans-serif; }
#garage:not([data-focus])[data-station="car"] #join .bay-ticket-number { display:none; }
#garage:not([data-focus])[data-station="car"] #join::after { content:none; }
#garage:not([data-focus])[data-station="car"] > .actions > #recall.action[data-mechanism="call-lever"] { display:flex; align-items:center; justify-content:center; padding:8px 0; border:0; background:none; box-shadow:none; }
#garage:not([data-focus])[data-station="car"] #recall .recall-copy { text-align:center; }
#garage:not([data-focus])[data-station="car"] #recall .recall-label { color:#40382e; font:400 13px/1.4 'IBM Plex Sans',sans-serif; text-decoration:underline; text-underline-offset:3px; }
/* Off-air there is no Join: calling the car is then the sheet's one action, so it takes the main button's place
   instead of a small centred link floating in empty paper (Sean 2026-10-17). */
#garage:not([data-focus])[data-station="car"] > .actions:not(:has(> #join:not([hidden]))) > #recall.action[data-mechanism="call-lever"] {
  justify-content:flex-start; padding:12px 16px; border:1px solid #8c261e; border-radius:2px; background:#b33127; }
#garage:not([data-focus])[data-station="car"] > .actions:not(:has(> #join:not([hidden]))) > #recall.action[data-mechanism="call-lever"]:hover { background:#93271f; }
#garage:not([data-focus])[data-station="car"] > .actions:not(:has(> #join:not([hidden]))) > #recall .recall-copy { text-align:left; }
#garage:not([data-focus])[data-station="car"] > .actions:not(:has(> #join:not([hidden]))) > #recall .recall-label {
  color:#fff4e5; font:600 17px/1.2 'IBM Plex Sans',sans-serif; text-decoration:none; }
#garage:not([data-focus])[data-station="car"] .turntable-cue { top:auto; left:22px; right:auto; bottom:20px;
  background:#20211e; border:1px solid #a69b87; border-radius:2px; color:#f2eada; font-size:12px; }
#garage:not([data-focus])[data-station="car"] .turntable-cue[data-turned="true"] { opacity:0; pointer-events:none; }
#garage:not([data-focus])[data-station="car"] :is(.stage-pocket,.actions) :focus-visible { outline:2px solid #28241d; outline-offset:2px; }
@media (max-width:1100px) {
  #garage.garage:not([data-focus])[data-station="car"] { --menu-scene-height:clamp(260px,58vw,520px);
    grid-template-columns:minmax(16px,1fr) minmax(0,560px) minmax(16px,1fr);
    grid-template-rows:auto 16px auto auto auto auto 20px; min-height:0; }
  #garage:not([data-focus])[data-station="car"] .car-stage { grid-column:1 / -1; grid-row:1; height:var(--menu-scene-height); }
  #garage:not([data-focus])[data-station="car"] .car-3d.room-ready,
  #garage:not([data-focus])[data-station="car"] #car-stage[data-scene-state="loading"] .car-3d { position:relative; inset:auto; width:100%; height:var(--menu-scene-height); }
  #garage:not([data-focus])[data-station="car"] > .bay-ticket-stock { grid-row:3 / 7; }
  #garage:not([data-focus])[data-station="car"] > .stage-pocket { grid-row:3; padding:20px 24px 0; }
  #garage:not([data-focus])[data-station="car"] .stage-pocket .identity { padding-bottom:12px; }
  #garage:not([data-focus])[data-station="car"] .car-sheet > div { padding-block:6px; }
  #garage:not([data-focus])[data-station="car"] > .status-strip { grid-row:4; padding-inline:24px; }
  #garage:not([data-focus])[data-station="car"] > .circuit-card { grid-row:5; padding:8px 24px 12px; }
  #garage:not([data-focus])[data-station="car"] .circuit-copy { padding-top:10px; }
  #garage:not([data-focus])[data-station="car"] > .actions { grid-row:6; padding-inline:24px; }
  #garage:not([data-focus])[data-station="car"] .identity h1 { font-size:34px; }
  #garage:not([data-focus])[data-station="car"] .turntable-cue { bottom:12px; left:12px; }
}

/* Workshop: drawers with counts, a list of parts with real stills, the car and the decision. */
#garage[data-station="workshop"] .workshop-parts-room { border:1px solid var(--b-line); border-bottom:0; background:var(--b-card); }
#garage[data-station="workshop"] .workshop-category-rail { background:var(--b-card); padding:8px 0; }
#garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) {
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; box-sizing:border-box; }
#garage[data-station="workshop"] .workshop-category-tab :is(.workshop-category-number,.workshop-category-zone) { display:none; }
#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"]::after { content:none; }
#garage[data-station="workshop"] .workshop-category-families { border-top:0; }
#garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) {
  min-height:44px; padding-inline:16px; border-bottom:1px solid var(--b-line-soft); border-radius:0; color:var(--b-white); }
#garage[data-station="workshop"] .workshop-category-group-tab[aria-expanded="true"] { border-left:0; box-shadow:none; }
#garage[data-station="workshop"] .workshop-category-tab { padding-left:28px; }
#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] {
  background:#eee5d2; color:#28241d; box-shadow:none; }
#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] :is(strong,.workshop-category-count) { color:#28241d; }
#garage[data-station="workshop"] :is(.workshop-category-tab,.workshop-category-group-tab) strong { font:500 15px/1.3 var(--face-body); }
#garage[data-station="workshop"] :is(.workshop-category-count,.workshop-category-group-count) {
  color:var(--b-soft); font:400 14px/1.3 'IBM Plex Mono',monospace; }
#garage[data-station="workshop"] .workshop-category-tab:not([aria-pressed="true"]):hover,
#garage[data-station="workshop"] .workshop-category-group-tab:hover { background:var(--b-navy); }

/* The open family is a list: still, name, then its price or its state. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] { border-right:1px solid var(--b-line); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-shelf { background:var(--b-paper); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-head { min-height:64px; padding:10px 12px 10px 16px;
  border-bottom:1px solid var(--b-rule); background:var(--b-paper); }
#garage[data-station="workshop"] .workshop-shelf-title { font:600 20px/1.25 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-shelf-room-label > span, #garage[data-station="workshop"] .workshop-shelf-fitted {
  font:400 13px/1.3 var(--face-body); color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-wall-browse { border:1px solid var(--b-rule); border-radius:2px; background:var(--b-paper-hi); }
#garage[data-station="workshop"] .workshop-wall-step { font:600 22px/1 var(--face-body); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-rack { background:var(--b-paper); border-right:0; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part {
  background:var(--b-paper); border:0; border-bottom:1px solid var(--b-rule); border-radius:0; box-shadow:none; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part:hover { background:var(--b-paper-hi); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part[data-active="true"] {
  background:var(--b-paper-hi); box-shadow:inset 3px 0 var(--b-ink); }
#garage[data-station="workshop"] .workshop-part-name { font:600 15px/1.3 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-floor-note {
  margin-top:2px; font:400 13px/1.3 var(--face-body); color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge {
  min-height:0; padding:0; border:0; background:transparent;
  color:var(--b-ink-soft); font:400 13px/1.3 var(--face-body); text-transform:none; letter-spacing:0; }
@media (min-width:651px) {
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; align-content:start; min-height:0; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part {
    display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto; align-items:center;
    column-gap:14px; row-gap:2px; min-height:92px; padding:10px 16px 10px 12px; text-align:left; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] :is(.workshop-part-bin-object,.workshop-part-bin-object[data-thumb-ready="true"]) {
    grid-column:1; grid-row:1 / 3; width:76px; height:72px; margin:0; border-radius:2px; background:#dddbd4; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-bin-object img { transform:scale(1.05); }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-identity {
    grid-column:2; grid-row:1; align-self:end; justify-self:start; max-width:100%; text-align:left; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-badge {
    grid-column:2; grid-row:2; align-self:start; justify-self:start; }
}
#garage[data-station="workshop"] .workshop-parts-room .workshop-part.fitted .workshop-part-badge { color:var(--b-ink); font-weight:600; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge .rp-token {
  padding:0; border:0; border-radius:0; background:transparent; color:var(--b-ink); font:600 14px/1.3 'IBM Plex Mono',monospace; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-new {
  margin-right:6px; padding:0 4px; border:1px solid var(--b-red); border-radius:2px; background:transparent;
  color:var(--b-red); font:600 12px/1.4 var(--face-body); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-hook {
  min-height:64px; margin:0; border:0; border-bottom:1px solid var(--b-rule); border-radius:0;
  background:transparent; color:var(--b-ink-soft); font:400 13px/1.3 var(--face-body); }

/* The comparison bench: paper under the car, red/green bars, one red action. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { background:var(--b-paper-hi); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { border-bottom:1px solid var(--b-line); }
#garage[data-station="workshop"] .workshop-inspection-heading { border-bottom:1px solid var(--b-rule); }
@media (min-width:1001px) {
  /* One screen tall at any desktop height (Sean 2026-10-04: an inspect panel, not 700px of paper). The car view
     gives up height before the decision does: name, bars, Buy/Fit, rolling road and test run all sit in the fixed
     lower band, and only the part's records scroll under it. */
  /* Concept pass 2: with the tabs in the header bar the bench runs down to the bottom of the screen (it stopped 60px
     short, with the radio's top edge peeking under it). The car view stays at most 380px (an inspection, not a
     backdrop); the extra height goes to the decision band and the part's records under it. */
  #garage[data-station="workshop"] { --ws-h:clamp(540px, calc(100vh - 166px), 760px);
    --ws-detail:max(300px, calc(var(--ws-h) - 380px)); }
  #garage[data-station="workshop"] .workshop-parts-room,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail,
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { height:var(--ws-h); }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
    position:relative; grid-template-rows:minmax(0,1fr) var(--ws-detail); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { position:static; padding:14px 20px 16px; gap:10px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading {
    flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:2px; padding:0; border:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading h2 { order:0; margin:0; font:600 20px/1.25 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading .workshop-inspection-condition {
    order:1; margin:0 0 0 auto; font-size:13px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading > :is(.workshop-part-summary,.workshop-part-loan) {
    order:2; flex:1 0 100%; max-width:none; margin:0; font-size:14px; line-height:1.4; }
  /* Bars on the left, Buy or Fit on the right, as in the concept. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision {
    display:grid; grid-template-columns:minmax(0,1fr) 220px; column-gap:24px; row-gap:6px; align-items:start;
    padding-top:10px; border-top:1px solid var(--b-rule); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > * { grid-column:1 / -1; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-inspection-comparison {
    grid-column:1; grid-row:1 / span 3; padding:0; gap:2px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-inspection-actions {
    grid-column:2; grid-row:1; display:grid; gap:6px; margin:0; padding:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-action-note { grid-column:2; grid-row:2; margin:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-test-run { grid-column:2; grid-row:3; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action { width:100%; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-lap-delta { margin:0 0 2px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-pill {
    grid-template-columns:88px minmax(120px,1fr) 32px; min-height:24px; padding:1px 0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { min-height:0; }
  /* The viewer switch rides the car view's corner instead of trailing the records. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail > .workshop-stage-switch {
    position:absolute; top:12px; left:12px; right:auto; z-index:3; width:max-content; margin:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run { min-height:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run-go { min-height:52px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run svg { height:52px; }
}
#garage[data-station="workshop"] .workshop-action-note { font:400 13px/1.4 var(--face-body); color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-inspection-detail h2 { min-width:0; max-width:100%; overflow-wrap:anywhere; font:600 24px/1.25 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-part-summary { font:400 15px/1.45 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-condition { font:400 14px/1.4 var(--face-body); color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-lap-delta strong { margin-right:6px; font:600 20px/1.2 var(--face-body); font-variant-numeric:tabular-nums; letter-spacing:0; }
#garage[data-station="workshop"] .workshop-compare-meter.segmented { gap:2px; }
#garage[data-station="workshop"] .workshop-compare-cell { height:8px; border-radius:0; }
#garage[data-station="workshop"] .workshop-inspection-actions { border-top:0; padding-top:0; }
#garage[data-station="workshop"] .workshop-action::before, #garage[data-station="workshop"] .workshop-action::after,
#garage[data-station="workshop"] .workshop-action.primary::before, #garage[data-station="workshop"] .workshop-action.primary::after { content:none; }
#garage[data-station="workshop"] .workshop-action, #garage[data-station="workshop"] .workshop-action.primary {
  min-height:48px; padding:10px 16px; border-radius:2px; text-align:center; font:600 16px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-action.primary { background:var(--b-red); border:1px solid var(--b-red); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-action.primary:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-action.primary:focus-visible { background:var(--b-red-hi); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-action:not(.primary):hover:not(:disabled),
#garage[data-station="workshop"] .workshop-action:not(.primary):focus-visible { background:var(--b-paper); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-action:not(.primary) { background:transparent; color:var(--b-ink);
  border:1px solid var(--b-ink); box-shadow:none; }
/* A disabled action stays readable (garage.html faded it to .5, about 2.6:1 on paper): outlined, soft ink. */
#garage[data-station="workshop"] .workshop-action:disabled,
#garage[data-station="workshop"] .workshop-action.primary:disabled {
  opacity:1; background:transparent; border:1px solid var(--b-ink-soft); color:var(--b-ink-soft); cursor:not-allowed; }
/* The rolling road is one more outlined action: its grade marks stay, the decorative handwheel and the shouted
   label go. */
#garage[data-station="workshop"] .workshop-action.workshop-tune-action {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 6px; gap:6px; min-height:48px;
  padding:8px 12px; border:1px solid var(--b-ink); background:transparent; box-shadow:none; color:var(--b-ink); text-align:left; }
#garage[data-station="workshop"] .workshop-action.workshop-tune-action:disabled { border-color:var(--b-ink-soft); color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-tune-handwheel { display:none; }
#garage[data-station="workshop"] .workshop-tune-copy { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
#garage[data-station="workshop"] .workshop-tune-copy small {
  color:inherit; font:400 13px/1.2 var(--face-body); letter-spacing:0; text-transform:none; }
#garage[data-station="workshop"] .workshop-tune-copy strong { font:600 15px/1.2 var(--face-body); }
#garage[data-station="workshop"] .workshop-tune-scale { gap:3px; }
#garage[data-station="workshop"] .workshop-tune-scale i { height:6px; border:0; background:var(--b-rule); }
#garage[data-station="workshop"] .workshop-tune-scale i[data-set="true"] { background:var(--b-ink); }
/* The test run: an outlined button beside its small loop on navy. */
#garage[data-station="workshop"] .workshop-test-run { min-height:0; border:1px solid var(--b-ink); border-radius:2px; background:var(--b-paper-hi); overflow:hidden; }
#garage[data-station="workshop"] .workshop-test-run-go { min-height:52px; border:0; border-right:1px solid var(--b-ink); box-shadow:none;
  background:var(--b-paper-hi); color:var(--b-ink); font:600 15px/1.2 var(--face-body); }
#garage[data-station="workshop"] .workshop-test-run-go:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-test-run-go:focus-visible { background:var(--b-ink); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-test-run svg { height:52px; background:var(--b-navy-deep); }
#garage[data-station="workshop"] .workshop-test-run-result:not(:empty) {
  grid-column:1 / -1; padding:8px 10px; border-top:1px solid var(--b-rule);
  color:var(--b-ink); font:400 14px/1.4 var(--face-body); }
/* The part's records under the decision: plain ruled paper in the bench's type, no beige pills, stamps in sentence
   case. */
#garage[data-station="workshop"] .workshop-inspection-records { border-top:1px solid var(--b-rule); }
#garage[data-station="workshop"] .workshop-development-stamp {
  padding:3px 8px; border:1px solid var(--b-ink-soft); border-radius:2px; background:transparent; color:var(--b-ink);
  font:600 13px/1.2 var(--face-body); letter-spacing:0; text-transform:none; }
#garage[data-station="workshop"] .workshop-development-route.ready .workshop-development-stamp { border-color:var(--b-ink); background:var(--b-ink); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-development-mark strong,
#garage[data-station="workshop"] .workshop-service-fact strong { font:600 15px/1.3 var(--face-body); font-variant-numeric:tabular-nums; color:var(--b-ink); }
#garage[data-station="workshop"] :is(.workshop-development-mark small,.workshop-service-fact small,.workshop-service-heading span,.workshop-service-body span) {
  font:400 13px/1.3 var(--face-body); color:var(--b-ink-soft); }
#garage[data-station="workshop"] :is(.workshop-development-requirements,.workshop-development-mark + .workshop-development-mark,.workshop-service-fact) { border-color:var(--b-rule); }
#garage[data-station="workshop"] .workshop-development-effects .workshop-compare-pill { padding:2px 0; border:0; background:transparent; font-size:14px; }
#garage[data-station="workshop"] .workshop-development-effects { gap:4px 24px; }
#garage[data-station="workshop"] .workshop-service-heading strong { padding:0; border:0; background:transparent; color:var(--b-ink); font:600 15px/1.3 var(--face-body); }
#garage .workshop-development-tune-label { font:400 13px/1.2 var(--face-body); letter-spacing:0; text-transform:none; color:var(--b-ink-soft); }
#garage .workshop-development-tune-detent { height:6px; border:0; background:var(--b-rule); box-shadow:none; }
#garage .workshop-development-tune-detent[data-punched="true"] { background:var(--b-ink); }
#garage .workshop-development-tune-count { font:600 13px/1.25 var(--face-body); }
/* The lap delta reads as a number and a sentence, not as letterspaced mono. */
#garage[data-station="workshop"] .workshop-lap-delta { font:400 13px/1.3 var(--face-body); color:var(--b-ink-soft); }
/* One paper inspection docket connects the selected part, its effects and the action. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection,
#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail {
  --mw-ink:#28241d; --mw-ink-soft:#62584a; --mw-paper-dim:#d8cfbd; --mw-rule:#c4b9a4;
  min-width:0; max-width:100%; box-sizing:border-box; background:#eee5d2; color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-compare-cell { border-color:var(--b-seg); background:var(--b-seg); }
#garage[data-station="workshop"] .workshop-compare-cell[data-on="gain"] { border-color:var(--b-mint); background:var(--b-mint); }
#garage[data-station="workshop"] .workshop-compare-cell[data-on="loss"] { border-color:var(--b-loss); background:var(--b-loss); }
#garage[data-station="workshop"] .workshop-compare-meter.segmented::after { border-left-color:#62584a; }
#garage[data-station="workshop"] .workshop-lap-delta.gain strong { color:var(--b-mint); }
#garage[data-station="workshop"] .workshop-lap-delta.loss strong { color:var(--ws-loss); }
#garage[data-station="workshop"] .workshop-action:is(.primary,[data-action="part-buy"]):disabled {
  border-color:#b6aa94; background:#e0d7c5; color:#62584a; opacity:1; }
#garage[data-station="workshop"] .workshop-test-run-go:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-test-run-go:focus-visible { color:var(--b-white); }
#garage[data-station="workshop"] .workshop-lap-delta span { color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-switch { border-radius:2px; border-color:var(--b-line); background:var(--b-navy-deep); }
#garage[data-station="workshop"] .workshop-switch button[aria-pressed="true"] { background:var(--b-white); color:#1b2433; }
#garage[data-station="workshop"] .workshop-physical-head { border-color:var(--b-line); padding:4px 0 12px; }
#garage[data-station="workshop"] .workshop-physical-heading h2 { font:600 20px/1.25 var(--face-body); }
#garage .slot-car-radio { border-radius:2px; }

/* Failed actions must remain readable while the player is choosing a part. */
#garage[data-station="workshop"] > .notice[data-tone="error"] {
  background:#fbf0e5; color:#6c211e; border-color:#a52f27; }

/* Race entry board: one enamel heading, paper setup and full grid, one red entry ticket. */
#garage .poster-heat { flex-wrap:wrap; gap:8px; }
#garage .poster-lights { flex-wrap:wrap; }
#garage .poster-next { max-width:80ch; }
#garage .poster-ticket-wrap .poster-drive { background:transparent; color:var(--b-ink); border:1px solid var(--b-ink); }
#garage .poster-ticket-wrap .poster-drive:hover:not(:disabled) { background:var(--b-ink); color:var(--b-paper); }
#garage .poster-ticket-wrap .poster-stay { border-width:1px; min-height:48px; }
#garage .poster-ticket .body { flex:1; }
#garage .poster-ticket[aria-disabled="true"] :is(.body,.stub) { background:var(--b-paper); color:var(--b-ink); }
#garage .poster :focus-visible { outline:2px solid var(--b-red); outline-offset:3px; }
#garage:is([data-station="race"],[data-poster="true"]) > .notice[data-tone="error"] {
  background:#fbf0e5; color:#6c211e; border-color:#a52f27; }

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-summary {
  border:1px solid var(--b-ink); border-left:4px solid var(--b-ink); border-radius:2px; }
#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-action {
  padding:10px 14px; border-radius:2px; background:var(--b-ink); color:var(--b-white);
  font:600 14px/1 var(--face-body); text-transform:none; letter-spacing:0; }
/* The stamps keep their ink and tilt but speak in sentence case: the wordmark is the one uppercase level. */
#garage .poster-stamp { text-transform:none; letter-spacing:0; font-family:var(--face-body); font-weight:600; }

/* Race: live timing as compact dark plates on the race view itself. */
#garage[data-focus="racing"] > .status-strip {
  grid-area:hero; align-self:start; justify-self:start; z-index:6; position:relative;
  min-height:0; margin:40px 0 0 42px; padding:0; display:block; background:transparent; border:0; box-shadow:none;
  pointer-events:none;
}
#garage[data-focus="racing"] > .status-strip :is(.status-beacon,.status-kicker,.rp-pocket,#open-garage) { display:none; }
#garage[data-focus="racing"] > .status-strip .status-copy { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0; }
/* Three equal plates as in the concept: position, lap, heat clock. */
#garage[data-focus="racing"] .status-main { display:flex; align-items:stretch; gap:0; margin:0;
  font:600 24px/1 var(--face-body); color:var(--b-white); }
#garage[data-focus="racing"] .status-main > .status-plate { display:flex; align-items:center; min-height:56px; padding:0 18px;
  background:rgba(11,27,37,.86); border-left:1px solid rgba(238,236,230,.18); }
#garage[data-focus="racing"] .status-main > .status-plate:first-child { border-left:0; font-size:34px; font-weight:700; }
#garage[data-focus="racing"] .status-main > .status-clock { min-width:7.2ch; font-variant-numeric:tabular-nums; }
#garage[data-focus="racing"] .status-main > .status-plate-sep { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* The circuit and the driver mode are printed under the race view; over it the plates stand alone. */
#garage[data-focus="racing"] .status-sub { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* The timing plate already names the circuit. */
#garage[data-focus="racing"] .stage-readout { display:none; }
/* Under the race view: navy desks; the marshal's clipboard stays paper. */
#garage[data-focus="racing"] :is(.race-controls,.circuit-card,.position-board) { background:var(--b-card); color:var(--b-white); }
#garage[data-focus="racing"] .control-readout :is(strong,small), #garage[data-focus="racing"] .control-readout { color:var(--b-white); }
#garage[data-focus="racing"] .control-readout small { color:var(--b-soft); }
#garage[data-focus="racing"] .circuit-card :is(h2,.track-detail) { color:var(--b-soft); }
#garage[data-focus="racing"] .circuit-card .track-name { color:var(--b-white); }
#garage[data-focus="racing"] .track-map-bed { stroke:var(--b-line); }
#garage .slot-car-position-marquee { background:transparent; }
#garage .slot-car-position-rail { background:var(--b-navy-deep); border:1px solid var(--b-line); }
#garage .slot-car-position-placard { background:var(--b-paper); color:var(--b-ink); }
#garage .slot-car-position-car { border-bottom-color:var(--b-line); }
#garage .slot-car-position-car[data-mine="true"] { box-shadow:inset 0 -3px 0 var(--b-white); }
#garage .slot-car-position-progress { background:var(--b-line); }
#garage .slot-car-position-progress i { background:var(--b-white); }
/* The race phases keep the navy shell (they fell back to the old near-black, a seam against every station). */
#garage.garage:is([data-focus="signup"],[data-focus="countdown"],[data-focus="racing"]) { background:var(--b-navy); }
/* In the heat the tab row stays on top of the race, as in the concept, with Race marked (inert, like the countdown
   poster's) beside Watch and Drive. The status row is gone: its plates sit on the race view. */
#garage[data-focus="racing"] { align-content:start; }
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a#race-station-link { display:flex; cursor:default; }
#garage[data-focus] > .garage-directory { margin-inline:0; }
/* garage.js writes Drive as bare text (no strong), so the link itself carries the tab type. */
#garage .garage-directory a#drive-station-link { font:400 15px/1.3 var(--face-body); letter-spacing:0; }
#garage[data-focus="countdown"] .car-stage { margin-top:16px; }
/* Concept pass 2: the heat fills the page edge to edge and runs up under a translucent nav bar; under it one slim
   strip carries the driver and the circuit, and the marshal's clipboard starts below the fold instead of peeking. */
body:has(#garage:not([hidden])[data-focus="racing"]) .topbar { position:relative; z-index:20; background:rgba(11,27,37,.78); }
#garage[data-focus="racing"] .car-stage { margin:-64px 0 0; height:max(480px, calc(100vh - 84px)); border:0; border-radius:0; }
#garage[data-focus="racing"] > .status-strip { margin:24px 0 0 24px; }
#garage[data-focus="racing"] > .circuit-card { align-content:start; }
#garage[data-focus="racing"] > .circuit-card .circuit-copy h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#garage[data-focus="racing"] > .circuit-card .track-name { margin:0; font:600 18px/1.3 var(--face-body); }
#garage[data-focus="racing"] > .circuit-card .track-detail { margin:2px 0 0; font:400 14px/1.4 var(--face-body); }
#garage[data-focus="racing"] .control-readout strong { font:600 18px/1.3 var(--face-body); }
#garage[data-focus="racing"] .control-readout { min-height:0; padding:0; justify-content:flex-start; font:400 14px/1.4 var(--face-body); }
/* The track map under the circuit name repeats the race view and only peeked over the fold. */
#garage[data-focus="racing"] > .circuit-card .circuit-layout { display:none; }
.car-sheet { display:none; }
#garage:not([data-focus])[data-station="car"] .car-sheet:not([hidden]) { display:grid; }
/* All five phase lamps are green for the whole heat: a row of dashes with nothing to say. */
#garage[data-focus="racing"] .pit-lights { display:none; }
#garage[data-focus="racing"] .race-controls { padding:16px 26px; }
/* Room for the Calls timing bar under the plungers (motorworks-interaction-system.css). */
#garage[data-focus="racing"] .race-controls:not(.automatic) { padding-bottom:30px; }
#garage[data-focus="racing"] > .circuit-card { padding:16px 26px; }
@media (min-width:1001px) {
  #garage[data-focus="racing"], #garage[data-focus="racing"][data-drive-open="true"] {
    grid-template-areas:"directory directory" "hero hero" "controls circuit" "positions circuit" "notice notice"; }
}
@media (max-width:1000px) {
  #garage.garage[data-focus="racing"], #garage.garage[data-focus="racing"][data-drive-open="true"] {
    grid-template-areas:"directory" "hero" "controls" "positions" "circuit" "notice"; }
}

/* Results: the official slip on a clipboard, with one red way home. */
/* Concept pass 2: the tab row rides in the header bar, so its grid row is empty and the room fills the rest of the
   screen. (Running it up under a translucent bar, as in the race, cropped the banner: the results lens keeps its
   vertical angle, so a taller view only magnifies.) */
#garage.garage[data-focus="results"] { grid-template-rows:0 auto auto; }
@media (min-width:901px) {
  #garage[data-focus="results"] .car-stage { height:max(600px, calc(100vh - 64px)); }
}
#garage[data-focus="results"] > .race-report {
  position:relative; padding:36px 14px 14px; background:#4a3a2b; border-radius:3px;
  box-shadow:0 0 0 1px #2b2119;
}
#garage[data-focus="results"] > .race-report::before { content:""; position:absolute; top:-10px; left:50%; width:120px; height:30px;
  transform:translateX(-50%); background:#a9b0b8; border:1px solid #6d747c; border-radius:3px 3px 6px 6px; }
/* The way home is printed on the slip itself, as in the concept: the red button, then the two quiet links. */
#garage[data-focus="results"] .race-return { justify-content:center; padding:10px 28px 22px; gap:4px 20px;
  background:var(--club-ivory); color:var(--b-ink); }
#garage[data-focus="results"] .race-return a { font-size:15px; color:var(--b-ink); }
#garage[data-focus="results"] .race-return a[href="#car-stage"] { flex:1 0 100%; justify-content:center; min-height:48px;
  background:var(--b-red); color:var(--b-white); border-radius:2px; text-decoration:none; font:600 16px/1.3 var(--face-body); }
#garage[data-focus="results"] .race-return a[href="#car-stage"]:hover { background:var(--b-red-hi); }

/* Records stays in the Garage: one compact enamel directory above the selected place. */
.record-directory { display:none; }
#garage:not([data-focus])[data-station="record"] {
  grid-template-columns:minmax(0,1fr); gap:0;
  grid-template-areas:"directory" "index" "desk" "notice";
  align-items:start;
}
#garage:not([data-focus])[data-station="record"] > .record-directory {
  display:block; grid-area:index; margin-top:0; background:#0f1a20; color:#f2ead9;
  border:0; border-bottom:1px solid #2b3a41; border-radius:0;
}
#garage .record-directory header { display:none; }
#garage .record-directory h2 { margin:0; color:inherit; font:800 32px/1 var(--face-display); }
/* A slim strip of three plain group labels; the bench below owns the screen. */
#garage .record-directory #life-switchboard {
  position:relative; display:flex; justify-content:flex-start; min-height:0; padding:0 12px; margin:0; overflow:visible; border:0; background:transparent; z-index:12;
}
#garage .record-directory .record-group { border:0; }
#garage .record-directory summary {
  display:flex; align-items:center; gap:8px; padding:10px 18px;
  min-height:44px; cursor:pointer; list-style:none; color:#d9d2c3; font:500 14px/1.2 var(--face-body);
}
#garage .record-directory details[open] > summary,
#garage .record-directory summary:hover { color:#f3eadb; background:#16262e; }
#garage .record-directory .record-current-page { display:none; }
#garage .record-directory summary::-webkit-details-marker { display:none; }
#garage .record-directory summary::after { content:'\25BE'; font:400 12px/1 var(--face-body); color:#a9b4b8; }
#garage .record-directory details[open] > summary::after { content:'\25B4'; }
#garage .record-directory summary:focus-visible { outline:2px solid #f2ead9; outline-offset:-4px; }
#garage .record-directory .record-pages { position:absolute; top:44px; left:0; right:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:10px; gap:2px; background:#0c202a; border:1px solid #687066; box-shadow:0 8px 12px #0006; }
#garage:not([data-focus])[data-station="record"] .record-directory .life-switch {
  display:grid; grid-template-columns:1fr; gap:3px; width:100%; min-height:52px; padding:10px 12px;
  border:0; border-left:3px solid transparent; border-radius:1px; clip-path:none; transform:none;
  background:transparent; color:#f2ead9; box-shadow:none; text-align:left;
}
#garage .record-directory .life-switch strong { font:600 15px/1.3 var(--face-body); }
#garage .record-directory .life-switch small { display:block; color:#c5cec3; font:400 13px/1.3 var(--face-body); }
#garage .record-directory .life-switch :is(strong,small) { grid-column:1; grid-row:auto; justify-self:start; text-align:left; white-space:normal; overflow-wrap:anywhere; }
#garage .record-directory .life-switch .life-switch-lamp { display:none; }
#garage:not([data-focus])[data-station="record"] .record-directory .life-switch[aria-pressed="true"] {
  border-left-color:transparent; background:#f2ead9; color:#232921;
}
#garage .record-directory .life-switch[aria-pressed="true"] small { color:#50584d; }
#garage:not([data-focus])[data-station="record"] .record-directory .life-switch:not([aria-pressed="true"]):hover { background:#3d493f; }
#garage:not([data-focus])[data-station="record"] > .life-panel { grid-area:desk; margin-top:0; min-width:0; }
#garage:not([data-focus])[data-station="record"] > :is(.record-panel,#mastery,.race-report) { margin-top:0; min-width:0; }
#garage[data-record-target="trophy-wall-root"] > #record-panel.record-panel { padding:0; border:0; background:transparent; }
/* The Records bench runs edge to edge under the strip. */
#garage:not([data-focus])[data-station="record"][data-record-target="trophy-wall-root"] { padding-inline:0; padding-bottom:0; }
@media (max-width:800px) {
  #garage:not([data-focus])[data-station="record"] {
    grid-template-columns:minmax(0,1fr); grid-template-areas:"directory" "index" "desk" "notice"; gap:0;
  }
  #garage:not([data-focus])[data-station="record"] > .record-directory { margin-top:0; }
  #garage .record-directory summary { font-size:14px; padding:12px; }
  #garage .record-directory h2 { font-size:28px; }
  #garage .record-directory .record-pages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #garage .record-directory .life-switch { align-content:start; }
  #garage .record-directory summary { gap:8px; }
  #garage .record-directory .record-current-page { display:none; }
}

/* The Watch camera desk has a selector bank, shuttle and quiet return keys. */
html:not(.stream-transparent) .watch-hud .watch-director-console {
  background:#202723; color:#f2ead9; border:1px solid #677068;
  border-radius:3px; box-shadow:3px 4px 0 #111713; }
html:not(.stream-transparent) .watch-hud .watch-director-label {
  color:#f2ead9; font:800 26px/1 var(--face-display); text-transform:none; letter-spacing:0;
  border-bottom:1px solid #677068; }
html:not(.stream-transparent) .watch-hud .watch-director-console button {
  border:1px solid #677068 !important; border-radius:2px; background:#353f38 !important;
  color:#f2ead9 !important; text-decoration:none; box-shadow:0 2px 0 #101710;
  transition:background-color 100ms,transform 100ms; }
html:not(.stream-transparent) .watch-hud .watch-camera-bank button[aria-pressed="true"] {
  background:#f2ead9 !important; color:#232921 !important; box-shadow:none; }
html:not(.stream-transparent) .watch-hud .watch-director-console button:hover { background:#4b594e !important; }
html:not(.stream-transparent) .watch-hud .watch-camera-bank button[aria-pressed="true"]:hover { background:#fff9ec !important; }
html:not(.stream-transparent) .watch-hud .watch-director-console button:active { transform:translateY(1px); box-shadow:none; }
html:not(.stream-transparent) .watch-hud .watch-director-console button:focus-visible { outline:2px solid #f2ead9; outline-offset:2px; }
html:not(.stream-transparent) .watch-hud .watch-director-console :is(.watch-exits button,.player-volume-control) {
  background:transparent !important; box-shadow:none; border-color:transparent !important; border-top:1px solid #677068 !important; }
html:not(.stream-transparent) .watch-hud .watch-entry .watch-join-drive { background:var(--b-red) !important; }
@media (prefers-reduced-motion:reduce) {
  html:not(.stream-transparent) .watch-hud .watch-director-console button { transition:none; transform:none; }
}
html:not(.stream-transparent) .drive-hud .drive-heat-rule {
  border:1px solid var(--b-line); background:var(--b-navy-deep); color:var(--b-white); box-shadow:none;
  text-transform:none; transform:none; text-align:left; }
html:not(.stream-transparent) .drive-hud .drive-heat-rule strong { font:600 16px/1.2 var(--face-body); letter-spacing:0; }
html:not(.stream-transparent) .drive-hud .drive-heat-rule span { margin-top:2px; color:var(--b-soft); font:400 13px/1.2 var(--face-body); letter-spacing:0; }
html:not(.stream-transparent) .drive-hud .watch-card-name { color:var(--b-white); }
html:not(.stream-transparent) .drive-hud .watch-standings li { color:var(--b-soft); }
html:not(.stream-transparent) .drive-hud .watch-standings li[data-following="true"] { color:var(--b-white); font-weight:700; }

@media (max-width:700px) {
  /* Keep the waiting bench's rotated lane inside a phone before the real room finishes loading. */
  #garage .car-stage > .lane { left:10%; right:10%; }
  .brand-copy strong { font-size:20px; letter-spacing:.12em; }
  /* Race Points keep their name on a phone (a bare "0" beside the D chip read as nothing): they share the second
     header row with the Cup, at its right end. */
  .topbar-context .poster-points { grid-column:2 / -1; grid-row:2; justify-self:end; align-self:center;
    display:flex; align-items:baseline; gap:6px; }
  .topbar-context .poster-points small { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
  .topbar-context .poster-cup { grid-column:1; }
  #garage .garage-directory a, #garage .garage-directory a:first-of-type,
  #garage .garage-directory a[aria-current="page"] { padding:0 10px; }
  #garage[data-station="workshop"] .workshop-parts-room { border:0; }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) {
    flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:8px 10px 8px 14px; }
  #garage[data-station="workshop"] .workshop-category-tab { padding-left:20px; }
  #garage[data-focus="racing"] > .status-strip { margin:20px 0 0 20px; }
  #garage[data-focus="racing"] .status-main { font-size:16px; }
  #garage[data-focus="racing"] .status-main > .status-plate { min-height:36px; padding:0 10px; }
  #garage[data-focus="racing"] .status-main > .status-plate:first-child { font-size:20px; }
  #garage[data-focus="results"] > .race-report { margin:24px 16px 16px; }
}

/* Race: the four tabs as in the concept, Race marked. During the heat the others are inert (garage.js marks them
   aria-disabled; a click stays on the race), so they keep the plain tab colour without a hover. */
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a:is([href="#car-stage"],[href="#parts-bench"],#record-station-link) {
  display:flex; cursor:default; }
#garage .garage-directory a[aria-disabled="true"]:hover { color:var(--b-soft); }
body:has(#garage:not([hidden])[data-focus="racing"]) .topbar-context :is(.poster-points,.poster-cup) { display:none; }
#garage[data-focus="racing"] .status-main > .status-plate { background:rgba(11,27,37,.78); }
@media (min-width:1101px) {
  /* The plates: a little more room in each cell and a heavier position. */
  #garage[data-focus="racing"] .status-main > .status-plate { min-height:62px; padding:0 22px; }
  #garage[data-focus="racing"] .status-main > .status-plate:first-child { font-size:38px; font-weight:700; }
  /* The heat runs full-bleed: up under a translucent bar and down to the bottom edge. */
  body:has(#garage:not([hidden])[data-focus="racing"]) .topbar { background:rgba(11,27,37,.55); border-bottom:0;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  #garage[data-focus="racing"] .car-stage { margin:calc(-1 * var(--b-nav-h)) 0 0; height:100vh; min-height:560px; }
  #garage[data-focus="racing"] > .status-strip { margin:16px 0 0 24px; }
  /* The driver mode and the circuit ride the race view as two small plates in its bottom corners (the opaque footer
     band under the race is gone); the calls buttons, when the player drives the calls, sit in the left plate. */
  #garage[data-focus="racing"] > :is(.race-controls,.circuit-card) { grid-area:hero; align-self:end; z-index:6;
    position:relative; margin:0 24px 24px; padding:10px 16px; min-height:0; max-width:min(560px, 44vw);
    background:rgba(11,27,37,.78); border:0; border-radius:2px; box-shadow:none; }
  /* The driver plate rides under the position plates at the top left: in the bottom-left corner it covered 31-44% of
     the followed car, which the trackside camera sets in the lower-left third as the concept does (fidelity slice 4,
     race-sweep uiCover). */
  #garage[data-focus="racing"] > .race-controls { justify-self:start; align-self:start; margin:94px 24px 0;
    max-width:min(440px, 32vw); grid-template-columns:repeat(3,minmax(0,1fr)); }
  #garage[data-focus="racing"] > .race-controls.automatic { grid-template-columns:minmax(0,1fr); }
  #garage[data-focus="racing"] .race-controls .control-readout { grid-column:1 / -1; min-width:0; }
  #garage[data-focus="racing"] > .circuit-card { justify-self:end; }
  #garage[data-focus="racing"] .control-readout strong,
  #garage[data-focus="racing"] > .circuit-card .track-name { font:600 15px/1.3 var(--face-body); }
  #garage[data-focus="racing"] .control-readout,
  #garage[data-focus="racing"] > .circuit-card .track-detail { font:400 13px/1.35 var(--face-body); }
  /* The marshal's orders ride in the same plate as plain lines, not a paper clipboard over the race. */
  #garage[data-focus="racing"] .race-controls .live-contracts { margin:8px 0 0; padding:0; border:0; background:transparent; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-board { min-height:0; display:block; padding:0; background:transparent; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-shell { width:100%; min-width:0; padding:6px 0 0; background:transparent;
    border:0; border-top:1px solid rgba(238,236,230,.18); box-shadow:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-clip { display:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-head { min-height:0; padding:0 0 4px; border:0; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-shell h2,
  #garage[data-focus="racing"] .race-controls .slot-car-contract-count { font:600 13px/1.3 var(--face-body); letter-spacing:0; color:var(--b-white); }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-kicker { display:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-slips { display:grid; grid-template-columns:1fr; gap:0;
    background:transparent; border:0; box-shadow:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-slip { min-height:0; padding:2px 0; border:0; background:transparent; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-slip::before { display:none; }
  #garage[data-focus="racing"] .race-controls :is(.slot-car-contract-slip h3,.slot-car-contract-order,.slot-car-contract-tier-code) {
    color:var(--b-white); font:400 13px/1.3 var(--face-body); letter-spacing:0; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-mark { min-height:0; min-width:0; padding:0; border:0;
    background:transparent; color:var(--b-soft); box-shadow:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-mark :is(.slot-car-contract-state,.slot-car-contract-action) {
    font:400 12px/1.2 var(--face-body); letter-spacing:0; text-transform:none; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-mark[data-state="passed"] { color:var(--b-mint); background:transparent; }
  #garage[data-focus="racing"] .race-controls .slot-car-contract-mark:is([data-state="missed"],[data-state="wrong"]) { color:#ff8a80; }
}

/* Workshop (pass 3): edge to edge and one screen tall under the bar, as in the concept. Three columns run from the
   bar to the bottom: the families, the parts (four tall rows, a real still on a grey tile, the fitted one tinted with
   a check, the selected one marked by a dark left edge), and the car on the bench above a dark decision strip. The
   wall/catalogue switch and the livery door ride the scene's top-right corner (the Assembled/Loose switch has the
   top-left), so no title row sits over the room. */
#garage[data-station="workshop"] .workshop-parts-room .workshop-part.fitted { background:#d6dacf; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part.fitted:hover { background:#dde1d7; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part { position:relative; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part.fitted::after {
  content:"\2713" / ""; display:block; position:absolute; top:50%; right:16px; transform:translateY(-50%);
  color:#1b2433; font:600 22px/1 var(--face-body); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part[data-active="true"] { box-shadow:inset 4px 0 #1b2433; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge .rp-token { font:600 15px/1.3 var(--face-body);
  font-variant-numeric:tabular-nums; }
#garage[data-station="workshop"] :is(.workshop-category-count,.workshop-category-group-count) {
  font:400 15px/1.3 var(--face-body); font-variant-numeric:tabular-nums; }
/* Every still on the same mid-grey tile with a soft contact shadow, crisp whichever row is selected (the rest of the
   rack no longer drops to a grey-sepia wash: in the concept every product shot reads). */
#garage[data-station="workshop"] .workshop-parts-room .workshop-part :is(.workshop-part-bin-object,.workshop-part-bin-object[data-thumb-ready="true"]) {
  background:#d9d9d6; border:0; border-radius:2px; box-shadow:none; }
#garage[data-station="workshop"] .workshop-part-rack:has(.workshop-part[data-active="true"])
  .workshop-part:not([data-active="true"]):not(:hover) .workshop-part-bin-object { filter:none; opacity:1; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part[data-active="true"] .workshop-part-bin-object { transform:none; }
#garage[data-station="workshop"] .workshop-parts-room .workshop-part-bin-object img { filter:drop-shadow(0 5px 4px rgba(20,22,24,.32)); }
@media (min-width:1101px) {
  #garage.garage:not([data-focus])[data-station="workshop"] { padding-inline:0; row-gap:0; }
  #garage[data-station="workshop"] { --ws-h:max(480px, calc(100vh - var(--b-nav-h) - 64px)); --ws-rail:clamp(190px, 15vw, 230px);
    --ws-list:clamp(300px, 25vw, 380px); }
  #garage:not([data-focus])[data-station="workshop"] > #works-bench.workshop-bench { margin:0; padding:0; border:0; }
  #garage[data-station="workshop"] .workshop-physical { position:relative; gap:0; padding:0; }
  /* The room controls share one enamel rail, leaving the authored scene clear. */
  #garage[data-station="workshop"] .workshop-physical-head { position:relative; inset:auto; z-index:5;
    display:flex; align-items:center; gap:16px; width:auto; min-height:56px; margin:0; padding:8px 16px; border:0; border-bottom:1px solid #555247; background:#20211e; }
  #garage[data-station="workshop"] .workshop-physical-heading { display:flex; align-items:center; gap:0; }
  #garage[data-station="workshop"] .workshop-physical-heading h2 { position:static; width:auto; height:auto; overflow:visible; clip-path:none; margin:0 16px 0 0; color:#f2eada; }
  #garage[data-station="workshop"] .workshop-physical-head .workshop-switch { margin:0; background:rgba(11,27,37,.86); }
  #garage[data-station="workshop"] .workshop-livery-door { min-height:48px; padding:0 14px; gap:10px; border:1px solid var(--b-line);
    border-radius:2px; background:rgba(11,27,37,.86); color:var(--b-white); box-shadow:none; }
  #garage[data-station="workshop"] .workshop-livery-door :is(strong,.workshop-livery-arrow) { font:400 14px/1.2 var(--face-body);
    color:var(--b-white); }
  #garage[data-station="workshop"] .workshop-livery-door .workshop-livery-arrow { min-height:0; padding:0 0 0 10px; border:0;
    border-left:1px solid var(--b-line); background:transparent; }
  #garage[data-station="workshop"] .workshop-parts-room { grid-template-columns:var(--ws-rail) var(--ws-list) minmax(0,1fr);
    gap:0; border:0; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] { border-right:0; }
  /* The families: a hairline under each row (inset), a white bar on the open one, no fill. */
  #garage[data-station="workshop"] .workshop-category-rail { padding:6px 0; background:#12282f; }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) {
    min-height:52px; padding:0 18px 0 22px; border:0; box-shadow:none; background-color:transparent;
    background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18));
    background-repeat:no-repeat; background-position:16px 100%; background-size:calc(100% - 32px) 1px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-category-tab { min-height:46px; padding-left:34px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-category-tab[aria-pressed="true"] {
    background-color:#eee5d2; color:#28241d; box-shadow:none; }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab):hover {
    background-color:rgba(255,255,255,.05); }
  #garage[data-station="workshop"] .workshop-category-group-tab strong { font:500 17px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-category-tab strong { font:400 16px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] strong { font-weight:500; }
  /* The parts list: no header block over it, just the family's count and pager on one slim line. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf { background:#f3ede1; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-head { display:grid;
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:8px;
    min-height:0; padding:8px 10px 8px 16px; background:#f3ede1; }
  #garage[data-station="workshop"] .workshop-shelf-room-label { display:flex; align-items:baseline; gap:8px; grid-column:1; grid-row:1; }
  #garage[data-station="workshop"] .workshop-shelf-title { font:600 17px/1.25 var(--face-body); }
  #garage[data-station="workshop"] .workshop-shelf-fitted { grid-column:1; grid-row:2; display:block; margin:0; }
  #garage[data-station="workshop"] .workshop-wall-browse { grid-column:2; grid-row:1 / 3; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    grid-auto-rows:minmax(max(112px, calc((var(--ws-h) - 80px) / 4.5)), auto); align-content:stretch; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part {
    grid-template-columns:104px minmax(0,1fr) 28px; column-gap:16px; min-height:0; padding:10px 16px 10px 14px; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] :is(.workshop-part-bin-object,.workshop-part-bin-object[data-thumb-ready="true"]) {
    width:104px; height:104px; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-bin-object img {
    width:100%; height:100%; object-fit:contain; transform:none; }
  #garage[data-station="workshop"] .workshop-part-name { font:600 16px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge { font:500 14px/1.4 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-hook { min-height:96px; }
  /* The bench: the car from the bar down to a compact dark strip. */
  #garage[data-station="workshop"] .workshop-parts-room,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail,
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { height:var(--ws-h); }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { grid-template-rows:minmax(0,1fr) auto; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { border:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { max-height:min(260px, 34vh); overflow:auto;
    padding:12px 20px 14px; gap:8px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading { row-gap:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading h2 { font:600 18px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading > :is(.workshop-part-summary,.workshop-part-loan) {
    font-size:14px; color:var(--b-ink-soft); white-space:normal; overflow-wrap:anywhere; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision { grid-template-columns:minmax(0,1fr) 248px;
    column-gap:28px; padding-top:8px; }
  /* Lap delta and what it is measured against on one line, then the bars at a fixed length. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison { display:flex; flex-wrap:wrap;
    align-items:baseline; column-gap:12px; row-gap:2px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison > * { flex:0 0 100%; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison > :is(.workshop-lap-delta,.workshop-comparison-title) { flex:0 1 auto; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-comparison-title { font:400 13px/1.3 var(--face-body); color:var(--b-ink-soft); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-lap-delta + .workshop-comparison-title::before { content:"\00B7\00A0" / ""; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-lap-delta strong { font-size:17px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-pill { grid-template-columns:96px minmax(0,300px) 36px;
    column-gap:14px; min-height:24px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-label { font:400 14px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-value { font:500 14px/1.3 var(--face-body); font-variant-numeric:tabular-nums; }
  /* Two stacked buttons of one size on the right: Buy (or Fit), then the test run. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-inspection-actions { gap:8px; }
  #garage[data-station="workshop"] .workshop-action, #garage[data-station="workshop"] .workshop-action.primary { font:500 16px/1.3 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-action-note { grid-row:3; font-size:12px; line-height:1.35; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-test-run { grid-row:2;
    display:grid; grid-template-columns:minmax(0,1fr) 72px; min-height:48px; border-color:var(--b-rule); background:transparent; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run-go { min-height:46px; background:transparent;
    border-right:1px solid var(--b-rule); color:var(--b-ink); font:500 16px/1.2 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run svg { width:72px; height:46px; background:transparent; }
}

/* Workshop on a phone (pass 3): the car on its bench first, straight under the header, then one scrolling row of
   family chips, the wall/catalogue switch and the livery door, the part rows, and the decision. The parts room and the
   inspection lend their children to one flex column (display:contents) so the order can change without moving DOM. */
@media (max-width:700px) {
  #garage.garage:not([data-focus])[data-station="workshop"] { padding-inline:0; }
  #garage:not([data-focus])[data-station="workshop"] > #works-bench.workshop-bench { margin:0; padding:0; border:0; }
  #garage[data-station="workshop"] .workshop-physical { display:flex; flex-direction:column; gap:0; padding:0; }
  #garage[data-station="workshop"] .workshop-parts-room,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { display:contents; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { order:0; position:relative;
    width:100%; height:240px; min-height:240px; margin:0; border:0; }
  #garage[data-station="workshop"] .workshop-physical-head { order:1; display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin:0; padding:10px 16px 6px; border:0; background:transparent; }
  #garage[data-station="workshop"] .workshop-physical-heading { display:flex; gap:0; }
  #garage[data-station="workshop"] .workshop-physical-heading h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #garage[data-station="workshop"] .workshop-livery-door { min-height:44px; padding:0 12px; border:1px solid var(--b-line);
    border-radius:2px; background:transparent; box-shadow:none; color:var(--b-white); }
  #garage[data-station="workshop"] .workshop-livery-door :is(strong,.workshop-livery-arrow) { font:400 14px/1.2 var(--face-body); color:var(--b-white); }
  #garage[data-station="workshop"] .workshop-livery-door .workshop-livery-arrow { display:none; }
  /* The families as one horizontal row of chips. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail { order:2; display:flex; flex-wrap:nowrap; gap:0;
    max-height:none; height:auto; overflow-x:auto; overflow-y:hidden; padding:0 8px; background:transparent;
    border-bottom:1px solid var(--b-line); scrollbar-width:none; }
  #garage[data-station="workshop"] .workshop-category-rail :is(.workshop-category-group,.workshop-category-families) { display:contents; }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) {
    flex:0 0 auto; width:auto; flex-direction:row; align-items:baseline; gap:6px; min-height:46px; padding:0 10px;
    border:0; background:transparent; box-shadow:none; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-category-tab[aria-pressed="true"] {
    background:#eee5d2; color:#28241d; box-shadow:none; }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-tab,.workshop-category-group-tab) strong { font:500 15px/1.2 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room :is(.workshop-category-count,.workshop-category-group-count) { font-size:13px; }
  /* The parts as rows: still, name, price or state. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall { order:3; border:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf { height:auto; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall[data-category-wall="true"] .workshop-shelf-head { display:grid;
    grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label browse" "fitted browse";
    align-items:center; column-gap:8px; min-height:0; padding:8px 8px 8px 16px; }
  #garage[data-station="workshop"] .workshop-shelf-room-label { display:flex; align-items:baseline; gap:8px; }
  #garage[data-station="workshop"] .workshop-shelf-title { font:600 16px/1.25 var(--face-body); }
  #garage[data-station="workshop"] .workshop-shelf-fitted { grid-column:1; }
  #garage[data-station="workshop"] .workshop-wall-browse { grid-column:2; grid-row:1 / 3; }
  /* Rows, not the old one-card-at-a-time carousel. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall[data-category-wall="true"] .workshop-part-rack { display:grid;
    grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; grid-auto-rows:auto; min-height:0; height:auto;
    padding:0; overflow:visible; scroll-snap-type:none; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall[data-category-wall="true"] .workshop-part-hook {
    position:static; min-height:56px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall[data-category-wall="true"] .workshop-part { display:grid;
    grid-template-columns:76px minmax(0,1fr) 24px; grid-template-rows:auto auto; align-items:center; column-gap:14px; row-gap:2px;
    min-height:96px; padding:10px 14px; text-align:left; }
  #garage[data-station="workshop"] .workshop-category-families[hidden],
  #garage[data-station="workshop"] .workshop-category-group:has(> .workshop-category-group-tab[aria-expanded="false"]) .workshop-category-families { display:none; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall[data-category-wall="true"] .workshop-part :is(.workshop-part-bin-object,.workshop-part-bin-object[data-thumb-ready="true"]) {
    grid-column:1; grid-row:1 / 3; width:76px; height:76px; margin:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-bin-object img { width:100%; height:100%; object-fit:contain; transform:none; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-identity { grid-column:2; grid-row:1; align-self:end;
    justify-self:start; max-width:100%; text-align:left; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge { grid-column:2; grid-row:2; align-self:start; justify-self:start; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part.fitted::after { right:14px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-hook { min-height:56px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { order:4; }
}

/* Results (pass 3): the clipboard stands on the right, as in the concept, nearly the height of the room, leaning a
   little on the bench: a wooden board, a steel clip, the paper slip and the red way home printed on it. The car takes
   the left and centre of the frame (the finish camera's offset is the room lane's; see the lane report). */
@media (min-width:901px) {
  #garage.garage[data-focus="results"] { grid-template-columns:minmax(0,1fr) auto; min-height:calc(100vh - var(--b-nav-h)); }
  #garage[data-focus="results"] .car-stage { height:max(600px, calc(100vh - var(--b-nav-h))); }
  #garage[data-focus="results"] > .race-report { grid-column:2; grid-row:2; justify-self:end; align-self:start;
    width:clamp(340px, 30vw, 440px); box-sizing:border-box; min-height:min(720px, calc(100vh - var(--b-nav-h) - 9vh - 24px));
    margin:calc(4.5vh + 8px) 6vw 0 0; padding:44px 16px 18px; transform:rotate(1.2deg); transform-origin:50% 100%;
    background:#704527; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px #3a2210,
      0 18px 28px rgba(0,0,0,.45); }
  #garage[data-focus="results"] > .race-report::before { top:-12px; width:150px; height:40px; background:#b8bdc2;
    border:1px solid #5d6369; border-radius:4px 4px 10px 10px; box-shadow:inset 0 -6px #9aa0a6; }
  #garage[data-focus="results"] #race-debrief-root { background:var(--club-ivory); border-radius:2px 2px 0 0; }
  #garage[data-focus="results"] .race-return { flex:1 1 auto; align-content:flex-start; padding:12px 32px 24px;
    border-radius:0 0 2px 2px; }
  #garage[data-focus="results"] .race-return a[href="#car-stage"] { min-height:56px; font:600 19px/1.3 var(--face-body); }
}

/* The desktop receipt is projected onto the loaded 3D board's paper. CSS board/clip stay solely as load/phone fallback. */
@media (min-width:901px) {
  #garage[data-focus="results"] > .race-report[data-physical-clipboard] {
    position:absolute; left:0; top:0; width:400px; height:550px; min-height:0; margin:0; padding:0;
    grid-area:auto; justify-self:start; align-self:start;
    transform-origin:0 0; display:flex; flex-direction:column; background:var(--club-ivory); border:0;
    border-radius:0; box-shadow:none; z-index:5; transition:none; animation:none;
  }
  #garage[data-focus="results"] > .race-report[data-physical-clipboard]::before { display:none; }
}

/* Workshop hotfix (2026-10-12, Twitch chat after the 18:06 go-live: "workshop is a mess", "you should have all the
   information and buttons on the screen without having to scroll", "a grid of parts to click through instead of a big
   list", "is there no more repair all"). The family is a grid of small tiles, the bench keeps the car above the whole
   decision (no inner scrollbar), Repair all is a filled header button, and the passport follows the decision on the same paper sheet. */
#garage[data-station="workshop"] { --ws-paper:#eee5d2; --ws-tile:#f8f2e5; --ws-tile-rule:#cfc3ad; --ws-gain:#1d6b45; --ws-loss:#a8231c; --b-mint:#1d6b45; --b-loss:#a8231c; --b-seg:#cfc3ad; }
/* Repair all and the header controls: navy fill, white type, wherever the header sits. */
#garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all {
  min-height:48px; margin:0 8px 0 0; padding:0 14px; border:1px solid var(--b-line); border-radius:2px;
  background:var(--b-navy-deep); color:var(--b-white); font:500 14px/1.2 var(--face-body); white-space:nowrap; }
#garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all:focus-visible {
  background:var(--b-line); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all:disabled {
  opacity:1; border-color:var(--b-line); background:var(--b-navy-deep); color:var(--b-soft); }
#garage[data-station="workshop"] .workshop-physical-head .workshop-switch { background:var(--b-navy-deep); }
#garage[data-station="workshop"] .workshop-physical-head .workshop-switch button:not([aria-pressed="true"]) { color:var(--b-white); }
/* The legacy test-run hover drew a yellow ring; the B hover is the fill change above. */
#garage[data-station="workshop"] .workshop-test-run-go:hover { outline:none; }
/* The turn cue: white on a navy chip (grey on paper read 1.5:1). */
#garage[data-station="workshop"] .workshop-turn-cue { border:0; border-radius:2px; background:var(--b-navy-deep); color:var(--b-white); }
#garage[data-station="workshop"] .workshop-turn-cue span { color:var(--b-soft); }

/* Two readable parts per row, with full names and the existing price or ownership state. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row; grid-auto-rows:auto;
  grid-auto-columns:auto; align-content:start; gap:8px; height:auto; min-height:0; padding:10px 12px 12px;
  overflow:visible; scroll-snap-type:none; background:var(--ws-paper); }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto;
  align-content:start; align-items:start; row-gap:4px; column-gap:0; width:auto; min-width:0; min-height:0; height:auto;
  margin:0; padding:10px 10px 12px; border:1px solid var(--ws-tile-rule); border-radius:2px; background:var(--ws-tile);
  box-shadow:none; text-align:left; transform:none; scroll-snap-align:none; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part:hover { background:#fff; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part.fitted { background:#dfe4d8; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part[data-active="true"] {
  border-color:var(--b-ink); box-shadow:inset 0 0 0 1px var(--b-ink); }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part :is(.workshop-part-bin-object,.workshop-part-bin-object[data-thumb-ready="true"]) {
  grid-column:1; grid-row:1; width:100%; height:auto; aspect-ratio:4 / 3; margin:0; border:0; border-radius:2px;
  background:#e2e0da; transform:none; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-bin-object img {
  width:100%; height:100%; object-fit:contain; transform:none; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-identity {
  grid-column:1; grid-row:2; align-self:start; justify-self:stretch; max-width:none; min-width:0; text-align:left; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-name {
  display:block; color:var(--b-ink); font:600 15px/1.3 var(--face-body); letter-spacing:0; overflow-wrap:anywhere; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-badge {
  grid-column:1; grid-row:3; align-self:end; justify-self:start; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px;
  min-height:0; margin:0; padding:0; border:0; background:transparent; color:var(--b-ink-soft); font:500 12px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part.fitted .workshop-part-badge { color:var(--b-ink); font-weight:600; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-badge .rp-token {
  color:var(--b-ink); font:600 13px/1.3 var(--face-body); font-variant-numeric:tabular-nums; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-new { margin:0; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part.fitted::after {
  top:8px; right:8px; transform:none; display:grid; place-items:center; width:20px; height:20px; border-radius:2px;
  background:var(--b-ink); color:var(--b-white); font:600 13px/1 var(--face-body); }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-hook {
  position:static; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:0;
  height:auto; margin:0; padding:8px 6px; border:1px dashed var(--b-ink-soft); border-radius:2px; background:transparent;
  color:var(--b-ink); font:500 14px/1.3 var(--face-body); text-align:center; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-hook::before { content:none; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-hook-peg { display:none; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-silhouettes {
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-silhouette { width:36px; height:28px; }
/* The family's line: name, count and the fitted part, no pager. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-shelf-head {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-height:0; padding:10px 12px 0;
  border:0; background:var(--ws-paper); }
#garage[data-station="workshop"] .workshop-parts-room .workshop-shelf { background:var(--ws-paper); }
#garage[data-station="workshop"] .workshop-shelf-room-label { display:flex; align-items:baseline; gap:8px; }
#garage[data-station="workshop"] .workshop-shelf-room-label > span,
#garage[data-station="workshop"] .workshop-shelf-fitted { color:var(--b-ink-soft); font:400 13px/1.3 var(--face-body); }

/* The catalogue keeps the same readable figure size, grouped by works team. */
#garage[data-station="workshop"] .workshop-parts-room > .workshop-catalogue {
  display:block; margin:0; padding:0 12px 12px; background:var(--ws-paper); border:0; }
#garage[data-station="workshop"] .workshop-catalogue-team {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; padding:0 0 12px; border:0;
  background:transparent; box-shadow:none; }
#garage[data-station="workshop"] .workshop-catalogue-team-head {
  grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; padding:12px 0 2px; border:0; background:var(--ws-paper); }
#garage[data-station="workshop"] .workshop-catalogue-team-head h3 { margin:0; color:var(--b-ink); font:600 16px/1.25 var(--face-body);
  letter-spacing:0; text-transform:none; }
#garage[data-station="workshop"] .workshop-catalogue-team-head span { color:var(--b-ink-soft); font:400 13px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-catalogue-card {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; row-gap:4px;
  min-width:0; min-height:0; margin:0; padding:10px 10px 12px; border:1px solid var(--ws-tile-rule); border-radius:2px;
  background:var(--ws-tile); box-shadow:none; color:var(--b-ink); text-align:left; }
#garage[data-station="workshop"] .workshop-catalogue-card:first-of-type { border-top:1px solid var(--ws-tile-rule); }
#garage[data-station="workshop"] .workshop-catalogue-card:hover { background:#fff; }
#garage[data-station="workshop"] .workshop-catalogue-card[data-stamp="fitted"] { background:#dfe4d8; }
#garage[data-station="workshop"] .workshop-catalogue-card[data-active="true"] { border-color:var(--b-ink); box-shadow:inset 0 0 0 1px var(--b-ink); }
#garage[data-station="workshop"] .workshop-catalogue-card:focus-visible { outline:2px solid var(--b-ink); outline-offset:-3px; }
#garage[data-station="workshop"] :is(.workshop-catalogue-thumb,.workshop-catalogue-thumb[data-thumb-ready]) {
  grid-row:1; width:100%; height:auto; aspect-ratio:4 / 3; border:0; border-radius:2px; background:#e2e0da; }
#garage[data-station="workshop"] .workshop-catalogue-thumb img { width:100%; height:100%; object-fit:contain; }
#garage[data-station="workshop"] .workshop-catalogue-title { grid-row:2; display:grid; gap:1px; padding:0; }
#garage[data-station="workshop"] .workshop-catalogue-title strong { display:block; color:var(--b-ink); font:600 15px/1.3 var(--face-body); letter-spacing:0; overflow-wrap:anywhere; }
#garage[data-station="workshop"] .workshop-catalogue-effects { grid-row:3; display:flex; flex-wrap:wrap; gap:0 10px; }
#garage[data-station="workshop"] .workshop-catalogue-effects span { font:600 13px/1.35 var(--face-body); }
#garage[data-station="workshop"] .workshop-catalogue-effects .gain { color:var(--ws-gain); }
#garage[data-station="workshop"] .workshop-catalogue-effects .loss { color:var(--ws-loss); }
#garage[data-station="workshop"] .workshop-catalogue-effects .even { color:var(--b-ink-soft); font-weight:400; }
#garage[data-station="workshop"] .workshop-catalogue-stamp,
#garage[data-station="workshop"] .workshop-catalogue-card[data-stamp] .workshop-catalogue-stamp {
  position:static; grid-row:4; justify-self:start; padding:0; border:0; background:transparent; color:var(--b-ink);
  font:600 14px/1.3 var(--face-mono); letter-spacing:0; text-transform:none; }
#garage[data-station="workshop"] .workshop-catalogue-card:is([data-stamp="owned"],[data-stamp="fitted"]) .workshop-catalogue-stamp { color:var(--b-ink-soft); font:400 12px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-catalogue-card[data-stamp="issue"] .workshop-catalogue-stamp { color:var(--b-ink-soft); font-weight:400; }

/* The decision strip's records: the passport and the service plate on the paper docket's own tokens. */
#garage[data-station="workshop"] .workshop-inspection-detail :is(.workshop-development-identity small,.workshop-development-mark small,
  .workshop-development-tune-label,.workshop-service-heading span,.workshop-service-body span,.workshop-service-fact small) {
  color:var(--b-ink-soft); font:400 12px/1.3 var(--face-body); letter-spacing:0; text-transform:none; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-identity strong { display:none; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-odometer {
  display:flex; align-items:baseline; gap:8px; padding:0; border:0; background:transparent; color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-odometer strong { color:var(--b-ink); font:600 15px/1.2 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-odometer span {
  padding:0; border:0; color:var(--b-ink); font:400 13px/1.2 var(--face-body); letter-spacing:0; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-rail {
  height:4px; margin:4px 0 0; border:0; border-radius:0; background:var(--b-seg); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-fill { background:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-tune {
  display:flex; align-items:center; gap:10px; margin:6px 0 0; padding:0; border:0; background:transparent; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-tune-detents { flex:1 1 auto; display:flex; gap:3px; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-tune-detent { flex:1; height:4px; background:var(--b-seg); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-tune-detent[data-punched="true"] { background:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-tune-count { color:var(--b-ink); font:600 13px/1.2 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-routes {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 20px; margin:6px 0 0; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-route {
  display:grid; gap:3px; padding:6px 0 0; border:0; border-top:1px solid var(--b-line); background:transparent; color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-route-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-route-head strong { color:var(--b-ink); font:600 14px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-stamp {
  padding:1px 6px; border:1px solid var(--b-ink-soft); color:var(--b-ink); font:500 12px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-route.ready .workshop-development-stamp {
  border-color:var(--b-ink); background:var(--b-ink); color:var(--b-paper); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-requirements {
  display:flex; flex-wrap:wrap; gap:2px 16px; margin:0; padding:0; border:0; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-mark {
  display:flex; align-items:baseline; gap:6px; padding:0; border:0; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-mark strong { color:var(--b-ink); font:500 13px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-effects { display:flex; flex-wrap:wrap; gap:0 16px; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-effects .workshop-compare-pill {
  display:flex; align-items:center; gap:6px; min-height:0; padding:0; font-size:13px; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-effects .workshop-compare-meter { display:none; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-rule {
  margin:0; color:var(--b-ink-soft); font:400 12px/1.35 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-service-plate {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin:0; padding:0; border:0; background:transparent; }
#garage[data-station="workshop"] .workshop-inspection-detail :is(.workshop-service-heading,.workshop-service-body,.workshop-service-facts,.workshop-service-fact) {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin:0; padding:0; border:0; background:transparent; }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-service-facts { gap:2px 14px; }
#garage[data-station="workshop"] .workshop-inspection-detail :is(.workshop-service-heading strong,.workshop-service-body strong,.workshop-service-fact strong) {
  color:var(--b-ink); font:500 13px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-inspection-detail .workshop-inspection-records {
  display:grid; gap:8px; margin:0; padding:8px 0 0; border-top:1px solid var(--b-line); }

@media (min-width:1101px) {
  #garage[data-station="workshop"] { --ws-rail:176px; --ws-list:clamp(310px,25vw,360px); }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-shelf { overflow-y:auto; }
  /* The bench gives its paper decision enough room; the authored scene takes the remaining height. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { height:auto; min-height:var(--ws-h); grid-template-rows:clamp(240px,calc(100svh - 480px),420px) auto; overflow:visible; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { max-height:none; overflow:visible;
    padding:10px 20px 12px; gap:8px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision { grid-template-columns:minmax(0,1fr) 236px;
    column-gap:24px; row-gap:6px; padding-top:8px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-inspection-actions { gap:6px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action,
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action.primary { min-height:44px; padding:8px 12px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action.workshop-tune-action { min-height:44px; padding:6px 12px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision > .workshop-test-run { min-height:44px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run-go { min-height:42px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-test-run svg { height:42px; }
  /* Passport left, service plate right. */
  #garage[data-station="workshop"] .workshop-inspection-detail .workshop-inspection-records:has(> .workshop-service-plate):has(> .workshop-development-passport) {
    grid-template-columns:minmax(0,1fr) minmax(0,236px); column-gap:24px; align-items:start; }
  #garage[data-station="workshop"] .workshop-inspection-detail .workshop-service-plate { flex-direction:column; align-items:flex-start; }
  /* The catalogue takes the drawers' and the list's columns; it is the one list that scrolls (63 parts). */
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] {
    grid-template-columns:calc(var(--ws-rail) + var(--ws-list)) minmax(0,1fr); }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] > .workshop-catalogue { height:var(--ws-h); overflow-y:auto;
    box-sizing:border-box; }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] .workshop-catalogue-team-head { position:sticky; top:0; z-index:1; }
  /* The header rides the scene's top-right corner beside the Assembled/Loose switch; on a narrow desktop it wraps
     under itself instead of running into the switch. */
  #garage[data-station="workshop"] .workshop-physical-head { flex-wrap:wrap; justify-content:space-between;
    max-width:none; }
  #garage[data-station="workshop"] .workshop-physical-heading { flex-wrap:wrap; justify-content:flex-end; gap:8px; }
  #garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all { margin:0; }
}

/* Narrow desktop and tablet landscape (1001-1100px; judge 2026-10-12 at 1024x768): the same two layouts as a wide
   desktop. The room keeps its three columns (160 / 300 / bench); the bench takes the height the whole decision needs and
   the room grows past one screen rather than scrolling the passport inside a 300px band. The catalogue takes the
   drawers' and the list's 460px with the bench beside it; contain:size keeps the 63 cards out of the row's height, so
   the sheet is as tall as the bench and scrolls on its own. */
@media (min-width:1001px) and (max-width:1100px) {
  #garage[data-station="workshop"] { --ws-rail:176px; --ws-list:300px; --ws-h:max(480px, calc(100vh - 190px)); }
  /* A 468px decision: the 88/120/32 bar row was 240px in a 224px column, so the +5 ran under Fit and Test run. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-decision { grid-template-columns:minmax(0,1fr) 200px;
    column-gap:20px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-pill { grid-template-columns:80px minmax(0,1fr) 28px;
    column-gap:10px; }
  #garage[data-station="workshop"] .workshop-parts-room,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail,
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf,
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { height:auto; min-height:var(--ws-h); }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection { grid-template-rows:minmax(220px,1fr) auto; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { max-height:none; overflow:visible; }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] {
    grid-template-columns:calc(var(--ws-rail) + var(--ws-list)) minmax(0,1fr); grid-template-areas:none; }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] > .workshop-catalogue { grid-area:auto;
    align-self:stretch; height:auto; min-height:var(--ws-h); contain:size; overflow-y:auto; box-sizing:border-box; }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] .workshop-catalogue-team-head { position:sticky; top:0; z-index:1; }
}
/* Tablet (701-1000px): the room is drawers and list over the bench, so the catalogue view is the bench over the whole
   sheet, both full width (the sheet had been auto-placed into the 140px drawer column). */
@media (min-width:701px) and (max-width:1000px) {
  /* Full-width preview and decision, reached by selecting a part above or below the viewport. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
    grid-template-columns:minmax(0,1fr); grid-template-rows:300px auto; height:auto; min-height:0; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* The family's grid is two rows of tiles at most; the shelf's old 520px floor left the bench below the fold. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf { min-height:0; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] { background:var(--ws-paper); }
  /* 140px ran "Powertrain" into its 4/15. */
  #garage[data-station="workshop"] .workshop-parts-room:not([data-view="catalogue"]) { grid-template-columns:176px minmax(0,1fr); }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] { grid-template-columns:minmax(0,1fr);
    grid-template-areas:"bench" "catalogue"; height:auto; }
  #garage[data-station="workshop"] .workshop-parts-room[data-view="catalogue"] > .workshop-catalogue { grid-area:catalogue;
    height:auto; overflow:visible; }
}
/* Below the docked desktop the Assembled car / Loose part switch heads the decision, straight under the car it turns,
   instead of trailing the test run (and, on a phone, floating over the family chips). */
@media (max-width:1000px) {
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail > .workshop-stage-switch { order:-1; }
}
/* The way back to the sheet after a pick scrolled up to the car (stacked layouts only; slot-car-workshop.js pick). */
#garage[data-station="workshop"] .workshop-catalogue-return { justify-self:start; min-height:44px; padding:0; border:0;
  background:transparent; color:var(--b-ink); font:500 15px/1.3 var(--face-body); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer; }

@media (max-width:700px) {
  /* Phone: the header controls, the car, its decision, then the families and the grid. A pick brings the car back. */
  #garage[data-station="workshop"] .workshop-physical-head { order:0; flex-wrap:wrap; justify-content:flex-start; gap:8px;
    padding:10px 16px; }
  #garage[data-station="workshop"] .workshop-physical-heading { display:contents; }
  #garage[data-station="workshop"] .workshop-physical-head .workshop-switch { order:0; }
  #garage[data-station="workshop"] .workshop-physical-head .workshop-livery-door { order:1; margin-left:auto; }
  #garage[data-station="workshop"] .workshop-physical-head .workshop-action.workshop-repair-all { order:2; flex:1 1 100%; margin:0; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { order:1; height:200px; min-height:200px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail { order:2; padding:10px 16px 14px; gap:8px; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail { order:3; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall { order:4; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-catalogue { order:4; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions { display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action { width:auto; min-height:44px; padding:8px 10px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-actions .workshop-action.workshop-tune-action { grid-column:1 / -1; }
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    grid-template-columns:repeat(2,minmax(0,1fr)); }
  #garage[data-station="workshop"] .workshop-catalogue-team { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-part-silhouettes { display:flex; }
  /* The decision on a phone: tighter type and bar rows, the two evolution routes side by side. */
  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object { height:240px; min-height:240px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading h2 { margin:0; font:600 18px/1.25 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading :is(.workshop-part-summary,.workshop-part-loan) {
    margin:2px 0 0; font:400 13px/1.35 var(--face-body); }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading .workshop-inspection-condition { margin:2px 0 0; font-size:13px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading { padding:0 0 6px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison { gap:0; padding:0 0 6px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison .workshop-compare-pill {
    min-height:22px; padding:0; grid-template-columns:84px minmax(0,1fr) 28px; column-gap:10px; }
  #garage[data-station="workshop"] .workshop-parts-room .workshop-lap-delta strong { font-size:16px; }
  #garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-routes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; }
  #garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-effects { gap:0 10px; }
  #garage[data-station="workshop"] .workshop-inspection-detail .workshop-development-requirements { gap:0 10px; }
}


/* The legacy layer marks a few rules !important, and an important rule outside a layer loses to any layered one.
   The B overrides of those rules therefore sit in the same layer, after it. */
@layer motorworks-legacy {
  @media (min-width:1001px) {
    #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading { display:flex !important; }
  }
}

/* Workshop part as an RPG item (Sean 2026-10-17): the card on the left, the actions on the right. The name carries its
   grade's colour; bonus and penalty lines are the only green and red. */
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,240px); gap:12px 28px; align-items:start; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] > .workshop-item { grid-column:1; grid-row:1; min-width:0; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] > .workshop-inspection-decision {
  grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] > :not(.workshop-item):not(.workshop-inspection-decision) { grid-column:1 / -1; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item-head { display:block; margin:0; padding:0; border:0; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item-head h2 { margin:0; font:700 28px/1.15 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item[data-grade="1"] .workshop-item-head h2 { color:#2f7a3c; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item[data-grade="2"] .workshop-item-head h2 { color:#285f9f; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item[data-grade="3"] .workshop-item-head h2 { color:#6c3c9e; }
#garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] .workshop-item[data-grade="4"] .workshop-item-head h2 { color:#9a6a0e; }
#garage[data-station="workshop"] .workshop-item-type { margin:4px 0 0; color:var(--b-ink-soft); font:400 13px/1.4 var(--face-body); }
#garage[data-station="workshop"] .workshop-item-stats { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; }
#garage[data-station="workshop"] .workshop-item-stats li { font:600 18px/1.3 var(--face-body); color:var(--b-ink); }
#garage[data-station="workshop"] .workshop-item-stats li.gain { color:var(--b-mint); }
#garage[data-station="workshop"] .workshop-item-stats li.loss,
#garage[data-station="workshop"] .workshop-item-stats li.warning { color:var(--ws-loss,#a8231c); }
#garage[data-station="workshop"] .workshop-item-stats li.lap { font-size:14px; font-weight:500; }
#garage[data-station="workshop"] .workshop-item-stats li.even { color:var(--b-ink-soft); font-weight:400; font-size:14px; }
#garage[data-station="workshop"] .workshop-item-stats li[data-tick="true"] { animation:workshop-item-line 380ms ease-out var(--tick-delay,0ms) both; }
@keyframes workshop-item-line { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { #garage[data-station="workshop"] .workshop-item-stats li[data-tick="true"] { animation:none; } }
#garage[data-station="workshop"] .workshop-item-perk { margin:10px 0 0; color:var(--b-ink); font:400 14px/1.4 var(--face-body); }
#garage[data-station="workshop"] .workshop-item-perk strong { font-weight:700; }
#garage[data-station="workshop"] .workshop-item-perk em { display:block; font-style:normal; color:var(--b-ink-soft); font-size:13px; }
#garage[data-station="workshop"] .workshop-item-perk[data-status="ready"] em { color:var(--b-ink); font-weight:600; }
#garage[data-station="workshop"] .workshop-item-perk[data-status="closed"] { color:var(--b-ink-soft); }
#garage[data-station="workshop"] .workshop-item-flavour { margin:12px 0 0; color:var(--b-ink-soft); font:italic 400 14px/1.45 var(--face-body); }
#garage[data-station="workshop"] .workshop-item-foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:14px;
  color:var(--b-ink-soft); font:400 13px/1.3 var(--face-body); }
#garage[data-station="workshop"] .workshop-item-foot strong { color:var(--b-ink); font:500 13px/1.3 var(--face-mono); }
#garage[data-station="workshop"] .workshop-item-meter { position:relative; flex:0 0 120px; height:6px; background:var(--b-seg,#cfc3ad); }
#garage[data-station="workshop"] .workshop-item-meter i { position:absolute; inset:0 auto 0 0; background:var(--b-ink); }
#garage[data-station="workshop"] .workshop-item-meter[data-broken="true"] i { background:var(--ws-loss,#a8231c); }
#garage[data-station="workshop"] .workshop-item-xp { margin-left:auto; }
#garage[data-station="workshop"] .workshop-item-history { margin:6px 0 0; color:var(--b-ink-soft); font:400 12px/1.4 var(--face-body); }
@media (max-width:700px) {
  #garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] { grid-template-columns:minmax(0,1fr); }
  #garage[data-station="workshop"] .workshop-inspection-detail[data-layout="item"] > .workshop-inspection-decision { grid-column:1; grid-row:2; }
}

/* The Workshop radio sits at the foot of the parts drawers (slot-car-workshop.js createCategoryRail; garage.js moves
   the radio into the dock). */
#garage[data-station="workshop"] .workshop-category-rail { display:flex; flex-direction:column; }
#garage[data-station="workshop"] .workshop-radio-dock { position:relative; margin-top:auto; padding:18px 8px 14px; }
#garage[data-station="workshop"] .workshop-radio-dock:empty { display:none; }
#garage[data-station="workshop"] .workshop-radio-dock > .slot-car-radio { background:none; border:0; border-radius:0; color:#f2ead9; }
#garage[data-station="workshop"] .workshop-radio-dock > .slot-car-radio .slot-car-radio-freq { color:#d9d2c3; }
#garage[data-station="workshop"] .workshop-radio-dock > .slot-car-radio[data-on="true"] :is(.slot-car-radio-set,.slot-car-radio-window) {
  background:#eee5d2; color:#28241d; border:1px solid #28241d; }
#garage[data-station="workshop"] .workshop-radio-dock > .slot-car-radio[data-on="true"] :is(.slot-car-radio-head h2,.slot-car-radio-freq) { color:#28241d; }
/* Catalogue view: no drawers, so the radio stands on the bench's free corner below the held part; its tuner opens to
   the left over the sheet. */
#garage[data-station="workshop"] .workshop-inspection:has(> .workshop-radio-dock[data-place="bench"]) { position:relative; }
#garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] { position:absolute; right:18px; bottom:12px;
  margin:0; padding:0; width:140px; color:var(--b-ink, #28241d); z-index:6; }
#garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio { color:#28241d; }
#garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio .slot-car-radio-freq { color:#28241d; }
#garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio[data-on="true"] :is(.slot-car-radio-set,.slot-car-radio-window) {
  left:auto; right:calc(100% + 12px); }
@media (max-width:900px) {
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] { position:static; width:auto; margin:12px 0 0; }
}
/* Phone: the inspection lends its children to the Workshop's flex column and the catalogue sheet runs thousands of
   pixels, so the radio takes the drawers' place (order 2) right under the view switch, as a small set beside its dial. */
@media (max-width:700px) {
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] { order:2; margin:0; padding:8px 16px;
    border-bottom:1px solid var(--b-line); }
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio { color:#f2ead9; }
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio .slot-car-radio-freq { color:#d9d2c3; }
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] .slot-car-radio-object img { width:72px; margin:0; }
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] > .slot-car-radio[data-on="false"] {
    display:flex; align-items:center; gap:12px; }
  #garage[data-station="workshop"] .workshop-radio-dock[data-place="bench"] .slot-car-radio-object { width:auto; }
}
/* The tuner opens beside the rail, so the rail must not clip it. */
@media (min-width:901px) {
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail { overflow:visible; position:relative; z-index:6; }
}
/* The tool-chest drawers take the room the driver name used; the name stays on each station's own sheet. */
@media (max-width:1799px) { .shell:has(> #garage:not([hidden])) .topbar-context .poster-car { display:none; } }

/* The tool chest (Sean 2026-10-17, chose concept C of three): the Garage header is the red chest from the room; each
   station is a drawer with a label holder like the TOOLS/FIXINGS drawers and a chrome pull, and the open station is the
   drawer pulled out. No accent lines: the chest's own edges and the pulled drawer's shadow carry the state. */
.shell:has(> #garage:not([hidden])) > .topbar {
  background:linear-gradient(#c2271f,#a51d17); border-bottom:4px solid #6e110d; box-shadow:0 6px 14px rgba(0,0,0,.45); }
.shell:has(> #garage:not([hidden])) .topbar-context :is(.poster-car,.poster-points) { color:#fff3ea; }
.shell:has(> #garage:not([hidden])) .topbar-context :is(.poster-points small,.poster-cup) { color:#f6d6cf; }
.shell:has(> #garage:not([hidden])) .session-tools :is(.connection,.text-button) { color:#fde9e2; border-color:rgba(70,8,6,.45); }
.shell:has(> #garage:not([hidden])) .session-tools .text-button:hover { color:#fff; background:rgba(70,8,6,.25); }
#garage > .garage-directory { gap:6px; padding:8px 0; }
#garage .garage-directory a, #garage .garage-directory a:first-of-type, #garage .garage-directory a[aria-current="page"] {
  position:relative; min-height:0; height:60px; min-width:96px; padding:0 10px 12px; gap:0; align-items:center; justify-content:center;
  background:linear-gradient(#b8241d,#a01c16); color:#2a221a; border:1px solid #7d1510; border-radius:3px;
  box-shadow:inset 0 1px 0 #d9443a, inset 0 -2px 0 #7a130f; transition:transform .12s ease, box-shadow .12s ease; }
#garage.garage > .garage-directory a::after { display:block; content:''; position:absolute; left:24%; top:auto; right:24%; bottom:9px; width:auto; height:6px; margin-left:0;
  border-radius:4px; background:linear-gradient(#f4f4f4,#a3a8ac 60%,#6f7478); box-shadow:0 2px 2px rgba(0,0,0,.55); }
#garage .garage-directory a::before { display:none; }
#garage .garage-station-copy strong { display:block; padding:4px 9px; border:2px solid #9aa0a4; border-radius:2px;
  background:#efe6cf; color:#2a221a; font:700 14px/1.1 'IBM Plex Sans Condensed',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.2); white-space:nowrap; }
#garage .garage-directory a:not([aria-current="page"]):hover { background:linear-gradient(#c62b23,#a91f18); color:#2a221a; transform:translateY(2px); }
#garage .garage-directory a[aria-current="page"], #garage .garage-directory a[aria-current="page"]:hover {
  transform:translateY(7px); background:linear-gradient(#d2332a,#b4231c); color:#2a221a; z-index:2;
  box-shadow:inset 0 1px 0 #ec5d52, 0 7px 9px rgba(0,0,0,.5); }
#garage .garage-directory a[aria-current="page"] .garage-station-copy strong { background:#fffaf0; }
#garage .garage-directory a:focus-visible { outline:3px solid #fff3ea; outline-offset:2px; }
#garage .garage-directory a[aria-current="page"]:focus-visible { outline-color:#fff3ea; }
@media (prefers-reduced-motion:reduce) { #garage .garage-directory a { transition:none; } }
@media (min-width:1101px) and (max-width:1439px) {
  #garage .garage-directory a, #garage .garage-directory a:first-of-type, #garage .garage-directory a[aria-current="page"] { min-width:0; padding:0 7px 12px; }
  #garage .garage-station-copy strong { padding:4px 6px; font-size:13px; letter-spacing:.04em; }
}
@media (max-width:1100px) {
  .shell:has(> #garage:not([hidden])) > .topbar { border-bottom-width:3px; }
  #garage > .garage-directory { gap:3px; padding:5px 0; }
  #garage .garage-directory a, #garage .garage-directory a:first-of-type, #garage .garage-directory a[aria-current="page"] {
    height:44px; min-height:0; min-width:auto; padding:0 2px 9px; flex:1 1 auto; }
  #garage.garage > .garage-directory a::after { bottom:5px; left:28%; right:28%; width:auto; height:4px; margin-left:0; }
  #garage.garage > .garage-directory a { flex:1 1 auto; min-width:max-content; }
  #garage .garage-station-copy strong { padding:2px 3px; font-size:11.5px; letter-spacing:0; text-transform:none; border-width:1px; }
  #garage .garage-directory a[aria-current="page"], #garage .garage-directory a[aria-current="page"]:hover { transform:translateY(4px); }
}