@layer motorworks-legacy {
/*
 * BroTeam Motorworks interaction system — 2026-10-05
 *
 * One clubhouse, several mechanisms. This file deliberately does not define a universal button skin:
 * station keys, entry tickets, ignition keys, race plungers, workshop clamps and ledger tabs must remain
 * visually distinct because they perform different jobs. Loaded after the room and legacy shell CSS.
 */

:root {
  --mw-control-ink:#11100e;
  --mw-control-paper:#f2ead8;
  --mw-control-paper-dim:#d7cbae;
  --mw-control-red:#c8102e;
  /* Red paint is a strong mechanism fill but misses AA as small ink on paper. Keep one hue, two jobs. */
  --mw-control-red-ink:#990b24;
  --mw-control-yellow:#f5c542;
  --mw-control-metal:#78838a;
  --mw-control-rule:#8b806b;
}

/* The station directory is the edge of the shared workbench: objects hang from one rail, not tab boxes. */
#garage .garage-directory {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:clamp(14px,2.4vw,34px);
  min-height:84px;
  padding:9px clamp(18px,3vw,42px) 13px;
  overflow-x:auto;
  overflow-y:hidden;
  border:0;
  border-top:7px solid var(--mw-control-ink);
  border-bottom:2px solid var(--mw-control-ink);
  background:var(--mw-control-paper);
  scrollbar-width:none;
}

#garage .garage-directory::-webkit-scrollbar { display:none; }

/* No separate rail line: drawn at top:20px it ran between every station's label and name and struck through the
   active one (Sean 2026-10-06 00:23, "seems fucked"). The strip's 7 px ink top edge is the rail. */
#garage .garage-directory::before {
  content:none !important;
  position:absolute;
  left:0;
  right:0;
  top:20px;
  width:auto;
  height:5px;
  margin:0;
  border:0;
  background:var(--mw-control-ink);
}

#garage .garage-directory::after { content:none !important; }

#garage .garage-directory a {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:30px auto;
  grid-template-rows:auto auto;
  /* Label and name from the top of every station, so they line up whatever the object's size or the station's state
     (centred, My car's ran 2-4 px low); the object is centred on its own. */
  align-items:start;
  column-gap:9px;
  min-width:0;
  min-height:58px;
  /* Room under the 01-05 keys, so the active station's red underline runs below its key, not through it. */
  padding:0 0 16px;
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:var(--mw-control-ink);
  text-decoration:none;
  transform:translateY(0);
  transition:transform 150ms ease,border-color 150ms ease;
}

#garage .garage-directory a::after {
  content:attr(data-station-key);
  position:absolute;
  left:0;
  top:42px;
  width:30px;
  color:var(--mw-control-red-ink);
  font:700 9px/1 var(--face-mono);
  text-align:center;
}

#garage .garage-directory a::before {
  content:"" !important;
  grid-row:1 / 3;
  align-self:center;
  display:block !important;
  box-sizing:border-box;
  width:30px;
  height:30px;
  margin:0;
  border:3px solid var(--mw-control-ink);
  background:var(--mw-control-paper);
}

/* Five stations, five objects. Their silhouettes still read when every label is covered. */
#garage .garage-directory a[data-station-object="key"]::before {
  width:24px;
  height:24px;
  margin-left:3px;
  border-radius:50%;
  box-shadow:13px 9px 0 -8px var(--mw-control-ink),20px 9px 0 -8px var(--mw-control-ink);
}

#garage .garage-directory a[data-station-object="ticket"]::before {
  width:30px;
  height:22px;
  margin-top:1px;
  border-width:2px;
  clip-path:polygon(0 0,83% 0,100% 22%,87% 50%,100% 78%,83% 100%,0 100%);
  background:var(--mw-control-red);
}

#garage .garage-directory a[data-station-object="drawer"]::before {
  height:22px;
  margin-top:1px;
  border-width:2px;
  box-shadow:inset 0 -5px 0 var(--mw-control-paper-dim);
}

#garage .garage-directory a[data-station-object="book"]::before {
  width:22px;
  height:31px;
  margin-left:4px;
  border-width:2px 4px 2px 2px;
  transform:skewY(-4deg);
}

#garage .garage-directory a[data-station-object="tower"]::before {
  width:28px;
  height:29px;
  border-width:2px;
  clip-path:polygon(15% 0,85% 0,85% 22%,100% 22%,100% 100%,0 100%,0 22%,15% 22%);
  background:var(--mw-control-ink);
  box-shadow:inset 0 -8px 0 var(--mw-control-yellow);
}

#garage .garage-directory a[data-station-object="controller"]::before {
  width:24px;
  height:31px;
  margin-left:3px;
  border-radius:2px 2px 10px 10px;
  background:var(--mw-control-red);
}

#garage .garage-station-copy { display:grid; gap:2px; white-space:nowrap; }
#garage .garage-station-copy small {
  color:#675f51;
  font:700 10px/1 var(--face-body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
#garage .garage-station-copy strong { font:800 18px/1 var(--face-display); }

#garage .garage-directory a:hover { transform:translateY(3px); }
#garage .garage-directory a[aria-current="page"] {
  padding-top:0;
  border-radius:0;
  border-bottom-color:var(--mw-control-red);
  background:transparent;
  color:var(--mw-control-ink);
  /* Not lowered: shifted 7 px its label and key ran into the rule and the red underline. translateY(0), the same as
     every other station, so focus and selection compute the same transform. */
  transform:translateY(0);
  /* motorworks-club-room.css gives the old active tab a 4 px top border; here it only pushed My car's text 4 px down. */
  border-top:0;
  border-left:0;
  border-right:0;
}
#garage .garage-directory a[aria-current="page"]::before { background:var(--mw-control-yellow); }
#garage .garage-directory a[aria-current="page"] .garage-station-copy small { color:var(--mw-control-red); }
#garage .garage-directory a:focus-visible { outline:3px solid var(--mw-control-red) !important; outline-offset:4px !important; }

/* At the lights the directory is race control, not the full clubhouse bench: only Watch/Drive remain and their
   names fit a compact two-position rail so the live circuit keeps the screen. */
#garage:is([data-focus="countdown"],[data-focus="racing"]) > .garage-directory {
  align-items:center;
  gap:10px;
  height:54px;
  min-height:54px;
  padding:4px 18px 5px;
  border-top-width:3px;
}
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a {
  display:flex;
  min-height:44px;
  padding:0 14px;
  transform:none;
}
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a::before,
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a::after,
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-station-copy small { display:none !important; }
#garage:is([data-focus="countdown"],[data-focus="racing"]) .garage-directory a[aria-current="page"] { transform:none; }

/* A station arrives like a bench object being set down; switching never resembles a web-panel dissolve. */
#garage:not([data-focus])[data-station="car"] > :is(.car-stage,.status-strip,.actions),
#garage:not([data-focus])[data-station="workshop"] > :is(.parts-bench,#works-bench),
#garage:not([data-focus])[data-station="record"] > .life-panel,
#garage:not([data-focus])[data-station="race"] > :is(.race-poster,.driver-board,.pit-board) {
  /* Do not retain the last transform frame: a transformed Race ancestor makes the phone's fixed Join ticket
     relative to the full poster instead of the viewport. */
  animation:mw-bench-arrive 240ms cubic-bezier(.2,.8,.2,1);
}

@keyframes mw-bench-arrive {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

/* My Car — every action declares its mechanism. */
#garage:not([data-focus])[data-station="car"] .actions {
  align-items:stretch;
  gap:14px;
  padding:10px 0 18px;
  background:transparent;
}

#garage .action[data-mechanism] {
  position:relative;
  box-shadow:none;
  transition:transform 100ms ease,background-color 100ms ease;
}

#garage .action[data-mechanism]:active:not(:disabled) { transform:translateY(3px); }

/* Entry is a perforated ticket, visually unrelated to a settings control. */
#garage .action[data-mechanism="entry-ticket"] {
  min-height:62px;
  padding:10px 54px 10px 18px;
  border:2px solid var(--mw-control-ink);
  border-left:12px solid var(--mw-control-red);
  border-radius:0;
  background:var(--mw-control-yellow);
  color:var(--mw-control-ink);
  clip-path:polygon(0 0,95% 0,100% 16%,96% 32%,100% 50%,96% 68%,100% 84%,95% 100%,0 100%);
  font:800 22px/1 var(--face-display);
  text-align:left;
}

#garage .action[data-mechanism="entry-ticket"]::after {
  content:"ENTRY";
  position:absolute;
  right:13px;
  top:50%;
  color:var(--mw-control-red);
  font:700 10px/1 var(--face-mono);
  letter-spacing:.08em;
  transform:translateY(-50%) rotate(90deg);
}

/* Drive is an ignition key: ring, stem, then the exact action label. */
#garage .action[data-mechanism="ignition-key"] {
  min-height:58px;
  padding:8px 18px 8px 70px;
  border:0;
  border-bottom:3px solid var(--mw-control-ink);
  border-radius:0;
  background:transparent;
  color:var(--mw-control-ink);
  font:800 19px/1 var(--face-display);
  text-align:left;
}

#garage .action[data-mechanism="ignition-key"]::before {
  content:"";
  position:absolute;
  left:9px;
  top:50%;
  width:31px;
  height:31px;
  border:7px solid var(--mw-control-red);
  border-radius:50%;
  transform:translateY(-50%);
}

#garage .action[data-mechanism="ignition-key"]::after {
  content:"";
  position:absolute;
  left:43px;
  top:50%;
  width:25px;
  height:8px;
  background:var(--mw-control-ink);
  box-shadow:12px 7px 0 -2px var(--mw-control-ink);
  transform:translateY(-50%);
}

#garage .action[data-mechanism="withdraw-slip"] {
  min-height:44px;
  padding:7px 12px;
  border:0;
  border-bottom:2px solid var(--mw-control-red);
  border-radius:0;
  background:transparent;
  color:var(--mw-control-red);
  font:700 15px/1 var(--face-body);
  transform:rotate(-1deg);
}

#garage .action[data-mechanism="reset-pull"] {
  min-height:44px;
  padding:7px 13px 7px 38px;
  border:2px solid var(--mw-control-ink);
  border-radius:0;
  background:var(--mw-control-paper-dim);
  color:var(--mw-control-ink);
}
#garage .action[data-mechanism="reset-pull"]::before {
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:16px;
  height:24px;
  border:2px solid var(--mw-control-ink);
  background:var(--mw-control-metal);
  transform:translateY(-50%);
}

/* My Car's utilities live on the side of the bench. Recovery is a pull handle; recall is the wall transmitter. */
#garage:not([data-focus])[data-station="car"] > .actions > #refresh.action[data-mechanism="reset-pull"]:not([hidden]) {
  display:flex;
  align-items:center;
  width:100%;
  min-height:50px;
  margin:10px 0 0;
  padding:7px 12px 7px 48px;
  border:0;
  border-bottom:3px solid var(--mw-control-ink);
  border-radius:0;
  background:transparent;
  color:var(--mw-control-ink);
  box-shadow:none;
  font:700 15px/1 var(--face-body);
}

#garage:not([data-focus])[data-station="car"] > .actions > #refresh.action[data-mechanism="reset-pull"]::before {
  left:7px;
  width:27px;
  height:16px;
  border:3px solid var(--mw-control-ink);
  border-radius:9px 2px 2px 9px;
  background:var(--mw-control-red);
  box-shadow:16px 0 0 -6px var(--mw-control-ink);
}

#garage:not([data-focus])[data-station="car"] > .actions > #refresh.action[data-mechanism="reset-pull"]::after {
  content:none;
}

#garage:not([data-focus])[data-station="car"] > .actions > #recall.action[data-mechanism="call-lever"] {
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  min-height:78px;
  margin:12px 0 0;
  padding:8px 12px 8px 8px;
  border:3px solid var(--mw-control-ink);
  border-radius:0;
  background:var(--mw-control-paper-dim);
  color:var(--mw-control-ink);
  box-shadow:5px 5px 0 #655c4c;
}

#garage:not([data-focus])[data-station="car"] #recall .recall-transmitter {
  width:48px;
  height:58px;
  border:3px solid var(--mw-control-ink);
  border-radius:4px 4px 12px 12px;
  background:#363b3c;
  box-shadow:inset 0 0 0 4px var(--mw-control-metal);
}

#garage:not([data-focus])[data-station="car"] #recall .recall-transmitter::before {
  left:19px;
  top:5px;
  height:28px;
  border:2px solid var(--mw-control-ink);
  background:var(--mw-control-paper);
  transform:rotate(-18deg);
}

#garage:not([data-focus])[data-station="car"] #recall .recall-transmitter::after {
  left:11px;
  bottom:7px;
  width:21px;
  height:10px;
  border:3px solid var(--mw-control-ink);
  background:var(--mw-control-red);
}

#garage:not([data-focus])[data-station="car"] #recall .recall-label {
  color:var(--mw-control-ink);
  font:800 18px/1 var(--face-display);
}

#garage:not([data-focus])[data-station="car"] #recall .recall-state {
  display:block;
  margin-top:5px;
  color:#514a3f;
  font:600 12px/1.25 var(--face-body);
}

#garage:not([data-focus])[data-station="car"] #recall .recall-call {
  display:block;
  align-self:stretch;
  padding:8px 7px;
  border:0;
  border-left:2px dashed var(--mw-control-rule);
  background:transparent;
  color:var(--mw-control-red-ink);
  font:700 10px/1 var(--face-mono);
  writing-mode:vertical-rl;
  text-transform:uppercase;
}

/* Calls — a proper three-plunger race box. Their shape carries readiness before colour does. */
#garage .race-controls {
  grid-template-columns:repeat(3,minmax(82px,110px)) minmax(220px,1fr);
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:3px solid var(--mw-control-ink);
  border-left:10px solid var(--mw-control-red);
  background:#24201b;
}

#garage .power-button {
  position:relative;
  width:92px;
  min-width:92px;
  height:92px;
  min-height:92px;
  justify-self:center;
  padding:47px 7px 7px;
  border:0;
  border-radius:50%;
  background:var(--mw-control-paper-dim);
  color:var(--mw-control-ink);
  box-shadow:0 5px 0 #080706,inset 0 0 0 5px var(--mw-control-metal),inset 0 0 0 9px var(--mw-control-ink);
  font:800 15px/1 var(--face-display);
}

#garage .power-button::before {
  content:"";
  position:absolute;
  left:50%;
  top:13px;
  width:34px;
  height:34px;
  border:4px solid var(--mw-control-ink);
  border-radius:50%;
  background:var(--mw-control-red);
  transform:translateX(-50%);
}

#garage .power-button.ready::before { background:var(--mw-control-yellow); }
#garage .power-button.danger::before { background:var(--mw-control-red); box-shadow:0 0 0 4px var(--mw-control-paper); }
#garage .power-button:active:not(:disabled) { box-shadow:0 1px 0 #080706,inset 0 0 0 5px var(--mw-control-metal),inset 0 0 0 9px var(--mw-control-ink); transform:translateY(4px); }
#garage .power-button:disabled { opacity:.72; }
#garage .power-button:focus-visible { outline:4px solid var(--mw-control-yellow); outline-offset:5px; }

/* Calls timing bar (Twitch 2026-10-11: "its not a bar that fills up ... its a circle so you have to guess"). A straight
   bar under an open plunger fills left to right through the window; the red mark at its middle is the sweet spot
   (precision is judged against the window's centre). garage.js tickTimingBars moves --window every frame. It is the
   ::after: the plunger's lamp owns ::before, and an older strip there grew the lamp into an oval. */
#garage .power-button[data-timing="open"]::after {
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  top:calc(100% + 9px);
  height:10px;
  border:1px solid var(--mw-control-paper);
  background:
    linear-gradient(var(--mw-control-red), var(--mw-control-red)) 50% 0 / 4px 100% no-repeat,
    linear-gradient(var(--mw-control-paper), var(--mw-control-paper)) 50% 0 / 8px 100% no-repeat,
    linear-gradient(var(--mw-control-yellow), var(--mw-control-yellow)) 0 0 / calc(var(--window, 0) * 100%) 100% no-repeat,
    #3a342b;
  pointer-events:none;
}
#garage .race-controls:not(.automatic) { padding-bottom:30px; }
/* On a phone the readout wraps to the row under the plungers: clear the bar. */
@media (max-width:700px) { #garage .race-controls:not(.automatic) { row-gap:28px; } }

#garage .control-readout {
  min-height:92px;
  align-content:center;
  padding:14px 18px;
  border:2px solid var(--mw-control-paper-dim);
  border-radius:0;
  background:#11100e;
  color:var(--mw-control-paper);
}

/* Auto / Calls is a two-detent Bakelite selector. */
#garage .driver-controls {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  min-height:54px;
  padding:5px;
  border:3px solid var(--mw-control-ink);
  border-radius:3px;
  background:#29241e;
  isolation:isolate;
}

#garage .driver-controls::before {
  content:"";
  position:absolute;
  z-index:0;
  left:5px;
  top:5px;
  bottom:5px;
  width:calc(50% - 5px);
  border:2px solid var(--mw-control-ink);
  border-radius:2px;
  background:var(--mw-control-yellow);
  box-shadow:0 3px 0 #080706;
  transition:transform 170ms cubic-bezier(.2,.8,.2,1);
}

#garage .driver-controls[data-mode="manual"]::before { transform:translateX(100%); }

#garage .driver-choice {
  position:relative;
  z-index:1;
  min-height:44px;
  border:0;
  background:transparent;
  color:var(--mw-control-paper);
  font:800 18px/1 var(--face-display);
}
#garage .driver-choice.selected { background:var(--mw-control-yellow); color:var(--mw-control-ink); }
#garage .driver-choice:focus-visible { outline:3px solid var(--mw-control-red); outline-offset:-2px; }

/* Workshop — service tags and one bench clamp, never a stack of identical CTAs. */
#garage[data-station="workshop"] .workshop-inspection-actions {
  gap:12px;
  padding-top:8px;
  border-top:2px solid var(--mw-control-rule);
}

#garage[data-station="workshop"] .workshop-action {
  position:relative;
  min-height:44px;
  padding:9px 12px;
  border:0;
  border-bottom:2px solid var(--mw-control-ink);
  border-radius:0;
  background:transparent;
  color:var(--mw-control-ink);
  text-align:left;
}

#garage[data-station="workshop"] .workshop-action::before {
  content:"SERVICE";
  display:inline-block;
  margin-right:10px;
  color:var(--mw-control-red);
  font:700 9px/1 var(--face-mono);
  letter-spacing:.08em;
}

#garage[data-station="workshop"] .workshop-action.primary {
  min-height:58px;
  padding:10px 64px 10px 16px;
  border:3px solid var(--mw-control-ink);
  background:var(--mw-control-yellow);
  font:800 20px/1 var(--face-display);
}

#garage[data-station="workshop"] .workshop-action.primary::before { content:"BENCH CLAMP"; display:block; margin:0 0 4px; }
#garage[data-station="workshop"] .workshop-action.primary::after {
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:29px;
  height:29px;
  border:4px solid var(--mw-control-ink);
  border-radius:50%;
  background:var(--mw-control-red);
  box-shadow:0 19px 0 -11px var(--mw-control-ink);
  transform:translateY(-60%);
}

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

/* A top-level part is tuned on one rolling-road handwheel. The four detents are the mechanism and its state,
   rather than another service tag with a progress sentence beside it. */
#garage[data-station="workshop"] .workshop-tune-action {
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  grid-template-rows:auto 8px;
  gap:7px 14px;
  min-height:72px;
  padding:10px 12px 9px 15px;
  border:2px solid var(--mw-control-ink);
  background:var(--mw-control-metal);
  box-shadow:inset 0 0 0 3px #8d918e;
}
#garage[data-station="workshop"] .workshop-tune-action::before,
#garage[data-station="workshop"] .workshop-tune-action::after { content:none; }
#garage[data-station="workshop"] .workshop-tune-copy { display:grid; align-content:center; gap:3px; }
#garage[data-station="workshop"] .workshop-tune-copy small {
  color:#332e28;
  font:700 9px/1 var(--face-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
#garage[data-station="workshop"] .workshop-tune-copy strong { font:800 18px/1 var(--face-display); }
#garage[data-station="workshop"] .workshop-tune-handwheel {
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  justify-self:center;
  width:38px;
  height:38px;
  border:5px double var(--mw-control-ink);
  border-radius:50%;
  background:radial-gradient(circle,var(--mw-control-yellow) 0 5px,var(--mw-control-ink) 6px 8px,
    var(--mw-control-red) 9px 14px,var(--mw-control-ink) 15px 17px,var(--mw-control-metal) 18px);
  box-shadow:0 2px 0 #655c4c;
}
#garage[data-station="workshop"] .workshop-tune-scale {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  align-self:end;
}
#garage[data-station="workshop"] .workshop-tune-scale i {
  height:7px;
  border:1px solid var(--mw-control-ink);
  background:#7d817e;
}
#garage[data-station="workshop"] .workshop-tune-scale i[data-set="true"] { background:var(--mw-control-red); }
#garage[data-station="workshop"] .workshop-tune-action:hover:not(:disabled),
#garage[data-station="workshop"] .workshop-tune-action:focus-visible { background:#c8c7bd; }
#garage[data-station="workshop"] .workshop-tune-action:disabled { opacity:.68; }

#garage .workshop-development-tune {
  display:grid;
  grid-template-columns:auto minmax(72px,1fr) auto;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:6px 8px;
  border:1px solid #8f8876;
  background:#e1d8c0;
}
#garage .workshop-development-tune-label {
  font:700 10px/1 var(--face-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
#garage .workshop-development-tune-detents { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#garage .workshop-development-tune-detent {
  height:12px;
  border:1px solid #554d42;
  background:#b9af98;
  box-shadow:inset 0 2px rgba(255,255,255,.25);
}
#garage .workshop-development-tune-detent[data-punched="true"] {
  background:radial-gradient(circle,#332e28 0 3px,var(--mw-control-red) 4px 100%);
}
#garage .workshop-development-tune-count { font:700 12px/1.25 var(--face-mono); }

/* The Part / On my car switch is one sliding mechanism, not two adjacent buttons. */
#garage[data-station="workshop"] .workshop-switch {
  position:relative;
  gap:0;
  padding:4px;
  border:2px solid var(--mw-control-ink);
  background:#29241e;
}
#garage[data-station="workshop"] .workshop-switch button {
  position:relative;
  z-index:1;
  min-height:36px;
  border:0 !important;
  background:#29241e;
  color:var(--mw-control-paper);
}
#garage[data-station="workshop"] .workshop-switch button > :is(span,strong) {
  color:inherit !important;
}
#garage[data-station="workshop"] .workshop-switch button[aria-pressed="true"] {
  background:var(--mw-control-yellow);
  color:var(--mw-control-ink);
}

/* Record - an index on the open ledger. Every room wraps into view; none hides behind a sideways rail. */
/* Two or more objects only: with none or one the index is not drawn (garage.html hides it; !important here used to
   override that and drew an empty 72 px rail on a bare Record). */
#garage[data-station="record"] .life-switchboard:not([data-switch-count="0"]):not([data-switch-count="1"]) {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:3px;
  min-height:72px;
  margin:18px 0 0;
  padding:12px 18px 0;
  overflow:visible;
  overscroll-behavior-x:auto;
  scroll-snap-type:none;
  border:0;
  border-bottom:5px solid var(--mw-control-ink);
  background:var(--mw-control-paper);
  scrollbar-width:none;
}
#garage[data-station="record"] .life-switchboard::-webkit-scrollbar {
  display:none;
}
#garage[data-station="record"] .life-switchboard::-webkit-scrollbar-track {
  border-top:2px solid var(--mw-control-ink);
  background:var(--mw-control-paper-dim);
}
#garage[data-station="record"] .life-switchboard::-webkit-scrollbar-thumb {
  border:2px solid var(--mw-control-paper-dim);
  background:var(--mw-control-red);
}

#garage[data-station="record"] .life-switch {
  display:grid;
  grid-template-columns:auto;
  gap:3px;
  min-width:0;
  min-height:50px;
  padding:8px 12px 7px;
  border:2px solid var(--mw-control-ink);
  border-bottom:0;
  border-radius:0;
  background:var(--mw-control-paper-dim);
  color:var(--mw-control-ink);
  clip-path:polygon(0 0,84% 0,100% 14px,100% 100%,0 100%);
  text-align:left;
  scroll-snap-align:none;
  transform:none;
  transition:background-color 140ms ease;
}

#garage[data-station="record"] .life-switch:hover { background:var(--mw-control-paper); }
#garage[data-station="record"] .life-switch[aria-pressed="true"] {
  min-height:60px;
  background:var(--mw-control-red);
  color:var(--mw-control-paper);
  transform:none;
}

#garage:not([data-focus])[data-station="record"] .life-switch {
  grid-template-columns:minmax(max-content,1fr) auto;
  grid-template-rows:1fr;
  column-gap:10px;
  align-items:center;
}
#garage[data-station="record"] .life-switch-lamp { display:none; }
#garage[data-station="record"] .life-switch strong {
  overflow:visible;
  font:800 16px/1 var(--face-display);
  text-overflow:clip;
}
#garage[data-station="record"] .life-switch small { color:inherit; font-size:11px; }
#garage[data-station="record"] .life-switch:focus-visible { outline:3px solid var(--mw-control-yellow); outline-offset:-5px; }

/* The five permits are the open ledger's pages, not a short row of cards floating above an empty desk. */
@media (min-width:701px) {
  #garage[data-station="record"] .slot-car-license-rack {
    min-height:590px;
    align-items:stretch;
  }

  #garage[data-station="record"] .slot-car-license {
    min-height:590px;
    align-content:start;
  }
}

@media (max-width:700px) {
  #garage .garage-directory {
    gap:20px;
    min-height:72px;
    margin:0;
    padding:8px 12px 11px;
    scroll-padding-inline:12px;
  }
  #garage .garage-directory::before { top:18px; }
  /* No labels here: the name is centred beside its object again. */
  #garage .garage-directory a { grid-template-columns:26px auto; align-items:center; min-height:52px; }
  #garage .garage-directory a::before { transform:scale(.86); transform-origin:center; }
  #garage .garage-directory a[data-station-object="book"]::before { transform:scale(.86) skewY(-4deg); }
  /* Above the active station's underline, not on it. */
  #garage .garage-directory a::after { top:31px; width:26px; }
  #garage .garage-station-copy small { display:none; }
  #garage .garage-directory .garage-station-copy { grid-row:1 / 3; align-self:center; }
  #garage .garage-station-copy strong { font-size:16px; }
  #garage .garage-directory a[aria-current="page"] { transform:translateY(0); }

  #garage:not([data-focus])[data-station="car"] .actions { grid-template-columns:1fr; padding-inline:12px; }
  #garage .action[data-mechanism="entry-ticket"],
  #garage .action[data-mechanism="ignition-key"] { width:100%; min-height:56px; }

  #garage:not([data-focus])[data-station="car"] > .actions > #refresh.action[data-mechanism="reset-pull"]:not([hidden]) {
    margin-top:44px;
  }

  #garage:not([data-focus])[data-station="car"] > .actions > #recall.action[data-mechanism="call-lever"] {
    grid-template-columns:38px minmax(0,1fr);
    height:46px;
    min-height:46px;
    margin-top:44px;
    padding:4px 9px 4px 5px;
    box-shadow:3px 3px 0 #655c4c;
  }

  #garage:not([data-focus])[data-station="car"] > .actions > #refresh:not([hidden]) ~ #recall.action[data-mechanism="call-lever"] {
    margin-top:12px;
  }

  #garage:not([data-focus])[data-station="car"] #recall .recall-transmitter {
    width:31px;
    height:34px;
    border-width:2px;
    border-radius:3px 3px 8px 8px;
    box-shadow:inset 0 0 0 2px var(--mw-control-metal);
  }

  #garage:not([data-focus])[data-station="car"] #recall .recall-transmitter::before {
    left:12px;
    top:3px;
    width:5px;
    height:18px;
    border-width:1px;
  }

  #garage:not([data-focus])[data-station="car"] #recall .recall-transmitter::after {
    left:7px;
    bottom:4px;
    width:14px;
    height:6px;
    border-width:2px;
  }

  #garage:not([data-focus])[data-station="car"] #recall .recall-label { font-size:16px; }
  #garage:not([data-focus])[data-station="car"] #recall :is(.recall-state,.recall-call) { display:none; }

  #garage .race-controls {
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    padding:14px 10px;
    border-left-width:6px;
  }
  #garage .power-button { width:76px; min-width:76px; height:76px; min-height:76px; padding-top:40px; font-size:13px; }
  #garage .power-button::before { top:11px; width:28px; height:28px; }
  #garage .control-readout { grid-column:1 / -1; min-height:64px; }

  /* The phone keeps the ledger's visible index instead of turning it into an unseen horizontal carousel. Four
     finger-sized tabs per row keep the mature Record bounded as progressively revealed desks grow past fifteen. */
  #garage[data-station="record"] .life-switchboard:not([data-switch-count="0"]):not([data-switch-count="1"]) {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:3px;
    min-height:0;
    padding:9px 10px 10px;
    overflow:visible;
  }
  #garage[data-station="record"] .life-switch,
  #garage[data-station="record"] .life-switch:nth-child(3n+2),
  #garage[data-station="record"] .life-switch:nth-child(3n) {
    min-width:0;
    min-height:46px;
    padding:7px 8px 6px;
    transform:none;
  }
  #garage[data-station="record"] .life-switch[aria-pressed="true"] { min-height:46px; transform:none; }
  #garage[data-station="record"] .life-switch small { display:none; }
  #garage[data-station="workshop"] .workshop-tune-action { grid-template-columns:minmax(0,1fr) 44px; }
}

@media (prefers-reduced-motion:reduce) {
  #garage .garage-directory a,
  #garage .driver-controls::before,
  #garage[data-station="record"] .life-switch { transition:none; }
  #garage:not([data-focus]) > * { animation:none !important; }
}

}