/* 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); }
.int-gap-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.int-chip {
  padding: .35rem .8rem; background: none; border: 1px solid var(--border);
  font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .2s;
}
.int-chip:hover { border-color: var(--gold); color: var(--gold); }

/* 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; }
.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); }

.stage-canvas { position: relative; 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-bar { height: 2px; background: rgba(255,255,255,.25); }
.stage-progress-bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .5s ease; }
.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; }

/* The hotspot card */
.spot-card {
  position: absolute; z-index: 5; width: min(330px, calc(100vw - 2rem));
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 1.4rem 1.4rem 1.25rem; line-height: 1.5;
}
.spot-card[hidden] { display: none; }
.spot-close {
  position: absolute; top: .4rem; right: .55rem; border: 0; background: none;
  font-size: 1.35rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.spot-cat { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.spot-label { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.25rem; margin: .3rem 0 .15rem; }
.spot-price { display: block; margin-bottom: 1rem; }
.spot-card .int-spec { margin-bottom: 1rem; }
.spot-swap { width: 100%; margin-top: 1.1rem; }
.spot-swap:disabled { opacity: .5; cursor: wait; }

/* 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; }

@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: 72vh; overflow-y: auto;
    border: 0; border-top: 1px solid var(--border);
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    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-bar { display: none; }
.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 the bar cannot report a
   position. It says "working" rather than inventing a fraction. */
.stage-progress-indeterminate {
  animation: stage-sweep 1.6s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes stage-sweep {
  0%   { opacity: .35; transform: scaleX(.25); }
  50%  { opacity: .9;  transform: scaleX(1); }
  100% { opacity: .35; transform: scaleX(.25); }
}

/* One object, four possible verbs. Laid out as a column so a long role label
   ("Another: something on the wall") does not wrap mid-button. */
.spot-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.spot-actions .spot-swap { width: 100%; }
.spot-remove { color: #8a2a2a; border-color: currentColor; }