/* ═══════════════════════════════════════════════════════════════════════
   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 ---------- */
*, *::before, *::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; }

/* Fokusring på ALT som kan fokuseres — ikke bare knapper.
   Dette var det største enkeltavviket i de tre eksisterende appene. */
.kd :focus-visible {
  outline: var(--kd-focus-width) solid var(--kd-accent);
  outline-offset: var(--kd-focus-offset);
  border-radius: var(--kd-radius-xs);
}

/* ---------- 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);
}
.kd-title    { 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-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-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; }

/* ---------- Applikasjonsskall ---------- */
.kd-topbar {
  display: flex; align-items: center; gap: var(--kd-space-16); flex-wrap: wrap;
  padding: var(--kd-space-12) var(--kd-space-20);
  background: var(--kd-surface);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  position: sticky; top: 0; z-index: var(--kd-z-sticky);
}
.kd-topbar__brand { display: flex; align-items: center; gap: var(--kd-space-12); margin-right: auto; min-width: 0; }
.kd-topbar__name  { font-weight: var(--kd-weight-bold); font-size: var(--kd-text-lg); letter-spacing: -.015em; white-space: nowrap; }
.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; }

.kd-wrap  { max-width: 1200px; margin: 0 auto; padding: var(--kd-space-24) var(--kd-space-20) var(--kd-space-96); }
.kd-shell { display: flex; gap: var(--kd-space-24); align-items: flex-start; }
.kd-main  { flex: 1; min-width: 0; }

/* Navigasjon: skinne på PC, bunnlinje på mobil */
.kd-nav {
  position: sticky; top: calc(var(--kd-space-64) + var(--kd-space-12));
  flex: none; width: 210px;
  display: flex; flex-direction: column; gap: var(--kd-space-2);
  background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-lg); padding: var(--kd-space-8); box-shadow: var(--kd-shadow-md);
}
.kd-nav__item {
  display: flex; align-items: center; gap: var(--kd-space-12);
  width: 100%; text-align: left; border: none; background: none;
  padding: var(--kd-space-12); border-radius: var(--kd-radius-md);
  font: inherit; font-size: var(--kd-text-md); font-weight: var(--kd-weight-semibold);
  color: var(--kd-text-secondary); cursor: pointer;
  transition: background var(--kd-motion-fast) var(--kd-motion-ease);
}
.kd-nav__item:hover { background: var(--kd-sunken); color: var(--kd-text); }
.kd-nav__item[aria-current], .kd-nav__item.is-active { background: var(--kd-accent-soft); color: var(--kd-accent-text); }
.kd-nav__icon { font-size: var(--kd-text-lg); line-height: 1; flex: none; }

/* ---------- Kolonner ---------- */
.kd-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-space-20); align-items: start; }
.kd-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kd-space-20); align-items: start; }
.kd-col    { display: flex; flex-direction: column; gap: var(--kd-space-16); min-width: 0; }
.kd-stack  { display: flex; flex-direction: column; gap: var(--kd-space-16); }
.kd-row    { display: flex; align-items: center; gap: var(--kd-space-12); flex-wrap: wrap; }
.kd-spacer { margin-left: auto; }

/* ---------- Kort ---------- */
.kd-card {
  background: var(--kd-surface);
  border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-radius: var(--kd-radius-lg);
  padding: var(--kd-space-20);
  box-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. */
.kd-card__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kd-space-12); margin-bottom: var(--kd-space-16); }
.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; }

/* ---------- 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 ---------- */
.kd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kd-space-8);
  padding: var(--kd-space-12) var(--kd-space-20);
  min-height: var(--kd-target-min);
  font: inherit; font-size: var(--kd-text-md); 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-radius-md);
  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%; }

.kd-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--kd-space-40); height: var(--kd-space-40);
  border: var(--kd-stroke-control) solid var(--kd-border-control);
  border-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-space-12);
  /* 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. */
.kd-alert__icon { flex: none; font-size: var(--kd-text-lg); line-height: var(--kd-leading-md); }
.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-space-12);
  padding: var(--kd-space-12) 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-space-12);
  border-bottom: var(--kd-stroke-emphasis) solid var(--kd-border-hairline);
  white-space: nowrap;
}
.kd-table td {
  padding: var(--kd-space-12);
  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); }
.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-surface); 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; }

/* ═══════════════ Responsivt ═══════════════ */
@media (max-width: 900px) {
  .kd-cols-2, .kd-cols-3 { grid-template-columns: 1fr; }
  .kd-shell { display: block; }
  .kd-nav {
    position: fixed; inset: auto 0 0 0; width: auto;
    flex-direction: row; border-radius: 0; border: none;
    border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
    padding: var(--kd-space-6) var(--kd-space-8); gap: var(--kd-space-4);
    z-index: var(--kd-z-nav); box-shadow: var(--kd-shadow-lg);
    /* Respekter hjemknapp-området på iOS. */
    padding-bottom: max(var(--kd-space-6), env(safe-area-inset-bottom));
  }
  /* Bunnlinja er laget for en håndfull destinasjoner. Med mange punkt ble hver
     kolonne så smal at teksten brøt til én bokstav per linje, og siden begynte å
     rulle sidelengs. `flex: 1 0 <basis>` gjør at punktene deler bredden når de er
     få, men aldri krymper under lesbar bredde — da ruller linja i sin egen boks
     i stedet, og siden står i ro. Trenger du mer enn en håndfull valg, er det et
     tegn på at de hører i et ark eller en meny, ikke i bunnlinja. */
  .kd-nav { overflow-x: auto; }
  .kd-nav__item {
    flex: 1 0 var(--kd-space-64); width: auto;
    flex-direction: column; gap: var(--kd-space-2); text-align: center;
    font-size: var(--kd-text-2xs); padding: var(--kd-space-8) var(--kd-space-4);
  }
  .kd-nav__icon { font-size: var(--kd-text-xl); }
  .kd-main { padding-bottom: var(--kd-space-80); }
  .kd-wrap { padding: var(--kd-space-16) var(--kd-space-16) var(--kd-space-40); }
}
@media (max-width: 540px) {
  .kd-topbar { padding: var(--kd-space-8) var(--kd-space-16); gap: var(--kd-space-12); }
  .kd-card   { padding: var(--kd-space-16); }
  /* En enslig knapp skal fylle bredden på en smal skjerm. Men i en rad som
     ALLEREDE ligger vannrett — topplinja, en verktøylinje, en dialogs
     handlinger — blir hver knapp da én rad for seg, og topplinja fire rader
     høy. Unntaket gjaldt bare `.kd-row`; det må gjelde alle radbeholderne. */
  .kd-btn    { width: 100%; }
  :is(.kd-row, .kd-topbar, .kd-toolbar, .kd-card__head, .kd-dialog__actions) > .kd-btn { width: auto; }
}

/* ═══════════════ 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 :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;
}