/* ===========================================================================
   Studio garage skin (#3082, Labs :studio) — the editor in the garage design
   language. Design source: docs/concepts/editor-garage/ (build.mjs is the
   token and component reference); record: docs/concepts/editor-garage/built/.
   ===========================================================================

   STUDIO-ONLY, AND ONLY THROUGH THIS FILE. designer_v3/show.html.erb links
   this sheet (and the Google Fonts it needs) from `content_for :head` behind
   the same `studio_on` that renders every other studio fragment, so with
   Labs :studio off the page does not even name it — the classic editor is
   byte-identical, markup and CSS. It is page-scoped (layouts/_stylesheets
   leaves it out of the site bundle), `data-turbo-track="dynamic"` like
   designer_v3.css, and every selector below starts at `.rt-editor[data-studio]`
   (studio_garage_css_test.rb fails on one that doesn't). Nothing here may
   restyle anything outside the studio.

   It is a SKIN over designer_v3.css, not a second design system: the studio
   still renders the classic chrome's components (.rt-btn, .rt-tool, .rt-sec,
   .rt-num …), so most of the change is the token remap on the root plus a
   handful of component rules. The classic chrome contract
   (designer_v3_chrome_test.rb — achromatic ladder, one emerald accent, no
   cast shadows) governs designer_v3.css; the garage is the studio's own
   language and is held by its own test.

   THE LANGUAGE (docs/concepts/editor-garage/garage-language-sheet.webp):
   dark neutral greys; ONE signal orange (#ff7a1a) for the go button, the
   armed part and the gizmo — never F1 red; a chosen option is a SOLID BONE
   BLOCK, never a tint; labels in Barlow Condensed caps, sentences in
   sentence case; every changing number in tabular figures; moulded buttons
   (lit top edge, a real shadow, 1 px press-in); hazard tape in two places
   only (the Show launch panel and a blocking warning).

   FONTS: Barlow Condensed 500/600, Inter Tight, JetBrains Mono — exactly the
   families and weights analysis v3's pit_wall.css already loads, through the
   same Google Fonts URL (CSP already allows it). No 700/800 cut: the pit
   board and headings are 600.

   LAYERS: same statement as designer_v3.css and application.css (a chrome
   test holds all three equal). A Turbo visit appends this sheet after the
   Tailwind bundle, so without it `rt` would sort after `utilities` and beat
   `hidden`.
   ------------------------------------------------------------------------- */
@layer properties, theme, base, components, rt, utilities;

@layer rt {
  /* ── Tokens ────────────────────────────────────────────────────────────
     The garage palette (--g-*), then the classic ladder remapped onto it so
     every component designer_v3.css already draws picks it up. */
  .rt-editor[data-studio] {
    --g-asphalt: #0d0d0f;   /* the canvas gutter                       */
    --g-black: #141416;     /* wells: fields, cards, the tray wall     */
    --g-carbon: #1c1c1f;    /* docked panels                           */
    --g-steel: #27272b;     /* a control / drawer front at rest        */
    --g-slate: #3d3d43;     /* edges, slider tracks                    */
    --g-smoke: #9a9aa0;     /* quiet text — 4.8:1 on steel             */
    --g-mist: #b1b1b6;      /* labels                                  */
    --g-bone: #f4f2ee;      /* ink, and the chosen-option block        */
    /* The analysis page's four phase hues: a colour means the same thing on
       both pages. Canvas and telemetry only — never a button. */
    --g-brake: #fb7185;
    --g-corner: #fbbf24;
    --g-power: #34d399;
    --g-flat: #60a5fa;
    --g-best: #b79cff;
    /* The one signal. */
    --g-signal: #ff7a1a;
    --g-signal-deep: #e2620a;
    --g-on-signal: #170a00;

    --g-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --g-text: "Inter Tight", system-ui, -apple-system, sans-serif;
    --g-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* Moulded: a highlight on the top edge and a real shadow under it. */
    --g-mould: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
    --g-mould-go: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
    --g-lift-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.35);
    --g-press: 120ms ease-out;
    --g-focus: 0 0 0 2px var(--g-black), 0 0 0 4px var(--g-signal);
    --g-hazard: repeating-linear-gradient(-45deg, var(--g-corner) 0 7px, var(--g-black) 7px 14px);

    /* The classic ladder, remapped. s4 (an editable field) is a dark WELL in
       the garage, not a lighter step. */
    --rt-s0: var(--g-asphalt);
    --rt-s1: var(--g-carbon);
    --rt-s2: var(--g-steel);
    --rt-s3: #2e2e33;
    --rt-s4: var(--g-black);
    --rt-s5: var(--g-slate);
    --rt-seam: var(--g-slate);
    --rt-lift: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
    --rt-text: var(--g-bone);
    --rt-text-2: var(--g-mist);
    --rt-text-3: var(--g-smoke);
    --rt-accent: var(--g-signal);
    --rt-accent-dim: var(--g-signal-deep);
    --rt-accent-fg: var(--g-on-signal);
    --rt-warn: var(--g-corner);
    --rt-danger: var(--g-brake);
    --rt-font-num: var(--g-mono);
    --rt-fs-body: 12px;
    --rt-fs-label: 11px;
    --rt-row: 30px;

    font-family: var(--g-text);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Type ─────────────────────────────────────────────────────────────
     Labels and headings: condensed caps. Numbers: mono, tabular. */
  .rt-editor[data-studio] .rt-label,
  .rt-editor[data-studio] .rt-sec__title,
  .rt-editor[data-studio] .rt-tool__label,
  .rt-editor[data-studio] .rt-stat__k,
  .rt-editor[data-studio] .rt-split-pane__label {
    font-family: var(--g-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .rt-editor[data-studio] .rt-label { font-size: 11px; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-num-text,
  .rt-editor[data-studio] .rt-num__value,
  .rt-editor[data-studio] .rt-read__value,
  .rt-editor[data-studio] .rt-stat__v,
  .rt-editor[data-studio] .rt-act__meta,
  .rt-editor[data-studio] .rt-sec__meta { font-family: var(--g-mono); font-variant-numeric: tabular-nums; }

  /* ── The moulded button ───────────────────────────────────────────────
     Every .rt-btn in the studio. Chosen = a solid bone block. The go colour
     is reserved for .rt-btn--primary standing alone (Save & Analyse). */
  .rt-editor[data-studio] .rt-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--g-slate);
    border-radius: 7px;
    background: var(--g-mould), var(--g-steel);
    box-shadow: var(--g-lift-shadow);
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform var(--g-press), box-shadow var(--g-press);
  }
  .rt-editor[data-studio] .rt-btn:hover { background: var(--rt-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-btn:active:not([disabled]) { transform: translateY(1px) scale(0.975); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
  .rt-editor[data-studio] .rt-btn:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-btn.active,
  .rt-editor[data-studio] .rt-btn[aria-pressed="true"],
  .rt-editor[data-studio] .rt-seg > .rt-btn.rt-btn--primary {
    background: var(--g-bone);
    border-color: var(--g-bone);
    color: var(--g-black);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  }
  .rt-editor[data-studio] .rt-btn--primary {
    background: var(--g-mould-go), var(--g-signal);
    border-color: var(--g-signal-deep);
    color: var(--g-on-signal);
    font-weight: 600;
  }
  .rt-editor[data-studio] .rt-btn--primary:hover { background: var(--rt-lift), var(--g-mould-go), var(--g-signal); color: var(--g-on-signal); }
  .rt-editor[data-studio] .rt-btn[disabled],
  .rt-editor[data-studio] .rt-btn--primary[disabled] {
    background: var(--g-steel);
    border-color: var(--g-slate);
    color: var(--g-smoke);
    box-shadow: none;
    opacity: 0.55;
  }

  /* ── Segmented control: the same thing, several ways ─────────────────── */
  .rt-editor[data-studio] .rt-seg {
    display: inline-flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--g-slate);
    border-radius: 7px;
    overflow: hidden;
    background: var(--g-black);
  }
  .rt-editor[data-studio] .rt-seg > .rt-btn {
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--g-smoke);
    font-size: 11px;
    letter-spacing: 0.07em;
  }
  .rt-editor[data-studio] .rt-seg > .rt-btn + .rt-btn { border-left: 1px solid var(--g-slate); }
  .rt-editor[data-studio] .rt-seg > .rt-btn:hover:not([disabled]) { background: var(--rt-lift); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-seg > .rt-btn.active,
  .rt-editor[data-studio] .rt-seg > .rt-btn[aria-pressed="true"],
  .rt-editor[data-studio] .rt-seg > .rt-btn.rt-btn--primary {
    background: var(--g-bone);
    color: var(--g-black);
    box-shadow: none;
  }
  .rt-editor[data-studio] .rt-seg > .rt-btn[disabled] { background: transparent; opacity: 0.4; }

  /* ── Fields ───────────────────────────────────────────────────────────── */
  .rt-editor[data-studio] .rt-input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--g-slate);
    border-radius: 7px;
    background: var(--g-black);
    color: var(--g-bone);
    font-size: 13px;
  }
  .rt-editor[data-studio] .rt-input:focus { outline: none; border-color: var(--g-bone); box-shadow: 0 0 0 1px var(--g-bone); }
  .rt-editor[data-studio] .rt-check { border-radius: 6px; }
  .rt-editor[data-studio] input[type="checkbox"] { accent-color: var(--g-bone); }

  /* ── The numeric row as a garage slider: label and value on top, a track
     filled to the handle underneath. The row is still the stretched native
     range (click, drag, arrows, screen readers), and --rt-fill is still what
     the panels controller writes — only the drawing changed. Typed rows
     (.rt-num--field) have no range and keep a plain well. */
  .rt-editor[data-studio] .rt-num {
    border-radius: 6px;
    background: var(--g-black);
    border: 1px solid var(--g-steel);
  }
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input) {
    height: 38px;
    align-items: flex-start;
    padding-top: 6px;
    border-color: transparent;
    background: transparent;
  }
  /* The fill and, at its end, the handle (a bone knob in a signal ring). */
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input)::before {
    top: auto;
    bottom: 2px;
    left: 4px;
    height: 15px;
    width: max(15px, calc(var(--rt-fill, 0%) * 0.95 + 8px));
    background:
      radial-gradient(circle 7.5px at calc(100% - 7.5px) 50%, #ffffff 0 3.5px, var(--g-signal) 4px 7px, transparent 7.5px),
      linear-gradient(var(--g-bone), var(--g-bone)) 4px 50% / calc(100% - 11px) 5px no-repeat;
    z-index: 1;
  }
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input)::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    height: 5px;
    border-radius: 9px;
    background: var(--g-slate);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input) > .rt-num__label { font-family: var(--g-display); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input):hover { background: transparent; }
  .rt-editor[data-studio] .rt-num:has(> .rt-num__input:focus-visible) { box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-num:focus-within { box-shadow: inset 0 0 0 1px var(--g-bone); }

  /* ── Readouts and rows ────────────────────────────────────────────────── */
  .rt-editor[data-studio] .rt-read { min-height: 28px; }
  .rt-editor[data-studio] .rt-read__value { color: var(--g-bone); font-size: 12px; }
  .rt-editor[data-studio] .rt-act {
    min-height: 32px;
    border-radius: 6px;
    background: var(--g-mould), var(--g-steel);
    border: 1px solid var(--g-slate);
    box-shadow: var(--g-lift-shadow);
    color: var(--g-bone);
    transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-act:hover { background: var(--rt-lift), var(--g-mould), var(--g-steel); }
  .rt-editor[data-studio] .rt-act:active:not([disabled]) { transform: translateY(1px) scale(0.985); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
  .rt-editor[data-studio] .rt-act:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-act--danger { color: var(--g-brake); }
  .rt-editor[data-studio] .rt-act > span:first-child { white-space: nowrap; }
  /* The meta is mono (wider than the classic face): let it shrink with an
     ellipsis rather than push the row past the rail ("Karting" was cut off
     at the rail's edge). */
  .rt-editor[data-studio] .rt-act > .rt-act__meta { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The one signal is Save / Go to the grid / an armed part: the venue
     banner's "Turn into a venue" is an ordinary moulded button here. */
  .rt-editor[data-studio] [data-venue-banner] .rt-btn--primary { background: var(--g-mould), var(--g-steel); border-color: var(--g-slate); color: var(--g-bone); }
  .rt-editor[data-studio] [data-venue-banner] .rt-btn--primary:hover { background: var(--rt-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-act.rt-btn--primary { background: var(--g-mould-go), var(--g-signal); border-color: var(--g-signal-deep); color: var(--g-on-signal); font-family: var(--g-display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-empty__note { color: var(--g-smoke); height: auto; min-height: 28px; line-height: 1.4; }

  /* ── Section headers: the drawer front ────────────────────────────────
     A rail section's head is a moulded drawer with a handle; an open one
     lights its handle. The body is a dark well under it. */
  .rt-editor[data-studio] .rt-sec { margin-bottom: 6px; }
  .rt-editor[data-studio] .rt-sec__head {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--g-slate);
    border-radius: 7px;
    background: var(--g-mould), var(--g-steel);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
  .rt-editor[data-studio] .rt-sec__head--flat {
    height: 30px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .rt-editor[data-studio] .rt-sec__caret {
    width: 18px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: #5a5a61;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    transform: none;
  }
  .rt-editor[data-studio] .rt-sec[open] > .rt-sec__head > .rt-sec__caret { transform: none; background: var(--g-bone); }
  .rt-editor[data-studio] .rt-sec__title { font-size: 12px; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-sec[open] > .rt-sec__head > .rt-sec__title { color: var(--g-bone); }
  .rt-editor[data-studio] .rt-sec__meta { font-size: 11px; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-sec__meta.is-armed { color: var(--g-signal); }
  .rt-editor[data-studio] .rt-sec[open] > .rt-sec__body,
  .rt-editor[data-studio] .rt-sec > .rt-sec__body {
    padding: 8px 8px 6px;
  }
  .rt-editor[data-studio] details.rt-sec[open] > .rt-sec__body {
    margin-top: 4px;
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-black);
  }

  /* ── The kicker: a 3 px signal bar before a region's title ─────────── */
  .rt-editor[data-studio] .rt-studio-sheet-handle__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--g-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--g-bone);
  }
  .rt-editor[data-studio] .rt-studio-sheet-handle__title::before {
    content: "";
    flex: none;
    width: 3px;
    height: 20px;
    background: var(--g-signal);
  }
  .rt-editor[data-studio] .rt-studio-sheet-handle__hint { color: var(--g-smoke); font-size: 12px; }

  /* ── Floating surfaces ────────────────────────────────────────────────── */
  .rt-editor[data-studio] .rt-float {
    background: rgba(20, 20, 22, 0.86);
    border: 1px solid rgba(61, 61, 67, 0.9);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .rt-editor[data-studio] .rt-studio-more {
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-carbon);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 6px;
  }

  /* Every control keeps a pointer (the global base rule covers buttons,
     summary and role=button); these are the studio's own clickables that
     aren't one of those. */
  .rt-editor[data-studio] label.rt-check,
  .rt-editor[data-studio] a.rt-act,
  .rt-editor[data-studio] a.rt-tool { cursor: pointer; }
  .rt-editor[data-studio] button[disabled],
  .rt-editor[data-studio] .rt-btn[disabled] { cursor: default; }
}

/* ---------------------------------------------------------------------------
   The calmer top bar (docs/concepts/editor-ui-pass/topbar/ inventory)
   ---------------------------------------------------------------------------
   Left: the RTD mark, the track name (with the kicker bar) and the mode chip.
   Centre: Shape / Dress / Show. Right: the save hint and Save & Analyse.
   designer-v3-studio#_arrangeTopbar moves the rest out (view switch → the
   plan's corner, Drive from here → the inspector, AI feedback → More); Snap,
   Templates and v2 were already in More. The classic wordmark and "v3" stay
   in the DOM, hidden. */
@layer rt {
  .rt-editor[data-studio] .rt-topbar {
    position: relative;
    height: 48px !important;
    gap: 12px;
    padding: 0 12px 0 0;
    background: var(--g-carbon);
    border-bottom: 1px solid var(--g-slate);
  }
  .rt-editor[data-studio] .rt-topbar > h1,
  .rt-editor[data-studio] .rt-topbar > span.rt-text-mute { display: none; }
  .rt-editor[data-studio] .rt-garage-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--rt-tools-w);
    height: 100%;
    border-right: 1px solid var(--g-slate);
    color: var(--g-bone);
    font-size: 22px; /* the mark is 1em tall */
    text-decoration: none;
  }
  .rt-editor[data-studio] .rt-garage-mark:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--g-signal); }

  /* The name: a heading you can type into, behind the kicker bar. */
  .rt-editor[data-studio] .rt-topbar > [data-controller="auth-gate"] { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .rt-editor[data-studio] .rt-topbar > [data-controller="auth-gate"]::before {
    content: "";
    flex: none;
    width: 3px;
    height: 22px;
    background: var(--g-signal);
  }
  .rt-editor[data-studio] .rt-topbar input.rt-input {
    height: 34px;
    padding: 0 6px;
    border-color: transparent;
    background: transparent;
    font-family: var(--g-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
  }
  /* The chip sits right after the name (the mockup), not 200 px on: the
     field is as wide as what's typed where the browser can size it. The
     classic 200 px is an inline style, hence !important; the phone keeps
     its full-width field. */
  @media (min-width: 768px) {
    .rt-editor[data-studio] .rt-topbar input.rt-input { field-sizing: content; width: auto !important; min-width: 7ch; max-width: 320px; }
  }
  .rt-editor[data-studio] .rt-topbar input.rt-input:hover { border-color: var(--g-slate); background: var(--g-black); }
  .rt-editor[data-studio] .rt-topbar input.rt-input:focus { border-color: var(--g-bone); background: var(--g-black); box-shadow: none; }

  /* The mode chip: a fact, styled as a chip (a button that opens it). */
  .rt-editor[data-studio] .rt-studio-mode__chip {
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--g-slate);
    border-radius: 5px;
    background: var(--g-black);
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-mode__chip:hover { color: var(--g-bone); background: var(--rt-lift), var(--g-black); }
  .rt-editor[data-studio] .rt-studio-mode__chip[aria-expanded="true"] { border-color: var(--g-bone); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-studio-mode__chip:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-mode__pop {
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-carbon);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
  .rt-editor[data-studio] .rt-studio-mode__option.active { box-shadow: inset 3px 0 0 var(--g-bone); }
  .rt-editor[data-studio] .rt-studio-mode__danger { color: var(--g-brake); }

  /* Centre: the stages, numbered. Chosen = the bone block with its number
     knocked into a black box. Centred on the bar, not between its ends. */
  .rt-editor[data-studio] .rt-topbar > .rt-studio-stages {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    gap: 4px;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .rt-editor[data-studio] .rt-studio-stages > .rt-studio-stage {
    min-width: 0;
    height: 32px;
    gap: 8px;
    padding: 0 14px 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--g-smoke);
    font-size: 13px;
    letter-spacing: 0.07em;
  }
  .rt-editor[data-studio] .rt-studio-stages > .rt-studio-stage + .rt-studio-stage { border-left: 0; }
  .rt-editor[data-studio] .rt-studio-stages > .rt-studio-stage:hover { background: var(--rt-lift); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-studio-stages > .rt-studio-stage.active {
    background: var(--g-bone);
    color: var(--g-black);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  }
  .rt-editor[data-studio] .rt-studio-stage__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--g-steel);
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    opacity: 1;
  }
  .rt-editor[data-studio] .rt-studio-stage.active .rt-studio-stage__n { background: var(--g-black); color: var(--g-bone); }

  /* Right: the save hint explains a disabled Save, so it sits beside it. */
  .rt-editor[data-studio] .rt-topbar > [data-designer-v3-target="saveHint"] {
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-corner);
  }
  .rt-editor[data-studio] .rt-topbar > [data-designer-v3-target="saveButton"] { height: 34px; padding: 0 14px; font-size: 13px; }

  /* Drive from here, in the inspector: a small pill at its top. */
  .rt-editor[data-studio] .rt-garage-drive { display: flex; justify-content: flex-end; }
  .rt-editor[data-studio] .rt-garage-drive:not(:has(> :not(.hidden))) { display: none; }
  .rt-editor[data-studio] .rt-garage-drive > .rt-btn { height: 26px; margin: 2px 0 6px; font-size: 11px; }

  /* AI feedback (admin): the track-critique element sits at the editor root
     with its opener hidden — More's "AI feedback" row opens it, and its
     fixed chat panel stays up when More closes. */
  .rt-editor[data-studio] > .rt-garage-critique { position: absolute; width: 0; height: 0; }
  .rt-editor[data-studio] > .rt-garage-critique > .rt-btn { display: none; }
  .rt-editor[data-studio] > .rt-garage-critique > [data-track-critique-target="panel"] { max-width: calc(100vw - 24px); }

  /* The floating view switch: bottom-right of the plan (the plan HALF in a
     split, beside the 3D it controls). */
  .rt-editor[data-studio] .rt-garage-viewsw {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rt-editor[data-studio] .rt-garage-viewsw > .rt-seg { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
  /* In a split the plan half is narrow and its scale ruler (drawn on the
     canvas, centred at the bottom) ran under the switch: lift it clear. */
  .rt-editor[data-studio] .flex-1:has(> .rt-split-pane:not(.hidden)) .rt-garage-viewsw { bottom: 40px; }
  /* Event Day's "Crowd flow" toggle on the plan (built with inline styles by
     designer-v3-studio#_syncFlowToggle): the moulded button, bone when on. */
  .rt-editor[data-studio] .rt-flow-toggle {
    border: 1px solid var(--g-slate) !important;
    border-radius: 7px !important;
    background: var(--g-mould), var(--g-steel) !important;
    box-shadow: var(--g-lift-shadow);
    color: var(--g-bone) !important;
    font-family: var(--g-display) !important;
    font-size: 12px !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-flow-toggle[aria-pressed="true"] { background: var(--g-bone) !important; color: var(--g-black) !important; }
  .rt-editor[data-studio] .rt-flow-toggle:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-garage-viewsw > .rt-seg > .rt-btn { height: 28px; padding: 0 11px; }

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-topbar { height: 56px !important; gap: 8px; padding: 0 8px; }
    .rt-editor[data-studio] .rt-garage-mark { display: none; }
    .rt-editor[data-studio] .rt-topbar input.rt-input { height: 44px; }
    /* Every row and button a finger can reach is 44 px (the classic phone
       rules scope this to the rail; the garage's own sizes must not undo it
       in More, the chip's popover or the top bar). */
    .rt-editor[data-studio] .rt-act,
    .rt-editor[data-studio] .rt-btn { min-height: 44px; }
    /* 44 px, not the mockup's 40: a finger's target. */
    .rt-editor[data-studio] .rt-studio-mode__chip { width: 44px; height: 44px; padding: 0; border-radius: 7px; background: var(--g-mould), var(--g-steel); }
    .rt-editor[data-studio] .rt-topbar > [data-designer-v3-target="saveButton"] { height: 44px; }
    .rt-editor[data-studio] .rt-garage-viewsw { right: 10px; bottom: 10px; }
    .rt-editor[data-studio] .rt-garage-viewsw > .rt-seg > .rt-btn { height: 44px; min-width: 44px; padding: 0 14px; }
    .rt-editor[data-studio] .rt-garage-drive > .rt-btn { height: 44px; }
  }
}

/* ---------------------------------------------------------------------------
   The tool rail, the phone's tool strip and tab bar, the status strip
   ---------------------------------------------------------------------------
   The chosen tool is a solid bone block (the classic editor's is emerald);
   the go colour stays for Save and the armed part. A tool with a single-key
   shortcut (lib/studio_stages.js TOOL_SHORTCUTS) shows its key under the
   label on a desktop. The status strip reads like an instrument panel —
   mono figures — and the lap estimate is a small pit board. */
@layer rt {
  .rt-editor[data-studio] .rt-tools {
    padding: 8px 6px;
    background: var(--g-black);
    border-right: 1px solid var(--g-slate);
  }
  .rt-editor[data-studio] .rt-tool {
    gap: 5px;
    padding: 8px 0 7px;
    border-radius: 7px;
    color: var(--g-mist);
    transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-studio-primary > .rt-tool { padding: 9px 0 8px; }
  .rt-editor[data-studio] .rt-tool:hover { background: var(--rt-lift); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-tool:active:not(:disabled) { transform: translateY(1px) scale(0.975); }
  .rt-editor[data-studio] .rt-tool:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-tool.active,
  .rt-editor[data-studio] .rt-tool.active:hover {
    background: var(--g-bone);
    color: var(--g-black);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  .rt-editor[data-studio] .rt-tool .rt-icon { width: 20px; height: 20px; }
  .rt-editor[data-studio] .rt-tool__label { font-size: 10px; letter-spacing: 0.08em; }
  @media (min-width: 768px) {
  .rt-editor[data-studio] .rt-tools .rt-tool[data-tool="draw"] > .rt-tool__label::after { content: "P"; }
  .rt-editor[data-studio] .rt-tools .rt-tool[data-tool="edit"] > .rt-tool__label::after { content: "E"; }
  .rt-editor[data-studio] .rt-tools .rt-tool[data-tool="delete"] > .rt-tool__label::after { content: "X"; }
  .rt-editor[data-studio] .rt-tools .rt-tool[data-tool="pit-lane"] > .rt-tool__label::after { content: "L"; }
  .rt-editor[data-studio] .rt-tools .rt-tool[data-tool="facility"] > .rt-tool__label::after { content: "B"; }
  }
  .rt-editor[data-studio] .rt-tools .rt-tool > .rt-tool__label::after {
    display: block;
    margin-top: 3px;
    font-family: var(--g-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--g-smoke);
  }
  .rt-editor[data-studio] .rt-tools .rt-tool.active > .rt-tool__label::after { color: #55555b; }
  .rt-editor[data-studio] .rt-studio-more .rt-tool > .rt-tool__label::after { content: none; }
  .rt-editor[data-studio] .rt-tools__seam { background: var(--g-slate); }
  /* More's rows. */
  .rt-editor[data-studio] .rt-studio-more .rt-act,
  .rt-editor[data-studio] .rt-studio-more .rt-tool.rt-studio-more__item { border-radius: 6px; }
  .rt-editor[data-studio] .rt-studio-more .rt-tool.rt-studio-more__item .rt-tool__label { font-family: var(--g-text); font-weight: 500; font-size: 12px; }

  /* ── Status strip ── */
  .rt-editor[data-studio] .rt-status {
    align-items: center;
    background: var(--g-carbon);
    border-top: 1px solid var(--g-slate);
    font-family: var(--g-mono);
  }
  .rt-editor[data-studio] .rt-stat { align-items: baseline; padding-right: 20px; }
  .rt-editor[data-studio] .rt-stat__k { font-family: var(--g-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-stat__v { font-size: 11px; color: var(--g-bone); }
  .rt-editor[data-studio] .rt-status [data-designer-v3-target="autosaveStatus"] { font-family: var(--g-mono); color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-status > .rt-btn { height: 22px; padding: 0 8px; background: transparent; border-color: transparent; box-shadow: none; font-size: 11px; }
  .rt-editor[data-studio] .rt-status > .rt-btn:hover { background: var(--rt-lift); }
  /* The lap estimate: a small pit board — black plate, inset rim, the time
     in condensed figures. Still Shape-only (designer_v3.css hides it in the
     other stages), still the same statLapTime target. */
  .rt-editor[data-studio] .rt-stat:has(> [data-designer-v3-target="statLapTime"]) {
    align-self: center;
    align-items: center;
    gap: 8px;
    height: 22px;
    margin-right: 20px;
    padding: 0 8px;
    border: 1px solid #2e2e33;
    border-radius: 5px;
    background: #09090a;
    box-shadow: inset 0 0 0 2px #111113;
  }
  .rt-editor[data-studio] .rt-stat:has(> [data-designer-v3-target="statLapTime"]) > .rt-stat__k { font-family: var(--g-display); font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
  .rt-editor[data-studio] [data-designer-v3-target="statLapTime"] { font-family: var(--g-display); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

  /* ── Phone: the tool strip and the tab bar ── */
  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-tools { padding: 0 6px; background: var(--g-carbon); border-top: 1px solid var(--g-slate); }
    .rt-editor[data-studio] .rt-studio-tabs {
      counter-reset: studio-stage;
      gap: 6px;
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
      background: var(--g-carbon);
      border-top: 1px solid var(--g-slate);
    }
    .rt-editor[data-studio] .rt-studio-tab {
      flex-direction: row;
      gap: 8px;
      border-radius: 8px;
      color: var(--g-smoke);
      font-family: var(--g-display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .rt-editor[data-studio] .rt-studio-tab > .rt-icon { display: none; }
    .rt-editor[data-studio] .rt-studio-tab::before {
      counter-increment: studio-stage;
      content: counter(studio-stage);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: var(--g-steel);
      color: var(--g-mist);
      font-size: 13px;
      letter-spacing: 0;
    }
    .rt-editor[data-studio] .rt-studio-tab.active { background: var(--g-bone); color: var(--g-black); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
    .rt-editor[data-studio] .rt-studio-tab.active::before { background: var(--g-black); color: var(--g-bone); }
    .rt-editor[data-studio] .rt-studio-tab:focus-visible { outline: none; box-shadow: var(--g-focus); }
  }
}

/* ---------------------------------------------------------------------------
   The inspector: section cards, readouts, the venue grade checklist
   ---------------------------------------------------------------------------
   The selection inspector is a card (a dark well under the panel head); its
   head names the selection and its meta ("T1", "Grandstand") is a bone
   badge. Read-only numbers in it (a stand's view, the venue's seats and
   garages) are readout tiles. The grade card is a ladder over a checklist:
   ticked what's there, a gap with ADD, which arms the tray card that fills
   it (designer-v3-studio-inspector#addForGrade → the tray's own pick). */
@layer rt {
  .rt-editor[data-studio] .rt-studio-inspector {
    margin: 2px 0 8px;
    padding: 4px 6px 6px;
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-black);
  }
  .rt-editor[data-studio] .rt-studio-inspector:not([data-kind="none"]) > .rt-sec__head { box-shadow: none; }
  .rt-editor[data-studio] .rt-studio-inspector > .rt-sec__head { justify-content: flex-start; gap: 8px; padding: 0 2px; }
  .rt-editor[data-studio] .rt-studio-inspector > .rt-sec__head > .rt-sec__title { font-size: 12px; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-studio-inspector > .rt-sec__head > .rt-sec__meta:not(:empty) {
    order: -1;
    margin-left: 0;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--g-bone);
    color: var(--g-black);
    font-family: var(--g-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  .rt-editor[data-studio] .rt-studio-inspector__more-head { border-radius: 6px; font-family: var(--g-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-mist); }

  /* Readout tiles: the venue's numbers with nothing selected, a stand's view. */
  .rt-editor[data-studio] [data-designer-v3-studio-inspector-target="stats"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin: 6px 0;
  }
  .rt-editor[data-studio] [data-designer-v3-studio-inspector-target="stats"][hidden] { display: none; }
  .rt-editor[data-studio] [data-designer-v3-studio-inspector-target="stats"] > .rt-read,
  .rt-editor[data-studio] [data-inspector-row="view"] > .rt-read {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 7px 8px;
    border: 1px solid var(--g-steel);
    border-radius: 6px;
    background: var(--g-carbon);
  }
  .rt-editor[data-studio] [data-designer-v3-studio-inspector-target="stats"] > .rt-read > span:first-child,
  .rt-editor[data-studio] [data-inspector-row="view"] > .rt-read > span:first-child {
    font-family: var(--g-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-smoke);
  }
  .rt-editor[data-studio] [data-designer-v3-studio-inspector-target="stats"] .rt-read__value,
  .rt-editor[data-studio] [data-inspector-row="view"] .rt-read__value {
    margin: 0;
    font-family: var(--g-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--g-bone);
  }

  /* The venue grade card. */
  .rt-editor[data-studio] [data-inspector-row="venue_grade"] {
    margin: 6px 0;
    padding: 10px;
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-carbon);
  }
  .rt-editor[data-studio] [data-inspector-row="venue_grade"] > .rt-read:first-child > [data-grade="badge"] {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--g-power);
    color: #052617;
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] [data-inspector-row="venue_grade"][data-graded="0"] > .rt-read:first-child > [data-grade="badge"],
  .rt-editor[data-studio] [data-inspector-row="venue_grade"][data-kind="unlock"] > .rt-read:first-child > [data-grade="badge"] { background: var(--g-steel); color: var(--g-mist); }
  .rt-editor[data-studio] .rt-garage-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 8px 0 4px; }
  .rt-editor[data-studio] .rt-garage-ladder[hidden] { display: none; }
  .rt-editor[data-studio] .rt-garage-ladder__step {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 4px;
    background: var(--g-steel);
    color: var(--g-smoke);
    font-family: var(--g-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-ladder__step[data-state="reached"] { background: var(--g-power); color: #052617; }
  .rt-editor[data-studio] .rt-garage-ladder__step[data-state="next"] { background: transparent; border: 1px dashed var(--g-power); color: var(--g-power); }
  .rt-editor[data-studio] .rt-garage-to { display: block; margin: 10px 0 4px; color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-garage-to[hidden] { display: none; }
  .rt-editor[data-studio] [data-grade-check] { gap: 8px; min-height: 30px; padding: 0 2px; }
  .rt-editor[data-studio] [data-grade-check] > span:first-child { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--g-bone); }
  .rt-editor[data-studio] [data-grade-check] > span:first-child::before {
    content: "";
    flex: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    /* An empty box is quiet (the mockup's grey), not a warning colour: the
       ADD beside a gap is the call to action. */
    border: 1.5px solid var(--g-smoke);
    border-radius: 3px;
  }
  .rt-editor[data-studio] [data-grade-check="met"] > span:first-child::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--g-power);
    color: #052617;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .rt-editor[data-studio] .rt-garage-add { flex: none; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 11px; }
  .rt-editor[data-studio] [data-grade="paddock"],
  .rt-editor[data-studio] [data-grade="notes"] { font-size: 12px; }
  /* Sightlines: the heat toggle reads as on/off — a bone block when on. */
  .rt-editor[data-studio] button[data-grade="heat"][aria-pressed="true"] { background: var(--g-bone); border-color: var(--g-bone); color: var(--g-black); }
  .rt-editor[data-studio] button[data-grade="heat"][aria-pressed="true"] .rt-act__meta { color: #44444a; }

  /* ── Event Day · S5 (docs/concepts/event-day-ux/SPEC.md §9): the studio
     loop owns every rule from here to the end of the Weekend readiness block. */
  /* The "Weekend readiness" block (lib/event_day/readiness_view.js, Labs
     :event_day) under the grade. A gap row carries a label, the sessions it
     costs and "built / needs" — three lines' worth in a rail 280 px wide, so
     it can't be a fixed-height .rt-read: the label wraps in its own column,
     the costs sit under it, the value never wraps and ADD keeps its size.
     Without this every row overprinted the next. */
  .rt-editor[data-studio] [data-weekend-readiness] { margin: 6px 0; }
  .rt-editor[data-studio] [data-weekend-readiness] > .rt-read:first-child .rt-read__value { font-family: var(--g-display); font-size: 14px; }
  .rt-editor[data-studio] [data-weekend-readiness] [data-weekend="tier"] { padding: 0 var(--rt-pad); color: var(--g-mist); }
  .rt-editor[data-studio] .rt-weekend-days { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; padding: 0 var(--rt-pad); }
  .rt-editor[data-studio] .rt-weekend-day { padding: 2px 7px; border-radius: 4px; background: var(--g-steel); color: var(--g-mist); font-size: 11px; }
  .rt-editor[data-studio] .rt-weekend-day:not([data-cancelled="0"]) { color: var(--g-brake); }
  .rt-editor[data-studio] [data-weekend-check] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 4px 8px;
    height: auto;
    min-height: 28px;
    padding-block: 5px;
  }
  .rt-editor[data-studio] [data-weekend-check] > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
  .rt-editor[data-studio] [data-weekend-check] > .rt-read__value { white-space: nowrap; line-height: 1.3; }
  .rt-editor[data-studio] .rt-weekend-costs { display: block; margin-top: 2px; color: var(--g-smoke); font-size: 10.5px; line-height: 1.3; }
  .rt-editor[data-studio] [data-weekend-check][data-status="missing"] > span:first-child { color: var(--g-bone); }
  /* The block wears the grade card's frame (SPEC §4.9, audit B15). */
  .rt-editor[data-studio] [data-weekend-readiness] { padding: 10px; border: 1px solid var(--g-slate); border-radius: 9px; background: var(--g-carbon); }
  .rt-editor[data-studio] [data-weekend-readiness][hidden] { display: none; }
  .rt-editor[data-studio] [data-weekend-readiness] [data-weekend="tier"] { padding: 0 2px; }
  .rt-editor[data-studio] [data-weekend-readiness] .rt-weekend-days { padding: 0; }

  /* The Weekend strip: pinned at the top of the inspector in Dress, whatever
     is selected. Score + tier on one line, a chip per day and Run below; the
     toast under it says what the last edit did. */
  .rt-editor[data-studio] .rt-weekend-strip { position: relative; margin: 0 0 8px; padding: 9px 10px 10px; border: 1px solid var(--g-slate); border-radius: 9px; background: var(--g-black); }
  .rt-editor[data-studio] .rt-weekend-strip[hidden], .rt-editor[data-studio] .rt-weekend-strip [hidden] { display: none; }
  .rt-editor[data-studio] .rt-weekend-strip[data-lost]:not([data-lost="0"]) { border-left: 3px solid var(--g-brake); }
  .rt-editor[data-studio] .rt-weekend-strip__head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .rt-editor[data-studio] .rt-weekend-strip__label { color: var(--g-smoke); font: 600 11px/1 var(--g-display); letter-spacing: 0.12em; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-weekend-strip__score { color: var(--g-smoke); font: 500 12px/1 var(--g-mono); white-space: nowrap; }
  .rt-editor[data-studio] .rt-weekend-strip__score b { color: var(--g-bone); font: 600 20px/1 var(--g-mono); }
  .rt-editor[data-studio] .rt-weekend-strip__tier { min-width: 0; overflow: hidden; color: var(--g-mist); font: 600 13px/1.2 var(--g-display); letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .rt-editor[data-studio] .rt-weekend-strip__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
  .rt-editor[data-studio] .rt-weekend-strip .rt-weekend-days { flex: 1; margin: 0; padding: 0; }
  .rt-editor[data-studio] .rt-weekend-run { height: 28px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .rt-editor[data-studio] .rt-weekend-run span { font-size: 10px; }
  /* Day chips: buttons (they open the day's sessions); a dot AND a word for
     a day that loses anything — colour is never the only signal. */
  .rt-editor[data-studio] .rt-weekend-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--g-slate); border-radius: 6px; background: var(--g-mould), var(--g-steel); box-shadow: var(--g-lift-shadow); color: var(--g-bone); font: 600 12px/1 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: transform var(--g-press); }
  .rt-editor[data-studio] .rt-weekend-chip:hover { border-color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-weekend-chip:active { transform: translateY(1px); }
  .rt-editor[data-studio] .rt-weekend-chip:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-weekend-chip[aria-expanded="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
  .rt-editor[data-studio] .rt-weekend-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-power); }
  .rt-editor[data-studio] .rt-weekend-chip[data-state="reduced"] i { background: var(--g-corner); }
  .rt-editor[data-studio] .rt-weekend-chip[data-state="cancelled"] i { background: var(--g-brake); }
  .rt-editor[data-studio] .rt-weekend-chip__word { color: var(--g-brake); font-weight: 600; letter-spacing: 0.04em; }
  .rt-editor[data-studio] .rt-weekend-chip[data-state="reduced"] .rt-weekend-chip__word { color: var(--g-corner); }
  .rt-editor[data-studio] .rt-weekend-chip[aria-expanded="true"] .rt-weekend-chip__word { color: #9f1239; }
  .rt-editor[data-studio] .rt-weekend-chip[data-state="reduced"][aria-expanded="true"] .rt-weekend-chip__word { color: #7c4a03; }
  /* A day's sessions (a chip's detail). */
  .rt-editor[data-studio] .rt-weekend-detail { margin-top: 8px; }
  .rt-editor[data-studio] .rt-weekend-sessions { margin: 0; padding: 0; list-style: none; }
  .rt-editor[data-studio] .rt-weekend-sessions li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; padding: 4px 0; border-top: 1px solid var(--g-steel); }
  .rt-editor[data-studio] .rt-weekend-sessions li:first-child { border-top: 0; }
  .rt-editor[data-studio] .rt-weekend-sessions__clock { color: var(--g-smoke); font: 500 11px/1.3 var(--g-mono); }
  .rt-editor[data-studio] .rt-weekend-sessions__label { color: var(--g-bone); font-size: 12px; line-height: 1.3; }
  .rt-editor[data-studio] .rt-weekend-star { color: var(--g-signal); font-weight: 400; }
  .rt-editor[data-studio] .rt-weekend-sessions__status { color: var(--g-power); font: 600 11px/1.3 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-weekend-sessions li[data-status="reduced"] .rt-weekend-sessions__status { color: var(--g-corner); }
  .rt-editor[data-studio] .rt-weekend-sessions li[data-status="cancelled"] .rt-weekend-sessions__status { color: var(--g-brake); }
  .rt-editor[data-studio] .rt-weekend-sessions li[data-status="cancelled"] .rt-weekend-sessions__label { color: var(--g-smoke); text-decoration: line-through; }
  .rt-editor[data-studio] .rt-weekend-sessions__reason { grid-column: 2 / 4; color: var(--g-smoke); font-size: 11px; line-height: 1.3; }
  /* The placement's consequence: rises in under the strip, then goes. */
  .rt-editor[data-studio] .rt-weekend-toast { margin-top: 8px; padding: 7px 10px; border-left: 3px solid var(--g-power); border-radius: 6px; background: rgba(52, 211, 153, 0.12); color: var(--g-bone); font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(-4px); transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .rt-editor[data-studio] .rt-weekend-toast.in { opacity: 1; transform: none; }
  .rt-editor[data-studio] .rt-weekend-toast[data-tone="down"] { border-left-color: var(--g-brake); background: rgba(251, 113, 133, 0.12); }
  .rt-editor[data-studio] .rt-weekend-toast[data-tone="same"] { border-left-color: var(--g-smoke); background: var(--g-steel); }
  /* Back from drive's Fix: the way back to the same weekend. */
  .rt-editor[data-studio] .rt-weekend-return { display: flex; align-items: stretch; gap: 4px; margin: -2px 0 8px; }
  .rt-editor[data-studio] .rt-weekend-return__go { display: flex; flex: 1; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--g-bone); border-radius: 6px; background: var(--g-bone); color: var(--g-black); font: 600 12px/1.1 var(--g-display); letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-weekend-return__go:focus-visible, .rt-editor[data-studio] .rt-weekend-return__x:focus-visible, .rt-editor[data-studio] .rt-weekend-run:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-weekend-return__detail { margin-left: auto; color: #44444a; font: 500 11px/1 var(--g-mono); letter-spacing: 0; text-transform: none; }
  .rt-editor[data-studio] .rt-weekend-return__x { width: 30px; border: 1px solid var(--g-slate); border-radius: 6px; background: var(--g-steel); color: var(--g-mist); font-size: 16px; line-height: 1; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) {
    .rt-editor[data-studio] .rt-weekend-toast, .rt-editor[data-studio] .rt-weekend-chip { transition: none; transform: none; }
  }
  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-weekend-chip, .rt-editor[data-studio] .rt-weekend-run, .rt-editor[data-studio] .rt-weekend-return__go { min-height: 44px; }
    .rt-editor[data-studio] .rt-weekend-return__x { width: 44px; }
  }
  @media (pointer: coarse) {
    .rt-editor[data-studio] .rt-weekend-chip, .rt-editor[data-studio] .rt-weekend-run, .rt-editor[data-studio] .rt-weekend-return__go { min-height: 44px; }
    .rt-editor[data-studio] .rt-weekend-return__x { width: 44px; }
  }
  /* ── end Event Day · S5 (new S5 rules go above this line) ── */

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-garage-add { height: 44px; min-width: 56px; }
    .rt-editor[data-studio] [data-grade-check] { min-height: 46px; }
  }
}

/* ---------------------------------------------------------------------------
   The Dress tray as a parts wall
   ---------------------------------------------------------------------------
   Drawer fronts (the groups) with a handle and a count; a pegboard wall of
   part cards, each with its part code ("GS-01", lib/studio_tray.js partCode)
   and "×3" when that many are on the track. ARMED is the card's footer as a
   solid signal block — the badge ("Stamp · Esc") is the same element the
   tray has always lit. A locked pack's card wears a LIFETIME tag (hover:
   the pack's name). The tray is taller than the classic strip so a card has
   a picture, a name and a meta line; one fixed height per breakpoint, so
   switching drawers never re-cuts the canvas. */
@layer rt {
  .rt-editor[data-studio] { --rt-tray-h: 206px; --rt-tray-head-h: 42px; }
  .rt-editor[data-studio]:has(.rt-studio-tray[data-collapsed="1"]) { --rt-tray-h: var(--rt-tray-head-h); }
  .rt-editor[data-studio] .rt-studio-tray { background: var(--g-carbon); border-top: 1px solid var(--g-slate); }
  .rt-editor[data-studio] .rt-studio-tray__head {
    align-items: flex-end;
    gap: 8px;
    padding: 0 10px 0 10px;
    background: var(--g-black);
    border-bottom: 1px solid var(--g-slate);
  }
  .rt-editor[data-studio] .rt-studio-tray__groups { gap: 4px; align-self: stretch; align-items: flex-end; }
  .rt-editor[data-studio] .rt-studio-tray__group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--g-slate);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--g-mould), var(--g-steel);
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-tray__group::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #5a5a61;
  }
  .rt-editor[data-studio] .rt-studio-tray__group:hover { background: var(--rt-lift), var(--g-mould), var(--g-steel); color: var(--g-bone); }
  .rt-editor[data-studio] .rt-studio-tray__group.active {
    height: 38px;
    background: var(--g-carbon);
    color: var(--g-bone);
    box-shadow: none;
  }
  .rt-editor[data-studio] .rt-studio-tray__group.active::before { background: var(--g-signal); }
  .rt-editor[data-studio] .rt-studio-tray__group:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-tray__count {
    position: absolute;
    top: 3px;
    right: 5px;
    font-family: var(--g-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--g-smoke);
  }
  .rt-editor[data-studio] .rt-studio-tray__hint {
    align-self: center;
    font-family: var(--g-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-smoke);
  }
  .rt-editor[data-studio] .rt-studio-tray__row,
  .rt-editor[data-studio] .rt-studio-tray__collapse { align-self: center; height: 26px; }
  .rt-editor[data-studio] .rt-studio-tray__row.active { background: var(--g-bone); border-color: var(--g-bone); color: var(--g-black); }
  .rt-editor[data-studio] .rt-studio-tray__skipped { color: var(--g-signal); }

  /* The wall. */
  .rt-editor[data-studio] .rt-studio-tray__cards {
    gap: 8px;
    padding: 10px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.2px, transparent 1.3px);
    background-size: 14px 14px;
    background-position: 3px 3px;
  }
  .rt-editor[data-studio] .rt-studio-card {
    align-items: stretch;
    width: 124px;
    padding: 0 0 22px;
    overflow: hidden;
    border: 1px solid var(--g-slate);
    border-radius: 8px;
    background: var(--g-black);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    color: var(--g-bone);
    text-align: left;
    transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-studio-card:hover:not(:disabled):not([data-state="armed"]):not([data-state="row"]):not([data-state="draw"]) { background: var(--g-black); border-color: var(--g-mist); }
  .rt-editor[data-studio] .rt-studio-card:active:not(:disabled) { transform: translateY(1px) scale(0.975); }
  .rt-editor[data-studio] .rt-studio-card:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-card__img {
    flex: none;
    width: 100%;
    height: 90px;
    padding: 8px;
    box-sizing: border-box;
    background: radial-gradient(80% 80% at 50% 45%, #2c2c31 0%, #18181b 100%);
    border-bottom: 1px solid var(--g-steel);
  }
  .rt-editor[data-studio] .rt-studio-card__label {
    margin: 0;
    padding: 7px 8px 0;
    font-family: var(--g-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-align: left;
    text-transform: uppercase;
    -webkit-line-clamp: 1;
  }
  /* Row / draw: the meta line under the name. */
  .rt-editor[data-studio] .rt-studio-card__kind {
    top: auto;
    right: auto;
    left: 8px;
    bottom: 7px;
    font-family: var(--g-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--g-smoke);
  }
  .rt-editor[data-studio] .rt-studio-card__code {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 4px;
    border-radius: 3px;
    background: rgba(10, 10, 11, 0.72);
    color: var(--g-mist);
    font-family: var(--g-mono);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
  }
  .rt-editor[data-studio] .rt-studio-card__qty {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    border-radius: 3px;
    background: var(--g-bone);
    color: var(--g-black);
    font-family: var(--g-display);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
  }
  .rt-editor[data-studio] .rt-studio-card__qty[hidden],
  .rt-editor[data-studio] .rt-studio-card[data-pack-locked] .rt-studio-card__qty { display: none; }

  /* ARMED: the footer is a solid signal block, the badge its meta line. */
  .rt-editor[data-studio] .rt-studio-card[data-state="armed"],
  .rt-editor[data-studio] .rt-studio-card[data-state="row"],
  .rt-editor[data-studio] .rt-studio-card[data-state="draw"] {
    border-color: var(--g-signal);
    background: linear-gradient(var(--g-black) 0 90px, var(--g-signal) 90px);
    box-shadow: 0 0 0 1px var(--g-signal), 0 2px 6px rgba(0, 0, 0, 0.5);
    color: var(--g-on-signal);
  }
  .rt-editor[data-studio] .rt-studio-card__badge {
    top: auto;
    bottom: 7px;
    left: 8px;
    right: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #5a2a00;
    font-family: var(--g-mono);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rt-editor[data-studio] .rt-studio-tray[data-row-mode="1"] .rt-studio-card[data-rowable] .rt-studio-card__kind { color: var(--g-bone); }

  /* A locked pack's part: the LIFETIME tag (the pack's name on hover). */
  .rt-editor[data-studio] .rt-studio-card__lock {
    left: auto;
    right: 6px;
    top: 6px;
    gap: 4px;
    padding: 3px 5px;
    border-radius: 3px;
    background: var(--g-best);
    color: var(--g-black);
    font-family: var(--g-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-card__lock svg { width: 10px; height: 10px; }
  .rt-editor[data-studio] .rt-studio-card[data-pack-locked]:not(:hover):not(:focus-visible):not(.is-peek) .rt-studio-card__lock::after { content: "Lifetime"; }
  .rt-editor[data-studio] .rt-studio-card[data-pack-locked] .rt-studio-card__img { opacity: 0.5; }

  /* The rows nudge (PLAN-studio-objects-wave Phase 1). A card that can lay a
     row sits in a slot with its own Row button — a sibling, never nested in
     the card's button — on the footer's right, where the armed badge stops
     short of it. */
  .rt-editor[data-studio] .rt-studio-card-slot { position: relative; flex: none; display: flex; }
  .rt-editor[data-studio] .rt-studio-card-slot > .rt-studio-card .rt-studio-card__badge { right: 56px; }
  .rt-editor[data-studio] .rt-studio-card__rowbtn {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--g-slate);
    border-radius: 4px;
    background: var(--g-mould), var(--g-steel);
    color: var(--g-bone);
    font-family: var(--g-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: pan-x;
  }
  .rt-editor[data-studio] .rt-studio-card__rowbtn svg { width: 12px; height: 12px; flex: none; }
  .rt-editor[data-studio] .rt-studio-card__rowbtn:hover { border-color: var(--g-mist); }
  .rt-editor[data-studio] .rt-studio-card__rowbtn[aria-pressed="true"] { background: var(--g-bone); border-color: var(--g-bone); color: var(--g-black); }
  .rt-editor[data-studio] .rt-studio-card__rowbtn:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-card[data-row-hinted] { border-color: var(--g-bone); }

  /* The one-time hint over its card: a bone callout with a pointer down to
     the card (--rt-row-hint-arrow is set by the controller). */
  .rt-editor[data-studio] .rt-studio-row-hint {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: stretch;
    max-width: 340px;
    border-radius: 6px;
    background: var(--g-bone);
    color: var(--g-black);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
  .rt-editor[data-studio] .rt-studio-row-hint[hidden] { display: none; }
  .rt-editor[data-studio] .rt-studio-row-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(var(--rt-row-hint-arrow, 50%) - 7px);
    border: 7px solid transparent;
    border-top-color: var(--g-bone);
  }
  .rt-editor[data-studio] .rt-studio-row-hint__go {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 4px 6px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--g-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }
  .rt-editor[data-studio] .rt-studio-row-hint__kicker {
    flex: none;
    padding: 3px 6px;
    border-radius: 3px;
    background: var(--g-black);
    color: var(--g-bone);
    font-family: var(--g-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-row-hint__go:hover .rt-studio-row-hint__copy { text-decoration: underline; }
  .rt-editor[data-studio] .rt-studio-row-hint__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(20, 20, 22, 0.15);
    background: transparent;
    color: var(--g-black);
    cursor: pointer;
  }
  .rt-editor[data-studio] .rt-studio-row-hint__close svg { width: 14px; height: 14px; }
  .rt-editor[data-studio] .rt-studio-row-hint__go:focus-visible,
  .rt-editor[data-studio] .rt-studio-row-hint__close:focus-visible { outline: 2px solid var(--g-signal); outline-offset: -2px; }

  /* The four venue styles in the Styles drawer. */
  .rt-editor[data-studio] .rt-studio-style {
    width: 176px;
    border: 1px solid var(--g-slate);
    border-radius: 8px;
    background: var(--g-black);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  }
  .rt-editor[data-studio] .rt-studio-style:hover:not(:disabled) { border-color: var(--g-bone); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }
  .rt-editor[data-studio] .rt-studio-style:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-style__img { height: 112px; }
  .rt-editor[data-studio] .rt-studio-style__label { padding: 6px 8px 0; font-family: var(--g-display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] { --rt-tray-h: 176px; --rt-tray-head-h: 48px; }
    .rt-editor[data-studio] .rt-studio-tray__head { padding: 0 4px; }
    .rt-editor[data-studio] .rt-studio-tray__group { height: 44px; padding: 0 12px; }
    .rt-editor[data-studio] .rt-studio-tray__group.active { height: 46px; }
    .rt-editor[data-studio] .rt-studio-tray__count { display: none; }
    .rt-editor[data-studio] .rt-studio-tray__row,
    .rt-editor[data-studio] .rt-studio-tray__collapse { height: 44px; min-width: 44px; }
    .rt-editor[data-studio] .rt-studio-tray__cards { padding: 8px 6px; gap: 6px; }
    .rt-editor[data-studio] .rt-studio-card { width: 104px; }
    .rt-editor[data-studio] .rt-studio-card__img { width: 100%; height: 70px; padding: 6px; }
    .rt-editor[data-studio] .rt-studio-card[data-state="armed"],
    .rt-editor[data-studio] .rt-studio-card[data-state="row"],
    .rt-editor[data-studio] .rt-studio-card[data-state="draw"] { background: linear-gradient(var(--g-black) 0 70px, var(--g-signal) 70px); }
    .rt-editor[data-studio] .rt-studio-card[data-state="armed"] .rt-studio-card__label,
    .rt-editor[data-studio] .rt-studio-card[data-state="row"] .rt-studio-card__label,
    .rt-editor[data-studio] .rt-studio-card[data-state="draw"] .rt-studio-card__label { visibility: visible; }
    .rt-editor[data-studio] .rt-studio-card__badge { top: auto; bottom: 6px; padding: 0; border-radius: 0; line-height: 1.15; }
    .rt-editor[data-studio] .rt-studio-style { width: 132px; }
    .rt-editor[data-studio] .rt-studio-style__img { height: 80px; }
  }
}

/* ---------------------------------------------------------------------------
   Show: the launch panel — and the two places hazard tape is allowed
   ---------------------------------------------------------------------------
   Hazard tape appears exactly twice in the studio: across the top of the
   launch panel, and on the one blocking warning (the pit-lane note a closed
   track gets before an Assetto Corsa export). The cards are a radio group;
   the chosen one is the bone block; "Go to the grid" is the one signal. */
@layer rt {
  .rt-editor[data-studio] .rt-garage-launch {
    overflow: hidden;
    border: 1px solid var(--g-slate);
    border-radius: 12px;
    background: rgba(12, 12, 13, 0.92);
  }
  .rt-editor[data-studio] .rt-garage-launch__tape { height: 8px; background: var(--g-hazard); }
  .rt-editor[data-studio] .rt-garage-launch > .rt-sec__head { height: 44px; padding: 0 12px; }
  .rt-editor[data-studio] .rt-garage-launch > .rt-sec__head > .rt-sec__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--g-bone);
    font-size: 22px;
    letter-spacing: 0.04em;
  }
  .rt-editor[data-studio] .rt-garage-launch > .rt-sec__head > .rt-sec__title::before {
    content: "";
    width: 3px;
    height: 22px;
    background: var(--g-signal);
  }
  .rt-editor[data-studio] .rt-garage-launch > .rt-sec__body { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 12px; }
  .rt-editor[data-studio] .rt-garage-launch__cards { display: flex; flex-direction: column; gap: 6px; }
  .rt-editor[data-studio] .rt-garage-launch__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 11px 12px 12px;
    border: 1px solid var(--g-slate);
    border-radius: 10px;
    background: rgba(20, 20, 22, 0.86);
    color: var(--g-bone);
    font: inherit;
    text-align: left;
    transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-garage-launch__card:hover { border-color: var(--g-mist); }
  .rt-editor[data-studio] .rt-garage-launch__card:active { transform: translateY(1px) scale(0.985); }
  .rt-editor[data-studio] .rt-garage-launch__card:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-garage-launch__card[aria-checked="true"] { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }
  .rt-editor[data-studio] .rt-garage-launch__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--g-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-launch__title .rt-icon { width: 20px; height: 20px; color: var(--g-mist); }
  .rt-editor[data-studio] .rt-garage-launch__card[aria-checked="true"] .rt-garage-launch__title .rt-icon { color: var(--g-black); }
  .rt-editor[data-studio] .rt-garage-launch__sub { color: var(--g-smoke); font-size: 12px; }
  .rt-editor[data-studio] .rt-garage-launch__card[aria-checked="true"] .rt-garage-launch__sub { color: #44444a; }
  .rt-editor[data-studio] .rt-garage-launch__go {
    height: 46px;
    margin: 6px 0 4px;
    gap: 8px;
    border-radius: 9px;
    font-size: 18px;
    text-decoration: none;
  }
  .rt-editor[data-studio] .rt-garage-launch__go .rt-icon { width: 15px; height: 15px; }
  /* Conditions (fidelity P1): time of day and car, two quiet selects above
     Go — drive's own settings, carried across. */
  .rt-editor[data-studio] .rt-garage-launch__conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
  .rt-editor[data-studio] .rt-garage-launch__cond { display: flex; flex-direction: column; gap: 3px; color: var(--g-smoke); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-garage-launch__cond select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--g-slate);
    border-radius: 8px;
    background: rgba(20, 20, 22, 0.86);
    color: var(--g-bone);
    font: 500 13px/1 var(--g-text);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
  }
  .rt-editor[data-studio] .rt-garage-launch__cond select:focus-visible { outline: none; box-shadow: var(--g-focus); }

  /* The blocking warning: tape down its edge instead of the amber rule. */
  .rt-editor[data-studio] [data-designer-v3-panels-target="pitLaneWarning"] {
    position: relative;
    padding-left: 18px;
    border-left: 0;
    border-radius: 8px;
    background: var(--g-black);
  }
  .rt-editor[data-studio] [data-designer-v3-panels-target="pitLaneWarning"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    border-radius: 8px 0 0 8px;
    background: var(--g-hazard);
  }

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-garage-launch__card { min-height: 44px; }
    .rt-editor[data-studio] .rt-garage-launch__cond select { height: 44px; }
  }
}

/* ---------------------------------------------------------------------------
   Shape: the telemetry strip under the plan
   ---------------------------------------------------------------------------
   designer-v3-studio#_drawTelemetry shows it (and sets data-studio-telemetry
   on the root) only in Shape, on a closed lap with an estimate, on a
   desktop. Like the tray, the plan (and a split's 3D pane) GIVE it their
   bottom rather than sit under it, so nothing is drawn behind it; the
   canvas re-cut is the one the tray already causes. */
@layer rt {
  .rt-editor[data-studio] { --g-telemetry-h: 104px; }
  .rt-editor[data-studio][data-studio-stage="shape"][data-studio-telemetry] > .flex-1 > main,
  .rt-editor[data-studio][data-studio-stage="shape"][data-studio-telemetry] > .flex-1 > .rt-split-pane { margin-bottom: var(--g-telemetry-h); }
  .rt-editor[data-studio] .rt-garage-telemetry {
    position: absolute;
    left: var(--rt-tools-w);
    right: 300px;
    bottom: 0;
    z-index: 34;
    display: flex;
    flex-direction: column;
    height: var(--g-telemetry-h);
    padding: 7px 14px 2px;
    border-top: 1px solid var(--g-slate);
    background: #101012;
  }
  .rt-editor[data-studio] .rt-garage-telemetry[hidden] { display: none; }
  .rt-editor[data-studio] .rt-garage-telemetry__head { display: flex; align-items: center; gap: 16px; flex: none; }
  .rt-editor[data-studio] .rt-garage-telemetry__dim { margin-left: 6px; color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-garage-telemetry__legend { display: flex; gap: 12px; }
  .rt-editor[data-studio] .rt-garage-telemetry__legend > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-telemetry__legend > span::before { content: ""; width: 8px; height: 8px; background: var(--phase); }
  .rt-editor[data-studio] .rt-garage-telemetry [data-phase="braking"] { --phase: var(--g-brake); }
  .rt-editor[data-studio] .rt-garage-telemetry [data-phase="cornering"] { --phase: var(--g-corner); }
  .rt-editor[data-studio] .rt-garage-telemetry [data-phase="acceleration"] { --phase: var(--g-power); }
  .rt-editor[data-studio] .rt-garage-telemetry [data-phase="full_throttle"] { --phase: var(--g-flat); }
  .rt-editor[data-studio] .rt-garage-telemetry__read { margin-left: auto; color: var(--g-mist); font-family: var(--g-mono); font-size: 11px; }
  .rt-editor[data-studio] .rt-garage-telemetry__svg { flex: 1 1 auto; width: 100%; min-height: 0; overflow: visible; }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .run { fill: none; stroke: var(--phase); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .grid { stroke: rgba(255, 255, 255, 0.08); }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .axis { fill: var(--g-smoke); font-family: var(--g-mono); font-size: 9px; }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .axis.on { fill: var(--g-bone); font-weight: 700; }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .sel { fill: rgba(244, 242, 238, 0.08); }
  .rt-editor[data-studio] .rt-garage-telemetry__svg .apex { stroke: var(--g-bone); stroke-dasharray: 2 2; }

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-garage-telemetry { display: none !important; }
  }
}

/* ---------------------------------------------------------------------------
   The empty state: the start cards (editor UI pass), in the garage
   --------------------------------------------------------------------------- */
@layer rt {
  .rt-editor[data-studio] .rt-studio-chooser { background: radial-gradient(110% 90% at 50% 0%, #18181b 0%, var(--g-asphalt) 70%); }
  .rt-editor[data-studio] .rt-studio-chooser::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
  }
  .rt-editor[data-studio] .rt-studio-chooser__panel { position: relative; width: min(680px, 100%); }
  .rt-editor[data-studio] .rt-studio-chooser__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--g-bone);
    font-family: var(--g-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-chooser__title::before { content: ""; flex: none; width: 3px; height: 28px; background: var(--g-signal); }
  .rt-editor[data-studio] .rt-studio-chooser__lede { margin: 0 0 16px 13px; color: var(--g-smoke); font-size: 13px; }
  .rt-editor[data-studio] .rt-studio-chooser__cards { gap: 20px; }
  .rt-editor[data-studio] .rt-studio-chooser__card {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--g-slate);
    border-radius: 12px;
    background: var(--g-carbon);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-studio-chooser__card:hover { border-color: var(--g-bone); background: var(--g-carbon); }
  .rt-editor[data-studio] .rt-studio-chooser__card:focus-visible { border-color: var(--g-slate); box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-studio-chooser__card:active { transform: translateY(1px) scale(0.99); }
  .rt-editor[data-studio] .rt-studio-chooser__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--g-slate);
    background: var(--g-black);
    color: var(--g-smoke);
    font-family: var(--g-mono);
    font-size: 10px;
  }
  .rt-editor[data-studio] .rt-studio-chooser__code kbd {
    padding: 4px 8px;
    border: 1px solid var(--g-slate);
    border-radius: 5px;
    background: var(--g-mould), var(--g-steel);
    color: var(--g-mist);
    font-family: var(--g-display);
    font-size: 11px;
    font-weight: 600;
  }
  .rt-editor[data-studio] .rt-studio-chooser__art { width: calc(100% - 24px); margin: 12px 12px 0; border-radius: 4px; }
  .rt-editor[data-studio] .rt-studio-chooser__art path[stroke="#10b981"] { stroke: var(--g-flat); }
  .rt-editor[data-studio] [data-studio-mode-card="map"] .rt-studio-chooser__art path[stroke="#10b981"] { stroke: var(--g-power); }
  .rt-editor[data-studio] .rt-studio-chooser__name {
    padding: 12px 14px 0;
    color: var(--g-bone);
    font-family: var(--g-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-studio-chooser__hint { padding: 5px 14px 14px; color: var(--g-smoke); font-size: 13px; }
  .rt-editor[data-studio] .rt-studio-chooser__templates { margin-top: 22px; }
  .rt-editor[data-studio] .rt-studio-chooser__templates > .rt-label { margin-bottom: 8px; color: var(--g-smoke); }
  .rt-editor[data-studio] .rt-studio-chooser__links { gap: 6px; }
  .rt-editor[data-studio] .rt-studio-chooser__links .rt-act {
    gap: 10px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
  }
  .rt-editor[data-studio] .rt-studio-chooser__links .rt-act::before {
    content: "";
    flex: none;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #5a5a61;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  }
  .rt-editor[data-studio] .rt-studio-chooser__links .rt-act > span:first-child {
    flex: 1;
    font-family: var(--g-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-studio-chooser__title { font-size: 24px; }
    .rt-editor[data-studio] .rt-studio-chooser__cards { gap: 10px; }
    .rt-editor[data-studio] .rt-studio-chooser__art { max-height: 88px; }
    .rt-editor[data-studio] .rt-studio-chooser__links .rt-act { min-height: 44px; }
  }
}

/* ---------------------------------------------------------------------------
   Studio wave 1 (docs/prds/PLAN-ui-audit-2026-09.md) — the audit's quick
   wins on desktop, phone and tablet. Every element here is the studio's
   own or one it already moved; nothing reaches the classic editor.
   ------------------------------------------------------------------------- */
@layer rt {
  /* Show: the Lifetime offer where "Save your track" used to be (plan 0.4). */
  .rt-editor[data-studio] .rt-garage-offer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 8px;
    border: 1px solid var(--g-slate);
    border-radius: 9px;
    background: var(--g-black);
  }
  .rt-editor[data-studio] .rt-garage-offer__title {
    font-family: var(--g-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--g-bone);
  }
  .rt-editor[data-studio] .rt-garage-offer__body { margin: 0; color: var(--g-mist); font-size: 13px; line-height: 1.4; }
  .rt-editor[data-studio] .rt-garage-offer__price { display: flex; align-items: baseline; gap: 8px; }
  .rt-editor[data-studio] .rt-garage-offer__amount { font-family: var(--g-mono); font-size: 22px; font-weight: 600; color: var(--g-bone); font-variant-numeric: tabular-nums; }
  .rt-editor[data-studio] .rt-garage-offer__was { color: var(--g-smoke); font-family: var(--g-mono); }
  .rt-editor[data-studio] .rt-garage-offer__once { color: var(--g-smoke); font-size: 12px; }
  .rt-editor[data-studio] .rt-garage-launch__form { display: block; margin: 0; }
  .rt-editor[data-studio] .rt-garage-launch__form > .rt-garage-launch__go { width: 100%; }

  /* More: the inline confirms (Clear, templates) and the pit-box count. */
  .rt-editor[data-studio] .rt-studio-more__confirm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    margin: 2px 0 4px;
    border: 1px solid var(--g-slate);
    border-radius: 6px;
    background: var(--g-black);
  }
  .rt-editor[data-studio] .rt-studio-more__confirm.hidden { display: none; }
  .rt-editor[data-studio] .rt-studio-more__warn { margin: 0; color: var(--g-bone); font-size: 13px; line-height: 1.35; white-space: normal; }
  .rt-editor[data-studio] .rt-studio-more__confirm-row { display: flex; gap: 6px; }
  .rt-editor[data-studio] .rt-studio-more__confirm-row > * { flex: 1; justify-content: center; }
  .rt-editor[data-studio] .rt-float .rt-studio-more__confirm { margin: 4px; }
  .rt-editor[data-studio] .rt-studio-count { display: block; width: 100%; margin: 0 0 var(--rt-gutter); }

  /* Fit on the plan, beside the view switch. */
  .rt-editor[data-studio] .rt-garage-fit { gap: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
  .rt-editor[data-studio] .rt-garage-fit .rt-icon { width: 16px; height: 16px; }

  /* One Delete per selection: the Venue panel's copy goes, the inspector's
     stays. The panel's selection block itself still toggles (the phone
     sheet watches it). */
  .rt-editor[data-studio] [data-designer-v3-venue-target="selection"] .rt-act--danger { display: none; }

  /* The empty plan's one line: on the map it starts with the search. */
  .rt-editor[data-studio] .rt-studio-empty-hint { display: inline-block; }
  .rt-editor[data-studio] .rt-studio-empty-hint::first-letter { text-transform: uppercase; }
  .rt-editor[data-studio]:not(:has(.rt-studio-mode__chip[data-mode="map"])) .rt-studio-empty-hint__map { display: none; }

  /* Click / Tap: the verb follows the pointer. */
  .rt-editor[data-studio] .rt-studio-verb-tap { display: none; }
  .rt-editor[data-studio] .rt-studio-mode__short { display: none; }

  /* The panel head is the phone sheet's handle — on a desktop it was a live
     button that did nothing. The stage is in the top bar already. */
  @media (min-width: 768px) {
    .rt-editor[data-studio] .rt-studio-sheet-head { display: none; }
  }

  /* Start cards up: the stage tabs, tools and sheet behind them are inert
     (the controller sets `inert` too), and look it. */
  .rt-editor[data-studio][data-studio-choosing] :is(.rt-studio-tabs, .rt-studio-stages, .rt-tools, .rt-studio-sheet-head) {
    opacity: 0.4;
    pointer-events: none;
  }

  /* The tray: a scroll cue. The cards strip fades at an edge with more
     behind it, and arrow buttons page it — a locked pack card is never
     silently off-screen. */
  .rt-editor[data-studio] .rt-studio-tray[data-scroll-end="0"] .rt-studio-tray__cards {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  }
  .rt-editor[data-studio] .rt-studio-tray[data-scroll-start="0"] .rt-studio-tray__cards {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
    mask-image: linear-gradient(90deg, transparent, #000 72px);
  }
  .rt-editor[data-studio] .rt-studio-tray[data-scroll-start="0"][data-scroll-end="0"] .rt-studio-tray__cards {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  }
  .rt-editor[data-studio] .rt-studio-tray__page {
    position: absolute;
    top: calc(var(--rt-tray-head-h) + (var(--rt-tray-h) - var(--rt-tray-head-h)) / 2 - 28px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--g-slate);
    border-radius: 7px;
    background: var(--g-mould), var(--g-steel);
    color: var(--g-bone);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  .rt-editor[data-studio] .rt-studio-tray__page[hidden] { display: none; }
  /* A card brought into view (Tab, ← / →, scrollIntoView) stops clear of
     the page arrows and the edge fade, never under them. */
  .rt-editor[data-studio] .rt-studio-tray__cards { scroll-padding-inline: 52px; }
  .rt-editor[data-studio] .rt-studio-tray__page--prev { left: 6px; }
  .rt-editor[data-studio] .rt-studio-tray__page--next { right: 6px; }
  .rt-editor[data-studio] .rt-studio-tray__page .rt-icon { width: 18px; height: 18px; }
  .rt-editor[data-studio] .rt-studio-tray__page-count {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 4px;
    border-radius: 4px;
    background: var(--g-signal);
    color: var(--g-on-signal);
    font: 600 10px/14px var(--g-mono);
    white-space: nowrap;
  }
  /* Part codes stay, small; the name is the card's label. */
  .rt-editor[data-studio] .rt-studio-card__code { opacity: 0.55; font-size: 9px; }
  .rt-editor[data-studio] .rt-studio-tray__groups { min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
  /* A press-and-hold is a drag on a touch screen, never the OS's text
     selection or callout. */
  .rt-editor[data-studio] .rt-studio-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .rt-editor[data-studio] .rt-studio-card.is-held { outline: 2px solid var(--g-signal); outline-offset: -2px; }

  /* ── touch: no key hints, "Tap" not "Click", no keyboard rows ──────── */
  @media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-act__hint,
    .rt-editor[data-studio] .rt-studio-key,
    .rt-editor[data-studio] .rt-studio-desktop-only,
    .rt-editor[data-studio] .rt-studio-chooser__code kbd { display: none !important; }
    .rt-editor[data-studio] .rt-tools .rt-tool > .rt-tool__label::after { content: none !important; }
    .rt-editor[data-studio] .rt-studio-verb-click { display: none; }
    .rt-editor[data-studio] .rt-studio-verb-tap { display: inline; }
    /* Wave 1's new controls take a finger wherever there is one — the
       tablet's More menu and tray arrows sit outside the rail rules. */
    .rt-editor[data-studio] .rt-studio-more .rt-act,
    .rt-editor[data-studio] .rt-studio-more .rt-btn,
    .rt-editor[data-studio] .rt-studio-count,
    .rt-editor[data-studio] .rt-garage-fit,
    .rt-editor[data-studio] .rt-garage-launch__go { min-height: 44px; }
    .rt-editor[data-studio] .rt-studio-tray__page { width: 44px; }
    /* The rows nudge takes a finger: the card's Row button moves to the
       picture's top-left corner (the part code makes way) at 44 px, and the
       hint's two buttons are 44 px tall. */
    .rt-editor[data-studio] .rt-studio-card__rowbtn {
      top: 2px;
      left: 2px;
      right: auto;
      bottom: auto;
      flex-direction: column;
      gap: 1px;
      min-width: 44px;
      height: 44px;
      padding: 0 4px;
      background: rgba(39, 39, 43, 0.92);
    }
    .rt-editor[data-studio] .rt-studio-card__rowbtn[aria-pressed="true"] { background: var(--g-bone); }
    .rt-editor[data-studio] .rt-studio-card-slot > .rt-studio-card .rt-studio-card__code { display: none; }
    .rt-editor[data-studio] .rt-studio-card-slot > .rt-studio-card .rt-studio-card__badge { right: 8px; }
    .rt-editor[data-studio] .rt-studio-row-hint__go { min-height: 44px; }
    .rt-editor[data-studio] .rt-studio-row-hint__close { width: 44px; }
  }

  /* ── phone ───────────────────────────────────────────────────────── */
  @media (max-width: 767.98px) {
    /* The chip says which canvas in a word, not only an icon that reads as
       "toggle grid". */
    .rt-editor[data-studio] .rt-studio-mode__short {
      display: inline;
      font-family: var(--g-display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .rt-editor[data-studio] .rt-studio-mode__chip { width: auto !important; gap: 6px; padding: 0 10px !important; }

    /* The handle is swiped (designer-v3-studio#_watchPhone): the browser must
       not take the vertical drag as a pan and cancel the pointer. */
    .rt-editor[data-studio] .rt-studio-sheet-handle { touch-action: none; }

    /* The empty plan's hint sits above the Fit / 2D·3D corner, not under it. */
    .rt-editor[data-studio] [data-designer-v3-target="emptyHint"] { bottom: 72px !important; padding: 0 12px; text-align: center; }

    /* Duplicate and Delete lead a stand's inspector, above the fold. */
    .rt-editor[data-studio] [data-inspector-group="facility"]:not([hidden]) { display: flex; flex-direction: column; }
    .rt-editor[data-studio] [data-inspector-group="facility"] > .rt-act-pair { order: -1; margin-bottom: 6px; }

    /* The lap-class select and the corner rows take a finger. */
    .rt-editor[data-studio] .rt-rail select { min-height: 44px; font-size: 16px; }
    .rt-editor[data-studio] .rt-rail .rt-item { min-height: 44px; }

    /* The strip swipes; the fade is the cue, the arrows are for a mouse. */
    .rt-editor[data-studio] .rt-studio-tray__page { display: none; }

    /* The map's place search leads the sheet, under its handle. */
    .rt-editor[data-studio]:not([data-studio-inspecting]) .rt-rail > [data-studio-section="location"] { order: -1; }
    .rt-editor[data-studio] .rt-rail > [data-studio-section="sheetHandle"] { order: -2; }
  }

  /* ── tablet (768–1023): the desktop layout, fitted ─────────────────── */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .rt-editor[data-studio] { overflow-x: hidden; }
    .rt-editor[data-studio] .rt-topbar { min-width: 0; overflow: hidden; gap: 6px; }
    .rt-editor[data-studio] .rt-studio-mode { flex: none; }
    .rt-editor[data-studio] .rt-studio-mode__label { display: none; }
    .rt-editor[data-studio] .rt-studio-mode__short { display: inline; font-family: var(--g-display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
    .rt-editor[data-studio] .rt-studio-mode__chip { min-height: 44px; }
    .rt-editor[data-studio] .rt-topbar > .rt-studio-stages { position: static; transform: none; flex: none; margin: 0 0 0 auto; }
    .rt-editor[data-studio] .rt-studio-stages > .rt-studio-stage { min-width: 0; }
    .rt-editor[data-studio] .rt-studio-stage { min-height: 44px; padding: 0 10px; }
    .rt-editor[data-studio] .rt-topbar .rt-btn,
    .rt-editor[data-studio] .rt-garage-viewsw .rt-btn,
    .rt-editor[data-studio] .rt-studio-tray__group,
    .rt-editor[data-studio] .rt-studio-tray__row,
    .rt-editor[data-studio] .rt-studio-tray__collapse,
    .rt-editor[data-studio] .rt-rail .rt-act,
    .rt-editor[data-studio] .rt-rail .rt-btn,
    .rt-editor[data-studio] .rt-rail .rt-num,
    .rt-editor[data-studio] .rt-rail .rt-item,
    .rt-editor[data-studio] .rt-rail select,
    .rt-editor[data-studio] .rt-rail .rt-sec__head,
    .rt-editor[data-studio] .rt-status .rt-btn { min-height: 44px; min-width: 44px; }
    .rt-editor[data-studio] .rt-studio-tray__hint { display: none; }
    /* The drawer fronts scroll as a row rather than squashing into each other. */
    .rt-editor[data-studio] .rt-studio-tray__group { flex: none; }
    .rt-editor[data-studio] .rt-studio-tray__groups { flex: 1 1 auto; }
  }
}

/* ---------------------------------------------------------------------------
   Race weekend + the doors (PLAN-entry-points "Studio: Race weekend + the
   doors", mockups 1–3, Labs :studio + :experience). Show's six poster cards
   in the launch panel (it keeps the panel's tape and head), the free chip,
   the "Unlock this circuit — free" block and the "Every circuit" box; Dress's
   doors in the inspector and the 3D pill over the selected door. The one
   signal is the action (▶ Drive it / Unlock / Get Lifetime / Sit here);
   the picked card is a bone outline (a bone BLOCK can't carry a poster).
   ------------------------------------------------------------------------- */
@layer rt {
  /* The head: "RACE WEEKEND" is never cut; the kicker beside it gives way
     (mockup 1 — the title reads in full, the words after it in body type). */
  .rt-editor[data-studio] .rt-garage-weekend > .rt-sec__head > .rt-sec__title { flex: 0 0 auto; overflow: visible; }
  .rt-editor[data-studio] .rt-garage-weekend > .rt-sec__head > .rt-sec__meta {
    flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: 400 12px/1.2 var(--g-text); color: var(--g-mist);
  }
  .rt-editor[data-studio] .rt-garage-weekend__free { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .rt-editor[data-studio] .rt-garage-weekend__chip {
    display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
    border: 1px solid rgba(52, 211, 153, 0.45); border-radius: 6px; background: rgba(52, 211, 153, 0.14);
    color: var(--g-power); font: 600 12px/1 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-weekend__chip-line { color: var(--g-mist); font-size: 12px; }
  .rt-editor[data-studio] .rt-garage-weekend__unlock {
    display: flex; flex-direction: column; gap: 6px; padding: 12px;
    border: 1px solid var(--g-slate); border-radius: 10px; background: var(--g-black);
  }
  .rt-editor[data-studio] .rt-garage-weekend__unlock-title,
  .rt-editor[data-studio] .rt-garage-weekend__title {
    font-family: var(--g-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--g-bone);
  }
  .rt-editor[data-studio] .rt-garage-weekend__unlock-title { font-size: 19px; }
  .rt-editor[data-studio] .rt-garage-weekend__unlock-body { margin: 0; color: var(--g-mist); font-size: 13px; line-height: 1.4; }
  .rt-editor[data-studio] .rt-garage-weekend__unlock-note { color: var(--g-smoke); font-size: 12px; text-align: center; }
  .rt-editor[data-studio] .rt-garage-weekend__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rt-editor[data-studio] .rt-garage-weekend__card {
    position: relative; display: flex; align-items: flex-end; min-height: 96px; padding: 0;
    overflow: hidden; border: 1px solid var(--g-slate); border-radius: 8px;
    background: var(--g-steel) center / cover no-repeat; color: var(--g-bone); font: inherit; text-align: left;
    cursor: pointer; transition: transform var(--g-press);
  }
  .rt-editor[data-studio] .rt-garage-weekend__card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82));
  }
  .rt-editor[data-studio] .rt-garage-weekend__card:hover { border-color: var(--g-mist); }
  .rt-editor[data-studio] .rt-garage-weekend__card:active { transform: translateY(1px) scale(0.985); }
  .rt-editor[data-studio] .rt-garage-weekend__card[aria-checked="true"] { border-color: var(--g-bone); box-shadow: inset 0 0 0 1px var(--g-bone); }
  .rt-editor[data-studio] .rt-garage-weekend__card[data-weekend-state="locked"] { filter: grayscale(0.6) brightness(0.7); }
  .rt-editor[data-studio] .rt-garage-weekend__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
  .rt-editor[data-studio] .rt-garage-weekend__title { font-size: 16px; line-height: 1.05; }
  .rt-editor[data-studio] .rt-garage-weekend__line { color: #d6d4cf; font-size: 11.5px; line-height: 1.3; }
  .rt-editor[data-studio] .rt-garage-weekend__lock {
    position: absolute; top: 7px; right: 7px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: 5px; background: rgba(20, 20, 22, 0.88); color: var(--g-bone);
    font: 600 11px/1.2 var(--g-display); letter-spacing: 0.09em; text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-weekend__lock .rt-icon { width: 11px; height: 11px; }
  .rt-editor[data-studio] .rt-garage-weekend__hint { text-align: center; }
  .rt-editor[data-studio] .rt-garage-weekend__offer-head { display: flex; align-items: baseline; gap: 8px; }
  .rt-editor[data-studio] .rt-garage-weekend__offer-head .rt-garage-offer__amount { margin-left: auto; font-size: 18px; }
  .rt-editor[data-studio] .rt-garage-weekend__share-label { margin-top: 6px; letter-spacing: 0.12em; text-transform: uppercase; }
  .rt-editor[data-studio] [data-studio-watch-link] { cursor: pointer; }

  /* Dress doors (mockup 3). */
  .rt-editor[data-studio] .rt-garage-doors { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
  .rt-editor[data-studio] .rt-garage-door__seat {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 120px; padding: 10px; overflow: hidden; border: 1px solid var(--g-slate); border-radius: 9px;
    background: var(--g-steel) center / cover no-repeat;
  }
  .rt-editor[data-studio] .rt-garage-door__seat::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8));
  }
  .rt-editor[data-studio] .rt-garage-door__badge {
    position: absolute; top: 8px; right: 8px; z-index: 1; padding: 3px 7px; border-radius: 5px;
    background: var(--g-bone); color: var(--g-black); font: 600 11px/1.2 var(--g-display); letter-spacing: 0.09em; text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-door__sees {
    position: relative; z-index: 1; color: var(--g-bone); font: 600 17px/1.1 var(--g-display); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .rt-editor[data-studio] .rt-garage-door__go { width: 100%; }
  .rt-editor[data-studio] .rt-garage-door__go[data-door-locked="1"] { background: var(--g-mould), var(--g-steel); color: var(--g-bone); border-color: var(--g-slate); }
  .rt-editor[data-studio] .rt-garage-door__others-label { margin-top: 4px; letter-spacing: 0.12em; text-transform: uppercase; }
  .rt-editor[data-studio] .rt-garage-door__others { display: flex; flex-direction: column; gap: 6px; }
  .rt-editor[data-studio] .rt-garage-door__other {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px; border: 1px solid var(--g-slate);
    border-radius: 8px; background: var(--g-black); color: var(--g-bone); font: inherit; text-align: left; cursor: pointer;
  }
  .rt-editor[data-studio] .rt-garage-door__other:hover { border-color: var(--g-mist); }
  .rt-editor[data-studio] .rt-garage-door__thumb { flex: none; width: 60px; height: 38px; border-radius: 5px; background: var(--g-steel) center / cover no-repeat; }
  .rt-editor[data-studio] .rt-garage-door__other-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rt-editor[data-studio] .rt-garage-door__other-name { font-size: 13px; }
  .rt-editor[data-studio] .rt-garage-door__other-verb { color: var(--g-mist); font: 600 12px/1.2 var(--g-display); letter-spacing: 0.08em; text-transform: uppercase; }

  /* The 3D pill: a DOM element over the canvas (no scene object). */
  .rt-editor[data-studio] .rt-garage-door-pill {
    position: absolute; z-index: 6; transform: translate(-50%, -100%); min-height: 30px; padding: 0 10px;
    border: 1px solid var(--g-signal); border-radius: 6px; background: var(--g-signal); color: var(--g-on-signal);
    font: 600 12px/28px var(--g-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer;
  }
  .rt-editor[data-studio] .rt-garage-door-pill[data-door-mode="tv"],
  .rt-editor[data-studio] .rt-garage-door-pill[data-door-mode="control"],
  .rt-editor[data-studio] .rt-garage-door-pill:not([data-door-state="open"]) { border-color: var(--g-bone); background: var(--g-bone); color: var(--g-black); }

  @media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-garage-weekend__card { min-height: 88px; }
    .rt-editor[data-studio] .rt-garage-door__other,
    .rt-editor[data-studio] .rt-garage-door__go,
    .rt-editor[data-studio] [data-studio-watch-link] { min-height: 44px; }
    .rt-editor[data-studio] .rt-garage-door-pill { min-height: 44px; line-height: 42px; }
  }
}

/* ---------------------------------------------------------------------------
   The editor's own dialogs (lib/racetrack_core/editor_dialog.js) and the
   "Restore your unsaved design?" strip, in the garage: carbon sheet, slate
   rule, the title in the display face. The confirm keeps the classic
   button's role — on the garage that is the one signal; a destructive one
   is the danger text it always was.
   ------------------------------------------------------------------------- */
@layer rt {
  .rt-editor[data-studio] .rt-dialog__sheet { background: var(--g-carbon); border: 1px solid var(--g-slate); border-radius: 8px; }
  .rt-editor[data-studio] .rt-dialog__title {
    font: 600 15px/1.2 var(--g-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-bone);
  }
  .rt-editor[data-studio] .rt-dialog__message { color: var(--g-mist); }
  .rt-editor[data-studio] .rt-dialog__btn:focus-visible { outline: none; box-shadow: var(--g-focus); }
  .rt-editor[data-studio] .rt-draft-banner { background: var(--g-carbon); border-color: var(--g-slate); border-radius: 6px; }
  @media (pointer: coarse), (max-width: 767.98px) {
    .rt-editor[data-studio] .rt-dialog__sheet { border-radius: 10px 10px 0 0; }
  }
}

/* ---------------------------------------------------------------------------
   Keyboard focus, last so nothing above can take it away. The moulded
   buttons draw their ring with box-shadow, and every "chosen" / segmented /
   stage / tool rule that sets its own box-shadow (the bone block's drop, a
   segment's `none`) silently removed it: the stages, the view switch, an
   active tool and the status strip's Shortcuts had no ring at all. An inset
   outline survives those and the segments' overflow: hidden.
   ------------------------------------------------------------------------- */
@layer rt {
  .rt-editor[data-studio] :is(.rt-btn, .rt-tool, .rt-studio-stage, .rt-act):focus-visible {
    outline: 2px solid var(--g-signal);
    outline-offset: -2px;
  }
}