/* PlotBot — fixed full-viewport shell. Every colour, font, radius and shell size comes from theme/tokens.js
   (CSS custom properties). Don't write colour literals here: scripts/check-colors.js enforces it. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font: 13px/1.4 var(--font); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text); text-decoration-color: var(--text-3); text-underline-offset: 2px; }
kbd { font: 500 10px/1 var(--mono); white-space: nowrap; padding: 2px 4px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text-2); letter-spacing: .02em; }
.skip { position: absolute; left: -999px; top: 4px; z-index: 100; background: var(--panel); color: var(--text); padding: 6px 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.fine { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 8px 0; }
.hint { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; }
.t-warn { color: var(--warn); } .t-crit { color: var(--crit); }
.ic { flex-shrink: 0; display: block; }
::selection { background: var(--line-2); }
select { background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); }
/* section labels: 10.5 / 600 / .14em caps */
.label, .grp-h .label, .an-h h2, .sec-h h3, .hero-l, .ml-h, .er-h h2, .tbl th, .rtabs-h {
  font: 600 10.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- shell ---------- */
#root { height: 100%; }
.app {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: var(--top) minmax(0, 1fr) var(--status);
  grid-template-columns: 0 minmax(0, 1fr) 0;
  grid-template-areas: "top top top" "left map right" "status status status";
  transition: grid-template-columns .18s ease;
}
.app.has-left { grid-template-columns: var(--lw) minmax(0, 1fr) 0; }
.app.has-right { grid-template-columns: 0 minmax(0, 1fr) var(--rw); }
.app.has-left.has-right { grid-template-columns: var(--lw) minmax(0, 1fr) var(--rw); }
.top { grid-area: top; }
.left { grid-area: left; }
.mapwrap { grid-area: map; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--map-bg); }
.right { grid-area: right; }
.status { grid-area: status; }
.map { position: absolute; inset: 0; }
.scrim { display: none; }

/* ---------- top bar ---------- */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 10px 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; z-index: 5; }
.top-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top .pswitch-btn { color: var(--text); letter-spacing: 0; font: 600 14px/1 var(--font); height: 34px; border-radius: var(--r-btn); }
.top .pswitch-btn:hover, .top .pswitch-btn[aria-expanded="true"] { background: var(--panel-3); }
.top .pswitch-btn:focus-visible { outline-color: var(--focus); }
.top .pswitch-menu { background: var(--panel-2); border-color: var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-2); }
.top .pswitch-menu a { color: var(--text); border-radius: var(--r); }
.top .pswitch-menu a:hover, .top .pswitch-menu a:focus-visible { background: var(--panel-3); }
.top .pswitch-menu small, .top .pswitch-cur { color: var(--text-3); }
.top .pswitch-sep { background: var(--line); }
.top-sep { width: 1px; height: 24px; background: var(--line); flex-shrink: 0; }
.top-hint { color: var(--text-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname-w { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pname { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pname-x { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--text-3); }
.pname-x:hover { color: var(--text); background: var(--panel-3); border-color: var(--line-2); }
.pname-t { border: 0; background: none; padding: 1px 4px; margin: 0 -4px; border-radius: var(--r-sm); font-weight: 600; font-size: 13.5px; letter-spacing: -.005em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.pname-t:hover { background: var(--panel-3); }
.pname-in { font-weight: 600; font-size: 13.5px; border: 1px solid var(--line-2); background: var(--field); border-radius: var(--r-sm); padding: 1px 4px; width: 280px; outline: 0; }
.pname-in:focus { border-color: var(--focus); }
.pname-s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
/* stepper: done = check, current = inverted */
.steps { list-style: none; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; font-size: 12px; color: var(--text-3); white-space: nowrap; justify-self: center; }
.steps li { position: relative; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border-radius: 13px; }
.steps li + li { margin-left: 20px; }
.steps li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 14px; height: 1px; background: var(--line-2); }
.steps b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 9.5px/1 var(--mono); color: var(--text-3); }
.steps .done { color: var(--text-2); } .steps .done .ic { color: var(--ok); }
.steps .cur { background: var(--inverse); color: var(--inverse-ink); font-weight: 600; }
.steps .cur b { border-color: var(--inverse-ink); color: var(--inverse-ink); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.kbtn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--field); color: var(--text-3); font-size: 12.5px; }
.kbtn span { min-width: 64px; text-align: left; }
.kbtn:hover { color: var(--text-2); border-color: var(--sel-line); }
.undo { display: flex; gap: 0; }
@media (max-width: 1360px) { .steps li:not(.cur) span { display: none; } .steps li { padding: 0 5px; } .steps li + li { margin-left: 14px; } .steps li + li::before { left: -12px; width: 10px; } .kbtn span { display: none; } }
.undo .ibtn { width: 28px; }

/* ---------- buttons ---------- */
.ibtn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--text-2); position: relative; flex-shrink: 0; }
.ibtn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.ibtn.on { background: var(--sel); color: var(--text); box-shadow: inset 0 0 0 1px var(--sel-line); }
.ibtn.tool.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.ibtn:disabled { opacity: .35; cursor: default; }
.ibtn-sm { width: 24px; height: 24px; border-radius: var(--r); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-weight: 500; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--sel-line); background: var(--panel-3); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-3); border-color: transparent; color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.btn-small { height: 26px; padding: 0 10px; font-size: 12px; }
.btn-top { height: 30px; }
.link { border: 0; background: none; padding: 4px 0; color: var(--text); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--text-2); }
.link.danger { color: var(--crit); text-decoration-color: var(--crit-line); }
.link:disabled { color: var(--text-3); cursor: default; text-decoration: none; }

/* ---------- tooltips ---------- */
[data-tip]:not([data-tip=""]) { position: relative; }
[data-tip]:not([data-tip=""]):hover::after, [data-tip]:not([data-tip=""]):focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 60; pointer-events: none; white-space: pre; max-width: 280px;
  background: var(--tip-bg); color: var(--tip-ink); font: 500 11.5px/1.35 var(--font); letter-spacing: 0; text-transform: none; padding: 5px 8px; border-radius: var(--r);
  left: 50%; top: calc(100% + 6px); transform: translateX(-50%); box-shadow: var(--shadow); animation: tipin .12s ease .35s both;
}
[data-tip-pos="top"]:hover::after { top: auto !important; bottom: calc(100% + 6px); }
[data-tip-pos="left"]:hover::after { left: auto !important; right: calc(100% + 8px); top: 50% !important; transform: translateY(-50%) !important; }
[data-tip-pos="right"]:hover::after { left: calc(100% + 8px) !important; top: 50% !important; transform: translateY(-50%) !important; white-space: normal; width: max-content; max-width: 240px; }
@keyframes tipin { from { opacity: 0; } to { opacity: 1; } }

/* ---------- menus ---------- */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 270px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-2); padding: 4px; }
.menu > button, .menu > a { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: var(--r); text-align: left; color: var(--text); text-decoration: none; }
.menu > button:hover, .menu > a:hover { background: var(--panel-3); }
.menu > button .ic, .menu > a .ic { margin-top: 1px; color: var(--text-2); }
.menu span { display: flex; flex-direction: column; flex: 1; }
.menu small { color: var(--text-3); font-size: 11.5px; }
.menu kbd { margin-left: auto; align-self: center; }
.menu span:has(> kbd) { flex-direction: row; align-items: center; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.menu-group { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; color: var(--text-2); }

/* ---------- search ---------- */
.search { position: relative; }
.search-box { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--field); color: var(--text-3); }
.search-box:focus-within { border-color: var(--focus); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; color: var(--text); }
.search-box input::placeholder { color: var(--text-3); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-kbd { opacity: .8; }
.search-list { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-2); max-height: 320px; overflow: auto; }
.search-list li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; color: var(--text-2); }
.search-list li.on { background: var(--panel-3); color: var(--text); }
.sl-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sl-h { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.palette-ov { position: fixed; inset: 0; z-index: 85; background: var(--overlay); display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; }
.palette { width: min(620px, 100%); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r3); box-shadow: var(--shadow-2); padding: 10px; }
.palette .search-box { height: 46px; font-size: 15px; border-radius: var(--r2); }
.palette-hint { margin: 8px 4px 2px; font-size: 11.5px; color: var(--text-3); }
.palette-hint .mono { font-size: 11px; color: var(--text-2); }

/* ---------- panels (shared) ---------- */
.left, .right { background: var(--panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; z-index: 4; }
.left { border-right: 1px solid var(--line); }
.right { border-left: 1px solid var(--line); }
.ph { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 14px; flex-shrink: 0; }
.ph h2 { flex: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph h2:not(.label) { font-size: 13.5px; font-weight: 600; }
.right .ph .ibtn:first-child { margin-left: -8px; }
.left-scroll, .right-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pad { padding: 12px 14px 16px; }
.pad-s { padding: 4px 0; margin: 0; }

/* ---------- left rail: layers ---------- */
.lr-filter { display: flex; align-items: center; gap: 7px; height: 30px; margin: 0 10px 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); color: var(--text-3); flex-shrink: 0; }
.lr-filter:focus-within { border-color: var(--focus); }
.lr-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; font-size: 12.5px; color: var(--text); }
.lr-filter input::placeholder { color: var(--text-3); }
.lr-filter input::-webkit-search-cancel-button { display: none; }
.lr-clear { border: 0; background: none; color: var(--text-3); padding: 2px; display: grid; place-items: center; border-radius: var(--r-sm); }
.lr-clear:hover { color: var(--text); }
.grp { padding: 2px 0 6px; }
.grp + .grp { border-top: 1px solid var(--line); padding-top: 4px; }
.grp-h { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 12px 0 10px; border: 0; background: none; text-align: left; color: var(--text-3); }
.grp-h:hover { color: var(--text-2); }
.grp-h .label { flex: 1; }
.grp-n { font: 500 10.5px/1 var(--mono); font-style: normal; color: var(--text-3); letter-spacing: 0; }
.grp-b { padding: 0 6px; }
.lyr { border-radius: var(--r); }
.lyr.exp { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.lyr-row { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 2px; }
.lyr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 5px 4px; border-radius: var(--r); text-align: left; color: var(--text-2); }
.lyr-main:hover { color: var(--text); }
.lyr.on .lyr-main { color: var(--text); }
.lyr-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.lsample { flex-shrink: 0; display: block; }
.lyr-row > .cpick, .lyr-row > .lsample { margin-left: 4px; flex-shrink: 0; }
.stpick-txt { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.stpick-txt > span:first-child { min-width: 34px; }
.stpick-lbl { font-size: 12px; }
.stpick-txt .cpick-btn { padding: 2px 4px; margin: 0; }
.lbl-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-ctl { display: inline-flex; align-items: center; gap: 6px; }
.lbl-auto { font-size: 11px; min-width: 30px; }
.lbl-is { color: var(--text-3); font: 500 10.5px var(--mono); }
.lbl-list .cpick-f { grid-template-columns: 1fr auto; }
.lbl-help { margin: 0 0 6px; }
.lsample .ls-none { stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 2 3; }
.lsample .ls-dot { stroke: var(--panel); stroke-width: 1.4; }
.lsample .ls-chip { stroke: var(--line); stroke-width: 1; }
.lyr:not(.on) .lsample { opacity: .45; }
.tag { font: 500 9.5px/1 var(--mono); letter-spacing: .04em; color: var(--text-3); white-space: nowrap; padding: 3px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tag-na { color: var(--text-3); border-style: dashed; }
.lyr-zoom, .lyr-act { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 10px; font-size: 11px; padding: 1px 7px; color: var(--text-2); white-space: nowrap; }
.lyr-zoom:hover, .lyr-act:hover { border-color: var(--sel-line); color: var(--text); }
.lyr-na { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.lyr-none .lyr-row { padding-left: 6px; gap: 9px; color: var(--text-3); }
.lyr-none .lyr-n { flex: 1; }
.lyr-none .lsample { opacity: 1; }
.lyr-err { color: var(--warn); display: inline-flex; }
.lyr-more { padding: 2px 10px 10px 49px; display: flex; flex-direction: column; gap: 8px; }
.lyr-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lyr-order { margin-left: auto; display: flex; gap: 2px; }
.lyr-bm { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.lyr-bm select { height: 26px; padding: 0 6px; font-size: 12px; }
.opa { display: grid; grid-template-columns: auto 1fr 36px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.opa b { font: 500 11px var(--mono); text-align: right; color: var(--text); }
input[type=range] { accent-color: var(--ctl); width: 100%; height: 16px; }
/* switch (button[aria-pressed]) */
.switch { position: relative; width: 26px; height: 15px; flex-shrink: 0; border: 0; padding: 0; border-radius: 8px; background: var(--line-2); transition: background .12s; }
.switch span { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); transition: transform .12s, background .12s; }
.switch[aria-pressed="true"] { background: var(--ctl); }
.switch[aria-pressed="true"] span { transform: translateX(11px); background: var(--ctl-ink); }
.switch:disabled { cursor: default; opacity: .4; }
.switch:disabled[aria-pressed="true"] { opacity: .55; }

/* checkbox (forms) */
.chk { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; position: relative; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk-box { width: 15px; height: 15px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); flex-shrink: 0; background: var(--field); display: grid; place-items: center; }
.chk input:checked + .chk-box { background: var(--ctl); border-color: var(--ctl); }
.chk input:checked + .chk-box::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--ctl-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.chk input:focus-visible + .chk-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.chk.dis { cursor: default; color: var(--text-3); }
.chk.dis input:checked + .chk-box { background: var(--text-3); border-color: var(--text-3); }
.chk-box.dis { background: var(--panel-3); }
.chk:hover:not(.dis) .chk-box { border-color: var(--text-3); }
.chk-inline { display: inline-flex; font-size: inherit; }
.radio { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-2); flex-shrink: 0; }
.tag-derived { display: inline-flex; align-items: center; font: 600 10.5px/1 var(--font); color: var(--derived); background: var(--derived-soft); border-radius: var(--r-sm); padding: 3px 6px; white-space: nowrap; letter-spacing: .01em; }
.tag-derived.sm { font-size: 10px; padding: 2px 5px; text-transform: none; letter-spacing: 0; }

/* ---------- right panel: analysis tabs ---------- */
.rtabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.rtabs button { position: relative; border: 0; background: none; padding: 8px 7px 10px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.rtabs button:hover { color: var(--text-2); }
.rtabs button.on { color: var(--text); font-weight: 600; }
.rtabs button.on::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--text); }
.rsub { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 6px; flex-shrink: 0; }
.rsub button { border: 1px solid var(--line); background: none; border-radius: 12px; padding: 2px 9px; font-size: 11.5px; color: var(--text-2); }
.rsub button:hover { border-color: var(--line-2); color: var(--text); }
.rsub button.on { background: var(--sel); border-color: var(--sel-line); color: var(--text); }
.onmap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px 8px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.onmap-l { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.onmap-c { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-3); }
.onmap-c.on { border-color: var(--sel-line); background: var(--sel); }
.onmap-n { border: 0; background: none; padding: 2px 2px 2px 9px; font-size: 11.5px; color: var(--text); }
.onmap-x { display: inline-flex; border: 0; background: none; padding: 3px 6px 3px 4px; color: var(--text-3); border-radius: 0 12px 12px 0; }
.onmap-x:hover { color: var(--text); }
.onmap-add, .onmap-clear { border: 1px dashed var(--line-2); background: none; border-radius: 12px; padding: 2px 9px; font-size: 11.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 3px; }
.onmap-clear { border: 0; color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.onmap-add:hover, .onmap-clear:hover { color: var(--text); border-color: var(--sel-line); }

/* ---------- inspector content ---------- */
.sec { border-top: 1px solid var(--line); padding: 10px 14px 12px; }
.pad .sec { padding: 10px 0 4px; margin-top: 8px; }
.sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.sec-h h3 { flex: 1; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sec-toggle { width: 100%; border: 0; background: none; padding: 0; text-align: left; }
.cnt { font: 600 11px/16px var(--font); min-width: 18px; padding: 0 5px; border-radius: 8px; background: var(--panel-3); text-align: center; color: var(--text-2); }
.kvs { display: flex; flex-direction: column; }
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; font-size: 12.5px; color: var(--text); }
.kv:last-child { border-bottom: 0; }
.kv-k { color: var(--text-2); flex-shrink: 0; max-width: 55%; }
.kv-v { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.kv-v i { font-style: normal; color: var(--text-3); font-weight: 400; margin-left: 3px; font-size: 11.5px; }
.kv-v em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.kv-hi .kv-v { font-weight: 600; }
.kv-link { cursor: pointer; border-radius: 0; }
.kv-link:hover { background: var(--panel-2); box-shadow: -14px 0 0 var(--panel-2), 14px 0 0 var(--panel-2); }
.kv-link .kv-k::after { content: "›"; margin-left: 6px; color: var(--text-3); opacity: 0; }
.kv-link:hover .kv-k::after { opacity: 1; }
.kv-warn .kv-v em, .kv-warn .kv-v { color: var(--warn); }
.hero { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 10px; }
.hero-l { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-v { font: 500 34px/1.05 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.hero-v span { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 4px; letter-spacing: .02em; }
.hero-s { font-size: 12px; color: var(--text-2); }
.hero-d { margin-top: 4px; display: flex; }
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-row .hero-v { font-size: 26px; }
.eq { font: 500 11px/1.4 var(--mono); color: var(--text-3); padding: 7px 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 10px; letter-spacing: .02em; }

/* ---------- summary tab ---------- */
.s-hero { padding: 16px 16px 14px; }
.s-acres { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.s-acres b { font: 500 52px/0.95 var(--font); letter-spacing: -.045em; color: var(--text); }
.s-u { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: .02em; }
.s-sf { margin-left: auto; font: 500 12px var(--mono); color: var(--text-3); }
.devbar-t { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-3); gap: 2px; }
.devbar-t .dv { background: var(--ok); border-radius: 4px 0 0 4px; }
.devbar-t .cn { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, var(--warn-line) 3px 6px); border-radius: 0 4px 4px 0; }
.devbar-t .dv:last-child, .devbar-t .cn:first-child { border-radius: 4px; }
.devbar-t .pend { flex: 1; background: var(--panel-3); animation: pulse 1s infinite alternate; }
.devbar-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.devbar-l button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--text-2); }
.devbar-l button:hover { color: var(--text); }
.devbar-l b { font: 500 12px var(--mono); color: var(--text); }
.devbar-l i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.devbar-l i.dv { background: var(--ok); } .devbar-l i.cn { background: var(--warn); }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.metric { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; border: 0; padding: 10px 12px 11px; background: var(--panel); text-align: left; color: var(--text); }
.metric:hover { background: var(--panel-2); }
.metric-k { font: 600 10px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.metric-v { font-size: 16px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-s { font: 400 10.5px/1.2 var(--mono); color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric.warn .metric-v { color: var(--warn); }
.s-derived { display: flex; padding: 8px 16px 0; }
.wcards { display: flex; flex-direction: column; gap: 6px; }
/* warnings: amber cards with an inline action */
.wcard { display: grid; grid-template-columns: 16px 1fr auto; align-items: start; gap: 8px; padding: 9px 10px; border-radius: var(--r); font-size: 12.5px; line-height: 1.4; background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.wcard > .ic { margin-top: 1px; color: var(--warn); }
.wcard button { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--warn-ink); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--warn-line); text-underline-offset: 3px; }
.wcard-info { opacity: .86; }
.wcard-critical { font-weight: 500; border-color: var(--warn); }
.lotrows { list-style: none; margin: 0 0 6px; padding: 0; }
.lotrows li + li { border-top: 1px solid var(--line); }
.lotrows button { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 4px; text-align: left; color: var(--text); border-radius: var(--r); }
.lotrows button:hover { background: var(--panel-2); }
.lr-bl { display: flex; flex-direction: column; min-width: 0; }
.lr-bl b { font-weight: 500; font-size: 12.5px; }
.lr-bl small { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-sf { font: 500 11.5px var(--mono); color: var(--text-2); white-space: nowrap; }
.lotrows-drawn { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); padding: 4px 0 8px; }
.lthumb path { fill: var(--sel); stroke: var(--text-2); stroke-width: 1.2; stroke-linejoin: round; }
.lthumb.site path { stroke: var(--text); }
.lotrows button:hover .lthumb path { stroke: var(--text); }
.s-more { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 0; font-size: 12px; color: var(--text-2); }
.s-more:hover { color: var(--text); }
.summary .sec { padding: 12px 16px 14px; margin-top: 12px; }
.warns { display: flex; flex-direction: column; gap: 4px; }
.warn { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: var(--r); padding: 7px 8px; font-size: 12.5px; line-height: 1.35; background: var(--info-soft); color: var(--text); }
.warn > .ic:first-child { margin-top: 1px; color: var(--info); }
.warn span { flex: 1; }
.warn .warn-go { color: var(--text-3); opacity: 0; margin-top: 2px; }
.warn:hover { border-color: var(--line-2); } .warn:hover .warn-go { opacity: 1; }
.warn-warning { background: var(--warn-soft); } .warn-warning > .ic:first-child { color: var(--warn); }
.warn-critical { background: var(--crit-soft); font-weight: 500; } .warn-critical > .ic:first-child { color: var(--crit); }
.note-warn { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: var(--r); background: var(--warn-soft); font-size: 12.5px; margin: 4px 0 8px; }
.note-warn .ic { color: var(--warn); }
.callout { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); font-size: 12.5px; margin: 4px 0 10px; }
.callout span { color: var(--text-2); }
.cstat-ok, .cstat-bad { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: var(--r); font-size: 12.5px; margin-bottom: 8px; }
.cstat-ok { background: var(--ok-soft); color: var(--ok); } .cstat-bad { background: var(--crit-soft); color: var(--crit); }
.addr { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; margin-bottom: 8px; }
.confirm-acts { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.selhead { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.selhead > div { flex: 1; display: flex; flex-direction: column; }
.selhead small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.selhead b { font-size: 15px; }
.sel-dot { width: 12px; height: 12px; border-radius: 3px; border: 2.5px solid var(--sel-map); background: var(--sel-map-soft); flex-shrink: 0; }
.hits { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.hits button { border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 2px 9px; font-size: 12px; color: var(--text-2); }
.hits button.on { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-ink); }

/* source + method disclosure */
.src { margin-top: 10px; }
.src-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 0; color: var(--text-3); font-size: 11.5px; }
.src-btn:hover { color: var(--text); }
.src-pop { margin-top: 6px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; }
.src-pop dl { display: grid; grid-template-columns: 82px 1fr; gap: 3px 8px; margin: 0; }
.src-pop dl + dl { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.src-pop dt { color: var(--text-3); } .src-pop dd { margin: 0; color: var(--text); }
.method { margin-top: 10px; }
.method-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; color: var(--text-2); font-size: 12px; }
.method-body { font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 6px 0 0 16px; }
.method-body p { margin: 0 0 6px; }

/* bars, tables, quick picks */
.bar { display: grid; grid-template-columns: 10px 64px 1fr 34px 86px; align-items: center; gap: 8px; width: 100%; padding: 4px 4px; border: 0; background: none; text-align: left; font-size: 12.5px; border-radius: var(--r); }
.bar-link { cursor: pointer; } .bar-link:hover { background: var(--panel-2); }
.bar.on { background: var(--sel); }
.bar-sw { width: 10px; height: 10px; border-radius: 2px; }
.bar-l { white-space: nowrap; color: var(--text-2); }
.bar-track { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; }
.bar-track span { display: block; height: 100%; border-radius: 3px; }
.bar-p { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-v { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11.5px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td small { display: block; color: var(--text-3); font-size: 11px; }
.tbl .r { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.on td { background: var(--sel); }
.tbl-sum td { padding: 6px 0; }
.tbl-sum tr.off td { color: var(--text-3); }
.tbl-sum tr.tot td { border-top: 2px solid var(--text); border-bottom: 0; font-weight: 600; font-size: 13.5px; padding-top: 8px; }
.tbl-sum .chk { gap: 6px; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid transparent; flex-shrink: 0; }
.quick { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.quick button { border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--r); padding: 1px 8px; font-size: 12px; }
.quick button.on { background: var(--inverse); color: var(--inverse-ink); border-color: var(--inverse); }
.apply { display: flex; justify-content: flex-end; margin-top: 8px; }
.tools-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }

/* fields */
.nf-row { display: flex; gap: 8px; margin-bottom: 8px; }
.nf { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.nf-l { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.nf-box { display: flex; align-items: center; height: 30px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); }
.nf-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--sel); }
.nf-box input, .nf-box textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0 8px; height: 100%; font-variant-numeric: tabular-nums; }
.nf-box textarea { padding: 6px 8px; resize: vertical; }
.nf-text .nf-box:has(textarea) { height: auto; }
.nf-box i { font-style: normal; font-size: 11px; color: var(--text-3); padding-right: 8px; }
.nf-text { margin-bottom: 10px; }
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--panel-3); border-radius: var(--r2); }
.seg button { border: 0; background: none; padding: 4px 10px; border-radius: var(--r); font-size: 12.5px; color: var(--text-2); }
.seg button.on { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2); }
.seg-sm button { padding: 2px 8px; font-size: 12px; }
.tf { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.tf-l { font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; }
.tf-l small { font-size: 10.5px; color: var(--text-3); }
.tf-box { display: flex; align-items: center; height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); }
.tf-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--sel); }
.tf-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0 10px; font: 500 15px/1 var(--mono); }
.tf-box i { font-style: normal; font-size: 11px; color: var(--text-3); padding-right: 8px; }
.tf-pick { width: 30px; height: 30px; margin-right: 2px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); display: grid; place-items: center; }
.tf-pick:hover, .tf-pick.on { background: var(--sel); color: var(--text); }

/* loading / empty / error */
.spin { display: inline-block; border: 2px solid var(--line-2); border-top-color: var(--text); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; padding: 10px 0; }
.empty { padding: 20px 4px; color: var(--text-2); font-size: 12.5px; }
.empty b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 4px; }
.empty p { margin: 0; line-height: 1.5; }
.right-scroll > .empty { padding: 20px 16px; }
.errbox { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); background: var(--crit-soft); border: 1px solid var(--crit-line); font-size: 12.5px; }
.errbox > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.errbox span { color: var(--text-2); }
.errbox-soft { background: var(--panel-2); border-color: var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ok); }
.dot-loading { background: var(--line-2); animation: pulse 1s infinite alternate; } .dot-error { background: var(--warn); } .dot-na { background: var(--line-2); }
@keyframes pulse { to { opacity: .4; } }
.ds { display: flex; flex-direction: column; }
.ds-r { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.ds-n { flex: 1; }
.ds-ok { color: var(--text-3); font-size: 11.5px; } .ds-e { color: var(--warn); font-size: 11.5px; }
.ds-sum { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); }
.ds-sum .ic { color: var(--ok); }

/* zoning lot lines */
.lotlines { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ll-legend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.ll { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-left: 6px; }
.ll:first-child { margin-left: 0; }
.ll-front { background: var(--lot-front); } .ll-side { background: var(--lot-side); } .ll-rear { background: var(--lot-rear); }

/* measurements */
.meas { list-style: none; margin: 8px 0; padding: 0; }
.meas li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 6px; border-bottom: 1px solid var(--line); padding: 2px 0 4px; }
.meas li.on { background: var(--sel); box-shadow: -14px 0 0 var(--sel), 14px 0 0 var(--sel); }
.meas-main { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0; text-align: left; min-width: 0; }
.meas-t { flex: 1; color: var(--text-2); }
.meas-txt { font-weight: 500; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.meas li .meas-edit { grid-column: 1; justify-self: start; padding-left: 22px; font-size: 12px; }
.meas-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.meas-v em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--text-3); }
.meas li .chk { grid-column: 1; font-size: 12px; color: var(--text-2); padding-left: 22px; }
.meas-del { grid-row: 1; grid-column: 2; }

/* ---------- map chrome (floating UI: frosted, hairline border, soft shadow) ---------- */
.float, .mtb, .hintchip, .framesw, .maplegend, .scalebar, .north, .zoomc, .mtb-pop, .txted { background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--float-line); box-shadow: var(--shadow); }
.ptab { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 3px; border: 1px solid var(--float-line); background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text-2); box-shadow: var(--shadow); flex-direction: column; justify-content: center; }
.ptab:hover { color: var(--text); }
.ptab[data-tip] { position: absolute; } /* the tooltip rule ([data-tip] → relative) must not pull the tabs out of place */
.ptab-l { left: 0; border-left: 0; border-radius: 0 var(--r2) var(--r2) 0; }
.ptab-r { right: 0; border-right: 0; border-radius: var(--r2) 0 0 var(--r2); }
/* top row: toolbar centred, frame switch right; the toolbar slides left when space is tight */
.maptop { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: start; gap: 10px; pointer-events: none; }
.maptop > * { pointer-events: auto; }
.maptop > span { pointer-events: none; }
.mtb-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mtb { position: relative; z-index: 2; display: flex; align-items: center; gap: 1px; padding: 4px; border-radius: var(--r2); }
.mtb-b { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-btn); background: none; color: var(--text-2); position: relative; }
.mtb-b:hover { background: var(--panel-3); color: var(--text); }
.mtb-b.on { background: var(--accent); color: var(--accent-ink); }
.mtb-b.lit { color: var(--text); }
.mtb-wide { display: inline-flex; gap: 5px; width: auto; padding: 0 7px 0 8px; font-size: 12px; }
.mtb-div { width: 1px; height: 18px; background: var(--float-line); margin: 0 4px; }
.mtb-snap { position: relative; }
.mtb-pop { position: absolute; top: calc(100% + 8px); right: -4px; width: 240px; padding: 4px; border-radius: var(--r2); box-shadow: var(--shadow-2); z-index: 5; }
.mtb-pop > button { display: grid; grid-template-columns: 16px 1fr; gap: 0 9px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: var(--r); text-align: left; color: var(--text); font-size: 12.5px; }
.mtb-pop > button:hover { background: var(--panel-3); }
.mtb-pop > button small { grid-column: 2; color: var(--text-3); font-size: 11px; }
.mtb-pop:not(.st-pop) p { margin: 4px 8px 6px; font-size: 11.5px; color: var(--text-3); }
.mtb-chk { grid-row: span 2; width: 14px; height: 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); }
.mtb-chk.on { background: var(--ctl); border-color: var(--ctl); box-shadow: inset 0 0 0 2.5px var(--panel-2); }
.hintchip { display: flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 3px 3px 12px; border-radius: 15px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.hintchip span { margin-right: 8px; overflow: hidden; text-overflow: ellipsis; }
.hintchip button { display: inline-flex; align-items: center; gap: 4px; height: 22px; border: 0; background: var(--panel-3); color: var(--text); padding: 0 8px; border-radius: 11px; font-size: 11.5px; }
.hintchip button:hover { background: var(--line-2); }
.hintchip kbd { border: 0; background: none; padding: 0; color: inherit; }
.framesw { justify-self: end; display: flex; gap: 2px; padding: 3px; border-radius: var(--r2); }
.framesw button { border: 0; background: none; height: 26px; padding: 0 10px; border-radius: var(--r); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.framesw button:hover { color: var(--text); }
.framesw button.on { background: var(--inverse); color: var(--inverse-ink); font-weight: 600; }
.fs-short { display: none; }
@media (max-width: 1500px) { .fs-long { display: none; } .fs-short { display: inline; } }
.frame-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.frame-ov svg { display: block; }
.frame-mask { fill: var(--overlay); }
.frame-edge { fill: none; stroke: var(--text); stroke-opacity: .7; stroke-width: 1; }
.frame-tag { position: absolute; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--text); background: var(--float-bg); border: 1px solid var(--float-line); padding: 5px 7px; border-radius: var(--r); }
/* bottom left: legend card over the graphic scale bar */
.mapfoot-l { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-height: calc(100% - 100px); pointer-events: none; }
.mapfoot-l > * { pointer-events: auto; }
.mapfoot-l.on-sheet { bottom: 64px; } /* clear of the sheet bar */
.mapwrap:has(.dock) .mapfoot-l { bottom: calc(44% + 10px); max-height: calc(56% - 70px); }
.maplegend { position: relative; width: 236px; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r2); font-size: 12px; overflow: visible; color: var(--text); }
.scalebar { padding: 6px 9px 5px; border-radius: var(--r); }
.sb-bar { display: flex; height: 5px; border: 1px solid var(--text); }
.sb-bar i { flex: 1; background: transparent; } .sb-bar i.k { background: var(--text); }
.sb-l { display: flex; justify-content: space-between; margin-top: 3px; font: 500 9.5px/1 var(--mono); color: var(--text-2); letter-spacing: .02em; }
.sb-l span:last-child { transform: translateX(40%); white-space: nowrap; }
.sb-l span:first-child { transform: translateX(-40%); }
/* bottom right: round north arrow over the zoom cluster */
.navc { position: absolute; right: 10px; bottom: 34px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.north { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--text); }
.rotc { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rot-in { width: 50px; height: 22px; padding: 0 4px; border: 1px solid var(--float-line); border-radius: var(--r); background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text-2); font: 500 11px var(--mono); text-align: center; box-shadow: var(--shadow); }
.rot-in:focus { outline: none; border-color: var(--accent); color: var(--text); }
.rot-align { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: var(--r-btn); border: 1px solid var(--float-line); background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text-2); box-shadow: var(--shadow); }
.rot-align:hover:not(:disabled) { color: var(--text); background: var(--panel-3); }
.rot-align.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rot-align:disabled { opacity: .35; cursor: default; }
.north svg { transition: transform .2s; }
.north .n-a { fill: var(--text); } .north .n-b { fill: var(--text-3); }
.north text { font: 600 7.5px var(--mono); fill: var(--text-2); }
.zoomc { display: flex; flex-direction: column; padding: 3px; border-radius: var(--r2); }
.zoomc button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; border-radius: var(--r-btn); color: var(--text-2); }
.zoomc button:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.zoomc button:disabled { opacity: .35; cursor: default; }
/* text label editor */
.txted { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 10px)); padding: 6px; border-radius: var(--r2); display: flex; flex-direction: column; gap: 4px; }
.txted input { width: 220px; height: 30px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--field); color: var(--text); padding: 0 8px; outline: 0; }
.txted input:focus { border-color: var(--focus); }
.txted small { font-size: 10.5px; color: var(--text-3); padding: 0 2px; }
.maplegend.closed { width: auto; }
.ml-h { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 10px; text-align: left; }
.ml-h span { flex: 1; }
.ml-h i { font: 500 10px/16px var(--mono); font-style: normal; padding: 0 2px; letter-spacing: 0; color: var(--text-3); }
.ml-b { overflow-y: auto; padding: 0 10px 8px; scrollbar-width: thin; }
.ml-g + .ml-g { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ml-t { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.lg-i { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--text-2); }
.lg-inline { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.sw-line { width: 16px; height: 0; border: 0; border-top: 2.5px solid; border-radius: 0; }
.sw-line.dash { border-top-style: dashed; }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--swatch-line); }
.sw-arrow { color: var(--info); font-size: 12px; width: 16px; }
.lg-ramp { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; color: var(--text-2); }
.ramp { grid-column: 1 / -1; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--elev-1), var(--elev-2), var(--elev-3), var(--elev-4), var(--elev-5)); }
.lg-r { font: 500 11px var(--mono); }
.lg-r:last-child { text-align: right; }
.dock { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; min-height: 220px; z-index: 4; background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.dock-h { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.dock-h h3 { margin: 0; font-size: 12.5px; font-weight: 600; }
.dock-h .muted { flex: 1; font-size: 11.5px; }
.dock-b { flex: 1; min-height: 0; padding: 4px 12px; display: flex; }
.dock-b svg { width: 100%; height: 100%; }
.mapwrap .maplibregl-ctrl-bottom-right { right: 6px; bottom: 4px; }
.maplibregl-ctrl-scale { border-color: var(--text-2); color: var(--text); font: 500 10px var(--mono); background: var(--float-bg); }
.maplibregl-ctrl-attrib { font-size: 10.5px; }
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact { background: var(--float-bg); color: var(--text-2); }
.maplibregl-ctrl-attrib a { color: var(--text-2); }
.toast { position: absolute; left: 50%; bottom: calc(var(--status) + 18px); transform: translateX(-50%); z-index: 70; background: var(--tip-bg); color: var(--tip-ink); padding: 8px 14px; border-radius: var(--r2); box-shadow: var(--shadow-2); font-size: 13px; animation: tipin .15s ease both; max-width: 90vw; }
.toast-warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.toast-has-act { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; }
.toast-act { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: 600 13px var(--font); cursor: pointer; }
.toast-ok { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); }
.toast-ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }

/* ---------- status bar (28px, mono 10.5) ---------- */
.status { display: flex; align-items: center; gap: 0; padding: 0 4px; background: var(--bg); border-top: 1px solid var(--line); font: 400 10.5px/1 var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; z-index: 5; letter-spacing: .01em; }
.st-i { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 100%; }
.st-i + .st-i { border-left: 1px solid var(--line); }
.st-i:empty { display: none; }
.st-scale { color: var(--text-2); }
.st-crs { min-width: 250px; }
.st-src { overflow: hidden; text-overflow: ellipsis; max-width: 300px; display: inline-block; line-height: 28px; }
.st-sp { flex: 1; }
.st-sp + .st-i { border-left: 0; }
.st-btn { border: 0; background: none; font: inherit; color: var(--text-2); }
.st-btn:hover { background: var(--panel-3); color: var(--text); }
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; }
.st-save.save-error { color: var(--crit); }

/* ---------- entry ---------- */
.entry { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: linear-gradient(180deg, var(--entry-1), var(--entry-2) 60%, var(--entry-3)); pointer-events: none; overflow-y: auto; }
.entry-card { pointer-events: auto; width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-2); padding: 22px 24px 18px; }
.entry-brand { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--font); letter-spacing: .16em; }
.entry-brand em { font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--text-3); margin-left: 2px; }
.entry h1 { font-size: 20px; font-weight: 600; margin: 14px 0 2px; letter-spacing: -.01em; }
.entry-sub { margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.entry-row { display: flex; align-items: center; gap: 10px; }
.entry-search { flex: 1; min-width: 0; }
.entry-or { font-size: 12px; color: var(--text-3); }
.entry-mapbtn { height: 44px; }
.entry-map { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; width: min(820px, calc(100% - 24px)); }
.em-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--float-line); border-radius: var(--r3); box-shadow: var(--shadow-2); }
.em-bar > .ic { color: var(--text); }
.em-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.em-t b { font-size: 13.5px; } .em-t span { font-size: 12px; color: var(--text-2); }
.em-search { width: 280px; flex-shrink: 0; }
@media (max-width: 700px) { .entry-row { flex-wrap: wrap; } .entry-search { flex-basis: 100%; } .entry-or { display: none; } .em-search { display: none; } .entry-map { top: 8px; } }
.entry .search-box { height: 44px; font-size: 15px; padding: 0 14px; }
.entry-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 10px; }
.entry-try button { border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 2px 9px; color: var(--text-2); font-size: 12px; }
.entry-try button:hover { border-color: var(--sel-line); color: var(--text); }
.entry-recent { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.er-h { display: flex; align-items: center; justify-content: space-between; }
.er-h h2 { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.entry-recent ul { list-style: none; margin: 0; padding: 0; }
.entry-recent li button { display: grid; grid-template-columns: 16px 1fr auto; grid-template-rows: auto auto; gap: 0 8px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 6px; border-radius: var(--r); text-align: left; }
.entry-recent li button:hover { background: var(--panel-3); }
.entry-recent .ic { grid-row: 1 / span 2; color: var(--text-3); } .entry-recent .fav { color: var(--fav); }
.er-n { font-weight: 500; } .er-s { grid-column: 2; font-size: 11.5px; color: var(--text-3); } .er-d { grid-row: 1 / span 2; grid-column: 3; font-size: 11.5px; color: var(--text-3); }
.entry-note { font-size: 11.5px; color: var(--text-3); margin: 14px 0 0; }
.view-entry .status .st-an { display: none; }

/* ---------- modal ---------- */
.modal-ov { position: fixed; inset: 0; z-index: 80; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.modal { width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r3); box-shadow: var(--shadow-2); display: flex; flex-direction: column; max-height: 80vh; }
.modal-h { display: flex; align-items: center; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.modal-h h2 { flex: 1; margin: 0; font-size: 14.5px; font-weight: 600; }
.modal-b { padding: 14px 16px; overflow-y: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel-2); border-radius: 0 0 var(--r3) var(--r3); }
.pj-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pj-search { flex: 1; }
.pj { list-style: none; margin: 0; padding: 0; }
.pj li { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.pj li.cur { background: var(--sel); }
.pj-main { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; border: 0; background: none; text-align: left; padding: 8px 6px; min-width: 0; }
.pj-main:hover { background: var(--panel-2); }
.pj-n { font-weight: 600; } .pj-s { grid-column: 1; font-size: 12px; color: var(--text-2); }
.pj-m { grid-column: 1; font-size: 11.5px; color: var(--text-3); } .pj-d { grid-row: 1; grid-column: 2; font-size: 11.5px; color: var(--text-3); }
.keys { width: 100%; border-collapse: collapse; }
.keys td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.keys td:first-child { width: 110px; }
.cad-crs { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 12px; font-size: 12.5px; }
.cad-crs span { color: var(--text-2); font-size: 12px; }
.cad-opts { display: flex; flex-direction: column; gap: 9px; }
.cad-sub .nf { flex: 0 0 180px; }
.cad-sub { display: flex; align-items: center; gap: 12px; padding-left: 23px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.lotlist { list-style: none; margin: 6px 0 10px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); max-height: 260px; overflow-y: auto; }
.lotlist li { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 0; border-bottom: 1px solid var(--line); }
.lotlist li:last-child { border-bottom: 0; }
.lot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 6px 8px; text-align: left; }
.lot-main:not(:disabled):hover { background: var(--panel-2); }
.lot-main:disabled { cursor: default; color: inherit; }
.lot-main b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lot-main span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lot-a { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lots-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.report-order { margin: 10px 0 0 18px; padding: 0; font-size: 12px; color: var(--text-2); columns: 2; }

/* ---------- Site run cards (from the classic calculator) ---------- */
.siterun .cl-card { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); margin-bottom: 6px; }
.cl-card.bad { border-color: var(--warn); }
.cl-card.start { border-color: var(--text-3); }
.cl-card-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r) var(--r) 0 0; }
.cl-idx { font: 500 11px var(--mono); color: var(--text-3); min-width: 16px; text-align: center; }
.cl-tag { font: 600 9.5px/1 var(--font); letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; color: var(--inverse-ink); background: var(--text-2); white-space: nowrap; }
.cl-tag.t-start { background: var(--brand); color: var(--on-fill); }
.cl-tag.t-run.v-ramp { background: var(--tag-ramp); color: var(--on-fill); } .cl-tag.t-run.v-landing { background: var(--panel); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-tag.t-target { background: var(--panel); color: var(--tag-ramp); box-shadow: inset 0 0 0 1px var(--tag-ramp); }
.cl-name { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-weight: 500; font-size: 12.5px; padding: 3px 2px; border-bottom: 1px dashed transparent; }
.cl-name:focus { border-bottom-color: var(--line-2); }
.cl-card-actions { display: flex; gap: 2px; }
.cl-mini, .cl-drag { width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--panel); color: var(--text-2); font-size: 11px; display: grid; place-items: center; padding: 0; }
.cl-drag { display: none; }
.cl-mini:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); }
.cl-mini:disabled { opacity: .3; }
.cl-mini.del:hover { background: var(--crit); border-color: var(--crit); color: var(--bg); }
.cl-card-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 6px; }
.cl-inp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-inp-l { font-size: 9.5px; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
.cl-inp-box { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 3px; background: var(--panel); }
.cl-inp-box:focus-within { border-color: var(--focus); }
.cl-inp-box input { border: 0; outline: 0; background: none; font: 500 13px var(--mono); padding: 5px 6px; width: 100%; min-width: 0; }
.cl-inp-box i { font-style: normal; font-size: 10.5px; color: var(--text-3); padding-right: 5px; }
.cl-dir { display: flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.cl-dir button { border: 0; border-right: 1px solid var(--line-2); background: var(--panel); font-size: 10.5px; color: var(--text-3); padding: 5px 7px; }
.cl-dir button:last-child { border-right: 0; }
.cl-dir button.on { background: var(--inverse); color: var(--inverse-ink); }
.cl-end { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.cl-end-k { font-size: 9.5px; color: var(--text-3); letter-spacing: .06em; }
.cl-end-v { font: 600 15px var(--mono); color: var(--tag-ramp); }
.cl-flags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 6px; align-items: center; }
.cl-meta { font-size: 10.5px; color: var(--text-3); }
.cl-flag { font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid; }
.cl-flag.ok { color: var(--ok); } .cl-flag.no { color: var(--warn); background: var(--warn-soft); }
.cl-vrow { flex-basis: 100%; display: flex; align-items: center; gap: 6px; }
.cl-vpreset { gap: 0; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.cl-vpreset button { flex: 1; border: 0; border-right: 1px solid var(--line-2); background: var(--panel); font-size: 10.5px; color: var(--text-3); padding: 5px 4px; }
.cl-vpreset button:last-child { border-right: 0; }
.cl-vpreset button.on { background: var(--tag-ramp); color: var(--on-fill); }
.cl-vopts { flex-wrap: wrap; }
.cl-vlbl { font-size: 9.5px; color: var(--text-3); letter-spacing: .06em; }
.cl-vcall { border: 1px solid var(--line-2); background: var(--panel); font-size: 10.5px; color: var(--text-3); padding: 4px 8px; border-radius: 3px; }
.cl-vcall.on { background: var(--inverse); color: var(--inverse-ink); }
.cl-palette { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 0; }
.cl-pal-l { font-size: 10.5px; color: var(--text-3); letter-spacing: .08em; margin-right: 2px; }
.cl-palette button { border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--r); font-size: 12px; padding: 3px 8px; }
.cl-palette button:hover { border-color: var(--sel-line); color: var(--text); }

/* ---------- tablet: panels become drawers over the map ---------- */
@media (max-width: 1099px) {
  .app, .app.has-left, .app.has-right, .app.has-left.has-right { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .left, .right { position: fixed; top: var(--top); bottom: var(--status); z-index: 20; box-shadow: var(--shadow-2); }
  .left { left: 0; width: min(var(--lw), 86vw); }
  .right { right: 0; width: min(var(--rw), 92vw); }
  .scrim-l { display: block; position: fixed; inset: var(--top) 0 var(--status) 0; z-index: 19; background: var(--scrim); }
  .steps { display: none; }
  .top { grid-template-columns: minmax(0, 1fr) auto; }
}
/* ---------- phone: map + bottom sheet, no workstation chrome ---------- */
@media (max-width: 700px) {
  :root { --top: 52px; --status: 0px; }
  .status, .kbtn span, .kbtn kbd, .undo, .hide-s, .pname-s, .top-sep, .top-hint { display: none; }
  .top { display: flex; gap: 8px; padding: 0 6px 0 8px; }
  .kbtn { padding: 0 8px; }
  .pname-t { max-width: 34vw; font-size: 13px; }
  .top-actions { margin-left: auto; }
  .top-id, .view-workspace .top-id { flex: 1; min-width: 0; }
  .btn-top { padding: 0 8px; }
  .btn-top .ic:last-child { display: none; }
  .right { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 48dvh; border-left: 0; border-top: 1px solid var(--line-2); border-radius: var(--r3) var(--r3) 0 0; }
  .right .ph { justify-content: center; position: relative; }
  .right .ph::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-2); }
  .left { top: var(--top); bottom: 0; }
  .maptop { top: 8px; left: 56px; right: 8px; grid-template-columns: minmax(0, 1fr); }
  .maptop > span, .framesw, .mapfoot-l, .frame-ov { display: none; }
  .mtb { max-width: 100%; }
  .mtb-more { width: 210px; }
  .mtb-more > button { min-height: 40px; }
  .mtb-more > button.on { background: var(--panel-3); }
  .mtb-more-h { margin: 6px 8px 2px !important; font: 600 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3) !important; }
  .navc { bottom: calc(48dvh + 12px); }
  /* the sheet's main action never needs a scroll: pinned to the bottom of the sheet */
  .right .confirm-acts { position: sticky; bottom: 0; z-index: 2; margin: 12px -14px 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
  .right .confirm-acts .btn { flex: 1; justify-content: center; min-height: 44px; }
  .right .hero-v { font-size: 28px; }
  .ptab-r { top: auto; bottom: 12px; transform: none; flex-direction: row; height: 40px; padding: 0 12px; border-radius: 20px; right: 12px; border: 1px solid var(--line-2); }
  .ptab-l { top: 12px; transform: none; height: 40px; flex-direction: row; padding: 0 10px; border-radius: 0 20px 20px 0; }
  .entry { padding-top: 6vh; }
  .entry-card { padding: 18px 16px 14px; }
  .dock { display: none; }
}

/* ---------- print (site report) ---------- */
#print-root { display: none; }
@media print {
  @page { size: letter; margin: 14mm 14mm 16mm; }
  html, body { overflow: visible !important; height: auto !important; background: var(--paper) !important; }
  #root { display: none !important; }
  #print-root { display: block !important; }
}
.pr { font: 10.5pt/1.45 var(--font); color: var(--ink); padding: 0 4px; }
.pr-maps .pr-fig svg { aspect-ratio: 1; height: auto; }
.pr-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 14px; }
.pr-brand { display: flex; gap: 10px; align-items: center; }
.pr-brand b { display: block; font-size: 15pt; letter-spacing: .08em; } .pr-brand span { font-size: 9pt; color: var(--ink-4); text-transform: uppercase; letter-spacing: .12em; }
.pr-meta { text-align: right; font-size: 9.5pt; } .pr-meta span { color: var(--ink-4); margin-right: 8px; }
.pr-h { font-size: 11.5pt; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin: 18px 0 8px; break-after: avoid; }
.pr-break { break-before: page; }
.pr-ov { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.pr-big b { font-size: 30pt; font-weight: 600; } .pr-big span { font-size: 13pt; margin-left: 4px; color: var(--ink-2); } .pr-big em { display: block; font-style: normal; color: var(--ink-4); }
.pr-t { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.pr-t td, .pr-t th { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--rule-3); vertical-align: top; text-align: left; }
.pr-t td:first-child { color: var(--ink-3); width: 38%; }
.pr-t i { color: var(--ink-5); font-size: 8.5pt; }
.pr-num td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pr-tot td { border-top: 2px solid var(--ink); font-weight: 700; }
.pr-src td:first-child { width: 30%; color: var(--ink); } .pr-src td { font-size: 8.5pt; } .pr-src th { font-size: 8pt; color: var(--ink-4); text-transform: uppercase; }
.pr-fig { margin: 0; break-inside: avoid; } .pr-fig img, .pr-fig svg { width: 100%; max-height: 520px; object-fit: contain; border: 1px solid var(--rule-2); display: block; }
.pr-fig figcaption { font-size: 8.5pt; color: var(--ink-3); margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.pr-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; } .pr-leg i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; } .pr-leg s { width: 10px; height: 10px; display: inline-block; }
.pr-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-find { margin: 0; padding: 0; list-style: none; } .pr-find li { padding: 4px 0; border-bottom: 1px solid var(--rule-4); } .pr-find b { font-size: 8pt; display: inline-block; width: 70px; color: var(--ink-3); }
.pr-critical b { color: var(--pr-crit); } .pr-warning b { color: var(--pr-warn); }
.pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; } .pr-cols h3 { font-size: 10pt; margin: 8px 0 4px; } .pr-cols > div { break-inside: avoid; }
.pr-fine { font-size: 8.5pt; color: var(--ink-3); } .pr-method p { margin: 0 0 6px; }
.pr-notes { font-size: 9.5pt; padding: 6px 8px; background: var(--paper-soft); }
.pr-foot { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 8pt; color: var(--ink-5); }

/* ---------- legend colour picker ---------- */
.cpick { position: relative; display: inline-flex; }
.cpick-btn { border: 0; background: none; padding: 2px; margin: -2px; border-radius: 3px; display: inline-flex; cursor: pointer; }
.cpick-btn:hover { box-shadow: 0 0 0 1px var(--line-2); background: var(--panel-2); }
.cpick-pop { position: fixed; z-index: 95; width: 224px; padding: 8px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-2); }
.cpick-h { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.cpick-grid button { width: 100%; aspect-ratio: 1; border: 1px solid var(--swatch-line); border-radius: 3px; padding: 0; cursor: pointer; }
.cpick-grid button:hover { transform: scale(1.12); }
.cpick-grid button.on { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 3.5px var(--text); }
.cpick-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.cpick-lt { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cpick-lt label { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.cpick-lt select { height: 26px; min-width: 0; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); color: var(--text); font-size: 12px; }
.cpick-custom { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); }
.cpick-custom input { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; background: none; }
.cpick-tabs { display: flex; gap: 2px; margin-bottom: 7px; padding: 2px; border-radius: var(--r); background: var(--panel); }
.cpick-tabs button { flex: 1; min-width: 0; border: 0; background: none; padding: 3px 4px; border-radius: 3px; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick-tabs button.on { background: var(--panel-3); color: var(--text); font-weight: 600; }
.cpick-f { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.cpick-fill { display: flex; align-items: center; gap: 6px; }
.cpick-fill input[type=color] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; background: none; flex-shrink: 0; }
.stepper { display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); min-width: 0; }
.stepper button { width: 24px; height: 100%; border: 0; background: none; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper input { width: 44px; min-width: 0; height: 100%; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text); font: 500 12px var(--mono); text-align: right; padding: 0 3px; }
.stepper input:focus { outline: none; background: var(--panel-2); }
.stepper-u { font: 500 11px var(--mono); color: var(--text-3); padding: 0 5px 0 2px; min-width: 14px; border-right: 1px solid var(--line); height: 100%; display: inline-flex; align-items: center; }
.ml-tip { font-size: 11px; color: var(--text-3); margin: 8px 0 0; }

/* ---------- plot to PDF ---------- */
.plot { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.plot-opts { display: flex; flex-direction: column; gap: 10px; }
.po-row { display: flex; align-items: center; gap: 10px; }
.po-l { width: 78px; flex-shrink: 0; font-size: 12px; color: var(--text-2); }
.po-sel { height: 30px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); padding: 0 8px; flex: 1; }
.po-warn { margin: 0; font-size: 12px; color: var(--warn); }
.po-two { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.plot-opts .nf-text { margin-bottom: 0; }
.plot-prev { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plot-prev svg { max-width: 100%; height: auto; box-shadow: var(--shadow); }
.plot-prev figcaption { font-size: 11.5px; color: var(--text-2); text-align: center; line-height: 1.5; }
@media (max-width: 760px) { .plot { grid-template-columns: 1fr; } }

/* ---------- map style picker (bottom of the layer rail) ---------- */
.stpick { flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px 10px 10px; }
.stpick-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.stpick-f { font: 400 10.5px var(--mono); color: var(--text-3); }
.stpick-g { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.stpick-b { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 0; border: 0; background: none; padding: 0; color: var(--text-3); font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stpick-b .sthumb { display: block; width: 100%; height: auto; aspect-ratio: 112 / 72; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.stpick-b:hover { color: var(--text-2); } .stpick-b:hover .sthumb { box-shadow: 0 0 0 1px var(--sel-line); }
.stpick-b.on { color: var(--text); font-weight: 600; } .stpick-b.on .sthumb { box-shadow: 0 0 0 2px var(--text); }
.stpick-b:disabled { opacity: .5; cursor: default; }
.stpick-bg { display: flex; align-items: center; gap: 5px; margin: 8px 2px 0; font-size: 11.5px; color: var(--text-2); }
.stpick-bg > span { margin-right: auto; }
.stpick-sw { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer; }
.stpick-sw.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--text); }
.stpick-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.stpick-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.stpick-m { display: flex; align-items: center; justify-content: space-between; min-height: 22px; margin: 8px 2px 0; font-size: 12px; color: var(--text-2); }
.stpick-m em { font-style: normal; color: var(--warn); }

/* ---------- sheet frames: live preview + sheet bar ---------- */
.sheet-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-user-select: none; user-select: none; }
.sheet-ov svg text { pointer-events: none; }
.sheet-ov.paper { pointer-events: auto; cursor: grab; touch-action: none; }
.sheet-ov.paper.dragging { cursor: grabbing; }
.sheet-ov.paper.over-text { cursor: text; }
.sheet-win-on { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.sheet-hover { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; }
.sheet-edit { -webkit-user-select: text; user-select: text; position: absolute; z-index: 3; margin: 0; padding: 2px 4px; border: 1.5px solid var(--accent); border-radius: 3px; background: var(--sheet-paper); color: var(--sheet-ink); outline: none; box-shadow: var(--shadow); resize: none; }
.sheet-hint { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 140px); padding: 4px 12px 4px 4px; border-radius: 14px; background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--float-line); box-shadow: var(--shadow); font-size: 11.5px; color: var(--text-2); pointer-events: none; white-space: nowrap; }
.sheet-hint span { overflow: hidden; text-overflow: ellipsis; }
.sheet-hint b { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; background: var(--panel-3); color: var(--text); }
.sheet-hint.model b { background: var(--accent); color: var(--accent-ink); }
.sheet-ov svg { display: block; }
.sheet-backdrop { fill: var(--sheet-backdrop); }
.sheet-edge { fill: none; stroke: var(--line-2); stroke-width: 1; }
.sheet-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r2); background: var(--float-bg); border: 1px solid var(--float-line); color: var(--text-2); font-size: 12px; }
.sheetbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--r2); background: var(--float-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--float-line); box-shadow: var(--shadow); width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
.sheetbar select { height: 28px; padding: 0 6px; font-size: 12px; border-radius: var(--r); }
.sheetbar .seg { background: var(--panel-3); }
.sheetbar-div { width: 1px; height: 18px; background: var(--float-line); margin: 0 2px; }
.sheetbar-busy { flex-basis: 100%; text-align: center; font: 400 10.5px var(--mono); color: var(--text-2); padding: 2px 0 1px; }
.tb-form { display: flex; flex-direction: column; gap: 8px; }
.tb-h { margin-top: 6px; }
.tb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-logo { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.tb-logo img { height: 34px; max-width: 110px; object-fit: contain; background: var(--paper); border-radius: var(--r-sm); padding: 2px; }
.nf-box:has(textarea) { height: auto; }
.nf-box textarea { padding: 6px 8px; resize: vertical; font: inherit; }

/* ---------- Traced buildings (review panel) ---------- */
.st-flag { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 10px; border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 11.5px; line-height: 1.45; }
.st-flag .ic { flex-shrink: 0; margin-top: 1px; }
.st-cnt { font: 500 11.5px var(--mono); color: var(--text-2); }
.st-list { list-style: none; margin: 4px 0 0; padding: 0; }
.st-list li { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.st-f-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; border: 0; background: none; padding: 6px 2px; text-align: left; color: var(--text); }
.st-f-main b { font-size: 12px; font-weight: 600; }
.st-f-main span { font-size: 11px; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-f-main:hover b { text-decoration: underline; text-underline-offset: 2px; }
.st-foot { border-top: 0; }