/* The recipe studio — hand-written, like brew_timeline.css, and scoped under
   .st-page so nothing here leaks onto the rest of the app (or gets pruned by
   Tailwind's content scan, which never looks at this file). One breakpoint:
   lg (1024px). Below it every control is a touch target (>=44px); above it
   the list and the preview sit side by side and the preview never hides. */
.st-page{
  --bg:       var(--color-bg, #f5f1e8);
  --surface:  var(--color-surface, #ffffff);
  --surface2: var(--color-surface-2, #efe9d7);
  --border:   var(--color-border, #e6dfcc);
  --ink:      var(--color-ink, #2f1f19);
  --ink-soft: var(--color-ink-soft, #6e5d54);
  --accent:   var(--color-accent, #d97757);
  --accent-2: var(--color-accent-2, #c25a38);
  color:var(--ink);background:var(--bg);
  max-width:1100px;margin:0 auto;padding:16px;
}

/* ── Top bar: back link, title, Save ── */
.st-page .st-topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.st-page .st-back{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 4px;
  color:var(--ink-soft);text-decoration:none;font:500 14px "Inter"}
.st-page .st-back:hover{color:var(--accent)}
.st-page .st-back svg{width:18px;height:18px}
.st-page .st-title{flex:1;min-width:0;margin:0;font-family:"Source Serif 4",serif;font-weight:700;
  font-size:19px;line-height:1.25;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The editable recipe name — same type treatment as .st-title above, minus
   every affordance that would otherwise say "this is a text box" (border,
   fill, focus ring aside). */
.st-page .st-title-input{flex:1;min-width:0;min-height:44px;margin:0;padding:2px 4px;border:0;border-radius:6px;
  background:none;font-family:"Source Serif 4",serif;font-weight:700;font-size:19px;line-height:1.25;
  color:var(--ink)}
.st-page .st-title-input:hover,.st-page .st-title-input:focus{background:var(--surface2)}
.st-page .st-title-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.st-page .st-undo,.st-page .st-redo{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:8px;background:none;color:var(--ink-soft);cursor:pointer}
.st-page .st-undo svg,.st-page .st-redo svg{width:17px;height:17px}
.st-page .st-undo:hover:not([disabled]),.st-page .st-redo:hover:not([disabled]){color:var(--accent);background:var(--surface2)}
.st-page .st-undo[disabled],.st-page .st-redo[disabled]{opacity:.3;cursor:not-allowed}
.st-page .st-save{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:8px;
  background:var(--ink);color:var(--bg);font:600 14px "Inter";cursor:pointer}
.st-page .st-save[disabled]{opacity:.4;cursor:not-allowed}

/* ── The figures line (shared brew_methods/_facts_line partial, mounted here
   with controller: "recipe-studio") — every rule this partial itself relies
   on for a cell's own look (border, padding, the two nudge buttons' size and
   position) is written scoped to .brew-timeline in brew_timeline.css, and
   the studio deliberately never wraps this instance in that class (no
   grinder picker/scale strip sits beside it here — see studio.html.erb's own
   comment). Left alone, a cell here renders with NONE of that: an
   unconstrained input inside an unbordered grid track blows the "1fr 1fr"
   two-up layout brew_timeline.css's own @media(max-width:640px) still
   applies (unscoped) past the viewport's edge, and the nudge buttons — an
   absolutely-positioned wrapper around two SVGs with no explicit size —
   collapse to 0x0 (a replaced element sized only by viewBox, inside a
   shrink-to-fit box, resolves to nothing). So: the studio gets its own
   from-scratch copy of a cell's look below, sized as this page's own touch
   targets (44px) rather than the player's 24x24 — the player's own
   .brew-timeline-scoped rules are untouched by any of this. */
.st-page .bt-facts{display:flex;flex-wrap:wrap} /* undoes the unscoped 2-col grid at <=640px */
.st-page .bt-cell{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:168px;min-height:44px;padding:8px 92px 8px 10px;border:1px dashed var(--border);
  border-radius:7px;background:var(--surface);transition:border-color .12s ease,background-color .12s ease}
.st-page .bt-cell-field{display:flex;align-items:center;gap:3px;min-width:0}
.st-page .bt-cell-pre{font:600 13px/1 "JetBrains Mono",monospace;color:var(--ink-soft)}
.st-page .bt-cell-input{width:auto;min-width:2.5ch;min-height:44px;padding:0;border:0;background:none;
  color:var(--ink);font:600 20px/1.15 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.st-page .bt-cell-input::-webkit-outer-spin-button,
.st-page .bt-cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-page .bt-cell-input:focus{outline:none}
.st-page .bt-cell:focus-within{border-style:solid;border-color:var(--accent)}
.st-page .bt-fact-unit{font:600 11px/1 "JetBrains Mono",monospace;color:var(--ink-soft)}
.st-page .bt-cell.is-edited{border-style:solid;border-color:var(--accent);background:rgba(217,119,87,.06)}
.st-page .bt-cell.is-edited .bt-fact-label{color:var(--accent)}
.st-page .bt-cell.is-edited .bt-cell-input,
.st-page .bt-cell.is-edited .bt-cell-pre,
.st-page .bt-cell.is-edited .bt-fact-unit{color:var(--accent-2)}
/* The two nudge buttons, side by side (not stacked — each has to clear 44px
   in BOTH dimensions on its own, and stacking two 44px targets would double
   the cell's own height for no reason). */
.st-page .bt-spin{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;gap:2px}
.st-page .bt-spin button{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;
  border-radius:6px;background:none;color:var(--ink-soft);cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.st-page .bt-spin button:hover{color:var(--accent);background:var(--surface2)}
.st-page .bt-spin button:active{background:rgba(217,119,87,.20)}
.st-page .bt-spin svg{width:13px;height:13px;stroke-width:3}

/* ── Two-column grid: single column below lg, list + preview at lg+ ──
   Below lg this pair is the ENTIRE story — one column, list then preview,
   exactly as v1 shipped it (176-check sweep guards it). The lg+ shape is
   superseded by Task 5's own three-pane shell further down this file (see
   "the lg+ three-pane shell" below): .st-grid becomes a single flex COLUMN
   at lg+ instead of the old two-up split, with the preview reordered above
   the list to match the design doc's own sketch — see that block's own
   comment for why this replaces the @media rule that used to live here
   rather than sitting alongside it. */
.st-page .st-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:20px}

/* ── Step list ── */
.st-page .st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.st-page .st-row{border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.st-page .st-row[data-selected]{border-color:var(--accent)}
.st-page .st-row-pinned{border-style:dashed}
.st-page .st-row-head{display:flex;align-items:center;gap:10px;padding:8px 10px}
.st-page .st-row-handle,.st-page .st-row-pin{flex:none;display:grid;place-items:center;
  width:44px;height:44px;border:0;background:none;color:var(--ink-soft);cursor:grab}
.st-page .st-row-handle svg,.st-page .st-row-pin svg{width:18px;height:18px}
.st-page .st-row-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:999px;
  background:var(--accent);color:#fff;font:700 11px "JetBrains Mono",monospace}
/* Task 6: the block's own scene art, one per row — see _step_row.html.erb's
   own comment for the shared URL a server-rendered row and a freshly
   client-added one both resolve it from. */
.st-page .st-row-thumb{flex:none;width:32px;height:32px;border-radius:6px;object-fit:contain;
  background:var(--surface2)}
.st-page .st-row-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;
  min-height:44px;padding:2px 0;cursor:pointer}
.st-page .st-row-name{font:600 14.5px "Inter";color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-page .st-row-secs{flex:none;margin-left:auto;font:600 12px "JetBrains Mono",monospace;color:var(--accent-2)}
.st-page .st-row-controls{flex:none;display:flex;gap:2px}
.st-page .st-row-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:8px;
  background:none;color:var(--ink-soft);cursor:pointer}
.st-page .st-row-btn:hover{color:var(--accent);background:var(--surface2)}
.st-page .st-row-btn svg{width:16px;height:16px}
.st-page .st-row-remove:hover{color:#b6412a}

/* ── Per-step fields (name / seconds / why) — hidden until Task 7 opens a
   row; rendered here so the composition is inspectable without JS. ── */
.st-page .st-fields{display:grid;grid-template-columns:1fr 90px;gap:8px 10px;
  padding:0 12px 12px;border-top:1px dashed var(--border);margin-top:2px;padding-top:10px}
.st-page .st-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-page .st-field-wide{grid-column:1/-1}
.st-page .st-field-label{font:600 10px "JetBrains Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.st-page .st-field input,.st-page .st-field textarea{border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--ink);font:500 13.5px "Inter";padding:8px 10px;min-height:44px}
.st-page .st-field textarea{min-height:56px;resize:vertical}

/* ── Task 6: the fields panel's own header (block scene art + the
   "editing: …" language marker) and the language marker's own look,
   reused verbatim wherever else it appears (the left rail's Name/Intro/
   Notes labels — see studio.html.erb). ── */
.st-page .st-fields-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-bottom:2px}
.st-page .st-field-thumb{flex:none;width:64px;height:44px;object-fit:contain;border-radius:8px;
  background:var(--surface2)}
.st-page .st-lang-marker{font:700 10px "JetBrains Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-2)}
.st-page .st-rail-label .st-lang-marker{margin-left:6px}

/* A param's own note — a single-line aside, not a second full-width field;
   reuses .st-field's own input styling above. */
.st-page .st-field-note{flex:1 1 160px;min-width:140px}
.st-page .st-field-note input{font-size:12.5px}

/* ── Per-block EDITABLE params (Task 8) — from_frac/to_frac/grams/temp/…,
   built either by _step_fields.html.erb (first paint) or
   recipe_studio_controller.js#renderParamFields (every rebuild after). A
   flex-wrapping row of .st-field's, reusing that class's own input/textarea
   styling above rather than a second copy of it. ── */
.st-page .st-param-fields{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;
  margin-top:2px}
.st-page .st-param-fields .st-field{flex:1 1 110px;min-width:110px}
.st-page .st-field input:disabled{opacity:.5}
.st-page .st-field-resolved{flex:none;align-self:center;min-height:44px;display:flex;align-items:center;
  font:600 11.5px "JetBrains Mono",monospace;color:var(--ink-soft)}
/* A checkbox field ("Pulse pours", "follow the recipe") reads as one row,
   not a column — the checkbox itself never needs 44px of its own height,
   the LABEL it sits inside already carries that touch target. */
.st-page .st-field-check,.st-page .st-field-follow{flex:1 1 100%;flex-direction:row;align-items:center;
  gap:8px;min-height:44px}
.st-page .st-field-check input,.st-page .st-field-follow input{width:20px;height:20px;min-height:0;padding:0}

/* The placeholder Sortable leaves at the drop target while a row is
   mid-drag (forceFallback: true, so this is a real class toggle applied to
   the dragged row's own clone, not a native-drag pseudo-element). */
.st-page .st-row-ghost{opacity:.4;background:var(--surface2)}

/* ── Add a step + total ── */
.st-page .st-add{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.st-page .st-add-box{max-width:22rem;flex:1;min-width:220px}
.st-page .st-add-box input{min-height:44px}
.st-page .st-total{margin:0;font:600 12.5px "JetBrains Mono",monospace;color:var(--ink-soft)}

/* ── Preview pane: collapsed behind a native <details> below lg, always
   open (and its summary hidden) at lg+. ── */
.st-page .st-preview-toggle{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden}
.st-page .st-preview-summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  min-height:44px;padding:0 14px;font:600 13.5px "Inter";color:var(--ink)}
.st-page .st-preview-summary::-webkit-details-marker{display:none}
.st-page .st-preview-summary::before{content:"▸";margin-right:8px;color:var(--ink-soft)}
.st-page .st-preview-toggle[open] .st-preview-summary::before{content:"▾"}
.st-page .st-preview-body{padding:12px}
@media (min-width:1024px){
  .st-page .st-preview-toggle{border:0;background:none;border-radius:0}
  .st-page .st-preview-summary{display:none}
  .st-page .st-preview-body{display:block!important;padding:0}
  /* display:block above is not enough on its own: a <details> with no
     `open` attribute hides its non-summary content through its own
     ::details-content box (Chrome 131+), which content-visibility:hidden's
     — and skips rendering/painting/hit-testing/the accessibility tree for
     — regardless of what `display` the child itself computes to. There is
     no `open` attribute to flip here (the server renders this <details>
     closed on every paint, on purpose — see the comment at the top of this
     rule block), so the ONE thing that actually has to be overridden at lg+
     is that box itself. block-size:auto undoes the 0-height collapse
     content-visibility:hidden leaves behind once painting is restored. */
  .st-page .st-preview-toggle::details-content{content-visibility:visible!important;block-size:auto!important}
}

/* ── /brew-studio: the method picker (recipes#studio_home) ── */
.st-page.st-home{max-width:900px}
.st-page .st-home-intro{margin:28px 0 22px;text-align:center}
.st-page .st-home-title{margin:0;font-family:"Source Serif 4",serif;font-weight:700;font-size:28px;
  line-height:1.2;color:var(--ink)}
.st-page .st-home-sub{margin:8px 0 0;color:var(--ink-soft);font:400 14.5px "Inter"}
.st-page .st-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;
  list-style:none;margin:0;padding:0}
.st-page .st-home-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:center;
  text-decoration:none;color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}
.st-page .st-home-card:hover{border-color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.st-page .st-home-card-art{width:100%;max-width:120px;height:auto;aspect-ratio:120/82;object-fit:contain}
.st-page .st-home-card-name{font:600 14px "Inter";color:var(--ink)}
.st-page .st-home-card-sub{font:500 11.5px "JetBrains Mono",monospace;color:var(--ink-soft)}

/* ── Task 5: the lg+ three-pane shell (recipes/studio.html.erb, not the
   /brew-studio picker above) ── Everything ABOVE this point in the file is
   the below-lg v1 stack, left untouched — a 176-check sweep guards it
   (scripts/verify/studio_sweep.mjs). Below lg every selector in this block
   either targets an element that's hidden by the mobile-first defaults
   just below (so CSS alone keeps the very first paint identical to v1,
   with no dependency on JS having run yet), or lives inside
   @media (min-width:1024px) and simply never matches. */

.st-page .st-brand,
.st-page .st-topbar-divider,
.st-page .st-topbar-tool,
.st-page .st-topbar-spacer,
.st-page .st-close,
.st-page .st-rail{display:none}

@media (min-width:1024px){
  /* Full-bleed: drop the 1100px max-width/centering from the bare .st-page
     rule at the very top of this file (which below-lg still reads
     untouched) and turn the page itself into the shell — a fixed-height
     grid, three columns, THREE rows: the top bar (auto, spans all three
     columns), the figures line (auto, centre column only), and everything
     else (1fr, centre column only — its own overflow-y is what actually
     scrolls; see .st-grid below). The two rails span rows 2 AND 3 (they run
     the full height beside both the figures line and the list, matching the
     design doc's own sketch), each `overflow-hidden` with its own
     `overflow-y-auto` inner scroller (.st-rail-scroll) — the same
     shell/rail split ~/zz/dev/micepad's badge_designer_v3/show.html.erb
     uses. height:100dvh means the PAGE itself never scrolls — only these
     inner regions do. */
  .st-page{
    max-width:none;margin:0;padding:0;
    display:grid;grid-template-columns:280px minmax(0,1fr) 360px;grid-template-rows:auto auto 1fr;
    height:100dvh;overflow:hidden;
  }
  .st-page .st-topbar{grid-column:1/-1;grid-row:1;margin-bottom:0;padding:10px 16px;
    border-bottom:1px solid var(--border)}

  /* Below-lg's own back-arrow-with-text steps aside for the brand | divider
     | "Brew Studio" | spacer | undo/redo | Save | ✕ idiom — undo/redo/save
     are the SAME three <button> elements either way (only their SURROUNDING
     chrome swaps), so recipe_studio_controller's own targets/actions never
     have to know which shape is currently showing. The title input vacates
     the top bar entirely (recipe_studio_controller.js#moveTitleToRail —
     same node, reparented into the left rail's own "Name" field, never a
     clone) rather than just hiding in place, so it never reserves empty
     flex space here. */
  .st-page .st-back{display:none}
  .st-page .st-brand,.st-page .st-topbar-tool{display:inline-flex;align-items:center}
  .st-page .st-topbar-divider{display:block;width:1px;height:22px;background:var(--border);flex:none}
  .st-page .st-topbar-tool{color:var(--ink-soft);text-decoration:none;font:600 14px "Inter"}
  .st-page .st-topbar-tool:hover{color:var(--accent)}
  .st-page .st-topbar>.st-title-input{display:none}
  .st-page .st-topbar-spacer{display:block;flex:1}
  .st-page .st-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:8px;
    color:var(--ink-soft);text-decoration:none}
  .st-page .st-close:hover{color:var(--accent);background:var(--surface2)}
  .st-page .st-close svg{width:18px;height:18px}

  /* The two rails — `overflow-hidden` shells with their own
     `overflow-y-auto` inner scroller (.st-rail-scroll), so a long bean card
     or a long step list only ever grows its OWN column, never the page. */
  .st-page .st-rail{display:flex;flex-direction:column;grid-row:2/4;min-height:0;overflow:hidden}
  .st-page .st-rail-left{grid-column:1;border-right:1px solid var(--border)}
  .st-page .st-rail-right{grid-column:3;border-left:1px solid var(--border)}
  .st-page .st-rail-scroll{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 20px}

  /* Collapsible group headers — one <details> per group (studio.html.erb),
     all but THE BEAN open by default. Native disclosure triangles, same
     ▸/▾ idiom the preview toggle above already uses. */
  .st-page .st-rail-group{border-bottom:1px solid var(--border)}
  .st-page .st-rail-group:last-child{border-bottom:0}
  .st-page .st-rail-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
    min-height:44px;padding:12px 2px;font:700 11px "JetBrains Mono",monospace;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-soft)}
  .st-page .st-rail-group>summary::-webkit-details-marker{display:none}
  .st-page .st-rail-group>summary::before{content:"▸";color:var(--ink-soft)}
  .st-page .st-rail-group[open]>summary::before{content:"▾"}
  .st-page .st-rail-body{display:flex;flex-direction:column;gap:12px;padding:0 2px 18px}
  .st-page .st-rail-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .st-page .st-rail-field{display:flex;flex-direction:column;gap:4px;min-width:0}
  .st-page .st-rail-label{font:600 10px "JetBrains Mono",monospace;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-soft)}
  .st-page .st-rail-field input,.st-page .st-rail-field select,.st-page .st-rail-field textarea{
    width:100%;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);
    font:500 13.5px "Inter";padding:8px 10px;min-height:40px}
  .st-page .st-rail-field textarea{resize:vertical;min-height:64px}
  .st-page .st-rail-hint{margin:0;font:500 12.5px "Inter";color:var(--ink-soft);line-height:1.5}

  /* Task 7: THE PHOTOS group's own upload form + gallery grid — same
     .st-rail-field/.st-rail-label vocabulary as every other rail control,
     never a competing style. */
  .st-page .st-media-errors{margin:0;padding-left:18px;font:500 12.5px "Inter";color:#b91c1c}
  .st-page .st-media-form{display:flex;flex-direction:column;gap:12px}
  .st-page .st-media-banner-preview{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:8px;
    border:1px solid var(--border)}
  .st-page .st-media-upload{min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface);color:var(--ink);font:600 13px "Inter";align-self:flex-start}
  .st-page .st-media-upload:hover{border-color:var(--accent);color:var(--accent)}
  .st-page .st-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .st-page .st-media-thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
    border:1px solid var(--border)}
  .st-page .st-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  /* button_to's own wrapping <form> (action_view/helpers/url_helper.rb) —
     absolutely positioned over the thumb rather than sized itself, so it
     never disturbs the grid cell's own aspect-ratio box. */
  .st-page .st-media-thumb form{position:absolute;top:4px;right:4px;margin:0}
  .st-page .st-media-remove{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
    border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
  .st-page .st-media-remove:hover{background:rgba(0,0,0,.75)}
  .st-page .st-media-remove svg{width:12px;height:12px}

  /* The top bar's own .st-title-input, reparented here (see the comment
     above) — restyled back to a normal field, undoing its heading look
     (.st-title-input's own base rule near the top of this file) now that
     it reads as a rail control rather than a page title. Higher
     specificity (3 classes vs. that base rule's 2) wins regardless of
     source order. */
  .st-page .st-rail-field .st-title-input{flex:none;min-height:40px;padding:8px 10px;
    border:1px solid var(--border);border-radius:6px;background:var(--surface);
    font:500 13.5px "Inter";font-weight:500}
  .st-page .st-rail-field .st-title-input:hover,
  .st-page .st-rail-field .st-title-input:focus{background:var(--surface)}
  .st-page .st-rail-field .st-title-input:focus{outline:2px solid var(--accent);outline-offset:1px}

  .st-page .st-method-box{max-width:none;width:100%}
  .st-page .st-method-box input{min-height:40px}

  /* The right rail — the inspector. Either the empty-state hint
     (server-rendered, restored by recipe_studio_controller.js's own
     updateInspectorEmptyState) or, once a step is selected, that row's OWN
     .st-fields node — reusing .st-fields' existing rules unscoped from any
     particular row width, the same markup rendering identically whether
     it's inline (below lg) or parked here. */
  .st-page .st-inspector-empty{margin:0;font:500 13.5px "Inter";color:var(--ink-soft)}

  /* The centre column, two rows: the figures line sits fixed (row 2, its
     existing .bt-facts rule near the top of this file already gives it a
     sensible height, no scroll needed for one line of cells), and
     everything else — preview, step list, add-a-step — is row 3, `1fr` with
     its own overflow-y so a long list only ever grows ITS row, never the
     page (mirrors the two rails' own .st-rail-scroll). Both stay DIRECT
     children of .st-page (no wrapper) — see studio.html.erb's own comment
     on why: `.st-page > .bt-facts` is how this file's own preview-vs-studio
     figures-line checks (and scripts/verify/studio.mjs's own) tell the two
     .bt-facts instances on this page apart. */
  .st-page>.bt-facts{grid-column:2;grid-row:2;padding:16px 20px 0;min-width:0}
  /* Supersedes the old two-up split this same selector's base rule (top of
     this file) carried below lg — .st-grid becomes a single flex COLUMN at
     lg+ instead, with the preview reordered ABOVE the list (`order`, which
     reorders visually without touching DOM source order — below-lg still
     relies on that source order: .st-editor first, so the list is what a
     phone visitor sees before any collapsed-by-default preview toggle). */
  .st-page .st-grid{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:20px;
    margin-top:16px;padding:0 20px 24px;overflow-y:auto;min-width:0;min-height:0}
  .st-page .st-editor{order:2}
  .st-page .st-preview-toggle{order:1}
}