/* Interior / My Home — gap checklist screens.
   Reuses the tokens defined in artist_portal/css/monart.css. */

.page-interior .int-main { padding-top: 60px; }
.int-hero, .int-section { padding: 4rem 4rem 5rem; }
.int-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.04; margin-bottom: 1.25rem;
}
.int-title em { font-style: italic; color: #6A5A48; }
.int-title-sm { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: .75rem; }
.int-lead { font-size: .9rem; line-height: 2; color: var(--muted); max-width: 560px; margin-bottom: 2.5rem; }
.int-note { font-size: .68rem; color: var(--subtle); line-height: 1.7; margin-top: .6rem; }

/* Upload */
.int-upload-form { max-width: 520px; }
.int-input {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--border);
  background: var(--bg); font-family: 'Jost', sans-serif; font-size: .85rem; color: var(--text);
}
.int-submit { margin-top: 1.25rem; }
.int-submit:disabled { opacity: .4; cursor: not-allowed; }

/* The chosen photograph, shown before anything has been uploaded. Choosing a
   photo used to end the screen; the room, the direction and the button that
   builds it now all sit here, so the decision is made in one place. */
.int-preview { margin: 1.5rem 0 0; }
.int-preview img {
  width: 100%; display: block; border: 1px solid var(--border);
}
.int-preview-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: .55rem;
  font-size: .68rem; color: var(--subtle);
}
.int-preview-change {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.int-preview-change:hover { color: var(--gold); border-color: var(--gold); }

/* What the room is for, then what the visitor calls it. The type carries the
   weight and takes its natural width; the name takes the rest. */
.int-room-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.int-room-row .stage-style { margin-right: 0; flex: 0 0 auto; min-width: 11rem; }
.int-room-row .int-input { flex: 1 1 12rem; width: auto; }

/* Style and the button that acts on it, on one line — one decision. */
.int-launch { margin-top: 1.5rem; }
.int-launch-row {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem;
  margin-top: .5rem;
}
/* Never allowed to shrink to its own padding. Flex items give up their width
   before their neighbours do, and with the arrow drawn as a background there
   is nothing left to see: the control becomes an unlabelled box that opens a
   menu, which is not a thing anyone clicks. */
.int-launch-row .stage-style { margin-right: 0; flex: 0 0 auto; min-width: 11rem; }
@media (max-width: 620px) {
  .int-launch-row { flex-direction: column; }
  .int-launch-row .stage-style, .int-launch-row .btn-primary { width: 100%; }
}

/* Room header */
.int-room-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; margin-bottom: 4rem; align-items: start; }
.int-room-photo img { width: 100%; display: block; border: 1px solid var(--border); }
.int-profile { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin: 1.25rem 0 0; }
.int-profile dt { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.int-profile dd { font-size: .8rem; color: var(--text); }
.int-budget { margin-top: 2rem; }
.int-progress {
  margin-top: 1.5rem; font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; color: var(--gold);
}

/* Gap card */
.int-gap { border-top: 1px solid var(--border); padding: 2.5rem 0; }
.int-gap-closed { opacity: .45; }
.int-gap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.int-gap-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.5rem; margin: .6rem 0 .2rem; }
.int-gap-loc { font-size: .78rem; color: var(--muted); }

/* Options */
.int-options { display: flex; flex-direction: column; gap: 2rem; }
.int-option { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.int-option-visual { position: relative; background: var(--surface); border: 1px solid var(--border); padding: 1rem; }
.int-option-img { width: 100%; display: block; }
.int-visual-btn {
  width: 100%; padding: 2.5rem 1rem; background: none; border: 1px dashed var(--border2);
  font-family: 'Jost', sans-serif; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text); cursor: pointer; transition: all .2s;
}
.int-visual-btn:hover { border-color: var(--gold); color: var(--gold); }
.int-visual-btn:disabled { opacity: .5; cursor: wait; }
.int-visual-note { font-size: .62rem; color: var(--subtle); line-height: 1.6; margin-top: .6rem; }
.int-option-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.int-option-label { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.15rem; }
.int-difference { font-size: .76rem; font-style: italic; color: var(--muted); margin-bottom: .9rem; }
.int-spec { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.25rem; margin-bottom: 1.25rem; }
.int-spec dt { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.int-spec dd { font-size: .8rem; color: var(--text); }

/* "Why it fits" hover card */
.int-why { position: relative; display: inline-block; margin-bottom: 1.25rem; }
.int-why-trigger {
  background: none; border: none; border-bottom: 1px solid var(--border2);
  padding: 0 0 2px; font-family: 'Jost', sans-serif; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text); cursor: help;
}
.int-why-trigger:hover { color: var(--gold); border-color: var(--gold); }
.int-why-card {
  position: absolute; bottom: 100%; left: 0; z-index: 20; width: min(340px, 78vw);
  margin-bottom: .6rem; padding: 1rem 1.15rem; background: var(--bg);
  border: 1px solid var(--border2); box-shadow: 0 8px 28px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s, visibility .18s, transform .18s;
}
.int-why:hover .int-why-card,
.int-why:focus-within .int-why-card { opacity: 1; visibility: visible; transform: translateY(0); }
.int-why-card ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.int-why-card li { font-size: .78rem; line-height: 1.6; color: var(--text); display: flex; gap: .5rem; }
.int-why-card li::before { flex-shrink: 0; }

/* Merchants */
.int-merchants { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
/* display:flex above beats the UA's [hidden] rule: a card with nothing to link
   showed "Find one like this" over nothing, on every piece. */
.int-merchants[hidden] { display: none; }
.int-merchants-label { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* The figure is what this kind of object costs, not the price of anything on
   sale. Set quietly and captioned, so it cannot be read as the price of the
   shop standing next to it. */
.price-note {
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-right: .4rem;
}
.int-price { display: inline-flex; align-items: baseline; }
.int-merchant { font-size: .76rem; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; }
.int-merchant:hover { border-color: var(--gold); }

.int-another { max-width: 320px; margin-top: 2rem; }
.int-add-room { display: inline-block; margin-top: 3rem; }
.int-empty { padding: 3rem 0; border-top: 1px solid var(--border); }

/* Room grid (overview) */
.int-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 2.5rem; }
.int-room-card { background: var(--surface); text-decoration: none; color: inherit; display: block; }
.int-room-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.int-room-card-body { padding: 1rem 1.15rem 1.35rem; }

@media (max-width: 900px) {
  .int-hero, .int-section { padding: 2.5rem 1.2rem 3rem; }
  .int-room-head, .int-option { grid-template-columns: 1fr; gap: 1.5rem; }
  .int-room-grid { grid-template-columns: 1fr; }
  .int-why-card { left: auto; right: 0; }
}

.int-error {
  padding: .8rem 1rem; margin-bottom: 1.5rem; max-width: 520px;
  border: 1px solid rgba(154,110,46,.35); background: var(--gold-dim);
  font-size: .8rem; line-height: 1.6; color: var(--text);
}

/* ============================================================
   Staged room — the picture is the interface.
   The visitor's own photo with the recommended objects drawn in,
   a dot on each one, and a card of specification + merchants on
   hover (desktop) or tap (mobile).
   ============================================================ */

.stage { padding: 2.5rem 4rem 5rem; }
.stage-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.stage-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* overflow: hidden crops the mild scale the wait/reveal states put on the
   photo (see #stageImg below) — the picture never grows past this box, so
   nothing else positioned against it (the hotspot dots, the spec card,
   deliberately "kept inside the canvas") has to account for it. */
.stage-canvas { position: relative; overflow: hidden; line-height: 0; background: var(--surface); border: 1px solid var(--border); }
.stage-canvas img { width: 100%; display: block; }

/* Hotspot dot */
/* display:grid below would otherwise beat the UA's [hidden] rule, leaving
   dots for elements that have not been staged yet visible on the photo. */
.hotspot[hidden] { display: none; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.hotspot-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45);
  position: relative; transition: transform .18s ease;
}
.hotspot-dot::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.hotspot:hover .hotspot-dot, .hotspot:focus-visible .hotspot-dot { transform: scale(1.25); }
/* One pulse as the object lands, so the eye goes to what just appeared. */
.hotspot-new .hotspot-dot { animation: spot-land .9s ease-out 2; }
@keyframes spot-land {
  0% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(198,167,110,.55); }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 22px rgba(198,167,110,0); }
}

/* Progress while the room is being built, element by element */
.stage-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  padding: 3rem 1.25rem 1rem; line-height: 1.5;
}
.stage-progress-text {
  margin-top: .6rem; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
}
.stage-note { font-size: .68rem; color: var(--subtle); line-height: 1.7; margin-top: .8rem; max-width: 620px; }
.stage-go:disabled { opacity: .5; cursor: wait; }

/* Compact hotspot card. The dot above is intentionally untouched. */
.spot-card {
  position: absolute; z-index: 5; width: min(312px, calc(100vw - 2rem));
  padding: 1.05rem; background: rgba(250,250,248,.98);
  border: 1px solid var(--border2); box-shadow: 0 18px 55px rgba(26,24,20,.2);
  line-height: 1.45; backdrop-filter: blur(12px);
}
.spot-card[hidden] { display: none; }
.spot-close {
  position: absolute; top: .55rem; right: .55rem; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid transparent;
  background: none; color: var(--muted); font: 300 1.15rem/1 'Jost', sans-serif;
  cursor: pointer; transition: color .18s, border-color .18s;
}
.spot-close:hover, .spot-close:focus-visible { color: var(--text); border-color: var(--border); outline: none; }
.spot-cat { padding-right: 2rem; font-size: .52rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.spot-label { margin: .35rem 2rem .3rem 0; font-family: 'Cormorant Garamond', serif; font-size: 1.38rem; font-weight: 400; line-height: 1.08; }
.spot-product { margin: 0 0 .7rem; color: #5A5248; font-size: .7rem; line-height: 1.4; }
.spot-product[hidden] { display: none; }
.spot-merchant { display: block; margin-top: .1rem; color: var(--muted); font-size: .6rem; letter-spacing: .04em; }
/* A real, buyable product whose own photograph never reached the render — the
   same rust the "does not fit" note uses, for the same reason: worth a
   glance before trusting the picture for this one piece. */
.spot-fidelity { margin: -.4rem 0 .75rem; color: #A2543E; font-size: .64rem; line-height: 1.4; }
.spot-fidelity[hidden] { display: none; }
.spot-design { margin: -.4rem 0 .75rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.spot-design[hidden] { display: none; }
/* The figure this card is really for: a verified product's own price — never
   a market estimate, which is not a product. Sized to sit beside the button it
   justifies, not tucked away in a corner. */
.spot-price { margin: 0 0 .85rem; display: flex; align-items: baseline; gap: .45rem; }
.spot-price[hidden] { display: none; }
.spot-price .wprice { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; line-height: 1; color: var(--text); }
.spot-price .price-note { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* The one action the card is built around: go buy the actual piece. Same
   gold button as the rest of the page, full width for the narrow card. */
.spot-card .spot-buy { display: block; width: 100%; text-align: center; padding: .74rem .9rem; font-size: .64rem; margin: 0 0 .9rem; }
.spot-card .spot-buy[hidden] { display: none; }
.spot-card .int-spec {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0;
  margin: 0 0 .75rem; padding: .7rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.spot-spec-item { min-width: 0; padding: 0 .55rem; border-left: 1px solid var(--border); }
.spot-spec-item:first-child { padding-left: 0; border-left: 0; }
.spot-spec-item:last-child { padding-right: 0; }
.spot-card .int-spec dt { margin-bottom: .22rem; font-size: .47rem; letter-spacing: .13em; }
.spot-card .int-spec dd { overflow: hidden; color: #5A5248; font-size: .67rem; line-height: 1.35; text-overflow: ellipsis; }
.spot-card .int-fit { margin: -.15rem 0 .65rem; font-size: .66rem; line-height: 1.5; }
.spot-card .int-merchants { gap: .3rem .75rem; margin: .1rem 0 .75rem; }
.spot-card .int-merchants-label { flex: 1 0 100%; font-size: .49rem; letter-spacing: .15em; }
.spot-card .int-merchant { font-size: .68rem; line-height: 1.45; }
.spot-refine { margin: .2rem 0 .75rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.spot-refine summary {
  padding: .62rem 0; color: var(--muted); font-family: 'Jost', sans-serif;
  font-size: .53rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.spot-refine summary::-webkit-details-marker { display: none; }
.spot-refine summary::after { content: '+'; float: right; color: var(--gold); font-size: .8rem; line-height: .8; }
.spot-refine[open] summary::after { content: '−'; }
.spot-card .spot-note-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.spot-card .spot-note { margin: 0 0 .7rem; padding: .58rem .65rem; background: var(--surface); font-size: .73rem; }
.spot-swap:disabled { opacity: .5; cursor: wait; }

/* The list card's own copy of the hover card's actions (renderListActions,
   #list's click handler): same buttons, same restage call — laid out for the
   list's own, much wider column instead of the hover card's narrow one. */
.int-gap-actions { margin-top: 1.25rem; }
.int-gap-actions .spot-actions { flex-direction: row; flex-wrap: wrap; }
.int-gap-actions .spot-actions .spot-swap { width: auto; flex: 1 1 auto; min-width: 9rem; }
.int-gap-actions .spot-note-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.int-gap-actions .spot-remove { margin-top: .5rem; padding: .35rem 0 0; border: 0; color: #8A5B50; font-size: .51rem; }
.int-gap-actions .spot-remove:hover { color: #74382D; }

/* One paragraph, not a bulleted case. The ticks and the warning triangle went
   with the list: a card arguing three points for a cushion reads as a machine
   justifying itself rather than as somebody telling you why. */
.int-reason {
  font-size: .76rem; line-height: 1.7; color: var(--muted);
  margin-bottom: .45rem;
}

/* Whether the thing goes in the room. Only ever shown once the room has been
   measured, so it is a fact rather than an opinion. */
.int-fit {
  font-size: .72rem; line-height: 1.6; color: var(--muted);
  margin-bottom: .5rem;
}
.int-fit-no { color: #A2543E; }

/* The measurement, under the picture. Reads as a caption rather than a form:
   most visitors will never touch it, and the ones who do are correcting one
   number. */
.room-size {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.room-size-label {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--subtle); flex: 1 1 100%;
}
.room-size-field {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.room-size-field input {
  width: 5.5rem; padding: .35rem .5rem;
  border: 1px solid var(--border); background: var(--bg);
  font-family: 'Jost', sans-serif; font-size: .8rem; color: var(--text);
  letter-spacing: normal; text-transform: none;
}
.room-size-field input:focus { outline: none; border-color: var(--gold); }
.room-size-unit { font-size: .68rem; text-transform: none; letter-spacing: normal; }
.room-size-save { width: auto; padding: .4rem 1.2rem; }
.room-size-said { font-size: .68rem; color: var(--gold); }

/* What the visitor wants, in their own words. Sits above the verbs because it
   qualifies whichever of them is pressed. */
.spot-note-label {
  display: block; margin-top: 1.1rem; margin-bottom: .35rem;
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.spot-note {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--border); background: var(--bg);
  font-family: 'Jost', sans-serif; font-size: .78rem; color: var(--text);
}
.spot-note::placeholder { color: var(--subtle); }
.spot-note:focus { outline: none; border-color: var(--gold); }
.spot-note:disabled { opacity: .5; }

/* Secondary list, folded away under the picture */
.stage-list-toggle {
  margin-top: 2rem; background: none; border: 0; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border);
  padding-bottom: .3rem;
}
.stage-list-toggle:hover { color: var(--gold); border-color: var(--gold); }
.stage-list { margin-top: 1rem; }
.stage-list .int-option-body { max-width: 620px; }
.stage-list .int-merchants { margin-top: .8rem; }
/* The budget question, between the photograph and anything chosen or drawn */
.budget-step { max-width: 620px; margin-top: 1.5rem; padding: 1.75rem 0 2rem; border-top: 1px solid var(--border); }
/* The custom-budget form sets its own display, which beats the UA's [hidden]
   rule: it stood open before anyone had asked for it. Nothing else in this
   section is ever hidden any more — "Looks good" goes disabled instead of
   away, and the figure block always shows a title, a line and a caption,
   whichever of the three is still waiting on the market. */
.budget-step [hidden] { display: none; }
.budget-figure { margin-top: .9rem; }
/* Known as soon as the plan is, so it never waits on the market: "Budget for
   the 4 pieces to replace" while the price is still coming, "Estimated
   budget for these 4 items" once it has. */
.budget-title {
  margin: 0 0 .3rem; font-size: .64rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* The one line this block is actually waiting on. "Estimating…" sits here at
   the same size and weight the eventual figure will, so swapping one for the
   other moves nothing else on the page. */
.budget-total {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.6rem; line-height: 1.3; margin: 0;
}
.budget-scope { border: 0; padding: 0; margin: .75rem 0 1.25rem; display: grid; gap: .6rem; }
.budget-scope-q {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.35rem; line-height: 1.3; margin-bottom: .6rem; padding: 0;
}
.budget-scope-option {
  display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; row-gap: .2rem;
  align-items: baseline; padding: .8rem .95rem; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer;
}
.budget-scope-option:has(input:checked) { border-color: var(--text); }
.budget-scope-option input { grid-row: span 2; margin: 0; accent-color: var(--text); }
.budget-scope-title { font-size: .9rem; color: var(--text); }
.budget-scope-body { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.budget-covers { font-size: .78rem; color: var(--muted); line-height: 1.7; margin-top: .3rem; }
.budget-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.budget-custom { margin-top: 1.25rem; display: grid; gap: .7rem; justify-items: start; }
.budget-amount { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); }
.budget-amount input {
  width: 8rem; padding: .5rem .6rem; border: 1px solid var(--border); background: var(--bg);
  font-family: 'Jost', sans-serif; font-size: .9rem; color: var(--text);
}
.budget-mode { font-size: .78rem; color: var(--text); display: flex; align-items: center; gap: .45rem; }
.int-product { font-size: .78rem; line-height: 1.6; margin-top: .5rem; }
.int-product-none { color: var(--muted); }
.room-estimate { border-top: 1px solid var(--border); padding: 2rem 0 2.5rem; max-width: 620px; }
.room-estimate-total {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.5rem; line-height: 1.3;
}
.room-estimate-covers { font-size: .78rem; color: var(--muted); line-height: 1.7; margin-top: .3rem; }

@media (max-width: 900px) {
  .stage { padding: 1.5rem 1.25rem 4rem; }
  .stage-head { align-items: flex-start; }
  .stage-head-actions, .stage-go { width: 100%; }

  /* No hover on touch: the card is a sheet from the bottom of the screen,
     so the picture above it stays visible while it is open. */
  .spot-card {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-height: 78vh; overflow-y: auto;
    border: 0; border-top: 1px solid var(--border2);
    padding: 1.2rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 55px rgba(26,24,20,.18);
    animation: sheet-up .22s ease-out;
  }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  .hotspot { width: 44px; height: 44px; }   /* thumb-sized tap target */
}

/* Below the breakpoint the picture has to lead: the heading and the CTA
   collapse onto one compact row so the room is visible without scrolling. */
@media (max-width: 900px) {
  .page-interior .int-main { padding-top: 52px; }
  .stage { padding: .9rem 1rem 3rem; }
  .stage-head {
    flex-wrap: nowrap; align-items: center; gap: 1rem; margin-bottom: .9rem;
  }
  .stage-head .eyebrow { display: none; }
  .stage-title { font-size: 1.45rem; }
  .stage-head-actions, .stage-go { width: auto; }
  .stage-go { padding: .6rem 1rem; font-size: .58rem; white-space: nowrap; }
}
.stage-progress-error .stage-progress-text { text-transform: none; letter-spacing: .04em; font-size: .78rem; }

.stage-empty { margin-top: 1.75rem; max-width: 520px; }
.stage-empty-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; margin-bottom: .6rem; }
.stage-empty-body { font-size: .82rem; line-height: 1.8; color: var(--muted); margin-bottom: 1.5rem; }

/* monart.css scopes .btn-primary to .page-home, so every primary button on
   these screens — "Analyse this room", "Renovate this room" — fell through to
   the browser's default grey chrome, in the middle of a site built out of
   gold, uppercase and wide letter-spacing. Same declarations as the home
   page's, so the two cannot drift apart in tone. */
.page-interior .btn-primary {
  display: inline-block; padding: .78rem 2.4rem;
  background: var(--gold); color: #FAF8F4; border: none;
  font-family: 'Jost', sans-serif; font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: opacity .2s;
}
.page-interior .btn-primary:hover { opacity: .85; }
.page-interior .btn-primary:disabled { opacity: .4; cursor: not-allowed; }

/* monart.css scopes .btn-ghost to .page-home, so on these pages it rendered
   as a default browser link. */
.page-interior .btn-ghost {
  display: inline-block; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: #5A5248; text-decoration: none;
  border-bottom: 1px solid rgba(90, 82, 72, .35); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.page-interior .btn-ghost:hover { color: var(--text); border-color: var(--text); }

/* The style the room is rendered in. Sits beside the button because the two
   are one decision: what to build, and in which direction. */
.stage-style {
  font-family: 'Jost', sans-serif; font-size: .64rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  /* Matches the primary button's vertical rhythm so the two sit on one line
     as a single control rather than as a form field beside a call to action. */
  padding: .78rem 2.2rem .78rem .9rem; margin-right: .5rem;
  border: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text); cursor: pointer;
  /* The native arrow is the one part a browser will not let us restyle, and
     it is what made this read as a system widget dropped into the page. */
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .2s, color .2s;
}
.stage-style:hover { border-color: var(--border2); }
.stage-style:disabled { opacity: .4; cursor: not-allowed; }
/* A whole-room render is one wait, not a sequence, so nothing here can report
   a position: no bar claims a fraction it doesn't have, and nothing manufactures
   a fake sense of progress. Instead the photo itself carries the wait — softly
   blurred and very slightly enlarged, on #stageImg directly, so the image area
   never turns into a placeholder and the box never changes size. The scale is
   what keeps the blur from pulling in an edge; .stage-canvas's overflow:hidden
   crops it back to the box. */
#canvas:has(> #progress:not([hidden]):not(.stage-progress-error)) img#stageImg {
  filter: blur(20px);
  transform: scale(1.02);
  transition: filter .5s ease, transform .5s ease;
}
/* The reveal: the final render arrives already blurred (js decodes it off-
   screen first, so this is never a half-loaded image), then comes into focus.
   .stage-revealing is added the instant the new picture is in the DOM, still
   blurred; .stage-revealed is added a frame later so the two states are ever
   only a transition apart, never the same paint. Cleared once it finishes —
   see revealPicture() — so a later wait state starts from a plain #stageImg. */
#stageImg.stage-revealing {
  filter: blur(20px);
  opacity: .7;
  transition: filter .85s ease-out, opacity .85s ease-out;
}
#stageImg.stage-revealing.stage-revealed {
  filter: blur(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #canvas:has(> #progress:not([hidden]):not(.stage-progress-error)) img#stageImg,
  #stageImg.stage-revealing {
    transition-duration: .01ms;
  }
}

/* The purchase button above is the one clear default action; these swap
   choices are all secondary to it, so none of them stand out gold. */
.spot-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: 0; }
.spot-actions .spot-swap { width: 100%; margin: 0; padding: .64rem .75rem; font-size: .57rem; letter-spacing: .15em; }
/* Tertiary: sits below the refinement field, apart from the swap choices,
   so it reads as "not what I want at all" rather than another option among
   them. */
.spot-card .spot-remove { margin-top: .5rem; padding: .35rem 0 0; border: 0; color: #8A5B50; font-size: .51rem; }
.spot-card .spot-remove:hover { color: #74382D; }

/* ============================================================
   Monetization V1 (interior.billing) — a small state indicator,
   never a pricing-dashboard feel.
   ============================================================ */
.int-credits { display: inline-flex; align-items: center; }
.int-credits-pill {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .8rem; border: 1px solid var(--border2); border-radius: 999px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.int-credits-free { color: var(--green); border-color: rgba(58,122,26,.3); }
.int-credits-empty { color: var(--gold); border-color: rgba(154,110,46,.35); }
.int-credits-empty:hover { background: var(--gold-dim); }

.int-paywall .int-pack {
  max-width: 320px; margin: 1.5rem 0 2rem; padding: 1.5rem;
  border: 1px solid var(--border); background: var(--surface);
}
.int-pack-credits { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin: 0 0 .2rem; }
.int-pack-price { color: var(--gold); font-size: 1rem; margin: 0 0 1rem; }
.int-paywall-recover a { color: var(--gold); }
.int-recover-form { max-width: 320px; display: flex; gap: .5rem; margin-top: .75rem; }
.int-recover-form[hidden] { display: none; }
.int-recover-form .int-input { flex: 1 1 auto; }
@media (max-width: 640px) {
  .int-recover-form { flex-direction: column; }
}