/* GossanAtlas by SupportCALL - stylesheet. Fira Sans (signage clarity) + JetBrains Mono for coordinates and ids. */
@font-face { font-family: 'Fira Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/fira-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/fira-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/fira-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/fira-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/fira-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  /* wet slate, quartz, gold, verdigris, ochre */
  --slate: #232b32;
  --slate-2: #2b343c;
  --slate-3: #353f48;
  --line: #45515b;
  --quartz: #f1f1ec;
  --quartz-2: #cfd3d0;
  --mute: #98a3ab;
  --gold: #e2b43f;
  --gold-2: #f3cf6f;
  --verdigris: #3fb8a8;
  --source: #c77dff;
  --verdigris-2: #7fd9cc;
  --ochre: #cf6a33;
  --silver: #b5bcc6;
  --copper: #d98b5a;
  --iron: #c4714f;
  --tin: #d3d0c7;
  --nickel: #8cc24a;
  --tungsten: #c99bd9;
  --pge: #ffffff;
  --ree: #ff8fb4;
  --coal: #9aa0a6;
  --other: #98a3ab;
  --danger: #ff7a7a;
  --ok: #7ed49a;
  --fs: 19px;
  --lh: 1.75;
  --radius: 6px;
  --rail: 420px;
  --strip: 118px;
  --topbar: 64px;
  --font: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
}
html[data-reading="on"] { --fs: 22px; --lh: 1.95; --rail: 480px; }
html[data-reading="on"] body { letter-spacing: 0.01em; word-spacing: 0.08em; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: var(--fs); line-height: var(--lh); color: var(--quartz); background: var(--slate); text-align: left; -webkit-font-smoothing: antialiased; }
a { color: var(--verdigris-2); text-underline-offset: 3px; }
a:hover { color: var(--gold-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; }
h1 { font-size: 1.9em; } h2 { font-size: 1.35em; } h3 { font-size: 1.1em; }
p { margin: 0 0 0.9em; max-width: 68ch; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
.sr { position: absolute; left: -9999px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- top bar ---- */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--gold); color: var(--slate); padding: 8px 14px; border-radius: var(--radius); font-weight: 600; }
.skip:focus { left: 12px; }
.rail .mobile-only { display: none; }
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--slate-2); border-bottom: 1px solid var(--line); z-index: 1200; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--quartz); white-space: nowrap; }
.brand .word { font-weight: 700; font-size: 1.25em; letter-spacing: -0.02em; color: var(--quartz); text-decoration: none; }
.brand .word b { color: var(--gold); font-weight: 700; }
.brand .by { font-size: 0.72em; color: var(--mute); }
.brand .by a { color: var(--mute); text-decoration: none; }
.search { position: relative; flex: 1 1 200px; max-width: 480px; min-width: 140px; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 42px; border-radius: 21px; border: 1px solid var(--line); background: var(--slate); color: var(--quartz); }
.search input::placeholder { color: var(--mute); }
.search svg { position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; fill: none; stroke: var(--mute); stroke-width: 2; }
.search .results { position: absolute; top: 48px; left: 0; right: 0; background: var(--slate-2); border: 1px solid var(--line); border-radius: var(--radius); max-height: 60vh; overflow: auto; display: none; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.search .results.open { display: block; }
.search .results button { display: block; width: 100%; text-align: left; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; }
.search .results button:hover, .search .results button:focus { background: var(--slate-3); }
.search .results .k { color: var(--quartz-2); font-size: 0.78em; margin-right: 8px; }
.search .results .s { color: var(--quartz-2); font-size: 0.8em; display: block; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topnav a, .topnav button { color: var(--quartz-2); text-decoration: none; padding: 7px 10px; border-radius: var(--radius); border: 1px solid transparent; background: none; font-size: 0.85em; white-space: nowrap; }
.topnav a:hover, .topnav button:hover { border-color: var(--line); color: var(--quartz); }
.topnav .primary { border-color: var(--gold); color: var(--gold-2); }
.topnav .primary:hover { background: var(--gold); color: var(--slate); }
.topnav .sos { background: #b3261e; color: #fff; border-color: #b3261e; font-weight: 600; }
.topnav .sos:hover { background: #d93025; color: #fff; }
.netdot { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: none; color: var(--mute); border-radius: 16px; padding: 4px 10px; font-size: 0.78em; white-space: nowrap; }
.netdot i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.netdot.off { border-color: var(--gold); color: var(--gold-2); } .netdot.off i { background: var(--gold); }
.offline-panel { border-color: var(--line); }

/* ---- map stage ---- */
.stage { position: fixed; top: var(--topbar); left: 0; right: 0; bottom: var(--strip); }
#map { position: absolute; inset: 0; background: #1a2026; }
.leaflet-container { font: inherit; }
.leaflet-control-zoom a { background: var(--slate-2) !important; color: var(--quartz) !important; border-color: var(--line) !important; width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 22px !important; }
.leaflet-control-attribution { background: rgba(35,43,50,0.88) !important; color: var(--mute) !important; font-size: 12px !important; font-family: var(--font); }
.leaflet-control-attribution a { color: var(--quartz-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--slate-2); color: var(--quartz); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.86em; line-height: 1.45; min-width: 220px; }
.leaflet-popup-content b { font-weight: 600; }
.leaflet-popup-content .tag { display: inline-block; font-size: 0.8em; padding: 1px 7px; border-radius: 10px; background: var(--slate-3); margin-right: 4px; }
.leaflet-popup-close-button { color: var(--mute) !important; }
.leaflet-tooltip { background: var(--slate-2); color: var(--quartz); border: 1px solid var(--line); font-family: var(--font); font-size: 15px; padding: 6px 9px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.leaflet-tooltip-top::before { border-top-color: var(--line); }
.leaflet-interactive.hovered { stroke: var(--gold-2); stroke-width: 3; }

/* ---- left rail (layers) ---- */
.rail { position: absolute; top: 12px; left: 12px; width: 300px; max-height: calc(100% - 96px); overflow: auto; background: rgba(43,52,60,0.96); border: 1px solid var(--line); border-radius: var(--radius); z-index: 900; box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 0.86em; }
.rail.collapsed { width: auto; }
.rail.collapsed .rail-body { display: none; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.rail-head h2 { font-size: 1em; margin: 0; }
.rail-head button { border: 0; background: none; color: var(--mute); padding: 4px 8px; }
.rail-body { padding: 10px 14px 14px; }
.rail-body h3 { font-size: 0.95em; color: var(--quartz-2); margin: 12px 0 6px; font-weight: 500; }
.rail-body h3:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--slate); color: var(--quartz-2); line-height: 1.3; }
.chip:hover { border-color: var(--quartz-2); }
.chip.on { background: var(--slate-3); color: var(--quartz); border-color: var(--quartz-2); }
.chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--mute)); border: 1px solid rgba(0,0,0,0.35); flex: none; }
.chip .n { font-family: var(--mono); font-size: 0.78em; color: var(--mute); }
.chip.on .n { color: var(--quartz-2); }
.chip .sq { width: 11px; height: 11px; background: var(--c, var(--mute)); opacity: 0.8; border: 1px solid rgba(255,255,255,0.3); flex: none; }
.chip .ln { width: 14px; height: 0; border-top: 3px solid var(--c, var(--mute)); flex: none; }
.rail .note { color: var(--mute); font-size: 0.85em; margin: 6px 0 0; }
.rail select { width: 100%; padding: 6px 8px; background: var(--slate); border: 1px solid var(--line); border-radius: var(--radius); }
.rail label.row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.rail input[type="range"] { width: 100%; accent-color: var(--gold); }

/* ---- right panel (record) ---- */
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--rail); max-width: 100%; background: var(--slate-2); border-left: 1px solid var(--line); z-index: 950; transform: translateX(100%); transition: transform 180ms ease; display: flex; flex-direction: column; }
.panel.open { transform: none; }
.panel-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.panel-head h2 { flex: 1; font-size: 1.15em; margin: 0; }
.panel-head .close { border: 0; background: none; color: var(--mute); font-size: 1.5em; line-height: 1; min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0; }
.panel-body { flex: 1; overflow: auto; padding: 12px 16px 24px; font-size: 0.9em; }
.panel-body h3 { margin: 18px 0 6px; font-size: 0.95em; color: var(--gold-2); font-weight: 500; }
.panel-body h3:first-child { margin-top: 0; }
.kv { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 3px 12px; margin: 0; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.verdict { padding: 10px 12px; border-radius: var(--radius); border-left: 5px solid var(--mute); background: var(--slate); margin-bottom: 10px; }
.verdict.allowed { border-color: var(--ok); } .verdict.permission { border-color: var(--gold); } .verdict.not_allowed { border-color: var(--danger); } .verdict.fossicking { border-color: var(--verdigris); }
.verdict b { display: block; font-weight: 600; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .meta { color: var(--mute); font-size: 0.85em; display: block; }
.list button.link { border: 0; background: none; color: var(--verdigris-2); padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.score { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.score .bar { flex: 1; height: 10px; background: var(--slate); border-radius: 5px; overflow: hidden; }
.score .bar i { display: block; height: 100%; background: var(--gold); }
.score .v { font-family: var(--mono); width: 3.2em; text-align: right; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 12px; background: var(--slate-3); font-size: 0.82em; margin: 0 4px 4px 0; color: var(--quartz-2); }
.pill.ok { background: #27503a; color: #c8f0d4; } .pill.warn { background: #5a4716; color: #ffe6a3; } .pill.bad { background: #5b2a2a; color: #ffc9c9; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--slate-3); color: var(--quartz); text-decoration: none; }
.btn:hover { border-color: var(--quartz-2); }
.btn.gold { background: var(--gold); color: var(--slate); border-color: var(--gold); font-weight: 600; }
.btn.gold:hover { background: var(--gold-2); }
.btn.small { padding: 4px 10px; font-size: 0.85em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ai-box textarea { width: 100%; min-height: 80px; padding: 8px 10px; background: var(--slate); border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.ai-answer { white-space: pre-wrap; background: var(--slate); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; }
.muted { color: var(--mute); }
.err { color: var(--danger); }
.toast { position: fixed; left: 16px; top: calc(var(--topbar) + 12px); background: var(--slate-2); border: 1px solid var(--gold); color: var(--quartz); padding: 10px 16px; border-radius: var(--radius); z-index: 1500; font-size: 0.9em; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* ---- the chainage strip (time) ---- */
.strip { position: fixed; left: 0; right: 0; bottom: 0; height: var(--strip); background: var(--slate-2); border-top: 1px solid var(--line); z-index: 1100; display: grid; grid-template-columns: 170px 1fr 250px; gap: 12px; align-items: center; padding: 0 16px; }
.strip .yr { font-family: var(--mono); font-size: 2.1em; font-weight: 600; color: var(--gold); line-height: 1; }
.strip .yr small { display: block; font-family: var(--font); font-weight: 400; font-size: 0.42em; color: var(--mute); margin-top: 4px; }
.strip .track { position: relative; height: 84px; }
.strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip input[type="range"] { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; margin: 0; height: 26px; -webkit-appearance: none; appearance: none; background: transparent; }
.strip input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--line); border-radius: 2px; }
.strip input[type="range"]::-moz-range-track { height: 4px; background: var(--line); border-radius: 2px; }
.strip input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 26px; margin-top: -11px; background: var(--gold); border-radius: 3px; border: 2px solid var(--slate); box-shadow: 0 0 0 2px var(--gold); cursor: ew-resize; }
.strip input[type="range"]::-moz-range-thumb { width: 18px; height: 26px; background: var(--gold); border-radius: 3px; border: 2px solid var(--slate); box-shadow: 0 0 0 2px var(--gold); cursor: ew-resize; }
.strip .ctl { display: flex; flex-direction: column; gap: 6px; font-size: 0.8em; }
.strip .ctl .row { display: flex; gap: 6px; align-items: center; }
.strip .ctl button { padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--slate); color: var(--quartz); }
.strip .ctl button.on { border-color: var(--gold); color: var(--gold-2); }
.strip .legend { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--mute); font-size: 0.9em; }
.strip .yr small { max-width: 170px; }
.strip .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }

/* ---- field mode ---- */
.field-open { position: absolute; right: 12px; bottom: 34px; z-index: 940; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--verdigris); background: var(--slate-2); color: var(--verdigris-2); font-weight: 500; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.field-open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.field-open:hover { background: var(--verdigris); color: var(--slate); }
.fcard { position: absolute; right: 12px; bottom: 12px; width: 360px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); display: none; flex-direction: column; background: var(--slate-2); border: 1px solid var(--verdigris); border-radius: var(--radius); z-index: 960; box-shadow: 0 12px 30px rgba(0,0,0,0.5); font-size: 0.88em; }
.fcard.open { display: flex; }
.field-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.field-tab { flex: 1; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--quartz-2); padding: 11px 4px; font-size: 0.92em; min-height: 44px; }
.field-tab.on { color: var(--quartz); border-bottom-color: var(--verdigris); }
.field-tab.sos { color: #ffb0b0; } .field-tab.sos.on { border-bottom-color: var(--danger); }
.field-close { border: 0; background: none; color: var(--mute); font-size: 1.4em; min-width: 44px; min-height: 44px; }
.field-body { overflow: auto; padding: 12px 14px 16px; }
.field-body h3 { margin: 14px 0 6px; font-size: 0.95em; color: var(--verdigris-2); font-weight: 500; }
.field-body .kv { font-size: 0.95em; }
.field-body label.row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
.field-body label.chip input { margin: 0; }
.field-body .field input { padding: 7px 10px; }
.nav { display: flex; align-items: center; gap: 14px; background: var(--slate); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.nav .arrow { font-size: 2.4em; color: var(--gold); line-height: 1; transition: transform 300ms ease; transform-origin: 50% 50%; }
.sos-box { text-align: left; }
.sos-call { display: inline-flex; background: #b3261e; color: #fff; border-color: #b3261e; font-size: 1.3em; font-weight: 700; padding: 12px 22px; }
.sos-call:hover { background: #d93025; color: #fff; }
.wp-icon span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--verdigris); color: var(--slate); font-weight: 700; font-size: 13px; border: 2px solid var(--slate); box-shadow: 0 0 0 2px var(--verdigris-2); }
.wp-icon.target span { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-2); }

/* ---- pages (sign in, request, about) ---- */
.page { max-width: 760px; margin: 0 auto; padding: calc(var(--topbar) + 32px) 20px 60px; }
.page.wide { max-width: 1100px; }
.card { background: var(--slate-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 4px; color: var(--quartz-2); }
.field input, .field textarea, .field select { width: 100%; padding: 10px 12px; background: var(--slate); border: 1px solid var(--line); border-radius: var(--radius); }
.field .hint { color: var(--mute); font-size: 0.85em; margin-top: 3px; }
.msg { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; border-left: 5px solid var(--verdigris); background: var(--slate); }
.msg.err { border-color: var(--danger); color: var(--quartz); }
.msg.ok { border-color: var(--ok); }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.88em; }
table.grid th, table.grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid th { color: var(--mute); font-weight: 500; }
.footer { text-align: left; color: var(--mute); font-size: 0.82em; padding: 20px; }
.footer a { color: var(--quartz-2); }
.home-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.home-hero .big { font-size: 2.6em; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.home-hero .big b { color: var(--gold); font-weight: 700; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 14px 0; }
.stat-row div { font-size: 0.9em; color: var(--quartz-2); }
.stat-row div b { display: block; font-family: var(--mono); font-size: 1.5em; color: var(--quartz); font-weight: 600; }

@media (min-width: 1800px) {
  :root { --rail: 500px; --fs: 20px; }
  .rail { width: 340px; font-size: 0.9em; }
  .search { max-width: 640px; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  :root { --rail: 380px; }
  .rail { width: 270px; font-size: 0.82em; }
  .topnav a, .topnav button { padding: 7px 8px; font-size: 0.82em; }
  .topnav a[href="/"], .topnav a[href="/about.php"], .topnav button#readingToggle { display: none; }
  .rail .mobile-only { display: block; }
  .netdot { font-size: 0; padding: 6px; } .netdot i { width: 10px; height: 10px; }
  .search { max-width: 300px; }
  .strip { grid-template-columns: 140px 1fr 220px; }
}
@media (max-width: 900px) {
  :root { --rail: 100%; --strip: 112px; --topbar: 56px; }
  .topbar { gap: 8px; padding: 0 10px; }
  .brand .by { display: none; }
  .brand .word { font-size: 1.1em; }
  .search { flex: 1 1 60px; min-width: 60px; }
  .search input { height: 38px; padding-left: 34px; font-size: 0.85em; }
  .topnav { gap: 4px; }
  .leaflet-control-attribution { font-size: 0 !important; padding: 2px 6px !important; }
  .leaflet-control-attribution > a:first-child { font-size: 11px !important; }
  .leaflet-control-attribution img { display: none; }
  .strip .yr small { display: none; }
  .search svg { top: 9px; left: 11px; }
  .topnav a:not(.primary):not(.sos), .topnav button { display: none; }
  .topnav .primary, .topnav .sos { padding: 6px 8px; white-space: nowrap; font-size: 0.8em; }
  .netdot span, .netdot { font-size: 0; padding: 6px; } .netdot i { width: 10px; height: 10px; }
  .rail { width: calc(100% - 24px); max-height: 52%; font-size: 0.82em; }
  .rail .mobile-only { display: block; }
  .panel { width: 100%; }
  .strip { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 4px 10px; padding: 6px 12px; }
  .strip .track { height: 56px; }
  .strip .yr { font-size: 1.5em; }
  .strip .yr small { font-size: 0.5em; }
  .strip .ctl { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .strip .legend { display: none; }
  .leaflet-bottom.leaflet-left { bottom: 6px; }
  .fcard { width: calc(100% - 24px); max-height: 70%; }
  .field-open { bottom: 54px; right: 10px; padding: 8px 12px; }
  .home-hero { grid-template-columns: 1fr; }
  .page { padding-top: calc(var(--topbar) + 20px); }
}
  .stage:has(.fcard.open) .leaflet-control-zoom { display: none; }