/* Room: the 3D drafting-sheet view (stage, measurements, callouts, hotspots, title block, captions). */

h1{font-weight:450;font-size:32px;letter-spacing:-1px;margin:10px 0}
#stage{height:100dvh;min-height:560px;width:100%;touch-action:none}
canvas{display:block}
.row{display:flex;justify-content:space-between;font-size:12px;padding:8px 0;border-bottom:1px solid #e5e8e1}
.row span:first-child{color:#637670}
.controls{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);background:#ffffffee;border:1px solid #dce2db;border-radius:14px;padding:7px;display:flex;gap:5px;z-index:3;max-width:95vw}
button[aria-pressed=true]{background:#254c43;color:#fff}
.hint{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);font-size:11px;color:#637670;text-align:center;width:90%;pointer-events:none}
#status{position:absolute;top:45%;left:50%;transform:translateX(-50%);font-size:14px;width:70%;text-align:center}
details{margin-top:15px;font-size:11px;color:#637670;line-height:1.6}
summary{cursor:pointer}
@media(max-width:750px){
  h1{font-size:25px}
  .panel .note,details{display:none}
  .controls{bottom:20px}
  button{padding:10px;font-size:11px}
  .hint{bottom:80px}
}
@media(max-width:450px){
  .controls{flex-wrap:wrap;justify-content:center;width:95vw}
  .hint{bottom:116px}
}
.measurements>summary{font-size:12px;color:#334a45}
.measurements h2{margin-top:16px}
.measurements .note,.measurements details{display:block}
.hotspot{position:absolute;z-index:4;transform:translate(-50%,-50%);background:#fffef6ed;border:1px solid #b9b9a1;box-shadow:0 3px 14px #26362c25;padding:9px 13px;border-radius:22px;font-weight:600;color:#294c43}
.hotspot:hover{background:#294c43;color:white}
.hotspot[hidden]{display:none}
.hotspot::before{content:'↗';margin-right:7px}
.hotspot[data-destination=laptop]::before{content:'▣'}
.tabs{display:flex;gap:8px;padding:14px 0;border-bottom:1px solid #dce2db}
.tabs button{background:#e5e9e0}
.tabs button[aria-pressed=true]{background:#254c43}
.controls{flex-wrap:wrap;justify-content:center;width:max-content}
.hint{background:#fff9;border-radius:15px;padding:6px 12px;width:max-content;max-width:90vw}
#stage{background:radial-gradient(ellipse at 48% 43%,var(--paper-center) 0%,var(--paper-center) 20%,var(--paper-edge) 100%)}
#stage{min-height:0;overflow:hidden}
h1{font-family:var(--drawing-serif);font-weight:400;letter-spacing:-.7px}
.measurements>summary{color:var(--drawing-ink)}
.controls{border-radius:2px;border-color:var(--drawing-rule);background:color-mix(in srgb,var(--paper-center) 93%,transparent);max-width:calc(100vw - 32px);gap:2px;bottom:18px;padding:5px}
.controls button{border-radius:1px;color:var(--drawing-ink);padding:8px 10px}
.controls button:hover{background:var(--paper-edge)}
.controls button[aria-pressed=true]{background:var(--drawing-ink);color:var(--paperHover)}
.hint{bottom:82px;background:none;color:var(--drawing-ink);font-size:11px}
#drawing-labels,#callout-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:2}
.dimension-label{position:absolute;font:14px var(--drawing-serif);color:var(--drawing-ink);background:color-mix(in srgb,var(--paper-center) 91%,transparent);padding:2px 6px;white-space:nowrap;transform:translate(-50%,-50%)}
#callout-lines polyline{fill:none;stroke:var(--drawing-rule);stroke-width:1}
#callout-lines circle{fill:var(--drawing-ink)}
.hotspot{transform:translate(-50%,-50%);border:0;border-bottom:1px solid var(--drawing-rule);border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--paper-center) 91%,transparent);padding:5px 7px;text-align:left;min-width:98px;color:var(--drawing-ink);font-weight:400}
.hotspot::before{display:none}
.hotspot:hover{color:var(--inkStrong);background:var(--paperHover)}
.callout-title{display:block;font:15px var(--drawing-serif)}
#dish-tag{position:fixed;z-index:5;pointer-events:none;white-space:nowrap;padding:5px 8px;border-bottom:1px solid var(--drawing-rule);background:color-mix(in srgb,var(--paper-center) 91%,transparent);color:var(--drawing-ink);font:14px var(--drawing-serif)}
#dish-tag[hidden]{display:none}
.callout-action{display:block;font-size:11px;letter-spacing:.025em;margin-top:3px}
.hotspot:disabled{cursor:default}
.title-block{position:absolute;left:24px;bottom:116px;width:218px;border:1px solid var(--drawing-rule);z-index:2;pointer-events:none;font-family:var(--drawing-serif);background:color-mix(in srgb,var(--paper-center) 52%,transparent)}
.title-block .project{padding:8px 10px;border-bottom:1px solid var(--drawing-rule);font-size:17px}
.title-block small{display:block;font-family:Segoe UI,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:11px;margin-bottom:4px}
.title-fields{display:grid;grid-template-columns:1fr 1fr}
.title-fields>div{padding:6px 10px;font-size:12px}
.title-fields>div:nth-child(odd){border-right:1px solid var(--drawing-rule)}
.title-fields>div:nth-child(-n+2){border-bottom:1px solid var(--drawing-rule)}
@media(max-width:750px){
  .controls button{font-size:11px;padding:7px}
  .title-block{left:16px;width:190px;bottom:112px}
  .dimension-label{font-size:12px}
  .hotspot{min-width:87px}
  .callout-title{font-size:13px}
}
@media(max-width:500px){
  h1{font-size:24px}
  .controls{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;width:calc(100vw - 24px);max-width:none;bottom:12px}
  .controls button{flex-shrink:0;padding:9px 8px}
  .hint{bottom:171px;max-width:94vw;font-size:11px}
  .title-block{bottom:82px;left:12px;width:calc(100% - 24px)}
  .title-block .project{padding:5px 8px;font-size:14px}
  .title-block .project small{display:inline;margin-right:9px}
  .title-fields{grid-template-columns:repeat(4,1fr)}
  .title-fields>div{padding:5px 7px;font-size:11px;border-bottom:0!important;border-right:1px solid var(--drawing-rule)}
  .title-fields>div:last-child{border-right:0}
  .title-fields small{font-size:11px}
  .dimension-label{font-size:11px;padding:1px 4px}
  .hotspot{min-width:80px;padding:4px 5px}
  .callout-title{font-size:12px}
  .callout-action{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}
body[data-room-view="desk"] .title-block,body[data-room-view="desk"] .hint{opacity:0;visibility:hidden;pointer-events:none}
body .title-block{bottom:24px;left:24px}
body .hint{position:fixed;z-index:5;bottom:28px;left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100vw - 540px);padding:12px 18px;border:1px solid #aaa09145;border-radius:999px;background:#f5f1e8e8;backdrop-filter:blur(14px);color:#332c21;font:14px/1.5 Georgia,serif;opacity:0;pointer-events:none;transition:opacity .25s; text-align:center}
body .hint.caption-visible,body[data-room-view=desk] .hint.caption-visible{opacity:1;visibility:visible}
@media(max-width:900px){
  body .title-block{display:none}
  body .hint{left:50%;max-width:calc(100vw - 36px);bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  body .hint{transition:none}
}
.room-feedback{position:fixed;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;max-width:calc(100vw - 540px);pointer-events:none}
body .room-feedback .hint{position:static;left:auto;bottom:auto;transform:none;width:auto;max-width:none;flex:1;min-width:0;margin:0}
#back-to-room{pointer-events:auto;flex:none;padding:12px 16px;border:1px solid #aaa09145;border-radius:999px;background:#f5f1e8e8;backdrop-filter:blur(14px);color:#332c21;font:14px/1.5 Georgia,serif}
#back-to-room:hover{background:#fffaf0}
@media(max-width:900px){
  .room-feedback{max-width:calc(100vw - 36px);width:max-content;bottom:22px}
}
/* In the overview the bottom edge belongs to the tour's "Take the tour" button, so captions sit just above it. */
body:is([data-room-view=angle],[data-room-view=front],[data-room-view=custom]) .room-feedback{bottom:88px}
@media(max-width:600px){
  body:is([data-room-view=angle],[data-room-view=front],[data-room-view=custom]) .room-feedback{bottom:74px}
}
@media(max-width:500px){
  .room-feedback{flex-wrap:wrap;width:calc(100vw - 36px)}
  body .room-feedback .hint{flex-basis:100%;padding:10px 14px}
  #back-to-room{padding:9px 14px}
}
:root{--os-small:12px;--os-body:14px;--os-title:16px;--os-section:22px;--os-large:28px;--os-bodyLineHeight:1.5;--focus-accent:#89ded0}