:root { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*,*::before,*::after { box-sizing: border-box; }
html,body,#app { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #09090b; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
/* Keep Safari from enlarging fixed overlay controls after rapid taps or rotation.
   The HUD has no editable text; prevent long-press selection and double-tap zoom. */
#toolbar, #unit-menu, #catalog, #table-height-controls {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#toolbar button, #unit-menu button, #catalog button, #table-height-controls button {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#app { position: fixed; inset: 0; }
#viewport,#viewport>canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#viewport>canvas { display: block; touch-action: none; }
#tracked-canvas { z-index: 2; }
/* Intercepts actual screen taps even if the tracking engine adds canvases. */
#ar-touch-layer { position:absolute;inset:0;z-index:4;touch-action:none;user-select:none;-webkit-user-select:none;background:transparent; }
#viewport>canvas[hidden], [hidden] { display: none !important; }
#toolbar { position: absolute; z-index: 11; bottom: max(14px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display:flex; gap:9px; padding:7px; border:1px solid #ffffff20; border-radius:999px; background: #10101599; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
#toolbar button,#error { display:grid; place-items:center; width:43px; height:43px; padding:11px; border:0; border-radius:50%; color:#fff; background:#ffffff13; touch-action:manipulation; cursor:pointer; }
#toolbar button.active,#toolbar button:active { background:#ffffff49; }
#toolbar button:focus-visible,#error:focus-visible { outline:2px solid white; outline-offset:2px; }
svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
#license { opacity:.48; width:34px !important; height:43px !important; padding:10px !important; }
#error { position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:12;color:#ffc178;background:#251f18c9; }
.loading { position:absolute;z-index:9;top:50%;left:50%;width:28px;height:28px;margin:-14px;border:2px solid #ffffff30;border-top-color:white;border-radius:50%;pointer-events:none;animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.sr-only { position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;overflow:hidden;border:0; }
@media (hover:hover) { #toolbar button:hover { background:#ffffff32; } }
/* Compact, hidden-until-open catalog. Viewer remains completely fullscreen. */
.catalog {
  position:absolute;z-index:15;
  bottom:calc(85px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  width:min(340px,calc(100vw - 24px));
  max-height:min(47vh,420px);
  color:#fff;background:#101015e8;border:1px solid #ffffff26;
  border-radius:17px;overflow:hidden;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:0 14px 42px #0006;
}
.catalog-header{display:flex;align-items:center;justify-content:space-between;padding:12px 13px 9px 16px;font:600 13px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.02em;}
.catalog-actions{display:flex;align-items:center;gap:5px;}
.catalog-actions button{display:grid;place-items:center;width:30px;height:30px;padding:7px;color:white;border:0;border-radius:50%;background:#ffffff13;cursor:pointer;}
.catalog-actions button:active{background:#ffffff44;}
.catalog-actions button.refreshing svg{animation:spin .9s linear infinite;}
.model-list{overflow-y:auto;overscroll-behavior:contain;max-height:min(37vh,345px);padding:0 7px 8px;}
.model-option{width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:transparent;color:white;border:0;border-radius:10px;padding:12px 9px;cursor:pointer;font:500 13px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.model-option+.model-option{border-top:1px solid #ffffff0d;}
.model-option:hover,.model-option:focus-visible{background:#ffffff18;}
.model-option.selected{background:#ffffff21;}
.model-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.model-size{font-size:11px;opacity:.48;white-space:nowrap;}
.model-selected-mark{opacity:0;font-size:11px;color:#b9ebd8;}
.model-option.selected .model-selected-mark{opacity:1;}
.catalog-empty{padding:17px 11px 19px;font:12px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#ffffffa3;line-height:1.5;}
@media(max-width:390px){ #toolbar{gap:4px;padding:5px;} #toolbar button{width:38px;height:38px;padding:10px;} #toolbar #license{width:28px!important;height:38px!important;} }

/* In immersive WebXR the Quest uses a real 3D controller-operated catalog. */
#app[data-xr="true"] #toolbar, #app[data-xr="true"] .catalog {display:none!important;}

/* Hidden until the ruler icon is tapped; browser/phone viewer remains icon-only. */
.unit-menu{
  position:absolute;z-index:16;bottom:calc(85px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);width:min(230px,calc(100vw - 20px));
  background:#101015ee;border:1px solid #ffffff26;border-radius:15px;
  padding:6px;box-shadow:0 12px 40px #0008;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.unit-menu button{display:block;width:100%;padding:12px 13px;text-align:left;color:#fff;
  border:0;border-radius:10px;background:transparent;cursor:pointer;
  font:600 16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.unit-menu button:active{background:#245c51;}
.scale-actions{display:flex;gap:6px;}
.scale-actions button{text-align:center;flex:1;}
.scale-current{text-align:center;font:500 11px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#ffffff99;padding:5px 0 7px;}
.unit-menu button:focus-visible{outline:2px solid white;outline-offset:-2px;}
#app[data-xr="true"] .unit-menu{display:none!important;}

/* Troubleshooting only: ?debug=1. Never visible in the normal minimal UI. */
.diagnostics {
  position:absolute;z-index:14;top:max(14px,env(safe-area-inset-top));left:12px;
  max-width:calc(100vw - 80px);padding:9px 11px;border:1px solid #ffffff24;
  border-radius:10px;background:#000b;color:#e1f7e9;
  font:11px/1.45 ui-monospace,SFMono-Regular,monospace;
  pointer-events:none;white-space:pre-wrap;margin:0;
}

/* Only visible in iPhone SLAM tabletop mode. Adjustment is a small, temporary
   control for the virtual 75cm plane; it isn't a claim of native table detection. */
.table-height-controls{position:absolute;z-index:12;right:12px;top:41%;display:flex;
  flex-direction:column;align-items:center;gap:4px;background:#101015b8;
  border:1px solid #ffffff26;border-radius:999px;padding:5px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
.table-height-controls button{border:0;border-radius:50%;background:#ffffff18;
  color:#fff;font:400 22px system-ui,sans-serif;width:38px;height:38px;
  cursor:pointer;touch-action:manipulation;}
.table-height-controls button:active{background:#ffffff44;}
.table-height-controls output{color:#fffd;font:500 10px system-ui,sans-serif;
  white-space:nowrap;min-width:34px;text-align:center;padding:3px 0;}
#app[data-xr="true"] .table-height-controls {display:none!important;}