/* The studio layout (owner's option 19, UI lab; review 26): a rail of tabs, one control panel, a large preview, an order summary, info rows in a band below.
   Only the pages catalog.py marks studio load this. Scoped under .sw-*, #panel and .u-*: nothing inherited on any ancestor of #poster (CLAUDE.md). */
:root { --u-head: 126px; --u-work: calc(100svh - var(--u-head)); --u-strip: calc(max(40svh, 240px) + 20px); --u-note: 76px; /* .sw-sample-note: 3 lines of 14px/1.45 + 12px margin */ }

.sw-header { max-width: none; }
/* ---- the workspace: four columns on one grid; .sw-config dissolves so its children can sit either side of the canvas ---- */
.sw-product { padding: 0; gap: 0; max-width: none; }
.sw-pinbar .sw-crumbs { padding: 8px var(--gutter); border-bottom: var(--u-rule); background: var(--wall); }
.sw-crumbs ol { font-size: 14px; }

@media (min-width: 1200px) {
  /* one row, four columns: each stays under the banner until its bottom meets the workspace's, so all four bottoms finish on one line. The banner lets go when the workspace's bottom reaches the window's (its margin, undone by the workspace's own). */
  html { scroll-padding-top: calc(var(--u-head) + 16px); }
  .sw-pinbar { position: sticky; top: 0; z-index: 8; margin-bottom: var(--u-work); }
  .sw-product { grid-template-columns: 96px 392px minmax(0, 1fr) 328px; grid-template-rows: auto; row-gap: 0; margin-top: calc(-1 * var(--u-work)); }
  .sw-product::before { content: ''; grid-area: 1 / 1 / 2 / 2; margin-right: calc(-1 * var(--u-rule-w, 2px)); border-right: var(--u-rule); pointer-events: none; align-self: stretch; }
  .sw-config { display: contents; }
  .u-rail { grid-area: 1 / 1 / 2 / 2; position: sticky; top: var(--u-head); align-self: start; min-height: var(--u-work); }
  .sw-body #panel-slot { grid-area: 1 / 2 / 2 / 3; position: sticky; top: var(--u-head); align-self: start; min-width: 0; padding: 24px; }
  .sw-preview { grid-area: 1 / 3 / 2 / 4; position: sticky; top: var(--u-head); align-self: start; height: var(--u-work); padding: 16px 16px 24px; border-inline: var(--u-rule); }
  .sw-product .sw-fit { height: calc(var(--u-work) - 40px); }
  .sw-product .sw-preview:has(.sw-sample-note) .sw-fit { height: calc(var(--u-work) - 40px - var(--u-note)); }  /* the pet's sample note stays inside the column */
  .sw-config h1 { grid-area: 1 / 4 / 2 / 5; position: sticky; top: var(--u-head); z-index: 2; align-self: start; padding: 24px 24px 8px; background: var(--wall); }  /* the price's solid background starts where this box ends: keep descenders inside it */
  .sw-config > .sw-price { grid-area: 1 / 4 / 2 / 5; position: sticky; top: calc(var(--u-head) + var(--u-h1, 92px)); z-index: 2; align-self: start; padding: 4px 24px 12px; background: var(--wall); }
  .sw-buy { grid-area: 1 / 4 / 2 / 5; position: sticky; top: calc(var(--u-head) + var(--u-h1, 92px) + 76px); align-self: start; padding: 0 24px 24px; border-top: 0; }
}
/* a laptop too narrow for four columns: the summary goes under the controls, the canvas keeps its column */
@media (min-width: 861px) and (max-width: 1199px) {
  .sw-product { grid-template-columns: 84px minmax(320px, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; row-gap: 0; }
  .sw-product::before { content: ''; grid-area: 1 / 1 / -1 / 2; margin-right: calc(-1 * var(--u-rule-w, 2px)); border-right: var(--u-rule); pointer-events: none; align-self: stretch; }
  .sw-config { display: contents; }
  .u-rail { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; }
  .sw-body #panel-slot { padding-top: 20px; }
  .sw-preview { grid-column: 3; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; padding: 16px; border-left: var(--u-rule); }
  .sw-product .sw-fit { height: calc(var(--u-work) - 32px); }
  .sw-product .sw-preview:has(.sw-sample-note) .sw-fit { height: calc(var(--u-work) - 32px - var(--u-note)); }
  .sw-config > :not(.u-rail) { grid-column: 2; min-width: 0; padding-inline: 20px; }
  .sw-config h1 { padding-top: 20px; }
}
/* the canvas: a pasteboard, so a white frame and a white sheet both stand clear of it */
.sw-preview { background: var(--u-canvas) radial-gradient(var(--u-dot) 1px, transparent 1.3px) 0 0 / 16px 16px; }
.sw-fit .sw-frame:is([data-format="unframed"], [data-format="canvas"]) #stage { outline: 1px solid #0003; }

@media (max-width: 860px) {
  .sw-preview { padding: 10px var(--gutter); box-shadow: none; border-bottom: var(--u-rule); margin: 0; }
  /* the pet's sample note fits inside --u-strip, or the sticky preview covers the tab strip once the page scrolls (2026-11-11) */
  .sw-product .sw-preview:has(.sw-sample-note) .sw-fit { height: calc(40svh - var(--u-note)); min-height: calc(240px - var(--u-note)); }
}
@media (max-width: 359px) { :root { --u-note: 96px; } }  /* the note wraps to 4 lines below 360px */
@media (max-width: 860px) {
  .sw-pinbar .sw-crumbs { display: none; }
  .sw-config { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 16px var(--gutter) 40px; }
  .sw-config > * { grid-column: 1 / -1; min-width: 0; }
  .sw-config h1 { grid-column: 1; }
  .sw-config > .sw-price { grid-column: 2; }
  /* the section strip sticks directly under the sticky preview */
  .u-rail { position: sticky; top: var(--u-strip); z-index: 4; margin: 14px calc(-1 * var(--gutter)) 0; background: var(--wall); border-block: var(--u-rule); }
  .sw-body #panel-slot { padding-top: 20px; }
  .sw-body #panel :is(input, select, textarea, button), .sw-body :is(#panel, #sw-buy) label { scroll-margin-top: calc(var(--u-strip) + 64px); }
  .sw-more { margin-top: 28px; padding: 0 var(--gutter) 40px; }
}
@media (max-height: 500px) { .u-rail { position: static; } }

/* ---- the rail ---- */
.u-rail { font: 500 13px/1.15 var(--font); color: var(--u-rail-ink); }
.u-rail ul { list-style: none; margin: 0; padding: 0; display: grid; }
.u-rail button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 84px; padding: 10px 4px; border: 0; border-bottom: var(--u-rule);
  background: var(--u-rail-bg); color: var(--u-rail-ink); font: inherit; text-align: center; cursor: pointer; position: relative; transition: transform .1s var(--ease-out); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.u-rail button:active { transform: translate(1px, 1px); }
.u-rail button[aria-current="true"] { background: var(--u-on); color: var(--u-on-ink); font-weight: 700; }
.u-rail button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.u-rail svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.u-rail button[data-bad]::after { content: ''; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: var(--error); }
@media (hover: hover) and (pointer: fine) { .u-rail button:not([aria-current="true"]):hover { background: var(--rail); } }
@media (max-width: 860px) {
  .u-rail ul { grid-template-columns: repeat(var(--u-tabs, 5), minmax(0, 1fr)); }
  .u-rail { font-size: 12.5px; }
  .u-rail button { min-height: 48px; padding: 6px 1px; border-bottom: 0; border-right: var(--u-rule); letter-spacing: -.01em; }
  .u-rail li:last-child button { border-right: 0; }
  .u-rail svg { display: none; }
}

/* only one section at a time; the state is on <html>, so a rebuild can't lose it */
html[data-u-tab="format"] .sw-body #panel > [data-sec]:not([data-sec="format"]),
html[data-u-tab="content"] .sw-body #panel > [data-sec]:not([data-sec="content"]),
html[data-u-tab="style"] .sw-body #panel > [data-sec]:not([data-sec="style"]),
html[data-u-tab="details"] .sw-body #panel > [data-sec]:not([data-sec="details"]),
html[data-u-tab="finetune"] .sw-body #panel > [data-sec]:not([data-sec="finetune"]) { display: none; }

/* ---- option grids: every row an equal grid; map pictures fill the column ---- */
.sw-body #panel fieldset.choice:where(:not(:has(.bubble))) { display: grid; grid-template-columns: repeat(var(--u-cols, 3), minmax(0, 1fr)); gap: var(--u-gap); }
.sw-body #panel fieldset.choice > :is(.hint, .choice-head) { grid-column: 1 / -1; }
.sw-body #panel [data-f="format"], .sw-body #panel [data-f="orient"], .sw-body #panel [data-f="units"] { --u-cols: 2; }
.sw-body #panel [data-f="moulding"] { --u-cols: 4; }
.sw-body #panel [data-f="rundist"], .sw-body #panel [data-f="hverb"] { --u-cols: 2; }
.sw-body #panel .looks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sw-body #panel .looks.wc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sw-body #panel .choice:has(.bubble) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 6px; }
/* frame chips: the real moulding */
.sw-body #panel fieldset[data-f="moulding"] > label { flex-direction: column; gap: 6px; }
.sw-body #panel [data-f="moulding"] label::before { content: ''; box-sizing: border-box; width: 26px; height: 32px; background: #f4f1ea; border: 5px solid transparent; border-image: url(/static/frames/black.webp) 28 stretch; }
.sw-body #panel [data-f="moulding"] label:has(input[value="white"])::before { border-image-source: url(/static/frames/white.webp); filter: drop-shadow(0 0 1px #0009); }
.sw-body #panel [data-f="moulding"] label:has(input[value="oak"])::before { border-image-source: url(/static/frames/oak.webp); }
.sw-body #panel [data-f="moulding"] label:has(input[value="dark-wood"])::before { border-image-source: url(/static/frames/dark-wood.webp); }

/* ---- the info rows: a full-width band under the workspace; two independent columns, so opening a row never moves the other side ---- */
@media (min-width: 861px) { .sw-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); align-items: start; margin: 0; padding: 8px var(--gutter) 32px; } }
/* ---- the note under Map style; the link stays inline text whatever a skin does to buttons ---- */
.sw-body #panel .u-picks { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
.sw-body #panel .u-picks button.u-picks-link { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
/* one column on a phone: no doubled rule where the two halves meet */
@media (max-width: 860px) { .sw-more > div:first-child details:last-child { border-bottom: 0; } }
/* the band's own rule is the top line: no second one 8px under it */
@media (min-width: 861px) { .sw-more > div details:first-child { border-top: 0; } }
/* phones: jumping to a section lands it below the sticky preview and tabs, not under them */
@media (max-width: 860px) { .sw-body #panel > [data-sec] { scroll-margin-top: calc(var(--u-strip) + 60px); } }

/* title and price sit on the wall, unboxed: the print stays the headline */
.sw-config h1 { font: 600 26px/1.14 var(--font-display); letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.sw-config > .sw-price b { font: 600 40px/1 var(--font-display); font-variant-numeric: lining-nums; }

/* every section is its own card */
.sw-body #panel { gap: 14px; }
.sw-body #panel > fieldset, .sw-body #panel > details { background: var(--paper); border: 0; border-radius: 16px; padding: 22px 20px 24px; gap: 20px;
  box-shadow: var(--u-card-shadow); }
.sw-body #panel > fieldset > legend { font: 600 21px/1.2 var(--font-display); letter-spacing: -.006em; margin: 0; color: var(--ink); }

/* Fine-tune's blocks (owner, 2026-11-13; editor.js TUNE_BLOCKS): hairline rows with a chevron, the same five on every print, Colours open first.
   The rows sit flush (no card gap between them); an open block spaces its controls as the other cards do, and ends in a Close row. */
.sw-body #panel > [data-sec="finetune"]:has(> details.tune) { gap: 0; }
.sw-body #panel > [data-sec="finetune"] > legend { margin-bottom: 12px; }
.sw-body #panel details.tune { border-top: 1px solid var(--u-hair); }
.sw-body #panel details.tune:last-of-type { border-bottom: 1px solid var(--u-hair); }
.sw-body #panel details.tune[open] { display: grid; gap: 20px; padding-bottom: 4px; }
.sw-body #panel details.tune > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  font: 600 17px/1.25 var(--font-display); color: var(--ink); cursor: pointer; scroll-margin-top: 16px; }
.sw-body #panel details.tune > summary::-webkit-details-marker { display: none; }
.sw-body #panel details.tune > summary::after { content: ''; flex: none; width: 18px; height: 18px; background: var(--u-chev) center / contain no-repeat; transition: transform .2s var(--ease-out); }
.sw-body #panel details.tune[open] > summary::after { transform: rotate(180deg); }
.sw-body #panel details.tune > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .sw-body #panel details.tune > summary:hover { color: var(--walnut); } }
/* the Close row at a block's foot: quiet text and the same chevron, pointing up; a full-width target, the words on the right under the heading's chevron */
.sw-body #panel button.tune-close { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font: 500 14px/1.2 var(--font); cursor: pointer; }
.sw-body #panel button.tune-close::after { content: ''; width: 16px; height: 16px; background: var(--u-chev) center / contain no-repeat; transform: rotate(180deg); }
@media (hover: hover) { .sw-body #panel button.tune-close:hover { color: var(--ink); } }
.sw-body #panel button.tune-close:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* phones: a heading brought back into view lands below the sticky preview and tabs, not under them */
@media (max-width: 860px) { .sw-body #panel details.tune > summary { scroll-margin-top: calc(var(--u-strip) + 60px); } }

/* a triathlon's leg sections (owner, 2026-11-10): headed groups inside the picture block (All three maps; Swim, Bike, Run), never a fold inside a fold */
.sw-body #panel fieldset.fold { display: grid; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sw-body #panel fieldset.fold > legend { width: 100%; padding: 0 0 6px; margin: 0 0 14px; border-bottom: 1px solid var(--u-hair); font: 600 15px/1.3 var(--font); color: var(--ink); }

/* field labels: small and quiet, under the display-face card titles */
.sw-body #panel label, .sw-body #panel .field { font-weight: 500; font-size: 14px; color: var(--muted); }
.sw-body #panel label.check { color: var(--ink); font-size: 15px; font-weight: 400; }
.sw-body #panel fieldset.choice legend { font: 500 14px/1.3 var(--font); color: var(--muted); margin: 0 0 8px; letter-spacing: 0; }
.sw-body #panel .hint { color: var(--muted); }

/* tiles: every row an equal grid */
.sw-body #panel .choice label { --u-bg: var(--u-tile); position: relative; justify-content: center; text-align: center; min-height: 48px; padding: 8px 6px; color: var(--ink); background: var(--u-bg);
  border: 1px solid var(--u-tile-edge); border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.2; user-select: none; -webkit-user-select: none; transition: transform .1s var(--u-ease); }
.sw-body #panel .choice label:active { transform: scale(.975); }
.sw-body #panel .choice label:has(input:checked) { --u-bg: var(--u-sel); background: var(--u-bg); border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut), var(--u-lift); color: var(--ink); }
.sw-body #panel .choice label:has(input:disabled:not(:checked)) { color: var(--muted); }
.sw-body #panel .choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sw-body #panel .choice label:hover { border-color: var(--walnut); } }

/* the signature: format is the big decision, and each tile draws the product */
.sw-body #panel fieldset.choice[data-f="format"] > legend { font: 600 21px/1.2 var(--font-display); letter-spacing: -.006em; color: var(--ink); margin: 0 0 12px; }
.sw-body #panel [data-f="format"] { --u-w: 36px; --u-h: 46px; }
.sw-body #panel:has(input[name="orient"][value="landscape"]:checked) [data-f="format"] { --u-w: 46px; --u-h: 36px; }
.sw-body #panel [data-f="format"] label { flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 124px; padding: 18px 8px 12px; font: 500 15px/1.2 var(--font); border-radius: 12px; }
.sw-body #panel [data-f="format"] label::before { content: ''; flex: none; box-sizing: border-box; width: var(--u-w); height: var(--u-h); margin-block: calc((46px - var(--u-h)) / 2); background: var(--u-art) center / 100% 100% no-repeat; }
.sw-body #panel [data-f="format"] label:has(input:checked)::after { content: ''; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; background: var(--u-tick) center / contain no-repeat; }
/* framed: the real moulding, following the Frame choice below */
.sw-body #panel [data-f="format"] label:has(input[value="framed"])::before { border: 5px solid transparent; border-image: url(/static/frames/black.webp) 28 stretch; background-origin: padding-box; background-clip: padding-box; filter: drop-shadow(0 2px 2px rgb(var(--shadow) / .35)); }
.sw-body #panel:has(input[name="moulding"][value="white"]:checked) [data-f="format"] label:has(input[value="framed"])::before { border-image-source: url(/static/frames/white.webp); filter: drop-shadow(0 0 1px rgb(var(--shadow) / .9)) drop-shadow(0 1px 2px rgb(var(--shadow) / .35)); }
.sw-body #panel:has(input[name="moulding"][value="oak"]:checked) [data-f="format"] label:has(input[value="framed"])::before { border-image-source: url(/static/frames/oak.webp); }
.sw-body #panel:has(input[name="moulding"][value="dark-wood"]:checked) [data-f="format"] label:has(input[value="framed"])::before { border-image-source: url(/static/frames/dark-wood.webp); }
/* unframed: a loose sheet with a turned corner */
.sw-body #panel [data-f="format"] label:has(input[value="unframed"])::before { transform: rotate(-4deg); box-shadow: 0 2px 4px rgb(var(--shadow) / .32);
  background: linear-gradient(315deg, var(--u-bg) 6px, #cbd2c0 6px 10px, transparent 10px), var(--u-art) center / 100% 100% no-repeat; }
/* canvas: the print wrapped round a bar, weave on top */
.sw-body #panel [data-f="format"] label:has(input[value="canvas"])::before { width: calc(var(--u-w) - 4px); margin-inline-end: 4px;
  box-shadow: 1px 1px 0 #3f5a45, 2px 2px 0 #3f5a45, 3px 3px 0 #3f5a45, 4px 4px 0 #4d6c54, 0 8px 8px -3px rgb(var(--shadow) / .3);
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .14) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgb(0 0 0 / .03) 0 1px, transparent 1px 2px), var(--u-art) center / 100% 100% no-repeat; }
/* digital: a page with a turned corner and a download arrow */
.sw-body #panel [data-f="format"] label:has(input[value="digital"])::before { width: 36px; height: 46px; margin-block: 0; filter: drop-shadow(0 2px 2px rgb(var(--shadow) / .3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 46'%3E%3Cpath d='M1 3a2 2 0 0 1 2-2h21l11 11v31a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2z' fill='%23fff' stroke='%233f5a45' stroke-width='1.5'/%3E%3Cpath d='M24 1v9a2 2 0 0 0 2 2h9' fill='%23d1d8cf' stroke='%233f5a45' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M18 19v14m-6-6 6 6 6-6M11 38h14' fill='none' stroke='%233f5a45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* sizes on two lines; frames with the real moulding */
.sw-body #panel [data-f="size"] label { flex-direction: column; gap: 2px; min-height: 62px; }
.sw-body #panel .ul-main { display: block; font-weight: 700; font-variant-numeric: lining-nums; }
.sw-body #panel .ul-sub { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.sw-body #panel [data-f="size"] .ul-sub::before { content: "("; }
.sw-body #panel [data-f="size"] .ul-sub::after { content: ")"; }
.sw-body #panel [data-f="size"] .ul-text { font-weight: 700; font-variant-numeric: lining-nums; }
@media (max-width: 480px) {  /* three across on a phone: "40 × 50 cm" stays on one line */
  .sw-body #panel [data-f="size"] label { padding-inline: 4px; }
  .sw-body #panel [data-f="size"] .ul-text { font-size: min(14px, 4vw); white-space: nowrap; }
}
.sw-body #panel [data-f="moulding"] label { flex-direction: column; gap: 7px; min-height: 76px; padding: 10px 4px 8px; font-size: 13.5px; }
.sw-body #panel [data-f="units"] label { font-size: 14px; }

/* fields */
.sw-body #panel input:not([type=checkbox], [type=radio], [type=range]), .sw-body #panel select, .sw-body #panel textarea, .sw-body #panel .ul-datebtn, .sw-body #panel .choices__inner {
  min-height: 48px; background-color: #fff; border: 1px solid var(--field-edge); border-radius: var(--radius); color: var(--ink); font: 400 16px/1.4 var(--font); }
.sw-body #panel input::placeholder, .sw-body #panel textarea::placeholder { color: var(--u-faint); opacity: 1; }
.sw-body #panel select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: var(--u-chev); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; text-overflow: ellipsis; }
.sw-body #panel .ul-datebtn { padding: 10px 12px; }
.sw-body #panel .ul-datebtn::after { content: ''; flex: none; width: 18px; height: 18px; background: var(--muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 2.5V7M16 2.5V7'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .sw-body #panel :is(input:not([type=checkbox], [type=radio], [type=range]), select, .ul-datebtn, .choices__inner):hover { border-color: var(--walnut); } }

/* choices.js */
.sw-body #panel .choices { min-width: 0; }
.sw-body #panel .choices__inner { display: flex; align-items: center; padding: 8px 36px 8px 12px; }
.sw-body #panel .choices__list--single { padding: 0; }
.sw-body #panel .choices__list--single .choices__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 400; }
.sw-body #panel .choices[data-type*="select-one"]::after { border: 0; width: 16px; height: 16px; margin: 0; top: 50%; right: 12px; transform: translateY(-50%); background: var(--u-chev) center / contain no-repeat; transition: transform .15s var(--u-ease); }
.sw-body #panel .choices[data-type*="select-one"].is-open::after { margin: 0; transform: translateY(-50%) rotate(180deg); }
.sw-body #panel .choices.is-focused .choices__inner, .sw-body #panel .choices.is-open .choices__inner { border-color: var(--walnut); border-radius: 10px; }
.sw-body #panel .choices:focus-visible { outline: none; }
.sw-body #panel .choices:focus-visible .choices__inner { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-body #panel .choices__list--dropdown, .sw-body #panel .choices__list[aria-expanded] { z-index: 6; margin-top: 6px; background: var(--paper); border: 1px solid var(--u-tile-edge); border-radius: 12px; box-shadow: 0 18px 34px -14px rgb(var(--shadow) / .55); color: var(--ink); overflow: hidden; word-break: normal; }
.sw-body #panel .choices__list--dropdown .choices__item, .sw-body #panel .choices__list[aria-expanded] .choices__item { padding: 11px 14px; font: 400 15px/1.3 var(--font); color: var(--ink); }
.sw-body #panel .choices__list--dropdown .choices__item--selectable.is-highlighted, .sw-body #panel .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--u-sage); color: var(--ink); }
.sw-body #panel .choices__list--dropdown .choices__item--selectable.is-selected, .sw-body #panel .choices__list[aria-expanded] .choices__item--selectable.is-selected { font-weight: 700; }
.sw-body #panel .choices__heading { padding: 12px 14px 6px; font: 700 14px/1.3 var(--font); color: var(--muted); border-bottom: 1px solid var(--u-hair); }
.sw-body #panel .choices input.choices__input--cloned { width: 100% !important; max-width: none; min-width: 0; padding: 12px 14px; font-size: 16px; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1px solid var(--u-hair); border-radius: 0; outline: none; }
.sw-body #panel .choices input.choices__input--cloned:focus-visible { box-shadow: inset 0 -2px 0 var(--walnut); }
.sw-body #panel .choices__list--dropdown .choices__list { overscroll-behavior: contain; }
.sw-body #panel .choices__placeholder { opacity: 1; color: var(--muted); }

/* map pictures use the whole column */
.sw-body #panel .look[aria-pressed="true"] img, .sw-body #panel .choice label:has(input:checked) .bubble { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--walnut); }
.sw-body #panel .look[aria-pressed="true"]::after, .sw-body #panel .choice label:has(.bubble):has(input:checked)::after { background: var(--walnut); color: #fff; }
.sw-body #panel .choice label:has(.bubble), .sw-body #panel .choice label:has(.bubble):has(input:checked) { background: none; box-shadow: none; border-color: transparent; font-weight: 400; justify-content: flex-start; }  /* bubbles stay level when a name wraps */
.sw-body #panel .looks-name { font-size: 14px; color: var(--muted); }

/* slider: a filled track, a soft thumb */
.sw-body #panel input[type=range] { appearance: none; -webkit-appearance: none; height: 28px; background: none; touch-action: pan-y; }
.sw-body #panel input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--walnut) var(--fill, 0%), var(--u-tile-edge) var(--fill, 0%)); }
.sw-body #panel input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--u-tile-edge); }
.sw-body #panel input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--walnut); }
.sw-body #panel input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--walnut); box-shadow: var(--u-lift); }
.sw-body #panel input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--walnut); box-shadow: var(--u-lift); }
.sw-body #panel .ul-output { color: var(--ink); font-size: 15px; min-width: 4ch; }

/* secondary buttons */
.sw-body #panel button:not(.look, .ul-datebtn, .choices__button, .tune-close), .sw-ghost { background: var(--u-tile); border: 1px solid var(--u-tile-edge); border-radius: 10px; color: var(--ink); font: 500 15px/1.2 var(--font); }
.sw-body #panel button:not(.look, .ul-datebtn, .tune-close):active, .sw-ghost:active { transform: scale(.975); }
.sw-ghost[aria-pressed=true] { background: var(--u-sel); color: var(--ink); border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
@media (hover: hover) and (pointer: fine) { .sw-body #panel button:not(.look, .ul-datebtn, .tune-close):hover, .sw-ghost:hover { border-color: var(--walnut); } }

/* the calendar */
.ul-pop .ul-popfoot { border-top: 1px solid var(--u-hair); margin-top: 8px; }
.ul-pop .ul-clear { color: var(--brass); font: 500 15px/1.2 var(--font); min-height: 44px; }

/* buying: the last card, the one solid green block on the page */
.sw-format-note { color: var(--muted); }
.sw-approve { background: var(--u-tile); border-radius: 10px; padding: 12px 14px; font-size: 15.5px; color: var(--ink); }
.sw-approve input { accent-color: var(--walnut); }
.sw-setbox { text-align: left; justify-items: start; }



@media (prefers-reduced-motion: reduce) {
  .sw-body #panel .choice label, .sw-body #panel button, .sw-btn, .sw-body #panel > details > summary::after, .sw-body #panel details.tune > summary::after, .sw-body #panel .choices::after { transition: none; }
  .sw-body #panel .choice label:active, .sw-body #panel button:active, .sw-btn:active { transform: none; }
}

/* ---- Studio layout: the rail, the canvas and the columns in this card language ---- */
.sw-price { margin: 0; }
.sw-config > .sw-price { margin: 0; }
.sw-body .sw-rail { height: 0; border-width: 1px 0 0; background: none; }
.u-rail button { border-bottom: 0; border-radius: 12px; margin: 6px 6px 0; width: calc(100% - 12px); min-height: 78px; font-weight: 500; transition: transform .1s var(--u-ease); }
.u-rail button:active { transform: scale(.975); }
.u-rail button[aria-current="true"] { box-shadow: var(--u-lift); font-weight: 700; }
.u-rail button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .u-rail button:not([aria-current="true"]):hover { background: var(--u-tile); } }
@media (min-width: 1200px) { .sw-body #panel-slot { padding: 14px 14px 24px; } .sw-body #panel-slot:has(.choices.is-open) { z-index: 9; } }  /* a list that opens upwards stays above the pinned banner */
.sw-body #panel .choice label:has(input:checked) .bubble { outline: 0; }
.sw-body #panel .u-picks button.u-picks-link { color: var(--brass); }

/* the order: a card of its own, the price unboxed above it like the title */
.u-sum { margin: 0; display: grid; font: 400 14px/1.25 var(--font); }
.u-sum div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.u-sum div + div { border-top: 1px solid var(--u-hair); }
.u-sum dt { color: var(--muted); }
.u-sum dd { margin: 0; font-weight: 500; color: var(--ink); }
.sw-buy { border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--u-card-shadow); gap: 14px; padding: 18px; }
/* the title, price and buy box share one cell, stacked by these margins; each margin-bottom reaches the same line, so the three let go together: 24 is the gap under every column */
@media (min-width: 1200px) { .sw-buy { margin: calc(var(--u-h1, 92px) + 76px) 18px 24px 10px; padding: 16px; } .sw-config h1 { padding-inline: 12px 18px; margin-bottom: calc(var(--u-buy, 0px) + 100px); } .sw-config > .sw-price { padding-inline: 12px 18px; margin: var(--u-h1, 92px) 0 calc(var(--u-buy, 0px) + 44px); } }
@media (min-width: 861px) and (max-width: 1199px) { .sw-buy { margin: 14px 20px 20px; } }
.sw-format-note { margin: 0; font-size: 14px; line-height: 1.4; }
.sw-approve { font-size: 14.5px; line-height: 1.35; }
.u-total { display: none; align-items: baseline; justify-content: space-between; margin: 0; }
.u-total span { color: var(--muted); font-size: 15px; }
.u-total b { font: 600 28px/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink); }
@media (max-width: 1199px) { .u-total { display: flex; } }

/* the info rows: two quiet cards under the workspace */
.sw-more { padding-top: 18px; }
.sw-more > div { background: var(--paper); border-radius: 16px; padding: 4px 22px; box-shadow: var(--u-card-shadow); }
.sw-more details, .sw-more details:last-child { border-color: var(--u-hair); }
.sw-more > div details:first-child { border-top: 0; }
.sw-more > div details:last-child { border-bottom: 0; }

/* the calendar */
.ul-pop { background: var(--paper); color: var(--ink); border: 1px solid var(--u-tile-edge); border-radius: 16px; padding: 14px; font: 400 15px/1.3 var(--font); box-shadow: 0 22px 40px -16px rgb(var(--shadow) / .6); }
.ul-pop .vc { background: none; padding: 4px; border-radius: 0; width: 304px; max-width: 100%; color: var(--ink); font-family: var(--font); }
.ul-pop .vc-date { background: none; }
.ul-pop [data-vc-date-weekend] [data-vc-date-btn] { color: inherit !important; }
.ul-pop [data-vc-date-btn] { color: var(--ink); background: none; border-radius: 50% !important; font: 400 14px/1 var(--font); font-variant-numeric: lining-nums; min-height: 36px; }
.ul-pop [data-vc-date-btn]:hover { background: var(--u-tile) !important; color: var(--ink) !important; }
.ul-pop [data-vc-date-month="prev"] [data-vc-date-btn], .ul-pop [data-vc-date-month="next"] [data-vc-date-btn] { color: var(--muted) !important; }
.ul-pop .vc-week__day, .ul-pop [data-vc-week-day] { color: var(--muted) !important; font-weight: 500; }
.ul-pop [data-vc-date-selected] [data-vc-date-btn], .ul-pop [data-vc-date-selected='first'] [data-vc-date-btn] { background: var(--walnut) !important; color: var(--on-walnut) !important; font-weight: 700; }
.ul-pop [data-vc-date-today] [data-vc-date-btn] { color: var(--brass); font-weight: 700; }
.ul-pop .vc-header__content button, .ul-pop [data-vc="month"], .ul-pop [data-vc="year"] { color: var(--ink); font: 600 17px/1.2 var(--font-display); font-variant-numeric: lining-nums; }
.ul-pop .ul-popfoot { border-top: 1px solid var(--u-hair); margin-top: 8px; }
.ul-pop .ul-clear { color: var(--brass); font: 500 15px/1.2 var(--font); min-height: 44px; }
.ul-pop button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 860px) { .ul-pop { border-radius: 16px 16px 0 0; border-width: 1px 0 0; } .ul-pop .vc { width: 100%; } }

/* phones */
@media (max-width: 860px) {
  .sw-config h1 { font-size: 22px; }
  .sw-config > .sw-price b { font-size: 32px; }
  .u-rail { background: var(--wall); }
  .u-rail button { margin: 4px 1px; width: calc(100% - 2px); min-height: 42px; padding: 6px 1px; border-right: 0; font-size: 12.5px; }
  .sw-body #panel > fieldset, .sw-body #panel > details, .sw-buy, .sw-more > div { border-radius: 14px; }
  .sw-buy { margin-top: 14px; }
  .sw-more { padding-top: 14px; }
  .sw-more > div + div { margin-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--u-card-shadow); }
  .sw-more > div:first-child:not(:last-child) { border-radius: 14px 14px 0 0; box-shadow: none; }
  .sw-more > div + div details:first-child { border-top: 1px solid var(--u-hair); }
  .sw-body #panel [data-f="format"] label { min-height: 112px; padding-top: 14px; }
  .sw-body #panel .choice label:has(.bubble) { font-size: 12.5px; padding-inline: 0; overflow-wrap: break-word; hyphens: auto; }
  .sw-body #panel .choice label:has(.bubble) .ul-text { min-width: 0; max-width: 100%; }
}


/* Your details opens empty, so the rail's "needs attention" mark waits for a first try at buying */
html:not([data-u-tried]) .u-rail button[data-bad]::after, html:not([data-u-tried]) .u-rail button[data-bad] .sw-visually-hidden { display: none; }
.u-need { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f6e9e4; color: var(--error); font: 500 14.5px/1.35 var(--font); }
.u-need[hidden] { display: none; }

/* Date style: the box is half width, so a little tighter, to fit the long date too */
.sw-body #panel [data-f="datefmt"] .choices__inner { padding-inline: 10px 30px; font-size: 15px; }
.sw-body #panel [data-f="datefmt"] .choices__list--single .choices__item { font-size: 15px; }
.sw-body #panel [data-f="datefmt"] .choices[data-type*="select-one"]::after { right: 9px; }

/* "Choose a style" is the empty state, not an option */
.sw-body #panel [data-f="datefmt"] .choices__list--dropdown .choices__item[data-value=""] { display: none; }
/* the date field's button: looks like a text box until a theme says otherwise */
.sw-body #panel .ul-datebtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; text-align: left; font-weight: 400; }
.sw-body #panel .ul-datebtn[data-empty] { color: var(--u-faint); }
/* a time box can't show a placeholder: an empty one is grey, or carries the time we'd use (a span over it, so its clock icon stays) */
.sw-body #panel input[type=time][data-empty]:not(:focus) { color: var(--u-faint); }
.sw-body #panel .ul-timebox { position: relative; display: block; }
.sw-body #panel .ul-timeghost { display: none; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--u-faint); pointer-events: none; font: 400 16px/1.2 var(--font); }
.sw-body #panel input[type=time][data-empty]:not(:focus):has(+ .ul-timeghost) { color: transparent; }
.sw-body #panel input[type=time][data-empty]:not(:focus) + .ul-timeghost { display: block; }
/* the calendar: under its button on a desktop, a bottom sheet on a phone. In the top layer, so it's outside #poster's ancestors */
.ul-pop { margin: 0; }
.ul-pop .ul-popfoot { display: flex; justify-content: flex-end; padding-top: 8px; }
.ul-pop .ul-clear { padding: 4px 12px; border: 0; background: none; text-decoration: underline; cursor: pointer; }
@media (max-width: 860px) { .ul-pop { position: fixed; inset: auto 0 0 0 !important; width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } }
/* site.css styles every #panel input as a 46px box, which would hit the libraries' inner search boxes too. Same specificity, later file. */
.sw-body #panel .choices__input--cloned { width: 100%; padding: 8px; }
/* a half-width field must not grow to fit a long library control */
.sw-body #panel .pair > label, .sw-body #panel .pair > .field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sw-body #panel .ul-datebtn { white-space: nowrap; overflow: hidden; }
/* slider readout */
.sw-body #panel .ul-range { display: flex; align-items: center; gap: 12px; }
.sw-body #panel .ul-range input[type=range] { flex: 1; min-width: 0; }
.sw-body #panel .ul-output { flex: none; min-width: 3ch; text-align: right; font-weight: 400; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }

/* Lettering tiles show each face at 1.15em: keep the longest name inside its tile */
.sw-body #panel [data-f="font"] label { padding-inline: 2px; font-size: 13.5px; }
/* the calendar's month and year menus sit in its header, between the arrows */
.ul-pop { position: fixed; }
.ul-calmenus { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px; }
.ul-calmenus select { min-height: 36px; max-width: 124px; padding: 4px 6px; border: 1px solid var(--u-tile-edge); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 15px/1.2 var(--font); font-variant-numeric: lining-nums; }
.ul-calmenus select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ul-pop [data-vc="month"], .ul-pop [data-vc="year"] { visibility: hidden; }

/* "Choose your race" is the empty state, not an option */
.sw-body #panel .choices__list--dropdown .choices__item[data-value="?"] { display: none; }
.sw-body #panel fieldset.choice > legend[hidden] { display: none; }
/* phones: a focused dropdown or date box lands clear of the sticky preview and tabs, as the inputs do; a colour's name stays on one line under its picture */
@media (max-width: 860px) {
  .sw-body #panel :is(.choices, .ul-datebtn) { scroll-margin-top: calc(var(--u-strip) + 64px); }
  .sw-body #panel .choice label:has(.bubble) { font-size: 12px; letter-spacing: -.01em; hyphens: manual; overflow-wrap: normal; }
}
/* the review (2026-11-08): the native select behind a dropdown is not a second control; long names and the date stay inside their boxes */
.sw-body #panel select.choices__input[hidden] { display: none; }
.sw-body #panel .ul-datetxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 861px) { .sw-body #panel .choice label:has(.bubble) { font-size: 13px; padding-inline: 0; } }
/* the warning before a new Style clears Fine-tune (studio.js). Outlined buttons: the one solid block in the buy colour stays Add to basket. */
.sw-restyle-dlg { box-sizing: border-box; margin: auto; width: min(calc(100vw - 32px), 420px); padding: 24px; border: 1px solid var(--rail); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 400 16px/1.45 var(--font); }
.sw-restyle-dlg::backdrop { background: rgb(0 0 0 / .6); }
.sw-restyle-dlg h2 { margin: 0 0 8px; font: var(--display-style) var(--display-wt) 24px/1.2 var(--font-display); }
.sw-restyle-dlg p { margin: 0 0 20px; color: var(--muted); }
.sw-restyle-dlg form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.sw-restyle-dlg button { flex: 1 1 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--muted); border-radius: var(--radius); background: none; color: var(--ink); font: 500 16px/1 var(--font); cursor: pointer; touch-action: manipulation; }
.sw-restyle-dlg button[value="go"] { border: 2px solid var(--walnut); color: var(--walnut); font-weight: 700; }
.sw-restyle-dlg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the spelling check on the approval tick (studio.js): one row per unknown word, its line with the word marked, then the suggestions */
.sw-spell-dlg { max-height: calc(100svh - 32px); overflow-y: auto; }
.sw-spell-dlg ul { margin: 0 0 20px; padding: 0; list-style: none; }
.sw-spell-dlg li { padding: 12px 0; border-top: 1px solid var(--rail); }
.sw-spell-dlg li p { margin: 0 0 8px; color: var(--ink); overflow-wrap: anywhere; }
.sw-spell-dlg mark { background: none; color: var(--error); text-decoration: underline wavy var(--error); text-underline-offset: 3px; }
.sw-spell-dlg li .sw-spell-fix { flex: none; min-height: 36px; margin: 0 8px 0 0; font-weight: 600; }
.sw-spell-dlg button[value="go"] { border: 1px solid var(--muted); color: var(--ink); font-weight: 500; }
.sw-spell-dlg button[value="back"] { border: 2px solid var(--walnut); color: var(--walnut); font-weight: 700; }

/* owner review, 2026-11-10: "As the Style" whose colour the page can't name shows the Styles tab's icon on paper */
.sw-body #panel span.bubble.as-style { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a574f' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18M12 8h7M12 13h9M12 18h6'/%3E%3C/svg%3E") center / 26px no-repeat; }

/* a draw's one-time explanation (studio.js posterNotice): the popover's card, pinned low and clear of the phone's bars */
.u-notice { position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); border: 1px solid var(--u-tile-edge); border-radius: 16px; padding: 14px 44px 10px 16px;
  font: 400 15px/1.4 var(--font); box-shadow: 0 22px 40px -16px rgb(var(--shadow) / .6); }
.u-notice p { margin: 0 0 4px; }
.u-notice .sw-linkbtn { font-weight: 600; min-height: 24px; }
.u-notice-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink); font-size: 16px; cursor: pointer; border-radius: 50%; }
.u-notice-x:hover { background: var(--u-tile); }

/* ---- zoom (studio.js): the preview becomes a full-window layer and the poster grows (shop.js S.fit); scrolling pans it */
.sw-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 11; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  box-shadow: 0 2px 6px rgb(var(--shadow) / .18); cursor: zoom-in; }
.sw-preview:has(.sw-unlocked) .sw-zoom { display: none; }  /* Move owns the preview's drags and pinches */
html.sw-zoomed { overflow: hidden; }  /* not inherited: the scope rule allows it */
html.sw-zoomed .sw-preview { position: fixed; inset: 0; z-index: 100; height: auto; align-self: stretch; justify-self: stretch;  /* a grid item: start would shrink it to its content */
   margin: 0; padding: 0; border: 0; }
html.sw-zoomed .sw-preview > :not(.sw-fit) { display: none; }
html.sw-zoomed .sw-fit { position: static; height: 100% !important; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-start;
  overflow: auto; overscroll-behavior: contain; padding: 32px; }
html.sw-zoomed .sw-fit .sw-frame { margin: auto; flex: none; cursor: grab; }  /* margin: auto centres it while it fits and keeps every edge reachable once it doesn't */
html.sw-zoomed .sw-zoom { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; bottom: auto; cursor: zoom-out; }
/* fitted, the poster fills the preview's height, so a word would sit on the print: a round icon in the gap beside the frame. The word stays for screen readers. */
html:not(.sw-zoomed) .sw-zoom { right: 6px; bottom: 6px; width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
html:not(.sw-zoomed) .sw-zoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }