/*
  Byggeplads — egen designprofil, retning 1b "Status og frist" (Kate,
  4/9-2026). Bygget OVEN PÅ tokens.css — ingen farve/font hardkodes her,
  alt går gennem `--bp-*`-variablerne. INGEN STPL-farver (ingen eucalyptus
  #4A6B5C, ingen Inter) — se BRAND_BYGGEPLADS.md, "bevidst et andet brand".

  Struktur: 1) reset/base 2) layout 3) typografi 4) komponenter
  (knapper/formularer/badges/tabeller) 5) Byggeplads-specifikke mønstre
  (statusbanner, forløbs-rail, tælle-tal, mangelkort, niveau-labels)
  6) tilstande (hover/focus-visible/disabled/tom liste) 7) mobil (<640px).
*/

/* ---------- 1) Reset/base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--bp-font-family);
  color: var(--bp-text-primary);
  background: var(--bp-bg);
  margin: 0;
  line-height: 1.5;
  font-variant-numeric: var(--bp-font-numeric-variant);
}

a {
  color: var(--bp-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.sag-link {
  color: var(--bp-text-primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--bp-border-subtle);
}

a.sag-link:hover { border-bottom-color: var(--bp-text-primary); }

/* ---------- 2) Layout ---------- */

header.bp-header {
  background: var(--bp-bg);
  border-bottom: 1px solid var(--bp-border-subtle);
  padding: var(--bp-space-4) var(--bp-space-5);
}

header.bp-header a {
  color: var(--bp-text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--bp-font-size-h1);
}

/* Runde 2c-hærdning: log ud-knapper i header/nav — ingen inline
   style="", CSP'en (script-src/style-src 'self') tillader det ikke. */
header.bp-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bp-space-3);
}

.bp-logud-gruppe {
  display: flex;
  gap: var(--bp-space-3);
  flex-wrap: wrap;
}

form.bp-logud-form {
  display: inline-flex;
  margin: 0;
}

main {
  padding: var(--bp-space-5);
  max-width: 960px;
  margin: 0 auto;
}

main.smal { max-width: 640px; }
main.fejlside { padding-top: var(--bp-space-8); }

/* Login-anker (komponentspec 1b, punkt 1) — rolig blok i øvre tredjedel,
   IKKE midt på siden (undgår "svævende boks i intet"). */
main.login-side {
  max-width: 420px;
  padding-top: var(--bp-space-7);
}
.login-anker { margin-bottom: var(--bp-space-5); }
.login-eyebrow { margin: 0 0 var(--bp-space-2) 0; }
.login-anker h1 { margin-bottom: var(--bp-space-2); }
.login-anker .lead { color: var(--bp-text-secondary); font-size: var(--bp-font-size-body); margin: 0; }
.login-kvittering .send-igen-link {
  color: var(--bp-text-primary);
  font-size: var(--bp-font-size-label);
}
.send-igen-link.send-igen-nedtonet {
  color: var(--bp-text-secondary);
  pointer-events: none;
  text-decoration: none;
}

section.bp-kort,
.husregel-kort,
.regeltjek-under,
.regeltjek-foer {
  background: var(--bp-bg);
  border: 1px solid var(--bp-border-subtle);
  border-radius: var(--bp-radius-card);
  padding: var(--bp-space-4);
  margin: var(--bp-space-4) 0;
}

/* ---------- 3) Typografi ---------- */

h1 {
  font-size: var(--bp-font-size-h1);
  font-weight: var(--bp-font-weight-h1);
  margin: 0 0 var(--bp-space-3) 0;
}

h2 {
  font-size: 20px;
  font-weight: 700;
  margin: var(--bp-space-6) 0 var(--bp-space-3) 0;
}

h3 {
  font-size: var(--bp-font-size-body);
  font-weight: 700;
  margin: 0 0 var(--bp-space-2) 0;
}

p { margin: 0 0 var(--bp-space-3) 0; }

.bp-display {
  font-size: var(--bp-font-size-display);
  font-weight: var(--bp-font-weight-display);
  line-height: 1;
}

.bp-label {
  font-size: var(--bp-font-size-label);
  font-weight: var(--bp-font-weight-label);
  letter-spacing: var(--bp-letter-spacing-label);
  text-transform: uppercase;
  color: var(--bp-text-secondary);
}

.hjaelpetekst { color: var(--bp-text-secondary); font-size: var(--bp-font-size-label); }

.kontaktperson, .kontaktboks p { color: var(--bp-text-secondary); font-size: var(--bp-font-size-label); }

.kontaktboks {
  background: var(--bp-button-secondary-bg);
  border-left: var(--bp-card-accent-width) solid var(--bp-text-primary);
  border-radius: var(--bp-radius-card);
  padding: var(--bp-space-3) var(--bp-space-4);
  margin-top: var(--bp-space-5);
}

/* ---------- 4) Komponenter ---------- */

label {
  display: block;
  color: var(--bp-text-secondary);
  font-size: var(--bp-font-size-label);
  margin-top: var(--bp-space-3);
  margin-bottom: var(--bp-space-1);
}

input[type="text"], input[type="email"], input[type="file"], select, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--bp-space-2);
  min-height: 44px;
  /* Loop 5, Kate (Port 2, punkt 6): formkontroller skal have en kant der
     kan SES, ikke `--bp-border-subtle` (den er til skillelinjer). */
  border: 1px solid var(--bp-border-control);
  border-radius: var(--bp-radius-button);
  font-family: inherit;
  font-size: var(--bp-font-size-body);
  color: var(--bp-text-primary);
  background: var(--bp-bg);
}

textarea { min-height: 72px; }

input:hover, select:hover, textarea:hover { border-color: var(--bp-text-secondary); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible {
  outline: var(--bp-focus-ring-width) solid var(--bp-focus-ring-color);
  outline-offset: var(--bp-focus-ring-offset);
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button, input[type="submit"], .knap {
  display: inline-block;
  background: var(--bp-button-primary-bg);
  color: var(--bp-button-primary-text);
  border: none;
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-2) var(--bp-space-4);
  min-height: 44px;
  line-height: 24px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--bp-font-size-body);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--bp-space-4);
}

button:hover, input[type="submit"]:hover, .knap:hover { background: var(--bp-button-primary-hover); }

button:disabled:hover, input[type="submit"]:disabled:hover, .knap:disabled:hover {
  background: var(--bp-button-primary-bg);
}

button.sekundaer, .knap.knap-sekundaer {
  background: var(--bp-button-secondary-bg);
  color: var(--bp-button-secondary-text);
  /* Loop 5, Kate (Port 2, punkt 6): samme kant-hærdning som formkontroller
     ovenfor — en sekundærknap er stadig en KNAP, ikke en skillelinje. */
  border: 1px solid var(--bp-border-control);
}

button.sekundaer:hover, .knap.knap-sekundaer:hover { background: var(--bp-button-secondary-hover); }

.handlinger { margin: var(--bp-space-4) 0; display: flex; gap: var(--bp-space-3); flex-wrap: wrap; }

.inline-form { display: inline; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--bp-space-3);
}

th, td {
  text-align: left;
  padding: var(--bp-space-2) var(--bp-space-3);
  border-bottom: 1px solid var(--bp-border-subtle);
  vertical-align: top;
}

th {
  color: var(--bp-text-secondary);
  font-weight: 500;
  font-size: var(--bp-font-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bp-letter-spacing-label);
}

form.filter { margin-bottom: var(--bp-space-4); display: flex; gap: var(--bp-space-3); flex-wrap: wrap; align-items: flex-end; }
form.filter label { display: inline-block; margin-top: 0; }
form.filter select { min-width: 160px; }

form.kopier {
  margin-top: var(--bp-space-5);
  padding: var(--bp-space-4);
  background: var(--bp-button-secondary-bg);
  border-radius: var(--bp-radius-card);
}
form.kopier label { display: inline-block; margin-right: var(--bp-space-3); }

/* `.form-fejl`/`.upload-fejl` (loop 5, Kate) er samme visuelle tilstand
   som `.fejl` — navngivet efter HVOR fejlen opstår (formularvalidering
   vs. upload-afvisning), fordi `role="alert"` på begge betyder
   skærmlæseren annoncerer teksten STRAKS den vises (server-rendered, så
   den er der allerede ved sideindlæsning efter et POST/redirect — ikke
   en dynamisk tilføjelse, men stadig værd at markere eksplicit som en
   fejlmeddelelse, ikke blot en afsnit). `.fejl` bevares som det generiske
   navn ældre skabeloner endnu bruger. */
.fejl, .form-fejl, .upload-fejl {
  color: var(--bp-accent-critical);
  background: rgba(166, 58, 43, 0.08);
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-critical);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-3) var(--bp-space-4);
}

.kvittering {
  color: var(--bp-accent-positive);
  background: rgba(63, 107, 70, 0.08);
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-positive);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-3) var(--bp-space-4);
}

.forudfyldt-banner {
  color: var(--bp-accent-warning);
  /* Eksplicit HVID baggrund, ikke en amber-tinting — Kates mål (4,95:1)
     holder kun mod ren hvid. Enhver tint sænker kontrasten under 4,5:1
     (design_lint 5/9: målt 4,02:1 med en 8% tint). Rå amber-flader er kun
     til dekoration uden tekst ovenpå, jf. BRAND_BYGGEPLADS.md. */
  background: var(--bp-bg);
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-warning);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-3) var(--bp-space-4);
}

/* Felt-niveau mangel-markering (komponentspec 1b, punkt 3) — markeres
   DER hvor feltet er, ikke i en separat liste der gentager feltnavnene. */
.felt { margin-bottom: var(--bp-space-3); }
.felt.felt-mangler {
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-warning);
  padding-left: var(--bp-space-3);
}
.mangel-badge {
  display: inline-block;
  margin-left: var(--bp-space-2);
  font-size: var(--bp-font-size-label);
  font-weight: 700;
  letter-spacing: var(--bp-letter-spacing-label);
  color: var(--bp-accent-warning);
  background: var(--bp-button-secondary-bg);
  padding: 2px var(--bp-space-2);
  border-radius: 999px;
}

/* Upload-kort (komponentspec 1b, punkt 3/9) — samme kortsprog som
   mangel-kort. Success-listen får en positiv accent, uden ikon. */
.upload-kort-success {
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-positive);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-3) var(--bp-space-4);
  background: rgba(63, 107, 70, 0.06);
  margin: 0 0 var(--bp-space-3) 0;
  list-style: none;
}

.mangelliste {
  border-left: var(--bp-card-accent-width) solid var(--bp-accent-critical);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-3) var(--bp-space-4);
  background: rgba(166, 58, 43, 0.06);
  margin: var(--bp-space-3) 0;
}
.mangelliste ul { margin: var(--bp-space-1) 0 0 0; padding-left: var(--bp-space-4); }

/* Badges: farve ALDRIG eneste bærer af betydning — teksten er altid med. */
.badge {
  display: inline-block;
  font-size: var(--bp-font-size-label);
  font-weight: 500;
  padding: var(--bp-space-1) var(--bp-space-2);
  margin-left: var(--bp-space-2);
  border-radius: 999px;
  background: var(--bp-button-secondary-bg);
  color: var(--bp-text-primary);
}
.badge-i-fare { background: rgba(166, 58, 43, 0.12); color: var(--bp-accent-critical); }
.badge-venter { background: var(--bp-bg); border: 1px solid var(--bp-accent-warning); color: var(--bp-accent-warning); }
.badge-genganger { background: var(--bp-button-secondary-bg); color: var(--bp-text-secondary); }

.frist { color: var(--bp-text-secondary); }
.frist.overskredet { color: var(--bp-accent-critical); font-weight: 500; }

/* ---------- 5) Byggeplads-specifikke mønstre ---------- */

/* Statusbanner — retning 1b's anker. Amber-baggrund bruger den RÅ
   overflade-farve (den er en flade, ikke tekst/tal) — al tekst OVENPÅ
   sættes i den mørkere, kontrast-sikre `--bp-accent-warning`. */
.statusbanner {
  border-radius: var(--bp-radius-card);
  padding: var(--bp-space-4) var(--bp-space-5);
  margin: var(--bp-space-4) 0 var(--bp-space-5) 0;
  background: rgba(201, 138, 18, 0.14);
  border: 1px solid rgba(150, 103, 13, 0.35);
}
.statusbanner .statusbanner-titel {
  font-size: 20px;
  font-weight: 700;
  color: var(--bp-accent-warning);
  margin: 0 0 4px 0;
}
.statusbanner .statusbanner-detalje { color: var(--bp-text-secondary); margin: 0; font-size: var(--bp-font-size-label); }
.statusbanner.status-klar { background: rgba(63, 107, 70, 0.10); border-color: rgba(63, 107, 70, 0.35); }
.statusbanner.status-klar .statusbanner-titel { color: var(--bp-accent-positive); }
.statusbanner.status-i-fare { background: rgba(166, 58, 43, 0.10); border-color: rgba(166, 58, 43, 0.35); }
.statusbanner.status-i-fare .statusbanner-titel { color: var(--bp-accent-critical); }
.statusbanner .fremdriftslinje {
  height: 8px;
  border-radius: 4px;
  background: rgba(27, 33, 38, 0.10);
  margin-top: var(--bp-space-3);
  overflow: hidden;
}
.statusbanner .fremdriftslinje-fyldt {
  height: 100%;
  /* Loop 5, Kate: ren flade uden tekst ovenpå — retning 1b bruger derfor
     den RÅ overfladefarve (`-surface-only`), ikke den mørkere
     tekst-sikre `--bp-accent-warning` (som stadig bærer statusbannerets
     TITEL et par linjer ovenfor). */
  background: var(--bp-accent-warning-surface-only);
  border-radius: 4px;
}
.statusbanner.status-klar .fremdriftslinje-fyldt { background: var(--bp-accent-positive); }
.statusbanner.status-i-fare .fremdriftslinje-fyldt { background: var(--bp-accent-critical); }

/* Diskrete bredde-trin (10%) — undgår en beregnet inline `style="width:"`
   pr. sag, jf. designreglen om ingen inline-styles i templates. */
.fremdrift-pct-0 { width: 0%; }
.fremdrift-pct-10 { width: 10%; }
.fremdrift-pct-20 { width: 20%; }
.fremdrift-pct-30 { width: 30%; }
.fremdrift-pct-40 { width: 40%; }
.fremdrift-pct-50 { width: 50%; }
.fremdrift-pct-60 { width: 60%; }
.fremdrift-pct-70 { width: 70%; }
.fremdrift-pct-80 { width: 80%; }
.fremdrift-pct-90 { width: 90%; }
.fremdrift-pct-100 { width: 100%; }

/* Forløbs-rail — adskilt element fra statusbanneret (Kates krav). */
.forloebs-rail {
  display: flex;
  gap: var(--bp-space-2);
  margin: var(--bp-space-4) 0;
  list-style: none;
  padding: 0;
}
.forloebs-rail li {
  flex: 1;
  text-align: center;
  padding: var(--bp-space-2) var(--bp-space-1);
  border-bottom: 3px solid var(--bp-border-subtle);
  color: var(--bp-text-secondary);
  font-size: var(--bp-font-size-label);
  font-weight: 500;
}
.forloebs-rail li.naaet { border-bottom-color: var(--bp-text-primary); color: var(--bp-text-primary); }
.rail-du-er-her { font-weight: 700; }

/* Mangel-kort — komponentspec 1b, punkt 2: "Start her" + øvrige mangler,
   samme kortform, forskellig fremhævning (primær vs. sekundær CTA). */
.mangler-sektion { margin: var(--bp-space-4) 0; }
.mangel-kort {
  background: var(--bp-bg);
  border: 1px solid var(--bp-border-subtle);
  border-radius: var(--bp-radius-card);
  padding: var(--bp-space-4);
  margin-bottom: var(--bp-space-3);
}
.mangel-kort[data-accent="i-fare"] { border-left: var(--bp-card-accent-width) solid var(--bp-accent-critical); }
.mangel-kort[data-accent="halvvejs"] { border-left: var(--bp-card-accent-width) solid var(--bp-accent-warning-surface-only); }
.mangel-kort[data-accent="klar"] { border-left: var(--bp-card-accent-width) solid var(--bp-accent-positive); }
.mangel-kort h3 { margin-bottom: var(--bp-space-1); }
.mangel-kort .knap, .mangel-kort .knap-sekundaer { margin-top: var(--bp-space-2); }
.mangel-kort-start { box-shadow: 0 0 0 1px var(--bp-border-control); }

/* Færdigt — collapsed, native <details>, ingen custom chevron (ingen
   pynt-ikoner, forbudsliste). */
.faerdigt-sektion { margin: var(--bp-space-5) 0; }
.faerdigt-sektion summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--bp-text-secondary);
  padding: var(--bp-space-2) 0;
}
.faerdigt-sektion ul { margin: var(--bp-space-2) 0 0 0; padding-left: var(--bp-space-4); }

/* Store tælle-tal (Lasses tre-sekunders-overblik). */
.tellere {
  display: flex;
  gap: var(--bp-space-6);
  flex-wrap: wrap;
  margin: var(--bp-space-4) 0 var(--bp-space-5) 0;
}
.teller {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-1);
}
.teller .teller-tal { font-size: var(--bp-font-size-display); font-weight: var(--bp-font-weight-display); background: var(--bp-bg); }
.teller .teller-label { font-size: var(--bp-font-size-label); font-weight: var(--bp-font-weight-label); letter-spacing: var(--bp-letter-spacing-label); text-transform: uppercase; color: var(--bp-text-secondary); }
.teller-i-fare .teller-tal { color: var(--bp-accent-critical); }
.teller-venter .teller-tal { color: var(--bp-accent-warning); background: var(--bp-bg); }
.teller-myndighedskrav .teller-tal { color: var(--bp-accent-critical); }

/* Statusprik — ALDRIG alene, altid med tekstlabel (håndhævet i templates). */
.status-prik {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--bp-space-2);
  vertical-align: middle;
}
.status-prik-i-fare { background: var(--bp-accent-critical); }
.status-prik-venter { background: var(--bp-accent-warning); }
.status-prik-klar { background: var(--bp-accent-positive); }

/* Niveau-labels — myndighedskrav/husregel/praksis skal ALDRIG blandes
   visuelt (spec punkt 2). Farve er understøttende, ikke eneste bærer —
   ordet står altid skrevet ved siden af. */
.regel-niveau-label {
  font-size: var(--bp-font-size-label);
  font-weight: 700;
  letter-spacing: var(--bp-letter-spacing-label);
  text-transform: uppercase;
  margin: var(--bp-space-3) 0 var(--bp-space-1) 0;
  padding-left: var(--bp-space-2);
  border-left: 3px solid var(--bp-border-subtle);
  /* Eksplicit hvid baggrund — samme kontrastbegrundelse som
     .forudfyldt-banner ovenfor. */
  background: var(--bp-bg);
}
.regel-niveau-myndighedskrav { color: var(--bp-accent-critical); border-left-color: var(--bp-accent-critical); }
.regel-niveau-husregel { color: var(--bp-accent-warning); border-left-color: var(--bp-accent-warning); background: var(--bp-bg); }
.regel-niveau-praksis { color: var(--bp-text-secondary); border-left-color: var(--bp-border-subtle); }

.niveau, .status {
  display: inline-block;
  padding: var(--bp-space-1) var(--bp-space-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bp-button-secondary-bg);
  color: var(--bp-text-secondary);
}
.niveau-myndighedskrav { background: rgba(166, 58, 43, 0.12); color: var(--bp-accent-critical); }
.niveau-husregel { background: var(--bp-bg); border: 1px solid var(--bp-accent-warning); color: var(--bp-accent-warning); }
.niveau-praksis { background: var(--bp-button-secondary-bg); color: var(--bp-text-secondary); }
.niveau-uverificeret_myndighedskrav { background: rgba(166, 58, 43, 0.12); color: var(--bp-accent-critical); }
.status-aktiv { background: rgba(63, 107, 70, 0.12); color: var(--bp-accent-positive); }
.status-kladde { background: var(--bp-button-secondary-bg); color: var(--bp-text-secondary); }
.status-udgaaet { background: rgba(27, 33, 38, 0.08); color: var(--bp-text-secondary); text-decoration: line-through; }

.kildevisning { color: var(--bp-text-secondary); font-size: var(--bp-font-size-label); }

.modul-status {
  display: inline-block;
  padding: var(--bp-space-1) var(--bp-space-2);
  border-radius: 999px;
  background: var(--bp-button-secondary-bg);
  color: var(--bp-text-primary);
  font-size: var(--bp-font-size-label);
}

details.ny-version { margin-top: var(--bp-space-3); }
details.ny-version summary { cursor: pointer; font-weight: 500; color: var(--bp-text-primary); padding: var(--bp-space-2) 0; }

/* Sagskort-mobil "Avanceret" (komponentspec 1b, punkt 6) — native
   <details>, ingen custom chevron-ikon (forbudsliste: ingen pynt-ikoner). */
details.avanceret { margin-top: var(--bp-space-6); border-top: 1px solid var(--bp-border-subtle); padding-top: var(--bp-space-3); }
details.avanceret summary { cursor: pointer; font-weight: 500; color: var(--bp-text-secondary); padding: var(--bp-space-2) 0; }
details.avanceret summary:focus-visible { outline: var(--bp-focus-ring-width) solid var(--bp-focus-ring-color); outline-offset: var(--bp-focus-ring-offset); }

/* Tom liste — skal se NORMAL ud, ikke ødelagt (BRAND_BYGGEPLADS.md). */
.tom-tilstand {
  text-align: center;
  padding: var(--bp-space-7) var(--bp-space-4);
  color: var(--bp-text-secondary);
}
.tom-tilstand .bp-display { color: var(--bp-text-secondary); }
.tom-tilstand.tom-tilstand-inline { padding: var(--bp-space-3) 0; text-align: left; }

/* ---------- 6) Tilstande ---------- */

a.sag-link:visited { color: var(--bp-text-primary); }

/* Beredskabets/myndighedens read-only-visning — nedtonet, tydeligt låst. */
.laeseadgang-banner {
  background: var(--bp-button-secondary-bg);
  color: var(--bp-text-secondary);
  border-radius: var(--bp-radius-button);
  padding: var(--bp-space-2) var(--bp-space-3);
  font-size: var(--bp-font-size-label);
  margin-bottom: var(--bp-space-4);
}

/* ---------- 7) Mobil (<640px) — kort-layout for tabeller på indmelder-sider ---------- */

@media (max-width: 640px) {
  main { padding: var(--bp-space-4); }

  .tellere { gap: var(--bp-space-4); }

  table.bp-kort-paa-mobil,
  table.bp-kort-paa-mobil thead,
  table.bp-kort-paa-mobil tbody,
  table.bp-kort-paa-mobil th,
  table.bp-kort-paa-mobil td,
  table.bp-kort-paa-mobil tr {
    display: block;
    width: 100%;
  }
  table.bp-kort-paa-mobil thead { display: none; }
  table.bp-kort-paa-mobil tr {
    border: 1px solid var(--bp-border-subtle);
    border-radius: var(--bp-radius-card);
    padding: var(--bp-space-3);
    margin-bottom: var(--bp-space-3);
  }
  table.bp-kort-paa-mobil td {
    border: none;
    padding: 4px 0;
  }
  table.bp-kort-paa-mobil td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--bp-font-size-label);
    font-weight: var(--bp-font-weight-label);
    letter-spacing: var(--bp-letter-spacing-label);
    text-transform: uppercase;
    color: var(--bp-text-secondary);
  }

  form.filter { flex-direction: column; align-items: stretch; }
  .handlinger { flex-direction: column; }
  .handlinger .knap { width: 100%; text-align: center; }

  /* Major (Grethe/mobilflow 5/9-2026): et 360px-kort er for lille til at
     ramme en pin præcist med en finger — 480px fuld bredde, samme højde
     som oversigtskortet allerede bruger på desktop. */
  .kort { height: 480px; width: 100%; }

  /* Komponentspec 1b, punkt 3: mangel-badge på egen linje under labelen,
     ikke presset ind til højre på et smalt skærmbillede. */
  .mangel-badge { display: block; margin-left: 0; margin-top: var(--bp-space-1); width: fit-content; }

  /* Komponentspec 1b, punkt 4: 3-i-række-aflæsningen kræver at alle tre
     tælletal ses samtidig — mindre skrift frem for stacking til 1 kolonne. */
  .tellere { flex-wrap: nowrap; gap: var(--bp-space-3); }
  .teller .teller-tal { font-size: 28px; }

  /* Komponentspec 1b, punkt 5: filter-piller bliver horisontalt
     scrollbare i stedet for at wrappe til flere linjer. */
  .tidslinje-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--bp-space-1); }
  .tidslinje-filter a { flex: 0 0 auto; }

  /* Komponentspec 1b, punkt 5: dato over titel over tag, ikke presset ind
     på én linje. */
  .tidslinje-post { display: flex; flex-direction: column; gap: 2px; }
}

/* DEL 1 (Lasse 5/9-2026) — ortofoto/placeringskort. Faste tokens, ingen
   inline style (CSP style-src 'self'), farverne matcher status-labels
   der allerede bruges i sagsoversigten (i fare/venter/klar). */
.kort {
  width: 100%;
  height: 360px;
  border: 1px solid var(--bp-border-subtle);
  border-radius: var(--bp-radius, 4px);
}
.kort-oversigt { height: 480px; }
.kort-geo-knap-raekke { margin: var(--bp-space-2, 8px) 0; }
.kort-udviklingskort-label {
  font-size: var(--bp-font-size-label);
  color: var(--bp-text-secondary);
  margin-top: var(--bp-space-1, 4px);
}
.kort-pin span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.kort-pin-i_fare span { background: #B3261E; }
.kort-pin-venter span { background: #8A6D3B; }
.kort-pin-klar span { background: #2E7D46; }
.kort-pin-ukendt span { background: #555555; }

/* DEL 1 (Lasse 5/9-2026 kl. 22.20) — kalender: samlet tidslinje af
   frister + møder/besigtigelser. Genbruger `.badge`/`.badge-i-fare` og
   `--bp-*`-tokens, ingen nye farver opfundet. */
.tidslinje-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-2);
  margin: var(--bp-space-3) 0;
}
.tidslinje-filter a {
  padding: var(--bp-space-1) var(--bp-space-2);
  border-radius: var(--bp-radius-button);
  border: 1px solid var(--bp-border-subtle);
  color: var(--bp-text-secondary);
  text-decoration: none;
}
.tidslinje-filter a.valgt {
  border-color: var(--bp-accent-warning);
  color: var(--bp-text-primary);
  font-weight: 500;
}
.tidslinje-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tidslinje-post {
  padding: var(--bp-space-2) var(--bp-space-3);
  border-bottom: 1px solid var(--bp-border-subtle);
}
.tidslinje-post.status-i-fare {
  background: rgba(166, 58, 43, 0.06);
  border-left: 3px solid var(--bp-accent-critical);
}
/* Farvekodning efter HASTEGRAD, ikke type-æstetik (komponentspec 1b,
   punkt 5) — myndighedsfrist/nær frist = kritisk, øvrige frister =
   advarsel, møder/besigtigelser = neutral. */
.tidslinje-tag-kritisk { background: rgba(166, 58, 43, 0.12); color: var(--bp-accent-critical); }
.tidslinje-tag-advarsel { background: var(--bp-bg); border: 1px solid var(--bp-accent-warning); color: var(--bp-accent-warning); }
.tidslinje-tag-neutral { background: var(--bp-button-secondary-bg); color: var(--bp-text-primary); }

.tidslinje-aflyst {
  color: var(--bp-text-secondary);
  text-decoration: line-through;
}

/* UX-runde 2 (Kate/Grethe, 5/9-2026): fortidige punkter i "Alle"-listen
   gråtonet/markeret "overstået" — "kommende 30 dage" er ankeret, resten
   er historik, ikke noget der skal konkurrere om opmærksomhed. */
.tidslinje-overstaaet {
  color: var(--bp-text-secondary);
  opacity: 0.65;
}
.badge-overstaaet {
  background: var(--bp-button-secondary-bg);
  color: var(--bp-text-secondary);
}