/* ═══════════════════════════════════════════════════════════════════════
   Startsiden — appens lag (lastes etter kd-core, temaene og components.css)

   Farge, typografi og rytme kommer KUN fra --kd-*. Geometrien (bredder og
   brytepunkter) er produktets og har navn under (spesifikasjonen kap. 17.4).
   Ingen --kd-* overstyres her, så kontrastkontrakten måler KonsernDesigns
   palett uendret. Ingen inline-stil og ingen <style> (CSP style-src 'self').

   Portet fra prototypen (prototype/app.css) til v0.1: Hjem, Verktøy, Søk, Meg og
   Redaktør. Det prototypen hadde til stripa, viktig melding, Din første tid og
   kontrollpanelet er ute.

   ── Felles klasser sidene bruker ─────────────────────────────────────────
   .app-side            Innholdsbredden (--app-innhold-maks) med sidemarg
   .app-hopp            «Hopp til innholdet», synlig ved fokus
   .app-topp            Topplinja med merkekanten (felles.js tegner den)
   .app-sok             Søkefeltet med × som tømmer det (felles.js). Søket filtrerer siden, uten nedtrekksliste
   .app-etikett         Systemets etikett: «PRØV» på søkesiden, seksjonene i Redaktør
   .app-lenke           Lenke i tekst: aksentens tekstfarge + understrek
   .app-tast            Tastetrykk (<kbd>)
   .app-rader           Liste med rader (<ul>), uten punkter
   .app-rutenett        Kategoriene på Hjem i faste kolonner over hele bredden (.app-kolonne); forside.js
                        regner ut hvilken kolonne en kategori står i, én gang fra hele katalogen
   .app-gruppe          En kategori (eller Egne snarveier); --alleskjult = alt er skjult: én linje nederst
   .app-semer           «Se mer (N)» nederst i kategorien; --linje = kategorien der alt er skjult
   .app-prog            Ett program på Hjem og i Verktøy: app-ikon 32 px, navn, system. --skjult, --rydd, --enter
   .app-flate--katalog  Verktøy, og Hjem mens man søker: det skjulte står på plassen sin, dempet, med «Skjult på Hjem»
   .app-sokstatus       Linja over treffene: antallet, hva Enter åpner, og «Vis alt igjen». .app-sokingen: ingen treff
   .app-velkommen       Velkomstlinja over kategoriene, med snarveiene fra Workspace 365 (står til den lukkes)
   .app-w365linje       «Vi fant 5 snarveier i Workspace 365» med «Ta dem med» og «Nei takk» (w365.js)
   .app-sesom           Båndet under topplinja i «Se som» (felles.js); .app-sesom-treff = personsøket i dialogen
   .app-flate__linje    Raden over kategoriene: «Mest brukt» (.app-linje) og «Rediger» til høyre
   .app-rydd            Båndet i Rediger; .app-bryter = «Vises / Skjult» på raden
   .app-brikker         Rad med filterbrikker (.kd-filter) som brytes
   .app-bunn            Bunnlinja
   .app-popover         Menyen ved et element (SS.meny)
   .app-skjerm          Skjerm uten modell: innloggingen feilet, eller API-et svarer ikke
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --app-egne-treffmal: 44px;
  --app-innhold-maks: 1392px;                    /* forsiden ved 1440 */
  --app-sok-bredde: clamp(360px, 32vw, 560px);   /* søkefeltet i topplinja */
  --app-kolonne-min: 300px;                      /* minste bredde på en gruppe */
  --app-hjem-kolonne: 16rem;                     /* minste bredde på en kategorikolonne på Hjem: 5 ved 1440, 3 ved 1024, 1 under 640 (forside.js regner antallet ut). Navnekontrollen i Redaktør bruker den som «smaleste kolonne» */
  --app-treff-min: 2rem;                         /* minste treffflate for «Skjul» og «⋯» (32 px) */
  --app-rydd-kolonne: 3.25rem;                   /* fast kontrollkolonne til høyre i Rediger: bryteren (Egne snarveier har nytt navn og fjern og trenger mer) */
  --app-ikon: 2rem;                              /* app-ikonet på raden på Hjem (32 px) */
  --app-ikon-hjorne: 23%;                        /* hjørnene på app-ikonet, som i merkene i merker/ */
  --app-bryter-bredde: 2rem;                     /* bryteren «Vises / Skjult» i Rediger */
  --app-bryter-hoyde: 1.125rem;
  --app-bryter-knapp: .75rem;
  --app-leselinje: 68ch;                         /* tekst som leses: forklaringer, personvern */
  --app-red-meny: 220px;
  --app-red-panel: 640px;
  --app-merkekant: var(--kd-stroke-signal);      /* merkefargen øverst: 4 px */
  --app-nedtrekk-bredde: 22rem;                  /* Hjelp og Meg */
  --app-meny-min: 15rem;                         /* «⋯»-menyen */
  --app-dialog-bredde: 32rem;                    /* dialogene (Hvorfor, Gi nytt navn, Ny egen lenke) */
  --app-baand-tekst: 18rem;                      /* teksten i velkomstlinja og i Rediger-båndet før knappene brytes */
  --app-merke: 1.5rem;                           /* ikonplassen på raden: leverandørmerke, bokstav eller ikon (24 px) */
  --app-assistent-bredde: 44rem;
  --app-sesom-treffliste: 20rem;                 /* høyden på trefflista i «Se som» før den ruller (8–9 personer) */
  --app-assistent-hoyde: 74dvh;
  --app-rad-luft: var(--kd-space-4);             /* luft over og under en programrad på Hjem og Verktøy */
  --app-rad-tekst: var(--kd-text-md);            /* navnet på programraden */
  --app-gruppe-luft: var(--kd-space-16);         /* mellom gruppene i en kolonne */
}

/* «Tettere liste» (Meg › Utseende) setter data-tetthet="kompakt" på <html>. Systemets tetthetstokens gjelder knapper og
   tabeller, men programradene har egne mål, så de må følge med her. Før 12.11 gjorde bryteren ingenting på Hjem (Thomas).
   Berøringsskjerm får aldri kompakt (felles.js). */
[data-tetthet="kompakt"] {
  --app-ikon: 1.5rem;
  --app-rad-luft: var(--kd-space-2);
  --app-rad-tekst: var(--kd-text-sm);
  --app-gruppe-luft: var(--kd-space-8);
}

/* Ett svar under søket. Åpnes bare på brukerens initiativ og dekker ikke hele arbeidsflaten. */
.app-sok__spor { position: absolute; right: var(--kd-space-40); top: 50%; transform: translateY(-50%); }
.app-sok--spor .app-sok__felt { padding-right: calc(var(--kd-space-96) + var(--kd-space-32)); }
.app-assistent-anker { grid-area: sok; position: relative; align-self: stretch; justify-self: center; width: min(100%, var(--app-sok-bredde)); pointer-events: none; }
.app-assistent {
  position: absolute; top: 100%; right: 0; pointer-events: auto;
  width: min(var(--app-assistent-bredde), calc(100vw - 2 * var(--kd-space-24)));
  max-height: var(--app-assistent-hoyde); overflow: auto; overscroll-behavior: contain;
  padding: var(--kd-space-24); background: var(--kd-surface); color: var(--kd-text);
  border: var(--kd-stroke-hairline) solid var(--kd-border-control); border-radius: var(--kd-radius-md);
  box-shadow: var(--kd-shadow-lg); font-size: var(--kd-text-md); line-height: var(--kd-leading-md);
  overflow-wrap: anywhere;
}
.app-assistent__hode, .app-assistent__bunn { display: flex; align-items: center; justify-content: space-between; gap: var(--kd-space-16); }
.app-assistent__hode h2 { margin: 0; }
.app-assistent__sporsmal { font-size: var(--kd-text-lg); font-weight: var(--kd-weight-semibold); margin-block: var(--kd-space-16); }
.app-assistent__rett > div { display: flex; gap: var(--kd-space-8); flex-wrap: wrap; margin-top: var(--kd-space-8); }
.app-assistent__snarvei { display: inline-flex; align-items: center; gap: var(--kd-space-8); min-height: var(--kd-target-min); padding: var(--kd-space-8) var(--kd-space-12); background: var(--kd-sunken); border-radius: var(--kd-radius-sm); color: var(--kd-text); text-decoration: none; }
.app-assistent__snarvei:hover { outline: var(--kd-stroke-hairline) solid var(--kd-border-control); }
.app-assistent__snarvei small, .app-assistent__bunn small { display: block; color: var(--kd-text-secondary); font-size: var(--kd-text-xs); }
.app-assistent__svar { margin-top: var(--kd-space-20); }
.app-assistent__svar p { margin-block: var(--kd-space-12); }
.app-assistent__svar a { color: var(--kd-accent-text); text-decoration: underline; }
.app-assistent__melding { font-size: var(--kd-text-sm); color: var(--kd-text-secondary); margin-block: var(--kd-space-12); }
.app-assistent__kilder ul { display: flex; gap: var(--kd-space-12); flex-wrap: wrap; list-style: none; padding: 0; margin-block: var(--kd-space-8) var(--kd-space-20); }
.app-assistent__bunn { border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); padding-top: var(--kd-space-12); font-size: var(--kd-text-sm); }
.app-assistent__stemmer { display: flex; }
.app-assistent__oppfolging { display: flex; gap: var(--kd-space-8); margin-top: var(--kd-space-16); }
.app-assistent__oppfolging input { min-width: 0; flex: 1; }
@media (max-width: 640px) {
  .app-assistent-anker { position: static; }
  .app-assistent { left: 0; right: 0; width: 100%; max-height: calc(100dvh - 12rem); padding: var(--kd-space-16); border-radius: 0 0 var(--kd-radius-md) var(--kd-radius-md); }
}

/* Brytepunktene (verdiene må stå i mediespørringene; CSS tillater ikke
   variabler der):
     --app-brudd-topplinje 1200px  menyen flytter til rad 2
     --app-brudd-mobil      640px  stablet; mobilappen har sitt eget skall */

/* ───────────────────────── Grunnlag ───────────────────────── */

body.kd { min-height: 100vh; display: flex; flex-direction: column; }
body.kd > main { flex: 1 0 auto; }
html { scroll-padding-top: var(--kd-space-24); }

.app-side {
  width: 100%;
  max-width: calc(var(--app-innhold-maks) + 2 * var(--kd-space-24));
  margin-inline: auto;
  padding-inline: var(--kd-space-24);
}
.app-lesbar { max-width: var(--app-leselinje); }

.app-hopp {
  position: absolute; left: var(--kd-space-16); top: var(--kd-space-8); z-index: var(--kd-z-toast);
  padding: var(--kd-space-8) var(--kd-space-12); background: var(--kd-surface); color: var(--kd-text);
  border-radius: var(--kd-radius-sm); box-shadow: var(--kd-shadow-md);
  transform: translateY(-200%);
}
.app-hopp:focus { transform: none; }

.app-etikett {
  margin: 0; font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs);
  font-weight: var(--kd-weight-bold); letter-spacing: .07em; text-transform: uppercase;
  color: var(--kd-text-secondary);
}
.app-etikett__antall { margin-left: var(--kd-space-6); color: var(--kd-text); font-variant-numeric: tabular-nums; }

.app-lenke {
  color: var(--kd-accent-text); text-decoration: underline;
  text-decoration-thickness: var(--kd-stroke-hairline); text-underline-offset: .2em;
}
.app-lenke:hover { text-decoration-thickness: var(--kd-stroke-emphasis); }
button.app-lenke { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.app-tast {
  display: inline-block; font-family: var(--kd-font-mono); font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs);
  padding: 0 var(--kd-space-6); border: var(--kd-stroke-hairline) solid var(--kd-border-control);
  border-radius: var(--kd-radius-xs); color: var(--kd-text-secondary); background: var(--kd-surface); white-space: nowrap;
}

.app-brikker { display: flex; flex-wrap: wrap; gap: var(--kd-space-8); }

/* ───────────────────────── Topplinja ─────────────────────────
   Merkekanten (--kd-brand-base) er det eneste stedet merkefargen står som
   flate, sammen med logoen. Primærknapp, valgt meny og fokus bruker
   --kd-accent (blekk i Risa, så rødt aldri betyr både «Risa» og «fare»). */

.app-topp {
  position: relative; z-index: var(--kd-z-nav);
  background: var(--kd-surface);
  border-top: var(--app-merkekant) solid var(--kd-brand-base);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
/* Risa: rød topplinje i lyst tema, med det hvite ordmerket (Thomas 06.11.2026: #D9001C). Mørkt tema beholder den mørke
   linja, der det hvite merket også står. Fargene i logoen, menyen og knappene i linja blir hvite ved at tokenene
   overstyres bare der. Søkefeltet og nedtrekksmenyene beholder sine. KonsernDesign har #D5001C som Risas merkefarge.
   Den endres ikke her, fordi apper som finnes beholder utseendet sitt. Temaet kan være satt (data-theme) eller følge
   systemet, derfor to like blokker. */
:root { --app-risa-rod: #D9001C; }
:root[data-brand="risa"][data-theme="light"] .app-topp { background: var(--app-risa-rod); border-top-color: var(--app-risa-rod); }
:root[data-brand="risa"][data-theme="light"] :is(.app-topp__logo, .app-topp__meny, .app-toppknapp, .app-red-brodsmule) {
  --kd-text: var(--kd-accent-on); --kd-text-secondary: var(--kd-accent-on); --kd-text-muted: var(--kd-accent-on); --kd-accent: var(--kd-accent-on);
  --kd-surface: color-mix(in srgb, var(--kd-accent-on) 16%, transparent); --kd-sunken: color-mix(in srgb, var(--kd-accent-on) 16%, transparent);
}
@media (prefers-color-scheme: light) {
  :root[data-brand="risa"]:not([data-theme="dark"]) .app-topp { background: var(--app-risa-rod); border-top-color: var(--app-risa-rod); }
  :root[data-brand="risa"]:not([data-theme="dark"]) :is(.app-topp__logo, .app-topp__meny, .app-toppknapp, .app-red-brodsmule) {
    --kd-text: var(--kd-accent-on); --kd-text-secondary: var(--kd-accent-on); --kd-text-muted: var(--kd-accent-on); --kd-accent: var(--kd-accent-on);
    --kd-surface: color-mix(in srgb, var(--kd-accent-on) 16%, transparent); --kd-sunken: color-mix(in srgb, var(--kd-accent-on) 16%, transparent);
  }
}
.app-topp__indre {
  display: grid; align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "logo meny sok handlinger";
  column-gap: var(--kd-space-24);
  min-height: var(--kd-space-64);
}

.app-topp__logo {
  grid-area: logo; display: inline-flex; align-items: center; gap: var(--kd-space-8);
  min-height: var(--kd-target-min); color: var(--kd-text); text-decoration: none;
}
.app-logo__ord { height: var(--kd-space-24); width: auto; display: block; }
.app-logo__navn { font-family: var(--kd-font-heading); font-size: var(--kd-text-lg); font-weight: var(--kd-weight-bold); letter-spacing: -.01em; }

/* Menyen: Hjem og Verktøy, valgt punkt med flate og strek (aldri farge alene).
   Lenkene fyller hele høyden, så streken under «Hjem» står på kanten. */
.app-topp__meny { grid-area: meny; align-self: stretch; }
.app-topp__meny.kd-meny--rad { flex-wrap: nowrap; align-items: stretch; gap: 0; }
.app-topp__meny .kd-meny__lenke {
  min-height: var(--kd-target-min); padding-inline: var(--kd-space-12);
  border-radius: 0; font-size: var(--kd-text-sm);
}
.app-topp__meny .kd-meny__lenke:hover { background: var(--kd-sunken); }
.app-topp__meny .kd-meny__lenke[aria-current] { background: none; }
/* Selskapets egne menyknapper (Personalhåndboka) går ut av Startsiden: ut-tegnet etter navnet sier at de åpnes i en ny fane. */
.app-topp__meny .app-topp__ut { gap: var(--kd-space-4); }
.app-topp__ut .kd-ikon { font-size: var(--kd-text-xs); flex: none; }

.app-topp__handlinger { grid-area: handlinger; display: flex; align-items: center; gap: var(--kd-space-4); justify-self: end; }
.app-toppknapp {
  display: inline-flex; align-items: center; gap: var(--kd-space-6);
  min-height: var(--kd-target-min); padding: 0 var(--kd-space-8);
  border-radius: var(--kd-knapp-radius, var(--kd-radius-sm));
  font-size: var(--kd-text-sm); font-weight: var(--kd-weight-medium); color: var(--kd-text-secondary);
  cursor: pointer; white-space: nowrap; list-style: none;
}
.app-toppknapp::-webkit-details-marker { display: none; }
.app-toppknapp:hover, details[open] > .app-toppknapp { background: var(--kd-sunken); color: var(--kd-text); }
.app-toppknapp .kd-ikon { font-size: var(--kd-text-md); }
.app-toppknapp .app-toppknapp__pil { font-size: var(--kd-text-xs); }
.app-toppknapp__smal { display: none; }

/* min-width: 0 opphever KonsernDesigns max-content, ellers blir en lang
   tekst like bred som den er lang (målt: 440 px i et vindu på 390). */
.app-nedtrekk { width: min(var(--app-nedtrekk-bredde), calc(100vw - 2 * var(--kd-space-16))); min-width: 0; white-space: normal; }
.app-nedtrekk .kd-nedtrekk__valg .kd-ikon { color: var(--kd-text-secondary); }
.app-meg__hode { display: flex; align-items: center; gap: var(--kd-space-12); padding: var(--kd-space-8) var(--kd-space-12); }
.app-meg__hode strong { display: block; }
.app-meg__selskap { display: block; font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.app-meg__valg { display: flex; flex-direction: column; gap: var(--kd-space-6); padding: var(--kd-space-6) var(--kd-space-12); }
.app-meg__etikett { font-size: var(--kd-text-xs); font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary); }
.app-meg__segment { align-self: flex-start; }
.app-meg__segment .kd-segment__valg { font-size: var(--kd-text-sm); min-height: var(--kd-space-32); }
.app-meg__bryter { display: flex; align-items: center; gap: var(--kd-space-8); min-height: var(--kd-space-32); padding: 0 var(--kd-space-12); font-size: var(--kd-text-sm); cursor: pointer; }
.app-meg__bryter input { width: var(--kd-space-16); height: var(--kd-space-16); margin: 0; accent-color: var(--kd-accent); }

/* ───────────────────────── Søkefeltet ─────────────────────────
   Samme plass og størrelse på alle sider. Bygget i appen: KonsernDesign har
   ikke kombinasjonsfelt eller kommandopalett (kap. 17.5). */

.app-sok { grid-area: sok; position: relative; justify-self: center; width: min(100%, var(--app-sok-bredde)); }
.app-sok__ikon { position: absolute; left: var(--kd-space-12); top: 50%; transform: translateY(-50%); color: var(--kd-text-secondary); display: flex; pointer-events: none; }
.app-sok__felt {
  width: 100%; min-height: var(--kd-control-h);
  padding: var(--kd-space-8) calc(var(--kd-space-64) + var(--kd-space-8)) var(--kd-space-8) var(--kd-space-40);
  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);
}
.app-sok__felt::placeholder { color: var(--kd-text-muted); }
.app-sok__felt::-webkit-search-cancel-button { display: none; }
.app-sok__felt:focus-visible { outline: none; border-color: var(--kd-accent); box-shadow: 0 0 0 var(--kd-stroke-hairline) var(--kd-accent); }
.app-sok__tast { position: absolute; right: var(--kd-space-12); top: 50%; transform: translateY(-50%); pointer-events: none; }
.app-sok__felt:focus ~ .app-sok__tast, .app-sok--fylt .app-sok__tast { visibility: hidden; }
/* × tømmer søket (Thomas 04.11: «krysse bort» det man har skrevet). Den står der Ctrl K står, når feltet har tekst. */
.app-sok__tom {
  position: absolute; right: var(--kd-space-4); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--kd-space-32); block-size: var(--kd-space-32); padding: 0;
  background: none; border: 0; border-radius: var(--kd-radius-sm); cursor: pointer;
  color: var(--kd-text-secondary); font-size: var(--kd-text-md);
}
.app-sok__tom:hover { background: var(--kd-sunken); color: var(--kd-text); }
.app-sok__tom[hidden] { display: none; }

/* ───────────────────────── Hjem: flaten ───────────────────────── */

/* Rytmen over og mellom kategoriene er 8 og 16 (etterprøvingen 03.11, punkt 1.10): med fast topprad (punkt 1.1) ble
   kolonne 1 og 4 hos feltarbeideren ved 1366 × 650 én rad høyere, og bare 2 av de 4 programmene under bretten kom opp.
   Plassen er hentet fra luft som ikke bar noe: en strek over Microsoft 365-linja rett under topplinjas egen strek
   (16 px mellom to streker), 24 px under linja og 24 px mellom kategoriene. Nå står alle 31 over bretten der. */
.app-hjem { padding-block: var(--kd-space-8) var(--kd-space-48); }
.app-hjem__hoved { min-width: 0; }

/* Raden over kategoriene (punkt 1.10): Microsoft 365-linja til venstre og «Rediger» til høyre, med en hårfin strek
   under. Raden «Programmene dine» er borte; overskriften står bare for skjermlesere. Topplinja har sin egen strek, så
   linja har ingen over seg. */
.app-flate__linje {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-4) var(--kd-space-12);
  margin: 0 0 var(--kd-space-16); padding-block: 0 var(--kd-space-8);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
.app-flate__rydd { margin-left: auto; }
/* Står ingenting i linja (Rediger), står bare knappen: ingen strek under en tom linje. */
.app-flate__linje--tom { border-bottom: 0; padding-block: 0; }

/* Linja øverst: «Mest brukt» (flate.js, mestbrukt.js), seks små ikonknapper over gruppene. Er «Mest brukt» slått av,
   står Microsoft 365 her. Microsoft 365 står ellers som en gruppe i rutenettet (Thomas 04.11). */
.app-linje { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-4) var(--kd-space-12); }
.app-linje__etikett { font-size: var(--kd-text-sm); font-weight: var(--kd-weight-bold); color: var(--kd-text); }
.app-linje__liste { display: flex; flex-wrap: wrap; gap: var(--kd-space-4); list-style: none; margin: 0; padding: 0; }
.app-linje__app {
  display: inline-flex; align-items: center; gap: var(--kd-space-6); min-height: var(--kd-space-40);
  padding: 0 var(--kd-space-8); border-radius: var(--kd-radius-sm);
  color: var(--kd-text); text-decoration: none; font-size: var(--kd-text-sm);
}
.app-linje__app:hover { background: var(--kd-surface); }
.app-linje__app:hover .app-linje__navn { text-decoration: underline; text-underline-offset: .2em; }
/* Microsofts egne produktikoner har ingen plate: de står uten kant og hjørner (de har sin egen form). */
.app-linje__app--m365 .app-merke { box-shadow: none; border-radius: 0; }

/* ── Telefon: fliser, foldede grupper og bunnlinja (avgjørelse C, 12.11; spesifikasjonen kap. 3.2 og 5) ──
   --app-flis-hoyde: hele flisen er trykkflaten, med ikon, navn og system på to linjer.
   --app-bunnlinje-hoyde: bunnlinja med ikon over teksten, og plass under den for hjemlinja på iPhone. */
:root { --app-flis-hoyde: 64px; --app-bunnlinje-hoyde: 56px; }
.app-bunnlinje { display: none; }
.app-linje__tekst { display: flex; flex-direction: column; min-width: 0; }
.app-linje__system { font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); color: var(--kd-text-secondary); overflow-wrap: anywhere; }
.app-gruppe--foldet { margin-block-end: 0; }
.app-gruppe__fold { margin: 0; }
.app-fold {
  display: flex; align-items: center; gap: var(--kd-space-6); inline-size: 100%; min-block-size: var(--kd-target-min);
  padding: 0 var(--kd-space-8); margin: 0; border: 0; border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  background: none; color: var(--kd-text); font: inherit; text-align: start; cursor: pointer;
}
.app-fold__navn {
  font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); font-weight: var(--kd-weight-bold);
  letter-spacing: .07em; text-transform: uppercase;
}
.app-fold > .kd-ikon { margin-inline-start: auto; color: var(--kd-text-secondary); }
.app-fold[aria-expanded="true"] > .kd-ikon { transform: rotate(180deg); }
.app-gruppe:has(> .app-gruppe__fold) .app-rader { margin-block-start: var(--kd-space-4); }

/* Velkomstlinja (kap. 4.0, punkt 1.5): én linje over kategoriene, med snarveiene fra Workspace 365 i samme linje.
   Står til den lukkes. Ingen ramme: teksten til venstre, [Rediger] og [Lukk] til høyre. */
.app-velkommen {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-8) var(--kd-space-16);
  margin: 0 0 var(--kd-space-16); padding: var(--kd-space-8) 0 0;   /* tekst i flere linjer: 16 under topplinja, ikke 8 */
}
.app-velkommen__tekst { flex: 1 1 var(--app-baand-tekst); min-width: 0; margin: 0; }
.app-velkommen__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kd-space-8); }

/* Snarveiene fra Workspace 365 (w365.js): én linje over kategoriene når utvidelsen har funnet noe som kan tas med, og
   brukeren ikke har svart. Ikke en dialog. Den venter på et svar, så den har kanten fra Rediger-båndet (uten skygge,
   den følger ikke med), og skiller seg fra velkomstlinja under. Skjules mens man søker eller rydder. */
.app-w365linje {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-8) var(--kd-space-16);
  margin: var(--kd-space-16) 0; padding: var(--kd-space-8) var(--kd-space-16);
  background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-left: var(--kd-stroke-signal) solid var(--kd-accent); border-radius: 0 var(--kd-radius-md) var(--kd-radius-md) 0;
}
.app-w365linje[hidden],
.app-hjem__hoved:has(> .app-flate--sok, > .app-flate--rydd) > .app-w365linje { display: none; }
.app-w365linje__tekst { flex: 1 1 var(--app-baand-tekst); min-width: 0; margin: 0; }
.app-w365linje__mer { color: var(--kd-text-secondary); }
.app-w365linje__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kd-space-8); }

/* «Se som» (Thomas 10.11.2026): båndet under topplinja når Startsiden vises slik en annen ansatt ser den. Info-fargen,
   ikke merkefargen eller aksenten: det er en tilstand hos den som ser, ikke noe ved selskapet. Det står fast øverst
   mens siden ruller, så det aldri er tvil om hvems Hjem som vises. Øyet sier det samme som teksten (ikke farge alene). */
.app-sesom {
  position: sticky; top: 0; z-index: var(--kd-z-sticky);
  background: var(--kd-info-soft); color: var(--kd-info-text);
  border-bottom: var(--kd-stroke-hairline) solid currentColor;
}
.app-sesom__indre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-8) var(--kd-space-16); padding-block: var(--kd-space-8); }
.app-sesom__ikon { flex: none; inline-size: var(--app-merke); block-size: var(--app-merke); }
.app-sesom__tekst { flex: 1 1 var(--app-baand-tekst); min-width: 0; margin: 0; font-size: var(--kd-text-sm); line-height: var(--kd-leading-sm); }
.app-sesom__tekst strong { font-weight: var(--kd-weight-semibold); }
.app-sesom__lesing { white-space: nowrap; }
.app-sesom__lesing::before { content: " · "; }
.app-sesom__merknad { display: block; }
.app-sesom__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kd-space-8); }

/* Personsøket i dialogen «Se som»: navn med stilling og avdeling under, som lenker. */
.app-sesom-velger__ingress { margin: 0 0 var(--kd-space-16); color: var(--kd-text-secondary); }
.app-sesom-velger__status { margin-block: var(--kd-space-8); }
.app-sesom-treff { list-style: none; margin: 0; padding: 0; max-block-size: var(--app-sesom-treffliste); overflow: auto; }
.app-sesom-treff__valg {
  display: flex; align-items: center; gap: var(--kd-space-12);
  min-block-size: var(--kd-target-min); padding: var(--kd-space-8);
  border-radius: var(--kd-radius-sm); color: var(--kd-text); text-decoration: none;
}
.app-sesom-treff__valg:hover, .app-sesom-treff__valg:focus-visible { background: var(--kd-sunken); }
/* Lista ruller, og en ring utenfor kanten ble kuttet: ringen står innenfor raden. */
.app-sesom-treff__valg:focus-visible { outline-offset: calc(-1 * var(--kd-focus-width)); }
.app-sesom-treff__tekst { display: flex; flex-direction: column; min-width: 0; }
.app-sesom-treff__navn { font-weight: var(--kd-weight-semibold); }
.app-sesom-treff__mer { font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); color: var(--kd-text-secondary); }

/* En tom gruppe som bare vises (Egne snarveier i Se som): ingen «Legg til». */
.app-gruppe__tom { margin: 0; padding: var(--kd-space-8); color: var(--kd-text-secondary); font-size: var(--kd-text-sm); }

/* Rediger: en egen tilstand med eget bånd. Bryter «Vises / Skjult» på hver rad. */
.app-rydd {
  position: sticky; top: 0; z-index: var(--kd-z-sticky);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-8) var(--kd-space-16);
  margin: 0 0 var(--kd-space-16); padding: var(--kd-space-12) var(--kd-space-16);
  background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  border-left: var(--kd-stroke-signal) solid var(--kd-accent); border-radius: 0 var(--kd-radius-md) var(--kd-radius-md) 0;
  box-shadow: var(--kd-shadow-md);
}
.app-rydd__tekst { flex: 1 1 var(--app-baand-tekst); min-width: 0; margin: 0; }
.app-rydd__tekst strong { display: block; }
.app-rydd__tekst span { font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.app-rydd__knapper { display: flex; gap: var(--kd-space-8); flex-wrap: wrap; }

/* Kategoriene står i faste kolonner over hele bredden: forside.js regner ut kolonnen til hver kategori én gang fra hele
   katalogen (alt synlig), per kolonneantall, og tegner dem i hver sin .app-kolonne. Det som skjules, flytter ingen kategori.
   Antall kolonner følger bredden: 5 ved 1440, 3 ved 1024, 1 under 640. */
.app-rutenett { display: flex; align-items: flex-start; gap: var(--kd-space-24); }
.app-kolonne { flex: 1 1 0; min-width: 0; }
.app-gruppe { min-width: 0; margin: 0 0 var(--app-gruppe-luft); padding: 0; }
.app-gruppe__hode {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--kd-space-6);
  padding: 0 var(--kd-space-8) var(--kd-space-6); margin-bottom: var(--kd-space-4);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
/* Navnet med små versaler, antallet etter. */
.app-gruppe__tittel {
  margin: 0; min-width: 0;
  font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); font-weight: var(--kd-weight-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--kd-text);
}
.app-gruppe__antall, .app-gruppe__tall { flex: none; font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); color: var(--kd-text-secondary); font-variant-numeric: tabular-nums; }

/* Hodet i Rediger (punkt 1.12): navnet over hele bredden, og under det «N synlige · M skjult» til venstre og
   «Hele gruppa» til høyre, med bryteren i samme kontrollkolonne som bryterne på radene. */
.app-gruppe__hode--rydd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--kd-space-2) var(--kd-space-4);
  padding-inline-end: 0;
}
.app-gruppe__hode--rydd > .app-gruppe__tittel { grid-column: 1 / -1; }

/* Kategorien der alt er skjult: én linje («Kurs og sertifikater · 2 skjult ▾»), nederst. Venstrestilt, med toppen på
   samme høyde som hodene ved siden av (punkt 1.8). */
.app-gruppe--alleskjult { margin-bottom: var(--kd-space-12); }
.app-gruppe__linje { margin: 0; }

/* «Se mer (N) ▾» nederst i kategorien: bare der noe er skjult. */
.app-semer {
  display: inline-flex; align-items: center; gap: var(--kd-space-4); min-height: var(--kd-space-32);
  padding: 0 var(--kd-space-8); margin-top: var(--kd-space-2);
  background: none; border: 0; border-radius: var(--kd-radius-sm); font: inherit; font-size: var(--kd-text-xs);
  color: var(--kd-text-secondary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.app-semer:hover { background: var(--kd-surface); color: var(--kd-text); }
.app-semer[aria-expanded="true"] { color: var(--kd-text); font-weight: var(--kd-weight-semibold); text-decoration: none; }
.app-semer .kd-ikon { font-size: var(--kd-text-xs); }
.app-semer[aria-expanded="true"] .kd-ikon { transform: rotate(180deg); }
/* En knapp sentrerer innholdet loddrett i høyden sin, og med min-height havnet teksten 4 px under nabohodene. Som flex
   med innholdet øverst står den på linje med dem: navnet først, og «· N skjult ▾» etter, på neste linje som én bit
   når det ikke er plass. */
.app-semer--linje {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0 var(--kd-space-4);
  width: 100%; margin: 0; min-height: var(--kd-space-32); text-align: start; text-decoration: none;
  padding: 0 var(--kd-space-8) var(--kd-space-6); line-height: var(--kd-leading-xs);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline); border-radius: 0;
}
.app-semer--linje .app-semer__navn { font-size: var(--kd-text-xs); font-weight: var(--kd-weight-bold); letter-spacing: .07em; text-transform: uppercase; }
.app-semer--linje .kd-ikon { vertical-align: middle; margin-left: var(--kd-space-4); }
.app-semer__tall { font-variant-numeric: tabular-nums; white-space: nowrap; }

.app-rader { list-style: none; margin: 0; padding: 0; }

.app-rad__ikon { display: flex; justify-content: center; inline-size: var(--app-merke); color: var(--kd-text-secondary); font-size: var(--kd-text-sm); }
/* Leverandørens merke (forslag A): kvadratisk app-ikon med egen bakgrunn.
   Egen lenke uten valgt ikon får forbokstaven (forslag I). */
.app-merke {
  display: block; inline-size: var(--app-merke); block-size: var(--app-merke); border-radius: var(--kd-radius-sm);
  /* Hårfin kant i temafargen: et mørkt merke forsvinner ellers mot mørk flate
     (Leasi og Ressursplanlegger i Workspace 365 i dag). */
  box-shadow: 0 0 0 var(--kd-stroke-hairline) var(--kd-border-control);
}
.app-bokstav {
  display: grid; place-items: center; inline-size: var(--app-merke); block-size: var(--app-merke);
  border-radius: var(--kd-radius-sm); background: var(--kd-sunken); color: var(--kd-text);
  font-size: var(--kd-text-xs); font-weight: var(--kd-weight-bold);
}
.app-flate__alle { display: inline-flex; margin-top: var(--kd-space-16); }
.app-flate__fot { margin-top: var(--kd-space-32); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }

/* Tom flate: aldri «ingenting her» fra systemet; brukeren har selv tømt den. */
.app-flate__tom { padding: var(--kd-space-16) var(--kd-space-8); color: var(--kd-text-secondary); }
.app-flate__tom p { margin: 0 0 var(--kd-space-8); }

/* ── Programmet på Hjem ──
   App-ikon på 32 px til venstre, navnet på linje 1 og systemet dempet på linje 2.
   Hele navnet står; lange navn brytes. Pekeren og fokus gir svak bakgrunn, og «Skjul» ligger over
   høyre kant av raden, så navnet aldri flytter seg. Raden har samme bakgrunn mens «⋯»-menyen er åpen. */
.app-prog { position: relative; border-radius: var(--kd-radius-sm); }
.app-prog:is(:hover, :focus-within), .app-prog:has(.app-prog__mer[aria-expanded="true"]) { background: var(--kd-surface); }
.app-prog__rad {
  display: grid; grid-template-columns: var(--app-ikon) minmax(0, 1fr); align-items: center;
  column-gap: var(--kd-space-12); padding: var(--app-rad-luft) var(--kd-space-8);
  color: var(--kd-text); text-decoration: none; border-radius: inherit;
}
.app-prog__rad:focus-visible { outline-offset: calc(var(--kd-focus-width) * -1); }
.app-prog__tekst { display: flex; flex-direction: column; min-width: 0; }
.app-prog__navn { font-size: var(--app-rad-tekst); line-height: var(--kd-leading-sm); overflow-wrap: break-word; }
.app-prog__system {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--kd-space-4);
  font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); color: var(--kd-text-muted); overflow-wrap: anywhere;
}
.app-prog__system .kd-ikon { font-size: var(--kd-text-xs); flex: none; }
.app-prog__ny { margin-left: var(--kd-space-2); vertical-align: baseline; }
.app-prog__alltid { display: inline-flex; align-items: center; color: var(--kd-text-secondary); vertical-align: baseline; }
.app-prog__alltid .kd-ikon { font-size: var(--kd-text-sm); }
/* App-ikonet: 32 px med hårfin kant i temafargen, så mørke ikoner synes i mørk modus. */
.app-prog__ikon {
  position: relative; display: grid; place-items: center; inline-size: var(--app-ikon); block-size: var(--app-ikon);
  border-radius: var(--app-ikon-hjorne); box-shadow: 0 0 0 var(--kd-stroke-hairline) var(--kd-border-control);
  font-size: var(--kd-text-md); font-weight: var(--kd-weight-bold); line-height: 1; user-select: none;
}
.app-prog__ikon--merke { background: var(--kd-sunken); }
.app-prog__ikon--merke img { display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; }
.app-prog__ikon--egen { background: var(--kd-accent-soft); color: var(--kd-accent-text); }
.app-prog__ikon--snarvei { background: var(--kd-sunken); color: var(--kd-text); }

/* Handlingen helt til høyre: «Skjul» (og «⋯») vises ved pekeren og ved fokus, «Vis» står alltid synlig.
   «Skjul» og «⋯» ligger over slutten av et langt navn. Dekkflaten (radens bakgrunn, med en myk overgang mot venstre)
   står også mens de vises, så navnet dekkes rent i stedet for at tekst står oppå tekst (etterprøvingen 04.11: 18 rader
   for den med flest ved 1440). Hele navnet står igjen når pekeren går videre. */
.app-prog__handling {
  position: absolute; right: var(--kd-space-4); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--kd-space-2);
  background: var(--kd-surface); border-radius: var(--kd-radius-sm);
  box-shadow: calc(var(--kd-space-8) * -1) 0 var(--kd-space-8) var(--kd-surface);
  visibility: hidden;
}
.app-prog:is(:hover, :focus-within) .app-prog__handling,
.app-prog__handling:has([aria-expanded="true"]) { visibility: visible; }
/* «Vis» har sin egen kolonne i raden (under), så den dekker ingenting. */
.app-prog__handling--synlig { visibility: visible; background: none; box-shadow: none; }
.app-prog__skjul, .app-prog__stjerne, .app-prog__mer {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kd-space-4);
  min-block-size: var(--app-treff-min); min-inline-size: var(--app-treff-min);
  padding: 0 var(--kd-space-6); background: none; border: 0; border-radius: var(--kd-radius-sm);
  font: inherit; font-size: var(--kd-text-sm); color: var(--kd-text-secondary); cursor: pointer;
}
.app-prog__skjul:hover, .app-prog__stjerne:hover, .app-prog__mer:hover, .app-prog__mer[aria-expanded="true"] { background: var(--kd-sunken); color: var(--kd-text); }
/* Stjerna (Favoritter) i temafargen når den er på, også ved pekeren, så av og på ikke ser like ut. */
.app-prog__stjerne--pa, .app-prog__stjerne--pa:hover { color: var(--kd-accent-text); }
/* Den lille stjerna etter navnet: programmet står også i Favoritter. */
.app-prog__fav { display: inline-flex; align-items: center; color: var(--kd-text-secondary); vertical-align: baseline; }
.app-prog__fav .kd-ikon { font-size: var(--kd-text-xs); }
/* «Vis»: en tydelig tekstknapp med full kontrollhøyde. */
.app-prog__vis {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--kd-control-h); min-inline-size: var(--kd-control-h);
  padding: 0 var(--kd-space-12); background: var(--kd-canvas); color: var(--kd-text); cursor: pointer;
  border: var(--kd-stroke-hairline) solid var(--kd-border-control); border-radius: var(--kd-radius-sm);
  font: inherit; font-size: var(--kd-text-sm); font-weight: var(--kd-weight-semibold);
}
.app-prog__vis:hover { background: var(--kd-sunken); }

/* Det skjulte (under «Se mer»): under en tynn strek i kategorien, og navnet nedtonet med farge, ikke med
   gjennomsiktighet, så teksten holder kontrasten. Ikonet beholder fargen, så programmet kjennes igjen (punkt 1.13). */
.app-rader--skjult { margin-top: var(--kd-space-6); padding-top: var(--kd-space-6); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.app-prog--skjult .app-prog__navn { color: var(--kd-text-secondary); }
/* «Vis» står alltid synlig, så den får sin egen kolonne i raden i stedet for å ligge over høyre kant: et langt navn
   brytes før knappen og står helt (kap. 4.0 «Hele navnet står»). Ved 1440 lå «Vis» over «Dokumentasjon til anbud» og
   tre andre navn i Anbud og marked (etterprøvingen 03.11). */
.app-prog--skjult:not(.app-prog--rydd) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--kd-space-4); }
.app-prog--skjult:not(.app-prog--rydd) > .app-prog__handling { position: static; transform: none; margin-inline-end: var(--kd-space-4); }

/* ── Rediger på radene: samme kolonner, med bryteren «Vises / Skjult» til høyre (egne snarveier: nytt navn og fjern) ── */
.app-prog--rydd { display: grid; grid-template-columns: minmax(0, 1fr) var(--app-rydd-kolonne); align-items: center; gap: var(--kd-space-4); }
.app-prog--veksle { cursor: pointer; }
.app-prog--veksle:hover { background: var(--kd-surface); }
.app-prog__kontroll { display: flex; align-items: center; justify-content: center; }
.app-gruppe--egne .app-prog--rydd, .app-gruppe--favoritter .app-prog--rydd { grid-template-columns: minmax(0, 1fr) auto; }
.app-prog--rydd .app-prog__rad { cursor: inherit; grid-template-columns: var(--app-ikon) minmax(0, 1fr); }
.app-prog--rydd:focus-within { background: var(--kd-surface); }
.app-bryter { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: var(--kd-space-2); padding-inline: var(--kd-space-4); cursor: pointer; }
.app-bryter__ord { font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); color: var(--kd-text-secondary); }
/* Bryteren er en ekte avkrysningsboks med role="switch". Av/på bæres av posisjon, farge OG ordet «Vises»/«Skjult». */
.app-bryter__boks {
  appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  inline-size: var(--app-bryter-bredde); block-size: var(--app-bryter-hoyde);
  background: var(--kd-sunken); border: var(--kd-stroke-control) solid var(--kd-border-control); border-radius: var(--kd-radius-pill);
  transition: background var(--kd-motion-fast) var(--kd-motion-ease), border-color var(--kd-motion-fast) var(--kd-motion-ease);
}
.app-bryter__boks::after {
  content: ""; position: absolute; top: 50%; left: var(--kd-space-2);
  inline-size: var(--app-bryter-knapp); block-size: var(--app-bryter-knapp); border-radius: var(--kd-radius-pill);
  background: var(--kd-text-secondary); transform: translateY(-50%);
  transition: transform var(--kd-motion-fast) var(--kd-motion-ease), background var(--kd-motion-fast) var(--kd-motion-ease);
}
.app-bryter__boks:checked { background: var(--kd-accent); border-color: var(--kd-accent); }
.app-bryter__boks:checked::after {
  background: var(--kd-accent-on);
  transform: translate(calc(var(--app-bryter-bredde) - 2 * var(--kd-stroke-control) - var(--app-bryter-knapp) - 2 * var(--kd-space-2)), -50%);
}
.app-bryter__boks:focus-visible { outline: var(--kd-focus-width) solid var(--kd-accent); outline-offset: var(--kd-focus-offset); }
/* «Hele gruppa» i hodet: ordet foran bryteren på samme linje, og bryteren midt i kontrollkolonnen, rett over bryterne
   på radene. */
.app-bryter.app-bryter--gruppe { flex-direction: row; gap: 0; padding-inline: 0; }
.app-bryter--gruppe .app-bryter__ord { white-space: nowrap; }
.app-bryter--gruppe .app-bryter__boks { margin-inline: calc((var(--app-rydd-kolonne) - var(--app-bryter-bredde)) / 2); }
/* «Alltid synlig» står på én linje med nål, under navnet. */
.app-prog__fast { display: inline-flex; align-items: center; gap: var(--kd-space-4); white-space: nowrap; color: var(--kd-text-secondary); }
.app-prog__fast .kd-ikon { font-size: var(--kd-text-xs); }
/* 32 px: over WCAG-kravet på 24 px for mus og tastatur. På berøringsskjerm (brakka) blir de 44 px, se (pointer: coarse) nederst. */
.app-radknapper { display: flex; gap: var(--kd-space-2); flex: none; }
.app-radknapper .kd-iconbtn { width: var(--kd-space-32); height: var(--kd-space-32); font-size: var(--kd-text-md); }
.app-lim { margin-top: var(--kd-space-8); }
.app-lim .kd-input { font-size: var(--kd-text-sm); min-height: var(--kd-space-40); }
.app-flate--rydd .app-gruppe--egne { outline: var(--kd-stroke-hairline) dashed var(--kd-border-control); outline-offset: var(--kd-space-4); border-radius: var(--kd-radius-sm); }

/* ───────────────────────── Katalogen og søket ─────────────────────────
   Verktøy, og Hjem mens man søker (flate.js): det skjulte står på plassen sin i kategorien. Det er dempet som under
   «Se mer» (navnet nedtonet med farge, ikonet beholder fargen, punkt 1.13), og linja «Skjult på Hjem» med øyet med strek
   sier det med ord, ikke bare med farge. «Vis» står alltid. */
.app-prog__status {
  display: inline-flex; align-items: center; gap: var(--kd-space-4);
  font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); font-weight: var(--kd-weight-semibold); color: var(--kd-text-secondary);
}
.app-prog__status .kd-ikon { font-size: var(--kd-text-xs); flex: none; }

/* Raden Enter i søkefeltet åpner (kap. 7.2): ↵ etter navnet og en rolig flate i aksentfargen, ikke farge alene. */
.app-enter { vertical-align: baseline; font-family: var(--kd-font-sans); color: var(--kd-text); }
.app-prog__system .app-enter { line-height: var(--kd-leading-xs); }
.app-sokstatus .app-enter { margin-right: var(--kd-space-4); }
.app-prog--enter { background: var(--kd-accent-soft); }

/* Linja over treffene: «7 treff for «ferie»», hva Enter åpner, og «Vis alt igjen» til høyre. Hårfin strek under, som
   linja med Microsoft 365. */
.app-sokstatus {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-4) var(--kd-space-16);
  margin: 0 0 var(--kd-space-16); padding-block: 0 var(--kd-space-8);
  border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
}
/* Antallet og «↵ Enter åpner …» er to deler med mellomrom mellom seg (column-gap), ikke marg: brytes den andre til egen
   linje under 640 px, står den rett under den første, uten innrykk. */
.app-sokstatus__tekst {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--kd-space-12);
  flex: 1 1 var(--app-baand-tekst); min-width: 0; margin: 0; color: var(--kd-text-secondary);
}
.app-sokstatus__antall { min-width: 0; overflow-wrap: anywhere; }
.app-sokstatus__tekst strong { color: var(--kd-text); }
/* Bare «↵ Enter åpner» holdes samlet. Navnet kan brytes, ellers går et langt navn ut over kanten ved 320 px. */
.app-sokstatus__enter { min-width: 0; overflow-wrap: anywhere; }
.app-sokstatus__tast { white-space: nowrap; }
.app-flate--sok .app-flate__linje { border-bottom: 0; padding-block: 0; }

/* Ingen treff (kap. 7.6): aldri bare «Ingen treff». */
.app-sokingen { max-width: var(--app-leselinje); padding-block: var(--kd-space-8) var(--kd-space-16); }
.app-sokingen > * { margin: 0 0 var(--kd-space-12); }
.app-sokingen__tittel { overflow-wrap: anywhere; }
.app-sokingen__prov { padding-left: var(--kd-space-20); }
.app-sokingen__prov li + li { margin-top: var(--kd-space-8); }
.app-sokingen__hjelp { display: inline-flex; align-items: center; gap: var(--kd-space-6); vertical-align: middle; }
.app-sokingen__hjelp .app-rad__ikon { inline-size: auto; }
.app-sokingen__merknad { font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }

/* ───────────────────────── Bunnlinja ───────────────────────── */

.app-bunn { border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
.app-bunn__indre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kd-space-4) var(--kd-space-8); padding-block: var(--kd-space-16); font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.app-bunn__skille { color: var(--kd-text-muted); }

/* ───────────────────────── Meny ved et element, dialog, toast ───────────────────────── */

.app-popover { position: fixed; min-width: var(--app-meny-min); max-width: calc(100vw - 2 * var(--kd-space-16)); }
.app-popover__hode { margin: 0; padding: var(--kd-space-6) var(--kd-space-12) var(--kd-space-4); font-size: var(--kd-text-xs); font-weight: var(--kd-weight-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--kd-text-secondary); }
.app-popover .kd-nedtrekk__valg .kd-ikon { color: var(--kd-text-secondary); }
.app-popover .kd-nedtrekk__valg--fare .kd-ikon { color: inherit; }
.app-popover .kd-nedtrekk__valg:focus-visible { outline-offset: calc(var(--kd-focus-width) * -1); }

.app-dialog { max-width: min(var(--app-dialog-bredde), 100%); }
.app-dialog .kd-fakta { margin-bottom: var(--kd-space-8); }
.app-endringslogg { margin: 0; padding-left: var(--kd-space-20); }
.app-endringslogg li + li { margin-top: var(--kd-space-6); }
.app-tastliste dt { white-space: nowrap; }

.app-toast { display: flex; align-items: center; gap: var(--kd-space-12); }
/* Kvitteringene står nede til høyre, ikke over Hjelp og Meg i topplinja. */
.kd-toasts { top: auto; bottom: var(--kd-space-16); }
.app-toast__angre, .app-toast__knapp {
  flex: none; min-height: var(--kd-space-32); padding: 0 var(--kd-space-8);
  background: none; border: var(--kd-stroke-hairline) solid currentColor; border-radius: var(--kd-radius-xs);
  color: inherit; font: inherit; font-weight: var(--kd-weight-semibold); cursor: pointer;
}
/* Meldingen når et program åpnes på PC-en (svar 2.4): setningen øverst, veiene tilbake til nettutgaven under. */
.app-toast--skrivebord { flex-direction: column; align-items: flex-start; gap: var(--kd-space-8); }
.app-toast__tekst { margin: 0; }
.app-toast__knapper { display: flex; flex-wrap: wrap; gap: var(--kd-space-8); }

/* ═════════════════ Brytepunktene ═════════════════ */

/* --app-brudd-topplinje 1200px: menyen flytter til rad 2, under søket.
   Søkefeltet står fortsatt øverst og i samme størrelse. */
@media (max-width: 1199.98px) {
  .app-topp__indre {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo sok handlinger" ". meny meny";
    padding-top: var(--kd-space-12);
  }
  .app-sok { justify-self: start; }
  .app-topp__meny { margin-top: var(--kd-space-4); }
}

/* --app-brudd-mobil 640px: stablet. Mobilappen har sitt eget skall (felt, ikke med i v0.1);
   dette er bare for at PC-sida ikke skal knekke i et smalt vindu. */
@media (max-width: 639.98px) {
  .app-side { padding-inline: var(--kd-space-16); }
  .app-topp__indre {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo handlinger" "sok sok" "meny meny";
    row-gap: var(--kd-space-8); padding-top: var(--kd-space-8);
  }
  .app-topp__handlinger { gap: 0; }
  /* Nedtrekkene henger i topplinja, ikke i knappen, så de aldri går ut over kanten. */
  .app-topp__indre { position: relative; }
  .app-topp__nedtrekk { position: static; }
  .app-topp__nedtrekk > .kd-nedtrekk__meny { top: calc(var(--kd-target-min) + var(--kd-space-12)); left: var(--kd-space-16); right: var(--kd-space-16); width: auto; min-width: 0; }
  .app-toppknapp__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-toppknapp__smal { display: inline-block; }
  .app-sok { justify-self: stretch; width: 100%; }
  .app-sok__tast { display: none; }
  .app-sok__felt { padding-right: var(--kd-target-min); }
  .app-topp__meny.kd-meny--rad { flex-wrap: wrap; }
  .app-topp__meny .kd-meny__lenke { padding-inline: var(--kd-space-6); }
  .app-hjem { padding-top: var(--kd-space-16); }
  /* Bunnlinja (felles.js) tar menyen. Topplinja er logo, hjelp og Meg, og søket under: to rader. */
  .app-topp__meny { display: none; }
  .app-topp__indre { grid-template-areas: "logo handlinger" "sok sok"; padding-block-end: var(--kd-space-12); }
  .app-bunnlinje {
    display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--kd-z-nav);
    background: var(--kd-surface); border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .app-bunnlinje__lenke {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kd-space-2);
    min-block-size: var(--app-bunnlinje-hoyde); color: var(--kd-text-secondary); text-decoration: none;
    font-size: var(--kd-text-xs); line-height: var(--kd-leading-xs); border-top: var(--kd-stroke-signal) solid transparent;
  }
  .app-bunnlinje__lenke .kd-ikon { font-size: var(--kd-text-lg); }
  .app-bunnlinje__tekst { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: var(--kd-space-4); }
  .app-bunnlinje__lenke[aria-current] { color: var(--kd-text); font-weight: var(--kd-weight-bold); border-top-color: var(--kd-accent); }
  body.kd { padding-block-end: calc(var(--app-bunnlinje-hoyde) + env(safe-area-inset-bottom)); }
  .kd-toasts { bottom: calc(var(--app-bunnlinje-hoyde) + env(safe-area-inset-bottom) + var(--kd-space-8)); }
  /* Flisene: to i bredden, hele flisen er trykkflaten. Overskriften trengs ikke: flisene sier selv hva de er. */
  .app-linje--fliser { display: block; inline-size: 100%; }
  .app-linje--fliser .app-linje__etikett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-linje--fliser .app-linje__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-space-8); }
  /* Ikonet over navnet, så navnet får hele bredden: «Personalhåndboka» skal stå helt, aldri delt (kap. 5.3). */
  .app-linje--fliser .app-linje__app {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--kd-space-6);
    box-sizing: border-box; inline-size: 100%; block-size: 100%;
    min-block-size: var(--app-flis-hoyde); padding: var(--kd-space-12);
    background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline); border-radius: var(--kd-radius-md);
  }
  .app-linje--fliser .app-linje__navn { font-weight: var(--kd-weight-semibold); overflow-wrap: break-word; hyphens: manual; }
  .app-linje--fliser .app-linje__app:hover .app-linje__navn { text-decoration: none; }
  /* «Rediger» ligger i Meg-menyen på telefon (punkt 1.10). */
  .app-flate__rydd { display: none; }
  .app-flate__linje--tom { display: none; }
}

/* Berøringsskjerm (brakka, punkt 1.2): det finnes ingen peker, så «⋯» står alltid synlig, uten plate, og raden holder
   plass til den, så hele navnet står. «Skjul» ligger i «⋯»-menyen (og et langt trykk åpner den). Endreknappene er store. */
@media (pointer: coarse) {
  .app-radknapper .kd-iconbtn { width: var(--kd-target-min); height: var(--kd-target-min); }
  .app-prog__handling { visibility: visible; background: none; box-shadow: none; }
  .app-prog__skjul { display: none; }
  /* Stjerna står i «⋯»-menyen her: to knapper på raden tok for mye av navnet, og «⋯» holder plassen alene. */
  .app-prog__stjerne:not(.kd-iconbtn) { display: none; }
  .app-prog:not(.app-prog--rydd):not(.app-prog--skjult) > .app-prog__rad { padding-inline-end: var(--kd-target-min); }
  .app-prog__skjul, .app-prog__mer, .app-semer { min-block-size: var(--kd-target-min); min-inline-size: var(--kd-target-min); }
  .app-prog__vis { min-block-size: var(--kd-target-min); }
  .app-sok__tast { display: none; }
  .app-toast__angre, .app-toast__knapp, .app-linje__app, .app-flate .kd-btn--sm { min-height: var(--kd-target-min); }
  .app-sok__tom { inline-size: var(--kd-target-min); block-size: var(--kd-target-min); right: 0; }
  /* Verktøy: øyet som skjuler står alltid på flisa, uten ordet (navnet på knappen sier det), og «⋯» viker for det. Et
     langt trykk åpner menyen. I søket på Hjem finnes ikke øyet (flate.js), og der står «⋯» som på Hjem. */
  .app-flate--katalog .app-prog__skjul { display: inline-flex; padding: 0; }
  .app-flate--katalog .app-prog__ord { display: none; }
  .app-flate--katalog .app-prog__handling:has(.app-prog__skjul) .app-prog__mer { display: none; }
}

@media (forced-colors: active) {
  .app-rydd { border: 1px solid; }
  .app-prog__ikon { border: 1px solid; }
}

/* ───────────────────────── Skjermer uten modell ─────────────────────────
   Innloggingen feilet, eller API-et svarer ikke: én overskrift, én forklaring, én knapp. Aldri en blank side. */
.app-skjerm { padding-block: var(--kd-space-48); }
.app-skjerm > * + * { margin-top: var(--kd-space-16); }
.app-laster { padding-block: var(--kd-space-48); color: var(--kd-text-secondary); }

/* Selskapsfargen som prikk (Meg-siden), uten inline-stil: KonsernDesigns .kd-prikk leser --prikk. */
.app-selskapsprikk { --prikk: var(--kd-brand-base); }

/* Venter på deg (designavklaring 04.11): fast høyrekolonne fra 1200 px.
   Microsoft 365 står over begge sonene. Under 1200 står listen før programmene.
   Navngitt geometri reserverer plass også ved tomt svar, feil og lange titler.
   Gjennomgangen 04.11: kortet er tre linjer (kilde, tittel på høyst to linjer, referanse med statusmerket til høyre), og
   mellom 640 og 1199 px står kortene side om side i én rad. Før skjøv lista programmene under bretten ved 1024 px. */
/* «Venter på deg»: fra 1200 px øverst i siste kolonne (kolonner.js, venterVekt), så høy som sakene. Under 1200 en rad
   over gruppene. --app-venter-radhoyde holder raden stille mens sakene lastes. */
:root { --app-venter-radhoyde: 6.5rem; --app-venter-lesebredde: 72rem; }
.app-flate__soner { display: grid; grid-template-columns: minmax(0, 1fr); }
.app-flate__soner > .app-venter { order: -1; }
.app-flate__programmer { min-width: 0; }
.app-venter { min-width: 0; margin-block-end: var(--kd-space-16); }
.app-kolonne > .app-venter .app-gruppe__hode { padding-inline-end: 0; }
.app-venter__alle { margin-inline-start: auto; font-size: var(--kd-text-sm); white-space: nowrap; }
/* Berøring: lenkene i stripa var 19–22 px høye (målt 11.11). Treffmålet er det samme som ellers på Hjem. */
@media (pointer: coarse) {
  .app-venter__alle, .app-venter .app-lenke { display: inline-flex; align-items: center; min-block-size: var(--app-egne-treffmal); }
}
.app-venter__kortliste { display: flex; flex-direction: column; }
.app-venter__feillinje { margin: var(--kd-space-8) 0 0; font-size: var(--kd-text-sm); color: var(--kd-text-secondary); }
.app-venter__kort {
  display: flex; align-items: flex-start; flex-shrink: 0; gap: var(--kd-space-12); min-width: 0; box-sizing: border-box;
  padding: var(--kd-space-12) 0; border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  color: var(--kd-text); text-decoration: none; font-size: var(--kd-text-sm); line-height: var(--kd-leading-sm);
}
.app-venter__kort:hover .app-venter__tittel { text-decoration: underline; }
.app-venter__korttekst {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--kd-space-2) var(--kd-space-8); min-width: 0; width: 100%;
}
.app-venter__kilde { grid-column: 1 / -1; color: var(--kd-text-secondary); font-size: var(--kd-text-xs); }
/* Hele tittelen står i det tilgjengelige navnet på lenken; på flaten høyst to linjer. */
.app-venter__tittel {
  grid-column: 1 / -1; overflow-wrap: anywhere; font-weight: var(--kd-weight-bold);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.app-venter__referanse { color: var(--kd-text-secondary); font-size: var(--kd-text-xs); overflow-wrap: anywhere; }
.app-venter__referanse--forfalt { color: var(--kd-danger-text); }
.app-venter__kort .kd-badge { justify-self: end; white-space: nowrap; }
.app-venter__feil { flex-direction: column; justify-content: center; min-block-size: var(--app-venter-radhoyde); }
.app-venter__plassholder { flex-direction: column; justify-content: center; block-size: var(--app-venter-radhoyde); }
.app-venter__plassholder .kd-skeleton { width: 100%; height: var(--kd-space-16); }
.app-venter__tom { margin: 0; padding-block: var(--kd-space-24); color: var(--kd-text-secondary); }
.app-venter__mer { min-height: var(--kd-space-32); padding-block-start: var(--kd-space-8); font-size: var(--kd-text-sm); }
/* Hjems brede grense (1200 px), mellomliste (640–1199) og mobil (<640). */
@media (max-width: 1199.98px) {
  /* Tre kort side om side, én rad, samme mellomrom som kategorikolonnene. */
  .app-venter__kortliste {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--kd-space-24);
    block-size: var(--app-venter-radhoyde);
  }
  .app-venter__tom { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  /* Én kolonne: høyst to saker under hverandre (radHtml), så høy som sakene. */
  .app-venter__kortliste { grid-template-columns: minmax(0, 1fr); block-size: auto; }
  .app-venter__plassholder { block-size: var(--app-venter-radhoyde); }
}
.app-venter-side { max-width: var(--app-venter-lesebredde); margin-inline: auto; padding-block: var(--kd-space-24); }
.app-venter-side__sum { font-size: var(--kd-text-lg); color: var(--kd-text-secondary); margin-block: var(--kd-space-12) var(--kd-space-32); }
.app-venter-side__gruppe { margin-block: var(--kd-space-24); }
.app-venter-side__hode { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kd-space-8) var(--kd-space-12); border-bottom: var(--kd-stroke-hairline) solid var(--kd-border-hairline); padding-block-end: var(--kd-space-12); }
.app-venter-side__hode h2 { margin: 0; }
.app-venter-side__hode > a { margin-inline-start: auto; }
.app-venter-side__sak { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--kd-space-16); color: var(--kd-text); text-decoration: none; padding-block: var(--kd-space-8); }
.app-venter-side__sak:hover strong { text-decoration: underline; }
.app-venter-side__sak > span { min-width: 0; }
.app-venter-side__sak strong { overflow-wrap: anywhere; }
.app-venter-side__detaljer { display: block; color: var(--kd-text-secondary); font-size: var(--kd-text-sm); margin-block-start: var(--kd-space-4); }
.app-venter-side__sak .kd-badge { flex-shrink: 0; }
.app-venter-side__andre { margin-block-start: var(--kd-space-16); }
.app-venter-side__fot { margin-block-start: var(--kd-space-32); color: var(--kd-text-secondary); }
/* Mobilgrensen følger Hjems ene kategori-kolonne. Oversiktens rader stables. */
@media (max-width: 639.98px) {
  .app-venter-side__sak { flex-direction: column; align-items: flex-start; gap: var(--kd-space-8); }
  .app-venter-side__hode > a { width: 100%; margin-inline-start: 0; }
}

/* Egne snarveier: fast, synlig handling på PC og berøringsskjerm. */
/* «Legg til» står på samme linje som navnet også i en smal kolonne (gruppa står øverst på Hjem fra 09.11): smal
   innerkant, høyre kant i flukt med radene, og høyden trekkes inn så hodet er like høyt som de andre. */
.app-egne-leggtil {
  margin-inline-start: auto; margin-inline-end: calc(var(--kd-space-8) * -1); margin-block: calc(var(--kd-space-12) * -1);
  padding-inline: var(--kd-space-6); min-block-size: var(--app-egne-treffmal); flex: 0 0 auto;
}
.app-gruppe--egne .app-gruppe__hode { align-items: center; }
.app-egne-tom { display: block; inline-size: 100%; min-block-size: var(--app-egne-treffmal); border: 0; background: transparent; color: var(--kd-text-secondary); font: inherit; text-align: start; padding: var(--kd-space-8); cursor: pointer; }
.app-egne-tom:hover { background: var(--kd-sunken); }
.app-forhand-hode { margin-block: var(--kd-space-24); }

/* ═════════════════ Forslag D (designrunden 13.11) ═════════════════
   Startsiden:HjemDesign = «d» (eller ?design=d) setter .app-flate--d på Hjem (flate.js). Elsie ønsket at hver kategori står
   i en ramme, og at hver app har en klar linje. Thomas valgte D av fire forslag:
     • hver kategori i et kort med en fargestripe øverst (--kd-chart-1 … 8, fast per kategori i redaktørens rekkefølge),
       navnet med vanlig skrift og antallet til høyre, og en hårfin linje mellom appene
     • «Mest brukt» som et kort øverst, med større knapper
     • fra 1200 px en egen kolonne til høyre, skinnen, med «Venter på deg» og Egne snarveier
     • Microsoft 365 som små brikker, to i bredden
   Bare fra 640 px: telefonen har fliser og foldede grupper, og de beholdes.
   --app-skinne-bredde: skinnen. 17rem gir fire kategorikolonner ved 1440 (16rem + mellomrom hver) og tre ved 1366. */
:root { --app-skinne-bredde: 17rem; }
/* I Rediger og søket står bryteren eller «Vis» på hver rad, og uten skinnen ble det fem smale kort ved 1440: navn som
   «Personalhåndboka» ble delt midt i ordet. Bredere minste kolonne gir fire (flate.js måler variabelen i flaten). */
.app-flate--d:is(.app-flate--rydd, .app-flate--katalog) { --app-hjem-kolonne: 18rem; }
.app-skinne { display: none; }
@media (min-width: 640px) {
  .app-flate--d .app-gruppe--farge-1 { --app-kat-farge: var(--kd-chart-1); }
  .app-flate--d .app-gruppe--farge-2 { --app-kat-farge: var(--kd-chart-2); }
  .app-flate--d .app-gruppe--farge-3 { --app-kat-farge: var(--kd-chart-3); }
  .app-flate--d .app-gruppe--farge-4 { --app-kat-farge: var(--kd-chart-4); }
  .app-flate--d .app-gruppe--farge-5 { --app-kat-farge: var(--kd-chart-5); }
  .app-flate--d .app-gruppe--farge-6 { --app-kat-farge: var(--kd-chart-6); }
  .app-flate--d .app-gruppe--farge-7 { --app-kat-farge: var(--kd-chart-7); }
  .app-flate--d .app-gruppe--farge-8 { --app-kat-farge: var(--kd-chart-8); }

  /* Kortet. Stripa er kanten øverst; uten kategorifarge (Microsoft 365, Egne snarveier, Favoritter) er den nøytral. */
  .app-flate--d :is(.app-gruppe, .app-venter) {
    padding: var(--kd-space-8) var(--kd-space-12) var(--kd-space-8);
    background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
    border-top: var(--kd-stroke-signal) solid var(--app-kat-farge, var(--kd-border-control));
    border-radius: var(--kd-radius-md);
  }
  .app-flate--d .app-gruppe--egne { --app-kat-farge: var(--kd-accent); }
  .app-flate--d .app-venter { --app-kat-farge: var(--kd-accent); }

  /* Hodet: navnet med vanlig skrift, antallet helt til høyre, ingen strek under (linjene står mellom appene). */
  .app-flate--d .app-gruppe__hode { align-items: center; padding: var(--kd-space-4) var(--kd-space-4) var(--kd-space-8); margin: 0; border-bottom: 0; }
  .app-flate--d .app-gruppe__tittel {
    font-size: var(--kd-text-md); line-height: var(--kd-leading-sm); font-weight: var(--kd-weight-semibold);
    letter-spacing: 0; text-transform: none;
  }
  .app-flate--d .app-gruppe__antall { margin-inline-start: auto; }
  .app-flate--d .app-gruppe--egne .app-gruppe__antall, .app-flate--d .app-venter .app-gruppe__antall { margin-inline-start: 0; }
  .app-flate--d .app-venter__alle { margin-inline-start: auto; }

  /* En klar linje per app: hårfin strek mellom radene, og pekeren gir den senkede flaten (kortet er alt flaten). */
  .app-flate--d .app-rader > .app-prog + .app-prog { border-top: var(--kd-stroke-hairline) solid var(--kd-border-hairline); }
  .app-flate--d .app-prog { border-radius: 0; }
  .app-flate--d .app-prog:is(:hover, :focus-within), .app-flate--d .app-prog:has(.app-prog__mer[aria-expanded="true"]),
  .app-flate--d .app-prog--veksle:hover, .app-flate--d .app-prog--rydd:focus-within { background: var(--kd-sunken); }
  .app-flate--d .app-prog__handling { background: var(--kd-sunken); box-shadow: calc(var(--kd-space-8) * -1) 0 var(--kd-space-8) var(--kd-sunken); }
  .app-flate--d .app-prog__handling--synlig { background: none; box-shadow: none; }
  .app-flate--d .app-rader--skjult { margin-inline: calc(var(--kd-space-12) * -1); padding-inline: var(--kd-space-12); }
  .app-flate--d .app-semer:hover { background: var(--kd-sunken); }
  .app-flate--d .app-semer--linje { border-bottom: 0; padding-block-start: var(--kd-space-4); }
  .app-flate--d .app-semer--linje .app-semer__navn { font-size: var(--kd-text-md); font-weight: var(--kd-weight-semibold); letter-spacing: 0; text-transform: none; color: var(--kd-text); }

  /* Microsoft 365: små brikker, to i bredden, ikonet og det korte navnet. Systemet står i lenkens navn. */
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-rader { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kd-space-4); padding-block-end: var(--kd-space-4); }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-rader > .app-prog + .app-prog { border-top: 0; }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog { background: var(--kd-sunken); border-radius: var(--kd-radius-sm); }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog:is(:hover, :focus-within) { background: var(--kd-accent-soft); }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog__handling { background: var(--kd-accent-soft); box-shadow: calc(var(--kd-space-8) * -1) 0 var(--kd-space-8) var(--kd-accent-soft); }
  /* Brikken er rundt 113 px ved fire kolonner. Med ikonet på 32 px ble «PowerPoint» delt midt i ordet i prod 13.11. Ikonet
     har her merkestørrelsen (24 px), og navnet står på én linje og kortes med … hvis det likevel ikke får plass. */
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 { --app-ikon: var(--app-merke); }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog__rad { column-gap: var(--kd-space-6); padding-inline: var(--kd-space-6); }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog__navn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog__system { display: none; }
  .app-flate--d:not(.app-flate--rydd) .app-gruppe--m365 .app-prog__navn { font-size: var(--kd-text-sm); }

  /* «Mest brukt» som et kort øverst, med større knapper. «Rediger» står til høyre i kortet. */
  .app-flate--d .app-flate__linje:not(.app-flate__linje--tom) {
    margin-block-start: var(--kd-space-8);
    padding: var(--kd-space-12) var(--kd-space-16); gap: var(--kd-space-8) var(--kd-space-16);
    background: var(--kd-surface); border: var(--kd-stroke-hairline) solid var(--kd-border-hairline); border-radius: var(--kd-radius-md);
  }
  .app-flate--d .app-linje { gap: var(--kd-space-8) var(--kd-space-16); }
  .app-flate--d .app-linje__liste { gap: var(--kd-space-8); }
  .app-flate--d .app-linje__app {
    gap: var(--kd-space-8); min-height: var(--kd-space-48); padding: 0 var(--kd-space-16) 0 var(--kd-space-8);
    border: var(--kd-stroke-hairline) solid var(--kd-border-hairline); border-radius: var(--kd-radius-md);
    background: var(--kd-surface); font-size: var(--kd-text-md); font-weight: var(--kd-weight-medium);
  }
  .app-flate--d .app-linje__app:hover { background: var(--kd-sunken); border-color: var(--kd-border-control); }
  .app-flate--d .app-linje__app .app-merke, .app-flate--d .app-linje__app .app-bokstav { inline-size: var(--app-ikon); block-size: var(--app-ikon); }

  /* «Venter på deg» som kort (i skinnen fra 1200 px, ellers raden over gruppene). */
  .app-flate--d .app-venter__kort:last-child { border-bottom: 0; }
}
@media (min-width: 1200px) {
  .app-flate--d .app-skinne {
    display: flex; flex-direction: column; gap: var(--app-gruppe-luft);
    flex: 0 0 var(--app-skinne-bredde); min-width: 0;
  }
  .app-flate--d .app-skinne > * { margin: 0; }
  .app-flate--d .app-skinne .app-venter__kortliste { display: flex; flex-direction: column; block-size: auto; }
  /* Skinnen er smal: statusmerket står på egen linje under referansen, så «#24617 · frist i dag 12:19» får hele bredden. */
  .app-flate--d .app-skinne .app-venter__korttekst { grid-template-columns: minmax(0, 1fr); }
  .app-flate--d .app-skinne .app-venter__kort .kd-badge { justify-self: start; margin-block-start: var(--kd-space-2); }
}
@media (forced-colors: active) {
  .app-flate--d :is(.app-gruppe, .app-venter, .app-flate__linje) { border: 1px solid; }
}