:root {
  --natt: #0F1830;
  --kort: #1B2647;
  --kort2: #232F55;
  --sol: #F5B841;
  --solsterk: #FFD166;
  --sky: #6E85B2;
  --tekst: #EDF1F9;
  --dus: #93A3C4;
  --linje: #2E3B63;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
  background: #070C1A;
  font-family: 'Inter', sans-serif;
  color: var(--tekst);
  display:flex; justify-content:center;
  min-height:100vh;
}
.phone {
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, var(--natt) 0%, #131F3E 100%);
  min-height: 100vh;
  display:flex; flex-direction:column;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 500px) {
  body { padding: 16px 0; }
  .phone {
    min-height: calc(100vh - 32px);
    border-radius: 28px;
    border: 1px solid var(--linje);
    overflow:hidden;
  }
}

header {
  padding: calc(18px + env(safe-area-inset-top)) 20px 10px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
h1 {
  font-family:'Space Grotesk', sans-serif;
  font-size: 22px; letter-spacing: 0.12em; font-weight:700;
  flex-shrink:0;
}
h1 .sol-o { color: var(--sol); }
.pos {
  font-size: 12px; color: var(--dus);
  background:none; border:none; font-family:'Inter';
  cursor:pointer; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:4px 0;
}
.pos::before { content:'◉ '; color:var(--sol); }
.pos:focus-visible { outline: 2px solid var(--sol); outline-offset:2px; }

/* Filterrad */
.filtre {
  display:flex; gap:8px; padding: 4px 20px 10px;
  overflow-x:auto; scrollbar-width:none;
}
.filtre::-webkit-scrollbar{display:none;}
.chip {
  flex-shrink:0;
  background: var(--kort);
  border:1px solid var(--linje);
  color: var(--tekst);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px; font-weight:500;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-family:'Inter';
  transition: border-color .15s;
}
.chip:focus-visible { outline: 2px solid var(--sol); outline-offset:2px; }
.chip b { color: var(--sol); font-weight:600; }
.chip small { color: var(--dus); font-weight:400; }

/* Visningstabs */
.viewtabs { display:flex; gap:8px; padding: 0 20px 6px; }
.vtab {
  background:none; border:1px solid transparent; color:var(--dus);
  font-family:'Space Grotesk'; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 14px; border-radius:999px; cursor:pointer;
}
.vtab.aktiv { color:var(--sol); border-color:var(--linje); background:var(--kort); }
.vtab:focus-visible { outline: 2px solid var(--sol); outline-offset:2px; }

/* Radar */
.radar-wrap { padding: 0 20px 4px; position:relative; }
#radar { width:100%; height:auto; display:block; } /* IKKE global svg — knekker Leaflets overlay-SVG */
.ringlabel { font-size: 9px; fill: var(--dus); font-family:'Inter'; }
.kompass { font-family:'Space Grotesk'; font-size: 13px; fill: var(--dus); font-weight:500; }
.sted-dot { cursor:pointer; }
.sted-navn { font-size: 10px; fill: var(--tekst); font-family:'Inter'; font-weight:600; pointer-events:none; }
.sektor { cursor:pointer; }
.ret-chip {
  background:var(--kort); border:1px solid var(--sol); color:var(--sol);
  border-radius:999px; padding:3px 10px; font-size:11px; font-family:'Inter';
  cursor:pointer; letter-spacing:0; text-transform:none;
}

/* Kart */
.kart-wrap { padding: 0 20px 4px; }
#kart {
  width:100%; height: 340px;
  border-radius:16px; border:1px solid var(--linje);
  background:#101A38;
}
.leaflet-container { font-family:'Inter', sans-serif; }
.leaflet-popup-content-wrapper { background:var(--kort2); color:var(--tekst); border-radius:12px; }
.leaflet-popup-tip { background:var(--kort2); }
.leaflet-popup-content { margin:10px 14px; font-size:13px; }
.popup-navn { font-weight:600; font-size:14px; margin-bottom:2px; }
.popup-detalj { color:var(--dus); font-size:12px; }
.popup-nav { display:inline-block; margin-top:8px; background:var(--sol); color:#1A1400; border-radius:8px; padding:6px 10px; font-weight:600; text-decoration:none; font-size:12px; }
.popup-det { background:var(--kort); color:var(--tekst); border:1px solid var(--linje); margin-left:4px; }

.forklaring {
  display:flex; gap:14px; justify-content:center;
  padding: 2px 20px 4px;
  font-size: 11px; color: var(--dus);
}
.forklaring span::before { content:'●'; margin-right:5px; }
.f-sol::before { color: var(--sol); }
.f-del::before { color: #8FA8D9; }
.f-sky::before { color: #3A4A75; }
.osrm-note { text-align:center; font-size:10.5px; color:var(--dus); padding:0 20px 8px; }

.status {
  margin: 0 20px 8px;
  background: var(--kort);
  border:1px solid var(--linje);
  border-radius:12px;
  padding:10px 14px;
  font-size:13px; color:var(--dus);
}
.status.feil { border-color:#a05050; color:#e8b0a8; }
.status button {
  background:none; border:1px solid var(--linje); color:var(--tekst);
  border-radius:8px; padding:4px 10px; margin-left:8px; cursor:pointer; font-family:'Inter'; font-size:12px;
}

/* Resultatliste */
.resultater {
  flex:1;
  padding: 2px 14px 8px;
  display:flex; flex-direction:column; gap:8px;
}
.res-tittel {
  font-family:'Space Grotesk';
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--dus); padding: 4px 6px;
}
#liste { display:flex; flex-direction:column; gap:8px; }
.res {
  background: var(--kort);
  border:1px solid var(--linje);
  border-radius: 16px;
  padding: 13px 14px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer;
  transition: transform .12s, border-color .12s;
}
.res:active { transform: scale(.985); }
.res.valgt { border-color: var(--sol); background: var(--kort2); }
.res .retning {
  width: 46px; height:46px; flex-shrink:0;
  border-radius: 12px;
  background: #101A38;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-family:'Space Grotesk';
}
.res .retning .pil { font-size:16px; color:var(--sol); line-height:1; }
.res .retning .dir { font-size:10px; color:var(--dus); margin-top:2px; }
.res .info { flex:1; min-width:0; }
.res .navn { font-weight:600; font-size:15px; }
.res .detalj { font-size:12px; color:var(--dus); margin-top:2px; }
.res .hoyre { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.res .score { text-align:right; font-family:'Space Grotesk'; }
.res .soltimer { color:var(--solsterk); font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.res .kort-sym { width:24px; height:24px; }
.res .dager { font-size:11px; color:var(--dus); }
.res .naviger {
  background: var(--sol); color:#1A1400;
  border:none; border-radius:9px;
  padding:6px 11px; font-size:12px; font-weight:600;
  font-family:'Space Grotesk'; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.res .naviger:active { transform: scale(.96); }
.tom { text-align:center; color:var(--dus); font-size:13px; padding:24px 10px; }
.tom b { color:var(--tekst); display:block; margin-bottom:6px; font-size:14px; }
.tom .fallback {
  display:inline-block; margin:6px 4px 0;
  background:var(--kort); border:1px solid var(--sol); color:var(--sol);
  border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; font-family:'Inter';
}

.ios-hint {
  margin: 0 20px 8px;
  background: var(--kort); border:1px solid var(--linje); border-radius:12px;
  padding: 10px 14px; font-size:12.5px; color:var(--dus);
}
.ios-hint b { color: var(--tekst); }
.ios-hint button {
  background:none; border:1px solid var(--linje); color:var(--tekst);
  border-radius:8px; padding:4px 10px; margin-left:6px; cursor:pointer; font-family:'Inter'; font-size:12px;
}

.app-foot {
  text-align:center; font-size:10px; color:var(--dus);
  padding: 6px 20px 16px; opacity:.7;
}

/* Filter-ark (bottom sheet) */
.ark-bak {
  position:fixed; inset:0; background:rgba(4,8,18,.6);
  display:flex; align-items:flex-end; justify-content:center; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.ark-bak.open { opacity:1; pointer-events:auto; }
.ark {
  width:100%; max-width:480px;
  background: var(--kort2);
  border-radius: 24px 24px 0 0;
  border:1px solid var(--linje); border-bottom:none;
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y:auto;
  transform: translateY(30px); transition: transform .2s;
}
.ark-bak.open .ark { transform: translateY(0); }
.ark h2 { font-family:'Space Grotesk'; font-size:16px; margin-bottom:12px; }
.ark label { font-size:13px; color:var(--dus); display:block; margin:14px 0 8px; }
.valg { display:flex; gap:8px; flex-wrap:wrap; }
.valg button {
  background: var(--kort);
  border:1px solid var(--linje);
  color:var(--tekst); border-radius:10px;
  padding:9px 14px; font-size:13px; font-family:'Inter'; cursor:pointer;
}
.valg button.aktiv { background:var(--sol); color:#1A1400; border-color:var(--sol); font-weight:600; }
.pos-rad { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.gps-btn {
  background:var(--kort); border:1px solid var(--sol); color:var(--sol);
  border-radius:10px; padding:9px 14px; font-size:13px; font-family:'Inter'; cursor:pointer;
}
#pos-select {
  background:var(--kort); border:1px solid var(--linje); color:var(--tekst);
  border-radius:10px; padding:9px 10px; font-size:13px; font-family:'Inter';
  max-width: 200px;
}
.lukk {
  margin-top:22px; width:100%;
  background:var(--sol); color:#1A1400;
  border:none; border-radius:14px;
  padding:14px; font-size:15px; font-weight:600;
  font-family:'Space Grotesk'; cursor:pointer;
}
/* Stedsdetalj-ark */
.sted-ark { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.sted-topp { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sted-topp h2 { margin-bottom:2px; }
.sa-meta { font-size:12.5px; color:var(--dus); }
.sa-lukk {
  background:var(--kort); border:1px solid var(--linje); color:var(--dus);
  border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:14px; flex-shrink:0;
}
.sa-sol { font-size:12.5px; color:var(--dus); margin-top:8px; }
.sa-sol b { color:var(--sol); font-weight:600; }
.sa-seksjon {
  font-family:'Space Grotesk'; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dus); margin:16px 0 8px;
}
.sa-hint { text-transform:none; letter-spacing:0; font-family:'Inter'; font-size:10.5px; }
.sa-dager { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sa-dager::-webkit-scrollbar{display:none;}
.sa-dag {
  flex:1 0 44px; min-width:44px;
  background:var(--kort); border:1px solid var(--linje); border-radius:12px;
  padding:8px 4px 6px; text-align:center; cursor:pointer; font-family:'Inter';
  color:var(--tekst);
}
.sa-dag.valgt { border-color:var(--sol); background:var(--kort2); }
.sa-dag .d-lab { font-size:10px; color:var(--dus); margin-bottom:3px; }
.sa-dag .d-sym { width:20px; height:20px; display:block; margin:0 auto 3px; }
div.d-sym { height:20px; }
.sa-dag .d-bar { height:44px; display:flex; align-items:flex-end; justify-content:center; }
.sa-dag .d-bar .stack { width:14px; border-radius:4px 4px 2px 2px; overflow:hidden; display:flex; flex-direction:column-reverse; }
.sa-dag .d-bar .b-clear { background:var(--sol); }
.sa-dag .d-bar .b-fair { background:rgba(245,184,65,.38); }
.sa-dag .d-bar .b-null { width:14px; height:3px; background:var(--linje); border-radius:2px; }
.sa-dag .d-timer { font-family:'Space Grotesk'; font-size:12px; font-weight:700; color:var(--solsterk); margin-top:4px; }
.sa-dag .d-timer.ingen { color:var(--dus); font-weight:400; }
.sa-dag .d-temp { font-size:10px; color:var(--dus); margin-top:1px; }
.sa-timer { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; min-height:86px; }
.sa-timer::-webkit-scrollbar{display:none;}
.sa-time {
  flex:0 0 46px; text-align:center; background:var(--kort);
  border:1px solid var(--linje); border-radius:10px; padding:6px 2px;
}
.sa-time.sol-ren { border-color:rgba(245,184,65,.55); }
.sa-time .t-kl { font-size:10px; color:var(--dus); }
.sa-time img { width:26px; height:26px; margin:3px 0 1px; }
.sa-time .t-temp { font-size:11px; font-weight:600; }
.sa-time .t-mm { font-size:9.5px; color:#8FA8D9; min-height:12px; }
.sa-laster { color:var(--dus); font-size:12.5px; padding:16px 4px; }
.sa-knapper { display:flex; gap:8px; margin-top:16px; }
.sa-naviger {
  flex:1; text-align:center; background:var(--sol); color:#1A1400;
  border-radius:12px; padding:12px; font-family:'Space Grotesk'; font-weight:600;
  font-size:14px; text-decoration:none;
}
.sa-sek {
  background:var(--kort); border:1px solid var(--linje); color:var(--tekst);
  border-radius:12px; padding:12px 14px; font-family:'Inter'; font-size:13px;
  cursor:pointer; text-decoration:none;
}

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