/* ============================================================================
   Aware — Design System (single source of truth, spec §4)
   All repeated visual decisions live here as tokens. Markup uses ONLY these
   tokens / component classes — never loose per-page values.
   Self-contained: no CDN. Type prefers 'Plus Jakarta Sans' (self-host the woff2 to
   render it; falls back gracefully to the system sans stack — no external request).
   Visual identity: "Trygg" — forest green + lime, warm cream paper, soft rounded shapes.
   ========================================================================== */

/* — Self-hosted webfont (Plus Jakarta Sans, OFL) — no CDN/external request — */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* — Color: trust-led, organic — deep forest green + lime energy on warm paper — */
    --c-bg:          #FBF7EF;   /* warm cream paper */
    --c-surface:     #ffffff;
    --c-surface-2:   #F4EFE3;   /* soft cream panel */
    --c-border:      #E7E0D0;
    --c-border-strong:#D6CCB6;

    --c-ink:         #0B2E2A;   /* deep forest green — primary text/brand */
    --c-ink-soft:    #3D4D49;
    --c-ink-mute:    #6E8A82;

    --c-primary:     #0B2E2A;   /* forest green — security/trust (fills) */
    --c-primary-hover:#103A35;
    --c-primary-ink: #ffffff;
    --c-primary-tint:#DCEFEA;   /* pale teal-green */
    --c-link:        var(--c-primary);   /* text role of primary — split so dark mode can lighten it */

    --c-accent:      #C7F24C;   /* lime — energy / "go / next" (LIGHT → dark ink on top) */
    --c-accent-hover:#B6E63A;
    --c-accent-ink:  #0B2E2A;   /* ink to use on an accent fill */
    --c-accent-tint: #EDF8CE;

    --c-success:     #2F7A33;
    --c-success-tint:#DCF3D2;
    --c-warn:        #C2410C;   /* burnt orange */
    --c-warn-tint:   #FBEDBE;
    --c-danger:      #C0392B;
    --c-danger-tint: #FBE4DF;

    /* Sti-delen af en dissekeret URL (lektionernes ::url-illustration). */
    --c-path:        #6A559E;

    /* Low-trust / uncertainty (spec P7) — a distinct, recognisable treatment */
    --c-lowtrust:    #C2410C;
    --c-lowtrust-tint:#FBEDBE;
    --c-lowtrust-border:#E7C46A;

    /* Risk tiers (HRS, higher = worse) — keep clear green→amber→red semantics */
    --c-risk-low:    #2F7A33;
    --c-risk-mid:    #C2410C;
    --c-risk-high:   #C0392B;

    /* — Typography — */
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
    --t-xs:   0.75rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-lg:   1.125rem;
    --t-xl:   1.375rem;
    --t-2xl:  1.75rem;
    --t-3xl:  2.25rem;
    --lh-tight: 1.2;
    --lh-base:  1.55;
    --fw-normal: 450;
    --fw-medium: 560;
    --fw-bold:   680;

    /* — Spacing rhythm (4px base) — */
    --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;    --s-8: 3rem;    --s-10: 4rem;

    /* — Radius / shadow / motion — softer, rounder; green-tinted shadows — */
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;
    --sh-1: 0 1px 2px rgba(11,46,42,.05), 0 2px 6px rgba(11,46,42,.05);
    --sh-2: 0 10px 24px -12px rgba(11,46,42,.22);
    --sh-3: 0 24px 50px -24px rgba(11,46,42,.30);
    --motion-fast: 120ms; --motion-base: 200ms;
    --ease: cubic-bezier(.2,.6,.2,1);
    --focus: 0 0 0 3px rgba(11,46,42,.30);

    --maxw: 72rem;

    color-scheme: light;
}

/* ==========================================================================
   Dark mode (#19) — same Trygg identity, flipped to a deep forest night.
   Pure token override: fills keep a (lighter) forest green, text roles use
   --c-link (light sea-green), lime accent stays. Illustration mocks that
   imitate real products (QR white square, MS-login blue) keep their colors.
   ========================================================================== */
/* Dark mode (#19) styres af [data-theme="dark"] på <html>, ikke af en media-query.
   theme.js sætter attributten ved load (gemt valg i localStorage, ellers systemets
   prefers-color-scheme) FØR render, så der ingen flash er — og en manuel light/dark-
   toggle bliver mulig. Samme Trygg-identitet, vendt til en dyb skovnat. */
:root[data-theme="dark"] {
        --c-bg:          #0C1310;   /* near-black green night */
        --c-surface:     #131C18;
        --c-surface-2:   #182420;
        --c-border:      #263630;
        --c-border-strong:#3A4F46;

        --c-ink:         #ECF3EE;
        --c-ink-soft:    #B7C9C0;
        --c-ink-mute:    #85998F;

        --c-primary:     #16453E;   /* fill: forest, still visible against the night bg */
        --c-primary-hover:#1C554C;
        --c-primary-ink: #ffffff;
        --c-primary-tint:#14302A;
        --c-link:        #8FD0BF;   /* light sea-green — readable text/borders on dark */

        --c-accent:      #C7F24C;
        --c-accent-hover:#D3F86A;
        --c-accent-ink:  #0B2E2A;
        --c-accent-tint: #232D12;

        --c-success:     #7BC97F;
        --c-success-tint:#16301F;
        --c-warn:        #F0975D;
        --c-warn-tint:   #33250F;
        --c-danger:      #EF8B7C;
        --c-danger-tint: #361713;

        --c-lowtrust:    #F0975D;
        --c-lowtrust-tint:#33250F;
        --c-lowtrust-border:#6B5327;

        --c-risk-low:    #7BC97F;
        --c-risk-mid:    #F0975D;
        --c-risk-high:   #EF8B7C;

        --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.30);
        --sh-2: 0 10px 24px -12px rgba(0,0,0,.55);
        --sh-3: 0 24px 50px -24px rgba(0,0,0,.65);
        --focus: 0 0 0 3px rgba(199,242,76,.40);

        color-scheme: dark;

        /* Lysere lilla, saa sti-delen ogsaa naar over AA paa moerk baggrund. */
        --c-path:        #B9A8E8;
}

/* Hardcoded light alert/badge borders would glare on the dark tints. */
:root[data-theme="dark"] .alert--info    { border-color: #2A4A42; }
:root[data-theme="dark"] .alert--success { border-color: #2C4A33; }
:root[data-theme="dark"] .alert--danger  { border-color: #55271F; }
:root[data-theme="dark"] .badge--success { border-color: #2C4A33; }
:root[data-theme="dark"] .badge--danger  { border-color: #55271F; }

/* Hero glow: full-strength lime radials overpower a near-black bg — soften. */
:root[data-theme="dark"] .mk-hero { background:
    radial-gradient(55rem 34rem at 6% -22%, rgba(199,242,76,.10), transparent 62%),
    radial-gradient(46rem 40rem at 110% -8%, rgba(199,242,76,.05), transparent 58%),
    var(--c-bg); }

/* The flagged-mail avatar sits on a white chip in light mode — flip to surface. */
:root[data-theme="dark"] .mk-row--sus .mk-ava { background: var(--c-surface-2); }

/* Manuel dark/light-toggle i topbaren (theme.js styrer state). Viser månen i lys
   tilstand (klik → mørk) og solen i mørk tilstand. */
/* Topbaren er ALTID mørk (både i lys og mørk tilstand), så ikonet er en fast lysegrå
   uafhængigt af temaet — --c-ink-soft var for dæmpet til at ses. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
    background: transparent; color: rgba(255, 255, 255, .82); cursor: pointer; line-height: 1; }
.theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
/* Vis KUN ét ikon: månen i lys tilstand, solen i mørk. (Ingen generel `.theme-toggle svg`-
   regel — den ville pga. højere specificitet overskrive display:none og vise begge.) */
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

/* — Reset / base — */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-weight: var(--fw-normal);
    font-size: var(--t-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}
/* Headings break long words: Finnish/German/Icelandic/Hungarian compounds (e.g.
   "tietojenkalastelusähköpostit") are wider than a phone and used to run out of
   their card. Only applies when a word genuinely doesn't fit. */
h1,h2,h3 { line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -.01em; overflow-wrap: break-word; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
/* `overflow-wrap: anywhere` so long callback URLs / IPs / domains (admin SSO and
   onboarding settings) break instead of pushing the whole page sideways. */
code { font-family: var(--font-mono); font-size: .9em; background: var(--c-surface-2); padding: 0 var(--s-1); border-radius: var(--r-sm); overflow-wrap: anywhere; }

/* — Accessibility helper — */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--s-3); top: -3rem; background: var(--c-primary);
    color: var(--c-primary-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
    transition: top var(--motion-base) var(--ease); z-index: 50;
}
.skip-link:focus { top: var(--s-3); }

/* — Layout — */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
.page { padding-block: var(--s-6); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
/* Unstyled list (no marker, no indent) — a class, not an inline style, so the
   strict style-src 'self' CSP doesn't block it (it silently did on the onboarding
   settings list). */
.list-plain { list-style: none; padding-left: 0; }
.grid { display: grid; gap: var(--s-5); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.muted { color: var(--c-ink-mute); }
.soft  { color: var(--c-ink-soft); }
.t-sm { font-size: var(--t-sm); } .t-xs { font-size: var(--t-xs); }

/* — Top bar — */
.topbar { background: var(--c-primary); color: var(--c-primary-ink); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; gap: var(--s-5); }
.topbar__brand { font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--c-primary-ink); }
.topbar__brand:hover { text-decoration: none; }
.topbar__nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.topbar__nav a { color: rgba(255,255,255,.78); font-size: var(--t-sm); font-weight: var(--fw-medium); }
.topbar__nav a:hover, .topbar__nav a[aria-current="page"] { color: #fff; text-decoration: none; }
.topbar__nav a[aria-current="page"] { border-bottom: 2px solid var(--c-accent); padding-bottom: 2px; }
.topbar__user { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: rgba(255,255,255,.82); }
.topbar__right { display: flex; align-items: center; gap: var(--s-4); }
/* Language switcher sits in the dark topbar corner and opens downward. */
.topbar .lang-switch summary { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); padding-block: 3px; }
.topbar .lang-switch summary:hover, .topbar .lang-switch[open] summary { color: #fff; border-color: rgba(255,255,255,.55); }
.lang-switch--down .lang-switch__list { top: calc(100% + var(--s-2)); bottom: auto; }

/* — Page header (orientation, spec §2) — */
.page-head { margin-bottom: var(--s-6); }
.page-head h1 { font-size: var(--t-2xl); }
.page-head p { color: var(--c-ink-soft); margin-top: var(--s-2); max-width: 46rem; }
.page-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* — Stepper (spec P1: persistent step indicator) — */
.stepper { list-style: none; padding: 0; display: flex; gap: 0; margin-bottom: var(--s-6); flex-wrap: wrap; }
.stepper__item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-mute); }
.stepper__item + .stepper__item::before {
    content: ""; width: 2rem; height: 2px; background: var(--c-border-strong);
    margin-inline: var(--s-3); flex: none;
}
.stepper__num {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-full);
    background: var(--c-surface); border: 2px solid var(--c-border-strong); font-size: var(--t-xs);
    font-weight: var(--fw-bold); color: var(--c-ink-mute);
}
.stepper__item.is-active { color: var(--c-ink); font-weight: var(--fw-medium); }
.stepper__item.is-active .stepper__num { border-color: var(--c-link); color: var(--c-link); }
.stepper__item.is-done { color: var(--c-ink-soft); }
.stepper__item.is-done .stepper__num { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* — Card — */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card__body { padding: var(--s-5); }
.card__title { font-size: var(--t-lg); font-weight: var(--fw-bold); }
.card--pad { padding: var(--s-6); }

/* — Stat card — */
.stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-5); }
.stat__label { font-size: var(--t-sm); color: var(--c-ink-mute); }
.stat__value { font-size: var(--t-3xl); font-weight: var(--fw-bold); margin-top: var(--s-2); letter-spacing: -.02em; }
.stat__sub { font-size: var(--t-xs); color: var(--c-ink-mute); margin-top: var(--s-1); }

/* — Buttons — */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: inherit; font-size: var(--t-sm); font-weight: var(--fw-medium);
    padding: var(--s-3) var(--s-5); border-radius: var(--r-full); border: 1px solid transparent;
    cursor: pointer; transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
    text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Primary = the single next-step pointer (spec P2). Larger, lime fill with dark ink. */
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); padding: var(--s-3) var(--s-6); font-weight: var(--fw-bold); }
.btn--primary:hover:not(:disabled) { background: var(--c-accent-hover); }
.btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--c-surface-2); }
.btn--ghost { background: transparent; color: var(--c-ink-soft); }
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-2); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #8f1e17; }
.btn--sm { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); }
.btn--block { width: 100%; }

/* The forward-arrow region (spec P2): one primary, secondary de-emphasised */
.next-step { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.next-step__back { font-size: var(--t-sm); }

/* — Fields (spec §3: per-field states ok / error / low-trust) — */
.field { display: block; }
.field + .field { margin-top: var(--s-4); }
.field__label { display: block; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-ink); margin-bottom: var(--s-2); }
.field__req { color: var(--c-danger); }
.field__input, .field__select, .field__textarea {
    width: 100%; font-family: inherit; font-size: var(--t-base); color: var(--c-ink);
    background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    padding: var(--s-3); transition: border var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--c-link); box-shadow: var(--focus); outline: none; }
.field__hint { font-size: var(--t-xs); color: var(--c-ink-mute); margin-top: var(--s-2); }
/* JS toggles this while a required-length field doesn't yet meet its minimum. */
.field__hint--invalid { color: var(--c-danger); }
.field__error { font-size: var(--t-sm); color: var(--c-danger); margin-top: var(--s-2); display: flex; gap: var(--s-1); }
.field.is-error .field__input, .field.is-error .field__select, .field.is-error .field__textarea { border-color: var(--c-danger); }
.field.is-error .field__input:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.3); }
.field.is-ok .field__input { border-color: var(--c-success); }

/* Low-trust value marker (spec P7) — distinct dashed amber, never hidden */
.is-lowtrust .field__input, .lowtrust-box { border: 1px dashed var(--c-lowtrust-border) !important; background: var(--c-lowtrust-tint); }
.lowtrust-flag { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs);
    color: var(--c-lowtrust); background: var(--c-lowtrust-tint); border: 1px solid var(--c-lowtrust-border);
    padding: 0 var(--s-2); border-radius: var(--r-full); font-weight: var(--fw-medium); }

/* — Alerts (role="alert" in markup; spec §3/§5) — */
[hidden] { display: none !important; } /* author display: rules ellers overtrumfer UA-hidden */
.alert { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); border: 1px solid; display: flex; gap: var(--s-2); }
.alert--info    { background: var(--c-primary-tint); border-color: #B6D9D0; color: var(--c-primary-hover); }
.alert--success { background: var(--c-success-tint); border-color: #bfe0cb; color: var(--c-success); }
.alert--warn    { background: var(--c-warn-tint);    border-color: var(--c-lowtrust-border); color: var(--c-warn); }
.alert--danger  { background: var(--c-danger-tint);  border-color: #eebab6; color: var(--c-danger); }

/* — Badges — */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: var(--fw-medium);
    padding: 2px var(--s-2); border-radius: var(--r-full); background: var(--c-surface-2); color: var(--c-ink-soft); border: 1px solid var(--c-border); }
.badge--success { background: var(--c-success-tint); color: var(--c-success); border-color: #bfe0cb; }
.badge--warn { background: var(--c-warn-tint); color: var(--c-warn); border-color: var(--c-lowtrust-border); }
.badge--danger { background: var(--c-danger-tint); color: var(--c-danger); border-color: #eebab6; }
.badge--neutral { background: var(--c-surface-2); }
.badge--accent { background: var(--c-accent-tint); color: var(--c-accent-ink); border-color: transparent; }

/* — Table —
   Data tables are wider than a phone. The wrapper therefore scrolls horizontally
   instead of clipping (it used to be `overflow: hidden`, which silently hid whole
   columns on narrow screens — the GDPR table's legal basis and retention, the
   comparison table's competitor column, the admin lists' role/risk columns).
   The layered gradients are the classic CSS-only scroll shadow: the `local`
   layers paint the surface colour over the shadow at each end, so a shadow is
   only visible on a side that still has content to scroll to. */
.table-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    background-image:
        linear-gradient(to right, var(--c-surface), transparent 1.75rem),
        linear-gradient(to left, var(--c-surface), transparent 1.75rem),
        linear-gradient(to right, rgb(0 0 0 / .10), transparent .875rem),
        linear-gradient(to left, rgb(0 0 0 / .10), transparent .875rem);
    background-repeat: no-repeat;
    background-size: 1.75rem 100%, 1.75rem 100%, .875rem 100%, .875rem 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table thead th { text-align: left; background: var(--c-surface-2); color: var(--c-ink-mute); font-weight: var(--fw-medium);
    padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
.table tbody td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table td.right, .table th.right { text-align: right; }

/* — Empty state — */
.empty { border: 2px dashed var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface);
    padding: var(--s-8); text-align: center; color: var(--c-ink-mute); }
.empty__icon { font-size: var(--t-3xl); }
.empty__title { color: var(--c-ink-soft); font-weight: var(--fw-medium); margin-top: var(--s-2); }

/* — Risk gauge — */
.gauge { display: flex; align-items: baseline; gap: var(--s-2); }
.gauge__num { font-size: var(--t-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em; }
.gauge__den { font-size: var(--t-lg); color: var(--c-ink-mute); }
.gauge--low .gauge__num  { color: var(--c-risk-low); }
.gauge--mid .gauge__num  { color: var(--c-risk-mid); }
.gauge--high .gauge__num { color: var(--c-risk-high); }
.gauge--none .gauge__num { color: var(--c-ink-mute); }
.gauge-bar { height: 8px; border-radius: var(--r-full); background: var(--c-border); overflow: hidden; margin-top: var(--s-3); }
.gauge-bar__fill { height: 100%; border-radius: var(--r-full); }

/* — Definition list (transparency panels, spec P3) — */
.facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-5); font-size: var(--t-sm); }
.facts dt { color: var(--c-ink-mute); }
.facts dd { color: var(--c-ink); }

/* — Auth shell — */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5); }
.auth__card { width: 100%; max-width: 24rem; }
.auth__divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--c-ink-mute); font-size: var(--t-xs); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* — Checklist (transparency, gate requirements) — */
.checklist { list-style: none; padding: 0; font-size: var(--t-sm); }
.checklist li { display: flex; gap: var(--s-2); padding: var(--s-2) 0; }
.checklist li::before { content: "○"; color: var(--c-ink-mute); }
.checklist li.is-met::before { content: "✓"; color: var(--c-success); }
.checklist li.is-unmet::before { content: "•"; color: var(--c-danger); }

.site-footer { padding-block: var(--s-6); color: var(--c-ink-mute); font-size: var(--t-sm); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border); }
.site-footer__nav a { color: var(--c-ink-soft); text-decoration: none; }
.site-footer__nav a:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* Language switcher (public footer) — pure <details>, no JS, opens upward. */
.lang-switch { position: relative; }
.lang-switch summary { cursor: pointer; list-style: none; padding: var(--s-1) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-ink-soft); user-select: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { border-color: var(--c-border-strong); color: var(--c-ink); }
.lang-switch[open] summary { border-color: var(--c-border-strong); }
.lang-switch__list { position: absolute; bottom: calc(100% + var(--s-2)); right: 0; z-index: 30; margin: 0; padding: var(--s-2); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: 2px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); max-height: 60vh; overflow: auto; }
/* Whitespace inside the switcher must never wrap the trigger onto two lines. */
.lang-switch summary { white-space: nowrap; }
.lang-switch__list a { display: block; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); color: var(--c-ink-soft); text-decoration: none; }
.lang-switch__list a:hover { background: var(--c-surface-2); color: var(--c-ink); }
.lang-switch__list a[aria-current="true"] { color: var(--c-link); font-weight: var(--fw-medium); }
/* Language switcher rendered as POST buttons (app topbar) */
.lang-switch__btn { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); color: var(--c-ink-soft); font: inherit; }
.lang-switch__btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.lang-switch__btn[aria-current="true"] { color: var(--c-link); font-weight: var(--fw-medium); }

/* Paginator (admin lists) */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.pager .is-disabled { opacity: 0.45; pointer-events: none; }
.pager__gap { padding-inline: var(--s-2); color: var(--c-ink-mute); }

/* ============================================================================
   Utilities — replace inline style="" so the CSP can run style-src 'self'
   (style attributes can't take a nonce/hash). Values are the same tokens the
   markup used before; only the delivery mechanism changed.
   ========================================================================== */
/* Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.ml-2 { margin-left: var(--s-2); }
.pl-5 { padding-left: var(--s-5); }
/* Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-6 { gap: var(--s-6); }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.pointer { cursor: pointer; }
.text-center { text-align: center; }
/* Type */
.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-bold { font-weight: var(--fw-bold); }
.t-lg { font-size: var(--t-lg); }
.t-xl { font-size: var(--t-xl); }
.t-2xl { font-size: var(--t-2xl); }
.t-3xl { font-size: var(--t-3xl); }
.tracking-tight { letter-spacing: -.02em; }
.lh-1 { line-height: 1; }
/* Color */
.text-ink { color: var(--c-ink); }
.text-primary { color: var(--c-link); }
.text-accent { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-danger { color: var(--c-danger); }
.text-risk-low { color: var(--c-risk-low); }
.text-risk-mid { color: var(--c-risk-mid); }
.on-dark { color: #fff; }
.on-dark-soft { color: rgba(255,255,255,.72); }
.bg-accent-tint { background: var(--c-accent-tint); }
/* Width */
.measure { max-width: 46rem; }
.mw-42 { max-width: 42rem; }
.mw-34 { max-width: 34rem; }
.mw-40 { max-width: 40rem; }
.mx-auto { margin-inline: auto; }
.justify-center { justify-content: center; }
.mw-32 { max-width: 32rem; }
.min-w-9 { min-width: 9rem; }
.min-w-15 { min-width: 15rem; }
/* Borders / accents */
.border-top-warn { border-top: 4px solid var(--c-warn); }
.border-left-success { border-left: 4px solid var(--c-success); }
.border-left-accent { border-left: 4px solid var(--c-accent); }
.opacity-68 { opacity: .68; }
.border-0 { border: 0; }
.p-0 { padding: 0; }
.justify-start { justify-content: flex-start; }
.rounded-lg { border-radius: var(--r-lg); }
.border-dashed { border-style: dashed; }

/* — Section sub-heading spacing (was margin:s-6 0 s-4) — */
.section-head { margin: var(--s-6) 0 var(--s-4); }

/* — Uppercase kicker label — */
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-ink-mute); }

/* — Clickable option row (radios/checkboxes) — */
.choice { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.choice--sm { gap: var(--s-2); }
.choice--pad { padding: var(--s-1) 0; }

/* — Brand wordmark (partials/brand) — */
.brand { display: inline-flex; align-items: center; gap: .5rem; line-height: 1; }
/* [hidden] er browserens egen maade at skjule paa, men den taber mod enhver klasse der
   saetter display (fx .stack). Reglen her giver attributten forrang, saa markup kan skjule
   uden JavaScript og uden en inline style. */
[hidden] { display: none !important; }

.brand__mark { font-weight: var(--fw-bold); letter-spacing: -.02em; }
.brand__link { font-weight: var(--fw-normal); opacity: .68; }

/* — Quiz question wrong-answer marker — */
.quiz-q { border: 0; padding: 0; }
.quiz-q--wrong { border-left: 3px solid var(--c-danger); padding-left: var(--s-3); }

/* — Card as a full-area link (catalog) — */
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { text-decoration: none; }

/* — Marketing stat band (the "68%" thesis strip) — */
.stat-band { background: var(--c-primary); color: var(--c-primary-ink);
    display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.stat-band__num { font-size: 4.5rem; font-weight: var(--fw-bold); line-height: .95; letter-spacing: -.03em; color: var(--c-accent); }
.stat-band__title { font-size: var(--t-lg); font-weight: var(--fw-medium); color: var(--c-primary-ink); margin: 0; }

/* — Long-form legal/prose pages — */
.legal { max-width: 46rem; }
.legal h2 { margin: var(--s-6) 0 var(--s-3); }
.legal p, .legal ul { margin-top: var(--s-3); }
.legal ul { padding-left: var(--s-5); }
.legal .table-wrap, .legal .facts { margin-top: var(--s-3); }
/* Pending fill-in marker (reuses the low-trust dashed-amber treatment) */
.fillin { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-sm);
    border: 1px dashed var(--c-lowtrust-border); background: var(--c-lowtrust-tint);
    color: var(--c-lowtrust); font-size: var(--t-sm); font-weight: var(--fw-medium); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   Marketing / landing (public host, spec §0.1) — a richer, editorial page built
   STRICTLY on the Trygg tokens above. Full-bleed bands each re-centre with an
   inner .container (the public layout no longer wraps <main> in .container).
   All styling lives here so the CSP can stay style-src 'self'.
   ========================================================================== */

/* Section rhythm + full-width bands */
.mk-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.mk-section--pull { padding-top: clamp(.75rem, 2vw, 1.25rem); }
.mk-band { background: var(--c-surface-2); border-block: 1px solid var(--c-border); }
.mk-head { max-width: 44rem; }
.mk-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -.025em; }
.mk-head p { color: var(--c-ink-soft); margin-top: var(--s-3); font-size: var(--t-lg); }

/* Fluid display type + lede */
.mk-display { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.03; letter-spacing: -.035em; font-weight: var(--fw-bold); }
.mk-lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--c-ink-soft); line-height: 1.5; }
/* Lime highlighter behind a key phrase */
.mk-hl { background: linear-gradient(180deg, transparent 56%, var(--c-accent) 56%); padding: 0 .08em; border-radius: 2px; }

.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.mk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Trust chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mk-chip { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: var(--fw-medium);
    color: var(--c-ink-soft); background: var(--c-surface); border: 1px solid var(--c-border); padding: var(--s-2) var(--s-3); border-radius: var(--r-full); }

/* ---- Hero ---- */
.mk-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-border);
    background:
        radial-gradient(55rem 34rem at 6% -22%, rgba(199,242,76,.32), transparent 62%),
        radial-gradient(46rem 40rem at 110% -8%, rgba(11,46,42,.10), transparent 58%),
        var(--c-bg); }
.mk-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.05fr .95fr; align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
/* An `fr` track is `minmax(auto, 1fr)`, so the inbox mock's min-content width used
   to stretch the column ~25px past the container: on a phone the hero copy and the
   mock ran off the right edge and were clipped by `.mk-hero`'s overflow: hidden.
   `min-width: 0` lets the track shrink to the container instead. */
.mk-hero__grid > * { min-width: 0; }
@media (max-width: 62rem) { .mk-hero__grid { grid-template-columns: 1fr; } }

/* ---- Hero product visual: an inbox with a flagged phishing mail ---- */
/* Plads foroven så avocado-hovedet ikke klippes af sektionen når det rager op
   over kortet. Kun på desktop; på mobil sidder maskotten stadig men mocken er
   ikke roteret. */
/* padding-top 4rem (64px) = prototypens wrapper-tal. Med maskottens top:-14px lander
   kortkanten netop UNDER armene (viewBox y≈70-76), så hænderne hviler SYNLIGT på kanten
   i stedet for at forsvinde bag kortet. Mindre padding og kortet dækkede armene. */
.mk-shot { position: relative; padding-top: 4rem; }
/* Maskotten ("kigger over kanten", handoff 2a): BAG kortet (z-index 0), så ansigtet
   rager op over titelbjælken og armene lander PÅ den og klippes af kortet foran.
   Kortet SKAL derfor ligge foran (.mk-window z-index 1) — ellers er illusionen væk. */
/* top:-2px, ikke -14px: kortet hælder 1,4° med uret (.mk-window transform), så dets HØJRE
   kant sidder ~12px lavere end venstre. Da maskotten står over højre tredjedel, skal den
   følge den lavere kant — ellers svæver armene over bjælken. På mobil er kortet IKKE
   roteret, så dér gælder den u-korrigerede -14px. */
.mk-mascot { position: absolute; top: -10px; right: 3.5rem; z-index: 0; width: 128px; height: 86px; }
@media (max-width: 62rem) { .mk-mascot { top: -14px; right: 2rem; } }
/* padding-bottom keeps the "Meldt som phishing" badge clear of the last mail's
   subject line — it used to sit on top of it. */
.mk-window { position: relative; z-index: 1; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--sh-3); overflow: hidden; transform: rotate(1.4deg); padding-bottom: var(--s-6); }
@media (max-width: 62rem) { .mk-window { transform: none; } }
.mk-window__bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
    background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.mk-tl { width: .62rem; height: .62rem; border-radius: var(--r-full); background: var(--c-border-strong); }
.mk-window__label { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--c-ink-mute); }
.mk-row { display: flex; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--c-border); align-items: flex-start; }
.mk-row:last-child { border-bottom: 0; }
.mk-ava { width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); display: grid; place-items: center;
    font-weight: var(--fw-bold); font-size: var(--t-sm); flex: none; background: var(--c-primary-tint); color: var(--c-link); }
.mk-row__main { min-width: 0; flex: 1; }
.mk-row__top { display: flex; justify-content: space-between; gap: var(--s-3); }
.mk-row__from { font-weight: var(--fw-medium); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row__time { font-size: var(--t-xs); color: var(--c-ink-mute); flex: none; }
.mk-row__sub { font-size: var(--t-sm); color: var(--c-ink-soft); margin-top: 1px; }
.mk-row__snip { font-size: var(--t-xs); color: var(--c-ink-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-row--sus { background: var(--c-lowtrust-tint); }
.mk-row--sus .mk-ava { background: #fff; color: var(--c-lowtrust); border: 1px dashed var(--c-lowtrust-border); }
/* z-index 2: over kortet (.mk-window er z-index 1 pga. maskotten bag den), ellers dækker
   kortet badgen der skal hvile på dets nederste kant. */
.mk-caught { position: absolute; z-index: 2; left: var(--s-5); bottom: -.9rem; display: inline-flex; align-items: center; gap: var(--s-2);
    background: var(--c-primary); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-full);
    box-shadow: var(--sh-2); font-size: var(--t-sm); font-weight: var(--fw-medium); }
.mk-caught__tick { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: var(--r-full);
    background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); font-size: var(--t-xs); }

/* ---- How-it-works steps ---- */
.mk-steps { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 52rem) { .mk-steps { grid-template-columns: 1fr; } }
.mk-step__n { width: 2.75rem; height: 2.75rem; border-radius: var(--r-full); background: var(--c-accent);
    color: var(--c-accent-ink); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--t-lg);
    box-shadow: var(--sh-1); margin-bottom: var(--s-4); }
.mk-step h3 { font-size: var(--t-lg); }
.mk-step p { color: var(--c-ink-soft); margin-top: var(--s-2); font-size: var(--t-sm); }

/* ---- Feature cards ---- */
.mk-features { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.mk-feature { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    padding: var(--s-6); box-shadow: var(--sh-1);
    transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.mk-feature:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mk-feature__icon { width: 3rem; height: 3rem; border-radius: var(--r-md); display: grid; place-items: center;
    font-size: 1.5rem; background: var(--c-accent-tint); margin-bottom: var(--s-4); }
.mk-feature h3 { font-size: var(--t-lg); }
.mk-feature p { color: var(--c-ink-soft); font-size: var(--t-sm); margin-top: var(--s-2); }

/* ---- Final CTA panel ---- */
.mk-cta { position: relative; overflow: hidden; background: var(--c-primary); color: #fff;
    border-radius: var(--r-lg); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.mk-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(36rem 18rem at 50% -30%, rgba(199,242,76,.28), transparent 60%); }
.mk-cta > * { position: relative; }
.mk-cta h2 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.02em; }
.mk-cta p { color: rgba(255,255,255,.8); margin-top: var(--s-3); font-size: var(--t-lg); }
.mk-cta .mk-actions { justify-content: center; margin-top: var(--s-6); }

/* ---- Pricing (G4) ---- */
.price-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); max-width: 52rem; margin-inline: auto; align-items: start; }
.price-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); }
.price-card--featured { border-color: var(--c-link); box-shadow: var(--sh-2); }
.price-card__badge { position: absolute; top: calc(-1 * var(--s-3)); left: var(--s-6); background: var(--c-primary); color: #fff; font-size: var(--t-xs); font-weight: var(--fw-medium); padding: 2px var(--s-3); border-radius: var(--r-full); }
.price-card__name { font-size: var(--t-lg); }
.price-card__price { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: var(--fw-bold); letter-spacing: -.02em; margin-top: var(--s-2); }
.price-card__per { display: block; font-size: var(--t-sm); font-weight: var(--fw-normal); color: var(--c-ink-mute); letter-spacing: 0; }
.price-card__lead { color: var(--c-ink-soft); font-size: var(--t-sm); margin-top: var(--s-3); }
.price-list { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-2); }
.price-list li { position: relative; padding-left: var(--s-6); color: var(--c-ink-soft); font-size: var(--t-sm); }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: var(--fw-bold); }
.price-card__cta { width: 100%; }

/* ---- Comparison matrix (G5) ---- */
.compare-table { max-width: 44rem; margin-inline: auto; }
.compare-table th[scope="col"], .compare-table td { text-align: center; vertical-align: middle; }
.compare-table th[scope="row"] { text-align: left; }
.compare-table .compare-us { background: var(--c-primary-tint); }
.compare-table thead .compare-us { color: var(--c-link); font-weight: var(--fw-bold); }
.compare-yes { color: var(--c-success); font-weight: var(--fw-bold); font-size: var(--t-lg); }
.compare-no { color: var(--c-ink-mute); font-size: var(--t-lg); }

/* ---- Staggered load reveal ---- */
@keyframes mk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mk-reveal { animation: mk-rise .7s var(--ease) both; }
.d-1 { animation-delay: .05s; } .d-2 { animation-delay: .12s; } .d-3 { animation-delay: .19s; }
.d-4 { animation-delay: .26s; } .d-5 { animation-delay: .33s; }
@media (prefers-reduced-motion: reduce) { .mk-reveal { animation: none; } }

.mk-chips--wrap { justify-content: center; }

/* ── Public nano-lesson (catalog show) ─────────────────────────────────────
   Typed blocks from App\Support\LessonContent: intro prose, warn/do/info
   callouts, an accent takeaway, and an evidence card with sources. */
.course-hero { display: flex; gap: var(--s-4); align-items: flex-start; }
.course-hero__icon { display: inline-flex; width: 5.5rem; height: 5.5rem; flex: none; align-items: center; justify-content: center;
    border-radius: var(--r-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.mascot { display: block; }
/* Friendly micro-interaction: the mascot blinks when you hover it (or its card/hero). CSS-only, so
   it works under the strict CSP. Catalogue-card mascots have pointer-events:none, hence the extra
   container triggers. transform-box:fill-box scales each eye about its own centre (a real blink). */
.mascot__eye { transform-box: fill-box; transform-origin: center; }
.mascot:hover .mascot__eye,
.catalog-hero:hover .mascot__eye,
.catalog-card:hover .mascot__eye,
.course-hero:hover .mascot__eye { animation: mascot-blink .45s ease; }
@keyframes mascot-blink { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(0.1); } 55% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mascot__eye { animation: none !important; } }

/* Forside-avocadoen blinker på samme måde. Den ligger bag kortet, så udløseren er hele
   hero-visualet (.mk-shot) — man rammer den ikke altid direkte. Samme keyframe. */
.mk-mascot__eye { transform-box: fill-box; transform-origin: center; }
.mk-shot:hover .mk-mascot__eye { animation: mascot-blink .45s ease; }
@media (prefers-reduced-motion: reduce) { .mk-mascot__eye { animation: none !important; } }

/* Course catalogue (design 1c) — featured "Start here" hero + a character grid where a big,
   rotated avocado is cropped into each card's corner. Cards lift 2px on hover. */
.catalog { display: flex; flex-direction: column; gap: var(--s-5); }
.card-link { transition: transform .12s ease, box-shadow .12s ease; }

.catalog-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
    background: var(--c-primary); color: var(--c-primary-ink); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--sh-1); }
.catalog-hero__body { position: relative; z-index: 1; max-width: 34rem; min-width: 0; }
.catalog-hero__title { color: var(--c-primary-ink); font-size: var(--t-2xl); margin: var(--s-3) 0 var(--s-2); }
.catalog-hero__desc { color: rgba(255, 255, 255, .82); margin-bottom: var(--s-5); }
.catalog-hero__mascot { flex: none; }
.badge--start { background: var(--c-accent); color: var(--c-accent-ink); border-color: transparent; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }

.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.catalog-card { position: relative; overflow: hidden; min-height: 10rem; padding: var(--s-5) var(--s-6);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.catalog-card__body { position: relative; z-index: 1; max-width: 74%; }
.catalog-card h3 { margin: 0 0 var(--s-2); }
.catalog-card__meta { margin-top: var(--s-3); }
/* Intet vandret overhæng. Rekvisitten (lup, tastatur, megafon) sidder yderst til højre i
   maskottens viewBox — kun 4,4 px fra dens kant — så den er det FØRSTE, kortets
   overflow:hidden klipper. Oveni svinger de negative tilt-grader nedenfor rekvisitten op til
   3,7 px længere ud, så selv et lille overhæng skærer den. Kun benene må crops (bottom). */
.catalog-card__mascot { position: absolute; right: 0; bottom: -1.4rem; pointer-events: none; transform: rotate(3deg); }
/* Vary the tilt per card so the avocados feel hand-placed, not stamped. */
.catalog-card:nth-child(6n+1) .catalog-card__mascot { transform: rotate(-5deg); }
.catalog-card:nth-child(6n+2) .catalog-card__mascot { transform: rotate(6deg); }
.catalog-card:nth-child(6n+3) .catalog-card__mascot { transform: rotate(-2deg); }
.catalog-card:nth-child(6n+4) .catalog-card__mascot { transform: rotate(4deg); }
.catalog-card:nth-child(6n+5) .catalog-card__mascot { transform: rotate(-6deg); }
.catalog-card:nth-child(6n)   .catalog-card__mascot { transform: rotate(2deg); }

.catalog-hero:hover, .catalog-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

@media (max-width: 720px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-hero { flex-direction: column; align-items: flex-start; }
    .catalog-hero__mascot { align-self: flex-end; margin-top: calc(var(--s-6) * -1); }
}
.course-hero h1 { margin: var(--s-1) 0 0; }
.course-hero > div > p:last-child { color: var(--c-ink-soft); margin-top: var(--s-2); }

.lesson > * + * { margin-top: var(--s-5); }
.lesson__prose { color: var(--c-ink-soft); }
.lesson__prose ul, .callout__body ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.lesson__prose li, .callout__body li { margin: var(--s-1) 0; }
.lesson__prose p { margin: 0; }

.callout { border: 1px solid var(--c-border); border-left-width: 4px; border-radius: var(--r-md); padding: var(--s-4) var(--s-5); background: var(--c-surface); }
.callout__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.callout__icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; align-items: center; justify-content: center;
    border-radius: var(--r-full); font-size: .8rem; color: #fff; }
.callout__label { font-weight: var(--fw-bold); font-size: var(--t-sm); }
.callout__body { color: var(--c-ink-soft); font-size: var(--t-sm); }
.callout__body p { margin: 0; }
.callout--warn { border-left-color: var(--c-warn); background: var(--c-warn-tint); }
.callout--warn .callout__icon { background: var(--c-warn); }
.callout--warn .callout__label { color: var(--c-warn); }
.callout--do { border-left-color: var(--c-success); background: var(--c-success-tint); }
.callout--do .callout__icon { background: var(--c-success); }
.callout--do .callout__label { color: var(--c-success); }
.callout--info { border-left-color: var(--c-border-strong); background: var(--c-surface-2); }
.callout--info .callout__icon { background: var(--c-ink-mute); }

.takeaway { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md); background: var(--c-accent-tint); border: 1px solid var(--c-border-strong); }
.takeaway__icon { font-size: 1.1rem; flex: none; line-height: 1.4; }
.takeaway__text { color: var(--c-ink); font-weight: var(--fw-medium); }
.takeaway__text p { margin: 0; }

.research { border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); padding: var(--s-4) var(--s-5); }
.research__head { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); font-size: var(--t-sm); color: var(--c-ink); margin-bottom: var(--s-2); }
.research__body { font-size: var(--t-sm); color: var(--c-ink-soft); }
.research__body p { margin: 0; }
.research__sources { font-size: var(--t-xs); color: var(--c-ink-mute); margin-top: calc(var(--s-3) * -1 + 2px); }
.research__sources a { color: var(--c-ink-mute); text-decoration: underline; }

/* Annotated URL illustration — protocol/subdomain/domain/path colour-coded, the way a phishing
   link is dissected. font-size:0 on the box collapses the whitespace between segments so the URL
   reads contiguously; labels float above/below (absolute) without pushing the segments apart. */
.url-illus { text-align: center; white-space: nowrap; overflow-x: auto; font-size: 0;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 4.5rem var(--s-5); margin-bottom: var(--s-3); }
/* Plain-language key: what each colour-coded part of the address means (for non-technical learners). */
.url-legend { max-width: 34rem; margin: 0 auto var(--s-4); display: grid; gap: var(--s-2); text-align: left; }
.url-legend__row { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: var(--s-3); align-items: baseline; }
.url-legend__k { font-weight: var(--fw-bold); font-size: var(--t-sm); white-space: nowrap; }
.url-legend__k--proto { color: var(--c-ink-mute); }
.url-legend__k--sub { color: var(--c-warn); }
.url-legend__k--dom { color: var(--c-link); }
.url-legend__k--path { color: #7E6BB0; }
.url-legend dd { margin: 0; font-size: var(--t-sm); color: var(--c-ink-soft); }
.url-part { position: relative; }
.url-seg { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: var(--fw-medium); }
.url-tag { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--font-sans); font-size: var(--t-xs); font-weight: var(--fw-bold); color: #fff;
    padding: 3px 9px; border-radius: var(--r-sm); background: var(--tag); }
.url-part--top .url-tag { bottom: calc(100% + 14px); }
.url-part--bottom .url-tag { top: calc(100% + 14px); }
.url-tag::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 5px solid transparent; }
.url-part--top .url-tag::after { top: 100%; border-top-color: var(--tag); }
.url-part--bottom .url-tag::after { bottom: 100%; border-bottom-color: var(--tag); }
/* Mobile portrait: the one-line URL can't fit 390px — wrap at segment boundaries instead of
   clipping the domain (the very part the lesson teaches you to read). Each part reserves its
   own tag clearance, so wrapped lines don't collide. The topbar likewise wraps into two clean
   rows (brand / nav + language) instead of overflowing its fixed-height bar. */
@media (max-width: 560px) {
    .topbar__inner { height: auto; flex-wrap: wrap; padding-block: var(--s-3); row-gap: var(--s-3); }
    .topbar__right { flex: 1 1 100%; justify-content: space-between; }
    /* App host (learner/admin): brand on its own row, nav below it, user row last —
       otherwise the nav wrapped into three ragged lines beside the logo. */
    .topbar__left { flex: 1 1 100%; flex-wrap: wrap; gap: var(--s-3); }
    .topbar__left .topbar__nav { flex: 1 1 100%; }
    .topbar__user { flex: 1 1 100%; justify-content: space-between; gap: var(--s-2); }
    .topbar__user > span { min-width: 0; }
    .topbar .btn { white-space: nowrap; }

    /* The 19-language menu is wider than the space left of the switcher, so on
       phones it anchors to the whole bar instead of to the trigger. */
    .topbar { position: relative; }
    .topbar .lang-switch { position: static; }
    .topbar .lang-switch__list { left: var(--s-5); right: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 70vh; }

    /* Impressum/fact lists stack: a `max-content` label column keeps its full
       width and squeezes the value column to nothing, so on a phone the longer
       labels in de/fr/es/lv… pushed the whole About page sideways. */
    .facts { grid-template-columns: 1fr; gap: 0; }
    .facts dt { margin-top: var(--s-3); }
    .facts dt:first-of-type { margin-top: 0; }

    /* Tighter cells so a table needs less (often no) horizontal scrolling. */
    .table { font-size: var(--t-xs); }
    .table thead th, .table tbody td { padding: var(--s-2) var(--s-3); }

    /* The privacy policy's four-column tables (what we process / sub-processors)
       are prose, not numbers — sideways scrolling would hide the legal basis and
       retention period. On phones each row becomes a labelled block instead; the
       labels come from the same translation keys as the column headers. */
    .legal .table, .legal .table tbody, .legal .table tr, .legal .table td { display: block; }
    .legal .table thead { display: none; }
    .legal .table tbody tr { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); }
    .legal .table tbody tr:first-child { border-top: 0; }
    .legal .table tbody tr:hover { background: none; }
    .legal .table tbody td { border: 0; padding: 0; }
    .legal .table tbody td + td { margin-top: var(--s-3); }
    .legal .table tbody td::before { content: attr(data-label); display: block;
        font-size: var(--t-xs); color: var(--c-ink-mute); }

    /* Bevidst FORTSAT nowrap + vandret scroll paa smal skaerm. Med `white-space: normal`
       brydes adressen til en soejle, og saa er hele pointen — laes den fra venstre mod
       hoejre, protokol → subdomaene → domaene → sti — vaek. Man scroller hellere. */
    .url-illus { padding: var(--s-4) var(--s-3); }
    .url-part { display: inline-block; margin-block: 38px 34px; }
    .url-seg { font-size: var(--t-base); }
}

/* Our own palette (deliberately not Nimblr's green/gold/red/blue). Domain = brand forest
   green + strongest, since it's the part you must actually read. */
/* Farverne er maalt, ikke valgt paa foelelsen (WCAG-kontrast mod .url-illus' baggrund):
   DOMAENET skal vaere den kraftigste tekst i illustrationen — det er den del oevelsen handler
   om at laese. Det var --c-link, som i dark mode er en afdaempet mint (9.89) og dermed stod
   svagere end den orange faelde ved siden af; --c-ink giver maksimal kontrast i BEGGE temaer.
   Stien var hardcodet #7E6BB0 uden dark-variant og laa paa 3.83 — under AA. */
.url-tag--proto { --tag: var(--c-ink-mute); }  .url-seg--proto { color: var(--c-ink-mute); }
.url-tag--sub   { --tag: var(--c-warn); }       .url-seg--sub   { color: var(--c-warn); }
.url-tag--dom   { --tag: var(--c-primary); }    .url-seg--dom   { color: var(--c-ink); font-weight: var(--fw-bold); }
.url-tag--path  { --tag: var(--c-path); }       .url-seg--path  { color: var(--c-path); }

/* Progressive URL-reveal (piloted on the phishing grundkursus): the whole address stays visible,
   but the nano-player walks the eye through ONE part at a time — the current segment shows vivid
   with its tag + legend row, the rest are muted. Inert until aware.js adds .is-revealing, so no-JS
   and every other course still render the full annotated address exactly as before. */
.url-illus.is-revealing .url-part { opacity: .3; transition: opacity .22s ease; }
.url-illus.is-revealing .url-part .url-tag { opacity: 0; transition: opacity .22s ease; }
.url-illus.is-revealing .url-part.is-current { opacity: 1; }
.url-illus.is-revealing .url-part.is-current .url-tag { opacity: 1; }
.url-legend.is-revealing .url-legend__row { opacity: .4; transition: opacity .22s ease; }
.url-legend.is-revealing .url-legend__row.is-current { opacity: 1; background: var(--c-surface-2);
    border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
    .url-illus.is-revealing .url-part, .url-illus.is-revealing .url-part .url-tag,
    .url-legend.is-revealing .url-legend__row { transition: none; }
}

/* Browser address-bar mockup — teaches "look for the padlock" (https) vs a warning (http). */
.addr-bar { display: flex; align-items: center; gap: var(--s-3); max-width: 30rem; margin: 0 auto var(--s-4);
    padding: var(--s-3) var(--s-5); background: var(--c-surface); border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-full); box-shadow: var(--sh-1); }
.addr-bar__icon { font-size: 1.05rem; flex: none; }
.addr-bar__url { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-bar--secure { border-color: var(--c-success); }
.addr-bar--insecure { border-color: var(--c-warn); }
.addr-bar--insecure .addr-bar__url { color: var(--c-warn); }

/* Glossary term — a jargon acronym (MFA/2FA) with a plain-language tooltip on hover/focus/tap.
   CSS-only so it works under the strict CSP; focus/focus-within make it keyboard- and touch-usable. */
.term { position: relative; border-bottom: 1.5px dotted var(--c-primary); cursor: help; }
.term__def { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30; width: max-content; max-width: min(19rem, 78vw);
    padding: var(--s-3) var(--s-4); background: var(--c-primary); color: var(--c-primary-ink); border-radius: var(--r-md);
    font-family: var(--font-body); font-size: var(--t-sm); font-weight: var(--fw-regular, 400); line-height: 1.4; text-align: left;
    box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px);
    transition: opacity .12s ease, transform .12s ease; }
.term__def::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--c-primary); }
.term:hover .term__def, .term:focus .term__def, .term:focus-within .term__def { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .term__def { transition: none; } }
/* On a phone the centred popup hangs past the viewport whenever the term sits in
   the right half of a line — it widened the page by ~30px (a permanent sideways
   scroll, even while hidden) and half the definition was unreachable. Below 560px
   the definition opens as a block under the word instead, and takes no layout
   space at all while closed. */
@media (max-width: 560px) {
    .term__def { position: static; display: none; width: auto; max-width: 100%; margin-top: var(--s-2);
        transform: none; }
    .term__def::after { display: none; }
    .term:hover .term__def, .term:focus .term__def, .term:focus-within .term__def { display: block; transform: none; }
}

/* E-mail header mock-up — the display name is friendly, the real address betrays it. */
.email-mock { max-width: 32rem; margin: 0 auto var(--s-4); background: var(--c-surface); border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.email-mock__row { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.email-mock__row + .email-mock__row { border-top: 1px solid var(--c-border); }
.email-mock__key { flex: none; width: 3.2rem; color: var(--c-ink-mute); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .04em; }
.email-mock__from { color: var(--c-ink); min-width: 0; }
.email-mock__addr { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--c-warn); overflow-wrap: anywhere; }
.email-mock__subject { color: var(--c-ink); font-weight: var(--fw-medium); }

/* Animated spoofed login window (::loginzoom) — the page looks real; the address bar is the tell.
   Pure CSS: the URL bar "zooms" as the page dims, and the real (look-alike) domain flashes. */
.spoofwin { max-width: 30rem; margin: 0 auto var(--s-4); }
.spoofwin__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s-2);
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md) var(--r-md) 0 0;
    padding: var(--s-2) var(--s-3); transform-origin: 50% 100%; animation: sw-bar 7s ease-in-out infinite; }
.spoofwin__dots { display: inline-flex; gap: 4px; flex: none; }
.spoofwin__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-border-strong); }
.spoofwin__addr { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--s-1);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: 3px var(--s-2); }
.spoofwin__lock { flex: none; font-size: var(--t-xs); }
/* The pan distance is derived from the URL's OWN width (translate percentages
   resolve against the element), so it always ends with the last --sw-keep of the
   string in view — i.e. the payload domain — no matter how long the translated
   URL is. A fixed rem pan only ever fit the Danish string; German/Finnish domains
   stayed off-screen, which is precisely the part the slide teaches you to read.
   min(0px, …) keeps a short URL from panning the wrong way. */
.spoofwin__url { font-family: var(--font-mono); font-size: var(--t-xs); white-space: nowrap; flex: none;
    --sw-keep: 24rem; --sw-pan: min(0px, calc(-100% + var(--sw-keep)));
    animation: sw-url 7s ease-in-out infinite; }
.spoofwin__u-dim { color: var(--c-ink-mute); }
.spoofwin__u-sub { color: var(--c-ink-soft); }
.spoofwin__dom { border-radius: var(--r-sm); padding: 0 2px; color: var(--c-ink); animation: sw-dom 7s ease-in-out infinite; }
.spoofwin__page { display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    background: var(--c-surface); border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md);
    padding: var(--s-5) var(--s-5) var(--s-4); animation: sw-page 7s ease-in-out infinite; }
.spoofwin__logo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 22px; height: 22px; }
.spoofwin__logo i { display: block; }
.spoofwin__logo i:nth-child(1) { background: #f25022; } .spoofwin__logo i:nth-child(2) { background: #7fba00; }
.spoofwin__logo i:nth-child(3) { background: #00a4ef; } .spoofwin__logo i:nth-child(4) { background: #ffb900; }
.spoofwin__brand { font-weight: var(--fw-bold); color: var(--c-ink); }
.spoofwin__h { font-size: var(--t-lg); color: var(--c-ink); }
.spoofwin__inp { width: 100%; max-width: 16rem; padding: var(--s-2) 0; border-bottom: 2px solid var(--c-border-strong);
    color: var(--c-ink-mute); font-size: var(--t-sm); }
.spoofwin__btn { align-self: flex-end; background: #0067b8; color: #fff; padding: var(--s-1) var(--s-4);
    border-radius: var(--r-sm); font-size: var(--t-sm); }
.spoofwin__cap { position: relative; min-height: 1.7em; margin-top: var(--s-3); text-align: center; }
.spoofwin__cap-ok, .spoofwin__cap-bad { position: absolute; left: 0; right: 0; font-size: var(--t-sm); font-weight: var(--fw-medium); }
.spoofwin__cap-ok { color: var(--c-ink-soft); animation: sw-cap-ok 7s ease-in-out infinite; }
.spoofwin__cap-bad { color: var(--c-warn); animation: sw-cap-bad 7s ease-in-out infinite; }
@keyframes sw-bar { 0%, 22% { transform: scale(1); box-shadow: none; } 34%, 88% { transform: scale(1.07); box-shadow: var(--sh-1); } 100% { transform: scale(1); box-shadow: none; } }
@keyframes sw-page { 0%, 24% { opacity: 1; filter: none; } 36%, 100% { opacity: .4; filter: saturate(.55); } }
@keyframes sw-dom { 0%, 28% { background: transparent; box-shadow: none; color: var(--c-ink); } 42%, 86% { background: var(--c-warn-tint); box-shadow: 0 0 0 2px var(--c-warn); color: var(--c-warn); } 100% { background: transparent; box-shadow: none; color: var(--c-ink); } }
@keyframes sw-cap-ok { 0%, 26% { opacity: 1; } 34%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sw-cap-bad { 0%, 30% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* Pan the URL left during the zoom so the (clipped) real domain scrolls into view. */
@keyframes sw-url { 0%, 30% { transform: translateX(0); } 44%, 86% { transform: translateX(var(--sw-pan, -7rem)); } 100% { transform: translateX(0); } }
@media (max-width: 560px) {
    .spoofwin__url { --sw-keep: 13rem; }   /* narrower address bar shows less of the URL at once */
    .spoofwin__cap { min-height: 3.4em; }  /* the warning caption wraps to two lines on narrow screens */
}
@media (prefers-reduced-motion: reduce) {
    .spoofwin__bar, .spoofwin__page, .spoofwin__dom, .spoofwin__cap-ok, .spoofwin__cap-bad, .spoofwin__url { animation: none; }
    .spoofwin__url { transform: translateX(var(--sw-pan, -7rem)); }   /* domain visible statically */
    .spoofwin__dom { background: var(--c-warn-tint); box-shadow: 0 0 0 2px var(--c-warn); color: var(--c-warn); }
    .spoofwin__cap-ok { opacity: 0; }
    .spoofwin__cap-bad { opacity: 1; }
}

/* Incoming-call mock-up (vishing) — name + number look legit but are spoofable; the ask is the tell. */
.call-mock { max-width: 24rem; margin: 0 auto var(--s-4); background: var(--c-surface); border: 1.5px solid var(--c-border-strong);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-5) var(--s-4); text-align: center; }
.call-mock__head { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-3); }
.call-mock__name { font-size: var(--t-xl); font-weight: var(--fw-bold); color: var(--c-ink); }
.call-mock__num { font-family: var(--font-mono); color: var(--c-ink-soft); margin-top: var(--s-1); }
.call-mock__ask { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-border); color: var(--c-warn); font-style: italic; }

/* Quishing illustration — a (decorative, non-scannable) QR code resolves to a URL; teaches that you
   can't read a QR code's destination with your eyes and it can hide a look-alike domain. */
.qr-illus { display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--s-5); margin-bottom: var(--s-3); }
.qr-illus__code { color: var(--c-ink); line-height: 0; flex: none; background: #fff;
    padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.qr-illus__code svg { width: 104px; height: 104px; display: block; }
.qr-illus__arrow { flex: none; font-size: var(--t-2xl); color: var(--c-ink-mute); transform: rotate(90deg); }
.qr-illus__dest { display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    max-width: 100%; text-align: center; }
.qr-illus__label { font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-ink-mute);
    text-transform: uppercase; letter-spacing: .04em; }
.qr-illus__url { font-family: var(--font-mono); font-size: var(--t-lg); word-break: break-all; }
.qr-seg--mute { color: var(--c-ink-mute); }
.qr-seg--dom  { color: var(--c-link); font-weight: var(--fw-bold); }

/* ── Nano-player (learner lesson) — a Nimblr-style click-through deck ────────
   Progressive enhancement: without JS the slides are a normal scroll page and the
   form submits as before; aware.js adds .nano--active for one-slide-at-a-time. */
.nano { max-width: 48rem; margin-inline: auto;
    /* Bigger, more readable course content (phk, +~20%): overriding the type tokens HERE scales both
       the prose AND the token-driven illustrations (url/bar/email) across every lesson in one place. */
    --t-xs: 0.9rem; --t-sm: 1.05rem; --t-base: 1.2rem; --t-lg: 1.35rem; --t-xl: 1.65rem; --t-2xl: 2.1rem; --t-3xl: 2.7rem;
    font-size: var(--t-base); }
/* Phone portrait: the +20% bump is too large on a narrow screen — scale the nano type tokens
   back down (prose + illustrations follow, since they read these tokens). */
@media (max-width: 560px) {
    .nano { --t-xs: 0.82rem; --t-sm: 0.95rem; --t-base: 1.05rem; --t-lg: 1.2rem; --t-xl: 1.4rem; --t-2xl: 1.65rem; --t-3xl: 2rem; }
}
.nano__top { display: none; }
.nano--active .nano__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.nano__back { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2);
    background: none; border: 0; color: var(--c-ink-mute); font: inherit; font-size: var(--t-sm); cursor: pointer; border-radius: var(--r-sm); }
.nano__back:hover { color: var(--c-ink); background: var(--c-surface-2); }
.nano__back[hidden] { display: none; }
.nano__progress { flex: 1; height: 6px; background: var(--c-border); border-radius: var(--r-full); overflow: hidden; }
.nano__bar { display: block; height: 100%; width: 0; background: var(--c-accent); border-radius: var(--r-full); transition: width .25s ease; }

/* Collapsed to just the intro by default → no flash of all slides stacked before the deferred
   aware.js runs. A <noscript> stylesheet re-opens every slide so no-JS users still get the full
   scroll page. Once aware.js adds .nano--active, it manages which slide is current. */
.nano-slide { display: none; border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-4); }
.nano-slide--intro { display: block; }
.nano--active .nano-slide { display: none; margin-bottom: 0; }
.nano--active .nano-slide.is-current { display: block; animation: nano-in .25s ease; }
@keyframes nano-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nano--active .nano-slide.is-current { animation: none; } }

.nano-slide--intro, .nano-slide--done { background: var(--c-accent-tint); text-align: center; }
.nano-slide--intro .nano-slide__inner, .nano-slide--done .nano-slide__inner { max-width: 34rem; margin-inline: auto; }
.nano-slide--concept { background: var(--c-surface-2); }
/* Quiz slides read as a distinct "your turn" zone, not more reading. */
.nano-slide--quiz { background: var(--c-primary-tint); border-left: 4px solid var(--c-link); }
/* Profiling slide = a "meta" moment (pale amber), visually separate from the graded quiz. */
.nano-slide--profile { background: var(--c-warn-tint); border-left: 4px solid var(--c-warn); }
.nano-slide--profile .job-chips { margin-top: var(--s-4); }
.nano-slide h1 { margin: var(--s-2) 0; }
.nano-mascot { display: inline-block; margin-bottom: var(--s-2); }
.nano-greeting { color: var(--c-ink-soft); font-weight: var(--fw-medium); margin-top: var(--s-2); }
.nano-lead { color: var(--c-ink-soft); margin: var(--s-3) 0 var(--s-5); }
.nano-q { margin: var(--s-2) 0 var(--s-5); }
/* Concept-slide heading — so the learner intuitively knows what each slide is about. */
.nano-slide__h { margin: 0 0 var(--s-4); }
.prompt__h { margin: 0 0 var(--s-3); }
/* A callout whose label is shown as the slide heading → body-only, colour accent kept as the left border. */
.callout--bare .callout__body { color: var(--c-ink); font-size: 1rem; }

.nano-cta, .nano-next { display: none; margin-top: var(--s-5); }
.nano--active .nano-cta { display: inline-flex; }
.nano--active .nano-next:not([hidden]) { display: inline-flex; }

.nano-answers { display: flex; flex-direction: column; gap: var(--s-3); }
.nano-answer { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.5rem; padding: var(--s-3) var(--s-5);
    background: var(--c-surface); border: 2px solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-ink); font-weight: var(--fw-medium); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.nano-answer:hover { border-color: var(--c-link); }
.nano-answer:has(input:checked) { border-color: var(--c-link); }
.nano-answer.is-correct { background: var(--c-success-tint); border-color: var(--c-success); color: var(--c-success); animation: nano-pop .32s ease; }
.nano-answer.is-wrong { background: var(--c-danger-tint); border-color: var(--c-danger); color: var(--c-danger); animation: nano-shake .3s ease; }
@keyframes nano-pop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes nano-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .nano-answer.is-correct, .nano-answer.is-wrong { animation: none; } }

/* Public preview end slide — why an account is worth it + back-to-courses. */
.deck-perks { text-align: left; max-width: 26rem; margin: var(--s-5) auto var(--s-2); }
.deck-perks__h { font-weight: var(--fw-bold); margin-bottom: var(--s-3); }
.deck-perks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.deck-perks li { position: relative; padding-left: var(--s-6); color: var(--c-ink-soft); }
.deck-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: var(--fw-bold); }
.deck-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.nano-secondary { color: var(--c-ink-mute); font-size: var(--t-sm); text-decoration: underline; }
.nano-secondary:hover { color: var(--c-ink); }

/* Optional course rating — 1–5 stars (CSS-only fill via row-reverse + ~) + free-text comment. */
.rating { border: 0; padding: 0; margin: var(--s-5) auto var(--s-2); max-width: 26rem; }
.rating__legend { font-weight: var(--fw-medium); color: var(--c-ink-soft); margin-bottom: var(--s-2); }
.rating__stars { display: inline-flex; flex-direction: row-reverse; justify-content: center; }
.rating__stars label { font-size: 2rem; line-height: 1; color: var(--c-border-strong); cursor: pointer; padding: 0 .1rem; transition: color .1s ease; }
.rating__stars input:checked ~ label,
.rating__stars label:hover,
.rating__stars label:hover ~ label { color: #F2B01E; }
.rating__stars input:focus-visible + label { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }
/* Job-relevance micro-question — pill options, CSS-only selected state via adjacent-sibling. */
.rating__relevance { margin-top: var(--s-4); }
.rating__relevance-q { display: block; font-size: .85rem; color: var(--c-ink-soft); margin-bottom: var(--s-2); }
.rating__relevance-opts { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
.rating__relevance-opt { display: inline-block; padding: var(--s-1) var(--s-3); border: 1px solid var(--c-border-strong);
    border-radius: var(--r-full); color: var(--c-ink-soft); cursor: pointer; font-size: .85rem; transition: background .1s ease, color .1s ease, border-color .1s ease; }
.rating__relevance-opt:hover { border-color: var(--c-primary); }
.rating__relevance input:checked + .rating__relevance-opt { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.rating__relevance input:focus-visible + .rating__relevance-opt { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.rating__comment { display: block; width: 100%; margin-top: var(--s-3); padding: var(--s-3); resize: vertical;
    border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font: inherit; }
.rating__comment:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }

.nano-feedback { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: var(--fw-bold); }
.nano-feedback--ok { color: var(--c-success); }
/* :not([hidden]) so the explicit display doesn't override the hidden attribute before answering. */
.nano-feedback--ok:not([hidden]) { display: inline-flex; align-items: center; gap: var(--s-2); animation: nano-pop .32s ease; }
.nano-feedback--no { color: var(--c-danger); }

/* Onboarding role profiling — "which of these are part of your job?" chips + dashboard prompt. */
.job-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); border: 0; padding: 0; margin: 0; }
.job-chip { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer;
    background: var(--c-surface); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); font-size: var(--t-sm); }
.job-chip:hover { border-color: var(--c-link); }
.job-chip input { accent-color: var(--c-link); width: 1.1rem; height: 1.1rem; flex: none; }
.job-chip:has(input:checked) { border-color: var(--c-success); background: var(--c-success-tint); }
.job-chip__icon { font-size: 1.1rem; }
.personalize-prompt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    background: var(--c-accent-tint); border-color: var(--c-border-strong); }
@media (max-width: 560px) { .job-chips { grid-template-columns: 1fr; } .personalize-prompt { flex-direction: column; align-items: flex-start; } }

/* ── Chart (click-rate trend) ─────────────────────────────────────────────────
   Server-rendered SVG under a strict CSP: every colour is a class, never an
   inline style. The data hue is its own token rather than the ink colour — text
   wears text tokens, marks wear the series colour. Both steps validated against
   their own surface (light #0D8A76 / dark #0FA391), not flipped automatically. */
:root {
    --c-data:        #0D8A76;   /* series hue — passes lightness, chroma and 3:1 on cream */
    --c-chart-grid:  #E2DDCE;   /* one step off surface, recessive */
}
.chart { margin: 0; }
.chart__svg { display: block; width: 100%; height: auto; }
.chart__grid { stroke: var(--c-chart-grid); stroke-width: 1; }
.chart__benchmark { stroke: var(--c-ink-mute); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__benchmark-label { fill: var(--c-ink-mute); font-size: 11px; }
.chart__tick { fill: var(--c-ink-mute); font-size: 11px; }
.chart__line { stroke: var(--c-data); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 2px surface ring so a dot stays legible where it crosses the line or a gridline */
.chart__dot { fill: var(--c-data); stroke: var(--c-surface); stroke-width: 2; }
.chart__value { fill: var(--c-ink); font-size: 12px; font-weight: 600; }

:root[data-theme="dark"] {
    --c-data:       #0FA391;
    --c-chart-grid: #2A332E;
}

/* Inline explainer disclosure — a click/keyboard-reachable alternative to a hover tooltip
   (title= is invisible on touch and unreliable with screen readers). */
.hint { margin-top: var(--s-3); }
.hint > summary { color: var(--c-ink-mute); cursor: pointer; width: fit-content; }
.hint > summary:hover { color: var(--c-ink); }
.hint__body { margin-top: var(--s-2); max-width: 70ch; padding-left: var(--s-4);
    border-left: 3px solid var(--c-border-strong); }
.hint__body ul { margin: 0; padding-left: var(--s-4); }
.hint__body li { margin-bottom: var(--s-2); }

/* ── Clickable stat tile ──────────────────────────────────────────────────────
   A whole card is a far bigger target than four words of link text — easier to
   hit with a mouse, and much easier on a touch screen. The link stays a real <a>
   (so it is announced, focusable and openable in a new tab); its ::after simply
   stretches the hit area over the card. */
.stat--link { position: relative; transition: border-color .12s ease, transform .12s ease; }
.stat--link:hover { border-color: var(--c-border-strong); transform: translateY(-1px); }
.stat--link .stat__go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
/* Keyboard users must see the same affordance the mouse gets. */
.stat--link:focus-within { border-color: var(--c-ink); outline: 2px solid var(--c-ink); outline-offset: 2px; }
.stat--link .stat__go:focus { outline: none; }
.stat--link .stat__go { color: var(--c-ink-mute); }
.stat--link:hover .stat__go { color: var(--c-ink); }

/* Planlagte simuleringer på admin-dashboardet: hvad kommer, hvornår, og en vej til
   at udskyde eller aflyse. Ingen inline style — den stramme CSP tillader det ikke. */
.wave { border-top: 1px solid var(--c-border); padding-top: var(--s-4); }
.wave__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0 var(--s-3); }
.wave__meta dt { font-weight: 500; }
.wave__meta dd { margin: 0; }
.wave__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.wave__postpone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
.wave__postpone .field__input { width: auto; }
@media (max-width: 640px) {
  .wave__actions, .wave__postpone { flex-direction: column; align-items: stretch; }
}

/* Rolle-vaelger: vaelger + knap paa samme linje, forklaringerne under. Feltet vokser ikke
   ud i fuld bredde — rollenavnene er korte, og en kaempe select ville laane handlingen en
   vaegt den ikke har. Forklaringerne er en <dl>, saa navn og betydning haenger sammen
   ogsaa for en skaermlaeser. */
.role-picker__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.role-picker__row .field { margin: 0; }
.role-picker__row .field__select { width: auto; min-width: 14rem; }
.role-help { margin: var(--s-3) 0 0; font-size: var(--t-sm); }
.role-help dt { font-weight: 500; }
.role-help dd { margin: 0 0 var(--s-2); color: var(--c-ink-soft); }
.role-help dd:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .role-picker__row { flex-direction: column; align-items: stretch; }
  .role-picker__row .field__select { width: 100%; }
}

/* ── Admin-dashboard: "sådan står I" først, tal bagefter ─────────────────────────
   Handoff-designet (option 1a) i husets egne tokens frem for prototypens raa hex,
   saa dark mode og resten af systemet foelger med af sig selv. */
.page-head--split { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.dash-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-5); }
.dash-kpis { display: grid; gap: var(--s-5); align-content: start; }

.dash-standing { display: flex; flex-direction: column; gap: var(--s-4); }
.dash-standing__eyebrow { font-size: var(--t-xs); font-weight: var(--fw-bold); letter-spacing: .07em;
    text-transform: uppercase; color: var(--c-ink-mute); }
.dash-standing__row { display: flex; gap: var(--s-5); align-items: flex-start; }
.dash-standing__text { flex: 1; }
.dash-standing__title { font-size: var(--t-xl); line-height: 1.3; margin: 0; }
.dash-standing__body { font-size: var(--t-sm); line-height: 1.55; color: var(--c-ink-soft); margin-top: var(--s-2); }
/* Maskotten er dekoration af et tal, ikke indhold: den maa forsvinde foer teksten goer. */
.dash-standing__mascot { flex: none; line-height: 0; }
.dash-standing__links { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Gradienten viser hele skalaen bag tallet: grøn → gul → rød, fyldt til scoren. */
.gauge-bar--spectrum .gauge-bar__fill {
    background: linear-gradient(90deg, var(--c-risk-low), var(--c-warn), var(--c-risk-high));
}

.dash-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.stat--sm { padding: var(--s-4); }
.stat--sm .stat__value { font-size: var(--t-2xl); margin-top: 0; }
.stat--sm .stat__label { margin-top: var(--s-1); }

/* Samme kolonne-ratio som .dash-hero (1.5fr 1fr), så højre-kolonnen flugter lodret med
   risikoscore-kortet ovenover. align-items:stretch → begge kort får samme højde (intet dødt
   tomrum under det korte). margin-top:0 nulstiller chart-kortets mt-6 så toppene flugter.
   dash-empty centreres lodret så det korte kort fylder pænt op. */
.dash-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: stretch; }
.dash-split > .card { margin-top: 0; display: flex; flex-direction: column; }
.dash-split .dash-empty { margin-block: auto; }

.dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--s-3); padding: var(--s-5) 0 var(--s-2); }
.dash-empty__mascot { line-height: 0; opacity: .75; }
.dash-empty p { max-width: 28rem; }

@media (max-width: 900px) {
  .dash-hero, .dash-split { grid-template-columns: 1fr; }
  .dash-counts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .dash-counts { grid-template-columns: 1fr; }
  .dash-standing__mascot { display: none; }
}

/* Links i tabeller SKAL ligne links. --c-link er den samme skovgroenne som broedtekst, og
   uden understregning saa et klikbart medarbejdernavn ud som ren tekst — funktionen fandtes
   (og gjorde det hele tiden), men ingen kunne se den. Understregningen er daempet, saa en
   tabel med mange navne ikke bliver stribet. */
.table tbody a { text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
.table tbody a:hover { text-decoration-color: currentColor; }

/* En raekke der peger et sted hen, skal foeles klikbar i hele sin bredde (aware.js tager
   museklikket; navnet er stadig et rigtigt link for tastatur og skaermlaeser). */
.table tbody tr[data-row-href] { cursor: pointer; }
.table tbody tr[data-row-href]:focus-within { background: var(--c-surface-2); }

/* ── Learner-dashboard: makker-dashboardet ───────────────────────────────────────
   Handoff-designet (option 1a) i husets egne tokens frem for prototypens raa hex,
   saa dark mode og resten af systemet foelger med af sig selv. Hero-fladen er den
   moerke primary (som katalog-heroen); hvide rgba-nuancer er "blaek paa moerk
   flade" og foelger samme praksis som .catalog-hero__desc. */
.learn-hero { display: flex; gap: var(--s-6); align-items: flex-start;
    background: var(--c-primary); color: var(--c-primary-ink);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-8); box-shadow: var(--sh-1); }
/* Maskotten er makker, ikke indhold: den maa forsvinde foer teksten goer. */
.learn-hero__mascot { flex: none; line-height: 0; margin-top: var(--s-1); }
.learn-hero__text { flex: 1; min-width: 0; }
.learn-hero__title { color: var(--c-primary-ink); font-size: var(--t-2xl); margin: 0; }
.learn-hero__body { color: rgba(255, 255, 255, .78); font-size: var(--t-sm); line-height: 1.55;
    max-width: 33rem; margin-top: var(--s-2); }
.learn-hero__body strong { color: var(--c-accent); }
.learn-hero__note { color: rgba(255, 255, 255, .66); font-size: var(--t-xs); margin-top: var(--s-3); max-width: 33rem; }

.learn-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.learn-chip { background: rgba(255, 255, 255, .08); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.learn-chip__value { font-size: var(--t-xl); font-weight: var(--fw-bold); line-height: 1.1; color: var(--c-primary-ink); }
.learn-chip__value--accent { color: var(--c-accent); }
.learn-chip__den { font-size: var(--t-xs); font-weight: var(--fw-normal); color: rgba(255, 255, 255, .55); }
/* Niveau-pillen staar paa den moerke flade i BEGGE temaer — lys pille, konstant moerkt blaek
   (--c-accent-ink er defineret som netop det: blaek paa en flade der ikke skifter med temaet). */
.learn-chip__badge { display: inline-block; font-size: var(--t-xs); font-weight: var(--fw-bold);
    background: rgba(255, 255, 255, .88); color: var(--c-accent-ink);
    border-radius: var(--r-full); padding: 0 var(--s-2); vertical-align: 3px; }
.learn-chip__label { font-size: var(--t-xs); color: rgba(255, 255, 255, .62); margin-top: var(--s-1); }

.learn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
.card__eyebrow { display: block; font-size: var(--t-xs); font-weight: var(--fw-bold);
    letter-spacing: .07em; text-transform: uppercase; color: var(--c-success); }
.card__eyebrow--flag { color: var(--c-warn); }
.learn-card__h { margin: var(--s-2) 0 0; }
.learn-card__p { color: var(--c-ink-soft); font-size: var(--t-sm); line-height: 1.55; margin-top: var(--s-2); }
.learn-card__foot { color: var(--c-ink-mute); font-size: var(--t-xs); margin-top: var(--s-4); }
.learn-card__foot strong, .learn-card__foot a { color: var(--c-ink); }
.learn-progress { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.learn-progress .gauge-bar { flex: 1; margin-top: 0; }
.gauge-bar__fill--accent { background: var(--c-accent); }
.learn-progress__label { flex: none; font-size: var(--t-xs); color: var(--c-ink-mute); }

/* Kursuslisten: hele raekken er maalet — navnet, ikonet og pillen er ét link. */
.course-list { padding: 0; overflow: hidden; }
.course-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); color: inherit; }
.course-row + .course-row { border-top: 1px solid var(--c-border); }
a.course-row:hover { background: var(--c-bg); }
.course-row__mascot { flex: none; line-height: 0; }
.course-row__mascot--dim { opacity: .45; }
.course-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.course-row__name { font-weight: var(--fw-bold); }
.course-row__meta { font-size: var(--t-xs); color: var(--c-ink-mute); }
.course-row__go { flex: none; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-link);
    text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
a.course-row:hover .course-row__go { text-decoration-color: currentColor; }
/* Status-pillen maa aldrig ombrydes (handoff-krav) — "Gennemført ✓" som to linjer ser i stykker ud. */
.course-row__pill { flex: none; white-space: nowrap; }
.learn-catalog-note { font-size: var(--t-sm); color: var(--c-ink-mute); margin-top: var(--s-3); }
.learn-catalog-note a { font-weight: var(--fw-bold); color: var(--c-ink); }

@media (max-width: 720px) {
  .learn-hero { flex-direction: column; padding: var(--s-5); }
  .learn-duo { grid-template-columns: 1fr; }
  .course-row { flex-wrap: wrap; }
  .course-row__text { flex-basis: 60%; }
}

/* ── Brugere: risiko-først (handoff option 2a) ──────────────────────────────────
   Handoff-designet i husets egne tokens frem for prototypens raa hex, saa dark
   mode og resten af systemet foelger med af sig selv. Ingen inline style= — den
   stramme CSP tillader det ikke; bar-fyld saettes af aware.js via data-fill-width. */
.people-toolbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; align-items: center; }
.people-toolbar__search { flex: 1; min-width: 14rem; display: flex; align-items: center; gap: var(--s-2);
    background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
    padding: var(--s-2) var(--s-4); color: var(--c-ink-mute); }
.people-toolbar__search:focus-within { border-color: var(--c-link); box-shadow: var(--focus); }
.people-toolbar__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--t-sm);
    color: var(--c-ink); padding: 0; }
.people-toolbar__input:focus { outline: none; box-shadow: none; }
.people-toolbar__select { font: inherit; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-ink);
    background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-full);
    padding: var(--s-2) var(--s-3); max-width: 16rem; }
.people-toolbar__select:focus { border-color: var(--c-link); box-shadow: var(--focus); outline: none; }

.people-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    flex-wrap: wrap; margin: var(--s-6) 0 var(--s-3); }
.people-sechead__h { font-size: var(--t-lg); margin: 0; }
.people-sechead__count { font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--c-ink-mute);
    vertical-align: 2px; margin-left: var(--s-1); }
.people-sechead__bulk { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-ink); }

.people-list { padding: 0; overflow: hidden; }
.person { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); font-size: var(--t-sm); }
.person + .person { border-top: 1px solid var(--c-border); }
.person--compact { padding: var(--s-3) var(--s-5); }
.person[data-row-href] { cursor: pointer; }
.person[data-row-href]:hover, .person[data-row-href]:focus-within { background: var(--c-bg); }
.person__check { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--c-primary); }
.person__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person__text--line { flex-direction: row; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.person__name { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.person__meta { font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--c-ink-mute); }
.person__why, .person__whyshort { font-size: var(--t-xs); color: var(--c-ink-mute); }
/* Aarsagslinjen samles af fragmenter (sim + traening) som flere sprog oversaetter med lille
   begyndelsesbogstav — saetningsstart haandteres ét sted, for alle 19 sprog. */
.person__why { display: block; }
.person__why::first-letter { text-transform: uppercase; }
.person__act { flex: none; font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-link);
    text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; white-space: nowrap; }
.person__act:hover { text-decoration-color: currentColor; }
.person__pill { flex: none; white-space: nowrap; }
/* Links i person-listerne foelger tabel-reglen: et klikbart navn skal LIGNE et link. */
.people-list a { text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
.people-list a:hover { text-decoration-color: currentColor; }
.people-none { color: var(--c-ink-mute); font-size: var(--t-sm); justify-content: center; }

/* Initial-avatar: deterministisk tone pr. person, alle par har en dark mode-variant. */
.ava { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    font-size: var(--t-xs); font-weight: var(--fw-bold); letter-spacing: .02em; user-select: none; }
.ava--sm { width: 1.75rem; height: 1.75rem; font-size: .65rem; }
.ava--1 { background: var(--c-primary-tint); color: var(--c-link); }
.ava--2 { background: var(--c-success-tint); color: var(--c-success); }
.ava--3 { background: var(--c-warn-tint); color: var(--c-warn); }
.ava--4 { background: var(--c-danger-tint); color: var(--c-danger); }
.ava--5 { background: var(--c-surface-2); color: var(--c-ink-soft); }

/* Score-pillen i opmaerksomheds-listen: massiv, fordi den ER sektionens paastand. */
.risk-pill { flex: none; font-size: var(--t-xs); font-weight: var(--fw-bold); color: #fff;
    background: var(--c-danger); border-radius: var(--r-full); padding: 3px var(--s-3); white-space: nowrap; }
.risk-pill__flag { font-weight: var(--fw-normal); }
.risk-flag { color: var(--c-lowtrust); font-weight: var(--fw-normal); }

/* Kompakt risiko-celle: tal + mini-bar i samme groen→gul→roed semantik som resten. */
.person__risk { flex: none; width: 8.5rem; display: flex; align-items: center; gap: var(--s-2); }
.person__score { font-size: var(--t-xs); font-weight: var(--fw-bold); min-width: 1.9rem; }
/* Bar og fyld er spans (gyldigt inde i et <a>-frit listepunkt) — inline-elementer
   ignorerer width/height, saa begge tvinges til block; ellers render baren tom. */
.person__bar { flex: 1; height: 5px; margin-top: 0; display: block; }
.person__bar .gauge-bar__fill { display: block; }
.text-risk-high { color: var(--c-risk-high); }
.gauge-bar__fill--low { background: var(--c-risk-low); }
.gauge-bar__fill--mid { background: var(--c-risk-mid); }
.gauge-bar__fill--high { background: var(--c-risk-high); }

/* Bulk-baren i bunden af kortet: rapporten foerst, haandtaget bagefter. */
.people-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.people-foot__hint { font-size: var(--t-xs); color: var(--c-ink-mute); margin: 0; max-width: 40rem; }

.people-legend { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4);
    font-size: var(--t-xs); color: var(--c-ink-mute); }

@media (max-width: 720px) {
  .people-toolbar { flex-direction: column; align-items: stretch; }
  .people-toolbar__search { min-width: 0; }
  .person { flex-wrap: wrap; row-gap: var(--s-2); }
  .person__text { flex-basis: 55%; }
  .person__risk { width: 7rem; }
  .people-foot { flex-direction: column; align-items: flex-start; }
}

/* Solid roed pille: dark-tokenens --c-danger er en lys laksefarve — hvid tekst vil ikke
   kunne laeses paa den, saa blaekket flipper til den moerke tint. */
:root[data-theme="dark"] .risk-pill { background: var(--c-danger); color: #361713; }

/* ── Brugerdetalje: dom + aarsager (handoff option 1a) ──────────────────────────
   Handoff-designet i husets egne tokens frem for prototypens raa hex, saa dark
   mode foelger med af sig selv. Verdict-banneret svarer foerst, aarsagskortene
   baerer hvorfor, og udregning/historik ligger foldet bag <details> i bunden. */
.person-head { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.person-head__meta { font-size: var(--t-xs); color: var(--c-ink-mute); overflow-wrap: anywhere; }
.ava--lg { width: 3.25rem; height: 3.25rem; font-size: var(--t-base); }

.verdict { display: flex; align-items: center; gap: var(--s-5); border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-6); border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--sh-1); }
.verdict--high { background: var(--c-danger-tint); border-color: color-mix(in srgb, var(--c-danger) 22%, transparent); }
.verdict--mid { background: var(--c-warn-tint); border-color: var(--c-lowtrust-border); }
.verdict--low { background: var(--c-success-tint); border-color: color-mix(in srgb, var(--c-success) 25%, transparent); }
.verdict__scorebox { flex: none; text-align: center; padding-right: var(--s-5); border-right: 1px solid var(--c-border-strong); }
.verdict__num { display: block; font-size: var(--t-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1; }
.verdict--high .verdict__num, .verdict--high .verdict__label { color: var(--c-risk-high); }
.verdict--mid .verdict__num, .verdict--mid .verdict__label { color: var(--c-risk-mid); }
.verdict--low .verdict__num, .verdict--low .verdict__label { color: var(--c-risk-low); }
.verdict--none .verdict__num { color: var(--c-ink-mute); }
.verdict__den { display: block; font-size: var(--t-xs); color: var(--c-ink-mute); margin-top: var(--s-1); }
.verdict__text { flex: 1; min-width: 0; }
.verdict__label { margin: 0; font-weight: var(--fw-bold); }
.verdict__why { margin: var(--s-1) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--c-ink-soft); max-width: 44rem; }
.verdict__calc { flex: none; font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-ink); white-space: nowrap; }

.section-h2 { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-3); }
.section-h2__stats { font-size: var(--t-xs); font-weight: var(--fw-medium); color: var(--c-ink-mute); }
.section-h2__stats.text-danger { color: var(--c-danger); }
.section-h2__stats.text-success { color: var(--c-success); }

/* Aarsagskortene: antal kort = antal drivere (1–4); grid'et tilpasser sig selv. */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-4); }
.why-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: var(--s-5); box-shadow: var(--sh-1); }
.why-card__eyebrow { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-xs);
    font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.why-card__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.why-card--danger .why-card__eyebrow { color: var(--c-danger); }
.why-card--danger .why-card__dot { background: var(--c-danger); }
.why-card--warn .why-card__eyebrow { color: var(--c-warn); }
.why-card--warn .why-card__dot { background: var(--c-warn); }
.why-card--success .why-card__eyebrow { color: var(--c-success); }
.why-card--success .why-card__dot { background: var(--c-accent); }
.why-card__body { margin: var(--s-3) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--c-ink-soft); }
.why-card__body strong { color: var(--c-ink); }
.why-card__foot { margin: var(--s-3) 0 0; font-size: var(--t-xs); font-weight: var(--fw-bold); }
.why-card__foot a { color: var(--c-ink); }
.why-card__foot--note { font-weight: var(--fw-normal); color: var(--c-ink-mute); }

/* Simuleringslisten: <details name="sims"> er en indbygget eksklusiv accordion —
   én raekke udfoldet ad gangen, helt uden JS. */
.simcard { padding: 0; overflow: hidden; }
.simrow + .simrow, .trow + .trow { border-top: 1px solid var(--c-border); }
.simrow__head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5);
    cursor: pointer; list-style: none; font-size: var(--t-sm); }
.simrow__head::-webkit-details-marker { display: none; }
.simrow__head:hover { background: var(--c-bg); }
.simrow[open] > .simrow__head { background: var(--c-surface-2); }
.simrow__date { flex: none; width: 4.5rem; font-size: var(--t-xs); color: var(--c-ink-mute); }
.simrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.simrow__title { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.simrow__wave { font-size: var(--t-xs); color: var(--c-ink-mute); }
.simrow__pill { flex: none; white-space: nowrap; }
.simrow__toggle { flex: none; font-size: var(--t-xs); font-weight: var(--fw-bold); color: var(--c-ink); white-space: nowrap; }
.simrow[open] .simrow__t-open { display: none; }
.simrow:not([open]) .simrow__t-close { display: none; }
/* "Se simuleringen ↓" skal lande synligt, ikke under topbaren. */
.simrow, .fold { scroll-margin-top: var(--s-8); }
/* Highlight-blink naar et aarsagskort peger herned (aware.js saetter klassen). */
@keyframes unfold-blink { 0%, 60% { background: var(--c-warn-tint); } 100% { background: transparent; } }
.is-unfolded > .simrow__head, details.is-unfolded > summary { animation: unfold-blink 1.2s var(--ease) 1; }

.simrow__detail { display: grid; grid-template-columns: 1fr minmax(16rem, 21rem); gap: var(--s-5);
    padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); border-top: 1px solid var(--c-border); }
.detail-eyebrow { margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: var(--fw-bold);
    letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-mute); }

/* Forloebet: lodret tidslinje — prik + connector i samme groen→gul→roed semantik. */
.simtl { display: flex; flex-direction: column; }
.simtl__step { display: grid; grid-template-columns: 10px 1fr; column-gap: var(--s-3); }
.simtl__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.simtl__dot--ok { background: var(--c-accent); }
.simtl__dot--warn { background: var(--c-warn); }
.simtl__dot--bad { background: var(--c-danger); }
.simtl__dot--good { background: var(--c-success); }
.simtl__dot--missed { background: transparent; border: 2px dashed var(--c-border-strong); box-sizing: border-box; }
.simtl__line { grid-column: 1; justify-self: center; width: 2px; min-height: var(--s-4); background: var(--c-border); }
.simtl__body { grid-column: 2; grid-row: 1 / span 2; padding-bottom: var(--s-3); }
.simtl__what { display: block; font-size: var(--t-sm); font-weight: var(--fw-medium); }
.simtl__what--bad { color: var(--c-danger); }
.simtl__what--missed { color: var(--c-ink-mute); }
.simtl__when { display: block; font-size: var(--t-xs); color: var(--c-ink-mute); }

/* Lokkemailen: tekst-preview af det sendte — aldrig lure-HTML paa en admin-side.
   CTA'en beholder sin fremmede blaa med vilje: det er "angriberens" design, ikke vores
   (samme praksis som MS-login-blaat i illustrationerne — den skifter ikke med temaet). */
.lure { border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden; }
.lure__head { background: var(--c-surface-2); padding: var(--s-3) var(--s-4); }
.lure__subject { margin: 0; font-size: var(--t-xs); font-weight: var(--fw-bold); }
.lure__sender { margin: 2px 0 0; font-size: var(--t-xs); color: var(--c-ink-mute); overflow-wrap: anywhere; }
.lure__body { padding: var(--s-3) var(--s-4); font-size: var(--t-xs); line-height: 1.6; color: var(--c-ink-soft); }
.lure__body p { margin: 0; }
.lure__cta { display: inline-block; margin-top: var(--s-2); background: #2a78d6; color: #fff;
    font-weight: var(--fw-medium); border-radius: 6px; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); }
/* Selve mailen. Hvid baggrund i BEGGE temaer: mailen skal se ud som modtageren saa den,
   ikke som vores tema. Fast hoejde + scroll, fordi sandkassen ikke maa koere script og
   rammen derfor ikke kan maale sit eget indhold — en auto-hoejde ville koste netop den
   isolation der goer visningen forsvarlig. */
.lure__frame { display: block; width: 100%; height: 22rem; border: 0; border-top: 1px solid var(--c-border);
    background: #fff; color-scheme: light; }
.lure__links { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); background: var(--c-surface-2);
    color: var(--c-ink-mute); border-top: 1px solid var(--c-border); }
.lure__host { display: inline-block; margin-left: var(--s-2); font-family: var(--font-mono);
    color: var(--c-ink); overflow-wrap: anywhere; }

/* Traeningsraekker: ét kursus = én raekke med forsoegstaeller. */
.trow { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); font-size: var(--t-sm); }
.trow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trow__name { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.trow__meta { font-size: var(--t-xs); color: var(--c-ink-mute); }
.trow__pill { flex: none; white-space: nowrap; }

/* Solid udfalds-pille (Klikkede/Over fristen): massiv, fordi den ER raekkens paastand. */
.outcome-pill { flex: none; display: inline-flex; align-items: center; font-size: var(--t-xs); font-weight: var(--fw-bold);
    color: #fff; background: var(--c-danger); border-radius: var(--r-full); padding: 2px var(--s-3); white-space: nowrap; }

/* De foldede sektioner i bunden — lukkede som standard; det ER afbusy-ficeringen. */
.folds { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.fold__summary { cursor: pointer; width: fit-content; font-size: var(--t-sm); font-weight: var(--fw-bold);
    color: var(--c-ink); list-style: none; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::after { content: ' ▸'; color: var(--c-ink-mute); }
.fold[open] > .fold__summary::after { content: ' ▾'; }
.fold__body { margin-top: var(--s-3); }

@media (max-width: 720px) {
  .verdict { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .verdict__scorebox { text-align: left; padding-right: 0; border-right: 0; }
  .simrow__head { flex-wrap: wrap; row-gap: var(--s-2); }
  .simrow__text { flex-basis: 100%; order: 1; }
  .simrow__detail { grid-template-columns: 1fr; }
  .person-head { flex-wrap: wrap; }
  .trow { flex-wrap: wrap; row-gap: var(--s-2); }
  /* Kursusnavnet skal ikke klemmes til tre linjer ved siden af pillen — pillen gaar under. */
  .trow__text { flex-basis: 100%; }
}

/* Samme flip som .risk-pill: dark-tokenens --c-danger er lys — moerkt blaek paa den. */
:root[data-theme="dark"] .outcome-pill { color: #361713; }