/* Forager – one-pane field instrument (MapLibre + habitatmodell).
   Bone, ink and acid replace the previous soft-green/glass treatment. */
:root {
  --bone-000:#fbfaf6; --bone-100:#f2f0e8; --bone-200:#e8e5da; --bone-300:#dad6c8;
  --ink-900:#1a1817; --ink-800:#241f21; --ink-600:#4a4643; --ink-400:#7c7772; --ink-200:#b4afa8;
  --acid-500:#67d86f; --acid-600:#45bd54; --acid-100:#e3f8df;
  --sun-500:#f4c00c; --oxide-500:#c0442a; --cobalt-500:#1f4bd8;

  --bg:var(--bone-100); --ground:var(--bone-000); --panel:var(--bone-000); --panel-2:var(--bone-100);
  --line:rgba(26,24,23,.22); --line-mid:rgba(26,24,23,.34); --line-strong:var(--ink-900);
  --text:var(--ink-900); --text-dim:var(--ink-600); --text-mut:var(--ink-400);
  --accent:var(--acid-500); --accent-hover:var(--acid-600); --warn:var(--sun-500);

  /* Delt heat-skala (samsvarer med kartets heatmap-color i app.js) */
  /* Windy-spektralramp — speiler HEAT_STOPS i app.js (samme stopp/farger) */
  --heat-calm:#6271b7; --heat-cool:#4a94a9; --heat-fresh:#53a553; --heat-good:#81b43f;
  --heat-warm:#c3b63b; --heat-hot:#d57c2a; --heat-strong:#d85833; --heat-red:#ce444c;
  --heat-mag:#b3376c;  --heat-peak:#8e268c;
  --heat-grad:linear-gradient(90deg,
    var(--heat-calm) 0%,
    var(--heat-cool) 8%,
    var(--heat-fresh) 18%,
    var(--heat-good) 30%,
    var(--heat-warm) 42%,
    var(--heat-hot) 55%,
    var(--heat-strong) 68%,
    var(--heat-red) 80%,
    var(--heat-mag) 90%,
    var(--heat-peak) 100%);

  --r-lg:0; --r-md:0; --r-sm:0; --r-full:999px;
  --font-ui:"Familjen Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-brand:"Familjen Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tracking-mono:.09em;

  /* Overlay-flate over kartet: opaque, ruled and daylight-readable. */
  --glass:var(--bone-000);
  --lift-1:3px 3px 0 var(--ink-900);
  --press-shift:2px;
  --dur-fast:120ms;
  --dur-base:200ms;
  --ease-snap:cubic-bezier(.2,.9,.1,1);

  /* Normaliseringstak: sannsynlighet mappes 0..MAXP → hele fargeskalaen.
     Holdes i synk med MAXP i app.js. */
  --maxp:0.6;
  --mobile-sheet-h:calc(80px + var(--safe-bottom));  /* mobil starter kompakt; JS styrer resten */
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  /* Høyde på FAB-rail-en (2 ikonknapper à 46px + 8px mellomrom). Transiente
     paneler løftes over denne på mobil så de aldri lander oppå kartverktøyene. */
  --rail-h:100px;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--text); font-family:var(--font-ui);
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none;
}

.app {
  width:100%; max-width:none; margin:0 auto; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--ground);
  box-shadow:none; position:relative; overflow:hidden;
}

/* Header */
.header {
  flex:none; padding:0;
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:0;
  align-items:stretch;
  background:var(--panel); border-bottom:1px solid var(--line-strong);
}
.header > div:first-child { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); }
.brand {
  grid-row:1 / span 2;
  display:grid; place-items:center; min-height:64px; padding:0 12px;
  font-family:var(--font-brand); font-size:16px; line-height:.92;
  letter-spacing:-.03em; color:var(--accent); font-weight:700;
  background:var(--ink-900); border-right:1px solid var(--line-strong);
}
.place {
  align-self:end; min-width:0; margin:0; padding:9px 12px 0;
  font-size:26px; line-height:.92; font-weight:700; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.loc-pin {
  grid-column:2; padding:3px 12px 9px; margin:0;
  font-family:var(--font-mono); font-size:10px; line-height:1.2;
  color:var(--text-mut); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.date {
  display:flex; flex-direction:column; justify-content:center; min-height:64px;
  padding:0 12px; border-left:1px solid var(--line-strong);
  text-align:right; font-family:var(--font-mono); font-size:10px;
  color:var(--text-mut); line-height:1.25; white-space:nowrap;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.date b { display:block; color:var(--text); font-size:13px; font-weight:700; letter-spacing:0; }
.region-toggle {
  grid-column:1 / -1; align-self:center; display:flex; padding:0; border-radius:0;
  background:var(--panel); border:1px solid var(--line-strong);
  box-shadow:var(--lift-1);
}
.region-toggle button {
  flex:1 1 0; min-height:38px; border:none; background:transparent; cursor:pointer;
  padding:7px 8px; border-radius:0; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
  color:var(--text-dim); transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap);
}
.region-toggle button + button { border-left:1px solid var(--line); }
.region-toggle button.active { background:var(--accent); color:var(--text); }

/* Kart */
.map-wrap { position:relative; flex:1 1 auto; min-height:0; }
#map { position:absolute; inset:0; background:var(--bone-200); }
.maplibregl-ctrl-attrib {
  font-family:var(--font-mono); font-size:9px;
  background:var(--bone-000)!important; border-top:1px solid var(--line)!important; border-left:1px solid var(--line)!important;
}
.maplibregl-ctrl-attrib a { color:var(--text-mut)!important; }
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
  bottom:calc(var(--mobile-sheet-h) + var(--safe-bottom))!important;
}
.maplibregl-marker {
  position:absolute;
  top:0;
  left:0;
  will-change:transform;
}

.map-legend, .map-species {
  position:absolute; z-index:2; display:flex; align-items:center; gap:8px;
  padding:0; border-radius:0; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
  background:var(--glass);
  border:1px solid var(--line-strong); color:var(--text-dim);
  box-shadow:var(--lift-1);
}
.map-legend { left:10px; top:10px; }
.map-legend .lg-title { color:var(--text); font-weight:700;
  padding:7px 9px; margin:0; border-right:1px solid var(--line-strong); }
.map-legend > span:not(.lg-title):not(.swatch) { padding:7px 0; color:var(--text-mut); }
.map-legend > span:last-child { padding-right:9px; }
.map-legend .swatch {
  width:84px; height:13px; border-radius:0; background:var(--heat-grad);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.map-species {
  left:10px; bottom:calc(var(--mobile-sheet-h) + 12px + var(--safe-bottom));
  color:var(--text); font-weight:700; padding:7px 9px;
}
.map-species .cap { width:11px; height:11px; border-radius:0; background:var(--accent); border:1px solid var(--line-strong); }
.map-species .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.map-actions {
  position:absolute; z-index:7; right:10px;
  bottom:calc(var(--mobile-sheet-h) + 12px + var(--safe-bottom));
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.map-icon-btn {
  min-width:46px; min-height:46px; border-radius:0; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:0 12px;
  background:var(--glass); color:var(--text);
  box-shadow:var(--lift-1);
  font-family:var(--font-mono); font-size:22px; line-height:1; font-weight:800;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
  transition:transform 80ms var(--ease-snap), box-shadow 80ms var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.map-icon-btn .btn-label {
  font-size:10px; font-weight:700; line-height:1.05; white-space:nowrap;
}
.map-icon-btn:active {
  transform:translate(var(--press-shift), var(--press-shift));
  box-shadow:none;
}
.map-icon-btn.active { background:var(--accent); color:var(--text); border-color:var(--line-strong); }
.loc-status {
  position:absolute; z-index:8; left:50%; transform:translateX(-50%);
  bottom:calc(var(--mobile-sheet-h) + 70px + var(--safe-bottom));
  max-width:calc(100% - 24px); padding:8px 12px; border-radius:0;
  background:var(--text); color:var(--bone-000);
  border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
  box-shadow:var(--lift-1); white-space:nowrap;
}

.reset-cell {
  position:absolute; z-index:5; left:10px; bottom:calc(var(--mobile-sheet-h) + 64px + var(--safe-bottom));
  min-height:42px; padding:8px 12px; border-radius:0; cursor:pointer;
  background:var(--accent); color:var(--text); border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
  box-shadow:var(--lift-1);
  transition:transform 80ms var(--ease-snap), box-shadow 80ms var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.reset-cell:active {
  transform:translate(var(--press-shift), var(--press-shift));
  box-shadow:none;
}

/* Oppløsnings-toggle (1 km ↔ 250 m) */
.res-toggle {
  position:absolute; z-index:5; right:66px; bottom:calc(var(--mobile-sheet-h) + 12px + var(--safe-bottom));
  display:flex; padding:0; border-radius:0;
  background:var(--glass);
  border:1px solid var(--line-strong); box-shadow:var(--lift-1);
}
.res-toggle button {
  min-height:40px; border:none; background:transparent; cursor:pointer;
  padding:7px 12px; border-radius:0; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
  color:var(--text-dim); transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap);
}
.res-toggle button + button { border-left:1px solid var(--line); }
.res-toggle button.active { background:var(--accent); color:var(--text); }
.res-toggle button:disabled {
  cursor:not-allowed;
  color:var(--text-mut);
  opacity:.4;
}

/* Primær lag-velger (I dag · Utforske · Kjente steder) — full-bredde i sheet */
.layer-toggle {
  display:flex; gap:0; margin:0; padding:0; border-radius:0;
  background:var(--panel); border-bottom:1px solid var(--line-strong);
}
.layer-toggle button {
  flex:1 1 0; min-height:38px; border:none; background:transparent; cursor:pointer; white-space:nowrap;
  padding:7px 6px; border-radius:0; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
  color:var(--text-dim); transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap);
}
.layer-toggle button + button { border-left:1px solid var(--line); }
.layer-toggle button.active { background:var(--accent); color:var(--text); box-shadow:none; }
.layer-toggle[hidden] { display:none; }

/* Ærlig forklaring av aktivt lag — i sheet, over kortene */
.layer-caption {
  margin:0; padding:10px 12px; border-radius:0;
  font-size:13px; line-height:1.35; font-weight:500; color:var(--text-dim);
  background:var(--panel-2); border-bottom:1px solid var(--line-strong);
  border-left:0;
}
.layer-caption b { color:var(--text); font-weight:800; }
.layer-caption .cap-note {
  display:block; margin-top:4px; color:var(--text-mut); font-family:var(--font-mono);
  font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-mono);
}

@media (min-width:820px){
  .layer-caption { margin:0; }
  .layer-toggle { margin:0; }
}

/* Kart-kontroller (synlighet + terskel + radius) */
.map-controls {
  position:absolute; z-index:7; left:10px; right:10px;
  bottom:calc(var(--mobile-sheet-h) + 66px + var(--safe-bottom));
  display:none; flex-direction:column; gap:9px; width:auto;
  padding:12px; border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--line-strong); box-shadow:var(--lift-1);
}
.map-controls[hidden] { display:none; }   /* [hidden] må slå .map-controls display:flex */
.app.mobile-controls-open .map-controls:not([hidden]) { display:flex; }
.map-controls .ctl { display:flex; flex-direction:column; gap:5px; }
.ctl-lbl {
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.ctl-lbl b { font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:0; }
.ctl-help {
  display:block;
  margin-top:-2px;
  color:var(--text-mut);
  font-size:12px;
  line-height:1.25;
}
.map-controls input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:18px;
  border-radius:0; background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - .5px), var(--line) calc(10% - .5px), var(--line) calc(10% + .5px)),
    linear-gradient(var(--line-mid), var(--line-mid)) center/100% 2px no-repeat;
  outline:none; cursor:pointer;
}
.map-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:8px; height:18px; border-radius:0;
  background:var(--ink-900); border:none; box-shadow:none;
}
.map-controls input[type=range]::-moz-range-thumb {
  width:8px; height:18px; border-radius:0;
  background:var(--ink-900); border:none; box-shadow:none;
}

.radius-hint {
  position:absolute; z-index:6; left:50%; transform:translateX(-50%); top:52px;
  padding:7px 10px; border-radius:0; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-mono);
  background:var(--accent); color:var(--text); border:1px solid var(--line-strong); box-shadow:var(--lift-1);
  white-space:nowrap; pointer-events:none;
}

.best-spots {
  position:absolute; z-index:6; left:10px; right:10px;
  bottom:calc(var(--mobile-sheet-h) + 64px + var(--safe-bottom));
  width:auto; max-height:34dvh;
  overflow-y:auto; scrollbar-width:none;
  padding:0; border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--line-strong); box-shadow:var(--lift-1);
}
.best-spots::-webkit-scrollbar { display:none; }
.bs-head {
  display:flex; align-items:center; justify-content:space-between; margin:0;
  border-bottom:1px solid var(--line-strong);
}
.bs-title {
  padding:7px 9px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.bs-close {
  align-self:stretch; min-width:56px; border:none; border-left:1px solid var(--line-strong);
  cursor:pointer; background:var(--panel); color:var(--text);
  font-family:var(--font-mono); font-size:10px; line-height:1; padding:0 9px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.bs-close:hover { background:var(--panel-2); }
.bs-list { display:flex; flex-direction:column; gap:0; }
.bs-row {
  display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:center;
  padding:8px 9px; border-radius:0;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.bs-row:last-child { border-bottom:0; }
.bs-rank {
  width:28px; height:28px; border-radius:0; display:grid; place-items:center;
  background:var(--spot-color, var(--accent)); color:var(--spot-text, var(--text)); border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
}
.bs-main { min-width:0; }
.bs-coord {
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.bs-prob {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-mut);
  margin-top:1px; text-transform:uppercase; letter-spacing:.04em;
}
.bs-copy {
  width:88px; border:1px solid var(--line-strong); cursor:pointer; padding:6px 7px; border-radius:0;
  background:var(--accent); color:var(--text); font-family:var(--font-mono);
  font-size:10px; line-height:1.05; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-align:center;
  transition:transform 80ms var(--ease-snap), box-shadow 80ms var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.bs-copy:active { transform:translate(2px, 2px); }
.bs-copy.copied { background:var(--sun-500); }
.bs-empty { font-size:12px; color:var(--text-mut); font-weight:600; padding:10px; }

.radius-list-toggle {
  position:absolute; z-index:6; left:10px;
  bottom:calc(var(--mobile-sheet-h) + 64px + var(--safe-bottom));
  min-height:38px; padding:0 12px; border-radius:0;
  border:1px solid var(--line-strong); box-shadow:var(--lift-1);
  background:var(--accent); color:var(--text); cursor:pointer;
  font-family:var(--font-mono); font-size:10px; line-height:1.05; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.radius-list-toggle:active {
  transform:translate(var(--press-shift), var(--press-shift));
  box-shadow:none;
}

.spot-pin {
  width:24px; height:24px; border-radius:0; transform:rotate(45deg);
  background:var(--spot-color, var(--accent)); border:1px solid var(--line-strong); box-shadow:var(--lift-1);
  display:grid; place-items:center; cursor:pointer;
}
.spot-pin > span {
  transform:rotate(-45deg); color:var(--spot-text, var(--text)); font-family:var(--font-mono);
  font-size:10px; font-weight:700;
}

.click-marker {
  --marker-fill:var(--acid-500);
  z-index:5;
  pointer-events:none;
}
.click-marker.search { --marker-fill:var(--sun-500); }
.click-marker-pin {
  display:block;
  width:32px; height:42px;
  position:relative;
  filter:drop-shadow(3px 3px 0 var(--ink-900));
}
.click-marker-pin::before {
  content:""; position:absolute; left:0; top:0;
  width:32px; height:32px;
  background:var(--marker-fill);
  border:2px solid var(--ink-900);
}
.click-marker-pin::after {
  content:""; position:absolute; left:50%; bottom:0;
  width:14px; height:14px;
  background:var(--marker-fill);
  border-right:2px solid var(--ink-900);
  border-bottom:2px solid var(--ink-900);
  transform:translateX(-50%) rotate(45deg);
}
.click-marker .click-marker-core {
  position:absolute; left:50%; top:16px;
  width:8px; height:8px;
  background:var(--ink-900);
  transform:translate(-50%, -50%);
  z-index:1;
}
.click-marker.coord .click-marker-pin {
  animation:marker-pop 160ms var(--ease-snap);
}
@keyframes marker-pop {
  from { filter:none; }
}

.user-marker {
  width:18px; height:18px; border-radius:50%;
  background:var(--cobalt-500); border:3px solid var(--bone-000);
  box-shadow:0 0 0 7px rgba(31,75,216,.18), 0 0 0 1px var(--line-strong);
}

.coord-readout {
  position:absolute; z-index:6; left:50%; transform:translateX(-50%);
  bottom:calc(var(--mobile-sheet-h) + 64px + var(--safe-bottom));
  display:flex; align-items:center; gap:0;
  padding:0 0 0 10px; border-radius:0;
  background:var(--glass);
  border:1px solid var(--line-strong); box-shadow:var(--lift-1);
  white-space:nowrap; max-width:calc(100% - 24px);
}
.coord-val {
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
  padding-right:10px;
}
.coord-prob {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--text-mut);
  text-transform:uppercase; letter-spacing:.04em;
  padding-right:10px;
}
.coord-copy {
  align-self:stretch; width:116px; min-height:38px; border:none; border-left:1px solid var(--line-strong); cursor:pointer; padding:0 8px; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--text); font-family:var(--font-mono);
  font-size:10px; line-height:1.05; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-align:center;
  transition:background var(--dur-fast) var(--ease-snap);
}
.coord-copy.copied { background:var(--sun-500); }
.coord-close {
  align-self:stretch; min-width:52px; border:none; border-left:1px solid var(--line-strong);
  cursor:pointer; background:var(--panel); color:var(--text);
  font-family:var(--font-mono); font-size:10px; line-height:1; padding:2px 7px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}


/* Dag-scrubber */
.scrubber {
  position:absolute; left:0; right:0;
  bottom:calc(var(--mobile-sheet-h) + var(--safe-bottom)); z-index:2;
  display:flex; gap:6px; padding:22px 12px 12px; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(0deg, var(--bone-000) 34%, transparent);
  pointer-events:none;                 /* container blokkerer ikke klikk … */
}
.scrubber .day { pointer-events:auto; } /* … kun dag-knappene er klikkbare */
.scrubber::-webkit-scrollbar { display:none; }
.day {
  flex:none; min-width:50px; min-height:48px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 9px; border-radius:0; cursor:pointer;
  background:var(--glass); border:1px solid var(--line-strong); color:var(--text-dim);
  box-shadow:var(--lift-1);
  transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap),transform 80ms var(--ease-snap),box-shadow 80ms var(--ease-snap);
}
.day:hover { color:var(--text); }
.day:active { transform:translate(var(--press-shift), var(--press-shift)); box-shadow:none; }
.day .dow {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.day .dnum { font-family:var(--font-mono); font-size:15px; font-weight:700; }
.day.active { background:var(--accent); border-color:var(--line-strong); color:var(--text); }

/* Sheet */
.sheet {
  position:absolute; left:0; right:0; bottom:0;
  height:var(--mobile-sheet-h); max-height:calc(100dvh - 92px);
  flex:none; margin-top:0; padding-bottom:var(--safe-bottom); background:var(--panel);
  border-radius:0; border-top:2px solid var(--line-strong);
  box-shadow:none;
  display:flex; flex-direction:column; overflow:hidden; z-index:3;
  transition:height 320ms cubic-bezier(.16,1,.3,1);
}
.grab {
  width:auto; height:36px; border:0; border-bottom:1px solid var(--line-strong); border-radius:0; background:var(--accent);
  margin:0; flex:none; cursor:grab; position:relative;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
/* Dra-håndtak: en sentrert bar som signaliserer «trekk meg opp/ned» — ikke en knapp. */
.grab::after {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:44px; height:5px; border-radius:0;
  background:var(--ink-900);
}
.grab:active { cursor:grabbing; }
.grab:focus-visible, .map-icon-btn:focus-visible {
  outline:2px solid var(--line-strong); outline-offset:2px;
}
/* CTA inne i dra-håndtaket — bare synlig i kompakt tilstand. */
.grab-cta { display:none; }

/* Kompakt (utgangspunkt på mobil): panelet ligger nede og håndtaket blir en
   tydelig grønn «Dra opp for å velge sopp»-flate. Head, kort og lag-tekst er
   skjult så kartet får maks plass; ett tap eller ett drag åpner panelet. */
.sheet.sheet-compact .grab {
  height:auto; flex:1 1 auto; border-bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
}
.sheet.sheet-compact .grab::after {
  position:static; transform:none; order:1;   /* baren flyter på toppen av CTA-flaten */
}
.sheet.sheet-compact .grab-cta {
  order:2; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono); color:var(--ink-900);
}
.sheet.sheet-compact .grab-arrow { font-size:14px; line-height:1; }
.sheet.sheet-compact .sheet-head,
.sheet.sheet-compact .cards,
.sheet.sheet-compact .layer-caption { display:none; }
.sheet-head {
  display:flex; align-items:stretch; justify-content:space-between; padding:0; flex:none;
  border-bottom:1px solid var(--line-strong);
}
.sheet-head h2 {
  margin:0; padding:9px 12px; font-family:var(--font-mono);
  font-size:10px; line-height:1.2; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.sheet-head .sub {
  display:grid; place-items:center; max-width:48%; padding:0 10px;
  border-left:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:10px; color:var(--text-mut);
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  text-align:right;
}

.cards { overflow-y:auto; padding:0 0 24px; flex:1 1 auto; }
.card {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:9px 10px; margin-bottom:0; border-radius:0;
  background:var(--panel); border-bottom:1px solid var(--line); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-snap),transform 80ms var(--ease-snap);
}
.card:hover { background:var(--panel-2); }
.card:active { transform:translate(2px, 0); }
.card.selected { border-color:var(--line-strong); background:var(--accent); }

.c-main { min-width:0; }
.c-name {
  font-size:16px; line-height:1.05; font-weight:700; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-lat { font-size:12px; color:var(--text-mut); font-style:italic; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card.selected .c-lat { color:var(--ink-600); }

.c-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.peak {
  font-family:var(--font-mono); font-size:10px; font-weight:700; text-align:right; white-space:nowrap;
  padding:5px 7px; border-radius:0; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.04em;
}
.peak.now { background:var(--ink-900); color:var(--acid-500); border-color:var(--ink-900); }
.peak.down { background:var(--bone-200); color:var(--text-mut); }
.card.selected .peak { background:var(--acid-100); color:var(--text); border-color:var(--line-strong); }
.card.selected .peak.now { background:var(--ink-900); color:var(--acid-500); }
.chev { color:var(--text-mut); font-size:18px; line-height:1; }
.card.selected .chev { color:var(--text); }

@media (max-width:380px) {
  .brand { padding:0 9px; font-size:14px; }
  .place { font-size:22px; }
  .date { padding:0 9px; }
  .region-toggle button { font-size:10.5px; padding-left:5px; padding-right:5px; }
  .map-legend .swatch { width:56px; }
  .map-legend { gap:6px; font-size:10.5px; }
  .res-toggle { right:62px; }
  .res-toggle button { padding-left:9px; padding-right:9px; }
  .coord-readout { padding-left:10px; }
  .coord-val { font-size:11.5px; }
}

@media (max-width:520px) {
  .coord-copy { width:94px; }
  .coord-close { min-width:46px; }
}

/* ── Mobil (≤819px): ryddet bunnbånd ──────────────────────────────
   To kilder til rot på liten skjerm: (1) handlingsknappene var brede
   tekstknapper som spiste halve bredden, (2) alle transiente paneler lå i
   samme bunnstripe som knappene og havnet oppå hverandre. Fiks: ikon-only
   FAB-rail + løft transiente paneler over rail-en. */
@media (max-width:819px) {
  /* «Finn meg» (⌖) og «Åpne kartvalg» (☰) blir kompakte ikonknapper.
     Tekst-labelen beholdes for skjermlesere via aria-label/title. */
  .map-icon-btn { width:46px; padding:0; gap:0; }
  .map-icon-btn .btn-label {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .map-actions { gap:8px; }

  /* Transiente/utvidbare paneler løftes klar av FAB-rail-en (høyde --rail-h),
     så «Kopier koordinat», beste-steder og kartvalg aldri dekkes av knappene. */
  .coord-readout,
  .best-spots,
  .radius-list-toggle,
  .map-controls,
  .reset-cell {
    bottom:calc(var(--mobile-sheet-h) + var(--safe-bottom) + var(--rail-h) + 12px);
  }
  .loc-status {
    bottom:calc(var(--mobile-sheet-h) + var(--safe-bottom) + var(--rail-h) + 72px);
  }
  /* Litt lavere tak: panelet skal ikke nå opp i legend/toppbånd når det løftes. */
  .best-spots { max-height:30dvh; }
  .app.mobile-controls-open .best-spots,
  .app.mobile-controls-open .radius-list-toggle { display:none; }

  /* Kartvalg på mobil skal være et kompakt verktøybrett, med kort forklaring
     per slider så kontrollene kan forstås uten desktop-panelet. */
  .map-controls {
    left:8px; right:8px;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:9px 8px;
    padding:8px;
  }
  .app.mobile-controls-open .map-controls:not([hidden]) { display:grid; }
  .map-controls .ctl { min-width:0; gap:4px; }
  .ctl-lbl { font-size:9px; line-height:1.1; }
  .ctl-lbl b { font-size:10px; }
  .ctl-help {
    display:block; position:static; width:auto; height:auto; padding:0; margin:0;
    overflow:visible; clip:auto; white-space:normal; border:0;
    color:var(--text-mut); font-size:10px; line-height:1.16;
    letter-spacing:0; text-transform:none;
  }
  .map-controls input[type=range] { height:20px; }

  /* Koordinat-avlesningen: full-bredde kort med to rader. Koordinaten får hele
     øverste rad (klippes aldri), knappene deler nederste rad likt. Løser at
     koordinaten før måtte ellipseres bort på smal skjerm. */
  .coord-readout {
    left:10px; right:10px; transform:none; max-width:none;
    flex-wrap:wrap; align-items:stretch; padding:0;
  }
  .coord-val {
    flex:1 1 100%; padding:9px 10px 8px; font-size:13px;
    white-space:normal; word-break:break-word;
  }
  .coord-prob { flex:1 1 100%; padding:0 10px 8px; }
  .coord-prob:empty { display:none; }
  .coord-copy {
    flex:1 1 0; width:auto; min-height:42px;
    border-left:0; border-top:1px solid var(--line-strong);
  }
  .coord-close {
    flex:1 1 0; min-width:0; min-height:42px;
    border-top:1px solid var(--line-strong);
  }
}

@media (min-width:820px) {
  body { overflow:hidden; }
  .app {
    max-width:none; margin:0; box-shadow:none;
    display:grid;
    grid-template-columns:1fr clamp(340px, 30%, 460px);
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "header sidebar"
      "map    sidebar";
  }
  .header  {
    grid-area:header; padding:0;
    display:flex; align-items:stretch; justify-content:space-between; gap:0;
  }
  .header > div:first-child { flex:1 1 auto; min-width:0; }
  .brand { min-height:76px; padding:0 16px; font-size:18px; }
  .place { font-size:34px; padding:12px 16px 0; }
  .loc-pin { padding:4px 16px 12px; }
  .date { min-height:76px; padding:0 16px; }
  .region-toggle {
    grid-column:auto; flex:none;
  }
  .region-toggle button {
    flex:none; min-height:auto; padding:5px 10px;
  }
  .region-toggle { margin-left:auto; margin-right:8px; }
  .map-wrap{ grid-area:map; min-height:0; }
  .maplibregl-ctrl-bottom-right,
  .maplibregl-ctrl-bottom-left {
    bottom:0!important;
  }
  .sheet {
    position:relative; height:auto; max-height:none; padding-bottom:0;
    grid-area:sidebar; margin-top:0; z-index:1;
    border-radius:0; border-top:none; border-left:1px solid var(--line-strong);
    box-shadow:none;
    transition:none;
  }
  .sheet .grab,
  .sheet.sheet-compact .grab { display:none; }
  .sheet.sheet-compact .sheet-head { display:flex; }
  .sheet.sheet-compact .cards { display:block; }
  .sheet.sheet-compact .layer-caption { display:block; }
  .sheet-head { padding:0; }
  .cards { padding:0 0 24px; }
  .map-legend, .map-species { top:14px; }
  .map-legend { left:14px; }
  .map-species { left:auto; right:14px; bottom:auto; }
  .map-actions {
    right:14px; top:56px; bottom:auto;
  }
  #mobileControlsBtn { display:none; }
  .loc-status {
    left:auto; right:14px; top:110px; bottom:auto;
    transform:none;
  }
  .map-controls {
    left:14px; right:auto; top:56px; bottom:auto;
    display:flex; width:280px;
  }
  .best-spots {
    left:auto; right:14px; top:112px; bottom:auto;
    width:min(330px, calc(100% - 24px)); max-height:calc(100% - 186px);
  }
  .radius-list-toggle {
    left:auto; right:14px; top:112px; bottom:auto;
  }
  .coord-readout { bottom:96px; }
  .scrubber { bottom:0; }
  .reset-cell, .res-toggle { bottom:64px; }
  .reset-cell { left:12px; min-height:38px; }
  .res-toggle { right:12px; }
  .res-toggle button { min-height:38px; padding:5px 12px; }
  .layer-toggle button { min-height:38px; }
}

@media (min-width:820px) and (max-width:1120px) {
  .app {
    grid-template-columns:minmax(0, 1fr) clamp(320px, 34vw, 380px);
  }
  .map-controls {
    width:min(250px, calc(100% - 28px));
    padding:10px;
    gap:8px;
  }
  .ctl-help { font-size:11px; line-height:1.22; }
  .map-icon-btn {
    max-width:170px;
    min-height:44px;
    padding:0 10px;
    justify-content:flex-start;
  }
  .map-icon-btn .btn-label {
    white-space:normal;
    text-align:left;
  }
  .map-species {
    max-width:160px;
  }
}

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