/* =========================================================
   Paint Booth · phone layout v1 (≤820px)
   Matches the main site's phone experience: car first, one-row
   garage and driver pickers, a quick paint switcher, a 2-up paint
   rack, and the booth console as a bottom tab bar. Layout and look
   only — every data-* hook used by the booth scripts is unchanged.
   `html:not(#pb) body` gives id-level weight over older skins.
   ========================================================= */
@media (max-width: 820px) {
  :root {
    --pb-accent: #e10600;
    --pb-accent-2: #18c2ff;
    --pb-s1: #0f1216; --pb-s2: #151920; --pb-sink: #0a0c0f;
    --pb-line: rgba(255,255,255,.08); --pb-line-2: rgba(255,255,255,.16);
    --pb-ink: #f2f4f6; --pb-ink-2: #b5bcc4; --pb-ink-3: #7c848d;
    --pb-dock: 64px;
    --pb-display: 'Saira Condensed','Arial Narrow',Arial,sans-serif;
    --pb-mono: 'Share Tech Mono',ui-monospace,monospace;
    --pb-stripe: linear-gradient(90deg,var(--pb-accent) 0 38%,#f1f1f1 38% 48%,#7a8087 48% 56%,var(--pb-accent) 56% 72%,#4a6fff 72%);
  }
  html:not(#pb) body { padding-bottom: calc(var(--pb-dock) + env(safe-area-inset-bottom,0px)); }

  /* ---- Header: one slim bar, like the main site ---- */
  html:not(#pb) body .site-header__utility { display: none !important; }
  html:not(#pb) body .site-header__inner { height: 60px !important; min-height: 0 !important; gap: 12px !important; }
  html:not(#pb) body .site-header .brand { height: 44px !important; flex: 0 1 168px !important; }
  html:not(#pb) body .site-header .menu-toggle { width: 44px !important; height: 44px !important; padding: 10px !important; border-radius: 8px !important; }
  html:not(#pb) body :is(.mobile-menu,.mobile-scrim) { top: 63px !important; }

  /* ---- Facility title: no second logo, metrics as one row ---- */
  html:not(#pb) body .aw-facility-hud { display: grid !important; gap: 10px !important; padding: 16px 16px 12px !important; min-height: 0 !important; }
  html:not(#pb) body .aw-hud-logo { display: none !important; }
  html:not(#pb) body .aw-hud-brand { display: grid !important; gap: 4px !important; padding: 0 !important; }
  html:not(#pb) body .aw-hud-brand span { color: var(--pb-accent) !important; font: 400 .62rem/1 var(--pb-mono) !important; letter-spacing: .18em !important; }
  html:not(#pb) body .aw-hud-brand strong { font: 900 italic 2.3rem/.9 var(--pb-display) !important; letter-spacing: -.03em !important; text-shadow: 4px 6px 0 rgba(0,0,0,.6), 0 0 26px rgba(225,6,0,.3) !important; }
  html:not(#pb) body .aw-hud-brand small { display: none !important; }
  html:not(#pb) body .aw-hud-metrics { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid var(--pb-line) !important; border-radius: 8px !important; background: var(--pb-s1) !important; }
  html:not(#pb) body .aw-hud-metrics > div { display: flex !important; flex-direction: column-reverse; gap: 4px; min-width: 0; padding: 9px 10px !important; border: 0 !important; border-left: 1px solid var(--pb-line) !important; background: none !important; }
  html:not(#pb) body .aw-hud-metrics > div:first-child { border-left: 0 !important; }
  html:not(#pb) body .aw-hud-metrics span { overflow: hidden; color: var(--pb-ink-3) !important; font: 400 .5rem/1.1 var(--pb-mono) !important; letter-spacing: .1em !important; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#pb) body .aw-hud-metrics strong { font: 900 italic 1.35rem/1 var(--pb-display) !important; }
  html:not(#pb) body .aw-hud-metrics small { display: none !important; }

  /* ---- Reading order: car → switcher → garages → drivers → rack ---- */
  html:not(#pb) body .aw-booth-shell { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 0 0 18px !important; }
  html:not(#pb) body .aw-booth-room { order: 1; }
  html:not(#pb) body .aw-control-bench { order: 2; }
  html:not(#pb) body .aw-garage-directory { order: 3; }
  html:not(#pb) body .aw-driver-wall { order: 4; }
  html:not(#pb) body [data-mobile-anchor] { scroll-margin-top: 72px; }

  /* ---- Stage: the car gets the screen ---- */
  html:not(#pb) body .aw-booth-room { min-height: min(68vh, 560px) !important; margin: 0 !important; border: 0 !important; border-block: 1px solid var(--pb-line) !important; }

  /* ---- Rack: switcher row first, then search, picker and paints ---- */
  html:not(#pb) body .aw-control-bench { display: flex !important; flex-direction: column !important; gap: 12px !important; margin: 0 12px !important; padding: 14px !important; border: 1px solid var(--pb-line) !important; border-top: 2px solid var(--pb-accent) !important; border-radius: 10px !important; background: var(--pb-s1) !important; box-shadow: 0 0 34px rgba(225,6,0,.08) !important; }
  html:not(#pb) body .aw-bench-controls { order: -1; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  html:not(#pb) body .aw-nav-controls { display: grid !important; grid-template-columns: 1fr 1.25fr 1fr !important; gap: 8px !important; }
  html:not(#pb) body .aw-nav-controls button { min-height: 48px !important; border: 1px solid var(--pb-line-2) !important; border-radius: 8px !important; background: var(--pb-s2) !important; color: var(--pb-ink) !important; font: 800 italic .95rem/1 var(--pb-display) !important; letter-spacing: .04em !important; clip-path: none !important; }
  html:not(#pb) body .aw-nav-controls [data-random-paint] { border-color: rgba(255,255,255,.4) !important; background: linear-gradient(180deg,#ff3b33,var(--pb-accent) 45%,#9e0400) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px rgba(225,6,0,.35) !important; }
  html:not(#pb) body .aw-bench-label { display: none !important; }
  html:not(#pb) body .aw-rack-find { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  html:not(#pb) body .aw-rack-find > label:first-child { grid-column: 1 / -1; display: grid !important; gap: 6px; }
  html:not(#pb) body .aw-rack-find > label:first-child span { color: var(--pb-ink-3) !important; font: 400 .6rem/1 var(--pb-mono) !important; letter-spacing: .14em !important; }
  html:not(#pb) body .aw-rack-find input[type="search"] { min-height: 46px !important; padding: 0 14px !important; border: 1px solid var(--pb-line-2) !important; border-radius: 8px !important; background: var(--pb-sink) !important; color: var(--pb-ink) !important; font: 400 1rem/1 system-ui,sans-serif !important; }
  html:not(#pb) body .aw-rack-find button { min-height: 40px !important; padding: 0 14px !important; border: 1px solid var(--pb-line-2) !important; border-radius: 8px !important; background: transparent !important; color: var(--pb-ink-2) !important; }
  html:not(#pb) body .aw-rack-ready-toggle { display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px; color: var(--pb-ink-2) !important; }
  html:not(#pb) body .aw-mobile-quick-picker { margin: 0 !important; padding: 12px !important; border: 1px solid var(--pb-line) !important; border-radius: 8px !important; background: var(--pb-sink) !important; }
  html:not(#pb) body .aw-mobile-quick-picker select { min-height: 46px !important; border-radius: 8px !important; font-size: 16px !important; }
  /* Two rows that swipe sideways: every paint stays one thumb-flick away
     without turning the page into a 40-card scroll. */
  html:not(#pb) body .aw-paint-rack { display: grid !important; grid-auto-flow: column !important; grid-template-rows: repeat(2,auto) !important; grid-template-columns: none !important; grid-auto-columns: calc(50% - 4px) !important; gap: 8px !important; max-height: none !important; margin: 0 -14px !important; padding: 0 14px 4px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scroll-padding-inline: 14px; scrollbar-width: none; }
  html:not(#pb) body .aw-paint-rack::-webkit-scrollbar { display: none; }
  html:not(#pb) body .aw-paint-rack > button { scroll-snap-align: start; }
  html:not(#pb) body .aw-paint-rack > button { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid var(--pb-line) !important; border-radius: 8px !important; background: var(--pb-s2) !important; text-align: left; clip-path: none !important; }
  html:not(#pb) body .aw-paint-rack > button img { width: 100% !important; height: 92px !important; object-fit: cover; color: transparent; font-size: 0; background: radial-gradient(circle at 50% 45%,#1d2126,#0b0c0f 70%) !important; border: 0 !important; }
  html:not(#pb) body .aw-paint-rack > button > span { display: grid !important; gap: 4px; padding: 9px 10px 10px !important; }
  html:not(#pb) body .aw-paint-rack > button strong { overflow: hidden; font: 800 italic 1rem/1.05 var(--pb-display) !important; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#pb) body .aw-paint-rack > button small { color: var(--pb-ink-3) !important; font: 400 .62rem/1.2 var(--pb-mono) !important; }
  html:not(#pb) body .aw-paint-rack > button i { justify-self: start; }
  html:not(#pb) body .aw-paint-rack > button.is-active { border-color: var(--pb-accent) !important; box-shadow: 0 0 0 1px var(--pb-accent), 0 0 22px rgba(225,6,0,.3) !important; }

  /* ---- Garages and drivers: one swipeable row each ---- */
  html:not(#pb) body :is(.aw-garage-directory,.aw-driver-wall) { display: block !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; }
  html:not(#pb) body :is(.aw-garage-directory,.aw-driver-wall) .aw-rail-heading { display: flex !important; align-items: baseline; gap: 8px; margin: 0 16px 8px !important; padding: 0 !important; border: 0 !important; background: none !important; }
  html:not(#pb) body :is(.aw-garage-directory,.aw-driver-wall) .aw-rail-heading > span { display: none !important; }
  html:not(#pb) body :is(.aw-garage-directory,.aw-driver-wall) .aw-rail-heading strong { font: 900 italic 1.4rem/1 var(--pb-display) !important; text-shadow: 3px 4px 0 rgba(0,0,0,.55) !important; }
  html:not(#pb) body :is(.aw-garage-directory,.aw-driver-wall) .aw-rail-heading small { color: var(--pb-ink-3) !important; font: 400 .62rem/1 var(--pb-mono) !important; letter-spacing: .12em !important; }
  html:not(#pb) body :is(.aw-rail-note,.aw-driver-wall-foot,.aw-stall-group-label) { display: none !important; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; max-height: none !important; padding: 0 16px 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scrollbar-width: none; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls)::-webkit-scrollbar { display: none; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls) > button { flex: 0 0 auto !important; display: grid !important; gap: 4px !important; width: auto !important; min-width: 128px !important; max-width: 200px; min-height: 0 !important; padding: 10px 12px !important; border: 1px solid var(--pb-line) !important; border-top: 2px solid var(--league,var(--pb-line-2)) !important; border-radius: 8px !important; background: var(--pb-s1) !important; color: var(--pb-ink) !important; text-align: left; scroll-snap-align: start; clip-path: none !important; box-shadow: none !important; }
  html:not(#pb) body .aw-directory-list > button > span,html:not(#pb) body .aw-directory-list > button > i { display: none !important; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls) > button strong { overflow: hidden; font: 800 italic 1.05rem/1 var(--pb-display) !important; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls) > button small { overflow: hidden; color: var(--pb-ink-3) !important; font: 400 .58rem/1.25 var(--pb-mono) !important; text-overflow: ellipsis; white-space: nowrap; }
  html:not(#pb) body .aw-driver-controls > button em { justify-self: start; font: 400 .6rem/1 var(--pb-mono) !important; font-style: normal !important; }
  html:not(#pb) body .aw-driver-controls .aw-stall-badges { display: none !important; }
  html:not(#pb) body :is(.aw-directory-list,.aw-driver-controls) > button.is-active { border-color: var(--pb-accent) !important; background: linear-gradient(180deg,rgba(225,6,0,.16),var(--pb-s1)) !important; box-shadow: 0 0 18px rgba(225,6,0,.22) !important; }
  html:not(#pb) body .aw-facility-instruction { display: none !important; }

  /* ---- Booth console → bottom tab bar ---- */
  html:not(#pb) body .aw-mobile-booth-console { position: fixed !important; z-index: 880 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 0 !important; width: auto !important; height: calc(var(--pb-dock) + env(safe-area-inset-bottom,0px)) !important; margin: 0 !important; padding: 0 max(4px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-right,0px)) !important; border: 0 !important; border-top: 1px solid var(--pb-line) !important; border-radius: 0 !important; background: linear-gradient(180deg,rgba(13,14,17,.95),rgba(5,6,8,.98)) !important; box-shadow: 0 -18px 40px rgba(0,0,0,.45) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: none !important; }
  html:not(#pb) body .aw-mobile-booth-console:before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 2px; background: var(--pb-stripe); }
  html:not(#pb) body .aw-mobile-booth-console button { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; color: #8d949a !important; font: 600 .66rem/1 system-ui,-apple-system,sans-serif !important; letter-spacing: .01em !important; text-transform: none !important; -webkit-tap-highlight-color: transparent; }
  html:not(#pb) body .aw-mobile-booth-console button:active { color: #fff !important; }
  html:not(#pb) body .aw-mobile-booth-console svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  html:not(#pb) body .aw-mobile-booth-console button > span { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; color: inherit !important; font: inherit !important; }

  /* Info sheet and Scene/Export dialogs sit above the tab bar. */
  html:not(#pb) body .aw-booth-info { bottom: calc(var(--pb-dock) + env(safe-area-inset-bottom,0px)) !important; max-height: min(72vh,620px) !important; border-radius: 16px 16px 0 0 !important; }
  html:not(#pb) body .aw-booth-info.is-collapsed { transform: translateY(calc(100% + var(--pb-dock) + 40px)) !important; }
  html:not(#pb) body .aw-info-actions { position: sticky; bottom: 0; display: grid !important; grid-template-columns: 1fr auto; gap: 8px !important; padding: 12px !important; background: rgba(9,10,13,.97) !important; border-top: 1px solid var(--pb-line) !important; }
  html:not(#pb) body .aw-info-actions [data-copy-id] { min-height: 46px !important; border-radius: 8px !important; }
  html.aw-scene-open:not(#pb) body .aw-mobile-booth-console,html.aw-export-open:not(#pb) body .aw-mobile-booth-console { display: none !important; }

  /* ---- Archive: two-up cards ---- */
  html:not(#pb) body .aw-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  html:not(#pb) body .aw-collection-card { border-radius: 8px !important; overflow: hidden; }
  html:not(#pb) body .aw-collection-card img { color: transparent; font-size: 0; }
  html:not(#pb) body .aw-collection-filters { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  html:not(#pb) body .aw-collection-filters::-webkit-scrollbar { display: none; }
  html:not(#pb) body .aw-collection-filters button { flex: 0 0 auto !important; }
}
@media (max-width: 360px) {
  html:not(#pb) body .aw-hud-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html:not(#pb) body .aw-collection-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  /* Chip contents: label above detail, never squeezed to one letter. */
  html:not(#pb) body .aw-directory-list > button { min-width: 150px !important; grid-template-columns: minmax(0,1fr) !important; }
  html:not(#pb) body .aw-directory-list > button > div { display: grid !important; gap: 4px !important; min-width: 0 !important; width: auto !important; }
  html:not(#pb) body .aw-driver-controls > button { display: grid !important; grid-template-columns: 1fr !important; min-width: 160px !important; }
  html:not(#pb) body .aw-driver-controls .aw-stall-identity { display: grid !important; gap: 4px !important; min-width: 0 !important; }
  html:not(#pb) body .aw-driver-controls > button em { margin-top: 4px; padding: 3px 6px !important; border: 1px solid rgba(47,210,122,.45) !important; border-radius: 4px; }
  /* Archive cards: short copy, consistent height. */
  html:not(#pb) body .aw-collection-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .82rem !important; line-height: 1.4 !important; }
  html:not(#pb) body .aw-collection-copy h3 { font-size: 1.05rem !important; line-height: 1.05 !important; overflow-wrap: anywhere; }
}