:root {
  --ink: #1f2328;
  --ink-soft: #5d6066;
  --line: #e4e1db;
  --panel: #ffffff;
  --stage: #d9d4cc;
  --accent: #1f2a3a;
  --focus: #6b8afd;
  --warn: #8f5310;
  --dot: #d98b12;
  /* the panel is slim (about 420 px); on very wide windows it grows a little, so the picture never
     gets so wide that cropping it would cut off the top of the glass */
  --panel-w: min(560px, max(clamp(380px, 30vw, 420px), calc(100vw - 133.3vh)));
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }   /* the page never scrolls; the panel does */
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--stage);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* text for screen readers only (its parent must be position: relative, so it stays inside the scrolling list) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, h2:focus-visible, h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h2:focus, h3:focus { outline: none; }

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- the picture ---------- */
.stage { position: relative; overflow: hidden; background: var(--stage); min-height: 0; min-width: 0; container-type: size; }
/* The render is square. It fills the whole picture area and is cropped (never letterboxed), with the
   crop placed per camera position so the shower opening and the glass always stay in view
   (measured on all three views: the opening spans 10-69 % / 20-80 % / 22-82 % of the width, and
   17-90 % of the height). Only an extremely wide window leaves a margin at the sides. */
#scene, #fade {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 136cqh); height: 100%; display: block;
  object-fit: cover; object-position: 50% 62%;
}
#scene[data-pos="left"], #fade[data-pos="left"] { object-position: 30% 62%; }
#scene[data-pos="right"], #fade[data-pos="right"] { object-position: 55% 62%; }
.stage:fullscreen #scene, .stage:fullscreen #fade { width: 100%; object-fit: contain; }
#scene { cursor: grab; touch-action: none; }
#scene:active { cursor: grabbing; }
#fade { pointer-events: none; opacity: 0; }

.loading {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; text-align: center;
  font-size: 14px; letter-spacing: 0.04em; color: var(--ink-soft);
  background: var(--stage); transition: opacity 0.4s ease;
}
.ready .loading { opacity: 0; pointer-events: none; }

/* a small floating toolbar over the picture: Left | Front | Right, save, full screen */
.toolbar {
  position: absolute; left: 16px; top: 16px;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(255, 255, 255, 0.94); border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.toolbar button {
  width: 38px; height: 34px; border: 0; border-radius: 6px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.toolbar button:hover { background: #f0eee9; }
.toolbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.views { display: flex; align-items: center; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--line); }
.toolbar .view-btn { width: auto; padding: 0 11px; font: 600 12px/1 Inter, sans-serif; color: var(--ink-soft); }
.toolbar .view-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

.spin-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(31, 42, 58, 0.82); color: #fff; font-size: 12px; white-space: nowrap;
  pointer-events: none; transition: opacity 0.6s ease;
}
.spin-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spin-hint.gone { opacity: 0; }
.stage.busy #scene { cursor: progress; }
/* a small "Loading…" chip while new pictures arrive (phones have no cursor to show it) */
.busy-chip {
  position: absolute; right: 14px; top: 16px; padding: 6px 12px; border-radius: 999px;
  background: rgba(31, 42, 58, 0.82); color: #fff; font-size: 12px; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease 0.35s;
}
.ready .stage.busy .busy-chip { opacity: 1; }
.stage-error {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 14px;
}
.stage-error button {
  border: 0; border-radius: 7px; padding: 9px 14px; background: var(--accent); color: #fff;
  font: 600 13px/1 Inter, sans-serif; cursor: pointer;
}

/* ---------- panel ---------- */
.panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel); border-left: 1px solid var(--line);
}

.brand { padding: 18px 20px 8px; text-align: center; }
.wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px; font-weight: 600; letter-spacing: 0.22em; color: var(--accent);
}
.tagline { margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.03em; }

/* tabs: Design | Fixtures | Finishes */
.tabs { display: flex; justify-content: space-around; padding: 0 12px; border-bottom: 1px solid var(--line); }
.tab {
  min-height: 44px; padding: 10px 4px 9px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #a3a6ab; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* step chips: ONE row that scrolls sideways (never wraps); a tick once a step has been opened */
.chips {
  flex: none; display: flex; flex-wrap: nowrap; gap: 6px; padding: 12px 18px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.chips.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.chips.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 500 13px/1 Inter, sans-serif; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.chip::after { content: ''; position: absolute; inset: -5px -3px; }   /* a 44 px touch area */
.chip:hover { border-color: #c9c5be; }
.chip[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.check { width: 12px; height: 12px; flex: none; fill: none; stroke: #2a7d59; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check.todo { stroke: #cfcac2; stroke-width: 1.6; }
.chip[aria-current="step"] .check { stroke: #fff; }

.picker { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 18px; overscroll-behavior: contain; }
.picker.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.step-head { display: flex; align-items: center; gap: 2px; min-height: 30px; margin-bottom: 10px; }
.step-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rv-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.step-sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.step-sub:empty { display: none; }

/* rows inside a step: a small label, then the cards */
.rows { display: grid; gap: 16px; }
.row-head { display: flex; align-items: center; gap: 2px; min-height: 28px; margin-bottom: 4px; }
.row-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.row-warn { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--warn); }

/* the round "i" (beside a question, a row label, or on a card's picture) */
.info {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-soft);
}
.i-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.i-icon circle { fill: rgba(255, 255, 255, 0.94); }
.info:hover, .info[aria-expanded="true"] { color: var(--ink); }
.info[aria-expanded="true"] .i-icon circle { fill: var(--ink); }
.info[aria-expanded="true"] .i-icon path { stroke: #fff; }

/* option cards (never more than five a row): square picture, short name, price tag */
.cards { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 14px 12px; align-items: start; }
.picker:not([data-rows="1"]) .cards { --cols: 5; gap: 10px 7px; }
.opt { position: relative; min-width: 0; }
.opt > .info { position: absolute; top: 0; right: 0; width: 28px; height: 28px; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--ink); font: inherit;
}
.card-media {
  position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 3px; padding: 3px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-media canvas, .card-media img { display: block; width: 100%; height: 100%; }
.card-media.photo img { object-fit: contain; padding: 5%; }
.card:hover .card-media { border-color: #b9b4ac; }
.card[aria-pressed="true"] .card-media { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.card:focus-visible { outline: none; }
.card:focus-visible .card-media { outline: 2px solid var(--focus); outline-offset: 2px; }
/* no photo: a quiet line drawing */
.card-media.icon { display: grid; place-items: center; background: #f7f5f1; background-clip: content-box; }
.card-media.icon svg { width: 52%; height: 52%; fill: none; stroke: #8f8a83; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-media.drawing { display: grid; place-items: center; }
.card-media.drawing svg { width: 100%; height: 100%; }
.card-media.drawing text { font: 500 10px Inter, sans-serif; fill: var(--ink-soft); }
.card canvas.loading { background: linear-gradient(100deg, #eeebe6 40%, #f7f5f1 50%, #eeebe6 60%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.card canvas.missing { background: repeating-linear-gradient(45deg, #f1eeea 0 8px, #e7e3dd 8px 16px); }
.card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 100%; font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--ink);
}
.card[aria-pressed="true"] .card-title { font-weight: 600; }
.price { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); }
.price i { font-style: normal; color: #d2cdc5; }
/* a warning that matters (a finish that is not sold, glass for another width ...): a dot; the words are behind the "i" */
.warn-dot { position: absolute; left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px #fff; }
.tag {
  position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; border-radius: 2px;
  background: var(--accent); color: #fff; font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase;
}
/* where a drain sits, drawn over its photo */
.badge { position: absolute; right: 4px; bottom: 4px; width: 46%; padding: 3px 3px 1px; border-radius: 3px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 1px var(--line); }
.badge svg { display: block; width: 100%; height: auto; }

.stock { color: var(--ink-soft); }
.stock::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #9aa3b0; vertical-align: 1px; }
.stock.ok::before { background: #2f9e6b; }
.stock.low::before { background: #d39a1c; }
.stock.order::before { background: #b5651d; }

/* metal finish swatches (inside the thin white frame) */
.card-media.metal, .rv-row .metal { background-clip: content-box; }
.metal-chrome { background-image: linear-gradient(135deg, #fafbfc 0%, #c6ccd2 26%, #f4f6f7 46%, #98a0a8 72%, #e4e7e9 100%); }
.metal-nickel { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px), linear-gradient(135deg, #dcd8d0 0%, #b4aea4 36%, #d2cdc4 56%, #9c958a 100%); }
.metal-black { background-image: linear-gradient(135deg, #3b3c3e 0%, #1a1b1d 58%, #2b2c2e 100%); }

/* plan-view drawings: the shower from above */
.plan-walls { fill: none; stroke: #8f8a83; stroke-width: 3; stroke-linejoin: round; }
.plan-curb { fill: none; stroke: #c9c5be; stroke-width: 2; stroke-dasharray: 3 3; }
.plan-mark { fill: var(--accent); }
[aria-pressed="false"] > .plan .plan-mark { fill: #9aa3b0; }

/* a second, smaller choice under the cards (accent placement, shower head side) */
.seg { margin-top: 12px; }
.seg-label { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.seg-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer;
  font: 500 13px/1.2 Inter, sans-serif; color: var(--ink);
}
.seg-btn:hover { border-color: #c9c5be; }
.seg-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.seg-btn .plan { width: 40px; flex: none; height: auto; }

.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 12px; font-weight: 600; }
.field input, .field select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid #c9c5be; border-radius: 6px; background: #fff;
  font: 500 16px/1 Inter, sans-serif; color: var(--ink);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; font-size: 14px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235d6066' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
}
.field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picker[data-step="size"] .fields { margin-top: 0; }
.field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.field-hint { font-size: 11px; color: var(--ink-soft); }

.note { margin: 14px 0 0; padding: 9px 12px; border-radius: 6px; background: #f5f2ec; font-size: 12px; line-height: 1.5; color: #4f4b44; }
.note:empty { display: none; }

/* ---------- the "i" popover ---------- */
.info-pop {
  position: fixed; z-index: 40; width: min(300px, calc(100vw - 20px)); max-height: min(70vh, 460px); overflow-y: auto;
  padding: 10px 12px 14px 14px; border-radius: 8px; background: #fff; color: var(--ink);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 13px; line-height: 1.45;
}
.info-pop:focus { outline: none; }
.info-pop:focus-visible { outline: none; }
.info-pop.sheet {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 60vh;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
}
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pop-title { margin: 5px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pop-close {
  flex: none; width: 32px; height: 32px; margin: -2px -4px 0 0; border: 0; border-radius: 50%; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-soft);
}
.pop-close:hover { background: #f0eee9; color: var(--ink); }
.pop-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.info-pop.sheet .pop-close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
.pop-line { margin: 6px 0 0; color: #45484d; }
.pop-line.warn { padding-left: 16px; position: relative; color: var(--warn); }
.pop-line.warn::before { content: ''; position: absolute; left: 1px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.pop-line.stock { font-size: 12px; }
.layout-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.layout-head { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.layout-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.layout-row b { color: var(--ink); font-weight: 600; }
.layout-foot { margin-top: 6px; font-size: 11px; }

/* the bar at the bottom: NEXT › what comes next ... REVIEW ITEMS; the main button on the review page */
.nextbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 0 24px env(safe-area-inset-bottom, 0px);
  border: 0; background: var(--accent); color: #fff; cursor: pointer; text-align: right;
  font: 600 14px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
}
.nextbar:hover { background: #2b3a52; }
.nextbar:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }
.nextbar:disabled { opacity: 0.75; cursor: progress; }
.nextbar.solo { justify-content: center; text-align: center; }
.next-count { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; opacity: 0.55; }
.next-main { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.next-word { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; letter-spacing: 0.1em; }
.next-what { font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; opacity: 0.8; }
.chev { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- review ---------- */
.review { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px 22px; overscroll-behavior: contain; }
.rv-back { min-height: 40px; margin-left: -2px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 600 13px/1 Inter, sans-serif; color: var(--accent); }
.rv-back::before { content: '‹ '; font-size: 16px; }
.rv-back:hover { text-decoration: underline; }
.rv-shot { display: none; }
.rv-group { margin-top: 18px; }
.rv-group h3, .rv-form h3 {
  margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
/* picture | what it is + one status line | how much | Change */
.rv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f1eee9; }
.rv-row .card-media { width: 44px; margin: 0; padding: 2px; }
.rv-kind { font-size: 11px; line-height: 1.3; color: var(--ink-soft); }
.rv-name { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.rv-status { margin-top: 2px; font-size: 11.5px; line-height: 1.35; }
.rv-warn { color: var(--warn); }
.rv-warn::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--dot); vertical-align: 0; }
.rv-qty { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 600; }
.rv-qty:empty { display: none; }
.rv-change { min-width: 54px; }
button.rv-change {
  min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 Inter, sans-serif; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
/* what Well Decor buys on its own: folded away, one line with a count */
.rv-auto > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 44px; padding: 12px 0 9px;
  border-bottom: 1px solid var(--line); cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.rv-auto > summary::-webkit-details-marker { display: none; }
.rv-auto > summary::before { content: '›'; display: inline-block; width: 12px; font-size: 15px; transition: transform 0.15s ease; }
.rv-auto[open] > summary::before { transform: rotate(90deg); }
.rv-auto-title { flex: 1; }
.rv-auto-count { letter-spacing: 0.02em; text-transform: none; font-weight: 500; }
.rv-auto-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.rv-auto .rv-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.rv-auto .rv-row .card-media { width: 36px; }
.rv-auto span.rv-change { display: none; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.rv-chips .chip { padding: 0 13px 0 11px; }
.rv-chips .chip::before { content: '+'; margin-right: 1px; color: var(--ink-soft); }
.rv-form { display: grid; gap: 12px; margin-top: 24px; }
.rv-fine { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }

/* progress, the finished link, or what went wrong: sits right above the button */
.review-status { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: #f5f2ec; font-size: 13px; line-height: 1.45; }
.review-status p { margin: 0; }
.big-link {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border: 0; border-radius: 6px;
  background: #1c6a49; color: #fff; text-decoration: none; cursor: pointer; font: 600 16px/1.2 Inter, sans-serif;
}
.big-link::after { content: '↗'; margin-left: 8px; }
.big-link:hover { background: #17573c; }
.big-link.quiet { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.big-link.quiet::after { content: none; }
.status-title { font-size: 15px; font-weight: 600; }
.status-links { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.copy-link { min-width: 112px; font-size: 14px; }
.sheet-url { margin: 0; overflow-wrap: anywhere; }
.progress { height: 8px; border-radius: 4px; background: #e2ddd5; overflow: hidden; }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #1c6a49; transition: width 0.2s linear; }

/* ---------- phones and tablets ---------- */
@media (max-width: 820px), (max-height: 520px) {
  html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
  button, a { touch-action: manipulation; }
  .toolbar button { width: 44px; height: 44px; }
  .toolbar .view-btn { width: auto; min-width: 50px; padding: 0 11px; font-size: 13px; }
  .spin-hint { bottom: 12px; font-size: 11px; padding: 6px 12px; }
  /* name and tabs share one row */
  .panel-head { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); }
  .brand { display: flex; align-items: center; padding: 0; text-align: left; }
  .wordmark { font-size: 14px; letter-spacing: 0.16em; white-space: nowrap; }
  .tagline { display: none; }
  .tabs { gap: 14px; padding: 0; border-bottom: 0; }
  .tab { padding: 0 2px; font-size: 11px; letter-spacing: 0.1em; }
  .chips { padding: 8px 14px 4px; }
  .chip { height: 32px; }
  .picker { padding: 4px 14px 10px; -webkit-overflow-scrolling: touch; }
  .step-head { min-height: 28px; margin-bottom: 4px; }
  .step-head h2 { font-size: 15.5px; }
  .rows { gap: 12px; }
  .row-head { min-height: 26px; margin-bottom: 2px; }
  /* every row is one line of up to five cards: all the options show, nothing hides off the side */
  .cards, .picker:not([data-rows="1"]) .cards { --cols: 5; grid-template-columns: repeat(5, minmax(0, 96px)); gap: 8px 6px; }
  .card-title { font-size: 11px; }
  .card:hover .card-media { border-color: var(--line); }
  .card[aria-pressed="true"]:hover .card-media { border-color: var(--ink); }
  .seg { margin-top: 10px; }
  .note { margin-top: 10px; padding: 8px 10px; }
  .nextbar { min-height: calc(60px + env(safe-area-inset-bottom, 0px)); padding-left: 18px; padding-right: 18px; }
  .next-word { font-size: 16px; }
  .next-main { gap: 4px; }
  .review { padding: 4px 14px 18px; -webkit-overflow-scrolling: touch; }
  .rv-back { min-height: 44px; }
  .review-status { padding: 10px 14px; }
}
/* held upright: the picture on top, as big as it can be while the chips, one row of cards and
   the bar still fit below it (dvh = the height actually visible between the browser's bars) */
@media (max-width: 820px) and (orientation: portrait) {
  .app { --stage-h: clamp(220px, calc(100vh - 336px), 135vw); grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--stage-h) minmax(0, 1fr); }
  .app { --stage-h: clamp(220px, calc(100dvh - 336px - env(safe-area-inset-bottom, 0px)), 135vw); }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  .toolbar { left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); padding: 2px; }
  .busy-chip { top: auto; bottom: 12px; right: 12px; }
  /* the review is a page of its own: the list needs the whole screen */
  .app[data-mode="review"] { grid-template-rows: minmax(0, 1fr); }
  .app[data-mode="review"] .stage { display: none; }
  .app[data-mode="review"] .panel { border-top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .rv-shot { display: block; width: min(100%, 300px); aspect-ratio: 1; margin: 12px auto 0; border-radius: 4px; object-fit: cover; }
  .rv-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .rv-row .rv-qty { grid-column: 3; grid-row: 1; align-self: start; padding-top: 2px; }
  .rv-row .rv-change { grid-column: 3; grid-row: 2; justify-self: end; }
  .rv-row .card-media, .rv-row .rv-main { grid-row: span 2; align-self: start; }
  button.rv-change { min-height: 36px; }
  span.rv-change { display: none; }
}
/* tablets held upright: bigger cards, so a little more room for the panel */
@media (min-width: 521px) and (max-width: 820px) and (orientation: portrait) {
  .app { --stage-h: clamp(260px, calc(100dvh - 396px - env(safe-area-inset-bottom, 0px)), 100vw); }
  .cards, .picker:not([data-rows="1"]) .cards { gap: 10px 14px; }
  .card-title { font-size: 12px; }
  .wordmark { font-size: 17px; }
  .tabs { gap: 26px; }
  .tab { font-size: 12.5px; }
  .chips, .picker, .panel-head { padding-left: 22px; padding-right: 22px; }
}
/* held sideways, or a small wide window: picture and panel side by side, the panel slimmer */
@media (max-height: 520px) and (orientation: landscape), (max-width: 820px) and (orientation: landscape) {
  :root { --panel-w: clamp(300px, calc(100vw - 110vh), 400px); }
  .panel { padding-right: env(safe-area-inset-right, 0px); }
  .wordmark { font-size: 12px; letter-spacing: 0.12em; }
  .tabs { gap: 10px; }
  .nextbar { min-height: calc(50px + env(safe-area-inset-bottom, 0px)); }
  .next-what { display: none; }
  .toolbar { top: 8px; left: 8px; }
  .rv-shot { display: none; }
}
/* the narrowest sideways phones: the three tabs need the whole row */
@media (max-width: 720px) and (orientation: landscape) {
  .brand { display: none; }
  .tabs { flex: 1; justify-content: space-around; }
}
/* phones: the three size lists stacked, label beside each, so "96 in. (8 ft)" is never cut short */
@media (max-width: 520px) {
  .picker[data-step="size"] .fields { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .picker[data-step="size"] .field { flex-direction: row; align-items: center; gap: 10px; }
  .picker[data-step="size"] .field-label { flex: none; width: 58px; }
}
/* with a mouse, a card's "i" shows on the chosen card, on hover and on keyboard focus (touch screens always show it) */
@media (hover: hover) and (pointer: fine) {
  .opt > .info { opacity: 0; transition: opacity 0.12s ease; }
  .opt:hover > .info, .opt:focus-within > .info, .opt > .info[aria-expanded="true"], .opt:has(.card[aria-pressed="true"]) > .info { opacity: 1; }
}
/* the narrowest phones: name and three tabs still fit one row */
@media (max-width: 400px) {
  .panel-head { padding: 0 10px 0 12px; gap: 6px; }
  .wordmark { font-size: 13px; letter-spacing: 0.12em; }
  .tabs { gap: 10px; }
  .tab { letter-spacing: 0.06em; }
}

/* ---------- templates: three complete designs, one per line (three across on phones) ---------- */
.picker[data-step="templates"] .cards { --cols: 1; gap: 10px; }
.picker[data-step="templates"] .card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 3px;
  align-items: start; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 3px;
}
.picker[data-step="templates"] .card[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.picker[data-step="templates"] .card:hover { border-color: #b9b4ac; }
.picker[data-step="templates"] .card-media { grid-row: 1 / 4; margin: 0; padding: 0; border: 0; box-shadow: none !important; }
.card-media.template img { object-fit: cover; padding: 0; }
.card-media.template { background: #ece9e3; }
.picker[data-step="templates"] .card-title { margin-top: 6px; font-size: 15px; font-weight: 600; -webkit-line-clamp: 1; }
.card-line { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.picker[data-step="templates"] .price { font-size: 12px; }
.picker[data-step="templates"] .opt > .info { top: 6px; right: 6px; opacity: 1; }
.scratch {
  justify-self: start; min-height: 44px; margin-top: 4px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 Inter, sans-serif; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 820px) and (orientation: portrait) {
  .picker[data-step="templates"] .cards { --cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .picker[data-step="templates"] .card { display: flex; padding: 0; border: 0; text-align: center; }
  .picker[data-step="templates"] .card[aria-pressed="true"] { box-shadow: none; }
  .picker[data-step="templates"] .card-media { padding: 3px; border: 1px solid var(--line); }
  .picker[data-step="templates"] .card[aria-pressed="true"] .card-media { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) !important; }
  .picker[data-step="templates"] .card-title { margin-top: 0; font-size: 13px; }
  .picker[data-step="templates"] .card-line { display: none; }
  .picker[data-step="templates"] .opt > .info { top: 0; right: 0; }
  .scratch { margin-top: 0; }
}

/* ---------- the checklist on the review page ---------- */
.rv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.rv-steps li { position: relative; display: flex; align-items: center; gap: 7px; min-height: 34px; font-size: 13px; }
.rv-steps li.todo { color: #b3261e; font-weight: 600; }
.todo-dot { width: 10px; height: 10px; flex: none; margin: 0 1px; border-radius: 50%; border: 2px solid #b3261e; }
.rv-go {
  margin-left: auto; min-width: 44px; min-height: 32px; padding: 0 10px; border: 1px solid #b3261e; border-radius: 999px; background: #fff;
  font: 600 12px/1 Inter, sans-serif; color: #b3261e; cursor: pointer;
}
.rv-check:not(.all) h3 { color: #b3261e; }
.rv-check.all h3 { color: #2a7d59; }
.review-status[data-kind="todo"] { background: #fbeeec; color: #8a1f17; }
.nextbar:disabled { cursor: not-allowed; }
.app[data-mode="review"] .nextbar:disabled { opacity: 0.45; }
.next-count { white-space: nowrap; }

/* phones held upright: four tabs need the whole row, so the name sits on the picture's corner */
@media (max-width: 520px) and (orientation: portrait) {
  .app { position: relative; }
  .app:not([data-mode="review"]) .brand {
    position: absolute; left: 10px; top: calc(var(--stage-h) - 34px); z-index: 2; padding: 5px 8px 4px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.88); pointer-events: none;
  }
  .app:not([data-mode="review"]) .wordmark { font-size: 12px; letter-spacing: 0.16em; }
  .app:not([data-mode="review"]) .panel-head { padding: 0 6px; }
  .app:not([data-mode="review"]) .tabs { flex: 1; justify-content: space-around; gap: 4px; }
  .tab { font-size: 11px; letter-spacing: 0.05em; padding: 0 4px; }
  .spin-hint { bottom: 46px; }
}
@media (max-width: 520px) and (orientation: portrait) {
  .app[data-mode="review"] .tabs { display: none; }      /* the review has its own way back: Keep designing */
  .app[data-mode="review"] .panel-head { min-height: 44px; }
}