:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #262d33; background: #f3f5f7; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
header { grid-row: 1; }
#stage { grid-row: 2; }
footer { grid-row: 3; }
[hidden] { display: none !important; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #c0cbd3; background: #f3f5f7; }
.title { margin-right: auto; }
h1 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.025em; margin: 0; }
.title span, label, footer, .note { font-size: .8rem; color: #4d5c67; }
.room-field { display: flex; align-items: center; gap: 8px; }
#ceiling-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
#ceiling { max-width: 200px; }
#ceiling-feedback { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .8rem; color: #4d5c67; }
#ceiling-status { flex: 1; min-width: 0; height: 3em; overflow-y: auto; overflow-wrap: anywhere; }
#ceiling-feedback[data-error="true"] { color: #8c2921; }
#ceiling-retry { flex: 0 0 auto; font-size: .8rem; padding-inline: 8px; }
label { font-weight: 600; }
button, select { font: inherit; font-size: .9rem; color: inherit; background: #fff; border: 1px solid #8b98a3; border-radius: 6px; padding: 9px 12px; min-height: 44px; }
button { cursor: pointer; }
button:hover, select:hover { background: #e8edf1; }
button:disabled, select:disabled { opacity: .55; cursor: default; }
button:active { background: #d8e4ec; }
#pace[aria-pressed="true"] { background: #d8e4ec; border-color: #226b9b; }
:focus-visible { outline: 3px solid #226b9b; outline-offset: 2px; }
#stage { min-height: 0; position: relative; background: #dce3e8; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline-offset: -4px; }
#loading { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 28px; text-align: center; background: #e2e7eb; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
p { margin: 0; }
#loading p { margin-bottom: 18px; max-width: 50ch; }
#instructions { position: absolute; right: 18px; top: 18px; max-width: 430px; max-height: calc(100% - 36px); overflow-y: auto; padding: 24px; background: #fff; border: 1px solid #c0cbd3; border-radius: 6px; box-shadow: 0 8px 28px #26333f26; }
#instructions p { margin-bottom: 16px; }
#input-diagnostics-log { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .8rem; margin: 12px 0 20px; }
kbd { font: inherit; font-size: .9em; font-weight: 600; white-space: nowrap; }
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 20px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #c0cbd3; }
#lens-controls { display: grid; grid-template-columns: auto minmax(90px, 180px) 100px auto; align-items: center; gap: 10px; }
.lens-equivalent { display: block; font-size: .65rem; font-weight: 400; }
.lens-track { min-width: 0; }
#lens { display: block; width: 100%; height: 44px; margin: 0; accent-color: #226b9b; cursor: pointer; }
#lens:disabled { cursor: default; }
#lens-hint { display: flex; justify-content: space-between; font-size: .65rem; margin-top: -8px; pointer-events: none; }
#lens-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
#reset-lens { font-size: .8rem; padding-inline: 8px; }
footer > p { align-self: center; }
#touch-pad { display: none; position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); }
#touch-stick { position: relative; display: grid; place-items: center; width: 112px; height: 112px; padding: 0; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; background: #f3f5f7e6; box-shadow: 0 2px 8px #26333f20; }
#touch-stick > span:first-child { width: 48px; height: 48px; border: 1px solid #657786; border-radius: 50%; background: #cad7e0; pointer-events: none; }
#touch-stick .stick-label { position: absolute; bottom: 5px; font-size: .7rem; color: #3d4d58; pointer-events: none; }
#touch-stick[data-active] { background: #e3edf4; border-color: #226b9b; }
#touch-stick[data-active] > span:first-child { background: #a7c4d8; }
@media (any-pointer: coarse) { #touch-pad { display: block; } }
.touch-help { display: none; }
#storage-panel { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: min(540px, calc(100% - 32px)); background: #f3f5f7; border: 1px solid #8b98a3; border-radius: 6px; padding: 8px 12px; font-size: .85rem; }
#storage-name { min-width: 0; }
#storage-action { flex: 0 0 auto; }
@media (pointer: coarse), (max-width: 700px) {
  header { padding: 10px 12px; gap: 8px; }
  .title { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; }
  h1 { font-size: 1.05rem; }
  .room-field { flex: 1 1 100%; min-width: 0; }
  header.has-ceilings .room-field { flex: 1 1 42%; }
  #ceiling-controls { flex: 1 1 48%; gap: 6px; }
  #ceiling { flex: 1; max-width: none; padding-inline: 6px; }
  .room-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  select { width: 100%; min-width: 0; }
  #capture { display: none; }
  #reset { font-size: .8rem; padding-inline: 8px; }
  #pace { font-size: .8rem; padding-inline: 8px; }
  #help { font-size: .8rem; padding-inline: 8px; }
  #fullscreen { font-size: .8rem; padding-inline: 8px; }
  #touch-pad { display: block; }
  #storage-panel { top: 12px; bottom: auto; right: 12px; max-width: calc(100% - 24px); font-size: .8rem; gap: 8px; padding: 6px 8px; }
  .touch-help { display: inline; }
  .desktop-help { display: none; }
  #instructions { inset: 12px; max-width: none; max-height: calc(100% - 24px); z-index: 2; padding: 18px; }
  footer { padding-inline: 12px; gap: 2px; font-size: .75rem; }
  footer p { flex-basis: 100%; }
  #lens-controls { width: 100%; grid-template-columns: auto minmax(70px, 1fr) 94px auto; gap: 6px; }
}
@media (max-height: 450px) { header { padding-block: 5px; } .title { flex-basis: auto; } footer { padding-block: 3px; } }

.visually-hidden { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
#walkthrough-controls { display:none; }
.controls-open #walkthrough-controls { display:block;position:fixed;z-index:4;right:12px;top:74px;width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain;background:#f3f5f7;border:1px solid #8b98a3;border-radius:6px;box-shadow:0 8px 28px #26333f26; }
.settings-section { padding:18px; }
.settings-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.settings-heading h2 { margin:0;font-size:1.1rem; }
.settings-section h3 { font-size:.9rem;margin:22px 0 10px; }
.settings-section > button { margin:0 4px 6px 0; }
.settings-section #ceiling-controls { margin-bottom:10px; }
.settings-section #lens-controls { grid-template-columns:auto minmax(50px,1fr) max-content;gap:8px; }
.settings-section #reset-lens { grid-column:2 / -1; }
.settings-section .electrical-planning-content { position:static;inset:auto;width:100%;max-height:none;box-shadow:none;border:0; }
.main-toolbar { flex-wrap:nowrap;gap:12px; }
.viewer-nav { display:flex;gap:16px;align-items:center;margin-right:auto; }
.viewer-nav a { color:#175a88;text-decoration:none;min-height:44px;display:flex;align-items:center; }
.viewer-nav a[aria-current] { color:#262d33;font-weight:700;border-bottom:2px solid #226b9b; }
.main-toolbar .room-field { flex:0 1 280px;min-width:0; }
.main-toolbar #room { min-width:0;width:100%; }
#toggle-controls { position:static;box-shadow:none;flex-shrink:0; }
#study-links a { display:inline-block;color:#175a88;padding:10px 0; }
#ceiling-alert { color:#8c2921;flex-basis:100%; }
#restore-controls { display:none; }
.settings-section .offline-content { position:static;inset:auto;width:100%;max-height:none;box-shadow:none;margin-top:8px; }
@media(max-width:700px) {
  .main-toolbar { display:grid;grid-template-columns:1fr auto auto;padding:8px 12px; }
  .viewer-nav { grid-column:1 / -1;gap:24px; }
  .main-toolbar .room-field { grid-column:1;min-width:0; }
  .main-toolbar #fullscreen { grid-column:2; }
  #toggle-controls { grid-column:3; }
  .controls-open #walkthrough-controls { top:116px;max-height:calc(100dvh - 130px); }
}
@media (any-pointer: coarse), (max-width:700px) {
  body { grid-template-rows:minmax(0,1fr); }
  #stage { grid-row:1; }
  .main-toolbar { position:absolute;inset:0 0 auto;z-index:3; }
  footer { position:absolute;bottom:0;left:0;right:0;z-index:2;background:#f3f5f7; }
  #touch-pad { bottom:max(64px,env(safe-area-inset-bottom)); }
  .phone-exploring .main-toolbar { display:none; }
  .phone-exploring footer { display:contents; }
  .phone-exploring #quick-help,.phone-exploring #status { display:none; }
  .phone-exploring #ceiling-alert { position:fixed;bottom:12px;left:12px;right:12px;z-index:3;background:#f3f5f7;padding:8px; }
  .phone-exploring #restore-controls { display:block;position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5; }
}