/* chez interface layer: surfaces, controls and spacing. Loaded after chez-theme.css; typography stays exactly as the theme sets it.
   Imagery sits in soft wells, controls sit on white, ink marks what is chosen and brass marks what to do next. */
:root{
  --paper:#f6f5f2;--ui-paper:#f6f5f2;--ui-well:#eeebe5;--ui-surface:#fff;--ui-tint:#efede9;
  --ui-ink:#302e2b;--ui-ink-2:#716c65;--ui-ink-3:#8b857c;--ui-ink-4:#b8b3ab;
  --ui-line:#302e2b14;--ui-line-2:#302e2b26;--ui-accent:#a78046;
  --ui-shadow:0 1px 2px #302e2b0a,0 6px 20px #302e2b0c;--ui-raise:0 1px 2px #302e2b1f,0 0 0 .5px #302e2b14
}
html,body{background:var(--ui-paper)}
body:before{display:none}
:focus-visible{outline:2px solid var(--ui-ink);outline-offset:3px}

/* Decorative drafting chrome is retired: codes, axes, corner brackets, dot grids, grain. */
.studio-context,.studio-field-label,.studio-field-axis,.studio-field-mode,.room-receipt,.hero-signal,.origin-photo span,.gold-line,
.coordinate-grid,.story-sticky[data-phase=details] .coordinate-grid,.design-topline>.mono,.studio-field:before,.studio-field:after,
.design-lab:before,.design-lab:after,.closing:before,.closing:after,.possibility-statement:before{display:none!important}

/* Buttons: primary is charcoal, secondary is outlined, both pills. */
.primary-button,.hero-actions .primary-button,.closing .primary-button,.share-artifact .primary-button,.product-info .primary-button,.share-dialog .primary-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border:0;border-radius:999px;
  background:var(--ui-ink);color:#fff;box-shadow:none;transform:none;transition:background .2s
}
.primary-button:hover,.hero-actions .primary-button:hover,.closing .primary-button:hover,.share-artifact .primary-button:hover,.product-info .primary-button:hover,.share-dialog .primary-button:hover{background:#46433f;box-shadow:none;transform:none}
.primary-button>span,.hero-actions .primary-button>span,.closing .primary-button>span{color:inherit;transform:none!important}
.hero-watch{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:1px solid var(--ui-line-2);border-radius:999px;background:transparent;color:var(--ui-ink);transition:background .2s,border-color .2s}
.hero-watch:after{content:none}
.hero-watch:hover{background:var(--ui-surface);border-color:var(--ui-ink-4);color:var(--ui-ink)}
.preview-control{height:36px;padding:0 14px;border:1px solid var(--ui-line-2);border-radius:999px;background:var(--ui-surface);color:var(--ui-ink)}

/* Header */
.header{padding:22px 3.5%;border-bottom:0}
.header nav{gap:28px;align-items:center}
.nav-cta{align-items:center;gap:8px;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--ui-ink);color:#fff}
.nav-cta span{color:inherit;transform:none!important}
.nav-cta:hover{background:#46433f}

/* Hero */
.hero-copy .eyebrow{gap:0}
.hero-actions{gap:12px;margin-top:28px}
.origin-photo{padding:6px;border-radius:6px;background:#fff;box-shadow:0 14px 34px #302e2b26,0 1px 3px #302e2b14}
.origin-photo img{border-radius:3px}
.photo-origin svg{stroke:var(--ui-ink-4);opacity:1}
.photo-origin circle{fill:var(--ui-ink-4)}
.capture-fragment{padding:5px 5px 10px;border-radius:6px;box-shadow:0 14px 34px #302e2b21}
.capture-fragment img{border-radius:3px}

/* The stage: a soft well the room sits in. */
.story-sticky,.story-sticky[data-phase=details]{background:var(--ui-paper)}
.studio-field{border:0;border-radius:20px;background:var(--ui-well);box-shadow:none;transition:opacity .4s}
.story-sticky[data-phase=render] .studio-field{opacity:0}
.render-stage,.render-stage.active{width:52%}
.cutaway{filter:drop-shadow(0 30px 26px #3d33241a)}

/* Chapter copy keeps to one line above the stage. */
.story-sticky[data-phase] .story-copy p:not(.eyebrow){max-width:720px}

/* The chapter's one action, set as a secondary pill at the head of the control column. */
.story-sticky>.chapter-action{left:67%;right:auto;width:auto;height:40px;align-items:center;justify-content:flex-start;gap:10px;padding:0 16px 0 18px;border:1px solid var(--ui-line-2);border-radius:999px;background:var(--ui-surface);color:var(--ui-ink);transition:border-color .2s}
.story-sticky>.chapter-action:hover{border-color:var(--ui-ink-4)}

/* Panels */
.phase-tool,.share-artifact,.share-artifact.active,.detail-rail,.live-room-caption,.room-dialog[data-camera=walk] .live-room-caption{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:18px;box-shadow:var(--ui-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.phase-tool{padding:20px}
.phase-tool>.mono,.share-artifact>.mono{margin-bottom:14px}

/* Segmented choices: a tinted track, the chosen option lifts to white. */
.mini-directions,.tool-row:not(.secondary),.detail-filters,.detail-view-controls{display:flex;gap:2px;padding:3px;border:0;border-radius:12px;background:var(--ui-tint)}
.mini-directions{margin-top:16px}
.mini-directions button,.tool-row:not(.secondary) button,.detail-filters button,.detail-view-controls button{flex:1;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ui-ink-2);white-space:nowrap;box-shadow:none;transform:none!important;transition:background .15s,color .15s,box-shadow .15s}
.mini-directions button:hover,.tool-row:not(.secondary) button:hover,.detail-filters button:hover,.detail-view-controls button:hover{color:var(--ui-ink);background:#ffffff8c}
.mini-directions button.active,.tool-row:not(.secondary) button.active,.detail-filters button[aria-pressed=true],.detail-view-controls button[aria-pressed=true]{background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-raise)}
.tool-row.secondary{gap:8px;margin-top:10px}
.tool-row.secondary button{flex:1;height:34px;padding:0 12px;border:1px solid var(--ui-line-2);border-radius:999px;background:transparent;color:var(--ui-ink-2);transform:none!important}
.tool-row.secondary button:hover{color:var(--ui-ink);border-color:var(--ui-ink-4)}
.interaction-hint{margin-top:12px}
.auto-prompt button{border-radius:999px}

/* Swatch choices: the chosen one carries a charcoal ring. */
.chair-options{gap:8px}
.chair-options button{padding:14px 6px 12px;border:1px solid var(--ui-line);border-radius:12px;background:transparent;color:var(--ui-ink);transform:none!important;transition:border-color .15s,box-shadow .15s}
.chair-options button:hover{border-color:var(--ui-line-2)}
.chair-options button.active{border-color:var(--ui-ink);background:var(--ui-surface);box-shadow:inset 0 0 0 .5px var(--ui-ink)}
.colour-options{justify-content:space-between;gap:6px}
.colour-options button,.floor-options button{gap:10px;padding:4px;border:0;transform:none!important}
.colour-options i{width:40px;height:40px;border:0;box-shadow:inset 0 0 0 1px #302e2b1f}
.colour-options button.active i,.floor-options button.active .sample{outline:1.5px solid var(--ui-ink);outline-offset:3px}
.floor-options{justify-content:space-between;gap:6px}
.floor-options .sample{width:44px;height:44px;border:0;border-radius:10px;transform:none;box-shadow:inset 0 0 0 1px #302e2b1f}

/* The space you're working with */
.space-metrics{gap:18px 16px}
.space-metrics>span{padding-top:12px;border-top:1px solid var(--ui-line)}
.rail-note{margin-top:18px}

/* Collection */
.shopping-rail-piece{padding:14px 0;border-top:1px solid var(--ui-line)}
.shopping-rail-total{padding-top:14px;border-top:1px solid var(--ui-line-2)}
.shopping-tools .rail-note{margin-top:12px}

/* Price labels on the pieces */
.room-pins .product-pin i{background:#fff;border:2px solid var(--ui-ink);box-shadow:0 0 0 3px #ffffffb3,0 1px 4px #302e2b40}
.room-pins .product-pin span{border:1px solid var(--ui-line);border-radius:12px;background:#fff;box-shadow:0 6px 18px #302e2b17;backdrop-filter:none}
.room-pins .product-pin span:before,.room-pins .sofa-pin span:before{background:#302e2b40}

/* Selection chip on the stage */
.editor-selection{gap:8px;padding:7px 12px;border:1px solid var(--ui-line);border-radius:999px;background:#fff;box-shadow:0 2px 10px #302e2b12}

/* Photo and render */
.render-comparison{border:0;border-radius:18px;background:var(--ui-well);box-shadow:0 1px 2px #302e2b14,0 18px 44px #302e2b1f}
.render-comparison .compare-label{top:14px;border-radius:999px;background:#ffffffeb}
.render-comparison .before-label{left:14px}.render-comparison .after-label{right:14px}
.compare-rule{border-left:2px solid #fff}
.compare-rule i{left:-19px;width:38px;height:38px;border:0;background:#fff;color:var(--ui-ink);box-shadow:0 2px 12px #302e2b40}
.render-footer{margin-top:14px}

/* Share card */
.share-avatar-row span{background:var(--ui-tint)}
.share-artifact li{border-color:var(--ui-line)}
.share-artifact li span{display:none}
.share-artifact .primary-button{width:100%;height:44px}

/* Room specification */
.detail-rail{padding:0 16px}
.detail-rail-heading{padding:16px 0 12px}
.detail-filters{margin-bottom:6px}
.detail-filters button{height:32px}
.detail-table-heading{padding:10px 0 6px;border-bottom:1px solid var(--ui-line)}
.detail-callout{border-bottom:1px solid var(--ui-line)}
.detail-callout:hover{background:#302e2b06}
.detail-callout.is-selected{background:var(--ui-tint)}
.detail-callout.is-selected:before{left:0;top:0;bottom:0;width:2px;background:var(--ui-accent)}
.detail-rail-foot{padding:10px 0 12px}
.detail-view-controls{border-radius:999px;background:#e4e1db}
.detail-view-controls button{flex:none;height:32px;padding:0 14px;border-radius:999px}
@media(min-width:1051px) and (min-height:651px){.detail-view-controls{top:calc(22% + 14px);right:calc(36% + 14px)}}
@media(max-width:1050px) and (min-width:701px) and (min-height:651px){.detail-view-controls{left:auto;top:calc(27% + 12px);right:calc(42% + 12px)}}

/* Story navigation: where you are on the left, ways to move on the right, the four steps beneath. */
.chapter-selector{flex-direction:row;align-items:center;gap:14px}
.chapter-selector select{width:auto;height:40px;padding:0 36px 0 16px;border:1px solid var(--ui-line-2);border-radius:999px;background-color:var(--ui-surface);background-position:right 14px center;background-size:11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23302e2b' stroke-width='1.3'/%3E%3C/svg%3E")}
.chapter-selector select:hover{border-color:var(--ui-ink-4)}
.story-bottom .explore-button{height:40px;gap:8px;padding:0 18px 0 16px;border:1px solid var(--ui-line-2);border-radius:999px;background:var(--ui-surface);box-shadow:none;backdrop-filter:none}
.story-bottom .explore-button:hover{background:var(--ui-surface);border-color:var(--ui-ink-4)}
.story-bottom .explore-button>span{display:none}
.chapter-navigation{gap:6px;margin-left:10px}
.chapter-navigation button{width:40px;height:40px;border:1px solid var(--ui-line-2);border-radius:999px;background:var(--ui-surface)}
.chapter-navigation button:hover:not(:disabled){background:var(--ui-surface);border-color:var(--ui-ink-4)}
.chapter-navigation button:disabled{opacity:.35}
.flow-route{gap:20px}
.flow-route button:before{height:2px;background:var(--ui-line)}
.flow-route i{bottom:0;height:2px;background:var(--ui-ink)}
.flow-route button[aria-current=step]:after{display:none}

/* Design lab */
.design-lab{border:0;border-radius:24px;background:var(--ui-well)}
.design-shade{background:linear-gradient(90deg,var(--ui-well) 0%,#eeebe5eb 24%,#eeebe500 54%)}
.design-topline{border-bottom:0}
.design-console{border:1px solid var(--ui-line);border-radius:18px;background:#fff;box-shadow:0 14px 44px #302e2b21;backdrop-filter:none;-webkit-backdrop-filter:none}
.prompt-line{padding:12px 12px 12px 18px;border-bottom:1px solid var(--ui-line)}
.prompt-line button{width:36px;height:36px;border-radius:999px;background:var(--ui-ink);color:#fff}
.prompt-line button:hover{background:#46433f}
.design-switches{gap:4px;padding:8px}
.design-switches button{height:36px;padding:0 14px;border:0;border-radius:999px;transform:none!important}
.design-switches button:hover,.design-switches button.active{background:var(--ui-tint)}
.design-switches button:last-child{border-left:0;padding-left:14px}

/* Possibility statement */
.possibility-statement{border:0;background:transparent}
.possibility-statement .experiment-rail{border-top:1px solid var(--ui-line-2);border-bottom:1px solid var(--ui-line-2)}
.possibility-statement .experiment-rail button,.possibility-statement .experiment-rail button:hover{padding:20px 4px;background:transparent}
.possibility-statement .experiment-rail button+button{border-top:1px solid var(--ui-line)}

/* Closing */
.closing{border:0;border-radius:24px;background:var(--ui-well)}
.closing-vision-shade{background:linear-gradient(90deg,var(--ui-well) 0%,#eeebe5e6 6%,#eeebe538 36%,#eeebe500 64%)}
.closing-coordinate{padding-top:0;border-top:0}

/* Footer */
footer{padding:30px 0 40px;border-top:0}

/* Dialogs */
dialog{border:0;border-radius:24px;background:#fff;box-shadow:0 24px 80px #302e2b33}
dialog::backdrop{background:#302e2b5c;backdrop-filter:blur(3px)}
.close-button{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;transition:background .15s}
.close-button:hover{background:var(--ui-tint)}
.product-art{border-radius:16px;background:var(--ui-well)}
.product-footer{border-color:var(--ui-line)}
.bundle-item{border-color:var(--ui-line)}
.bundle-item button{display:grid;place-items:center;width:32px;height:32px;border-radius:999px}
.bundle-item button:hover{background:var(--ui-tint)}
.share-link-row input{height:44px;padding:0 14px;border:1px solid var(--ui-line-2);border-right:0;border-radius:12px 0 0 12px;background:var(--ui-paper)}
.share-link-row button{height:44px;padding:0 16px;border:1px solid var(--ui-line-2);border-radius:0 12px 12px 0;background:#fff}
.share-link-row button:hover{background:var(--ui-tint)}

/* Explore-the-room dialog */
.room-dialog{border-radius:24px;background:var(--ui-well);box-shadow:0 30px 100px #302e2b40}
.room-dialog::backdrop{background:#302e2b73}
.live-controls>div{gap:2px;padding:4px;border:1px solid var(--ui-line);border-radius:999px;background:#fff;box-shadow:var(--ui-shadow);backdrop-filter:none}
.live-controls button{height:34px;padding:0 14px;border-radius:999px}
.live-controls button:hover{background:var(--ui-tint)}

.toast{border-radius:999px;padding:12px 20px}

/* Motion: colour and fade only, no lifting. */
.mini-directions button:hover,.tool-row button:hover,.chair-options button:hover,.colour-options button:hover,.floor-options button:hover{transform:none}

/* Tablets */
@media(max-width:1050px) and (min-width:701px){
  .story-sticky>.chapter-action{left:61.5%;height:36px}
  .phase-tool{padding:16px}
  .mini-directions button,.tool-row:not(.secondary) button{height:34px}
  .colour-options i{width:32px;height:32px}
  .floor-options .sample{width:36px;height:36px}
}
/* Short laptop screens */
@media(max-height:650px) and (min-width:701px){
  .hero-actions{margin-top:18px}
  .primary-button,.hero-actions .primary-button,.hero-watch{height:40px}
  .story-sticky>.chapter-action{height:34px}
  .phase-tool{padding:14px}
  .phase-tool>.mono,.share-artifact>.mono{margin-bottom:10px}
  .mini-directions{margin-top:10px}
  .mini-directions button,.tool-row:not(.secondary) button{height:32px}
  .chapter-selector select,.story-bottom .explore-button,.chapter-navigation button{height:36px}
  .chapter-navigation button{width:36px}
}
/* Phones */
@media(max-width:700px){
  .header{padding:18px 20px}
  .nav-cta{height:34px;padding:0 14px}
  .hero-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
  .primary-button,.hero-actions .primary-button,.hero-watch{height:44px;padding:0 18px}
  .story-sticky>.chapter-action{left:22px;height:34px;padding:0 14px 0 16px}
  .phase-tool{padding:14px;border-radius:16px}
  .phase-tool>.mono,.share-artifact>.mono{margin-bottom:10px}
  .mini-directions{margin-top:10px}
  .mini-directions button,.tool-row:not(.secondary) button{height:32px;padding:0 6px}
  .tool-row.secondary button{height:30px}
  .interaction-hint{margin-top:8px}
  .chair-options button{padding:8px 4px}
  .colour-options,.floor-options{justify-content:space-around}
  .colour-options i{width:30px;height:30px}
  .floor-options .sample{width:32px;height:32px;border-radius:8px}
  .colour-options button,.floor-options button{gap:7px}
  .shopping-rail-piece{padding:9px 0}
  .share-artifact .primary-button{height:40px}
  .detail-rail{padding:0 12px;border-radius:16px}
  .detail-rail-heading{padding:10px 0 8px}
  .detail-filters button{height:28px}
  .detail-table-heading{padding:6px 0 4px}
  .detail-view-controls button{height:28px;padding:0 12px}
  .render-comparison .compare-label{top:10px}
  .render-comparison .before-label{left:10px}.render-comparison .after-label{right:10px}
  .story-bottom{align-items:flex-end}
  .chapter-selector{flex-direction:column;align-items:flex-start;gap:6px}
  .chapter-selector select{height:36px;padding:0 32px 0 14px;background-position:right 12px center}
  /* Icon-only on phones, so the label never runs under the arrows. */
  .story-bottom .explore-button{width:36px;height:36px;padding:0;justify-content:center;font-size:0;gap:0}
  .chapter-navigation{gap:6px;margin-left:6px}
  .chapter-navigation button{width:36px;height:36px}
  .flow-route{gap:8px}
  .flow-route button{padding-bottom:10px}
  .flow-route button small{display:none}
  .design-lab{border-radius:20px}
  .design-shade{background:linear-gradient(180deg,var(--ui-well) 0%,#eeebe5f2 30%,#eeebe5a6 44%,#eeebe500 62%)}
  .prompt-line{padding:10px 10px 10px 14px}
  .prompt-line button{width:32px;height:32px}
  .design-switches{padding:6px;gap:2px}
  .design-switches button{height:32px;padding:0 10px}
  .design-switches button:last-child{padding-left:10px}
  .possibility-statement .experiment-rail button,.possibility-statement .experiment-rail button:hover{padding:16px 2px}
  .closing{border-radius:20px}
  .closing-vision-shade{background:linear-gradient(0deg,var(--ui-well) 0%,#eeebe5e6 6%,#eeebe540 28%,#eeebe500 52%)}
  dialog{border-radius:20px}
  .live-controls button{height:32px;padding:0 11px}
}