/* =============================================================
   Inxo — komponenter
   -------------------------------------------------------------
   HENTET ORDRETT FRA GRENSESNITTSKISSEN (mockup v0.14).
   Kun demo-kromet er fjernet.
   ============================================================= */

*{box-sizing:border-box}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.014em}

/* ── app frame ── */
.hint,.sub,.meta{line-height:1.45}
.frame{
  position:relative;z-index:1;max-width:none;margin:0;padding:0;
}
/* Appen er ikke et panel på en nettside. Den fyller skjermen kant til kant,
   uten margin, uten avrundede hjørner, uten skygge. Sidemenyen står fast i
   full høyde; innholdet ruller for seg selv. Slik ser et arbeidsverktøy ut. */
.app{
  line-height:1.5;
  display:grid;grid-template-columns:clamp(220px,17vw,272px) 1fr;
  height:100dvh;min-height:0;overflow:hidden;
  border:0;border-radius:0;box-shadow:none;
  background:var(--surface-1);
}
.rail{
  border-right:1px solid var(--border-strong);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:2px;
  background:var(--surface-2);overflow-y:auto;min-height:0;
}
html[data-theme="dark"] .rail{background:linear-gradient(180deg,rgba(0,26,47,.28),rgba(0,26,47,.10))}
.brand{display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s2) var(--s4)}
.brand svg{width:28px;height:28px;flex:none}
.brand b{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.brand span{display:block;font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--teal-fg);font-weight:600}
.navlabel{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding:var(--s3) var(--s3) var(--s1);font-weight:600}
.nav{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--radius-sm);color:var(--fg-2);font-size:15px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .22s var(--ease)}
.nav:hover{background:rgba(0,26,47,.05);color:var(--fg-1)}
html[data-theme="dark"] .nav:hover{background:rgba(255,255,255,.07)}
.nav.on{background:rgba(78,157,144,.18);border-color:rgba(78,157,144,.38);color:var(--fg-1);font-weight:600}
.nav .ic{width:17px;height:17px;flex:none;opacity:.9}
.nav .badge{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;background:var(--danger);color:var(--on-danger);border-radius:var(--radius-pill);padding:1px var(--s2)}
.railfoot{margin-top:auto;padding:var(--s3);border-top:1px solid var(--border-hairline);font-size:13px;color:var(--fg-3)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;background:var(--bg-canvas)}
html[data-theme="dark"] .main{background:linear-gradient(180deg,rgba(0,20,38,.16),transparent 260px)}
.top{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--border-strong);background:var(--surface-2);flex-wrap:wrap}
.top h2{font-size:19px;font-weight:600}
.top .sub{color:var(--fg-3);font-size:14px}
.spacer{margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:var(--s2);font-size:13.5px;font-weight:600;padding:var(--s1) var(--s3);border-radius:var(--radius-pill);border:1px solid var(--kant-kort);color:var(--fg-2);background:var(--surface-2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--teal-400)}
.pill.warn{color:var(--warning-fg);border-color:rgba(240,160,85,.4)}
.pill.warn .dot{background:var(--warning-fg)}
.pill.danger{color:var(--danger-fg);border-color:rgba(244,153,142,.45)}
.pill.danger .dot{background:var(--danger-fg)}
.pill.ok{color:var(--success-fg);border-color:rgba(122,208,189,.4)}
.pill.ok .dot{background:var(--success-fg)}
html[data-theme="light"] .pill.warn{color:var(--warning)} html[data-theme="light"] .pill.danger{color:var(--danger)}
html[data-theme="light"] .pill.ok{color:var(--success)}

/* Sekundærknappen sto på samme farge som flaten bak, med en grå strek
   rundt. Den leste som et felt, ikke som en knapp. Nå har den en flate. */
.btn{font:inherit;font-size:14.5px;font-weight:600;padding:var(--s2) var(--s4);border-radius:var(--radius-pill);border:1px solid var(--kant-kort);background:var(--surface-2);color:var(--fg-1);cursor:pointer;transition:all .18s var(--ease);display:inline-flex;align-items:center;gap:var(--s2)}
.btn:hover{background:var(--surface-3);border-color:var(--border-hairline)}
.btn.primary{background:var(--ciron-teal);border-color:transparent;color:var(--on-teal);box-shadow:var(--kort-skygge)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:var(--kort-skygge-hev)}
.btn.declare{background:var(--danger);border-color:transparent;color:var(--on-danger)}
.btn.ghost{background:transparent}
.btn:active{transform:scale(.98)}

.body{padding:clamp(14px,2vw,28px);overflow:visible;width:100%;max-width:1680px;margin:0 auto}
.grid{display:grid;gap:var(--s4)}
.card{
  background:var(--surface-kort);border:1px solid var(--kant-kort);border-radius:var(--radius-lg);
  padding:var(--s5);box-shadow:var(--kort-skygge)}
/* Overskriften bærer et lite merke i modusens farge. Det er den ene tingen
   som gjør at et panel leser som et panel og ikke som et avsnitt — og det
   binder hver flate til driftsmodusen man faktisk står i. */
.card h3{font-size:15.5px;font-weight:600;letter-spacing:0;margin-bottom:var(--s1);
  display:flex;align-items:center;gap:var(--s2)}
.card>h3:first-child::before{content:"";flex:none;width:3px;height:15px;border-radius:2px;
  background:var(--ciron-teal)}
.card .hint{font-size:13.5px;color:var(--fg-3);margin:0 0 var(--s3)}
.kpi{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:31px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kpi small{font-size:13.5px;font-family:var(--font-sans);color:var(--fg-3);font-weight:500;display:block;letter-spacing:0}
/* Overlinjen er etiketten over en gruppe. Den skal si hva som kommer, og
   i hvilken modus man er. Grått sa bare det første. */
.overline{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-fg);font-weight:600}

/* exercise / incident ribbons */
.ribbon{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--state-ovelse-band-fg);
  background-image:repeating-linear-gradient(135deg,var(--state-ovelse-band-a) 0 14px,var(--state-ovelse-band-b) 14px 28px);
  border-bottom:1px solid rgba(0,0,0,.2)}
.ribbon .tag{background:var(--state-ovelse-tag-bg);color:var(--state-ovelse-tag-fg);border-radius:var(--radius-sm);padding:2px var(--s2);font-family:var(--font-mono);letter-spacing:.02em}
.ribbon.live{
  background-image:none;background:var(--state-hendelse-band);color:var(--state-hendelse-band-fg);
  border-bottom:1px solid rgba(0,0,0,.3)}
.ribbon.live .tag{background:var(--state-hendelse-band-fg);color:var(--state-hendelse-band)}

/* timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:76px;top:6px;bottom:6px;width:1px;background:var(--border-hairline)}
.tl li{display:grid;grid-template-columns:66px 22px 1fr;gap:var(--s2);padding:var(--s2) 0;align-items:start}
.tl time{font-family:var(--font-mono);font-size:13px;color:var(--fg-3);padding-top:2px;font-variant-numeric:tabular-nums}
.tl .mk{width:11px;height:11px;border-radius:50%;background:var(--teal-400);margin:var(--s1) auto 0;position:relative;z-index:1;box-shadow:0 0 0 4px var(--surface-1)}
.tl .mk.d{background:var(--danger-fg)} .tl .mk.i{background:var(--warning-fg)} .tl .mk.o{background:var(--info-fg)}
.tl .txt{font-size:14.5px}
.tl .txt b{font-weight:600}
.tl .who{display:block;font-size:13px;color:var(--fg-3);margin-top:1px}
.tl .kind{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:0 var(--s1);margin-right:var(--s1);color:var(--fg-3)}

/* task list */
.task{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;border-bottom:1px solid var(--border-hairline)}
.task:last-child{border-bottom:0}
.chk{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--border-strong);flex:none;margin-top:2px;display:grid;place-items:center}
.chk.done{background:var(--ciron-teal);border-color:transparent}
.chk.done::after{content:"";width:9px;height:5px;border-left:2px solid var(--print-paper);border-bottom:2px solid var(--print-paper);transform:rotate(-45deg) translateY(-1px)}
.task .t{font-size:14.5px;font-weight:500}
.task .m{font-size:13px;color:var(--fg-3);margin-top:1px}
.task .r{margin-left:auto;text-align:right;flex:none}

/* clocks */
.clock{border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1);background:var(--surface-2)}
.clock .lab{font-size:13px;color:var(--fg-3);font-weight:600}
.clock .val{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.clock.crit{border-color:rgba(244,153,142,.5)} .clock.crit .val{color:var(--danger-fg)}
.clock.warn{border-color:rgba(240,160,85,.5)} .clock.warn .val{color:var(--warning-fg)}
html[data-theme="light"] .clock.crit .val{color:var(--danger)} html[data-theme="light"] .clock.warn .val{color:var(--warning)}
.bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--ciron-teal);transition:width .4s var(--ease)}
.bar i.crit{background:var(--danger-fg)} .bar i.warn{background:var(--warning-fg)}

table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{font-family:var(--font-mono);text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-fg);font-weight:600;padding:0 var(--s2) var(--s2);border-bottom:1.5px solid var(--ciron-teal)}
table.tbl td{padding:var(--s2) var(--s2);border-bottom:1px solid var(--border-hairline);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
/* Tabellrommet (v0.38). En tabell med fem kolonner er lesbar på en skjerm og
   uleselig på en telefon. Rommet lar tabellen beholde kolonnene sine og rulle
   sidelengs i stedet for å bli klemt sammen — og det ruller bare når det må. */
.tabellrom{overflow-x:auto;overscroll-behavior-x:contain}
.tabellrom table.tbl{min-width:100%}
@media (max-width: 700px){.tabellrom table.tbl{min-width:560px}}
/* Merkerad (v0.38): rammeverksmerker som bryter over flere linjer. */
.merkerad{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s1)}
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:2px var(--s2);border-radius:var(--radius-pill);border:1px solid var(--kant-kort);background:var(--surface-2);color:var(--fg-2)}
.tag.t{border-color:transparent;background:var(--teal-soft);color:var(--teal-fg)}
.tag.w{border-color:rgba(21,68,102,.45);color:var(--state-ovelse-fg)}
.tag.d{border-color:rgba(244,153,142,.45);color:var(--danger-fg)}
 html[data-theme="light"] .tag.d{color:var(--danger)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(0,10,20,.62);backdrop-filter:blur(6px);display:none;place-items:center;z-index:1100;padding:var(--s5)}
.scrim.on{display:grid}
.modal{width:min(620px,100%);background:var(--surface-1);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-5);overflow:hidden}
.modal .mh{padding:var(--s4) var(--s5) var(--s1)}
.modal .mb{padding:var(--s1) var(--s5) var(--s4);font-size:15px;color:var(--fg-2)}
.modal .mf{padding:var(--s4) var(--s5);border-top:1px solid var(--border-hairline);display:flex;gap:var(--s2);justify-content:flex-end;background:var(--surface-2)}
.notice{border:1px solid rgba(240,160,85,.45);background:rgba(240,160,85,.10);border-radius:var(--radius-md);padding:var(--s3) var(--s3);font-size:14px;margin:var(--s3) 0}
.notice.d{border-color:rgba(244,153,142,.45);background:rgba(244,153,142,.10)}
.notice.t{border-color:rgba(78,157,144,.45);background:rgba(78,157,144,.10)}

/* device frames */
.devices{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:flex-start;justify-content:center;padding:var(--s2) 0 var(--s4)}
.phone{width:320px;border-radius:38px;border:1px solid var(--glass-border);background:var(--surface-2);box-shadow:var(--shadow-5);padding:var(--s3);position:relative}
.phone .notch{width:110px;height:5px;border-radius:var(--radius-sm);background:var(--border-strong);margin:2px auto var(--s2)}
.screen{background:var(--surface-1);border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--border-hairline)}
.tablet{width:470px;border-radius:var(--radius-pill);border:1px solid var(--glass-border);background:var(--surface-2);box-shadow:var(--shadow-5);padding:var(--s3)}
.sbar{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--fg-3);padding:2px var(--s3) var(--s2)}
.note{font-size:13.5px;color:var(--fg-3);text-align:center;margin-top:var(--s2);max-width:320px}

.split{display:grid;grid-template-columns:1fr 340px;gap:var(--s4)}
.split3{display:grid;grid-template-columns:270px 1fr 300px;gap:var(--s4)}
.cols3{display:grid;gap:var(--s4)}
.cols4{display:grid;gap:var(--s4)}
.cols2{display:grid;gap:var(--s4)}
@media(max-width:1180px){.split,.split3,.cols3,.cols4,.cols2{grid-template-columns:1fr}}
.screen-pane{display:none}
.screen-pane.on{display:block}
.legend{max-width:1560px;margin:0 auto var(--s6);padding:0 var(--s5);position:relative;z-index:2}
.legend .card{background:var(--glass-tint);backdrop-filter:blur(20px)}
.legend ul{margin:var(--s2) 0 0;padding-left:var(--s4);font-size:14.5px;color:var(--fg-2)}
.legend li{margin-bottom:var(--s1)}

/* ── mobil og nettbrett ──────────────────────────────────────────
   Under 900 px slipper appen rammen og fyller skjermen. Venstremenyen
   blir en linje nederst, innenfor tommelens rekkevidde, med berøringsflater
   på minst 48 piksler. Rammen er riktig på en skjerm man ser på, og feil
   på en man holder i hånden. */
@media (max-width: 900px){
  .frame{padding:0;max-width:none}
  .app{
    grid-template-columns:1fr;grid-template-rows:1fr auto;height:100dvh;
  }
  .main{order:1;padding-bottom:0}
  .rail{
    order:2;position:sticky;bottom:0;z-index:40;
    flex-direction:row;gap:0;padding:0;
    border-right:0;border-top:1px solid var(--border-strong);
    background:var(--surface-1);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .rail .brand,.rail .navlabel,.rail .railfoot{display:none}
  .rail{overflow:visible}
  /* Bunnlinjen: hver knapp deler bredden likt. `width:auto` og `min-width:0`
     opphever sidemenyens `width:100%` — uten det ville seks knapper på hundre
     prosent hver presset linjen langt utenfor skjermen. Etiketten kan brytes
     over to linjer; det er bedre enn å klippe den. */
  .nav,.seksjon{
    flex:1 1 0;width:auto;min-width:0;justify-content:center;text-align:center;
    min-height:56px;border-radius:0;padding:var(--s1) 2px;font-size:13px;line-height:1.15;
    white-space:normal;word-break:break-word;
    border-top:2px solid transparent;
  }
  .seksjon .merke{margin-left:var(--s1)}
  .nav.on,.seksjon.on{background:transparent;border-top-color:var(--ciron-teal);color:var(--teal-fg)}
  .top{padding:var(--s3) var(--s4);position:sticky;top:0;z-index:30;background:var(--surface-2)}
  .top h2{font-size:19px}
  .body{padding:var(--s3)}
  .cols2,.cols3,.split{grid-template-columns:1fr}
  .modal{width:100%;max-height:92dvh;overflow:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .scrim{padding:0;place-items:end center}
}

/* Berøringsflater. Gjelder alle skjermer — en knapp som er stor nok med
   hansker, er også lettere å treffe med mus. */
@media (pointer: coarse){
  .btn{min-height:44px}
  .nav{min-height:44px}
  .felt input,.felt select,.felt textarea{min-height:44px}
}

/* ── seksjoner og faner ──────────────────────────────────────────
   Sidemenyen er ARBEIDSOMRÅDER — få, stabile, og de endrer seg ikke
   med hva du holder på med. Fanene er STEGENE i det området, altså
   brukerreisen. Det er skillet som gjør at navigasjonen kan læres én
   gang: venstre svarer på «hvor er jeg», faner på «hvor i løpet».
   Blandes de to, må man lete hver gang. */

.seksjon{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  padding:var(--s2) var(--s3);border-radius:var(--radius-sm);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--fg-2);border:0;background:transparent;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.seksjon:hover{background:rgba(0,26,47,.05);color:var(--fg-1)}
html[data-theme="dark"] .seksjon:hover{background:rgba(255,255,255,.07)}
.seksjon.on{background:var(--teal-soft);color:var(--teal-fg)}
.seksjon .merke{
  margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;
  padding:1px var(--s2);border-radius:var(--radius-pill);
  background:var(--state-hendelse-bg);color:var(--state-hendelse-fg);
}
.seksjon .ikon{width:16px;height:16px;flex:none;opacity:.75}

/* Fanerad rett under topplinjen. Ligger klistret, fordi den er
   posisjonen din i løpet — den skal ikke rulle bort. */
.faner{
  display:flex;gap:2px;padding:0 var(--s5);border-bottom:1px solid var(--border-strong);
  background:var(--surface-2);position:sticky;top:0;z-index:25;overflow-x:auto;
  scrollbar-width:none;
}
.faner::-webkit-scrollbar{display:none}
.fane{
  appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font:inherit;font-size:15px;font-weight:600;color:var(--fg-3);
  padding:var(--s3) var(--s3);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.fane:hover{color:var(--fg-1)}
.fane.on{color:var(--teal-fg);border-bottom-color:var(--ciron-teal)}
.fane .tall{
  font-family:var(--font-mono);font-size:12px;margin-left:var(--s1);
  padding:1px var(--s1);border-radius:var(--radius-pill);
  background:var(--surface-3);color:var(--fg-3);
}
.fane.on .tall{background:var(--teal-soft);color:var(--teal-fg)}

/* Sideoverskrift over innholdet: hvor du er, og hva du kan gjøre her. */
.sidehode{padding:var(--s4) var(--s5) 0;display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.sidehode h2{font-family:var(--font-display);font-size:22px;font-weight:600;
  letter-spacing:-.015em;margin:0}
.sidehode .sub{font-size:15px;color:var(--fg-3);margin-top:3px}
.sidehode .hoyre{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* Tettere tabellrader for et arbeidsverktøy som brukes hele dagen */
.tbl.tett td{padding:var(--s2) var(--s2)}
.tbl.tett th{padding:0 var(--s2) var(--s1)}

@media (max-width: 900px){
  .faner{padding:0 var(--s3)}
  .sidehode{padding:var(--s3) var(--s4) 0}
}

/* ── scenariobyggeren ─────────────────────────────────────────────
   Et puslespill. Brikkene er hendelser og aksjonskort; sporet er
   spilltiden. Man drar en brikke inn på sporet, og scenarioet regner ut
   hva det krever: hvilke funksjoner, hvilke handlinger, hvor lenge.
   Sammendraget er ikke noe man skriver — det er noe som følger. */

.bygger{display:grid;grid-template-columns:260px 1fr 300px;gap:var(--s3);min-height:520px}
@media (max-width:1180px){.bygger{grid-template-columns:1fr}}

.brikker{display:flex;flex-direction:column;gap:var(--s2);max-height:70vh;overflow-y:auto;padding-right:var(--s1)}
.brikke{
  display:flex;flex-direction:column;gap:3px;padding:var(--s2) var(--s3);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface-1);cursor:grab;user-select:none;
  transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.brikke:hover{box-shadow:var(--shadow-2)}
.brikke:active{cursor:grabbing}
.brikke.dra{opacity:.55;transform:scale(.98)}
.brikke .t{font-size:15px;font-weight:600}
.brikke .m{font-size:13px;color:var(--fg-3)}
.brikke.hendelse{border-left:3px solid var(--state-ovelse-fg)}
.brikke.aksjonskort{border-left:3px solid var(--ciron-teal)}

/* Sporet: spilltid nedover. Hver rad er et tidsvindu. */
.spor{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2)}
.sporrad{display:grid;grid-template-columns:72px 1fr;min-height:64px;border-bottom:1px solid var(--border-hairline)}
.sporrad:last-child{border-bottom:0}
.spor .tid{font-family:var(--font-mono);font-size:13.5px;color:var(--fg-3);padding:var(--s2) var(--s2);border-right:1px solid var(--border-hairline);background:var(--surface-3)}
.slot{padding:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s1);align-content:flex-start;min-height:64px;transition:background .16s var(--ease)}
.slot.over{background:var(--teal-soft);outline:2px dashed var(--ciron-teal);outline-offset:-4px}
.plassert{
  display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);
  border-radius:var(--radius-pill);font-size:14px;font-weight:600;
  border:1px solid var(--border-strong);background:var(--surface-1);cursor:grab;
}
.plassert.hendelse{border-color:var(--state-ovelse-fg);color:var(--state-ovelse-fg)}
.plassert.aksjonskort{border-color:var(--ciron-teal);color:var(--teal-fg)}
.plassert .btn.ghost.fjern{font-size:15.5px;line-height:1}

/* Sammendraget: følger av brikkene, skrives aldri. */
.sammendrag{display:flex;flex-direction:column;gap:var(--s3)}
.sammendrag .tall{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.sammendrag .etikett{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.krav{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--border-hairline);font-size:14.5px}
.krav:last-child{border-bottom:0}
.krav.mangler{color:var(--warning-fg)}

/* Vaktrommet: sidemenyen er mørk indigo i begge temaer */
.rail{background:var(--rail);color:var(--rail-fg);border-right:0}
.rail .seksjon{color:var(--rail-fg)}.rail .seksjon .ik{color:var(--rail-mute)}
.rail .seksjon.on{background:var(--rail-on);color:var(--on-rail-hvit)}.rail .seksjon.on .ik{color:var(--on-rail-hvit)}
.rail .applogo b,.rail .applogo{color:var(--rail-fg)}.rail .applogo svg{color:var(--on-rail-hvit)}
.rail .fraciron{color:var(--rail-mute);border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s4)}
.rail .railfoot,.rail .railkunde,.rail #railkunde{color:var(--rail-mute)}
.rail .nett{border-color:rgba(255,255,255,.2);color:var(--rail-fg)}
/* Kort: ingen farget kant, ingen glass. Skillelinjer gjør jobben. */
.card{border-left:0;background:var(--surface-kort)}
/* Tilstandsbåndet: skifter farge med tilstanden, viser NIST-fasen */
.tilstandsbaand{display:flex;align-items:center;gap:var(--s4);padding:var(--s1) var(--s5);color:var(--on-tilstand);font-size:13.5px;font-weight:600;background:var(--tilstand-hverdag)}
.tilstandsbaand[data-tilstand="skjerpet"]{background:var(--tilstand-skjerpet)}
.tilstandsbaand[data-tilstand="hendelse"]{background:var(--tilstand-hendelse)}
.tilstandsbaand i{font-style:normal;opacity:.88;font-weight:500}.tilstandsbaand em{font-style:normal;margin-left:auto;opacity:.95;font-weight:500}
/* Merket i sidemenyen: hjemmesidens SVG, uendret form og timing. */
.orbit-lite{width:36px;height:36px;color:var(--merke-farge);display:block}
.orbit-lite .ytre{animation:orbit-med 60s linear infinite;transform-origin:50% 50%}
.orbit-lite .indre{animation:orbit-mot 38s linear infinite;transform-origin:50% 50%}
.orbit-lite .sveip{animation:orbit-med 6s linear infinite;transform-origin:50% 50%;color:var(--merke-sveip)}
.orbit-lite .node{animation:orbit-puls 3.2s ease-in-out infinite}
.orbit-lite .node:nth-of-type(2){animation-delay:.8s}.orbit-lite .node:nth-of-type(3){animation-delay:1.6s}.orbit-lite .node:nth-of-type(4){animation-delay:2.4s}
@keyframes orbit-med{to{transform:rotate(360deg)}}
@keyframes orbit-mot{to{transform:rotate(-360deg)}}
@keyframes orbit-puls{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.orbit-lite .ytre,.orbit-lite .indre,.orbit-lite .sveip,.orbit-lite .node{animation:none}}

/* Ikoner i sidemenyen og fanene */
.ik{width:18px;height:18px;flex:0 0 18px;color:var(--fg-3)}
.seksjon.on .ik,.faner button.on .ik{color:var(--ciron-teal)}
.temavalg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-pill);overflow:hidden}
.temavalg button{border:0;background:transparent;color:var(--fg-3);padding:var(--s1) var(--s2);display:inline-flex;align-items:center;gap:var(--s1);font:inherit;cursor:pointer}
.temavalg button.on{background:var(--surface-3);color:var(--fg-1)}

/* ── v0.12: appens logo øverst, CIRON nederst ─────────────────────
   Appen har sitt eget symbol («Overlappet»). CIRON-merket flyttes til bunnen
   av sidemenyen som «fra CIRON» — hvem som står bak, ikke hva dette er. */
.applogo{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2) var(--s4)}
.applogo svg{width:34px;height:34px;color:var(--ciron-teal);flex:0 0 34px}
.applogo b{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.15;color:var(--fg-1)}
.fraciron{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) var(--s1);color:var(--fg-3);font-size:13px}
.fraciron .orbit-lite{width:22px;height:22px}

/* ── v0.15: ett uttrykk. Én knappeform, én holder, én skala ──────────
   Gjennomgangen fant fire avvik: to måter å lage samme knapp, to holdere som
   gjør samme jobb, en klasse brukt 52 ganger uten regel, og 55 avstander
   utenfor skalaen. Alt samlet her. */

/* Knapper: én form, tre varianter, én høyde. */
.btn{min-height:44px;padding:var(--s2) var(--s4)}
.btn.liten{min-height:36px;padding:var(--s1) var(--s3);font-size:14px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--teal-fg)}
.btn.ghost:hover{background:var(--surface-3);border-color:transparent}
.btn.ghost[aria-pressed="true"]{background:var(--ciron-teal);border-color:var(--ciron-teal);color:var(--on-teal)}
.btn.ghost.fjern{color:var(--fg-3);padding:var(--s1) var(--s2);min-width:44px;justify-content:center}
.btn.ghost.fjern:hover{color:var(--danger)}

/* Informasjonsholdere: én form. `.card` er holderen; `.card.liste` er den
   samme uten padding, med skillelinjer mellom radene. */
.card.liste{padding:0;overflow:hidden}
.card.liste>*{padding:var(--s3) var(--s4);border-top:1px solid var(--border-hairline)}
.card.liste>*:first-child{border-top:0}
.card.liste .tom{padding:var(--s5) var(--s4);color:var(--fg-3)}

/* `.hint` brukes 52 steder. Nå med egen regel. */
.hint{font-size:14.5px;line-height:1.5;color:var(--fg-3);max-width:72ch;margin:var(--s1) 0 0}
.card .hint{margin:var(--s2) 0 0}

/* Verktøylinje over en liste: søk, filtre, antall, handling. */
.verktoylinje{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
.verktoylinje .sokefelt{flex:1 1 280px;min-width:0}
.verktoylinje .filtre{display:flex;gap:var(--s2);flex-wrap:wrap}
.verktoylinje .antall{color:var(--fg-3);font-size:14.5px;white-space:nowrap}


/* ── v0.16: driftsmodus ─────────────────────────────────────────────
   Modusen er det viktigste valget i appen. Den velges i tilstandsbåndet,
   og reglene som gjelder står øverst på skjermen — ikke gjemt i en dialog. */
.tilstandsbaand{cursor:pointer}
.tilstandsbaand:hover{filter:brightness(1.06)}
.modusvalg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s4)}
.modusknapp{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:var(--s3);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface-1);color:var(--fg-2);font:inherit;cursor:pointer;min-height:44px}
.modusknapp b{font-size:15px;color:var(--fg-1)}
.modusknapp span{font-size:12.5px;color:var(--fg-3)}
.modusknapp em{font-style:normal;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3)}
.modusknapp[aria-pressed="true"]{border-width:2px;padding:calc(var(--s3) - 1px)}
.modusknapp.hverdag[aria-pressed="true"]{border-color:var(--tilstand-hverdag);background:var(--tilstand-hverdag-soft)}
.modusknapp.skjerpet[aria-pressed="true"]{border-color:var(--tilstand-skjerpet);background:var(--tilstand-skjerpet-soft)}
.modusknapp.beredskap[aria-pressed="true"]{border-color:var(--tilstand-hendelse);background:var(--tilstand-hendelse-soft)}
.modusregler{margin:0 0 var(--s4)}
.modusledd{font-size:15px;color:var(--fg-2);margin:0 0 var(--s3)}
.modusgruppe{margin:0 0 var(--s3)}
.modusgruppe h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--s1);color:var(--fg-3)}
.modusgruppe.frys h4{color:var(--tilstand-hendelse)}
.modusgruppe.dokumenter h4{color:var(--tilstand-skjerpet)}
.modusgruppe ul{margin:0;padding-left:var(--s5)}
.modusgruppe li{margin:0 0 var(--s1);font-size:14.5px;color:var(--fg-2)}
/* Varselet på skjermen mens modusen står */
.modusvarsel{border:1px solid var(--border-strong);border-left:4px solid var(--fg-3);border-radius:var(--radius-md);
  background:var(--surface-1);padding:var(--s4);margin:0 0 var(--s4)}
.modusvarsel.skjerpet{border-left-color:var(--tilstand-skjerpet);background:var(--tilstand-skjerpet-soft)}
.modusvarsel.beredskap{border-left-color:var(--tilstand-hendelse);background:var(--tilstand-hendelse-soft)}
.modusvarsel b{display:block;font-size:15px;margin:0 0 var(--s2)}
.modusvarsel ul{margin:0 0 var(--s2);padding-left:var(--s5)}
.modusvarsel li{font-size:14.5px;margin:0 0 var(--s1)}
/* Én liste skal ikke spres over hele bredden som et rutenett. */
.card.liste.enkolonne{display:block;max-width:none}
@media(max-width:700px){.modusvalg{grid-template-columns:1fr}}


/* Vaktrommet, fullstendig (M47-1). `.rail` er mørk indigo, men navigasjonen i
   den arvet fargene for lys bakgrunn — uleselig. Alt inne i vaktrommet bruker
   nå vaktrommets egne farger. Kontrasten er målt: rail-fg 13,7:1 og rail-mute
   7,4:1 mot rail. */
.rail .nav,.rail .seksjon{color:var(--rail-fg)}
.rail .navlabel{color:var(--rail-mute)}
.rail .nav .ik,.rail .seksjon .ik{color:var(--rail-mute)}
.rail .nav:hover,.rail .seksjon:hover{background:rgba(255,255,255,.08);color:var(--on-rail-hvit)}
.rail .nav.on,.rail .seksjon.on{background:var(--rail-on);border-color:transparent;color:var(--on-rail-hvit);font-weight:600}
.rail .nav.on .ik,.rail .seksjon.on .ik{color:var(--on-rail-hvit)}
.rail .railfoot{border-top:1px solid rgba(255,255,255,.12);color:var(--rail-mute)}
.rail .seksjon .merke{background:var(--danger);color:var(--on-danger)}
.rail .nav .badge{background:var(--danger);color:var(--on-danger)}
/* Bunnlinjen på mobil er også vaktrommet. */
@media (max-width: 900px){
  .rail .seksjon{color:var(--rail-mute)}
  .rail .seksjon.on{background:transparent;border-top-color:var(--on-rail-hvit);color:var(--on-rail-hvit)}
}


/* ── v0.18: modusen ser ut som et valg ──────────────────────────────
   Båndet er en knapp, ikke en etikett: prikk i modusens farge, navnet,
   NIST-fasen, og «Bytt modus» til høyre. Nivåpillen dempes — nivået er
   underordnet modusen. */
.tilstandsbaand{display:flex;align-items:center;gap:var(--s3);width:100%;border:0;
  padding:var(--s2) var(--s5);font:inherit;font-size:14px;font-weight:600;text-align:left;
  color:var(--on-tilstand);background:var(--tilstand-hverdag);cursor:pointer}
.tilstandsbaand .baandmerke{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 9px;opacity:.9}
.tilstandsbaand i{font-style:normal;opacity:.85;font-weight:500}
.tilstandsbaand em{font-style:normal;margin-left:auto;opacity:.95;font-weight:500}
.tilstandsbaand .baandbytt{font-weight:600;text-decoration:underline;text-underline-offset:3px;opacity:.95;white-space:nowrap}
.tilstandsbaand em:empty+.baandbytt{margin-left:auto}
.tilstandsbaand:hover{filter:brightness(1.08)}
.tilstandsbaand:focus-visible{outline:3px solid var(--on-tilstand);outline-offset:-3px}
@media(max-width:700px){.tilstandsbaand i{display:none}}


/* ── v0.19: felter, marger, justering — og «Vis som» ─────────────────
   Alle felter deler samme høyde, samme innvendige marg og samme kant.
   Etikett over, hjelpetekst under, ingenting sentrert i et skjema. */
.felt{margin:0 0 var(--s4)}
.felt label{display:block;font-size:13.5px;font-weight:600;color:var(--fg-2);margin:0 0 var(--s2)}
.felt input,.felt select,.felt textarea{
  display:block;width:100%;box-sizing:border-box;font:inherit;font-size:15px;
  min-height:44px;padding:var(--s2) var(--s3);
  border:1px solid var(--kant-kort);border-radius:var(--radius-md);
  background:var(--surface-2);color:var(--fg-1);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.felt input:hover,.felt select:hover,.felt textarea:hover{border-color:var(--border-hairline)}
.felt textarea{min-height:96px;padding:var(--s3);line-height:1.5;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{
  outline:0;border-color:var(--ciron-teal);background:var(--surface-kort);
  box-shadow:0 0 0 3px var(--teal-soft),0 0 0 4px var(--ciron-teal)}
.felt input:disabled,.felt select:disabled,.felt textarea:disabled{background:var(--surface-2);color:var(--fg-3)}
.felt .hint{margin:var(--s2) 0 0}
/* Nedtrekkslister: egen pil, samme høyde som resten. */
.felt select{appearance:none;padding-right:var(--s6);
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;background-size:5px 5px;background-repeat:no-repeat}
/* Avkryssing og radio: boks og tekst på linje, teksten bryter under seg selv. */
.valgrad{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--s2);font-size:15px;line-height:1.45;margin:0 0 var(--s2)}
.valgrad input{margin:3px 0 0;min-height:0;width:auto}
/* To felter side ved side deler samme kant som ett. */
.feltpar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:600px){.feltpar{grid-template-columns:1fr}}

/* «Vis som»: bare der man har lov. Sier tydelig når man ser noe annet. */
.visningsbryter{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4);
  padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid var(--border-hairline);border-radius:var(--radius-md)}
.visningsetikett{font-size:13.5px;font-weight:600;color:var(--fg-3)}
.visningsbryter .segment{display:inline-flex;gap:var(--s1)}
.visningsbryter .btn[aria-pressed="true"]{background:var(--ciron-teal);border-color:var(--ciron-teal);color:var(--on-teal)}
.visningsvarsel{font-size:13.5px;font-weight:600;color:var(--tilstand-skjerpet);margin-left:auto}


/* ── v0.20: modusen er appens aksent ────────────────────────────────
   Står modusen i skjerpet drift eller beredskap, er det den som farger
   appen — ikke bare båndet. Knapper, lenker, markeringer og valgt menypunkt
   følger tilstanden man faktisk arbeider i. Hverdag beholder kobolt.
   Alle par er målt til minst 7:1 i begge temaer. */
html[data-modus="skjerpet"]{
  --ciron-teal:var(--tilstand-skjerpet);
  --teal-fg:var(--tilstand-skjerpet);
  --teal-soft:var(--tilstand-skjerpet-soft);
  --on-teal:var(--on-tilstand);
}
html[data-modus="beredskap"]{
  --ciron-teal:var(--tilstand-hendelse);
  --teal-fg:var(--tilstand-hendelse);
  --teal-soft:var(--tilstand-hendelse-soft);
  --on-teal:var(--on-tilstand);
}
/* Vaktrommet får en kant i modusens farge — synlig i øyekroken hele tiden. */
html[data-modus="skjerpet"] .rail{box-shadow:inset -3px 0 0 0 var(--tilstand-skjerpet)}
html[data-modus="beredskap"] .rail{box-shadow:inset -3px 0 0 0 var(--tilstand-hendelse)}
@media (max-width: 900px){
  html[data-modus="skjerpet"] .rail{box-shadow:inset 0 3px 0 0 var(--tilstand-skjerpet)}
  html[data-modus="beredskap"] .rail{box-shadow:inset 0 3px 0 0 var(--tilstand-hendelse)}
}
/* Varselet står i skallet, over innholdet, på hver eneste skjerm. */
.modusvarsel{margin:var(--s4) var(--s5) 0}
.modusvarsel[hidden]{display:none}


/* ── v0.21: mobil ────────────────────────────────────────────────────
   Testet mot iPhone 17 Pro Max (430 px) og iPad Pro (1024 px).
   Tre feil rettet: topplinjen brøt til tre rader, bunnlinjen brøt ordene,
   og fanene lå inne i topplinjen. */
@media (max-width: 900px){
  /* Topplinjen: tittel til venstre, handlinger til høyre, aldri tre rader.
     Nivå og språk vises ikke her — de hører hjemme i Styrerom og i menyen. */
  .top{background:var(--bg-app);display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);flex-wrap:nowrap;min-height:56px}
  .top h2,.top #tittel{font-size:20px;margin:0;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .hoyre{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
  .top #nivaapille,.top .sprakvalg,.top .temavalg{display:none}
  .top #loggut{padding:var(--s2) var(--s3);font-size:14px}

  /* Fanerad: egen rad, rulles sidelengs, aldri klippet. */
  .faner{display:flex;gap:0;padding:0 var(--s2);overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border-hairline)}
  .faner::-webkit-scrollbar{display:none}
  .faner button{flex:0 0 auto;white-space:nowrap;padding:var(--s3) var(--s3);font-size:15px}

  /* Bunnlinjen: ord skal ikke brytes. Korte etiketter, ett ord hver, og
     rulles sidelengs om de ikke får plass. */
  .rail{overflow-x:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .seksjon{flex:0 0 auto;min-width:76px;padding:var(--s2) var(--s2) var(--s3);
    font-size:12px;line-height:1.2;white-space:nowrap;word-break:normal;text-align:center}
  .seksjon .ik{display:block;margin:0 auto var(--s1);width:22px;height:22px}

  /* Innholdet: én kolonne, marg fra skalaen. */
  .body{padding:var(--s4)}
  .modusvarsel{margin:var(--s3) var(--s4) 0}
  .tilstandsbaand{padding:var(--s2) var(--s4);font-size:13.5px}
  .visningsbryter{padding:var(--s3)}
  .visningsbryter .visningsetikett{width:100%}
}

/* iPad Pro i portrett (834–1024): sidemeny, men innholdet i én kolonne. */
@media (min-width: 901px) and (max-width: 1180px){
  .body{padding:var(--s5)}
  .rail{width:clamp(180px,20vw,220px)}
}


/* ── v0.24: to ruter, og «Nå» som modusens hjemmeskjerm ─────────────
   Saksrommet hadde ingen vei tilbake: åpnet man en sak, forsvant listen.
   Over 1180 px står liste og detalj side ved side; under kommer en
   tilbake-rad. Saken man ser er markert i listen. */
.toruter{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);min-height:0;flex:1}
.toruter>.listerute{border-right:1px solid var(--border-strong);overflow-y:auto;min-width:0}
.toruter>.detaljrute{overflow-y:auto;min-width:0}
.tilbakerad{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4)}
.tilbakerad button{min-height:44px}
@media (max-width: 1180px){
  .toruter{grid-template-columns:1fr}
  .toruter>.listerute{border-right:0}
  .toruter.viser-detalj>.listerute{display:none}
  .toruter:not(.viser-detalj)>.detaljrute{display:none}
  .toruter.viser-detalj .tilbakerad{display:flex}
}
.listerute .valgt{background:var(--teal-soft)}
.listerute .valgt b{color:var(--teal-fg)}

/* «Nå» er modusens hjemmeskjerm: tre til fem ting man skal gjøre eller vite,
   i prioritert rekkefølge — ikke et dashbord med tall. Rekkefølgen følger
   modusen; ingenting fjernes, bare omprioriteres. */
.naa-hode{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin:0 0 var(--s5)}
.naa-hode h1{margin:0;font-size:30px;letter-spacing:-.02em}
.naa-hode .naa-modus{font-size:15px;color:var(--fg-2);margin:var(--s1) 0 0}
.naa-kort{display:grid;gap:var(--s3);margin:0 0 var(--s5)}
.naa-punkt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--s3);
  padding:var(--s4);background:var(--surface-1);border:1px solid var(--border-hairline);border-radius:var(--radius-md)}
.naa-punkt.viktig{border-color:var(--border-strong);border-left:4px solid var(--tilstand-hverdag)}
html[data-modus="skjerpet"] .naa-punkt.viktig{border-left-color:var(--tilstand-skjerpet)}
html[data-modus="beredskap"] .naa-punkt.viktig{border-left-color:var(--tilstand-hendelse)}
.naa-punkt .ik{width:22px;height:22px;color:var(--teal-fg);margin-top:2px;display:block;background:currentColor}
.naa-punkt b{display:block;font-size:16px;margin:0 0 var(--s1)}
.naa-punkt p{margin:0;color:var(--fg-2);font-size:14.5px}
.naa-punkt .btn{white-space:nowrap}
.naa-tomt{padding:var(--s5);text-align:center;color:var(--fg-3);background:var(--surface-1);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md)}
@media (max-width: 700px){
  .naa-punkt{grid-template-columns:auto minmax(0,1fr)}
  .naa-punkt .btn{grid-column:2;justify-self:start;margin-top:var(--s2)}
}


/* ── v0.25: «Hjem» — starten på arbeidsøkta ─────────────────────────
   «Nå» sier hva som gjelder for organisasjonen. «Hjem» sier hva som gjelder
   for DEG, denne vakten: hvem du er i beredskapen, hva du skal gjøre, hva som
   begrenser deg, og hva som venter på en avklaring.

   Begrensningene står øverst, ikke nederst. Det er det man må vite FØR man
   begynner å gjøre noe — ikke etter. */
.hjem{display:grid;gap:var(--s5);max-width:960px}
.hjem-hilsen{margin:0 0 var(--s1);font-size:30px;letter-spacing:-.02em}
.hjem-rolle{margin:0;color:var(--fg-2);font-size:16px}
.hjem-rolle b{color:var(--fg-1)}
.hjem-ingen{color:var(--fg-3)}

/* Bolk med overskrift. Tallet i overskriften sier hvor mange, så man vet
   omfanget før man leser. */
.hjem-bolk{display:grid;gap:var(--s3)}
.hjem-bolk h2{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--fg-3);display:flex;align-items:center;gap:var(--s2)}
.hjem-bolk h2 .tall{background:var(--surface-3);color:var(--fg-2);border-radius:var(--radius-pill);
  padding:1px 8px;font-size:12px;letter-spacing:0}

/* Begrensninger: det som er fryst eller krever ekstra dokumentasjon. */
.hjem-grense{border:1px solid var(--border-strong);border-left:4px solid var(--tilstand-skjerpet);
  border-radius:var(--radius-md);background:var(--tilstand-skjerpet-soft);padding:var(--s4)}
html[data-modus="beredskap"] .hjem-grense{border-left-color:var(--tilstand-hendelse);
  background:var(--tilstand-hendelse-soft)}
.hjem-grense b{display:block;font-size:15px;margin:0 0 var(--s2)}
.hjem-grense ul{margin:0;padding-left:var(--s5)}
.hjem-grense li{font-size:14.5px;margin:0 0 var(--s1)}

/* Oppgaver og avklaringer: rader i én holder. */
.hjem-rad{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-top:1px solid var(--border-hairline)}
.hjem-rad:first-child{border-top:0}
.hjem-rad b{display:block;font-size:15px}
.hjem-rad span{display:block;color:var(--fg-3);font-size:13.5px}
.hjem-rad .frist{color:var(--tilstand-skjerpet);font-weight:600}
.hjem-rad .frist.naer{color:var(--tilstand-hendelse)}

/* Vaktbryter: «jeg har vakt nå». */
.hjem-vakt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s4);background:var(--surface-1);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md)}
.hjem-vakt div{min-width:0}
@media (max-width: 700px){
  .hjem-rad{grid-template-columns:1fr}
  .hjem-rad .btn{justify-self:start}
}


/* ── v0.27: luft i trappen, og temavelger på hjemmesiden ────────────
   Boksene lå inntil skillelinjen over seg: da M45-2 fjernet paddingen fra
   `.trapp`, ble det ingen margin igjen. Luft over en gruppe skal alltid være
   minst like stor som luften inni den. */
.trapp{margin:var(--s7) 0 var(--s7)}
.hero+.trapp{margin-top:var(--s6)}
.trapp+.lsek{border-top:1px solid var(--border-hairline);padding-top:var(--s7)}

/* Temavelger på hjemmesiden. Lyst er standard — en beredskapsside skal ikke
   møte deg mørk — men den som vil noe annet, skal kunne velge det. */
.ltema{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  padding:3px;gap:2px;background:var(--surface-1)}
.ltema button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;
  color:var(--fg-3);padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;min-height:44px}
.ltema button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg-1)}
.ltema button:focus-visible{outline:3px solid var(--ciron-teal);outline-offset:2px}
@media (max-width: 700px){.ltema button{padding:6px 10px;font-size:12.5px}}


/* ── v0.28: fast topplinje og bunntekst ─────────────────────────────
   Topplinjen står fast mens siden ruller under den — samme som Nirona. Den er
   gjennomskinnelig med uskarphet, så innholdet såvidt anes bak. */
.ltop{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg-app) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
@supports not (backdrop-filter: blur(1px)){.ltop{background:var(--bg-app)}}

/* Bunntekst etter samme modell som TM Drone: merke, én linje om hva det er,
   lenker på rad, og opphavsretten til slutt. */
.lfot{display:grid;justify-items:center;gap:var(--s3);text-align:center;
  padding:var(--s7) var(--s6) var(--s6);border-top:1px solid var(--border-hairline)}
.lfot-merke{display:flex;align-items:center;gap:var(--s2);color:var(--fg-1)}
.lfot-merke svg{color:var(--ciron-teal)}
.lfot-merke b{font-family:var(--font-display);font-size:17px;font-weight:700}
.lfot-hva{margin:0;color:var(--fg-2);font-size:15px;max-width:52ch}
.lfot-lenker{display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:center;margin:var(--s2) 0 0}
.lfot-lenker a{color:var(--fg-1);font-size:14.5px;font-weight:600;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.lfot-lenker a:hover{color:var(--teal-fg);text-decoration:underline;text-underline-offset:3px}
.lfot-rett{margin:var(--s2) 0 0;color:var(--fg-3);font-size:13.5px}
.lfot-versjon{margin:0;color:var(--fg-3);font-family:var(--font-mono);font-size:12px}
@media (max-width: 700px){.lfot-lenker{gap:var(--s3)}}


/* ── v0.29: CIRON-topplinjen — standard for B2B-apper ───────────────
   Én form for alle CIRON-produkter: Nirona, TM Drone, Inxo og det som kommer.

     Høyde 64 px. Merket til venstre, navigasjonslenker i midten,
     handlinger til høyre — én lett og én fylt. Fast, med uskarphet,
     så siden ruller under.

   Alt annet på høyre side skal være ikon-størrelse, ikke knappestørrelse:
   en temavelger som tar like mye plass som «Logg inn» konkurrerer med den. */
.ltop-innside{min-height:64px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.ltop .ordmerke{flex:0 0 auto}
.ltop .ordmerke b{font-size:17px}
.ltop .ordmerke span{display:none}

/* Navigasjonslenker i midten. Skjules på smale skjermer — der er
   handlingene viktigere enn snarveiene. */
.ltop-nav{display:flex;gap:var(--s5);align-items:center;margin:0 auto}
.ltop-nav a{color:var(--fg-2);font-size:15px;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.ltop-nav a:hover{color:var(--fg-1)}
@media (max-width: 900px){.ltop-nav{display:none}}

/* Handlinger: én lett, én fylt. */
.ltop .hoyre{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}

/* Temavelgeren er sekundær: ikon-størrelse, ingen ramme, ingen tekst som
   konkurrerer med handlingene. */
.ltema{border:0;background:transparent;padding:0;gap:0;display:inline-flex}
.ltema button{min-height:32px;min-width:32px;padding:0;font-size:0;
  border-radius:var(--radius-sm);color:var(--fg-3);display:grid;place-items:center}
.ltema button::before{font-size:14px;line-height:1}
.ltema button[data-tema="light"]::before{content:"☀"}
.ltema button[data-tema="dark"]::before{content:"☾"}
.ltema button[data-tema="auto"]::before{content:"◐"}
.ltema button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg-1)}
@media (pointer: coarse){.ltema button{min-height:44px;min-width:44px}}


/* ── v0.31: én flate per rute (M53, tilbake i kilden) ───────────────
   Topplinjen og fanerada deler bakgrunn med innholdet under og skilles med
   kanten alene. En egen tone der gir en fjerde flate og dissonans mot listen
   ved siden av. Reglene sto bare i den utleverte koden — nå i skissen, som er
   kilden. */
.top{background:var(--bg-app);border-bottom:1px solid var(--border-strong);flex-wrap:nowrap}
.faner{background:var(--bg-app);border-bottom:1px solid var(--border-hairline)}
.card,.kort{background:var(--surface-kort)}

/* ── v0.30: topplinjen på mobil ─────────────────────────────────────
   Testet mot iPhone 17 Pro Max (430 px) og iPad Pro.

   På 430 px får ikke merke + temavelger + to knapper plass, og «Opprett
   prøvekonto» rant ut av skjermen. Rangeringen er: merket og den fylte
   handlingen må være der. Snarveiene er allerede skjult; temavelgeren og den
   lette handlingen flytter til bunnteksten, der de hører hjemme når plassen
   er knapp. */
@media (max-width: 700px){
  .ltop-innside{padding-left:var(--s4);padding-right:var(--s4);gap:var(--s2)}
  .ltop .ltema{display:none}
  .ltop .hoyre .btn:not(.primary){display:none}
  .ltop .ordmerke b{font-size:16px}
  .hero{padding-top:var(--s5)}
  .hero .cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .lfot{padding-left:var(--s4);padding-right:var(--s4)}
}
/* Temavelger og «Logg inn» i bunnteksten når de er borte fra toppen. */
.lfot-tema{display:none;margin:var(--s3) 0 0}
@media (max-width: 700px){.lfot-tema{display:flex;justify-content:center}}

/* Nettbrett: heroen deler seg først når det er plass til begge deler. */
@media (min-width: 701px) and (max-width: 1024px){
  .ltop-innside{padding-left:var(--s5);padding-right:var(--s5)}
  .hero{gap:var(--s6)}
  .trygg{grid-template-columns:1fr 1fr}
}


/* ── v0.32: felter utenfor .felt ────────────────────────────────────
   Elleve felter lages direkte i skjermene — hurtigføring, søk, observasjoner,
   tidsfelt. De arvet ikke `.felt`-reglene og fikk derfor ulik høyde, kant og
   fokusring. Nå gjelder samme mål for ALLE felter, uansett hvor de lages. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  font:inherit;font-size:15px;min-height:44px;padding:var(--s2) var(--s3);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface-1);color:var(--fg-1);box-sizing:border-box}
textarea{min-height:96px;padding:var(--s3);line-height:1.5;resize:vertical}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
  outline:0;border-color:var(--ciron-teal);background:var(--surface-kort);
  box-shadow:0 0 0 3px var(--teal-soft),0 0 0 4px var(--ciron-teal)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--fg-3)}
select{appearance:none;padding-right:var(--s6);
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;background-size:5px 5px;background-repeat:no-repeat}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-height:0;accent-color:var(--ciron-teal)}
/* Felter i en rad deler høyde med knappen ved siden av. */
.foer input,.verktoylinje input{flex:1;min-width:0}

/* Innholdsflaten er ikke et rutenett — hver skjerm bestemmer selv. Ellers
   spres én liste over tre kolonner, hvorav to tomme. */
.body{display:block}


/* ── v0.33: skarpe kanter og rolig dybde ────────────────────────────
   Kortene forsvant i bakgrunnen: grunn og flate er samme Perle-tone, så
   kanten er DET ENESTE som skiller dem — og den lå på 1,53:1. En linje man
   må lete etter, leses som en ufullstendig strek.

   Tre nivåer, hver med sin jobb:
     --border-hairline  1,8:1  skiller rader inne i et kort. Stille.
     --border           3,1:1  bærer struktur: kort, ruter, lister. WCAG 1.4.11.
     --border-strong    3,6:1  rundt det man kan trykke eller skrive i.

   Skyggen er strammet: kort skal ligge på flaten, ikke sveve over den. */
.card,.kort{border-color:var(--kant-kort)}
.card{box-shadow:var(--kort-skygge)}
html[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.28)}

/* Rader inne i et kort: den stille linjen. */
.card.liste>*,.gruppert>*,.hjem-rad,.rad2,.task{border-color:var(--border-hairline)}

/* Ruter og lister som bærer struktur: den tydelige. */
.listerute,.detaljrute,.toruter>.listerute{border-color:var(--border)}
.top,.faner,.tilbakerad{border-color:var(--border)}

/* Felter og knapper: den sterkeste, fordi de inviterer til handling. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.btn,.filt{
  border-color:var(--border-strong)}
.btn.primary,.btn.declare{border-color:transparent}
.btn.ghost{border-color:transparent}
.btn:hover:not(.primary):not(.declare):not(.ghost){border-color:var(--fg-3)}

/* Overskrifter i kort får luft under seg, ikke bare over. */
.card>h3:first-child,.kort>h3:first-child{margin-top:0}
.card .overline{margin-bottom:var(--s2)}

/* Nøkkeltall og pillene: skarpere kant, samme høyde. */
.minikort,.pille,.tag{border-color:var(--border)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── v0.35: framdriftsraden ─────────────────────────────────────────
   Skissen skrev denne raden med innebygd stil hver gang. Nå én klasse, så
   `framdrift()` i klienten kan bygge den samme figuren. */
.framdriftrad{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;padding:var(--s3) 0 var(--s1)}
.framdriftrad b{font-variant-numeric:tabular-nums}
.bar i.warn{background:var(--warning-fg)}
.bar i.fare{background:var(--danger)}

/* ── v0.36: mobil — trygg sone og rydding ───────────────────────────
   Tilstandsbåndet lå under statuslinjen: `viewport-fit=cover` er satt og
   bunnlinjen har trygg sone, men toppen hadde ingen. Klokka og batteriet
   dekket «Normal drift» og «Bytt modus». */
.tilstandsbaand{padding-top:calc(var(--s2) + env(safe-area-inset-top, 0px))}
.rail{padding-left:max(var(--s3), env(safe-area-inset-left, 0px));
      padding-right:max(var(--s3), env(safe-area-inset-right, 0px))}

@media (max-width: 900px){
  /* Tittelen gjentar området, og fanerada sier det samme rett under.
     På mobil holder fanene — de er stedet man faktisk trykker. */
  .top #tittel{font-size:19px}
  .top #undertittel{display:none}

  /* «Videre»-raden på Hjem: tekst over knapp, aldri side ved side på 390 px. */
  .hjem-vakt{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .hjem-vakt .btn{width:100%;justify-content:center}
  /* Tittel og undertekst skal ikke løpe sammen. */
  .hjem-vakt b{display:block;margin-bottom:var(--s1)}
  .hjem-vakt span{display:block}

  /* Kortene får luft fra kanten, ikke fra hverandre. */
  .hjem{gap:var(--s4)}
  .hjem-bolk h2{margin-bottom:var(--s1)}
}

/* ── v0.37: rutenettspor kan krympe ─────────────────────────────────
   Kortene ble klippet på venstre side. `repeat(3,1fr)` og `repeat(4,1fr)`
   gir spor som ikke kan bli smalere enn innholdet: har et kort en lang,
   ubrytelig tekst, presses hele rutenettet ut over kanten — og fordi
   innholdet er sentrert, forsvinner venstre side.

   `minmax(0,1fr)` lar sporet krympe. Én linje, samme oppsett. */
/* Sporene vokser med skjermen OG kan krympe. `auto-fit` gir antall kolonner
   etter plass; `min(…,100%)` hindrer at et spor blir bredere enn flaten. */
.cols2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.cols3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cols4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.split{grid-template-columns:minmax(0,1fr) 340px}
.grid,.cols2,.cols3,.cols4,.split{min-width:0}
.grid>*,.cols2>*,.cols3>*,.cols4>*,.split>*{min-width:0}
/* Lange ord og id-er skal brytes, ikke sprenge kortet. */
.card,.kort{overflow-wrap:anywhere}