/* Room Preview page only. Loaded by room-preview.html; uses the site tokens from styles.css. */
.rp-head{padding:34px 0 28px; max-width:70ch;}
.rp-head h1{font-size:clamp(40px,6vw,76px); line-height:.95; margin:10px 0 16px;}
.rp-head p{font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:58ch;}
.rp-tool{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0; border:1px solid var(--rule); background:var(--concrete); margin-bottom:70px;}
.rp-stage{position:relative; background:#ECEBE7; padding:18px; min-height:340px;}
.rp-stage-inner{position:sticky; top:84px;}
#rp-canvas{display:block; width:100%; height:auto; max-height:calc(100vh - 150px); object-fit:contain; margin:0 auto; background:#D8D6D0; box-shadow:0 12px 36px rgba(0,0,0,.14); touch-action:none; cursor:default; outline:none;}
#rp-canvas:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.rp-panel{border-left:1px solid var(--rule); padding:6px 22px 24px;}
.rp-step{border-top:1px solid var(--rule); padding:18px 0;}
.rp-step:first-child{border-top:0;}
.rp-step h2{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin:0 0 10px; display:flex; gap:10px; align-items:center;}
.rp-step h2 i{font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font-size:11px;}
.rp-note{font-size:12.5px; line-height:1.55; color:var(--ink-soft); margin-top:8px;}
.rp-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.rp-panel button, .rp-panel select, .rp-panel input[type=number], .rp-file-btn{font:500 13px var(--body); border:1px solid var(--ink); background:#fff; color:var(--ink); padding:10px 14px; cursor:pointer; min-height:42px;}
.rp-panel button:hover, .rp-file-btn:hover{background:#F1F0ED;}
.rp-panel button.rp-primary, .rp-file-btn.rp-primary{background:var(--ink); color:#fff;}
.rp-panel button.rp-primary:hover, .rp-file-btn.rp-primary:hover{background:#2A2A2A;}
.rp-panel button[aria-pressed=true]{background:var(--ink); color:#fff;}
.rp-panel input[type=number]{width:88px; cursor:text;}
.rp-file-btn{display:inline-flex; align-items:center;}
.rp-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.rp-panel .rp-thumbs button{padding:0; border:2px solid transparent; background:#EEE; aspect-ratio:1/1; overflow:hidden; min-height:0;}
.rp-panel .rp-thumbs button[aria-pressed=true]{border-color:#1F6FD6; background:#EEE;}
.rp-thumbs img{width:100%; height:100%; object-fit:cover; display:block;}
.rp-sizes button{flex:1; min-width:58px;}
.rp-readout{font-family:var(--mono); font-size:12px; line-height:1.7; background:#F4F3F0; padding:10px 12px; margin-top:10px;}
.rp-readout b{font-weight:600;}
.rp-readout a{text-decoration:underline; text-underline-offset:3px;}
.rp-chk{display:flex; gap:8px; align-items:center; font-size:13px; margin-top:12px;}
.rp-fine{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); line-height:1.7; margin-top:6px;}
.rp-tips{margin:0 0 70px;}
.rp-tips h2{font-size:clamp(28px,3.6vw,44px); margin:10px 0 28px;}
.rp-tip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule);}
.rp-tip{padding:24px 26px 28px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--bone);}
.rp-tip .num{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-soft); font-weight:600;}
.rp-tip h3{font-family:var(--display); font-size:24px; text-transform:uppercase; line-height:1.02; margin:10px 0 10px; font-weight:800;}
.rp-tip p{font-size:14px; line-height:1.65; color:var(--ink-soft);}
.rp-cta{padding:56px 0 90px; text-align:center; border-top:1px solid var(--rule);}
@media (max-width:980px){
  .rp-tool{grid-template-columns:1fr;}
  .rp-panel{border-left:0; border-top:1px solid var(--rule);}
  .rp-stage{padding:8px; min-height:0; position:sticky; top:66px; z-index:3; border-bottom:1px solid var(--rule);}   /* keep the preview in view while the controls scroll */
  .rp-stage-inner{position:static;}
  #rp-canvas{max-height:40vh;}
  .rp-tip-grid{grid-template-columns:1fr;}
}