/* Inka bilder. Fargene er de samme som i starform-briefen (frost, djup, stål, merke, avvik). */
:root{
  --frost:#E4EBE8; --djup:#102A30; --stal:#7E9296; --dempet:#4d5f63; --ark:#FFFFFF;
  --merke:#FFB81C; --avvik:#C8322B; --linje:#c9d4d0; --ok:#1f7a4d;
  --radius:4px; --radius-ark:8px;
  --skrift:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--frost);color:var(--djup);font:16px/1.5 var(--skrift)}
a{color:var(--djup)}
h1{font-size:24px;line-height:1.2;margin:0 0 6px}
h2{font-size:17px;margin:28px 0 10px}
.kort h2{margin-top:0}
:focus-visible{outline:3px solid var(--merke);outline-offset:2px}

.topp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--djup);color:var(--ark);position:sticky;top:0;z-index:5}
.topp-navn{color:var(--ark);text-decoration:none;font-weight:700}
.topp form{margin:0}
.topp-ut{background:none;border:0;color:var(--frost);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:8px 0}

.side{max-width:760px;margin:0 auto;padding:20px 16px 60px}
.tilbake{margin:0 0 12px;font-size:14px}
.dempet{color:var(--dempet)}
.liten{font-size:13px}
.skjult{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kort{background:var(--ark);border-radius:var(--radius-ark);padding:18px 16px;margin:16px 0}
.felt-etikett{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.felt-etikett:first-child{margin-top:0}
.felt{width:100%;padding:12px;font:inherit;color:var(--djup);background:var(--ark);border:1.5px solid var(--linje);border-radius:var(--radius)}
.felt:focus{outline:none;border-color:var(--djup)}
textarea.felt{resize:vertical;min-height:80px}
.valg{border:0;padding:0;margin:0}
.valg-rad{display:flex;flex-wrap:wrap;gap:8px}
.valg-knapp{position:relative}
.valg-knapp input{position:absolute;opacity:0;inset:0}
.valg-knapp span{display:block;padding:10px 16px;border:1.5px solid var(--linje);border-radius:var(--radius);background:var(--ark);cursor:pointer}
.valg-knapp input:checked+span{border-color:var(--djup);box-shadow:inset 0 0 0 1px var(--djup);font-weight:600}
.valg-knapp input:focus-visible+span{outline:3px solid var(--merke);outline-offset:2px}

.knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;font:inherit;font-weight:600;border-radius:var(--radius);border:1.5px solid var(--djup);cursor:pointer;text-decoration:none;position:relative}
.knapp-hoved{background:var(--djup);color:var(--ark)}
.knapp-andre{background:var(--ark);color:var(--djup)}
.knapp-tekst{background:none;border-color:transparent;color:var(--djup);text-decoration:underline;min-height:40px;padding:8px 4px;font-weight:500}
.knapp-fare{color:var(--avvik)}
.knapp-stor{width:100%;min-height:64px;font-size:19px}
.knapp:disabled{opacity:.55;cursor:default}
form .knapp-hoved,form .knapp-andre{margin-top:16px}
.knapperad{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.knapperad form{margin:0}
.skjult-fil{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.skjult-fil:focus-visible{outline:none}
.knapp:focus-within{outline:3px solid var(--merke);outline-offset:2px}

.kamera{display:grid;gap:10px;margin:18px 0 6px}
.ko-status{min-height:1.5em;margin:6px 0;font-size:14px;color:var(--dempet)}
.ko-status.feil{color:var(--avvik)}

.bilderutenett{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bilderutenett-stor{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.bilde{background:var(--ark);display:flex;flex-direction:column}
.bilde img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--linje)}
.bilde-info{font-size:13px;color:var(--dempet);padding:6px 8px 0;font-variant-numeric:tabular-nums}
.bilde form{margin:0}
.bilde-slett{background:none;border:0;color:var(--avvik);font:inherit;font-size:13px;text-decoration:underline;padding:4px 8px 8px;cursor:pointer;min-height:32px}
.bilde-venter img{opacity:.6}
.bilde-venter .bilde-info::after{content:" · sendes";}

.lenkerad{display:flex;gap:8px}
.lenkerad .felt{font-size:14px}
.lenkerad .knapp{margin:0;flex:none}
.ferdig{margin-top:24px}

.liste{list-style:none;margin:0;padding:0;background:var(--ark);border-radius:var(--radius-ark)}
.liste li+li{border-top:1px solid var(--frost)}
.liste-rad{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 16px;text-decoration:none}
.liste-hoved{font-weight:600}
.liste-under{grid-column:1;font-size:14px;color:var(--dempet)}
.merkelapp{grid-column:2;grid-row:1/3;align-self:center;font-size:13px;padding:3px 8px;border-radius:var(--radius);background:var(--frost);color:var(--djup)}
.merkelapp-ferdig{background:#dff0e7;color:var(--ok)}
p.merkelapp{display:inline-block}

.feilmelding{color:var(--avvik);margin:12px 0 0}
.ok-melding{color:var(--ok);margin:8px 0 0}

.side-delt h1{font-size:26px}
.fakta{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:12px 0}
.fakta dt{color:var(--dempet)}
.fakta dd{margin:0}
.kommentar{background:var(--ark);border-radius:var(--radius-ark);padding:14px 16px;white-space:pre-wrap}

@media (min-width:760px){
  .kamera{grid-template-columns:2fr 1fr}
  .kamera .knapp-stor{min-height:56px}
}
@media (max-width:520px){
  .bilderutenett{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bilderutenett-stor{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.innlogging-merke{font-size:13px;font-weight:600;color:var(--stal);margin:0 0 12px}

/* ---------- skjema ---------- */
.skjema{margin-top:8px}
.seksjon{font-size:15px;text-transform:none;margin:28px 0 8px;padding-top:12px;border-top:2px solid var(--djup)}
.info{background:var(--ark);border-left:4px solid var(--stal);padding:12px 14px;margin:12px 0;white-space:pre-wrap;font-size:15px;color:var(--dempet)}
.hjelp{font-size:14px;color:var(--dempet);margin:0 0 8px;white-space:pre-wrap}
.felt-boks{background:var(--ark);border-radius:var(--radius-ark);padding:14px 14px 12px;margin:10px 0;border-left:4px solid transparent}
.felt-boks.har-avvik{border-left-color:var(--avvik)}
.felt-boks.har-feil{border-left-color:var(--avvik);box-shadow:0 0 0 1.5px var(--avvik) inset}
.felt-tittel{display:block;font-weight:600;margin:0 0 8px;padding:0;font-size:16px}
.pakrevd{color:var(--avvik)}
.felt-boks .valg-rad{gap:8px}
.felt-boks .valg-knapp span{min-height:48px;display:flex;align-items:center;padding:10px 14px}
.valg-knapp input:checked+span{background:#eaf2ee}
.valg-avvik input:checked+span{border-color:var(--avvik);box-shadow:inset 0 0 0 1px var(--avvik);background:#fbecea;color:var(--avvik)}
fieldset:disabled .valg-knapp span{cursor:default}
.felt-tall{max-width:180px;font-variant-numeric:tabular-nums}
.felt-dato{max-width:220px}
.avkryss{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer}
.avkryss input{width:24px;height:24px}
.avvik-tekst{color:var(--avvik);font-size:14px;margin:8px 0 0}
.felt-bilder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:10px}
.felt-bilder .bilderutenett{margin:0;flex:1 1 100%}
.felt-bilder .bilderutenett:empty{display:none}
.bilderutenett-lite{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.knapp-liten{min-height:40px;padding:8px 14px;font-size:14px}
.alle-ok{width:100%;margin-top:12px}
.avviksmerke{background:#fbecea;color:var(--avvik);border-radius:var(--radius);padding:10px 12px;font-weight:600}
.melding{font-weight:600}
.lagrelinje{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--frost);border-top:1px solid var(--linje)}
.lagrelinje .knapp{margin:0;flex:1 1 0;max-width:240px}
.lagrelinje-tekst{margin-right:auto;font-size:14px;color:var(--avvik);font-weight:600}
.svarliste{margin:0;padding:0;list-style:none}
.svarliste li{background:var(--ark);padding:10px 14px;border-radius:var(--radius);margin:6px 0}
.svarliste .sporsmal{display:block;font-size:14px;color:var(--dempet)}
.svarliste .svar-avvik{color:var(--avvik);font-weight:600}
@media (max-width:520px){
  .lagrelinje-tekst{flex-basis:100%}
  .lagrelinje{flex-wrap:wrap}
}
.kommentar-del{margin-top:10px}
.kommentar-del summary{cursor:pointer;font-size:14px;color:var(--dempet);min-height:36px;display:flex;align-items:center;gap:6px}
.kommentar-del[open] summary{margin-bottom:6px}
.svar-kommentar{display:block;font-size:14px;margin-top:4px;white-space:pre-wrap;color:var(--dempet)}
/* ---------- forsiden ---------- */
.startskjema{margin-top:8px}
.notat-del{margin:14px 0 4px}
.notat-del summary{cursor:pointer;font-size:14px;color:var(--dempet);min-height:36px;display:flex;align-items:center}
.notat-del .felt{margin-top:6px}
.kontroll-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kontroll-kort{display:block;width:100%;text-align:left;font:inherit;color:var(--djup);background:var(--ark);border:1.5px solid transparent;border-radius:var(--radius-ark);padding:14px 16px;cursor:pointer;min-height:64px}
.kontroll-kort:hover{border-color:var(--linje)}
.kontroll-kort:active{border-color:var(--djup)}
.kontroll-navn{display:block;font-weight:600;font-size:17px;line-height:1.3}
.kontroll-info{display:block;font-size:14px;color:var(--dempet);margin-top:4px;font-variant-numeric:tabular-nums}
.andre-kontroller{margin-top:14px}
.andre-kontroller summary{cursor:pointer;color:var(--dempet);min-height:44px;display:flex;align-items:center}
.andre-kontroller .kontroll-liste{margin-top:8px}
@media (min-width:760px){.kontroll-liste{grid-template-columns:1fr 1fr}}