/* Layout: app shell = sidebar (PC) / icon rail (tablet) / bottom tab bar (phone) + top bar + work surface.
   Pages use named grid areas that re-flow at 1500 / 1100 / 700 px. */
/* Look: navy ink on white and cream, sky-blue highlights, a gold accent bar, serif headlines over a plain sans, square corners. */
:root {
  --bg: #f6f3ee; --panel: #ffffff; --panel-2: #f3efe8; --ink: #0c1a4b; --muted: #4f5a7a; --rule: #d7dae4; --accent: #0c1a4b; --accent-ink: #ffffff;
  --sky: #d3e9fb; --sky-2: #8fc0f4; --steel: #34518f; --gold: #f2c100; --strong: #0c1a4b;
  --p-public: #2f6fd0; --p-derived: #5b55c9; --p-lidar: #c7861a; --p-anchored: #188a7a; --p-synthetic: #a8458f; --p-mixed: #6c7672;
  --ok: #1e8a4c; --warn: #c7861a; --bad: #c4432f;
  --sans: "Noto Sans", "Segoe UI", system-ui, sans-serif; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 3px; --side: 212px; --top: 52px; --tabbar: 0px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #070f2e; --panel: #0e1840; --panel-2: #14204d; --ink: #e9eef8; --muted: #a3afcc; --rule: #27346a; --accent: #8fc0f4; --accent-ink: #071034;
  --sky: #1b2c63; --sky-2: #4f7fc4; --steel: #8fa8dc; --gold: #f2c100; --strong: #8fc0f4;
  --p-public: #6fa2f0; --p-derived: #948ff0; --p-lidar: #e8a948; --p-anchored: #48c2ae; --p-synthetic: #d77fbf; --p-mixed: #9aa6a2;
  --ok: #4cc27f; --warn: #e8a948; --bad: #ec7a65; color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #070f2e; --panel: #0e1840; --panel-2: #14204d; --ink: #e9eef8; --muted: #a3afcc; --rule: #27346a; --accent: #8fc0f4; --accent-ink: #071034;
  --sky: #1b2c63; --sky-2: #4f7fc4; --steel: #8fa8dc; --gold: #f2c100; --strong: #8fc0f4;
  --p-public: #6fa2f0; --p-derived: #948ff0; --p-lidar: #e8a948; --p-anchored: #48c2ae; --p-synthetic: #d77fbf; --p-mixed: #9aa6a2;
  --ok: #4cc27f; --warn: #e8a948; --bad: #ec7a65; color-scheme: dark; } }

* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) minmax(0, 1fr); grid-template-areas: "top" "main" }
a { color: var(--accent) }
code, .mono, td.num, .num { font-family: var(--mono); font-variant-numeric: tabular-nums }
button { font: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* ------------------------------------------------------------------ shell */
/* navigation: a glass drawer behind the burger on PC and tablet, the bottom tab bar on phones */
.side { position: fixed; top: 8px; left: 8px; bottom: 8px; width: 250px; display: flex; flex-direction: column; padding: 10px 8px; gap: 10px; z-index: 60;
  background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 16px 48px rgb(7 15 46 / .3); transform: translateX(calc(-100% - 16px)); visibility: hidden; transition: transform .18s, visibility .18s }
body.menu-open .side { transform: none; visibility: visible }
.burger { display: inline-flex; padding: 6px 7px; border: 0 }
.brand-top { padding: 0; gap: 8px; flex: none }
.brand-top .mark { width: 26px; height: 26px; font-size: 16px }
.brand-top b { font: 400 17px var(--serif) }
.crumb::before { content: "/"; color: var(--rule); margin-right: 10px }
.crumb:empty::before { content: none }
.sgroup { padding: 6px 10px 2px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); padding: 4px 6px }
.brand .mark { width: 30px; height: 30px; border-radius: var(--r); background: var(--strong); color: var(--accent-ink); display: grid; place-items: center; font: 400 19px var(--serif); flex: none }
.brand b { display: block; font: 400 17px/1.1 var(--serif) }
.brand small { color: var(--muted); font-size: 12px }
nav { display: flex; flex-direction: column; gap: 2px }
nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r); color: var(--muted); text-decoration: none; font-weight: 500 }
nav a:hover { background: var(--panel-2); color: var(--ink) }
nav a.on { background: var(--sky); color: var(--ink); box-shadow: inset 3px 0 0 var(--gold) }
nav a.on svg { color: var(--strong) }
.side-foot { margin-top: auto }
.side-foot .ghost { width: 100%; text-align: left }
.top { grid-area: top; position: sticky; top: 0; z-index: 20; display: flex; gap: 14px; align-items: center; padding: 0 max(16px, 1.6vw); background: var(--panel); border-bottom: 1px solid var(--rule) }

.crumb { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.crumb b { color: var(--ink); font-weight: 600 }
.search { position: relative; margin-left: auto; flex: 0 1 360px; min-width: 160px }
.search input { width: 100%; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-2); color: var(--ink); font: inherit }
#search-results { position: absolute; top: 100%; right: 0; left: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .18); max-height: 60vh; overflow: auto; z-index: 40 }
#search-results a { display: block; padding: 8px 10px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule) }
#search-results a:hover { background: var(--panel-2) }
#search-results small { color: var(--muted); margin-right: 6px; text-transform: uppercase; font: 11px var(--mono) }
.ghost { background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: var(--r); padding: 6px 10px }

main { grid-area: main; min-width: 0; padding: 20px max(16px, 1.6vw) 40px; outline: none }
main.full { padding: 0; height: calc(100vh - var(--top) - var(--tabbar)); height: calc(100dvh - var(--top) - var(--tabbar)); overflow: hidden }   /* dvh: on phones vh ignores the browser's own bars and pushes the timeline off screen */

/* ------------------------------------------------------------------ type and building blocks */
h1 { font: 400 30px/1.15 var(--serif); margin: 0; text-wrap: balance; letter-spacing: -.005em }
h2 { font-size: 13px; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em }
h3 { font-size: 12px; font-weight: 700; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
.sub { color: var(--muted); margin: 4px 0 16px; max-width: 110ch }
.pagehead { padding-bottom: 6px }
.pagehead + .sub { border-bottom: 1px solid var(--rule); padding-bottom: 12px }
.pagehead h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--gold); margin-top: 10px }   /* the short gold rule under a title */
.card > h2:first-child, .dc > h3:first-child { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: -2px }   /* section heads sit under a navy rule */
.pagehead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.pagehead .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; min-width: 0 }
.card > h2:first-child { display: flex; align-items: center; gap: 8px }
.stat b { display: block; font: 400 30px/1.2 var(--serif); font-variant-numeric: tabular-nums }
.stat span { color: var(--muted); font-size: 12px }
.muted { color: var(--muted) }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.spacer { flex: 1 }
.grid { display: grid; gap: 14px }
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }

/* provenance */
.prov { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--mono); padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent) }
.prov::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc) }
.prov[data-p^="public_record"] { --pc: var(--p-public) } .prov[data-p^="public_derived"], .prov[data-p="derived"] { --pc: var(--p-derived) }
.prov[data-p^="lidar"] { --pc: var(--p-lidar) } .prov[data-p^="synthetic_anchored"] { --pc: var(--p-anchored) }
.prov[data-p="synthetic"] { --pc: var(--p-synthetic) } .prov[data-p="mixed"] { --pc: var(--p-mixed) }
.provbar { display: flex; height: 10px; border-radius: var(--r); overflow: hidden; margin: 8px 0 }
.provbar i { display: block }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
.tag { font: 500 11px var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--rule); color: var(--muted); text-decoration: none; white-space: nowrap }
a.tag:hover { color: var(--accent); border-color: var(--accent) }
.sw { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block }

/* tables: sticky header and first column, scroll inside their own box */
.tablewrap { overflow: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); max-width: 100%; -webkit-overflow-scrolling: touch }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; background: var(--panel) }
th { position: sticky; top: 0; background: var(--panel); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--ink); z-index: 2 }
table.freeze th:first-child, table.freeze td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--rule) }
table.freeze th:first-child { z-index: 3 }
th button { all: unset; cursor: pointer }
th .u { color: var(--muted); font: 400 11px var(--mono); margin-left: 4px }
td.num { text-align: right }
tbody tr:hover td { background: var(--panel-2) }
td.null { color: var(--muted); font-style: italic }
.pager { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap }
.pager button, .btn { border: 1px solid var(--rule); background: var(--panel); color: var(--ink); border-radius: var(--r); padding: 6px 11px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap }
.btn:hover { border-color: var(--strong); background: var(--sky) }
input.f, select.f { padding: 6px 9px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); color: var(--ink); font: inherit; min-width: 0 }

/* catalog */
.cat-item { display: grid; gap: 4px; text-decoration: none; color: var(--ink) }
.cat-item:hover { border-color: var(--accent) }
.cat-item .name { font: 600 13px var(--mono); overflow-wrap: anywhere }
.cat-item p { margin: 0; color: var(--muted); font-size: 13px }

/* table page: grid fills the screen height on PC; dictionary is a drawer */
.tablepage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start }
.tablepage .gridbox .tablewrap { height: calc(100vh - var(--top) - 250px); min-height: 320px }
.dict { width: 360px; max-height: calc(100vh - var(--top) - 150px); overflow: auto; position: sticky; top: calc(var(--top) + 16px) }
.dict[hidden] { display: none }
.dict .col { padding: 7px 0; border-bottom: 1px solid var(--rule) }
.dict .col b { font: 600 12px var(--mono); overflow-wrap: anywhere }
.bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-top: 3px }
.bar i { display: block; height: 100%; background: var(--warn) }

/* map: full bleed, floating panels on PC, bottom sheets on phones */
.mapshell { position: relative; height: 100% }
#map { position: absolute; inset: 0 }
.floating { position: absolute; z-index: 5; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 6px 24px rgb(0 0 0 / .18); overflow: auto }
.layers { top: 12px; left: 12px; bottom: 12px; width: 300px; padding: 12px }
.layers.collapsed { bottom: auto; width: auto }
.layers.collapsed .layers-body { display: none }
.layers label { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; cursor: pointer }
.layers label small { margin-left: auto; color: var(--muted); font: 11px var(--mono) }
.layers details { margin: 6px 0 }
.layers summary { cursor: pointer; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 0 }
.detail { top: 12px; right: 56px; width: 360px; max-height: calc(100% - 24px); padding: 14px }
.detail[hidden] { display: none }
.detail table td { padding: 3px 8px 3px 0; border: 0; white-space: normal; max-width: 220px; background: transparent }
.detail .close { position: absolute; top: 8px; right: 8px }
.sheet-toggle { display: none }

/* charts */
.chart { width: 100%; min-height: 220px }
.u-legend { font-size: 12px }

/* entity pages: named areas re-flow by width */
.entity { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)) }
.entity > * { grid-column: span 12 }
@media (min-width: 1100px) { .entity .s6 { grid-column: span 6 } .entity .s4 { grid-column: span 6 } .entity .s8 { grid-column: span 12 } .entity .s3 { grid-column: span 6 } }
@media (min-width: 1500px) { .entity .s8 { grid-column: span 8 } .entity .s4 { grid-column: span 4 } .entity .s3 { grid-column: span 3 } }
.minimap { height: 360px; border-radius: var(--r); overflow: hidden; position: relative }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px }
.kv dt { color: var(--muted) } .kv dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere }

/* lineage */
.lineage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start }
.lineage .colh { position: sticky; top: var(--top); background: var(--bg); padding: 6px 0; z-index: 1 }
.lin-item { padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 5px; font: 12px var(--mono); background: var(--panel); cursor: pointer; display: flex; gap: 6px; align-items: center; justify-content: space-between; overflow-wrap: anywhere }
.lin-item.dim { opacity: .28 }
.lin-item.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }

/* scenarios */
.scn { display: grid; gap: 8px; align-content: start }
.scn .q { font-weight: 500 }
.scn details summary { cursor: pointer; color: var(--accent) }
.scn .ans { background: var(--panel-2); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 4px; margin-top: 6px }
.loading { color: var(--muted); padding: 40px; text-align: center }
.err { color: var(--bad) }

/* ------------------------------------------------------------------ wide PC: more room for content */
@media (min-width: 1800px) { .cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) } }

/* ------------------------------------------------------------------ tablet: icon rail */
@media (max-width: 1100px) {
  .dict { position: fixed; right: 0; top: var(--top); bottom: 0; max-height: none; z-index: 25; border-radius: 0; box-shadow: -8px 0 24px rgb(0 0 0 / .2) }
  .tablepage { grid-template-columns: minmax(0, 1fr) }
  .detail { right: 12px; width: 320px }
}

/* ------------------------------------------------------------------ phone: bottom tab bar, single column, sheets */
@media (max-width: 700px) {
  :root { --side: 0px; --top: 52px; --tabbar: calc(58px + env(safe-area-inset-bottom, 0px)) }
  body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--tabbar); flex-direction: row; padding: 4px 4px env(safe-area-inset-bottom, 0px); transform: none; visibility: visible; border-radius: 0; box-shadow: none; border-width: 1px 0 0;
    background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    border-right: 0; border-top: 1px solid var(--rule) }
  .side .brand, .side-foot { display: none }
  nav { flex-direction: row; width: 100%; justify-content: space-around }
  nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 10px; flex: 1 }
  nav a span { display: block }
  .burger, .brand-top b { display: none }
  .crumb { display: none }
  .search { flex: 1; margin-left: 0 }
  main { padding: 14px 12px calc(var(--tabbar) + 20px) }
  main.full { height: calc(100vh - var(--top) - var(--tabbar)); height: calc(100dvh - var(--top) - var(--tabbar)) }
  h1 { font-size: 19px }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cards { grid-template-columns: minmax(0, 1fr) }
  .lineage { grid-template-columns: minmax(0, 1fr) }
  .tablepage .gridbox .tablewrap { height: 60vh }
  .dict { width: 100%; top: auto; height: 70vh; border-radius: 6px 6px 0 0; bottom: var(--tabbar) }
  .layers { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; border-radius: 6px 6px 0 0 }
  .layers.collapsed { max-height: none; top: auto; bottom: 0 }
  .detail { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; border-radius: 6px 6px 0 0; z-index: 6 }
  .minimap { height: 260px }
  .pagehead .actions { margin-left: 0; width: 100% }
  th, td { max-width: 220px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* ------------------------------------------------------------------ sign-in page */
body.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; grid-template-areas: "main" }
.login { padding: 0; width: 100%; max-width: 380px }
.login-card { display: grid; gap: 8px; padding: 26px 24px }
.login-card .brand { padding: 0 0 6px }
.login-card { border: 0; border-top: 3px solid var(--gold) }
.login-card label { font-size: 13px; font-weight: 600; margin-top: 6px }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 16px }
.login-card .pw { display: flex; gap: 6px } .login-card .pw input { flex: 1; min-width: 0 }
.login-card .btn.primary { justify-content: center; padding: 10px; margin-top: 10px; font-weight: 600 }
.login-card .btn.primary:disabled { opacity: .6 }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }

/* 3D view and equipment library pages embed the full viewers */
.embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--panel-2) }
.embed-shell { position: relative; height: 100% }
.embed-bar { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: flex; gap: 8px }
.embed-bar.top { left: auto; right: 12px; bottom: auto; top: 12px }

/* ------------------------------------------------------------------ asset twin: tree | scene | inspector */
/* the scene fills the whole work area; the tree, inspector and deep dive float over it as glass panels between the lens bar and the timeline */
.twin { height: 100%; position: relative; overflow: hidden; --pt: 56px; --pb: 66px }
.glass { background: color-mix(in srgb, var(--panel) 66%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--panel) 55%, var(--rule)); border-radius: 6px; box-shadow: 0 10px 34px rgb(7 15 46 / .22) }
.glass.collapsed { bottom: auto !important; overflow: hidden }
.glass.collapsed :is(.tree, .itabs, .insp-body, .bc, .insp-head > .row:not(:first-child), .dbody, .drel, .padnav) { display: none }
.glass.collapsed :is(.tree-head, .insp-head, .dhead) { border-bottom: 0 }
.pcollapse { padding: 6px 9px; line-height: 1 }
.twin-tree { position: absolute; left: 10px; top: var(--pt); bottom: var(--pb); width: 290px; z-index: 8; overflow: auto; min-width: 0; display: flex; flex-direction: column }
.twin:not(.tree-on) .twin-tree { visibility: hidden }
.tree-head { display: flex; gap: 6px; padding: 10px; position: sticky; top: 0; background: color-mix(in srgb, var(--panel) 70%, transparent); z-index: 2; border-bottom: 1px solid var(--rule) }
.tree-head input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel-2); color: var(--ink); font: inherit }
.panel-title { font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; align-self: center }
/* views menu: presets and saved camera views; glass like the panels, but not a panel the scene centres around */
.pop-glass { background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 10px 34px rgb(7 15 46 / .25) }
.views-pop { position: absolute; top: 54px; left: 10px; width: min(360px, calc(100% - 20px)); max-height: calc(100% - 140px); overflow: auto; z-index: 10; padding: 10px }
.views-pop[hidden] { display: none }
.views-pop h3 { margin: 8px 4px 4px }
.views-pop button[data-preset], .views-pop button[data-saved] { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 6px 8px; border-radius: 3px }
.views-pop button[data-preset]:hover, .views-pop button[data-saved]:hover, .views-pop button:focus-visible { background: var(--sky) }
.views-pop b { display: block; font-weight: 600; font-size: 13px }
.views-pop small { display: block; color: var(--muted); font-size: 11.5px }
.views-pop .vrow { display: flex; align-items: center; gap: 4px }
.views-pop .vrow > button[data-saved] { flex: 1; min-width: 0 }
.views-pop .vsave { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule) }
.views-pop .vsave input { flex: 1; min-width: 0 }
@media (max-width: 700px) { .views-pop { top: 96px } }
.tree, .tree ul { list-style: none; margin: 0; padding: 0 }
.tree { padding: 6px 4px 24px }
.tree ul { padding-left: 14px }
.tree li[aria-expanded="false"] > ul { display: none }
.trow { display: flex; align-items: center; gap: 2px; border-radius: var(--r) }
.trow:hover { background: var(--panel-2) }
.trow.sel { background: color-mix(in srgb, var(--accent) 16%, transparent) }
.caret-sp { width: 20px; flex: none }
.caret { all: unset; width: 20px; flex: none; text-align: center; cursor: pointer; color: var(--muted) }
.tlabel { all: unset; cursor: pointer; padding: 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0 }
.caret:focus-visible, .tlabel:focus-visible { outline: 2px solid var(--accent); border-radius: 4px }
.ticon { display: inline-block; width: 18px; color: var(--accent); font-size: 12px }
.tcount { font: 11px var(--mono); color: var(--muted); padding-right: 6px }
.tree-close { display: none }
.twin-stage { position: absolute; inset: 0 }
.twin.tree-on .lens-legend { left: 310px }                                    /* clear of the open tree */
.attn-pop, .pads-pop { z-index: 10 !important }
.twin:has(.twin-insp:not([hidden])) .toasts { right: 400px }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--panel-2) }
.stage-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; align-items: flex-start; z-index: 4; pointer-events: none }
.stage-top > * { pointer-events: auto }
.tree-open { display: none }
.twin:not(.tree-on) .tree-open { display: inline-flex }
.lensbar { display: flex; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: var(--r); overflow-x: auto; max-width: 100%; scrollbar-width: none }
.lensbar button { all: unset; cursor: pointer; padding: 6px 11px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap }
.lensbar button[aria-selected="true"] { background: var(--strong); color: var(--accent-ink) }
.lensbar button:focus-visible { outline: 2px solid var(--accent) }
.attn { margin-left: auto; background: color-mix(in srgb, var(--panel) 92%, transparent) }
.attn-pop { position: absolute; top: 54px; right: 10px; width: min(420px, calc(100% - 20px)); max-height: 60%; overflow: auto; z-index: 6; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 8px 28px rgb(0 0 0 / .25); padding: 10px }
.attn-pop button { all: unset; display: block; cursor: pointer; padding: 6px 4px; font-size: 13px; border-bottom: 1px solid var(--rule) }
.attn-pop button:hover { background: var(--panel-2) }
.lens-legend { position: absolute; left: 10px; bottom: 70px; z-index: 4; display: flex; flex-direction: column; gap: 3px; font-size: 12px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 10px }
.lens-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px }
.lens-legend .lgby { display: flex; gap: 4px; margin-bottom: 2px }
.lens-legend .lgby .chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink) }
.lens-legend .lgrow { all: unset; cursor: pointer; display: flex; align-items: center; gap: 2px; padding: 2px 4px; margin: 0 -4px; border-radius: 4px }
.lens-legend .lgrow b { margin-left: 4px } .lens-legend .lgrow .muted { margin-left: 6px }
.lens-legend .lgrow:hover:not([disabled]), .lens-legend .lgrow:focus-visible { background: var(--panel-2) }
.lens-legend .lgrow[aria-pressed="true"] { background: var(--panel-2); outline: 1.5px solid var(--ink) }
.lens-legend .lgrow[disabled] { opacity: .45; cursor: default }
.lens-legend .lglist { max-height: 230px; max-width: 330px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; border-top: 1px solid var(--rule); padding-top: 4px }
.lens-legend .lglist a { display: block; padding: 3px 4px; border-radius: 4px; color: inherit; text-decoration: none }
.lens-legend .lglist a:hover, .lens-legend .lglist a:focus-visible { background: var(--panel-2) }
.lens-legend .lglist small { display: block; color: var(--muted); line-height: 1.35 }
.taglist.pl tr.sub td { font-weight: 600; border-top: 1px solid var(--rule) }
.plbar { display: block; height: 8px; border-radius: 2px; min-width: 1px }
.vchip[data-s="warn"] { background: color-mix(in srgb, var(--warn) 18%, transparent); border-color: var(--warn); color: var(--warn) }
.timebar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 8px; align-items: center; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rule); border-radius: var(--r); padding: 6px 10px }
.timebar .tspeed { font-size: 12px; padding: 4px 4px; width: auto }
.timebar .tstep { display: flex; align-items: center; gap: 2px }
.timebar .tstep .btn { padding-left: 7px; padding-right: 7px }
.timebar .tat { font-size: 12px; padding: 4px 4px; width: 176px }
.timebar .track { position: relative; flex: 1; min-width: 160px; height: 40px; cursor: pointer; touch-action: none; border-radius: var(--r); outline: none }
.timebar .track:focus-visible { box-shadow: 0 0 0 2px var(--accent) }
.timebar .track canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.timebar .ttip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 320px; font-size: 12px; line-height: 1.35;
  padding: 5px 8px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 6px 20px rgb(0 0 0 / .22); pointer-events: none; z-index: 5 }
.timebar .tspan { display: flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; flex: none }
.timebar .tspan button { all: unset; cursor: pointer; font-size: 12px; padding: 5px 7px; color: var(--muted) }
.timebar .tspan button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink) }
.timebar .tspan button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
@media (max-width: 1100px) {
  .timebar { flex-wrap: wrap; row-gap: 6px }
  .timebar .track { order: 9; flex-basis: 100% }
  .twin { --pb: 112px }
  .lens-legend { bottom: 116px }
}
.twin-insp { position: absolute; right: 10px; top: var(--pt); bottom: var(--pb); width: 380px; overflow: auto; min-width: 0; z-index: 8 }
.insp-head { position: sticky; top: 0; background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 12px 14px 0; border-bottom: 1px solid var(--rule); z-index: 2 }
.insp-title { font: 400 22px/1.2 var(--serif); margin: 6px 0 2px; text-transform: none; letter-spacing: 0 }   /* a name, not a section head */
.bc { font-size: 12px; color: var(--muted); line-height: 1.6 }
.bc a { color: var(--muted) }
.bc a:hover { color: var(--accent) }
.itabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; scrollbar-width: none }
.itabs button { all: unset; cursor: pointer; padding: 8px 10px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap }
.itabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent) }
.itabs button:focus-visible { outline: 2px solid var(--accent) }
.insp-body { padding: 12px 14px 24px }
.insp-body h3 { margin: 14px 0 6px }
.links { display: grid; gap: 3px; font-size: 13px }
.links a { text-decoration: none; color: var(--ink) }
.links a:hover { color: var(--accent) }
.fluid { font: 500 10px var(--mono); padding: 1px 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--rule); color: var(--muted); margin-right: 4px }
.fluid[data-f="gas"] { color: var(--p-lidar) }
.fluid[data-f="oil"] { color: var(--ok) }
.fluid[data-f="water"] { color: var(--p-public) }
.fluid[data-f="gas_lift"] { color: var(--p-synthetic) }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.vchip { font: 500 11px var(--mono); padding: 2px 7px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--rule) }
.vchip[data-s="high"], .vchip[data-s="low"] { background: color-mix(in srgb, var(--bad) 18%, transparent); border-color: var(--bad); color: var(--bad) }
.vchip[data-s="normal"] { color: var(--ok) }
.taglist { width: 100%; font-size: 13px; margin-top: 8px }
.taglist td, .taglist th { padding: 4px 6px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis }
.evlist { display: grid; gap: 4px }
.ev { all: unset; cursor: pointer; display: grid; grid-template-columns: 86px auto 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--rule); font-size: 13px }
.ev:hover { background: var(--panel-2) }
.ev:focus-visible { outline: 2px solid var(--accent) }
.evt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.evk { font: 500 10px var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--rule) }
.evk[data-sev="high"] { color: var(--bad); border-color: var(--bad) }

/* tablet: tree is a drawer over the scene, inspector floats on the right */
@media (max-width: 1100px) {
  .twin-tree { width: min(320px, calc(100% - 20px)); transform: translateX(calc(-100% - 20px)); visibility: visible !important; transition: transform .18s }
  .twin.tree-on .twin-tree { transform: none }
  .twin.tree-on .lens-legend { left: 10px }
  .tree-close { display: inline-flex }
  .tree-open { display: inline-flex !important }
  .twin-insp { width: min(380px, calc(100% - 20px)) }
  .twin:has(.twin-insp:not([hidden])) .toasts { right: auto }
}
/* phone: inspector is a bottom sheet; lens bar scrolls; timeline compact */
@media (max-width: 700px) {
  .stage-top { flex-wrap: wrap }
  .lensbar { order: 3; width: 100%; flex-basis: 100% }
  .twin-insp { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62%; border-radius: 6px 6px 0 0 }
  .twin { --pt: 104px; --pb: 112px }
  .timebar { bottom: 8px; left: 8px; right: 8px; flex-wrap: wrap; row-gap: 4px; gap: 4px; padding: 6px }
  .timebar .tat { width: 168px }
  .timebar .tstep .btn { padding-left: 6px; padding-right: 6px }
  .timebar .tstep [data-step="-24"], .timebar .tstep [data-step="24"] { display: none }   /* a day at a time: the track's own keys, or the date field */
  .timebar .tplay { order: 1 } .timebar .tstep { order: 2 } .timebar #today { order: 3; margin-left: auto }
  .timebar .tspeed { order: 4 } .timebar .tspan { order: 5 }
  .timebar .tspan button { padding: 4px 5px }
  .twin { --pb: 150px }
  .lens-legend { bottom: 150px }
  .lens-legend { bottom: 112px }
  .ev { grid-template-columns: 80px 1fr }
  .ev .evk { display: none }
}
@media (prefers-reduced-motion: reduce) { .twin-tree { transition: none } }

/* weather: a quiet pill bottom right of the scene, above the time bar, opening a panel above it; clear of the inspector, hidden under a deep dive */
.wx { position: absolute; right: 10px; bottom: calc(var(--pb) + 4px); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none }
.wx > * { pointer-events: auto }
.wxpill { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 999px; font-size: 13px; color: var(--ink);
  background: color-mix(in srgb, var(--panel) 38%, transparent); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); max-width: 280px }
.wxpill:hover, .wx.open .wxpill { background: color-mix(in srgb, var(--panel) 62%, transparent) }
.wxpill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wxpill .wxicon { width: 24px; height: 24px; flex: none }
.wxpill .wxtemp { font-weight: 600; font-variant-numeric: tabular-nums }
.wxalert { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.wxalert::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted) }
.wxalert[data-sig="w"]::before, .wxalerts li[data-sig="w"] { --sig: var(--bad) } .wxalert[data-sig="w"]::before { background: var(--bad) }
.wxalert[data-sig="a"]::before { background: var(--gold) } .wxalert[data-sig="y"]::before { background: var(--warn) }
.wxpanel { width: 320px; max-height: min(460px, calc(100vh - var(--pb) - var(--pt) - 60px)); overflow: auto; padding: 10px 12px 12px; border-radius: 12px; font-size: 12px; color: var(--ink);
  background: color-mix(in srgb, var(--panel) 58%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / .16) }
.wxhead { display: flex; align-items: center; gap: 10px }
.wxhead .wxicon { width: 40px; height: 40px; flex: none; color: color-mix(in srgb, var(--ink) 55%, #fff) }
.wxpill .wxicon { color: color-mix(in srgb, var(--ink) 55%, #fff) }
.wxhead .wxt { font-size: 24px; line-height: 1; font-weight: 600 } .wxhead .wxt small { font-size: 12px; color: var(--muted); font-weight: 500 }
.wxhead .wxc { color: var(--muted); margin-top: 2px } .wxhead .wxclose { margin-left: auto; align-self: flex-start }
.wxtabs { display: flex; gap: 2px; margin: 10px 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent) }
.wxtabs button { all: unset; cursor: pointer; padding: 5px 8px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px }
.wxtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent) }
.wxtabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.wxtabs i { font-style: normal; font-size: 10px; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 2px }
.wxgrid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 10px; margin: 0 }
.wxgrid dt { color: var(--muted) } .wxgrid dd { margin: 0; display: flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums }
.wxarrow { width: 11px; height: 11px; flex: none }
.wxsrc { margin: 8px 0 0; font-size: 11px; color: var(--muted) } .wxsub { margin: 0 0 6px; color: var(--muted) }
.wxchart { width: 100%; height: auto; display: block; overflow: visible }
.wxchart text { font-size: 9px; fill: var(--muted) }
.wxchart .wxfc { fill: none; stroke: var(--accent); stroke-width: 1.8 } .wxchart .wxobs { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 2 }
.wxchart .wxpop, .wxchart .wxbar { fill: #4f93e0; opacity: .55 } .wxchart .wxgridl { stroke: color-mix(in srgb, var(--rule) 80%, transparent) }
.wxkey { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: 4px 0 8px }
.wxkey .k { display: inline-block; width: 12px; height: 2px; margin-left: 4px } .wxkey .k:first-child { margin-left: 0 }
.wxkey .k.fc { background: var(--accent) } .wxkey .k.obs { border-top: 1.5px dashed var(--muted); height: 0 } .wxkey .k.pop { height: 8px; width: 6px; background: #4f93e0; opacity: .55 }
.wxsix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; text-align: center }
.wxsix div { display: flex; flex-direction: column; align-items: center; gap: 1px } .wxsix small { color: var(--muted); font-size: 10.5px }
.wxsix .wxicon { width: 26px; height: 26px; color: color-mix(in srgb, var(--ink) 55%, #fff) }
.wxtiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px }
.wxtiles div { display: flex; flex-direction: column; gap: 1px } .wxtiles small { color: var(--muted); font-size: 10.5px } .wxtiles b { font-weight: 600; font-variant-numeric: tabular-nums }
.wxbody h4 { margin: 8px 0 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em } .wxbody h4:first-child { margin-top: 0 }
.wxalerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.wxalerts li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 4px 0 4px 8px; border-left: 3px solid var(--sig, var(--muted)) }
.wxalerts li[data-sig="a"] { --sig: var(--gold) } .wxalerts li[data-sig="y"] { --sig: var(--warn) }
.wxalerts li small { grid-column: 1; color: var(--muted) } .wxalerts li a { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 11px }
.twin:has(.twin-insp:not([hidden]):not(.collapsed)) .wx { right: calc(min(380px, 100% - 20px) + 20px) }
.twin.dive-on .wx { display: none }
@media (max-width: 1100px) { .twin:has(.twin-insp:not([hidden])) .wx { display: none } }
@media (max-width: 700px) {
  .wx { right: 8px; left: 8px }
  .wxpanel { width: 100%; box-sizing: border-box; max-height: 52vh }
  .wxpill { max-width: 220px }
}

/* live replay (Play up to 2 days/s): the play button pulses, alarm toasts */
.twin.is-live .timebar { border-color: color-mix(in srgb, var(--bad) 55%, var(--rule)) }
.twin.is-live .timebar .tplay { border-color: var(--bad); color: var(--bad); animation: livepulse 1.2s ease-in-out infinite }
@keyframes livepulse { 50% { opacity: .25 } }
.toasts { position: absolute; top: 54px; right: 10px; z-index: 7; display: grid; gap: 6px; width: min(380px, calc(100% - 20px)); pointer-events: none }
.toast { all: unset; pointer-events: auto; box-sizing: border-box; padding: 9px 12px; font-size: 13px; line-height: 1.35; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 6px 20px rgb(0 0 0 / .22) }
.toast.alarm { cursor: pointer; border-left: 4px solid var(--bad) }
.toast.alarm:hover, .toast.alarm:focus-visible { background: var(--panel-2) }
.toast.alarm:focus-visible { outline: 2px solid var(--accent) }
.attn-pop p { margin: 4px 0 10px }
@media (max-width: 1100px) and (min-width: 701px) { .toasts { left: 10px; right: auto; width: min(340px, calc(100% - 410px)) } }   /* clear of the floating inspector */
@media (max-width: 700px) { .toasts { top: 96px; left: 8px; right: 8px; width: auto } .toast:nth-child(n+2) { display: none } }
@media (prefers-reduced-motion: reduce) { .timebar .live[aria-pressed="true"]::before { animation: none } }

/* ------------------------------------------------------------------ deep dives: wide panel beside the scene (PC), full screen (tablet, phone) */
.twin.dive-on .twin-tree, .twin.dive-on .twin-insp { display: none }
.twin-dive { position: absolute; right: 10px; top: var(--pt); bottom: var(--pb); width: clamp(560px, 50vw, 1120px); overflow: auto; min-width: 0; z-index: 9 }
.dhead { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); padding: 12px 16px 10px }.drel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 4px }
.chip { font: 500 12px var(--sans); padding: 3px 10px; border-radius: 99px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink); cursor: pointer }
.chip:hover { border-color: var(--accent); color: var(--accent) }
.lens-legend .chip { align-self: flex-start; margin-bottom: 4px }
.dbody { padding: 12px 16px 32px }
.dkpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 12px }
.dkpi { background: var(--panel-2); border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0 }
.dkpi span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dkpi b { font: 400 21px/1.25 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap }
.dkpi small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dkpi[data-s="high"] { border-color: var(--bad) } .dkpi[data-s="high"] b { color: var(--bad) }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.dc { background: color-mix(in srgb, var(--panel) 84%, transparent); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; min-width: 0; overflow: hidden }
.dc.s2 { grid-column: 1 / -1 }
.dc > div { overflow-x: auto; scrollbar-width: thin }
#d-pfd svg.ch, #d-sankey svg.ch { width: auto; max-width: none }
.dc h3 { margin: 0 0 4px; font-size: 14px }
.dc h4 { margin: 10px 0 4px; font-size: 12px; color: var(--muted) }
.dnote { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45 }
.dc .taglist { margin-top: 4px } .dc .taglist td, .dc .taglist th { max-width: 220px }
.dc .links { font-size: 12px }
.dfluid { gap: 4px; margin-bottom: 6px }
.dfluid button { all: unset; cursor: pointer; padding: 2px; border-bottom: 2px solid transparent }
.dfluid button[aria-selected="true"] { border-color: var(--accent) }
.dfluid button:focus-visible { outline: 2px solid var(--accent) }
.dbar { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--rule); vertical-align: middle; overflow: hidden }
.dbar i { display: block; height: 100% }
svg.ch { width: 100%; height: auto; display: block; fill: none; stroke: none; overflow: visible }
svg.ch text { fill: var(--ink); stroke: none; font: 11px var(--sans) }
svg.ch .ss { fill: var(--muted); font-size: 10px }
svg.ch .sl { font-size: 11px }
svg.ch .sv { font: 600 11px var(--mono) }
svg.ch .gl { stroke: var(--rule); stroke-width: 1 }
svg.ch .rl { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3 }
svg.ch .tl { stroke: var(--p-derived); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7 }
svg.ch .pt, svg.ch .pn, svg.ch .hc { cursor: pointer }
svg.ch .pt { stroke: var(--panel); stroke-width: 1; opacity: .85 } svg.ch .pt:hover { opacity: 1; stroke: var(--ink) }
svg.ch .pn:hover rect { stroke: var(--accent) !important }
svg.ch .hc:hover { stroke: var(--ink); stroke-width: 1 }
svg.ch .hsel { fill: none; stroke: var(--accent); stroke-width: 1.5 }
@media (max-width: 1100px) {
  .twin-dive { left: 10px; width: auto }
  .dgrid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 700px) { .twin-dive:not(.collapsed) { inset: 0; border-radius: 0; background: var(--bg) } }   /* a phone reads a deep dive full screen */
@media (max-width: 700px) { .ddate { display: none } .dbody { padding: 10px 10px 28px } .dhead { padding: 10px 12px 8px } .dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } .dc { padding: 10px } }

/* pad navigator: list over the scene, switcher in the pad deep dive */
.padsbtn { background: color-mix(in srgb, var(--panel) 92%, transparent) }
.pads-pop { position: absolute; top: 54px; left: 10px; width: min(440px, calc(100% - 20px)); max-height: calc(100% - 140px); display: flex; flex-direction: column; z-index: 6; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 8px 28px rgb(0 0 0 / .25) }
.pads-pop[hidden] { display: none }
.pads-head { display: flex; gap: 6px; padding: 10px 10px 6px }
.pads-head input { flex: 1 }
#padlist { overflow: auto; padding: 0 10px 8px }
.pads-note { font-size: 11px; margin: 2px 0 6px }
#padlist button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 7px 6px; border-bottom: 1px solid var(--rule); border-radius: var(--r) }
#padlist button:hover, #padlist button:focus-visible { background: var(--panel-2) }
#padlist button[aria-current] { box-shadow: inset 3px 0 0 var(--accent) }
.pads-name { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600 }
.pads-name small { font-weight: 400; color: var(--muted); font-size: 11px }
.pads-fig { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums }
.pads-fig .bad { color: var(--bad, #c0392b) }
.padnav { display: flex; gap: 6px; align-items: center; margin: 2px 0 6px; font-size: 12px }
.padnav select { flex: 0 1 320px; min-width: 0 }
.padnav .btn { padding: 4px 11px; font-size: 15px; line-height: 1 }
.padnav > span { white-space: nowrap }
@media (max-width: 700px) { .pads-pop { top: 96px; max-height: calc(100% - 200px) } }

/* map key under the Overview and Facilities lenses; [hidden] has to beat the flex display or an empty box shows */
.lens-legend[hidden] { display: none }
.lens-legend.key { flex-direction: row; flex-wrap: wrap; gap: 3px 12px; max-width: min(520px, calc(100% - 150px)); font-size: 11.5px }
.lens-legend.key span { white-space: nowrap }
@media (max-width: 700px) { .lens-legend.key { display: none } }
@media (max-width: 900px) {
  .lens-legend { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; max-width: calc(100% - 160px); padding: 6px 8px; font-size: 11px }   /* the compass stays clear, and fewer pads sit under it */
  .lens-legend b, .lens-legend a { flex-basis: 100% }
  .lens-legend .chip { margin-bottom: 2px }
}
@media (max-width: 700px) { .tag { white-space: normal } }