/* Built in Phase 3. Mobile first, the map fills the viewport. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
}
#map { position: absolute; inset: 0; background: #e8e8e8; }

#controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #ccc;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 2;
}
#when { font-weight: 600; margin-bottom: 6px; text-align: center; }
#sliders { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#sliders label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
#sliders label.grow { flex: 1 1 160px; }
#sliders input[type="range"] { flex: 1; min-width: 90px; }
#hour-label { font-variant-numeric: tabular-nums; min-width: 44px; }
#sliders select, #sliders button {
  font: inherit; padding: 6px 10px; border: 1px solid #bbb; border-radius: 6px;
  background: #fff; cursor: pointer;
}
#now { background: #1a73e8; color: #fff; border-color: #1a73e8; }
/* Platsknappen i denied-läge: dämpad men KLICKBAR — klicket förklarar i
   statusraden att platsåtkomst är blockerad (aldrig en död knapp). */
#locate.dim { opacity: 0.45; }

#legend {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px;
  background: rgba(255, 255, 255, 0.96); border: 1px solid #ccc; border-radius: 8px;
  padding: 6px 8px; z-index: 2; max-width: 46vw;
}
#legend button {
  font: inherit; font-size: 12px; font-weight: 600; border: 0; background: none;
  padding: 0; cursor: pointer; width: 100%; text-align: left;
}
#legend ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
#legend li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
/* Legendraden ÄR filtret: hela raden är en knapp. Klicket DÄMPAR, släcker
   aldrig — ett dämpat segment kan fortfarande vara städat i natt eller ligga i
   ett förbudsfönster, och panelen är oförändrad vid klick (Dinos krav). */
#legend .legend-rad {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font: inherit; font-size: 12px; font-weight: 400; text-align: left;
  border: 0; background: none; padding: 1px 0; cursor: pointer; color: inherit;
}
#legend .legend-rad:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
#legend .legend-rad.dampad .etikett { color: #999; text-decoration: line-through; }
/* VAR klassen finns (B1 och B2a). legend-vy är TEXT och flyttar ingenting;
   legend-hopp är det enda i legenden som flyttar kartan, och den syns bara när
   ett hopp faktiskt erbjuds. De två byter aldrig roll: ett avstånd som är för
   långt för att hoppa till står som text, inte som en knapp man kan trycka på
   och bli vilse av (Dinos krav 2). */
#legend .legend-vy { flex: 0 0 auto; color: #666; font-size: 11px; white-space: nowrap; }
#legend .legend-hopp {
  flex: 0 0 auto; width: auto; font-size: 11px; font-weight: 600; color: #1a5fb4;
  text-decoration: underline; padding: 1px 2px; white-space: nowrap;
}
#legend .legend-hopp:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
#legend .legend-rad { flex: 1 1 auto; min-width: 0; }
/* Etiketten bryts ALDRIG över flera rader. Utan det här kläms den ihop till
   "Fra... inte av dat..." när vy-kolumnen tar sin plats, och en legend där
   raderna är olika höga går inte att läsa i en blick. Hellre en avhuggen
   etikett med hela texten i title, vilket är vad som händer på smal skärm. */
#legend .legend-rad .etikett { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Smal skärm: legenden får mer bredd, eftersom den nu bär tre kolumner i
   stället för två (Dinos mobilrökkontroll 2026-07-27). */
@media (max-width: 520px) {
  #legend { max-width: 68vw; }
  #legend .legend-vy, #legend .legend-hopp { font-size: 10px; }
}
#legend .sw { width: 16px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
#legend .sw-dashed { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 2px, transparent 2px 5px); }
#legend[data-collapsed="true"] ul { display: none; }

#status {
  position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 6px 10px;
  background: #fff3cd; color: #664d03; z-index: 3; text-align: center; font-size: 13px;
}
#status:empty { display: none; }

.pk-popup h3 { margin: 0 0 4px; font-size: 15px; }
.pk-popup .row { margin: 2px 0; }
.pk-popup .muted { color: #666; }
.pk-popup .warn { color: #b45309; font-weight: 600; }
.pk-popup .disclaimer { margin-top: 6px; font-size: 11px; color: #666; border-top: 1px solid #eee; padding-top: 4px; }
.maplibregl-popup-content { padding: 10px 12px; max-width: 260px; }

/* Rapportknappen (skrivvägen; Dinos beslut 2026-07-19) */
.rapport { margin-top: 6px; border-top: 1px solid #ddd; padding-top: 6px; }
.rapport-btn, .rapport-skicka {
  font-size: 12px; padding: 4px 10px; border: 1px solid #999;
  border-radius: 4px; background: #f6f6f4; cursor: pointer;
}
.rapport-skicka { margin-top: 4px; background: #2f6fed; color: #fff; border-color: #2f6fed; }
.rapport-skicka:disabled { opacity: 0.5; cursor: default; }
.rapport-info { font-size: 11px; color: #444; margin: 6px 0 2px; }
.rapport-pii { font-size: 11px; color: #8a4b00; margin: 2px 0; }
.rapport-text { width: 100%; box-sizing: border-box; font-size: 12px; margin-top: 2px; }
.rapport-raknare { font-size: 10px; color: #888; text-align: right; }
.rapport-status { font-size: 11px; color: #8a1c1c; margin-top: 3px; }