/* Screen size and physical viewing distance are separate concerns.
   Large screens scale automatically; board mode enlarges controls even at 1080p. */
:root{--header-height:88px}
header{height:var(--header-height)}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-actions button{min-height:44px}
.header-actions [aria-pressed=true]{background:var(--ink);color:var(--paper)}
.presentation-floors{display:none;align-items:center;gap:8px}
.presentation-floors button{border:1px solid #b2bfb1;border-radius:5px;padding:10px 16px;min-height:44px;white-space:nowrap}
.presentation-floors button.active{background:var(--ink);color:var(--paper)}
body.present .presentation-floors{display:flex}
.view-switch button,.zoom-controls button,.primary,.secondary,#tour{min-height:44px}
.zoom-controls button{min-width:44px}
.view-switch button{font-size:12px}
.map-transform{max-width:none}
.map-footer{flex-shrink:0}
.map-stage.gesturing .map-transform{transition:none}
.map-stage{cursor:grab}
.map-stage.gesturing{cursor:grabbing}
.detail h3{overflow-wrap:anywhere}
.edit-form{width:100%;min-width:0}
.detail-actions:has(.edit-form){display:block}
.room-item{min-height:44px;font-size:12px}
.detail-actions{flex-shrink:0}
.facts,.detail-description,.detail h3,.detail-top,.status{flex-shrink:0}
#toast{max-width:calc(100vw - 32px);text-align:center}
@media(min-width:901px){
 main{height:calc(100dvh - var(--header-height))}
 .navigation,.workspace,.detail{min-width:0}
 .map-heading{gap:12px;flex-shrink:0}
 .map-stage{padding-bottom:58px}
 .map-hint{bottom:24px;max-width:calc(100% - 190px);line-height:1.5}
 .detail{scrollbar-width:thin}
}
/* Compact laptop heights: give navigation and the floor drawing the space. */
@media(min-width:901px) and (max-height:850px){
 .navigation{padding-top:22px}
 .navigation h1{font-size:33px;margin:15px 0 10px}
 .intro{margin-bottom:16px}
 .floor-tabs{margin:16px 0 20px}
 .detail-art{height:85px;min-height:85px;margin:14px 0}
 .detail-art svg{width:135px}
 .detail-art .art-caption{display:none}
 .detail h3{font-size:25px;margin:13px 0 10px}
 .detail-description{line-height:1.55}
 .nav-footer{padding-top:14px}
}
@media(min-width:901px) and (max-height:700px){
 :root{--header-height:72px}
 .detail-art,.intro,.nav-footer{display:none}
 .navigation h1{font-size:28px}
 .workspace{padding-top:18px}
 .detail{padding-top:20px}
}
/* Large displays: fluid columns, type and controls, including 4K CSS viewports. */
@media(min-width:1800px){
 :root{--header-height:clamp(96px,5vw,180px)}
 header{padding-inline:clamp(36px,2vw,80px);gap:3vw}
 .brand{font-size:clamp(40px,2.5vw,86px)}
 .brand span{font-size:clamp(9px,.55vw,19px)}
 .header-title{font-size:clamp(13px,.85vw,29px)}
 .header-actions button{font-size:clamp(14px,.85vw,28px);min-height:clamp(48px,3vw,100px);padding:.6vw 1vw}
 main{grid-template-columns:clamp(320px,19vw,660px) minmax(0,1fr) clamp(350px,21vw,740px)}
 body.present main{grid-template-columns:minmax(0,1fr) clamp(350px,23vw,780px)}
 .navigation,.detail{padding:2vw}
 .eyebrow,.detail-top .eyebrow,.list-heading{font-size:clamp(11px,.7vw,23px)}
 h1,.navigation h1{font-size:clamp(42px,3vw,98px);margin:1.4vw 0 1vw}
 .intro,.detail-description{font-size:clamp(16px,1vw,34px)}
 .intro{margin-bottom:1.5vw}
 .search{padding:.8vw;gap:.5vw}
 .search input,.room-item{font-size:clamp(15px,.95vw,32px)}
 .search kbd{font-size:clamp(12px,.7vw,24px)}
 .floor-tabs{margin:1.4vw 0 1.6vw;gap:.6vw}
 .floor-tabs button{font-size:clamp(32px,2.1vw,72px);padding:.8vw}
 .floor-tabs button span{font-size:clamp(13px,.8vw,28px)}
 .room-item{padding:.65vw .5vw;min-height:clamp(48px,3vw,100px)}
 .nav-footer,.nav-footer small{font-size:clamp(12px,.75vw,26px)}
 .workspace,body.present .workspace{padding:1.8vw 2vw 0}
 h2{font-size:clamp(36px,2.5vw,86px)}
 .map-subtitle{font-size:clamp(14px,.9vw,30px)}
 .view-switch button{font-size:clamp(14px,.9vw,30px);min-height:clamp(48px,3vw,100px);padding:.5vw .9vw}
 .map-transform{max-width:none}
 .map-stage{padding-bottom:clamp(62px,4vw,130px)}
 .map-hint,.legend{font-size:clamp(12px,.8vw,26px)}
 .map-hint{bottom:1.4vw;max-width:calc(100% - 13vw)}
 .zoom-controls button{min-height:clamp(48px,3vw,100px);min-width:clamp(48px,3vw,100px);font-size:clamp(22px,1.5vw,50px)}
 .zoom-controls span{font-size:clamp(12px,.8vw,26px);min-width:3vw}
 .map-footer{min-height:clamp(80px,5vw,160px);gap:1vw}
 .legend{gap:1vw;flex-wrap:wrap}
 .legend i{width:.5vw;height:.5vw}
 #tour,.presentation-floors button{font-size:clamp(15px,1vw,32px);min-height:clamp(48px,3vw,100px)}
 .detail-art{height:10vw;min-height:10vw;margin:1.4vw 0}
 .detail-art svg{width:12vw}
 .detail-art .art-caption{font-size:.65vw}
 .status{font-size:clamp(13px,.85vw,28px);padding:.4vw .6vw}
 .detail h3{font-size:clamp(34px,2.2vw,76px);margin:1vw 0}
 .facts div{font-size:clamp(15px,.95vw,32px);padding:.7vw 0}
 .primary,.secondary{font-size:clamp(15px,.95vw,32px);min-height:clamp(48px,3vw,100px);padding:.7vw}
 .provenance,.provenance strong,.storage-note{font-size:clamp(12px,.75vw,25px)}
 #export,#import{font-size:clamp(12px,.75vw,25px)!important;min-height:44px}
 .edit-form label{font-size:clamp(15px,.9vw,30px)}
 .edit-form input,.edit-form textarea{font-size:clamp(16px,1vw,34px);padding:.6vw}
 #toast{font-size:clamp(16px,1vw,32px)}
}
/* Explicit board mode also works when the display reports a 1080p viewport. */
body.board{--header-height:clamp(88px,6vw,180px)}
body.board .header-title{font-size:clamp(13px,1vw,30px)}
body.board .header-actions button{font-size:clamp(16px,1vw,30px);min-height:56px}
body.board .outline{padding:12px 18px}
body.board .view-switch button,body.board #tour,body.board .presentation-floors button{font-size:clamp(18px,1.2vw,38px);min-height:56px}
body.board .zoom-controls button{min-width:56px;min-height:56px;font-size:clamp(25px,1.8vw,55px)}
body.board .zoom-controls span{font-size:clamp(16px,1vw,30px);min-width:54px}
body.board .room-item{font-size:clamp(18px,1.1vw,36px);min-height:56px}
body.board .search input{font-size:clamp(18px,1.1vw,36px);min-height:34px}
body.board .detail-description,body.board .facts div{font-size:clamp(18px,1.15vw,36px)}
body.board .detail h3{font-size:clamp(32px,2.3vw,78px)}
body.board .primary,body.board .secondary{font-size:clamp(18px,1.1vw,36px);min-height:56px}
body.board .status,body.board .eyebrow,body.board .detail-top .eyebrow{font-size:clamp(13px,.85vw,28px)}
body.board .legend,body.board .map-hint,body.board .provenance,body.board .provenance strong{font-size:clamp(14px,.85vw,28px)}
body.board #export,body.board #import{font-size:clamp(14px,.9vw,28px)!important;min-height:56px}
body.board .detail-art{height:clamp(85px,8vw,240px);min-height:clamp(85px,8vw,240px)}
body.board .map-stage{padding-bottom:80px}
body.board .map-hint{max-width:calc(100% - 235px)}
body.board .map-footer{min-height:82px;flex-wrap:wrap;padding:10px 0}
body.board .edit-form label,body.board .edit-form input,body.board .edit-form textarea{font-size:clamp(18px,1.1vw,36px)}
@media(min-width:901px){
 body.board main{grid-template-columns:clamp(260px,23vw,680px) minmax(0,1fr) clamp(300px,26vw,820px)}
 body.board.present main{grid-template-columns:minmax(0,1fr) clamp(320px,28vw,880px)}
}
@media(any-pointer:coarse){
 button,.room-item,.view-switch button,.primary,.secondary{min-height:48px}
 .zoom-controls button{min-width:48px}
 input,textarea{font-size:16px}
 .edit-form .checkbox input{width:24px;height:24px}
}
@media(max-width:1100px){
 header{gap:20px;padding-inline:20px}
 .header-title{letter-spacing:1px;font-size:10px}
 .header-title span{margin-inline:6px}
 .header-actions{gap:6px}
 .header-actions button{padding:10px;font-size:11px}
 #fullscreen span{display:none}
}
@media(max-width:900px){
 :root{--header-height:76px}
 .map-footer{flex-wrap:wrap;padding:12px 0}
 .map-heading{flex-wrap:wrap;gap:12px}
 .map-hint{max-width:calc(100% - 190px);line-height:1.5}
 body.board main,body.board.present main{display:flex;flex-direction:column}
 body.board .room-list{max-height:230px}
 body.board .detail-art{display:none}
 body.board .map-stage{min-height:500px}
}
@media(max-width:600px){
 :root,body.board{--header-height:auto}
 header{min-height:76px;flex-wrap:wrap;gap:12px;padding:16px}
 .header-title{flex:1;font-size:9px}
 .header-actions{width:100%;justify-content:space-between}
 .header-actions button,#present{font-size:12px;padding:8px 12px;min-height:44px}
 #present:first-letter{font-size:12px}
 .map-stage{min-height:410px;padding-bottom:56px}
 .view-switch button{min-height:44px}
 .search input{font-size:16px}
 .room-list{max-height:145px}
 body.board .header-actions button{font-size:14px;padding:8px;min-height:48px}
 body.board .map-hint{display:none}
 .presentation-floors{order:-1;width:100%}
 .presentation-floors button{flex:1}
}