/* Birken 2027 - designsystem */
:root {
  --bg: #080d1a;
  --flate: #101828;
  --flate2: #16203a;
  --kant: #22304f;
  --kant-sterk: #2f4370;
  --tekst: #e9eefb;
  --tekst-dempet: #8ea3ca;
  --tekst-svak: #5f739a;
  --bla: #3b82f6;
  --gronn: #22c55e;
  --gul: #f5b942;
  --rod: #ef4444;
  --lilla: #8b5cf6;
  --cyan: #06b6d4;
  --radius: 14px;
  --radius-s: 9px;
  --skygge: 0 8px 28px rgba(0,0,0,.45);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tall: ui-rounded, "SF Pro Rounded", var(--font);
}

* { box-sizing: border-box; }
/* Egne display-regler slar nettleserens [hidden] - derfor ma vi si det eksplisitt. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #16264a 0%, var(--bg) 55%) fixed;
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.live button, .nav button { -webkit-user-select: none; user-select: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
a { color: var(--bla); }

.tall { font-family: var(--tall); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- skall ---------- */
.skall { max-width: 780px; margin: 0 auto; padding: 0 16px 110px; }
.topp {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(8,13,26,.82);
  border-bottom: 1px solid var(--kant);
  margin: 0 -16px 18px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: center; gap: 12px;
}
.merke { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-svak); font-weight: 700; }
.topp h1 { font-size: 17px; }
.topp .hoyre { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10,16,32,.93); backdrop-filter: blur(16px);
  border-top: 1px solid var(--kant);
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
.nav button {
  flex: 1; max-width: 130px; background: none; border: none;
  color: var(--tekst-svak); font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 10px; transition: .15s;
}
.nav button .ik { font-size: 17px; line-height: 1; }
.nav button.aktiv { color: var(--tekst); background: var(--flate2); }
.nav button:hover { color: var(--tekst-dempet); }

/* ---------- kort ---------- */
.kort {
  background: linear-gradient(180deg, var(--flate) 0%, #0d1526 100%);
  border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.kort.stram { padding: 12px 14px; }
.kort h2 { font-size: 15px; margin-bottom: 10px; }
.kort .etikett { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-svak); font-weight: 700; margin-bottom: 8px; }

.rad { display: flex; align-items: center; gap: 12px; }
.rad.mellom { justify-content: space-between; }
.stabel { display: flex; flex-direction: column; gap: 10px; }
.rutenett { display: grid; gap: 10px; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .r4 { grid-template-columns: repeat(2, 1fr); } .r3 { grid-template-columns: repeat(2, 1fr); } }

.noekkeltall { background: var(--flate2); border: 1px solid var(--kant); border-radius: var(--radius-s); padding: 11px 12px; }
.noekkeltall .lab { font-size: 10.5px; color: var(--tekst-svak); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.noekkeltall .val { font-size: 22px; margin-top: 2px; }
.noekkeltall .sub { font-size: 11px; color: var(--tekst-dempet); margin-top: 1px; }

/* ---------- knapper ---------- */
.knapp {
  border: 1px solid var(--kant-sterk); background: var(--flate2); color: var(--tekst);
  padding: 11px 16px; border-radius: var(--radius-s); font-weight: 650; font-size: 14px;
  transition: .15s; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.knapp:hover { background: #1c2947; border-color: #3d558c; }
.knapp.primar { background: var(--bla); border-color: var(--bla); color: #fff; }
.knapp.primar:hover { background: #2f74e8; }
.knapp.gronn { background: var(--gronn); border-color: var(--gronn); color: #06240f; }
.knapp.rod { background: var(--rod); border-color: var(--rod); color: #fff; }
.knapp.stille { background: transparent; border-color: var(--kant); color: var(--tekst-dempet); }
.knapp.bred { width: 100%; }
.knapp.stor { padding: 14px 18px; font-size: 15px; }
.knapp:disabled { opacity: .4; cursor: default; }

.pille {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--flate2); color: var(--tekst-dempet);
  border: 1px solid var(--kant);
}
.pille.gronn { background: rgba(34,197,94,.14); color: #7ee2a0; border-color: rgba(34,197,94,.35); }
.pille.gul   { background: rgba(245,185,66,.14); color: #f6cd7c; border-color: rgba(245,185,66,.35); }
.pille.rod   { background: rgba(239,68,68,.14); color: #f79b9b; border-color: rgba(239,68,68,.35); }
.pille.bla   { background: rgba(59,130,246,.14); color: #93c0ff; border-color: rgba(59,130,246,.35); }

/* ---------- skjema ---------- */
.felt { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.felt label { font-size: 12px; font-weight: 650; color: var(--tekst-dempet); }
.felt .hint { font-size: 11.5px; color: var(--tekst-svak); }
input[type=text], input[type=number], input[type=date], select {
  font-size: 16px;            /* under 16px zoomer iOS inn ved fokus */
  background: #0b1222; border: 1px solid var(--kant);
  border-radius: var(--radius-s); padding: 10px 12px; width: 100%;
  transition: .15s;
}
input:focus, select:focus { outline: none; border-color: var(--bla); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
input[type=range] { width: 100%; accent-color: var(--bla); }
.valgrad { display: flex; gap: 8px; flex-wrap: wrap; }
.valg {
  border: 1.5px solid var(--kant); background: var(--flate2); border-radius: var(--radius-s);
  padding: 10px 14px; font-weight: 650; font-size: 13.5px; transition: .15s; text-align: left;
}
.valg:hover { border-color: var(--kant-sterk); }
.valg.valgt { border-color: var(--bla); background: rgba(59,130,246,.16); color: #cfe1ff; }
.valgliste { display: grid; gap: 8px; }
.valgliste .valg { display: flex; flex-direction: column; gap: 2px; }
.valgliste .valg .u { font-weight: 500; font-size: 12px; color: var(--tekst-svak); }

/* ---------- segmentliste ---------- */
.segkort {
  background: var(--flate); border: 1px solid var(--kant); border-left: 4px solid var(--kant-sterk);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px; transition: .18s;
}
.segkort:hover { border-color: var(--kant-sterk); }
.segkort .nr {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.segkort .tittel { font-weight: 700; font-size: 14.5px; }
.segkort .under { font-size: 12px; color: var(--tekst-svak); }
.segkort .detalj { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kant); }
.sitat { background: var(--flate2); border-radius: var(--radius-s); padding: 10px 12px; font-size: 13px; color: var(--tekst-dempet); line-height: 1.55; }

/* ---------- live-visning ---------- */
.live { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; }
.live-topp { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--kant); background: rgba(8,13,26,.9); }
.live-kropp { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.live-venstre { display: flex; flex-direction: column; }
@media (min-width: 880px) {
  .live-kropp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; }
  .live-venstre { min-width: 0; height: 100%; overflow: hidden; border-right: 1px solid var(--kant); }
  .live-hoyre { min-width: 0; }
  .live-venstre #kart { flex: 1 1 auto; height: auto; min-height: 240px; }
  .live-venstre .profilboks { flex: 0 0 auto; padding: 10px 14px 14px; }
  .live-hoyre { height: 100%; overflow-y: auto; }
}
.live-bunn { border-top: 1px solid var(--kant); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,13,26,.95); display: flex; gap: 8px; }

#kart { height: 230px; width: 100%; background: #0d1424; }
/* Kartflisene dempes med opacity mot den morke bakgrunnen i #kart
   - CSS-filter pa flislaget gir kompositeringsproblemer i enkelte nettlesere. */
.leaflet-container { background: #0d1424; font-family: var(--font); }
.leaflet-control-attribution { background: rgba(8,13,26,.75) !important; color: #6b7fa6 !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: #8ea3ca !important; }
.rytter-ikon { display: grid; place-items: center; }
.rytter-ikon .puls { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(59,130,246,.3), 0 3px 10px rgba(0,0,0,.6); }

.wattpanel { padding: 12px 14px 14px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; align-items: stretch; }
.wattstor {
  background: var(--flate2); border: 1px solid var(--kant); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column;
  border-left: 4px solid var(--fasefarge, var(--kant-sterk)); transition: border-color .5s;
}
.wattstor .lab { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tekst-svak); font-weight: 700; }
.wattstor .num { font-size: clamp(40px, 11vw, 62px); line-height: 1; margin: 6px 0 4px; white-space: nowrap; }
.wattstor .ideal { font-size: 13px; color: var(--tekst-dempet); }
.wattstor .kilde { font-size: 13px; font-weight: 650; margin-top: 8px; }
.wattfot { margin-top: auto; padding-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--tekst-dempet); }
.wattfot .vaeske { color: var(--tekst-svak); }
.sidetall { display: grid; grid-template-rows: repeat(4, 1fr); gap: 7px; }
.sidetall > div { background: var(--flate2); border: 1px solid var(--kant); border-radius: var(--radius-s); padding: 7px 11px; }
.sidetall .lab { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-svak); font-weight: 700; }
.sidetall .val { font-size: 19px; }
.sonefelt { transition: border-color .4s; }

/* Pa smal skjerm: watt-boksen over, de fire tallene i rutenett under. */
@media (max-width: 700px) {
  .wattpanel { grid-template-columns: 1fr; }
  .wattstor .num { font-size: clamp(44px, 16vw, 64px); }
  .wattfot { padding-top: 12px; }
  .sidetall { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .fasestripe { flex-wrap: wrap; }
  .fase-tid { margin-left: auto; }
}

/* --- fasestripe: sier tydelig hvor i økta du er --- */
.fasestripe {
  display: flex; align-items: center; gap: 9px; margin: 12px 14px 0;
  padding: 9px 13px; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--fasefarge) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fasefarge) 38%, transparent);
  transition: background .5s, border-color .5s;
}
.fase-prikk { width: 9px; height: 9px; border-radius: 50%; background: var(--fasefarge); flex-shrink: 0; }
.fase-oppvarming .fase-prikk { animation: pust 1.6s ease-in-out infinite; }
@keyframes pust { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
.fase-navn { font-weight: 750; font-size: 13.5px; color: var(--fasefarge); text-transform: uppercase; letter-spacing: .05em; }
.fase-tekst { font-size: 12.5px; color: var(--tekst-dempet); }
.fase-tid { margin-left: auto; font-size: 14px; color: var(--tekst); }

.live { --fasefarge: var(--gul); }
.live.fase-oppvarming { --fasefarge: #F5B942; }
.live.fase-tur { --fasefarge: var(--gronn); }
.live.fase-nedkjoring { --fasefarge: #4A90D9; }
.live.fase-ferdig { --fasefarge: var(--gronn); }
.live.fase-tur .stripe > i { background: var(--gronn); }
.stripe > i { background: var(--fasefarge); }

/* --- blink når løypa starter --- */
.faseblink {
  position: absolute; inset: 0; z-index: 20; display: grid; place-content: center;
  text-align: center; padding: 24px;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.faseblink.vis { opacity: 1; }
.faseblink.start { background: radial-gradient(circle at 50% 45%, rgba(34,197,94,.42), rgba(6,20,12,.97) 68%), rgba(5,14,10,.9); }
.faseblink.ned   { background: radial-gradient(circle at 50% 45%, rgba(74,144,217,.42), rgba(8,18,34,.97) 68%), rgba(6,13,26,.9); }
.blink-ikon { font-size: 56px; }
.blink-tittel { font-size: clamp(24px, 6vw, 32px); font-weight: 800; margin-top: 8px; letter-spacing: -.02em; }
.blink-under { font-size: 14.5px; margin-top: 8px; max-width: 32ch; line-height: 1.55; text-wrap: balance; }
.faseblink.start .blink-tittel { color: #7ee2a0; }
.faseblink.start .blink-under { color: #b6f0cb; }
.faseblink.ned .blink-tittel { color: #9ecbff; }
.faseblink.ned .blink-under { color: #cfe1ff; }

.knapp.sensor { padding: 6px 10px; font-size: 12px; white-space: nowrap; }

/* --- varsel om drikke, mat og passeringer --- */
.varselboks {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 10px;
  padding: 11px 13px; border-radius: var(--radius-s); font-size: 13.5px; font-weight: 600;
  animation: sigInn .35s ease-out;
}
.varselboks .ik { font-size: 19px; flex-shrink: 0; }
.varselboks.drikk { background: rgba(6,182,212,.15); border: 1px solid rgba(6,182,212,.45); color: #9be6f5; }
.varselboks.obs   { background: rgba(245,185,66,.14); border: 1px solid rgba(245,185,66,.45); color: #f7dfae; }
.varselboks.ok    { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: #b6f0cb; }
@keyframes sigInn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.statuslinje { margin: 0 14px 12px; font-size: 12px; color: var(--tekst-svak); display: flex; justify-content: space-between; }

.coachboks { margin: 0 14px 12px; background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.05)); border: 1px solid rgba(59,130,246,.3); border-radius: var(--radius); padding: 12px 14px; }
.coachboks .lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #93c0ff; font-weight: 700; margin-bottom: 3px; }
.coachboks .txt { font-size: 13.5px; line-height: 1.55; color: #dbe7fb; }

.stripe { height: 6px; border-radius: 3px; background: var(--flate2); overflow: hidden; }
.stripe > i { display: block; height: 100%; background: var(--bla); transition: width .4s linear; }

.profilboks { padding: 0 14px 14px; }
svg.profil { display: block; width: 100%; }

.tabell { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabell th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-svak); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--kant); }
.tabell td { padding: 8px; border-bottom: 1px solid rgba(34,48,79,.5); }
.tabell tr:last-child td { border-bottom: none; }
.tabell td.h { text-align: right; font-variant-numeric: tabular-nums; }

.tom { text-align: center; color: var(--tekst-svak); padding: 30px 16px; font-size: 13.5px; }
.varsel { border-radius: var(--radius-s); padding: 11px 13px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.varsel.info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #cfe1ff; }
.varsel.ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #b6f0cb; }
.varsel.advarsel { background: rgba(245,185,66,.1); border-color: rgba(245,185,66,.3); color: #f7dfae; }
.varsel.feil { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #fbc4c4; }

.steg { display: flex; gap: 6px; margin-bottom: 18px; }
.steg > i { flex: 1; height: 4px; border-radius: 2px; background: var(--kant); }
.steg > i.pa { background: var(--bla); }

.ferdigskjerm { text-align: center; padding: 26px 16px; }
.ferdigskjerm .ikon { font-size: 46px; }

.ingress { font-size: 13px; color: var(--tekst-svak); line-height: 1.55; margin: -2px 0 14px; }