/* 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;
  /* Fargekoden for tilstand (valgkort, stemmegivning, import): grønt = valgt/OK, blått = venter, gult = advarsel, rødt = feil.
     Peker på paletten over, så mørk modus følger med. Farge er aldri eneste signal – se .tilstand og _Tilstandsikon. */
  --ok: var(--gronn);
  --ok-lys: var(--gronn-lys);
  --venter: var(--bla);
  --venter-lys: var(--bla-lys);
  --advarsel: var(--gul);
  --advarsel-lys: var(--gul-lys);
  --feil: var(--rod);
  --feil-lys: var(--rod-lys);
  --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);
}
/* Navnet i samme antikva som logoen (C:\BuzzyBee\Logo\Styrepermen) */
.merke { display: inline-flex; align-items: center; gap: 9px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.22rem; 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; }
/* Periodevalget på /Faktura: tre kort med periode, totalpris og pris per måned. */
@media (min-width: 640px) { .velger.tre { grid-template-columns: 1fr 1fr 1fr; } }
.velger .periode { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.velger .periode-pris { font-size: 1.35rem; font-weight: 800; color: var(--hav); line-height: 1.2; }
.perioder .hint { display: block; margin-top: 8px; }
.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-pris { font-weight: 500; font-size: .95rem; margin: 0 0 4px; }
.landing .hero-lenker { font-size: .95rem; margin: 0; }
.landing .hero-lenker a { font-weight: 600; }
/* Toppen av forsiden: dempet foto av et møterom (CC0, Wikimedia Commons) i full skjermbredde bak overskriften. Sløret i
   bakgrunnsfargen er tettest til venstre der teksten står, og bildet toner ut til ren bakgrunn før fordelene. */
body:has(.landing)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 780px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, var(--bakgrunn) 100%),
    linear-gradient(100deg, color-mix(in srgb, var(--bakgrunn) 84%, transparent) 0%, color-mix(in srgb, var(--bakgrunn) 68%, transparent) 50%, color-mix(in srgb, var(--bakgrunn) 38%, transparent) 100%),
    url("../bilder/forside/moterom.jpg") center 40% / cover no-repeat; }
@media (max-width: 759px) { body:has(.landing)::before { height: 640px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bakgrunn) 80%, transparent) 0%, color-mix(in srgb, var(--bakgrunn) 72%, transparent) 55%, var(--bakgrunn) 100%), url("../bilder/forside/moterom.jpg") center 40% / cover no-repeat; } }
/* Personfoto i høyre kolonne av toppen (Shixart1985, CC BY 2.0 – kreditt nederst på forsiden). På smal skjerm (én kolonne) får
   figuren luft over seg, så prisstempelet ikke går inn i teksten over. */
.landing .person { position: relative; max-width: 340px; margin: 48px auto 0; }
.landing .person img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: 18px; box-shadow: var(--skygge); }
/* Prisstempelet oppe til høyre over bildet (eieren 2026-10-20) – PNG med gjennomsiktig bakgrunn, allerede skråstilt. Vises bare når
   prisen faktisk er 1 900 kr (Index.cshtml). */
.landing .person .pris-stempel { position: absolute; top: -64px; right: -6px; width: 196px; max-width: 55%; height: auto; margin: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); pointer-events: none; }
/* «De fleste styrer vet det ikke»-kortet: lovkravene som samvittighet, og en vei à jour. */
.landing .visste-kort { border-left: 5px solid var(--aksent); margin-top: 22px; }
.landing .visste-kort h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.landing .visste-kort .knapperad { margin: 12px 0 0; }
/* «Ferdig»-øyeblikket: protokollen ved siden av teksten. */
.landing .resultat { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
.landing .resultat h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.landing .resultat ul { padding-left: 20px; }
@media (min-width: 680px) { .landing .resultat { grid-template-columns: 240px 1fr; } }
/* Lovkravene: organisasjonsformene som lenker på forsiden, og velgeren på /lovkrav (data-lovvalg i app.js). */
.landing .lovchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.landing .lovchips .merkelapp { font-size: .95rem; padding: 6px 14px; text-decoration: none; }
.landing .lovchips .merkelapp:hover { background: var(--aksent); color: #fff; }
.lovvalg { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.lovvalg .knapp[aria-pressed="true"] { background: var(--aksent); color: #fff; border-color: var(--aksent); }
.lovside .ingress { max-width: 720px; }
.lovside #lovkrav .fordeler .lovkort[hidden] { display: none; }
.landing .foto-kreditt { display: block; font-size: .8rem; opacity: .8; margin-top: 10px; }
/* Klistret knapp nederst på mobil – vises når knappen i toppen er rullet ut av bildet (app.js), aldri på brede skjermer. */
.klistret { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bakgrunn) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -4px 16px rgba(0,0,0,.08); text-align: center; }
.klistret .knapp { width: 100%; max-width: 420px; }
.klistret[hidden] { display: none; }
@media (min-width: 680px) { .klistret { display: none !important; } }
/* Skjermbilder: mobilramme og ark (PDF-forside). Bildene er fra et oppdiktet sameie. */
.landing figure { margin: 0; }
.landing .telefon img { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; border: 7px solid #1f2a44; border-radius: 28px; box-shadow: var(--skygge); background: #fff; }
.landing .ark img { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; border: 1px solid var(--linje); border-radius: 6px; box-shadow: var(--skygge); background: #fff; }
.landing figcaption { font-size: .92rem; margin-top: 10px; text-align: center; }
.landing .skjermrad { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 680px) { .landing .skjermrad { grid-template-columns: repeat(3, 1fr); } }
.landing .fakta { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
.landing .fakta li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.landing .fakta .ikon { color: var(--aksent); flex: none; }
@media (min-width: 520px) { .landing .fakta { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .landing .fakta { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .landing .hero { grid-template-columns: 1.35fr .65fr; padding-top: 34px; } .landing .hero h1 { font-size: 2.55rem; } .landing .person { margin-top: 0; } }
.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 select.smalt { flex: 0 0 112px; }
.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; }
/* «Start møtet» / «Fortsett møtet» øverst på møtesiden når møtet er klart. */
.motestart { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; border-left: 5px solid var(--aksent); }
.motestart > div { flex: 1 1 260px; min-width: 0; }
.motestart h2 { margin: 0 0 2px; }
.motestart p { margin: 0; }
.motestart .knapp { flex: 0 0 auto; }
@media (max-width: 519px) { .motestart .knapp { width: 100%; } }
.innkalling-ikke-sendt { flex: 1 1 100%; margin: 0; font-size: .92rem; padding: 8px 10px; }
/* Møtelisten: raden for et møte som kan startes nå har knappen til høyre (under på smal skjerm). */
.liste > li.moterad-start { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.liste > li.moterad-start > div { flex: 1 1 260px; min-width: 0; }
@media (max-width: 519px) { .liste > li.moterad-start .knapp { width: 100%; } }
.steg { display: flex; gap: 6px; overflow-x: auto; padding: 4px 3px 12px; scrollbar-width: none; }
.steg::-webkit-scrollbar { display: none; }
.steg a { flex: none; display: inline-flex; align-items: center; gap: 6px; 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; }
/* Sakene i stegraden: statusikon (fargekoden: grønn hake = ferdig behandlet, blå klokke = venter), saksnummer og starten av
   tittelen. Tittelen avkortes her (ellipsis) – hele står i title. Raden ruller vannrett; siden gjør det aldri. Gjeldende steg er
   fylt og har tykkere ramme, så det skiller seg fra både grønt og blått. */
.steg a.sak { display: inline-flex; align-items: center; gap: 6px; max-width: 15.5rem; padding-left: 9px; color: var(--hav); }
.steg a.sak .tilstandsikon { width: 18px; height: 18px; }
.steg-nr { flex: none; font-weight: 700; }
.steg-tittel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.steg a.ferdig { border-color: var(--ok); }
.steg a.ferdig .tilstandsikon { color: var(--ok); }
.steg a.venter { border-color: var(--venter); }
.steg a.venter .tilstandsikon { color: var(--venter); }
.steg a.aktiv { background: var(--hav); border-color: var(--hav); color: var(--bakgrunn); box-shadow: 0 0 0 2px var(--hav); }
.steg a.aktiv .tilstandsikon { color: inherit; }
@media (max-width: 519px) { .steg a.sak { max-width: 11.5rem; } }
/* Protokollfeltet (010): informasjonsikon med kollapsbar veiledning, «Foreslå protokolltekst» og det åpne KI-forslaget.
   Veiledningen skjules med hidden-attributtet (app.js) – derfor ingen display-regel på .infoboks. */
.protokollfelt-hode { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.info-knapp { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bla); cursor: pointer; }
.info-knapp:hover, .info-knapp[aria-expanded=true] { background: var(--bla-lys); }
.info-knapp:focus-visible { outline: 3px solid color-mix(in srgb, var(--bla) 45%, transparent); outline-offset: 1px; }
.infoboks { background: var(--bla-lys); border-radius: 12px; padding: 12px 14px; font-size: .93rem; margin-bottom: 4px; }
.infoboks h3 { margin: 0 0 6px; font-size: 1rem; }
.infoboks p { margin: 8px 0; }
.infoboks ul { margin: 4px 0 8px; padding-left: 20px; }
.infoboks li { margin-bottom: 3px; }
.infoboks .merkelapp { background: var(--kort); }
.infoboks .merkelapp.lov { background: var(--aksent-lys); }
.infoboks .merkelapp.gul { background: var(--gul-lys); }
.infoboks .merkelapp.gronn { background: var(--gronn-lys); }
.infoboks .eksempel { background: var(--kort); border-left: 4px solid var(--gul); border-radius: 0 10px 10px 0; padding: 8px 10px; }
.infoboks .eksempel-godt { border-left-color: var(--gronn); }
.standardknapp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); }
.ki-rad { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ki-rad p { margin: 0; }
.ki-knapp { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
/* KI-boksen ved protokollfeltet (013): knappen «Sjekk teksten og foreslå protokolltekst» skal synes, uten å konkurrere med «Lagre». */
/* KI-knappen, merkelappen og telleren står på linjen med «Protokolltekst» (eierens ønske 2026-10-11) */
.ki-boks { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-left: auto; }
.ki-boks .merkelapp { order: 2; }
.ki-boks [data-ki-tak] { order: 3; font-size: .85rem; white-space: nowrap; }
.ki-detaljer { margin-top: 6px; }
.ki-detaljer { font-size: .88rem; color: var(--hav-lys); }
.ki-detaljer summary { cursor: pointer; }
.ki-detaljer p { margin: 4px 0 0; }
.ki-boks p { margin: 0; }
.ki-boks-tittel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ki-boks .knapp { white-space: normal; text-align: left; }
.ki-valg { margin-top: 10px; }
.ki-valg p { margin: 0 0 6px; }
.ki-valg p:last-child { margin-bottom: 0; }
.tilstand ul { margin: 4px 0 8px; padding-left: 20px; }
.tilstand.gjennomgang p { margin: 0 0 6px; }
#ki-oppfolging-del .avkryss { margin-top: 6px; }
.merkelapp.ki { background: var(--aksent-lys); color: var(--aksent-mork); }
.ki-forslag { border: 2px dashed var(--aksent); }
.ki-forslag h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ki-sammenlign { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 10px 0; align-items: start; }
.ki-sammenlign > * { min-width: 0; }
@media (min-width: 640px) { .ki-sammenlign { grid-template-columns: 1fr 1fr; } }
.ki-kol-tittel { display: block; font-weight: 650; margin: 0 0 4px; }
.ki-original { margin: 0; background: var(--bakgrunn); border: 1.5px solid var(--linje); border-radius: 10px; padding: 10px 12px; max-height: 22rem; overflow: auto; }
/* Merket «KI-assistert protokoll» øverst på forsiden og landingssidene – bare når funksjonen er slått på (_KiMerke). */
.ki-merke { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px 4px 9px; border-radius: 999px; font-size: .84rem; font-weight: 700; letter-spacing: .01em; background: var(--aksent-lys); color: var(--aksent-mork); border: 1px solid color-mix(in srgb, var(--aksent) 35%, transparent); }
.ki-merke svg { flex: none; }
/* Fargekoden for tilstand: .tilstand er en linje/boks med ikon og tekst (ok | venter | advarsel | feil), .valgkort er rammen
   rundt et sett valgkort (radioknapper) som selv viser tilstanden: blå til noe er valgt, grønn når noe er valgt, gul/rød når
   siden har sagt fra (klassen advarsel/feil) og ingenting er valgt ennå. Hvilken statuslinje som vises, følger av :has(:checked) –
   uten skript. Ikonet (_Tilstandsikon) og teksten bærer meldingen; fargen kommer i tillegg. */
.tilstandsikon { flex: none; }
.tilstand { display: flex; align-items: flex-start; gap: 8px; border: 2px solid var(--linje); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; color: var(--hav); }
.tilstand.ok { border-color: var(--ok); background: var(--ok-lys); }
.tilstand.venter { border-color: var(--venter); background: var(--venter-lys); }
.tilstand.advarsel { border-color: var(--advarsel); background: var(--advarsel-lys); }
.tilstand.feil { border-color: var(--feil); background: var(--feil-lys); }
.tilstand.ok .tilstandsikon { color: var(--ok); }
.tilstand.venter .tilstandsikon { color: var(--venter); }
.tilstand.advarsel .tilstandsikon { color: var(--advarsel); }
.tilstand.feil .tilstandsikon { color: var(--feil); }
fieldset.valgkort { border: 2px solid var(--venter); background: var(--venter-lys); border-radius: 12px; padding: 12px 14px 14px; scroll-margin-top: 70px; }
fieldset.valgkort > legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font-size: 1.02rem; }
fieldset.valgkort > legend ~ * { clear: both; }
fieldset.valgkort.advarsel { border-color: var(--advarsel); background: var(--advarsel-lys); }
fieldset.valgkort.feil { border-color: var(--feil); background: var(--feil-lys); }
fieldset.valgkort:has(.velger input:checked) { border-color: var(--ok); background: var(--ok-lys); }
.valgkort-status { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; color: var(--hav); }
.valgkort-status.status-venter .tilstandsikon { color: var(--venter); }
.valgkort-status.status-ok .tilstandsikon { color: var(--ok); }
.valgkort-status.status-advarsel .tilstandsikon { color: var(--advarsel); }
.valgkort-status.status-feil .tilstandsikon { color: var(--feil); }
.valgkort-status.status-ok { display: none; }
fieldset.valgkort:has(.velger input:checked) .valgkort-status { display: none; }
fieldset.valgkort:has(.velger input:checked) .valgkort-status.status-ok { display: flex; }
.valgkort .velger label { border-width: 2px; min-height: 52px; }
.valgkort .velger label:has(input:checked) { border-color: var(--ok); background: var(--kort); font-weight: 650; }
.valgkort .velger input { accent-color: var(--ok); }
.valgkort .velger label:focus-within { outline: 3px solid color-mix(in srgb, var(--bla) 45%, transparent); outline-offset: 1px; }
.valgt-merke { display: none; margin-left: auto; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ok-lys); color: var(--ok); white-space: nowrap; }
.valgkort .velger label:has(input:checked) .valgt-merke { display: inline-block; }
.tilstand.falt { border-color: var(--hav-lys); background: var(--bakgrunn); }
.tilstand.falt .tilstandsikon { color: var(--hav); }
/* Stemmegivningen (012): listen vises bare når «Enstemmig» ikke er krysset av, og begrunnelsen bare for den som stemte mot –
   begge deler med :has(), uten skript. Resultatet står i en .tilstand-boks: grønn = vedtatt, nøytral med kryss = forslaget falt,
   gul = ikke avklart, blå = stemmene er ikke ført. */
.stemmer:has(#enstemmig:checked) .stemmegivning { display: none; }
.stemmegivning { border: 1.5px solid var(--linje); border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; }
.stemmegivning h3 { margin: 0 0 8px; }
.resultat-tittel { font-size: 1.12rem; margin-right: 8px; }
.resultat-tall { font-weight: 650; font-variant-numeric: tabular-nums; margin-right: 8px; }
.resultat-merknad, .tilstand .hint { display: block; }
.stemmeliste { list-style: none; margin: 0 0 10px; padding: 0; }
.stemmeliste > li { padding: 10px 0; border-bottom: 1px solid var(--linje); }
.stemmeliste > li:last-child { border-bottom: 0; }
.stemmerad { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.stemme-navn { flex: 1 1 200px; min-width: 0; }
.stemmevalg { display: flex; flex-wrap: wrap; gap: 6px; }
.stemmevalg label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--linje); border-radius: 10px; background: var(--kort); font-weight: 500; cursor: pointer; }
.stemmevalg input { width: 18px; height: 18px; accent-color: var(--bla); flex: none; }
.stemmevalg label:has(input:checked) { border-color: var(--bla); background: var(--bla-lys); font-weight: 700; }
.stemmevalg label.stemme-for:has(input:checked) { border-color: var(--ok); background: var(--ok-lys); }
.stemmevalg label.stemme-mot:has(input:checked) { border-color: var(--hav); background: var(--bakgrunn); }
.stemmevalg label:focus-within { outline: 3px solid color-mix(in srgb, var(--bla) 45%, transparent); outline-offset: 1px; }
.stemmeliste .dissens { display: none; margin-top: 8px; padding: 10px 12px; border-left: 4px solid var(--hav-lys); background: var(--bakgrunn); border-radius: 0 10px 10px 0; }
.stemmeliste li:has(.stemme-mot input:checked) .dissens { display: block; }
.stemmeliste .dissens .felt { margin-bottom: 6px; }
.stemmetall { font-weight: 650; font-variant-numeric: tabular-nums; }
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; }
}

/* ---- «Kom i gang» (/Oppsett) og kortet på oversikten ---- */
.oppsett-kort { border-left: 5px solid var(--aksent); }
.fremdrift { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-weight: 600; color: var(--hav-lys); }
.fremdrift progress { flex: 1 1 160px; max-width: 320px; height: 12px; accent-color: var(--ok); }
.oppsett-steg { list-style: none; display: flex; gap: 6px; margin: 0 0 6px; padding: 4px 3px 10px; overflow-x: auto; scrollbar-width: thin; }
.oppsett-steg li { flex: none; }
.oppsett-steg a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 9px; border-radius: 999px; background: var(--kort); border: 1.5px solid var(--linje); color: var(--hav); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.oppsett-steg .steg-tall { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bakgrunn); border: 1.5px solid var(--linje); font-size: .82rem; font-weight: 700; }
.oppsett-steg .tilstandsikon { width: 22px; height: 22px; }
.oppsett-steg li.gjort a { border-color: var(--ok); }
.oppsett-steg li.gjort .tilstandsikon { color: var(--ok); }
.oppsett-steg li.hoppet a { border-color: var(--venter); border-style: dashed; }
.oppsett-steg li.aktiv a { background: var(--hav); border-color: var(--hav); color: var(--bakgrunn); box-shadow: 0 0 0 2px var(--hav); }
.oppsett-steg li.aktiv .steg-tall { background: transparent; border-color: currentColor; }
.oppsett-steg li.aktiv .tilstandsikon { color: inherit; }
.oppsett-steg .steg-merke { font-weight: 400; font-size: .8rem; }
.oppsett-bunn { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 16px 0; }
.oppsett-bunn form { margin: 0; }
.importrader { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.importrad { display: grid; grid-template-columns: 1fr; gap: 6px 10px; border: 2px solid var(--linje); border-left-width: 6px; border-radius: 12px; padding: 10px 12px; background: var(--kort); }
.importrad > * { min-width: 0; }
.importrad.ok { border-color: var(--ok); }
.importrad.advarsel { border-color: var(--advarsel); background: var(--advarsel-lys); }
.importrad.feil { border-color: var(--feil); background: var(--feil-lys); }
.importrad .radstatus { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-weight: 500; }
.importrad.ok .tilstandsikon { color: var(--ok); }
.importrad.advarsel .tilstandsikon { color: var(--advarsel); }
.importrad.feil .tilstandsikon { color: var(--feil); }
.importrad label { font-size: .84rem; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.importrad label.avkryss { flex-direction: row; font-size: .95rem; }
@media (min-width: 720px) { .importrad { grid-template-columns: 1.3fr 1.5fr 1fr auto; align-items: end; } .importrad .radstatus { grid-column: 1 / -1; } }
.oppsummering { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.oppsummering li { display: flex; align-items: flex-start; gap: 8px; }
.oppsummering .tilstandsikon { margin-top: 2px; }
.oppsummering li.gjort .tilstandsikon { color: var(--ok); }
.oppsummering li.venter .tilstandsikon { color: var(--venter); }
.saksliste-kort { margin: 0 0 12px; padding-left: 22px; }
.ki-knapp .merkelapp { order: 2; }
.ki-knapp [data-ki-tak] { order: 3; }

/* Automatisk utsending (017): «Sendt og planlagt» på møtesiden. Fargen følger fargekoden – ikon og merkelapp sier det samme. */
.autologg > li.autolinje { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; }
.autologg > li.autolinje > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.autolinje.ok .tilstandsikon { color: var(--ok); }
.autolinje.venter .tilstandsikon { color: var(--venter); }
.autolinje.advarsel .tilstandsikon { color: var(--advarsel); }
.tilstandsikon.tom { display: inline-block; width: 22px; height: 22px; }
.merkelapp.noytral { background: var(--bakgrunn); border: 1px solid var(--linje); }
#auto-status > div, #auto-paa > div { min-width: 0; }
#auto-status > div > p, #auto-paa > div > p { margin: 0 0 6px; }
#auto-status > div > :last-child, #auto-paa > div > :last-child { margin-bottom: 0; }
.tilstand .knapperad { margin: 8px 0 0; }
#sending-valg .velger label { align-items: flex-start; }
#sending-valg .velger input { margin-top: 3px; }
#automatikk details { margin: 0 0 12px; }
#frist-skjema { margin-bottom: 14px; }
#auto-status .knapp.sekundaer { background: var(--kort); border: 1.5px solid var(--linje); }
/* Signaturlisten (digital godkjenning av protokollen, 016): én linje per person som skal signere, med ikon, navn og status.
   Venstrekanten og ikonet følger fargekoden (ok = godkjent, venter = ikke godkjent, advarsel = godkjente en tidligere versjon
   eller navnet fra Vipps stemmer ikke) – teksten sier alltid det samme. */
.signaturliste { margin: 0 0 12px; padding: 0; list-style: none; }
.signaturlinje { display: flex; align-items: flex-start; gap: 8px; border-left: 4px solid var(--linje); padding: 8px 10px; margin: 0 0 6px; background: var(--bakgrunn); border-radius: 0 10px 10px 0; }
.signaturlinje > div { min-width: 0; }
.signaturlinje.ok { border-left-color: var(--ok); }
.signaturlinje.venter { border-left-color: var(--venter); }
.signaturlinje.advarsel { border-left-color: var(--advarsel); background: var(--advarsel-lys); }
.signaturlinje.ok .tilstandsikon { color: var(--ok); }
.signaturlinje.venter .tilstandsikon { color: var(--venter); }
.signaturlinje.advarsel .tilstandsikon { color: var(--advarsel); }
.signaturstatus, .signaturavvik { display: block; font-size: .93rem; overflow-wrap: anywhere; }
.signaturavvik { margin-top: 2px; }
code.sha { overflow-wrap: anywhere; word-break: break-all; }
.fast-lukkes { color: var(--ok); font-weight: 600; }
#bekreftelse .avkryss { align-items: flex-start; }

/* ---- «I møtet», møteflyt 2 (mønster fra GSSK Styre 2026-10-16) ----
   På brede skjermer: sidespalte til venstre med alle stegene (klebrig, ruller for seg) og saken til høyre. På mobil: stegene som
   vannrett rad over saken, som før. Fargekoden er den samme som ellers: grønn hake = valgt, blå klokke = venter, fylt = her er du. */
.imote { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.imote-side { background: var(--kort); border-radius: var(--radius); box-shadow: var(--skygge); padding: 10px 0 8px; min-width: 0; } /* min-width: 0 – ellers vokser kolonnen til hele stegrekken på mobil */
.imote-side-hode { display: flex; flex-direction: column; gap: 2px; padding: 2px 14px 8px; border-bottom: 1px solid var(--linje); margin-bottom: 6px; }
.imote-side-hode a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imote-side-hode b { font-size: 1.05rem; }
.imote-side .steg { padding: 4px 10px 8px; }
.imote-side-bunn { border-top: 1px solid var(--linje); margin-top: 6px; padding: 10px 14px 4px; }
.imote-side-bunn summary { list-style: none; display: inline-flex; width: 100%; justify-content: center; }
.imote-side-bunn summary::-webkit-details-marker { display: none; }
.imote-side-bunn form { margin-top: 10px; }
.imote-hoved { min-width: 0; }
.imote-hoved > .kort:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .imote { grid-template-columns: 290px minmax(0, 1fr); gap: 18px; }
  .imote-side { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
  .imote-side .steg { flex-direction: column; gap: 2px; overflow: visible; }
  .imote-side .steg a { display: flex; align-items: center; gap: 8px; max-width: none; border-radius: 10px; border-color: transparent; padding: 8px 10px; font-size: .92rem; border-left: 3px solid transparent; }
  .imote-side .steg a .steg-nr { min-width: 3.6rem; }
  .imote-side .steg a.ferdig { border-left-color: var(--ok); }
  .imote-side .steg a.venter { border-left-color: var(--venter); }
  .imote-side .steg a.aktiv { box-shadow: none; border-left-color: var(--aksent); }
  .imote-side .steg a:hover:not(.aktiv) { background: var(--bakgrunn); }
}
.steg-hode { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.steg-hode .saksnr { font-weight: 700; }
.info-knapp.liten { width: 32px; height: 32px; }
.steg-nav { border-top: 1px solid var(--linje); padding-top: 12px; margin-top: 18px; }
.om-saken { background: var(--bakgrunn); border: 1px solid var(--linje); border-radius: 10px; padding: 6px 12px; margin: 8px 0 10px; }
.om-saken summary { font-weight: 650; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bla); cursor: pointer; }
.om-saken .tekst { margin: 6px 0 4px; white-space: pre-wrap; }
.hurtig { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
/* Autolagringens status («Lagrer …», «Lagret 19:04», «Kunne ikke lagre») – aldri bare farge: teksten sier det samme. */
.autolagre-status { font-size: .86rem; color: var(--hav-lys); }
.autolagre-status.lagret { color: var(--ok); }
.autolagre-status.lagrer, .autolagre-status.endret { color: var(--hav-lys); font-style: italic; }
.autolagre-status.feil { color: var(--feil); font-weight: 600; }
/* Kvitteringen «Takk for i dag»: punkter med hake, det som gjenstår med pil. */
.kvittering-kort { border-left: 5px solid var(--gronn); }
.kvittering { list-style: none; padding: 0; margin: 10px 0 4px; }
.kvittering li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--linje); }
.kvittering li:first-child { border-top: 0; }
.kvittering .hake { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.kvittering .hake.vent { background: var(--venter); }
/* Protokollsteget: én boks per sak slik den går i protokollen. Gul ramme = noe mangler. Grønt felt = det som kan redigeres her. */
.prot-sak { border: 1.5px solid var(--linje); border-radius: 12px; padding: 8px 14px 10px; margin: 0 0 12px; background: var(--kort); }
.prot-sak.prot-varsel { border-color: var(--advarsel); }
.prot-hode { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prot-hode h3 { margin: 6px 0 4px; flex: 1 1 auto; }
.prot-felt { font-weight: 650; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bla); margin: 8px 0 2px; }
.prot-tekst { background: var(--bakgrunn); border-radius: 8px; padding: 8px 12px; margin: 0 0 6px; white-space: pre-wrap; }
.prot-sak .felt { margin-bottom: 8px; }
.prot-sak textarea.prot-input { border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok-lys) 40%, var(--kort)); min-height: 70px; }
.prot-sak .tilstand { margin: 8px 0; }
.prot-linje { margin: 2px 0; font-size: .95rem; }
.prot-lenker { margin: 6px 0 0; }
#bekreftelse .avkryss input { flex: none; margin-top: 2px; }