@layer motorworks-legacy {
/*
 * BroTeam Motorworks club room
 *
 * One physical place across My car, Race, Workshop and Record: black enamel
 * fascia, warm scrutineering paper, litho red club ink and signal yellow only
 * for the control that is ready to act. This layer deliberately follows the
 * station modules so their mechanics stay independent of the room treatment.
 */

:root {
  --mw-paper:#eee5d0;
  --mw-paper-hi:#f7f0df;
  --mw-paper-dim:#d3c7aa;
  --mw-ink:#17120f;
  --mw-ink-soft:#5c5046;
  --mw-rule:#8c806c;
  --mw-enamel:#090b0c;
  --mw-steel:#273139;
  --mw-red:#c8102e;
  --mw-yellow:#f5c542;
}

html,
body {
  background:#bdb29a;
}

body {
  color:var(--mw-ink);
}

.shell {
  width:min(1600px,100%);
  border-inline:0;
  background:var(--mw-enamel);
  box-shadow:0 0 0 1px #756a58;
}

.topbar {
  height:58px;
  padding-inline:26px;
  border-bottom:0;
  background:var(--mw-enamel);
  color:var(--mw-paper-hi);
}

.brand-sigil {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--mw-paper-hi);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  clip-path:polygon(0 0,100% 0,100% 76%,76% 100%,0 100%);
}

.brand-copy strong {
  color:var(--mw-paper-hi);
  letter-spacing:.06em;
}

.brand-copy small,
.connection,
.text-button {
  color:var(--mw-paper-dim);
}

.topbar-context :is(.poster-car,.poster-points,.poster-points small,.poster-cup) {
  color:var(--mw-paper-hi);
}

#garage.garage:not([data-focus]) {
  min-height:calc(100vh - 58px);
  gap:0;
  padding:0 22px 22px;
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage .garage-directory {
  height:54px;
  margin-inline:-22px;
  padding:0 22px;
  gap:0;
  border-bottom:4px solid var(--mw-red);
  background:var(--mw-enamel);
}

#garage .garage-directory a {
  min-height:50px;
  padding:17px 26px 10px;
  border:0;
  border-right:1px solid #9f947e;
  border-radius:0;
  background:var(--mw-paper-dim);
  background-clip:border-box;
  color:var(--mw-ink);
  box-shadow:none;
  font-size:18px;
}

#garage .garage-directory a:first-of-type {
  border-left:1px solid #9f947e;
}

#garage .garage-directory a[aria-current="page"] {
  min-height:54px;
  padding-top:17px;
  border-top:4px solid var(--mw-paper-hi);
  background:var(--mw-red);
  color:var(--mw-paper-hi);
}

#garage .garage-directory a:focus-visible {
  outline:3px solid var(--mw-yellow);
  outline-offset:-5px;
}

/* My car: one scrutineering bay, not a viewport beside dashboard cards. */
#garage.garage:not([data-focus])[data-station="car"] {
  grid-template-columns:minmax(0,1.7fr) minmax(330px,.68fr);
  grid-template-rows:auto auto auto auto minmax(210px,1fr) auto;
  gap:0 18px;
  grid-template-areas:
    "directory directory"
    "hero status"
    "hero actions"
    "hero report"
    "hero circuit"
    "notice notice";
}

#garage:not([data-focus])[data-station="car"] .car-stage {
  height:clamp(560px,calc(100vh - 250px),660px);
  min-height:560px;
  margin-top:18px;
  overflow:hidden;
  border:2px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-paper-hi);
  /* The bay floor is a ruled paper band, not black enamel (2026-10-03, with the Workshop: "dark and shitty"). */
  box-shadow:inset 0 -112px var(--mw-paper-dim),inset 0 -114px var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .car-stage::before {
  content:"";
  position:absolute;
  inset:0 auto 112px 0;
  width:18px;
  display:block;
  background:var(--mw-red);
  pointer-events:none;
}

/* The "SCRUTINEERING / BAY 02" stencil was set at 11 px (9 px on a phone), under the 13 px floor, and said nothing
   the bay does not already show. */
#garage:not([data-focus])[data-station="car"] .car-stage::after {
  content:none;
  position:absolute;
  z-index:7;
  top:18px;
  right:20px;
  bottom:auto;
  left:auto;
  width:auto;
  height:auto;
  display:block;
  color:var(--mw-ink-soft);
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',monospace);
  letter-spacing:.12em;
}

#garage:not([data-focus])[data-station="car"] .car-3d {
  left:16%;
  right:3%;
  top:42px;
  bottom:62px;
}

#garage:not([data-focus])[data-station="car"] .stage-pocket {
  left:38px;
  top:44px;
  bottom:auto;
  width:min(330px,34%);
  gap:28px;
}

#garage:not([data-focus])[data-station="car"] .identity h1 {
  max-width:none;
  color:var(--mw-ink);
  font-size:60px;
  line-height:.84;
  text-transform:uppercase;
}

#garage:not([data-focus])[data-station="car"] .identity p {
  color:var(--mw-ink-soft);
  font-size:14px;
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts {
  padding:0;
  border:1px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head {
  min-height:40px;
  padding:0 10px;
  border-bottom:3px solid var(--mw-ink);
  border-radius:0;
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head strong,
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-socket > b {
  color:var(--mw-red);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head small {
  border-color:var(--mw-ink);
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-socket {
  min-height:40px;
  border-top:1px solid var(--mw-rule);
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-socket:hover,
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head:hover {
  background:var(--mw-paper-hi);
}

#garage:not([data-focus])[data-station="car"] .fitted-socket-identity strong {
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .fitted-socket-identity small {
  color:var(--mw-ink-soft);
}

#garage:not([data-focus])[data-station="car"] .turntable-cue {
  right:26px;
  bottom:24px;
  border:1.5px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

#garage:not([data-focus])[data-station="car"] .turntable-cue :is(span,strong,small) {
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .turntable-cue::before,
#garage:not([data-focus])[data-station="car"] .turntable-cue::after {
  color:var(--mw-red);
}

/* Signal yellow on paper was unreadable and is reserved for selection. */
#garage:not([data-focus])[data-station="car"] .status-kicker {
  color:var(--mw-red);
  font-size:13px;
}

#garage:not([data-focus])[data-station="car"] > :is(.status-strip,.actions,.race-report,.circuit-card) {
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--mw-ink);
  box-shadow:none;
}

#garage:not([data-focus])[data-station="car"] > .status-strip {
  min-height:112px;
  margin-top:18px;
  padding:16px 18px;
  border:2px solid var(--mw-ink);
  border-top:10px solid var(--mw-red);
  background:var(--mw-paper-hi);
}

#garage:not([data-focus])[data-station="car"] .status-main,
#garage:not([data-focus])[data-station="car"] .status-sub {
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .status-beacon {
  border-color:var(--mw-ink);
  background:var(--mw-paper-dim);
}

#garage:not([data-focus])[data-station="car"] > .actions {
  padding:10px 0 12px;
}

#garage:not([data-focus])[data-station="car"] .actions .primary {
  min-height:58px;
  border:2px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-yellow);
  color:var(--mw-ink);
  box-shadow:4px 4px 0 var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .recall-action,
#garage:not([data-focus])[data-station="car"] .actions > #refresh:not([hidden]) {
  border:1px solid var(--mw-ink);
  border-left:8px solid var(--mw-red);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

#garage:not([data-focus])[data-station="car"] > .race-report {
  padding:12px 16px;
  border-block:1px solid var(--mw-ink);
  background:var(--mw-red);
  color:var(--mw-paper-hi);
}

#garage:not([data-focus])[data-station="car"] > .circuit-card {
  min-height:0;
  padding:18px 18px 12px;
  border:2px solid var(--mw-ink);
  border-top:8px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .circuit-card :is(h2,.track-name,.track-gauge-head),
#garage:not([data-focus])[data-station="car"] .circuit-card .track-detail {
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .track-map-bed {
  stroke:var(--mw-paper-dim);
}

#garage:not([data-focus])[data-station="car"] .track-map {
  stroke:var(--mw-red);
}

/* My Car clarity pass: the bay is the place; race control is one order, not a dashboard stack.
   Detailed fitted parts live in Workshop and the prior result lives in Record. My Car retains one
   truthful doorway to each without rendering their ledgers a second time. */
#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts {
  border:0;
  background:transparent;
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head {
  min-height:48px;
  border:1px solid var(--mw-ink);
  background:var(--mw-paper-hi);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head strong {
  color:var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts-head small {
  border:0;
  border-left:1px solid var(--mw-rule);
  color:var(--mw-red);
}

#garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-socket,
#garage:not([data-focus])[data-station="car"] > .race-report {
  display:none !important;
}

#garage:not([data-focus])[data-station="car"] > .status-strip {
  min-height:96px;
  margin-top:18px;
  padding:14px 16px;
  border-top-width:6px;
}

#garage:not([data-focus])[data-station="car"] .status-main {
  font-size:38px;
  line-height:.92;
}

#garage:not([data-focus])[data-station="car"] > .actions {
  padding:8px 0 10px;
}

#garage:not([data-focus])[data-station="car"] .actions .primary {
  min-height:52px;
}

#garage:not([data-focus])[data-station="car"] > .circuit-card {
  display:block;
  align-self:start;
  min-height:0;
  padding:13px 16px 14px;
  border-width:1px;
  border-top:4px solid var(--mw-ink);
}

#garage:not([data-focus])[data-station="car"] .circuit-card h2 {
  margin-bottom:5px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#garage:not([data-focus])[data-station="car"] .track-name {
  font-size:28px;
  line-height:1;
}

#garage:not([data-focus])[data-station="car"] .track-detail {
  margin-top:6px;
  font-size:13px;
}

/* My car keeps the circuit to its one fact; the scrutineering card (2026-10-06) lives in Race and Workshop too. */
#garage:not([data-focus])[data-station="car"] :is(.track-weights,.circuit-layout,.track-threats) {
  display:none !important;
}

/* Desktop scrutineering order: state -> race order -> the circuit being joined -> utilities.
   The action wrapper becomes layout-transparent only at this width so recovery and stream recall can sit below the
   circuit without duplicating or moving their authoritative controls. Phone keeps its proven first-fold stack. */
@media (min-width:1001px) {
  #garage.garage:not([data-focus])[data-station="car"] {
    grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "directory directory"
      "hero status"
      "hero primary"
      "hero circuit"
      "hero recovery"
      "hero recall"
      "hero filler"
      "notice notice";
  }

  #garage:not([data-focus])[data-station="car"] > .actions {
    display:contents;
  }

  #garage:not([data-focus])[data-station="car"] > .actions > :is(#join,#leave,#drive-heat) {
    grid-area:primary;
    width:100%;
    margin:8px 0 10px;
  }

  #garage:not([data-focus])[data-station="car"] > .actions > #refresh {
    grid-area:recovery;
    width:100%;
    margin:10px 0 0;
  }

  #garage:not([data-focus])[data-station="car"] > .actions > .recall-action {
    grid-area:recall;
    width:100%;
    margin:8px 0 0;
  }
}

/* Race: the programme is the same paper and ink as the rest of the room. */
#garage:not([data-focus])[data-station="race"] {
  background:var(--mw-paper);
}

#garage.garage:not([data-focus])[data-station="race"][data-poster="true"] {
  gap:0;
  padding:0 22px 22px;
  background:var(--mw-paper);
}

/* The race poster's print is the same wherever the poster shows (2026-10-04): a car queued or gridded from another
   station sees it with data-station="car" and data-poster="true", and gated on the Race station alone it fell back to
   the unstyled dark board, its setup summary a bare block whose one-line width pushed the phone form to 826 px. */
#garage:is([data-station="race"],[data-poster="true"]) .race-poster {
  margin:0;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster {
  --paper:var(--mw-paper-hi);
  --ink:var(--mw-ink);
  --litho:var(--mw-red);
  --signal:var(--mw-yellow);
  --bench:var(--mw-enamel);
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-sheet {
  border:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-sheet::before {
  opacity:.14;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-field {
  background:var(--mw-red);
  box-shadow:none;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-venue .letters {
  fill:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) :is(.poster-heat,.poster-lights,.poster-next) {
  color:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) :is(.poster-row,.poster-bay,.poster-foot) {
  border-color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-slip {
  border-color:var(--mw-ink);
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-entry,
#garage:is([data-station="race"],[data-poster="true"]) .poster-grid {
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="false"] > :is(.poster-row,.poster-order,.poster-hold) {
  display:none !important;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-summary {
  grid-column:1 / -1 !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"ticket action" "orders action";
  align-items:center;
  gap:5px 24px;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  min-height:74px;
  margin:3px 0 0;
  padding:11px 14px;
  border:2px solid var(--mw-ink);
  border-left:9px solid var(--mw-yellow);
  border-radius:0;
  background:var(--mw-paper);
  color:var(--mw-ink);
  text-align:left;
  box-shadow:none;
  cursor:pointer;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-summary:hover,
#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-summary:focus-visible {
  background:#fff9eb;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-ticket {
  grid-area:ticket;
  font:700 18px/1.15 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-orders {
  grid-area:orders;
  overflow-wrap:anywhere;
  color:var(--mw-ink-soft);
  font:400 14px/1.4 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  white-space:normal;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-setup-action {
  grid-area:action;
  padding:9px 11px;
  border:1px solid var(--mw-ink);
  background:var(--mw-enamel);
  color:var(--mw-paper-hi);
  font:700 13px/1 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  text-transform:uppercase;
  letter-spacing:.04em;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="true"] .poster-setup-summary {
  grid-template-columns:1fr;
  grid-template-areas:"action";
  justify-items:end;
  min-height:36px;
  margin-top:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--mw-rule);
  background:transparent;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="true"] :is(.poster-setup-ticket,.poster-setup-orders) {
  display:none;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="true"] .poster-setup-action {
  min-height:34px;
  display:flex;
  align-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:var(--mw-ink);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-transform:none;
  letter-spacing:0;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-opt:hover:not([aria-disabled="true"]):not([aria-checked="true"]) {
  background:var(--mw-paper-dim);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lap .bed {
  stroke:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lap .dash,
#garage:is([data-station="race"],[data-poster="true"]) .poster-lap .cut {
  stroke:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lap :is(.tick,.leader) {
  stroke:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lap text {
  fill:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-tile {
  background:none;
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-tile > span {
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-bay i {
  background:var(--mw-enamel);
  color:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-bay[data-empty="true"] i {
  border-color:var(--mw-ink);
  background:transparent;
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-bay[data-mine="true"] i {
  background:var(--mw-red);
  color:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-foot {
  border-top:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-call {
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lights .poster-watch {
  border-color:var(--mw-paper-hi);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-lights .poster-watch:hover,
#garage:is([data-station="race"],[data-poster="true"]) .poster-lights .poster-watch:focus-visible {
  border-color:var(--mw-yellow);
  background:var(--mw-yellow);
  color:var(--mw-ink);
}

/* Retry connection in the legend when the poster has no context strip (slot-car-race-poster.js, 2026-10-05). */
#garage:is([data-station="race"],[data-poster="true"]) .poster-legend .poster-refresh {
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-legend .poster-refresh:hover {
  background:var(--mw-ink);
  color:var(--mw-paper-hi);
}

#garage:is([data-station="race"],[data-poster="true"]) .poster-legend kbd {
  border-color:var(--mw-ink);
  color:var(--mw-ink);
}

/* Workshop: a paper parts catalogue on the same inspection counter. */
#garage:not([data-focus])[data-station="workshop"] {
  background:var(--mw-paper);
  --text-strong:var(--mw-ink);
  --text-soft:var(--mw-ink-soft);
  --text-signal:var(--mw-red);
  --text-gain:#1f7a57;
  --text-loss:var(--mw-red);
  --garage-paper:var(--mw-ink);
  --garage-dim:var(--mw-ink-soft);
}

/* The race strip in the Workshop. It shows only while #open-garage offers the way back to a heat (garage.html,
   ":has(#open-garage:not([hidden]))"), e.g. a player who opened the Workshop at the results. The paper variables
   above turned its copy ink while garage.html kept its dark ground (#10181e) and a 118-134 px floor, so the result
   read near-black on near-black in a tall empty band above the parts room (Sean's screenshot, 2026-10-07). It is now
   a compact paper placard like My car's: the result line and the Race view button stay; the Race Points pocket goes,
   as on My car, because the persistent top bar (#topbar-race-points) already shows the balance on every station. */
#garage:not([data-focus])[data-station="workshop"] > .status-strip {
  min-height:0;
  margin:0;
  padding:10px 14px;
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

/* The frame needs the extra :not(#works-bench): garage.html frames every non-My-car station with
   `> :is(.status-strip, ..., #works-bench, ...)`, and :is() takes its most specific argument, an ID, so a class-level
   border here lost (headless shot 2026-10-07: thin grey frame, no red rule). */
#garage:not([data-focus])[data-station="workshop"] > .status-strip:not(#works-bench) {
  border:2px solid var(--mw-ink);
  border-left:9px solid var(--mw-red);
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip .status-copy {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 14px;
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip .status-kicker {
  color:var(--mw-red);
  font-size:13px;
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip .status-main {
  color:var(--mw-ink);
  font-size:24px;
  line-height:1.05;
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip .status-sub {
  flex-basis:100%;
  margin:0;
  color:var(--mw-ink-soft);
  font-size:14px;
  line-height:1.35;
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip .status-beacon {
  border-color:var(--mw-ink);
  background:var(--mw-paper-dim);
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip > .rp-pocket { display:none; }

/* The Race view button had the same fault: a dark .action ground with its text from --text-strong, now ink. */
#garage:not([data-focus])[data-station="workshop"] > .status-strip #open-garage {
  min-height:40px;
  margin:0;
  padding:0 14px;
  border:2px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-ink);
  color:var(--mw-paper-hi);
}

#garage:not([data-focus])[data-station="workshop"] > .status-strip #open-garage:hover:not(:disabled),
#garage:not([data-focus])[data-station="workshop"] > .status-strip #open-garage:focus-visible {
  background:var(--mw-red);
  border-color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-development-odometer {
  border:1.5px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-development-odometer strong {
  color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-development-odometer span {
  border-left-color:var(--mw-ink);
  font-size:13px;
}

#garage[data-station="workshop"] .workshop-development-rail {
  border-color:var(--mw-ink);
  background:var(--mw-paper-dim);
}

#garage[data-station="workshop"] .workshop-development-fill {
  background:var(--mw-ink);
}

#garage[data-station="workshop"] #works-bench.workshop-bench {
  margin-top:18px;
  overflow:visible;
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-physical {
  gap:14px;
  padding:0;
}

#garage[data-station="workshop"] .workshop-physical-head {
  min-height:66px;
  padding:10px 16px;
  border:2px solid var(--mw-ink);
  border-top:9px solid var(--mw-red);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-action {
  min-height:44px;
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-action:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-action:focus-visible {
  background:var(--mw-ink);
  color:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-action.primary {
  border-color:var(--mw-ink);
  background:var(--mw-yellow);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] :is(.workshop-kicker,.workshop-inspection-eyebrow) {
  color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-livery-door {
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-livery-arrow {
  color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-inspection {
  grid-template-columns:minmax(390px,.9fr) minmax(0,1.35fr);
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-parts-wall-object {
  min-height:360px;
  border-right:2px solid var(--mw-ink);
  background-color:var(--mw-paper);
  background-image:
    linear-gradient(rgba(23,18,15,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,18,15,.09) 1px,transparent 1px);
  background-size:24px 24px;
  background-position:-1px -1px;
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-blessed-plate {
  position:absolute;
  z-index:4;
  top:18px;
  left:18px;
  padding:6px 10px 5px;
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-red);
  box-shadow:3px 3px 0 var(--mw-yellow);
  font:800 14px/1 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  letter-spacing:.16em;
  text-transform:uppercase;
  transform:rotate(-2deg);
  pointer-events:none;
}

#garage[data-station="workshop"] .workshop-turn-cue,
#garage[data-station="workshop"] .slot-car-parts-status {
  border:1.5px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

/* A small paper caption, not a full-width dashboard strip. In the inspection
   sheet its duplicate remains screen-reader-only (the heading owns that text). */
#garage[data-station="workshop"] .slot-car-parts-status {
  border:0;
}

#garage[data-station="workshop"] .workshop-turn-cue span {
  color:var(--mw-ink-soft);
}

/* The Part / On my car switch owns the top-right corner; the cue sat under it. */
#garage[data-station="workshop"] .workshop-turn-cue {
  right:auto;
  left:14px;
}

/* The sheet's own grid replaces the pegboard dots; the part rests on one ruled ink line, not a dark shelf. */
#garage[data-station="workshop"] .workshop-parts-wall-object::before {
  content:none;
}

#garage[data-station="workshop"] .workshop-parts-wall-object::after {
  height:0;
  border:0;
  border-top:2px solid var(--mw-ink);
  background:none;
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-inspection-detail {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  justify-content:stretch;
  gap:16px;
  padding:20px 22px;
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-inspection-detail:has(.workshop-inspection-records) {
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:18px 24px;
}

#garage[data-station="workshop"] .workshop-inspection-heading {
  display:grid;
  gap:4px;
  grid-column:1 / -1;
  padding:0 92px 14px 0;
  border-bottom:2px solid var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-inspection-heading h2 {
  margin-top:4px;
  font-size:30px;
  line-height:1;
}

#garage[data-station="workshop"] .workshop-part-summary {
  max-width:66ch;
  margin:4px 0 0;
  color:var(--mw-ink);
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere;
}

#garage[data-station="workshop"] .workshop-inspection-heading .workshop-inspection-condition {
  margin-top:7px;
}

#garage[data-station="workshop"] .workshop-inspection-decision {
  min-width:0;
  display:grid;
  align-content:start;
  gap:12px;
}

#garage[data-station="workshop"] .workshop-inspection-records {
  min-width:0;
  display:grid;
  align-content:start;
  gap:18px;
  padding-left:20px;
  border-left:1px solid var(--mw-rule);
}

#garage[data-station="workshop"] .workshop-inspection-detail h2,
#garage[data-station="workshop"] .workshop-service-body strong,
#garage[data-station="workshop"] .workshop-service-fact strong {
  color:var(--mw-ink);
}

#garage[data-station="workshop"] :is(.workshop-inspection-condition,.workshop-comparison-title,.workshop-compare-neutral),
#garage[data-station="workshop"] :is(.workshop-service-heading span,.workshop-service-body span,.workshop-service-fact small) {
  color:var(--mw-ink-soft);
}

#garage[data-station="workshop"] .workshop-service-heading strong {
  color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-service-plate {
  grid-template-columns:minmax(0,1fr) auto;
  padding:14px 0 0;
  border:0;
  border-top:1px solid var(--mw-rule);
  background:transparent;
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-development-passport {
  padding:0;
  border:0;
  background:transparent;
  color:var(--mw-ink);
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-development-passport::before {
  display:none;
}

#garage[data-station="workshop"] .workshop-development-route {
  padding:12px 0 0;
  border:0;
  border-top:1px solid var(--mw-rule);
  background:transparent;
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-development-route:is(.ready,.selected,.closed) {
  border-color:var(--mw-rule);
  background:transparent;
  color:var(--mw-ink);
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-development-requirements {
  border-color:var(--mw-rule);
}

#garage[data-station="workshop"] .workshop-development-mark + .workshop-development-mark {
  border-color:var(--mw-rule);
}

#garage[data-station="workshop"] .workshop-inspection-comparison {
  padding:0 0 12px;
  border-block:0;
  border-bottom:1px solid var(--mw-rule);
}

#garage[data-station="workshop"] .workshop-test-run {
  border-color:var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-test-run-go {
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:inset 5px 0 var(--mw-red);
}

#garage[data-station="workshop"] .workshop-test-run-go:hover,
#garage[data-station="workshop"] .workshop-test-run-go:focus-visible {
  background:var(--mw-ink);
  color:var(--mw-paper-hi);
  outline-color:var(--mw-yellow);
}

#garage[data-station="workshop"] .workshop-test-run-result {
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .slot-car-parts-fallback {
  display:grid;
  min-height:100%;
  place-items:center;
  color:var(--mw-paper-hi);
  background:rgba(7,11,14,.9);
  text-align:center;
}

#garage[data-station="workshop"] .slot-car-radio {
  border:2px solid var(--mw-ink);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .slot-car-radio-head h2 {
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .slot-car-radio[data-on="false"] .slot-car-radio-freq,
#garage[data-station="workshop"] .slot-car-radio-scale {
  color:var(--mw-ink-soft);
}

#garage[data-station="workshop"] .workshop-wall {
  border-color:var(--mw-ink);
  background:var(--mw-paper-hi);
}

/* Family drawers as a catalogue's printed thumb index: paper tabs, ink type, red figure numbers. Yellow marks
   only the open family (the poster's rule: signal yellow is selection, nothing else). 2026-10-03, Sean on the dark
   enamel version: "kind of dark and shitty looking". */
#garage[data-station="workshop"] .workshop-category-rail {
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  gap:0;
  overflow:hidden;
  border:0;
  border-right:2px solid var(--mw-ink);
  background:var(--mw-paper);
}

#garage[data-station="workshop"] .workshop-category-rail-head {
  min-height:46px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-bottom:2px solid var(--mw-ink);
  background:var(--mw-paper);
  color:var(--mw-ink-soft);
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
  letter-spacing:0;
  text-transform:none;
}

#garage[data-station="workshop"] .workshop-category-group {
  min-width:0;
  border:0;
  border-bottom:1px solid var(--mw-rule);
  background:var(--mw-paper);
}

#garage[data-station="workshop"] .workshop-category-group:last-child { border-bottom:0; }

#garage[data-station="workshop"] .workshop-category-group-tab {
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 7px;
  padding:8px 10px;
  border:0;
  border-radius:0;
  background:var(--mw-paper);
  color:var(--mw-ink);
  text-align:left;
  cursor:pointer;
}

#garage[data-station="workshop"] .workshop-category-group-tab:hover,
#garage[data-station="workshop"] .workshop-category-group-tab:focus-visible {
  outline:0;
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-category-group[data-open="true"] > .workshop-category-group-tab {
  box-shadow:inset 5px 0 var(--mw-red);
}

#garage[data-station="workshop"] .workshop-category-group-number,
#garage[data-station="workshop"] .workshop-category-group-count {
  font:600 12px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
}

#garage[data-station="workshop"] .workshop-category-group-number { color:var(--mw-red); }
#garage[data-station="workshop"] .workshop-category-group-tab > strong {
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  font:800 17px/1 var(--face-display,'Big Shoulders Display','Arial Narrow',sans-serif);
  text-overflow:ellipsis;
  white-space:nowrap;
}
#garage[data-station="workshop"] .workshop-category-group-count {
  grid-column:3;
  grid-row:1;
}
#garage[data-station="workshop"] .workshop-category-group-count { color:var(--mw-ink-soft); }
#garage[data-station="workshop"] .workshop-category-group-mark {
  grid-column:2 / 4;
  color:var(--mw-ink-soft);
  font:600 11px/1 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
}

#garage[data-station="workshop"] .workshop-category-families { display:none; border-top:1px solid var(--mw-rule); }
#garage[data-station="workshop"] .workshop-category-group[data-open="true"] .workshop-category-families {
  display:block;
}

#garage[data-station="workshop"] .workshop-category-tab {
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:60px;
  padding:8px 9px 8px 15px;
  border:0;
  border-bottom:1px solid var(--mw-rule);
  border-radius:0;
  background:var(--mw-paper);
  color:var(--mw-ink);
  text-align:left;
  box-shadow:none;
  cursor:pointer;
}

#garage[data-station="workshop"] .workshop-category-tab > strong {
  grid-column:2;
  grid-row:1;
}

#garage[data-station="workshop"] .workshop-category-zone {
  grid-column:2 / 4;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  color:var(--mw-ink-soft);
  font:600 12px/1.15 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  text-overflow:ellipsis;
  white-space:nowrap;
}

#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] .workshop-category-zone {
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-category-tab:last-child {
  border-bottom:0;
}

#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] {
  background:var(--mw-yellow);
  color:var(--mw-ink);
  box-shadow:inset 6px 0 var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"]::after {
  content:"";
  position:absolute;
  z-index:3;
  top:50%;
  right:-14px;
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:13px solid var(--mw-ink);
  transform:translateY(-50%);
}

#garage[data-station="workshop"] .workshop-category-tab:hover:not([aria-pressed="true"]) {
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-category-tab:focus-visible {
  outline:2px solid var(--mw-ink);
  outline-offset:-5px;
}

#garage[data-station="workshop"] .workshop-category-number,
#garage[data-station="workshop"] .workshop-category-count {
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
}

#garage[data-station="workshop"] .workshop-category-number {
  color:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] .workshop-category-number,
#garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"] .workshop-category-count {
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-category-count {
  padding:3px 0;
  border:0;
  color:var(--mw-ink-soft);
}

#garage[data-station="workshop"] .workshop-category-tab strong {
  overflow:hidden;
  font-size:17px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] {
  display:block;
  overflow:hidden;
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-shelf {
  border-color:var(--mw-rule);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-shelf {
  border:0;
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-shelf-head {
  border-color:var(--mw-rule);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-shelf-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:12px;
  min-height:46px;
  padding:10px 14px;
  border:0;
  border-bottom:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-shelf-title {
  font:700 32px/1 var(--face-display,'Big Shoulders Display','Arial Narrow',sans-serif);
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-shelf-head strong {
  font-size:14px;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-rack {
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0;
  min-height:194px;
  padding:0;
  background:var(--mw-paper-hi);
}

/* A part is a numbered catalogue figure: the object drawn large on the page, its name in ink under it, its price or
   state as a stamp. Cells are divided by hairlines, the way a printed parts list is. */
#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:minmax(110px,1fr) auto auto;
  align-items:center;
  gap:6px;
  min-height:158px;
  padding:30px 12px 14px;
  border:0;
  border-right:1px solid var(--mw-rule);
  border-bottom:1px solid var(--mw-rule);
  border-radius:0;
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
  text-align:center;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part::before {
  content:"No. " attr(data-wall-index);
  position:absolute;
  top:10px;
  left:12px;
  color:var(--mw-red);
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part:hover {
  background:#fffaf0;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part[data-active="true"] {
  background:var(--mw-yellow);
  box-shadow:inset 0 0 0 2px var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part:focus-visible {
  outline:2px solid var(--mw-ink);
  outline-offset:-6px;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-bin-object[data-thumb-ready="true"] {
  grid-column:1;
  grid-row:1;
  width:min(220px,100%);
  height:120px;
  margin:auto;
  filter:drop-shadow(0 9px 6px rgba(23,18,15,.28));
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-identity {
  grid-column:1;
  grid-row:2;
  min-width:0;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-name {
  display:block;
  overflow:hidden;
  color:var(--mw-ink);
  font:700 18px/1.1 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  text-overflow:ellipsis;
  white-space:nowrap;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-badge {
  grid-column:1;
  grid-row:3;
  justify-self:center;
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-part-blessed {
  display:inline-block;
  margin-right:7px;
  padding:2px 5px;
  border:1.5px solid var(--mw-red);
  background:var(--mw-paper-hi);
  color:var(--mw-red);
  font-size:13px;
  letter-spacing:.11em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}

/* What is still to find takes the next figure's place as a blank outline, the way a catalogue leaves an empty plate,
   instead of a dark box laid over the figures. */
#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-hook {
  grid-column:auto;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  place-items:center;
  min-height:0;
  height:auto;
  margin:16px;
  cursor:pointer;
  padding:14px 16px;
  border:1.5px dashed var(--mw-rule);
  background:transparent;
  color:var(--mw-ink-soft);
  font:600 13px/1.3 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
  letter-spacing:0;
  text-align:center;
  text-transform:none;
}

#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-hook-peg {
  display:none;
}

/* One physical parts counter: stacked family drawers open the adjacent shelf, and that shelf feeds
   the selected object into the attached comparison bench. */
#garage[data-station="workshop"] .workshop-parts-room {
  display:grid;
  grid-template-columns:clamp(220px,16vw,250px) clamp(350px,28vw,440px) minmax(360px,1fr);
  min-width:0;
  overflow:hidden;
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] {
  min-width:0;
  border:0;
  border-right:2px solid var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-shelf {
  min-height:570px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-head {
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "label browse"
    "fitted browse";
  align-items:center;
  gap:4px 14px;
  min-height:72px;
  padding:9px 12px 9px 16px;
  border-bottom:2px solid var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-shelf-room-label {
  grid-area:label;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:10px;
}

#garage[data-station="workshop"] .workshop-shelf-room-label > span,
#garage[data-station="workshop"] .workshop-shelf-fitted {
  color:var(--mw-ink-soft);
  font:600 13px/1.15 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
}

#garage[data-station="workshop"] .workshop-shelf-fitted {
  grid-area:fitted;
  justify-self:start;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  color:var(--mw-ink);
  text-align:left;
}

#garage[data-station="workshop"] .workshop-wall-browse {
  grid-area:browse;
  display:grid;
  grid-template-columns:44px auto 44px;
  align-items:center;
  border:2px solid var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-wall-step {
  width:44px;
  min-height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--mw-ink);
  font:700 28px/1 var(--face-display,'Big Shoulders Display','Arial Narrow',sans-serif);
}

#garage[data-station="workshop"] .workshop-wall-step:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-wall-step:focus-visible {
  outline:0;
  background:var(--mw-ink);
  color:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-wall-step:disabled {
  color:var(--mw-paper-dim);
}

#garage[data-station="workshop"] .workshop-wall-position {
  min-width:46px;
  padding:0 7px;
  color:var(--mw-ink);
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
  text-align:center;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-rack {
  position:relative;
  min-height:506px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  grid-auto-rows:minmax(240px,auto);
  align-content:start;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-category-tab {
  min-height:60px;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part {
  min-height:240px;
  grid-template-rows:minmax(160px,1fr) auto auto;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-bin-object[data-thumb-ready="true"] {
  grid-column:1;
  grid-row:1;
  width:min(250px,100%);
  height:160px;
  margin:auto;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-bin-object img {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.12);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-identity {
  grid-column:1;
  grid-row:2;
  justify-self:center;
  max-width:96%;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-floor-note {
  display:block;
  margin-top:4px;
  color:var(--mw-ink-soft);
  font:600 13px/1.2 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-badge {
  grid-column:1;
  grid-row:3;
  justify-self:center;
  min-height:20px;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-hook {
  grid-row:auto;
  position:static;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-part-hook::before {
  content:none;
}

#garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
  min-width:0;
  min-height:570px;
  grid-template-columns:1fr;
  align-content:start;
  border:0;
  background:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object {
  min-height:250px;
  border:0;
  border-bottom:2px solid var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail,
#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail:has(.workshop-inspection-records) {
  grid-template-columns:1fr;
  gap:12px;
  padding:16px 18px 18px;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-heading {
  padding:0 86px 10px 0;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-records {
  padding:12px 0 0;
  border-left:0;
  border-top:1px solid var(--mw-rule);
}

/* Catalogue polish (Sean 2026-10-04 "it still seems like it needs work"). The bench was as tall as the part's whole
   record, so the drawers and shelf beside it ran on as 700 px of empty paper; now it is one screen tall and its detail
   scrolls under a fixed part view, the way a game's inspect panel does. */
@media (min-width:1001px) {
  #garage[data-station="workshop"] .workshop-parts-room {
    height:620px;
    align-items:stretch;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail {
    height:620px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--mw-ink-soft) var(--mw-paper);
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail .workshop-category-rail-head {
    position:sticky;
    z-index:4;
    top:0;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf {
    height:620px;
    min-height:0;
  }

  /* Keep the opened family as a real vertical parts list. The base physical-wall selectors include
     `.workshop-wall[data-category-wall]`; matching that specificity here is deliberate, otherwise the
     two-up catalogue figures win the cascade and their 185 px contents overflow a 158 px card. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    min-height:0;
    grid-template-columns:1fr;
    grid-auto-rows:minmax(154px,1fr);
    align-content:stretch;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--mw-ink-soft) transparent;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part {
    min-height:154px;
    grid-template-columns:126px minmax(0,1fr);
    grid-template-rows:1fr auto;
    gap:4px 12px;
    padding:25px 14px 12px;
    border-right:0;
    text-align:left;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-bin-object[data-thumb-ready="true"] {
    grid-column:1;
    grid-row:1 / 3;
    width:120px;
    height:104px;
  }

  #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:stretch;
    max-width:100%;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-badge {
    grid-column:2;
    grid-row:2;
    justify-self:start;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] .workshop-part-hook {
    min-height:120px;
    margin:16px;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
    height:620px;
    min-height:0;
    grid-template-rows:310px minmax(0,1fr);
    align-content:stretch;
    overflow:hidden;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection:has(
    > .workshop-parts-wall-object[data-render-failed="true"]
  ) {
    grid-template-rows:170px minmax(0,1fr);
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-detail {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--mw-ink-soft) transparent;
  }
}

#garage[data-station="workshop"] .workshop-parts-wall-object[data-render-failed="true"] {
  background-color:#7a4a2c;
  background-image:url("/media/slot-car/workshop/pegboard-backdrop.webp?v=c34d8047a2");
  background-size:cover;
  background-position:center 44%;
}

#garage[data-station="workshop"] .workshop-static-preview {
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  grid-template-columns:minmax(130px,34%) minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:18px clamp(22px,4vw,54px);
  color:var(--mw-paper-hi);
  background:linear-gradient(90deg,rgba(7,11,14,.82),rgba(7,11,14,.48));
}

#garage[data-station="workshop"] .workshop-static-preview-art {
  display:grid;
  width:100%;
  height:130px;
  place-items:center;
}

#garage[data-station="workshop"] .workshop-static-preview-art::before {
  content:attr(data-family);
  grid-area:1 / 1;
  padding:10px 14px;
  border:2px solid rgba(255,255,255,.74);
  color:var(--mw-paper-hi);
  background:rgba(7,11,14,.52);
  font:700 18px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
  letter-spacing:.12em;
  text-transform:uppercase;
}

#garage[data-station="workshop"] .workshop-static-preview-art[data-thumb-ready="true"]::before {
  display:none;
}

#garage[data-station="workshop"] .workshop-static-preview-art img {
  grid-area:1 / 1;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 5px rgba(0,0,0,.55));
}

#garage[data-station="workshop"] .workshop-static-preview-copy {
  min-width:0;
  display:grid;
  gap:5px;
  text-shadow:0 2px 2px rgba(0,0,0,.75);
}

#garage[data-station="workshop"] .workshop-static-preview-copy strong {
  overflow-wrap:normal;
  font:700 clamp(22px,2.1vw,34px)/.95 var(--face-display,'Big Shoulders Display','Arial Narrow',sans-serif);
}

#garage[data-station="workshop"] .workshop-static-preview-copy span {
  color:var(--mw-paper);
  font:600 13px/1.15 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* The part under inspection is held up in front of the club room's lit pegboard (overhaul G2; a soft-focus still of
   models3d/slot-car/garage-room rendered by probes/visual/garage-room.mjs TEAM=none, Workshop_close, blurred), not
   floated on graph paper. The pegboard itself becomes the junk-parts wall later (Sean 2026-10-04). */
#garage[data-station="workshop"] .workshop-parts-wall-object[data-view="part"] {
  background-color:#7a4a2c;
  background-image:url("/media/slot-car/workshop/pegboard-backdrop.webp?v=c34d8047a2");
  background-size:cover;
  background-position:center 40%;
}

#garage[data-station="workshop"] .workshop-parts-wall-object[data-view="part"]::after {
  display:none;
}

/* Record > Permits: the rack used to be held at min-height calc(100vh - 350px), five 550 px cards with nothing in
   their middles (2026-10-04); it now sits at its own height. */
#garage[data-station="workshop"] .workshop-physical-heading {
  align-items:center;
  gap:8px 20px;
}

/* The station legend already says "Drag - Turn the part" wherever there are keys, and the heading already says the
   part's condition: the viewer's own cue box and caption bar repeated both. Phones (no legend) keep the cue; the
   caption stays for screen readers. */
@media (min-width:721px) and (pointer:fine) {
  #garage[data-station="workshop"] .workshop-parts-wall-object.interactive .workshop-turn-cue {
    display:none;
  }
}

#garage[data-station="workshop"] .workshop-inspection .slot-car-parts-status {
  clip-path:inset(50%);
  width:1px;
  height:1px;
  padding:0;
  border:0;
  white-space:nowrap;
}

/* The rolling road before its first run: the button and the loop share the box instead of leaving an empty third
   column for a result that is not there yet. */
#garage[data-station="workshop"] .workshop-test-run:has(.workshop-test-run-result:empty) {
  grid-template-columns:88px minmax(0,1fr);
}

#garage[data-station="workshop"] .workshop-test-run:has(.workshop-test-run-result:empty) svg {
  width:100%;
  border-right:0;
}

#garage[data-station="workshop"] .workshop-test-run-result:empty {
  display:none;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-inspection-comparison {
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:10px 0;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-lap-delta {
  margin-bottom:6px;
}

#garage[data-station="workshop"] .workshop-parts-room .workshop-compare-pill {
  display:grid;
  grid-template-columns:minmax(82px,.7fr) minmax(120px,1.5fr) 42px;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:4px 0;
  border:0;
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-compare-meter {
  position:relative;
  height:10px;
  border:1px solid var(--mw-ink-soft);
  background:var(--mw-paper-dim);
}

#garage[data-station="workshop"] .workshop-compare-meter::after {
  content:"";
  position:absolute;
  top:-3px;
  bottom:-3px;
  left:50%;
  border-left:1px solid var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-compare-meter-fill {
  position:absolute;
  top:1px;
  bottom:1px;
  width:var(--effect-strength);
  background:var(--mw-ink-soft);
}

#garage[data-station="workshop"] .workshop-compare-pill.gain .workshop-compare-meter-fill {
  left:50%;
  background:#2b8e69;
}

#garage[data-station="workshop"] .workshop-compare-pill.loss .workshop-compare-meter-fill {
  right:50%;
  background:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-compare-value {
  text-align:right;
}

/* The segmented meter (overhaul G3): ten cells, a centre rule between the fifth and sixth, filled cells in the gain
   green or the loss red. Replaces the smooth fill. */
#garage[data-station="workshop"] .workshop-compare-meter.segmented {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:2px;
  height:12px;
  padding:0;
  border:0;
  background:transparent;
}

#garage[data-station="workshop"] .workshop-compare-meter.segmented::after {
  top:-3px;
  bottom:-3px;
}

#garage[data-station="workshop"] .workshop-compare-cell {
  display:block;
  border:1px solid var(--mw-rule);
  border-radius:1px;
  background:var(--mw-paper-dim);
}

#garage[data-station="workshop"] .workshop-compare-cell[data-on="gain"] {
  border-color:#1f6b4f;
  background:#2b8e69;
}

#garage[data-station="workshop"] .workshop-compare-cell[data-on="loss"] {
  border-color:#8e0b21;
  background:var(--mw-red);
}

#garage[data-station="workshop"] .workshop-shelf-head span {
  color:var(--mw-ink-soft);
}

#garage[data-station="workshop"] .workshop-part {
  border-color:var(--mw-rule);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
  box-shadow:none;
}

#garage[data-station="workshop"] .workshop-part:hover {
  background:#fff9eb;
}

#garage[data-station="workshop"] .workshop-part[data-selected="true"] {
  background:var(--mw-paper);
  box-shadow:inset 5px 0 var(--mw-red);
}

#garage[data-station="workshop"] .workshop-switch {
  border-color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-switch button {
  border-color:var(--mw-ink);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="workshop"] .workshop-switch button[aria-pressed="true"] {
  background:var(--mw-red);
  color:var(--mw-paper-hi);
}

#garage[data-station="workshop"] .workshop-switch button[aria-pressed="true"] strong {
  color:var(--mw-paper-hi);
}

/* Record: a club logbook, not a dark admin dashboard. */
#garage:not([data-focus])[data-station="record"] {
  background:var(--mw-paper);
  --record-dark-strong:#f6efe4;
  --record-dark-soft:#c7d0d8;
  --record-dark-signal:#f5c542;
  --text-strong:var(--mw-ink);
  --text-soft:var(--mw-ink-soft);
  --text-signal:var(--mw-red);
  --garage-paper:var(--mw-ink);
  --garage-dim:var(--mw-ink-soft);
}

#garage:not([data-focus])[data-station="record"] .life-switchboard {
  gap:0;
  margin:18px 0 0;
  padding:0;
  border:2px solid var(--mw-ink);
  border-bottom:0;
  background:var(--mw-paper-dim);
}

#garage[data-station="record"] .life-switch {
  min-height:54px;
  border:0;
  border-right:1px solid var(--mw-rule);
  border-bottom:1px solid var(--mw-rule);
  background:var(--mw-paper-dim);
  color:var(--mw-ink);
}

#garage[data-station="record"] .life-switch :is(strong,small) {
  color:inherit;
}

/* The unselected desk switch answers the pointer with its ground only (Review C8): the rule above set its background
   at Record's specificity and masked the base hover, so hover and rest were the same paper (Codex 21:54). */
#garage[data-station="record"] .life-switch:not([aria-pressed="true"]):hover {
  background:var(--mw-paper-hi);
}

#garage[data-station="record"] .life-switch[aria-pressed="true"] {
  background:var(--mw-red);
  color:var(--mw-paper-hi);
  box-shadow:none;
}

#garage[data-station="record"] .life-switch-lamp {
  border-color:var(--mw-ink);
  background:transparent;
}

#garage[data-station="record"] .life-switch[aria-pressed="true"] .life-switch-lamp {
  background:var(--mw-yellow);
}

#garage[data-station="record"] .life-panel {
  margin:0;
  padding:20px 0 0;
  border:0;
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage[data-station="record"] #mastery,
#garage[data-station="record"] .slot-car-mastery-board {
  background:var(--mw-paper);
  color:var(--mw-ink);
}

#garage[data-station="record"] .slot-car-mastery-head {
  border:2px solid var(--mw-ink);
  border-top:9px solid var(--mw-red);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

#garage[data-station="record"] .slot-car-license-rack {
  border-color:var(--mw-ink);
  background:var(--mw-paper-hi);
}

#garage[data-station="record"] .slot-car-license {
  border-color:var(--mw-rule);
  background:var(--mw-paper-hi);
  color:var(--mw-ink);
}

/* Record, 2026-10-03 (phase 1c): yellow is selection only, so a passed permit is marked in red ink; the stamp, the
   meter and the tally print on paper; no type under 13 px. */
#garage[data-station="record"] .slot-car-license[data-earned="true"],
#garage[data-station="record"] .slot-car-license[data-complete="true"] {
  background:var(--mw-paper-hi);
  box-shadow:inset 0 6px var(--mw-red);
}

#garage[data-station="record"] :is(.slot-car-license-index,.slot-car-license-detail,.slot-car-license-facts) {
  color:var(--mw-ink-soft);
  font-size:13px;
}

#garage[data-station="record"] .slot-car-license-stamp {
  border-color:var(--mw-red);
  background:transparent;
  box-shadow:inset 0 0 0 3px var(--mw-paper-hi),inset 0 0 0 5px var(--mw-red);
  color:var(--mw-red);
  font-size:13px;
}

#garage[data-station="record"] .slot-car-license-slot:not([data-stamped="true"]) {
  border-color:var(--mw-rule);
  color:var(--mw-rule);
}

#garage[data-station="record"] .slot-car-license-meter {
  border-color:var(--mw-ink);
  background:var(--mw-paper-dim);
}

#garage[data-station="record"] .slot-car-license-meter span {
  background:var(--mw-ink);
}

#garage[data-station="record"] .slot-car-mastery-total {
  border:2px solid var(--mw-red);
  background:var(--mw-paper-hi);
  color:var(--mw-red);
  box-shadow:none;
}

#garage[data-station="record"] .slot-car-mastery-total :is(strong,span) {
  color:var(--mw-red);
}

#garage[data-station="record"] .slot-car-mastery-total span {
  font-size:13px;
}

/* The narrow permit puts the stamp beside the title at 52 px, where 13 px "PASSED" overran the ring. */
@media (max-width:650px) {
  #garage[data-station="record"] .slot-car-license > .slot-car-license-slot {
    width:70px;
    height:70px;
  }

  #garage[data-station="record"] .slot-car-license-stamp {
    width:68px;
    height:68px;
    letter-spacing:.02em;
  }
}

#garage[data-station="record"] .slot-car-license-reward {
  background:var(--mw-enamel);
  color:var(--mw-yellow);
}

@media (max-width:1000px) {
  #garage:is([data-station="race"],[data-poster="true"]) .poster-leave {
    color:var(--mw-paper-hi);
  }

  #garage.garage:not([data-focus]) {
    padding-inline:14px;
  }

  #garage.garage:not([data-focus])[data-station="race"][data-poster="true"] {
    padding-inline:14px;
  }

  #garage .garage-directory {
    margin-inline:-14px;
    padding-inline:14px;
  }

  #garage.garage:not([data-focus])[data-station="car"] {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto auto auto auto;
    gap:0;
    grid-template-areas:"directory" "hero" "status" "actions" "report" "circuit" "notice";
  }

  #garage:not([data-focus])[data-station="car"] .car-stage {
    height:520px;
    min-height:520px;
    margin-top:14px;
  }

  #garage:not([data-focus])[data-station="car"] > .status-strip {
    margin-top:14px;
  }

  #garage[data-station="workshop"] .workshop-category-rail {
    grid-template-columns:1fr;
    grid-auto-flow:row;
    overflow:visible;
    border-right:2px solid var(--mw-ink);
  }

  #garage[data-station="workshop"] .workshop-parts-room {
    grid-template-columns:140px minmax(0,1fr);
    grid-template-areas:
      "families shelf"
      "bench bench";
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail {
    grid-area:families;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-wall[data-category-wall="true"] {
    grid-area:shelf;
    border-right:0;
    border-bottom:2px solid var(--mw-ink);
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf {
    min-height:520px;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
    grid-area:bench;
    min-height:0;
    grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object {
    min-height:340px;
    border-right:2px solid var(--mw-ink);
    border-bottom:0;
  }

  #garage[data-station="workshop"] .workshop-inspection {
    grid-template-columns:1fr;
  }

  #garage[data-station="workshop"] .workshop-parts-wall-object {
    border-right:0;
    border-bottom:2px solid var(--mw-ink);
  }
}

@media (max-width:650px) {
  .topbar {
    padding-inline:10px;
  }

  #garage.garage:not([data-focus]) {
    min-height:calc(100vh - 52px);
    padding:0 8px 16px;
  }

  #garage.garage:not([data-focus])[data-station="race"][data-poster="true"] {
    padding:0 8px 16px;
  }

  #garage .garage-directory {
    height:50px;
    margin-inline:-8px;
    padding:0;
  }

  #garage .garage-directory a,
  #garage .garage-directory a[aria-current="page"] {
    min-width:0;
    min-height:46px;
    padding:15px 8px 8px;
    font-size:14px;
  }

  #garage:not([data-focus])[data-station="car"] .car-stage {
    height:430px;
    min-height:430px;
    margin-top:8px;
    box-shadow:inset 0 -80px var(--mw-paper-dim),inset 0 -82px var(--mw-ink);
  }

  #garage:not([data-focus])[data-station="car"] .car-stage::before {
    bottom:80px;
    width:10px;
  }

  #garage:not([data-focus])[data-station="car"] .car-stage::after {
    top:10px;
    right:10px;
    font-size:9px;
  }

  #garage:not([data-focus])[data-station="car"] .car-3d {
    left:2%;
    right:2%;
    top:72px;
    bottom:62px;
  }

  #garage:not([data-focus])[data-station="car"] .stage-pocket {
    left:20px;
    top:20px;
    right:20px;
    width:auto;
  }

  #garage:not([data-focus])[data-station="car"] .stage-pocket .identity {
    width:190px !important;
  }

  #garage:not([data-focus])[data-station="car"] .identity h1 {
    max-width:none;
    font-size:34px;
    overflow-wrap:normal;
    word-break:normal;
  }

  #garage:not([data-focus])[data-station="car"] .stage-pocket .fitted-parts {
    display:none;
  }

  #garage:not([data-focus])[data-station="car"] .turntable-cue {
    right:auto;
    left:50%;
    bottom:15px;
    transform:translateX(-50%);
  }

  #garage:not([data-focus])[data-station="car"] .actions > :is(#refresh:not([hidden]),.recall-action) {
    margin-top:76px;
  }

  /* Only the first of them clears the fold: with Retry connection showing, the stream recall under it got the same
     76 px and the phone page had two empty bands (2026-10-04). */
  #garage:not([data-focus])[data-station="car"] .actions > #refresh:not([hidden]) ~ .recall-action {
    margin-top:0;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .race-poster {
    margin:0;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-entry,
  #garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-cols="4"] {
    grid-template-columns:52px repeat(3,minmax(0,1fr));
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-setup-summary {
    grid-template-columns:1fr;
    grid-template-areas:"ticket" "orders" "action";
    gap:7px;
    min-height:0;
    padding:11px;
    min-width:0;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="true"] .poster-setup-summary {
    grid-template-areas:"action";
    min-height:36px;
    padding:0;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-setup-ticket {
    font-size:16px;
    line-height:1.22;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-setup-orders {
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-setup-action {
    min-height:44px;
    text-align:center;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster-entry[data-setup-open="true"] .poster-setup-action {
    min-height:34px;
    padding:0;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster:has(.poster-entry[data-setup-open="true"]) {
    padding-bottom:80px;
  }

  #garage:is([data-station="race"],[data-poster="true"]) .poster:has(.poster-entry[data-setup-open="true"]) .poster-ticket-wrap {
    position:static;
  }

  #garage[data-station="workshop"] #works-bench.workshop-bench,
  #garage:not([data-focus])[data-station="record"] .life-switchboard {
    margin-top:8px;
  }

  #garage[data-station="workshop"] .workshop-inspection {
    grid-template-columns:1fr;
  }

  #garage[data-station="workshop"] .workshop-parts-room {
    grid-template-columns:116px minmax(0,1fr);
    align-items:start;
  }

  /* The family drawers stay vertical, but no longer make the selected-part bench wait beneath all ten rows.
     Five drawers remain visible at once and the rail itself scrolls like a physical index. */
  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail {
    max-height:366px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--mw-ink-soft) var(--mw-paper);
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-category-rail .workshop-category-rail-head {
    position:sticky;
    z-index:4;
    top:0;
  }

  #garage[data-station="workshop"] .workshop-category-rail-head {
    min-height:48px;
    padding:8px;
    font-size:13px;
    line-height:1.15;
  }

  #garage[data-station="workshop"] .workshop-category-group-tab {
    min-height:46px;
    grid-template-columns:minmax(0,1fr);
    padding:7px 6px;
  }

  #garage[data-station="workshop"] :is(.workshop-category-group-number,.workshop-category-number) { display:none; }
  #garage[data-station="workshop"] .workshop-category-group-tab > strong {
    grid-column:1;
    font-size:15px;
  }
  #garage[data-station="workshop"] .workshop-category-group-count {
    grid-column:1;
    grid-row:2;
    justify-self:start;
    font-size:13px;
  }
  #garage[data-station="workshop"] .workshop-category-group-mark { display:none; }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-category-tab {
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    min-height:56px;
    padding:8px 7px;
  }

  #garage[data-station="workshop"] .workshop-category-tab[aria-pressed="true"]::after {
    display:none;
  }

  /* Nothing under 13 px on a phone (grok's cold judge, 2026-10-03: these were 9, 10 and 12 px). */
  #garage[data-station="workshop"] .workshop-category-tab strong {
    grid-column:1;
    font-size:13px;
  }

  #garage[data-station="workshop"] .workshop-category-zone {
    display:none;
  }

  #garage[data-station="workshop"] .workshop-shelf-title {
    font-size:26px;
  }

  #garage[data-station="workshop"] .workshop-category-count {
    grid-column:1;
    grid-row:2;
    justify-self:start;
    padding:2px 3px;
    font-size:13px;
  }

  #garage[data-station="workshop"] .workshop-parts-wall-object {
    min-height:260px;
  }

  #garage[data-station="workshop"] .workshop-inspection-detail,
  #garage[data-station="workshop"] .workshop-inspection-detail:has(.workshop-inspection-records) {
    grid-template-columns:1fr;
    gap:14px;
    padding:16px;
  }

  #garage[data-station="workshop"] .workshop-inspection-heading {
    padding-right:0;
  }

  #garage[data-station="workshop"] .workshop-inspection-records {
    padding:16px 0 0;
    border-left:0;
    border-top:1px solid var(--mw-rule);
  }

  #garage[data-station="workshop"] .workshop-livery-door {
    grid-template-columns:52px minmax(0,1fr) auto;
  }

  #garage[data-station="workshop"] .workshop-livery-arrow {
    display:block;
    padding-inline:8px;
  }

  #garage[data-station="workshop"] .workshop-parts-wall-object {
    border-right:0;
    border-bottom:2px solid var(--mw-ink);
  }

  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-shelf-head {
    grid-template-columns:1fr auto;
  }

  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-shelf-head strong {
    grid-column:1 / -1;
  }

  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-rack {
    min-height:300px;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:100%;
    align-items:stretch;
    gap:0;
    padding:0 0 64px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-inline:contain;
  }

  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part,
  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-hook {
    min-height:240px;
    scroll-snap-align:start;
  }

  /* In the phone carousel the line stays under the cards; spanning the grid would widen the scroller. */
  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-hook {
    position:absolute;
    grid-column:auto;
    right:12%;
    bottom:12px;
    left:12%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-bin-object[data-thumb-ready="true"] {
    width:min(190px,92%);
    height:138px;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf {
    min-height:0;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-head {
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    min-height:0;
    padding:9px;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-room-label {
    display:block;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-shelf-fitted {
    display:none;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-wall-browse {
    grid-column:2;
    grid-row:1 / span 2;
  }

  #garage[data-station="workshop"] .workshop-parts-room > .workshop-inspection {
    min-height:0;
    grid-template-columns:1fr;
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-parts-wall-object {
    min-height:210px;
    border-right:0;
    border-bottom:2px solid var(--mw-ink);
  }

  #garage[data-station="workshop"] .workshop-parts-room .workshop-compare-pill {
    grid-template-columns:74px minmax(92px,1fr) 36px;
    gap:6px;
  }

  #garage[data-station="record"] .life-switchboard {
    border-bottom:2px solid var(--mw-ink);
  }
}

/* Record is an index, not a carousel. Every available desk wraps into the width at every breakpoint; status remains
   in each button's accessible name even where the compact rack hides the secondary line. */
#garage[data-station="record"] .life-switchboard {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  grid-auto-flow:row;
  overflow:visible;
  overscroll-behavior-x:auto;
  scrollbar-width:auto;
}

/* A new car has no Record desks yet. Match the themed index's specificity so its explicit grid does not resurrect
   the empty rail over garage.html's `.life-switchboard:empty`; only the quiet line belongs under the tabs. */
#garage[data-station="record"] .life-switchboard:empty {
  display:none;
}

#garage[data-station="record"] .life-switchboard[data-switch-count="1"] {
  display:none;
}

@media (max-width:720px) {
  #garage[data-station="record"] .life-switchboard {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding:8px 0;
  }
  #garage[data-station="record"] .life-switch {
    min-height:44px;
    padding:7px 8px;
    grid-template-columns:10px minmax(0,1fr);
  }
  #garage[data-station="record"] .life-switch small { display:none; }
}

/* Selection changes the object (overhaul G3; Artist tower ui/07 section 4, tell 2): the part under inspection steps up
   with a small overshoot and the rest of its rack drops to an ink wash. A held state, not a replayed animation: the
   rack is rebuilt on every render. */
#garage[data-station="workshop"] .workshop-part .workshop-part-bin-object {
  transition:transform 160ms cubic-bezier(.34,1.56,.64,1), filter 160ms ease, opacity 160ms ease;
}

#garage[data-station="workshop"] .workshop-part[data-active="true"] .workshop-part-bin-object {
  transform:scale(1.08);
}

#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:grayscale(.75) sepia(.2);
  opacity:.72;
}

/* The controls legend (overhaul G3): key caps and verbs on a paper chip, bottom left, like the race poster's legend. */
#station-legend {
  position:fixed;
  z-index:60;
  left:20px;
  bottom:16px;
  display:flex;
  gap:20px;
  align-items:center;
  padding:8px 14px;
  border:2px solid var(--mw-ink,#17120f);
  border-radius:3px;
  background:var(--mw-paper-hi,#f7f0df);
  color:var(--mw-ink,#17120f);
  font:600 14px/1 var(--face-body,'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif);
  pointer-events:none;
}

#station-legend[hidden] { display:none; }

#station-legend > span { display:flex; align-items:center; gap:5px; }

#station-legend kbd {
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 5px;
  border:1px solid var(--mw-ink,#17120f);
  border-radius:2px;
  font:600 13px/1 var(--face-mono,'IBM Plex Mono',Consolas,monospace);
}

@media (max-width:720px), (pointer:coarse) {
  #station-legend { display:none; }
}

/* Locked parts as silhouettes (overhaul G3): the parts still out there as solid-ink shapes over the hint. */
#garage[data-station="workshop"] .workshop-wall[data-category-wall="true"] .workshop-part-hook {
  grid-template-rows:auto auto;
  gap:10px;
  align-content:center;
}






/* The club room (overhaul G1): once the room has loaded, the car stage's canvas fills the whole stage edge to edge
   behind its title and plate (the stage isolates so the canvas sits over the stage's paper and under its text). */
#garage .car-stage:has(.car-3d.room-ready) {
  isolation:isolate;
}

#garage .car-stage .car-3d.room-ready {
  inset:0;
  z-index:-1;
}

/* Over the room the car's name sits on a printed card (the lamp and the dark wall ate the bare type). */
#garage .car-stage:has(.car-3d.room-ready) .identity {
  padding:12px 16px 10px;
  border:2px solid var(--mw-ink,#17120f);
  border-radius:3px;
  background:var(--mw-paper-hi,#f7f0df);
}

@media (prefers-reduced-motion:reduce) {
  #garage * {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* The stamp that lands (overhaul G3; garage.js landStamp): a rubber stamp on its own layer over the surface an action
   happened on. It drops from above with an overshoot, settles, holds, and lifts off; caps because it is a stamp. */
.landing-stamp {
  position:fixed;
  z-index:200;
  padding:8px 16px 5px;
  border:4px solid var(--mw-red);
  border-radius:3px;
  background:color-mix(in srgb, var(--mw-paper-hi) 90%, transparent);
  color:var(--mw-red);
  font:900 44px/1 var(--face-display,'Big Shoulders Display','Arial Narrow',sans-serif);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-6deg);
  animation:landing-stamp 1.9s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes landing-stamp {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(-10deg) scale(2.2); }
  12% { opacity:1; transform:translate(-50%,-50%) rotate(-6deg) scale(.9); }
  20% { transform:translate(-50%,-50%) rotate(-6deg) scale(1.05); }
  28% { transform:translate(-50%,-50%) rotate(-6deg) scale(1); }
  82% { opacity:1; transform:translate(-50%,-50%) rotate(-6deg) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(-6deg) scale(1); }
}

@media (prefers-reduced-motion:reduce) {
  .landing-stamp { animation:landing-stamp-still 1.6s linear forwards; }
  @keyframes landing-stamp-still { 0%, 80% { opacity:1; } 100% { opacity:0; } }
}

@media (max-width:650px) {
  .landing-stamp { font-size:32px; padding:6px 12px 4px; border-width:3px; }
}

/* The fit moment's stat cells (slot-car-workshop.js markFitted): each lit cell pops in after its --tick-delay, outward
   from the centre and row after row, once. */
.workshop-compare-pill[data-tick="true"] .workshop-compare-cell[data-on] {
  animation:workshop-cell-tick .24s cubic-bezier(.2,.8,.2,1) var(--tick-delay, 0ms) both;
}

@keyframes workshop-cell-tick {
  from { opacity:0; transform:scaleY(.2); }
  60% { opacity:1; transform:scaleY(1.3); }
  to { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .workshop-compare-pill[data-tick="true"] .workshop-compare-cell[data-on] { animation:none; }
}

}
