:root {
  color-scheme: dark;
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --bg: #090d0c; --chrome: #0d1210; --panel: #111714; --panel-raised: #17201c;
  --line: #28332e; --line-soft: #202923; --text: #edf0e9; --muted: #98a39d;
  --quiet: #6e7b74; --accent: #e0c367; --accent-bright: #f1d97f; --green: #78c0a6;
  --header-h: 70px; --explore-w: 286px; --intel-w: 342px;
}
* { box-sizing: border-box; }
html, body, .app-shell { margin: 0; width: 100%; height: 100%; }
body { min-width: 320px; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
.app-shell { display: grid; grid-template-rows: var(--header-h) minmax(0,1fr); }
.app-header { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(13,18,16,.98); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.brand-lockup, .header-actions { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand { display: flex; align-items: center; flex-shrink: 0; height: 40px; overflow: hidden; text-decoration: none; }
.brand-logo { display: block; width: 180px; height: auto; }
.brand-divider { width: 1px; height: 30px; background: var(--line); }
.viewer-identity { display: grid; min-width: 0; }
.viewer-identity span, .eyebrow { color: var(--accent); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.viewer-identity strong { font-size: 18px; font-weight: 600; line-height: 1.2; }
.status { max-width: 38rem; color: var(--muted); font-size: 11px; text-align: right; }
.status.error { color: #e18572; }
.mobile-only, .panel-mobile-handle { display: none; }
.header-controls { display:flex; align-items:center; gap:2px; }
.header-controls #layers-toggle { display:none; }
.viewer { position: relative; display: grid; grid-template-columns: var(--explore-w) minmax(0,1fr) var(--intel-w); min-height: 0; }
.panel { position: relative; z-index: 20; min-width: 0; min-height: 0; background: var(--panel); overflow-y: auto; }
.explore-panel { border-right: 1px solid var(--line); }
.intelligence-panel { border-left: 1px solid var(--line); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 20px 17px; border-bottom: 1px solid var(--line-soft); }
.panel-heading p, .panel-heading h2 { margin: 0; }
.panel-heading h2 { margin-top: 5px; font-size: 23px; font-weight: 600; }
.control-section { padding: 17px 20px; border-bottom: 1px solid var(--line-soft); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.section-title-row h3 { margin: 0; color: #cbd1cb; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.micro-label { color: var(--quiet); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.filter-label, .legend-title { display: block; color: var(--quiet); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.commodity-filter { width: 100%; min-height: 36px; margin-top: 6px; padding: 6px 9px; border: 1px solid #354139; border-radius: 5px; background: #0b100e; color: #d9ddd8; font-size: 11px; }
.commodity-filter:focus-visible, .layer-row input:focus-visible + .switch { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.commodity-filter:disabled { opacity: .58; }
.layer-row { display: grid; grid-template-columns: 19px minmax(0,1fr) auto auto; align-items: center; gap: 8px; min-height: 42px; padding: 2px 0; border-radius: 5px; cursor: pointer; }
.layer-row:hover { background: rgba(255,255,255,.02); }
.layer-name { color: #d9ddd8; font-size: 11px; line-height: 1.25; }
.layer-symbol { width: 13px; height: 13px; justify-self: center; border: 1px solid #829087; }
.geology-symbol { background: linear-gradient(135deg,#826d55 50%,#5f7a69 50%); }
.structures-symbol { height: 2px; border: 0; background: #e18572; transform: rotate(-25deg); }
.agreement-symbol { border-color: #7c3aed; background: rgba(124,58,237,.3); }
.geothermal-symbol { border-color: #db2777; border-radius: 50%; background: rgba(219,39,119,.28); }
.ownership-symbol { border-color: #f59e0b; background: rgba(245,158,11,.24); }
.restriction-symbol { border-color: #b91c1c; background: rgba(185,28,28,.3); }
.ats-symbol { background: repeating-linear-gradient(0deg,transparent 0 3px,#94a3b8 3px 4px), repeating-linear-gradient(90deg,transparent 0 3px,#94a3b8 3px 4px); }
.boundary-symbol { border: 2px solid #f8fafc; background: transparent; }
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 31px; height: 18px; border: 1px solid #3b4841; border-radius: 10px; background: #1c2521; transition: .18s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #76827c; transition: .18s ease; }
.layer-row input:checked + .switch { border-color: #766a3d; background: rgba(224,195,103,.16); }
.layer-row input:checked + .switch::after { left: 16px; background: var(--accent-bright); }
.legend { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.compact-legend { margin-top: 0; padding-top: 0; border-top: 0; }
#commodity-legend { display: grid; gap: 5px; margin-top: 7px; }
.legend-row { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 7px; color: #cbd5cf; font-size: 10px; }
.legend-swatch { width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.legend-count { color: var(--quiet); font-variant-numeric: tabular-nums; }
.agreement-legend { display: grid; gap: 5px; margin: 4px 0 7px 27px; padding: 8px 9px; border-left: 1px solid #354139; color: var(--muted); font-size: 9px; }
.agreement-legend-row { display: flex; align-items: center; gap: 7px; }
.agreement-swatch, .agreement-line { width: 18px; height: 6px; border: 1px solid currentColor; }
.agreement-swatch.permit { color:#0f766e;background:#0f766e }.agreement-swatch.lease{color:#7c3aed;background:#7c3aed}.agreement-swatch.secondary{color:#b45309;background:#b45309}.agreement-swatch.geothermal-application{color:#db2777;background:#db2777}.agreement-swatch.geothermal-lease{color:#9d174d;background:#9d174d}.agreement-swatch.ownership-review{color:#f59e0b;background:#f59e0b}.agreement-swatch.ownership-not-crown{color:#475569;background:#475569}.agreement-swatch.restriction-no-access{color:#b91c1c;background:#b91c1c}.agreement-swatch.restriction-reserved{color:#92400e;background:#92400e}.agreement-swatch.restriction-subject{color:#ca8a04;background:#ca8a04}
.agreement-line { height: 0; color: #e2e8f0; }.agreement-line.application{border-style:dashed}
.legend-caution { color: #e0c367; line-height: 1.4; }
.map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #18201d; }
#map { position: absolute; inset: 0; }
.map-stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 90px rgba(3,7,5,.18); }
.map-note { position: absolute; z-index: 5; left: 12px; bottom: 28px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(89,106,97,.48); border-radius: 4px; background: rgba(13,18,16,.88); color: #d8ddd9; font-size: 9px; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.map-note span { color: var(--muted); }
.detail-content { padding: 20px; }
.detail-kicker { margin: 0 0 6px; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.detail-content h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.detail-content > p:not(.detail-kicker):not(.source-note) { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.detail-callout { display: grid; gap: 5px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #0d1310; }
.detail-callout strong { color: #cbd1cb; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.detail-callout span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.detail-callout.caution { border-left: 2px solid var(--accent); }
.source-note { margin: 22px 0 0; padding-top: 15px; border-top: 1px solid var(--line-soft); color: var(--quiet); font-size: 9px; line-height: 1.5; }
.map-debug-control { min-width:72px; padding:6px 8px; border:1px solid rgba(89,106,97,.6); border-radius:4px; background:rgba(13,18,16,.92); color:#e8edf2; font-size:10px; font-weight:700; text-align:center; }
.maplibregl-ctrl-group { border:1px solid rgba(91,106,98,.65)!important; background:rgba(13,18,16,.9)!important; }
.maplibregl-popup-content { min-width:230px; color:#111827; }.popup-title{margin:0 0 7px;font-size:16px}.popup-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 9px;margin:0;font-size:12px}.popup-grid dt{font-weight:650}.popup-grid dd{margin:0}.popup-note{margin:9px 0 0;font-size:11px;line-height:1.35;color:#4b5563}.popup-record+.popup-record{border-top:1px solid #d1d5db;margin-top:11px;padding-top:11px}.popup-records{max-height:320px;overflow-y:auto}.popup-record-title{font-size:14px;margin:0 0 7px}
@media (max-width:1120px){:root{--explore-w:248px;--intel-w:300px}.control-section,.panel-heading,.detail-content{padding-left:16px;padding-right:16px}.status{max-width:26rem}}
@media (max-width:900px) and (min-width:720px){:root{--explore-w:230px;--intel-w:260px}.status{display:none}.brand-logo{width:140px}.detail-content{padding:16px}}
@media (max-width:719px){
  :root{--header-h:62px}.app-header{padding:0 10px 0 13px}.brand-lockup{gap:8px}.brand-logo{width:112px}.brand-divider{height:27px}.viewer-identity span{font-size:7px}.viewer-identity strong{font-size:15px}.status{display:none}.header-controls{display:flex;gap:2px}.icon-button{display:grid;place-items:center;gap:2px;min-width:48px;min-height:48px;padding:4px;color:var(--muted);text-decoration:none;font-size:8px}.control-icon{position:relative;width:17px;height:17px}.layers-icon{border-top:1px solid currentColor;border-bottom:1px solid currentColor}.layers-icon::after{content:"";position:absolute;left:0;right:0;top:7px;border-top:1px solid currentColor}.details-icon{border:1px solid currentColor;border-radius:50%}.details-icon::after{content:"i";position:absolute;inset:0;display:grid;place-items:center;font-size:12px}.viewer{display:block}.map-stage{position:absolute;inset:0}.panel{position:fixed;z-index:60;left:0;right:0;bottom:0;width:100%;max-height:min(78dvh,650px);border:1px solid #39463f;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.42);transform:translateY(calc(100% + 10px));transition:transform .22s ease;overscroll-behavior:contain}.panel:target{transform:translateY(0)}.panel-mobile-handle{display:block;position:sticky;z-index:2;top:0;width:38px;height:4px;margin:8px auto 0;border-radius:3px;background:#48554e}.panel-heading{padding-top:14px}.mobile-only{display:grid}.close-button{place-items:center;width:44px;height:44px;margin:-8px -8px 0 0;color:var(--muted);text-decoration:none;font-size:27px;font-weight:200}.map-note{left:8px;bottom:30px}.maplibregl-ctrl-top-right{top:4px;right:4px}.maplibregl-ctrl-group button{width:42px;height:42px}
}
@media (max-width:360px){.viewer-identity span{display:none}.viewer-identity strong{font-size:13px}.icon-button{min-width:45px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Popup dismissal, readable values, and accessible touch target. */
.maplibregl-popup-content { position: relative; padding: 16px 18px; max-width: min(410px, calc(100vw - 32px)); }
.maplibregl-popup-close-button { display: grid !important; place-items: center; top: 5px; right: 5px; width: 32px; height: 32px; border-radius: 4px; color: #111827; font-size: 24px; line-height: 1; cursor: pointer; }
.maplibregl-popup-close-button:hover, .maplibregl-popup-close-button:focus-visible { background: #e5e7eb; outline-offset: 2px; }
.popup-title { padding-right: 30px; overflow-wrap: anywhere; }
.popup-grid { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); }
.popup-grid dt, .popup-grid dd { min-width: 0; overflow-wrap: anywhere; }

.intelligence-heading-text{min-width:0}.intelligence-heading h2{font-size:18px;overflow-wrap:anywhere}
.intelligence-close{display:none;width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:var(--text);font-size:28px;cursor:pointer}
.intelligence-panel.has-selection .intelligence-close{display:block}
.intelligence-panel .popup-grid{grid-template-columns:minmax(90px,40%) minmax(0,1fr);gap:9px 12px}
.intelligence-panel .popup-grid dt{color:var(--muted)}.intelligence-panel .popup-grid dd{color:var(--text);overflow-wrap:anywhere}
.intelligence-panel .popup-note{color:var(--muted)}.intelligence-panel .popup-records{max-height:none;overflow:visible}
.sheet-grip,.sheet-hint{display:none}
@media(max-width:719px){
.intelligence-panel.has-selection{z-index:65;display:flex;flex-direction:column;height:96px;max-height:none;overflow:hidden;transform:translateY(0);transition:height .22s ease}
.intelligence-panel.has-selection.sheet-expanded{height:70dvh}
.intelligence-panel.has-selection .intelligence-heading{flex-shrink:0;min-height:96px;padding:8px 16px;align-items:center;cursor:pointer;touch-action:pan-y}
.intelligence-panel.has-selection.sheet-expanded .intelligence-heading{min-height:84px}
.intelligence-panel.has-selection .intelligence-heading h2{font-size:14px;line-height:1.3;max-height:2.6em;overflow:hidden}
.intelligence-panel.has-selection .sheet-grip{display:block;width:36px;height:4px;margin:0 auto 9px;border-radius:5px;background:#697b70}
.intelligence-panel.has-selection .sheet-hint{display:block;margin-top:4px;font-size:9px;color:var(--muted)}
.intelligence-panel.has-selection.sheet-expanded .sheet-hint{display:none}
.intelligence-panel.has-selection .detail-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.intelligence-panel.has-selection:not(.sheet-expanded) .detail-content{display:none}
}

/* Multiple selected features within the information panel. */
.inspector-record + .inspector-record { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.inspector-record h3 { margin: 3px 0 13px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.inspector-record .popup-grid dd { overflow-wrap: anywhere; }

/* Always-visible feature inspector dismissal control. */
.intelligence-panel .intelligence-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.intelligence-panel .intelligence-heading-text { flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.intelligence-panel .intelligence-close {
  display: grid !important; place-items: center; position: relative; z-index: 3;
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px;
  padding: 0; margin: 0; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel-raised); color: var(--text);
  font-size: 30px; font-weight: 400; line-height: 1; opacity: 1; visibility: visible;
  cursor: pointer; touch-action: manipulation;
}
.intelligence-panel .intelligence-close:hover { background: #34453b; }
.intelligence-panel .intelligence-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width:719px) {
  .intelligence-panel.has-selection .intelligence-close { display: grid !important; }
}

/* Details panel can be dismissed entirely, rather than just clearing its contents. */
.viewer.inspector-hidden { grid-template-columns: var(--explore-w) minmax(0,1fr); }
.viewer.inspector-hidden .intelligence-panel { display: none; }
.details-toggle { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 23px; font-weight: 600; cursor: pointer; justify-content: center; align-items: center; }
.details-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width:900px) and (min-width:720px) {
  .viewer.inspector-hidden { grid-template-columns: var(--explore-w) minmax(0,1fr); }
}
@media (max-width:719px) {
  .viewer.inspector-hidden { display: block; }
  .viewer.inspector-hidden .intelligence-panel { display: none !important; }
  .intelligence-panel.panel-open:not(.has-selection) { transform: translateY(0); height: 70dvh; max-height: 70dvh; }
  .intelligence-panel.panel-open:not(.has-selection) .detail-content { overflow-y: auto; }
  .details-toggle { display: grid; min-width: 48px; min-height: 48px; padding: 0; }
}

/* Contextual help within the feature information panel. */
.help-guide { display:grid; gap:16px; padding-bottom:24px; }
.help-guide .help-intro { color:var(--text); font-size:13px; line-height:1.6; }
.help-guide section { padding-top:13px; border-top:1px solid var(--line); }
.help-guide h3 { margin:0 0 7px; color:var(--accent-bright); font-size:13px; font-weight:700; }
.help-guide p { margin:0 0 8px; color:var(--muted); font-size:12px; line-height:1.65; }
.help-guide .help-caution { border-left:3px solid var(--accent); padding-left:12px; }
.intelligence-panel.help-mode .detail-content { overflow-y:auto; }
@media(max-width:719px) {
.intelligence-panel.help-mode.panel-open { display:flex; flex-direction:column; z-index:65; height:70dvh; max-height:70dvh; transform:translateY(0); overflow:hidden; }
.intelligence-panel.help-mode .intelligence-heading { flex-shrink:0; }
.intelligence-panel.help-mode .detail-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
}

/* Unified header icon buttons: Layers and Help share the same visual treatment. */
.header-controls #layers-toggle,
.header-controls #details-toggle {
  appearance: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.header-controls #details-toggle { font-size: 18px; font-weight: 600; }
.header-controls #layers-toggle:hover,
.header-controls #details-toggle:hover { background: var(--panel-raised); color: var(--text); }
.header-controls #layers-toggle:focus-visible,
.header-controls #details-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-controls #layers-toggle[aria-expanded="true"],
.header-controls #details-toggle[aria-expanded="true"] { color: var(--accent-bright); }
@media(max-width:360px) {
  .header-controls #layers-toggle,
  .header-controls #details-toggle { width: 45px; min-width: 45px; }
}

/* Explicit panel state replaces unreliable :target-based toggle on mobile. */
@media(max-width:719px) {
  .explore-panel,
  .explore-panel:target { transform:translateY(calc(100% + 10px)); }
  .explore-panel.layers-open,
  .explore-panel.layers-open:target { transform:translateY(0); }
}


/* Community marker in the layer menu. */
.community-symbol { background: #f4f6f5; border: 1px solid #4b6257; border-radius: 50%; width: 9px; height: 9px; margin: auto; }

/* Welcome dialog follows the existing dark C5 palette. */
body.welcome-open { overflow: hidden; }
.welcome-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.70); }
.welcome-modal { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 17px; border: 1px solid #607066; border-radius: 10px; background: #111a16; box-shadow: 0 22px 70px rgba(0,0,0,.6); }
.welcome-modal:focus { outline: none; }
.welcome-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #36473c; }
.welcome-heading h2 { font-size: 19px; line-height: 1.3; margin: 0; font-weight: 600; }
#welcome-close { flex: none; width: 30px; height: 30px; border: 1px solid #647166; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; font-size: 23px; line-height: 1; }
.welcome-body { display: grid; justify-items: center; gap: 13px; padding: 18px 5px 3px; text-align: center; line-height: 1.5; }
.welcome-body p { margin: 0; font-size: 13px; }
.welcome-logo { display: block; max-width: 200px; max-height: 75px; width: auto; height: auto; object-fit: contain; }
.welcome-rule { width: 85px; height: 2px; background: var(--accent); }
.welcome-lead { font-size: 16px !important; font-weight: 700; }
.welcome-disclosure { color: var(--muted); font-size: 11px !important; }
.welcome-offer { display: grid; gap: 8px; width: 100%; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.welcome-offer strong { font-size: 15px; }
.welcome-offer p { color: #becac0; }
.welcome-body a { color: var(--accent-bright); }
.welcome-offer a { font-size: 12px; font-weight: 700; }
.welcome-primary { width: 100%; min-height: 44px; border: 0; border-radius: 5px; background: var(--accent); color: #1a261f; cursor: pointer; font-weight: 700; }
.welcome-legal { background: transparent; border: 0; color: #b6c2b8; font-size: 11px; text-decoration: underline; cursor: pointer; }
.welcome-powered { color: var(--muted); font-size: 10px !important; }
.welcome-modal button:focus-visible, .welcome-modal a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
@media (max-width: 420px) { .welcome-modal { padding: 13px; } .welcome-heading h2 { font-size: 17px; } .welcome-body { gap: 10px; padding-top: 12px; } }

/* Desktop help stays available; layers button remains mobile-only. */
@media (min-width:720px) { .header-controls #layers-toggle { display:none; } }
@media (max-width:719px) { .header-controls #layers-toggle { display:grid; } }

/* High-visibility Help control, consistent on desktop and mobile. */
.header-controls #details-toggle,
.header-controls #details-toggle:hover,
.header-controls #details-toggle[aria-expanded="true"] {
  background: var(--accent);
  color: #172019;
  border: 1px solid var(--accent-bright);
  border-radius: 7px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.header-controls #details-toggle:hover { background: var(--accent-bright); }
.header-controls #details-toggle[aria-expanded="true"] {
  background: #f1d97f;
  color: #172019;
}