/* Ondergrond object browser, detail labels and illustrative type views */
#under-browser{width:100%;display:flex;flex-direction:column;gap:8px}
#map-legend{max-width:640px}
.ub-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ub-head .eyebrow{font-size:8px;letter-spacing:1.3px;color:#9dd8bb}
.ub-mode{display:flex;border:1px solid #77988a66;border-radius:5px;overflow:hidden}
.ub-mode button{font-size:9px;padding:4px 9px;color:#bcd6ca;background:transparent;border:0}
.ub-mode button.on{background:#e0eee0;color:#183c30}
.ub-chips{display:flex;flex-wrap:wrap;gap:5px}
#map-legend .ub-chip{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;color:#d5eddf;padding:5px 8px;border:1px solid #77988a55;border-radius:999px;background:#1d464b}
#map-legend .ub-chip:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot)}
#map-legend .ub-chip b{font-weight:600;color:#8fb5a6;font-size:9px}
#map-legend .ub-chip.on{background:#e0eee0;color:#183c30;border-color:#e0eee0}
#map-legend .ub-chip.on b{color:#4d7363}
.ub-list{display:flex;flex-direction:column;max-height:74px;overflow:auto;border:1px solid #65887842;border-radius:6px;scrollbar-width:thin}
.ub-list button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:6px 9px;color:#d5eddf;background:transparent;border:0;border-bottom:1px solid #65887826;font-size:10px}
.ub-list button small{color:#8fb5a6;font-size:8.5px;white-space:nowrap}
.ub-list button:hover{background:#294e4e}
.ub-list button.on{background:#2f5d52;box-shadow:inset 3px 0 0 #9dffd0}
.ub-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#bcd6ca}
.ub-foot .check-label{display:flex;gap:6px;align-items:center}
#ub-all{font-size:9px;padding:5px 10px;border-radius:4px;border:1px solid #9dffd0aa;color:#183c30;background:#9de5c4}
#ub-all.muted{background:transparent;color:#8fb5a6;border-color:#77988a55}
.map-label.detail{font-size:9px;color:#e9fff3;background:#0d2a30d9;border:1px solid #9dffd066;border-radius:3px;padding:3px 6px;text-shadow:none}
.map-label.detail.big{font-size:10px;font-weight:600;border-color:#9dffd0}
.map-label.detail.dim{color:#9dffd0;background:#0d2a30ee}
.map-label.detail.depth{font-size:8px;padding:1px 4px;color:#fff;border-color:#ffffff55}
.map-label.detail.ghost{background:transparent;border:0;color:#d9b88f;font-style:italic}
.type-view{display:flex;gap:10px;align-items:center;margin:4px 0 12px;padding:10px;border:1px dashed #b9c8c0;border-radius:6px;background:#f2f6f2}
.type-view svg{flex-shrink:0;background:#e3ebe6;border-radius:5px}
.type-view .eyebrow{font-size:7.5px;letter-spacing:1.2px;color:#a4814c}
.type-view p{margin:4px 0 0;font-size:10px;line-height:1.45;color:#4f6158}
.root-compare{display:flex;gap:6px;margin:4px 0 12px}
.root-compare div{flex:1;padding:8px;border:1px solid #e3d6bc;border-radius:6px;display:flex;flex-direction:column;gap:2px;font-size:10px;color:#7b6648}
.root-compare div.on{background:#f5ebd9;border-color:#c9935c}
.root-compare b{font-size:12px;color:#5a4128}
.schematic-box{margin:0 0 12px;padding:10px;border:1px dashed #c9935c;border-radius:6px;background:#fbf6eb}
.schematic-box .check-label{display:flex;gap:6px;align-items:center;font-size:11px}
@media(max-width:700px){.ub-list{max-height:80px}#map-legend .ub-chip{font-size:8px;padding:4px 6px}}
#under-browser span:before{content:none!important;display:none!important}
/* --- Underground layout: browser lives in the left sidebar --- */
#map-legend{display:none!important}
body.ug #explore-panel>.eyebrow,body.ug #explore-panel>h1,body.ug #explore-panel>.intro,body.ug #explore-panel .area-picker,body.ug #explore-panel .source-shortcut,body.ug #explore-panel #start-corridor,body.ug #explore-panel .panel-foot{display:none!important}
body.ug #layers-toggle{cursor:pointer;margin:10px 0 4px;flex-shrink:0}
body.ug #layers-toggle:after{content:' ▾';color:var(--muted)}
body.ug.layers-open #layers-toggle:after{content:' ▴'}
body.ug #layer-list{display:none;flex:none;min-height:0;max-height:180px}
body.ug.layers-open #layer-list{display:block}
#under-section{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
#under-section.hidden{display:none}
#under-section #under-browser{flex:1;min-height:0;gap:9px}
#under-section .ub-head .eyebrow{color:var(--accent)}
#under-section .ub-mode{border-color:var(--line)}
#under-section .ub-mode button{color:var(--muted)}
#under-section .ub-mode button.on{background:var(--deep);color:#e9f6ee}
#under-section .ub-chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--ink);padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:#fff}
#under-section .ub-chip:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot)}
#under-section .ub-chip b{font-weight:600;color:var(--muted);font-size:9px}
#under-section .ub-chip.on{background:var(--deep);color:#e9f6ee;border-color:var(--deep)}
#under-section .ub-chip.on b{color:#9de5c4}
#under-section .ub-list{flex:1;min-height:60px;max-height:none;border-color:var(--line)}
#under-section .ub-list button{color:var(--ink);border-bottom-color:var(--line);font-size:10.5px}
#under-section .ub-list button small{color:var(--muted)}
#under-section .ub-list button:hover{background:#eef4ef}
#under-section .ub-list button.on{background:#e3f1e8;box-shadow:inset 3px 0 0 var(--accent)}
#under-section .ub-foot{color:var(--muted);font-size:10px}
#under-section #ub-all{color:#e9f6ee;background:var(--accent);border-color:var(--accent)}
#under-section #ub-all.muted{background:transparent;color:var(--muted);border-color:var(--line)}
#under-section #underground-scale-note{font-size:9px;color:var(--muted);line-height:1.5}
#under-section .shape-actions{border-top:1px solid var(--line);padding-top:8px;gap:5px}
#under-section .shape-actions button{color:var(--ink);background:#fff;border:1px solid var(--line);font-size:9px;padding:5px 7px}
#under-section .shape-actions button:hover{background:#eef4ef}
.card-back{display:none;font-size:11px;color:var(--accent);background:none;border:0;padding:0 0 8px}
/* Narrow: never two wide panels at once; card replaces list */
@media(max-width:1000px){body.ug.card-open #sidebar{display:none}.card-back{display:block}body.ug #object-card{left:auto;right:58px;width:min(300px,calc(100vw - 80px))}}
/* Quick detail shortcuts + mode line */
.ub-quick{padding:10px;border-radius:8px;background:var(--deep);color:#e9f6ee;display:flex;flex-direction:column;gap:8px}
.ub-quick-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ub-quick-head strong{font-size:13px}.ub-quick-head small{font-size:9px;color:#9de5c4}
.ub-quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ub-quick-row button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;font-size:10px;line-height:1.2;color:#e9f6ee;background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;text-align:center}
.ub-quick-row button:hover,.ub-quick-row button:focus-visible{background:#ffffff26;border-color:#9de5c4}
.ub-quick-row button.on{background:#9de5c4;color:#183c30}
.ub-quick-row i{width:26px;height:12px;display:block;border-radius:6px}
.q-riool{background:linear-gradient(#b48a5a,#7d5a35);box-shadow:inset 0 0 0 2px #e8d2b0}
.q-elektriciteit{height:5px!important;margin:4px 0;background:#e05b4f;box-shadow:0 0 0 2px #e05b4f55}
.q-wortels{border-radius:50%!important;width:18px!important;height:14px!important;border:2px dashed #d9a066;background:#d9a06633}
.ub-modeline{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--muted);line-height:1.4}
.ub-modeline b{font-size:11px;color:var(--ink);letter-spacing:.3px}
.ub-ctx{font-size:10.5px;display:flex;gap:6px;align-items:center;color:var(--ink)}
.card-net{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
#back-network{font-size:11px;font-weight:600;padding:6px 10px;border-radius:5px;border:1px solid var(--accent);background:var(--accent);color:#fff}
/* Sidebar stacks naturally and scrolls instead of overlapping */
#under-section{overflow-y:auto;scrollbar-width:thin;padding-right:2px}
#under-section #under-browser{flex:none}
#under-section .ub-list{flex:none;max-height:150px}
#under-section>*{flex-shrink:0}