.room-skip{position:absolute;left:12px;top:-70px;z-index:10;padding:12px;background:white}.room-skip:focus{top:10px}
.room-selectors{display:grid;grid-template-columns:1fr 1fr;gap:28px}.room-choice{min-width:0;border:1px solid #d9deea;border-top:4px solid #294987;border-radius:12px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.room-choice.room-b{border-top-color:#990000}.room-choice legend{font-weight:700;color:#10143d;padding:0 8px}.room-choice label{display:grid;gap:8px;font-size:14px;color:#575b70}.room-choice select{width:100%;min-width:0;padding:12px 32px 12px 10px;font:inherit;color:#10143d;background:#fff;border:1px solid #bbc4d4;border-radius:8px}.drawing-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0 20px;flex-wrap:wrap}.drawing-controls fieldset{display:flex;gap:20px;margin:0;padding:0;border:0}.drawing-controls legend{font-size:13px;color:#575b70;margin-bottom:8px}.drawing-controls label{display:flex;align-items:center;gap:8px;font-size:14px}.drawing-controls input{accent-color:#294987}.drawing-controls .rotate{align-self:end;padding-bottom:3px}.room-drawing{background:#f8f9fb;border:1px solid #e1e5ed;border-radius:14px;overflow:hidden;margin:20px 0}.room-drawing svg{width:100%;height:auto;display:block;max-height:470px}.room-result{font-size:20px;color:#10143d;margin:0;line-height:1.5}.room-result small{display:block;font-size:14px;color:#575b70;margin-top:4px}.room-measures{display:grid;grid-template-columns:1fr 1fr;gap:22px}.room-measure{margin:0;border-left:3px solid #294987;padding:0 0 0 16px;min-width:0}.room-measure:nth-child(2){border-color:#990000}.room-measure h2{font:700 18px Arial,sans-serif;margin:0 0 9px}.room-measure p{font:15px/1.6 Arial,sans-serif;margin:3px 0;color:#575b70}.room-measure a{display:inline-block;margin-top:8px;color:#294987;font-size:14px;text-underline-offset:4px}.room-caveat{margin:25px 0 0;font-size:14px;line-height:1.6;color:#575b70}select:focus-visible,input:focus-visible{outline:3px solid #294987;outline-offset:3px}
@media(max-width:700px){.room-selectors{gap:14px}.room-choice{grid-template-columns:1fr;padding:12px;gap:12px}.room-choice legend{font-size:14px;padding:0 4px}.room-choice select{font-size:16px}.room-measures{gap:15px}.room-measure{padding-left:10px}.room-measure h2{font-size:16px}.room-measure p{font-size:14px}.room-result{font-size:18px}.room-panel{padding:18px}.room-drawing svg{min-height:220px}.hero h1{font-size:36px}.drawing-controls{gap:14px}.drawing-controls fieldset{gap:14px}.drawing-controls label{font-size:13px}}
@media(prefers-reduced-motion:no-preference){.room-drawing rect.room-shape{transition:width .25s,height .25s,x .25s,y .25s}}
.room-context-note{padding:14px 18px;border-left:3px solid #294987;background:#f3f5fa;color:#575b70;font:14px/1.55 Arial,sans-serif}
.room-context-note[hidden]{display:none}
/* Keep the measurement tool near the top, rather than below a large editorial hero. */
.hero{margin:30px 0 24px}
.hero h1{font-size:clamp(34px,4vw,44px);margin:15px 0;letter-spacing:-1px}
.room-panel{margin-top:24px;padding:24px}
.drawing-controls fieldset{flex-direction:row;align-items:center}
.room-choice legend{margin-bottom:4px}
.room-choice select{margin-top:0}
.room-measure h2{letter-spacing:0}
@media(min-width:1000px){
 .room-panel{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px 24px}
 .room-selectors{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;gap:18px}
 .room-choice{grid-template-columns:1fr;padding:14px;margin:0;gap:12px}
 .drawing-controls{grid-column:2;grid-row:1;margin:0}
 #room-result{grid-column:2;grid-row:2}
 .room-drawing{grid-column:2;grid-row:3;margin:0}
 .room-measures{grid-column:1/-1;grid-row:4}
 .room-caveat{grid-column:1/-1;grid-row:5;margin:0}
}
@media(max-width:700px){.room-panel{padding:16px}.room-choice{padding:10px}.room-choice select{padding-left:7px}}
@media(min-width:1000px){
 .hero{margin:24px 0 20px}
 .hero h1{font-size:38px;margin:10px 0}
 .hero p{margin:10px 0}
 .room-drawing svg{height:280px;max-height:none}
}
@media(max-width:600px){
 .room-selectors{grid-template-columns:1fr;gap:14px}
 .room-choice{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px}
}
@media(max-width:600px){.room-choice select{padding:10px 22px 10px 8px;min-height:44px}}

.room-measure .room-plan-link{display:block;width:fit-content}
/* At narrow phone widths, keep the selected hall and room readable. */
@media(max-width:420px){.room-choice{grid-template-columns:1fr}.room-choice .site-select-value{white-space:normal}.room-choice label{gap:5px}}