/* Alefys fælles designsystem. Farver, afstande og komponenter gælder alle skærmsider. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --color-bg: #f6f7fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8f9fc;
  --color-text: #252534;
  --color-text-muted: #666779;
  --color-text-subtle: #737486;
  --color-border: #e7e8ef;
  --color-border-strong: #d3d5e0;

  --color-primary: #6650c7;
  --color-primary-hover: #513da9;
  --color-primary-soft: #efecfb;
  --color-focus: #a78bfa;
  --color-sidebar: #242132;
  --color-sidebar-text: #cbc7db;
  --color-sidebar-muted: #aaa4bf;
  --color-sidebar-hover: #343044;
  --color-sidebar-active: #42365f;

  --color-success: #16794c;
  --color-success-soft: #ecfdf3;
  --color-success-border: #abebc6;
  --color-info: #315ea8;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-warning: #9a6700;
  --color-warning-soft: #fff8e6;
  --color-warning-border: #f7d78a;
  --color-danger: #b42318;
  --color-danger-soft: #fff1f0;
  --color-danger-border: #fec9c5;
  --color-neutral: #5f5966;
  --color-neutral-soft: #f3f2f5;
  --color-neutral-border: #ddd9e1;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --shadow-sm: 0 2px 5px rgb(28 24 35 / 2%);
  --shadow-md: 0 12px 36px rgb(28 24 35 / 12%);
  --sidebar-width: 15rem;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--color-bg); }

body {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

a { color: var(--color-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 60%, transparent);
  outline-offset: 2px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: var(--space-5); font-size: clamp(1.625rem, 2.5vw, 2rem); font-weight: 650; line-height: 1.25; letter-spacing: -0.04em; overflow-wrap: anywhere; }
h2 { margin: var(--space-8) 0 var(--space-4); font-size: 1.125rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.02em; }
h3 { margin-bottom: var(--space-3); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }

/* Layout ------------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.app-shell__main { min-width: 0; }

.app-sidebar {
  display: none;
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  overflow-y: auto;
  color: var(--color-sidebar-text);
  background: var(--color-sidebar);
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-hover) transparent;
}

.page-content { width: 100%; max-width: 100rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); }

.app-topbar {
  display: flex;
  position: sticky;
  z-index: 10;
  top: 0;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.5rem;
  padding: 0 var(--space-4);
  background: rgb(255 255 255 / 92%);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}
.app-topbar__brand { margin-left: var(--space-3); font-weight: 750; color: var(--color-text); text-decoration: none; }
.app-topbar__spacer { flex: 1; }
.topbar-soeg { display: flex; position: relative; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 28rem; }
.topbar-soeg > .ikon { position: absolute; left: var(--space-3); color: var(--color-text-muted); pointer-events: none; }
.topbar-soeg input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

/* Søgevælgeren (kerne/soegevaelger.py). Afløser `.soegresultater`, som hørte til de 25 linjer
   JavaScript i aftalens kundevælger: valget er nu radioknapper, ikke klikbare knapper, og
   derfor er der ingen JavaScript at style efter. */
.soegevaelger { max-width: 32rem; }
.soegevaelger__soegning { display: flex; gap: var(--space-2); align-items: center; }
.soegevaelger__soegning .knap { flex: 0 0 auto; margin: 0; }
.soegevaelger__felt { flex: 1 1 auto; min-width: 0; }
/* Beholderen er htmx' udskiftningsmål og tegner med vilje ingenting selv. Rammen hænger på
   `.soegeliste`, som kun skrives, når der ER noget at vise: en regel på beholderen med
   `:empty` ville tegne en tom kasse, så snart svaret indeholder et linjeskift. */
.soegeresultat { display: block; }
.soegeliste {
  display: grid;
  gap: 1px;
  max-height: 17rem;
  margin-top: var(--space-2);
  overflow-y: auto;
  background: var(--color-border);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.soegevalg { display: flex; gap: var(--space-2); align-items: baseline; padding: 0.45rem 0.6rem; font-weight: 400; background: var(--color-surface); cursor: pointer; }
.soegevalg:hover { background: var(--color-primary-soft); }
.soegevalg input { flex: 0 0 auto; margin: 0; }
.soegevalg--valgt { font-weight: 600; background: var(--color-primary-soft); }
.soegebesked { padding: 0.45rem 0.6rem; margin: 0; color: var(--color-text-muted); font-size: 0.8125rem; background: var(--color-surface); }
/* Sammenfoldet liste: et valg efterlader kun den valgte linje, så resultaterne ikke bliver
   stående og spærrer for felterne under vælgeren. Klasserne sættes to steder med samme
   betydning — af lytteren i `templates/base.html` ved klikket, og af serveren i
   `_soegeresultat.html`, når siden kommer igen med et valg, der allerede er truffet (så
   virker sammenfoldningen også uden JavaScript). Den valgte linje skjules aldrig: begge veje
   peger de øvrige linjer ud, netop for ikke at gøre synligheden af brugerens valg afhængig
   af `:has()`-understøttelse. */
.soegevalg--skjult { display: none; }
.soegeliste--sammenfoldet .soegebesked { display: none; }

.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: var(--space-6); }
.auth-shell__brand { position: fixed; top: var(--space-6); left: var(--space-6); font-size: 1.125rem; font-weight: 750; }
.auth-shell__brand a { color: var(--color-text); text-decoration: none; }
.auth-shell__content { width: min(100%, 30rem); margin: auto; }

/* Sidebar and mobile drawer ------------------------------------------------------------- */

.sidebar { display: flex; min-height: 100%; flex-direction: column; padding: var(--space-4) var(--space-3); color: var(--color-sidebar-text); background: var(--color-sidebar); }
.sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); margin-bottom: var(--space-3); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.035em; color: #fff; text-decoration: none; }
.sidebar__brand:hover { color: #fff; }
.sidebar__mark { display: block; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
/* Bjælken er tæt med vilje: administratorens skal kunne ses uden at rulle ved 1366 × 768 med
   Udgivelser og én gruppe mere åben, også med tre senest åbnede numre (etape 5, B2). En
   berøringsskærm beholder de store rækker (`pointer: coarse` nederst). */
.sidebar__nav { display: grid; gap: var(--space-2); }
.sidebar__nav ul { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.sidebar__gruppe { padding-bottom: var(--space-1); }
.sidebar__gruppe > summary { display: flex; align-items: center; min-height: 1.75rem; padding: 0 var(--space-3); cursor: pointer; color: var(--color-sidebar-muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; list-style: none; text-transform: uppercase; }
.sidebar__gruppe > summary::-webkit-details-marker { display: none; }
.sidebar__gruppe > summary::after { width: 0.45rem; height: 0.45rem; margin-left: auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: rotate(45deg) translateY(-0.15rem); transition: transform 150ms ease; }
.sidebar__gruppe[open] > summary::after { transform: rotate(225deg) translate(-0.1rem, -0.1rem); }
.sidebar__underrubrik { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-3); color: var(--color-sidebar-muted); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 1.875rem;
  padding: 0.3125rem var(--space-3);
  color: var(--color-sidebar-text);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 450;
  text-decoration: none;
}
.sidebar__nav a:hover { color: #fff; background: var(--color-sidebar-hover); }
.sidebar__nav a.is-active { color: #eee7ff; background: var(--color-sidebar-active); font-weight: 600; }
.sidebar__nav a.is-active svg { color: #b9a1ff; }

/*
Genvejen til det aktuelle nummer er to linjer: etiketten og nummerets titel. Reglerne står
bevidst EFTER `.sidebar__nav a` — de to selektorer vejer lige meget, så den sidste vinder, og
stod de før, ville `display: flex` slå `display: grid` ihjel og skubbe titlen ud i siden.
*/
.sidebar__nav .sidebar__aktuel a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
.sidebar__aktuel svg { grid-row: 1 / span 2; }
.sidebar__aktuel span { grid-column: 2; color: var(--color-sidebar-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; }
.sidebar__aktuel strong { grid-column: 2; min-width: 0; overflow: hidden; color: var(--color-sidebar-text); font-size: 0.8125rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__nav .sidebar__aktuel a:hover span, .sidebar__nav .sidebar__aktuel a:hover strong,
.sidebar__nav .sidebar__aktuel a.is-active span, .sidebar__nav .sidebar__aktuel a.is-active strong { color: inherit; }
/* De øvrige numre står under det aktuelle og rykkes ind til dets tekstspalte. */
.sidebar__nav .sidebar__senest a { padding-left: calc(var(--space-2) + 1.05rem + var(--space-3)); font-size: 0.8125rem; font-weight: 600; }
.sidebar__senest span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__nav svg, .mobile-nav svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sidebar__nav .taeller { margin-left: auto; }

.mobile-nav { position: relative; }
.mobile-nav > summary { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-md); list-style: none; }
.mobile-nav > summary::-webkit-details-marker, .account-menu > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary:hover { background: var(--color-neutral-soft); }
.mobile-nav__panel { position: fixed; z-index: 30; inset: 4.75rem var(--space-2) auto var(--space-2); max-height: calc(100dvh - 5.5rem); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.mobile-nav__panel .sidebar { min-height: auto; }

.account-menu { position: relative; }
.account-menu > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; }
.account-menu__name { color: var(--color-text); font-size: 0.8125rem; font-weight: 500; }
.account-menu > summary::after { content: ""; width: 0.375rem; height: 0.375rem; margin: 0 var(--space-2); border-right: 1px solid var(--color-text-muted); border-bottom: 1px solid var(--color-text-muted); transform: rotate(45deg); }
.account-menu__panel { position: absolute; z-index: 30; top: calc(100% + var(--space-3)); right: 0; width: 15rem; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.account-menu__meta { margin: var(--space-2) var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: 0.8125rem; }
.avatar { display: grid; width: 2.125rem; height: 2.125rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 999px; font-size: 0.75rem; font-weight: 750; }

/* Page patterns ------------------------------------------------------------------------ */

/* Tilbagelinket står før overskriften og er derfor det eneste, der har luft NEDAD.
   `templates/_tilbagelink.html` — én komponent, så afstanden er ens på hver detaljeside. */
.tilbagelink { margin: 0 0 var(--space-4); }
.tilbagelink .knap--let { min-height: 2rem; padding: 0; color: var(--color-text-muted); background: transparent; border-color: transparent; font-weight: 500; }
.tilbagelink .knap--let::before { content: "←"; }
.tilbagelink .knap--let:hover { color: var(--color-primary); }
.broedkrummer { margin: calc(var(--space-4) * -1) 0 var(--space-3); color: var(--color-text-muted); font-size: 0.875rem; }
.broedkrummer ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.broedkrummer li:not(:last-child)::after { margin-left: var(--space-2); content: "/"; }
.broedkrummer a { color: inherit; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.page-header h1 { margin-bottom: var(--space-2); }
.page-header > div:first-child { flex: 1 1 18rem; min-width: 0; }
.page-header__meta { margin: 0; color: var(--color-text-muted); }
.page-actions, .handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.handlingsmenu { position: relative; }
.handlingsmenu > summary { list-style: none; }
.handlingsmenu > summary::-webkit-details-marker { display: none; }
.handlingsmenu[open] > summary { margin-bottom: var(--space-2); }
.handlingsmenu__indhold { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.handlingsmenu__fare { margin-left: var(--space-2); }
.section-nav { display: flex; gap: var(--space-1); padding: var(--space-1); margin: 0 0 var(--space-6); overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.section-nav a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem var(--space-4); color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.section-nav a:hover { color: var(--color-text); background: var(--color-bg); }
.section-nav a[aria-current="location"] { color: var(--color-primary); background: var(--color-primary-soft); font-weight: 650; }

.kort, .formular, .info-panel, .empty-state {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.kort--smal { max-width: 34rem; }
.info-panel { border-left: 3px solid var(--color-primary); }
.empty-state { padding: var(--space-10) var(--space-6); color: var(--color-text-muted); text-align: center; }
.empty-state h2 { margin-top: 0; color: var(--color-text); }
.empty-state p:last-child, .kort > p:last-child { margin-bottom: 0; }
/* Handlingen i en tom liste står under teksten og ikke ved siden af: den tomme liste er det
   sted, brugeren er mest i tvivl om næste skridt, og så skal knappen være det, øjet falder på. */
.empty-state__handling { display: block; margin-top: var(--space-4); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
/* Kortet er en container, så tallets størrelse kan følge KORTETS bredde og ikke vinduets: på
   Økonomioverblikket står otte kort i 1366 px, og «16.000,00 kr.» i 2rem knækkede midt i tallet
   («16.000, / 00 kr.»). Nu må linjen kun knække ved mellemrummet før «kr.». */
.stat-card { container-type: inline-size; position: relative; min-width: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.stat-card__label { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 500; }
.stat-card__value { margin: 0; font-size: clamp(1rem, 16cqi, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.stat-card--danger .stat-card__value { color: var(--color-danger); }
.stat-card--warning .stat-card__value { color: var(--color-warning); }
.stat-card--neutral .stat-card__value { color: var(--color-text-muted); }

/* Buttons and fields ------------------------------------------------------------------- */

/* Ét knapsystem, og det er dansk. `.button--secondary` var en dublet af `.knap--let`, og
   `.button--ghost/-danger/-block` fandtes udelukkende for `base.html`s kontomenu, mens de 152
   andre skabeloner skrev `.knap`. Navnene her er dem, hele projektet bruger. */
button, .knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  gap: var(--space-2);
  padding: 0.55rem 0.9rem;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
button:hover, .knap:hover { color: #fff; background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
/* Et spærret link kan ikke bruge `disabled`; det er `aria-disabled`, der bærer beskeden
   videre til en skærmlæser, og viewet afviser handlingen uanset hvad knappen ser ud til. */
button:disabled, .knap[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.knap--let { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); }
.knap--let:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); }
.knap--menu { justify-content: flex-start; color: var(--color-text-muted); background: transparent; border-color: transparent; }
.knap--menu:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: transparent; }
.knap--fare { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.knap--fare:hover { background: #8e1b13; border-color: #8e1b13; }
.knap--bred { width: 100%; margin: 0; }

.formular { max-width: 48rem; }
.formular--indlejret { display: inline; padding: 0; border: 0; background: transparent; box-shadow: none; }
.felt { min-width: 0; margin-bottom: var(--space-5); }
.felt label, .filtre__felt label { display: block; margin-bottom: var(--space-1); color: var(--color-text); font-size: 0.8125rem; font-weight: 550; }
.felt input:not([type="checkbox"]):not([type="radio"]), .felt select, .felt textarea,
.filtre__felt input, .filtre__felt select, .tabel input:not([type="checkbox"]):not([type="radio"]), .tabel select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.felt input:not([type="checkbox"]):not([type="radio"]), .felt select { max-width: 32rem; }
.felt textarea { max-width: 48rem; min-height: 7rem; resize: vertical; }
.felt input[aria-invalid="true"], .felt select[aria-invalid="true"], .felt textarea[aria-invalid="true"] { border-color: var(--color-danger); }
/* `--fejl` og ikke `--error`: klassen hed det engelske i CSS'en og det danske i den skabelon,
   der brugte den, så fejlmarkeringen i faktureringsfladen har aldrig virket. */
.felt--fejl input:not([type="checkbox"]):not([type="radio"]), .felt--fejl select, .felt--fejl textarea { border-color: var(--color-danger); }
.felt ul { margin: 0; padding: 0; list-style: none; }
.felt ul label { display: inline; font-weight: 400; }
.hjaelpetekst { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 0.8125rem; }
/* «Opret ny …» ved et søgefelt. Står under feltet som en hjælpetekst og ikke som en knap:
   den almindelige vej er at vælge en post, der findes, og linket er undtagelsen. */
.felthandling { margin: var(--space-1) 0 0; font-size: 0.8125rem; }
.feltfejl { margin: var(--space-1) 0 0; padding: 0; color: var(--color-danger); font-size: 0.8125rem; list-style: none; }
.fejlboks { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); color: var(--color-danger); background: var(--color-danger-soft); border: 1px solid var(--color-danger-border); border-left-width: 3px; border-radius: var(--radius-md); }
.fejlboks:focus { outline: 2px solid var(--color-danger); outline-offset: 2px; }
.fejlboks__titel { margin: 0 0 var(--space-2); font-weight: 600; }
.fejlboks ul { margin: 0; padding-left: 1.25rem; }
.fejlboks a { color: inherit; text-decoration: underline; }
.paakraevet, .felt__etiket--paakraevet::after { color: var(--color-danger); }
.felt__etiket--paakraevet::after { content: " *"; }

.filtre { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.filtre__felt { min-width: 10rem; }
.filtre__felt input, .filtre__felt select { min-width: 10rem; }
/* En letvægtsformular lige under sidehovedet (korrekturkøens sortering): den skal ikke se ud
   som `.filtre`s almindelige kort, der ellers konkurrerer med sidehovedet om opmærksomheden. */
.filtre--kontekst { padding: 0 0 var(--space-4); background: transparent; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
/* Nummervælgeren (`publikationer/_nummervaelger.html`): én kompakt linje under overskriften med
   forrige, vælgeren og næste. Etiket, liste og knap står på én linje; på en smal skærm brydes
   linjen, så forrige og næste står over og under vælgeren i stedet for at presse den. */
.nummervaelger { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); font-size: 0.875rem; }
.nummervaelger__formular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.nummervaelger__formular label { margin: 0; color: var(--color-text-muted); font-weight: 550; }
.nummervaelger__formular select { min-height: 2.25rem; max-width: 100%; padding: 0.35rem 0.6rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.nummervaelger__formular select:focus { border-color: var(--color-primary); }
.nummervaelger__nabo { font-weight: 550; }

/* Alerts, badges and detail panels ----------------------------------------------------- */

.beskeder { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.besked { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); color: var(--color-info); background: var(--color-info-soft); border: 1px solid var(--color-info-border); border-left-width: 3px; border-radius: var(--radius-md); }
.besked--success { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-success-border); }
.besked--error { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-border); }
.besked--warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning-border); }
.besked--info { color: var(--color-info); background: var(--color-info-soft); border-color: var(--color-info-border); }

/* Kvitteringen for et htmx-gemt skift (`redaktion/_artikelstatus.html`). Den er ikke en
   `.besked`: beskederne står øverst på siden, og en htmx-handling flytter aldrig blikket
   derop. Kvitteringen står, hvor knappen blev trykket, og bliver stående til næste skift —
   en besked, der tones ud efter et par sekunder, rammer netop ikke den, der kiggede væk.
   Farveglimtet er den bevægelse, øjet fanger; den er slået fra, hvis brugeren har bedt
   systemet om mindre bevægelse. */
.kvittering {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-success);
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 650;
}
.kvittering--uaendret { color: var(--color-text-muted); background: var(--color-neutral-soft); border-color: var(--color-neutral-border); }
.kvittering__flueben { font-size: 1rem; line-height: 1; }
/* Statussen i sidehovedet glimter kort, når htmx har byttet den. Radius, så glødet følger
   teksten og ikke tegner et firkantet felt midt i underteksten. */
.etiket--skiftet { border-radius: 0.25rem; }

/* Knappen fortæller selv, at kaldet er undervejs. To labels og ikke JavaScript: htmx sætter
   `htmx-request` på formularen, mens den venter, og teksten står rigtigt både før og efter. */
.knap__igang { display: none; }
.htmx-request .knap__hvile { display: none; }
.htmx-request .knap__igang { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  .kvittering { animation: kvittering-frem 1s ease-out; }
  .etiket--skiftet { animation: etiket-frem 1.6s ease-out; }
}
/* Glimtet starter som den fyldte succesfarve og lander på den rolige. */
@keyframes kvittering-frem {
  from { color: #fff; background: var(--color-success); border-color: var(--color-success); }
}
@keyframes etiket-frem {
  from { background: var(--color-success-soft); box-shadow: 0 0 0 0.25rem var(--color-success-soft); }
}

/* Ét mærkat, og det heder `markering` — `.badge` var samme CSS under et engelsk navn i 8
   skabeloner mod 46. Varianterne navngives efter TONE og ikke efter betydning: teksten i
   mærkatet siger, hvad det er, klassen siger kun, hvor kraftigt det skal læses. Undtagelsen er
   de tre datadækningsværdier, som interpoleres direkte fra databasens enum
   (`kerne/_datadaekning.html`) og derfor skal hedde præcis det, feltet indeholder. */
.markering {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  color: var(--color-info);
  background: var(--color-info-soft);
  border: 1px solid var(--color-info-border);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
}
/* `--info` er den bare `.markering` skrevet ud. Den findes, fordi tonen et sted kommer fra en
   skabelonvariabel (`markering--{{ tone }}` i arbejdspunkterne) og derfor skal kunne rammes. */
.markering--info { color: var(--color-info); background: var(--color-info-soft); border-color: var(--color-info-border); }
.markering--ok, .markering--strukturelt_komplet { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-success-border); }
.markering--advarsel, .markering--delvis { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning-border); }
.markering--fare, .markering--mangelfuld { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-border); }
.markering--inaktiv { color: var(--color-neutral); background: var(--color-neutral-soft); border-color: var(--color-neutral-border); }

/* Dubletmarkeringen står på alle tre virksomhedsfaner, lige under fanebjælken. Den skal læses
   FØR resten af siden — det er hele grunden til, at den er der — og får derfor samme
   farveflade som en fareadvarsel og ikke bare et lille mærke i en tabelcelle. */
.dubletmarkering {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}
.taeller { display: inline-grid; min-width: 1.25rem; height: 1.25rem; place-items: center; padding: 0 var(--space-1); color: var(--color-primary); background: var(--color-primary-soft); border-radius: 999px; font-size: 0.6875rem; font-weight: 750; }

/* Metadatapanelet. Ét navn — `noeglevaerdier` og `noegleliste` var samme grid, og et fjerde
   forsøg var stavet forkert og derfor ustylet. Gengives gennem `{% oplysninger %}`. */
.oplysninger { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.oplysninger dt { color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 650; }
.oplysninger dd { margin: 0; }
.oplysninger--kort { grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: 0.8125rem; }

/* Postens oprindelse. Dæmpet og adskilt, fordi den ikke er en oplysning, brugeren har
   udfyldt — men stadig knyttet til panelet over den, og derfor uden luft imellem.
   Gengives gennem `{% postmetadata %}`. */
.postmetadata { margin: var(--space-2) 0 var(--space-5); color: var(--color-text-muted); font-size: 0.8125rem; }

/* Data tables -------------------------------------------------------------------------- */

/* `position: relative` holder `.skjult`-tekst i cellerne inde i rammens rulning. Uden den er
   den absolut placerede skærmlæsertekst placeret i forhold til siden og gjorde hele siden
   bredere end en telefon, selv om tabellen selv rullede (nummerets artikelfane, 29.09.2026). */
.tabelramme { position: relative; width: 100%; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tabel { width: 100%; min-width: 38rem; border-collapse: collapse; background: var(--color-surface); font-variant-numeric: tabular-nums; }
.tabel th, .tabel td { padding: 0.875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.tabel thead th { position: sticky; top: 0; z-index: 1; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 0.75rem; font-weight: 550; letter-spacing: 0; }
.tabel--korrektur { min-width: 0; table-layout: fixed; }
.tabel--korrektur .korrekturraekke__artikel { width: 46%; overflow-wrap: anywhere; }
.tabel--korrektur .korrekturraekke__deadline { width: 12%; white-space: nowrap; }
.tabel--korrektur .korrekturraekke__dokument { width: 16%; }
.tabel--korrektur .korrekturraekke__handling { width: 26%; }
.korrekturraekke__handling form { margin: 0; }
.korrekturraekke__handling .knap { white-space: nowrap; }
.tabel--korrektur .korrekturraekke__deadline .redaktionsartikel__note { white-space: normal; }
.korrekturgruppe > summary, .korrekturdetaljer > summary { cursor: pointer; font-weight: 700; }
.korrekturgruppe[open] > summary, .korrekturdetaljer[open] > summary { margin-bottom: var(--space-3); }
.korrekturdokumenter { padding: var(--space-4); margin: var(--space-6) 0 var(--space-5); background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); }
.korrekturdokumenter h2 { margin-top: 0; }
.korrekturdokumenter p:last-child { margin-bottom: 0; }
/* Korrekturafsnittets underoverskrifter: dokumentadgang, læseinstruktion, afklaring og
   kvittering er fire sider af den samme sag og står derfor i ét afsnit. */
.korrekturdokumenter h3 { margin-bottom: var(--space-1); }
.tabelsortering { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; }
.tabelsortering:hover { color: var(--color-primary); text-decoration: underline; }
.tabelsortering__pil { color: var(--color-primary); font-size: 0.875rem; line-height: 1; }
/* Placeret i bladet. Rækken farves, fordi markeringen skal kunne ses ned ad en lang liste
   uden at læse kolonnen — det er hele pointen med den. `:hover` sættes igen bagefter, ellers
   ville den almindelige hover-flade slå den grønne ud, netop mens man peger på rækken. */
.raekke--placeret > td, .raekke--placeret > th { background: var(--color-success-soft); }
.tabel tbody tr.raekke--placeret:hover > td { background: var(--color-success-soft); }
.placeringscelle { white-space: nowrap; }
.placeringscelle form { margin: 0 0 var(--space-1); }
.tabel tbody tr:last-child > * { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--color-surface-subtle); }
.tabel td > a:not(.knap) { font-weight: 550; text-decoration: none; }
.tabel td > a:not(.knap):hover { text-decoration: underline; }
.tabel td:has(> .knap) { vertical-align: middle; }
.tabel td[colspan] { padding-block: var(--space-6); color: var(--color-text-muted); }
.tabel tbody th { font-weight: 650; }
/* Andenlinjen i en tabelcelle: den oplysning, der kvalificerer cellens egen tekst — fx
   årstallet under ordrebekræftelsens udgaver. Den skal kunne læses, men aldrig konkurrere
   med rækkens egne data. */
.tabel__note { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: 0.75rem; }

/* Redaktion: samme kort og farver som resten af Alefy, med status som tekst og farve. */
.redaktionsbudget { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: var(--space-3); }
.redaktionsbudget .stat-card__label { min-height: 2.25rem; }
.redaktionsbudget__note { margin: 0; color: var(--color-text-muted); font-size: 0.75rem; }
.redaktionsfiltre { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.redaktionsfiltre .knap { gap: var(--space-2); }
.redaktionsfiltre [aria-current="true"], .redaktionsfiltre [aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); }
.redaktionsfiltre__antal { font-variant-numeric: tabular-nums; }
.redaktionsartikel { --fasefarve: var(--color-neutral); --faseflade: var(--color-neutral-soft); }
.redaktionsartikel[data-status="tekst_modtaget"], .redaktionsartikel[data-status="redigering"] { --fasefarve: var(--color-info); --faseflade: var(--color-info-soft); }
.redaktionsartikel[data-status="korrektur"] { --fasefarve: var(--color-warning); --faseflade: var(--color-warning-soft); }
.redaktionsartikel[data-status="klar_til_layout"], .redaktionsartikel[data-status="i_layout"], .redaktionsartikel[data-status="layoutkorrektur"] { --fasefarve: var(--color-primary); --faseflade: var(--color-primary-soft); }
.redaktionsartikel[data-status="faerdig"] { --fasefarve: var(--color-success); --faseflade: var(--color-success-soft); }
.redaktionsartikel[data-status="udgaaet"] { color: var(--color-text-muted); }
.redaktionsartikel > td:first-child { box-shadow: inset 3px 0 var(--fasefarve); }
.redaktionsartikel__status .markering { color: var(--fasefarve); background: var(--faseflade); }
.redaktionsartikel__note { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: 0.75rem; }
@media (pointer: coarse) { .redaktionsfiltre .knap { min-height: 2.75rem; } }
.tabel form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tabel form .knap--let { min-height: 2rem; }
.knap--kompakt { padding-inline: var(--space-3); }
.tabel--taet th, .tabel--taet td { padding-inline: 0.625rem; }
.redaktionsartikel__skribenter { overflow-wrap: break-word; }
.tabel__gruppe > th { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); background: var(--color-neutral-soft); font-size: 0.75rem; text-align: left; }
.materialeraekke__redigering form { min-width: 22rem; }
.materialeraekke__redigering select { width: auto; min-width: 8rem; }
.materialeraekke__redigering input { flex: 1 1 13rem; }

/* Materialefelterne på ordrebekræftelsens linjefane hører til ÉN formular for hele tabellen
   (HTML5's `form`-attribut) og ligger derfor IKKE i en `<form>`, som `.tabel form` kunne
   stille op. De får samme opstilling her, så statusvælgeren og mappeadressen står side om
   side, og knappen «Opdater alt materiale» får luft under tabellen. */
.materialefelter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.materialefelter select { width: auto; min-width: 8rem; }
.materialefelter input { flex: 1 1 13rem; min-width: 10rem; }
.materialehandlinger { margin-top: var(--space-3); }
/* En formular, hvis felter ligger andre steder på siden (`form`-attributten): elementet
   rummer kun skjulte felter og må derfor ikke sætte luft af i layoutet. */
.tomformular { margin: 0; }
.liste--tynd { margin: 0; padding-left: 1rem; }

/* Sidebladring under en lang liste (templates/_paginering.html). Tælleren står i midten, så
   «Forrige» og «Næste» bliver liggende det samme sted, når man bladrer. */
.paginering { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.paginering__tael { margin: 0; }

/* Arbejdsbordet bruger læsbare rækker, der også passer på en telefon. */
.arbejdsliste { margin: 0 0 var(--space-6); padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.arbejdspunkt { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.arbejdspunkt:last-child { border-bottom: 0; }
.arbejdspunkt:hover { background: var(--color-surface-subtle); }
.arbejdspunkt--automatisk { border-left: 3px solid var(--color-info-border); }
.arbejdspunkt--manuel { border-left: 3px solid var(--color-neutral-border); }
.arbejdspunkt__indhold { flex: 1; min-width: 0; }
.arbejdspunkt__titel { color: var(--color-text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.arbejdspunkt__titel:hover { color: var(--color-primary); text-decoration: underline; }
.arbejdspunkt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.arbejdspunkt__frist { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.arbejdspunkt__frist .ikon { width: 0.875rem; height: 0.875rem; }
.arbejdspunkt__aabn { display: grid; flex: 0 0 2.75rem; height: 2.75rem; place-items: center; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.arbejdspunkt__aabn:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); }

/* Fælles ikoner og diskrete statusfarver i nøgletallene. */
.ikon { display: inline-block; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat-card__ikon { display: grid; float: right; width: 2rem; height: 2rem; margin: 0 0 var(--space-2) var(--space-2); place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); }
.stat-card--danger .stat-card__ikon { color: var(--color-danger); background: var(--color-danger-soft); }
.stat-card--warning .stat-card__ikon { color: var(--color-warning); background: var(--color-warning-soft); }
.stat-card--neutral .stat-card__ikon { color: var(--color-text-muted); background: var(--color-neutral-soft); }

/* Filtre gengives både med .felt og .filtre__felt. De skal flugte uanset skabelon. */
.filtre > .felt, .filtre > .filtre__felt { flex: 1 1 10rem; min-width: 0; margin-bottom: 0; }
.filtre > .filtre__felt:has(> button):not(:has(> input, > select)) { flex: 0 0 auto; }
.filtre--kontekst > .felt, .filtre--kontekst > .filtre__felt { flex: 0 1 28rem; }
.filtre input, .filtre select { max-width: 100%; }
.filtre .hjaelpetekst { margin-bottom: 0; }
/* «Flere filtre» (`templates/_filtre.html`): søgefeltet står fremme, resten bag en <details>.
   Lukket er den et lille link i filterlinjen; åben tager den hele bredden, så felterne står på
   deres egen række under søgefeltet og knappen. */
.flere-filtre { flex: 0 0 auto; align-self: center; }
.flere-filtre[open] { flex-basis: 100%; }
.flere-filtre > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; cursor: pointer; color: var(--color-primary); font-size: 0.875rem; font-weight: 600; }
.flere-filtre[open] > summary { margin-bottom: var(--space-3); }
.flere-filtre__felter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.flere-filtre__felter > .felt { flex: 1 1 10rem; min-width: 0; margin-bottom: 0; }
.felt input[type="checkbox"], .felt input[type="radio"], .filtre__felt input[type="checkbox"], .filtre__felt input[type="radio"], .tabel input[type="checkbox"], .tabel input[type="radio"] { flex: 0 0 1rem; width: 1rem; min-width: 1rem; height: 1rem; min-height: 1rem; padding: 0; accent-color: var(--color-primary); vertical-align: middle; }
.filtre > .filtre__felt:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; }
.filtre__felt:has(> input[type="checkbox"]) > label { margin: 0; }
.felt:has(> input[type="checkbox"]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.felt:has(> input[type="checkbox"]) > label { margin: 0; }
.felt:has(> input[type="checkbox"]) > .hjaelpetekst, .felt:has(> input[type="checkbox"]) > .feltfejl { flex-basis: 100%; }
.formular fieldset { min-width: 0; margin: 0 0 var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.formular legend { padding: 0 var(--space-2); font-weight: 600; }
.afregningsgruppe__alle { margin: 0 0 var(--space-3); font-weight: 500; }
.afregningsgruppe__poster { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.formular > h2:first-of-type { margin-top: 0; }
.formular .handlinger { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.felt input:focus, .felt select:focus, .felt textarea:focus, .filtre input:focus, .filtre select:focus, .topbar-soeg input:focus { border-color: var(--color-primary); }
.udgivelseskort__titel a { color: var(--color-text); text-decoration: none; }
.udgivelseskort__titel a:hover { color: var(--color-primary); text-decoration: underline; }
.udgivelseskort .oplysninger--kort { grid-template-columns: minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: no-preference) {
  a, button, input, select, textarea { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
}

/* Komponenter, der manglede CSS -------------------------------------------------------- */

/* Alle klasserne herunder stod i skabelonerne uden en regel i denne fil og blev derfor vist
   med browserens standard. En skabelon med et ukendt klassenavn gengiver fint — bare forkert —
   så intet fangede det. Nu gør `kerne/tests/test_stilklasser.py` det. */

/* Liste af links uden punkttegn. Bruges hvor rækkerne er navne, man klikker på, og ikke
   punkter i en opremsning. `.liste--tynd` er en anden komponent trods navnet: en tæt
   opremsning MED punkttegn. */
.liste { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* Mærkater på en linje, fx en opgaves tags. */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }

/* Et `<details>`-afsnit, der ser ud som en komponent og ikke som en bar trekant. Ét navn til
   alle tre steder, der havde deres eget: kommentarens tidligere versioner, datadækningens
   kontrolliste og underopgavernes samarbejdsblok. */
.udfoldning { padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.udfoldning > summary { cursor: pointer; color: var(--color-text-muted); font-weight: 650; }
.udfoldning > summary:hover { color: var(--color-primary); }
.udfoldning[open] > summary { margin-bottom: var(--space-3); }
/* Åben og uden overskrift på en stor skærm; foldet på en telefon (`foldes-paa-mobil.js`). */
@media (min-width: 40.0625rem) {
  .foldes-paa-mobil { padding: 0; background: none; border: 0; }
  .foldes-paa-mobil > summary { display: none; }
}

/* Kommentartråden (modul 17). Hele tråden var ustylet, så hver kommentar stod som løbende
   tekst uden at kunne skelnes fra den næste. */
.kommentarer { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
/* `scroll-margin-top` hører til ankeret: hver kommentar er @-omtalens mål, og uden den lander
   den omtalte kommentar bag den faste topbjælke. */
.kommentar { padding: var(--space-4); scroll-margin-top: 5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-md); }
.kommentar__hoved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.kommentar__tekst { margin: 0; overflow-wrap: break-word; white-space: pre-wrap; }
.kommentar .udfoldning { background: var(--color-bg); }

/* Datadækningspanelet (modul 02). */
.datadaekning { padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.datadaekning > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.datadaekning .udfoldning ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
/* Kun flueben og kryds farves. Farves hele punktet, bliver beskrivelsen svær at læse — og
   beskrivelsen er det, kontrollen handler om. */
.kontrolpunkt > span:first-child { color: var(--color-success); font-weight: 750; }
.kontrolpunkt--fejlet > span:first-child { color: var(--color-danger); }
.kontrolpunkt--fejlet { font-weight: 650; }

/* Ændringslisten «felt: fra → til» i al historik — både på detaljesiderne og i
   revisionsloggen. Den ligger i en tabelcelle og må derfor hverken have punkttegn eller
   venstremargen, der skubber den ud af kolonnen. */
.historik__aendringer { margin: 0; padding: 0; color: var(--color-text-muted); font-size: 0.8125rem; list-style: none; }
.historik__aendringer li + li { margin-top: var(--space-1); }

/* Existing domain components ----------------------------------------------------------- */

.notifikationer { margin: 0; padding: 0; list-style: none; }
.notifikation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); border-radius: var(--radius-md); }
.notifikation--ulaest { border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.notifikation__tekst p { margin: var(--space-1) 0 0; }

.udgivelser { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.udgivelseskort { display: flex; min-width: 0; gap: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.udgivelseskort__forside { flex: 0 0 6rem; }
.udgivelseskort__forside img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.udgivelseskort__indhold { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.udgivelseskort__titel { margin: 0 0 var(--space-1); font-size: 1rem; }
.udgivelseskort__handlinger { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-3); }
.forsideplaceholder { display: grid; min-height: 8rem; aspect-ratio: 3 / 4; place-items: center; margin: 0; padding: var(--space-3); color: var(--color-text-muted); background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 650; text-align: center; }
.publikationsforside { max-width: 14rem; margin-bottom: var(--space-4); }
.publikationsforside img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.oversigtspunkter { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.beslutninger { margin: 0; padding: 0; list-style: none; }
.beslutninger > li { margin-bottom: var(--space-3); }
.aktivitetstekst { max-width: 48rem; white-space: normal; }
.dokumentvisning { display: block; width: 100%; height: 40rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.daekningsmaerke { color: var(--color-warning); font-weight: 750; cursor: help; }
.kontrolliste { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.kontrolliste .hjaelpetekst { display: block; }
.vilkaar { overflow-x: auto; padding: var(--space-4); background: var(--color-neutral-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; white-space: pre-wrap; }

.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 64rem) {
  .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .app-sidebar { display: block; }
  .app-shell__main { grid-column: 2; }
  .app-topbar { padding: 0 var(--space-8); }
  .app-topbar__brand, .mobile-nav { display: none; }
  .page-content { padding: var(--space-10) var(--space-8); }
}

@media (max-width: 40rem) {
  .page-content { padding: var(--space-5) var(--space-3) var(--space-8); }
  .app-topbar { padding-inline: var(--space-3); gap: var(--space-2); }
  .account-menu__name { display: none; }
  .account-menu > summary::after { display: none; }
  .app-topbar__brand { display: none; }
  .topbar-soeg { max-width: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: var(--space-4); }
  .stat-card__label { font-size: 0.75rem; }
  .stat-card__ikon { width: 1.5rem; height: 1.5rem; margin-left: var(--space-1); }
  .stat-card__ikon .ikon { width: 1rem; height: 1rem; }
  .arbejdspunkt { gap: var(--space-3); padding: var(--space-4) var(--space-3); }
  .page-header { margin-bottom: var(--space-4); }
  .page-actions { width: 100%; }
  .handlingsmenu, .handlingsmenu__indhold { width: 100%; }
  .handlingsmenu > summary { width: 100%; }
  .handlingsmenu__indhold > * { flex: 1 1 100%; }
  .handlingsmenu__fare { width: 100%; margin-left: 0; }
  .oplysninger { grid-template-columns: 1fr; gap: var(--space-1); }
  .oplysninger dd { margin-bottom: var(--space-3); }
  .tabel--korrektur, .tabel--korrektur tbody, .tabel--korrektur tr, .tabel--korrektur td { display: block; width: 100%; }
  .tabel--korrektur thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tabel--korrektur tr { padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .tabel--korrektur tr:last-child { border-bottom: 0; }
  .tabel--korrektur td { padding: var(--space-1) 0; border: 0; }
  .tabel--korrektur td:not(.korrekturraekke__artikel)::before { display: block; margin-bottom: 0.125rem; color: var(--color-text-muted); content: attr(data-label); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
  .tabel--korrektur .korrekturraekke__artikel { font-weight: 700; }
  .tabel--korrektur .korrekturraekke__handling { margin-top: var(--space-2); }
  .redaktionsfiltre--en-linje { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .redaktionsfiltre--en-linje .knap { flex: none; }
  .udgivelseskort { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: start; }
  .udgivelseskort__forside { grid-column: 1; grid-row: 1 / span 2; }
  .udgivelseskort__forside .forsideplaceholder { min-height: 6rem; padding: var(--space-2); font-size: 0.6875rem; }
  .udgivelseskort__indhold { display: contents; }
  .udgivelseskort__indhold > * { grid-column: 2; margin-block: 0; }
  .udgivelseskort__titel { grid-row: 1; overflow-wrap: anywhere; }
  .udgivelseskort__indhold > .oplysninger, .udgivelseskort__indhold > .udgivelseskort__handlinger { grid-column: 1 / -1; }
  .filtre__felt { width: 100%; }
  .filtre > .felt, .filtre > .filtre__felt { flex-basis: 100%; }
  .flere-filtre__felter > .felt { flex-basis: 100%; }
  .filtre__felt input, .filtre__felt select { width: 100%; }
  .kort, .formular, .info-panel { padding: var(--space-4); }
  .formular--indlejret { padding: 0; }
  .udgivelseskort .oplysninger--kort { gap: var(--space-2); }
  .udgivelseskort .oplysninger--kort dd { margin-bottom: 0; }
}

@media (pointer: coarse) {
  button, .knap, .section-nav a, .mobile-nav > summary, .account-menu > summary, .sidebar__nav a, .sidebar__gruppe > summary { min-height: 2.75rem; }
  .flere-filtre > summary { min-height: 2.75rem; }
  .felt input:not([type="checkbox"]):not([type="radio"]), .felt select, .felt textarea, .filtre__felt input, .filtre__felt select, .topbar-soeg input { min-height: 2.75rem; font-size: 1rem; }
}

/* Nummerets daglige arbejdsliste og redigering uden at forlade rækken. */
.redaktionsvalg { flex-wrap: wrap; }
.redaktionsvalg .felt { min-width: 10rem; flex: 1 1 10rem; }
.artikelredigering { min-width: 6rem; }
.artikelredigering[open] { min-width: 17rem; }
.artikelredigering summary { cursor: pointer; }
.artikelredigering form { margin-top: var(--space-2); }
.artikelredigering .felt { margin-bottom: .75rem; }
.prioriteringshandlinger { display: flex; gap: .25rem; flex-wrap: wrap; min-width: 9rem; }
.prioriteringshandlinger form { margin: 0; }

.artikelredigering form { display: block; }

.redaktionsartikel__titel { display: inline-block; }