/* ══════════════════════════════════════════════════════════════════════════
   Magarini Terraform — theme.css  (FROZEN v1.0)
   Source of truth per BRAND.md. Dark intelligence-platform aesthetic.
   Copper/amber signature accent. No Magarini blue family (banned per BRAND.md).
   Replaces the retired legacy stylesheet. Demonstration build only.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Base surfaces (near-black / charcoal) ── */
  --bg:          #0c0e12;
  --surface-1:   #14171d;
  --surface-2:   #1b1f27;
  --surface-3:   #242a34;
  --line:        #2b313c;
  --line-strong: #3a4250;

  /* ── Text (high-contrast off-white) ── */
  --ink:      #eef1f6;
  --ink-soft: #aab3c2;
  --ink-mute: #727d8e;

  /* ── Signature accent: COPPER / amber ── */
  --accent:        #e08a3c;
  --accent-bright: #f5a65b;
  --accent-deep:   #b5641f;
  --accent-dim:    #6b451f;
  --accent-glow:   rgba(224,138,60,0.14);
  --on-accent:     #1a1206;  /* dark ink placed on copper fills */

  /* ── Semantic status (tuned for dark) ── */
  --ok:          #4fbf87;
  --ok-fill:     rgba(79,191,135,0.15);
  --warn:        #e6b84f;
  --warn-fill:   rgba(230,184,79,0.15);
  --danger:      #e5645f;
  --danger-fill: rgba(229,100,95,0.15);
  --info:        #8a94a6;
  --info-fill:   rgba(138,148,166,0.15);

  /* ── Licence-function colours (map "colour = licence function" system).
        One hue family per tenure FUNCTION, reused across every jurisdiction so
        the map reads by what a licence is, not by country. Brand-clean: copper/
        amber anchored, no Magarini blue family. ── */
  --fn-mining:      #e8622e;  /* producing tenure — strongest, saturated copper-red */
  --fn-exploration: #e3b64e;  /* exploration / research / prospecting — amber gold */
  --fn-application: #6e7987;  /* pending applications — deliberately recessive grey */
  --fn-artisanal:   #b98a56;  /* artisanal / small-scale — secondary earth tone */
  --fn-processing:  #a887e0;  /* processing / refining / smelting / dealers — violet */
  --fn-restricted:  #96827b;  /* restricted / amodiation / legacy — desaturated neutral */
  --fn-context:     #55606e;  /* geology / admin underlay — very muted */

  /* ── Commodity group colours (7 groups). Display values for dark theme.
        NOTE: the map reads colours from commodity-groups.js, not from here.
        See BRAND.md §12 reconciliation note. ── */
  --cg-copper-cobalt: #e08a3c;
  --cg-gold-precious: #e8c14a;
  --cg-battery-tech:  #4fbf87;
  --cg-gemstones:     #b48ce8;
  --cg-industrial:    #9aa6b6;
  --cg-energy:        #d9663a;
  --cg-other:         #6f7a8a;

  /* ── Demonstration ribbon ── */
  --ribbon-bg:   #1a130a;
  --ribbon-fg:   #f0a860;
  --ribbon-line: #3a2a15;

  /* ── Typography ── */
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-display: 26px;
  --fs-h1:      20px;
  --fs-h2:      13px;
  --fs-body:    14px;
  --fs-sm:      12.5px;
  --fs-xs:      11px;
  --fs-2xs:     9.5px;
  --fs-stat:    28px;

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   7px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ── Elevation / focus ── */
  --shadow-1:   0 1px 0 rgba(0,0,0,0.4);
  --shadow-2:   0 6px 20px rgba(0,0,0,0.45);
  --shadow-pop: 0 10px 30px rgba(0,0,0,0.55);
  --focus-ring: 0 0 0 2px var(--accent-glow), 0 0 0 1px var(--accent);

  /* ── Layout constants ── */
  --topbar-h:    52px;
  --ribbon-h:    24px;
  --sidebar-w:   340px;
  --content-max: 1240px;
}

/* ══ Reset / base ══ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--ribbon-h);   /* clear the fixed ribbon */
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }
.mono, code, kbd { font-family: var(--font-mono); }

::selection { background: var(--accent-glow); }
* { scrollbar-color: var(--line-strong) transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   DEMONSTRATION ribbon
   ══════════════════════════════════════════════════════════════════════════ */
.demo-ribbon {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;
  height: var(--ribbon-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ribbon-bg);
  color: var(--ribbon-fg);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--ribbon-line);
  box-shadow: inset 0 1px 0 rgba(240,168,96,0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   Top bar + wordmark + nav
   ══════════════════════════════════════════════════════════════════════════ */
.ci-header {
  position: sticky;
  top: var(--ribbon-h);
  z-index: 2000;
  min-height: var(--topbar-h);
  background: var(--surface-1);
  color: var(--ink);
  padding: 8px var(--space-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ci-brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ci-wordmark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.ci-wordmark .wm-a { color: var(--ink); }
.ci-wordmark .wm-b { color: var(--accent); }
/* Fallback: plain-text wordmark (no wm-a/wm-b spans) still reads on brand. */
.ci-wordmark { color: var(--ink); }

.ci-tagline {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  border-left: 2px solid var(--accent-dim);
  padding-left: var(--space-2);
  margin-left: var(--space-2);
  white-space: nowrap;
}

.ci-provenance-inline {
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  border-left: 2px solid var(--accent-dim);
  padding-left: var(--space-2);
  margin-left: var(--space-2);
}

.ci-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.ci-nav a {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ci-nav a:hover { background: var(--surface-3); color: var(--ink); }
.ci-nav a.active {
  color: var(--accent);
  background: var(--accent-glow);
  border-color: var(--accent-dim);
}

/* ══ Provenance band (under top bar) ══ */
.provenance {
  margin: 0;
  padding: 7px var(--space-6);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
}

/* ══ Footer disclaimer ══ */
.footer-disclaimer {
  margin: 0;
  padding: 18px var(--space-6) 26px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-mute);
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}

/* ══════════════════════════════════════════════════════════════════════════
   Commodity swatches / group colours
   ══════════════════════════════════════════════════════════════════════════ */
.swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  vertical-align: middle;
}
.cg-copper-cobalt { background-color: var(--cg-copper-cobalt); }
.cg-gold-precious { background-color: var(--cg-gold-precious); }
.cg-battery-tech  { background-color: var(--cg-battery-tech); }
.cg-gemstones     { background-color: var(--cg-gemstones); }
.cg-industrial    { background-color: var(--cg-industrial); }
.cg-energy        { background-color: var(--cg-energy); }
.cg-other         { background-color: var(--cg-other); }

/* ══ "Illustrative" marker for forward-looking figures ══ */
.illustrative {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-fill);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   App layout (body.app) — scrolling document pages
   ══════════════════════════════════════════════════════════════════════════ */
.section {
  padding: var(--space-6);
  max-width: var(--content-max);
  margin: 0 auto;
}
.section h1 { font-size: var(--fs-display); color: var(--ink); margin: 0 0 var(--space-2); line-height: 1.2; }
.section h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
  margin: var(--space-8) 0 var(--space-4);
}
.section p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-soft); max-width: 760px; }
.lede { font-size: 15.5px; line-height: 1.75; color: var(--ink); max-width: 760px; }
.links-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent-deep);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn:hover { background: var(--accent-bright); color: var(--on-accent); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { background: var(--surface-2); color: var(--ink-mute); border-color: var(--line); cursor: default; }
.btn.secondary, .btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.secondary:hover, .btn.ghost:hover { background: var(--surface-3); border-color: var(--accent-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   Panel card
   ══════════════════════════════════════════════════════════════════════════ */
.panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}
.panel-body { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════
   Stat tiles
   ══════════════════════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.stat-tile .num { font-family: var(--font-mono); font-size: var(--fs-stat); font-weight: 700; color: var(--ink); line-height: 1; }
.stat-tile .label { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-tile .delta { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; }
.stat-tile .delta.up { color: var(--ok); }
.stat-tile .delta.down { color: var(--danger); }

/* Legacy alias: prior build used .chips/.chip — map onto stat-tile look. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 150px; padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.chip .n { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; }
.chip .l { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   Cards (dashboard drill-through link cards)
   ══════════════════════════════════════════════════════════════════════════ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.card {
  display: block;
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  color: inherit;
  transition: background 120ms, border-color 120ms;
}
.card:hover { background: var(--surface-2); border-color: var(--line-strong); border-left-color: var(--accent-bright); }
.card h3 { margin: 0 0 var(--space-2); font-size: 15px; color: var(--ink); }
.card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.card .kind {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   Signal cards (signals.html)
   ══════════════════════════════════════════════════════════════════════════ */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.signal-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 120ms, box-shadow 120ms;
}
.signal-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.signal-card.sev-high  { border-left-color: var(--danger); }
.signal-card.sev-watch { border-left-color: var(--warn); }
.signal-card.sev-info  { border-left-color: var(--info); }
.signal-card .signal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.signal-card .when { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-mute); white-space: nowrap; }
.signal-card h3 { margin: 0 0 var(--space-1); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.signal-card p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
.signal-card .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Badges / chips / severity tags
   ══════════════════════════════════════════════════════════════════════════ */
.badge, .tag, .chip-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.active,  .tag.ok      { background: var(--ok-fill);     color: var(--ok);     border-color: rgba(79,191,135,0.35); }
.badge.inactive,.tag.high    { background: var(--danger-fill); color: var(--danger); border-color: rgba(229,100,95,0.35); }
.badge.maint,   .tag.watch   { background: var(--warn-fill);   color: var(--warn);   border-color: rgba(230,184,79,0.35); }
.badge.none,    .tag.info    { background: var(--info-fill);   color: var(--info);   border-color: rgba(138,148,166,0.35); }
.chip-tag {
  background: var(--surface-3);
  color: var(--ink-soft);
  border-color: var(--line);
  text-transform: none;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tabs
   ══════════════════════════════════════════════════════════════════════════ */
#tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-3) var(--space-6) 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#tabs .tab {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 120ms, box-shadow 120ms;
}
#tabs .tab:hover { color: var(--ink); }
#tabs .tab.active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Toolbar + Data Explorer table
   ══════════════════════════════════════════════════════════════════════════ */
#toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
#table-search, #toolbar select, input[type="search"], input[type="text"], select {
  font-family: inherit;
}
#table-search {
  flex: 1; min-width: 220px; max-width: 420px;
  font-size: var(--fs-sm);
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  outline: none;
}
#table-search::placeholder { color: var(--ink-mute); }
#table-search:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
#toolbar select {
  font-size: var(--fs-sm);
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
}
#row-count { font-size: var(--fs-xs); color: var(--ink-soft); margin-left: auto; font-family: var(--font-mono); }
#csv-btn {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
}
#csv-btn:hover { background: var(--accent-glow); }

#table-wrap { padding: var(--space-4) var(--space-6) var(--space-2); overflow-x: auto; }
#data-table, table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#data-table th, table.data th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
#data-table th:hover, table.data th:hover { color: var(--ink); }
#data-table th.sort-asc::after  { content: " \25B2"; font-size: 9px; color: var(--accent); }
#data-table th.sort-desc::after { content: " \25BC"; font-size: 9px; color: var(--accent); }
#data-table td, table.data td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}
#data-table th.num, #data-table td.num,
table.data th.num, table.data td.num { text-align: right; font-family: var(--font-mono); }
#data-table td.wide, #data-table th.wide,
table.data td.wide, table.data th.wide { min-width: 260px; white-space: normal; }
#data-table tbody tr:nth-child(even) td,
table.data tbody tr:nth-child(even) td { background: var(--surface-2); }
#data-table tbody tr:hover td,
table.data tbody tr:hover td { background: var(--surface-3); }

/* ══ Expiry chips ══ */
.expiry-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.expiry-ok      { background: var(--ok-fill);     color: var(--ok); }
.expiry-amber   { background: var(--warn-fill);   color: var(--warn); }
.expiry-red     { background: var(--danger-fill); color: var(--danger); }
.expiry-expired { background: var(--danger);      color: #12060a; }
.expiry-none    { color: var(--ink-mute); }

/* ══ Pagination ══ */
.pager {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; padding: var(--space-3) 0;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.pager button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--accent-glow); }
.pager button:disabled { color: var(--ink-mute); border-color: var(--line); cursor: default; }
.pager .page-info { margin: 0 var(--space-1); font-family: var(--font-mono); }

/* ══════════════════════════════════════════════════════════════════════════
   Map platform layout (body.platform)
   ══════════════════════════════════════════════════════════════════════════ */
body.platform { height: 100vh; display: flex; flex-direction: column; padding-top: var(--ribbon-h); }
body.platform .ci-header { position: static; }
body.platform main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  min-height: 0;
}
#map { width: 100%; height: 100%; background: #0a0c10; }
#sidebar {
  background: var(--surface-1);
  border-left: 1px solid var(--line);
  padding: var(--space-5) var(--space-4) var(--space-4);
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
#sidebar h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.lgroup {
  margin: var(--space-3) 0 3px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.lrow {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 2px; cursor: pointer; border-radius: var(--radius-sm);
}
.lrow:hover { background: var(--surface-3); }
.lrow input { margin: 0; flex: none; accent-color: var(--accent); }
.lrow .llabel { flex: 1; min-width: 0; color: var(--ink); }
.lrow .lcount {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  padding: 0 8px;
  line-height: 16px;
}
.opt { display: flex; align-items: center; gap: 7px; padding: 3px 2px; cursor: pointer; color: var(--ink); }
.opt input { margin: 0; accent-color: var(--accent); }

.map-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 6px 11px;
  cursor: pointer;
  margin-right: var(--space-2);
}
.map-btn:hover { background: var(--accent-glow); }

/* ══ Leaflet popup skin ══ */
.leaflet-popup-content-wrapper {
  background: var(--surface-1);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.leaflet-popup-tip { background: var(--surface-1); border: 1px solid var(--line); }
.leaflet-popup-content {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 12px 14px;
  min-width: 240px;
  color: var(--ink);
}
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--accent); }
.popup h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  color: var(--accent);
  border-bottom: 2px solid var(--accent-dim);
  padding-bottom: 4px;
}
.popup table { width: 100%; border-collapse: collapse; }
.popup td { padding: 2px 4px; vertical-align: top; }
.popup td:first-child { color: var(--ink-soft); font-size: var(--fs-xs); white-space: nowrap; width: 90px; }
.popup td:last-child { font-weight: 500; color: var(--ink); }
.popup-src {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  padding-top: 5px;
}

/* Leaflet zoom/attribution on dark */
.leaflet-bar a {
  background: var(--surface-1);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.leaflet-bar a:hover { background: var(--surface-3); }
.leaflet-control-attribution {
  background: rgba(20,23,29,0.85) !important;
  color: var(--ink-mute) !important;
}
.leaflet-control-attribution a { color: var(--ink-soft) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Map page control widgets (search / legend / totals)
   Ported from index.html inline block so builders can drop the inline <style>.
   ══════════════════════════════════════════════════════════════════════════ */
#search-wrap { position: relative; margin-bottom: var(--space-2); }
#search-input {
  width: 100%; font-family: inherit; font-size: 13px;
  padding: 7px 9px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink);
}
#search-input::placeholder { color: var(--ink-mute); }
#search-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
#search-results {
  position: absolute; z-index: 1200; left: 0; right: 0; top: 100%;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; margin-top: 3px;
}
.search-hit {
  display: flex; width: 100%; text-align: left; gap: var(--space-2); align-items: center;
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 7px 9px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.search-hit:hover { background: var(--surface-3); }
.search-hit .hit-text { display: flex; flex-direction: column; min-width: 0; }
.search-hit strong { font-size: var(--fs-sm); color: var(--ink); }
.search-hit small { font-size: var(--fs-xs); color: var(--ink-soft); }
.ctl-block { margin-bottom: var(--space-4); }
.legend-static { cursor: default; }
.legend-static:hover { background: transparent; }
.ltotals {
  margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-soft);
}
#legend-body.loading::after {
  content: "Loading cadastre layers\2026"; color: var(--ink-mute); font-size: var(--fs-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   Focus, motion, responsive
   ══════════════════════════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 760px) {
  body.platform { height: auto; overflow: auto; }
  body.platform main { grid-template-columns: 1fr; grid-template-rows: auto 70vh; }
  body.platform #map { min-height: 70vh; }
  #sidebar { border-left: none; border-top: 1px solid var(--line); }
  .ci-nav a { padding: 5px 9px; font-size: var(--fs-xs); }
  .ci-header { min-height: auto; }
}