/* The whole sheet sits in the `components` cascade layer, so a Tailwind utility written in the markup WINS over any rule in here. Why this matters: Tailwind v4 puts its utilities in `@layer utilities`, and per the cascade-layers spec UNLAYERED css beats layered css outright, whatever the specificity. Left unlayered, every rule below silently defeated every utility — which is exactly how three real bugs happened (the method, grinder and country pickers each painting their search glass on top of their own placeholder, because `.st-rail-field input`'s padding beat the combobox's own `pl-8`). Now a utility in the ERB simply wins, and the rule it replaces can be deleted afterwards rather than in the same breath. Verified a no-op when introduced: styles_snapshot 27/27 identical, studio.mjs 427/427, studio_sweep 550/550, dark 52/52, units 60/60. NOTE this is safe for THIS sheet only — layering brew_timeline.css and home.css the same way produced 1191 computed-style differences across 16 element families, because their markup already carries utilities that were losing on purpose. Do not layer those without adjudicating each one. */ /* 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); --bad: var(--color-bad, #8c3b32); /* Round 5 Task 3: the same phase-tone palette the public timeline uses (brew_timeline.css), duplicated here so the studio's own group bands and overview-strip tiles can reference it without depending on that file being loaded (it is, for the embedded player, but this keeps the studio sheet self-contained). */ --ph-prep: #8c7d6f; --ph-brew: #d97757; --ph-milk: #b98a4e; --ph-serve: #8a5a33; /* Studio-alpha round: the ALPHA chip's own tone (.st-alpha-chip below) — same var(--color-x, fallback) idiom as every other token in this block, aliasing the site-wide --gold custom property (application.css/ tailwind's own :root/.dark) rather than hardcoding it twice. */ --gold: var(--color-gold, #8a6b4f); /* Accent-tint steps this file actually uses (see application.css for the full step list + dark-mode rgba values) — precomputed, no color-mix. */ --accent-tint-06: var(--color-accent-tint-06, rgba(217,119,87,.06)); --accent-tint-20: var(--color-accent-tint-20, rgba(217,119,87,.20)); color:var(--ink);background:var(--bg); max-width:1100px;margin:0 auto;padding:16px; } /* Round 5 Task 3: dark-mode phase-tone values mirror brew_timeline.css's own .dark .brew-timeline palette. */ .dark .st-page{ --ph-prep: #ac7c26; --ph-brew: #cb364b; --ph-milk: #a19400; --ph-serve: #b64118; } /* ── Top bar: back link, title, Save ── */ /* Task 3b: 4px, not the original 12px — the below-lg bar now carries one more icon control (.st-preview-btn) than the sweep's own 390px width budget (scripts/verify/studio_sweep.mjs's own "no horizontal page scroll" check) had room for at 12px; tightening every gap by 8px buys back exactly the room one more 44px control costs. Cosmetic-only at lg+, where the bar spans (at minimum) a 1024px shell and was never anywhere near this edge. Lang-topbar round: 3px, not that 4px — .st-lang-trigger (studio.html. erb's own .st-lang-widget comment) is a SECOND new icon control landing on this exact row, the same 44x44-plus-a-gap cost .st-preview-btn's own arrival cost the last time this comment was written, and there's no spare gap left to give: measured directly (scripts/verify/studio_ sweep.mjs's own "no horizontal page scroll" check at 390 started FAILING the moment the trigger was added — scrollWidth 422 against a 390 budget, ~32px over). This 1px-per-gap trim plus .st-save/.st-units' own tightened padding (below) together buy back ~31px — a matching floor-respecting trim, not a touch-target shrink: every control on this row still measures >=44x44 (assertTouchTargets), only their SURROUNDING whitespace shrank. */ .st-page .st-topbar{display:flex;align-items:center;gap:3px;margin-bottom:16px} /* Task 6 (chrome slice): .st-back/.st-undo/.st-redo/.st-save/.st-preview-btn/ .st-units all moved their box/colour/hover/disabled styling into markup (.st-back also gained `lg:hidden` directly, replacing the separate lg+ override further down this file). Each icon button's own child `svg` sizing rule stays here — the icon comes from brew_tl_icon(), which takes no class argument, so there's nowhere in the ERB to put a matching utility without changing that helper's signature. */ .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} .st-page .st-undo svg,.st-page .st-redo svg{width:17px;height:17px} .st-page .st-preview-btn svg{width:18px;height:18px} /* Studio-alpha round: the ALPHA status chip (studio.html.erb/studio_home. html.erb's own comment on why it sits in this exact DOM slot). A STATIC span, never a button — no touch-target floor to clear, unlike every other control on this row. Gold (--color-gold), not accent/bad: neither "primary action" nor "broken" fits a status marker — see application.css (tailwind)'s own .alpha-tag comment, the exact same reasoning, for the entry-point cousin of this chip outside the studio. Below lg (default, this block): icon-only — .st-alpha-label/-note stay display:none below the lg+ override further down this file. Not a compromise made lightly: the below-lg topbar row already spends nearly every spare pixel on back/units/undo/redo/preview/save (.st-topbar's own "4px, not 12px" comment above), and studio_sweep.mjs's own assertStepListInFirstViewport is ALREADY failing by ~46px on this row's single tightest combination (vi/us) with no chip here at all — measured directly against a live server. A dummy element swept through that same row confirmed the real ceiling by hand: ~16px added here is still safe (no wrap, no horizontal scroll), 20px already isn't. 14px (this icon, with zero padding of its own) leaves a couple of px of margin under that ceiling rather than sitting flush against it. The full warning still reaches every visitor at every width regardless — title + aria-label on the OUTER span always carry recipes.studio.alpha.warning in full (see the view's own comment on why role="img" + aria-hidden children, not a sr-only span, carries it) — a below-lg visitor only ever loses the extra on-screen word a lg+ visitor gets for free below. */ /* Accent orange, not gold — this is a caution about unfinished software, and the gold tone read as decoration rather than a warning. */ .st-page .st-alpha-chip{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--accent)} .st-page .st-alpha-icon{width:14px;height:14px} /* The short "Alpha" word shows at EVERY width, not only lg+: a lone gold triangle with a title tooltip tells a touch visitor nothing (tooltips need a hover this device doesn't have), and telling visitors the studio is unfinished is the entire point of the chip. The ~16px horizontal ceiling this row really does have is paid for right below — .st-back drops its own "Back" WORD below lg, keeping its arrow (and its aria-label, which was always the link's accessible name — see the view: `aria: { label: ... }`, never the span). Net effect on the row: the label costs ~40px, the dropped word gives back ~34px, and the measured below-lg first-viewport top is unchanged. Only .st-alpha-note (the longer teaser sentence) stays lg+-only. */ .st-page .st-alpha-label{display:inline;font:700 10px "JetBrains Mono",monospace; letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--accent); border-radius:999px;padding:2px 6px;white-space:nowrap} .st-page .st-alpha-note{display:none} /* Below lg the WORD replaces the triangle rather than joining it: the two together measured 2px past the viewport at 390 (studio_sweep.mjs's own "no horizontal page scroll" check, EN/metric — the tightest combination for this row is not the same one that's tightest vertically), and of the two the word is the one that actually says "alpha" without a hover. */ .st-page .st-alpha-icon{display:none} /* .st-back-label's own display:none (Task 6, chrome slice) moved to a plain `hidden` utility in markup — it's unconditional at every width (the parent .st-back itself vanishes at lg+ instead), so no lg: variant was needed. */ /* ── Lang-topbar round: the language control — a small POPOVER below lg (this block: .st-lang-widget/.st-lang-trigger/.st-lang-bar), the SAME .st-lang-bar reparented INLINE into the top bar itself at lg+ (the @media(min-width:1024px) block further down this file — search ".st-lang-widget{display:contents}"; studio.html.erb's own comment on that div has the full "why", this file only owns the two shapes' CSS). Round 5 Task 2's own original shape — this bar as its own full-width row directly under the topbar, below lg — is gone: it cost the below-lg first-viewport budget studio_sweep.mjs's own assertStepListInFirstViewport guards ~54px it never needed to spend once a popover could hold the same pills instead. "menu" (app/javascript/controllers/menu_controller.js) owns the popover's own open/close, outside-click and Escape handling — the same controller the share popover (brew_timeline.css's own .bt-share-panel) and the header's own language/account/mobile menus already lean on; this file only styles the two states its own [hidden] attribute carries. EN pill (.is-base) never carries a remove button — it's the base, not a layer. Every OTHER pill is TWO separate