/* Mockup design tokens — matcher portalens CSS-variabler.
   Inkluderes av alle Extensions-mockups slik at endringer her
   propagerer til alle filene. */

:root {
    --brand: #1e40af;
    --brand-strong: #1e3a8a;
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-300: #93c5fd;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;

    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-faint: #f1f5f9;
    /* Alias-tokens (wired 2026-06-01) — se tokens.css for begrunnelse. */
    --border: var(--line);
    --text-muted: var(--muted);
    --panel: #ffffff;
    --panel-alt: #f8fafc;
    --bg: #f1f5f9;

    --success: #15803d;
    --success-bg: #dcfce7;
    --success-border: #bbf7d0;
    --warn: #b45309;
    --warn-bg: #fef3c7;
    --warn-border: #fcd34d;
    --danger: #b91c1c;
    --danger-bg: #fee2e2;
    --danger-border: #fecaca;
    --neutral-bg: #f1f5f9;
    --neutral-border: #cbd5e1;
}

* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    margin: 0;
    padding: 32px 16px 64px;
    color: var(--text);
    line-height: 1.5;
}
.demo-shell { max-width: 1180px; margin: 0 auto; }
h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.demo-intro { color: var(--muted); font-size: 0.9rem; margin: 0 0 28px; }
.demo-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 32px 0 10px;
    font-weight: 700;
}

/* ── Kort ───────────────────────────────────────────────────────────── */
.card {
    background: var(--panel);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    margin-bottom: 18px;
}
.card-header-gradient {
    background: linear-gradient(135deg, #312e81 0%, #1e40af 100%);
    color: #fff;
    margin: -22px -26px 18px;
    padding: 18px 24px 16px;
    border-radius: 14px 14px 0 0;
    position: relative;
}
.card-header-gradient h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.card-header-gradient .sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    margin-top: 3px;
}
.card-header-gradient-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(255,255,255,0.13);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 4px;
}

/* ── Pill (eyebrow) ─────────────────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    background: var(--brand-50);
    color: var(--brand-strong);
    border: 1px solid var(--brand-100);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Status-piller (Ready/Pending/Failed/Deprecated, Distress) ─────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-pill.ok      { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-pill.ok::before { background: var(--success); }
.status-pill.warn    { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-border); }
.status-pill.warn::before { background: var(--warn); }
.status-pill.danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.status-pill.danger::before { background: var(--danger); }
.status-pill.neutral { background: var(--neutral-bg); color: var(--muted);   border-color: var(--neutral-border); }
.status-pill.neutral::before { background: var(--muted); }
.status-pill.indigo  { background: var(--brand-50);   color: var(--brand-strong); border-color: var(--brand-100); }
.status-pill.indigo::before { background: var(--brand); }

/* ── Knapper ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.3;
    transition: all .12s ease;
}
.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-secondary {
    background: #fff;
    color: var(--text);
    border-color: var(--neutral-border);
}
.btn-secondary:hover { background: var(--panel-alt); border-color: var(--muted); }
.btn-danger-outline {
    background: #fff;
    color: var(--danger);
    border-color: var(--danger-border);
}
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn-ghost {
    background: transparent;
    color: var(--muted);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--panel-alt); color: var(--text); }
.btn-sm { padding: 5px 11px; font-size: 0.78rem; border-radius: 8px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Felles tabell ──────────────────────────────────────────────────── */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.tbl th {
    text-align: left;
    padding: 8px 12px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
    background: var(--panel-alt);
}
.tbl th.r { text-align: right; }
.tbl td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-faint);
    color: var(--text);
    vertical-align: middle;
}
.tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ── Dependency-lenker ───────────────────────────────────────────────── */
.dep-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.dep-link.active   { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.dep-link.inactive { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-border); }
.dep-link.soft     { background: var(--brand-50);   color: var(--brand-strong); border-color: var(--brand-100); }

/* ── Empty/loading-tilstander ─────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--muted);
}
.empty-state .icon { font-size: 2.4em; color: var(--neutral-border); display: block; margin-bottom: 8px; }
.empty-state .title { font-size: 1.05rem; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.empty-state .sub { font-size: 0.88rem; }
.empty-state .cta { margin-top: 16px; }

/* ── Banner (varsel/info) ────────────────────────────────────────────── */
.banner {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid;
    font-size: 0.9rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.banner i.fa-icon { font-size: 1.1em; margin-top: 2px; flex-shrink: 0; }
.banner.info    { background: var(--brand-50);   border-color: var(--brand-100);    color: var(--brand-strong); }
.banner.warn    { background: var(--warn-bg);    border-color: var(--warn-border);  color: var(--warn); }
.banner.danger  { background: var(--danger-bg);  border-color: var(--danger-border);color: var(--danger); }
.banner.success { background: var(--success-bg); border-color: var(--success-border);color: var(--success); }
.banner-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 3px; }

/* ── Tabular forhåndsvisning ────────────────────────────────────────── */
.kbd {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.82em;
    background: var(--panel-alt);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--line);
    color: var(--text);
}

/* ── Mockup-kapsel (sektion) ────────────────────────────────────────── */
.variant-section {
    background: #fff;
    border-radius: 14px;
    padding: 22px 28px 30px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    margin-bottom: 24px;
}
.variant-section h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: var(--text);
}
.variant-meta {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 18px;
}
.fa-icon {
    /* Faux Font Awesome for mockups uten ekte FA — bruker unicode-glyfer */
    display: inline-block;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

/* ── Spacing-utilities (token-justert margin-top) ────────────────────────
   !important: disse erstattet inline style="margin-top:Npx" i CSP-migrasjonen
   (b052c7dc). Inline-stiler vant alltid; en ren klasse (spesifisitet 0,1,0) taper
   mot kontekst-regler som `.card p { margin:0 }` (0,1,1, i base.html inline <style>
   lastet sist) → margin kollapset → knapper klistret mot tekst i kort-paneler.
   !important gjenoppretter inline-ekvivalent vinst. */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

/* ── Tekst-justering (utility) ───────────────────────────────────────── */
.text-right { text-align: right; }
td.text-right, th.text-right { font-variant-numeric: tabular-nums; }

/* ── Liten variant av base.html .button (kompakt knapp i tabeller etc.) */
.button.sm,
a.button.sm,
button.button.sm {
    padding: 5px 11px;
    font-size: 0.82rem;
    border-radius: 8px;
    font-weight: 600;
}

/* ── Kompakt skjema-grid (smalere enn .form-grid i base.html) ────────── */
.form-grid-tight {
    display: grid;
    gap: var(--space-3);
}
.form-narrow { max-width: 520px; }

/* ── Margin-bottom-utilities ─────────────────────────────────────────── */
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

/* ── Knapperad (gruppe av .button/.btn) ──────────────────────────────── */
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn-row.tight { gap: 6px; }

/* ── Sort-link (klikkbar tabellheader, arver farge fra th) ───────────── */
.sort-link { color: inherit; text-decoration: none; cursor: pointer; }
.sort-link:hover { color: var(--brand-strong); }

/* ── Inline-status (laster/oppdaterer ved siden av en handling) ──────── */
.inline-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--space-3);
    color: var(--muted);
    font-size: 0.92em;
}

/* ── Sub-tekst i tabell (mindre enn .muted-note) ─────────────────────── */
.cell-sub { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }

/* ── Padding-utilities for tabeller med variabel header ──────────────── */
.cell-muted { color: var(--muted); font-size: 0.92em; }

/* ── Hjelpe-pills som ikke er statuser ───────────────────────────────── */
.flex-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.flex-row.end { align-items: flex-end; }
.flex-col { display: flex; flex-direction: column; gap: var(--space-2); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* ── Display-utilities ───────────────────────────────────────────────── */
.hidden, [hidden] { display: none !important; }

/* ── Width-helpers ───────────────────────────────────────────────────── */
.w-full { width: 100%; }
.max-w-520 { max-width: 520px; }
.max-w-640 { max-width: 640px; }
.max-w-720 { max-width: 720px; }

/* ── Inline form (knapp i tabellrad) ──────────────────────────────── */
.form-inline { display: inline-block; margin: 0; }
.form-inline + .form-inline { margin-left: 4px; }
.action-cell .button + .form-inline,
.action-cell .button + .button { margin-left: 4px; }

/* ── Mørk kode-blokk (preformatert, secrets, tokens) ──────────────── */
.codeblock {
    background: #0f172a;
    color: #e2e8f0;
    padding: 14px;
    border-radius: 6px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.86em;
    line-height: 1.5;
    margin: 0;
}

/* ── Card-bakgrunn-modifier (suksess/fare-banner som .card) ────────── */
.card.success-bg { background: var(--success-bg); border: 1px solid var(--success-border); }
.card.danger-bg  { background: var(--danger-bg);  border: 1px solid var(--danger-border); }
.card.warn-bg    { background: var(--warn-bg);    border: 1px solid var(--warn-border); }

/* ── Programmatisk Firmaradar-modal (JS-konstruert dialog) ──────────── */
.fr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.fr-modal-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
    padding: 22px 24px;
}
.fr-modal-box h3 { margin: 0 0 8px 0; font-size: 1.05em; }
.fr-modal-box p  { margin: 0 0 18px 0; color: var(--muted); line-height: 1.5; }
.fr-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Generisk overlay-modal (large variant for skjemaer) ───────────────
   Default: display:flex (vises). Trigger-button setter inline style.display
   til 'flex'/'none' for å åpne/lukke. Modal-divet skal ha
   style="display:none" i template-kilden så den er skjult ved page-load. */
.fr-modal-overlay-lg {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fr-modal-box-lg {
    background: var(--panel);
    border-radius: 12px;
    padding: 28px;
    max-width: 520px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.fr-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}
.fr-modal-close:hover { color: var(--text); }
.fr-modal-h2 { margin: 0 0 20px; font-size: 18px; }

/* ── Skjema-felt-stack i modal ─────────────────────────────────────── */
.fr-form-stack { display: grid; gap: 14px; }
.fr-form-stack-sm { display: grid; gap: 6px; }
.fr-required { color: var(--danger); }

/* ── Modal-error-banner (vises ved JS-feil) ────────────────────────── */
.fr-modal-error {
    color: var(--danger);
    font-size: 13px;
    padding: 8px 10px;
    background: var(--danger-bg);
    border-radius: 6px;
}
.fr-modal-error[hidden] { display: none !important; }

/* ── Knapperad i bunn av modal ────────────────────────────────────── */
.fr-modal-foot {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ── Sm\xc3\xa5-utility for ikoner ────────────────────────────────────── */
.icon-mr-1 { margin-right: 5px; }

/* ── Lys-muted tekst (lighter enn .text-muted) ────────────────────── */
.text-muted-light { color: #94a3b8; }

/* ── Avsl\xc3\xa5tt-rad i tildelinger-tabell ─────────────────────────── */
tr.row-avslatt { opacity: 0.6; }

/* ── Solid pille-modifier (mørk variant for "Ny X" highlight) ──────── */
.pill.solid-success { background: var(--success); color: #fff; border-color: var(--success); }
.pill.solid-danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.pill.solid-brand   { background: var(--brand);   color: #fff; border-color: var(--brand); }

/* ── Danger-outline-modifier til base.html .button (rød kant) ──────── */
.button.danger-outline,
a.button.danger-outline,
button.button.danger-outline {
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger-border);
    font-weight: 600;
}
.button.danger-outline:hover,
a.button.danger-outline:hover,
button.button.danger-outline:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ── Heading-utility for card-header (samme som .hero h1, men in-card) */
.card-h1 { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -0.02em; }
.card-h2 { margin: 0 0 8px; font-size: 1.15rem; }

/* ── Lite ikon foran tekst (muted, riktig høyde) ──────────────────── */
.icon-muted { color: var(--muted); margin-right: 6px; }

/* ── Inline-kode mindre (i tabellceller) ──────────────────────────── */
.code-xs { font-size: 12px; font-family: var(--font-mono); }

/* ── Action-cell (siste kolonne i tabell, høyre, ingen wrap) ─────── */
td.action-cell, th.action-cell { text-align: right; white-space: nowrap; }

/* ── Margin-left/right-utilities ───────────────────────────────────── */
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }

/* ── Progress-bar (slim, embedded i tabellrad) ────────────────────── */
.progress-track {
    width: 120px;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--brand);
    transition: width 0.3s ease;
}

/* ── Mono-textarea (orgnr-lister osv.) ────────────────────────────── */
.textarea-mono {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: var(--panel);
    resize: vertical;
}

/* ── Skjema-felt-hjelp (kort under et felt) ──────────────────────── */
.field-help { font-size: 12px; color: var(--muted); }
.field-hint { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; line-height: 1.4; }
.field-stack { display: flex; flex-direction: column; gap: 6px; }
.field-stack .field-label { margin-bottom: 0; font-size: 13px; }
.field-label .optional { color: var(--muted); font-weight: 400; }

/* ── Delt firma-søkefelt ─────────────────────────────────────────────
   Felles «Firmanavn eller orgnr»-søkefelt for firma-rapportene (DD, AML,
   bulk) så de ser like ut som konsernstøtte-søket. Speiler konsernstøttes
   .ks-form-label / .ks-form-row / .ks-input-wrap. */
.report-search-label {
    display: block;
    color: var(--text);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.report-search-row {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}
.report-search-input {
    flex: 1 1 240px;
    min-width: 220px;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.report-search-row .button,
.report-search-row .btn { white-space: nowrap; }

/* ── Skjema-policy-panel (utvidbart, eks. passord-krav) ───────────── */
.field-policy-panel {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    padding: 0;
    margin-bottom: 10px;
    font-size: 13px;
}
.field-policy-panel > summary {
    cursor: pointer;
    padding: 8px 12px;
    list-style: none;
    color: var(--muted);
    font-weight: 600;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.field-policy-panel > summary::-webkit-details-marker { display: none; }
.field-policy-panel > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--muted);
    font-size: 10px;
}
.field-policy-panel[open] > summary::before { transform: rotate(90deg); }
.field-policy-panel[open] > summary { border-bottom: 1px solid var(--line); }
.field-policy-summary-hint { font-weight: 400; font-size: 12px; color: var(--muted); }
.field-policy-list {
    margin: 0;
    padding: 10px 12px 10px 28px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}
.field-policy-list li { margin: 0; padding: 2px 0; }
.field-policy-list code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-faint, rgba(0,0,0,0.04));
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Banner-content i en .card.danger-bg/.warn-bg/.success-bg ───── */
.banner-content { display: flex; gap: 12px; align-items: flex-start; }
.banner-content > i { font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.banner-content .strong { font-weight: 700; }
.banner-content .strong.danger  { color: var(--danger); }
.banner-content .strong.warn    { color: var(--warn); }
.banner-content .strong.success { color: var(--success); }

/* ── Action-row (knapp + hjelpe-tekst) ────────────────────────────── */
.action-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Tabell-celle med ekstra dempet tekst (12px muted) ───────────── */
td.cell-faint, .cell-faint { font-size: 12px; color: var(--muted); }

/* ── Tabell-overflow-wrapper (horisontal scroll p\xc3\xa5 sm\xc3\xa5 skjermer) ── */
.tbl-scroll { overflow-x: auto; margin-top: 12px; }

/* ── Fieldset (gruppert form-seksjon) ─────────────────────────────── */
.fieldset-box {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px;
}
.fieldset-box > legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 0 6px;
}

/* ── Checkbox-grid (auto-fit kolonner) ─────────────────────────────── */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 14px;
}
.checkbox-grid label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.checkbox-grid input[type="checkbox"] { margin: 0; }

/* ── Tabs (horisontale fane-lenker over et kort-innhold) ───────── */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}
.tabs > a, .tabs > a.tab {
    padding: 12px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.tabs > a:hover, .tabs > a.tab:hover { color: var(--brand-strong); }
.tabs > a.is-active, .tabs > a.tab.is-active {
    color: var(--brand-strong);
    border-bottom-color: var(--brand);
}

/* ── Kort med flush layout (uten padding) ────────────────────────── */
.card.no-pad { padding: 0; }
.card-pad { padding: 20px; }

/* ── Header inni kort med tittel + handling på begge sider ──── */
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 18px;
    gap: 12px;
    flex-wrap: wrap;
}
.card-header-row > h2 { margin: 0; font-size: 1.15rem; }
.card-header-row + .help-card,
.card-header-row + details { margin-top: 6px; }

/* ── Kort-tittel-rad med eyebrow + h1 + handling (page-header-style) */
.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Notice-banner (advarsel/info) inni en card ─────────────────── */
.notice {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}
.notice.warn   { background: var(--warn-bg);    border-color: var(--warn-border);   color: var(--warn); }
.notice.info   { background: var(--brand-50);   border-color: var(--brand-100);     color: var(--brand-strong); }
.notice.danger { background: var(--danger-bg);  border-color: var(--danger-border); color: var(--danger); }

/* ── Code-block (lett, in-card mini-code) ─────────────────────────── */
.code-mini {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 10px;
    margin: 6px 0;
    font-size: 12px;
    overflow-x: auto;
}

/* ── Help-card (kollapsbart info-panel inn i en seksjon) ─────────── */
.help-card {
    margin: 0 0 18px;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 8px;
    padding: 12px 16px;
}
.help-card > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.help-card-body {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
}
.help-card-body h3 { font-size: 14px; margin: 14px 0 6px; }

/* ── Tekst-farge-utility (semantiske farger for inline tekst) ────── */
.text-danger  { color: var(--danger); }
.text-warn    { color: var(--warn); }
.text-success { color: var(--success); }
.text-muted   { color: var(--muted); }
.text-brand   { color: var(--brand-strong); }

/* ── Seksjons-label (uppercase mini-tittel over et avsnitt) ───────── */
.section-label {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.section-label.sm { font-size: 0.78em; }

/* ── Tagline (fremtredende intro-tekst inni et kort) ─────────────── */
.tagline {
    font-size: 1.05em;
    color: var(--brand-strong);
    font-weight: 500;
    margin-top: 8px;
}

/* ── Admin-override-notat (warning-farget mini-note) ──────────────── */
.override-note { margin-top: 6px; font-size: 0.82em; color: var(--warn); }

/* ── Two-column-grid (eksisterer i base.html som .two-col) ─────────── */
/* base.html .two-col har display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px */

/* ── Live-output-pane (resultat under "Kj\xc3\xb8r tester"-knapp) ─────── */
.test-result-output {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: var(--panel-alt);
    border: 1px solid var(--line);
    padding: 10px;
    padding-right: 90px;
    font-size: 11px;
    max-height: 300px;
    max-width: 100%;
    overflow: auto;
    margin: 0;
}
.regression-error-pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: var(--warn-bg);
    padding: 8px;
    padding-right: 90px;
    font-size: 12px;
    max-height: 360px;
    max-width: 100%;
    overflow: auto;
    margin: 0;
}

/* Wrapper rundt en <pre> som lar oss legge en kopier-knapp i \xc3\xb8vre h\xc3\xb8yre hj\xc3\xb8rne. */
.output-with-copy {
    position: relative;
}
.copy-output-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.4;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    z-index: 1;
}
.copy-output-btn:hover { background: var(--panel-alt); }
.copy-output-btn.is-copied { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* ── Screenshot-figur (admin-detaljside) ──────────────────────────── */
.figure-screenshot { margin: 0; max-width: 280px; }
.figure-screenshot img {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.figure-fallback {
    padding: 12px;
    background: var(--panel-alt);
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.85em;
}
.figure-screenshot figcaption {
    font-size: 0.82em;
    color: var(--muted);
    margin-top: 4px;
}

/* ── Curl-test-pane (admin) ───────────────────────────────────────── */
.curl-pane {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-alt);
}
.curl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 0.92em;
    align-items: center;
}
.curl-toolbar label { display: flex; gap: 6px; align-items: center; }
.curl-toolbar .field { max-width: 340px; }
.curl-toolbar .field-label { margin: 0; }
.curl-output-pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    margin: 6px 0;
}
.curl-output-meta { font-size: 0.82em; color: var(--muted); margin-bottom: 6px; }
.curl-output-meta.is-success { color: var(--success); }
.curl-output-meta.is-warn    { color: var(--warn); }
.curl-output-meta.is-danger  { color: var(--danger); }
.curl-output-body {
    white-space: pre-wrap;
    font-size: 11px;
    max-height: 280px;
    overflow: auto;
    margin: 0;
    background: var(--panel-alt);
    padding: 8px;
    border-radius: 4px;
}

/* ── Checkbox med tekst (sentrert eller toppstilt) ────────────────── */
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row.start { align-items: flex-start; }

/* ── Mono-cell og nowrap-cell ─────────────────────────────────────── */
.cell-mono { font-family: var(--font-mono); white-space: nowrap; }
.cell-nowrap { white-space: nowrap; }
.font-mono { font-family: var(--font-mono); }

/* ── Health-status (\xe2\x9c\x93 OK / \xe2\x9c\x97 Feilet inline tekst) ──────────────── */
.health-ok   { color: var(--success); font-weight: 600; }
.health-fail { color: var(--danger);  font-weight: 600; }
.health-warn { color: var(--warn);    font-weight: 600; }

/* ── Info-table (label-verdi layout med dempet label) ─────────────── */
.info-table { width: 100%; font-size: 0.88em; }
.info-table td:first-child { color: var(--muted); padding: 4px 0; white-space: nowrap; }
.info-table td:last-child  { padding: 4px 8px; }

/* ── Divider-hr (i kort) ─────────────────────────────────────────── */
hr.divider { border: none; border-top: 1px solid var(--line); margin: 16px 0 12px; }

/* ── Pill-mini (sm\xe5 inline-status v\xe5 H3-titler) ──────────────────── */
.pill-mini {
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 99px;
    border: 1px solid transparent;
}
.pill-mini.ok      { color: var(--success); background: var(--success-bg); }
.pill-mini.warn    { color: var(--warn);    background: var(--warn-bg); }
.pill-mini.neutral { color: var(--muted);   background: var(--line); }

/* ── DNS-record pre-blokk (mailhealth) ─────────────────────────────── */
.dns-record {
    font-size: 0.78em;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 0 8px 0;
    color: var(--text);
}

/* ── DKIM-/info-card (lett kopier-klar info-boks) ──────────────────── */
.info-card {
    margin-top: 18px;
    padding: 14px;
    background: var(--panel-alt);
    border-radius: 8px;
    border: 1px solid var(--line);
}

/* ── Status-table (DNS-helse, label/status/detalj) ─────────────────── */
.status-table {
    width: 100%;
    font-size: 0.88em;
    border-collapse: collapse;
}
.status-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--muted);
    font-weight: 600;
}
.status-table th:first-child { padding-left: 0; }
.status-table tr { border-bottom: 1px solid var(--line); }
.status-table tr:last-child { border-bottom: none; }
.status-table td { padding: 8px; vertical-align: top; }
.status-table td:first-child { padding-left: 0; white-space: nowrap; }
.status-table td:last-child  { padding-right: 0; }
.status-table td.muted { color: var(--muted); font-size: 0.9em; }
.status-table td code  { color: var(--muted); }

/* ── Header-rad med tittel + pille (h3 inkl. .pill-mini) ───────────── */
.h-with-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

/* ── Knapper i Email-queue-rad ────────────────────────────────────── */
.queue-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85em; }

/* ── Pille-slot (lazy-fylt placeholder ved siden av tekst) ────────── */
.pill-slot { display: inline-block; margin-left: 3px; }

/* ── Margin-zero-utility (konvertere style="margin:0;" til klasse) ─── */
.m-0 { margin: 0 !important; }

/* ── Tre-node-felles base (statiske egenskaper, dynamisk margin igjen) */
.tree-node-surface {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    position: relative;
}
.tree-node-surface.is-active { background: var(--brand-50); }
.tree-node-surface.cursor    { cursor: pointer; list-style: none; display: block; }
.tree-blur-overlay { filter: blur(3px); pointer-events: none; user-select: none; }
.tree-blur-overlay.flex1 { flex: 1; }
.tree-pill-corner { position: absolute; top: 10px; right: 14px; }
.tree-ghost-node {
    padding: 12px 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--panel-alt);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

/* ── Search-stat-box (info-pakke i søkeresultat) ──────────────────── */
.stat-box {
    background: var(--panel-alt);
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 120px;
}
.stat-box .label {
    font-size: 0.75em;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stat-box .value, .stat-value { font-size: 1.15em; font-weight: 700; margin-top: 4px; }
.stat-box .value.lg, .stat-value.lg { font-size: 1.4em; }

/* ── Header-rad i kort med tittel + handling p\xc3\xa5 begge sider (inline) */
.split-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.split-row.center { align-items: center; }
.split-row.wrap { flex-wrap: wrap; }

/* ── Bakgrunns-utility ────────────────────────────────────────────── */
.bg-panel-alt { background: var(--panel-alt); }

/* ── Word-break-utility ──────────────────────────────────────────── */
.break-all { word-break: break-all; }

/* ── Compact-tabell (smal data-tabell, 13px) ─────────────────────── */
.tbl-compact { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-compact td, .tbl-compact th { padding: 4px 6px; border-bottom: 1px solid var(--line-faint); }
.tbl-compact thead th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.82em;
    color: var(--muted);
}
.tbl-compact td.right, .tbl-compact th.right { text-align: right; white-space: nowrap; }
.tbl-compact tr.row-faded { opacity: 0.7; }
.tbl-compact tr.row-strike td { text-decoration: line-through; }
.tbl-compact td.cell-tiny { color: var(--muted); font-size: 11px; vertical-align: top; }

/* ── Center-flex-row med wrap ────────────────────────────────────── */
.flex-center { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.split-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* ── Sub-text styling ───────────────────────────────────────────── */
.sub-note { color: var(--muted); font-size: 0.9em; margin: 8px 0 20px; }
.sub-tiny { font-size: 0.8em; color: var(--muted); }

/* ── Empty-row med padding ──────────────────────────────────────── */
.empty-row { text-align: center; padding: 24px 16px; }

/* ── Inline-block-utility ────────────────────────────────────────── */
.inline-block { display: inline-block; }

/* ── Strikethrough-tekst ─────────────────────────────────────────── */
.strike { text-decoration: line-through; }

/* ── Font-size-utilities (rem-baserte) ───────────────────────────── */
.fs-1 { font-size: 1rem; }
.fs-095 { font-size: 0.95rem; }
.fs-088 { font-size: 0.88em; }
.fs-082 { font-size: 0.82em; }
.fs-08  { font-size: 0.8em; }

/* ── Opacity-utilities ───────────────────────────────────────────── */
.op-40 { opacity: 0.40; }
.op-50 { opacity: 0.50; }
.op-55 { opacity: 0.55; }
.op-60 { opacity: 0.60; }
.op-70 { opacity: 0.70; }
.op-80 { opacity: 0.80; }

/* ── Compact-tabell varianter ────────────────────────────────────── */
.tbl-compact tr.faded { opacity: 0.7; }
.tbl-compact td.b-faint, .tbl-compact th.b-faint { border-bottom: 1px solid var(--line-faint); vertical-align: top; }
.tbl-compact td.r-pad, .tbl-compact th.r-pad { padding: 4px 6px; }
.tbl-compact .field-label { display: block; font-weight: 700; margin-bottom: 0; font-size: 0.82em; }

/* ── Ghost-/fallback-bokser i tre ────────────────────────────────── */
.dashed-box {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--panel-alt);
    border: 1px dashed var(--line);
}

/* ── Tree-node indent (dynamisk via CSS-variabel) ─────────────────── */
.tree-row { margin-top: var(--tree-mt, 10px); margin-left: var(--tree-ml, 0px); }
.tree-row.relative { position: relative; }

/* ── Selektor-bredder for sorter-/visning-dropdowns ────────────────── */
.field.w-auto-180 { width: auto; min-width: 180px; }
.field.w-auto-120 { width: auto; min-width: 120px; }

/* ── Mini sub-tekst (fotnote-stil i tre-noder) ───────────────────── */
.tree-footnote {
    margin: 8px 0 0;
    font-size: 0.71em;
    font-style: italic;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Skeleton-mini placeholder-tekst (forms / hjelp) ──────────────── */
.helper-tiny { margin: 0; font-size: 12px; color: #94a3b8; line-height: 1.55; }

/* ── Compact td/th-celler (variabel border-tone) ─────────────────── */
td.b-faint, th.b-faint { padding: 4px 6px; border-bottom: 1px solid var(--line-faint); vertical-align: top; }
td.b-line, th.b-line   { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.td-compact { padding: 5px 8px; border-bottom: 1px solid var(--line-faint); }
.td-compact-md { padding: 6px 10px; border-bottom: 1px solid var(--line-faint); }
.th-compact {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.82em;
    color: var(--muted);
}

/* ── Tabell-celle 11px-tiny (sm\xc3\xa5 sub-info i kompakt-tabell) ─────── */
.cell-tiny { color: var(--muted); font-size: 11px; vertical-align: top; }

/* ── Container-with-divider-top (egenskaps-bryter med separator) ──── */
.divider-top { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-faint); }

/* ── Notice-callout (sentrert dashed-boks med tekst) ──────────────── */
.callout {
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--panel-alt);
    text-align: center;
    color: var(--muted);
}
.callout.compact { margin-top: 14px; padding: 16px 18px; }
.callout.compact-sm { margin-top: 14px; padding: 14px 16px; border-radius: 8px; }

/* ── Knapperad mt-4 ──────────────────────────────────────────────── */
.btn-row.mt-4 { margin-top: 16px; }

/* ── Hero-card: spesielt eierskaps-/aktivt firma-kort ─────────────── */
.brand-banner {
    margin-top: 16px;
    padding: 12px 14px;
    border: 2px solid var(--brand);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ── Generic margin-utility (text-muted med margin) ──────────────── */
.note-mt-3 { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ── Mer fs-utilities ─────────────────────────────────────────────── */
.fs-085 { font-size: 0.85em; }
.fs-09  { font-size: 0.9em; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-08rem { font-size: 0.8rem; }
.fs-15em  { font-size: 1.5em; }
.fs-13em  { font-size: 1.3em; }
.fs-2em   { font-size: 2em; }

.mb-2-px  { margin-bottom: 8px; }
.mb-12px  { margin-bottom: 12px; }
.mb-10px  { margin-bottom: 10px; }
.mb-3rem  { margin-bottom: 3px; }
.mb-6rem  { margin-bottom: 6px; }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-400 { font-weight: 400; }

/* ── Eyebrow-mini variant (forsm\xc3\xa5 brand-eyebrow) ────────────────── */
.eyebrow-mini {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}
.eyebrow-mini.muted-color { color: var(--muted); font-size: 0.78em; margin-bottom: 10px; }

/* ── Inline-code-token (mono med subtle bg) ──────────────────────── */
.code-inline {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--panel-alt);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ── Empty-state-icon med opacity ───────────────────────────────── */
.empty-icon { font-size: 1.5em; margin-bottom: 10px; display: block; opacity: 0.5; }
.empty-icon.sm { font-size: 1.3em; margin-bottom: 8px; }
.empty-icon.lg { font-size: 2em; margin-bottom: 12px; opacity: 1; color: var(--muted); }

/* ── Nye toggle-arrow / chevron ──────────────────────────────────── */
.chevron { font-size: 0.8em; display: inline-block; transition: transform 0.15s; }

/* ── Display-block-utility ─────────────────────────────────────── */
.d-block { display: block; }

/* ── Tag-row-flex (ml-6, fs-08) ────────────────────────────────── */
.ml-6px { margin-left: 6px; font-size: 0.8rem; }

/* ── Konsern-banner-card (gradient indigo-light / teal) ────────── */
.banner-card-soft {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1.5px solid #bfdbfe;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Stat-label-rare (dyporansje) ────────────────────────────────── */
.label-amber {
    font-size: 0.75em;
    color: #854d0e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Stat-value-amber ───────────────────────────────────────────── */
.stat-value-amber {
    font-size: 1.15em;
    font-weight: 700;
    margin-top: 4px;
    color: #713f12;
}

/* ── Color-swatch (10px ruter for legend) ────────────────────────── */
.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    border: 1px solid transparent;
}
.swatch.amber-light { background: #ffedd5; border-color: #fed7aa; }
.swatch.green-light { background: #dcfce7; border-color: #bbf7d0; }
.swatch.blue-light  { background: #dbeafe; border-color: #bfdbfe; }
.swatch.brand       { background: var(--brand-100); border-color: var(--brand-100); }
.swatch.amber-dashed{ background: #fff7ed; border: 1px dashed #fb923c; }

/* ── Inline-pill (placeholder, ikke-klikkbar) ────────────────────── */
.pill-disabled {
    display: inline-block;
    background: var(--line-faint);
    color: var(--muted);
    border-radius: 20px;
    padding: 2px 11px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

/* ── Flex-row varianter (compact gap-utilities) ──────────────────── */
.flex-end-row    { display: flex; justify-content: flex-end; gap: 8px; align-items: flex-start; }
.flex-center-wrap{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.flex-wrap-row   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flex-wrap-row.gap-3 { gap: var(--space-3); }
.flex-wrap-row.lg-gap { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* ── Definition-grid (label \xc2\xb7 verdi p\xc3\xa5 to kolonner) ─────────────── */
.def-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    font-size: 0.9em;
    align-items: baseline;
}

/* ── Tett tag-rad ────────────────────────────────────────────────── */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 0.73em;
    color: var(--muted);
}

/* ── Filter-row (visning-piller med min-width) ─────────────────── */
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ── Flex-row med 1 1 200 (search-input-area) ────────────────────── */
.flex-grow-1 { flex: 1; min-width: 200px; }

/* ── Strict-blur (5px) ───────────────────────────────────────────── */
.blur-strong { filter: blur(5px); user-select: none; pointer-events: none; }

/* ── Card-padding-sm (kompakt kort-padding) ──────────────────────── */
.p-card-sm { padding: 14px 18px; }

/* ── Bordered (1px solid line) ───────────────────────────────────── */
.bordered { border: 1px solid var(--line); }

/* ── Brand-gradient-bg ──────────────────────────────────────────── */
.grad-brand {
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
    border-color: #4f46e5;
}

/* ── Brand-50 baggrunn-utility ──────────────────────────────────── */
.bg-brand-50 { background: var(--brand-50); }

/* ── Cursor-default-utility ──────────────────────────────────────── */
.cursor-default { cursor: default; }
.no-events { pointer-events: none; }

/* ── Test-key-success-card (gr\xc3\xb8nn boks for ny test-n\xc3\xb8kkel) ──── */
.testkey-card {
    margin: 10px 0;
    padding: 14px;
    border: 1px solid var(--success-border);
    border-radius: 8px;
    background: var(--success-bg);
}
.testkey-card .codeblock { margin: 0; }

/* ── Pre-release-info (inne i aktiverings-skjema) ─────────────────── */
.prerelease-warn {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--panel-alt);
    font-size: 0.92em;
    color: var(--muted);
}

/* ── Prose-tekst (HTML-rendret innhold med komfortabel linjeh\xc3\xb8yde) ──── */
.prose { line-height: 1.6; }
.prose-pre { line-height: 1.6; white-space: pre-line; margin: 0; }

/* ── Code-block (curl-eksempler, JSON-config, syntax-highlighting) ─────
   Brukes på /dokumentasjon, /agentisk-flyt og fremtidige integrasjons-
   sider. Spans inni får syntax-farger:
     .cm  kommentar (grå)
     .ck  kommando (cyan)
     .cv  flagg/variabel (grønn)
     .cs  streng/literal (rød/laks)
   Bruk <pre class="code-block">...</pre> (ikke <div>) for at innholdet
   skal beholde linjeskift selv om CSS-en feiler å laste — <pre> har
   white-space: pre fra user-agent-stylesheet by default. */
.code-block {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82em;
    line-height: 1.65;
    border-radius: 8px;
    padding: 14px 18px;
    overflow-x: auto;
    margin: 12px 0;
    white-space: pre;
}
.code-block .cm  { color: #64748b; }
.code-block .ck  { color: #7dd3fc; }
.code-block .cv  { color: #86efac; }
.code-block .cs  { color: #fca5a5; }