/* UAWP album exterior designer — Option A "Refined tabs" + Studio favourites.
   Warm ivory, deep-green controls, brass accents; Cormorant Garamond headings + Jost body;
   sticky preview left / controls right on desktop; spacious editorial spacing. */
:root{
  --ink:#263a30;--paper:#faf8f3;--warm:#f0ece3;--gold:#957548;--line:#d8d6ca;
  --muted:#5f655b;--error:#a3342c;--sel:#eef1ea;
  /* --gold is the brass accent for large display text and non-text outlines (AA at those sizes).
     --gold-ink is a darker brass for small brass text so it clears 4.5:1 on ivory and the warm panel.
     --focus is the focus-ring brass, dark enough to clear 3:1 on every light surface (2.4.11).
     --field-line is a stronger control boundary so form fields are distinguishable (1.4.11). */
  --gold-ink:#7a603b;--focus:#8a6c43;--field-line:#86836f;
  font-family:Jost,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;
}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.1;font-variant-numeric:lining-nums}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:30;background:var(--ink);color:#fff;padding:10px 16px}
.skip-link:focus{left:8px;top:8px}
/* Fine-line icons (option A, "Quiet inline"): 1.25 stroke on a 24 grid, ink with one brass detail.
   The sprite is inlined in index.html; src/ui/icons.js renders <svg class="ic"><use href="#i-…"/></svg>. */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic-sm{width:15px;height:15px}
.ic-acc{stroke:var(--gold)}
circle.ic-acc{fill:var(--gold);stroke:none}
.noscript-note{padding:20px;background:#fff0cc;border:1px solid #e4cb91;margin:20px;font-size:15px;line-height:1.6}

/* Header */
header{height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid var(--line)}
/* Inside the Pixieset page the site already shows its own header and navigation, so the app's brand bar is hidden. */
body.embedded>header{display:none}
.brand{text-decoration:none;letter-spacing:.16em;font-size:20px;font-weight:500}
.brand span{display:block;font-size:10px;letter-spacing:.26em;margin-top:5px}
.portal{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-style:italic}
.help{font-size:14px;text-underline-offset:5px}

/* Layout */
main{max-width:1540px;margin:auto;padding:0 clamp(20px,4vw,64px)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(28px,4vw,52px) 0 clamp(26px,3vw,40px);gap:24px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.16em;margin:0 0 10px}
.intro h1{font-size:clamp(34px,3.9vw,60px);font-weight:400;line-height:1.03;margin:0}
.intro em{color:var(--gold)}
.intro>p{color:var(--muted);line-height:1.6;margin:0;font-size:15px}

/* "How it works" strip: a calm, page-level line that the studio keeps the client's design on file.
   Sits between the intro and the progress line; shows inside the Pixieset embed (it is in <main>) and
   at 390px. */
.how-it-works{margin:0 0 clamp(24px,3vw,34px);padding:14px 18px;background:var(--warm);border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:14px;line-height:1.6;max-width:82ch}
.how-it-works-lead{color:var(--ink);font-weight:500}

/* Progress line */
#steps{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.5vw,46px)}
.step-link{flex:1;display:flex;gap:10px;align-items:center;justify-content:center;padding:18px 8px;background:none;border:0;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative}
.step-link.current{color:var(--ink);font-weight:600}
.step-link.current:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gold)}
.step-number{font-size:12px;border:1px solid var(--line);border-radius:50%;width:25px;height:25px;display:grid;place-items:center}
.current .step-number{background:var(--ink);color:#fff;border-color:var(--ink)}
.step-link:disabled{cursor:not-allowed;opacity:.75}

#workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,72px)}

/* Preview panel */
#preview{position:sticky;top:20px;background:var(--warm);min-width:0}
.preview-top{display:flex;align-items:center;justify-content:space-between;padding:26px 28px 0;gap:12px}
.preview-top .eyebrow{margin:0}
.live-dot{font-size:12px;color:var(--muted);white-space:nowrap}
.live-dot:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#748f64;margin-right:6px}
#preview-canvas{height:520px;width:100%;cursor:grab;touch-action:pan-y;margin-top:10px;position:relative;overflow:hidden}
/* The room photo (scene-render.js SceneLayer, absolutely positioned inside #preview-canvas) must fill the
   3D stage only — never the controls, room strip or summary below it — so the stage is its frame. */
#preview-canvas canvas{display:block;max-width:100%}
#preview-fallback{padding:30px 28px;font-size:14px;color:var(--muted);line-height:1.6}
.view-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:6px 28px 22px;gap:12px}
/* Wraps at every width: with the zoom buttons the row no longer fits a ~420-560px desktop preview column
   (iPad landscape, small laptops, phones in "Desktop site" mode) and used to run into the design column. */
.view-tools .grp{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.view-tools .a-ico{width:42px;height:42px;border:1px solid #cfccbf;background:transparent;color:var(--ink);font-size:16px;display:grid;place-items:center}
.view-tools .a-pill{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:10px 16px;font-size:13px;letter-spacing:.04em;min-height:42px;white-space:nowrap}
.view-tools .a-pill[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.view-tools .a-link{border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--muted);font-size:13px;padding:6px}
.view-tools .a-ico:disabled{opacity:.35;cursor:default}
/* "See it at home" — the room strip under the stage (Studio first). Scrolls sideways when narrow. */
.scene-strip{display:flex;gap:10px;overflow-x:auto;padding:0 28px 20px;margin-top:-8px;scroll-snap-type:x proximity;scroll-padding-inline:28px;scrollbar-width:thin}
.scene-opt{flex:0 0 auto;width:96px;display:grid;gap:6px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;scroll-snap-align:start;font:inherit}
.scene-opt img,.scene-studio-tile{display:block;width:96px;height:64px;object-fit:cover;border:1px solid var(--line);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.scene-studio-tile{background:linear-gradient(160deg,#ecebe6,#d9d8d2)}
.scene-opt .scene-name{font-size:11.5px;line-height:1.3;color:var(--muted);letter-spacing:.02em}
.scene-opt[aria-pressed=true] img,.scene-opt[aria-pressed=true] .scene-studio-tile{outline-color:var(--ink)}
.scene-opt[aria-pressed=true] .scene-name{color:var(--ink);font-weight:500}
.scene-opt:hover img,.scene-opt:hover .scene-studio-tile{outline-color:var(--gold)}
.scene-opt:focus-visible{outline:none}
.scene-opt:focus-visible img,.scene-opt:focus-visible .scene-studio-tile{outline:2px solid var(--focus)}
.no-3d .scene-strip,.no-3d #view-scenes{display:none}
.summary-chips{border-top:1px solid #d9d5c8;margin:0;padding:22px 28px;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.summary-item{display:grid;grid-template-columns:38px 1fr;column-gap:12px;row-gap:2px;align-items:center;min-width:0}
.summary-item .chip{grid-row:1/3;grid-column:1;align-self:center;width:38px;height:38px;background-size:cover;background-position:center;border:1px solid #0002;display:inline-block}
.summary-label{grid-column:2;grid-row:1;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.summary-item .preview-value{grid-column:2;grid-row:2;margin:0;font-size:14px;overflow-wrap:anywhere;line-height:1.3}
.summary-item.starter .preview-value{color:var(--muted)}
.starter-badge{grid-column:1/-1;font-size:12px;color:var(--gold-ink);margin:0}
.preview-notes{padding:0 28px}
.preview-note-list{margin:0 0 6px;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.5}
.preview-note{font-size:12px;color:var(--muted);padding:0 28px 26px;margin:0;line-height:1.55}
.preview-note>summary{list-style:none;cursor:pointer;font-weight:500;color:var(--ink);padding:8px 0}
.preview-note>summary::-webkit-details-marker{display:none}
.preview-note-body{margin:6px 0 0}
@media(min-width:721px){.preview-note>summary{display:none}}
.no-3d #preview-canvas,.no-3d .view-tools{display:none}

/* Editor */
#editor{padding:0 0 20px;min-width:0}
#editor h2{font-size:clamp(30px,3.4vw,42px);margin:0 0 12px}
p.lead{font-size:16px;color:var(--muted);line-height:1.6;max-width:52ch;margin:0 0 30px}

/* Recipient — quiet underline switch */
.album-types{border:0;padding:0;margin:0 0 30px;min-width:0;display:flex;gap:clamp(16px,3vw,30px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.album-types legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.album-type{position:relative;background:none;border:0;padding:0 0 14px;font-size:15px;color:var(--muted);cursor:pointer;text-align:left;display:block}
.album-type span{display:block}
.album-type small{display:block;font-size:12px;color:var(--muted);margin-top:2px;font-weight:400}
.album-type:has(input:checked){color:var(--ink);font-weight:500}
.album-type:has(input:checked):after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.album-type:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.album-type .short{display:none}
/* Two-column layout with a narrow controls column (small laptops, ~951–1240px): the full labels would
   wrap "Groom's parents album" onto its own line, so use the short labels (the small line keeps context). */
@media(min-width:951px) and (max-width:1240px){.album-type .full{display:none}.album-type .short{display:inline}}
.hidden-radio,.swatch input,.family-chip input,.album-type input,.choice input,.font-card input,.foil-chip input,.box-mode-row input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

/* Section tabs — 4-cell bar with numerals */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 38px;border:1px solid var(--line);padding:0}
.tabs [role=tab]{border:0;border-right:1px solid var(--line);background:transparent;padding:15px 8px;font-size:14px;display:flex;gap:7px;justify-content:center;align-items:baseline;color:var(--muted);min-height:48px}
.tabs [role=tab]:last-child{border-right:0}
.tabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--paper)}
.tabs [role=tab] .num{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic}
.tab-check{color:#748f64;font-size:13px}
.tabs [role=tab][aria-selected=true] .tab-check{color:#c9d8bd}
.tabpanel{padding-top:2px}
/* The panel is a tab stop (roving-tabindex target after a tab switch); keyboard focus must be
   visible (2.4.7). Mouse focus stays quiet; an inset ring keeps it clear of the tab bar above. */
.tabpanel:focus{outline:none}
.tabpanel:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

/* Control blocks + section headings */
.control{margin:0 0 34px}
.control[tabindex="-1"]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
#editor h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 16px}
#editor h3 .cap{letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;font-size:13px}
.subhead{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:18px 0 12px}

/* Family chips */
.family-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.family-chip{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);background:transparent;padding:10px 14px;font-size:14px;color:var(--ink);min-height:44px;cursor:pointer}
.family-chip small{color:var(--muted);margin-left:6px;font-size:12px}
.family-chip:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.family-chip.holds-selection:after{content:'';width:11px;height:11px;margin-left:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23957548' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center/contain no-repeat}
.family-chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.family-note{font-size:13px;color:var(--muted);margin:0 0 14px}
/* One-line description of the material family on show, under the family buttons (audit r25). */
.material-desc{font-size:13px;color:var(--muted);line-height:1.55;margin:2px 0 12px;max-width:60ch}
.material-desc strong{color:var(--ink);font-weight:500}

/* Selected line (serif) */
.selected-line{font-family:'Cormorant Garamond',serif;font-size:24px;margin:-2px 0 20px;font-variant-numeric:lining-nums}
.selected-line strong{font-weight:500;color:var(--gold)}
.selected-line em{color:var(--muted);font-family:Jost,sans-serif;font-size:15px}

/* Swatch grid */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 16px;margin:0 0 8px}
.swatch{position:relative;display:grid;gap:3px;font-size:13px;color:var(--muted);line-height:1.3;background:none;border:0;padding:0;text-align:left;cursor:pointer;min-width:0}
.swatch .swatch-photo{width:100%;aspect-ratio:1;display:block;position:relative;outline:1px solid #0001;outline-offset:-1px;margin-bottom:6px;overflow:hidden;background:var(--warm)}
.swatch .swatch-photo img{width:100%;height:100%;object-fit:cover;display:block}
.swatch .swatch-code{font-weight:500;color:var(--ink);letter-spacing:.08em;font-size:12px}
.swatch .swatch-name{overflow-wrap:anywhere}
.swatch:has(input:checked) .swatch-photo{outline:2px solid var(--gold);outline-offset:3px}
.swatch:has(input:checked) .swatch-code:after{content:'  \2713';color:var(--gold-ink)}
.swatch:has(input:focus-visible) .swatch-photo{outline:3px solid var(--focus);outline-offset:2px}
.swatch.img-failed .swatch-photo img{visibility:hidden}
.swatch.img-failed .swatch-photo:after{content:attr(data-code);position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}

/* Fields */
.field{display:block;margin:0 0 20px}
.field-label{display:block;font-size:14px;margin-bottom:7px}
.field-label .req{color:var(--error)}
input,textarea,select{background:#fffdf9;border:1px solid var(--field-line);border-radius:0;width:100%;padding:12px;color:var(--ink);font-size:16px;min-height:46px}
textarea{min-height:95px;resize:vertical}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--ink);flex-shrink:0}
.field-hint{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.hint{font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0}
.field-count{font-size:12px;color:var(--muted);margin:6px 0 0;text-align:right}
.field-error{font-size:13px;color:var(--error);margin:6px 0 0;line-height:1.5;font-weight:500}
.has-error input,.has-error textarea{border-color:var(--error)}
.lettering-line{margin-bottom:8px}
.line-long,.hebrew-note,.size-shrink-note{color:var(--gold-ink);font-size:12px;margin:6px 0 0;line-height:1.5}

/* Per-line lettering size control + shared alignment control (calm, phone-first, tap targets >= 44px) */
.size-control{margin:8px 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.size-seg,.align-seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.size-band,.size-val,.align-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font-size:13px;color:var(--ink);cursor:pointer;background:transparent;border-right:1px solid var(--line)}
.size-band:last-child,.align-opt:last-child{border-right:0}
.size-band.on,.align-opt.on{background:var(--ink);color:var(--paper)}
.size-band:has(input:focus-visible),.size-val:has(input:focus-visible),.align-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.size-readout{font-size:12px;color:var(--muted);margin:0}
.size-readout strong{color:var(--ink);font-weight:600}
.size-more{width:100%;margin:2px 0 0}
.size-more>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--gold-ink);padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
.size-more>summary::-webkit-details-marker{display:none}
.size-values{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.size-values .size-val{border:1px solid var(--line);border-radius:4px}
.size-values .size-val.on{border-color:var(--ink)}
.align-control{margin:12px 0 2px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.align-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Guided flow A: a calm note when the client's own answer added steps (e.g. the display box) */
.flow-step-note{font-size:13px;color:var(--gold-ink);margin:2px 0 14px;line-height:1.5}
/* Inside-the-box illustration */
.inside-box-illo{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;color:var(--ink)}
.illo-inside-box{width:160px;height:auto;display:block}
.inside-box-legend{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.illo-legend-swatch{width:14px;height:14px;border-radius:3px;background:rgba(149,117,72,.22);border:1px solid var(--gold);flex:0 0 auto}
.illo-lining{fill:rgba(149,117,72,.22);stroke:var(--gold)}
.illo-photo{fill:#fffdf8}
.illo-accent{stroke:var(--gold)}
circle.illo-accent{fill:var(--gold);stroke:none}
.lid-photo-under-lining{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
@media(max-width:720px){.illo-inside-box{width:120px}}

.check{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:14px;line-height:1.5}
.check input{margin:1px 0 0}
.check small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* Acrylic / upgrade row */
.upgrade-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;margin:6px 0 10px}
.upgrade-row .check{margin:10px 0}
.upgrade-row strong{font-weight:500}

/* Client photo upload (acrylic cover, box lid, parent photo front) — Option A field language */
.photo-upload{margin:4px 0 0}
.photo-drop{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px dashed var(--field-line);background:#fffdf9;padding:16px;margin:0 0 6px}
.photo-drop.dragover{border-color:var(--ink);background:var(--sel)}
.photo-btn{display:inline-flex;align-items:center;gap:8px;margin:0}
.photo-btn:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.photo-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;min-height:0}
.photo-drop-hint{font-size:13px;color:var(--muted)}
.photo-readd{color:var(--gold-ink);font-weight:500}
.photo-thumb{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;align-items:center;border:1px solid var(--line);background:#fff;padding:12px;margin:8px 0}
.photo-thumb-frame{grid-row:1/3;width:72px;height:72px;border:1px solid var(--line);background:var(--warm);display:grid;place-items:center;overflow:hidden}
.photo-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb-none{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.photo-thumb-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.photo-thumb-name{font-weight:500;word-break:break-word}
.photo-thumb-size{font-size:13px;color:var(--muted)}
.photo-remove{margin-left:auto}
.photo-warn{grid-column:1/3;font-size:13px;color:var(--gold-ink);margin:4px 0 0;line-height:1.5}
.photo-note{grid-column:1/3;margin:2px 0 0}
.photo-ref{margin:10px 0 0}

/* Choice groups (box mode, lining mode, finishes, album lining) */
.choice-group{border:0;margin:0;padding:0;min-width:0}
.choice-group legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 12px;padding:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.choice{position:relative;display:block;border:1px solid var(--line);background:transparent;padding:14px 16px;font-size:15px;color:var(--ink);cursor:pointer}
.choice small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sel)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* Font cards */
.font-picker{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 14px}
.font-picker-compact{margin-top:14px}
.font-card{position:relative;display:grid;gap:8px;border:1px solid var(--line);background:#fff;padding:12px 14px 14px;cursor:pointer}
.font-card:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.font-card:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.font-sample{width:100%;height:60px;object-fit:contain;object-position:left center;display:block}
.font-name{font-size:13px;font-weight:500;letter-spacing:.02em;border-top:1px solid #ece9df;padding-top:10px}
.font-approx-label{font:400 11px/1.4 Jost,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.font-approx{color:#3d4a42;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:clip;font-size:calc(var(--fs,30px) * var(--fit,1));padding-block:.15em}
/* Small capitals in the cards: the same 0.78 ratio as the 3D cover (SMALL_CAP_RATIO in src/lettering.js). */
.font-approx .sc{font-size:.78em}
.font-card.img-failed .font-sample{display:none}
.narrow-only{display:none}

/* Foil chips (LAR photo tiles, LAC text tiles) */
.foil-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:6px 0 8px}
.foil-chip{position:relative;display:grid;gap:2px;font-size:12px;color:var(--muted);cursor:pointer}
.foil-photo{width:100%;aspect-ratio:1;overflow:hidden;margin-bottom:6px;outline:1px solid #0001;outline-offset:-1px}
.foil-photo img{width:100%;height:100%;object-fit:cover;display:block}
.foil-chip b{color:var(--ink);font-weight:500;letter-spacing:.06em}
.foil-chip:has(input:checked) .foil-photo{outline:2px solid var(--gold);outline-offset:3px}
.foil-chip:has(input:checked) b{color:var(--gold-ink)}
.foil-chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.foil-chip.foil-chip-text{border:1px solid var(--line);padding:12px;align-content:center}
.foil-chip.foil-chip-text:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.foil-chip.img-failed .foil-photo{display:none}

/* Box lettering — bordered radio rows */
.box-modes{display:grid;gap:8px;margin:0 0 18px;border:0;padding:0}
.box-modes legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 12px;padding:0}
.box-mode-row{position:relative;display:block;border:1px solid var(--line);padding:12px 14px;font-size:15px;cursor:pointer}
.box-mode-row small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.box-mode-row:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.box-mode-row:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* Eligibility note */
.eligible-note{background:var(--warm);padding:16px 18px;font-size:14px;line-height:1.6;margin:6px 0 12px}
.eligible-note b{font-weight:500}

/* Actions */
.actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:30px}
.actions-left,.actions-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.actions-right{margin-left:auto}
.remember-inline{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start;margin:0;line-height:1.4}
.remember-inline small{display:block;color:var(--muted);margin-top:2px}
.primary{background:var(--ink);border:1px solid var(--ink);color:#fff;padding:14px 22px;font-size:14px;font-weight:500;min-height:48px}
.primary:hover{background:#324a3d}
.secondary{background:none;border:1px solid var(--line);color:var(--ink);padding:12px 16px;min-height:44px;font-size:14px}
.secondary:hover{border-color:var(--ink)}
.small-btn{padding:8px 12px;min-height:40px;font-size:13px}
.link-btn{background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:4px;min-height:32px;font-size:13px}
/* Touch screens: small buttons and text links still get a 44px tap target. */
@media(pointer:coarse){.small-btn,.link-btn{min-height:44px}}
button:disabled{opacity:.55;cursor:not-allowed}

/* Errors */
.error{border-left:3px solid var(--error);padding:10px 14px;color:var(--error);font-size:14px;background:#faf0ea;line-height:1.6}
.error:empty{display:none}
.error-summary{margin:0 0 22px}
.error-summary-title{margin:0 0 8px;font-weight:600}
.error-summary ul{margin:0;padding-left:18px;line-height:1.7}
.error-summary a{color:var(--error)}

/* Drafts / notices */
.draft-notice{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--warm);border:1px solid var(--line);padding:12px 16px;margin:0 0 20px;font-size:14px}
.draft-notice-actions{display:flex;gap:14px}
.notices{background:#eef3ea;border:1px solid #c7d6c0;padding:10px 14px;margin:0 0 18px;font-size:13px}
.notices p{margin:4px 0}
.test-banner{padding:12px 16px;background:#fff0cc;border:1px solid #e4cb91;margin-bottom:18px;font-size:14px}

/* Review */
.review-group{border:1px solid var(--line);margin:18px 0}
.review-head{padding:13px 16px;background:var(--warm);display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500}
.edit-link{border:0;background:transparent;text-decoration:underline;color:var(--ink);font-size:13px;min-height:28px}
.review-group dl{margin:0;padding:4px 16px}
.review-group dl>div{display:grid;grid-template-columns:42% 1fr;gap:10px;border-bottom:1px solid #e7e5dc;padding:10px 0;font-size:14px;line-height:1.45}
.review-group dl>div:last-child{border:0}
dt{color:var(--muted)}
dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.confirm-list{border:1px solid var(--line);background:var(--warm);padding:14px 16px;margin:18px 0}
.confirm-list h3{margin:0 0 8px;font-size:15px;display:block;letter-spacing:0;text-transform:none}
.confirm-list ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.confirm-check{align-items:flex-start;margin:18px 0}
.confirm-reset{font-size:13px;color:var(--gold-ink);margin:16px 0 6px;font-weight:500}
.ref-line{font-size:15px;margin:10px 0}
.submit-error{margin:18px 0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Success */
.success{padding:24px 0}
.success-mark{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--gold);border-radius:50%;margin-bottom:22px;background:var(--paper)}
.success-mark .ic{width:30px;height:30px}

/* Studio favourites gallery */
.fav-hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:40px;padding:clamp(26px,4vw,52px) 0 clamp(24px,3vw,40px)}
.fav-hero h2{font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1.02;margin:0}
.fav-hero h2 em{color:var(--gold)}
.fav-hero p.lead{margin:0}
.fav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 28px;margin:0 0 8px;padding:0;list-style:none}
.fav-look{display:grid;gap:12px;align-content:start;margin:0}
.fav-stack{position:relative;height:250px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #0001}
.fav-cover{position:absolute;left:13%;right:13%;top:17%;bottom:17%;background-size:cover;background-position:center;box-shadow:0 14px 26px -12px #0008,0 0 0 1px #0002;display:grid;place-items:center;align-content:center;gap:2px}
.fav-rib{position:absolute;top:30%;right:10%;width:6%;height:22%;background-size:cover;box-shadow:0 2px 6px -2px #0006}
.fav-foil{font:400 40px/1 'Italianno','Frank Ruhl Libre',cursive;background-size:120% 120%;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #0005);padding:0 8px;text-align:center;max-width:100%;overflow:hidden}
.fav-foil.small{font:500 10px/1 Jost,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.fav-look h3{font-size:30px;line-height:1.05;margin:6px 0 0;letter-spacing:0;text-transform:none;display:block;font-weight:500}
.fav-codes{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px;color:var(--muted)}
.fav-codes b{display:inline-block;width:72px;font-weight:500;color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.fav-why{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.fav-actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:2px}
.fav-look.on .fav-cover{box-shadow:0 14px 26px -12px #0008,0 0 0 2px var(--gold)}
.fav-selected{font-size:13px;color:var(--gold-ink);font-weight:500}
.fav-scratch{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);padding:26px 30px;margin-top:8px;flex-wrap:wrap}
.fav-scratch h3{font-size:28px;margin:0 0 4px;letter-spacing:0;text-transform:none;display:block;font-weight:500}
.fav-scratch p{margin:0;color:var(--muted);font-size:14px}
.fav-flag{font-size:12px;color:var(--muted);margin:26px 0 0;border-top:1px solid var(--line);padding-top:14px}
/* r46 — start-from-a-look: real rendered image (falls back to the swatch composite behind it), a subtle
   "Most loved" tag on the top look, the applied banner, and the classic entry link. */
.fav-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fav-photo.img-failed{display:none}
.fav-head{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin:6px 0 0}
.fav-head h3{margin:0}
.fav-loved{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--gold);border-radius:999px;padding:3px 10px;white-space:nowrap;align-self:center}
.fav-banner{background:var(--warm);border:1px solid var(--line);border-left:3px solid var(--gold);padding:12px 16px;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:center}
.fav-banner:focus{outline:2px solid var(--focus);outline-offset:2px}
.fav-banner:focus:not(:focus-visible){outline:2px solid var(--focus)}
.fav-banner-text{margin:0;font-size:15px;color:var(--ink)}
.fav-banner-text strong{font-weight:600}
.fav-undo{font-size:14px;min-height:32px}
.fav-entry-link{margin:0 0 20px;font-size:13px}
/* Guided-flow (A/B) favourites shortcut: a compact row of looks under the "Start from a favourite?" step. */
.flow-fav-row{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media(max-width:560px){.flow-fav-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain}.flow-fav-row li{scroll-snap-align:start}}
.flow-fav-card{display:grid;gap:8px;justify-items:center;text-align:center;border:1px solid var(--line);background:var(--paper);padding:6px 6px 10px;cursor:pointer;min-height:48px;border-radius:4px;width:100%;height:100%;align-content:start}
.flow-fav-card:hover{border-color:var(--gold)}
.flow-fav-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.flow-fav-thumb{position:relative;width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;display:block;overflow:hidden;box-shadow:inset 0 0 0 1px #0001}
.flow-fav-cover{position:absolute;left:16%;right:16%;top:16%;bottom:16%;background-size:cover;background-position:center;box-shadow:0 8px 16px -8px #0007,0 0 0 1px #0002}
.flow-fav-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.1;color:var(--ink);text-wrap:balance}
.flow-fav-scratch{font-size:13px}

/* Your look (fine-tune) */
.look-started{background:var(--warm);padding:14px 18px;font-size:14px;margin-bottom:24px;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center}
.look-rows{border-top:1px solid var(--line);margin:8px 0 26px}
.look-row{display:grid;grid-template-columns:44px 130px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.look-row i{width:44px;height:44px;background-size:cover;background-position:center;border:1px solid #0002;display:block}
.look-row .look-chip-text{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);font-size:10px;font-weight:500;letter-spacing:.03em;color:var(--muted);text-align:center;line-height:1.1}
.look-row .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.look-row .v{overflow-wrap:anywhere}
.look-row .change{border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--ink);font-size:13px;padding:4px;min-height:32px}
.back-to-look{background:var(--warm);border:1px solid var(--line);padding:10px 14px;margin:0 0 20px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* The couples design step's own "See studio favourites" is superseded by the entry link under the album
   chooser (favouritesComingSoon), so it's hidden; when a look is already applied the "Back to your look"
   affordance shows instead of the entry link. */
.tabs-fav-link{display:none}
.back-to-look ~ .fav-entry-link{display:none}

/* Footer */
footer{border-top:1px solid var(--line);margin:45px 0 0;padding:25px 0;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-style:italic}
footer span{font-family:Jost,sans-serif;font-size:12px;font-style:normal}

/* Responsive */
@media(min-width:1450px){#preview-canvas{height:560px}}
@media(max-width:950px){
  #workspace{display:flex;flex-direction:column;gap:26px}
  #preview{position:relative;top:auto;width:100%;order:-1}
  #preview-canvas{height:340px}
  .intro>p{display:none}
  .fav-hero{grid-template-columns:1fr;gap:14px}
  .fav-grid{grid-template-columns:1fr}
  .view-tools .a-pill,.view-tools .a-ico{min-height:44px}
}
@media(max-width:720px){
  header{height:76px;padding:0 16px}
  .brand{font-size:16px}
  .brand span{font-size:8px}
  .portal{display:none}
  #preview-canvas{height:290px}
  .preview-top{padding:20px 18px 0}
  .view-tools{padding:6px 18px 16px;flex-wrap:wrap}
  .view-tools .grp{flex-wrap:wrap;gap:6px}
  .view-tools .a-pill{padding:10px 12px}
  .scene-strip{padding:0 18px 16px;scroll-padding-inline:18px}
  .summary-chips{grid-template-columns:1fr 1fr;padding:14px 18px;gap:12px 16px}
  .summary-item{grid-template-columns:30px 1fr;column-gap:10px}
  .summary-item .chip{width:30px;height:30px}
  .summary-label{font-size:10px}
  .summary-item .preview-value{font-size:13px}
  .starter-badge{font-size:11px}
  .preview-notes{padding:0 18px}
  .preview-note{padding:0 18px 16px}
}
/* 1A — pinned mini preview on phones (design step only). The app adds body.pin-preview on step 0.
   The preview pins to the top with a compact header and the Open/Close-box row; the summary chips,
   notes and "about this preview" are hidden while pinned (they return on Review). */
@media(max-width:720px){
  body.pin-preview #preview{position:sticky;top:0;z-index:40;box-shadow:0 10px 22px rgba(38,58,48,.16)}
  /* Compact pin (tester + Uri, 28 Sep 2026): it used to take 335px of an 844px phone (384 of 700).
     The canvas now follows the screen height, the header row hides while pinned, and "Reset view"
     keeps only its icon so the controls fit one row. */
  body.pin-preview #preview-canvas{height:clamp(130px,22vh,190px)}
  body.pin-preview .preview-top{display:none}
  body.pin-preview #view-reset span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.pin-preview #view-reset{min-width:44px;min-height:44px;justify-content:center;padding:6px}
  /* One row while pinned: dragging turns the album, so the two turn buttons step aside here. */
  body.pin-preview .view-tools{flex-wrap:nowrap}
  body.pin-preview #view-rotate-left,body.pin-preview #view-rotate-right{display:none}
  body.pin-preview #preview-summary,body.pin-preview #preview-notes,body.pin-preview #preview-note{display:none}
  body.pin-preview .view-tools{padding:2px 16px 8px}
  body.pin-preview .scene-strip{padding:0 16px 8px;margin-top:0;gap:8px;scroll-padding-inline:16px}
  body.pin-preview .scene-opt{width:72px}
  body.pin-preview .scene-opt img,body.pin-preview .scene-studio-tile{width:72px;height:48px}
  /* While a text field in the editor is focused (the phone keyboard is up), shrink the canvas so the
     field and keyboard fit. The app toggles body.editing-text on focusin/out of a text-entry field
     (deterministic, widely supported). Kept as its OWN rule so it always applies. */
  body.pin-preview.editing-text #preview-canvas{height:120px}
  /* CSS-only fallback for browsers without the class hook (own rule, so an unsupported :has() here
     never invalidates the class rule above). */
  body.pin-preview #workspace:has(#editor :is(input:not([type=radio]):not([type=checkbox]):not([type=file]),textarea):focus) #preview-canvas{height:120px}
}
@media(max-width:640px){
  .step-link{flex-direction:column;gap:5px;font-size:11px;letter-spacing:.03em;padding:12px 3px}
  .step-number{width:22px;height:22px;font-size:10px}
  .swatches{grid-template-columns:repeat(3,1fr);gap:18px 12px}
  .foil-chips{grid-template-columns:repeat(3,1fr)}
  .font-picker{grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:#fff}
  .font-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;border:0;border-top:1px solid #ece9df;padding:12px 14px;min-height:56px}
  .font-card:first-of-type{border-top:0}
  .font-card:has(input:checked){border-color:#ece9df;box-shadow:inset 3px 0 0 var(--gold);background:#fbf8f1}
  .font-card .font-approx{grid-row:1;grid-column:1;font-size:calc(var(--fs,30px) * .82 * var(--fit,1))}
  .font-card .font-name{grid-row:1;grid-column:2;border:0;padding:0;font-size:11px;font-weight:400;color:var(--muted);text-align:right}
  .font-card .font-approx-label{display:none}
  .font-card .font-sample{grid-row:2;grid-column:1/-1;display:none;height:48px}
  .font-card:has(input:checked) .font-sample{display:block}
  .font-card.img-failed .font-sample{display:none}
  .wide-only{display:none}
  .narrow-only{display:inline}
  .grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .tabs [role=tab] .num{display:none}
  .album-type small{display:none}
  .album-type .full{display:none}
  .album-type .short{display:inline}
  .look-row{grid-template-columns:36px 1fr;gap:2px 10px}
  .look-row i,.look-row .look-chip-text{grid-row:1/4;width:36px;height:36px}
  .look-row .k{grid-column:2}
  .look-row .v{grid-column:2}
  .look-row .change{grid-column:2;justify-self:start}
  .actions-right{margin-left:0;width:100%}
  .actions-right .primary{flex:1}
  .draft-notice{flex-direction:column;align-items:flex-start}
  footer{display:block}
  footer span{display:block;margin-top:10px}
}
@media(max-width:390px){
  main{padding:0 16px}
  header{padding:0 16px}
}
/* Narrow phones (incl. inside the Pixieset page, where the app is ~360px wide): keep the rotate buttons,
   "Close the box" and "See it at home" on one row so the pinned preview stays short. */
@media(max-width:400px){
  .view-tools,body.pin-preview .view-tools{padding-left:12px;padding-right:12px}
  .view-tools .grp{gap:5px}
  .view-tools .a-pill{padding:10px 9px;letter-spacing:.02em}
  .view-tools .a-ico{width:40px}
}
/* Icon placements (option A, quiet inline). */
.step-link .step-ic{margin-right:-2px}
.album-type .at-name{display:flex;align-items:center;gap:8px}
.album-type small{padding-left:26px}
.tabs [role=tab] .ic{align-self:center}
.tab-check{display:inline-flex;align-self:center}
.choice.has-ic{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:12px;align-items:center}
.choice.has-ic>.ic{grid-row:1/span 2;width:24px;height:24px}
.choice.has-ic .choice-text,.choice.has-ic small{grid-column:2}
.with-ic{display:inline-flex;align-items:center;gap:8px}
.view-tools .a-pill,.view-tools .a-link{display:inline-flex;align-items:center;gap:7px}
.help{display:inline-flex;align-items:center;gap:5px}
.scene-studio-tile{display:grid;place-items:center;color:var(--muted)}
.scene-studio-tile .ic{width:26px;height:26px}
@media(max-width:640px){.step-link .step-ic{display:none}}
/* Narrow phones: the words carry these on their own, so the pinned preview's buttons stay on one row
   and the album chooser doesn't wrap. (Rotate/reset keep their icons; they have no words.) */
@media(max-width:520px){.view-tools .a-pill .ic,.album-type .at-name .ic{display:none}.album-type small{padding-left:0}}
/* Quiet hover feedback on the selectable controls (desktop pointers only). */
@media(hover:hover){
  .swatch:hover .swatch-photo{outline:1px solid var(--field-line);outline-offset:3px}
  .choice:hover,.font-card:hover,.family-chip:hover{border-color:var(--field-line)}
  .tabs [role=tab]:not([aria-selected=true]):hover{color:var(--ink);background:var(--sel)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{
  header,.intro,.how-it-works,#steps,#preview,.actions,.check,.help,footer,.tabs,.album-types,.remember-inline,.draft-notice,.notices,.hp,.view-tools,.scene-strip{display:none!important}
  main,#editor{padding:0}
  #workspace{display:block}
  .tabpanel{display:block!important}
  .review-group{break-inside:avoid}
  body{background:#fff;color:#000}
}

/* ============================================================================================
   Guided flows (A/B)
   Two calm client journeys layered on the same design system: A = one question per screen
   (wizard), B = a numbered checklist accordion. Switched by ?flow=a / ?flow=b; classic is
   untouched. Base text stays >=16px and tap targets >=48px on phones. Honours reduced motion
   (the global prefers-reduced-motion rule disables the transitions below).
   ============================================================================================ */

/* The flow container. In the Pixieset embed it becomes the positioning context for the Next bar,
   which is emulated from the parent viewport (app.js positionFlowNav) because position:fixed can't
   track the parent inside an auto-height iframe. */
.flow-root{position:static}
body.embedded .flow-root{position:relative}

/* --- Step N of M + thin progress line (A) --- */
.flow-progress{margin:0 0 22px}
.flow-step-count{margin:0 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.flow-progress-track{height:4px;background:var(--warm);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.flow-progress-fill{display:block;height:100%;background:var(--gold);transition:width .35s ease}

/* --- The question --- */
.flow-q{outline:none}
.flow-q+.flow-q{margin-top:14px}
.flow-q-title{font-size:clamp(26px,3.4vw,40px);font-weight:400;line-height:1.08;margin:0 0 8px;color:var(--ink)}
.flow-q-title:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.flow-q-help{font-size:15px;color:var(--muted);line-height:1.6;margin:0 0 20px;max-width:56ch}
.flow-q-body{margin:0}
.flow-hint{font-size:14px;color:var(--muted);line-height:1.6;margin:12px 0}
.flow-sub{margin:16px 0 0;padding-top:6px}

/* Gentle "you missed something" note — calm, inline, never a red wall, and the flow never jumps away. */
.flow-note{margin:0 0 18px;padding:12px 16px;background:var(--warm);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;color:var(--ink);font-size:15px;line-height:1.5}

/* --- Popular colours first + See all colours --- */
.swatches-popular{margin:0 0 6px}
.see-all-colours{margin:14px 0 0;border-top:1px solid var(--line);padding-top:6px}
.see-all-colours>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;padding:10px 4px;min-height:44px;font-size:14px;font-weight:500;color:var(--gold-ink);text-underline-offset:4px}
.see-all-colours>summary::-webkit-details-marker{display:none}
.see-all-colours>summary::before{content:"+";font-size:18px;line-height:1;color:var(--gold)}
.see-all-colours[open]>summary::before{content:"\2212"}
.see-all-colours>summary:hover{text-decoration:underline}
.see-all-colours>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.see-all-body{padding-top:10px}
/* Classic cover/front colour (r43 item 3): phone leads with the popular strip + "See all colours";
   desktop shows the full picker directly (force the disclosure open, drop the popular strip + summary). */
.swatch-choose>.see-all-colours{border-top:0;margin-top:10px;padding-top:0}
@media(min-width:721px){
  .swatch-choose>.swatches-popular{display:none}
  .swatch-choose>.see-all-colours>summary{display:none}
  .swatch-choose>.see-all-colours>.see-all-body{display:block;padding-top:0}
}

/* --- The always-visible Next bar --- */
/* z-index 60 keeps the Next bar above the pinned mobile preview (z-index 40) — it must never be covered. */
.flow-nav{position:sticky;bottom:0;z-index:60;margin:26px -4px 0;padding:12px 4px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--paper) 74%,rgba(250,248,243,0));}
.flow-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.flow-nav-fwd{display:flex;align-items:center;gap:10px;margin-left:auto}
.flow-back-spacer{display:block;width:1px}
.flow-back{background:none;border:0;color:var(--muted);font-size:15px;padding:12px 6px;min-height:48px;text-underline-offset:4px}
.flow-back:hover{color:var(--ink);text-decoration:underline}
.flow-skip{background:none;border:1px solid var(--line);color:var(--ink);padding:12px 16px;min-height:48px;font-size:14px;border-radius:2px}
.flow-skip:hover{border-color:var(--field-line)}
.flow-next{background:var(--ink);border:1px solid var(--ink);color:#fff;padding:15px 26px;font-size:16px;font-weight:500;min-height:52px;border-radius:2px;letter-spacing:.01em}
.flow-next:hover{background:#324a3d}

/* --- Checklist (B) --- */
.checklist-section{margin:0 0 26px}
.checklist-section-title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);margin:0 0 12px}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist-item{border:1px solid var(--line);border-radius:4px;background:transparent}
.checklist-item.open{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);padding:18px 18px 20px;background:#fff}
.checklist-item.done{border-color:var(--line)}
.checklist-head{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.checklist-num{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--field-line);border-radius:50%;font-size:14px;color:var(--muted);font-variant-numeric:lining-nums}
.checklist-num.check{border-color:var(--gold);color:var(--gold)}
.checklist-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.15;color:var(--ink)}
.checklist-collapsed{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:14px 16px;min-height:56px}
.checklist-collapsed:hover{background:var(--sel)}
.checklist-collapsed:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;border-radius:3px}
.checklist-collapsed-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.checklist-summary{font-size:14px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.checklist-change{flex:none;font-size:14px;font-weight:500;color:var(--gold-ink);text-underline-offset:4px}
.checklist-collapsed:hover .checklist-change{text-decoration:underline}
.opt-tag{display:inline-block;margin-left:8px;padding:2px 8px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--warm);border:1px solid var(--line);border-radius:10px;vertical-align:middle}

/* --- Desktop: keep the Next bar resting at the bottom of the editor column --- */
@media(min-width:951px){
  .flow-nav{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}

/* --- Phones: a fixed full-width bottom bar with the safe-area inset --- */
@media(max-width:720px){
  .flow-q-title{font-size:26px}
  .flow-q-help,.flow-note,.flow-hint{font-size:16px}
  /* Base text >=16px and tap targets >=48px on phones (guided flows). */
  .flow-root .choice,.flow-root .choice-text,.flow-root .choice small,.checklist-summary{font-size:16px}
  .flow-root .choice{padding:16px}
  .see-all-colours>summary{min-height:48px}
  .flow-nav{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--paper);box-shadow:0 -8px 22px rgba(38,58,48,.12)}
  .flow-next{flex:1;padding:16px;text-align:center;min-height:52px}
  .flow-back,.flow-skip{min-height:48px}
  .flow-root{padding-bottom:96px}          /* reserve room for the fixed bar */
  .checklist-title{font-size:20px}
  .checklist-collapsed{padding:14px}

  /* Get the QUESTION on the first screen. On the guided design step (phones only) hide the big intro,
     the how-it-works strip (its line is folded into Q1's helper) and the 4-step line (the "Step N of M"
     progress replaces it); those reappear on Your details / Delivery / Review. Also drop the flow eyebrow
     and flow B's page heading/lead so the question and its first choices sit above the fold. */
  body.flow-active .intro,
  body.flow-active .how-it-works,
  body.flow-active #steps,
  body.flow-active #editor-form>.eyebrow,
  body.flow-active #editor-form>h2,
  body.flow-active #editor-form>.lead{display:none}
  body.flow-active .flow-progress{margin-top:2px}
  /* Q1 ("Who is this album for?") shows no 3D preview — it is a choice between albums. */
  body.flow-who #preview{display:none}
  /* From Q2 on, a compact pinned mini preview (~180px) so the question title + first choices are visible. */
  body.flow-active.pin-preview #preview-canvas{height:180px}
  body.flow-active.pin-preview.editing-text #preview-canvas{height:110px}
}

/* --- Embed: emulate the fixed bar from the parent viewport (top set by app.js). Works at all widths. */
body.embedded .flow-nav{position:absolute;left:0;right:0;bottom:auto;margin:0;padding:10px 4px;border-top:1px solid var(--line);background:var(--paper);box-shadow:0 -8px 22px rgba(38,58,48,.12)}
body.embedded .flow-root{padding-bottom:88px}

@media print{.flow-nav,.flow-progress,.see-all-colours>summary{display:none!important}}

/* ============================================================================================
   Preview zoom & movement
   Zoom / pan controls on the live 3D preview (wired in src/preview-orbit.js). The +/- buttons reuse
   the existing .a-ico chrome; this block only adds the transient zoom hint and the narrow-phone rules.
   ============================================================================================ */
#preview-canvas:active{cursor:grabbing}
/* Calm, temporary hint shown over the stage when a plain wheel would otherwise be swallowed. It sits
   inside #preview-canvas (position:relative; overflow:hidden) and is never scaled by the room photo-zoom. */
.preview-zoom-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(6px);z-index:5;pointer-events:none;background:rgba(38,58,48,.86);color:#fff;font-size:12px;letter-spacing:.02em;line-height:1.2;padding:7px 14px;border-radius:20px;opacity:0;transition:opacity .22s ease,transform .22s ease;white-space:nowrap;max-width:calc(100% - 32px);box-shadow:0 4px 14px rgba(38,58,48,.22)}
.preview-zoom-hint.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
/* Narrow phones: pinch is the natural gesture, so hide the +/- buttons and keep the tools on one row. */
@media(max-width:520px){.view-tools .a-zoom{display:none}}

/* Compact line-2 font picker (Uri, 28 Sep 2026): names in each font's style, no sample pictures */
.font-picker.is-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.font-card.compact{padding:8px 10px 10px;gap:2px;align-content:start}
.font-card.compact .font-approx-label{display:none}
.font-card.compact .font-name{font-size:12px}
/* Line-2 wording is often long ("Saturday, December 23rd 2024"): wrap onto up to three lines at a readable size
   rather than shrinking it to an illegible single line; src/ui/fit-samples.js shrinks it only if it still overflows. */
.font-card.compact .font-approx{font-size:calc(var(--fs) * .8 * var(--fit,1));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
/* Phones: line-2 cards are the same full-width rows as the main font list — the words on ONE line on the
   left (fitted to the row like the names, never cut), the font name on the right — so a long date doesn't
   wrap and fonts compare down one column (Uri, 2 Oct 2026). */
@media(max-width:720px){
  .font-picker.is-compact{grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:#fff}
  .font-picker.is-compact .font-card.compact{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;border:0;border-top:1px solid #ece9df;padding:12px 14px;min-height:56px}
  .font-picker.is-compact .font-card.compact:first-of-type{border-top:0}
  .font-picker.is-compact .font-card.compact .font-approx{grid-row:1;grid-column:1;display:block;white-space:nowrap;text-overflow:clip;-webkit-line-clamp:none;font-size:calc(var(--fs,30px) * .82 * var(--fit,1))}
  .font-picker.is-compact .font-card.compact .font-name{grid-row:1;grid-column:2;font-size:11px;text-align:right}
}

/* Narrow phones (320–400px): four tabs must fit — the tabs used to hold the whole design column at
   324px on a 320px screen, so the page panned sideways (tester, 28 Sep 2026). */
@media(max-width:400px){.tabs [role=tab]{padding:12px 3px;font-size:13px;gap:4px;min-width:0}.tabs [role=tab] .ic{display:none}}

/* Album-type gate (Uri, 28 Sep 2026): one question, no preview beside it */
body.gate-active #preview{display:none}
body.gate-active #workspace{grid-template-columns:minmax(0,1fr);max-width:880px}
.album-gate .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:720px){.album-gate .grid-3{grid-template-columns:1fr}}
.designing-line{margin:10px 0 18px;padding:11px 16px;background:#f3efe7;border-left:2px solid var(--gold);font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}

/* Phone preview, option A (Uri, 28 Sep 2026): once she has scrolled into the design, the pinned preview
   slides up (transform only, so nothing on the page moves under her finger) leaving a 60px bar with her
   colour, her names and "Show preview". Tapping the bar opens it; scrolling on collapses it again. */
.pv-bar{display:none}
@media(max-width:720px){
  body.pin-preview #preview{transition:transform .22s ease}
  body.embedded.pin-preview #preview{transition:none}
  body.pin-preview.pv-collapsed:not(.embedded) #preview{transform:translateY(calc(-100% + 60px))}
  body.pin-preview.pv-collapsed .pv-bar{display:flex;position:absolute;left:0;right:0;bottom:0;height:60px;align-items:center;gap:12px;padding:8px 16px;margin:0;background:#f3efe7;border:0;border-top:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;z-index:3}
  .pv-chip{width:52px;height:40px;flex:none;background:#e6e1d8 center/cover no-repeat;border:1px solid var(--line)}
  .pv-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  .pv-show{flex:none;border:1px solid var(--ink);padding:8px 12px;font-size:13px;white-space:nowrap}
  .pv-bar:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
}
@media(prefers-reduced-motion:reduce){body.pin-preview #preview{transition:none}}

/* "Share a link" under the 3D preview (Uri, 6 Oct 2026, option A). Desktop: the panel opens under the
   preview tools. Phones: it opens in a small window (#share-dialog), since the pinned preview has no room. */
.view-links{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.share-panel{background:#fff;border:1px solid var(--line);margin:0 28px 20px;padding:16px 18px 18px}
.share-panel .eyebrow{margin:0 0 10px}
.share-form .field{margin:0 0 12px}
.share-opt{color:var(--muted)}
.share-form .primary{width:100%}
.share-form .primary[aria-busy=true]{opacity:.7;cursor:progress}
.share-lead{font-size:14px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.share-url{display:flex;gap:8px}
.share-url input{font-size:14px;min-width:0;text-overflow:ellipsis}
.share-url .secondary{flex:none}
.share-status{font-size:13px;color:var(--muted);margin:8px 0 0;min-height:1.2em}
.share-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font-size:14px}
.share-links a,.share-links button{color:var(--ink);text-decoration:underline;text-underline-offset:4px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.share-stale{font-size:13px;color:var(--gold-ink);margin:10px 0 0;line-height:1.5}
.share-dialog{border:0;padding:22px 22px 18px;background:var(--paper);color:var(--ink);width:min(460px,calc(100% - 32px));max-width:none;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.share-dialog::backdrop{background:rgba(38,58,48,.42)}
.share-dialog h3{font:400 28px/1.1 'Cormorant Garamond',Georgia,serif;margin:0 0 12px}
.share-dialog h3:focus{outline:none}
.share-close{display:block;margin:12px 0 0 auto;background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:14px;padding:8px 0;min-height:44px}
@media(max-width:720px){
  .share-more-words{display:none}
  body.pin-preview #view-share{min-height:44px;padding:6px}
}