/* pwa/app.css — alt scoped til .pwa-, samme mønster som .skn-.
   Site-agnostisk: fargene arves fra sidens egne CSS-variabler, så en kopi til
   sankekart trenger ingen endring her. */

.pwa-intro { padding-bottom: 0; }

.pwa-app {
  display: flex;
  flex-direction: column;
  /* Fyller resten av skjermen under intro-en, men aldri mer. 100vh på mobil
     regner med adressefeltet og gir en side som scroller litt uansett. */
  height: min(72vh, 720px);
  min-height: 420px;
  margin: 1.25rem auto 2.5rem;
  max-width: 1100px;
  border: 1px solid var(--kant, #e5e0d5);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #fff;
}

.pwa-paneler { position: relative; flex: 1 1 auto; min-height: 0; }
.pwa-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pwa-panel[hidden] { display: none; }

.pwa-kart { position: absolute; inset: 0; }
.pwa-panel-innhold { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.15rem 1.5rem; }

/* Kartfanen er todelt: kartet øverst, filter og nærmest-lista under.
   Forholdet er bevisst — kartet får mest plass, men lista skal ALLTID være
   synlig uten å scrolle, ellers er den i praksis skjult. Se kart.js punkt 1. */
.pwa-kartboks { position: relative; flex: 1 1 58%; min-height: 180px; }
.pwa-under {
  flex: 1 1 42%; min-height: 0; overflow-y: auto;
  border-top: 1px solid var(--kant, #e5e0d5);
  background: var(--krem, #faf8f5);
  padding: 0.6rem 0.9rem 1rem;
  -webkit-overflow-scrolling: touch;
}

/* Én rad som scroller sidelengs, ikke fire rader som brekker.
   Med wrap tok chipsene 200 px på mobil og dyttet nærmest-lista under
   skjermkanten — altså akkurat det denne fanen er bygget for å unngå. */
.pwa-filter {
  display: flex; flex-wrap: nowrap; gap: 0.35rem; margin-bottom: 0.75rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.pwa-filter::-webkit-scrollbar { display: none; }
.pwa-filterchip {
  flex: 0 0 auto; white-space: nowrap;
  font: inherit; font-size: 0.8rem; font-weight: 600;
  min-height: 44px;
  padding: 0.3rem 0.7rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--kant, #e5e0d5); background: #fff;
  color: var(--tekst-lys, #6b6459);
}
.pwa-filterchip.er-aktiv {
  background: var(--skog, #2c5a26); border-color: var(--skog, #2c5a26); color: #fff;
}

.pwa-naer { display: grid; gap: 0.55rem; }
.pwa-naer-tittel { font-size: 0.95rem; margin: 0; }
.pwa-naer .pwa-hjelp { margin: 0 0 0.15rem; font-size: 0.82rem; }
.pwa-naer-start { padding: 0.25rem 0; }

/* Forbeholdet på ukontrollerte punkter. Dempet, men ikke gjemt: den som leser
   det skal forstå at stedet finnes, men at punktet kan ligge et stykke unna. */
.pwa-usikker {
  font-size: 0.78rem; line-height: 1.45; margin: 0.45rem 0 0;
  padding-left: 0.6rem; border-left: 2px dashed var(--fare-lav, #8a6b10);
  color: var(--fare-lav, #8a6b10);
}
.pwa-usikker--bred { border-left: 0; padding: 0.5rem 0.7rem; margin: 0 0 0.6rem;
  background: var(--fare-lav-bg, #fdf8ec); border-radius: var(--radius, 6px); width: 100%; }
.pwa-kort--usikker { border-style: dashed; }

/* Faner nederst. Tommelen når hit; en toppmeny gjør den ikke. */
.pwa-faner {
  display: flex;
  border-top: 1px solid var(--kant, #e5e0d5);
  background: var(--krem, #faf8f5);
  flex: 0 0 auto;
}
.pwa-fane {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.55rem 0.25rem;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--tekst-lys, #6b6459);
  border-top: 3px solid transparent;
  min-height: 56px;                 /* touch-mål */
}
.pwa-fane span:first-child { font-size: 1.15rem; line-height: 1; }
.pwa-fane[aria-current="true"] {
  color: var(--skog, #2c5a26);
  border-top-color: var(--skog, #2c5a26);
  font-weight: 600;
}

.pwa-finnmeg {
  position: absolute; right: 12px; bottom: 12px; z-index: 500;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--kant, #e5e0d5); background: #fff; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--skog, #2c5a26);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.pwa-knapp {
  display: inline-block; padding: 0.55rem 1rem; margin: 0 0.4rem 0.5rem 0;
  border: 1px solid var(--kant, #e5e0d5); border-radius: var(--radius, 6px);
  background: #fff; color: var(--tekst, #33302b); cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; text-align: center;
}
.pwa-knapp--primaer { background: var(--skog, #2c5a26); border-color: var(--skog, #2c5a26); color: #fff; }
.pwa-knapp--sekundaer { width: 100%; margin-top: 1rem; }
.pwa-knapp:disabled { opacity: 0.55; cursor: default; }

.pwa-varsel {
  background: var(--fare-lav-bg, #fdf8ec); color: var(--fare-lav, #8a6b10);
  border: 1px solid #ffc107; border-radius: var(--radius, 6px);
  padding: 0.6rem 0.8rem; font-size: 0.86rem; line-height: 1.5; margin-bottom: 1rem;
}
.pwa-hjelp { font-size: 0.9rem; color: var(--tekst-lys, #6b6459); line-height: 1.6; margin-bottom: 1rem; }

.pwa-logg-verktoy { display: flex; flex-wrap: wrap; margin-bottom: 1rem; }
.pwa-logg-liste { display: grid; gap: 0.6rem; }

.pwa-kort {
  border: 1px solid var(--kant, #e5e0d5); border-radius: var(--radius-md, 8px);
  padding: 0.75rem 0.9rem; background: #fff;
}
.pwa-kort h3 { font-size: 1rem; margin: 0 0 0.2rem; }
.pwa-kort-meta { font-size: 0.8rem; color: var(--tekst-lys, #6b6459); }
.pwa-kort-avstand { font-weight: 600; color: var(--skog, #2c5a26); }
.pwa-kort-meta--fare { color: var(--fare-hoy, #a02020); font-weight: 600; }
.pwa-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.pwa-chip {
  font-size: 0.74rem; padding: 2px 8px; border-radius: 100px;
  background: var(--krem, #faf8f5); border: 1px solid var(--kant, #e5e0d5);
  color: var(--tekst-lys, #6b6459);
}
.pwa-maaned { font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tekst-lys, #6b6459); margin: 0.75rem 0 0.1rem; }

.pwa-tom { text-align: center; color: var(--tekst-lys, #6b6459); padding: 2rem 1rem; font-size: 0.95rem; }

/* Popup i kartet */
.pwa-popup h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.pwa-popup-knapper { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.pwa-popup-knapper a, .pwa-popup-knapper button {
  flex: 1 1 0; text-align: center; font-size: 0.82rem; padding: 0.4rem 0.5rem;
  border-radius: var(--radius, 6px); border: 1px solid var(--kant, #e5e0d5);
  background: #fff; color: var(--tekst, #33302b); text-decoration: none;
  cursor: pointer; font-weight: 600;
}
.pwa-popup-knapper a { background: var(--skog, #2c5a26); border-color: var(--skog, #2c5a26); color: #fff; }

/* Destinasjonsmarkører. Egne ikoner i stedet for Leaflets nål: ingen png-er
   som må ligge i cachen, og plass til å vise forskjell på et kontrollert og et
   ukontrollert punkt. Den stiplede ringen er ikke pynt — den er hele
   forskjellen mellom «her er det» og «her omtrent». */
.pwa-pin {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--skog, #2c5a26); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.pwa-pin--usikker {
  width: 14px; height: 14px;
  background: rgba(255,255,255,0.55);
  border: 2px dashed var(--skog, #2c5a26);
  box-shadow: none;
}

/* Egne funn skal skille seg fra destinasjonene i kartet. */
.pwa-funn-ikon {
  width: 16px; height: 16px; border-radius: 50%;
  background: #c2410c; border: 2px solid #fff; box-shadow: 0 0 0 1px #c2410c;
}

@media (max-width: 480px) {
  .pwa-app { height: 78vh; margin: 1rem 0 1.5rem; border-radius: 0; border-left: 0; border-right: 0; }
  .pwa-fane { font-size: 0.7rem; }
}