/* Styrepermen – ett stilark, ingen rammeverk. Mobil først, store trykkflater. Ingen inline-stiler (CSP: style-src 'self').
   Grunnklassene (kort, knapp, felt, melding, merkelapp, liste, tabell, nokkeltall, graf, prosa) er kopiert fra Vannloggen 76b340a
   2026-10-06 (src/Vannloggen.Web/wwwroot/css/app.css) med ny palett: permblå, permring-oransje og varmt papir. */

:root {
  --bla: #2f4a8a;
  --bla-mork: #213766;
  --bla-lys: #e6ebf7;
  --hav: #1f2a44;
  --hav-lys: #5b6478;
  --bakgrunn: #faf7f1;
  --kort: #ffffff;
  --linje: #e4dfd3;
  --aksent: #c2410c;
  --aksent-mork: #9a3412;
  --aksent-lys: #ffedd5;
  --gronn: #237047;
  --gronn-lys: #e1f3e8;
  --gul: #8a6200;
  --gul-lys: #fdf1cf;
  --rod: #b3402a;
  --rod-lys: #f9e4df;
  --skygge: 0 1px 2px rgba(31, 42, 68, .08), 0 4px 14px rgba(31, 42, 68, .06);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bla: #9db4ee;
    --bla-mork: #c0d0f7;
    --bla-lys: #232f4d;
    --hav: #eceef5;
    --hav-lys: #a9b0c2;
    --bakgrunn: #12161f;
    --kort: #1b2130;
    --linje: #2e3649;
    --aksent: #fb923c;
    --aksent-mork: #fdba74;
    --aksent-lys: #43230f;
    --gronn: #6fcf97;
    --gronn-lys: #183a2a;
    --gul: #f2c14e;
    --gul-lys: #3d3214;
    --rod: #f08a75;
    --rod-lys: #4a221a;
    --skygge: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.5;
  color: var(--hav); background: var(--bakgrunn); min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: var(--bla); }
h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
h3 { font-size: 1.02rem; margin: 1rem 0 .3rem; }
p { margin: 0 0 .8rem; }
small, .dempet { color: var(--hav-lys); }
.dempet { font-size: .92rem; }
hr { border: 0; border-top: 1px solid var(--linje); margin: 1.2rem 0; }
.hopp { position: absolute; left: -999px; top: 0; }
.hopp:focus { left: 8px; top: 8px; z-index: 50; background: var(--kort); padding: 8px 12px; border-radius: 8px; }
.skjult { display: none !important; }

/* Topp, meny og bunn */
.topp {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: #1f2a44; color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.merke { display: inline-flex; align-items: center; gap: 9px; font-weight: 750; font-size: 1.15rem; color: inherit; text-decoration: none; letter-spacing: .01em; }
.merke-ikon { width: 30px; height: 30px; }
.topp-org { margin-left: auto; color: #fff; font-size: .85rem; text-decoration: none; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .95; }
.topp-org::after { content: " ▾"; opacity: .7; }
.topp-innlogging { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 10px; background: #fff; color: #1f2a44; font-weight: 700; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.topp-innlogging:hover, .topp-innlogging:focus-visible { background: #ffedd5; }
.meny { display: flex; gap: 2px; overflow-x: auto; background: var(--kort); border-bottom: 1px solid var(--linje); padding: 0 8px; scrollbar-width: none; }
.meny::-webkit-scrollbar { display: none; }
.meny a { flex: none; padding: 12px 12px 10px; color: var(--hav-lys); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.meny a:hover { color: var(--hav); }
.meny a.aktiv { color: var(--hav); border-bottom-color: var(--aksent); }
.innhold { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 18px 16px 56px; }
.innhold:focus { outline: none; }
.innhold.bred-side { max-width: 1040px; }
.bunntekst { text-align: center; padding: 22px 16px 30px; color: var(--hav-lys); font-size: .9rem; border-top: 1px solid var(--linje); }
.bunntekst a { color: var(--hav-lys); }
.bunntekst form.innebygd { display: inline; }
.navn-bilde { vertical-align: middle; height: 15px; width: auto; }

/* Kort, knapper, skjema */
.kort { background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); padding: 16px; margin-bottom: 14px; }
.kort > :last-child { margin-bottom: 0; }
.kort h2:first-child, .kort h3:first-child { margin-top: 0; }
.kort.smal { max-width: 520px; margin-left: auto; margin-right: auto; }
.kort.advarsel { border-left: 5px solid var(--rod); }
.kort.info { border-left: 5px solid var(--bla); }
.kort.kommer { border: 1.5px dashed var(--linje); box-shadow: none; background: transparent; }
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 18px;
  border: 0; border-radius: 12px; background: var(--bla); color: #fff; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
.knapp:hover { background: var(--bla-mork); }
.knapp:disabled { opacity: .6; cursor: default; }
.knapp.hoved { background: var(--aksent); color: #fff; }
.knapp.hoved:hover { background: var(--aksent-mork); }
.knapp.sekundaer { background: var(--bla-lys); color: var(--bla); }
.knapp.fare { background: var(--rod); color: #fff; }
.knapp.lenke { background: none; color: var(--bla); padding: 4px 6px; min-height: 0; font-weight: 600; text-decoration: underline; }
.knapp.stor { min-height: 54px; font-size: 1.05rem; padding: 12px 22px; }
.knapp.liten { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .knapp, .knapp.hoved, .knapp.fare { color: #12161f; } .knapp.sekundaer, .knapp.lenke { color: var(--bla); } }
.bred { width: 100%; }
.knapperad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.felt { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.felt label, .felt > span:first-child, .etikett { font-weight: 600; }
.felt.har-feil input, .felt.har-feil textarea, .felt.har-feil select { border-color: var(--rod); }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=tel], input[type=search], select, textarea {
  font: inherit; color: var(--hav); background: var(--kort); border: 1.5px solid var(--linje); border-radius: 10px; padding: 10px 12px; min-height: 46px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, .knapp:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--bla) 45%, transparent); outline-offset: 1px; }
input.kode { font-size: 1.6rem; letter-spacing: .3em; text-align: center; }
.hint { font-size: .86rem; color: var(--hav-lys); font-weight: 400; }
.feil-tekst { color: var(--rod); }
.avkryss { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 40px; }
.avkryss input { width: 22px; height: 22px; accent-color: var(--bla); }
.velger { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .velger { grid-template-columns: 1fr 1fr; } }
.velger label { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--linje); border-radius: 10px; padding: 10px 12px; font-weight: 500; cursor: pointer; background: var(--kort); }
.velger label:has(input:checked) { border-color: var(--aksent); background: var(--aksent-lys); }
.velger input { width: 20px; height: 20px; accent-color: var(--aksent); flex: none; }
.rad { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 640px) { .rad { grid-template-columns: 1fr 1fr; } .rad.tre { grid-template-columns: 1fr 1fr 1fr; } }
.to-kolonner { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.to-kolonner > * { min-width: 0; }
@media (max-width: 419px) { .to-kolonner { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-weight: 600; margin-bottom: 6px; }

/* Meldinger og merkelapper */
.melding { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 500; }
.melding.ok { background: var(--gronn-lys); color: var(--gronn); }
.melding.feil { background: var(--rod-lys); color: var(--rod); }
.melding.info, .melding.varsel { background: var(--gul-lys); color: var(--hav); }
.merkelapp { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bla-lys); color: var(--hav); vertical-align: middle; white-space: nowrap; }
.merkelapp.gronn { background: var(--gronn-lys); color: var(--gronn); }
.merkelapp.rod { background: var(--rod-lys); color: var(--rod); }
.merkelapp.gul { background: var(--gul-lys); color: var(--gul); }
.merkelapp.bla { background: var(--bla-lys); color: var(--bla); }
.merkelapp.lov { background: var(--aksent-lys); color: var(--aksent-mork); }

/* Lister og tabeller */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: 12px 0; border-bottom: 1px solid var(--linje); }
.liste > li:last-child { border-bottom: 0; }
.liste .tittel { font-weight: 650; }
.linje-flex { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tabell-rull { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--hav-lys); }
td.tall, th.tall { text-align: right; white-space: nowrap; }
.def { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.def dt { font-weight: 600; color: var(--hav-lys); }
.def dd { margin: 0; }

/* Oversikt og eierområdet */
.nokkeltall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .nokkeltall { grid-template-columns: repeat(4, 1fr); } }
.nokkeltall a, .nokkeltall div { background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); padding: 14px; text-decoration: none; color: inherit; margin: 0; }
.nokkel { margin: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.nokkel b { font-size: 1.5rem; line-height: 1.2; }
.nokkel span { font-size: .85rem; color: var(--hav-lys); }
.eier-tabell table, .eier-logg table { font-size: .88rem; white-space: nowrap; }
.eier-meny { margin-bottom: 18px; }
.innstilling-standard { display: block; }
details.mer { margin-top: 18px; border: 1px dashed var(--linje); border-radius: var(--radius); padding: 12px 16px; }
details > summary { cursor: pointer; font-weight: 650; }
.fliser { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 560px) { .fliser { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .fliser { grid-template-columns: 1fr 1fr 1fr; } }
.flis { display: flex; flex-direction: column; gap: 4px; background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); padding: 16px; text-decoration: none; color: inherit; border-top: 4px solid var(--bla); }
.flis:hover { transform: translateY(-1px); }
.flis b { font-size: 1.08rem; }
.flis span { color: var(--hav-lys); font-size: .92rem; }
.flis .merkelapp { align-self: flex-start; margin-top: 6px; }
.flis:nth-child(3n+2) { border-top-color: var(--aksent); }
.flis:nth-child(3n+3) { border-top-color: var(--gronn); }
.sjekkliste { list-style: none; padding: 0; margin: 0; }
.sjekkliste li { position: relative; padding: 8px 0 8px 34px; border-bottom: 1px solid var(--linje); }
.sjekkliste li:last-child { border-bottom: 0; }
.sjekkliste li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--linje); }
.sjekkliste li.ferdig::before { background: var(--gronn); border-color: var(--gronn); }
.sjekkliste li.ferdig::after { content: ""; position: absolute; left: 9px; top: 13px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Graf (besøk) */
.graf { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.graf .rutenett { stroke: var(--linje); stroke-width: 1; }
.graf .akse { fill: var(--hav-lys); font-size: 12px; font-family: var(--font); }
.graf .linje { stroke: var(--bla); stroke-width: 2.5; }
.graf .punkt { fill: var(--bla); }
.graf .stolpe rect { fill: var(--bla); }
.graf .stolpe:hover rect { fill: var(--bla-mork); }
.graf-figur { margin: 8px 0 12px; }
.graf-figur figcaption { font-size: .85rem; margin-top: 4px; }
.graf-tabell { font-size: .9rem; margin-bottom: 8px; }
.besok-edge .to-kolonner { grid-template-columns: 1fr 1fr; }

/* Forside og artikler */
.landing .hero { padding: 22px 0 10px; display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
.landing .hero h1 { font-size: 2rem; letter-spacing: -.01em; }
.landing .hero h1 em { font-style: normal; color: var(--aksent); }
.landing .ingress { font-size: 1.14rem; }
.landing .hero-bilde { width: 100%; max-width: 360px; height: auto; justify-self: center; }
@media (min-width: 760px) { .landing .hero { grid-template-columns: 1.25fr 1fr; padding-top: 34px; } .landing .hero h1 { font-size: 2.55rem; } }
.landing section { margin-top: 34px; }
.landing section > h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
.landing .undertittel { color: var(--hav-lys); margin-bottom: 14px; }
.fordeler { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .fordeler { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .fordeler.tre { grid-template-columns: 1fr 1fr 1fr; } }
.fordeler .kort { margin: 0; }
.fordeler .kort h3 { margin-top: 0; font-size: 1.08rem; }
.fordeler .kort p { margin-bottom: 0; color: var(--hav-lys); }
.ikon-sirkel { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--aksent-lys); color: var(--aksent-mork); font-weight: 800; margin-bottom: 8px; }
.steg-liste { counter-reset: steg; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steg-liste li { counter-increment: steg; position: relative; padding: 12px 14px 12px 58px; background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); }
.steg-liste li::before { content: counter(steg); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--aksent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.steg-liste li b { display: block; }
.lovkort { border-top: 4px solid var(--aksent); }
.lovkort h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lovkort dl { display: grid; grid-template-columns: 1fr; gap: 2px 0; margin: 8px 0 0; }
.lovkort dt { font-weight: 650; font-size: .9rem; color: var(--hav-lys); margin-top: 8px; }
.lovkort dd { margin: 0; }
.lovkort .kilder { font-size: .84rem; margin-top: 10px; }
.priser { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .priser { grid-template-columns: 1fr 1fr; } }
.priser.en { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.priser .kort { text-align: center; margin: 0; border-top: 4px solid var(--bla); }
.priser .kort.fremhevet { border-top-color: var(--aksent); }
.priser .pris { font-size: 2rem; font-weight: 800; color: var(--hav); line-height: 1.1; }
.priser .pris small { font-size: .95rem; font-weight: 600; }
.cta { text-align: center; background: #1f2a44; color: #fff; border-radius: 20px; padding: 28px 18px; margin-top: 34px; }
.cta h2 { color: #fff; margin: 0 0 .3rem; font-size: 1.5rem; }
.cta p { color: #d6dbea; }
.cta a.lys { color: #fff; }
.prosa { max-width: 720px; }
.prosa h1 { font-size: 1.9rem; }
.prosa h2 { margin-top: 1.8rem; font-size: 1.3rem; }
.prosa li { margin-bottom: .35rem; }
.prosa .ingress { font-size: 1.12rem; }
.frist-tabell td:first-child { font-weight: 650; }
.kilde { font-size: .86rem; color: var(--hav-lys); }
.forbehold { font-size: .9rem; border-left: 4px solid var(--gul); background: var(--gul-lys); border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 12px 0; }
.forbehold ul { margin: 4px 0 0; padding-left: 18px; }
.faq details { background: var(--kort); border-radius: 12px; box-shadow: var(--skygge); padding: 12px 16px; margin-bottom: 8px; }
.faq details p { margin: 8px 0 0; }
.mal-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* ---- Fase 1: saker, møter, oppgaver, dokumenter, permen ---- */
.sidehode { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.sidehode h1 { margin-bottom: 0; }
.sidehode .knapperad { margin: 0; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 12px 0; }
.filter > label:not(.avkryss) { font-weight: 600; }
.filter input[type=text], .filter input[type=search], .filter input[type=number], .filter input[type=date], .filter select { width: auto; flex: 1 1 150px; min-width: 0; }
.filter input.smalt, .filter input[type=number] { flex: 0 0 84px; }
.filter input[type=file] { flex: 1 1 200px; min-width: 0; }
input[type=time] { width: 100%; font: inherit; color: inherit; background: var(--kort); border: 1.5px solid var(--linje); border-radius: 10px; padding: 10px 12px; min-height: 46px; }
input[type=file] { font: inherit; max-width: 100%; }
form.innebygd { display: inline; }
.saksnr { color: var(--aksent-mork); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
h1 .saksnr, h2 .saksnr { display: block; font-size: .62em; letter-spacing: .02em; }
h1 .dempet { display: block; font-size: .55em; font-weight: 500; }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.liste .tekst { margin: 4px 0 0; }
a.tittel { text-decoration: none; color: var(--hav); }
a.tittel:hover { text-decoration: underline; }
ol.saksliste { counter-reset: none; }
.rekkefolge { display: flex; gap: 2px; align-items: center; flex: none; }
.rekkefolge .knapp.lenke { min-height: 40px; padding: 6px 10px; }
.rekkefolge .knapp:disabled { opacity: .3; }
.fremmote-valg { display: flex; gap: 14px; flex: none; }
.steg { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.steg::-webkit-scrollbar { display: none; }
.steg a { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--kort); border: 1.5px solid var(--linje); color: var(--hav-lys); text-decoration: none; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.steg a.ferdig { border-color: var(--gronn); color: var(--gronn); }
.steg a.aktiv { background: var(--bla); border-color: var(--bla); color: #fff; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }
.mapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
@media (min-width: 640px) { .mapper { grid-template-columns: repeat(3, 1fr); } }
.mapper a { display: block; background: var(--kort); border: 1.5px solid var(--linje); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--hav); font-weight: 650; overflow-wrap: anywhere; }
.mapper a:hover { border-color: var(--bla); }
.mapper a span { display: block; font-weight: 400; font-size: .86rem; color: var(--hav-lys); }
.brodsmuler { color: var(--hav-lys); margin: 0 0 10px; }
.oppgave-ferdig .tittel { text-decoration: line-through; color: var(--hav-lys); }
.forfalt { color: var(--rod); font-weight: 650; }
.oversikt-kort { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .oversikt-kort { grid-template-columns: 1fr 1fr; } }
.oversikt-kort .kort { margin: 0; }
.oversikt-kort + h2 { margin-top: 26px; }

@media print {
  .topp, .meny, .bunntekst, .knapperad, .ikke-utskrift { display: none !important; }
  body { background: #fff; }
  .kort { box-shadow: none; border: 1px solid #ccc; }
}