/* ═══════════════════════════════════════════════════════════════════════
   Konsern Design System — komponentlag
   Rammeverknøytral CSS. Bygget UTELUKKENDE på tokens fra dist/kd-core.css
   og dist/themes/<merkevare>.css. Ingen magiske tall.

   Fungerer likt i React (Vite/SPFx), Blazor, ren HTML og MAUI WebView,
   fordi det bare er klassenavn — ingen komponentmodell å adoptere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Grunnlag ---------- */
/* Avgrenset til .kd. En global *-regel treffer hele vertssiden når
   komponentene brukes i en SPFx-webdel — også Project 365- og
   Certain-webdelene ved siden av. Apper som eier siden har body.kd, og
   for dem er dette det samme som før. */
.kd, .kd *, .kd *::before, .kd *::after { box-sizing: border-box; }

body.kd {
  margin: 0;
  background: var(--kd-canvas);
  color: var(--kd-text);
  font-family: var(--kd-font-sans);
  font-size: var(--kd-text-md);
  line-height: var(--kd-leading-md);
  -webkit-font-smoothing: antialiased;
}

.kd [hidden] { display: none !important; }

/* Tavle skalerer teksttokenene. body.kd leser dem selv; en tavle som er en
   del av en side (eller en webdel) må lese dem på nytt der attributtet står,
   ellers arver løpende tekst størrelsen fra utenfor. Ikke på <html>: der ville
   rem bli regnet av den nye størrelsen, og teksten skalert to ganger. */
:not(html)[data-tetthet="tavle"] { font-size: var(--kd-text-md); line-height: var(--kd-leading-md); }

/* Fokusring på ALT som kan fokuseres — ikke bare knapper.
   Dette var det største enkeltavviket i de tre eksisterende appene.

   Ingen border-radius her. Den sto her til 0.2.0 og endret formen på selve
   elementet ved fokus: felt 10 → 6 px, kort 14 → 6 px (målt i Chrome
   08.10.2026). Tekstfelt får :focus-visible også ved museklikk, så hjørnene
   skiftet hver gang man klikket i et felt. Omrisset følger elementets egen
   radius av seg selv. */
.kd :focus-visible {
  outline: var(--kd-focus-width) solid var(--kd-accent);
  outline-offset: var(--kd-focus-offset);
}

/* Ikoner fra dist/icons (sprite eller icons.mjs). Størrelsen følger teksten
   ikonet står i, så det samme ikonet passer i en knapp, en meny og en tom
   tilstand. Fargen arves (currentColor). */
.kd-ikon { width: var(--kd-ikon); height: var(--kd-ikon); flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Typografi ---------- */
.kd-eyebrow {
  font-size: var(--kd-text-2xs); line-height: var(--kd-leading-2xs);
  font-weight: var(--kd-weight-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--kd-text-muted);
}
/* Overskriftene har sin egen font-token. Den er systemfonten til et produkt
   setter sin egen — brødteksten røres ikke. */
.kd-title    { font-family: var(--kd-font-heading); font-size: var(--kd-text-2xl); line-height: var(--kd-leading-2xl); font-weight: var(--kd-weight-bold); letter-spacing: -.015em; margin: 0; }
.kd-heading  { font-family: var(--kd-font-heading); font-size: var(--kd-text-xl);  line-height: var(--kd-leading-xl);  font-weight: var(--kd-weight-semibold); letter-spacing: -.01em; margin: 0; }
.kd-subhead  { font-family: var(--kd-font-heading); font-size: var(--kd-text-lg);  line-height: var(--kd-leading-lg);  font-weight: var(--kd-weight-semibold); margin: 0; }
.kd-body     { font-size: var(--kd-text-md);  line-height: var(--kd-leading-md); }
.kd-small    { font-size: var(--kd-text-sm);  line-height: var(--kd-leading-sm); }
.kd-muted    { color: var(--kd-text-secondary); }
.kd-faint    { color: var(--kd-text-muted); }
.kd-num      { font-variant-numeric: tabular-nums; }

/* ---------- Skallet er ikke her ----------
   Topplinje, sidemeny og ramme lå her til 0.3.0 og ble standardsvaret for alle
   apper. Nå bor oppsettet i css/arketyper/ — én fil per apptype, og appen
   velger. Det gamle skallet er css/arketyper/klassisk.css, ordrett. */

/* Logoplassen brukes av alle arketypene. */
.kd-logo { display: inline-flex; width: var(--kd-space-32); height: var(--kd-space-32); border-radius: var(--kd-radius-sm); overflow: hidden; flex: none; }
.kd-logo > * { width: 100%; height: 100%; display: block; }

/* ---------- Kolonner ----------
   Mellomrommene følger data-tetthet (--kd-gap-lg / --kd-gap / --kd-gap-sm). */
.kd-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-gap-lg); align-items: start; }
.kd-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kd-gap-lg); align-items: start; }
.kd-col    { display: flex; flex-direction: column; gap: var(--kd-gap); min-width: 0; }
.kd-stack  { display: flex; flex-direction: column; gap: var(--kd-gap); }
.kd-row    { display: flex; align-items: center; gap: var(--kd-gap-sm); flex-wrap: wrap; }
.kd-spacer { margin-left: auto; }

/* ---------- Kort ----------
   Utseendet styres av data-flate på en forelder (kort | linje | luft). Verdiene
   leses med reserve, så en app uten data-flate ser ut som før 0.2.0 — og fordi
   reserven løses opp HER, ikke på :root, virker det også når data-brand står
   på en webdels rot og ikke på <html>. */
.kd-card {
  background: var(--kd-card-bg, var(--kd-surface));
  border: var(--kd-stroke-hairline) solid var(--kd-card-border, var(--kd-border-hairline));
  border-radius: var(--kd-radius-lg);
  padding: var(--kd-card-pad, var(--kd-pad));
  box-shadow: var(--kd-card-shadow, var(--kd-shadow-md));
}
/* flex-wrap er ikke pynt her. `.kd-badge` har `white-space: nowrap`, så en
   overskrift pluss et merke som til sammen er bredere enn kortet får merket til å
   stikke UT av kortet og dra HELE siden sidelengs — målt 438px i et 375px vindu.
   En rad som brytes når den må er riktig uansett bredde, derfor ingen
   mediespørring. `.kd-row` gjør det samme og har alltid gjort det. */
/* I data-flate="luft" er det streken under overskriften som deler, ikke rammen. */
.kd-card__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kd-gap-sm); margin-bottom: var(--kd-gap);
  border-bottom: var(--kd-card-head-rule, none); padding-bottom: var(--kd-card-head-pad, 0);
}
.kd-card__head > * { min-width: 0; }
.kd-card__head > .kd-subhead { margin-right: auto; }
.kd-card--flat  { box-shadow: none; }
.kd-card--quiet { background: var(--kd-sunken); box-shadow: none; }
/* Hevet: det som ligger OPPÅ et kort. I mørk modus lysere enn kortet, fordi en
   skygge på nesten-svart ikke synes; i lys modus bærer skyggen høyden. */
.kd-card--raised { background: var(--kd-raised); box-shadow: var(--kd-shadow-lg); }

/* ---------- Nøkkeltall ---------- */
.kd-stat { display: flex; flex-direction: column; gap: var(--kd-space-4); }
.kd-stat__value { font-size: var(--kd-text-3xl); line-height: var(--kd-leading-3xl); font-weight: var(--kd-weight-bold); letter-spacing: -.02em; }
.kd-stat--kiosk .kd-stat__value { font-size: var(--kd-text-4xl); line-height: var(--kd-leading-4xl); }
.kd-stat__label { font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.kd-stat__delta { font-size: var(--kd-text-sm); font-weight: var(--kd-weight-semibold); }
.kd-stat__delta.is-up   { color: var(--kd-good-text); }
.kd-stat__delta.is-down { color: var(--kd-danger-text); }

/* ---------- Knapper ---------- */
/* Størrelsen følger data-tetthet (--kd-control-*). Standard er som før 0.2.0. */
.kd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kd-space-8);
  padding: var(--kd-control-py) var(--kd-control-px);
  min-height: var(--kd-control-h);
  font: inherit; font-size: var(--kd-control-text); font-weight: var(--kd-weight-semibold);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: var(--kd-stroke-control) solid var(--kd-border-control);
  border-radius: var(--kd-knapp-radius, var(--kd-radius-md));   /* data-knapp */
  background: var(--kd-surface); color: var(--kd-text);
  transition: background var(--kd-motion-fast) var(--kd-motion-ease),
              border-color var(--kd-motion-fast) var(--kd-motion-ease);
}
.kd-btn:hover:not(:disabled) { background: var(--kd-sunken); }
.kd-btn:disabled { opacity: .5; cursor: not-allowed; }

.kd-btn--primary { background: var(--kd-accent); color: var(--kd-accent-on); border-color: var(--kd-accent); }
.kd-btn--primary:hover:not(:disabled) { background: var(--kd-accent-hover); border-color: var(--kd-accent-hover); }

.kd-btn--danger { background: var(--kd-danger); color: var(--kd-danger-on); border-color: var(--kd-danger); }
/* Statusknapper. Kom til 27.08 for sjekklistemodulens fem svaralternativ:
   et kontrollpunkt besvares med «Ingen funn» (good), «Observasjon» (warning),
   «Funn» (danger) eller nøytralt. Tokenene fantes alt — bare knappevariantene
   manglet, så .kd-badge hadde good/warning mens .kd-btn ikke hadde det.
   Følger samme mønster som --danger. */
.kd-btn--good   { background: var(--kd-good);    color: var(--kd-good-on);    border-color: var(--kd-good); }
.kd-btn--warning{ background: var(--kd-warning); color: var(--kd-warning-on); border-color: var(--kd-warning); }
.kd-btn--ghost  { background: transparent; border-color: transparent; color: var(--kd-accent-text); }
.kd-btn--ghost:hover:not(:disabled) { background: var(--kd-accent-soft); }
.kd-btn--sm { padding: var(--kd-space-8) var(--kd-space-12); font-size: var(--kd-text-sm); min-height: var(--kd-space-32); }
.kd-btn--lg { padding: var(--kd-space-16) var(--kd-space-24); font-size: var(--kd-text-lg); }
.kd-btn--block { width: 100%; }
/* Én knapp som pille uansett data-knapp — for eksempel den ene som skal skille seg ut. */
.kd-btn--pille { border-radius: var(--kd-radius-pill); }

.kd-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--kd-iconbtn); height: var(--kd-iconbtn);
  border: var(--kd-stroke-control) solid var(--kd-border-control);
  border-radius: var(--kd-knapp-radius, var(--kd-radius-md));
  background: var(--kd-surface); color: var(--kd-text);
  font-size: var(--kd-text-lg); cursor: pointer;
}
.kd-iconbtn:hover { background: var(--kd-sunken); }

/* ---------- Skjema ---------- */
.kd-field { display: flex; flex-direction: column; gap: var(--kd-space-6); }
.kd-label { font-size: var(--kd-text-sm); font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary); }
.kd-help  { font-size: var(--kd-text-sm); color: var(--kd-text-muted); }
.kd-error { font-size: var(--kd-text-sm); color: var(--kd-danger-text); font-weight: var(--kd-weight-medium); }

.kd-input, .kd-select, .kd-textarea {
  width: 100%;
  padding: var(--kd-control-py) var(--kd-space-12);
  min-height: var(--kd-control-h);
  /* 16px er ikke kosmetikk: under det zoomer iOS Safari inn ved fokus. */
  font: inherit; font-size: var(--kd-text-md);
  color: var(--kd-text); background: var(--kd-surface);
  border: var(--kd-stroke-control) solid var(--kd-border-control);
  border-radius: var(--kd-radius-md);
}
.kd-input::placeholder, .kd-textarea::placeholder { color: var(--kd-text-muted); }
.kd-input:disabled, .kd-select:disabled, .kd-textarea:disabled { background: var(--kd-sunken); color: var(--kd-text-disabled); cursor: not-allowed; }
.kd-input[aria-invalid="true"], .kd-select[aria-invalid="true"] { border-color: var(--kd-danger); }
.kd-textarea { min-height: var(--kd-space-96); resize: vertical; }

/* Valgkort — radio/avkrysning med hele flaten som treffområde */
.kd-choice {
  display: flex; gap: var(--kd-space-12); align-items: flex-start;
  padding: var(--kd-space-16);
  border: var(--kd-stroke-control) solid var(--kd-border-control);
  border-radius: var(--kd-radius-md); cursor: pointer;
  transition: border-color var(--kd-motion-fast) var(--kd-motion-ease),
              background var(--kd-motion-fast) var(--kd-motion-ease);
}
.kd-choice:hover { background: var(--kd-sunken); }
.kd-choice:has(input:checked) { border-color: var(--kd-accent); background: var(--kd-accent-soft); }
.kd-choice:has(input:focus-visible) { outline: var(--kd-focus-width) solid var(--kd-accent); outline-offset: var(--kd-focus-offset); }
.kd-choice input { width: var(--kd-space-20); height: var(--kd-space-20); margin: 0; flex: none; accent-color: var(--kd-accent); }
.kd-choice__body strong { display: block; font-weight: var(--kd-weight-semibold); }
.kd-choice__body small  { color: var(--kd-text-secondary); font-size: var(--kd-text-sm); }
.kd-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--kd-space-8); }

/* ---------- Merker og brikker ---------- */
.kd-badge {
  display: inline-flex; align-items: center; gap: var(--kd-space-4);
  font-size: var(--kd-text-xs); font-weight: var(--kd-weight-bold);
  padding: var(--kd-space-4) var(--kd-space-8); border-radius: var(--kd-radius-pill);
  white-space: nowrap;
  background: var(--kd-sunken); color: var(--kd-text-secondary);
}
.kd-badge--good    { background: var(--kd-good-soft);    color: var(--kd-good-text); }
.kd-badge--warning { background: var(--kd-warning-soft); color: var(--kd-warning-text); }
.kd-badge--danger  { background: var(--kd-danger-soft);  color: var(--kd-danger-text); }
.kd-badge--info    { background: var(--kd-info-soft);    color: var(--kd-info-text); }
.kd-badge--accent  { background: var(--kd-accent-soft);  color: var(--kd-accent-text); }

.kd-chip {
  display: inline-flex; align-items: center; gap: var(--kd-space-8);
  padding: var(--kd-space-6) var(--kd-space-12);
  background: var(--kd-accent-soft); color: var(--kd-accent-text);
  border-radius: var(--kd-radius-pill); font-size: var(--kd-text-sm);
}
.kd-chip__remove { border: none; background: none; color: inherit; cursor: pointer; font-size: var(--kd-text-lg); line-height: 1; padding: 0; }

/* ---------- Varsler ---------- */
.kd-alert {
  display: flex; gap: var(--kd-space-12); align-items: flex-start;
  padding: var(--kd-space-12) var(--kd-space-16);
  border-radius: var(--kd-radius-md);
  font-size: var(--kd-text-md);
  background: var(--kd-info-soft); color: var(--kd-info-text);
  border: var(--kd-stroke-hairline) solid currentColor;
}
.kd-alert--good    { background: var(--kd-good-soft);    color: var(--kd-good-text); }
.kd-alert--warning { background: var(--kd-warning-soft); color: var(--kd-warning-text); }
.kd-alert--danger  { background: var(--kd-danger-soft);  color: var(--kd-danger-text); }
/* Ikonet er ikke pynt: status skal aldri bæres av farge alene. */
/* Høyden er én tekstlinje, så ikonet sentreres på FØRSTE linje også når
   meldingen brytes over flere. */
.kd-alert__icon {
  flex: none; display: flex; align-items: center;
  height: calc(var(--kd-text-md) * var(--kd-leading-md));
  font-size: var(--kd-text-lg); line-height: 1;
}
.kd-alert__body { flex: 1; min-width: 0; }

/* ---------- Lister og tabeller ---------- */
.kd-list { list-style: none; margin: 0; padding: 0; }
/* Samme grunn som `.kd-card__head`: en listerad bærer ofte navn, merke og en
   handling, og uten bryting stikker den siste ut av kortet på en telefon. */
.kd-list > li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-gap-sm);
  padding: var(--kd-row-py) var(--kd-space-4);
  border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
.kd-list > li > * { min-width: 0; }
.kd-list > li:first-child { border-top: none; }
.kd-list > li.is-selected { background: var(--kd-accent-soft); border-radius: var(--kd-radius-sm); }

.kd-table { width: 100%; border-collapse: collapse; font-size: var(--kd-text-sm); }
.kd-table th {
  text-align: left; font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary);
  padding: var(--kd-space-8) var(--kd-cell-px);
  border-bottom: var(--kd-stroke-emphasis) solid var(--kd-border-hairline);
  white-space: nowrap;
}
.kd-table td {
  padding: var(--kd-row-py) var(--kd-cell-px);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
.kd-table tbody tr:hover { background: var(--kd-sunken); }
.kd-table .kd-num, .kd-table th.kd-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Brede tabeller scroller i sin egen boks — siden skal aldri scrolle sidelengs. */
.kd-tablewrap { overflow-x: auto; }

/* ---------- Tabellrader som kort på smal skjerm ----------

   `overflow-x: auto` alene holder på skrivebord, der rullefeltet er synlig. Men
   iOS Safari skjuler rullefeltet til man drar, så en tabell med kolonner utenfor
   ser ferdig ut. Målt i en app: 595px innhold i et 310px felt — 285px utenfor, og
   der lå statuskolonnen og handlingsknappen. Brukeren leste kolonne fire som den
   siste og gikk glipp av resten.

   En rulleantydning gjør det skjulte oppdagbart, ikke synlig. Er radene korte nok
   til å stables, er kort den riktige formen: ingenting skjult, ingen gest.

   OPT-IN, med to klasser, fordi det endrer form på innholdet:
     <div class="kd-tablewrap kd-tablewrap--kort">
       <table class="kd-table kd-table--kort">
         <thead><tr><th>Dato</th>…
         <tbody><tr><td data-etikett="Dato">…</td>
                    <td class="kd-kort-handling"><button …></td>

   Hver `td` trenger `data-etikett` med kolonnens navn — det er den som blir
   feltnavnet i kortet. Cella med handlingen får `.kd-kort-handling`.

   Spørringen gjelder FELTETS bredde, ikke vinduets. En mediespørring ville
   bommet på tabeller i et smalt panel på en bred skjerm. */
.kd-tablewrap--kort { container-type: inline-size; }

@container (max-width: 620px) {
  .kd-table--kort thead { display: none; }
  .kd-table--kort,
  .kd-table--kort tbody,
  .kd-table--kort tr,
  .kd-table--kort td { display: block; width: auto; }
  .kd-table--kort tr {
    border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
    border-radius: var(--kd-radius-md);
    background: var(--kd-surface);
    padding: var(--kd-space-12);
    margin-bottom: var(--kd-space-12);
  }
  .kd-table--kort tr:last-child { margin-bottom: 0; }
  .kd-table--kort td {
    border: 0; padding: var(--kd-space-4) 0;
    display: flex; align-items: baseline; gap: var(--kd-space-12);
  }
  /* Kolonnejustering er meningsløs i et kort — alt til venstre. `.kd-num` har
     høyere spesifisitet enn `td` alene, så den må slås av eksplisitt. */
  .kd-table--kort td,
  .kd-table--kort td.kd-num { text-align: left; }
  .kd-table--kort td[data-etikett]::before {
    content: attr(data-etikett);
    flex: none; min-width: 7rem;
    color: var(--kd-text-muted); font-size: var(--kd-text-xs);
  }
  /* Handlingen er radens, ikke et datafelt: full bredde nederst. */
  .kd-table--kort td.kd-kort-handling { padding-top: var(--kd-space-12); }
  .kd-table--kort td.kd-kort-handling .kd-btn { width: 100%; }
  /* En tom tilstand skal ikke se ut som et kort med ingenting i. */
  .kd-table--kort tr.kd-kort-tom { border: 0; background: none; padding: 0; }
}

/* ---------- Tom tilstand ---------- */
.kd-empty {
  text-align: center; color: var(--kd-text-secondary);
  padding: var(--kd-space-32) var(--kd-space-16);
  display: flex; flex-direction: column; align-items: center; gap: var(--kd-space-8);
}
.kd-empty__icon { font-size: var(--kd-text-3xl); opacity: .65; }
/* En tom tilstand uten utvei er en blindvei — ha alltid med neste handling. */
.kd-empty__action { margin-top: var(--kd-space-4); }

/* ---------- Stegviser ---------- */
.kd-steps { display: flex; gap: var(--kd-space-6); list-style: none; margin: 0; padding: 0; }
.kd-step {
  flex: 1; display: flex; align-items: center; gap: var(--kd-space-8);
  font-size: var(--kd-text-sm); font-weight: var(--kd-weight-semibold);
  color: var(--kd-text-muted); padding: var(--kd-space-6) var(--kd-space-4);
  border-bottom: var(--kd-stroke-emphasis) solid var(--kd-border-hairline);
}
.kd-step__n {
  width: var(--kd-space-24); height: var(--kd-space-24); border-radius: var(--kd-radius-pill);
  background: var(--kd-sunken); color: var(--kd-text-secondary);
  display: grid; place-items: center; font-size: var(--kd-text-xs); flex: none;
}
.kd-step.is-active { color: var(--kd-accent-text); border-bottom-color: var(--kd-accent); }
.kd-step.is-active .kd-step__n { background: var(--kd-accent); color: var(--kd-accent-on); }
.kd-step.is-done   { color: var(--kd-good-text); border-bottom-color: var(--kd-good); }
.kd-step.is-done .kd-step__n { background: var(--kd-good); color: var(--kd-good-on); }

/* ---------- Kvitteringer (toast) ---------- */
.kd-toasts {
  position: fixed; top: var(--kd-space-16); right: var(--kd-space-16);
  z-index: var(--kd-z-toast);
  display: flex; flex-direction: column; gap: var(--kd-space-8); align-items: flex-end;
}
.kd-toast {
  background: var(--kd-text); color: var(--kd-surface);
  padding: var(--kd-space-12) var(--kd-space-16);
  border-radius: var(--kd-radius-md); font-size: var(--kd-text-sm);
  box-shadow: var(--kd-shadow-lg); max-width: min(88vw, 380px);
  opacity: 0; transform: translateY(calc(var(--kd-space-8) * -1));
  transition: opacity var(--kd-motion-base) var(--kd-motion-ease),
              transform var(--kd-motion-base) var(--kd-motion-ease);
}
.kd-toast.is-in { opacity: 1; transform: translateY(0); }
.kd-toast--good   { background: var(--kd-good);   color: var(--kd-good-on); }
.kd-toast--danger { background: var(--kd-danger); color: var(--kd-danger-on); }

/* ---------- Dialog ----------

   En dialog som er høyere enn vinduet MÅ kunne rulles. Uten makshøyde vokser
   den ut av skjermen i begge retninger, og fordi overlegget sentrerer, havner
   toppen over vindukanten der ingen rulling når den. Da er både overskriften og
   lagreknappen utilgjengelige, og eneste utvei er å gjøre vinduet større.

   Tre ting løser det sammen:
     - makshøyde på dialogen, slik at den aldri blir større enn vinduet
     - `safe center`, som faller tilbake til toppjustering hvis den likevel blir
       det (svært små vinduer, der paddingen alene er for mye)
     - rulling i KROPPEN, ikke i hele dialogen, slik at tittel og handlinger
       står i ro. Knappen man skal trykke skal ikke kunne rulle bort. */
.kd-overlay {
  position: fixed; inset: 0; z-index: var(--kd-z-modal);
  background: var(--kd-scrim);
  display: grid; place-items: safe center; padding: var(--kd-space-20);
  overflow-y: auto;
}
.kd-dialog {
  background: var(--kd-raised); color: var(--kd-text);
  border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-lg); box-shadow: var(--kd-shadow-lg);
  padding: var(--kd-space-24); max-width: 440px; width: 100%;
  display: flex; flex-direction: column;
  /* dvh tar høyde for adresselinja på mobil; vh står igjen som reserve. */
  max-height: calc(100vh - var(--kd-space-40));
  max-height: calc(100dvh - var(--kd-space-40));
}
.kd-dialog__title   { flex: none; font-size: var(--kd-text-lg); font-weight: var(--kd-weight-semibold); margin: 0 0 var(--kd-space-8); }
/* min-height: 0 er det som faktisk slår på rullingen — uten den nekter et
   fleks-barn å bli mindre enn innholdet sitt, og overløpet kommer tilbake. */
.kd-dialog__body    { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 0 var(--kd-space-20); }
.kd-dialog__actions { flex: none; display: flex; gap: var(--kd-space-8); justify-content: flex-end; }

/* ---------- Laster ---------- */
.kd-skeleton {
  background: linear-gradient(90deg, var(--kd-sunken) 25%, var(--kd-canvas) 50%, var(--kd-sunken) 75%);
  background-size: 200% 100%;
  border-radius: var(--kd-radius-sm);
  animation: kd-shimmer 1.4s infinite linear;
  min-height: var(--kd-space-16);
}
@keyframes kd-shimmer { to { background-position: -200% 0; } }

/* ---------- Verktøylinje / filterrad ---------- */
/* Filtre hører hjemme i ÉN rad over innholdet, aldri spredt utover. */
.kd-toolbar {
  display: flex; align-items: center; gap: var(--kd-space-8); flex-wrap: wrap;
  margin-bottom: var(--kd-space-16);
}
.kd-toolbar > .kd-select, .kd-toolbar > .kd-input { width: auto; min-width: 180px; }

/* ═══════════════ Hentet inn fra appene (0.3.0) ═══════════════
   Komponentene under var bygget for hånd i tre til fem apper hver (kartlagt
   08.10.2026), med like mange ulike utgaver. De er her fordi de går igjen,
   ikke for å gjøre appene like: de er byggeklosser, ikke et oppsett. */

/* ---------- Sidehode ----------
   Tittel, en linje kontekst og sidens handlinger. Bygget for hånd i
   RisaProsjektrom, ITPortefolje, Konsernadmin og RAktiv. */
.kd-sidehode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kd-gap-sm) var(--kd-gap); margin-bottom: var(--kd-gap-lg); }
.kd-sidehode__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--kd-space-4); }
.kd-sidehode__meta { font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.kd-sidehode__handlinger { display: flex; flex-wrap: wrap; gap: var(--kd-space-8); }

/* ---------- Faner ----------
   Valgt fane bæres av en strek og tekstfarge, ikke av en farget flate — så
   den virker også med blekk-aksent. Bygget i fem apper. */
.kd-faner { display: flex; gap: var(--kd-space-4); border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline); overflow-x: auto; }
.kd-fane {
  appearance: none; border: none; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--kd-space-6);
  font: inherit; font-size: var(--kd-control-text); font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary);
  padding: var(--kd-control-py) var(--kd-space-12);
  border-bottom: var(--kd-stroke-emphasis) solid transparent;
  margin-bottom: calc(var(--kd-stroke-hairline) * -1);
}
.kd-fane:hover { color: var(--kd-text); }
.kd-fane[aria-selected="true"], .kd-fane[aria-current] { color: var(--kd-text); border-bottom-color: var(--kd-accent); }
.kd-fane__antall {
  font-size: var(--kd-text-xs); font-variant-numeric: tabular-nums; padding: 0 var(--kd-space-6);
  border-radius: var(--kd-radius-pill); background: var(--kd-sunken); color: var(--kd-text-secondary);
}

/* ---------- Segmentert valg ----------
   Radioknapper som én kontroll: «Les | Rediger», «Dag | Uke | Måned». Med
   data-status på et valg får det statusfargen når det er valgt — brukt til
   svar på kontrollpunkt (ingen funn / observasjon / funn). */
.kd-segment {
  display: inline-flex; gap: var(--kd-space-2); padding: var(--kd-space-2);
  background: var(--kd-sunken); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-knapp-radius, var(--kd-radius-md));
}
.kd-segment > label { position: relative; display: flex; }
.kd-segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kd-segment__valg {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kd-space-6); width: 100%;
  min-height: calc(var(--kd-control-h) - var(--kd-space-6));
  padding: var(--kd-space-4) var(--kd-space-12); border-radius: var(--kd-knapp-radius, var(--kd-radius-sm));
  font-size: var(--kd-control-text); font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary);
  transition: background var(--kd-motion-fast) var(--kd-motion-ease);
}
.kd-segment input:hover + .kd-segment__valg { color: var(--kd-text); }
.kd-segment input:checked + .kd-segment__valg { background: var(--kd-surface); color: var(--kd-text); box-shadow: var(--kd-shadow-sm); }
.kd-segment input:focus-visible + .kd-segment__valg { outline: var(--kd-focus-width) solid var(--kd-accent); outline-offset: var(--kd-focus-offset); }
.kd-segment > [data-status="good"]    input:checked + .kd-segment__valg { background: var(--kd-good);    color: var(--kd-good-on); }
.kd-segment > [data-status="warning"] input:checked + .kd-segment__valg { background: var(--kd-warning); color: var(--kd-warning-on); }
.kd-segment > [data-status="danger"]  input:checked + .kd-segment__valg { background: var(--kd-danger);  color: var(--kd-danger-on); }
/* Fyller bredden, valgene deler den likt — for telefon og felt. */
.kd-segment--fyll { display: flex; width: 100%; }
.kd-segment--fyll > label { flex: 1 1 0; }

/* ---------- Filterbrikker ----------
   Av/på-knapper med antall: «Sperret 3». aria-pressed bærer tilstanden. */
.kd-filter {
  display: inline-flex; align-items: center; gap: var(--kd-space-6);
  min-height: var(--kd-space-32); padding: var(--kd-space-4) var(--kd-space-12);
  border: var(--kd-stroke-control) solid var(--kd-border-control); border-radius: var(--kd-radius-pill);
  background: var(--kd-surface); color: var(--kd-text-secondary);
  font: inherit; font-size: var(--kd-text-sm); font-weight: var(--kd-weight-medium); cursor: pointer; white-space: nowrap;
}
.kd-filter:hover { color: var(--kd-text); background: var(--kd-sunken); }
.kd-filter[aria-pressed="true"] { background: var(--kd-accent-soft); border-color: var(--kd-accent); color: var(--kd-accent-text); font-weight: var(--kd-weight-semibold); }
.kd-filter__antall { font-variant-numeric: tabular-nums; font-weight: var(--kd-weight-semibold); }

/* ---------- Måler ----------
   En stolpe mot et fast tak. Verdien settes som style="--verdi: 40%" og står
   også som tekst ved siden av — stolpen er aldri eneste vei til tallet. */
.kd-maler { display: block; height: var(--kd-space-8); min-width: var(--kd-space-48); background: var(--kd-sunken); border-radius: var(--kd-radius-pill); overflow: hidden; }
.kd-maler > span { display: block; height: 100%; width: var(--verdi, 0%); background: var(--kd-accent); border-radius: inherit; }
.kd-maler--good > span    { background: var(--kd-good); }
.kd-maler--warning > span { background: var(--kd-warning); }
.kd-maler--danger > span  { background: var(--kd-danger); }

/* ---------- Faktaliste ----------
   Feltnavn og verdi. Tom verdi blir en dempet tankestrek, ikke et hull i
   utlegget (Konsernadmin) — og aldri «0», som betyr noe annet. */
.kd-fakta { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--kd-space-6) var(--kd-gap); margin: 0; }
.kd-fakta dt { color: var(--kd-text-secondary); font-size: var(--kd-text-sm); line-height: var(--kd-leading-md); }
.kd-fakta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kd-fakta dd:empty::before { content: "–"; color: var(--kd-text-muted); }

/* ---------- Identitetsprikk ----------
   Farge som IDENTITET (et selskap, en kategori), alltid ved siden av navnet:
   <span class="kd-row"><i class="kd-prikk" style="--prikk: var(--kd-chart-3)"></i>Risa AS</span>
   Konsernadmin: «Den farligste feilen er riktig person, feil tenant, og en
   farge alene kan ingen holdes ansvarlig for.» */
.kd-prikk { display: inline-block; flex: none; width: var(--kd-space-8); height: var(--kd-space-8); border-radius: var(--kd-radius-pill); background: var(--prikk, currentColor); }
.kd-identitet { display: inline-flex; align-items: center; gap: var(--kd-space-6); white-space: nowrap; }

/* ---------- Avatar ---------- */
.kd-avatar {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  width: var(--kd-space-32); height: var(--kd-space-32); border-radius: var(--kd-radius-pill);
  background: var(--kd-accent-soft); color: var(--kd-accent-text);
  font-size: var(--kd-text-xs); font-weight: var(--kd-weight-bold); text-transform: uppercase;
}
.kd-avatar--lg { width: var(--kd-space-48); height: var(--kd-space-48); font-size: var(--kd-text-md); }
.kd-avatar > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Svarlinja ----------
   Når en side finnes for å svare på ETT spørsmål, står svaret øverst som
   typografi — én setning med verb, ingen ramme, ingen bakgrunn. Konsernadmin:
   «Den skal lese som en overskrift i en avis, ikke som enda et kort.» */
.kd-svar { display: flex; gap: var(--kd-gap-sm); align-items: flex-start; margin: 0 0 var(--kd-gap-lg); }
.kd-svar__merke {
  flex: none; display: grid; place-items: center; width: var(--kd-space-40); height: var(--kd-space-40);
  border-radius: var(--kd-radius-pill); font-size: var(--kd-text-xl);
  background: var(--kd-good-soft); color: var(--kd-good-text);
}
.kd-svar--warning .kd-svar__merke { background: var(--kd-warning-soft); color: var(--kd-warning-text); }
.kd-svar--danger  .kd-svar__merke { background: var(--kd-danger-soft);  color: var(--kd-danger-text); }
.kd-svar--info    .kd-svar__merke { background: var(--kd-info-soft);    color: var(--kd-info-text); }
.kd-svar__tekst { margin: 0; font-family: var(--kd-font-heading); font-size: var(--kd-text-2xl); line-height: var(--kd-leading-2xl); font-weight: var(--kd-weight-bold); letter-spacing: -.015em; }
.kd-svar__meta { margin: var(--kd-space-4) 0 0; font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }

/* ---------- Bolk ----------
   En del av en side, skilt med en sperret etikett og en strek ut til kanten —
   i stedet for <h2> inne i et kort. «Streken gjør jobben rammen gjorde, med en
   brøkdel av vekten» (Konsernadmin). */
.kd-bolk + .kd-bolk { margin-top: calc(var(--kd-gap-lg) * 2); }
.kd-bolk__hode {
  display: flex; align-items: center; gap: var(--kd-space-12); margin: 0 0 var(--kd-gap-sm);
  font-size: var(--kd-text-2xs); line-height: var(--kd-leading-2xs); font-weight: var(--kd-weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--kd-text-secondary);
}
.kd-bolk__hode::after { content: ""; flex: 1; border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.kd-bolk__antall { color: var(--kd-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Tidsakse ----------
   For HENDELSER — noe som startet, pågår og slutter. Tre kolonner: tid ·
   skinne · innhold. Tiden i monospace så den står under hverandre. Alvor er et
   merke PÅ skinna: farge OG fyll (--fylt), to signaler. Skinna stopper ved
   ringen, så den er gjennomsiktig og virker på hvilken som helst bunn.

     <ol class="kd-tidsakse">
       <li class="kd-tidsakse__post kd-tidsakse__post--danger kd-tidsakse__post--fylt">
         <time class="kd-tidsakse__tid">03:12</time><span class="kd-tidsakse__merke"></span>
         <div class="kd-tidsakse__innhold">…</div></li> */
/* Skinna er sidens ryggrad, ikke pynt: midt mellom hårstrek og kontrollkant. */
.kd-tidsakse { --tidsakse-skinne: color-mix(in oklab, var(--kd-border-control), var(--kd-border-hairline));
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content var(--kd-space-24) minmax(0, 1fr); column-gap: var(--kd-space-8); }
.kd-tidsakse__post { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding-bottom: var(--kd-gap); color: var(--kd-text-muted); }
.kd-tidsakse__post > * { grid-row: 1; }
.kd-tidsakse__tid { grid-column: 1; font-family: var(--kd-font-mono); font-size: var(--kd-text-sm); line-height: calc(var(--kd-text-md) * var(--kd-leading-md)); color: var(--kd-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kd-tidsakse__merke { grid-column: 2; position: relative; }
.kd-tidsakse__innhold { grid-column: 3; min-width: 0; color: var(--kd-text); }
/* Skinna over ringen … */
.kd-tidsakse__merke::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: var(--kd-stroke-emphasis); height: calc(var(--kd-text-md) * var(--kd-leading-md) / 2 - var(--kd-space-6));
  background: var(--tidsakse-skinne);
}
/* … ringen … */
.kd-tidsakse__merke::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--kd-text-md) * var(--kd-leading-md) / 2); transform: translate(-50%, -50%);
  width: var(--kd-space-12); height: var(--kd-space-12); border-radius: var(--kd-radius-pill);
  border: var(--kd-stroke-emphasis) solid currentColor; box-sizing: border-box;
}
/* … og skinna under, helt ned til neste post. */
.kd-tidsakse__post::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center;
  width: var(--kd-stroke-emphasis); background: var(--tidsakse-skinne);
  margin-top: calc(var(--kd-text-md) * var(--kd-leading-md) / 2 + var(--kd-space-6));
  margin-bottom: calc(var(--kd-gap) * -1);
}
.kd-tidsakse__post:first-child .kd-tidsakse__merke::before,
.kd-tidsakse__post:last-child::before { display: none; }
.kd-tidsakse__post--fylt .kd-tidsakse__merke::after { background: currentColor; }
.kd-tidsakse__post--good    { color: var(--kd-good); }
.kd-tidsakse__post--warning { color: var(--kd-warning); }
.kd-tidsakse__post--danger  { color: var(--kd-danger); }
.kd-tidsakse__post--info    { color: var(--kd-info); }
.kd-tidsakse__post--naa     { color: var(--kd-accent); }

/* ---------- Tallrad ----------
   Nøkkeltall uten kort: tallene står på siden, skilt med en hårstrek. For en
   oversikt der fire bokser med ett tall hver ville vært fire bokser for mye. */
.kd-tallrad { display: flex; flex-wrap: wrap; gap: var(--kd-gap) var(--kd-gap-lg); margin: 0 0 var(--kd-gap-lg); }
.kd-tallrad > * + * { padding-left: var(--kd-gap-lg); border-left: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }

/* ---------- Sidepanel (skuff) ----------
   Detaljen ved siden av lista, ikke i en dialog over den. I en vertsside
   (SharePoint, Teams) skal z-index være --kd-z-host-modal; se README. */
.kd-skuff {
  position: fixed; inset: 0 0 0 auto; z-index: var(--kd-z-modal);
  width: min(100%, var(--kd-skuff-bredde, 28rem));
  display: flex; flex-direction: column;
  background: var(--kd-raised); border-left: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  box-shadow: var(--kd-shadow-lg);
}
.kd-skuff__hode { flex: none; display: flex; align-items: flex-start; gap: var(--kd-space-12); padding: var(--kd-pad); border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.kd-skuff__kropp { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--kd-pad); display: flex; flex-direction: column; gap: var(--kd-gap); }
.kd-skuff__fot { flex: none; display: flex; gap: var(--kd-space-8); justify-content: flex-end; padding: var(--kd-space-12) var(--kd-pad); padding-bottom: max(var(--kd-space-12), env(safe-area-inset-bottom)); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }

/* ---------- Klikkbar tabellrad og klebrig hode ----------
   En rad som åpner noe, skal nås med tastaturet (tabindex="0", Enter OG
   mellomrom) — tre av åtte håndskrevne kopier i Konsernadmin manglet det.
   Valgt rad: tonet flate OG en strek ytterst, to signaler. */
.kd-table tr.kd-klikkbar { cursor: pointer; }
.kd-table tr.kd-klikkbar:focus-visible { outline-offset: calc(var(--kd-focus-width) * -1); }
.kd-table tr[aria-selected="true"] { background: var(--kd-accent-soft); }
.kd-table tr[aria-selected="true"] > :first-child { box-shadow: inset var(--kd-stroke-signal) 0 0 var(--kd-accent); }
.kd-table--klebrig thead th { position: sticky; top: 0; z-index: 1; background: var(--kd-tabellhode-bunn, var(--kd-surface)); }

/* ═══════════════ Valg appen tar (0.5.0) — se docs/valg.md ═══════════════
   Byggeklosser for valg som ikke har et husvalg: hvor navigasjonen står,
   hvordan den grupperes og utvides, og hvor handlingene står. Ingen av dem er
   bundet til en arketype. */

/* ---------- Meny ----------
   Navigasjonen som én byggekloss, uansett hvor den står:
     (ingen)        loddrett — sidemeny, skuff; utvidbare grupper er trekkspill
     --rad          vannrett — toppmeny; utvidbare grupper blir nedtrekk
     --skinne       smal, bare ikoner — mest mulig plass til innholdet
     --bunn         bunnlinje, ikon over tekst — telefon, høyst fem mål

     <nav class="kd-meny" aria-label="Hovedmeny">
       <a class="kd-meny__lenke" href="…" aria-current="page">{ikon}<span class="kd-meny__tekst">Brukere</span> <span class="kd-badge">214</span></a>
       <div class="kd-meny__gruppe"><span class="kd-meny__tittel">Personer</span> <div class="kd-meny__innhold">…lenker…</div></div>
       <details class="kd-meny__gruppe" open><summary class="kd-meny__tittel">Sikkerhet</summary> <div class="kd-meny__innhold">…</div></details>
       <div class="kd-meny__bunn">…det som hører nederst…</div>
     </nav>

   Valgt punkt bæres av flate OG strek (aldri farge alene), så det virker også
   med blekk-aksent. Tittelen på en lenke er tekst for skjermlesere i --skinne;
   gi lenken title="…" så den også er et verktøytips.

   Retningen kan også settes av en forelder med data-meny="topp | skinne | bunn"
   — da holder én bryter på arketypen (eller <html>) for å flytte menyen. */
.kd-meny { display: flex; flex-direction: column; gap: var(--kd-space-2); min-width: 0; }
.kd-meny__lenke {
  display: flex; align-items: center; gap: var(--kd-space-8); position: relative;
  min-height: var(--kd-space-32); padding: var(--kd-space-4) var(--kd-space-8);
  border-radius: var(--kd-radius-sm); border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--kd-text-sm); font-weight: var(--kd-weight-medium);
  color: var(--kd-text-secondary); text-decoration: none; white-space: nowrap;
}
.kd-meny__lenke:hover { background: var(--kd-surface); color: var(--kd-text); }
.kd-meny__lenke[aria-current] {
  background: var(--kd-surface); color: var(--kd-text); font-weight: var(--kd-weight-semibold);
  box-shadow: inset var(--kd-stroke-signal) 0 0 var(--kd-accent);
}
.kd-meny__tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kd-meny__lenke > .kd-badge { margin-left: auto; }
.kd-meny__gruppe { display: flex; flex-direction: column; gap: var(--kd-space-2); margin-top: var(--kd-space-12); }
.kd-meny__innhold { display: flex; flex-direction: column; gap: var(--kd-space-2); }
/* En undermeny: rykket inn under lenken den hører til. */
.kd-meny__innhold--under { padding-left: var(--kd-space-24); }
.kd-meny__tittel {
  display: flex; align-items: center; gap: var(--kd-space-6); list-style: none;
  padding: var(--kd-space-4) var(--kd-space-8);
  font-size: var(--kd-text-2xs); line-height: var(--kd-leading-2xs); font-weight: var(--kd-weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--kd-text-muted);
}
summary.kd-meny__tittel { cursor: pointer; border-radius: var(--kd-radius-sm); }
summary.kd-meny__tittel::-webkit-details-marker { display: none; }
/* Vinkelen etter tittelen i en utvidbar gruppe: ned når åpen, til høyre når lukket. */
summary.kd-meny__tittel::after {
  content: ""; flex: none; margin-left: auto; width: var(--kd-space-6); height: var(--kd-space-6);
  border-right: var(--kd-stroke-control) solid currentColor; border-bottom: var(--kd-stroke-control) solid currentColor;
  transform: rotate(-45deg); transition: transform var(--kd-motion-fast) var(--kd-motion-ease);
}
details[open] > summary.kd-meny__tittel::after { transform: rotate(45deg); }
.kd-meny__bunn { margin-top: auto; padding-top: var(--kd-space-12); display: flex; flex-direction: column; gap: var(--kd-space-2); }

/* --rad: toppmeny. Statiske grupper legger seg inn i raden uten tittel;
   utvidbare grupper blir nedtrekk med tittelen som knapp. */
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--kd-space-4); }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__lenke { width: auto; }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__lenke[aria-current] { box-shadow: inset 0 calc(var(--kd-stroke-signal) * -1) 0 var(--kd-accent); }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__gruppe, :is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__innhold { flex-direction: row; align-items: center; margin-top: 0; }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) div.kd-meny__gruppe > .kd-meny__tittel, :is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__innhold--under { display: none; }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) details.kd-meny__gruppe { position: relative; }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) summary.kd-meny__tittel {
  min-height: var(--kd-space-32); font-size: var(--kd-text-sm); font-weight: var(--kd-weight-medium);
  letter-spacing: normal; text-transform: none; color: var(--kd-text-secondary);
}
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) summary.kd-meny__tittel:hover { background: var(--kd-surface); color: var(--kd-text); }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) summary.kd-meny__tittel::after { transform: rotate(45deg); }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) details.kd-meny__gruppe > .kd-meny__innhold {
  position: absolute; top: calc(100% + var(--kd-space-4)); left: 0; z-index: var(--kd-z-dropdown);
  flex-direction: column; align-items: stretch; min-width: max-content; padding: var(--kd-space-4);
  background: var(--kd-raised); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-md); box-shadow: var(--kd-shadow-lg);
}
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) details.kd-meny__gruppe > .kd-meny__innhold .kd-meny__lenke { width: 100%; }
:is(.kd-meny--rad, [data-meny="topp"] .kd-meny) .kd-meny__bunn { margin: 0 0 0 auto; padding: 0; flex-direction: row; }

/* --skinne: bare ikoner. */
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) { align-items: center; }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__lenke { width: var(--kd-space-40); height: var(--kd-space-40); justify-content: center; padding: 0; }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__lenke > .kd-ikon { font-size: var(--kd-text-lg); }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) div.kd-meny__gruppe > .kd-meny__tittel, :is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__innhold--under { display: none; }
/* En utvidbar gruppe i skinna: tittelen blir et lite merke med vinkel (og tallet,
   hvis det står der), så gruppen fortsatt kan foldes ut. En lukket <details>
   skjuler innholdet sitt uansett CSS, så tittelen MÅ synes. */
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) summary.kd-meny__tittel { font-size: 0; justify-content: center; gap: var(--kd-space-4); padding: var(--kd-space-6); }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) summary.kd-meny__tittel::after { margin-left: 0; }
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__gruppe { align-items: center; padding-top: var(--kd-space-8); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
/* Et tall blir en prikk: en skinne har ikke plass til tall, og det står i title. */
:is(.kd-meny--skinne, [data-meny="skinne"] .kd-meny) .kd-meny__lenke > .kd-badge {
  position: absolute; top: var(--kd-space-4); right: var(--kd-space-4); margin: 0;
  width: var(--kd-space-8); height: var(--kd-space-8); min-height: 0; padding: 0; overflow: hidden; color: transparent;
}

/* --bunn: bunnlinja på telefon. Høyst fem mål; flere hører i en meny. */
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) {
  position: sticky; bottom: 0; z-index: var(--kd-z-nav);
  flex-direction: row; gap: 0; padding-bottom: env(safe-area-inset-bottom);
  background: var(--kd-surface); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) .kd-meny__lenke {
  flex: 1 1 0; flex-direction: column; justify-content: center; gap: var(--kd-space-2);
  min-height: var(--kd-space-64); border-radius: 0; text-align: center;
  font-size: var(--kd-text-xs); font-weight: var(--kd-weight-semibold);
}
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) .kd-meny__lenke > .kd-ikon { font-size: var(--kd-text-xl); }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) .kd-meny__tekst { flex: none; }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) .kd-meny__lenke[aria-current] { background: none; box-shadow: inset 0 var(--kd-stroke-signal) 0 var(--kd-accent); }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) .kd-meny__lenke > .kd-badge { position: absolute; top: var(--kd-space-6); left: calc(50% + var(--kd-space-8)); margin: 0; }
/* Grupper i bunnlinja: en statisk gruppe løses opp i linja; en utvidbar gruppe
   blir ett punkt som åpner en meny OPPOVER — slik «Mer» pleier å virke på telefon. */
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) div.kd-meny__gruppe,
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) div.kd-meny__gruppe > .kd-meny__innhold { display: contents; }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) div.kd-meny__gruppe > .kd-meny__tittel { display: none; }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) details.kd-meny__gruppe { position: relative; flex: 1 1 0; margin: 0; }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) summary.kd-meny__tittel {
  flex-direction: column; justify-content: center; gap: var(--kd-space-2); height: 100%;
  min-height: var(--kd-space-64); padding: var(--kd-space-4); border-radius: 0;
  font-size: var(--kd-text-xs); font-weight: var(--kd-weight-semibold); letter-spacing: normal; text-transform: none;
  color: var(--kd-text-secondary);
}
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) summary.kd-meny__tittel::after { order: -1; margin: 0 0 var(--kd-space-4); transform: rotate(-135deg); }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) details[open] > summary.kd-meny__tittel::after { transform: rotate(45deg); }
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) details.kd-meny__gruppe > .kd-meny__innhold {
  position: absolute; bottom: calc(100% + var(--kd-space-4)); right: 0; z-index: var(--kd-z-dropdown);
  min-width: max-content; padding: var(--kd-space-4);
  background: var(--kd-raised); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-md); box-shadow: var(--kd-shadow-lg);
}
:is(.kd-meny--bunn, [data-meny="bunn"] .kd-meny) details.kd-meny__gruppe > .kd-meny__innhold .kd-meny__lenke {
  flex-direction: row; min-height: var(--kd-space-40); font-size: var(--kd-text-sm); text-align: left;
}


/* ---------- Utvid ----------
   «Vis mer», trekkspill, en bolk som kan foldes ut. Bygget på <details>, så det
   virker uten JavaScript og med tastatur. Konsernadmin: «Brett sammen det
   kjedelige, aldri funnet.»
     <details class="kd-utvid"><summary>Løst nylig <span class="kd-utvid__meta">4</span></summary>
       <div class="kd-utvid__innhold">…</div></details> */
.kd-utvid { border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.kd-utvid:last-of-type { border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.kd-utvid > summary {
  display: flex; align-items: center; gap: var(--kd-space-12); list-style: none; cursor: pointer;
  min-height: var(--kd-control-h); padding: var(--kd-space-8) var(--kd-space-4);
  font-weight: var(--kd-weight-semibold);
}
.kd-utvid > summary::-webkit-details-marker { display: none; }
.kd-utvid > summary::before {
  content: ""; flex: none; width: var(--kd-space-8); height: var(--kd-space-8);
  border-right: var(--kd-stroke-control) solid currentColor; border-bottom: var(--kd-stroke-control) solid currentColor;
  transform: rotate(-45deg); transition: transform var(--kd-motion-fast) var(--kd-motion-ease);
}
.kd-utvid[open] > summary::before { transform: rotate(45deg); }
.kd-utvid__meta { margin-left: auto; font-weight: var(--kd-weight-normal); font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.kd-utvid__innhold { padding: 0 var(--kd-space-4) var(--kd-gap) calc(var(--kd-space-4) + var(--kd-space-8) + var(--kd-space-12)); }
/* Uten streker — som «vis mer» i løpende tekst. */
.kd-utvid--stille, .kd-utvid--stille:last-of-type { border: none; }

/* ---------- Nedtrekk ----------
   «Mer»-menyen: handlinger som brukes sjelden, eller valg som ikke får plass.
     <details class="kd-nedtrekk"><summary class="kd-btn">Mer</summary>
       <div class="kd-nedtrekk__meny"><button class="kd-nedtrekk__valg">…</button></div></details>
   <details> lukkes ikke ved klikk utenfor av seg selv. Denne linja gjør det:
     addEventListener('click', (e) => document.querySelectorAll('.kd-nedtrekk[open], .kd-meny--rad details[open]')
       .forEach((d) => { if (!d.contains(e.target)) d.open = false; })); */
.kd-nedtrekk { position: relative; display: inline-block; }
.kd-nedtrekk > summary { list-style: none; }
.kd-nedtrekk > summary::-webkit-details-marker { display: none; }
.kd-nedtrekk__meny {
  position: absolute; top: calc(100% + var(--kd-space-4)); left: 0; z-index: var(--kd-z-dropdown);
  min-width: max-content; display: flex; flex-direction: column; padding: var(--kd-space-4);
  background: var(--kd-raised); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-md); box-shadow: var(--kd-shadow-lg);
}
.kd-nedtrekk--hoyre .kd-nedtrekk__meny { left: auto; right: 0; }
.kd-nedtrekk--opp .kd-nedtrekk__meny { top: auto; bottom: calc(100% + var(--kd-space-4)); }
.kd-nedtrekk__valg {
  display: flex; align-items: center; gap: var(--kd-space-8); width: 100%; text-align: left;
  min-height: var(--kd-space-32); padding: var(--kd-space-6) var(--kd-space-12);
  border: none; background: none; border-radius: var(--kd-radius-sm); cursor: pointer;
  font: inherit; font-size: var(--kd-text-sm); color: var(--kd-text); text-decoration: none; white-space: nowrap;
}
.kd-nedtrekk__valg:hover { background: var(--kd-sunken); }
.kd-nedtrekk__valg--fare { color: var(--kd-danger-text); }
.kd-nedtrekk__skille { margin: var(--kd-space-4) 0; border: 0; border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }

/* ---------- Flytende handling ----------
   Når én handling dominerer («Ny registrering», «Ta bilde»), kan den flyte
   over innholdet nederst — innen tommelrekkevidde, alltid synlig. Bare én per
   skjerm, og bare når den ikke dekker noe som må leses. I en vertsside: se
   README om lag. */
.kd-flytende {
  position: fixed; z-index: var(--kd-z-sticky);
  right: max(var(--kd-space-16), env(safe-area-inset-right));
  bottom: max(var(--kd-space-16), env(safe-area-inset-bottom));
  box-shadow: var(--kd-shadow-lg);
}
.kd-flytende--midt { right: auto; left: 50%; transform: translateX(-50%); }

/* ═══════════════ Responsivt ═══════════════ */
@media (max-width: 900px) {
  .kd-cols-2, .kd-cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .kd-card   { padding: var(--kd-card-pad, var(--kd-space-16)); }
}

/* ═══════════════ Tilgjengelighet ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .kd *, .kd *::before, .kd *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Windows høykontrastmodus tar bort bakgrunnsfarger — da må kanten bære formen. */
@media (forced-colors: active) {
  .kd-btn, .kd-card, .kd-input, .kd-select, .kd-choice, .kd-dialog { border: 1px solid; }
  .kd-badge, .kd-chip { border: 1px solid; }
  .kd-filter, .kd-segment, .kd-maler, .kd-skuff { border: 1px solid; }
  .kd-segment input:checked + .kd-segment__valg, .kd-filter[aria-pressed="true"] { outline: 2px solid; }
  .kd-fane[aria-selected="true"], .kd-fane[aria-current] { border-bottom-color: Highlight; }
  .kd :focus-visible { outline: 2px solid; }
}

.kd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}