/* ==========================================================================
   LODD

   Designspråket for Nordiva, tegnet 25. september 2026 og brukt her for
   første gang fra bunnen av. De andre flatene får det som en overstyring
   over et arvet stilark; denne har ingen arv å rydde bort.

   Tre regler bærer hele filen:

     1. SKALAER MED TRINN. Åtte skriftstørrelser, åtte lufttrinn, tre
        radiuser. Ingenting imellom. Det er repetisjonen som leses som
        presisjon, ikke verdiene i seg selv.

     2. KANT I STEDET FOR SKYGGE. En hårstrek bærer strukturen. Skygge er
        forbeholdt det som faktisk flyter over noe annet. Har noe skygge,
        ligger det over noe.

     3. LODDLINJA. Én loddrett hårstrek går gjennom hver skjerm på samme
        sted. Til venstre for den ligger margen med maskinelle verdier, til
        høyre ligger saken. Status er et lite segment som sitter PÅ linja, så
        en ren linje betyr at ingenting krever noe av deg.
   ========================================================================== */

:root {
  --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --t-1: 11px;  --t-1-h: 16px;
  --t-2: 12px;  --t-2-h: 18px;
  --t-3: 13px;  --t-3-h: 20px;
  --t-4: 15px;  --t-4-h: 22px;
  --t-5: 17px;  --t-5-h: 26px;
  --t-6: 20px;  --t-6-h: 26px;
  --t-7: 26px;  --t-7-h: 32px;
  --t-8: 34px;  --t-8-h: 40px;

  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px;
  --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  --r-1: 3px; --r-2: 6px; --r-3: 10px;

  --tid-1: 90ms; --tid-2: 140ms; --tid-3: 180ms;
  --kurve: cubic-bezier(.2, 0, 0, 1);

  /* Margen er 72px bred, linja står på 72. Alt innhold starter 20px inn
     fra den. Tallet gjentas i hver skjerm, så det bor i ett token. */
  --marg: 72px;

  /* Innrykket fra loddlinja til teksten. Ett tall, brukt overalt, så
     margen og innholdet flukter på hver eneste skjerm. */
  --inn: 16px;

  --brand:       #0E1B4D;
  --brand-rgb:   14 27 77;
  --brand-hover: #16265F;
  --brand-blekk: #FFFFFF;

  --paper:  #F7F6F4;
  --flate:  #FFFFFF;
  --flate-2:#F2F1EE;
  --flate-3:#EDEBE7;
  --line:   #E8E6E1;
  --line-2: #DEDBD4;
  --line-3: #C9C5BC;

  --ink:    #14182B;
  --ink-2:  #2E3447;
  --ink-3:  #6B7183;

  --gronn:  #1B6B3A;
  --rod:    #9B2226;
  --amber:  #8A5B00;
  --violett:#5B3D8F;

  --relieff: inset 0 1px 0 rgb(255 255 255 / .70);
  --over:    0 1px 2px rgb(14 27 77 / .08), 0 8px 24px rgb(14 27 77 / .12);
  --fokus:   0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .38);

  /* Skjermen bak video og bilder er mørk i begge temaer. Et klipp skal
     bedømmes på sin egen eksponering, ikke på flaten rundt. */
  --skjerm: #14161C;
}

:root[data-tema="mork"] {
  --brand:       #4C7DFF;
  --brand-rgb:   76 125 255;
  --brand-hover: #6A92FF;
  --brand-blekk: #0A0F1F;

  --paper:  #0A0F1F;
  --flate:  #111728;
  --flate-2:#161D31;
  --flate-3:#1C243A;
  --line:   #1F2739;
  --line-2: #2A3349;
  --line-3: #3A4560;

  --ink:    #E9EEFB;
  --ink-2:  #C3CBE0;
  --ink-3:  #8A93AC;

  --gronn:  #5FD99B;
  --rod:    #F08A85;
  --amber:  #E8B75B;
  --violett:#B79BEC;

  --relieff: inset 0 1px 0 rgb(255 255 255 / .045);
  --over:    0 1px 2px rgb(0 0 0 / .45), 0 8px 24px rgb(0 0 0 / .38);
  --fokus:   0 0 0 1px var(--flate), 0 0 0 3px rgb(var(--brand-rgb) / .45);
  --skjerm: #05091C;
}

/* «hidden» skal bety skjult. Standardregelen taper mot enhver annen
   display-regel, og da står det knapper på skjermen som ikke gjør noe. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
  -webkit-font-smoothing: antialiased;
}

:root[data-tema="mork"] body {
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgb(var(--brand-rgb) / .20), transparent 62%),
    radial-gradient(900px  520px at 92% 108%, rgb(var(--brand-rgb) / .11), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-8); line-height: var(--t-8-h); }
h2 { font-size: var(--t-7); line-height: var(--t-7-h); letter-spacing: -.01em; }
h3 { font-size: var(--t-6); line-height: var(--t-6-h); letter-spacing: -.005em; }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-2); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.etikett {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.svak  { color: var(--ink-3); }
.enhet { color: var(--ink-3); }

/* --- knapper --------------------------------------------------------------
   Ett primitiv, tre roller, to størrelser. Gulvet er 44px, fordi det er det
   en finger trenger. Tetthet hentes fra skrift og kanter, aldri fra å
   krympe trykkflater. */
.knapp {
  font: inherit;
  font-size: var(--t-4);
  font-weight: 600;
  min-height: 44px;
  padding: 0 var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  border: 1px solid var(--brand);
  border-radius: var(--r-2);
  background: var(--brand);
  color: var(--brand-blekk);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tid-1) var(--kurve), border-color var(--tid-1) var(--kurve);
}
.knapp:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.knapp:active { transform: scale(.985); }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }
.knapp.full { width: 100%; }

.knapp.rolig {
  background: var(--flate);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: var(--relieff);
}
.knapp.rolig:hover { background: var(--flate-3); border-color: var(--line-3); }

.knapp.naken {
  background: none;
  border-color: transparent;
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: none;
}
.knapp.naken:hover { background: var(--flate-3); border-color: transparent; }

.knapp.liten { min-height: 44px; padding: 0 12px; font-size: var(--t-3); font-weight: 500; }

.knapperad { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- felt ----------------------------------------------------------------- */
label { display: block; font-size: var(--t-3); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-3); }
input[type=email], input[type=text], input[type=search] {
  font: inherit;
  font-size: var(--t-4);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink);
  box-shadow: var(--relieff);
}
input:focus { outline: none; border-color: var(--brand); box-shadow: var(--fokus); }
input::placeholder { color: var(--ink-3); }
.kodefelt {
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: .3em;
  text-align: center;
  min-height: 56px;
}
.feilmelding { color: var(--rod); font-size: var(--t-3); line-height: var(--t-3-h); margin: var(--s-3) 0 0; }
.feilmelding:empty { display: none; }

/* --- innlogging -----------------------------------------------------------
   Romsligere enn arbeidsflaten med vilje. Dette er en skjerm du ser sjelden,
   gjør én ting på, og ofte på telefon. */
.loggside {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-5);
}
.loggkort {
  width: 100%;
  max-width: 420px;
  padding: var(--s-8) var(--s-7) var(--s-7);
  background: var(--flate);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--over);
}
.loggkort h1 { font-size: var(--t-8); margin-bottom: var(--s-3); }
.loggkort .etikett { margin-bottom: var(--s-5); }
.loggkort .ingress { color: var(--ink-3); font-size: var(--t-4); margin-bottom: var(--s-6); }
.loggkort .felt { margin-bottom: var(--s-5); }

/* --- skallet -------------------------------------------------------------- */
.ramme { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.topplinje {
  height: 52px;
  flex: 0 0 52px;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.merke { font-family: var(--font-display); font-size: var(--t-6); line-height: 1; color: var(--ink); text-decoration: none; }
.topplinje .vokser { flex-grow: 1; }

.ikonknapp {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: var(--relieff);
}
.ikonknapp:hover { color: var(--ink); border-color: var(--line-3); }
.ikonknapp svg { width: 16px; height: 16px; }

.initialer {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand);
  color: var(--brand-blekk);
  font-family: var(--font-mono);
  font-size: var(--t-2);
}

.kropp { flex-grow: 1; display: flex; min-height: 0; }

.sidemeny {
  width: 212px;
  flex: 0 0 212px;
  border-right: 1px solid var(--line-2);
  padding: var(--s-5) var(--s-4) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  overflow-y: auto;
}
.sidemeny .etikett { padding: 0 var(--s-4); margin: var(--s-5) 0 var(--s-3); }
.sidemeny .etikett:first-child { margin-top: 0; }
.sidemeny button, .sidemeny a {
  font: inherit;
  font-size: var(--t-4);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 34px;
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.sidemeny button:hover, .sidemeny a:hover { background: var(--flate-3); color: var(--ink); }
.sidemeny button[aria-current="true"] { background: var(--flate-3); color: var(--ink); font-weight: 500; }
.sidemeny .tall { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-2); color: var(--amber); }
.sidemeny .prikk { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; }

.innhold {
  flex-grow: 1;
  min-width: 0;
  padding: var(--s-7) var(--s-7) var(--s-8);
  position: relative;
  overflow-x: hidden;
}

/* LODDLINJA. Én strek, samme sted på hver skjerm. */
.innhold::before {
  content: '';
  position: absolute;
  left: calc(var(--s-7) + var(--marg));
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}

.skjerm { display: none; }
.skjerm.pa { display: block; }

.sidetopp {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
  padding-left: calc(var(--marg) + var(--inn));
  margin-bottom: var(--s-3);
}
.sidetopp .vokser { flex-grow: 1; }
.ingress {
  padding-left: calc(var(--marg) + var(--inn));
  margin: 0 0 var(--s-6);
  color: var(--ink-3);
  font-size: var(--t-4);
  max-width: 68ch;
}

/* --- rader ----------------------------------------------------------------
   Ett radsystem for hele skallet. Radene deler flate og skilles av en
   hårstrek. De er ikke kort: et kort per rad gjør at øyet må finne
   venstrekanten på nytt for hver linje. */
.bolk { display: flex; align-items: center; min-height: 34px; margin-top: var(--s-6); }
.bolk .etikett { width: var(--marg); flex: 0 0 var(--marg); padding-right: var(--s-4); text-align: right; }
.bolk .hva { flex-grow: 1; padding-left: var(--inn); font-size: var(--t-3); color: var(--ink-3); }

.rad { display: flex; align-items: stretch; min-height: 48px; border-bottom: 1px solid var(--line); }
.rad:first-of-type { border-top: 1px solid var(--line); }

.rad .marg {
  width: var(--marg);
  flex: 0 0 var(--marg);
  position: relative;
  padding: var(--s-4) var(--s-4) 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
/* Segmentet sitter PÅ linja, midtstilt mot radens første tekstlinje. */
.rad .marg .segment {
  position: absolute;
  right: -1px;
  top: var(--s-4);
  width: 2px;
  height: 16px;
  background: var(--ink-3);
}
.seg-venter { background: var(--amber) !important; }
.seg-gjort  { background: var(--gronn) !important; }
.seg-feil   { background: var(--rod) !important; }
.seg-info   { background: var(--line-3) !important; }

.rad .inn {
  flex-grow: 1;
  min-width: 0;
  padding: var(--s-3) 0 var(--s-3) var(--inn);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
a.rad { text-decoration: none; color: inherit; }
a.rad:hover { background: var(--flate-3); }

.rad .tittel { display: block; font-size: var(--t-4); font-weight: 500; color: var(--ink); }
.rad .under  { display: block; font-size: var(--t-3); color: var(--ink-3); }
.rad .vokser { flex-grow: 1; min-width: 0; }
.rad .hoyre  { font-family: var(--font-mono); font-size: var(--t-3); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hode {
  display: flex;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid var(--line-2);
}
.hode .marg { width: var(--marg); flex: 0 0 var(--marg); padding-right: var(--s-4); text-align: right; }
.hode .inn { flex-grow: 1; padding-left: var(--inn); display: flex; align-items: center; gap: var(--s-5); }
.hode span { font-family: var(--font-mono); font-size: var(--t-1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* --- tomme tilstander ----------------------------------------------------- */
.tomt {
  padding: var(--s-6) 0 var(--s-6) calc(var(--marg) + var(--inn));
  color: var(--ink-3);
  font-size: var(--t-4);
}

/* --- statusord ------------------------------------------------------------ */
.status { font-size: var(--t-3); font-weight: 500; white-space: nowrap; }
.status.ok       { color: var(--gronn); }
.status.advarsel { color: var(--amber); }
.status.feil     { color: var(--rod); }
.status.ukjent   { color: var(--ink-3); }

/* --- smal skjerm ----------------------------------------------------------
   Under 900px legger menyen seg som en rullbar rad over innholdet, og margen
   krymper. Loddlinja blir stående: den er strukturen, ikke pynt. */
@media (max-width: 899px) {
  .kropp { flex-direction: column; }
  .sidemeny {
    width: auto;
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--s-2);
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: var(--s-3) var(--s-4);
    overflow-x: auto;
  }
  .sidemeny .etikett { display: none; }
  .sidemeny button, .sidemeny a { white-space: nowrap; }
  .innhold { padding: var(--s-6) var(--s-5) var(--s-8); }
  .innhold::before { left: calc(var(--s-5) + var(--marg)); }
}
@media (max-width: 599px) {
  :root { --marg: 56px; }
  .rad .inn { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  .rad .hoyre { text-align: left; }
}

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

/* Bryteren viser MÅLET, ikke tilstanden: står flaten lyst, ser du månen du
   kan trykke på. En sol i lyst tema ville beskrevet det du allerede ser. */
#temabryter .sol, #temabryter .mane { display: none; }
:root[data-tema="lys"]  #temabryter .mane { display: block; }
:root[data-tema="mork"] #temabryter .sol  { display: block; }

/* KOLONNENE MÅ FLUKTE MED HODET

   Bredden står ett sted, og både hoderaden og radene under bruker den. Ble
   den satt i markupen per rad, ville hodet og innholdet drevet fra hverandre
   første gang noen endret det ene. */
.kol-plan   { width: 180px; flex: 0 0 180px; text-align: right; }
.kol-hvor   { width: 200px; flex: 0 0 200px; text-align: right; }
.kol-helse  { width: 150px; flex: 0 0 150px; text-align: right; }
.kol-venter { width: 48px;  flex: 0 0 48px;  text-align: right; }
.kol-sett   { width: 96px;  flex: 0 0 96px;  text-align: right; }
.kol-bosted { width: 240px; flex: 0 0 240px; font-size: var(--t-3); }
.hode .kol-plan, .hode .kol-hvor, .hode .kol-helse,
.hode .kol-venter, .hode .kol-sett, .hode .kol-bosted { display: block; }

@media (max-width: 899px) {
  .kol-plan, .kol-hvor, .kol-helse, .kol-venter, .kol-sett, .kol-bosted {
    width: auto; flex: 0 0 auto; text-align: left;
  }
  .hode { display: none; }
}

/* Første kolonne i hodet må vokse på samme måte som i radene, ellers
   klemmes de faste kolonnene inn mot venstre og står under feil tall. */
.hode .vokser { flex-grow: 1; min-width: 0; }

/* Modullenkene tegnes inn i en egen beholder, men skal oppføre seg som om
   de sto rett i menyen. Uten dette ble de en søyle inni menyraden på
   telefon, og «Hjem» ble en høy boks ved siden av. */
#modulmeny { display: contents; }

/* Teksten i margen kuttes med ellipse når den er for lang. Den får sin egen
   boks, fordi segmentet som sitter på linja ligger en piksel utenfor margen
   og ville blitt kuttet bort sammen med teksten. */
.margtekst { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }