/* ═══════════════════════════════════════════════════════════════════════════
   map-app.css — B65 W3 · Map › Zones · Places · Addresses (+ the 3D interior)
   The look is samples/b65/map.html + places-3d.html (approved 2026-09-28).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── frame ─────────────────────────────────────────────────────────────── */
.page-view[data-view="map"] > .page{ overflow:hidden; }
/* the shell pads every non-header child of .page (`.page > :not(.page-h)`); the map
   frame sets its own inset with margins, so that padding would double it */
.page-view[data-view="map"] .page > .mx, .page-view[data-view="map"] .page > .mx-bar{ padding:0; }
.mx-bar{ margin-inline:24px;min-width:0;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;flex:none; }
.mx-bar::-webkit-scrollbar{ display:none; }
.mx-bar.is-docked{ margin-inline:0; }
.mx-bar[hidden]{ display:none !important; }
.mx-seg{ flex:none;white-space:nowrap; }
.mx-seg button{ white-space:nowrap; }
.mx-sort{ display:inline-flex;align-items:center; }
.mx-sort-ic{ font-size:17px;color:var(--fg-3);padding-inline:6px 2px; }

.mx{ flex:1;min-height:0;display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.25fr);gap:14px;margin:0 24px 24px;position:relative; }
.mx-list{ overflow:auto;min-height:0;padding:3px;overscroll-behavior:contain; }
.mx-mapc{ position:relative;min-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg-2); }
.mx-map{ position:absolute;inset:0; }
.mx-map .leaflet-container, .mx-map.leaflet-container{ font-family:var(--mk-font-ui);background:var(--bg-3); }
.mx.is-3d > .mx-list, .mx.is-3d > .mx-mapc{ display:none; }
.mx-3d{ grid-column:1 / -1;min-height:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg-1); }
.mx-3d[hidden]{ display:none; }

/* ── tree-map boxes (Frontend's nt-box grammar, sample § tm) ───────────── */
.mx-tm{ display:flex;flex-direction:column;gap:6px; }
.mx-box{ border:1px solid var(--border);border-radius:12px;background:var(--bg-1); }
.mx-row{ display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 8px 6px 6px;cursor:pointer;border-radius:11px;position:relative;outline:none; }
.mx-row:hover{ background:var(--bg-2); }
.mx-row:focus-visible{ box-shadow:0 0 0 2px var(--accent); }
.mx-box.open > .mx-row{ background:color-mix(in srgb, var(--accent) 9%, var(--bg-1)); }
.mx-tw{ width:24px;height:24px;flex:none;display:grid;place-items:center;border:0;background:none;color:var(--fg-3);cursor:pointer;border-radius:6px;transition:transform .15s; }
.mx-tw .mi{ font-size:20px; }
[dir="rtl"] .mx-tw{ transform:scaleX(-1); }
.mx-box.open > .mx-row .mx-tw{ transform:rotate(90deg); }
.mx-tw.leaf{ visibility:hidden; }
.mx-ic{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg-3);color:var(--fg-2);flex:0 0 auto;overflow:hidden; }
.mx-ic[style*="--c"]{ background:color-mix(in srgb, var(--c) 18%, transparent);color:var(--c); }
.mx-ic .mi{ font-size:18px; }
.mx-ic img{ width:100%;height:100%;object-fit:contain;background:#fff;padding:3px; }
.mx-nmw{ display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:2px; }
.mx-l1{ display:flex;align-items:center;gap:6px;min-width:0; }
.mx-l2{ display:flex;flex-wrap:wrap;gap:4px;min-width:0; }
.mx-nm{ font:600 13.5px/1.25 var(--mk-font-ui);color:var(--fg-1);min-width:36px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mx-sub{ font:500 11.5px/1.3 var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mx-sp{ flex:1;min-width:6px; }
.mx-type{ height:20px;padding:0 7px;border-radius:6px;font:600 11px/18px var(--mk-font-ui);display:inline-block;border:1px solid var(--border);color:var(--fg-2);background:var(--bg-2);white-space:nowrap;flex:0 4 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.mx-rule{ font:600 11.5px var(--mk-font-ui);color:var(--fg-2);background:var(--bg-3);border-radius:6px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:3px; }
.mx-rule .mi{ font-size:14px; }
.mx-acc{ display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 6px;border-radius:6px;font:700 11px var(--mk-font-ui);white-space:nowrap;flex:none; }
.mx-acc .mi{ font-size:14px; }
.mx-acc.in{ background:color-mix(in srgb, var(--mk-success, #16A34A) 16%, transparent);color:var(--mk-ok, #157F4C); }
.mx-acc.out{ background:color-mix(in srgb, var(--mk-danger, #DC2626) 14%, transparent);color:var(--mk-danger, #C81E1E); }
.mx-acc.open{ background:var(--accent-soft);color:var(--accent-text); }
.mx-meta{ display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.15;white-space:nowrap;flex:none; }
.mx-meta b{ font:700 12.5px var(--mk-font-ui);color:var(--fg-1); }
.mx-meta i{ font:500 11px var(--mk-font-ui);font-style:normal;color:var(--fg-3); }
.mx-meta.by-area{ flex-direction:column-reverse; }
.mx-meta.by-area i{ font-weight:700;color:var(--fg-1);font-size:12.5px; }
.mx-meta.by-area b{ font-weight:500;color:var(--fg-3);font-size:11px; }
.mx-cnt{ display:inline-flex;align-items:center;gap:1px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font:700 11px var(--mk-font-ui);flex:none; }
.mx-cnt .mi{ font-size:13px; }
.mx-enter{ height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);font:700 12px var(--mk-font-ui);display:inline-flex;align-items:center;gap:4px;cursor:pointer;flex:none;white-space:nowrap; }
.mx-enter .mi{ font-size:16px; }
.mx-enter:hover{ background:var(--accent);color:var(--accent-fg, #fff); }
.mx-act{ width:28px;height:28px;border-radius:8px;border:1px dashed var(--border-strong, var(--border));background:none;display:grid;place-items:center;color:var(--fg-2);cursor:pointer;opacity:0;transition:opacity .12s;flex:none; }
.mx-act[data-mx-open], .mx-act[data-mx-apopen]{ border-style:solid;border-color:transparent; }
.mx-act .mi{ font-size:17px; }
.mx-row:hover .mx-act, .mx-row:focus-within .mx-act, .mx-row.mx-glow .mx-act{ opacity:1; }
@media (pointer:coarse){ .mx-act{ opacity:1; } }
.mx-kids{ display:none;flex-direction:column;gap:6px;padding:0 6px 6px 18px; }
[dir="rtl"] .mx-kids{ padding:0 18px 6px 6px; }
.mx-box.open > .mx-kids{ display:flex; }
.mx-empty{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--fg-3);font:500 13px var(--mk-font-ui); }
.mx-empty > .mi{ font-size:32px;color:var(--fg-3); }
.mx-empty b{ color:var(--fg-1);font:700 14px var(--mk-font-ui); }

/* the animated multicolour outline — tree ⇄ map hover link (sample `.mk-glow`) */
@property --mx-a{ syntax:'<angle>';inherits:false;initial-value:0deg; }
@keyframes mxHue{ to{ --mx-a:360deg; } }
.mx-glow::after{ content:'';position:absolute;inset:-2px;border-radius:12px;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--mx-a),#03C9CB,#7C3AED,#FF4D8D,#F59E0B,#22C55E,#03C9CB);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mxHue 2.4s linear infinite; }
.mx-arow.mx-glow::after{ border-radius:13px; }
.leaflet-interactive.mx-glowpath{ stroke-dasharray:8 6;animation:mxDash 1s linear infinite, mxStroke 2.4s linear infinite;stroke-width:4; }
@keyframes mxDash{ to{ stroke-dashoffset:-28; } }
@keyframes mxStroke{ 0%{ stroke:#03C9CB } 25%{ stroke:#7C3AED } 50%{ stroke:#FF4D8D } 75%{ stroke:#F59E0B } 100%{ stroke:#03C9CB } }
.mx-glowpin{ box-shadow:0 0 0 3px #fff, 0 0 0 6px #7C3AED !important; }
@media (prefers-reduced-motion:reduce){ .mx-glow::after, .leaflet-interactive.mx-glowpath{ animation:none; } }

/* ── map chrome ───────────────────────────────────────────────────────── */
.mx-fit{ height:34px;padding:0 11px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--mk-font-ui);cursor:pointer;box-shadow:0 6px 16px -10px rgba(0,0,0,.4); }
.mx-fit .mi{ font-size:17px; }
.mx-tip.leaflet-tooltip{ background:var(--bg-1);color:var(--fg-1);border:1px solid var(--border);border-radius:9px;padding:5px 9px;font:600 12px/1.35 var(--mk-font-ui);box-shadow:0 10px 24px -14px rgba(0,0,0,.5); }
.mx-tip.leaflet-tooltip small{ font-weight:500;color:var(--fg-3); }
.mx-tip.leaflet-tooltip::before{ display:none; }   /* no caret tooltips anywhere (standing rule) */
.mx-clu{ width:var(--s);height:var(--s);border-radius:50%;background:rgba(3,201,203,.92);border:3px solid #fff;color:#fff;display:grid;place-items:center;font:800 14px var(--mk-font-ui);box-shadow:0 8px 20px -8px rgba(0,0,0,.6);cursor:pointer; }
.mx-ppin{ width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.55);display:grid;place-items:center;color:#22526A;overflow:hidden;cursor:pointer; }
.mx-ppin .mi{ font-size:17px; }
.mx-ppin img{ width:100%;height:100%;object-fit:contain; }
.mx-apin-wrap{ background:none;border:0; }
.mx-apin{ height:28px;padding:0 6px;border-radius:9px;display:inline-flex;align-items:center;gap:1px;color:#fff;border:2px solid #fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.6);white-space:nowrap;cursor:pointer;background:#028E90; }
.mx-apin.in{ background:#157F4C; } .mx-apin.out{ background:#C81E1E; }
.mx-apin .mi{ font-size:16px; }
.mx-avpin{ display:inline-flex;align-items:center;padding:3px;border-radius:999px;background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);cursor:pointer;white-space:nowrap; }
.mx-avpin i, .mx-stk i{ width:30px;height:30px;border-radius:50%;background:center/cover #ddd;border:2px solid #fff;margin-inline-start:-10px;display:grid;place-items:center;font:700 10px var(--mk-font-ui);font-style:normal;color:#0D2530;flex:none; }
.mx-avpin i:first-child, .mx-stk i:first-child{ margin-inline-start:0; }
.mx-avpin i.is-logo, .mx-stk i.is-logo{ background-color:#fff;background-size:78%;background-repeat:no-repeat;border-color:#e5e7eb; }
.mx-avpin b{ font:800 12px var(--mk-font-ui);padding:0 7px 0 5px;color:#0D2530; }
.mx-stk{ display:inline-flex;align-items:center;flex:none; }
.mx-stk i{ width:32px;height:32px;border-color:var(--bg-1); }
.mx-stk i.mx-more{ background:var(--bg-3);color:var(--fg-2); }

.mx-card{ position:absolute;z-index:600;inset-inline-start:12px;bottom:12px;width:min(340px, calc(100% - 24px));padding:12px;border-radius:14px;background:var(--bg-1);border:1px solid var(--border);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px; }
.mx-card[hidden]{ display:none; }
.mx-card-h{ display:flex;align-items:center;gap:10px; }
.mx-card-t{ flex:1;min-width:0;display:flex;flex-direction:column; }
.mx-card-t b{ font:700 15px var(--mk-font-ui);color:var(--fg-1); }
.mx-card-t span{ font:500 12.5px var(--mk-font-ui);color:var(--fg-3); }
.mx-card-x{ width:30px;height:30px;border-radius:9px;border:0;background:none;color:var(--fg-3);display:grid;place-items:center;cursor:pointer;flex:none; }
.mx-card-x:hover{ background:var(--bg-3); }
.mx-card-l{ font:500 12.5px/1.4 var(--mk-font-ui);color:var(--fg-2);display:flex;gap:6px;align-items:flex-start; }
.mx-card-l .mi{ font-size:16px;color:var(--fg-3); }
.mx-card-acc{ display:flex;flex-wrap:wrap;gap:4px; }
.mx-card-a{ display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.mx-onlychip{ position:absolute;z-index:600;top:12px;inset-inline-start:56px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 10px;border-radius:999px;background:var(--bg-1);border:1px solid var(--border);font:600 12.5px var(--mk-font-ui);box-shadow:0 8px 20px -12px rgba(0,0,0,.5); }
.mx-onlychip[hidden]{ display:none; }
.mx-onlychip .mi{ font-size:16px;color:var(--accent-text); }
.mx-onlychip button{ display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 9px;border-radius:999px;border:0;background:var(--bg-3);font:600 12px var(--mk-font-ui);color:var(--fg-1);cursor:pointer; }
.mx-onlychip button .mi{ font-size:14px;color:var(--fg-2); }

/* ── addresses list ───────────────────────────────────────────────────── */
.mx-alist{ display:flex;flex-direction:column;gap:8px; }
.mx-arow{ position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-1);cursor:pointer;outline:none; }
.mx-arow:hover{ background:var(--bg-2); }
.mx-arow:focus-visible{ box-shadow:0 0 0 2px var(--accent); }
.mx-arow.is-sel{ border-color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, var(--bg-1)); }
.mx-am{ flex:1;min-width:0;display:flex;flex-direction:column; }
.mx-am b{ font:600 14px var(--mk-font-ui);color:var(--fg-1); }
.mx-am span, .mx-am small{ font:500 12.5px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mx-am small{ font-size:11.5px; }
.mx-go{ height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);font:600 12.5px var(--mk-font-ui);display:inline-flex;align-items:center;gap:4px;cursor:pointer;flex:none; }
.mx-go:hover{ border-color:var(--accent);color:var(--accent-text); }
.mx-go .mi{ font-size:17px; }

/* ── panels ───────────────────────────────────────────────────────────── */
.mx-panel .mx-kv{ display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--divider, var(--border));font:500 13.5px var(--mk-font-ui); }
.mx-panel .mx-kv > span{ color:var(--fg-3);flex:none; }
.mx-panel .mx-kv > b{ font-weight:600;color:var(--fg-1);text-align:end;min-width:0; }
.mx-panel .mx-kv .mx-acc{ vertical-align:middle; }
.mx-path{ display:flex;align-items:center;gap:4px;font:600 12px var(--mk-font-ui);color:var(--fg-3);margin-bottom:6px; }
.mx-path .mi{ font-size:15px; }
.mx-muted{ font:500 12.5px/1.45 var(--mk-font-ui);color:var(--fg-3);padding:8px 0;display:flex;gap:6px;align-items:flex-start; }
.mx-muted .mi{ font-size:16px; }
.mx-sum-ic{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg-3);color:var(--fg-2);font-size:18px;flex:none; }
.mx-apsum .mx-acc{ flex:none; }
.mx-form{ border-bottom:0; }
.mx-fseg{ display:flex;flex-wrap:wrap; }
.mx-days, .mx-bodies{ display:flex;flex-wrap:wrap;gap:6px; }
.mx-days button, .mx-bodies button{ height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);font:600 12.5px var(--mk-font-ui);display:inline-flex;align-items:center;gap:5px;cursor:pointer; }
.mx-days button.on, .mx-bodies button.on{ background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text); }
.mx-bodies .mi{ font-size:17px; }
.mx-check{ display:flex;align-items:center;gap:8px;font:600 13px var(--mk-font-ui);color:var(--fg-1);cursor:pointer;padding:4px 0; }
.mx-check input{ width:18px;height:18px;accent-color:var(--accent); }
.mx-mapin{ height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--border);position:relative; }
.mx-danger{ color:var(--mk-danger, #C81E1E) !important; }
.mx-panel .panel-ft{ flex-wrap:wrap;gap:6px; }

/* ── tablet + phone portrait: map FIXED on top, the list scrolls under it (B63-121) ── */
@media (max-width:600px) and (orientation:portrait),
       (min-width:601px) and (max-width:1024px) and (min-height:600px){
  .mx{ display:flex;flex-direction:column;flex:none;height:var(--mx-h, calc(100dvh - 220px));margin:0 16px 12px;gap:10px; }
  .mx-mapc{ order:-1;flex:none;height:calc(var(--mx-h, calc(100dvh - 220px)) * .5);min-height:200px; }
  .mx-list{ flex:1;min-height:0; }
  .mx-bar{ margin-inline:16px; }
  .mx-card{ inset-inline:8px;bottom:8px;width:auto;padding:10px; }
  .mx-onlychip{ top:8px;inset-inline-start:52px; }
  .mx-3d{ flex:1; }
}
@media (max-width:600px) and (orientation:portrait){
  .mx-kids{ padding-inline:14px 6px; }
  .mx-row{ gap:6px;padding-inline:4px 6px; }
  .mx-l1 .mx-type{ display:none; }
}
/* phone landscape: side by side, fold-sized */
@media (max-height:599px) and (orientation:landscape){
  .mx{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100dvh - 110px);flex:none;margin:0 12px 10px;gap:10px; }
  .mx-bar{ margin-inline:12px; }
  .mx-card{ bottom:8px;inset-inline-start:8px;width:calc(100% - 16px);padding:9px;gap:6px; }
}

/* ══ 3D interior (places-3d.js) ══════════════════════════════════════════ */
.p3-loading{ flex:1;display:grid;place-items:center;color:var(--accent-text); }
.p3-loading .mi{ font-size:40px;animation:p3spin 1.4s linear infinite; }
@keyframes p3spin{ to{ transform:rotate(360deg); } }
.p3-hd{ display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-1);flex-wrap:wrap;flex:none; }
.p3-back{ width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);display:grid;place-items:center;cursor:pointer;color:var(--fg-1);flex:none; }
[dir="rtl"] .p3-back .mi{ transform:scaleX(-1); }
.p3-ttl{ min-width:0;flex:1 1 160px; }
.p3-crumb{ display:flex;align-items:center;gap:2px;font:600 12px var(--mk-font-ui);color:var(--fg-3);flex-wrap:wrap; }
.p3-crumb button{ border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer; }
.p3-crumb button:hover{ color:var(--accent-text);text-decoration:underline; }
.p3-crumb .mi{ font-size:15px; }
[dir="rtl"] .p3-crumb .mi{ transform:scaleX(-1); }
.p3-ttl h3{ margin:0;font:700 18px var(--mk-font-ui);color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.p3-body{ flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr) 290px; }
.p3-tree{ overflow:auto;padding:10px;background:var(--bg-1);border-inline-end:1px solid var(--border); }
.p3-stage{ position:relative;min-height:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%,#ffffff,#e9f3f5 45%,#d5e6ea);touch-action:none; }
[data-theme="dark"] .p3-stage{ background:radial-gradient(120% 90% at 50% 10%,#1b3440,#0f2129 50%,#08141a); }
/* Audit A — CSS2D gives each label its own z-index (one per object); the GL layer keeps them inside it, under the
   floor HUD and under the Inside tree that slides over the stage on tablets */
.p3-gl{ position:absolute;inset:0;z-index:0; }
.p3-gl canvas{ display:block;outline:none; }
.p3-lbl{ font:700 11px var(--mk-font-ui);color:#0D2530;background:rgba(255,255,255,.9);padding:3px 8px;border-radius:999px;border:1px solid rgba(13,37,48,.12);white-space:nowrap;pointer-events:none;transition:opacity .2s; }
.p3-lbl.floor{ background:#0D2530;color:#fff;border:0; }
.p3-lbl.bldg{ background:var(--accent);color:#fff;border:0;font-size:12px; }
.p3-lbl.door{ display:inline-flex;align-items:center;gap:1px;padding:2px 6px;color:#fff;border:2px solid #fff;border-radius:8px;background:#028E90; }
.p3-lbl.door.in{ background:#157F4C; } .p3-lbl.door.out{ background:#C81E1E; }
.p3-lbl.door .mi{ font-size:14px; }
.p3-lbl.dim{ opacity:0; }
.p3-hud{ position:absolute;inset-inline-start:12px;top:12px;display:flex;flex-direction:column;gap:8px;z-index:3;max-height:calc(100% - 24px); }
.p3-floors{ display:flex;flex-direction:column;gap:3px;padding:4px;border-radius:12px;background:var(--bg-1);border:1px solid var(--border);box-shadow:0 10px 30px -18px rgba(0,0,0,.4);overflow:auto; }
.p3-floors button{ border:0;background:none;height:34px;min-width:44px;padding:0 10px;border-radius:8px;font:700 12.5px var(--mk-font-ui);cursor:pointer;color:var(--fg-2); }
.p3-floors button.on{ background:var(--accent);color:var(--accent-fg, #fff); }
.p3-tools{ position:absolute;inset-inline-end:12px;bottom:12px;display:flex;gap:8px;z-index:3;flex-wrap:wrap;justify-content:flex-end; }
.p3-tools label{ display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;background:var(--bg-1);border:1px solid var(--border);font:600 12.5px var(--mk-font-ui);color:var(--fg-1); }
.p3-tools input[type=range]{ width:110px;accent-color:var(--accent); }
.p3-hint{ position:absolute;inset-inline-start:12px;bottom:12px;z-index:3;font:600 11.5px var(--mk-font-ui);color:var(--fg-3);background:color-mix(in srgb, var(--bg-1) 80%, transparent);padding:5px 9px;border-radius:8px;max-width:calc(100% - 290px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.p3-side{ overflow:auto;background:var(--bg-1);border-inline-start:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:10px; }
.p3-side h4{ margin:0;font:700 17px var(--mk-font-ui);color:var(--fg-1); }
.p3-side .mx-kv{ display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--divider, var(--border));font:500 13px var(--mk-font-ui); }
.p3-side .mx-kv span{ color:var(--fg-3); }
.p3-side .mx-kv b{ text-align:end;font-weight:600;color:var(--fg-1); }
.p3-side-a{ display:flex;gap:6px;flex-wrap:wrap; }
.p3-scan{ border:1px dashed var(--border-strong, var(--border));border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;font:600 12.5px/1.4 var(--mk-font-ui);color:var(--fg-2);cursor:pointer;background:none;text-align:start;width:100%; }
.p3-scan:hover{ border-color:var(--accent);background:var(--accent-soft); }
.p3-scan > .mi{ font-size:26px;color:var(--accent-text);flex:none; }
.p3-scan b{ display:block;color:var(--fg-1); }
.p3-scan.has{ border-style:solid;border-color:var(--accent); }
.p3-tree .mx-row.hot{ background:var(--accent-soft); }
.p3-sheet-t{ display:none; }
@media (max-width:1100px){
  .p3-body{ grid-template-columns:minmax(0,1fr) 270px; }
  .p3-tree{ display:none; }
  .p3-body.show-tree .p3-tree{ display:block;position:absolute;z-index:5;inset-block:0;inset-inline-start:0;width:min(300px, 86%);box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
  .p3-sheet-t{ display:inline-flex; }
  .p3-body{ position:relative; }
}
@media (max-width:760px){
  .p3-body{ grid-template-columns:1fr;grid-template-rows:minmax(0,62%) minmax(0,38%); }
  .p3-side{ border-inline-start:0;border-top:1px solid var(--border);padding:12px; }
  .p3-hd{ padding:8px; }
  .p3-ttl h3{ font-size:16px; }
  .p3-tools{ bottom:8px;inset-inline-end:8px; }
  .p3-tools input[type=range]{ width:80px; }
  .p3-hint{ display:none; }
  .p3-hud{ top:8px;inset-inline-start:8px; }
  .p3-floors button{ height:30px;min-width:38px;padding:0 8px; }
}
@media (max-height:599px) and (orientation:landscape){
  .p3-body{ grid-template-columns:minmax(0,1fr) 240px; }
  .p3-side{ max-height:none; }
  .p3-hd{ padding:6px 8px; }
}
/* B66 W1 (066-058) — the 3D in the main-content slide fills it */
.mx-3d.mx-3d-slide{ grid-column:auto; flex:1; min-height:0; border:0; border-radius:0; }
/* the slide's own ‹ back is the way out; the viewer's duplicate back steps aside
   (its crumb still climbs to the parent place) */
.mx-3d-slide .p3-back{ display:none; }
/* B66 W7 (066-055 · 056) — the zone panel: a head (icon tile, name, level chip), then the key facts as rows */
.mx-panel .mx-zhd{ display:flex;align-items:center;gap:12px;padding:2px 0 14px; }
.mx-panel .mx-zic{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);flex:none; }
.mx-panel .mx-zic .mi{ font-size:22px; }
.mx-panel .mx-zhd b{ display:block;font:700 16px/1.25 var(--mk-font-ui);color:var(--fg-1); }
.mx-panel .mx-zlv{ display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-top:4px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);font:600 11.5px var(--mk-font-ui);color:var(--fg-2); }
.mx-panel .mx-kvs{ margin-bottom:6px; }
.mx-panel .mx-zlink{ border:0;background:none;padding:0;font:inherit;color:var(--accent-text);cursor:pointer; }
.mx-panel .mx-zlink:hover{ text-decoration:underline; }
/* B66 W7 (066-063) — Spread lives in the viewer's toolbar, at the end with the 3D ⇄ Plan control; Plan disables it (060) */
.p3-spread{ display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;background:var(--bg-1);border:1px solid var(--border);font:600 12.5px var(--mk-font-ui);color:var(--fg-1);flex:none; }
.p3-spread input[type=range]{ width:110px;accent-color:var(--accent); }
.p3-spread.is-off{ opacity:.45; }
@media (max-width:600px){ .p3-spread input[type=range]{ width:70px; } .p3-spread [data-l]{ display:none; } }
/* 066-061 — the 3D tree: one indent step, even padding between boxes */
.p3-tree .mx-tm{ gap:8px; }
.p3-tree .mx-row{ min-height:44px;padding:6px 8px;gap:8px; }
.p3-tree .mx-kids{ gap:6px;padding:2px 8px 8px 12px; }
[dir="rtl"] .p3-tree .mx-kids{ padding:2px 12px 8px 8px; }
.p3-tree .mx-nmw{ min-width:0; }
.p3-tree .mx-sub{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mx-panel .wl-sumbox{ text-align:start; }
.mx-panel .wl-sumbox .wl-sumbox-main{ align-items:flex-start; text-align:start; }