/* WallMock Studio: a calm, photographic workspace. Warm paper, near-black ink, one restrained green accent for "ready" states and focus;
   the room photographs and finished images carry the page. Tokens first (consumed by every component, including the room inspector),
   then the shell, controls and pages; desktop is primary, the phone keeps every function. */
:root {
  /* colour */
  --paper: #f5f3ee; --surface: #ffffff; --sunk: #edeae3; --stage: #e9e6df; --glass: rgba(255, 254, 251, .86);
  --line: rgba(28, 26, 22, .09); --line-strong: rgba(28, 26, 22, .18);
  --ink: #1a1916; --ink-2: #4a4843; --muted: #77736b; --faint: #a19c92;
  --accent: #24473a; --accent-ink: #ffffff; --accent-soft: #e5eee8; --moss: #48715a; /* was #4f7a62 (4.41:1 on --paper): now >= 4.62:1 on paper, surface and sunk (eyebrows, the "Studio" wordmark); dark has its own */
  --heart: #c23b33; --focus: #2f6f57;
  --warn: #7a4b12; --warn-soft: #f7ecd9; --bad: #9a2f22; --bad-soft: #f6e2dd; --ok: #24613f;
  /* type */
  --serif: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-cap: .75rem; --fs-sm: .8125rem; --fs-body: .9375rem; --fs-lead: 1.0625rem; --fs-h3: 1.0625rem; --fs-h2: 1.375rem; --fs-h1: 2.125rem;
  /* shape and space */
  --r: 10px; --r-sm: 7px; --r-lg: 14px; --r-xl: 20px; --gap: 16px; --tap: 44px; --header: 56px; --devbar: 0px; --tabbar: 0px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 22, .06);
  --shadow: 0 1px 2px rgba(28, 26, 22, .05), 0 10px 28px -16px rgba(28, 26, 22, .22);
  --shadow-lift: 0 2px 6px rgba(28, 26, 22, .06), 0 22px 44px -22px rgba(28, 26, 22, .34);
  --shadow-photo: 0 1px 2px rgba(28, 26, 22, .08), 0 16px 36px -20px rgba(28, 26, 22, .40);
  /* motion: short feedback, slightly longer panels; opacity and transform only */
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 160ms; --t: 220ms; --t-slow: 300ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.5 var(--sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100dvh; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.028em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); }
.lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--surface); padding: 10px 14px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; } /* an inline display never un-hides an element (the sign-in code field waited for the code) */
.route-enter { animation: route-in var(--t) var(--ease-out) backwards; } /* never leaves a transform on an ancestor (fixed sheets, e.g. the room inspector, must stay viewport-fixed) */
@keyframes route-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Development environment ribbon: never part of the customer product. */
.devbar { height: var(--devbar); display: flex; align-items: center; justify-content: center; gap: .3em; padding: 0 12px; font-size: .7rem; color: #4a3f1c; letter-spacing: .01em;
  background: repeating-linear-gradient(135deg, #f1e3b0 0 12px, #eddca2 12px 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Header: brand, one quiet segmented navigation, credits. Translucent paper over the page. */
.topbar { height: var(--header); display: flex; align-items: center; gap: 28px; padding: 0 24px; background: rgba(245, 243, 238, .82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-family: var(--display); font-weight: 650; letter-spacing: -.02em; font-size: 1.06rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); box-shadow: inset 0 0 0 4.5px #fff, inset 0 0 0 5.5px var(--ink); }
.brand span { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--moss); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(28, 26, 22, .05); }
.tabs a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .875rem; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 26, 22, .08), 0 2px 8px -4px rgba(28, 26, 22, .18); }
.credits { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-2); white-space: nowrap; padding: 0 12px; min-height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.credits::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
.credits:hover { border-color: var(--line-strong); }
.credits b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.tabbar { display: none; }

/* Buttons and controls: ink primary, hairline secondary, quiet text actions; every target is at least 44 px where it is touched. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: -.005em; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; max-width: 100%;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:hover { background: #000; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { background: var(--sunk); color: var(--muted); cursor: not-allowed; border-color: transparent; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: rgba(28, 26, 22, .34); background: var(--surface); }
.btn.quiet { background: transparent; color: var(--ink); border-color: transparent; padding: 0 12px; min-width: var(--tap); font-weight: 550; }
.btn.quiet:hover { background: rgba(28, 26, 22, .06); }
.btn.block { width: 100%; }
.btn .btn-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .75rem; font-variant-numeric: tabular-nums; }
/* Disabled must look disabled for every button style. */
.btn.secondary:disabled { background: var(--surface); color: var(--faint); border-color: var(--line); cursor: not-allowed; }
.btn.quiet:disabled { background: transparent; color: var(--faint); cursor: not-allowed; }
#main:focus { outline: none; } /* programmatic focus target after navigation; the skip link and controls keep their rings */
.field { display: grid; gap: 8px; }
.label { font-size: var(--fs-cap); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.input { min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); width: 100%; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.input:hover { border-color: rgba(28, 26, 22, .3); }
.input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47, 111, 87, .18); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r); background: rgba(28, 26, 22, .06); }
.segmented label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 10px; text-align: center; cursor: pointer; font-weight: 550; font-size: .875rem; color: var(--ink-2); border-radius: 8px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.segmented label:hover { color: var(--ink); }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(28, 26, 22, .1), 0 2px 6px -3px rgba(28, 26, 22, .2); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented label:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.choices { display: grid; gap: 8px; }
.choice { position: relative; display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice .hint { display: block; font-size: var(--fs-sm); color: var(--muted); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.swatch { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); text-align: center; min-height: var(--tap); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.swatch i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.range { width: 100%; accent-color: var(--ink); min-height: var(--tap); }
details.more { border-top: 1px solid var(--line); padding-top: 6px; }
details.more summary { min-height: var(--tap); min-width: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; margin-right: 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); }
details.more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.notice { padding: 12px 14px; border-radius: var(--r); background: var(--sunk); color: var(--ink-2); font-size: .9rem; }
.notice.warn { background: var(--warn-soft); color: var(--warn); } .notice.bad { background: var(--bad-soft); color: var(--bad); } .notice.ok { background: var(--accent-soft); color: var(--accent); }

/* Favourites workbench: a compact tool column on the left, the room photographs dominant on the right, one stable Generate dock. */
.create { display: grid; grid-template-columns: 372px minmax(0, 1fr); height: calc(100dvh - var(--header) - var(--devbar)); }
.create > .panel { order: 0; } .create > .stage { order: 1; }
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--paper); min-width: 0; min-height: 0; }
.stage-view { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; padding: 32px; min-height: 0; }
.stage-view.inspect { place-items: start; overflow: auto; padding: 0; background: var(--stage); }
.scene { position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-photo); background: var(--sunk); }
.scene img.room { width: 100%; height: 100%; object-fit: cover; }
.scene .guide { position: absolute; outline: 1.5px dashed rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.22); }
.scene .guide img { width: 100%; height: 100%; object-fit: fill; opacity: .97; }
.scene .zone { position: absolute; border: 1px dashed rgba(255,255,255,.8); }
.live-pill { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); font-size: var(--fs-sm); font-weight: 550; color: var(--ink-2); animation: fade-in var(--t) var(--ease) both; }
.live-pill .spin { width: 14px; height: 14px; }
.stage-caption { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--fs-sm); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.result { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: var(--shadow-photo); animation: reveal var(--t-slow) var(--ease-out) both; }
.stage-view.inspect .result { max-width: none; max-height: none; animation: none; }
.empty { display: grid; justify-items: center; gap: 14px; max-width: 480px; text-align: center; padding: 24px; }
.empty .drop { width: 100%; border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl); padding: 40px 24px; background: var(--surface); }
.empty.dragging .drop { border-color: var(--ink); background: var(--accent-soft); }
.stage-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 20px; border-top: 1px solid var(--line); background: var(--paper); min-height: 52px; }
.stage-bar .meta { font-size: var(--fs-sm); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(245, 243, 238, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in var(--t) var(--ease) both; }
.progress-card { width: min(420px, calc(100% - 32px)); display: grid; gap: 12px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.bar { height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); width: 0; transition: width var(--t-slow) var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }

.panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }
.panel > .handle { grid-row: 1; } .panel > .stepper { grid-row: 2; } .panel > .panel-body { grid-row: 3; } .panel > .panel-foot { grid-row: 4; }
.short { display: none; }
.handle { display: none; }
.stepper { list-style: none; margin: 0; padding: 14px 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-bottom: 1px solid var(--line); }
.stepper button { width: 100%; min-height: var(--tap); display: grid; gap: 2px; justify-items: start; padding: 6px 4px 10px; border: 0; background: none; cursor: pointer; text-align: left; border-bottom: 3px solid transparent; color: var(--muted); }
.stepper button .n { font-size: .72rem; font-weight: 600; letter-spacing: .05em; }
.stepper button .t { font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.stepper button[aria-current="step"] { border-bottom-color: var(--ink); }
.stepper button[aria-current="step"] .t { color: var(--ink); }
.stepper button.done .n::after { content: " ✓"; color: var(--ok); }
.panel-body { overflow: auto; padding: 22px 22px 28px; display: grid; gap: 22px; align-content: start; }
.panel-body > header { display: grid; gap: 6px; }
.panel-foot { padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--surface); }
.dock-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dock-sum b { color: var(--ink); font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; }
.dock-sum .dock-left { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.dock-sum.done b { color: var(--accent); }
.dock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.dock-row .btn { min-width: 0; }
.dock-row.stack { grid-template-columns: minmax(0, 1fr); }
.dock-prev { font-size: var(--fs-sm); color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dock-prev a { color: var(--ink); font-weight: 600; }
.file-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.file-card img { width: 72px; height: 72px; object-fit: contain; background: var(--sunk); border-radius: var(--r-sm); }
.file-card .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Room cards: the photograph is the card; caption on the paper; a heart with an unmistakable on/off state; actions always visible. */
.grid-rooms .room { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; }
.room-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sunk); box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.grid-rooms .room:hover .room-media { box-shadow: var(--shadow-photo); transform: translateY(-2px); }
.room-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--sunk); transition: transform var(--t-slow) var(--ease); }
.grid-rooms .room:hover .room-media img { transform: scale(1.012); }
.grid-rooms .room.focused .room-media { box-shadow: 0 0 0 2px var(--ink), var(--shadow-photo); }
.grid-rooms .room .body { display: grid; gap: 3px; padding: 0 2px; min-width: 0; }
.grid-rooms .room .title { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.room-products { font-size: var(--fs-sm); color: var(--muted); }
.grid-rooms .room .body .btn.quiet { justify-self: start; margin: 4px 0 0 -12px; font-size: .875rem; }
.heart { position: absolute; top: 10px; right: 10px; width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 3px rgba(28, 26, 22, .14); cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.heart:hover { transform: scale(1.06); background: #fff; }
.heart:active { transform: scale(.94); }
.heart svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease); }
.heart[aria-pressed="true"] { background: #fff; }
.heart[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); }
.heart.pop svg { animation: heart-pop 240ms var(--ease-out); }
@keyframes heart-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.summary dt { color: var(--muted); font-size: .9rem; } .summary dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.page { max-width: 1200px; margin: 0 auto; padding: 36px 32px 64px; display: grid; gap: 28px; }
.page > header p.muted { max-width: 64ch; font-size: var(--fs-lead); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.page-title { display: grid; gap: 8px; min-width: 0; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.grid-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 36px 24px; }
.list { display: grid; gap: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); display: grid; gap: 12px; }
.toast { position: fixed; left: 50%; top: calc(var(--devbar) + var(--header) + 14px); transform: translate(-50%, -6px); max-width: min(520px, calc(100% - 32px)); padding: 11px 16px; border-radius: 999px; background: rgba(26, 25, 22, .94); color: #fff; font-size: .875rem; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); z-index: 40; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Artwork list, batch outputs, results and site links */
.art-list, .outputs, .results, .saved-list, .plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art, .out-item, .result-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.art.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.art img, .art .ph, .out-item img, .out-item .ph, .result-card img, .result-card .ph { width: 64px; height: 64px; object-fit: contain; background: var(--sunk); border-radius: var(--r-sm); }
.art-body, .out-body { min-width: 0; display: grid; gap: 2px; }
.art .name, .out-item .name, .result-card .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-actions, .out-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-start; align-items: center; }
.art-actions:empty, .out-actions:empty { display: none; }
.art-actions .btn.quiet, .out-actions .btn.quiet { padding: 0 8px; margin-left: -8px; }
.card > .btn { justify-self: start; }
.use { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: .92rem; }
.use input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.use:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bad { color: var(--bad); } .okc { color: var(--ok); } .warnc { color: var(--warn); }
.count { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; min-height: var(--tap); }
.room.focused .body .title::after { content: " · shown"; font-weight: 400; color: var(--muted); }
.card.soft { background: var(--sunk); border-color: transparent; padding: 16px; gap: 10px; justify-items: start; }
.saved-list li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.plan li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); font-size: .92rem; }
.tag { font-size: .82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tag.free { color: var(--ok); }
.cost { font-weight: 600; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sunk); font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.pill.done { background: var(--accent-soft); color: var(--accent); } .pill.failed { background: var(--bad-soft); color: var(--bad); } .pill.rendering { background: var(--warn-soft); color: var(--warn); }
.zips { display: grid; gap: 8px; justify-items: start; }
.results { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.result-card { grid-template-columns: 96px minmax(0, 1fr); }
.result-card img, .result-card .ph { width: 96px; height: 96px; }
.result-card .out-actions { grid-column: 1 / -1; justify-content: flex-start; }
.site-links { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.site-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; font-size: .88rem; color: var(--ink-2); }
.site-foot { display: grid; gap: 8px; }

/* Unified workspace: artwork strip under the stage, sectioned panel, review matrix, room editor */
.stage { grid-template-rows: minmax(0, 1fr) auto auto; }
.strip-wrap { border-top: 1px solid var(--line); background: var(--paper); overflow-x: auto; overflow-y: hidden; }
.strip { list-style: none; margin: 0; padding: 10px 12px; display: flex; gap: 10px; }
.tile { position: relative; flex: 0 0 116px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.tile-pick { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; min-height: var(--tap); min-width: 0; border-radius: var(--r); }
.tile-pick:disabled { cursor: default; }
.tile-pick img, .tile .ph { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--sunk); border-radius: var(--r); transition: opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tile-pick:hover:not(:disabled) img { transform: translateY(-1px); }
.tile.focused .tile-pick img, .tile.focused .tile .ph { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.tile.bad .tile-pick img, .tile.bad .ph { box-shadow: inset 0 0 0 1.5px var(--bad); }
.tile:has(.tile-check input:not(:checked)) .tile-pick img { opacity: .42; }
.tile .ph.plus { display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; color: var(--muted); background: transparent; border: 1.5px dashed var(--line-strong); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tile.add .tile-pick:hover .ph.plus { border-color: var(--ink); color: var(--ink); }
.tile-name { font-size: .78rem; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tile-check { position: absolute; left: 0; top: 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; font-size: 0; cursor: pointer; }
.tile-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.5px solid #fff; background: rgba(26, 25, 22, .22); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tile-check input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.tile-check input:active { transform: scale(.9); }
.tile-check input:disabled { cursor: not-allowed; opacity: .6; }
.tile-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile-state { display: block; padding: 0 2px; font-size: .72rem; color: var(--muted); }
.tile-state.bad { color: var(--bad); }
.panel { grid-template-rows: auto minmax(0, 1fr) auto; }
.panel > .handle { grid-row: 1; } .panel > .panel-body { grid-row: 2; } .panel > .panel-foot { grid-row: 3; }
.sec { display: grid; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sec:last-of-type { border-bottom: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.sec-head h2 { font-size: 1rem; font-weight: 650; letter-spacing: -.012em; } .sec-head h3 { font-size: .9375rem; font-weight: 650; }
.count-tag { font-size: .78rem; font-weight: 550; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.issues, .art-mini, .room-rows, .prod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.issues li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: .88rem; }
.art-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; font-size: .9rem; }
.art-mini .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.art-mini .muted { grid-column: 1; } .art-mini .btn { grid-column: 2; grid-row: 1 / span 2; }
.room-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.room-row img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); }
.room-row .name { font-weight: 600; }
.room-row-body { min-width: 0; display: grid; gap: 4px; }
.room-row-actions { display: flex; gap: 2px; }
.check { display: flex; gap: 8px; align-items: center; min-height: var(--tap); font-size: .88rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.create { overflow: hidden; }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.matrix-hint { font-size: .8rem; color: var(--muted); }
.matrix { border-collapse: collapse; width: 100%; font-size: .82rem; }
.matrix th, .matrix td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.matrix th span { display: block; } .matrix thead th { font-weight: 600; min-width: 64px; max-width: 104px; font-size: .74rem; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.matrix tbody th { text-align: left; max-width: 92px; font-size: .78rem; }
.matrix tbody th .art-name { max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix .cell { width: 100%; min-width: 44px; min-height: var(--tap); border: 0; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-weight: 700; cursor: pointer; }
.matrix td.warn .cell { background: var(--warn-soft); color: var(--warn); }
.matrix td.blocked .cell { background: var(--bad-soft); color: var(--bad); }
.pick-list { display: grid; gap: 6px; }
.pick-row { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 56px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.pick-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.pick-row img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.pick-row .name { display: block; font-weight: 600; }
.prod-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.prod-card.focused { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.zone-edit { position: absolute; outline: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 0 9999px rgba(20,20,20,.25); cursor: move; touch-action: none; }
.zone-edit:focus-visible { outline: 3px solid var(--focus); }
.zone-handle { position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); cursor: nwse-resize; }
.stage-caption.bad { background: var(--bad-soft); color: var(--bad); }
.zoombar { display: flex; flex-wrap: wrap; gap: 2px; }
.zoombar .btn[aria-pressed="true"] { background: var(--accent-soft); }
.stage-view.inspect { cursor: grab; } .stage-view.panning { cursor: grabbing; }
.editor-head { display: flex; align-items: center; gap: 8px; min-height: var(--tap); }
.editor-head h2 { flex: 1; min-width: 0; font-size: 1.15rem; }
.list { list-style: none; margin: 0; padding: 0; }
.row details.more { border-top: 0; padding-top: 0; }
.group { display: grid; gap: 6px; } .group-head { font-size: .92rem; }
.editor-card { padding: 16px; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.stage.mini { position: sticky; top: calc(var(--header) + 12px); min-height: 360px; height: min(calc(100dvh - var(--header) - var(--devbar) - 64px), 680px); border-radius: var(--r); overflow: hidden; }
.editor-card { scroll-margin-top: calc(var(--header) + var(--devbar) + 12px); }
.editor-body { display: grid; gap: 14px; }
.profile-form { display: grid; gap: 10px; padding-top: 8px; }
.profile-form .label { display: grid; gap: 6px; }
.input.color { padding: 4px; min-height: var(--tap); }
.chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.result-group { display: grid; gap: 10px; }

/* Phase C: readable full review (stage area), server choice, profile lifecycle, own wall photos */
.stage .review-full { grid-row: 1; }
.review-full { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; min-height: 0; overflow: auto; background: var(--paper); }
.review-full > * { flex: none; } /* the review scrolls as a whole; the table keeps its height (a scroll container would otherwise shrink to nothing) */
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-head h2:focus { outline: none; }
.review-scroll { overflow: auto; max-height: min(62vh, 560px); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.review-table { border-collapse: separate; border-spacing: 0; font-size: .88rem; min-width: 100%; }
.review-table th, .review-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; text-align: left; }
.review-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; min-width: 160px; max-width: 240px; font-weight: 600; }
.review-table thead th:first-child, .review-table tbody th { position: sticky; left: 0; background: var(--surface); z-index: 2; min-width: 180px; max-width: 260px; }
.review-table thead th:first-child { z-index: 3; }
.review-table th > span { display: block; overflow-wrap: anywhere; }
.review-table .rv-room { font-weight: 600; } .review-table .rv-prod { font-weight: 400; color: var(--ink-2); font-size: .82rem; }
.lane { display: inline-block !important; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.lane.server { background: var(--warn-soft); color: var(--warn); }
.review-table tbody th .name { font-weight: 600; }
.review-table tr.out th, .review-table tr.out td { background: var(--sunk); }
.review-table .cell { display: grid; gap: 2px; width: 100%; min-height: var(--tap); padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); text-align: left; cursor: pointer; font-weight: 600; line-height: 1.3; }
.review-table .cell .mark { font-size: 1rem; }
.review-table td.warn .cell { background: var(--warn-soft); color: var(--warn); }
.review-table td.blocked .cell { background: var(--bad-soft); color: var(--bad); }
.review-table td.held .cell { background: #eceff7; color: #2f3b66; }
.review-table td.na { color: var(--muted); font-size: .82rem; }
.exceptions ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; }
.exceptions li.blocked { color: var(--bad); } .exceptions li.held { color: #2f3b66; } .exceptions li.warn { color: var(--warn); }
.review-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.review-arts li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.review-arts .name { font-weight: 600; overflow-wrap: anywhere; }
.server-choice { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #ecdcbf; border-radius: var(--r); background: #fbf6ec; }
.server-choice h3 { font-size: 1rem; }
.server-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.server-arts span { overflow-wrap: anywhere; }
.profile-list, .wall-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.profile-row { display: grid; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.profile-row.open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.profile-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chip name actions" "chip use actions"; gap: 2px 12px; align-items: center; }
.profile-main .chip { grid-area: chip; width: 22px; height: 22px; }
.chip.canvas { border-radius: 4px; background: repeating-linear-gradient(45deg, #efe9dc 0 4px, #e0d7c3 4px 8px); }
.profile-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; } .profile-use { grid-area: use; }
.profile-main .row-actions { grid-area: actions; justify-content: flex-end; gap: 2px; }
.color-pair { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.confirm { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); }
.scope-rooms { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; display: grid; gap: 2px; }
.del-choice { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .del-choice legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.btn.danger { background: var(--bad); } .btn.danger:hover { background: #6e2015; }
.btn.danger:disabled { background: #e1e4de; color: #4c5750; border-color: #cdd3cb; }
.input:disabled { background: var(--sunk); color: var(--muted); }
.btn.quiet.danger-text { color: var(--bad); }
.wall-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.wall-row.focused { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wall-row img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); }
.wall-body { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.add-wall { display: grid; gap: 6px; justify-items: start; }
.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 8px; }
.label.mini { display: grid; gap: 4px; }
.mini-form { display: grid; gap: 8px; padding: 8px 0; }
.scene .zone.wall { border: 2px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 0 9999px rgba(20,30,20,.28); }
.scene .guide.sample { outline: 2px dashed #fff; background: rgba(255,255,255,.22); }
.input.bad { border-color: var(--bad); color: var(--bad); }

/* Laptop */
@media (max-width: 1320px) { .create { grid-template-columns: 360px minmax(0, 1fr); } .rooms { gap: 10px; } }
/* Tablet and phone: the preview stays pinned above a sheet of controls that scrolls on its own (no page scroll while editing) */
@media (max-width: 1023px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .tabs a { padding: 0 9px; font-size: .95rem; }
  .brand { font-size: 1.15rem; }
  .credits .full { display: none; } .credits .short { display: inline; }
  .create { display: flex; flex-direction: column; height: calc(100dvh - var(--header) - var(--devbar) - var(--tabbar)); }
  .stage { flex: 0 0 44%; transition: flex-basis .25s ease; }
  .create.sheet-open .stage { flex-basis: 20%; }
  .stage-bar { display: none; }
  .panel { flex: 1 1 auto; border: 0; border-radius: 16px 16px 0 0; margin-top: -12px; position: relative; z-index: 2; box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .handle { display: grid; place-items: center; }
  .handle button { width: 100%; min-height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .handle button::before { content: ""; width: 44px; height: 5px; border-radius: 999px; background: var(--line-strong); }
  .panel-body { overflow: auto; }
  .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-grid { grid-template-columns: minmax(0, 1fr); } .stage.mini { position: static; height: 420px; }
  .progress-card { padding: 14px 16px; gap: 8px; } .progress-card .card-cancel, .progress-card .card-hint { display: none; } /* the footer keeps Cancel */
  .create.reviewing .stage, .create.reviewing.sheet-open .stage { flex-basis: 100%; } .create.reviewing .panel { display: none; }
  .review-full { padding: 16px; }
}
/* Phone: compact header, bottom tab bar, preview + sheet panel filling the screen */
@media (max-width: 699px) {
  :root { --header: 52px; --tabbar: 64px; --devbar: 0px; }
  .devbar { font-size: .68rem; justify-content: flex-start; }
  .topbar { padding: 0 16px; gap: 12px; }
  .tabs { display: none; }
  .brand { font-size: 1.15rem; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--tap); color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .stage { flex-basis: 38%; }
  .create.sheet-open .stage { flex-basis: 16%; }
  .stage-view { padding: 12px; }
  .stage-caption { left: 8px; bottom: 8px; font-size: .75rem; }
  .stepper { padding: 0 12px; }
  .stepper button .t { font-size: .85rem; }
  .panel-body { padding: 16px; overflow: auto; }
  .panel-foot { padding: 12px 16px; position: static; }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-grid { grid-template-columns: minmax(0, 1fr); } .stage.mini { position: static; height: 300px; min-height: 0; }
  .stage { flex-basis: 50%; }
  .strip { padding: 6px 12px; gap: 6px; }
  .tile { flex-basis: 64px; padding: 3px; gap: 0; position: relative; }
  .tile-pick { min-height: 0; } .tile-pick img, .tile .ph { height: 44px; }
  .tile-name { display: none; } .tile.add .tile-name { display: none; }
  .tile-check { font-size: 0; min-height: var(--tap); justify-content: center; }
  .tile-state { font-size: .68rem; min-height: var(--tap); justify-content: center; text-align: center; }
  .room-row { grid-template-columns: 52px minmax(0, 1fr); } .room-row img { width: 52px; height: 40px; } .room-row-actions { grid-column: 1 / -1; }
  .art, .out-item { grid-template-columns: 56px minmax(0, 1fr); }
  .art img, .art .ph, .out-item img, .out-item .ph { width: 56px; height: 56px; }
  .art-actions, .out-actions { grid-column: 1 / -1; }
  .results { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 20px 16px calc(var(--tabbar) + 24px); }
  .grid-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .full { display: none; } .short { display: inline; }
  .stepper button { padding-bottom: 8px; }
  .create.reviewing .strip-wrap { display: none; }
  .review-table thead { display: none; }
  .review-table, .review-table tbody, .review-table tr, .review-table th, .review-table td { display: block; width: 100%; max-width: none !important; min-width: 0 !important; }
  .review-table tbody th { position: static; }
  .review-table td { border-right: 0; }
  .review-table td::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; overflow-wrap: anywhere; }
  .review-table tr { border-bottom: 2px solid var(--line-strong); }
  .profile-main { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip name" "chip use" "actions actions"; }
  .profile-main .row-actions { justify-content: flex-start; }
  .wall-row { grid-template-columns: 56px minmax(0, 1fr); } .wall-row img { width: 56px; height: 42px; } .wall-row .btn { grid-column: 1 / -1; justify-self: start; }
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Production has no development banner or reserved banner space. */
:root.development { --devbar: 28px; }
.devbar[hidden] { display: none; }
@media (max-width: 699px) { :root.development { --devbar: 24px; } }

/* Rooms & products: room-type categories and search over the certified rooms (the catalogue grows as rooms are certified). */
.rooms-toolbar { display: flex; gap: 12px 16px; align-items: center; justify-content: space-between; min-width: 0; }
.cat-chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 550; font-size: .875rem; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cat:hover { border-color: var(--line-strong); color: var(--ink); }
.cat:active { transform: scale(.97); }
.cat[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat .n { font-size: .72rem; font-weight: 650; min-width: 18px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat[aria-pressed="true"] .n { color: rgba(255, 255, 255, .72); }
.input.search { flex: none; width: 240px; max-width: 100%; min-height: 38px; border-radius: 999px; padding: 0 16px 0 38px; border-color: var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377736b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 14px 50%/16px no-repeat; }
.howto { justify-self: start; }
.howto > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); }
.howto[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.howto > summary:hover { color: var(--ink); }
.howto-steps { list-style: none; counter-reset: step; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 900px; animation: route-in var(--t) var(--ease-out) both; }
.howto-steps li { counter-increment: step; display: block; padding: 12px 14px 12px 44px; position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.howto-steps li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 700; }
.howto-steps b { color: var(--ink); font-weight: 600; }
.room .cat-label, .rcard .cat-label { font-size: .6875rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.rooms-empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-xl); }
@media (max-width: 899px) { .rooms-toolbar { flex-direction: column; align-items: stretch; } .rooms-toolbar > * { min-width: 0; max-width: 100%; } .cat-chips { width: 100%; } .input.search { width: 100%; } .howto-steps { grid-template-columns: minmax(0, 1fr); } }

/* Account and Plans inside the Studio shell (same tokens as the account pages; aliases keep the shared class names). */
:root { --forest: var(--accent); --forest-2: #17301f; --paper-2: var(--sunk); --ink-3: var(--muted); --moss-2: #c2d6c6; --moss-3: var(--accent-soft); --gold-bg: #faf1dc; --gold-ink: #6f5010; --card: var(--surface); --line-2: var(--line-strong); --radius: 12px; --radius-lg: 20px; --warn-bg: var(--warn-soft); --warn-ink: var(--warn); --ok-bg: #e3efe4; --ok-ink: var(--ok); --bad-bg: var(--bad-soft); --bad-ink: var(--bad); }
.account-page { gap: 20px; }
.account-page .eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); font-weight: 700; }
.account-page .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.account-page .stack { display: grid; gap: 20px; }
.account-page .card { border-radius: var(--radius-lg); padding: 22px 24px; }
.account-page .card h2 { font-size: 1.3rem; }
.account-page .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.account-page .kv dt { color: var(--muted); font-size: .86rem; } .account-page .kv dd { margin: 0; }
.account-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.account-page .stat { display: grid; gap: 2px; }
.account-page .stat b { font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.account-page .notice.ok { background: var(--ok-bg); color: var(--ok); }
.plan-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.plan-summary .name { font-weight: 700; font-size: 1.05rem; }
.plan-summary .state { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--ok-bg); color: var(--ok); }
.plan-summary .state.off { background: var(--sunk); color: var(--ink-2); } .plan-summary .state.warn { background: var(--warn-soft); color: var(--warn); }
.credit-meter { display: grid; gap: 6px; margin: 14px 0 4px; }
.credit-meter .nums { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.credit-meter .nums b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.credit-meter .bar { height: 8px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.credit-meter .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--moss), var(--accent)); border-radius: 999px; }
.demo { border: 1px dashed #d9bf93; background: var(--warn-soft); border-radius: var(--radius); padding: 14px 16px; margin-top: 14px; }
.demo summary { cursor: pointer; font-weight: 600; color: var(--warn); font-size: .9rem; min-height: var(--tap); display: flex; align-items: center; }
.btn.danger { background: transparent; color: var(--bad); border-color: #ebcdc6; } .btn.danger:hover { background: var(--bad-soft); }
.plans-head { text-align: center; max-width: 680px; margin: clamp(.5rem, 3vh, 2rem) auto 1rem; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.plans-head h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); letter-spacing: -.03em; }
.plans-head .lede { color: var(--ink-2); font-size: 1.05rem; max-width: 52ch; }
.toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.toggle { display: inline-flex; align-items: center; background: var(--sunk); border-radius: 999px; padding: 4px; gap: 2px; }
.toggle button { border: 0; background: transparent; padding: 9px 20px; border-radius: 999px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 36px; transition: background .15s, color .15s, box-shadow .15s; }
.toggle button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 14px -8px rgba(0, 0, 0, .25); }
.save-pill { background: var(--gold-bg); color: var(--gold-ink); border-radius: 999px; padding: 4px 11px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: 18px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px 24px; box-shadow: var(--shadow); }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 28px 56px -28px rgba(31, 59, 45, .5); transform: translateY(-8px); }
.plan-card .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plan-card.current .ribbon { background: var(--moss); }
.plan-card .name { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.plan-card .for { color: var(--ink-2); font-size: .92rem; min-height: 2.8em; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font-family: var(--display); font-size: 2.7rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: .95rem; }
.price-note { font-size: .86rem; color: var(--ink-2); min-height: 1.35em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price-note s { color: var(--muted); } .price-note .save-pill { font-size: .7rem; padding: 3px 9px; }
.credits-line { display: flex; align-items: center; gap: 9px; font-weight: 600; padding: 10px 14px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; font-size: .95rem; }
.credits-line small { font-weight: 500; color: var(--ink-2); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.features li { display: flex; gap: 9px; align-items: flex-start; }
.features li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: .1em; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3b2d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan-card .cta { margin-top: auto; width: 100%; }
.plan-card .cta-note { font-size: .8rem; color: var(--muted); text-align: center; margin-top: -6px; }
.plans-fine { text-align: center; color: var(--muted); font-size: .84rem; max-width: 64ch; margin: 22px auto 0; }
.plans-section { margin-top: 44px; display: grid; gap: 18px; }
.plans-section > h2 { text-align: center; font-size: 1.6rem; letter-spacing: -.025em; }
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.compare table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { font-weight: 700; background: var(--paper); font-size: .86rem; }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare tbody th { font-weight: 500; color: var(--ink-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td b { font-variant-numeric: tabular-nums; } .compare .yes { color: var(--accent); font-weight: 700; }
.faq { max-width: 760px; margin: 0 auto; width: 100%; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq summary { padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--moss); font-size: 1.3rem; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 20px 18px; color: var(--ink-2); font-size: .94rem; }
.plan-status { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow); }
.plan-status .name { font-weight: 700; font-size: 1.05rem; } .plan-status .sub { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .plan-card.featured { transform: none; } .plan-card { padding: 24px 20px; } .account-page .grid-2 { grid-template-columns: 1fr; } }

/* Favourites workspace: layout silhouettes, the artwork tray inside the panel, room cards on the stage, summary bar, rooms guidance. */
.arrange { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.arr { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 4px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: center; min-height: var(--tap); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.arr input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.arr:hover { border-color: var(--line-strong); }
.arr:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.arr:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.arr:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.arr-name { font-size: .78rem; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.arr:has(input:checked) .arr-name { color: var(--ink); }
.segmented.dir { margin-top: -2px; }
.silhouette { display: grid; gap: 3px; width: 46px; height: 36px; padding: 4px; background: var(--sunk); border-radius: 6px; align-content: center; justify-content: center; transition: background var(--t-fast) var(--ease); }
.arr:has(input:checked) .silhouette { background: var(--accent-soft); }
.silhouette i { display: block; background: #fff; border: 1.25px solid var(--ink-2); border-radius: 1.5px; width: 100%; height: 100%; }
.silhouette.c1 { grid-template-columns: 22px; grid-auto-rows: 1fr; } .silhouette.c1 i:only-child { width: 18px; height: 26px; }
.silhouette.c2 { grid-template-columns: repeat(2, 15px); grid-auto-rows: 1fr; }
.silhouette.c3 { grid-template-columns: repeat(3, 11px); grid-auto-rows: 1fr; }
.panel .strip-wrap { border: 0; background: transparent; overflow: visible; }
.panel .strip { flex-wrap: wrap; padding: 0; gap: 14px 10px; }
.panel .tile { flex: 0 0 calc(33.333% - 7px); }
.stage-view.cards { display: block; place-items: unset; overflow: auto; padding: 28px 32px 40px; }
.room-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px 24px; align-items: start; }
.rcard { display: grid; gap: 12px; min-width: 0; transition: opacity var(--t) var(--ease); }
.rcard.blocked .rcard-pic { box-shadow: inset 0 0 0 2px var(--bad); } /* the photo stays as it is: the state is the pill, this border and the reason */
.rcard-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.rcard:hover .rcard-open { box-shadow: var(--shadow-photo); transform: translateY(-2px); }
.rcard-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.rcard-pic { position: relative; background: var(--sunk); overflow: hidden; }
.rcard-pic img.room { width: 100%; height: 100%; object-fit: cover; }
.rcard-pic .guide { position: absolute; outline: 1.5px dashed rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 8px 22px rgba(0,0,0,.22); }
.rcard-pic .guide img { width: 100%; height: 100%; object-fit: fill; }
.rcard-pic .zone { position: absolute; border: 1px dashed rgba(255,255,255,.85); }
.rcard-pic .pill { position: absolute; right: 12px; top: 12px; padding: 3px 10px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.rcard-body { display: grid; gap: 3px; padding: 0 2px; min-width: 0; }
.rcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rcard-title { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.012em; }
.rcard-products { color: var(--muted); }
.rcard-actions { display: flex; justify-content: space-between; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: 6px; }
.rcard-actions .btn.quiet { font-size: .875rem; padding: 0 10px; }
.rcard-include { min-height: var(--tap); font-weight: 550; font-size: .875rem; gap: 10px; }
.rcard-include input, .switch input { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.rcard-include input::after, .switch input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--t-fast) var(--ease); }
.rcard-include input:checked, .switch input:checked { background: var(--accent); }
.rcard-include input:checked::after, .switch input:checked::after { transform: translateX(14px); }
.rcard-include input:disabled { opacity: .5; cursor: not-allowed; }
.rcard-include input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rcard.add { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 4 / 3; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent; cursor: pointer; color: var(--ink-2); font-weight: 600; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.rcard.add:hover { border-color: var(--ink); color: var(--ink); }
.rcard.add .ph.plus { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.page.wide { max-width: 1480px; }
@media (max-width: 1023px) {
  .create > .panel { order: 1; border-right: 0; } .create > .stage { order: 0; }
  .room-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .stage-view.cards { padding: 14px; }
}
@media (max-width: 699px) { .panel .tile { flex-basis: calc(25% - 8px); } }

/* Results: the finished images dominate; download first; grouped by artwork or room; a quiet reveal for new images. */
.results-head { align-items: flex-end; }
.results-lead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.results-lead .zips { display: flex; }
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-top: -8px; }
.results-toolbar .segmented { width: auto; }
.result-group { display: grid; gap: 16px; }
.result-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.result-group-head h2 { font-size: 1.125rem; font-weight: 650; margin-right: auto; overflow-wrap: anywhere; }
.result-group-head .zips { display: flex; }
.result-group-head .zips .btn { min-height: 36px; font-size: .84rem; padding: 0 14px; }
.results { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 32px 24px; }
.result-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; align-items: stretch; min-width: 0; }
.result-card.gone { opacity: .7; }
.result-card.reveal { animation: reveal var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.result-open { display: block; width: 100%; padding: 0; border: 0; background: var(--sunk); cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.result-open:hover { box-shadow: var(--shadow-photo); transform: translateY(-2px); }
.result-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.result-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; background: var(--sunk); }
img.pending { color: transparent; background: var(--sunk); } /* an older image's preview is being made: a quiet tile, never alt text */
.result-ph { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--sunk); color: var(--muted); font-size: var(--fs-sm); border-radius: var(--r-lg); }
.result-body { display: grid; gap: 1px; padding: 0 2px; min-width: 0; }
.result-body .name { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta { font-variant-numeric: tabular-nums; }
.result-card .out-actions { grid-column: 1; padding: 0; margin: -6px 0 0 -4px; }
.result-card .out-actions .btn.quiet { font-size: .875rem; }
.empty-state { display: grid; gap: 8px; justify-items: start; padding: 32px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl); }
.empty-state .btn { margin-top: 6px; }
@media (max-width: 699px) { .results { grid-template-columns: minmax(0, 1fr); gap: 28px; } .results-toolbar { margin-top: 0; } .results-toolbar .segmented { width: 100%; } }

/* Setups: each saved selection as a quiet card with its rooms' photographs. */
.setup-list { display: grid; gap: 12px; }
.setup { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 16px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); transition: box-shadow var(--t) var(--ease); }
.setup:hover { box-shadow: var(--shadow); }
.setup-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 148px; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--sunk); }
.setup-thumbs.n1 { grid-template-columns: 1fr; } .setup-thumbs.n2 img { grid-row: span 2; } .setup-thumbs.n3 img:first-child { grid-row: span 2; }
.setup-thumbs img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.setup-body { display: grid; gap: 3px; min-width: 0; }
.setup-body h2 { font-size: 1.125rem; font-weight: 650; overflow-wrap: anywhere; }
.setup-rooms { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-actions { justify-content: flex-end; }
@media (max-width: 699px) { .setup { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; } .setup-thumbs { width: 84px; } .setup-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Sign-in: one calm panel. */
.signin-page { justify-items: center; padding-top: clamp(40px, 12vh, 120px); }
.card.signin { width: min(440px, 100%); padding: 32px; gap: 14px; box-shadow: var(--shadow-lift); border-color: transparent; }
.card.signin h1, .card.signin .signin-title { font-size: 1.75rem; }
.signin-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 650; letter-spacing: -.02em; font-size: 1rem; margin-bottom: 6px; }
.signin-brand::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); box-shadow: inset 0 0 0 4.5px #fff, inset 0 0 0 5.5px var(--ink); }
.signin-brand span { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--moss); }
.signed-out .tabs, .signed-out .credits, .signed-out .tabbar, .signed-out .profile { display: none !important; } /* no account menu before sign-in */
.credits:empty { display: none; }
.card.signin .btn { margin-top: 6px; }
.signin-page .site-foot { width: min(440px, 100%); }

/* Set modes: numbered slots and panel guides. */
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.slot { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr); grid-template-areas: "n img body" "n img actions"; gap: 0 12px; align-items: center; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); animation: reveal var(--t) var(--ease-out) both; }
.slot.empty { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "n choose"; border: 1.5px dashed var(--line-strong); background: transparent; transition: border-color var(--t-fast) var(--ease); }
.slot.empty:hover { border-color: var(--ink); }
.slot.bad { border-color: var(--bad); }
.slot-n { grid-area: n; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot.empty .slot-n { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.slot img, .slot .ph { grid-area: img; width: 52px; height: 52px; object-fit: contain; background: var(--sunk); border-radius: var(--r-sm); }
.slot-body { grid-area: body; min-width: 0; display: grid; padding-top: 2px; }
.slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; }
.slot-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0; margin-left: -10px; }
.slot-actions .btn.quiet { padding: 0 10px; min-height: 34px; min-width: 34px; font-size: .84rem; color: var(--ink-2); }
.slot-actions .btn.quiet:hover { color: var(--ink); }
.slot-choose { grid-area: choose; display: flex; align-items: center; gap: 8px; min-height: var(--tap); border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; text-align: left; padding: 0 4px; }
.slot-choose::before { content: "+"; font-size: 1.2rem; font-weight: 300; line-height: 1; color: var(--muted); }
.adv { display: grid; gap: 0; }
.adv > summary { gap: 10px; }
.adv > summary .count-tag { margin-left: auto; }
.adv-group { display: grid; gap: 10px; padding: 14px 0 6px; }
/* set-ui-1: the set's Spacing slider and Size & position editor (touch-sized sliders, value read-outs, Apply / Cancel / Reset) */
.se-row { display: grid; gap: 4px; }
.se-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: .875rem; }
.se-val { font-variant-numeric: tabular-nums; font-weight: 550; color: var(--ink-2); }
.se-row .range { touch-action: pan-y; }
.se-place { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.se-place p { flex: 1 1 200px; margin: 0; }
.set-editor { display: grid; gap: 14px; }
.se-status { padding: 10px 12px; border-radius: var(--r); background: var(--sunk); }
.se-status.bad { background: var(--bad-soft); }
.se-status p { margin: 0; } .se-status p + p { margin-top: 6px; }
.se-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.se-actions .btn { min-height: var(--tap); }
.set-note { margin: 0 0 10px; }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.adv-group + .adv-group { border-top: 1px solid var(--line); }
.adv-group h3 { font-size: .875rem; font-weight: 650; }
.guide .panel-n { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 24, 22, .78); color: #fff; font-size: .68rem; font-weight: 700; }
.rcard-pic .guide .panel-n { width: 16px; height: 16px; font-size: .6rem; }
.ed-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.ed-group-h { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); }
.sec-head h3 .scope { margin-left: 8px; font-size: .72rem; font-weight: 600; color: var(--muted); }
.wall-previews { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid #ecdcbf; }

/* Root corrections: honest card labels, rendered previews, drawers, results lead. */
.rcard-pic .pill.approx { left: 12px; right: auto; bottom: 12px; top: auto; background: rgba(26, 25, 22, .62); color: #fff; font-weight: 550; }
.rcard-pic .pill.rendering { background: rgba(247, 236, 217, .94); color: var(--warn); }
.rcard-pic .pill.failed { background: rgba(246, 226, 221, .95); color: var(--bad); }
.rcard-pic .pill.done { background: var(--accent); color: #fff; }
.drawer { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.drawer > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 20px; font-weight: 600; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); }
.drawer[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.drawer .profiles-card { border: 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.rooms-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; } /* the chip row scrolls inside; it never widens the page */
.rooms-head { align-items: flex-end; }
@media (max-width: 1023px) { .room-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 699px) { .room-cards { grid-template-columns: 1fr 1fr; } }

/* Final candidate: footer note for sets; phone layout (one comfortable card column, wrapping names and actions, a labelled sheet handle,
   a compact footer that never hides the controls) and touch-sized targets. */
.foot-note { margin: 0; text-align: center; }
.handle-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.handle button { gap: 4px; }
.rcard-head { flex-wrap: wrap; row-gap: 2px; }
.rcard-title { min-width: 0; overflow-wrap: anywhere; }
.rcard-actions .row-actions { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .create { height: calc(100dvh - var(--header) - var(--devbar) - var(--tabbar)); }
  .stage { flex: 0 0 56%; min-height: 0; } .create.sheet-open .stage { flex-basis: 18%; }
  .panel { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .panel-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 699px) {
  .room-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rcard-body { padding: 10px 12px 12px; gap: 4px; }
  .rcard-head { display: grid; gap: 2px; }
  .rcard-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rcard-actions .row-actions { justify-content: flex-start; margin-left: -10px; }
  .stage-view.cards { padding: 10px 12px 16px; }
  .panel-foot { grid-template-columns: minmax(0, 1fr); padding: 10px 16px 12px; gap: 8px; }
  .panel-foot .foot-note { font-size: .75rem; }
  .panel-foot .btn { min-height: var(--tap); padding: 0 14px; }
  .grid-rooms { grid-template-columns: minmax(0, 1fr); }
  }
@media (max-width: 699px), (pointer: coarse) {
  .slot-actions .btn.quiet, .cat, .toggle button, .rcard-include { min-height: var(--tap); }
  .slot-actions .btn.quiet { min-width: var(--tap); }
}

/* Craft pass: panel rhythm, compact secondary actions, phone header. */
.panel-body > details.more { border-top: 0; padding-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-top: -10px; }
.sec .row-actions .btn.quiet { min-height: 36px; font-size: .84rem; color: var(--ink-2); padding: 0 10px; }
.sec .row-actions .btn.quiet:hover { color: var(--ink); }
.sec > .row-actions:has(> [data-key="select-all"]) { margin: -4px 0 0 -10px; }
.segmented label { white-space: normal; line-height: 1.2; padding: 6px 10px; }
@media (max-width: 699px) {
  h1 { font-size: 1.75rem; }
  .page { gap: 22px; }
  .rooms-page .lede { font-size: .9375rem; }
  .rooms-head { gap: 12px; }
  .rooms-head .head-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .rooms-head .head-actions::-webkit-scrollbar { display: none; }
  .rooms-head .head-actions > * { flex: none; }
  .rooms-head .head-actions > [data-key="open-favourites"] { order: -1; }
  .grid-rooms { gap: 28px; }
}

/* Room inspector host (wm-inspector, SECOND's component): a definite-height column beside the stage on desktop, scrolling inside itself
   with its footer in view; on the phone its own sheet above the tab bar (the Studio's generic sheet handle and dock step aside). */
.panel[data-view^="room-editor"] > .panel-body { padding: 0; overflow: hidden; display: block; }
.panel[data-view^="room-editor"] > .panel-body > .wmi:not(.wmi--sheet) { height: 100%; }
.panel-foot:empty { display: none; }
.editor-card { padding: 16px; }
.editor-card .editor-body { height: min(calc(100dvh - var(--header) - var(--devbar) - 64px), 680px); min-height: 360px; }
.editor-card .editor-body > .wmi:not(.wmi--sheet) { height: 100%; }
@media (max-width: 699px) {
  :root { --wmi-sheet-offset: calc(var(--tabbar) + env(safe-area-inset-bottom)); --wmi-foot-inset: 0px; }
  .panel[data-view^="room-editor"] > .handle, .panel[data-view^="room-editor"] > .panel-foot { display: none; }
  .create:has(.panel[data-view^="room-editor"]) > .stage { flex: 1 1 auto; }
  .create:has(.panel[data-view^="room-editor"]) > .panel { flex: 0 0 0; min-height: 0; box-shadow: none; }
  .editor-card .editor-body { height: auto; min-height: 0; }
  /* the photograph fits the space above the inspector's peek sheet (min(50dvh, 460px) above the tab bar) */
  .create:has(.panel[data-view^="room-editor"]) .stage-view { padding: 12px 12px calc(min(50dvh, 460px) + 12px); }
  .create:has(.panel[data-view^="room-editor"]) .stage-caption { bottom: calc(min(50dvh, 460px) + 8px); }
}

/* ---- P1 (overnight contract): touch targets, the notch, and phones held sideways --------------------------------------------------------
   Touch screens get 44 px targets for the few compact desktop controls. Short landscape screens (the page is laid out edge to edge,
   viewport-fit=cover, so a sideways phone's notch insets are padded there) keep the desktop split (controls in a scrolling column beside a
   full-height photograph) instead of a sheet under a thin strip of photograph, with the primary action always in view. */
@media (pointer: coarse) {
  .tabs a, .credits, .howto > summary, .input.search, .segmented label, .sec .row-actions .btn.quiet { min-height: var(--tap); }
}
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  :root { --header: 48px; --tabbar: 0px; }
  .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  #main { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .topbar { gap: 10px; } .tabs { padding: 2px; } .tabs a { padding: 0 10px; }
  .tabbar { display: none; } .tabs { display: flex; } .page { padding-bottom: 24px; }
  .create { display: grid; grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--header) - var(--devbar)); }
  .create > .panel { grid-column: 1; grid-row: 1; order: 0; margin-top: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); }
  .create > .stage, .create.sheet-open > .stage { grid-column: 2; grid-row: 1; order: 1; flex: none; }
  .create > .panel > .handle { display: none; }
  .wmi { --wmi-pad: 16px; } /* the inspector's own spacing variable: more of its controls fit the short column */
  .editor-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); align-items: start; }
  .editor-card .stage.mini { height: calc(100dvh - var(--header) - var(--devbar) - 40px); position: sticky; top: calc(var(--header) + 8px); }
  .editor-card .editor-body { height: calc(100dvh - var(--header) - var(--devbar) - 40px); min-height: 0; }
}
/* Phones and tablets: the desktop stage bar (zoom, meta) stays hidden, but its way back to the room cards does not; after a free preview
   or a finished image fills the stage, "All rooms" sits over the photograph's top-left corner. */
@media (max-width: 1023px) {
  .stage-bar { display: flex; position: absolute; top: 10px; left: 10px; z-index: 4; padding: 0; margin: 0; border: 0; background: none; pointer-events: none; }
  .stage-bar .meta, .stage-bar [data-key^="zoom-"] { display: none; }
  .stage-bar .zoombar { display: contents; }
  .stage-bar [data-key="back-preview"], .stage-bar [data-key="back-rooms"] { pointer-events: auto; min-height: var(--tap); padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px -8px rgba(0,0,0,.35); }
}
/* Large text (browser text size up to 200 %): the layout choices wrap instead of pushing "Four" off-screen, and the brand gives way
   before the credits do. At the default size both are unchanged (four columns; the full brand). */
.arrange { grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.6rem), 1fr)); } .arr { min-width: 0; }
.topbar .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; } .topbar .credits { flex: none; }
.panel-body > * { min-width: 0; } /* grid children shrink to the panel instead of widening it at large text sizes */
.tabbar a { min-width: 0; font-size: min(.72rem, 14px); } /* tab labels grow with the text size up to 14 px: five labels still fit beside their icons */

/* P2 plan changes (2026-09-26): the change preview card on Plans */
.change-host:empty { display: none; }
.change-card { border-color: var(--accent); display: grid; gap: 10px; }
.change-card .kv { margin: 0; }

/* ---- homepage-18 landing ("/" signed out; supersedes P3): the Studio's own tokens; real exports only ---- */
.landing { width: min(1180px, 100%); margin: 0 auto; gap: clamp(56px, 8vw, 104px); padding-bottom: 24px; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); grid-template-areas: "copy fig" "signin fig"; gap: 22px clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(12px, 3vw, 32px); }
.lp-copy { grid-area: copy; display: grid; gap: 18px; min-width: 0; align-self: end; }
.lp-signin { grid-area: signin; min-width: 0; align-self: start; }
.lp-hero-fig { grid-area: fig; align-self: center; }
.lp-copy .eyebrow { margin: 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); font-weight: 700; }
.lp-copy h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.03; letter-spacing: -.035em; max-width: 13ch; }
.lp-lede { font-size: clamp(1.03rem, 1.5vw, 1.16rem); color: var(--ink-2); max-width: 36rem; line-height: 1.6; margin: 0; }
.lp-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .95rem; }
.lp-points li { display: inline-flex; align-items: center; gap: 8px; }
.lp-points li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--moss); }
.lp-jump { margin: 0; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .lp-link { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .lp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.lp-phone-cta { display: none; }
.lp-signin .card.signin { width: min(440px, 100%); padding: 24px; box-shadow: var(--shadow); border-color: var(--line); }
.lp-signin .card.signin .signin-brand { display: none; }
.lp-signin .card.signin .signin-title { font-size: 1.25rem; }
.lp-fig { margin: 0; display: grid; gap: 10px; min-width: 0; }
.lp-fig img, .lp-card img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 1px 2px rgba(28, 26, 22, .06), 0 24px 60px -32px rgba(28, 26, 22, .45); background: var(--surface-2, #ebe7df); }
.lp-hero-fig img { border-radius: 22px; max-height: min(78vh, 760px); width: auto; max-width: 100%; justify-self: center; }
.lp-hero-fig figcaption { justify-self: center; }
.lp-fig figcaption { font-size: .85rem; color: var(--muted); }
.lp-section { display: grid; gap: 18px; scroll-margin-top: 24px; }
.lp-section > h2, .lp-split h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1.12; }
.lp-sub { color: var(--ink-2); margin: -6px 0 4px; max-width: 46rem; line-height: 1.6; }
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.lp-card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.lp-card img { aspect-ratio: 1 / 1; object-fit: cover; }
.lp-card h3 { font-size: 1.15rem; margin-top: 6px; }
.lp-card p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.lp-step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--surface, #fff); font-weight: 700; font-size: .9rem; }
.lp-steps h3 { font-size: 1.08rem; margin: 4px 0 0; }
.lp-steps p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.lp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); border-radius: 18px; }
.lp-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lp-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.lp-split-copy { display: grid; gap: 14px; } .lp-split-copy p { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 34rem; }
.lp-split-figs { display: grid; grid-template-columns: 1.33fr 1fr; gap: clamp(12px, 2vw, 20px); align-items: end; }
.lp-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-use { border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.lp-use h3 { font-size: 1.05rem; } .lp-use p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 32px); }
.lp-facts h3 { font-size: 1.05rem; margin-bottom: 6px; }
.lp-facts p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.lp-beta { margin: -6px 0 4px; max-width: 46rem; color: var(--ink); background: var(--accent-soft, #e9efe9); border-radius: 12px; padding: 12px 16px; line-height: 1.55; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 6px; align-content: start; }
.lp-plan.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.lp-plan h3 { font-size: 1.15rem; }
.lp-plan p { margin: 0; }
.lp-plan-for { color: var(--ink-2); font-size: .92rem; min-height: 2.6em; }
.lp-plan-price { margin-top: 8px !important; color: var(--muted); } .lp-plan-price b { font-size: 2rem; color: var(--ink); letter-spacing: -.03em; }
.lp-plan-annual, .lp-plan-credits { font-size: .9rem; color: var(--ink-2); }
.lp-plan-credits { font-weight: 600; color: var(--ink); }
.lp-fine { color: var(--muted); font-size: .88rem; max-width: 52rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "fig" "signin"; }
  .lp-hero-fig img { max-height: 62vh; }
  .lp-cards, .lp-plans, .lp-facts, .lp-steps, .lp-split { grid-template-columns: minmax(0, 1fr); }
  .lp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .lp-phone-cta { display: inline-flex; } }
@media (max-width: 560px) { .lp-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .lp-strip > .lp-fig { scroll-snap-align: start; }
  .lp-uses, .lp-split-figs { grid-template-columns: minmax(0, 1fr); } .landing { padding-inline: 16px; } .lp-signin .card.signin { padding: 20px; } }

/* ---- Owner simple frame workflow (2026-09-26): Rooms / Favourites / Frame setups / Results + profile menu ---------------------------------
   Semantic tokens only (surface, ink, line, sunk, paper, accent, muted…), so the reviewed theme package can map them for dark mode. Artwork,
   room photographs, renders and exports are never filtered or recoloured. */
.tabs a .tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.topbar .credits { margin-left: auto; }
.profile { position: relative; flex: none; }
.profile-btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.profile-btn .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) var(--ease); }
.profile-btn:hover .avatar, .profile-btn[aria-expanded="true"] .avatar, .profile-btn.current .avatar { box-shadow: inset 0 0 0 1.5px var(--accent); }
.profile-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 268px; padding: 8px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.profile-menu[hidden] { display: none; }
.menu-who { display: grid; gap: 2px; padding: 8px 10px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--line); font-size: .84rem; overflow-wrap: anywhere; }
.menu-who b { font-size: .95rem; } .menu-who span { color: var(--muted); }
.profile-menu [role="menuitem"] { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer; }
.profile-menu [role="menuitem"]:hover, .profile-menu [role="menuitem"]:focus-visible { background: var(--sunk); outline: none; }
.profile-menu [role="menuitem"][aria-current="page"] { font-weight: 650; }
#menu-signout { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--ink-2); }
@media (max-width: 699px) { .tabbar { grid-template-columns: repeat(4, 1fr); } .profile-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--header) + var(--devbar) + 6px); width: auto; } }

/* Rooms: discover and heart */
.grid-rooms .room .room-sub { font-size: .84rem; color: var(--muted); }
.grid-rooms .room .fav-tag { color: var(--heart); font-weight: 550; }

/* Favourites: every favourite as a card, its looks beneath */
.rcard.off { opacity: 1; }
.rcard.off .rcard-pic { box-shadow: inset 0 0 0 1px var(--line-strong); } /* left out of this batch: the "Not in this batch" pill says so; the photo is never faded or filtered */
.rcard.off .looks, .rcard.off .rcard-actions { opacity: .6; }
.rcard-head { align-items: center; }
.rcard-select { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); min-width: 0; cursor: pointer; }
.rcard-select input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.rcard-select input:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--accent); }
.rcard-select input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rcard-select input:disabled { opacity: .5; cursor: not-allowed; }
.looks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.looks.dimmed { opacity: .55; }
.look { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.look.out .look-select { color: var(--muted); }
.look.bad .look-select { border-color: var(--bad); }
.look-select { min-height: 40px; padding: 0 34px 0 12px; font-size: .88rem; background-color: var(--surface); border-radius: var(--r); text-overflow: ellipsis; }
.look-inc input { width: 20px; height: 20px; accent-color: var(--accent); }
.look-inc { min-height: var(--tap); padding: 0 4px; }
.batch-look-line { display: flex; align-items: center; gap: 8px; }
.look-sw { position: relative; flex: none; display: inline-block; width: 30px; height: 30px; border-radius: 5px; background: var(--f, #2b2926); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12); }
.look-sw i { position: absolute; inset: 6px; border-radius: 1px; background: linear-gradient(135deg, #b9aa92, #7d8a88); box-shadow: 0 0 0 1px rgba(0,0,0,.22); }
.look-sw.wrap { background: linear-gradient(135deg, #b9aa92, #7d8a88); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 2px 2px 0 -1px rgba(0,0,0,.18); } .look-sw.wrap i { display: none; }
.look-sw.print.matted i { inset: 4px; background: var(--m); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.look-sw.print.matted i::after { content: ""; position: absolute; inset: 5px; background: linear-gradient(135deg, #b9aa92, #7d8a88); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.look-sw.print.double i::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(0,0,0,.35); }
.rcard .pic-lane { position: absolute; left: 10px; top: 10px; }
.rcard-actions { justify-content: flex-start; margin-left: -10px; }
.coll-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.coll-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.coll-list .name { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }

/* Results: a page of its own */
.results-page { gap: 22px; }
.results-head .eyebrow { margin: 0; }
.results-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.results-actions .zips { display: flex; flex-wrap: wrap; gap: 8px; }
.results-progress { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.results-progress .bar { height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.results-progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--t-slow) var(--ease-out); }
.results-progress .btn.quiet { justify-self: start; margin-left: -12px; }
.keep-note { margin: 0; padding: 12px 16px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: .9rem; }
.batch { display: grid; gap: 28px; padding-top: 6px; }
.batch + .batch { border-top: 1px solid var(--line); padding-top: 28px; }
.batch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.batch-head h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; margin-right: auto; }
.result-group-head { align-items: center; gap: 12px 16px; }
.group-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-sm); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.group-thumb.ph { display: block; }
.group-title { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.group-title h3 { font-size: 1.0625rem; font-weight: 650; overflow-wrap: anywhere; }
.results-page .results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px 22px; }
.results-page .result-card img { aspect-ratio: auto; height: auto; object-fit: contain; background: var(--sunk); }
.results-page .result-open { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.results-page .result-ph { display: grid; place-items: center; gap: 8px; align-content: center; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--sunk); color: var(--muted); font-size: .88rem; }
.results-page .result-card.failed .result-ph, .results-page .result-card.cancelled .result-ph { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 699px) { .results-page .results { grid-template-columns: minmax(0, 1fr); } .results-actions { width: 100%; } .results-actions > * { flex: 1 1 auto; } }

/* The large viewer */
html.viewer-open, html.viewer-open body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: minmax(0, 1fr) auto; background: rgba(18, 17, 15, .94); color: #f4f2ee; outline: none; }
.viewer-stage { grid-column: 2; grid-row: 1; min-height: 0; display: grid; place-items: center; padding: 24px 0 8px; overflow: hidden; }
.viewer-stage.zoomed { place-items: start; overflow: auto; cursor: grab; }
/* Fit: one DEFINITE track each way, so the image's max-width/max-height (100%) resolve against the stage and the whole image is contained
   (owner batch 2026-09-27: a portrait result rendered 1600x2137 in an 817 px viewport). The zoomed modes keep their explicit pixel size. */
.viewer-stage:not(.zoomed) { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.viewer-stage.panning { cursor: grabbing; }
.viewer-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); user-select: none; }
.viewer-bar { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); }
.viewer-cap { margin: 0; font-size: .9rem; min-width: 0; overflow-wrap: anywhere; } .viewer-cap .muted { color: rgba(244,242,238,.66); }
.viewer-tools { display: flex; align-items: center; gap: 10px; }
.viewer .zoombar .btn.quiet { color: #f4f2ee; min-height: 36px; } .viewer .zoombar .btn.quiet:hover { background: rgba(255,255,255,.12); }
.viewer .zoombar .btn.quiet[aria-pressed="true"] { background: rgba(255,255,255,.18); }
.viewer .btn:not(.quiet) { background: #f4f2ee; color: #1a1916; } .viewer .btn:not(.quiet):hover { background: #fff; }
.viewer-close, .viewer-nav { display: grid; place-items: center; border: 0; background: rgba(255,255,255,.08); color: #f4f2ee; cursor: pointer; font-size: 1.6rem; line-height: 1; border-radius: 50%; }
.viewer-close { position: absolute; right: 16px; top: 16px; z-index: 2; width: var(--tap); height: var(--tap); }
.viewer-nav { grid-row: 1; align-self: center; justify-self: center; width: var(--tap); height: var(--tap); }
.viewer-nav.prev { grid-column: 1; } .viewer-nav.next { grid-column: 3; }
.viewer-close:hover, .viewer-nav:hover { background: rgba(255,255,255,.18); }
.viewer-close:focus-visible, .viewer-nav:focus-visible, .viewer .btn:focus-visible { outline: 2px solid #f4f2ee; outline-offset: 2px; }
@media (max-width: 699px) { .viewer { grid-template-columns: 0 minmax(0, 1fr) 0; } .viewer-nav { position: absolute; bottom: 88px; } .viewer-nav.prev { left: 16px; } .viewer-nav.next { right: 16px; } .viewer-stage { padding: 56px 8px 8px; } }

/* Frame setups */
.frames-page { gap: 24px; }
.fs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.fs-list { display: grid; gap: 10px; align-content: start; position: sticky; top: calc(var(--header) + 16px); max-height: calc(100dvh - var(--header) - 32px); overflow: auto; padding-right: 4px; }
.fs-list h2 { font-size: .9375rem; font-weight: 650; }
.fs-list .fs-sub { margin-top: 12px; color: var(--ink-2); }
.fs-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fs-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.fs-item:hover { background: var(--sunk); }
.fs-item.on { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.fs-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fs-item-text { display: grid; gap: 1px; min-width: 0; } .fs-item-text b { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.fs-main { display: grid; gap: 12px; min-width: 0; }
.fs-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.fs-tools .label { flex: 1 1 200px; }
.fs-preview { display: grid; gap: 10px; }
.fs-scene { position: relative; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--sunk); box-shadow: var(--shadow-photo); }
.fs-scene img.room { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-scene .guide { position: absolute; outline: 1.5px dashed rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.fs-scene .live-pill { position: absolute; left: 12px; top: 12px; }
.fs-preview .stage-caption { position: static; max-width: none; }
.fs-controls { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fs-controls .wmi { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.fs-actions { justify-content: flex-end; }
@media (max-width: 1240px) { .fs-layout { grid-template-columns: 240px minmax(0, 1fr); } .fs-controls { grid-column: 2; } }
@media (max-width: 899px) { .fs-layout { grid-template-columns: minmax(0, 1fr); } .fs-controls { grid-column: auto; } .fs-list { position: static; max-height: none; order: 2; } .fs-main { order: 0; } .fs-controls { order: 1; } }
.menu-who .menu-plan { color: var(--ink-2); font-size: .8rem; }
.menu-who .menu-plan:empty { display: none; }
.credit-kv { margin-top: 10px; }
/* Help & feedback dialog */
.help-dialog { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(26, 25, 22, .42); }
.help-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 14px; padding: 24px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-head h2 { font-size: 1.25rem; font-weight: 650; }
.help-x { position: static; background: var(--sunk); color: var(--ink); }
.help-links { margin: 0; font-size: .9rem; color: var(--muted); }
.help-sub { font-size: 1rem; font-weight: 650; margin-top: 4px; }
.fb-form { display: grid; gap: 14px; }
.fb-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-form .label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fb-kinds, .fb-ease { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; color: var(--ink-2); }
.chip-radio input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-text { min-height: 130px; resize: vertical; font: inherit; line-height: 1.5; padding: 10px 12px; }
.fb-contact { align-items: flex-start; }
.fb-privacy { margin: 0; }
.fb-done { display: grid; gap: 8px; justify-items: start; }
.fb-form fieldset.fb-fields { gap: 14px; }
.fb-fields:disabled { opacity: .72; }
.fb-status .warn { color: var(--warn); }
.fb-status p { margin: 0; }
/* Sign-in email (Account › Profile) */
.email-block { display: grid; gap: 10px; }
.signin-card { display: grid; gap: 14px; align-content: start; }
.signin-card .google-block:not([hidden]) { padding-top: 14px; border-top: 1px solid var(--line); }
.field-hint { margin: -4px 0 4px; }
.email-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.email-row .kv { margin: 0; }
.email-block .row-actions { flex-wrap: wrap; }
/* Google sign-in (shown only when the service is configured for it) */
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.google-btn svg { flex: none; }
.signin-or { margin: 2px 0; }
.google-block .notice { margin: 0 0 6px; }
/* Appearance (profile menu): Light / Dark / System as menu radios in one row; tokens only, so both themes read */
.menu-appearance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 6px 8px; margin: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu-appearance .menu-label { grid-column: 1 / -1; margin: 0 4px 2px; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.profile-menu [role="menuitemradio"] { display: grid; place-items: center; min-height: 36px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--ink-2); font: inherit; font-size: .84rem; cursor: pointer; }
.profile-menu [role="menuitemradio"]:hover { background: var(--sunk); color: var(--ink); }
.profile-menu [role="menuitemradio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.profile-menu [role="menuitemradio"][aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 650; box-shadow: inset 0 0 0 1px var(--accent); }
.menu-appearance .menu-note { grid-column: 1 / -1; margin: 2px 4px 0; font-size: .78rem; color: var(--muted); }
/* excluded room: an overlay pill on the photo (the photo's pixels are untouched) */
.rcard-pic .pill.off-pill { left: 12px; right: auto; background: var(--glass); color: var(--ink-2); }
/* Dark adaptations of PRIMARY's own literals (chrome only, after theme 1.0.1; materials and photos keep their colours) */
:where(:root[data-theme="dark"]) .chip { box-shadow: inset 0 0 0 1px var(--wm-swatch-ring), 0 0 0 1px rgba(0, 0, 0, .35); } /* a black finish stays visible on a dark card */
:where(:root[data-theme="dark"]) .rcard-select input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%230e2118' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* dark tick on the light sage accent */

/* ---- frame-controls-1 (root 2026-09-27): Frame setups keeps its live preview in view while the frame sizes change -------------------------
   Wide (three columns): the preview column sticks under the header and the room is sized to fit the window beside the controls.
   Narrower (the controls under the preview): the preview sticks at the top at a bounded height and the controls scroll beneath it; a
   control reached by keyboard is scrolled clear of it. The room keeps its own proportions (square or portrait): its height is capped and
   the width follows through the scene's aspect-ratio (width auto, centred). Additive: nothing above is changed; other pages untouched. */
.frames-page { --fs-chrome: 180px; } /* the room and artwork pickers, the caption and the gaps around the room in the preview column */
.frames-page .fs-main { position: sticky; top: calc(var(--header) + 16px); z-index: 2; }
.frames-page .fs-scene { justify-self: center; width: auto; max-width: 100%; max-height: calc(100dvh - var(--header) - var(--fs-chrome)); }
/* a zero-height full-width first line: the scene keeps its size while a new room image is still loading (a new <img> has no size yet) */
.frames-page .fs-scene::before { content: ""; display: block; width: 100vw; height: 0; }
@media (max-width: 1240px) {
  .frames-page { --fs-stick: clamp(150px, 30dvh, 340px); }
  .frames-page .fs-main { top: var(--header); margin-inline: -12px; padding: 8px 12px 10px; gap: 8px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .frames-page .fs-tools { flex-wrap: nowrap; gap: 8px; }
  .frames-page .fs-tools .label { flex: 1 1 0; min-width: 0; }
  .frames-page .fs-scene { max-height: var(--fs-stick); }
  .frames-page .fs-preview { gap: 6px; }
  .frames-page .fs-preview .stage-caption { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 10px; border-block: 4px solid transparent; } /* the clamped lines end at the padding edge */
  .frames-page .fs-controls :is(input, select, button, summary, [tabindex]) { scroll-margin-top: calc(var(--header) + var(--fs-stick) + 140px); }
}
@media (max-width: 1240px) and (max-height: 520px) { .frames-page .fs-main { position: static; } } /* a short landscape window: no sticky preview */

/* Direct Favourites placement entry: separate buttons, never nested interactive controls. */
.rcard-preview { position: relative; min-width: 0; }
.btn.rcard-placement { position: absolute; left: 14px; bottom: 14px; z-index: 2; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(20,23,22,.9); color: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.2); backdrop-filter: blur(10px); font-weight: 600; }
.btn.rcard-placement:hover { background: #202b26; color: #fff; }
.rcard-placement:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .btn.rcard-placement { left: 10px; bottom: 10px; padding: 0 13px; } }
/* Remove an added artwork from its picture (owner 2026-09-27): a 44 px target at the image's top-right, the same visual language as the tick */
.tile-remove { position: absolute; right: 0; top: 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; }
.tile-remove span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(26, 25, 22, .55); color: #fff; font-size: 15px; line-height: 1; font-weight: 500; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tile-remove:hover:not(:disabled) span { background: var(--bad, #b3261e); }
.tile-remove:active:not(:disabled) span { transform: scale(.9); }
.tile-remove:disabled { cursor: not-allowed; opacity: .5; }
.tile-remove:focus-visible { outline: none; }
.tile-remove:focus-visible span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- profile-ux-1: product rows (type first, the type's looks, Adjust; a print's No mat / With mat), export scope, grouped profiles ---- */
.look { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.looks > .look:first-child { border-top: 0; padding-top: 0; }
.look-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.look-main { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.fam-seg, .mat-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(28, 26, 22, .06); max-width: 100%; }
.fam-opt, .mat-opt { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.fam-opt input, .mat-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fam-opt.on, .mat-opt.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(28, 26, 22, .12); }
.fam-opt:focus-within, .mat-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.fam-opt:has(input:disabled), .mat-opt:has(input:disabled) { cursor: default; opacity: .7; }
.fam-chip { font-size: .8rem; font-weight: 600; color: var(--muted); }
.mat-pic { display: inline-block; width: 18px; height: 22px; padding: 2px; border-radius: 2px; background: var(--f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.mat-pic i { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #c9b99c, #7e8b86 70%, #5d6a6b); }
.mat-pic.is-with i { box-shadow: inset 0 0 0 3px var(--m); }
.mat-note { margin-left: 6px; color: var(--muted); }
.look-adjust { min-height: 40px; }
.look-scope { margin: 0 0 2px; }
.look-top .look-inc { display: inline-flex; align-items: center; gap: 6px; }
.scope-seg { grid-auto-columns: auto; }
.scope-seg label { white-space: nowrap; font-size: .82rem; }
.fs-group { margin-top: 16px; }
.fs-group .fs-sub { display: flex; align-items: center; gap: 8px; }
.fs-tools .label { min-width: 0; } .fs-tools select { width: 100%; text-overflow: ellipsis; }
@media (max-width: 699px) { .scope-seg { grid-auto-flow: row; } .look-main { grid-template-columns: 30px minmax(0, 1fr); } .look-adjust { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .fam-opt, .mat-opt { transition: none; } }
.live-switch { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: .88rem; }
.live-switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.rcard-pic .live-making { display: inline-flex; align-items: center; gap: 6px; }
/* profile-ux-1 (owner 2026-09-27: "I cannot scroll inside the box"): on the Profiles page the editor has no fixed height, so its body never
   needed to scroll, yet it was a scroll container with overscroll-behavior: contain, which swallowed the wheel. Here the editor flows with the
   page (the wheel anywhere scrolls the page; the live preview stays pinned above), and its Save / Update bar stays at the bottom of the screen
   while the editor is in view. clip, not hidden, keeps the rounded corners without making a scroll box that would stop the bar sticking.
   The room editor on Favourites (a fixed-height panel that scrolls its own body) is unchanged. */
.frames-page .fs-controls .wmi { height: auto; overflow: clip; }
.frames-page .fs-controls .wmi-shell { height: auto; }
.frames-page .fs-controls .wmi-body { flex: none; overflow: visible; overscroll-behavior: auto; }
.frames-page .fs-controls .wmi-foot { position: sticky; bottom: 0; z-index: 1; }

/* ---- profile-ux-1 simplify (owner 2026-09-27): the rooms bar above the room cards; More options in the side panel ---- */
.cards-wrap { display: grid; gap: 14px; }
.rooms-bar { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rb-coll { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; }
.rb-label { font-weight: 650; font-size: .92rem; }
.rb-coll select { flex: 1; min-width: 0; max-width: 360px; min-height: 40px; }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.rb-btn { min-height: 40px; font-size: .875rem; }
.rooms-bar .live-switch { margin: 0 0 0 6px; font-size: .875rem; white-space: nowrap; }
.rb-note { margin: 0; }
.rb-manage summary { font-size: .875rem; }
.more-opts > summary { gap: 10px; } .more-opts .mo-title { font-weight: 650; font-size: 1.02rem; }
.more-opts > .field { margin-top: 12px; }
@media (max-width: 699px) { .rb-coll { flex-basis: 100%; } .rooms-bar .live-switch { margin-left: 0; } }
.review-link { justify-self: start; min-height: 36px; font-size: .86rem; padding: 0 8px; margin-left: -8px; }
.more-opts > summary::after { display: none; } /* an explicit arrow instead: it can't be pushed out by the summary's text */
.more-opts .mo-chev { flex: none; margin-left: auto; margin-right: 4px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast) var(--ease); }
.more-opts[open] .mo-chev { transform: rotate(-135deg) translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .more-opts .mo-chev { transition: none; } }
/* In the side panel "Make only" has three choices in a ~330 px column: stack them (as on a phone) so nothing is wider than the panel */
.more-opts { min-width: 0; } .more-opts .scope-seg { grid-auto-flow: row; } .more-opts .scope-seg label { justify-content: flex-start; padding: 0 12px; }
/* room-intake-20260928: evidence-bound discovery facets on Rooms (groups appear only when the evidence splits the rooms) */
.room-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-width: 0; }
.facet-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.facet-label { font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.cat.facet { min-height: 34px; }
.facets-clear { font-size: .84rem; }
.grid-rooms .room .new-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 650; letter-spacing: .02em; vertical-align: 1px; }
@media (max-width: 699px) { .room-facets { gap: 8px 12px; } .facet-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .facet-group::-webkit-scrollbar { display: none; } }
.howto-steps.still { animation: none; } /* room-intake-20260928: only the first entry animates */

/* Hero images + smart room facts (room activation, 2026-09-29): view switch, facts, reviewed compatibility, empty state */
.room-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.room-view { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.room-view .n { font-size: .74rem; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.room-view[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.room-view[aria-selected="true"] .n { color: rgba(255, 255, 255, .72); }
.room-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-note { margin: 0 0 12px; max-width: 68ch; color: var(--ink-2); }
.grid-rooms .room .room-facts, .grid-rooms .room .room-compat, .grid-rooms .room .room-suggest { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 3px; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.grid-rooms .room .room-compat { color: var(--ink-2); }
.grid-rooms .room .role-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 650; letter-spacing: .02em; }
.role-empty { padding: 26px 18px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--ink-2); }
.role-empty strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .room-view { transition: none; } }