:root {
  --bg: #f3f1ec;
  --flate: #ffffff;
  --tekst: #1d2125;
  --dempet: #5d646b;
  --linje: #dcd8cf;
  --topp: #22282d;
  --gul: #f2b705;
  --gul-mork: #9a7400;
  --rod: #d0021b;
  --gronn: #2f8f4e;
  --oransje: #e07b00;
  --bla: #1f5f8b;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181b; --flate: #1e2226; --tekst: #e9e6df; --dempet: #a0a7ad; --linje: #343a40;
    --topp: #0d0f11; --gul-mork: #f2b705; --bla: #6fb3e0;
  }
}
:root[data-theme="dark"] {
  --bg: #15181b; --flate: #1e2226; --tekst: #e9e6df; --dempet: #a0a7ad; --linje: #343a40;
  --topp: #0d0f11; --gul-mork: #f2b705; --bla: #6fb3e0;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--tekst); font: 15px/1.45 "IBM Plex Sans", system-ui, sans-serif; }
a { color: var(--bla); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.ingress { color: var(--dempet); margin: 0 0 1.2rem; max-width: 70ch; }

.topp { background: var(--topp); color: #fff; display: flex; align-items: center; gap: 24px; padding: 10px 24px;
  border-bottom: 4px solid var(--gul); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.merke { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.merke small { display: block; font-size: .72rem; color: #b9c0c6; font-weight: 400; }
.merke b { font-size: 1.05rem; }
.merke-romb { width: 22px; height: 22px; border: 3px solid var(--rod); background: #fff; transform: rotate(45deg); }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: #d7dce0; text-decoration: none; padding: 7px 11px; border-radius: 6px; font-weight: 500; font-size: .92rem; }
nav a:hover { background: #ffffff14; color: #fff; }
nav a.aktiv { background: var(--gul); color: #1d2125; }
.utkast { background: repeating-linear-gradient(-45deg, #f2b70522 0 12px, transparent 12px 24px); border-bottom: 1px solid var(--linje);
  font-size: .82rem; color: var(--dempet); padding: 6px 24px; }
main { max-width: 1280px; margin: 0 auto; padding: 24px; }

.verktoy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
input, select, textarea { font: inherit; color: var(--tekst); background: var(--flate); border: 1px solid var(--linje);
  border-radius: 7px; padding: 8px 10px; }
textarea { width: 100%; min-height: 70px; }
input[type=search] { min-width: 260px; flex: 1; max-width: 420px; }
.knapp { font: inherit; font-weight: 600; border: 0; border-radius: 7px; padding: 9px 14px; cursor: pointer;
  background: var(--topp); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.knapp.gul { background: var(--gul); color: #1d2125; }
.knapp.lys { background: transparent; color: var(--tekst); border: 1px solid var(--linje); }
.knapp.liten { padding: 5px 9px; font-size: .85rem; }

.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 18px; }
.rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tabell-ramme { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); background: color-mix(in srgb, var(--bg) 60%, var(--flate));
  position: sticky; top: 0; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.navn a { font-weight: 600; color: var(--tekst); text-decoration: none; }
td.navn a:hover { text-decoration: underline; }
td.navn small { display: block; color: var(--dempet); font-weight: 400; }
.p-celle { font-size: .82rem; color: var(--dempet); max-width: 360px; }
.p-celle b { font-family: "IBM Plex Mono", monospace; font-weight: 500; color: var(--tekst); font-size: .78rem; }

.pikt { display: flex; gap: 3px; flex-wrap: wrap; }
.pikt img { width: 34px; height: 34px; }
.pikt.stor img { width: 72px; height: 72px; }
.ingen { color: var(--dempet); font-size: .82rem; }

.merkelapp { display: inline-block; font-size: .76rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.m-mangler { background: #d0021b18; color: var(--rod); }
.m-utkast { background: #f2b70530; color: var(--gul-mork); }
.m-signert { background: #2f8f4e22; color: var(--gronn); }
.m-cmr { background: var(--rod); color: #fff; }

.score { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; color: #fff; }
.s1 { background: #2f8f4e; } .s2 { background: #7aa83a; } .s3 { background: #e5b000; color: #1d2125; } .s4 { background: #e07b00; } .s5 { background: #d0021b; }

.verneark { max-width: 900px; }
.verneark .hode { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; border-bottom: 3px solid var(--rod); padding-bottom: 14px; }
.varselord { font-size: 1.3rem; font-weight: 700; color: var(--rod); text-transform: uppercase; }
.setninger { list-style: none; padding: 0; margin: 0; }
.setninger li { padding: 6px 0; border-bottom: 1px dashed var(--linje); display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.setninger li b { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: .85rem; }
.ppe { display: flex; gap: 10px; flex-wrap: wrap; }
.ppe span { background: var(--bla); color: #fff; border-radius: 50%; width: 86px; height: 86px; display: grid; place-items: center;
  text-align: center; font-size: .74rem; font-weight: 600; padding: 8px; line-height: 1.15; }
.to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.skjema { display: grid; gap: 14px; max-width: 900px; }
.skjema fieldset { border: 1px solid var(--linje); border-radius: var(--radius); padding: 14px 16px; background: var(--flate); }
.skjema legend { font-weight: 700; padding: 0 6px; }
.felt { display: grid; gap: 4px; margin-bottom: 10px; }
.felt label { font-size: .85rem; font-weight: 600; }
.felt .hint { font-size: .8rem; color: var(--dempet); }
.rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.auto { background: color-mix(in srgb, var(--gul) 10%, var(--flate)); border-left: 3px solid var(--gul); padding: 8px 12px; font-size: .88rem; border-radius: 4px; }

.qr-boks { display: grid; place-items: center; background: #fff; padding: 12px; border-radius: 8px; width: max-content; }
.prosjekt-kort h3 { margin-top: 0; }
.prosjekt-kort .valg { max-height: 240px; overflow: auto; border: 1px solid var(--linje); border-radius: 7px; padding: 6px 10px; margin: 8px 0; }
.prosjekt-kort .valg label { display: flex; gap: 8px; font-size: .88rem; padding: 2px 0; }

/* Mobilvisning (QR) */
.mobil { max-width: 640px; margin: 0 auto; }
.mobil .prod { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-decoration: none; color: inherit; }
.mobil .prod b { display: block; }
.mobil .prod small { color: var(--dempet); }

@media (max-width: 720px) {
  .topp { padding: 10px 16px; gap: 10px; }
  main { padding: 16px; }
  .utkast { padding: 6px 16px; }
  .to-kol { grid-template-columns: 1fr; }
  .setninger li { grid-template-columns: 1fr; gap: 2px; }
  input[type=search] { min-width: 0; width: 100%; }
}
@media print {
  .topp, .utkast, .verktoy, .knapp { display: none !important; }
  body { background: #fff; }
}

body.offentlig nav { display: none; }