/* HULC-appen. Farger, skrift og etiketter som hulc.no: krem, mørk grønn, EB Garamond til overskrifter, Archivo til tekst.
 * v0.4: mindre tekst og mer luft, etiketter (små store bokstaver, som «TJENESTE 01» på nettsiden) og én menyknapp i toppen. */

:root {
  --krem: #f4efe4;
  --krem-lys: #f9f6ee;
  --gronn: #1c3a2b;
  --gronn-lys: #2b5540;
  --gronn-55: rgba(28, 58, 43, 0.55);
  --gronn-70: rgba(28, 58, 43, 0.7);
  --blekk: #22271f;
  --blekk-80: rgba(34, 39, 31, 0.8);
  --blekk-70: rgba(34, 39, 31, 0.7);
  --blekk-50: rgba(34, 39, 31, 0.5);
  --strek: rgba(28, 58, 43, 0.12);
  --strek-sterk: rgba(28, 58, 43, 0.3);
  --gul: #b7791f;
  --gul-bakgrunn: #fbf0d6;
  --rod: #a23b2a;
  --rod-bakgrunn: #f8e4df;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bredde: 1080px;
  --kant: 24px;
  /* Toppen og bunnen følger innholdet: logoen står over venstrekanten av innholdet, også på brede skjermer */
  --kant-bred: max(var(--kant), calc((100% - var(--bredde)) / 2 + var(--kant)));

  /* Det visuelle laget (v1.1, «Svevende lag» nederst i fila): alle tokens for form, dybde, glass og bevegelse står her,
   * så stilen er lik overalt. Fargene over er urørt. */
  --radius: 8px;            /* knapper og små bokser */
  --radius-kort: 20px;      /* kort, fliser, paneler og grafer */
  --radius-pille: 999px;    /* pilleknapper */
  --glass: rgba(252, 250, 244, 0.66);        /* toppen og menyen, med blur bak (bare de: blur over en bakgrunn som beveger seg koster hver bilderute) */
  --glass-kort: rgba(252, 250, 244, 0.74);   /* kortene på forsiden, uten blur */
  --glass-meny: rgba(251, 249, 243, 0.96);   /* menyen: nesten tett, så lenkene er tydelige over det som ligger bak (Noah 25.09) */
  --glass-tett: rgba(252, 250, 244, 0.82);   /* fliser og paneler, uten blur (sparer telefonen) */
  --glass-kant: rgba(255, 255, 255, 0.72);   /* den tynne lyse kanten øverst på et kort */
  --glass-kant-ytre: rgba(28, 58, 43, 0.07);
  --glass-blur: 18px;
  /* Lagdelte skygger: flere myke skygger med lav opasitet, aldri én hard. Loft = kortet er løftet (peker eller trykk). */
  --skygge-hvile: 0 1px 1px rgba(28, 58, 43, 0.03), 0 2px 6px rgba(28, 58, 43, 0.04), 0 14px 30px -8px rgba(28, 58, 43, 0.12), 0 36px 60px -28px rgba(28, 58, 43, 0.16);
  --skygge-loft: 0 1px 2px rgba(28, 58, 43, 0.03), 0 6px 14px rgba(28, 58, 43, 0.06), 0 24px 48px -10px rgba(28, 58, 43, 0.18), 0 56px 90px -30px rgba(28, 58, 43, 0.2);
  --skygge-liten: 0 1px 2px rgba(28, 58, 43, 0.05), 0 6px 16px -4px rgba(28, 58, 43, 0.12);
  --skygge-knapp: 0 1px 2px rgba(28, 58, 43, 0.12), 0 8px 20px -8px rgba(28, 58, 43, 0.4);
  /* Bevegelse: ease-ut er «kommer til ro», fjaer har et lite overslag (spring). Varigheter i ms. */
  --ease-ut: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fjaer: cubic-bezier(0.34, 1.35, 0.64, 1);
  --tid-kort: 160ms;
  --tid: 420ms;
  --tid-lang: 820ms;
  --aurora-syklus: 34s;
  /* Auroraen: fire store, myke flater på kremen. Sand, salvie (fra den grønne), gull (fra den gule) og et lyst felt. */
  --aurora-1: rgba(226, 196, 152, 0.62);
  --aurora-2: rgba(132, 168, 142, 0.32);
  --aurora-3: rgba(214, 168, 88, 0.24);
  --aurora-4: rgba(255, 253, 247, 0.95);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--krem);
  color: var(--blekk);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--gronn); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--gronn); margin: 0; line-height: 1.15; text-wrap: balance; }
/* Ikke ett ord alene på siste linje i avsnitt og setninger */
p, .sporsmal, .scenario-tekst, .flis .under, .kort .stort small, .begreper dd { text-wrap: pretty; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin: 0 0 14px; color: var(--blekk-70); }
button { font-family: var(--sans); font-size: 13px; cursor: pointer; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--strek); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gronn-55); }

.skjult { display: none !important; }

/* Etikett: små store bokstaver over en overskrift eller et tall, som på hulc.no */
.etikett, .flis .navn {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--gronn-55);
}
.etikett { margin-bottom: 10px; }
.del-etikett { margin: 44px 0 16px; }

/* Topplinje: logoen og én menyknapp. Menyen har plass til alle leveransene. */
.topp {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--kant-bred); border-bottom: 1px solid var(--strek); background: var(--krem);
  position: sticky; top: 0; z-index: 5;
}
.logotype { display: inline-flex; align-items: center; font-family: var(--serif); font-weight: 500; letter-spacing: 0.35em; font-size: 14px; color: var(--gronn); text-decoration: none; }
.logotype img { display: block; height: 20px; width: auto; }
/* Menyknappen er en tydelig grønn knapp, «Vår økonomi», så det synes at appen har flere sider (Noah 25.09.2026) */
.meny-knapp { display: inline-flex; align-items: center; gap: 8px; background: var(--gronn); color: var(--krem); border: 1px solid var(--gronn); border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; }
.meny-knapp:hover { background: var(--gronn-lys); border-color: var(--gronn-lys); }
.meny-knapp[aria-expanded="true"] { background: transparent; color: var(--gronn); border-color: var(--strek-sterk); }
.meny-knapp svg { display: block; width: 16px; height: 16px; flex: none; }
.meny {
  position: absolute; top: calc(100% + 8px); right: var(--kant-bred); width: 280px;
  background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px;
  box-shadow: 0 14px 34px rgba(28, 58, 43, 0.12); padding: 20px 22px 14px;
}
.meny .etikett { margin-bottom: 6px; }
.meny a { display: block; padding: 9px 0; font-size: 15px; color: var(--blekk-70); text-decoration: none; }
.meny a:hover { color: var(--gronn); }
.meny a.aktiv { color: var(--gronn); font-weight: 500; }
/* Leveransene som ikke er klare: lysere, med «Kommer» til høyre */
.meny a.kommer { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--blekk-50); }
.meny a.kommer:hover, .meny a.kommer.aktiv { color: var(--gronn-70); }
.meny a.kommer .etikett { margin: 0; font-size: 10.5px; font-weight: 500; }
/* Legg på hjemskjermen: nederst i menyen, med en strek over. Hjelpeteksten vises når nettleseren ikke kan installere selv. */
.meny-hjem { border-top: 1px solid var(--strek); margin-top: 8px; padding-top: 4px; }
.meny-hjem button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--gronn); line-height: 1.4; cursor: pointer; }
.meny-hjem button:hover { color: var(--gronn-lys); }
.hjem-hjelp { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--blekk-70); text-wrap: pretty; }
.meny select { width: 100%; margin: 0 0 8px; font-family: var(--sans); font-size: 14px; border: 1px solid var(--strek-sterk); background: #fff; color: var(--blekk); padding: 6px 8px; border-radius: 4px; }
/* Enkle lenker i toppen (administratorvinduet og «Prøv appen») */
.topp-kunde { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--blekk-70); }
.topp-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topp-nav a { font-size: 14px; color: var(--blekk-70); text-decoration: none; padding: 6px 0 6px 12px; }
.topp-nav a.aktiv, .topp-nav a:hover { color: var(--gronn); }

/* Sider */
.innhold { max-width: var(--bredde); margin: 0 auto; padding: 44px var(--kant) 80px; }
.hero { background: var(--gronn); color: var(--krem); padding: 80px 0 72px; text-align: center; }
.hero .innhold { padding-top: 0; padding-bottom: 0; }
.hero + .innhold { padding-top: 56px; }
.hero h1, .hero h2 { color: var(--krem); }
/* Kundenavnet tilpasses lengden (app.js, tilpassNavn): kort navn gir stor skrift, langt navn mindre. Tallene er største og
 * minste skrift i punkter og hvor stor del av bredden navnet kan ta. */
.hero h1 { font-size: 30px; letter-spacing: 0.01em; --navn-maks: 32; --navn-min: 20; --navn-andel: 0.5; }
.hero .etikett { color: rgba(244, 239, 228, 0.6); margin: 16px 0 0; }
.hero .etikett.demo { margin: 0 0 14px; }
.hero p { color: rgba(244, 239, 228, 0.8); }
.sidehode { margin-bottom: 32px; }
.sidehode p { margin: 8px 0 0; max-width: 640px; }
.sidehode p.fortelling { font-size: 16px; line-height: 1.6; color: var(--blekk-80); max-width: 680px; margin-top: 14px; }
/* Siden for en leveranse som kommer: spørsmålet i kursiv, som på kortene og på hulc.no */
.sidehode p.kommer-sporsmal { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--gronn-70); max-width: 560px; margin-top: 14px; }
.sidenav { display: flex; gap: 0 4px; flex-wrap: wrap; margin: 0 0 32px; border-bottom: 1px solid var(--strek); }
.sidenav a { text-decoration: none; color: var(--blekk-70); padding: 10px 14px; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sidenav a:first-child { padding-left: 2px; }
.sidenav a.aktiv { color: var(--gronn); border-bottom-color: var(--gronn); font-weight: 500; }

/* Kort på forsiden: etikett, tittel og spørsmål, så fortellingen, så tallet og statuslinjen. Luft mellom gruppene. */
.kort-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.kort { background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px; padding: 32px 32px 26px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.kort:hover { border-color: var(--strek-sterk); }
.kort h3 { font-size: 20px; }
.kort .sporsmal { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--gronn-70); font-style: italic; margin: -4px 0 8px; }
.kort .fortelling { font-size: 14px; color: var(--blekk-80); margin: 0; line-height: 1.65; }
.kort .fortelling + .fortelling { margin-top: -4px; }
.kort .varsel { margin: 4px 0 0; font-size: 13px; }
.kort .stort { font-family: var(--serif); font-size: 26px; color: var(--gronn); line-height: 1.1; margin-top: auto; padding-top: 16px; font-variant-numeric: tabular-nums; }
.kort .stort small { display: block; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--blekk-50); margin-top: 6px; }
.kort .status { font-size: 11.5px; line-height: 1.5; color: var(--blekk-50); border-top: 1px solid var(--strek); padding-top: 14px; margin-top: 6px; }
/* Knappen nederst i kortet: viser at leveransen har egne sider bak forsiden. Hele kortet er lenken. */
.kort .kort-knapp { align-self: flex-start; margin-top: 4px; padding: 10px 18px; font-size: 14px; }
.kort:hover .kort-knapp { background: var(--gronn-lys); }
@media (max-width: 560px) { .kort .kort-knapp { align-self: stretch; text-align: center; } }

/* Leveransene som ikke er publisert ennå: en rolig liste under kortene, ikke egne kort */
.kommer-liste { margin-top: 56px; }
.kommer-liste ul { list-style: none; margin: 0; padding: 0; }
.kommer-liste li { display: grid; grid-template-columns: 170px 1fr; gap: 4px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--strek); }
.kommer-liste li:last-child { border-bottom: 1px solid var(--strek); }
.kommer-liste .navn { font-family: var(--serif); font-size: 16px; color: var(--gronn-70); }
.kommer-liste .sporsmal { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--blekk-50); }

/* Fliser med tall: etikett, tall og en liten linje under */
/* Hver flis har tre rader (etikett, tall, linje under) som deler høyde med flisene ved siden av (subgrid), så tallene står
 * på linje selv når en etikett går over to linjer. */
.fliser { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 36px; }
.flis { background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px; padding: 18px 20px 16px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.flis .navn { font-size: 11px; margin-bottom: 8px; align-self: end; }
.flis .tall { font-family: var(--serif); font-size: 26px; color: var(--gronn); line-height: 1.1; font-variant-numeric: tabular-nums; }
.flis .tall.negativ { color: var(--rod); }
.flis .under { font-size: 12px; line-height: 1.45; color: var(--blekk-50); margin-top: 6px; }

/* Knapper */
.knapp { display: inline-block; background: var(--gronn); color: var(--krem); border: 1px solid var(--gronn); padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; text-decoration: none; line-height: 1.4; }
.knapp:hover { background: var(--gronn-lys); }
.knapp.sekundaer { background: transparent; color: var(--gronn); border-color: var(--strek-sterk); }
.knapp.sekundaer:hover { background: rgba(28, 58, 43, 0.06); border-color: var(--gronn); }
.knapp.liten { padding: 5px 11px; font-size: 12px; }
.knapp-rad { display: flex; gap: 12px 14px; flex-wrap: wrap; margin: 12px 0 36px; align-items: center; }
.scenario { display: inline-flex; border: 1px solid var(--gronn); border-radius: 4px; overflow: hidden; }
.scenario button { background: transparent; color: var(--gronn); border: 0; padding: 8px 18px; font-weight: 500; line-height: 1.4; border-right: 1px solid var(--gronn); }
.scenario button:last-child { border-right: 0; }
.scenario button.aktiv { background: var(--gronn); color: var(--krem); }
/* Linjen som sier hva det valgte scenarioet betyr. Den bytter med knappen. */
.scenario-tekst { font-size: 13.5px; line-height: 1.5; color: var(--blekk-70); max-width: 520px; }

/* Varsler og paneler */
.varsel { border-left: 3px solid var(--gul); background: var(--gul-bakgrunn); padding: 12px 16px; margin: 0 0 28px; font-size: 14px; line-height: 1.55; border-radius: 0 4px 4px 0; }
.varsel.rod { border-left-color: var(--rod); background: var(--rod-bakgrunn); }
.varsel.ok { border-left-color: var(--gronn); background: rgba(28, 58, 43, 0.06); }
/* Den røde stripen når appen fant feil i tallene (H.valider), med feilene bak «Hva er feil?» */
.varsel.stripe details { margin-top: 6px; font-size: 13px; color: var(--blekk-70); }
.varsel.stripe summary { cursor: pointer; color: var(--rod); }
.varsel.stripe ul { margin: 6px 0 0; padding-left: 18px; }
.varsel.stripe li + li { margin-top: 4px; }
.kort .varsel.stripe { margin: -4px 0 4px; }
.panel { background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px; padding: 24px 26px; margin: 0 0 32px; }
.panel h3 { font-size: 18px; margin-bottom: 12px; }
.panel .lukk { float: right; margin: -2px 0 0 16px; }
.linje { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--strek); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.linje:last-child { border-bottom: 0; }
.linje span:first-child { color: var(--blekk-80); }
.linje span:last-child { font-weight: 500; color: var(--gronn); white-space: nowrap; }
/* Forutsetninger (forsiden): hvert notat har emnet som overskrift og luft rundt seg (v1.0) */
.notater { margin-top: 48px; padding-top: 28px; padding-bottom: 8px; }
.notater h3 { font-size: 20px; margin-bottom: 6px; }
.notat { padding: 20px 0 18px; border-bottom: 1px solid var(--strek); }
.notat:last-child { border-bottom: 0; }
.notat h4 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.notat p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--blekk-80); max-width: 680px; overflow-wrap: anywhere; }
.notat p + p { margin-top: 10px; }
/* Slik er scenarioene regnet (Sammenlign): forklaringen fra Excel, og driverne i en tabell under */
.forklaring { font-size: 14px; line-height: 1.6; color: var(--blekk-80); margin: 0 0 12px; max-width: 720px; }
.forklaring b { font-weight: 500; color: var(--gronn); }
.forklaring + .sammenligning { margin-top: 22px; margin-bottom: 0; }
.panel .sammenligning .smal .panel { background: transparent; border: 0; border-top: 1px solid var(--strek); border-radius: 0; padding: 14px 0 4px; margin: 0; }
.panel .sammenligning .smal .panel h3 { font-size: 16px; margin-bottom: 4px; }
/* Egne anslag i modellen (forsiden): en knapp under notatene som åpner listen */
.anslag { margin: 8px 0 0; }
.notater + .anslag { margin-top: -8px; }
.anslag > summary { list-style: none; cursor: pointer; font-size: 14px; padding: 10px 18px; }
.anslag > summary::-webkit-details-marker { display: none; }
.anslag > summary::after { content: " ↓"; }
.anslag[open] > summary::after { content: " ↑"; }
.anslag > .panel { margin-top: 16px; }
.anslag > .panel > p { font-size: 14px; max-width: 680px; }
.anslag .etikett { margin: 22px 0 4px; }
.anslag-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.anslag-liste li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--strek); font-size: 14px; line-height: 1.5; }
.anslag-liste li:last-child { border-bottom: 0; }
.anslag-liste .navn { color: var(--blekk-80); }
.anslag-liste .verdi { font-weight: 500; color: var(--gronn); white-space: nowrap; font-variant-numeric: tabular-nums; }
.anslag-liste .status { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gul); min-width: 72px; text-align: right; }
.anslag-liste .status.bekreftet { color: var(--gronn-55); }
.merk { font-size: 12.5px; line-height: 1.55; color: var(--blekk-50); }

/* Grafer */
.graf { position: relative; background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px; padding: 18px 14px 10px; margin: 0 0 32px; }
.graf svg { width: 100%; height: auto; display: block; font-family: var(--sans); touch-action: pan-y; cursor: crosshair; }
.graf svg:focus { outline: none; }
.graf svg:focus-visible { outline: 2px solid var(--gronn); outline-offset: 2px; }
.graf .tegn { font-size: 12px; color: var(--blekk-70); display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 12px 8px 4px; }
.graf .tegn i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; }
.graf .tegn i.bokfort { height: 12px; width: 14px; background: rgba(28, 58, 43, 0.12); border: 0; }
.graf-tips { position: absolute; z-index: 2; pointer-events: none; background: #fff; border: 1px solid var(--strek-sterk); border-radius: 4px; box-shadow: 0 4px 14px rgba(28, 58, 43, 0.12); padding: 8px 12px; font-size: 12.5px; line-height: 1.45; max-width: calc(100% - 8px); width: max-content; font-variant-numeric: tabular-nums; }
.graf-tips .hode { color: var(--blekk-50); margin-bottom: 4px; }
.graf-tips .rad { display: flex; align-items: center; gap: 8px; }
.graf-tips .rad i { display: inline-block; width: 14px; height: 0; flex: none; }
.graf-tips .rad b { font-weight: 500; color: var(--blekk); min-width: 86px; text-align: right; white-space: nowrap; flex: none; }
.graf-tips .rad span { color: var(--blekk-70); }
.tabell-ramme { overflow-x: auto; margin-bottom: 8px; }

/* Administrator */
.admin-steg { background: var(--krem-lys); border: 1px solid var(--strek); border-radius: 4px; padding: 24px 26px; margin-bottom: 24px; }
.admin-steg h3 { margin-bottom: 12px; }
.felt { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; align-items: center; max-width: 640px; font-size: 14px; }
.felt input[type="text"], .felt input[type="date"] { font-family: var(--sans); font-size: 14px; padding: 6px 8px; border: 1px solid var(--strek-sterk); border-radius: 4px; background: #fff; }
.slipp { border: 2px dashed var(--strek-sterk); border-radius: 4px; padding: 28px; text-align: center; color: var(--blekk-70); background: transparent; }
.slipp.over { border-color: var(--gronn); background: rgba(28, 58, 43, 0.06); }
.kode { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; background: rgba(28, 58, 43, 0.06); padding: 2px 6px; }
/* Appens sjekker (V1–V9) for filen som skal publiseres, og feil i listen over publiseringer */
.sjekk-liste { margin: 8px 0 10px; padding-left: 18px; }
.sjekk-liste li + li { margin-top: 4px; }
.sjekk-liste b { font-weight: 500; margin-right: 4px; }
.admin-steg td .negativ { color: var(--rod); cursor: help; }

.bunn { border-top: 1px solid var(--strek); padding: 24px var(--kant-bred) 28px; font-size: 12px; line-height: 1.55; color: var(--blekk-50); display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.bunn a { color: var(--blekk-70); }

/* Sammenligning: tabell på bred skjerm, ett kort per kolonne på telefon */
.sammenligning .smal { display: none; }
.bare-smal { display: none; }
.sammenligning { margin-bottom: 20px; }

/* Info: hva ordene betyr */
.info-del { margin: 0 0 52px; scroll-margin-top: 80px; }
.info-del h3 { margin-bottom: 10px; }
.info-del > p { max-width: 680px; font-size: 14px; }
.begreper { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; margin: 16px 0 0; border-top: 1px solid var(--strek); font-size: 14px; line-height: 1.55; }
.begreper dt, .begreper dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--strek); }
.begreper dt { font-weight: 500; color: var(--gronn); padding-right: 16px; }
.begreper dd { color: var(--blekk-70); max-width: 680px; }

/* Telefonrammen (index.html?telefon, brukt av telefon.html): uten rullefelt, som på en telefon */
html.telefonramme, html.telefonramme * { scrollbar-width: none; }
html.telefonramme ::-webkit-scrollbar { display: none; }

@media (max-width: 720px) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .hero { padding: 60px 0 54px; }
  .hero h1 { font-size: 26px; --navn-maks: 28; --navn-min: 19; --navn-andel: 0.6; }
  .flis .tall { font-size: 23px; }
  .felt { grid-template-columns: 1fr; }
  /* Menyen dekker bredden under toppen, som på hulc.no */
  .meny { top: 100%; left: 0; right: 0; width: auto; border: 0; border-top: 1px solid var(--strek); border-bottom: 1px solid var(--strek); border-radius: 0; background: var(--krem); box-shadow: 0 16px 28px rgba(28, 58, 43, 0.1); padding: 18px var(--kant) 18px; }
  .meny a, .meny-hjem button { font-size: 16px; padding: 10px 0; }
  .hjem-hjelp { font-size: 14px; }
}

/* Telefon */
@media (max-width: 560px) {
  :root { --kant: 20px; }
  .topp { padding-top: 14px; padding-bottom: 14px; }
  .innhold { padding-top: 32px; padding-bottom: 64px; }
  .hero { padding: 56px 0 50px; }
  .hero h1 { --navn-maks: 26; --navn-min: 18; --navn-andel: 0.62; }
  .hero .etikett { margin-top: 14px; font-size: 11px; }
  .hero + .innhold { padding-top: 40px; }
  .sidehode { margin-bottom: 28px; }
  .sidehode p.fortelling { font-size: 15px; }
  .sidehode p.kommer-sporsmal { font-size: 17px; }
  /* Fire faner (Likviditet fra 14.2) skal få plass på én linje på telefon: luften står mellom fanene, ikke inni dem */
  .sidenav { margin-bottom: 28px; gap: 0 16px; }
  .sidenav a, .sidenav a:first-child { padding: 10px 0; }
  .kort-rad { gap: 24px; }
  .kort { padding: 28px 24px 22px; }
  .kort h3 { font-size: 19px; }
  .kort .sporsmal { font-size: 14.5px; }
  .kort .fortelling { font-size: 13.5px; }
  .kort .stort { font-size: 24px; }
  .kommer-liste { margin-top: 44px; }
  .kommer-liste li { grid-template-columns: 1fr; gap: 2px; }
  /* To fliser i bredden, så grafen kommer høyere opp */
  .fliser { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
  .flis { padding: 14px 14px 12px; }
  .flis .navn { font-size: 10.5px; margin-bottom: 6px; }
  .flis .tall { font-size: 21px; }
  .flis .under { font-size: 11.5px; margin-top: 4px; }
  .knapp-rad { margin-bottom: 32px; }
  /* Scenarioknappene fyller bredden, tre like store med mellomrom, og linjen om scenarioet står under */
  .scenario { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; border: 0; border-radius: 0; overflow: visible; }
  .scenario button, .scenario button:last-child { border: 1px solid var(--gronn); border-radius: 4px; padding: 10px 0; font-size: 14px; }
  .scenario-rad { row-gap: 14px; }
  .scenario.tiltak { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 20px 20px; }
  .sammenligning .bred { display: none; }
  .sammenligning .smal { display: block; }
  .bare-smal { display: inline; }
  .sammenligning .panel { margin-bottom: 14px; padding: 18px 20px; }
  .begreper { display: block; }
  .begreper dt { border-bottom: 0; padding-bottom: 2px; }
  .begreper dd { padding-top: 0; }
  .notater { margin-top: 40px; padding-top: 24px; }
  .notat h4 { font-size: 16.5px; }
  .notat p { font-size: 14px; }
  .anslag > summary { display: block; text-align: center; }
  .anslag-liste li { grid-template-columns: 1fr auto; }
  .anslag-liste .navn { grid-column: 1 / -1; }
  .anslag-liste .status { text-align: right; }
  .bunn { padding-top: 20px; padding-bottom: 24px; }
}

/* ============================================================================================================
 * Svevende lag (v1.1). Bare det visuelle: bakgrunn, form, dybde, glass og bevegelse. Ingen tekst eller tall.
 * Reglene står sist så de vinner over reglene over uten å endre dem. Tokens står i :root øverst.
 * Alt som beveger seg animerer bare transform og opacity, og skrus av med prefers-reduced-motion.
 * ============================================================================================================ */

/* Auroraen: en fast bakgrunn med fire store, myke fargeflater som driver sakte. Radial-gradient med gjennomsiktig
 * kant gir mykheten uten filter: blur, så telefonen slipper å regne uskarphet hver bilderute. Parallaks: laget flyttes
 * litt saktere enn innholdet (--rull settes av effekter.js). */
body { background: var(--krem); }
.aurora { position: fixed; inset: -12vh -10vw; z-index: -1; pointer-events: none; overflow: hidden; transform: translate3d(0, calc(var(--rull, 0) * -0.10px), 0); }
.aurora i { position: absolute; display: block; width: 78vmax; height: 78vmax; border-radius: 50%; will-change: transform; animation: aurora-drift var(--aurora-syklus) ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -28vmax; top: -30vmax; background: radial-gradient(closest-side, var(--aurora-1), transparent 72%); animation-duration: calc(var(--aurora-syklus) * 1); }
.aurora i:nth-child(2) { right: -34vmax; top: 4vmax; background: radial-gradient(closest-side, var(--aurora-2), transparent 72%); animation-duration: calc(var(--aurora-syklus) * 1.3); animation-delay: -9s; --dx: -14vmax; --dy: 10vmax; }
.aurora i:nth-child(3) { left: -8vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--aurora-3), transparent 72%); animation-duration: calc(var(--aurora-syklus) * 1.15); animation-delay: -21s; --dx: 16vmax; --dy: -8vmax; }
.aurora i:nth-child(4) { left: 24vw; top: 18vh; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, var(--aurora-4), transparent 70%); animation-duration: calc(var(--aurora-syklus) * 0.9); animation-delay: -5s; --dx: -10vmax; --dy: 12vmax; }
@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(calc(var(--dx, 12vmax) * 0.6), calc(var(--dy, 8vmax) * 0.4), 0) scale(1.08); }
  100% { transform: translate3d(var(--dx, 12vmax), var(--dy, 8vmax), 0) scale(1.14); }
}
/* Auroraen ligger under alt innhold (z-index -1, over bakgrunnen til body), så den virker på alle sidene uten mer oppsett.
 * index.html får den fra effekter.js, telefon.html og admin.html har den rett i HTML-en. */

/* Toppen svever over innholdet som et glasslag: det som ruller forbi under, skimtes gjennom. */
.topp { background: rgba(244, 239, 228, 0.66); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 var(--glass-kant-ytre), 0 8px 24px -16px rgba(28, 58, 43, 0.18); }
.meny-knapp { border-radius: var(--radius-pille); padding: 9px 18px; box-shadow: var(--skygge-knapp); transition: transform var(--tid-kort) var(--ease-ut), box-shadow var(--tid) var(--ease-ut), background-color var(--tid-kort), color var(--tid-kort), border-color var(--tid-kort); }
.meny-knapp:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(28, 58, 43, 0.12); }
.meny-knapp[aria-expanded="true"] { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.7); box-shadow: var(--skygge-liten); }
.meny { border-radius: var(--radius-kort); border: 1px solid var(--glass-kant); background: var(--glass-meny); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); box-shadow: var(--skygge-loft), inset 0 1px 0 rgba(255, 255, 255, 0.8); transform-origin: top right; }
.meny select { border-radius: var(--radius); }
.meny-hjem { border-top-color: rgba(28, 58, 43, 0.1); }

/* Forsiden: kundens navn i det grønne feltet får et mykt lys ovenfra, så feltet har dybde */
.hero { background: radial-gradient(120% 110% at 50% -10%, #2a5a40 0%, var(--gronn) 58%, #163022 100%); position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.08); }

/* Kortene svever: glass (uten blur, se --glass), tynn lys kant øverst, lagdelt skygge, og de løfter seg når man peker eller trykker. */
.kort { border-radius: var(--radius-kort); background: var(--glass-kort); border: 1px solid var(--glass-kant); box-shadow: var(--skygge-hvile), inset 0 1px 0 rgba(255, 255, 255, 0.85); outline: 1px solid var(--glass-kant-ytre); outline-offset: -1px; transition: transform var(--tid) var(--ease-fjaer), box-shadow var(--tid) var(--ease-ut), border-color var(--tid-kort); will-change: transform; }
@media (hover: hover) {
  .kort:hover { transform: translateY(-5px); box-shadow: var(--skygge-loft), inset 0 1px 0 rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.9); }
}
.kort:active { transform: translateY(-1px) scale(0.992); transition-duration: var(--tid-kort); }
.kort .status { border-top-color: rgba(28, 58, 43, 0.09); }
.kort .kort-knapp { border-radius: var(--radius-pille); padding: 11px 22px; box-shadow: var(--skygge-knapp); transition: transform var(--tid-kort) var(--ease-ut), background-color var(--tid-kort); }
.kort:active .kort-knapp { transform: scale(0.98); }

/* Fliser, paneler og grafer: samme form og lys kant, tettere glass uten blur (mange på én side). */
.flis, .panel, .graf, .admin-steg { border-radius: var(--radius-kort); background: var(--glass-tett); border: 1px solid var(--glass-kant); box-shadow: var(--skygge-liten), inset 0 1px 0 rgba(255, 255, 255, 0.85); outline: 1px solid var(--glass-kant-ytre); outline-offset: -1px; }
.flis { border-radius: 16px; transition: transform var(--tid) var(--ease-fjaer), box-shadow var(--tid) var(--ease-ut); }
@media (hover: hover) { .flis:hover { transform: translateY(-2px); box-shadow: var(--skygge-hvile), inset 0 1px 0 rgba(255, 255, 255, 0.9); } }
.graf-tips { border-radius: 12px; border-color: var(--glass-kant); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--skygge-hvile); }
.graf svg { border-radius: 8px; }
.panel .sammenligning .smal .panel { box-shadow: none; outline: 0; }

/* Knapper: piller, med et lite trykk. Scenariovelgeren er én pille med en lys innside der Basis, Nedside og Stress bytter. */
.knapp { border-radius: var(--radius-pille); padding: 9px 18px; transition: transform var(--tid-kort) var(--ease-ut), background-color var(--tid-kort), border-color var(--tid-kort), box-shadow var(--tid) var(--ease-ut); }
.knapp:not(.sekundaer) { box-shadow: var(--skygge-knapp); }
.knapp.sekundaer { background: rgba(255, 255, 255, 0.45); border-color: rgba(28, 58, 43, 0.18); box-shadow: var(--skygge-liten); }
.knapp.sekundaer:hover { background: rgba(255, 255, 255, 0.7); }
.knapp:active { transform: scale(0.97); }
.knapp.liten { padding: 6px 13px; }
.anslag > summary { border-radius: var(--radius-pille); }
.scenario { border-radius: var(--radius-pille); border: 1px solid rgba(28, 58, 43, 0.14); background: rgba(255, 255, 255, 0.5); padding: 4px; gap: 2px; box-shadow: var(--skygge-liten), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.scenario button { border: 0 !important; border-radius: var(--radius-pille); padding: 8px 18px; transition: background-color var(--tid) var(--ease-ut), color var(--tid-kort), transform var(--tid-kort) var(--ease-ut); }
.scenario button:active { transform: scale(0.96); }
.scenario button.aktiv { box-shadow: var(--skygge-knapp); }
.sidenav a { transition: color var(--tid-kort), border-color var(--tid); }
.varsel { border-radius: 0 12px 12px 0; }
.kort .varsel { border-radius: 12px; border-left-width: 3px; }
.slipp { border-radius: var(--radius-kort); }
.felt input[type="text"], .felt input[type="date"] { border-radius: var(--radius); }

/* Inn i bildet: kort, fliser, grafer og paneler glir inn når de kommer til syne, ett etter ett (effekter.js setter
 * klassene og forsinkelsen). Når overgangen er ferdig, fjernes klassene, så vanlige regler (og hover) gjelder igjen. */
.inn { opacity: 0; transform: translateY(22px); }
.inn.synlig { opacity: 1; transform: none; transition: opacity var(--tid-lang) var(--ease-ut), transform var(--tid-lang) var(--ease-ut); transition-delay: var(--inn-vent, 0ms); }
.hero .inn { transform: translateY(12px); }
.inn-kryss { animation: inn-kryss var(--tid) var(--ease-ut) both; }
@keyframes inn-kryss { from { opacity: 0; transform: translateY(4px); } }
.graf.tegnes path { visibility: hidden; }

/* Telefon: menyen er et ark under toppen, med glass og runde hjørner nederst */
@media (max-width: 720px) {
  .meny { border-radius: 0 0 var(--radius-kort) var(--radius-kort); border: 1px solid var(--glass-kant); border-top: 0; background: var(--glass-meny); box-shadow: var(--skygge-loft); transform-origin: top center; }
}
@media (max-width: 560px) {
  .kort { border-radius: 18px; }
  .flis { border-radius: 14px; }
  .scenario { padding: 4px; gap: 4px; border: 1px solid rgba(28, 58, 43, 0.14); border-radius: var(--radius-pille); overflow: hidden; }
  .scenario button, .scenario button:last-child { border: 0; border-radius: var(--radius-pille); padding: 10px 0; }
  .scenario button.aktiv { box-shadow: var(--skygge-knapp); }
}

/* Mindre bevegelse: auroraen står stille, ingenting glir inn, og overganger blir nesten øyeblikkelige */
@media (prefers-reduced-motion: reduce) {
  .aurora { transform: none; }
  .aurora i { animation: none; }
  .inn, .inn.synlig { opacity: 1; transform: none; transition: none; }
  .inn-kryss { animation: none; }
  .graf.tegnes path { visibility: visible; }
  .kort, .flis, .knapp, .meny-knapp, .scenario button { transition-duration: 1ms; }
  .kort:hover, .flis:hover { transform: none; }
}
/* Overskriften «Oversikt» over kortene på forsiden */
.forside-tittel { font-size: 28px; margin: 0 0 24px; }
@media (max-width: 560px) { .forside-tittel { font-size: 24px; margin-bottom: 20px; } }