/* ── StrataMapping Professional Survey CSS v2.0 ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0f1a;
  --surface:   #111827;
  --hi:        #1a2436;
  --border:    #1e2d45;
  --accent:    #FF8C00;
  --text:      #e8edf5;
  --mid:       #8a9ab8;
  --dim:       #4a5a78;
  --power:     #FF8C00;
  --telecom:   #9B30FF;
  --water:     #1E90FF;
  --gas:       #FFD700;
  --storm:     #00C853;
  --sewer:     #FF3030;
  --kerb:      #00E5FF;
}

html, body { height: 100%; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
#app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── NZUD banner (sits above the app header on every authenticated screen) ── */
.nzud-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 28px; flex-shrink: 0; background: #0B2545; color: #cdd8ea;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  border-bottom: 2px solid var(--accent); padding: 0 12px; text-align: center;
}
.nzud-banner strong { color: #fff; }
.nzud-banner-brand {
  color: #fff; font-weight: 800; padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.nzud-banner-mark {
  width: 20px; height: 20px; background: var(--accent); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nzud-banner-link {
  color: var(--accent); text-decoration: none; font-weight: 700; flex-shrink: 0;
}
.nzud-banner-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .nzud-banner span { display: none; }
  .nzud-banner-link { display: none; }
}

/* ── Header ── */
#header {
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  height: 52px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.logo { display: flex; align-items: center; gap: 8px; margin-right: 24px; }
.logo-mark {
  width: 30px; height: 30px; background: var(--accent); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-name { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--text); }
.logo-sub  { font-size: 9px; color: var(--mid); letter-spacing: 0.15em; text-transform: uppercase; }
nav { display: flex; gap: 2px; flex: 1; }
.nav-btn {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 4px; border: none; cursor: pointer; font-size: 13px;
  background: none; color: var(--mid); transition: all 0.12s;
}
.nav-btn:hover { background: var(--hi); color: var(--text); }
.nav-btn.active { background: var(--hi); color: var(--text); }
.header-user { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 13px; font-weight: 600; text-align: right; }
.user-role { font-size: 9px; color: var(--mid); text-transform: uppercase; letter-spacing: 0.1em; text-align: right; }
.icon-btn {
  background: none; border: 1px solid var(--border); color: var(--mid);
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; transition: all 0.12s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Main ── */
#main { flex: 1; overflow: hidden; }
.panel { height: 100%; overflow-y: auto; padding: 24px; max-width: 960px; margin: 0 auto; }

/* ── Panel header ── */
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.panel-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.panel-sub { color: var(--mid); font-size: 12px; }

/* ── Buttons ── */
.btn-primary {
  background: var(--accent); border: none; color: #fff;
  padding: 8px 16px; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: opacity 0.12s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-ghost {
  background: none; border: 1px solid var(--border); color: var(--mid);
  padding: 8px 16px; border-radius: 5px; cursor: pointer; font-size: 13px;
  transition: all 0.12s;
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.btn-ghost.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-open {
  background: var(--accent); border: none; color: #fff;
  padding: 5px 14px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}

/* ── Filter bar ── */
.filter-bar { display: flex; gap: 6px; margin-bottom: 20px; }
.filter-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--mid);
  padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
  text-transform: capitalize; transition: all 0.12s;
}
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Job cards ── */
.job-grid { display: flex; flex-direction: column; gap: 10px; }
.job-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
  transition: border-color 0.12s;
}
.job-card:hover { border-color: var(--accent); }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.job-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.job-client { color: var(--mid); font-size: 12px; }
.job-meta { color: var(--dim); font-size: 11px; margin-bottom: 12px; }
.job-card-foot { display: flex; justify-content: space-between; align-items: center; }
.badge {
  padding: 2px 8px; border-radius: 4px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.empty-state { color: var(--mid); font-size: 13px; text-align: center; padding: 48px 0; }

/* ── Form fields ── */
.field-label {
  display: block; color: var(--mid); font-size: 10px; font-weight: 700;
  margin-bottom: 5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.field-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: 5px;
  font-size: 13px; outline: none; margin-bottom: 12px;
  transition: border-color 0.12s;
}
.field-input:focus { border-color: var(--accent); }
.field-input::placeholder { color: var(--dim); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 28px; width: 420px; max-width: 95vw;
}
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; color: var(--text); }

/* ── Share modal ── */
.share-job-name { font-weight: 700; font-size: 15px; color: var(--text); }
.share-job-meta { color: var(--mid); font-size: 12px; margin-top: 2px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.share-toggle-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.share-toggle-row label { font-size: 12px; color: var(--mid); cursor: pointer; }
.share-link-row { display: flex; gap: 8px; margin-top: 10px; }

/* ── Download Map HTML modal ── */
.dlhtml-actions { display: flex; gap: 8px; margin-top: 12px; }
.dlhtml-cat-list {
  max-height: 260px; overflow-y: auto; margin-top: 10px;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px;
}
.dlhtml-cat-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.dlhtml-cat-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.dlhtml-cat-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.dlhtml-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.share-link-row .field-input { margin-bottom: 0; font-size: 12px; }

/* ── Public share page ── */
/* flex:1 (not height:100%) — #share-page and #share-page-error now sit
   alongside the #nzud-banner strip as siblings under #app, same reasoning
   as #main below: a fixed 100% would overflow #app's 100vh by the banner's
   height and clip the bottom, so they share the remaining space instead. */
#share-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Public share page now reuses #map-shell (see below) for its whole body —
   toolbar, layer panel, legend and download buttons all live there, same
   as the authenticated Map screen — so there's no bespoke header/map CSS
   left here beyond the brief loading state and the invalid-link error. */
#share-page-loading {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  color: var(--mid); font-size: 14px;
}
#share-page-error {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 24px;
}
#share-page-error p { color: var(--mid); font-size: 14px; max-width: 360px; }

/* ── Map shell ── */
/* height:100% (not 100vh) — #map-shell lives inside #main on the
   authenticated Map screen (flex:1 under the 52px header) and inside
   #share-page on the public share page (flex:1 under the NZUD banner).
   Either way it's a flex:1 ancestor, not the viewport — sizing #map-shell
   to a fresh 100vh double-counted that ancestor's own height, causing a
   permanent overflow that got clipped unpredictably (e.g. after Leaflet's
   zoom-triggered reflow), making the toolbar appear to vanish. */
#map-shell { display: flex; flex-direction: column; height: 100%; }
#map-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  flex-shrink: 0; flex-wrap: wrap;
}
.toolbar-title { flex: 1; min-width: 0; }
.toolbar-job { font-weight: 600; font-size: 14px; color: var(--text); display: block; }
.toolbar-meta { font-size: 11px; color: var(--mid); }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toggle-group { display: flex; gap: 2px; background: var(--bg); border-radius: 5px; padding: 2px; }
.toggle-btn {
  padding: 4px 9px; border-radius: 4px; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; background: none; color: var(--dim);
  transition: all 0.12s;
}
.toggle-btn.active { background: var(--hi); color: var(--text); }
.basemap-sel {
  background: var(--hi); border: 1px solid var(--border); color: var(--text);
  padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none;
}
.btn-export {
  background: var(--hi); border: 1px solid var(--border); color: var(--mid);
  padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
  font-weight: 600; transition: all 0.12s;
}
.btn-export:hover { border-color: var(--accent); color: var(--accent); }

/* ── Drawing toolkit ── */
.draw-swatches {
  display: flex; align-items: center; gap: 3px; background: var(--bg);
  border-radius: 5px; padding: 3px 4px;
}
.draw-swatch {
  width: 16px; height: 16px; border-radius: 3px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.15); transition: all 0.12s;
}
.draw-swatch:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5); }
.draw-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
#draw-color-picker {
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 5px;
  background: var(--bg); cursor: pointer;
}

/* Every rendered map label is draggable (move) and rotatable (scroll
   wheel while hovering) — see _makeLabelInteractive in app.js. This hover
   outline is the only visual hint that a label is interactive, since the
   dark chip look is otherwise identical to a plain static tag. */
.nzud-map-label:hover { outline: 1px dashed rgba(255,255,255,0.65); outline-offset: 1px; }

/* Click-to-edit popup (colour / font / delete) opened from any label —
   reuses .nzud-popup's dark chrome, .draw-swatches/.draw-swatch for the
   colour row, and .btn-ghost/.btn-sm for the buttons. */
.nzud-label-editor { padding: 10px 12px; min-width: 190px; }
.nzud-le-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nzud-le-row:last-child { margin-bottom: 0; }
.nzud-le-label {
  color: var(--mid); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; width: 40px; flex-shrink: 0;
}
.nzud-le-select { margin-bottom: 0; flex: 1; padding: 4px 8px; font-size: 12px; }
.nzud-le-delete { color: #ff5252; border-color: #ff5252; flex: 1; text-align: center; }
.nzud-le-delete:hover { background: rgba(255,82,82,0.12); }

/* ── Map body ── */
#map-body { display: flex; flex: 1; overflow: hidden; }
#map-panel {
  width: 210px; background: var(--surface); border-right: 1px solid var(--border);
  padding: 12px; overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; gap: 0;
}
#map-container { flex: 1; background: #0d1520; }
.panel-section-label {
  color: var(--dim); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; padding: 0 4px;
}
.layer-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 4px; cursor: pointer; margin-bottom: 2px;
  transition: background 0.1s;
}
.layer-row:hover { background: var(--hi); }
.layer-swatch { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.layer-name { font-size: 12px; color: var(--text); flex: 1; }
.layer-count { font-size: 10px; color: var(--dim); font-family: monospace; }

/* ── Point detail ── */
.detail-card {
  margin-top: 14px; padding: 10px; background: var(--hi);
  border-radius: 6px; border: 1px solid var(--border);
}
.detail-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 8px; }
.detail-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.detail-k { color: var(--mid); font-size: 11px; }
.detail-v { color: var(--text); font-size: 11px; font-weight: 600; font-family: monospace; }

/* ── Tooltip ── */
.nzud-tip .leaflet-tooltip { background: transparent !important; border: none !important; box-shadow: none !important; }
.nzud-tooltip {
  background: rgba(10,15,26,0.95); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 11px; font-family: monospace; font-size: 11px;
  line-height: 1.6; min-width: 160px; pointer-events: none;
}
.nzud-tt-head { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; margin-bottom: 6px; }
.nzud-tt-row { display: flex; justify-content: space-between; gap: 12px; }
.nzud-tt-k { color: var(--mid); }
.nzud-tt-v { color: var(--text); font-weight: 600; }

/* ── Map legend ── */
.map-legend {
  margin-top: 16px; padding: 10px 10px;
  background: rgba(255,255,255,0.97);
  border: 1px solid #ccc;
  border-radius: 4px; font-size: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.legend-title {
  font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
  color: #111; margin-bottom: 4px; word-break: break-all;
}
.legend-sub { color: #555; font-size: 9px; margin-bottom: 2px; line-height: 1.4; }
.legend-divider { border-top: 1px solid #ddd; margin: 6px 0; }
.legend-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.legend-label { color: #222; font-size: 10px; font-weight: 500; }
.legend-meta { color: #666; font-size: 9px; margin-bottom: 2px; }

/* ── Borehole/CPT index control (counts + jump-to dropdown) ── */
.bhcpt-index {
  padding: 8px 10px;
  background: rgba(255,255,255,0.97);
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  min-width: 168px;
}
.bhcpt-index-title {
  font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
  color: #111; margin-bottom: 3px;
}
.bhcpt-index-count { color: #555; font-size: 9px; margin-bottom: 6px; }
.bhcpt-index-select {
  width: 100%; font-size: 11px; padding: 3px 4px;
  border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #111;
}

/* ── North arrow ── */
.north-arrow {
  background: rgba(10,15,26,0.85); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px; margin-top: 60px !important;
}

/* ── Leaflet popup ── */
.nzud-popup .leaflet-popup-content-wrapper {
  background: rgba(10,15,26,0.97) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  padding: 0 !important;
}
.nzud-popup .leaflet-popup-content { margin: 0 !important; }
.nzud-popup .leaflet-popup-tip-container { display: none; }

/* ── Upload ── */
.drop-zone {
  border: 2px dashed var(--border); border-radius: 10px; padding: 40px;
  text-align: center; background: var(--surface); transition: all 0.15s; margin-bottom: 20px;
  display: flex; flex-direction: column; align-items: center;
}
.drop-zone.drag { border-color: var(--accent); background: rgba(255,140,0,0.05); }
.file-list-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px; margin-bottom: 14px;
}
.file-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.file-row:last-child { border-bottom: none; }
.pipeline-step { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.success-box { margin-top: 12px; padding: 12px; background: #0d2a1a; border: 1px solid #00c853; border-radius: 6px; color: #00c853; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { width: 14px; height: 14px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }

/* ── Users ── */
.user-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 8px;
}

/* ── Login ── */
#login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  position: relative;
  width: 360px; padding: 40px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.login-logo .logo-name { font-size: 20px; font-weight: 800; }
.demo-creds { margin-top: 18px; padding: 10px 12px; background: var(--bg); border-radius: 6px; font-size: 11px; color: var(--dim); }
.login-back {
  position: absolute; top: 16px; left: 16px;
  background: none; border: none; color: var(--mid); font-size: 12px; cursor: pointer;
}
.login-back:hover { color: var(--text); }

/* ── Home (marketing) ── */
/* #app is a fixed-height (100vh), overflow:hidden flex column — built for
   the dashboard shell, whose individual panels scroll internally. The
   marketing page is much taller than one viewport, so it needs to be the
   thing that scrolls here rather than relying on the page/body (which
   never gets the chance, since #app clips first). */
#home-page { height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
#home-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
/* Hero: headline/copy pinned to the left at a fixed comfortable width,
   the image slideshow flexes to fill whatever room is left — on wide
   screens that means the image genuinely grows to use the space instead
   of floating in a fixed-width column with dead space beside it. */
.home-hero {
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  padding: 64px 32px 40px; max-width: 1680px; margin: 0 auto; width: 100%;
}
.home-hero-copy { flex: 0 1 440px; min-width: 320px; }
.home-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.home-hero-copy h1 {
  font-size: 42px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 18px;
}
.home-hero-copy p { font-size: 15px; line-height: 1.6; color: var(--mid); margin-bottom: 28px; max-width: 480px; }
.home-hero-actions { display: flex; align-items: center; gap: 14px; }
.home-hero-actions a.btn-ghost { text-decoration: none; }
.home-hero-image { flex: 1 1 600px; min-width: 320px; }
.home-hero-slides {
  position: relative; width: 100%; aspect-ratio: 1920 / 729;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  background: var(--bg);
}
.home-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s ease;
}
.home-hero-slide.active { opacity: 1; }
.home-hero-caption { margin-top: 12px; font-size: 12px; color: var(--mid); text-align: center; }
.home-hero-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.home-hero-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: var(--border); cursor: pointer; transition: background 0.15s;
}
.home-hero-dot:hover { background: var(--mid); }
.home-hero-dot.active { background: var(--accent); }

/* NZUD "powered by" — no banner, no separate section. It lives inside the
   hero copy column, directly below the CTA buttons, so the badge's left
   edge lines up exactly with the Login button's left edge above it. */
.home-nzud-inline { display: flex; align-items: flex-start; gap: 18px; margin-top: 32px; }
.home-nzud-badge {
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 14px;
  background: linear-gradient(155deg, #0B2545 0%, #0a0f1a 100%);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.home-nzud-mark { font-size: 17px; font-weight: 800; letter-spacing: 0.05em; color: #fff; }
.home-nzud-est { font-size: 9px; color: var(--accent); font-weight: 700; letter-spacing: 0.03em; text-align: center; padding: 0 8px; }
.home-nzud-copy { flex: 1 1 auto; min-width: 180px; }
.home-nzud-copy h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; }
.home-nzud-stats { display: flex; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; }
.home-nzud-stat-num { font-size: 15px; font-weight: 800; color: var(--accent); }
.home-nzud-stat-label { font-size: 10px; color: var(--dim); margin-top: 1px; }
.home-nzud-link { font-size: 11.5px; color: var(--mid); text-decoration: none; }
.home-nzud-link:hover { color: var(--accent); }

/* Feature grid — 2x2, left-aligned under the NZUD block, same column as
   the hero copy (not a separate full-width section anymore). */
.home-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 28px; width: 100%;
}
.home-feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px;
}
.home-feature-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.home-feature-body { font-size: 12px; line-height: 1.5; color: var(--mid); }

/* How it works — sits under the hero image, left-aligned, stacked steps */
.home-how { margin-top: 28px; }
.home-how-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.home-how-step { display: flex; align-items: flex-start; gap: 12px; }
.home-how-num {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  background: var(--accent); color: #1a1005; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.home-how-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.home-how-body { font-size: 12.5px; line-height: 1.5; color: var(--mid); }

#home-footer {
  margin-top: auto; padding: 22px 32px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--dim);
}
#home-footer a { color: var(--mid); text-decoration: none; }
#home-footer a:hover { color: var(--accent); }
.home-footer-sep { opacity: 0.5; }
@media (max-width: 640px) {
  .home-hero-copy h1 { font-size: 30px; }
}

/* ── Process controls ── */
#process-controls { display: flex; }

/* ── Leaflet overrides ── */
.leaflet-control-scale-line {
  background: rgba(10,15,26,0.85) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important; font-size: 10px !important;
  padding: 2px 6px !important; border-radius: 3px !important;
}
.leaflet-control-zoom a {
  background: var(--surface) !important; color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--hi) !important; color: var(--accent) !important; }

/* ── 3D depth view ── */
#view-3d-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: #0a0e14; display: flex; flex-direction: column;
}
#view-3d-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 52px; padding: 0 18px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.v3d-title { font-weight: 700; font-size: 14px; color: var(--text); }
.v3d-title .v3d-sub { font-weight: 400; font-size: 12px; color: var(--mid); }
.v3d-controls { display: flex; align-items: center; gap: 16px; }
.v3d-exag { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mid); }
.v3d-exag input[type="range"] { width: 120px; accent-color: var(--accent); }
#v3d-exag-val { color: var(--text); font-variant-numeric: tabular-nums; min-width: 34px; display: inline-block; }
#view-3d-canvas-wrap { flex: 1; position: relative; touch-action: none; }
#view-3d-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.v3d-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--mid); font-size: 13px; padding: 20px; text-align: center;
}
#view-3d-legend {
  position: absolute; left: 18px; bottom: 44px; z-index: 5001;
  background: rgba(17,24,39,0.85); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--text); max-width: 220px;
}
.v3d-legend-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  cursor: pointer; user-select: none;
}
.v3d-legend-row:hover { color: var(--accent); }
.v3d-legend-row.off { color: var(--dim); opacity: 0.6; }
.v3d-legend-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; margin: 0; }
.v3d-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
#view-3d-hint {
  position: absolute; right: 18px; bottom: 12px; z-index: 5001;
  font-size: 11px; color: var(--dim);
}
.v3d-mode-toggle { display: flex; gap: 4px; }
.v3d-mode-toggle .btn-ghost { padding: 5px 12px; font-size: 12px; }
.v3d-mode-toggle .btn-ghost.active { background: var(--accent); color: #1a1005; border-color: var(--accent); }
#v3d-station-nav {
  display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--text);
  padding-left: 4px; border-left: 1px solid var(--border);
}
#v3d-station-nav .btn-ghost { padding: 4px 9px; font-size: 12px; }
#v3d-station-nav button:disabled { opacity: 0.35; cursor: default; }
#v3d-station-text { min-width: 150px; text-align: center; color: var(--mid); }

/* Floating labels — DOM billboards positioned each frame from the 3D
   anchor's projected screen coordinates (see _updateSceneLabels). Used for
   both Street View's per-station cross-section readout and Overview's
   per-point depth chips. */
#view-3d-station-labels { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.v3d-station-label, .v3d-dim-label {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(8,12,20,0.85); border: 1px solid; border-radius: 6px;
  padding: 4px 9px; white-space: nowrap; pointer-events: none;
}
.v3d-sl-title { font-weight: 700; font-size: 11px; letter-spacing: 0.03em; }
.v3d-sl-meta { color: var(--mid); font-size: 10px; margin-top: 1px; }
.v3d-depth-chip {
  position: absolute; transform: translate(-50%, -130%);
  background: rgba(8,12,20,0.8); border: 1px solid; border-radius: 5px;
  padding: 1px 6px; white-space: nowrap; pointer-events: none;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Job photos ── */
.photo-marker-icon { background: none; border: none; }
.photo-pin {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5); border: 2px solid #1a1005;
}
.photo-pin::before { content: "📷"; transform: rotate(45deg); font-size: 12px; }

#photos-overlay {
  position: fixed; inset: 0; z-index: 5100;
  background: rgba(8,12,20,0.72); display: flex; align-items: center; justify-content: center;
}
#photos-panel {
  width: min(760px, 92vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.photos-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.photos-upload-btn {
  margin: 14px 18px 0; display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; cursor: pointer;
}
.photos-grid {
  flex: 1; overflow-y: auto; padding: 14px 18px 18px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.photo-card {
  background: var(--hi); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.photo-thumb-wrap {
  width: 100%; aspect-ratio: 4/3; background: #10151f; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.photo-card-name {
  font-size: 11px; color: var(--text); padding: 6px 8px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-card-meta { font-size: 11px; color: var(--mid); padding: 0 8px 8px; }
.photos-empty {
  color: var(--mid); font-size: 13px; text-align: center; padding: 24px;
  grid-column: 1 / -1;
}

/* ── Home Page admin (hero slideshow management) ── */
.hero-upload-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hero-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.hero-admin-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.hero-admin-thumb { width: 100%; aspect-ratio: 1920/729; background: #10151f; overflow: hidden; }
.hero-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-admin-caption { margin: 10px 10px 0; width: calc(100% - 20px); }
.hero-admin-row { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.hero-admin-order { display: flex; gap: 4px; }
.hero-admin-order .btn-ghost { padding: 4px 9px; }

.photo-preview-overlay {
  position: fixed; inset: 0; z-index: 5200;
  background: rgba(4,6,10,0.85); display: flex; align-items: center; justify-content: center;
}
.photo-preview-card {
  width: min(720px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.photo-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text);
}
.photo-preview-img-wrap {
  flex: 1; min-height: 200px; background: #10151f;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo-preview-img-wrap img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.photo-preview-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.v3d-dim-label { border-color: var(--accent); color: var(--accent); font-weight: 700; font-size: 11px; }