/* src/review/public/style.css — Beacon designsystem (UI-CONTRACT.md §D)
   Tokens (farve/spacing/radius/typografi/skygger) + genbrugelige komponentklasser
   oven på de eksisterende tokens (dark default, light via prefers-color-scheme +
   [data-theme]-override). Server-rendered HTML-shells + vanilla JS — ingen build-step,
   så denne fil er den ENESTE kilde til visuel identitet på tværs af alle sider.

   Farvesystem bygget efter dataviz-skillens formel: statusfarver er et lille fast
   sæt (green/amber/red/blue/violet/gray) med separate "ink"-varianter til tekst
   (WCAG-kontrol'et pr. tema, se docs/DESIGN.md) og "bg"-varianter til dæmpede
   fyldflader (piller/badges). Layout target uændret: 1440×900 primært, responsivt
   ned til ~1100px. */

/* ------------------------------------------------------------------ */
/* TOKENS — farve (dark default)                                       */
/* ------------------------------------------------------------------ */

:root {
  /* Beacon — cream default (light). forest/lime, WCAG AA-verificeret (se docs/DESIGN.md).
     overflader */
  --bg: #FAF6EC;              /* cream-100 / surface-page */
  --bg-panel: #FFFFFF;        /* cream-50 / surface-card */
  --bg-tile: #F2EDDF;         /* cream-200 / surface-soft */
  --bg-hover: #EDE6D4;        /* cream-300 */
  --border: #EDE6D4;          /* cream-300 / hairline */

  /* tekst — forest ink (kontrol'et mod cream) */
  --text: #1E2B1B;           /* ink-700, 13.7:1 */
  --text-dim: #5B6653;       /* ink-500, 5.61:1 — små labels/tal */
  --text-faint: #646D59;     /* ≥4.5:1 (ALDRIG ink-400 #8B927F = 2.99) */
  --text-inverse: #14211A;   /* forest-900 — mørk tekst OVEN PÅ solide lime/mark-flader (7.5:1+) */

  /* accent — lime (én præcis accent) */
  --accent: #8ACB1A;         /* lime-500 — solid handling; tekst på den = --text-inverse */
  --accent-ink: #4F7A10;     /* lime-700 — accent-TEKST/links, 4.72:1 på cream */
  --accent-bg: #EAF5D2;      /* lime-100 — dæmpet accent-flade; tekst = --text (13:1) */

  /* statusfarver — ét system for adapter-status, tier, task-state, alert-severity.
     "mark" (mættet, solid flade m. --ink-on-mark ovenpå); "ink" (tekstsikker på cream,
     WCAG-kontrol'et); "bg" (dæmpet pille-fyld). */
  --green: #8ACB1A;
  --green-ink: #4F7A10;      /* lime-700, 4.72:1 */
  --green-bg: rgba(138, 203, 26, 0.16);

  --amber: #D9A521;
  --amber-ink: #8A5A00;      /* 5.49:1 */
  --amber-bg: rgba(217, 165, 33, 0.16);

  --red: #C44545;
  --red-ink: #B23636;        /* 5.60:1 */
  --red-bg: rgba(196, 69, 69, 0.13);

  --violet: #6D5DB0;          /* neutral "anden" bucket — parked/deferred */
  --violet-ink: #5B4B96;     /* 6.73:1 */
  --violet-bg: rgba(109, 93, 176, 0.13);

  --gray: #8B927F;            /* neutral mark */
  --gray-ink: #5B6653;       /* ink-500, 5.61:1 */
  --gray-bg: rgba(91, 102, 83, 0.12);

  --ink-on-mark: #14211A;     /* forest-900 — fast mørk tekst OVEN PÅ solide status-marks */

  /* tier A/B/C — alias af statussystemet så tier og status altid stemmer visuelt overens */
  --tier-a: var(--green);
  --tier-b: var(--amber);
  --tier-c: var(--red);
  --tier-unknown: var(--gray);

  /* ------------------------------------------------------------------ */
  /* TOKENS — spacing-skala (4px-base, --sp-1..--sp-8)                   */
  /* ------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* ------------------------------------------------------------------ */
  /* TOKENS — radius                                                     */
  /* ------------------------------------------------------------------ */
  --r-sm: 8px;   /* Beacon radius-md */
  --r-md: 12px;  /* Beacon radius-lg */
  --r-lg: 16px;  /* Beacon radius-2xl */
  --r-full: 9999px;

  /* ------------------------------------------------------------------ */
  /* TOKENS — typografi (Bricolage Grotesque — Beacon brand-familie)     */
  /* ------------------------------------------------------------------ */
  --font-sans: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-2xl: 22px;

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* ------------------------------------------------------------------ */
  /* TOKENS — skygger (Beacon, bløde forest-tonede)                      */
  /* ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(30, 43, 27, 0.05), 0 2px 6px rgba(30, 43, 27, 0.05);
  --shadow-md: 0 12px 32px rgba(30, 43, 27, 0.12);

  /* ------------------------------------------------------------------ */
  /* TOKENS — motion (Beacon)                                            */
  /* ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}

/* ------------------------------------------------------------------ */
/* TOKENS — light (prefers-color-scheme + [data-theme]-override)       */
/* Kun de tokens der reelt skifter mellem tema listes her — status-marks
   (--green/--amber/--red/--violet/--gray) holdes bevidst konstante på
   tværs af tema (samme mønster som den oprindelige fil); kun "ink" (tekst)
   og "bg" (dæmpet fyld) justeres for kontrast, jf. docs/DESIGN.md. */
/* ------------------------------------------------------------------ */

/* Default er nu Beacon cream (light). Dark-preference → forest-mørk variant.
   Kun tokens der skifter listes; status-marks (--green/--amber/…) er konstante. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14211A;             /* forest-900 */
    --bg-panel: #1E2B1B;       /* forest-800 */
    --bg-tile: #243530;        /* forest-700 */
    --bg-hover: #2A3D34;
    --border: rgba(250, 246, 236, 0.14);

    --text: #FAF6EC;           /* forest-fg */
    --text-dim: #B9C2AC;       /* forest-fg-muted, 8:1 */
    --text-faint: #8A9482;
    --text-inverse: #14211A;

    --accent: #8ACB1A;
    --accent-ink: #A4E534;     /* lime-400, 9.8:1 på forest-800 */
    --accent-bg: rgba(138, 203, 26, 0.18);

    --green-ink: #A4E534;
    --green-bg: rgba(138, 203, 26, 0.18);

    --amber-ink: #E8C04A;
    --amber-bg: rgba(217, 165, 33, 0.18);

    --red-ink: #E89090;
    --red-bg: rgba(196, 69, 69, 0.22);

    --violet-ink: #B7ABE8;
    --violet-bg: rgba(109, 93, 176, 0.24);

    --gray-ink: #B9C2AC;
    --gray-bg: rgba(185, 194, 172, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #14211A;
  --bg-panel: #1E2B1B;
  --bg-tile: #243530;
  --bg-hover: #2A3D34;
  --border: rgba(250, 246, 236, 0.14);

  --text: #FAF6EC;
  --text-dim: #B9C2AC;
  --text-faint: #8A9482;
  --text-inverse: #14211A;

  --accent: #8ACB1A;
  --accent-ink: #A4E534;
  --accent-bg: rgba(138, 203, 26, 0.18);

  --green-ink: #A4E534;
  --green-bg: rgba(138, 203, 26, 0.18);

  --amber-ink: #E8C04A;
  --amber-bg: rgba(217, 165, 33, 0.18);

  --red-ink: #E89090;
  --red-bg: rgba(196, 69, 69, 0.22);

  --violet-ink: #B7ABE8;
  --violet-bg: rgba(109, 93, 176, 0.24);

  --gray-ink: #B9C2AC;
  --gray-bg: rgba(185, 194, 172, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --bg: #FAF6EC;
  --bg-panel: #FFFFFF;
  --bg-tile: #F2EDDF;
  --bg-hover: #EDE6D4;
  --border: #EDE6D4;

  --text: #1E2B1B;
  --text-dim: #5B6653;
  --text-faint: #646D59;
  --text-inverse: #14211A;

  --accent: #8ACB1A;
  --accent-ink: #4F7A10;
  --accent-bg: #EAF5D2;

  --green-ink: #4F7A10;
  --green-bg: rgba(138, 203, 26, 0.16);

  --amber-ink: #8A5A00;
  --amber-bg: rgba(217, 165, 33, 0.16);

  --red-ink: #B23636;
  --red-bg: rgba(196, 69, 69, 0.13);

  --violet-ink: #5B4B96;
  --violet-bg: rgba(109, 93, 176, 0.13);

  --gray-ink: #5B6653;
  --gray-bg: rgba(91, 102, 83, 0.12);

  --shadow-sm: 0 1px 2px rgba(30, 43, 27, 0.05), 0 2px 6px rgba(30, 43, 27, 0.05);
  --shadow-md: 0 12px 32px rgba(30, 43, 27, 0.12);
}

/* ------------------------------------------------------------------ */
/* Reset & base                                                        */
/* ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
}

body {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent-ink);
}

#app {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Demo-ribbon (§G demo-mode — fast øverst, tydeligt vandmærke)        */
/* ------------------------------------------------------------------ */

.demo-ribbon {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  background: var(--amber-bg);
  color: var(--amber-ink);
  border-bottom: 1px solid var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------ */
/* Navigation — delt af alle autentificerede sider.
   .nav/.nav-link er de bindende §D-klassenavne; #main-nav/.nav-tab er
   det eksisterende markup og bevares 1:1 stylet (bagudkompatibilitet). */
/* ------------------------------------------------------------------ */

#main-nav,
.nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-4);
  height: 44px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}

.nav-tabs {
  display: flex;
  gap: var(--sp-1);
  flex: 1;
}

.nav-tab,
.nav-link {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.nav-tab:hover,
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-tab.active,
.nav-link.active {
  background: var(--accent);
  color: var(--text-inverse);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.nav-user-role {
  color: var(--text-faint);
}

.nav-logout {
  color: var(--accent-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.nav-logout:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Login-side                                                           */
/* ------------------------------------------------------------------ */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-md);
}

.login-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-2xl);
  color: var(--accent-ink);
}

.login-sub {
  margin: 0 0 var(--sp-4);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.login-error {
  background: var(--red-bg);
  color: var(--red-ink);
  border: 1px solid var(--red-ink);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.login-form input {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md);
  font-family: inherit;
}

.login-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.login-form button {
  margin-top: var(--sp-1);
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  font-family: inherit;
}

.login-form button:hover {
  filter: brightness(1.08);
}

/* ------------------------------------------------------------------ */
/* Buttons (.btn — bindende §D-klassenavne)                            */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.btn--ghost {
  background: var(--bg-tile);
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--bg-hover);
  filter: none;
}

.btn--danger {
  background: var(--red-bg);
  border-color: var(--red-ink);
  color: var(--red-ink);
}

.btn--sm {
  padding: 4px var(--sp-3);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------------ */
/* Sidehoved delt af flere sider (.page-header — bindende §D-klassenavn) */
/* ------------------------------------------------------------------ */

.page-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  margin: 0;
  font-size: var(--fs-xl);
}

.back-link {
  color: var(--accent-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.back-link:hover {
  text-decoration: underline;
}

#kill-switch-btn {
  margin-left: auto;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}

#kill-switch-btn:hover {
  background: var(--bg-hover);
}

/* ------------------------------------------------------------------ */
/* Card (.card/.card-header/.card-title — bindende §D-klassenavne)     */
/* ------------------------------------------------------------------ */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------------------------ */
/* Grid (.grid + .grid--2/3/4 — responsivt kort-layout)                */
/* ------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------------ */
/* Stat-tile (KPI-kort — bindende §D-klassenavne)                      */
/* ------------------------------------------------------------------ */

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 96px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-5);
}

.stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.stat-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.stat-delta.up { color: var(--green-ink); }
.stat-delta.down { color: var(--red-ink); }
.stat-delta.up::before { content: "\25B2"; font-size: 8px; }
.stat-delta.down::before { content: "\25BC"; font-size: 8px; }

.stat-spark {
  margin-top: auto;
  min-height: 28px;
}

.stat-spark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* kpi-row — kompakt vandret KPI-strimmel (bindende §D-klassenavn)     */
/* ------------------------------------------------------------------ */

.kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.kpi-row .kpi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

.kpi-row .kpi-item .kpi-label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-row .kpi-item .kpi-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Pills (.pill + .pill--{status} — ét konsistent statussystem for      */
/* adapter-status, tier, task-state og alert-severity)                 */
/* ------------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Util — tabulære tal (fast tegnbredde for cifre) på tal-celler/-tiles der ikke allerede har
   den via en bindende komponentklasse (.stat-value/.dim/.pill/.badge/.table td m.fl. har den
   direkte, se disse regler) — jf. dataviz-skillens marks-and-anatomy-krav om tabulære tal
   overalt hvor tal vises i kolonner/tiles. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* good / afsluttet / tier A */
.pill--ok,
.pill--a,
.pill--done,
.pill--verified-ok {
  background: var(--green-bg);
  color: var(--green-ink);
}

/* venter / kræver handling / tier B */
.pill--pending,
.pill--warning,
.pill--b,
.pill--awaiting {
  background: var(--amber-bg);
  color: var(--amber-ink);
}

/* mangler / kritisk / fejlet / tier C */
.pill--missing,
.pill--critical,
.pill--c,
.pill--failed {
  background: var(--red-bg);
  color: var(--red-ink);
}

/* informativ / valideret (endnu ikke godkendt) */
.pill--info,
.pill--verified {
  background: var(--accent-bg);
  color: var(--accent-ink);
}

/* neutral — ikke startet / bevidst sat på pause */
.pill--draft,
.pill--paused {
  background: var(--gray-bg);
  color: var(--gray-ink);
}

/* parkeret — bevidst "anden" bucket, hverken god eller dårlig */
.pill--parked {
  background: var(--violet-bg);
  color: var(--violet-ink);
}

/* ------------------------------------------------------------------ */
/* Progress (bar — bindende §D-klassenavn)                             */
/* ------------------------------------------------------------------ */

.progress {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--bg-tile);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress > span,
.progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Empty-state (.empty-state — ikon+overskrift+undervisende tekst)     */
/* ------------------------------------------------------------------ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  color: var(--text-dim);
}

.empty-state-icon {
  font-size: 28px;
  line-height: 1;
  opacity: 0.85;
  margin-bottom: var(--sp-1);
}

.empty-state-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.empty-state-text {
  margin: 0;
  max-width: 440px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

.empty-state-hint {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* Legacy tomme-tilstande (fast tekstlinje, uden .empty-state-markup) —
   bevares for elementer der endnu ikke er migreret til komponenten.
   #kunder-empty/#alerts-empty/#godkend-empty er (design-pas punkt 6) migreret til den fulde
   .empty-state-komponent (ikon+overskrift+undervisende tekst) og derfor fjernet herfra — denne
   ID-regel ville ellers overskrive .empty-state's egen padding/farve (ID slår klasse). */
#kpi-empty,
#tasks-empty {
  color: var(--text-faint);
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ */
/* Table (.table — zebra + hover + sticky header, bindende §D-navn)    */
/* ------------------------------------------------------------------ */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table th,
.table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table td {
  font-variant-numeric: tabular-nums;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-panel);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table tbody tr:nth-child(even) {
  background: var(--bg-tile);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table a {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.table a:hover {
  text-decoration: underline;
}

/* Legacy tabeller (samme kolonne-/celle-mål, retokenized + zebra/hover/sticky
   tilføjet, jf. "Tabeller: zebra + hover overalt") — beholdes for eksisterende
   markup i views.js/kunder.js indtil de ev. migreres til .table. */
#kunder-table-wrap {
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
}

#kunder-table,
#kpi-table,
#access-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

#kunder-table th,
#kpi-table th,
#access-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}

#kunder-table td,
#kpi-table td,
#access-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

#kunder-table tbody tr:nth-child(even),
#kpi-table tbody tr:nth-child(even),
#access-table tbody tr:nth-child(even) {
  background: var(--bg-tile);
}

#kunder-table tbody tr:hover,
#kpi-table tbody tr:hover,
#access-table tbody tr:hover {
  background: var(--bg-hover);
}

#kunder-table a {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

#kunder-table a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Legacy badges (portefølje-review + kunder — bagudkompatibilitet)    */
/* Samme statussystem som .pill, blot under de eksisterende klassenavne */
/* som public/app.js og public/kunder.js allerede genererer.           */
/* ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.badge-paused { color: var(--amber-ink); border-color: var(--amber-ink); background: var(--amber-bg); }
.badge-active { color: var(--green-ink); border-color: var(--green-ink); background: var(--green-bg); }
.badge-alert { color: var(--red-ink); border-color: var(--red-ink); background: var(--red-bg); }

.badge-gate {
  color: var(--amber-ink);
  border-color: var(--amber-ink);
  background: var(--amber-bg);
}

.badge-kill {
  color: var(--red-ink);
  border-color: var(--red-ink);
  background: var(--red-bg);
}

.badge-decided {
  color: var(--green-ink);
  border-color: var(--green-ink);
  background: var(--green-bg);
}

.badge-undecided {
  color: var(--text-dim);
}

.badges-empty {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  margin-right: 2px;
}

.access-ok { background: var(--green-bg); color: var(--green-ink); }
.access-pending { background: var(--amber-bg); color: var(--amber-ink); }
.access-missing { background: var(--red-bg); color: var(--red-ink); }

/* Tier-badge (delt mellem site-liste og detaljepanel i portefølje-review) —
   solid fyld (mark-farven, ikke ink), fast mørk tekst, jf. docs/DESIGN.md. */
.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-on-mark);
}

.tier-badge.tier-a { background: var(--tier-a); }
.tier-badge.tier-b { background: var(--tier-b); }
.tier-badge.tier-c { background: var(--tier-c); }
.tier-badge.tier-unknown { background: var(--tier-unknown); color: var(--ink-on-mark); }

/* ------------------------------------------------------------------ */
/* Diff (.diff-add/.diff-del/.diff-same — bindende §D-klassenavne)     */
/* ------------------------------------------------------------------ */

.diff-add {
  background: var(--green-bg);
  color: var(--green-ink);
  text-decoration: none;
}

.diff-del {
  background: var(--red-bg);
  color: var(--red-ink);
  text-decoration: line-through;
}

.diff-same {
  color: var(--text-dim);
}

/* ------------------------------------------------------------------ */
/* Sparkline (.sparkline generisk klasse + legacy #sparkline/.sparkline-svg) */
/* ------------------------------------------------------------------ */

.sparkline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2);
}

.sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sparkline-stroke bruger status-marks (grøn=stigning, rød=fald, accent=neutral)
   via inline stroke="var(--…)" i den genererede SVG (dataviz: sparkline i
   de-emphasis-nuance, aktuel periode i accent). */

/* ------------------------------------------------------------------ */
/* Sidehoved delt af Kunder/Godkendelser-siderne (legacy — se .page-header) */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Kundedetalje                                                         */
/* ------------------------------------------------------------------ */

#kunde-detail-page {
  padding-bottom: var(--sp-5);
}

.detail-section {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.detail-section h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dim {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.alerts-list,
.tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.alert-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-tile);
  font-size: var(--fs-sm);
}

.alert-item.alert-critical { border-color: var(--red-ink); }
.alert-item.alert-warning { border-color: var(--amber-ink); }
.alert-item.alert-info { border-color: var(--accent-ink); }

.alert-item.alert-critical .alert-severity { color: var(--red-ink); }
.alert-item.alert-warning .alert-severity { color: var(--amber-ink); }
.alert-item.alert-info .alert-severity { color: var(--accent-ink); }

.alert-severity {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

.alert-message { flex: 1; }
.alert-date { color: var(--text-faint); font-size: var(--fs-xs); }

.alert-item button {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 4px var(--sp-3);
  font-size: var(--fs-xs);
  cursor: pointer;
  font-family: inherit;
}

#tasks-controls {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

#tasks-controls select {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
  margin-left: var(--sp-2);
  font-family: inherit;
}

.task-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-tile);
  font-size: var(--fs-sm);
}

.task-title { flex: 1; }
.task-type { color: var(--text-dim); }
.task-hours { color: var(--text-faint); }

.task-state {
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  background: var(--bg-hover);
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Ét konsistent statussystem for ALLE 10 backlog-states — samme farvelogik
   som .pill (grøn=godt/afsluttet, amber=venter, rød=fejlet/blokeret,
   blå=valideret/kører, violet=parkeret, grå=ikke startet). */
.task-state-draft { color: var(--gray-ink); }
.task-state-verified { color: var(--accent-ink); }
.task-state-awaiting_approval { color: var(--amber-ink); }
.task-state-approved,
.task-state-done { color: var(--green-ink); }
.task-state-executing { color: var(--accent-ink); }
.task-state-failed,
.task-state-blocked_dev,
.task-state-blocked_access { color: var(--red-ink); }
.task-state-parked_jasper { color: var(--violet-ink); }

#kunde-status-line {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ------------------------------------------------------------------ */
/* Godkendelseskø (AO3 §7)                                              */
/* ------------------------------------------------------------------ */

#godkend-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#godkend-count {
  margin-left: auto;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

#godkend-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-5);
}

#godkend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 900px;
}

.godkend-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-5);
}

.godkend-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.godkend-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.godkend-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}

.godkend-meta {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.godkend-effect {
  color: var(--text-dim);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
}

.godkend-section {
  margin-bottom: var(--sp-3);
}

.diff-field {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}

.diff-field-name {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}

.diff-text {
  font-size: var(--fs-md);
  line-height: 1.5;
  font-family: var(--font-mono);
}

.verify-json {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  overflow-x: auto;
  margin: 0;
}

.godkend-actions {
  display: flex;
  gap: var(--sp-2);
}

.btn-approve {
  background: var(--green);
  color: var(--ink-on-mark);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  font-family: inherit;
}

.btn-reject {
  background: var(--bg-tile);
  border: 1px solid var(--red-ink);
  color: var(--red-ink);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  font-family: inherit;
}

.godkend-reject-note {
  margin-top: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
}

.reject-note-input {
  flex: 1;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
  min-height: 40px;
}

.btn-reject-confirm {
  background: var(--red);
  color: var(--ink-on-mark);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
}

#godkend-status-line {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Backlog-board (design-pas punkt 4) — 5 grupperede kolonner, ingen vandret
   scroll ved normal bredde. Dedikeret layout-hook (#backlog-board) i stedet
   for views.js' tidligere inline flex/overflow-x-style, jf. views.js'
   kommentar om at CSS'en nu HAR et hook her. */
/* ------------------------------------------------------------------ */

#backlog-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
  padding: 0 var(--sp-5) var(--sp-5);
}

@media (max-width: 1100px) {
  #backlog-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #backlog-board {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Venstre kolonne — liste (portefølje-review)                         */
/* ------------------------------------------------------------------ */

#list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
}

#list-controls {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border);
}

#tier-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.tier-tab {
  flex: 1;
  padding: var(--sp-2) 0;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  font-family: inherit;
}

.tier-tab:hover {
  background: var(--bg-hover);
}

.tier-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

#undecided-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}

#site-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.site-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.site-row:hover {
  background: var(--bg-hover);
}

.site-row.selected {
  background: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.site-domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-md);
}

.site-score {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  min-width: 28px;
  text-align: right;
}

.site-icons {
  display: flex;
  gap: 3px;
  font-size: var(--fs-sm);
  min-width: 40px;
}

.icon-gate { color: var(--amber-ink); }
.icon-kill { color: var(--red-ink); }
.icon-decided { color: var(--green-ink); }

/* ------------------------------------------------------------------ */
/* Højre kolonne — detaljepanel (portefølje-review)                    */
/* ------------------------------------------------------------------ */

#detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}

#detail-empty {
  margin: auto;
  color: var(--text-faint);
  font-size: var(--fs-lg);
}

#detail-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

#detail-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}

#detail-domain-link {
  color: var(--accent-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

#detail-domain-link:hover {
  text-decoration: underline;
}

#detail-badges {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

#detail-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
}

.panel-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: var(--sp-1);
}

/* --- Visual: mshots + sparkline (legacy IDs — bagudkompatibilitet) --- */

/* BUG-FIX (design-pas): #detail-visual er en CSS-grid med kun ÉT (implicit) auto-dimensioneret
   rækkespor, mens containeren selv har en fast height:150px. Uden et eksplicit rækkespor vokser
   det implicitte spor til at rumme sine børns min-content (mshots-billede/graf), hvilket kan
   overstige de 150px containeren reelt tildeler — grid'en klipper IKKE overskydende indhold som
   standard, så det bløder visuelt ned i #key-figures-grid'en lige under (målt ~21px overlap).
   Fix: eksplicit grid-template-rows LÅSER rækkens højde til de 150px (i stedet for at vokse med
   indholdet), suppleret med overflow:hidden som sikkerhedsnet + min-height:0 på børnene (samme
   flexbox-mønster som #detail-body/#reasons bruger andetsteds i denne fil) så grafens egen
   flex:1-sektion kan krympe i stedet for at presse boksen ud over sin ramme. */
#detail-visual {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 150px;
  gap: var(--sp-4);
  height: 150px;
  overflow: hidden;
}

#mshots-wrap {
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-tile);
  border: 1px solid var(--border);
}

#mshots-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

#mshots-status {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 0;
}

#sparkline-wrap {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#sparkline {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

.sparkline-svg {
  width: 100%;
  height: 100%;
}

.sparkline-empty {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

/* --- Nøgletal-grid ---------------------------------------------------- */

#key-figures {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--sp-2);
}

.figure-tile {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  text-align: center;
}

.figure-label {
  font-size: 9.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.figure-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* --- Reasons + gates/kill ---------------------------------------------- */

#reasons {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.reasons-col {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  overflow-y: auto;
  min-height: 0;
}

.reasons-label-up { color: var(--green-ink); }
.reasons-label-down { color: var(--red-ink); }

.reasons-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.reasons-col li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding: 3px var(--sp-2);
  border-radius: 4px;
}

#reasons-up li {
  background: var(--green-bg);
}

#reasons-down li {
  background: var(--red-bg);
}

.reason-field {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.reason-raw {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.reason-contribution {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reasons-empty {
  color: var(--text-faint);
}

#gates-kill {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 22px;
}

/* --- Note + statuslinje -------------------------------------------------- */

#note-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

#note-area label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

#note-textarea {
  resize: none;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  height: 54px;
}

#note-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

#status-line {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Hjælpe-overlay                                                       */
/* ------------------------------------------------------------------ */

#help-overlay,
#godkend-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#help-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  min-width: 320px;
  box-shadow: var(--shadow-md);
}

#help-box h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
}

#help-box ul {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-md);
}

#help-box p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin: 0;
}

kbd {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------------ */
/* Responsivt — ned til ~1100px (kort-layout wrapper)                  */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  #app {
    grid-template-columns: 280px 1fr;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  #key-figures {
    grid-template-columns: repeat(5, 1fr);
  }

  #detail-visual {
    grid-template-columns: 180px 1fr;
    grid-template-rows: 130px;
    height: 130px;
  }
}

@media (max-width: 760px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-wrap: wrap;
  }
}

/* Elementer der styres via JS'ens hidden-attribut (#detail-content, #detail-empty,
   #help-overlay) sætter selv en display-værdi (flex/grid) andetsteds i denne fil —
   den regel har højere specificitet end browserens standard-[hidden]-regel og ville
   ellers vise elementet selvom hidden er sat. Denne regel skal derfor stå sidst. */
[hidden] {
  display: none !important;
}