text node — the server builds the whole sentence with the money
interpolated inline (routes.py _studio_commercial_summary, printed verbatim
by studio_price_facts.js into
), so the money is
NOT its own spans and can't be re-faced to Oswald from CSS without a copy
change. What CSS can do: 1.4rem body, line-height 1.55, muted, 1.2rem top
padding inside the tan block, and max-width 34ch so the lines break evenly
into a tidy column instead of one wide run-on. (A follow-up drive can turn
the string into rows — see the handoff for the exact source.)
-------------------------------------------------------------------------- */
body.lgw-on .lgw-facts-details .lgw-facts-summary {
margin-top: 0;
padding-top: 1.2rem;
max-width: 34ch;
font-family: var(--vh-body);
font-weight: 400;
font-size: 1.4rem;
line-height: 1.55;
letter-spacing: 0;
color: var(--vh-muted);
}
/* ==========================================================================
B1 DRIVE (2026-09-21) — behaviour drive: Text step, Start over, pricing rows.
briefs/_SPEC_studio_b1.md. This drive is allowed to add markup + JS + edit
this stylesheet; the visual pass's skin-only rule does not bind it. Still no
!important, still scoped under body.lgw-on (the desktop shell).
========================================================================== */
/* --------------------------------------------------------------------------
B1 §2 — Start over: a quiet tile that is never a step. It carries no
data-lgw-step; fx4: it takes the active plate (.lgw-active) only while its
confirm shows, and the quiet label yields to active ink then. It sits in
the normal tile rhythm directly under Placement (no auto-margin gap), so the
rail reads Garment / Design / Text / Placement / Start over; the Review entry
carries margin-top:auto instead and stays pinned at the rail foot. Quieter
than the step labels (rail-quiet ink, weight 500) so it reads as a utility,
not a step; hover brightens it.
-------------------------------------------------------------------------- */
body.lgw-on .lgw-step--order { margin-top: auto; }
body.lgw-on .lgw-startover .lgw-lb {
font-weight: 500;
color: var(--sv-rail-quiet);
}
body.lgw-on .lgw-startover:hover .lgw-lb { color: var(--sv-panel); }
body.lgw-on .lgw-startover.lgw-active .lgw-lb { color: var(--sv-ink); font-weight: 600; }
/* B1 §2 — the inline Start over confirm: the D17 hidden-swap idiom seated
INSIDE the panel. At rest it is display:none and costs nothing. When the
rail button arms it (#lgw-panel gets .lgw-startover-on) it becomes an OPAQUE
panel-white fill of the whole panel (position:absolute inset:0) — the panel
head is replaced by the question, not covered by a floating modal or scrim.
-------------------------------------------------------------------------- */
body.lgw-on #lgw-startover-confirm { display: none; }
body.lgw-on .lgw-panel.lgw-startover-on { position: relative; }
body.lgw-on .lgw-panel.lgw-startover-on #lgw-startover-confirm {
display: flex;
flex-direction: column;
gap: 1.8rem;
position: absolute;
inset: 0;
z-index: 6;
background: var(--vh-white);
padding: 2.6rem 2.4rem;
}
body.lgw-on #lgw-startover-confirm .lgw-startover-q {
margin: 0;
max-width: 34ch;
font-family: var(--sv-title-font, var(--vh-display));
font-weight: var(--sv-title-weight, 600);
font-size: 2rem;
line-height: 1.35;
letter-spacing: var(--sv-title-tracking, .005em);
color: var(--vh-ink);
}
body.lgw-on #lgw-startover-confirm .lgw-startover-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
body.lgw-on #lgw-startover-confirm button {
min-height: 44px;
padding: .7rem 1.6rem;
font-family: var(--vh-body);
font-size: 1.5rem;
border-radius: var(--sv-r-ctl, 8px);
cursor: pointer;
}
body.lgw-on #lgw-startover-confirm .lgw-startover-yes {
background: var(--vh-ink);
color: var(--vh-white);
border: 1px solid var(--vh-ink);
}
body.lgw-on #lgw-startover-confirm .lgw-startover-no {
background: var(--vh-white);
color: var(--vh-ink);
border: 1px solid var(--st-control-border, #8A867E);
}
body.lgw-on #lgw-startover-confirm button:focus-visible {
outline: 2px solid var(--vh-ink);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
B1 §3 — PRICING DETAILS as rows. The server now emits commercial_rows and
studio_price_facts.js renders them as a
inside
the disclosure (falling back to the single for older cached payloads,
still styled by R6·3 above). Two-column grid: dt muted label, dd ink value
right-aligned with money upright in Oswald tabular. No rules — .6rem row gap.
-------------------------------------------------------------------------- */
body.lgw-on .lgw-facts-details .lgw-facts-rows {
display: grid;
grid-template-columns: auto 1fr;
gap: .6rem 1.6rem;
margin: 0;
padding-top: 1.2rem;
}
body.lgw-on .lgw-facts-details .lgw-facts-rows dt {
margin: 0;
font-family: var(--vh-body);
font-weight: 400;
font-size: 1.3rem;
line-height: 1.3;
color: var(--vh-muted);
}
body.lgw-on .lgw-facts-details .lgw-facts-rows dd {
margin: 0;
justify-self: end;
text-align: right;
font-family: var(--vh-display);
font-style: normal;
font-weight: 500;
font-size: 1.4rem;
line-height: 1.3;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: var(--vh-ink);
}
/* ==========================================================================
B3 DRIVE (2026-09-22) — Design owns the piece, Placement owns the spot.
Behaviour drive: the shell chooses which panel opens on select and lays the
controls out; the engine still owns select / delete / spot move / size /
thread count. All rules scoped to body.lgw-on (desktop) unless noted; the
phone shell (lgm-on) keeps today's layout except the cheap header Remove.
========================================================================== */
/* --- B3 §1 — the shared piece-header card: thumb, name, meta, then a quiet red
Remove text button on the right. The header card is identical on both the
Design piece editor and the Placement panel. The file-card "Swap"/"Add logo"
link (#lgw-ins-swap) stays a Design-only affordance; it is hidden in
Placement (insRender) and never competes with Remove for the right edge. --- */
body.lgw-on .lgw-ins-id .lgw-ins-f { flex: 1 1 auto; min-width: 0; }
body.lgw-on .lgw-ins-remove {
flex: 0 0 auto;
appearance: none;
border: 0;
background: none;
padding: .4rem .2rem;
font-family: var(--vh-body);
font-size: 1.3rem;
font-weight: 500;
color: var(--vh-stop);
cursor: pointer;
border-radius: var(--sv-r-sm, 6px);
}
body.lgw-on .lgw-ins-remove:hover { text-decoration: underline; }
body.lgw-on .lgw-ins-remove:focus-visible { outline: 2px solid var(--vh-stop); outline-offset: 2px; }
/* the inline remove confirm — the Start over hidden-swap idiom, scoped to the
confirming HOST (the header card or a list row): arming hides the host's own
content and reveals the confirm IN PLACE (no modal, no scrim). Esc = Keep
(wired in JS). One shared .lgw-ins-confirm host class carries the swap. */
body.lgw-on .lgw-ins-confirm { display: none; }
body.lgw-on .lgw-ins-confirming > :not(.lgw-ins-confirm) { display: none; }
body.lgw-on .lgw-ins-confirming .lgw-ins-confirm {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.2rem;
width: 100%;
}
body.lgw-on .lgw-ins-id.lgw-ins-confirming { flex-wrap: wrap; }
body.lgw-on .lgw-ins-confirm .lgw-ins-confirm-q {
margin: 0;
flex: 1 1 auto;
font-family: var(--sv-title-font, var(--vh-display));
font-weight: var(--sv-title-weight, 600);
font-size: 1.7rem;
line-height: 1.3;
letter-spacing: var(--sv-title-tracking, .005em);
color: var(--vh-ink);
}
body.lgw-on .lgw-ins-confirm-actions { display: flex; gap: .8rem; flex: 0 0 auto; }
body.lgw-on .lgw-ins-confirm-actions button {
min-height: 40px;
padding: .5rem 1.3rem;
font-family: var(--vh-body);
font-size: 1.4rem;
border-radius: var(--sv-r-ctl, 8px);
cursor: pointer;
}
body.lgw-on .lgw-ins-confirm-yes {
background: var(--vh-stop);
color: var(--vh-white);
border: 1px solid var(--vh-stop);
}
body.lgw-on .lgw-ins-confirm-no {
background: var(--vh-white);
color: var(--vh-ink);
border: 1px solid var(--st-control-border, #8A867E);
}
body.lgw-on .lgw-ins-confirm-actions button:focus-visible {
outline: 2px solid var(--vh-ink);
outline-offset: 2px;
}
/* --- B3 §2 — thread dots on the "Everything in this design" rows: up to 5 dots
after the name/status, then a quiet "+N" overflow. Colours are the design's
thread palette (logos, whole-design) or the text's own thread hex. --- */
body.lgw-on .lgw-ins-dots { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; }
body.lgw-on .lgw-ins-dots[hidden] { display: none; }
body.lgw-on .lgw-ins-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(24, 21, 16, .18);
flex: 0 0 auto;
}
body.lgw-on .lgw-ins-dot--more {
width: auto;
height: auto;
border: 0;
border-radius: 0;
font-family: var(--vh-body);
font-size: 1.1rem;
line-height: 1;
color: var(--vh-muted);
}
/* --- B3 §2/§3 — the cross-link secondary button under the editor / panel. One
full-width quiet secondary ("Place this piece" or "Edit colors"/"Edit text").
Reads lighter than the ink Continue CTA; same control radius. --- */
body.lgw-on .lgw-ins-xlink { margin-top: 2.4rem; display: flex; flex-direction: column; gap: .8rem; }
body.lgw-on .lgw-ins-xlink[hidden] { display: none; }
/* the swap link reads quieter than "Place this piece" - a plain text control. */
body.lgw-on .lgw-ins-xbtn--swap {
border-color: transparent;
background: none;
min-height: 40px;
color: var(--sv-muted);
font-size: 1.4rem;
}
body.lgw-on .lgw-ins-xbtn--swap:hover { border-color: transparent; text-decoration: underline; }
/* B3 §1: the file-card swap link lives in the Design editor on the desktop, so
the shared header shows only thumb / name / meta / Remove - identical on both
panels. studio_controls.css:158 shows #lgw-ins-id #lgw-ins-swap at (2,1,0), so
match that (studio_visual loads last → wins). The phone keeps swap in the
header (its own edit flow), so this is scoped to lgw-on only. */
body.lgw-on #lgw-ins-id #lgw-ins-swap { display: none; }
body.lgw-on .lgw-ins-xbtn {
width: 100%;
min-height: 46px;
padding: .8rem 1.6rem;
font-family: var(--vh-body);
font-size: 1.5rem;
color: var(--vh-ink);
background: var(--sv-panel);
border: 1px solid var(--st-control-border, #8A867E);
border-radius: var(--sv-r-ctl, 8px);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
body.lgw-on .lgw-ins-xbtn[hidden] { display: none; }
body.lgw-on .lgw-ins-xbtn:hover { border-color: var(--vh-ink); }
body.lgw-on .lgw-ins-xbtn:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
/* B3 §4 — the per-row Remove: a quiet red text button revealed on row hover /
focus (always reachable by keyboard via focus-within). Its confirm reuses the
shared .lgw-ins-confirm swap above. */
body.lgw-on .lgw-ins-row { position: relative; }
body.lgw-on .lgw-ins-rowrm {
flex: 0 0 auto;
appearance: none;
border: 0;
background: none;
padding: .3rem .5rem;
font-family: var(--vh-body);
font-size: 1.2rem;
font-weight: 500;
color: var(--vh-stop);
cursor: pointer;
border-radius: var(--sv-r-sm, 6px);
opacity: 0;
transition: opacity 120ms ease;
}
body.lgw-on .lgw-ins-row:hover .lgw-ins-rowrm,
body.lgw-on .lgw-ins-row:focus-within .lgw-ins-rowrm { opacity: 1; }
body.lgw-on .lgw-ins-rowrm:hover { text-decoration: underline; }
body.lgw-on .lgw-ins-rowrm:focus-visible { opacity: 1; outline: 2px solid var(--vh-stop); outline-offset: 2px; }
/* the row's confirm q reads smaller than the header's (a row is a tight strip) */
body.lgw-on .lgw-ins-rowconfirm .lgw-ins-confirm-q { font-size: 1.4rem; }
/* Phone shell (<1100px): the B3 desktop confirm swap, dots, cross-link and
row Remove are styled for the desktop panel only. Rather than ship them
half-styled on the phone sheet, keep the phone layout as it is today (spec
§5) — they are hidden on lgm-on; the phone keeps its own edit flow. */
body.lgm-on .lgw-ins-remove,
body.lgm-on .lgw-ins-idconfirm,
body.lgm-on .lgw-ins-dots,
body.lgm-on .lgw-ins-rowrm,
body.lgm-on .lgw-ins-rowconfirm,
body.lgm-on .lgw-ins-xlink { display: none; }
/* --- B3 §3 — Placement equal cards. Joel: the mixed-width chips "are too
different in size and look a little messy." The spots as a grid of IDENTICAL
cards (name on top, fit line under), then a one-row Width stepper. Desktop
shell only; the phone keeps its own layout.
B10 §1 — the Side toggle (Front | Back) is gone: the cards list every spot on
both sides and take the toggle's look — Oswald caps label; selected = solid
ink fill with a white label (the black button Joel likes), unselected = white
with a hair border. The corner check stays off: the fill IS the selection. --- */
body.lgw-on .lgw-ins-spots {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
/* the id in the :is() list is the R2 specificity lever: studio_controls.css
styles .lgw-ins-spot (and its --on state) at (1,1,1) through an :is() that
carries ids; (1,2,1) here wins by source order AND weight. */
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 6.6rem;
padding: 1rem 1.2rem;
text-align: left;
gap: .3rem;
font: 400 1.3rem/1.2 var(--vh-display);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--vh-ink);
background: var(--sv-panel);
border: 1px solid var(--sv-hair-strong);
border-radius: var(--sv-r-ctl, 8px);
box-shadow: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot:hover:not(:disabled):not(.lgw-ins-spot--on) {
border-color: var(--vh-ink);
background: var(--sv-panel);
box-shadow: none;
transform: none;
}
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot.lgw-ins-spot--on,
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot.lgw-ins-spot--on:hover {
background: var(--vh-ink);
color: var(--vh-white);
border-color: var(--vh-ink);
box-shadow: none;
}
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot.lgw-ins-spot--on::after { content: none; }
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot:disabled {
opacity: .5;
cursor: not-allowed;
}
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
/* the fit line keeps the body face, sentence case, quiet; white-ish on ink */
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot .lgw-ins-fit {
margin-top: 0;
font: 400 1.2rem/1.3 var(--vh-body);
text-transform: none;
letter-spacing: 0;
color: var(--vh-muted);
}
body.lgw-on :is(#lgw-ins-spots, .lgw-ins-spots) > .lgw-ins-spot.lgw-ins-spot--on .lgw-ins-fit { color: rgba(253, 252, 247, .78); }
/* the "Too small" line on a dimmed, unclickable card reads distinct from Fits */
body.lgw-on .lgw-ins-spot .lgw-ins-fit--no { color: var(--sv-muted); }
/* B10 §1: Arrange text below logo sits directly under the cards, ahead of Size */
body.lgw-on #lgw-ins-arrange { margin: 1.2rem 0 0; }
body.lgw-on #lgw-ins-arrange[hidden] { display: none; }
/* ==========================================================================
B10 §2 — the Text panel as ROWS (the Lids pattern), the piece tools, the
font chooser view. Desktop shell only: the lgt module re-seats its own
nodes into these rows under body.lgw-on and restores today's order for the
phone. Rows: 1.5rem body-600 label left, value right-aligned muted, 8px
radius on the click-through rows, ONE hairline between rows (no boxes), ink
chevrons. No gold. Shape / Spacing / Lines rows are not built (engine gate).
========================================================================== */
/* Phone studio S1: the phone's Text sheet is these same rows (Joel's PC
order since T1), so the selectors below read both shells */
:is(body.lgw-on, body.lgm-on) .lgt-row {
display: flex;
flex-direction: column;
gap: .9rem;
padding: 1.5rem 0;
border-top: 1px solid var(--sv-hair);
}
:is(body.lgw-on, body.lgm-on) .lgt-row[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) #lgt-row-words { border-top: 0; padding-top: .2rem; }
:is(body.lgw-on, body.lgm-on) .lgt-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
min-height: 2.6rem;
}
:is(body.lgw-on, body.lgm-on) .lgt-row .lgt-row-lbl,
:is(body.lgw-on, body.lgm-on) .lgt-row .lgt-th-t,
:is(body.lgw-on, body.lgm-on) .lgt-row .lgt-size-t {
display: block;
margin: 0;
font: 600 1.5rem/1.35 var(--vh-body);
letter-spacing: 0;
text-transform: none;
color: var(--vh-ink);
}
:is(body.lgw-on, body.lgm-on) .lgt-row-val,
:is(body.lgw-on, body.lgm-on) .lgt-row .lgt-row-value {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: .9rem;
min-width: 0;
text-align: right;
font: 400 1.4rem/1.35 var(--vh-body);
color: var(--sv-muted);
}
:is(body.lgw-on, body.lgm-on) .lgt-row-valtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the ink chevron: a CSS-drawn stroke, no glyph font */
:is(body.lgw-on, body.lgm-on) .lgt-row-chev,
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row #lgt-th-cur::after {
content: '';
flex: none;
width: .8rem;
height: .8rem;
margin-left: .2rem;
border-right: 2px solid var(--vh-ink);
border-bottom: 2px solid var(--vh-ink);
transform: rotate(-45deg);
}
/* click-through rows (Font, Thread): the whole row is the control */
:is(body.lgw-on, body.lgm-on) .lgt-row--btn {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 5.8rem;
padding: 1rem .6rem;
appearance: none;
background: transparent;
border: 0;
border-top: 1px solid var(--sv-hair);
border-radius: var(--sv-r-ctl);
text-align: left;
cursor: pointer;
transition: background 120ms ease;
}
:is(body.lgw-on, body.lgm-on) .lgt-row--btn:hover { background: var(--st-control-hover); }
:is(body.lgw-on, body.lgm-on) .lgt-row--btn:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
:is(body.lgw-on, body.lgm-on) .lgt-font-sample {
height: 2.2rem;
max-width: 9rem;
object-fit: contain;
object-position: right center;
}
/* Thread: the existing chip is the row's value, flattened */
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 0;
padding: 1rem .6rem;
border-radius: var(--sv-r-ctl);
cursor: pointer;
transition: background 120ms ease;
}
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row:hover { background: var(--st-control-hover); }
/* M13 under B10: the tonal warning keeps its own full-width line under the
Thread row instead of squeezing in beside the chip */
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row { flex-wrap: wrap; }
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row > .lgw-tonal { flex: 1 0 100%; cursor: default; }
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row #lgt-th-cur {
min-width: 0;
min-height: 2.6rem;
height: auto;
padding: 0;
gap: .8rem;
background: transparent;
border: 0;
border-radius: var(--sv-r-sm);
font: 400 1.4rem/1.35 var(--vh-body);
color: var(--sv-muted);
box-shadow: none;
}
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row #lgt-th-cur:hover { border-color: transparent; }
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row #lgt-th-cur:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 4px; }
:is(body.lgw-on, body.lgm-on) .lgt-th.lgt-row #lgt-th-cur .lgw-cl-swno { color: var(--vh-ink); font-weight: 600; }
/* Caps: a two-key segmented control, selected = ink fill (the placement cards' language) */
:is(body.lgw-on, body.lgm-on) .lgt-seg { display: inline-flex; gap: .5rem; }
:is(body.lgw-on, body.lgm-on) .lgt-seg-btn,
:is(body.lgw-on, body.lgm-on) .lgt-quick-btn,
:is(body.lgw-on, body.lgm-on) .lgw-pt-chip {
min-height: 3.6rem;
padding: 0 1.2rem;
appearance: none;
background: var(--sv-panel);
color: var(--vh-ink);
border: 1px solid var(--sv-hair-strong);
border-radius: var(--sv-r-ctl);
font: 500 1.3rem/1 var(--vh-body);
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
:is(body.lgw-on, body.lgm-on) .lgt-seg-btn:hover:not(.lgt-seg--on),
:is(body.lgw-on, body.lgm-on) .lgt-quick-btn:hover:not([aria-pressed="true"]):not(:disabled),
:is(body.lgw-on, body.lgm-on) .lgw-pt-chip:hover:not([aria-pressed="true"]):not(:disabled) { border-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgt-seg-btn.lgt-seg--on,
:is(body.lgw-on, body.lgm-on) .lgt-quick-btn[aria-pressed="true"],
:is(body.lgw-on, body.lgm-on) .lgw-pt-chip[aria-pressed="true"] {
background: var(--vh-ink);
color: var(--vh-white);
border-color: var(--vh-ink);
}
:is(body.lgw-on, body.lgm-on) :is(.lgt-seg-btn, .lgt-quick-btn, .lgw-pt-chip):focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
:is(body.lgw-on, body.lgm-on) :is(.lgt-quick-btn, .lgw-pt-chip):disabled { opacity: .45; cursor: not-allowed; }
/* personalisation part 2: "Different on each piece" — the Caps row's chrome
(label + two-key segmented), the help line under it, and the quiet reason
when another line already changes per piece (keys greyed, not hidden) */
:is(body.lgw-on, body.lgm-on) .lgt-row--pp { gap: .6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-row--pp .lgt-seg-btn { min-width: 5.6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-row--pp .lgt-seg-btn:disabled { opacity: .45; cursor: not-allowed; }
:is(body.lgw-on, body.lgm-on) .lgt-row--pp .lgt-seg-btn:disabled:hover { border-color: var(--sv-hair-strong); }
:is(body.lgw-on, body.lgm-on) .lgt-pp-help,
:is(body.lgw-on, body.lgm-on) .lgt-pp-why {
margin: 0;
font: 400 1.3rem/1.5 var(--vh-body);
color: var(--sv-muted);
}
:is(body.lgw-on, body.lgm-on) .lgt-pp-why { color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgw-pt-chip--reset { font-weight: 400; color: var(--sv-muted); }
:is(body.lgw-on, body.lgm-on) .lgw-pt-chip--reset:disabled { opacity: .45; }
/* Text size: head (label · value) + the existing slider + quick sizes */
:is(body.lgw-on, body.lgm-on) .lgt-size.lgt-row { margin-top: 0; padding-top: 1.5rem; }
:is(body.lgw-on, body.lgm-on) .lgt-size.lgt-row #lgt-size-val {
font: 400 1.4rem/1.35 var(--vh-body);
color: var(--sv-muted);
white-space: nowrap;
}
:is(body.lgw-on, body.lgm-on) .lgt-size.lgt-row .lgt-size-row { gap: .6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-size.lgt-row #lgt-size { width: 100%; min-width: 0; accent-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgt-quick { display: flex; flex-wrap: wrap; gap: .6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-quick[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgt-size.lgt-row #lgt-size-note { margin-top: .2rem; }
/* Rotation: readout, slider, quick angles */
:is(body.lgw-on, body.lgm-on) .lgw-pt-slider { width: 100%; accent-color: var(--vh-ink); margin: 0; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
/* R-009: a chip turn that no longer fit shrank the logo: the line says so */
:is(body.lgw-on, body.lgm-on) .lgw-pt-note { margin: .6rem 0 0; font-size: 1.3rem; line-height: 1.8rem; color: var(--vh-muted); }
:is(body.lgw-on, body.lgm-on) .lgw-pt-note[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-rot .lgt-row-val { font-family: var(--vh-display); font-variant-numeric: tabular-nums; color: var(--vh-ink); font-size: 1.5rem; }
/* the piece-tools strip (Send back · Bring forward · Flip H · Flip V; Center
rides under the Size row since 2026-10-01):
small icon keys with a one-word label, above the rows (the Lids strip) */
:is(body.lgw-on, body.lgm-on) .lgw-pt-strip {
display: flex;
flex-wrap: wrap;
gap: .5rem;
padding: 0 0 1.4rem;
}
:is(body.lgw-on, body.lgm-on) .lgw-pt-strip[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-key {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5rem;
flex: 1 1 0;
min-width: 5.8rem;
min-height: 5.4rem;
padding: .6rem .4rem;
appearance: none;
background: var(--sv-panel);
color: var(--vh-ink);
border: 1px solid var(--sv-hair);
border-radius: var(--sv-r-ctl);
font: 500 1.15rem/1 var(--vh-body);
letter-spacing: 0;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
:is(body.lgw-on, body.lgm-on) .lgw-pt-key[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-key:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgw-pt-key[aria-pressed="true"] { background: var(--vh-ink); color: var(--vh-white); border-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgw-pt-key:disabled { opacity: .4; cursor: not-allowed; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-key:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-ico { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; }
:is(body.lgw-on, body.lgm-on) .lgw-pt-ico svg { width: 1.6rem; height: 1.6rem; }
/* B10 §2b — "Lines on this spot": one chip per text line in stacking order
(dot in its thread colour + the words + the font name), the active line
ink-filled; "+ Add another line" dashed; "Stack" quiet. Above the rows. */
:is(body.lgw-on, body.lgm-on) .lgt-lines { display: flex; flex-direction: column; gap: .8rem; padding: 0 0 1.6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-lines[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgt-lines-lbl {
font: 500 1.2rem/1 var(--vh-display);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sv-text-quiet);
}
:is(body.lgw-on, body.lgm-on) .lgt-lines-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-line {
display: inline-flex;
align-items: center;
gap: .7rem;
max-width: 100%;
min-height: 3.8rem;
padding: 0 1.2rem 0 .9rem;
appearance: none;
background: var(--sv-panel);
color: var(--vh-ink);
border: 1px solid var(--sv-hair-strong);
border-radius: var(--sv-r-ctl);
font: 500 1.3rem/1 var(--vh-body);
letter-spacing: 0;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
:is(body.lgw-on, body.lgm-on) .lgt-line:hover:not(:disabled):not(.lgt-line--on) { border-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgt-line:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
:is(body.lgw-on, body.lgm-on) .lgt-line:disabled { opacity: .45; cursor: not-allowed; }
:is(body.lgw-on, body.lgm-on) .lgt-line.lgt-line--on { background: var(--vh-ink); color: var(--vh-white); border-color: var(--vh-ink); }
:is(body.lgw-on, body.lgm-on) .lgt-line-dot {
flex: none;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(24, 21, 16, .28);
}
:is(body.lgw-on, body.lgm-on) .lgt-line--on .lgt-line-dot { box-shadow: 0 0 0 1px rgba(253, 252, 247, .6); }
:is(body.lgw-on, body.lgm-on) .lgt-line-words { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(body.lgw-on, body.lgm-on) .lgt-line-font { font-size: 1.1rem; font-weight: 400; color: var(--sv-muted); white-space: nowrap; }
:is(body.lgw-on, body.lgm-on) .lgt-line--on .lgt-line-font { color: rgba(253, 252, 247, .75); }
:is(body.lgw-on, body.lgm-on) .lgt-line--add { padding: 0 1.2rem; border-style: dashed; }
/* studio panel (Joel 2026-09-23): with ONE line the add sits under Your words
as its own quiet row ("+ Add a second line below") - no hairline above it,
so it reads as part of the words group; the strip takes over at 2+ lines. */
:is(body.lgw-on, body.lgm-on) #lgt-row-addline { border-top: 0; padding: 0 0 1.5rem; }
:is(body.lgw-on, body.lgm-on) #lgt-row-addline[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) #lgt-row-addline > .lgt-line--add { align-self: flex-start; }
:is(body.lgw-on, body.lgm-on) .lgt-line--stack { padding: 0 1.2rem; color: var(--sv-muted); }
:is(body.lgw-on, body.lgm-on) .lgt-lines-live { margin: 0; font: 400 1.3rem/1.5 var(--vh-body); color: var(--vh-muted); }
:is(body.lgw-on, body.lgm-on) .lgt-lines-live[hidden] { display: none; }
/* the Design editor's strip + Rotation row for a logo (B10 §3) */
body.lgw-on .lgw-ins-pt-strip { margin-top: 2rem; padding-bottom: 0; }
body.lgw-on .lgw-ins-pt-rot { margin-top: .4rem; }
/* Stack lines under the placement cards, beside Arrange */
body.lgw-on #lgw-ins-stack { margin: 1.2rem 0 0; }
body.lgw-on #lgw-ins-stack[hidden] { display: none; }
/* the font chooser VIEW: replaces the rows in place, Back at the top, the
existing grid at full panel height (the panel scrolls, not the grid) */
:is(body.lgw-on, body.lgm-on) #lgt-view-font[hidden] { display: none; }
:is(body.lgw-on, body.lgm-on) .lgt-view-on > :not(#lgt-view-font) { display: none; }
:is(body.lgw-on, body.lgm-on) .lgt-view-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0 0 1.6rem; }
:is(body.lgw-on, body.lgm-on) .lgt-view-title { display: block; }
:is(body.lgw-on, body.lgm-on) #lgt-view-font #lgt-fonts { max-height: none; overflow: visible; margin-top: 0; padding-right: 0; }
/* the one-row Width stepper: label, - value + , then the height readout. The
value is Oswald tabular, inches, one decimal (the engine's own string). */
body.lgw-on .lgw-ins-size {
display: flex;
align-items: center;
gap: .8rem;
min-height: 4.8rem;
padding: .7rem 1.2rem;
background: var(--sv-panel);
border: 1px solid var(--sv-hair);
border-radius: var(--sv-r-card, 10px);
}
body.lgw-on .lgw-ins-size[hidden] { display: none; }
body.lgw-on .lgw-ins-size-w {
margin-right: auto;
font-family: var(--vh-body);
font-weight: 500;
font-size: 1.4rem;
color: var(--vh-ink);
}
body.lgw-on .lgw-ins-sizebtn {
flex: 0 0 auto;
min-width: 40px;
min-height: 40px;
appearance: none;
cursor: pointer;
background: var(--sv-panel);
color: var(--vh-ink);
border: 1px solid var(--sv-hair-strong);
border-radius: var(--sv-r-ctl, 8px);
font-family: var(--vh-display);
font-size: 1.7rem;
line-height: 1;
}
body.lgw-on .lgw-ins-sizebtn:hover:not(:disabled) { border-color: var(--vh-ink); }
body.lgw-on .lgw-ins-sizebtn:disabled { opacity: .4; cursor: not-allowed; }
body.lgw-on .lgw-ins-sizebtn:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
body.lgw-on .lgw-ins-size-val {
min-width: 5.6rem;
text-align: center;
font-family: var(--vh-display);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
font-size: 1.7rem;
color: var(--vh-ink);
}
body.lgw-on .lgw-ins-size-meta {
flex: 0 0 auto;
margin-left: .4rem;
font-family: var(--vh-body);
font-size: 1.3rem;
color: var(--vh-muted);
}
body.lgw-on .lgw-ins-size-meta[hidden] { display: none; }
/* Zones step 2 (rule F): the sizes are true on the size M every photo shows */
body.lgw-on .lgw-ins-sizenote { margin: .5rem 0 0 .2rem; font-family: var(--vh-body); font-size: 1.2rem; color: var(--vh-muted); }
.lgw-ins-sizenote[hidden], body:not(.lgw-on) .lgw-ins-sizenote { display: none; }
/* Studio tweaks (Joel 2026-10-01): the one Center key, directly under the
Size row and its note - the piece-tools key's skin (hairline, r-ctl, the
same centre glyph) laid out in one line. */
body.lgw-on .lgw-ins-center {
display: inline-flex;
align-items: center;
gap: .7rem;
margin: 1rem 0 0;
min-height: 4.4rem;
padding: 0 1.6rem 0 1.3rem;
appearance: none;
cursor: pointer;
background: var(--sv-panel);
color: var(--vh-ink);
border: 1px solid var(--sv-hair);
border-radius: var(--sv-r-ctl);
font: 500 1.3rem/1 var(--vh-body);
letter-spacing: 0;
transition: border-color 120ms ease;
}
body.lgw-on .lgw-ins-center:hover { border-color: var(--vh-ink); }
body.lgw-on .lgw-ins-center:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }
body.lgw-on .lgw-ins-center-ico { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; }
body.lgw-on .lgw-ins-center-ico svg { width: 1.6rem; height: 1.6rem; }
.lgw-ins-center[hidden], body:not(.lgw-on) .lgw-ins-center { display: none; }
@media (prefers-reduced-motion: reduce) { body.lgw-on .lgw-ins-center { transition: none; } }
/* studio textsize: on the Text tab the same row sits in the Text size section,
under the slider and above the quick sizes */
body.lgw-on .lgw-ins-size--text { margin: 1.2rem 0 0; }
/* phone: the size row is the desktop placement layout only. */
body.lgm-on :is(.lgw-ins-size, #lgw-ins-size-lbl) { display: none; }
/* --------------------------------------------------------------------------
B3 §4 — GARMENT TYPE PICKER AS STACKED ROWS. Joel: the 3x2 squares "looked
squashed and the icons rode high/low." Replace the tile grid with full-width
rows: a fixed 44px icon box left, the name (Oswald 600) + "N styles available"
in a column, an arrow at the far right; 8px between rows. Layout only - the
buttons are the same nodes/handlers the shell already mirrors. Selection (ink
ring + corner check) is the §2 rule the family already carries. The per-icon
optical-centre transforms from R4·P are percentage-based, so they still land.
-------------------------------------------------------------------------- */
body.lgw-on .lgw-family-grid {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 0 1.3rem;
}
body.lgw-on .lgw-family {
display: grid;
grid-template-columns: 44px 1fr auto;
grid-template-rows: auto auto;
align-items: center;
justify-items: start;
column-gap: 1.4rem;
row-gap: .1rem;
min-height: 6.6rem;
padding: 1.1rem 1.6rem;
text-align: left;
}
body.lgw-on .lgw-family-ico {
grid-column: 1;
grid-row: 1 / 3;
width: 44px;
height: 44px;
margin: 0;
align-self: center;
}
body.lgw-on .lgw-family-nm {
grid-column: 2;
grid-row: 1;
align-self: end;
max-width: 100%;
font-family: var(--vh-display);
font-weight: 600;
font-size: 1.7rem;
letter-spacing: .01em;
text-transform: none;
line-height: 1.15;
color: var(--vh-ink);
}
body.lgw-on .lgw-family-count {
grid-column: 2;
grid-row: 2;
align-self: start;
margin: 0;
font-family: var(--vh-body);
font-size: 1.3rem;
color: var(--sv-muted);
line-height: 1.2;
}
body.lgw-on .lgw-family-arrow {
grid-column: 3;
grid-row: 1 / 3;
position: static;
align-self: center;
right: auto;
top: auto;
font-family: var(--vh-body);
font-size: 1.6rem;
color: var(--sv-text-quiet);
}
/* ==========================================================================
BOOT ANTI-FLASH — no classic page before the shell mounts
==========================================================================
The shell (body.lgw-on / body.lgm-on) is applied by applyMode() at the END
of the ~12k-line studio script; the server sends the classic engine markup
(.lgs > .lg-shell holds the "Placement preview" card + the "Job ticket"
column). On every cold load, Start over reload, and Back/Forward, the
browser paints that classic grid for one or more frames before applyMode
reparents the nodes into the rail/panel — the flash Joel saw on Start over.
An inline
script (logo_studio.html head_extra) stamps html.lgw-boot
(>=1100px, mirrors mqD) or html.lgm-boot (<1100px, mirrors mqM) synchronously
before the body paints. Until the matching mode class lands we hide the
classic grid. visibility (not display) so layout is measured normally and the
shell's first canvas-fit / --lgw-top reads are unchanged; the reparented
preview/ticket inherit visible from their new (unhidden) zone parents. The
masthead lives outside .lgs and stays visible. applyMode() and a window
'load' fallback both clear the boot classes, so the page can never stay
blank even if the script throws before the shell mounts. */
html.lgw-boot body:not(.lgw-on) .lgs > .lg-shell,
html.lgm-boot body:not(.lgm-on) .lgs > .lg-shell {
visibility: hidden;
}
/* ==========================================================================
STUDIO B9 (2026-09-22) — FULL-SCREEN GARMENT PICKER (comp D "Every style on
one wall"). Desktop shell only (body.lgw-on). Spec:
briefs/_SPEC_studio_b9_garment_picker.md. The overlay is a new SURFACE the
shell builds over the same pk* data; the inline #lgw-picker keeps every rule
above for the phone. Tokens, radius, no gold; one selection language (ink
ring + corner check); photos on white; titles in the --sv-title face; money
in Oswald.
========================================================================== */
.lgw-gp { display: none; }
body.lgw-on .lgw-gp:not([hidden]) {
display: block;
position: fixed;
inset: 0;
z-index: 72; /* above the phone popup (70) and the math dialog (21) */
}
body.lgw-on.lgw-gp-open { overflow: hidden; }
body.lgw-on .lgw-gp-scrim {
position: absolute;
inset: 0;
background: rgba(24, 21, 16, .46);
}
body.lgw-on .lgw-gp-sheet {
position: absolute;
inset: 1.6rem;
display: flex;
overflow: hidden;
background: var(--vh-cream);
border-radius: 16px;
box-shadow: 0 30px 80px rgba(24, 21, 16, .38);
animation: lgwGpIn 180ms cubic-bezier(.2, .7, .2, 1);
outline: none;
}
@keyframes lgwGpIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body.lgw-on .lgw-gp-sheet { animation: none; }
}
/* ── left: head, chips, wall ─────────────────────────────────────────────── */
body.lgw-on .lgw-gp-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
body.lgw-on .lgw-gp-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
padding: 2.8rem 3.6rem 1.6rem;
}
body.lgw-on .lgw-gp-eyebrow {
margin: 0 0 .6rem;
font-family: var(--vh-display);
font-weight: 500;
font-size: 1.1rem;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sv-text-quiet);
}
body.lgw-on .lgw-gp-title {
margin: 0;
font-family: var(--sv-title-font);
font-weight: var(--sv-title-weight);
font-size: 3.2rem;
line-height: 1.05;
letter-spacing: var(--sv-title-tracking);
text-transform: var(--sv-title-transform);
color: var(--sv-ink);
}
body.lgw-on .lgw-gp-count {
padding-bottom: .5rem;
font-family: var(--vh-body);
font-size: 1.3rem;
color: var(--sv-muted);
white-space: nowrap;
}
body.lgw-on .lgw-gp-chips {
display: flex;
flex-wrap: wrap;
gap: .8rem;
padding: 0 3.6rem 1.8rem;
}
body.lgw-on .lgw-gp-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: .9rem;
height: 4.4rem;
padding: 0 1.4rem 0 .6rem;
background: #FFFFFF;
border: 1px solid var(--sv-hair);
border-radius: var(--sv-r-ctl);
font-family: var(--vh-body);
font-weight: 600;
font-size: 1.35rem;
color: var(--sv-ink);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
body.lgw-on .lgw-gp-chip:hover:not(.lgw-pk-sel):not([disabled]) {
border-color: var(--sv-hair-strong);
background: var(--st-control-hover);
}
body.lgw-on .lgw-gp-chip.lgw-pk-sel {
border-color: var(--sv-ink);
box-shadow: inset 0 0 0 1px var(--sv-ink);
}
body.lgw-on .lgw-gp-chip[disabled] { opacity: .45; cursor: not-allowed; }
body.lgw-on .lgw-gp-chip-ava {
display: grid;
place-items: center;
width: 3.2rem;
height: 3.2rem;
flex: none;
overflow: hidden;
border-radius: var(--sv-r-sm);
background: #FFFFFF;
color: var(--sv-text-quiet);
}
body.lgw-on .lgw-gp-chip-ava img,
body.lgw-on .lgw-gp-chip-ava .lgw-gp-chip-ico {
width: 100%;
height: 100%;
object-fit: contain;
}
body.lgw-on .lgw-gp-chip-ava .lgw-gp-chip-ico { width: 2.2rem; height: 2.2rem; }
body.lgw-on .lgw-gp-chip-ava--all svg { width: 1.6rem; height: 1.6rem; }
body.lgw-on .lgw-gp-chip-n {
font-weight: 500;
font-size: 1.2rem;
color: var(--sv-muted);
}
body.lgw-on .lgw-gp-wall {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 2rem 3.6rem 3.2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17.2rem, 1fr));
grid-auto-rows: max-content; /* a