/* Viewer workspace, bound to the portable XYZ BIM sheets. Analytical distance
   colours are fixed across light/dark themes, matching the site's distance layer.
   --accent / --accent-ink are NOT set here: the product binding (Point Cloud blue, white ink) lives
   once, in viewer.css. Re-binding them here to another product's colour made the viewer brick. */
:root { --masthead:54px; --topbar:56px; --panel:390px; --drawer:350px; --pad:22px;
  --chrome:var(--bg); --chrome-2:var(--bg-2);
  --distance-low:rgb(68,1,84); --distance-mid:rgb(33,145,140); --distance-high:rgb(253,231,37); --distance-excluded:rgb(132,136,142); }
#viewerMasthead { position:relative; }
#app { overflow:hidden; height:100dvh; }
#topbar { top:var(--masthead); height:var(--topbar); background:var(--bg); border-bottom:1px solid var(--line); padding:0 22px; gap:14px; }
.workspace-label,.eyebrow { font:400 10px/1.5 var(--f-mono); letter-spacing:.1em; color:var(--ink-3); }
.workspace-label { white-space:nowrap; padding-right:12px; border-right:1px solid var(--line); }
#topbar .pill { padding:0; background:none; backdrop-filter:none; }
#searchbox { width:190px; font-size:11px; }
.tgroup { background:none; backdrop-filter:none; padding:0; gap:5px; }
.tbtn { width:32px; height:34px; }
.text-button { display:flex; gap:10px; width:auto; padding:0 10px; font-size:11px; white-space:nowrap; }
.compare-button { background:var(--ink); color:var(--bg); padding:0 15px; }
.compare-button:hover,.compare-button[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
#rail { top:calc(var(--masthead) + var(--topbar)); width:var(--rail); padding-top:16px; border-right:1px solid var(--line); background:var(--bg); }
.rbtn { background:none; backdrop-filter:none; width:40px; height:42px; }
#drawer,#panel { top:calc(var(--masthead) + var(--topbar)); }
#drawer.open { box-shadow:8px 0 24px color-mix(in srgb,var(--ink) 4%,transparent); }
.phead { height:52px; }
#drawer .phead { padding-left:calc(var(--rail) + 14px); }
#panel .phead { padding-left:24px; }
.phead h2 { font-size:12px; font-weight:500; }
#panel .pbody { padding:0 24px 28px; }
#panel:has(#modelTools) .pbody { padding-top:0; }
#rightstrip { top:calc(var(--masthead) + var(--topbar)); }
#viewcube { top:calc(var(--masthead) + var(--topbar) + 12px); }
#hint { font-size:10px; gap:10px; text-shadow:none; flex-wrap:wrap; right:240px; opacity:.8; }
#stamp { text-shadow:none; font-family:var(--f-mono); font-size:9px; }
.compare-intro { padding:24px 0 22px; }
.compare-intro h3 { font-weight:400; font-size:28px; line-height:1.15; letter-spacing:-.035em; margin:12px 0; }
.compare-intro p,.compare-note { font-size:11px; line-height:1.7; color:var(--ink-3); overflow-wrap:anywhere; }
.compare-section { border-top:1px solid var(--line); padding:20px 0; }
.compare-section h4 { display:flex; gap:13px; align-items:center; font-size:12px; font-weight:500; margin:0 0 14px; }
.compare-section h4>span { font:10px var(--f-mono); color:var(--accent); }
.compare-section .primary { display:flex; justify-content:space-between; align-items:center; width:100%; margin:10px 0; padding:10px 12px; background:var(--ink); color:var(--bg); font-size:12px; }
.compare-section .primary:hover { background:var(--accent); color:var(--accent-ink); }
.compare-section button:disabled { opacity:.35; cursor:default; }
.compare-actions { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.compare-section .minib { padding:7px 9px; font-size:10px; }
.minib:hover { background:var(--chrome-2); color:var(--ink); border-color:var(--ink-3); }
.compare-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; }
.compare-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.compare-grid label { font:10px/1.5 var(--f-mono); color:var(--ink-3); }
.compare-grid input,.compare-grid select,.compare-advanced textarea { width:100%; min-width:0; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); padding:8px; margin-top:6px; border-radius:var(--radius); font:11px var(--f-mono); }
.compare-advanced { margin:16px 0; font-size:11px; }
.compare-advanced summary { cursor:pointer; }
.compare-advanced p { margin-top:10px; }
.compare-advanced textarea { resize:vertical; margin-bottom:8px; }
.compare-check { display:flex; align-items:flex-start; gap:10px; font-size:11px; line-height:1.6; margin:14px 0 0; }
.compare-check input { flex:none; margin-top:3px; accent-color:var(--accent); }
.compare-range { display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:11px; color:var(--ink-3); }
.compare-range input { width:130px; accent-color:var(--accent); }
#compareProgress { width:100%; height:4px; margin:12px 0; accent-color:var(--accent); }
#compareStatus { margin-top:10px; color:var(--ink-2); }
.compare-metrics { display:grid; grid-template-columns:1fr 1fr; margin:12px 0 20px; }
.compare-metrics>div { display:flex; flex-direction:column; gap:7px; }
.compare-metrics span { font:9px var(--f-mono); text-transform:uppercase; color:var(--ink-3); }
.compare-metrics strong { font:400 24px var(--f-sans); letter-spacing:-.04em; }
.distance-bands { font:10px/1.6 var(--f-mono); }
.distance-bands>div { display:flex; align-items:center; gap:9px; margin:8px 0; }
.distance-bands i { width:14px; height:8px; flex:none; }
.distance-bands span { flex:1; }.distance-bands b { font-weight:400; }
.distance-low { background:var(--distance-low); }.distance-mid { background:var(--distance-mid); }.distance-high { background:var(--distance-high); }.distance-excluded { background:var(--distance-excluded); }
#distanceLegend { position:absolute; left:calc(var(--rail) + 20px); top:calc(var(--masthead) + var(--topbar) + 20px); background:var(--bg); border:1px solid var(--line); padding:12px 16px; pointer-events:none; }
#distanceLegend .distance-bands { display:flex; gap:18px; flex-wrap:wrap; }
#distanceLegend .distance-bands>div { margin:8px 0 0; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Existing measurement controls now follow the same theme contract. */
.mdesc,.dlgcard input[readonly],.mfolder { background:var(--bg-2); color:var(--ink); }
.mfolder .mfhead,.mfempty { color:var(--ink-2); }.mfolder .mfhead:hover { background:var(--bg); }
@media(max-width:1150px) { .workspace-label { display:none; } #searchbox { width:155px; } #topbar { gap:8px; padding-inline:12px; } }
@media(max-width:850px) { #topbar .pill,#btnOpenSplat,#btnExportCloud { display:none; } #topbar { gap:5px; } #topbar .spacer { display:none; } .text-button { padding-inline:8px; } #hint { display:none; } }
@media(max-width:600px) {
  :root { --panel:min(390px,calc(100vw - 56px)); --drawer:min(350px,100vw); --pad:14px; }
  #topbar { padding:0 8px; justify-content:space-between; gap:4px; }.tgroup { gap:2px; }.tbtn { width:28px; }.text-button { width:auto; font-size:10px; padding:0 6px; }
  #btnOpenCloud svg,#btnOpenE57Folder,#btnBase,#btn2d,#btn3d { display:none; }
  #panel .pbody { padding-inline:18px; } #stage.pushed { right:0; }
  #distanceLegend { right:14px; padding:10px; } #distanceLegend .distance-bands { gap:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto; transition:none; animation:none; } }