/* Dette er systemets core CSS – rediger aldrig denne fil manuelt. Brug custom.css til egne tilpasninger. */
/*
 * Survey.dk — delt designsystem for admin-panel og respondentflow.
 * Afledt direkte af det godkendte mockup ("Klassisk / Tillid"): ink-blå +
 * salvie-grøn, Source Serif 4 til overskrifter, Inter til brødtekst.
 * Håndskrevet CSS (ingen Tailwind-runtime) — se plan for begrundelse.
 * custom.css (assets/css/custom.css, redigerbar via Admin → CSS) indlæses
 * altid EFTER denne fil og vinder derfor ved konflikter — se
 * admin/superadmin/css.php og includes/models/CustomCss.php.
 */

:root {
    --ink: #16233F;
    --ink-light: #2C3B5C;
    --sage: #6B8F71;
    --sage-light: #F5F7F4;
    --paper: #FAFAF7;
    --card: #FFFFFF;
    --line: #E4E2DA;
    --muted: #6B7280;
    --danger: #B3432E;
    --danger-bg: #FFF5F0;
    --radius: 6px;
    --radius-lg: 14px;

    /* Alias-tokens til survey-header-kortet (se .survey-header-card
       nedenfor) — navngivet efter et mere generisk "surface/text-niveau"-
       mønster end resten af paletten ovenfor, men peger på de SAMME farver
       hvor et match findes, så kortet ikke introducerer en visuelt
       afvigende ny stil. --border-strong og --text-secondary har intet
       eksisterende modstykke og er derfor rigtige nye værdier, valgt til at
       ligge tydeligt imellem deres nabo-niveauer (linje/muted hhv. ink). */
    --surface-1: var(--card);
    --border: var(--line);
    --border-strong: #C9C6BA;
    --text-muted: var(--muted);
    --text-secondary: #4B5563;
    --text-primary: var(--ink);
}

* { box-sizing: border-box; }

/* Rettelse til "Admin + builder: 8 ændringer" (docs/admin-plus-builder-8-
   changes-report.md): browserens indbyggede regel, der skjuler [hidden]-
   elementer (display:none), gælder IKKE pålideligt for <svg> i dette miljø —
   et inline <svg hidden> forblev synligt (display:block), hvilket gjorde at
   et kopiér-/flueben-ikonpar (fx .tab-copy-btn, .copy-icon-btn) viste BEGGE
   ikoner oven i hinanden som ét "kombi-ikon" i stedet for at skifte. Denne
   regel håndhæver display:none eksplicit for ethvert <svg hidden>, uanset
   hvilken komponent det optræder i. */
svg[hidden] { display: none; }

/* Glidende i stedet for et hårdt hop, når en handling (fx "Tilføj spørgsmål")
   lander på en #anker efter en fuld side-genindlæsning — gælder både
   admin-panelet og respondentflowet. */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    font-size: 15px;
}

h1, h2, h3 {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

/* Sort sektionsoverskrift-bjælke. Bevidst en EGEN klasse (ikke en regel på h3): h3 bruges
   i surveys, hjælpecenteret og mange andre steder med anden styling. Klassen sættes kun
   manuelt på sektionsoverskrifter i rapport-builderen (report-edit.php), Mail-skabeloner
   (email.php/email_section.php) og survey-indstillinger (builder/general_tab.php). */
.section-header-bar {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding: 18px 0 6px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    background: none;
    text-align: left;
}

a { color: var(--ink); }
p.sub, .text-muted { color: var(--muted); font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 11px 22px; border-radius: var(--radius); border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-light); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--sage); }
.btn-ghost { background: transparent; color: var(--muted); border: none; }
button.collapse-toggle { font-size: 20px; line-height: 1; padding: 2px 8px; color: var(--ink, var(--muted)); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--line); }
.btn-danger:hover { border-color: var(--sage); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* Endnu mindre variant — bruges til de fire handlingsknapper pr. række i
   survey-oversigten (surveys.php), som ellers dominerede rækkerne. */
.btn-xs { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Loading-tilstand for eksportknapperne på resultatsiden (<a>-baserede, kan
   derfor ikke bruge :disabled) — se assets/js/results-export.js. */
.js-results-export-btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); font-family: inherit; font-size: 14.5px;
    color: var(--ink); background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus, .option:focus-visible, .scale-cell:focus-visible {
    outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage);
}
.field { margin-bottom: 18px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
/* Hjælpetekst under status-valget, når der skiftes til "Publiceret" (render_general_tab()) — fremhævet med mørkerød tekst. */
.field-hint-publish { color: darkred; }
/* Highlight af "Tillad åbent link"-feltet, når man ankommer fra det (endnu)
   deaktiverede "Åbent link"-menupunkt (?highlight=open_link, se
   render_general_tab() i admin/includes/builder/general_tab.php) — samme
   ramme-farve som .alert-success' grønne kant, for at pege tydeligt på hvad
   der skal slås til, uden en fuld, permanent baggrundsfarve. */
.field-highlight {
    padding: 12px; margin: -12px -12px 18px; border: 1px solid var(--sage); border-radius: var(--radius);
    background: var(--sage-light);
}
.field-highlight-tooltip { color: #1F3B24; }
/* "Smart" farvefelt (swatch + hex-tekstfelt, synkroniseret via
   assets/js/color-field-sync.js) — se render_color_field() i
   admin/includes/layout.php, bruges af Admin → "Farve og temaer". */
.color-input-pair { display: flex; align-items: center; gap: 8px; }
.color-swatch-input { flex-shrink: 0; width: 36px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; }
.color-hex-input { flex: 1; font-family: monospace; text-transform: lowercase; }
/* Farve-felt-grid til Admin → "Farve og temaer" (admin/superadmin/themes.php). */
.theme-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) {
    .theme-color-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Kompakt tema-kort-grid (Admin → "Farve og temaer") ---------- */
.theme-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) {
    .theme-mini-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .theme-mini-grid { grid-template-columns: 1fr; }
}
.theme-mini-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px; display: flex; flex-direction: column; height: 100%;
}
.theme-mini-card-name { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.theme-swatch-strip { display: flex; gap: 6px; }
.theme-swatch-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
/* "Tilføj nyt tema"-kortet — samme ydre mål som .theme-mini-card, dashed
   kant i stedet for farvet indhold, da det ikke repræsenterer et rigtigt
   tema endnu. */
.theme-mini-add-card {
    width: 100%; height: 100%; min-height: 96px; background: none; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--muted); font-size: 13px; font-weight: 500;
}
.theme-mini-add-card:hover { border-color: var(--sage); color: var(--ink); background: var(--sage-light); }
.theme-mini-add-icon { font-size: 22px; line-height: 1; color: #3f9142; font-weight: 700; }

/* Redigér-modal pr. tema-kort — samme "fixed overlay + centreret panel"-
   mønster som .copy-modal-overlay/.ai-preview-overlay. */
.theme-modal-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.theme-modal-panel {
    background: var(--card, #fff); border-radius: var(--radius-lg); max-width: 560px;
    width: 100%; max-height: 88vh; overflow-y: auto; padding: 24px;
}
.theme-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.theme-modal-delete-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Hover-forklaringsboks (fx "Hvad betyder det?"-links) ---------- */
.help-tooltip { position: relative; display: inline-block; }
.help-tooltip-link { color: var(--muted); font-size: 12.5px; text-decoration: underline dotted; cursor: help; }
.help-tooltip-popup {
    visibility: hidden; opacity: 0; position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
    width: 320px; max-width: 80vw; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.55;
    padding: 12px 14px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transition: opacity .15s ease; z-index: 20; font-weight: 400; text-align: left;
}
.help-tooltip:hover .help-tooltip-popup, .help-tooltip:focus-within .help-tooltip-popup { visibility: visible; opacity: 1; }
/* KPI-kortene på Resultater: smallere boks, og kort 2/4 (højre kant) åbner mod venstre. */
.kpi-card .help-tooltip-popup { width: 240px; }
.kpi-card:nth-child(even) .help-tooltip-popup { left: auto; right: 0; }

/* ---------- Cards / boxes ---------- */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px;
}
.alert { padding: 14px 16px; border-radius: var(--radius); font-size: 14px; }
.alert-error { background: var(--danger-bg); border: 1px solid #E8B4A0; color: #7A3B1E; }
.alert-success { background: #F0F5F0; border: 1px solid var(--sage); color: #1F3B24; }
/* Bevidst neutral/afdæmpet — IKKE rød/gul (ville fejlagtigt læses som en
   fejl-/advarselstilstand) — samme farveprincip som .badge-test, til fx
   "resultaterne herunder inkluderer syntetiske testrespondenter"-banneret
   i admin/results.php. */
.alert-warning { background: #FFF6E0; border: 1px solid #E8D4A0; color: #6B4E10; }
.alert-info { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }

/* ---------- "AI'en tænker..."-boks (assets/js/ai-generate.js) ---------- */
.ai-thinking-box {
    display: none; align-items: flex-start; gap: 10px;
    background: var(--sage-light); border: 1px solid var(--sage); border-radius: var(--radius);
    padding: 12px 14px; margin-top: 12px; color: var(--ink-light); font-size: 14px;
}
/* flex-start (ikke center) så spinner-ikonet sidder pænt øverst, når
   thinking-teksten under streaming fylder flere afsnit — uændret udseende
   for de korte, ét-linjes kanon-fraser (ikke-streamet sti). white-space:
   pre-line får Claudes egne \n\n-afsnitsskift (se buildSystemPrompt()) til
   rent faktisk at vise sig som linjeskift i stedet for at blive kollapset. */
.ai-thinking-icon { flex-shrink: 0; margin-top: 2px; color: var(--sage); animation: ai-spin 1.4s linear infinite; }
.ai-thinking-text { flex: 1; white-space: pre-line; }
@keyframes ai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Kort "puls" hver gang et nyt thinking-fragment ankommer (SSE-streaming, se
   runStreamingGenerate() i assets/js/ai-generate.js) — ingen typewriter her,
   da det ikke kan følge med den reelle ankomsthastighed af Claudes rigtige
   tankeproces. Klassen fjernes/gentilføjes pr. fragment for at genstarte
   animationen hver gang. */
.ai-thinking-text-pulse { animation: ai-thinking-text-fade 300ms ease; }
@keyframes ai-thinking-text-fade { from { opacity: .45; } to { opacity: 1; } }

/* ---------- Streaming-variant af tænke-boksen ("Lav en survey med AI",
   assets/js/ai-generate.js's runStreamingGenerate()) — SurveyBotty-brandet
   header + fast-højde scroll-område til Claudes rigtige, løbende
   tankeproces. Modifier-klasse oven på .ai-thinking-box ovenfor, som stadig
   leverer baggrund/kant/radius/display-toggle; her overskrives kun
   layoutet fra en enkelt flex-række til header+scroll-krop i kolonne. Den
   ikke-streamede "Tilføj med AI"/"Forbedr med AI"-boks (pages_tab.php)
   bruger IKKE denne klasse og beholder sit nuværende, kompakte udseende. */
.ai-thinking-box-stream {
    flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
}
.ai-thinking-box-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid var(--sage); font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.ai-thinking-box-icon-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; color: var(--sage); }
.ai-thinking-box-icon-wrap svg { width: 20px; height: 20px; display: block; }
.ai-thinking-box-header-text { flex: 1; }
.ai-thinking-box-body {
    height: 280px; overflow-y: auto; padding: 12px 14px; font-size: 14px; color: var(--ink-light);
}
.ai-thinking-box-body .ai-thinking-text { white-space: pre-line; }
/* "Skjul Sonnets tanketekst"-opgaven (docs/ai-narrator-hide-raw-thinking-
   report.md): .ai-thinking-text (Sonnets engelske/summarized thinking-
   chunks) er ikke længere den primære visning — Haiku-narratørens
   .sb-narrator-line-sætninger er det nu. KUN skjult i streaming-varianten
   (.ai-thinking-box-stream, "Lav en survey med AI") — IKKE globalt, da samme
   .ai-thinking-text-klasse også bruges af den klassiske, ikke-streamede
   "Tilføj med AI"-boks (pages_tab.php), hvor den cyklende tekst ER hele
   boksens synlige indhold. ai-generate.js stopper fortsat med at SKRIVE til
   elementet (se appendThinking()), men selve skjulningen sidder bevidst her
   i CSS'en, ikke som en betinget JS-tilstand.
   Elementet forbliver i DOM'en (kun display:none), så evt. fremtidig
   fejlsøgning stadig kan inspicere den rå tekst via devtools uden kodeændring. */
.ai-thinking-box-stream .ai-thinking-text { display: none; }
/* Haiku-narratørens oversatte sætninger (docs/ai-narrator-report.md §7) —
   indsat som sidevogn til .ai-thinking-text i .ai-thinking-box-body (se
   appendNarratorLine() i assets/js/ai-generate.js), IKKE indeni — thinkingText
   erstattes i sin helhed ved hver ny thinking-delta, så et barn-element ville
   forsvinde igen med det samme. */
.sb-narrator-line {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    padding: 6px 0 2px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}
/* .ai-thinking-text er nu skjult (se ovenfor), men forbliver i DOM'en som
   .ai-thinking-box-body's FØRSTE barn (et <span>) — :first-child ville derfor
   aldrig ramme den første narratør-<div>. :first-of-type matcher i stedet
   korrekt på ELEMENT-typen (div), uafhængigt af det skjulte <span>, så den
   første synlige narratør-linje ikke får en overflødig streg lige under
   boksens eget toppadding. */
.ai-thinking-box-body > .sb-narrator-line:first-of-type { border-top: none; margin-top: 0; }
.sb-narrator-line::before {
    content: '→ ';
    color: var(--sage);
    font-weight: 600;
}
/* Typing-indikator (showNarratorTyping()/removeNarratorTyping() i
   assets/js/ai-generate.js): vises i dødtiden mellem to Haiku-narratør-sætninger.
   Avataren er surveybotty_robot_icon()'s inline SVG (stroke="currentColor",
   ingen gennemsigtig baggrund at beskære) — border-radius udeladt med vilje
   i forhold til brugerens skabelon, da den ikke har synlig effekt på denne
   SVG og boksens eksisterende header-ikon heller ikke beskæres cirkulært. */
.sb-narrator-typing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}
.sb-narrator-typing .sb-narrator-avatar {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--sage);
}
.sb-narrator-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage);
    animation: sb-dot-bounce 1.2s infinite ease-in-out;
}
.sb-narrator-typing span:nth-child(2) { animation-delay: .2s; }
.sb-narrator-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sb-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
    40%           { transform: scale(1);   opacity: 1;  }
}
.ai-thinking-box-body > .sb-narrator-typing:first-of-type { border-top: none; margin-top: 0; }
/* Semi-transparent ring der pulserer ud fra og falmer væk omkring
   SurveyBotty-ikonet, i loop, mens streamen er aktiv — startes/stoppes
   eksplicit via .is-streaming-klassen (sat/fjernet i ai-generate.js), ikke
   kun implicit via boksens display:none, så opstart/stop er entydigt uanset
   hvordan boksen senere evt. genbruges. */
.ai-thinking-pulse-ring {
    position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sage); opacity: 0; pointer-events: none;
}
.ai-thinking-box-stream.is-streaming .ai-thinking-pulse-ring {
    animation: ai-thinking-pulse-ring 1.8s ease-out infinite;
}
@keyframes ai-thinking-pulse-ring {
    0% { transform: scale(.7); opacity: .7; }
    100% { transform: scale(1.8); opacity: 0; }
}
.ai-error-box {
    display: none; margin-top: 12px; padding: 10px 14px; font-size: 13.5px;
    background: var(--danger-bg); border: 1px solid #E8B4A0; color: #7A3B1E; border-radius: var(--radius);
}
/* Bruges når Claudes lette valideringskald (AiSurveyGenerator::
   validatePromptQuality()) vurderer en prompt for tynd — en venlig anmodning
   om mere information, ikke en fejl, derfor sage/neutral i stedet for rød. */
.ai-info-box {
    display: none; margin-top: 12px; padding: 10px 14px; font-size: 13.5px;
    background: var(--sage-light); border: 1px solid var(--sage); color: #1F3B24; border-radius: var(--radius);
}

/* ---------- Klikbare chip/kort-valg (AI-konklusion-dialogens options-trin,
   admin/results.php + Admin → AI's globale standarder) — se
   render_chip_group() i admin/includes/layout.php. ---------- */
.ai-conclusion-option-group { margin: 16px 0; }
.ai-conclusion-option-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ai-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ai-chip {
    display: block; position: relative; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ai-chip:hover { border-color: var(--sage); }
.ai-chip input[type="radio"], .ai-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-chip.is-selected { border-color: var(--sage); background: var(--sage-light); }
.ai-chip-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ai-chip.is-selected .ai-chip-title { color: #1F3B24; }
.ai-chip-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* Perspektivér-til-branche-toggle (checkbox-drevet switch, ingen JS-
   bibliotek) + det betingede stikords-felt. */
.ai-conclusion-toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ai-conclusion-toggle-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-conclusion-toggle-switch {
    flex-shrink: 0; width: 36px; height: 20px; border-radius: 20px; background: var(--line); position: relative;
    transition: background .15s ease;
}
.ai-conclusion-toggle-switch::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ai-conclusion-toggle-row input:checked + .ai-conclusion-toggle-switch { background: var(--sage); }
.ai-conclusion-toggle-row input:checked + .ai-conclusion-toggle-switch::before { transform: translateX(16px); }
#ai-conclusion-industry-wrap { margin-top: 10px; padding-left: 2px; }

/* AI-konklusion-kortboksen (resultatside: admin/results.php, og read-only i
   rapporter: SurveyAiConclusion::renderReportBox()) — hvid kortboks med en
   header-bjælke (ikon+label+dato, evt. rediger-/genstart-knapper) over selve
   HTML-indholdet. */
.ai-conclusion-box { padding: 18px 20px; }
.ai-conclusion-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }

/* Diskret chip-række der viser hvilke valg (længde/modtager/fokus/branche)
   konklusionen blev genereret med — KUN i denne kortboks på resultatsiden,
   se render_ai_conclusion_settings_chips() i admin/results.php. */
.ai-conclusion-settings-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.ai-conclusion-settings-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-1); border: 1px solid var(--line); border-radius: 20px;
    padding: 2px 10px; font-size: 12px; color: var(--muted);
}
.ai-conclusion-settings-sep { color: var(--muted); font-size: 12px; }

/* Sprogvalg-linjen øverst i generér-dialogens options-trin ("Sprog: X ·
   Skift") + sprogvalg-popup'en der åbnes af "Skift" — se
   render_ai_conclusion_confirm_modal() i admin/results.php og
   assets/js/ai-conclusion.js. */
.ai-conclusion-language-line { font-size: 11px; color: var(--muted); margin: 0 0 16px; }
.ai-conclusion-language-line strong { color: var(--ink); font-weight: 600; }
.ai-conclusion-language-sep { color: var(--muted); }
.ai-conclusion-language-change-link {
    background: none; border: none; padding: 0; font: inherit; font-size: 11px;
    color: var(--sage); text-decoration: underline; cursor: pointer;
}
/* Egen overlay OVEN PÅ den allerede åbne confirm-modal (z-index højere end
   .copy-modal-overlay's 200) — se .ai-preview-overlay for samme
   "nested modal"-mønster andre steder i systemet. */
.ai-conclusion-language-modal { z-index: 220; }
.ai-conclusion-language-modal-title { margin: 0 0 14px; font-size: 14px; font-weight: 500; }
.ai-conclusion-language-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ai-conclusion-language-chip {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--line);
    border-radius: var(--radius); background: none; cursor: pointer; font: inherit; font-size: 13.5px;
    color: var(--ink); transition: border-color .12s ease, background .12s ease;
}
.ai-conclusion-language-chip:hover { border-color: var(--sage); }
.ai-conclusion-language-chip.is-selected { border-color: var(--sage); background: var(--sage-light); }
.ai-conclusion-language-chip-flag { font-size: 18px; line-height: 1; }
.ai-conclusion-title { display: flex; align-items: center; font-weight: 600; color: var(--ink); }
.ai-conclusion-date { color: var(--muted); font-size: 13px; }
.ai-conclusion-content { line-height: 1.6; }
.ai-conclusion-content h3 { margin: 18px 0 8px; font-size: 16px; }
.ai-conclusion-content h3:first-child { margin-top: 0; }
.ai-conclusion-content p { margin: 0 0 10px; }
.ai-conclusion-editor .richtext-field { margin-bottom: 0; }
.ai-conclusion-export { display: flex; gap: 8px; }

/* Læs-visningens indhold klippes til 250px med et falmende overlay + en
   "fold ud"-pil nedenunder, når konklusionen er længere end det — kun i
   READ-ONLY-tilstand (redigeringstilstanden viser altid HELE indholdet, se
   assets/js/ai-conclusion.js). .is-expandable sættes af JS kun når
   indholdet faktisk overstiger de 250px (ellers ingen grund til pil/fade). */
.ai-conclusion-collapse { position: relative; }
.ai-conclusion-collapse.is-expandable.is-collapsed .ai-conclusion-content { max-height: 250px; overflow: hidden; }
.ai-conclusion-collapse.is-expandable.is-collapsed::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 32px; height: 70px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card));
    pointer-events: none;
}
.ai-conclusion-expand-toggle {
    display: none; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-top: 8px; padding: 6px 0; border: none; background: none; cursor: pointer;
    color: var(--sage); font-size: 13px; font-weight: 600;
}
.ai-conclusion-collapse.is-expandable .ai-conclusion-expand-toggle { display: flex; }
.ai-conclusion-expand-toggle svg { transition: transform .15s ease; }
.ai-conclusion-collapse:not(.is-collapsed) .ai-conclusion-expand-toggle svg { transform: rotate(180deg); }
.badge {
    display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted);
    border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px;
}
.badge-success { color: #1F3B24; border-color: var(--sage); background: #F0F5F0; }
.badge-warn { color: #7A3B1E; border-color: #E8B4A0; background: var(--danger-bg); }
/* Survey-statusbadges (admin/surveys.php, admin/index.php, survey-edit.php's
   builder-header) — fire varianter for de fire reelle statusser (draft/
   published/closed/archived), ikke kun to, for ikke at tabe "closed"s
   advarselsfarve. badge-pub/-closed er bevidst samme farver som de
   allerede eksisterende .badge-success/.badge-warn (ingen ny farve
   introduceret); badge-draft/-archived deler udseende, ligesom de to
   historisk har gjort (begge rendrede før som en almindelig, umarkeret
   .badge). */
.badge-pub { color: #1F3B24; border-color: var(--sage); background: #F0F5F0; }
.badge-draft { color: var(--muted); border-color: #E5E7EB; background: #F3F4F6; }
.badge-closed { color: #7A3B1E; border-color: #E8B4A0; background: var(--danger-bg); }
.badge-archived { color: var(--muted); border-color: #E5E7EB; background: #F3F4F6; }
/* Diskret markering af syntetiske testrespondenter (TestRespondentGenerator,
   kun Beta/Tester-planen) — bevidst neutral/afdæmpet farve, IKKE rød/gul, så
   den ikke fejlagtigt læses som en fejl-/advarselstilstand. */
.badge-test { color: var(--muted); border-color: var(--line); background: var(--paper); text-transform: uppercase; letter-spacing: 0.03em; }

/* Testlinje over respondentlisten: "Vis testrespondenter (n)" + "Slet testrespondenter". */
.test-respondents-bar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.test-respondents-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.test-respondents-hint { flex: 1 1 260px; margin: 0; }
.test-respondents-delete-form { margin: 0 0 0 auto; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
    text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--line);
    background: #F2F1ED;
}
table.data td { padding: 12px; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: #F5F4F0; }
/* .table-card: samme kortramme som .card, men med overflow:hidden så
   table.data th's nye baggrund (lige ovenfor) ikke stikker ud forbi kortets
   runde hjørner. Bevidst en SEPARAT klasse frem for at lægge overflow:hidden
   på selve .card — .card bruges alt for mange andre steder (dropdowns,
   tooltips m.m.) til at det ville være sikkert at ændre globalt. Ingen
   padding her — den vandrette scroll-wrapper (overflow-x:auto) og
   table.data's egne celle-paddings (12px) klarer afstanden. */
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.table-card table.data th:first-child, .table-card table.data td:first-child { padding-left: 16px; }
.table-card table.data th:last-child, .table-card table.data td:last-child { padding-right: 16px; }
/* Matrix-svar i respondent-visningen (admin/respondent-view.php) — én linje
   pr. række ("Rækkenavn: Svar") i stedet for én lang kommasepareret streng. */
.respondent-matrix-answer-list { margin: 0; padding-left: 18px; }
.respondent-matrix-answer-list li { margin-bottom: 4px; }
.respondent-matrix-answer-list li:last-child { margin-bottom: 0; }

/* ---------- Admin shell: rail navigation + top bar ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-rail {
    width: 220px; flex-shrink: 0; border-right: 1px solid var(--line);
    background: var(--card); padding: 28px 16px; display: flex; flex-direction: column;
    /* Sticky i stedet for fixed: forbliver i venstre side mens .admin-main
       scroller uafhængigt, men er stadig en normal flex-item (så layoutet
       ikke skal duplikeres/kompenseres andre steder). Egen overflow-y:auto,
       så et langt menu-indhold (fx mange survey-scopede links) scroller
       internt i stedet for at skubbe "Log ud"/AI-credits-widgeten (nederst i
       navnet) ud af syne. */
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Logoet (logo_survey_dk_187.png, 187x64) vises i sin egen størrelse uden nogen
   styling på selve billedet — kun beholderen centrerer det og giver afstand nedad.
   line-height: 0 fjerner den lille ekstra plads under et inline-billede. */
.admin-rail-logo-wrap { text-align: center; line-height: 0; margin: 0 0 24px; }
.admin-rail nav { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.admin-rail a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
    color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
}
.admin-rail a:hover { background: var(--sage-light); color: var(--ink); }
.admin-rail a.active { background: var(--ink); color: #fff; }
.nav-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* "Indhold"-menupunktets undertekst: hvilken survey man aktuelt er inde på
   (se admin_nav_items() i layout.php). Nedtonet i normal tilstand, men skal
   forblive læselig når linket er aktivt (mørk baggrund). */
.nav-subtitle {
    font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}
.admin-rail a.active .nav-subtitle { color: rgba(255, 255, 255, .75); }
/* "Åbent link"-menupunktet (se admin_nav_items() i layout.php): dæmpet
   gråtone + lås-ikon når surveyet ikke har slået åbent link til, ellers en
   lille grøn prik ved siden af teksten (samme grønne farve som
   .survey-header-status-dot.is-published i builderen, men uden puls —
   nav-punktet er synligt på hver eneste side, en konstant animation der ville
   distrahere for meget). */
.admin-rail a.nav-item-disabled { color: var(--muted); }
.admin-rail a.nav-item-disabled:hover { color: var(--ink); }
.nav-label-row { display: flex; align-items: center; }
.nav-lock-icon { font-size: 12px; margin-right: 4px; }
/* Sidebjælkens SVG-ikoner (admin_rail_icon_svg() i layout.php) — klassen
   hedder .admin-rail a svg i stedet for opgavens foreslåede .rail-link svg,
   da sidebjælkens <a>-tags aldrig har haft en .rail-link-klasse; selve
   reglerne (størrelse/opacity) er uændrede. */
.admin-rail a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }
.admin-rail a:hover svg { opacity: 1; }
.admin-rail a.active svg { opacity: 1; }
/* "Hjælp"-linket lige under AI-credits-tælleren (se admin_shell_start() i
   layout.php) — lidt ekstra luft til tælleren ovenover. */
.nav-help-link { margin-top: 4px; }
.nav-enabled-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: limegreen; margin-left: 6px; flex-shrink: 0; }
/* Padding som variabler (mobil-reglen nedenfor skifter dem), så fuld-bredde-headerne
   (.builder-header, .overview-hero) kan udligne dem præcis med negative margener.
   Main selv har ingen max-width mere — ellers ville en header stoppe ved 1350px på
   brede skærme i stedet for at nå skærmkanten. Indholdet har fortsat samme bredde
   som før (1350px minus padding), men begrænses nu på børnene i stedet. */
/* min-width: 0: et flex-item har ellers min-width:auto og udvides til indholdets
   min-content (fx en bred tabel), så main — og de fuld-bredde-headere — blev bredere end
   skærmen og gav vandret sidescroll. Bred indhold scroller nu i sine egne wrappers. */
.admin-main { --admin-pad-y: 40px; --admin-pad-x: 48px; flex-grow: 1; min-width: 0; padding: var(--admin-pad-y) var(--admin-pad-x); }
/* :where() → specificitet 0: kappen er kun en standard og må aldrig overtrumfe en komponents egen klasse-max-width (fx .ns-stack 820px). */
:where(.admin-main:not(.builder-wide) > :not(.builder-header):not(.overview-hero):not([class*="overlay"]):not([class*="modal"]):not([class*="backdrop"]):not([class*="toast"]):not([class*="widget"])) { max-width: calc(1350px - 2 * var(--admin-pad-x)); }
/* ...og fixed-positionerede overlays/modaler/toasts/widgets (direkte børn af <main>, fx .ns-modal-backdrop, .ai-preview-overlay, .copy-modal-overlay, .support-modal-overlay, .beta-feedback-overlay, .surveybotty-widget) skal IKKE kappes — en fixed med inset:0 ville ellers kun dække 1254px af skærmen. */
.admin-main.builder-wide { max-width: none; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }

/* ---------- Survey-header-kort ---------- */
/* Delt header for alle survey-undersider (survey-edit.php/respondents.php/
   email.php/results.php/report-edit.php — se render_survey_header_card() i
   admin/includes/layout.php). Erstatter den tidligere løse
   admin-topbar+h1-kombination på hver enkelt side med ét ensartet kort. */
.survey-header-card, .page-header-card {
    background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 12px;
    border-left: 3px solid var(--sage); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
/* Forenklet udgave til topniveau-sider uden survey-kontekst (se
   render_page_header_card()) — kun titel + kort undertekst, ingen
   breadcrumb/status/højre-side-indhold. */
.page-header-title { font-size: 22px; font-weight: 500; color: var(--text-primary); margin: 0 0 6px; line-height: 1.25; }
.page-header-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0; }
.survey-header-breadcrumb { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.survey-header-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.survey-header-breadcrumb a:hover { text-decoration: underline; }
.survey-header-breadcrumb-sep { color: var(--border-strong); margin: 0 6px; }
.survey-header-breadcrumb-current { color: var(--text-secondary); }
.survey-header-card h1 {
    font-size: 22px; font-weight: 500; color: var(--text-primary); margin: 0 0 8px;
    font-family: inherit; line-height: 1.25;
}
.survey-header-subrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.survey-header-subpage { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.survey-header-subpage i { font-size: 15px; line-height: 1; flex-shrink: 0; }
.survey-header-sep { color: var(--border-strong); }
.survey-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.survey-header-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: var(--radius); text-decoration: none;
}
.survey-header-icon-btn img { width: 18px; height: 18px; object-fit: contain; }
.survey-header-icon-btn:hover { background: var(--sage-light); }
.survey-header-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.survey-header-status-dot.is-published { background: limegreen; animation: survey-header-pulse 1.6s ease-in-out infinite; }
.survey-header-status-dot.is-draft { background: #C9B458; }
.survey-header-status-dot.is-closed { background: var(--danger); }
.survey-header-status-text { white-space: nowrap; }
.survey-header-status-change { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
@keyframes survey-header-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(50, 205, 50, .5); }
    50% { opacity: .6; box-shadow: 0 0 0 4px rgba(50, 205, 50, 0); }
}
@media (max-width: 720px) {
    .survey-header-subrow { align-items: flex-start; }
}

/* ---------- Dashboard-overhaul (admin/index.php, Deleopgave B) ----------
   .page-head/.page-content: erstatter render_page_header_card() KUN på
   dashboardet — titlen sidder direkte på --paper i stedet for i et hvidt
   kort. render_page_header_card() selv og dens CSS ovenfor er urørte og
   bruges fortsat af alle andre sider. */
.page-head { padding: 26px 28px 0; }
.page-head h1 { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.page-head-sub { font-size: 13px; color: var(--muted); margin-top: 3px; margin-bottom: 20px; }
.page-content { padding: 8px 28px 48px; }
/* Stat-tiles: samme kort-ramme som .card, men med en 3px farvet accent-streg
   øverst (sage som standard, ink via .ink-accent) og et stort Source Serif
   4-tal. Source Serif 4 er allerede indlæst globalt af html_head() (se
   admin/includes/layout.php) — intet nyt font-link nødvendigt. */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; }
.stat-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sage); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.stat-tile.ink-accent::before { background: var(--ink); }
.stat-tile-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.stat-tile-value { font-family: 'Saira', system-ui, sans-serif; font-size: 32px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.stat-tile-note { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Survey-builder: to-panel split med live enhedspreview ---------- */
/* Bevidst IKKE align-items:flex-start: .builder-preview-wrap skal strække sig
   til samme højde som .builder-left (den lange spørgsmålskolonne), ellers har
   den sticky preview-rude (position:sticky nedenfor) intet at "følge med" i,
   når man scroller langt ned i et langt spørgeskema — den ville stoppe med
   at følge med, så snart man scroller forbi preview-rudens egen, korte
   naturlige højde. */
.builder-split { display: flex; gap: 32px; }
.builder-left { flex: 0 1 1100px; min-width: 0; max-width: 1100px; }
.builder-preview-wrap { flex: 1 1 320px; min-width: 300px; }
.preview-mobile-trigger { display: none; }

/* ---------- Deleopgave C: builder som sticky app-shell ----------
   Scopet UDELUKKENDE til body.builder-page (kun survey-edit.php — se
   docs/admin-overhaul-report.md). .builder-split bruges også af
   report-edit.php, som ALDRIG får denne body-klasse, så disse regler rører
   intet dér. .builder-header bliver flex-shrink:0 øverst i en lodret
   .admin-main-kolonne.
   Builder-layout §1 (docs/admin-builder-layout-report.md) gjorde fane-baren
   fuld bredde: .builder-split er nu SELV en lodret kolonne (fane-bar først,
   fuld bredde — ikke længere en vandret to-panel-række), og den vandrette
   to-panel-opdeling er flyttet til en NY .builder-columns lige under
   fane-baren. x-data blev bevidst IKKE flyttet (se risikoanalysen) — den
   sidder stadig på .builder-split, og alle efterkommere (uanset hvor dybt)
   ser fortsat device/previewOpen via Alpines normale scope-nedarvning. */
body.builder-page .admin-shell { height: 100vh; overflow: hidden; display: flex; }
body.builder-page .admin-main { overflow: hidden; display: flex; flex-direction: column; }
body.builder-page .builder-header { flex-shrink: 0; }
body.builder-page .builder-split { flex: 1; overflow: hidden; min-height: 0; flex-direction: column; gap: 0; }
body.builder-page .survey-edit-tabs { flex-shrink: 0; }
/* Én kilde til builderens kolonne-fordeling (editor : viewer + mellemrum): brugt både af
   kolonnerne herunder og af tab-barens to sektioner (.set-tabs-builder/.set-tabs-viewer),
   så Fortryd-knappen altid flugter med builder-kolonnens højre kant. */
body.builder-page { --builder-split-left: 6; --builder-split-right: 4; --builder-gap: 32px; }
body.builder-page .builder-columns { display: flex; gap: var(--builder-gap); flex: 1; overflow: hidden; min-height: 0; }
/* Builder-layout §3: 60/40-split mellem editor og viewer. Opgavebeskrivelsens
   egne klassenavne (.builder-editor-wrap) findes ikke i kodebasen — den
   faktiske editor-kolonne hedder .builder-left (se risikoanalysens §1.1).
   Overstyrer samtidig den site-wide .builder-left { max-width:1100px }-regel
   (bruges IKKE af report-edit.php, som aldrig får body.builder-page), ellers
   ville loftet forhindre den nye 60%-andel i at virke på brede skærme.
   Ingen dragbar splitter er tilføjet — kun det faste forhold, som
   opgavebeskrivelsen selv tillader ("splitter/dragbar må gerne bevares",
   dvs. er ikke et krav). */
body.builder-page .builder-left { flex: var(--builder-split-left) 1 0%; max-width: none; min-width: 0; }
body.builder-page .builder-preview-wrap { flex: var(--builder-split-right) 1 0%; min-width: 240px; }
body.builder-page .builder-left { display: flex; flex-direction: column; overflow: hidden; }
/* UI-rettelse §6/7 (docs/ui-fixes-7-items-report.md): gap:32px tilføjet
   mellem Struktur-panelet og selve editor-indholdet — panelet har nu sin
   EGEN ramme (border/baggrund, se .builder-nav-panel nedenfor) i stedet for
   kun at være adskilt af .tab-content-panels border-left (fjernet, §7). */
body.builder-page .builder-body-wrap { flex: 1; overflow: hidden; display: flex; min-height: 0; margin-top: 20px; gap: 32px; }
body.builder-page .tab-content-panel { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }
body.builder-page .builder-preview-wrap { overflow-y: auto; max-height: 100%; }
/* Builder-polish §C: hele indholdsområdet (inkl. preview-panelet) skal være
   --paper, aldrig hvid/grå — i praksis allerede sandt, da ingen af disse
   elementer tidligere satte en EGEN baggrund (de arvede --paper fra <body>);
   gjort eksplicit her så det ikke afhænger af stiltiende arv. */
body.builder-page .builder-split, body.builder-page .builder-columns, body.builder-page .builder-left,
body.builder-page .builder-body-wrap, body.builder-page .tab-content-panel,
body.builder-page .builder-preview-wrap, body.builder-page .preview-panel-inner {
    background: var(--paper);
}

/* Venstre navigationskolonne i Spørgeskema-fanen, server-genereret af
   render_builder_nav_panel() (survey-edit.php). Overblik-panel-rettelser
   (docs/admin-overblik-panel-fixes-report.md) §3: collapse er nu en
   bredde-krympende .collapsed-klasse (panelet forbliver synligt og viser
   kun side-labels) i stedet for hidden-attributten/genåbn-knappen fra en
   tidligere opgave — begge er fjernet.
   UI-rettelse §6 (docs/ui-fixes-7-items-report.md): fik sin egen kort-ramme
   (border/border-radius/--card-baggrund, erstatter den tidligere
   border-right/border-left-adskillelse fra .tab-content-panel, se §7) samt
   align-self:flex-start, så panelet passer til indholdets højde i stedet for
   at strække sig til samme højde som sin flex-søskende (.tab-content-panel). */
.builder-nav-panel {
    width: 220px; flex-shrink: 0; align-self: flex-start;
    border: 1px solid var(--line); border-radius: 15px; background: var(--card);
    overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px;
    transition: width .2s ease;
}
.builder-nav-panel.collapsed { width: 120px; }
.builder-nav-panel.collapsed .bnp-q-item { display: none; }
.builder-nav-panel.collapsed .bnp-head-label { display: none; }
.builder-nav-panel.collapsed .bnp-page-label { font-size: 10.5px; padding: 7px 6px; text-align: center; }

/* Builder-polish §B (struktur+type-badges) + Builder-layout §2
   (docs/admin-builder-layout-report.md: omdøbt til "Overblik", ankre + let
   indramning pr. side). */
.bnp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; flex-shrink: 0; }
.bnp-head-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bnp-collapse-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; cursor: pointer; color: var(--muted); border-radius: var(--radius); flex-shrink: 0; }
.bnp-collapse-btn:hover { background: var(--sage-light); color: var(--ink); }
.bnp-collapse-btn svg { width: 13px; height: 13px; transition: transform .2s ease; }
.bnp-collapse-btn.collapsed svg { transform: rotate(180deg); }

.bnp-page-group { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; overflow: hidden; }
/* §2: var(--card) (hvid) i stedet for var(--paper) — skiller labelen
   visuelt fra panelets egen --paper-baggrund. */
.bnp-page-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); padding: 7px 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; background: var(--card); border-bottom: 1px solid var(--line); }
.bnp-page-label:hover { color: var(--ink); }

/* Drag-and-drop i strukturlisten (assets/js/builder-nav-sort.js, SortableJS).
   Håndtaget (⠿) er det eneste, der starter et træk, og vises kun ved hover
   (altid synligt på touch). Pladsen er reserveret hele tiden, så rækken ikke
   hopper. .bnp-ghost er pladsholderen, der viser hvor elementet lander (drop-
   zone-indikator). */
.bnp-page-head { display: flex; align-items: center; background: var(--card); border-bottom: 1px solid var(--line); }
.bnp-page-head .bnp-page-label { flex: 1; min-width: 0; border-bottom: none; }
.bnp-handle {
    flex-shrink: 0; width: 14px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: grab; opacity: 0; transition: opacity .12s; font-size: 14px;
}
.bnp-page-head .bnp-handle { margin-left: 4px; }
.bnp-page-head:hover .bnp-handle, .bnp-q-item:hover .bnp-handle { opacity: 1; }
.bnp-handle:active { cursor: grabbing; }
/* Ingen native link-/billed-træk eller tekstmarkering på de trækbare rækker
   (forhindrer Chromes link-træk/"Opret opdelt visning", se builder-nav-sort.js). */
.bnp-q-item, .bnp-page-label, .bnp-handle { -webkit-user-drag: none; user-select: none; }
/* Den trukne klon (SortableJS fallbackOnBody → sættes på <body>, uden for panelet). */
.bnp-fallback { background: var(--card); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(22, 35, 63, .22); opacity: .95; }
@media (hover: none) { .bnp-handle { opacity: .6; } }
.bnp-q-list { min-height: 4px; }
.bnp-q-list:empty { min-height: 26px; }
.bnp-q-list:empty::after {
    content: attr(data-empty-label); display: block; padding: 6px; text-align: center;
    font-size: 11px; color: var(--muted); opacity: .6;
}
.bnp-ghost { opacity: .45; background: var(--sage-light); outline: 2px dashed var(--sage); outline-offset: -2px; }
.bnp-chosen { box-shadow: 0 4px 14px rgba(22, 35, 63, .18); }
.bnp-drag { opacity: .95; }
.bnp-dragging .bnp-q-list:empty { outline: 2px dashed var(--sage); outline-offset: -2px; }
.bnp-sort-busy { opacity: .6; pointer-events: none; }
.bnp-confirm-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 700;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bnp-confirm-overlay[hidden] { display: none; }
.bnp-confirm-list { margin: 0 0 14px; padding-left: 18px; font-size: 13px; color: var(--text-secondary); }
.bnp-confirm-list:empty { display: none; }

.bnp-q-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius); text-decoration: none; transition: background .1s; cursor: pointer; }
.bnp-q-item:hover { background: var(--sage-light); }
.bnp-q-item.active { background: var(--card); box-shadow: 0 1px 3px rgba(22, 35, 63, .08); }

.bnp-num { font-size: 11px; font-weight: 600; color: var(--muted); width: 18px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.bnp-text { font-size: 12.5px; color: var(--ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.bnp-q-item:not(:hover) .bnp-text { color: var(--muted); }
.bnp-q-item:hover .bnp-text, .bnp-q-item.active .bnp-text { color: var(--ink); }

.bnp-type { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; border: 1px solid; white-space: nowrap; }
.bnp-type-text { background: #FBF5EE; color: #8B5E3C; border-color: #E8D5BE; }
.bnp-type-valg { background: #EEF3EF; color: #2d7a3a; border-color: #C4D9C7; }
.bnp-type-skala { background: #EEF2FA; color: #3B5FA0; border-color: #C4D0E8; }
/* .bnp-type-vælg (lilla) fra opgavebeskrivelsen er bevaret men bruges aldrig
   i praksis — ingen reel spørgsmålstype i denne kodebase svarer til
   "select/dropdown" (se render_builder_nav_panel()'s kommentar). */
.bnp-type-vælg { background: #F3F0FA; color: #6B4DA0; border-color: #D0C4E8; }
.bnp-type-andet { background: #F3F4F6; color: var(--muted); border-color: #E5E7EB; }

/* Builder-layout §1 (docs/admin-builder-layout-report.md): enhedsikonerne og
   "Forhåndsvisning"-labelen flyttede til fane-baren, så den tidligere
   header-strip-styling (var(--card)-baggrund/bundstreg, tilføjet i en
   tidligere opgave) er fjernet igen — .device-toggle rummer nu KUN
   luk-knappen til den mobile modal-visning (<1200px), ellers tom/usynlig på
   desktop. */
.device-toggle { display: flex; justify-content: flex-end; min-height: 0; }
.device-toggle-btn {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted);
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; padding: 0;
}
.device-toggle-btn svg { width: 24px; height: 24px; }
.device-toggle-btn:hover { border-color: var(--sage); color: var(--ink); }
.device-toggle-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Vieweren centreres i den ledige plads: panelet fylder al resterende
   bredde, og enheds-"skallen" (skærm + evt. stativ/hjem-knap/hak) centreres
   heri med flex, uanset om enheden har en %-bredde (desktop) eller fast
   pixelbredde (tablet/mobil) — undgår cirkulær %-af-auto-bredde-beregning. */
.builder-preview-panel { width: 100%; position: sticky; top: 20px; }
.device-frame-outer { width: 100%; padding-bottom: 8px; }
.device-shell { display: flex; flex-direction: column; align-items: center; width: 100%; }
.device-frame {
    border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff;
    box-shadow: 0 2px 14px rgba(22, 35, 63, .1); transition: width .2s ease, height .2s ease; max-width: 100%;
}
.device-frame iframe { display: block; width: 100%; height: 100%; border: none; }
.device-frame.device-desktop { width: 85%; height: 640px; border-radius: 8px; }
.device-frame.device-tablet { width: 600px; height: 780px; border-radius: 22px; border-width: 12px; }
.device-frame.device-mobile { width: 480px; height: 860px; border-radius: 34px; border-width: 12px; }

/* Diskrete enheds-detaljer, så rammerne mere ligner en rigtig PC/iPad/telefon */
.device-notch-bar { width: 90px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .55; margin-bottom: 8px; }
.device-home-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); opacity: .55; margin-top: 10px; }
.device-stand-neck { width: 64px; height: 28px; background: var(--ink); opacity: .9; }
.device-stand-base { width: 240px; max-width: 60%; height: 14px; border-radius: 7px; background: var(--ink); opacity: .9; margin-top: 2px; }

.preview-modal-close { display: none; }

/* Rapport-builder: samme to-panel mekanik som survey-builderen, blot uden
   enheds-toggle — rapporten er én visning (skærm/print), ikke tre. */
.report-preview-frame-outer { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.report-preview-frame-outer iframe { display: block; width: 100%; height: 900px; border: none; }

.na-toggle-btn { margin: -6px 0 14px; }
.na-toggle-btn.active { background: var(--sage); border-color: var(--sage); color: #fff; }

/* "Indsæt standardskala"-dropdown i matrix-kolonnesektionen — diskret,
   må ikke dominere UI'et. */
.scale-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.scale-chip-label { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.scale-select { font-size: 12.5px; padding: 4px 8px; max-width: 260px; }
.scale-locked-hint { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; }
.link-btn {
    background: none; border: none; padding: 0; margin: 0; color: var(--sage);
    font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--ink); }
/* Smiley-header-række (se render_matrix() i question_render.php) — sidder
   direkte oven på tekst-header-rækken uden mellemrum, så de to rækker læses
   som ét sammenhørende, aligned kolonnehoved. */
.matrix-icon-row th { padding: 4px 6px 0; font-size: 19px; font-weight: 400; line-height: 1.2; }

/* ---------- Design-sektion: tema-presets (survey-edit.php Generelt-fane) ---------- */
.theme-preset-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-preset-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px;
    border: 1.5px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; position: relative;
    transition: border-color .15s ease, background .15s ease;
}
.theme-preset-option:hover { border-color: var(--sage); }
.theme-preset-option.active { border-color: var(--ink); background: var(--sage-light); }
.theme-preset-swatch { display: flex; border-radius: 50%; overflow: hidden; width: 32px; height: 32px; border: 1px solid var(--line); }
.theme-preset-swatch span { flex: 1; }
.theme-preset-swatch-custom { align-items: center; justify-content: center; font-size: 16px; background: #F5F4F0; }
.theme-preset-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.theme-preset-option.active .theme-preset-name { color: var(--ink); font-weight: 600; }

/* ---------- Survey-builderens header (survey-edit.php) ----------
   Admin UI-overhaul (2026-10-07, se docs/admin-overhaul-report.md §2.4,
   komprimeret til 2 rækker i docs/admin-builder-polish-report.md §A) —
   erstatter render_survey_header_card() KUN på builder-siden. Samlet højde
   (padding + breadcrumb + titel) holdes under 64px, så fane-baren (næste
   række) kommer lige efter uden spildplads. */
/* Fuld-bred header: mørk (--ink), kant-til-kant — flush mod menuen, toppen og højre
   kant. De negative margener svarer præcis til .admin-main's padding (variablerne
   --admin-pad-x/-y, som også mobil-reglen skifter), så headeren aldrig kommer ud af
   trit med shellen. Fallback 0px hvis headeren mod forventning ligger uden for
   .admin-main. Samme behandling som .overview-hero (admin/index.php). */
.builder-header {
    background: var(--ink); color: #fff; border-radius: 0;
    margin: calc(-1 * var(--admin-pad-y, 0px)) calc(-1 * var(--admin-pad-x, 0px)) 18px;
}
.builder-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; }
.builder-header-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.builder-breadcrumb { font-size: 12px; line-height: 1.2; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.builder-breadcrumb a { color: var(--muted); text-decoration: none; }
.builder-breadcrumb a:hover { color: var(--ink); }
.bc-sep { opacity: .35; }
/* .builder-breadcrumb bruges også uden for headeren (help-article.php) på lys baggrund —
   hvid tekst gælder derfor kun inde i den mørke header. */
.builder-header .builder-breadcrumb { color: rgba(255,255,255,.7); }
.builder-header .builder-breadcrumb a { color: rgba(255,255,255,.7); }
.builder-header .builder-breadcrumb a:hover { color: #fff; }
.builder-header .page-head-sub { color: rgba(255,255,255,.78); }
.builder-title { font-size: 30px; line-height: 1.2; font-weight: 700; color: #fff; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.builder-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Survey-builderens fane-bar (survey-edit.php) ----------
   Admin UI-overhaul (2026-10-07): farver/mål flyttet til tokens (--line/
   --muted/--ink/--card/--radius) i stedet for rå hex-værdier — ingen
   klassenavne eller struktur ændret, så intet i Alpine/JS (som ikke
   refererer disse klasser, se docs/admin-overhaul-report.md §1.2) påvirkes. */
.survey-edit-tabs {
    display: flex; align-items: center;
    background: #EEECE8; padding: 5px 12px; gap: 2px;
    border-bottom: 1px solid var(--line); flex-wrap: wrap;
    border-radius: var(--radius-lg);
}
.set-tab {
    display: flex; align-items: center; padding: 6px 13px;
    font-size: 13px; font-weight: 500; color: var(--muted);
    border-radius: var(--radius); white-space: nowrap; text-decoration: none;
    transition: background .15s, color .15s;
}
.set-tab:hover { background: #E2E0DC; color: var(--ink); }
.set-tab.active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(22,35,63,.10); }
.set-tab-divider { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex-shrink: 0; }
.set-tab-spacer { flex: 1; }
/* Beta-feedback punkt 4: advarsel om herreløse logik-referencer, se
   LogicRule::hasOrphanedConditions(). */
.set-tab-warning-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 6px; flex-shrink: 0; }

/* Tab-baren er delt i en builder-halvdel (.set-tabs-builder: faner + "Fortryd")
   og en viewer-halvdel (.set-tabs-viewer: testlink/enheder/eksport). Fra 1300px
   bruger de SAMME variabler som kolonnerne nedenunder (--builder-split-left/-right,
   --builder-gap, se body.builder-page ovenfor), så Fortryd står yderst til højre
   i builder-halvdelen, lige før viewer-siden — på alle bredder. (En tidligere
   50/50-regel fra 1800px passede ikke: kolonnerne er 6:4 på alle bredder, da
   body.builder-page .builder-left slår .builder-split .builder-left.)
   Under 1300px er builder-halvdelen (60%) smallere end fanerne + knappen, så
   den kan ikke flugte med kolonnekanten uden at ombryde: der fylder
   builder-halvdelen i stedet hele rækken (viewer-delen ombrydes under), og
   knappen sidder yderst til højre på fane-rækken. */
.set-tabs-builder { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; flex: 1 1 auto; }
.set-tabs-left { margin-right: 8px; }
.set-tabs-viewer { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; margin-left: auto; flex-wrap: wrap; }
@media (min-width: 1300px) {
    body.builder-page .survey-edit-tabs { gap: var(--builder-gap); flex-wrap: nowrap; }
    body.builder-page .set-tabs-builder {
        flex: var(--builder-split-left) 1 0%;
        /* Containment kun her, hvor bredden er givet af flex-fordelingen (aldrig af
           indholdet) — under 1201px ville den ødelægge den indholds-baserede bredde. */
        container: tabsbuilder / inline-size;
    }
    body.builder-page .set-tabs-viewer { flex: var(--builder-split-right) 1 0%; flex-wrap: nowrap; }
    /* Viewer-halvdelen er smallere end hele rækken (som testlink/enheder/eksport
       før havde for sig selv) — testlink-feltet skrumper, så intet ombrydes. */
    body.builder-page .set-tabs-viewer .set-tabs-right { min-width: 0; flex: 0 1 auto; }
    body.builder-page .set-tabs-viewer .tab-testlink { min-width: 0; }
    body.builder-page .set-tabs-viewer .tab-testlink-input { min-width: 60px; width: 200px; flex: 0 1 200px; }
}
.tab-undo-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; margin-left: auto;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
    font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
/* Smal builder-halvdel (< 680px): kun ikonet (tooltip bevares) og lidt strammere
   faner, så knappen ikke ombrydes til en ny linje. Container query fra 1300px;
   under 1300px (hvor containment er slået fra) en tilsvarende media query. */
@container tabsbuilder (max-width: 680px) {
    .tab-undo-btn span { display: none; }
    .tab-undo-btn { padding: 5px 8px; }
    .set-tabs-builder .set-tab { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 980px) {
    .tab-undo-btn span { display: none; }
    .tab-undo-btn { padding: 5px 8px; }
}
.tab-undo-btn[hidden] { display: none; }
.tab-undo-btn i { font-size: 15px; }
.tab-undo-btn:hover:not(:disabled) { background: var(--sage-light); border-color: var(--sage); }
.tab-undo-btn:disabled { opacity: .45; cursor: default; }
.builder-undo-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 650; max-width: min(520px, calc(100vw - 40px));
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
    font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.builder-undo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.builder-undo-toast.is-error { background: var(--danger); }

/* Builder-layout §1 (docs/admin-builder-layout-report.md): testlink +
   enhedsikoner, flyttet ind i fane-baren fra det tidligere preview-panel.
   .set-tabs-left/.set-tabs-right er rene grupperings-wrappere — selve
   venstre/højre-fordelingen styres fortsat af .set-tab-spacer (flex:1)
   ovenfor, samme etablerede mønster som Word/PDF/print-ikonerne altid har
   brugt, i stedet for opgavens justify-content:space-between-forslag. */
.set-tabs-left { display: flex; align-items: center; gap: 2px; }
.set-tabs-right { display: flex; align-items: center; gap: 10px; }

.tab-testlink { display: flex; align-items: center; gap: 6px; }
.tab-testlink-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tab-testlink-input { font-size: 11.5px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 8px; max-width: 200px; cursor: pointer; width: 200px; }
.tab-testlink-input:focus { outline: none; border-color: var(--sage); }
.tab-testlink-hint { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* §8 (docs/admin-plus-builder-8-changes-report.md): ikon-knap erstatter den
   tidligere "Kopiér"-tekst (.tab-testlink-hint ovenfor er nu ubrugt). */
.tab-copy-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--muted); flex-shrink: 0; }
.tab-copy-btn:hover { background: #E2E0DC; color: var(--ink); }
.tab-copy-btn svg { width: 14px; height: 14px; }

.tab-device-btns { display: flex; align-items: center; gap: 2px; }
.tab-dev-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--muted); }
.tab-dev-btn:hover { background: #E2E0DC; color: var(--ink); }
.tab-dev-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(22, 35, 63, .10); }
.tab-dev-btn svg { width: 15px; height: 15px; }

/* ---------- Design-fanen: "kortvalg" (Layout + Design-stil), samme
   grundmønster som .theme-preset-option ovenfor, men rektangulære kort med
   en lille forhåndsvisning i stedet for en farve-cirkel. ---------- */
.card-choice-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.card-choice-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px;
    border: 1.5px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; position: relative;
    width: 128px; transition: border-color .15s ease, background .15s ease;
}
.card-choice-option:hover { border-color: var(--sage); }
.card-choice-option.active { border-color: var(--ink); background: var(--sage-light); }
.card-choice-thumb {
    width: 100%; height: 72px; border-radius: 6px; background: #fff; border: 1px solid var(--line);
    overflow: hidden; position: relative; display: flex;
}
.card-choice-name { font-size: 12.5px; color: var(--muted); text-align: center; }
.card-choice-option.active .card-choice-name { color: var(--ink); font-weight: 600; }
.card-choice-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

@media (max-width: 1200px) {
    .builder-split { flex-direction: column; }
    .preview-mobile-trigger { display: inline-flex; }
    .builder-preview-panel { display: none; width: auto; position: static; }
    .builder-preview-panel.preview-modal-open {
        display: flex; justify-content: center; position: fixed; inset: 0; z-index: 300;
        background: rgba(22, 35, 63, .6); padding: 40px 20px; overflow: auto;
    }
    .preview-modal-open .preview-panel-inner { background: #fff; border-radius: 16px; padding: 20px; height: fit-content; width: 100%; max-width: 680px; }
    .preview-modal-open .preview-modal-close { display: inline-flex; }
}

/* ---------- Survey-builder: fold preview ind/ud + desktop-rammens proportioner ----------
   Samlet i ÉN blok og bevidst KUN additiv: ingen af reglerne ovenfor er ændret —
   alt her overstyrer via højere specificitet (klassen .builder-split foran).
   Rollback: slet denne blok, knappen (.preview-collapse-anchor) og scriptet lige
   efter den i admin/survey-edit.php. */

/* Desktop-rammens højde følger bredden (16:10) i stedet for de faste 640px, der
   på smalle paneler (fx 1080p, ca. 388px bred) gav et portrætformat der lignede en
   telefon. Gælder alle bredder inkl. modalen under 1200px. Tablet og mobil er
   uændrede. box-sizing er border-box (global regel), så forholdet gælder hele
   rammen inkl. kanten; iframen fylder resten (height:100%). */
.builder-split .device-frame.device-desktop { height: auto; aspect-ratio: 16 / 10; }

/* Foldeknappen: et sticky anker uden højde (følger panelets top:20px uden at
   skubbe det), med selve knappen placeret i højre kant af enheds-knaprækken. */
.preview-collapse-anchor { position: sticky; top: 20px; height: 0; z-index: 5; }
.preview-collapse-btn { position: absolute; top: 0; right: 0; }
.preview-collapse-btn .preview-icon-expand { display: none; }
.preview-collapsed .preview-collapse-btn .preview-icon-collapse { display: none; }
.preview-collapsed .preview-collapse-btn .preview-icon-expand { display: block; }

@media (min-width: 1201px) {
    /* Foldet ind: panelet skjules, højre kolonne skrumper til en 48px stribe med
       knappen alene, og editoren beholder sin max-bredde (1100px) centreret i
       pladsen til venstre for striben. */
    .builder-split.preview-collapsed .builder-preview-panel { display: none; }
    .builder-split.preview-collapsed .builder-preview-wrap { flex: 0 0 48px; min-width: 0; }
    .builder-split.preview-collapsed .builder-left { flex: 1 1 auto; max-width: 1100px; margin: 0 auto; }
}
@media (max-width: 1200px) {
    /* Under 1200px er preview allerede en modal med sin egen åbne-knap. */
    .preview-collapse-anchor { display: none; }
}

/* ---------- Survey-builder: 50/50-split + testlink i preview-panelet ----------
   Samme princip som blokken ovenfor: kun additiv, overstyrer via højere
   specificitet. Rollback: slet denne blok, og gendan render_survey_export_icons()/
   render_survey_testlink_line() (layout.php) samt fane-linjen og panel-markup i
   survey-edit.php fra git. */

/* Testlink-linjen mellem enhedsknapperne og iframen (render_survey_testlink_line()).
   En del af .builder-preview-panel, så den forsvinder sammen med panelet ved
   fold-ind og vises i modalen under 1200px. Bevidst lille og dæmpet, centreret
   under enhedsknapperne. Feltet er fleksibelt (ikke fast bredde), så det passer i
   både det smalle (300px) og det brede panel; en lang URL klippes blot i feltet —
   kopiér-knappen kopierer altid hele linket. Margin-top er negativ, fordi
   .device-toggle allerede har 16px margin nedad. */
.preview-testlink {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: -4px 0 12px; font-size: 11.5px; color: var(--muted);
}
.preview-testlink-label { white-space: nowrap; }
.preview-testlink input[type="text"] {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: 360px; height: 24px;
    padding: 3px 8px; font-size: 11.5px; color: var(--muted);
}
.preview-testlink .copy-icon-btn { width: 22px; height: 22px; }
.preview-testlink .copy-icon-btn svg { width: 12px; height: 12px; }

/* Editor og preview deler pladsen 50/50 (efter de 32px mellemrum: calc(50% - 16px)
   på begge, ellers ville 50% + 50% + gap overflowe). Kun fra 1800px, hvor editoren
   stadig har plads til de lange faner (ca. 710px) — under det bevares det
   eksisterende layout. Ligger BEVIDST uden for ≤1200px-tilstanden (kolonne + modal):
   max-width ville ellers begrænse editoren til halv bredde i kolonnelayoutet.
   Foldet-ind-reglerne ovenfor (specificitet 0,3,0) vinder stadig over disse (0,2,0). */
@media (min-width: 1800px) {
    .builder-split .builder-left { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
    .builder-split .builder-preview-wrap { flex: 0 0 calc(50% - 16px); }
}

/* ---------- Respondent flow (from approved mockup) ---------- */
.rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 64px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; padding-top: 40px; gap: 28px;
}
.rail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); position: relative; }
.rail .dot.done { background: var(--sage); }
.rail .dot.current { background: var(--ink); width: 11px; height: 11px; }
.rail .dot.current::after { content: ''; position: absolute; inset: -6px; border: 1px solid var(--ink); border-radius: 50%; }

/* "Sektioneret"-layoutets side-fremdriftsprikker (.journey, se
   survey/layouts/sectioned.php) — samme visuelle sprog som .rail .dot
   ovenfor (ubesøgt/besøgt/nuværende), men en vandret række i stedet for en
   lodret venstre-rail. .dot .current/.done sættes/opdateres af
   assets/js/app.js's initStepper(), samme sted som tælleren og
   fremdriftsbjælken for de øvrige layouts. */
.journey .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); position: relative; }
.journey .dot.done { background: var(--sage); }
.journey .dot.current { background: var(--ink); width: 11px; height: 11px; }
.journey .dot.current::after { content: ''; position: absolute; inset: -6px; border: 1px solid var(--ink); border-radius: 50%; }

/* box-sizing: content-box overstyrer den globale border-box-regel (linje 23)
   bevidst — ellers tæller den asymmetriske venstre-padding (96px, plads til
   .rail) OG højre-padding (24px) med INDENI max-width, så det faktiske
   indholdsområde reelt kun blev 640-24-96=520px i stedet for de tiltænkte
   640px. max-width refererer nu til selve indholdet, ikke boksen inkl. padding. */
.survey-wrap { box-sizing: content-box; max-width: 700px; margin: 0 auto; padding: 64px 24px 120px 96px; }
.survey-org { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 14px; }
.progress-label { margin-top: 28px; font-size: 13px; color: var(--muted); }
.progress-track { margin-top: 8px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sage); transition: width .3s ease; }

.q { margin-bottom: 52px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.q:last-of-type { border-bottom: none; }
.q-text { font-size: 19px; font-weight: 500; margin: 0 0 6px; letter-spacing: -.005em; }
.q-hint { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.q-required-error {
    font-size: 13px; color: var(--danger); background: var(--danger-bg); border: 1px solid #E8B4A0;
    border-radius: var(--radius); padding: 6px 10px; margin-top: 10px;
}

/* ---------- Indholdsblokke (overskrift/fritekst) mellem spørgsmål ---------- */
.content-block { margin-bottom: 52px; }
.content-block-heading { margin: 0 0 4px; font-size: 20px; }
.content-block-text { font-size: 16px; line-height: 1.6; color: var(--ink); }
.content-block-text h3 { margin: 0 0 8px; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer; font-size: 15px; transition: border-color .15s ease, background .15s ease;
}
.option:hover { border-color: var(--sage); background: var(--sage-light); }
.option.selected { border-color: var(--ink); background: #F0EFEA; }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9B6AC; flex-shrink: 0; position: relative; }
.option.selected .radio { border-color: var(--ink); }
.option.selected .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #B9B6AC; flex-shrink: 0; position: relative; }
.option.selected .checkbox { border-color: var(--ink); background: var(--ink); }
.option.selected .checkbox::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }

.scale-row { display: flex; gap: 8px; flex-wrap: wrap; }
.scale-cell { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
.scale-cell:hover { border-color: var(--sage); }
.scale-cell.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Valgfri tekst-forklaring under skalaens endepunkter (min_label/max_label,
   se render_scale() i question_render.php) — placeret under første/sidste
   celle, ikke under alle celler, da de kun beskriver endepunkterne. */
.scale-endpoint-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }
.scale-endpoint-label { max-width: 45%; }
.scale-endpoint-label-max { text-align: right; }
/* Lodret skala med endepunkt-labels ved siden af tallet (se render_scale()'s
   $isVertical i question_render.php) — bruges i stedet for den vandrette
   linje + labels-under-hele-skalaen ovenfor, når skalaen er numerisk og har
   mindst én label sat. .scale-cell BEHOLDER sin normale, faste
   kvadrat-størrelse (44×44, uændret fra .scale-cell ovenfor) — det er kun
   selve RÆKKEN der stables lodret, og labelen der sidder som sideordnet
   tekst i samme linje som firkanten, ikke inde i den. */
.scale-row-vertical { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.scale-line { display: flex; align-items: center; gap: 10px; }
.scale-cell-label { color: var(--muted); font-size: 13px; }
/* NPS (0-10 + "Ved ikke"): smallere celler og ingen ombrydning, så hele
   skalaen kan stå på én linje uden vandret scroll (som viste sig ikke at
   virke godt) — cellerne er bevidst holdt små nok til at 12 elementer altid
   kan være med på én linje, selv i den smalleste enheds-forhåndsvisning
   (mobil, 480px). "Ved ikke" sizes efter sit eget tekstindhold (width: auto)
   i stedet for at dele den faste kvadratiske cellebredde, så teksten aldrig
   klippes. Falder tilbage til ombrydning på rigtigt smalle skærme. */
.scale-row-nps { flex-wrap: nowrap; gap: 4px; }
.scale-row-nps .scale-cell { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
.scale-row-nps .scale-dontknow { width: auto; padding: 0 8px; white-space: nowrap; margin-left: 4px; font-size: 11px; }
@media (max-width: 420px) {
    .scale-row-nps { flex-wrap: wrap; }
    .scale-row-nps .scale-dontknow { margin-left: 0; }
}
.scale-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 340px; }
.scale-star { font-size: 30px; cursor: pointer; color: var(--line); }
.scale-star.selected, .scale-star.hover { color: #E8B84A; }
.scale-emoji { font-size: 30px; cursor: pointer; opacity: .35; }
.scale-emoji.selected { opacity: 1; }

.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matrix th { font-weight: 500; color: var(--muted); padding: 0 6px 12px; text-align: center; }
.matrix th:first-child { text-align: left; }
.matrix td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--line); }
.matrix td:first-child { text-align: left; font-weight: 500; }
.matrix input[type=radio] { accent-color: var(--ink); width: 16px; height: 16px; }

/* ---------- Matrix på mobil: dropdown pr. udsagn i stedet for et trangt
   gitter. Begge udgaver findes altid i DOM'en (se render_matrix_desktop()/
   render_matrix_mobile() i question_render.php) — kun visningen styres her;
   assets/js/app.js's initMatrixMobileToggle() sørger for at deaktivere den
   skjulte udgaves inputs, så kun ét sæt svar indgår i indsendelsen. ---------- */
.matrix-mobile { display: none; }
@media (max-width: 720px) {
    .matrix-desktop { display: none; }
    .matrix-mobile { display: block; }
}
.matrix-mobile-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.matrix-mobile-row:first-child { border-top: none; }
.matrix-mobile-label { font-size: 14px; flex: 1; }
.matrix-mobile-select { flex-shrink: 0; max-width: 55%; }

.nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
/* "Vis/print min besvarelse efter afslutning"-feltet, sidste side (se
   .print-response-field i survey/layouts/*.php + initStepper() i app.js, som
   styrer display:none/'' alt efter om det aktuelle step rent faktisk er det
   sidste). Skjult som standard (inline style), vises kun lige over Indsend. */
.print-response-field { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; font-size: 14px; cursor: pointer; }
.print-response-field input { margin: 0; width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Design-stil (surveys.design_style, Design-fanen) ----------
   Tre stile: 'struktur', 'stilfuld', 'bloed' (visningsnavn "Blød"). Stilen sættes som en ekstra
   klasse .style-{værdi} på survey-wrapperen: .survey-wrap i classic.php og
   admin/survey-preview.php (single-visning), den ydre container i sectioned.php. NULL (ingen
   stil valgt) giver INGEN klasse og dermed uændret rendering. (Ikke [data-style]: den attribut
   bruges allerede af .scale-row til skala-typen, se render_scale().)
   Faktiske selektorer: survey-titel h1; sidetitel h2 (sectioned) og .content-block-heading;
   spørgsmålsblok .q-block (classic/preview: .q.q-block, sectioned: ren div.q-block —
   indholdsblokke har ikke .q-block); spørgsmålstekst .q-text; svarmulighed label.option;
   matrix table.matrix (kun <th>-rækker som header, ingen <thead>). Surveyet har ingen
   beskrivelsestekst, så der er ingen .SURVEY-DESC-regler. Skrifttyperne indlæses kun for den
   valgte stil, se survey_design_font_links() i includes/functions.php. */

/* ── Struktur ── Saira overskrifter + DM Sans brødtekst + linjer under overskrifter */
.style-struktur { --ds-heading-font: 'Saira', system-ui, sans-serif; --ds-body-font: 'DM Sans', system-ui, sans-serif; font-family: var(--ds-body-font); }
.style-struktur h1 { font-family: var(--ds-heading-font); font-weight: 800; letter-spacing: -0.01em; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.style-struktur h2, .style-struktur .content-block-heading { font-family: var(--ds-heading-font); font-weight: 700; }
.style-struktur .q-text { font-family: var(--ds-heading-font); font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.style-struktur .option { font-family: var(--ds-body-font); }
.style-struktur .matrix { font-family: var(--ds-body-font); }
.style-struktur .matrix th { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* ── Stilfuld ── Plus Jakarta Sans gennemgående + nummererede spørgsmål + striber i matrix */
.style-stilfuld { --ds-font: 'Plus Jakarta Sans', system-ui, sans-serif; font-family: var(--ds-font); }
.style-stilfuld h1 { font-family: var(--ds-font); font-weight: 700; }
.style-stilfuld h2, .style-stilfuld .content-block-heading { font-family: var(--ds-font); font-weight: 600; }
/* Nummercirklen: .q-block's børn (.q-text/.q-hint/.q-field) er søskende, så en flex-række med ::before
   ville lægge dem side om side. I stedet indrykkes blokken, og cirklen placeres absolut i
   indrykningen (samme visuelt som cirkel + indhold i to kolonner). Nummeret kommer fra PHP
   (data-qnum, løbende på tværs af sider) frem for en CSS-counter: survey'ets sider vises én ad
   gangen (skjulte .step-elementer tæller ikke i en counter), så en counter ville starte forfra på
   hver side. Konsekvens: et spørgsmål skjult af betinget logik efterlader et hul i nummereringen. */
.style-stilfuld .q-block { position: relative; padding-left: 32px; }
.style-stilfuld .q-block::before {
    content: attr(data-qnum); position: absolute; left: 0; top: 3px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--sage); color: #fff;
    font-family: var(--ds-font); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.style-stilfuld .q-text { font-family: var(--ds-font); font-weight: 600; margin-bottom: 8px; }
.style-stilfuld .option { font-family: var(--ds-font); }
.style-stilfuld .matrix { font-family: var(--ds-font); }
.style-stilfuld .matrix th { font-size: 0.85em; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.style-stilfuld .matrix tr:nth-child(even) td { background: rgba(107, 143, 113, 0.07); }
.style-stilfuld .matrix td { padding-block: 6px; }

/* ── Blød ── Fraunces serif-overskrifter + Source Sans 3 + venstre-accent på spørgsmål */
.style-bloed { --ds-body-font: 'Source Sans 3', system-ui, sans-serif; font-family: var(--ds-body-font); }
.style-bloed h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
.style-bloed h2, .style-bloed .content-block-heading { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.style-bloed .q-block { border-left: 3px solid var(--sage); padding-left: 12px; }
.style-bloed .q-text { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.style-bloed .option { font-family: var(--ds-body-font); font-size: 0.95em; }
.style-bloed .matrix { font-family: var(--ds-body-font); }
.style-bloed .matrix th { background: rgba(107, 143, 113, 0.08); color: var(--sage); font-size: 0.85em; font-weight: 600; padding-block: 5px; }
/* Design-fanens kort-thumbnails (admin/includes/builder/design_tab.php) —
   rene CSS-mockups, ingen billedfiler. Layout-kortene efterligner selve
   sideformen (fuld bredde vs. et centreret kort); stil-kortene efterligner
   typografi/kant-afrunding via de SAMME skrifttyper/radier som ovenfor. */
.card-choice-thumb-classic { flex-direction: column; justify-content: flex-start; padding: 8px 10px; gap: 4px; }
.card-choice-thumb-sectioned { align-items: center; justify-content: center; background: #f3f4f7; }
.card-choice-thumb-sectioned-card { width: 70%; height: 70%; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); display: flex; flex-direction: column; }
/* Admin+builder §6c (docs/admin-plus-builder-8-changes-report.md): mere
   detaljerede mockup-elementer (bjælke/linje/radio-række) inde i
   .card-choice-thumb-classic/-sectioned-card ovenfor, i stedet for de
   tidligere rene streger. */
.lt-bar { height: 6px; background: var(--sage); border-radius: 2px; width: 40%; }
.lt-line { height: 4px; background: var(--line); border-radius: 2px; }
.lt-line-short { width: 60%; }
.lt-radio-row { display: flex; gap: 4px; margin-top: 2px; }
.lt-radio-row span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; }
.card-choice-thumb-style { flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px 12px; gap: 6px; }
.card-choice-thumb-style span { display: block; background: var(--line); }
.card-choice-thumb-style .thumb-title { height: 6px; width: 60%; background: #9aa5b8; }
.card-choice-thumb-style .thumb-row { height: 14px; width: 100%; }
.card-choice-thumb-struktur .thumb-title { border-bottom: 1.5px solid #9aa5b8; height: 8px; background: transparent; border-radius: 0; }
.card-choice-thumb-struktur .thumb-row { border-radius: 0; border: 1px solid var(--line); background: transparent; }
.card-choice-thumb-stilfuld .thumb-row { border-radius: 10px; border: 0; background: rgba(107, 143, 113, 0.18); }
.card-choice-thumb-bloed .thumb-row { border-radius: 4px; border: 1px solid var(--line); border-left: 3px solid var(--sage); background: transparent; }

.ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ranking-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; cursor: grab; font-size: 15px;
}
.ranking-item.dragging { opacity: .4; }
.ranking-handle { color: var(--muted); font-size: 13px; }

/* Lille "×"-knap til at slette en enkelt svarmulighed/række i builderen */
.option-delete-btn {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.option-delete-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.option-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }

/* ---------- Sideramme + luft mellem elementer (survey-builder) ----------
   Hver side er allerede et .card; .builder-page-card lægger en svag skygge
   oveni og en streg under sidens egen topbar, så "rammen om siden" træder
   tydeligere frem fra papirbaggrunden uden at ændre .card globalt. */
.builder-page-card { box-shadow: 0 1px 3px rgba(22, 35, 63, .07); }
.builder-page-card > .admin-topbar { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* Hvert spørgsmål/overskrift/tekstblok er sin egen tydeligt afgrænsede boks
   (frem for blot en tynd streg mellem dem) med en svagt anderledes baggrund
   (samme farve som papiret udenfor sidens hvide kort) — det er DET der giver
   "luft imellem elementer": indholdet drukner ikke længere sammen. Skalerer
   stadig tætheden INDE i hvert kort — resten af adminpanelet (generelle
   indstillinger, login osv.) bruger fortsat de almindelige, mere luftige
   .field/label/input-regler ovenfor. */
.question-card {
    padding: 20px 20px 0px; margin-bottom: 16px; position: relative;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
}
/* Admin+builder §3: fastgjort elementtype-"fane(r)" i kortets øverste højre
   hjørne (docs/admin-plus-builder-8-changes-report.md). Første fane viser
   altid elementtypen (Overskrift/Tekst/Spørgsmål); for rigtige spørgsmål
   tilføjes en ekstra, mindre markant fane med den PRÆCISE spørgsmålstype
   (fx "Enkeltvalg (radio)") — ingen separat badge andetsteds i kortet
   længere, info'en står kun her. */
.qcard-type-tabs { position: absolute; top: 0; right: 0; display: flex; }
.qcard-type-tab {
    font-size: 10px; font-weight: 600; color: var(--muted); background: var(--paper);
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 3px 9px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.qcard-type-tabs .qcard-type-tab:last-child { border-radius: 0 var(--radius) 0 var(--radius); }
.qcard-type-tab-secondary { font-weight: 500; text-transform: none; letter-spacing: 0; background: #F5F4F0; }
.question-card:last-child { margin-bottom: 0; }
.question-card .admin-topbar { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); justify-content: flex-start; }
/* Indholdstype-badges i toppen af hvert kort — erstatter den tidligere
   "Side X, spørgsmål Y"-tekst, som blev meningsløs så snart overskrifter/
   tekstblokke (der ikke er "spørgsmål Y" i nogens forstand) kunne indgå i
   samme rækkefølge. Første boks siger altid Overskrift/Tekst/Spørgsmål;
   anden, mindre markante boks viser kun den PRÆCISE spørgsmålstype, og kun
   for rigtige spørgsmål. */
.q-kind-badge, .q-type-badge {
    display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12.5px;
}
.q-kind-badge { background: #fff; color: var(--ink); font-weight: 600; border: 1px solid var(--line); border-radius: var(--radius); }
.q-type-badge { background: #F5F4F0; color: var(--muted); font-weight: 500; border: 1px solid var(--line); border-radius: 20px; }
/* "Gemt ✓"-indikatoren i spørgsmålskortets header-række (til venstre for
   "Flyt"-knappen, se render_question_card() i pages_tab.php). Badge'et er
   ALTID til stede i layoutet (aldrig display:none) — kun opaciteten
   animeres, så et fade-ind/-ud aldrig ændrer kortets højde. .is-visible
   sættes/fjernes af onQuestionSaved() i assets/js/builder-preview.js. */
.q-saved-badge { opacity: 0; transition: opacity 200ms ease; }
.q-saved-badge.is-visible { opacity: 1; }
.hint-toggle-link {
    background: none; border: none; padding: 0; margin: 0 0 8px; display: block;
    color: var(--sage); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.hint-toggle-link:hover { color: var(--ink); }

/* ---------- Åbent link-visning (survey-edit.php Generelt-fane) ---------- */
.open-link-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.open-link-text { font-size: 12.5px; color: #4B4B4B; word-break: break-all; }
.copy-icon-btn {
    flex-shrink: 0; width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.copy-icon-btn svg { width: 14px; height: 14px; }
.copy-icon-btn:hover { border-color: var(--sage); color: var(--ink); }
.copy-icon-btn.copied { border-color: var(--sage); color: var(--sage); }
.open-link-qr-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.open-link-qr-canvas { border: 1px solid var(--line); border-radius: var(--radius); }

/* "Link med baggrundsvariable" (render_open_link_prefill_section() i
   admin/includes/layout.php) — genbruger .variables-field-grid's layout
   for konsistens med baggrundsskema-fanens svarmulighed-grid. */
.prefill-var-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) {
    .prefill-var-grid { grid-template-columns: 1fr; }
}

/* ---------- Simpel bold/italic/underline(/overskrift)-editor ---------- */
.richtext-field { margin-bottom: 4px; position: relative; }
.richtext-editor {
    min-height: 32px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 13.5px; background: #fff; outline: none; line-height: 1.4;
}
.richtext-editor:focus { border-color: var(--sage); }
.richtext-editor h3 { font-size: 22px; margin: 4px 0; font-family: 'Source Serif 4', serif; font-weight: 600; }
.richtext-editor a { color: var(--sage); text-decoration: underline; }
/* Flerlinjet variant (fx "Tilføj ny tekst"-tekstblokken) — skal ligne et
   rigtigt tekstfelt, ikke en enkelt-linje-input. */
.richtext-editor-multiline { min-height: 76px; align-content: flex-start; }
.richtext-toolbar { display: flex; gap: 4px; margin-top: 5px; }
.richtext-btn {
    min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px;
    background: #F5F4F0; color: var(--ink); font-size: 12.5px; font-family: Georgia, 'Source Serif 4', serif;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.richtext-btn:hover { border-color: var(--sage); background: var(--sage-light); }
.richtext-btn[data-cmd="italic"] i { font-style: italic; }
.richtext-btn[data-cmd="underline"] u { text-decoration: underline; }
.richtext-btn[data-cmd="h3"] { font-weight: 700; }

/* Visuelt skjult, men stadig valideringsberettiget input, der spejler en
   contenteditable-editors indhold — bruges KUN så browserens native
   "Udfyld dette felt."-validering kan vises for et krævet richtext-felt
   (en <input type=hidden> kan per spec ikke selv bære et virkende
   "required"). Positioneres oven i editoren, så en evt. valideringsboble
   dukker op det rigtige sted. */
.richtext-required-proxy {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none;
    padding: 0; margin: 0; pointer-events: none; z-index: -1;
}

/* ---------- "Tilføj indhold"-sektion (spørgsmål/overskrift/tekst) ----------
   Skjult som default bag en lille grøn "+"-boks, så siden ikke drukner i tre
   permanent synlige formularer for hver eneste side i et langt spørgeskema.
   Ét sådant indsætningspunkt gentages FØR det første og EFTER hvert element
   på siden (se render_add_content_slot() i pages_tab.php), så nyt indhold
   kan indsættes hvor som helst i rækkefølgen — centreret, så det læses som
   et "indsæt her"-punkt mellem de to naboelementer, ikke endnu en knap i
   selve kortenes venstre/højre-orienterede knaprækker. */
.add-content-slot { display: flex; justify-content: left; margin: 18px 0; }
/* Samme baggrund/kant/hover som de almindelige .btn.btn-secondary-knapper
   (og .add-type-btn, se ovenfor) — kun formen (rund, ingen tekst) adskiller
   den fra dem. */
.add-content-toggle {
    width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line);
    background: #fff; color: #3f9142; font-size: 18px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.add-content-toggle:hover { border-color: var(--sage); }
/* De tre type-vælger-knapper der glider ind fra venstre når "+" trykkes. */
.add-type-buttons { display: flex; align-items: center; gap: 8px; }
/* Samme visuelle stil som den almindelige .btn.btn-secondary.btn-sm (hvid
   baggrund, tynd kant, grøn "+"-ikon) — oprindeligt havde denne knap sin egen
   sage-udfyldte pille-stil, men rapport-builderens "Tilføj overskrift/
   kommentar/figur"-knapper (almindelige .btn.btn-secondary) blev vurderet
   pænere, så stilen er overført hertil for konsistens på tværs af begge
   buildere. */
.add-type-btn {
    font-family: inherit; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    animation: slide-in-left 200ms ease both;
}
.add-type-btn:nth-child(2) { animation-delay: 70ms; }
.add-type-btn:nth-child(3) { animation-delay: 140ms; }
.add-type-btn:hover { border-color: var(--sage); }
@keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Luk-knap inline i type-vælgerrækken (ikke absolut-positioneret). */
.add-type-close {
    width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); font-size: 14px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    margin-left: 4px; animation: slide-in-left 200ms 210ms ease both;
}
.add-type-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
/* Selve den udfoldede tilføj-boks — kun ÉN elementtype ad gangen. Højre
   padding reserverer plads til luk-knappen (øverste højre hjørne), så den
   ikke overlapper "Tilføj"-knappen i formular-rækken. */
.add-content-grid {
    position: relative; width: 100%;
    padding: 16px 36px 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #dae3dc;
}
/* Formularen inde i boksen: label (fast bredde) + input (fleksibelt) + knap. */
.add-content-form {
    display: flex; align-items: start; gap: 10px; width: 100%;
}
.add-content-form label { width: 160px; flex-shrink: 0; margin: 7px 0 0; white-space: nowrap; font-weight: 600; font-size: 13px; }
.add-content-form select,
.add-content-form > input[type="text"] { flex: 1; }
.add-content-form > div { flex: 1; }
.add-content-form > button[type="submit"] { align-self: start; white-space: nowrap; flex-shrink: 0; }
/* Luk-knap: absolut-positioneret i boksens øverste højre hjørne. */
.add-content-close {
    position: absolute;
    right: 8px;
    top: 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-content-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.richtext-editor.richtext-invalid { border-color: var(--danger); }
.section-divider { border: none; border-top: 2px solid var(--line); margin: 32px 0 24px; }
.question-card .field { margin-bottom: 10px; }
.question-card label { margin-bottom: 2px; font-size: 12px; }
.question-card input[type=text], .question-card input[type=number], .question-card textarea, .question-card select {
    padding: 5px 9px; font-size: 13.5px;
}
.question-card textarea { min-height: 40px; }
.question-card .option-row { margin-bottom: 3px; gap: 6px; }
.question-card .option-row input[type=text] { padding: 5px 8px; font-size: 13px; max-width: 320px; }
.question-card .option-delete-btn { width: 24px; height: 24px; font-size: 14px; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) {
    .matrix-grid { grid-template-columns: 1fr; }
}

/* ---------- Logik-visualisering ("Vis på én side"-forhåndsvisning) ---------- */
.logic-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; display: inline-block; }
.logic-badge-activation { background: var(--sage-light); color: #1F3B24; border: 1px solid var(--sage); }
.logic-badge-skip-trigger { background: var(--danger-bg); color: #7A3B1E; border: 1px solid #E8B4A0; }
.logic-badge-skipped { background: #F3F3F1; color: var(--muted); border: 1px solid var(--line); }
.logic-preview-dimmed { opacity: .55; border-left: 3px dashed var(--line); padding-left: 16px; }

/* ---------- Baggrundsvariable (træk-og-slip-liste) ---------- */
.variables-list { list-style: none; margin: 0; padding: 0; }
.variables-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: #fff; cursor: grab; }
.variables-row.dragging { opacity: .4; }
.drag-handle { color: var(--muted); cursor: grab; font-size: 16px; user-select: none; }
.variables-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) {
    .variables-field-grid { grid-template-columns: 1fr; }
}

/* ---------- E-mailsektion (respondentside) ---------- */
/* To tydelige sektioner ("Afsender"/"Indhold") pr. e-mail-komponist, se
   render_email_composer_section() i admin/includes/email_section.php. */
.email-section {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.email-section-sender { background: var(--sage-light); }
.email-section-content { background: var(--card); }
.email-sender-grid { display: flex; gap: 12px; }
.email-section .field-hint { color: var(--muted); }
/* Labels: 600-vægt/ink som ellers globalt standard, men eksplicit her jf.
   opgavebeskrivelsen — kun afstand OVER labels der ikke er sektionens første. */
.email-section label { font-weight: 600; color: var(--ink); margin-top: 14px; }
.email-section label.label-first { margin-top: 0; }

.email-merge-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px; }
.email-format-toolbar { display: flex; gap: 6px; margin: 0; padding: 10px 12px; }
.email-body-editable {
    width: 100%; min-height: 140px; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); font-family: inherit; font-size: 14.5px; color: var(--ink); background: #fff;
}
.email-body-editable:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); }
.email-body-editable p { margin: 0 0 10px; }

/* Flettefelt-toolbar + formaterings-toolbar + tekstfelt som ÉN samlet,
   omrandet komponent — border-radius kommer fra selve boksen (klippet via
   overflow:hidden), ikke fra hver enkelt del. */
.email-editor-box { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.email-editor-box .email-merge-toolbar,
.email-editor-box .email-format-toolbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.email-editor-box .email-body-editable {
    border: none;
    border-radius: 0;
    background: var(--card);
    min-height: 220px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.email-composer-footer {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 14px 0 0;
    margin-top: 14px;
}

/* Alle knapper på e-mailsiden (Gem/Send forhåndsvisning/flettefelter/
   formatering/AI-knap) skal have samme lyse, neutrale baggrund — uanset om
   de ellers ville have været btn-primary/btn-secondary. */
.email-composer .btn { background: #f1f1f1; color: var(--ink); border-color: #e0e0e0; }
.email-composer .btn:hover { background: #e6e6e6; }
.ai-mail-write-btn.ai-mail-write-busy .ai-mail-write-icon { animation: ai-spin 1.4s linear infinite; }
.send-modal-kind-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.ai-credits-widget { margin-top: auto; padding: 10px 8px; font-size: 12px; color: var(--muted, #6B7280); }
.ai-credits-label { display: block; font-weight: 600; margin-bottom: 4px; }
.ai-credits-value { margin-bottom: 6px; }
.ai-credits-bar { height: 5px; border-radius: 3px; background: #E5E7EB; overflow: hidden; }
.ai-credits-bar-fill { height: 100%; border-radius: 3px; transition: width .2s ease; }
.ai-credits-bar-neutral { background: #7C9A82; }
.ai-credits-bar-amber { background: #D9A441; }
.ai-credits-bar-red { background: #C0503A; }

.ai-btn-exhausted { opacity: .5; cursor: not-allowed; }

/* ---------- AI-CREDIT-BADGE ----------
   Tilføjet af det globale JS-snippet i admin_shell_end() (admin/includes/
   layout.php) til ethvert element med data-ai-credits. Ligger bevidst her i
   app.css og IKKE i custom.css: custom.css er en GENERERET output-fil
   (databasen er master, se includes/models/CustomCss.php) der overskrives
   fuldstændigt, hver gang en super-admin gemmer/nulstiller i
   "Admin → CSS"-panelet — en regel skrevet direkte i filen ville forsvinde
   ved næste redigering dér. .ai-credit-hint-wrap er en usynlig
   hjælpe-wrapper (indsat af samme snippet) der holder knappen + teksten
   sammen i én kolonne, så teksten lander UNDER knappen uden at forrykke
   andre knapper i en vandret række, den evt. sidder i (fx "+ Omskriv" ved
   siden af "Flyt"/"Kopier"/"Slet spørgsmål"). */
.ai-credit-hint-wrap { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; }
.ai-credit-hint { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; letter-spacing: 0.02em; }

.ai-lang-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; }
.ai-lang-checkbox-item { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px; }

.question-card.ai-newly-added { outline: 2px solid #7C9A82; outline-offset: 2px; transition: outline-color 2.5s ease; }
.ai-rewrite-panel { margin: 10px 0 16px; padding: 12px; background: #F7F7F5; border: 1px solid var(--line); border-radius: var(--radius); }
.ai-rewrite-suggestion-text { font-size: 14px; }

@media (max-width: 720px) {
    .rail { display: none; }
    .survey-wrap { padding: 40px 20px 100px; }
    .admin-shell { flex-direction: column; }
    /* På mobil er rail'en en vandret top-bjælke, ikke en venstre-kolonne —
       sticky/100vh-højden fra desktop-reglen ovenfor giver ingen mening her
       (og ville stjæle halvdelen af skærmen), så den nulstilles til normal
       dokumentflow. */
    .admin-rail {
        width: 100%; flex-direction: row; overflow-x: auto; padding: 12px;
        position: static; height: auto;
    }
    .admin-rail nav { flex-direction: row; }
    .admin-main { --admin-pad-y: 24px; --admin-pad-x: 20px; }
}

/* Betinget logik: skjuler et spørgsmål/step uanset stepperens egen inline-style */
.logic-hidden { display: none !important; }

.page-break-divider { display: flex; align-items: center; gap: 12px; margin: 32px 0; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; }
.page-break-divider::before, .page-break-divider::after { content: ''; flex: 1; border-top: 1px dashed currentColor; opacity: 0.4; }

/* Sideskift-markør i builderens egen side-liste — tydeligt adskilt fra siderne selv */
.builder-page-break {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 48px 0; padding: 14px 0; color: var(--sage); font-weight: 600;
    font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.builder-page-break::before, .builder-page-break::after { content: ''; flex: 1; max-width: 120px; border-top: 2px solid var(--sage); opacity: 0.5; }
/* "Fjern sideskift"-linket på selve separatoren — bevidst diskret (lille,
   ingen store bogstaver/fed skrift som resten af separatoren), da det er en
   sjælden handling der ikke skal dominere visuelt. */
.page-break-remove-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--muted); font-weight: 400; font-size: 11px; text-transform: none;
    letter-spacing: normal; text-decoration: underline; opacity: 0.75; white-space: nowrap;
}
.page-break-remove-link:hover { opacity: 1; color: var(--ink); }

/* Alpine: skjuler indhold indtil Alpine er initialiseret (undgår "flash") */
[x-cloak] { display: none !important; }

.btn-plus-icon { color: #3f9142; font-weight: 700; margin-right: 6px; }

/* Kopiér-dialog (survey-builder). Positionering ligger bevidst i en klasse
   (ikke inline style) — Alpines x-show overskriver kun inline "display",
   og ville ellers også fjerne vores egen "display:flex" ved skjul/vis. */
.copy-modal-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.copy-tree-item { font-size: 13.5px; padding: 6px 0 2px; color: var(--ink); }
.insert-here-btn { display: block; width: 100%; text-align: left; font-size: 12px; border-style: dashed; margin-bottom: 4px; }

/* ---------- AI-survey preview-overlay (admin/surveys.php's create_from_ai)
   ---------- overlay-positionering/display SKAL leve her (ikke inline
   style="display:flex"), samme begrundelse som .copy-modal-overlay: JS
   toggler kun overlay.style.display direkte, uden nogen Alpine-x-show
   involveret her, men konventionen holdes alligevel. */
.ai-preview-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .7); z-index: 210;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ai-preview-panel {
    background: var(--card, #fff); border-radius: var(--radius-lg); max-width: 720px;
    width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.ai-preview-header {
    position: sticky; top: 0; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
    padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--card, #fff); z-index: 1;
}
.ai-preview-header-col { display: flex; flex-direction: column; gap: 6px; }
.ai-preview-build-hint, .ai-preview-price { font-size: 12.5px; color: var(--muted); }
.ai-preview-price .help-tooltip { margin-left: 4px; }
.ai-preview-price .help-tooltip-popup { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 8px; }
.ai-preview-body { padding: 24px; overflow-y: auto; }
.ai-preview-summary { margin: -8px 0 20px; }
.ai-preview-page { margin-bottom: 26px; }
.ai-preview-page-title { font-size: 15px; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .03em; }
.ai-preview-question { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.ai-preview-question:last-child { border-bottom: none; }
/* Stagger-reveal når forslaget lige er indsat (se revealQuestionsStaggered()
   i assets/js/ai-survey-preview.js) — spørgsmålene popper ikke ind på én
   gang, men fader ét ad gangen. */
.ai-preview-question-pending { opacity: 0; transform: translateY(4px); }
.ai-preview-question-visible { opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; }
.ai-preview-question-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-preview-q-number { font-weight: 600; }
.ai-preview-q-text { font-weight: 600; }
.ai-preview-heading { font-size: 22px; margin: 22px 0 10px; }
.ai-preview-textblock { color: var(--ink); margin-bottom: 14px; }
.ai-preview-logic-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: -4px 0 10px; }
.ai-preview-options { display: flex; flex-direction: column; gap: 6px; }
.ai-preview-option { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ai-preview-option input { pointer-events: none; }
/* Svarmarkører i survey-eksportens print/PDF-visning (SurveyExportRenderer::
   render_survey_export_answer_area()) — bevidst rene <span> frem for
   <input type="radio"/"checkbox">, da browsere renderer disse inkonsistent
   ved print. Cirkel for single_choice, kvadrat for multi_choice. */
.export-answer-mark {
    display: inline-block; width: 12px; height: 12px; flex-shrink: 0;
    border: 1.5px solid #333; background: none;
}
.export-answer-mark-circle { border-radius: 50%; }
.export-answer-mark-square { border-radius: 0; }
.ai-preview-ranking { padding-left: 20px; }
.ai-preview-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-preview-scale-point {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted);
}
.ai-preview-input { width: 100%; max-width: 320px; background: #F5F4F0; color: var(--muted); }
.ai-preview-file { display: inline-block; padding: 8px 14px; background: #F5F4F0; border-radius: var(--radius); }
.ai-preview-matrix-wrap { overflow-x: auto; }
.ai-preview-matrix { border-collapse: collapse; font-size: 13px; }
.ai-preview-matrix th, .ai-preview-matrix td { padding: 8px 10px; border: 1px solid var(--line); text-align: center; }
.ai-preview-matrix th:first-child, .ai-preview-matrix td:first-child { text-align: left; }
.ai-preview-matrix input { pointer-events: none; }
.ai-preview-loading { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Survey-eksport (Word-forhåndsvisning/print/PDF) ---------- */
/* Genbruger .ai-preview-*-klasserne ovenfor (samme layout/stil som
   AI-preview-overlayet) — denne wrapper-klasse tilføjer KUN det, der er
   særligt for eksport-visningen: en stor dokumenttitel og en skillelinje
   under hvert sidenavn, se render_survey_export_html() i
   includes/SurveyExportRenderer.php. Scopet til .survey-export-view, så
   AI-preview-overlayets eksisterende udseende andre steder ikke ændres. */
.survey-export-view { max-width: 720px; margin: 0 auto; }
.survey-export-title {
    font-family: 'Source Serif 4', Georgia, serif; font-size: 32px; font-weight: 600;
    color: var(--text-primary); margin: 0 0 32px;
}
.survey-export-view .ai-preview-page-title {
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.survey-export-page-desc { color: var(--text-secondary); margin: -4px 0 16px; }
.survey-export-hint { font-size: 13px; color: var(--text-muted); margin: -4px 0 10px; }

/* Sideskift i survey-eksportens print/PDF-visning (window.print() i
   admin/export-survey-print.php) — hvert spørgsmål inkl. svarmuligheder
   skal behandles som én udelelig blok, og sideskift må kun ske MELLEM
   spørgsmål. Matrix-tabeller holdes samlet hvis muligt, men må brydes
   mellem rækker (aldrig midt i en række) hvis de er for høje til én side. */
@media print {
    .survey-export-view .ai-preview-question {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .survey-export-view .ai-preview-question-head {
        page-break-after: avoid;
    }
    .survey-export-view .ai-preview-matrix-wrap,
    .survey-export-view .ai-preview-matrix {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .survey-export-view .ai-preview-matrix tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* "Ikke bygget: [titel]"-linjen under prompt-tekstfeltet (se assets/js/
   ai-survey-preview.js's localStorage-drevne vis/skjul-logik) — bevidst
   diskret, en <button> for tilgængelighed men uden knap-udseende. */
.ai-draft-indicator {
    display: none; align-items: center; gap: 8px; width: 100%; text-align: left;
    margin-top: 10px; padding: 8px 12px; font-size: 13px; color: var(--muted);
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ai-draft-indicator svg { flex-shrink: 0; }

/* Udskriv-knappen i preview-overlayets header isolerer KUN
   .ai-preview-body ved print — resten af siden (og selve overlay-headeren
   med knapperne) skjules via denne "printing"-klasse, som assets/js/
   ai-survey-preview.js sætter på <body> lige før window.print() og fjerner
   bagefter. Bruger "visibility:hidden på alt + visibility:visible på
   overlayet igen"-teknikken (IKKE display:none på body's direkte børn) —
   overlayet ligger nemlig indlejret dybt inde i .admin-shell/<main>, ikke
   som en direkte barn af <body>, så et display:none-baseret filter ville
   ramme den fælles forælder og gøre HELE siden (inkl. overlayet) blank ved
   print, hvilket var netop den bug denne tilgang retter. visibility nedarves
   men kan gøres synlig igen af et efterkommer-element, selvom en forælder
   har visibility:hidden — display:none tillader ikke det samme. */
@media print {
    body.printing-ai-preview * { visibility: hidden !important; }
    body.printing-ai-preview .ai-preview-overlay,
    body.printing-ai-preview .ai-preview-overlay * { visibility: visible !important; }
    body.printing-ai-preview .ai-preview-overlay {
        position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important;
        width: 100% !important; height: auto !important; background: none !important; padding: 0 !important;
        display: block !important;
    }
    body.printing-ai-preview .ai-preview-panel {
        max-height: none !important; max-width: none !important; width: 100% !important; box-shadow: none !important;
    }
    body.printing-ai-preview .ai-preview-header { display: none !important; }
    body.printing-ai-preview .ai-preview-body { overflow: visible !important; padding: 20px !important; }
}

/* Mørk baggrund — valgbar pr. survey (tema-indstilling i builderen) */
body.theme-dark { background: var(--ink); color: var(--paper); }
body.theme-dark .card, body.theme-dark .option, body.theme-dark .scale-cell,
body.theme-dark input, body.theme-dark textarea, body.theme-dark select {
    background: #1F2E4D; border-color: #3A4A6B; color: var(--paper);
}
body.theme-dark .q-hint, body.theme-dark .sub, body.theme-dark .text-muted { color: #A9B4CC; }
body.theme-dark .progress-track { background: #2C3B5C; }
/* Globalt sidehoved/-fod med rå HTML fra Admin → "Design" (super-admin, se
   ThemeSettings/render_site_header()+render_site_footer() i survey/s.php).
   Vises på ALLE sider i respondentflowet, uden for .survey-wrap. Sticky i
   toppen/bunden af skærmen — tomme (ingen indhold) som standard. Header
   pakkes sammen med test-mode-banneret i .site-sticky-top, så banneret
   altid forbliver helt i toppen selv med en sticky header (to uafhængige
   sticky-elementer med top:0 ville ellers overlappe i stedet for stable). */
.site-sticky-top { position: sticky; top: 0; z-index: 20; }
.header, .footer { background: var(--paper); }
.footer { position: sticky; bottom: 0; z-index: 20; }
/* Survey-specifikt hvidmærkningslogo (theme['logo_url'], uploadet af
   organisationen selv) — vises lige under det globale sidehoved. */
.survey-logo-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 32px; margin-bottom: 12px; }
.survey-logo { display: block; max-height: 100px; width: auto; margin: 0; }

/* Print (rapport-builder → "gem som PDF") */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}

/* ---------- Offentlig forside (index.php) ---------- */
.landing-nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 247, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.landing-nav-inner { max-width: 1120px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; }
.landing-logo-img { height: 32px; width: auto; display: block; }
/* Diskret betatest-signal i navbaren, se beta_invite_only() i
   includes/functions.php — vises kun mens registrering er lukket. */
.landing-beta-badge {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em;
    color: var(--sage); border: 1px solid var(--sage); border-radius: 20px; padding: 2px 9px;
    text-transform: uppercase;
}

/* Forsiden er bevidst desktop-only (se index.php's kommentar) — under
   1024px vises denne besked som et OVERLAY oven på siden. Det er en
   ADVARSEL, ikke en spærring: siden bagved er stadig fuldt til stede og
   brugbar, bare ikke responsivt optimeret — "Fortsæt alligevel"
   (assets/js/landing.js) tilføjer .landing-mobile-block-dismissed på
   <html>, som skjuler overlayet igen. Ingen anden responsiv regel findes
   for forsiden — selve sideindholdet forbliver uændret/desktop-layoutet,
   uanset bredde. */
.landing-mobile-block { display: none; }
@media (max-width: 1023px) {
    .landing-mobile-block {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: fixed; inset: 0; z-index: 500;
        min-height: 100vh; min-height: 100dvh; text-align: center; padding: 40px 32px; gap: 14px;
        background: var(--paper);
    }
    html.landing-mobile-block-dismissed .landing-mobile-block { display: none; }
    .landing-mobile-block-logo { height: 36px; width: auto; margin-bottom: 10px; }
    .landing-mobile-block-heading {
        font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 600;
        color: var(--ink); max-width: 380px; line-height: 1.4; margin: 0;
    }
    .landing-mobile-block-subtext { color: var(--muted); font-size: 14px; margin: 0; }
    .landing-mobile-block-dismiss {
        margin-top: 10px; background: none; border: none; color: var(--muted);
        font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 4px;
    }
}
.landing-nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.landing-nav-links a:not(.btn) { color: var(--ink); text-decoration: none; }
.landing-nav-links a:not(.btn):hover { color: var(--sage); }

.landing-hero { max-width: 720px; margin: 0 auto; padding: 100px 32px 80px; text-align: center; }
.landing-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 18px; }
.landing-hero h1 { font-size: 44px; line-height: 1.15; margin: 0 0 20px; }
.landing-hero-sub { font-size: 18px; color: var(--muted); line-height: 1.6; margin: 0 0 32px; }

.landing-section-title { text-align: center; font-size: 30px; margin: 0 0 48px; }

.landing-features { max-width: 1120px; margin: 40px auto 0; padding: 0 32px 100px; }
.landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.landing-feature-card { padding: 8px; }
.landing-feature-icon { width: 52px; height: 52px; border-radius: 14px; background: #EEF2ED; color: var(--sage); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.landing-feature-icon svg { width: 26px; height: 26px; }
.landing-feature-card h3 { font-size: 17px; margin: 0 0 8px; }
.landing-feature-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* AI-fokus-sektion — primære selling point, bevidst visuelt distinkt fra
   resten af siden (samme ink-blå baggrund som var(--ink), se Del 4). */
.landing-ai-focus { background: var(--ink); color: #fff; padding: 90px 32px; }
.landing-ai-focus .landing-section-title { color: #fff; }
.landing-ai-features-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.landing-ai-feature-card { text-align: center; padding: 0 12px; }
.landing-ai-feature-icon {
    width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #9FE0B0;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.landing-ai-feature-icon svg { width: 26px; height: 26px; }
.landing-ai-feature-card h3 { font-size: 17px; margin: 0 0 8px; color: #fff; }
.landing-ai-feature-card p { color: #B9C2D6; font-size: 14.5px; line-height: 1.6; margin: 0; }

.landing-steps-section { background: var(--ink); color: #fff; padding: 90px 32px; }
.landing-steps-section .landing-section-title { color: #fff; }
.landing-steps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; position: relative; }
.landing-step { text-align: center; padding: 0 12px; }
.landing-step-number {
    width: 44px; height: 44px; border-radius: 50%; background: var(--sage); color: #fff; font-family: 'Source Serif 4', serif;
    font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.landing-step h3 { font-size: 17px; margin: 0 0 8px; }
.landing-step p { color: #B9C2D6; font-size: 14.5px; line-height: 1.6; margin: 0; }

.landing-pricing { max-width: 1120px; margin: 0 auto; padding: 20px 32px 110px; }
.landing-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.landing-price-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; background: #fff; }
.landing-price-card.highlighted { border-color: var(--sage); border-width: 2px; box-shadow: 0 8px 28px rgba(107, 143, 113, .16); }
.landing-price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sage); color: #fff;
    font-size: 11.5px; font-weight: 600; letter-spacing: .03em; padding: 4px 14px; border-radius: 20px;
}
.landing-price-card h3 { font-size: 19px; margin: 0 0 10px; }
.landing-price { font-family: 'Source Serif 4', serif; font-size: 32px; font-weight: 600; margin-bottom: 20px; }
.landing-price span { font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; color: var(--muted); }
/* "ekskl. moms" under prisen på betalte planer (index.php) */
.landing-price .landing-price-vat { display: block; font-family: Inter, sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.landing-price-features { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.landing-price-features li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.landing-price-features li:first-child { border-top: none; }
.landing-price-features li.ai-highlight { color: var(--sage); font-weight: 600; }
.landing-price-features li.ai-highlight .ai-highlight-star { margin-right: 6px; }

/* Studierabat */
.landing-study { max-width: 720px; margin: 0 auto; padding: 20px 32px 110px; text-align: center; }
.landing-study-text { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 28px; }
.landing-study-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Kontaktformular */
.landing-contact { max-width: 560px; margin: 0 auto; padding: 20px 32px 110px; }
.landing-contact-form { display: flex; flex-direction: column; gap: 4px; }
.landing-contact-form button[type="submit"] { margin-top: 10px; width: 100%; justify-content: center; }
.landing-contact-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 14.5px; }
.landing-contact-alert.success { background: var(--sage-light); border: 1px solid var(--sage); color: #1F3B24; }
.landing-contact-alert.error { background: #FBEAEA; border: 1px solid #D98C8C; color: #7A2020; }
/* Honeypot: usynligt for rigtige besøgende (ikke bare display:none, som
   nogle spam-bots springer over) men stadig teknisk til stede i DOM'en. */
.landing-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Studierabat-popup (uddannelsesinstitutioner, se index.php + landing.js) */
.landing-edu-modal-backdrop {
    display: none; position: fixed; inset: 0; z-index: 600; background: rgba(22, 35, 63, .55);
    align-items: center; justify-content: center; padding: 32px;
}
.landing-edu-modal-backdrop.open { display: flex; }
.landing-edu-modal {
    background: #fff; border-radius: 14px; max-width: 640px; width: 100%; max-height: 80vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.landing-edu-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.landing-edu-modal-header h3 { margin: 0; font-size: 18px; }
.landing-edu-modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.landing-edu-search { margin: 16px 24px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.landing-edu-modal-body { overflow-y: auto; padding: 16px 24px 24px; }
.landing-edu-group { margin-bottom: 20px; }
.landing-edu-type-badge {
    display: inline-block; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 11px;
    border-radius: 20px; margin-bottom: 10px;
}
.landing-edu-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.landing-edu-list li { font-size: 14px; color: var(--ink); padding: 4px 0; break-inside: avoid; }

.landing-footer { background: #F0EFE9; border-top: 1px solid var(--line); padding: 70px 32px 32px; }
.landing-footer-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.landing-footer-grid h4 { font-size: 14px; margin: 0 0 12px; }
.landing-footer-grid p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 8px; }
.landing-footer-bottom { max-width: 1120px; margin: 50px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
    .landing-nav-links { gap: 14px; font-size: 13px; }
    .landing-hero h1 { font-size: 32px; }
    .landing-hero { padding: 70px 20px 60px; }
}

/* ---------- SurveyBotty (rigtig AI-assistent, kun admin-panelet, se
   includes/SurveyBotty.php + assets/js/surveybotty.js) ---------- */
.surveybotty-widget { position: fixed; right: 24px; bottom: 24px; z-index: 400; }
.surveybotty-toggle {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(22, 35, 63, .35);
    animation: surveybotty-pulse 2.6s ease-in-out infinite;
}
.surveybotty-toggle svg { width: 26px; height: 26px; }
.surveybotty-toggle.active { animation: none; background: var(--sage); }
@keyframes surveybotty-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(22, 35, 63, .35), 0 0 0 0 rgba(107, 143, 113, .45); }
    50% { box-shadow: 0 6px 18px rgba(22, 35, 63, .35), 0 0 0 10px rgba(107, 143, 113, 0); }
}
/* 480px total widget-højde, jf. opgavebeskrivelsen — header (~50px) +
   footer/input (~52px) + linket under den er trukket fra, resten går til
   den scrollbare .surveybotty-modal-body. */
.surveybotty-modal {
    display: none; position: absolute; right: 0; bottom: 72px; width: 340px; height: 480px;
    background: #fff; border-radius: 14px; box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
    flex-direction: column; overflow: hidden;
    /* På basen (ikke kun på --expanded), så størrelsesskiftet animeres begge veje. */
    transition: width 0.35s ease, height 0.35s ease;
}
.surveybotty-modal.open { display: flex; }
/* Udvidet størrelse efter brugerens første besked i en session (se
   expandModal() i assets/js/surveybotty.js). min() klemmer til vinduet:
   widgeten sidder 96px over bunden, så 700px ville ellers stikke ud af
   skærmen i vinduer under ca. 800px. Kun fra 640px og op — under det
   beholdes den eksisterende størrelse uændret. 'sb-restore-expanded' (sat af
   head-scriptet i html_head()) viser den udvidede størrelse fra første
   rendering ved genopretning efter et sideskift, uden at animere op. */
@media (min-width: 640px) {
    .surveybotty-modal--expanded,
    html.sb-restore-expanded .surveybotty-modal {
        width: min(600px, calc(100vw - 48px));
        height: min(700px, calc(100vh - 110px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .surveybotty-modal { transition: none; }
}
/* Genopretning efter sideskift: inline-scriptet i html_head() sætter
   'sb-restore' på <html>, hvis widgetten sidst blev efterladt åben, så
   vinduet vises fra første rendering uden blink. assets/js/surveybotty.js
   fjerner klassen igen og overlader styringen til .open. */
html.sb-restore .surveybotty-modal { display: flex; }
html.sb-restore .surveybotty-toggle { animation: none; background: var(--sage); }
.surveybotty-modal-header {
    background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.surveybotty-modal-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.surveybotty-modal-title svg { width: 18px; height: 18px; }
.surveybotty-modal-title .landing-beta-badge { color: #9FE0B0; border-color: #9FE0B0; }
.surveybotty-modal-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .8; }
.surveybotty-modal-close:hover { opacity: 1; }
.surveybotty-modal-actions { display: flex; align-items: center; gap: 6px; }
.surveybotty-new-chat {
    display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 20px; color: #fff;
    font-family: inherit; font-size: 11.5px; padding: 3px 9px; cursor: pointer;
}
.surveybotty-new-chat:hover { background: rgba(255, 255, 255, .25); }
.surveybotty-new-chat i { font-size: 13px; }
.surveybotty-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sage-light); }
/* overflow-wrap: et bot-svar kan indeholde lange, mellemrumsløse tokens
   (fx "Formel/Executive/Pædagogisk/Eksplorativ") som ellers stak ud over
   boblens højre kant i stedet for at blive brudt — normal/break-word bryder
   kun ordet som allersidste udvej, når det ikke kan være på sin egen linje.
   assets/js/surveybotty.js indsætter desuden <wbr> efter "/" i selve
   bot-svarets tekstknuder, så bruddet sker PÆNT efter skråstregen i stedet
   for midt i et ord, når det overhovedet kan lade sig gøre. */
.surveybotty-msg { max-width: 84%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.surveybotty-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; }
.surveybotty-msg.user { align-self: flex-end; background: var(--sage); color: #fff; border-bottom-right-radius: 3px; }
/* Loading-indikator ("tre prikker der pulserer") mens Haiku svarer — samme
   bobbel-styling som en almindelig bot-besked, så den ikke springer i
   størrelse/placering, når den senere erstattes af det rigtige svar. */
.surveybotty-msg.typing { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.surveybotty-typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
    animation: surveybotty-typing-bounce 1.2s ease-in-out infinite;
}
.surveybotty-typing-dot:nth-child(2) { animation-delay: .15s; }
.surveybotty-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes surveybotty-typing-bounce {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.surveybotty-modal-footer { flex-shrink: 0; border-top: 1px solid var(--line); background: #fff; }
.surveybotty-modal-input { display: flex; gap: 8px; padding: 12px; }
.surveybotty-modal-input input {
    flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; font-size: 13.5px; font-family: inherit;
}
.surveybotty-modal-input input:disabled { opacity: .6; }
.surveybotty-modal-input button {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.surveybotty-modal-input button:disabled { opacity: .5; cursor: default; }
.surveybotty-modal-input button svg { width: 16px; height: 16px; }
.surveybotty-history-link {
    display: block; text-align: center; font-size: 11.5px; color: var(--muted); text-decoration: none;
    padding: 0 12px 10px;
}
.surveybotty-history-link:hover { color: var(--sage); text-decoration: underline; }
/* Tegnoptæller for chat-inputfeltet (maxlength="500") — samme mønster som
   .ai-prompt-counter (admin/surveys.php): skjult indtil 400+ tegn, skifter
   til --danger fra 470 tegn (se assets/js/surveybotty.js). */
.surveybotty-input-counter { text-align: right; font-size: 11px; color: var(--muted); padding: 0 12px 8px; }
.surveybotty-input-counter.surveybotty-input-counter-danger { color: var(--danger); }

/* ---------- Beta-feedback-widget (nederst i venstremenuen, kun Beta/Tester-planen) ----------
   Knappen sidder som sidste element i .admin-rail nav; selve panelet er et
   fast (position:fixed) overlay, styret af Alpine — se
   render_beta_feedback_widget() i admin/includes/layout.php. Bruger systemets
   egne tokens (--ink/--sage/--paper/--card/--line) og .field/.btn/.badge-
   mønstrene, ingen egne farver. */
/* Plan-chip nederst i venstremenuen (render_plan_chip() i admin/includes/layout.php):
   nuværende plan + "Opgrader"-knap, kun når Stripe-betaling er slået til. */
.plan-chip {
    margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--sage-light); display: flex; flex-direction: column; gap: 2px;
}
.plan-chip-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-chip-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.admin-rail a.plan-chip-btn { justify-content: center; padding: 6px 10px; font-size: 13px; }
.admin-rail a.plan-chip-btn.btn-primary { color: #fff; }
/* Overstyrer .admin-rail a:hover (som ellers vinder pga. højere specificitet og
   giver knappen samme lyse baggrund som chippen — hvid tekst på lys baggrund
   gør knappen usynlig ved hover). */
.admin-rail a.plan-chip-btn.btn-primary:hover { background: var(--ink-light); color: #fff; }

.beta-feedback { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.beta-feedback-trigger {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: var(--sage-light); color: var(--ink);
    border: 1px solid var(--sage); border-radius: var(--radius);
    padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; text-align: left;
}
.beta-feedback-trigger:hover { background: var(--sage); color: #fff; }
.beta-feedback-trigger i { font-size: 16px; flex-shrink: 0; }

.beta-feedback-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.beta-feedback-panel {
    background: var(--card); border-radius: var(--radius-lg); width: 100%; max-width: 460px;
    max-height: 88vh; overflow-y: auto; padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}
.beta-feedback-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.beta-feedback-panel-head h3 { margin: 0; }
.beta-feedback-close {
    background: none; border: none; font-size: 22px; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0 4px;
}
.beta-feedback-close:hover { color: var(--ink); }
.beta-feedback-context {
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; margin: 4px 0 14px; font-size: 12.5px;
}
.beta-feedback-context-title { font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.beta-feedback-context dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.beta-feedback-context dt { color: var(--muted); white-space: nowrap; }
.beta-feedback-context dd { margin: 0; color: var(--ink); word-break: break-all; }
.beta-feedback-error {
    color: var(--danger); background: var(--danger-bg); border-radius: var(--radius);
    padding: 8px 10px; font-size: 13px; margin: 0 0 12px;
}
.beta-feedback-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.beta-feedback-success { text-align: center; padding: 16px 0 4px; }
.beta-feedback-success i { font-size: 34px; color: var(--sage); }
.beta-feedback-success p { margin: 8px 0 16px; }

/* ---------- Support-tickets (includes/models/SupportTicket.php) ---------- */

/* Badge med antal åbne tickets på "Admin"-menupunktet (kun super_admin). */
.nav-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 8px;
    border-radius: 20px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
}

/* Fælles "Kontakt support"-modal (render_support_modal() i layout.php).
   [hidden] gentages eksplicit, da display:flex ellers slår browserens
   hidden-regel. z-index over SurveyBotty-widgeten, modalen åbnes derfra. */
.support-modal-overlay {
    position: fixed; inset: 0; background: rgba(22, 35, 63, .45); z-index: 600;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.support-modal-overlay[hidden] { display: none; }
.support-modal-overlay .beta-feedback-panel { max-width: 520px; }
.support-attach {
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 14px; margin: 0 0 14px; font-size: 13px;
}
.support-attach[hidden] { display: none; }
.support-attach summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.support-attach-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; cursor: pointer; }
.support-attach-preview { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; color: var(--muted); }
.support-attach-msg { overflow-wrap: anywhere; }

/* "Kontakt support →" under SurveyBottys besked. */
.surveybotty-support-suggest { align-self: flex-start; }
.surveybotty-support-btn {
    background: none; border: 1px solid var(--sage); color: var(--ink); border-radius: 20px;
    padding: 5px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.surveybotty-support-btn:hover { background: var(--sage); color: #fff; }

/* Tråd (offentlig side + admin-detalje). */
.support-thread { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.support-msg {
    max-width: 88%; padding: 12px 16px; border-radius: var(--radius-lg);
    border: 1px solid var(--line); background: var(--card);
}
.support-msg.is-user { align-self: flex-start; }
.support-msg.is-admin { align-self: flex-end; background: var(--sage-light); border-color: var(--sage); }
.support-msg-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.support-msg-meta strong { color: var(--ink); }
.support-msg-body { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }

.support-status-open { color: #7A3B1E; border-color: #E8B4A0; background: var(--danger-bg); }
.support-status-awaiting_user { color: #6B5B1E; border-color: #E5D9A0; background: #FBF7E6; }
.support-status-closed { color: var(--muted); border-color: #E5E7EB; background: #F3F4F6; }
.support-public-sub { display: flex; align-items: center; gap: 10px; }

.support-filter { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.support-inbox-row { cursor: pointer; }
.support-inbox-row a { color: inherit; text-decoration: none; }
.support-actions { margin-top: 8px; }
.support-context summary { cursor: pointer; font-weight: 600; }
.support-context-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.support-contact-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.support-my-tickets-heading { margin: 32px 0 12px; }

/* Read-only samtale-visning (Kontoindstillinger → "SurveyBotty –
   samtalehistorik", og super-admins brugerdetalje-side) — genbruger
   .surveybotty-msg.bot/.user, men som et almindeligt blok-element i stedet
   for widgetens fastgjorte popup, se render_surveybotty_conversation_messages()
   i admin/includes/layout.php. */
.surveybotty-inline-chat {
    display: flex; flex-direction: column; gap: 10px; background: var(--sage-light);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-height: 420px; overflow-y: auto;
}

/* Vilkårsside (terms.php) — enkel dokumentvisning af redigerbart HTML-indhold */
.terms-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 120px; line-height: 1.7; }
.terms-page h1 { font-size: 32px; margin-bottom: 6px; }
.terms-page h2 { font-size: 21px; margin-top: 40px; margin-bottom: 12px; }
.terms-page h3 { font-size: 16px; margin-top: 28px; margin-bottom: 8px; }
.terms-page p { margin: 0 0 14px; color: var(--ink); }
.terms-page ul { margin: 0 0 14px; padding-left: 22px; }
.terms-page li { margin-bottom: 6px; }

/* ---------- Admin-dashboard (admin/index.php): seneste surveys, seneste
   rapporter, Tips/Fakta-boks, kalender ---------- */
.dashboard-empty-state { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 3 kolonner (2 rækker á 6 kort) på desktop, 2 på tablet, 1 på smalle skærme —
   samme breakpoints som resten af det responsive admin-layout. */
.dashboard-survey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dashboard-survey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dashboard-survey-grid { grid-template-columns: 1fr; } }
.dashboard-survey-card { display: flex; flex-direction: column; }
/* Deleopgave B3: titel + statusbadge øverst til højre, og respondent-/
   spørgsmålstal som to tal+label-par under en skillelinje, i stedet for to
   "Label: tal"-tekstlinjer. */
.dashboard-survey-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dashboard-survey-card-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; min-width: 0; }
.dashboard-survey-card-stats { display: flex; gap: 20px; padding-top: 10px; margin-bottom: 14px; border-top: 1px solid var(--line); }
.dashboard-survey-card-stat-value { font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.2; }
.dashboard-survey-card-stat-label { font-size: 11.5px; color: var(--muted); }

.dashboard-report-card { display: block; text-decoration: none; color: inherit; }
.dashboard-report-card:hover { border-color: var(--sage); }
.dashboard-report-card-title { font-weight: 600; font-size: 15px; }

.dashboard-tip-category { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 10px; }
.dashboard-tip-body { font-size: 14px; line-height: 1.6; }
.dashboard-tip-body p { margin: 0 0 10px; }
.dashboard-tip-body p:last-child { margin-bottom: 0; }

/* ---------- Dashboard-redesign (admin/index.php) -------------------------------
   Hero, survey-kort (.s-card), rapport-kort (.r-card). Kortene har kun den grå kant (--line) — ingen farvede toppe/accenter. */
.overview-hero {
    position: relative; overflow: hidden; color: #fff; border-radius: 0;
    margin: calc(-1 * var(--admin-pad-y, 0px)) calc(-1 * var(--admin-pad-x, 0px)) 30px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 100%);
    padding: 40px 44px;
}
.hero-bg-dots {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 75%);
    mask-image: linear-gradient(to left, #000 0%, transparent 75%);
}
.hero-bg-glow {
    position: absolute; right: -90px; top: -120px; width: 420px; height: 420px; pointer-events: none;
    background: radial-gradient(circle, rgba(107,143,113,.55) 0%, rgba(107,143,113,0) 68%);
}
.hero-inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; }
.hero-main { flex: 1 1 380px; min-width: 0; }
.hero-welcome { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 0 0 10px; }
.hero-title { font-family: 'Saira', system-ui, sans-serif; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.4px; color: #fff; margin: 0 0 10px; }
.hero-sub { font-size: 15px; color: rgba(255,255,255,.8); margin: 0 0 24px; max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-hero-primary, .btn-hero-secondary {
    display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 11px 20px; border-radius: var(--radius); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.btn-hero-primary { background: #fff; color: var(--ink); border: 1px solid #fff; }
.btn-hero-primary:hover { background: var(--sage-light); transform: translateY(-1px); }
.btn-hero-secondary { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-hero-secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }
.btn-hero-primary:focus-visible, .btn-hero-secondary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(104px, 1fr)); gap: 12px; flex: 0 1 auto; }
.hero-stat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 16px; backdrop-filter: blur(2px); }
.hero-stat-num { font-family: 'Saira', system-ui, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.1; color: #fff; }
.hero-stat-lbl { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 4px; }
@media (max-width: 900px) {
    .overview-hero { padding: 30px 26px; }
    .hero-title { font-size: 30px; }
    .hero-stats { flex: 1 1 100%; }
}
@media (max-width: 640px) {
    .overview-hero { padding: 24px 18px; }
    .hero-title { font-size: 26px; }
    .hero-stats { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-stat { padding: 10px 12px; }
    .hero-stat-num { font-size: 24px; }
    .hero-actions .btn-hero-primary, .hero-actions .btn-hero-secondary { flex: 1 1 100%; justify-content: center; }
}
/* Meget smalle skærme: tre tal side om side får ikke plads til labels som
   "Respondenter" — de stables i stedet som kompakte rækker (tal + label). */
@media (max-width: 480px) {
    .hero-stats { grid-template-columns: minmax(0, 1fr); }
    .hero-stat { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; }
    .hero-stat-lbl { margin-top: 0; font-size: 13px; }
}

.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.dash-section-head h2 { margin: 0; }
.see-all-link { font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.see-all-link:hover { text-decoration: underline; }
.see-all-wrap { margin: -14px 0 28px; text-align: right; }

.surveys-grid, .reports-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 28px; }
@media (max-width: 1100px) { .surveys-grid, .reports-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .surveys-grid, .reports-grid { grid-template-columns: minmax(0, 1fr); } }

.s-card, .r-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.s-card:hover, .r-card:hover { border-color: var(--sage); box-shadow: 0 6px 18px rgba(22,35,63,.08); transform: translateY(-2px); }
/* Kortets header er en ren billedbjælke: hele billedet (--s-img, sat inline pr. kort fra admin/index.php) vises i 4:1, uden fade. */
.s-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    flex: none;
    /* Præcis 4:1 ved enhver kortbredde (≈ 328 × 82 px på almindelig skærm) — samme format som galleriets miniaturer
       (Design → Billeder). --s-y er billedets lodrette fokus (0–100 %, sættes inline pr. kort; standard midt). */
    aspect-ratio: 4 / 1;
    border-bottom: 1px solid var(--line);
    background-image: var(--s-img, none);
    background-size: cover;
    background-position: center var(--s-y, 50%);
    background-repeat: no-repeat;
}
.s-body { display: flex; flex-direction: column; flex: 1; padding: 14px 18px 18px; }
.s-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.s-title {
    margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: break-word;
    /* Altid præcis to linjer høj (korte titler får tom plads, lange afkortes med …), så kortene står ens. */
    height: calc(2 * 1.3em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Stretched link: titlens <a> dækker hele kortet, så hele kortet er klikbart,
   mens handlingsknapperne (.s-actions) ligger over det som egne links. */
.s-title a { color: var(--ink); text-decoration: none; }
.s-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.s-title a:focus-visible { outline: none; }
.s-title a:focus-visible::after { outline: 2px solid var(--sage); outline-offset: -2px; border-radius: var(--radius-lg); }
/* Dato til venstre, status (badge) til højre. Badgen må ombryde i smalle kort i stedet for at skubbe kortet ud. */
.s-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.s-date { font-size: 12.5px; color: var(--muted); min-width: 0; }
.s-date-row .badge { min-width: 0; text-align: right; white-space: normal; }
.s-card .badge { flex-shrink: 0; white-space: nowrap; }
.s-stats { display: flex; gap: 22px; padding-top: 12px; margin-bottom: 14px; border-top: 1px solid var(--line); }
.s-stat { min-width: 0; }
.s-num { font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.2; }
.s-lbl { font-size: 11.5px; color: var(--muted); }
.s-actions { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; }
.s-btn {
    display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px;
    border-radius: var(--radius); border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none;
}
.s-btn:hover { border-color: var(--sage); }

.r-card { color: inherit; text-decoration: none; }
.r-card:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.r-visual { display: flex; align-items: center; justify-content: center; height: 92px; background: var(--sage-light); border-bottom: 1px solid var(--line); }
.r-visual-icon {
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); font-size: 28px; line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.r-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px 16px; }
.r-title { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.r-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.r-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }

.btn-new-survey-subtle {
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13.5px; font-weight: 600;
    padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; color: var(--ink);
    text-decoration: none;
}
.btn-new-survey-subtle:hover { border-color: var(--sage); background: var(--sage-light); }

/* ---------- Ny survey-siden (admin/new-survey.php) ----------
   Tre-kolonners kort-grid (lodret stak under 820px). Kortene er strukturelt ens: ikon · titel ·
   beskrivelseszone (fast 130px) · felt · primærknap pinnet til bunden. Al CSS scopet under .admin-ui. */
.admin-ui .ns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1020px; align-items: stretch; }
.admin-ui .ns-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .admin-ui .ns-grid, .admin-ui .ns-grid--two { grid-template-columns: 1fr; } }

.admin-ui .ns-card {
    position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
    transition: box-shadow .18s, transform .18s, border-color .18s, opacity .3s ease;
}
.admin-ui .ns-card:hover { box-shadow: 0 8px 28px rgba(22, 35, 63, .1); transform: translateY(-3px); }
/* De to øvrige kort dæmpes, mens SurveyBotty-forløbet kører (assets/js/new-survey-botty.js) */
.admin-ui .ns-card--dimmed { opacity: .38; pointer-events: none; }
.admin-ui .ns-card--dimmed:hover { box-shadow: none; transform: none; }

.admin-ui .ns-icon {
    flex-shrink: 0; width: 58px; height: 58px; border-radius: 14px; margin-bottom: 18px; color: #fff;
    display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .1));
}
.admin-ui .ns-icon i { font-size: 28px; line-height: 1; }
.admin-ui .ns-icon-ink { background: var(--ink); }
.admin-ui .ns-icon-sage { background: var(--sage); }
.admin-ui .ns-icon-ai { background: var(--ai); }
.admin-ui .ns-title { flex-shrink: 0; margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.admin-ui .ns-desc-area { height: 130px; flex-shrink: 0; margin-bottom: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
.admin-ui .ns-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.admin-ui .ns-ex-link { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--ai); text-decoration: none; }
.admin-ui .ns-ex-link:hover { text-decoration: underline; }
.admin-ui .ns-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Formularen fylder resten af kortet, så knappen (margin-top:auto) sidder i bunden på alle tre */
.admin-ui .ns-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.admin-ui .ns-input, .admin-ui .ns-tmpl-btn, .admin-ui .ns-form .field textarea {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.4;
}
.admin-ui .ns-input { margin-bottom: 10px; }
.admin-ui .ns-input:focus { border-color: var(--ink); outline: none; }
.admin-ui .ns-form .field { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 10px; min-height: 0; }
.admin-ui .ns-form .field textarea { flex: 1 1 auto; min-height: 90px; resize: none; font-size: 13.5px; line-height: 1.55; }
.admin-ui .ns-tmpl-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; margin-bottom: 10px;
    color: var(--muted); text-align: left; cursor: pointer; transition: border-color .15s, color .15s;
}
.admin-ui .ns-tmpl-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ui .ns-tmpl-btn:hover { border-color: var(--sage); color: var(--ink); }
.admin-ui .ns-tmpl-btn.has-value { color: var(--ink); }
.admin-ui .ns-tmpl-chevron { flex-shrink: 0; opacity: .5; }

.admin-ui .ns-btn {
    display: block; width: 100%; margin-top: auto; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--radius);
    color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.admin-ui .ns-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.admin-ui .ns-btn:disabled { opacity: .5; cursor: not-allowed; }
.admin-ui .ns-btn-ink { background: var(--ink); }
.admin-ui .ns-btn-sage { background: var(--sage); }
.admin-ui .ns-btn-ai { background: var(--ai); }

/* Overlay på AI-kortet for brugere uden AI-adgang */
.admin-ui .ns-ai-overlay {
    position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 28px;
    background: rgba(250, 250, 247, .93); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border-radius: 17px; text-align: center;
}
.admin-ui .ns-ai-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 260px; }
.admin-ui .ns-ai-overlay-lock { font-size: 32px; filter: grayscale(.3); }
.admin-ui .ns-ai-overlay p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.admin-ui .ns-ai-overlay .ns-btn { margin-top: 0; }

/* Modaler (skabelon-valg og prompt-eksempler) */
.admin-ui .ns-modal-backdrop {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(22, 35, 63, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.admin-ui .ns-modal-backdrop[hidden] { display: none; }
.admin-ui .ns-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 82vh; overflow: hidden;
    background: var(--card); border-radius: 18px; box-shadow: 0 24px 64px rgba(22, 35, 63, .22);
    animation: ns-modal-in .2s ease;
}
@keyframes ns-modal-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-ui .ns-modal { animation: none; } }
.admin-ui .ns-modal-head {
    flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 22px 24px 16px; border-bottom: 1px solid var(--line);
}
.admin-ui .ns-modal-title { font-family: 'Saira', system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.admin-ui .ns-modal-sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
.admin-ui .ns-modal-close {
    flex-shrink: 0; width: 30px; height: 30px; margin-top: -2px; border: 1px solid var(--line); border-radius: 50%;
    background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.admin-ui .ns-modal-close:hover { background: var(--paper); color: var(--ink); }
.admin-ui .ns-modal-body { overflow-y: auto; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.admin-ui .ns-modal-search { margin-bottom: 4px; }

.admin-ui .ns-tmpl-group { display: flex; flex-direction: column; gap: 8px; }
.admin-ui .ns-tmpl-group[hidden], .admin-ui .ns-tmpl-row[hidden], .admin-ui .ns-tmpl-empty[hidden] { display: none; }
.admin-ui .ns-tmpl-section { padding: 10px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.admin-ui .ns-tmpl-row {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; font: inherit; color: var(--ink);
    background: transparent; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
}
.admin-ui .ns-tmpl-row:hover, .admin-ui .ns-tmpl-row.is-selected { background: var(--sage-light); border-color: rgba(107, 143, 113, .5); }
.admin-ui .ns-tmpl-row:hover { transform: translateX(2px); }
.admin-ui .ns-tmpl-row-icon { flex-shrink: 0; font-size: 22px; color: var(--sage); }
.admin-ui .ns-tmpl-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.admin-ui .ns-tmpl-row-name { font-size: 14px; font-weight: 600; }
.admin-ui .ns-tmpl-row-meta { margin-top: 1px; font-size: 12px; color: var(--muted); }
.admin-ui .ns-tmpl-row-arrow { flex-shrink: 0; color: var(--muted); opacity: .5; }
.admin-ui .ns-tmpl-empty { margin: 8px 0; font-size: 13.5px; color: var(--muted); }

.admin-ui .ns-prompt-ex { padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px; transition: background .12s, border-color .12s; }
.admin-ui .ns-prompt-ex:hover { background: var(--ai-light); border-color: rgba(139, 111, 168, .3); }
.admin-ui .ns-prompt-ex-tag { margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ai); }
.admin-ui .ns-prompt-ex-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.admin-ui .ns-prompt-ex-transfer { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ai); text-decoration: none; }
.admin-ui .ns-prompt-ex-transfer:hover { text-decoration: underline; }
@media (max-width: 640px) { .admin-ui .ns-card { padding: 22px 20px 20px; } }

.dashboard-calendar { padding: 20px; }
/* Dæmpet, men ikke blank, mens assets/js/dashboard-calendar.js henter den
   næste/forrige måned — samme princip som andre korte, ventende AJAX-kald i
   systemet (fx .ai-thinking-box), så klikket føles responsivt uden at kortet
   bare forsvinder og springer i størrelse. */
.dashboard-calendar-loading { opacity: .5; pointer-events: none; }
.dashboard-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dashboard-calendar-head button[data-calendar-nav] { cursor: pointer; }
.dashboard-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dashboard-calendar-weekdays { margin-bottom: 4px; }
.dashboard-calendar-weekday { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; padding-bottom: 4px; }
.dashboard-calendar-day {
    min-height: 56px; border-radius: 6px; padding: 4px; font-size: 12px; background: var(--sage-light);
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.dashboard-calendar-day-outside { opacity: .35; }
.dashboard-calendar-daynum { font-weight: 600; }
.dashboard-calendar-day-today .dashboard-calendar-daynum {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px;
}
.dashboard-calendar-day-holiday { background: var(--danger-bg); }
.dashboard-calendar-holiday-label {
    font-size: 10px; color: var(--danger); font-weight: 500; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-calendar-event {
    font-size: 10.5px; background: var(--ink); color: #fff; border-radius: 3px; padding: 1px 4px;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 540px) {
    .dashboard-calendar-day { min-height: 38px; font-size: 10px; }
    .dashboard-calendar-event { display: none; }
}

/* ---------- NPS-resultatopsummering (Detractors/Passives/Promoters + score) ---------- */
.nps-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; margin-bottom: 18px; }
.nps-score-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 110px; padding: 10px 20px; border: 1px solid var(--ink); border-radius: var(--radius-lg); background: var(--ink); color: #fff;
}
.nps-score-value { font-family: 'Source Serif 4', serif; font-size: 34px; font-weight: 600; line-height: 1; }
.nps-score-label { font-size: 11.5px; opacity: .8; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.nps-group-row { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.nps-group {
    flex: 1; min-width: 110px; padding: 10px 16px; border-radius: var(--radius-lg); border: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
}
.nps-group-pct { font-size: 22px; font-weight: 600; }
.nps-group-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nps-group-detractor { border-color: #E8B4A0; background: var(--danger-bg); }
.nps-group-detractor .nps-group-pct { color: #B3432E; }
.nps-group-passive { border-color: #E8D9A0; background: #FBF6E3; }
.nps-group-passive .nps-group-pct { color: #9A7E1F; }
.nps-group-promoter { border-color: var(--sage); background: var(--sage-light); }
.nps-group-promoter .nps-group-pct { color: #1F3B24; }

/* ---------- "Tilføj figur"-modalen (rapport-builder) ---------- */
.report-chart-modal-card { max-width: 720px; width: 100%; max-height: 92vh; overflow: auto; }
.chart-modal-steps { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.chart-modal-step-tab {
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.chart-modal-step-tab.active { color: var(--ink); border-bottom-color: var(--sage); }
.chart-question-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.chart-pick-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line);
    cursor: pointer; font-weight: 400; margin: 0;
}
.chart-pick-row:last-child { border-bottom: none; }
.chart-pick-row:hover { background: var(--sage-light); }
.chart-pick-row:has(input:checked) { background: var(--sage-light); }
.chart-pick-number { font-size: 12px; color: var(--muted); min-width: 20px; }
.chart-pick-text { flex: 1; font-size: 14px; }
.chart-type-list { display: flex; flex-direction: column; gap: 8px; }
.chart-type-row { border: 1px solid var(--line); border-radius: var(--radius); }
.chart-split-toggle { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; margin: 0; }
.chart-modal-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.chart-modal-preview { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chart-modal-preview-qtext { font-size: 15px; margin-top: 0; }
.report-chart-n { margin: 4px 0 10px; }
.report-chart-warning {
    font-size: 13px; color: #7A3B1E; background: var(--danger-bg); border: 1px solid #E8B4A0;
    border-radius: var(--radius); padding: 8px 12px; margin: 8px 0;
}
.report-chart-pie-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.report-chart-pie-cell { flex: 1; min-width: 260px; max-width: 450px; }
.report-chart-pie-single { max-width: 450px; }

/* Selve figur-blokken (AI-titel + spørgsmålstekst + graf + evt.
   konklusion, alt sammen i ÉN .report-figure-block, se
   ReportChart::renderBlocks()). Margin flyttet hertil fra en tidligere
   inline style, så den kan samspille med border-adskillelsen mellem to
   på hinanden følgende figurer nedenfor uden at skulle overstyres. */
.report-figure-block { margin: 36px 0; }
/* Tydelig visuel adskillelse mellem to figurer der følger direkte efter
   hinanden (ingen overskrift-/kommentar-blok imellem) — uden denne linje
   flyder figurerne visuelt sammen til én uafbrudt strøm, især i PDF/print,
   hvor der ikke er nogen kort-baggrund til at antyde adskillelsen. */
.report-figure-block + .report-figure-block {
    border-top: 1px solid var(--line);
    padding-top: 32px;
}

/* Kort, AI-genereret tematisk overskrift OVER selve spørgsmålsteksten (se
   AiRapportGenerator::buildFull()'s "title"-felt) — erstatter ALDRIG
   spørgsmålsteksten, kun et supplerende, mere scanbart tema-navn. Tomt som
   standard (:empty skjuler den helt) for figurer der endnu ikke er bygget
   af AI, eller manuelt tilføjet via "Tilføj figur". */
.report-figure-title {
    margin: 0 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted);
}
.report-figure-title:empty { display: none; }

/* Skala-endepunkternes valgfrie tekst-forklaring (min_label/max_label) vist
   under x-aksen på en skala-figur, se ReportChart::renderBlocks() — genbruger
   .scale-endpoint-labels' grundstil (spørgsmålets egen visning i
   question_render.php), men med lidt mere luft til grafen ovenfor i stedet
   for standardens 4px (der er tænkt til at sidde lige under skala-celler). */
.report-chart-endpoint-labels { margin-top: 8px; }

/* Konklusionstekst under en figur (AI-genereret eller manuelt skrevet, se
   ReportChart::renderBlocks() og admin/report-edit.php's "Generér med
   AI"-knap pr. blok) — ligger INDE i .report-figure-block, så print-reglen
   nedenfor holder figur+konklusion samlet på én side. Mere luft OG en let
   adskillelseslinje mod selve grafen ovenfor (i stedet for blot en lille
   margin), så konklusionen tydeligt læses som et selvstændigt afsnit, ikke
   en del af selve figuren. white-space:pre-wrap fordi teksten indsættes
   escapet (ikke som HTML), både server-renderet og når assets/js/
   report-preview.js's syncBlockField() opdaterer den live via textContent
   — ellers ville rigtige linjeskift i teksten ikke vises. :empty skjuler
   elementet helt når konklusionen er tom, både ved almindelig sidevisning
   og under selve indtastningen (fjernes automatisk igen, når der er tekst
   i feltet). */
.report-figure-conclusion {
    margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
    font-size: 14px; line-height: 1.6; color: var(--text-secondary, var(--muted));
    white-space: pre-wrap;
}
.report-figure-conclusion:empty { display: none; }

/* Rapportens forside (ReportChart::renderCover()) — ALTID først i rapporten, ALDRIG en figur-blok. To layouts, begge i rapportens eget
   tema (skrifttype, farver, radius sættes som --cv-*-variabler inline pr. rapport; begge layouts' farver er altid med, så builderen kan skifte
   layout live ved blot at bytte klassen report-cover--a/--b). Tekstfarverne er udregnet server-side ud fra baggrunden (læsbarhed uanset tema).
   print-color-adjust: exact sikrer at farvepaneler, gradienter og billeder kommer med i "Udskriv / Gem som PDF" (browsere fjerner ellers
   baggrunde som standard). */
.report-cover {
    position: relative; margin-bottom: 20px; overflow: hidden; text-align: left;
    border-radius: var(--cv-radius, 10px); font-family: var(--cv-font, inherit);
    container-type: inline-size;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-cover *, .report-cover *::before, .report-cover *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.report-cover--a { --cv-bg: var(--cv-panel-a); --cv-fg: var(--cv-on-a); --cv-ac: var(--cv-accent-a); background: #fff; }
.report-cover--b { --cv-bg: var(--cv-panel-b); --cv-fg: var(--cv-on-b); --cv-ac: var(--cv-accent-b); }
.report-cover-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.report-doc .report-cover h1,
.report-doc .report-cover p { color: var(--cv-fg); font-family: var(--cv-font, inherit); }
.report-doc .report-cover h1 {
    margin: 0; font-size: 32px; font-size: clamp(24px, 5.4cqw, 42px); line-height: 1.15; font-weight: 700; overflow-wrap: anywhere;
}
.report-cover p { margin: 0; }
.report-cover-org { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .9; margin-bottom: 12px !important; }
/* Opdelingsvariabelens værdi i en batch-delrapport (fx et institutionsnavn, se ReportChart::renderCover()'s $splitValue). */
.report-cover-split-value { margin-top: 12px !important; font-size: 22px; font-weight: 600; }
/* Undertitlen renderes ALTID (også tom), se renderCover()'s docblok — :empty skjuler den, samme mønster som .report-figure-title. */
.report-cover-subtitle { margin-top: 10px !important; font-size: 18px; line-height: 1.4; opacity: .92; white-space: pre-wrap; }
.report-cover-subtitle:empty { display: none; }
.report-cover-meta { margin-top: 18px !important; font-size: 14px; letter-spacing: .02em; opacity: .85; }
/* Logoet ligger på en hvid "chip", så det kan læses på både mørkt og lyst panel uanset logoets egne farver. */
.report-cover-logo {
    display: block; max-height: 56px; max-width: 200px; width: auto; margin-bottom: 20px;
    background: #fff; padding: 8px 12px; border-radius: 8px; box-sizing: content-box;
}
.report-cover-panel { padding: 0 clamp(20px, 5.5cqw, 44px); }

/* Layout A: fuld side (3:4 på skærm, hele siden ved print) — billedet fylder bredden og de øverste ca. to tredjedele, panelet i temaets farve
   (skrå kant + tynd accentstribe) går fuldbredde ned til nederste kant. Panelet er mindst en tredjedel af siden og vokser opad ved meget tekst;
   billedet tager resten. Den skrå kant måles i cqw (forsidens bredde), så hældningen er ens i smal preview, på skærm og på en hel side.
   Uden billede: hele siden er panelets farveflade, med accentstriben tegnet diagonalt på samme sted som den skrå kant ellers ville ligge. */
.report-cover--a { --cv-slant: 9cqw; display: flex; flex-direction: column; width: 100%; aspect-ratio: 3 / 4; min-height: 360px; max-height: 90vh; background: var(--cv-bg); }
.report-cover--a .report-cover-media { position: relative; flex: 1 1 auto; min-height: 0; background: var(--cv-bg); }
.report-cover--a .report-cover-image { position: absolute; inset: 0; object-position: 50% 40%; }
.report-cover--a .report-cover-panel {
    position: relative; z-index: 0; flex: 0 0 auto; min-height: 34%; display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: calc(var(--cv-slant) + 24px); padding-bottom: clamp(24px, 6cqw, 52px);
}
.report-cover--a.has-image .report-cover-panel { margin-top: calc(-1 * var(--cv-slant)); }
.report-cover--a .report-cover-panel::before,
.report-cover--a .report-cover-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; }
.report-cover--a.has-image .report-cover-panel::before,
.report-cover--a.has-image .report-cover-panel::after { clip-path: polygon(0 var(--cv-slant), 100% 0, 100% 100%, 0 100%); }
.report-cover--a .report-cover-panel::before { top: -6px; background: var(--cv-ac); }
.report-cover--a .report-cover-panel::after { top: 0; background: var(--cv-bg); }
.report-cover--a.no-image .report-cover-panel { flex: 1 1 auto; }
/* Uden billede ligger stribens lag (::before) over farveflade-laget (::after), ellers skjules den. */
.report-cover--a.no-image .report-cover-panel::after { z-index: -2; }
.report-cover--a.no-image .report-cover-panel::before {
    top: 0; clip-path: polygon(0 62%, 100% calc(62% - var(--cv-slant)), 100% calc(62% - var(--cv-slant) + 5px), 0 calc(62% + 5px));
}
/* Layout B: billedet fylder hele forsiden (3:4), kraftig gradient forneden så teksten altid kan læses. Uden billede: gradient i temafarven. */
.report-cover--b { width: 100%; aspect-ratio: 3 / 4; min-height: 360px; max-height: 90vh; background: var(--cv-bg); }
.report-cover--b.no-image { background: linear-gradient(160deg, var(--cv-primary) 0%, var(--cv-panel-b) 88%); }
.report-cover--b .report-cover-media { position: absolute; inset: 0; }
.report-cover--b.has-image::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--cv-bg) 0%, var(--cv-bg) 22%, transparent 78%);
}
.report-cover--b .report-cover-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
    padding-top: 40px; padding-bottom: clamp(24px, 6cqw, 52px);
}
.report-cover--b .report-cover-panel::before { content: ''; display: block; width: 56px; height: 4px; background: var(--cv-ac); margin-bottom: 20px; border-radius: 2px; }

/* Layout C "Duotone" og D "Gardin" (ReportChart::renderCoverCd()). Farver er udledt af temaet (--cv-deep = meget mørk primærfarve, --cv-light = lys tone,
   --cv-duo-accent = accent med kontrast mod den mørke tone). Titlens størrelse (--cv-title-size, cqw) vælges efter længste ord/antal linjer. */
.report-cover--c, .report-cover--d {
    --cv-fg: #fff; --cv-ac: var(--cv-duo-accent); display: flex; flex-direction: column; width: 100%; aspect-ratio: 3 / 4; min-height: 360px; max-height: 90vh;
    background: var(--cv-deep);
}
.report-cover-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.report-doc .report-cover--c h1, .report-doc .report-cover--d h1 {
    margin: 2cqw 0 0; font-size: 8cqw; font-size: var(--cv-title-size, 8cqw); line-height: 1.03; font-weight: 800; letter-spacing: -.02em;
    max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
}
.report-doc .report-cover--c .report-cover-label, .report-doc .report-cover--d .report-cover-label {
    font-size: 12px; font-size: clamp(11px, 1.9cqw, 14px); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--cv-ac);
}
.report-cover--c .report-cover-subtitle, .report-cover--d .report-cover-subtitle { margin-top: 2.2cqw !important; font-size: 15px; font-size: clamp(13px, 2.6cqw, 19px); }
.report-cover--c .report-cover-split-value, .report-cover--d .report-cover-split-value { margin-top: 1.6cqw !important; font-size: clamp(15px, 3cqw, 22px); }
.report-cover--c .report-cover-meta, .report-cover--d .report-cover-meta { margin-top: 1.4cqw !important; font-size: 13px; font-size: clamp(12px, 2.1cqw, 15px); opacity: .75; }
.report-cover--c .report-cover-logo, .report-cover--d .report-cover-logo { position: absolute; z-index: 3; margin: 0; max-height: 44px; max-height: clamp(28px, 6cqw, 46px); }

/* C: billedet fylder hele siden, omfarvet af SVG-filteret #cv-duo (skygger = mørk tone, højlys = lys tone). Understøttes filteret ikke, vises billedet i
   originale farver — den mørke gradient i bunden er uafhængig af filteret og sikrer læsbar tekst. Billede + gradient ligger i ét lag (.report-cover-duo). */
.report-cover--c .report-cover-media { position: absolute; inset: 0; }
.report-cover--c .report-cover-duo { position: absolute; inset: 0; overflow: hidden; background: var(--cv-deep); }
.report-cover--c.no-image .report-cover-duo { background: linear-gradient(160deg, var(--cv-strip) 0%, var(--cv-deep) 80%); }
.report-cover--c .report-cover-image { position: absolute; inset: 0; object-position: 50% 40%; filter: url(#cv-duo); }
.report-cover--c .report-cover-duo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(var(--cv-deep-rgb), .97) 0%, rgba(var(--cv-deep-rgb), .88) 32%, rgba(var(--cv-deep-rgb), .45) 52%, rgba(var(--cv-deep-rgb), 0) 72%);
}
.report-cover--c .report-cover-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 0 8cqw 8cqw;
}
.report-cover--c .report-cover-panel::before { content: ''; display: block; width: 8cqw; min-width: 36px; max-width: 64px; height: 4px; margin-bottom: 2.6cqw; background: var(--cv-ac); border-radius: 2px; }
.report-cover--c .report-cover-logo { top: clamp(16px, 4.5cqw, 32px); left: clamp(16px, 4.5cqw, 32px); }
.report-cover--c .report-ai-icon--image { z-index: 4; }

/* D: mørk side, billedet i seks lodrette strimler (samme billede, ét sammenhængende motiv; flad top, rund bund, forskellig højde). Hver strimmel er et
   udsnit af hele billedområdet: billedet har områdets fulde størrelse (strimlens bredde / 0,1583 og højde / --pf) og forskydes sideværts. */
/* Billedområdet er normalt 80cqw højt (ca. 62 % af siden), men giver plads til teksten, hvis den fylder meget (smal skærm, lang titel): det krymper ned til 36cqw. */
.report-cover--d .report-cover-media { position: relative; flex: 0 1 80cqw; min-height: 36cqw; margin: 6cqw 6cqw 0; }
.report-cover--d .report-cover-strips { position: absolute; inset: 0; }
.report-cover--d .report-cover-strip {
    position: absolute; top: 0; left: calc(var(--i) * 16.8333%); width: 15.8333%; height: calc(var(--pf) * 100%); overflow: hidden;
    border-radius: 0 0 6.9667cqw 6.9667cqw; background: var(--cv-strip);
}
.report-cover--d .report-cover-image {
    position: absolute; top: 0; left: calc(var(--i) * -106.3158%); width: 631.5789%; max-width: none; height: calc(100% / var(--pf)); object-position: 50% 40%;
}
.report-cover--d .report-ai-icon--image { top: 10px; right: 10px; }
.report-cover--d .report-cover-panel { flex: 0 0 auto; padding: 5.5cqw 6cqw 6cqw; }
.report-cover--d.has-logo .report-cover-panel { padding-bottom: calc(6cqw + clamp(28px, 5cqw, 40px) + 2cqw); }
.report-cover--d .report-cover-logo { right: 6cqw; bottom: 6cqw; max-height: 40px; max-height: clamp(26px, 5cqw, 40px); }

/* Print/PDF-opførsel for rapportens forside — ALTID sit eget sideskift bagefter, så første figur starter på side 2. Layout A og B fylder en hel
   side kant til kant: de får en navngiven side uden margen (Chromium; i browsere uden understøttelse af "page" bliver den i indholdskolonnens
   bredde, med samme indhold). */
@page report-cover-full { margin: 0; }
@media print {
    .report-doc .report-cover {
        page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid;
    }
    .report-doc .report-cover--a,
    .report-doc .report-cover--b,
    .report-doc .report-cover--c,
    .report-doc .report-cover--d {
        page: report-cover-full; border-radius: 0; max-height: none; min-height: 0; aspect-ratio: auto;
        width: 100vw; height: 100vh; margin: -40px 0 0 calc(50% - 50vw);
    }
    /* Gradient med gennemsigtighed ("transparent") udelades af flere PDF-læsere (fx Windows), når Chromium gemmer den som vektor. Et lille blur-filter
       får Chromium til at lægge overlayet ind som et almindeligt billede med alfakanal, som alle læsere viser korrekt (blur på en jævn gradient er
       usynligt; inset -2px skjuler den let udtonede kant). Kun ved print — skærmvisningen bruger den almindelige gradient. */
    .report-doc .report-cover--b.has-image::after { inset: -2px; filter: blur(0.4px); }
    /* C (plan A): det duotone-filtrerede billede + gradienten gøres til ÉT samlet bitmap med samme blur-trik, så alle PDF-læsere viser det ens. */
    .report-doc .report-cover--c .report-cover-duo { inset: -2px; filter: blur(0.4px); }
    .report-doc .report-cover--d .report-ai-icon--image { top: 10px; right: 10px; }
}
/* Forsidepanelet i rapport-builderen (admin/report-edit.php + assets/js/report-cover.js) */
.report-cover-image-row { display: flex; align-items: center; gap: 14px; }
.report-cover-thumb {
    width: 96px; aspect-ratio: 16 / 9; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--sage-light); display: flex; align-items: center; justify-content: center; color: var(--muted); position: relative;
}
.report-cover-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.report-cover-thumb img[hidden], .report-cover-thumb:not(.is-empty) i { display: none; }
.report-cover-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-cover-image-actions [hidden], #report-cover-logo-hint[hidden] { display: none !important; }
.report-cover-layouts { display: flex; gap: 10px; flex-wrap: wrap; }
.report-cover-layout-opt {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer; font-weight: 500; margin: 0; background: #fff;
}
.report-cover-layout-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.report-cover-layout-opt.active { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage); }
.report-cover-layout-icon { width: 30px; height: 40px; border: 1px solid var(--muted); border-radius: 3px; position: relative; overflow: hidden; background: #fff; flex-shrink: 0; }
.report-cover-layout-icon--a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--line); }
.report-cover-layout-icon--a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: var(--sage); clip-path: polygon(0 24%, 100% 0, 100% 100%, 0 100%); }
.report-cover-layout-icon--b { background: var(--line); }
.report-cover-layout-icon--b::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, var(--sage), transparent); }
/* C: billedet over hele siden med mørk gradient forneden og en accentstreg; D: mørk side med seks strimler af varierende højde. */
.report-cover-layout-icon--c { background: linear-gradient(to bottom, var(--muted), var(--ink)); }
.report-cover-layout-icon--c::before { content: ''; position: absolute; left: 4px; bottom: 9px; width: 9px; height: 2px; background: var(--sage); }
.report-cover-layout-icon--c::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; background: var(--line); opacity: .8; }
.report-cover-layout-icon--d { background: var(--ink); }
.report-cover-layout-icon--d::before {
    content: ''; position: absolute; left: 3px; right: 3px; top: 3px; height: 62%;
    background:
        linear-gradient(var(--line), var(--line)) 0 0 / 3px 100% no-repeat, linear-gradient(var(--line), var(--line)) 3.8px 0 / 3px 85% no-repeat,
        linear-gradient(var(--line), var(--line)) 7.6px 0 / 3px 93% no-repeat, linear-gradient(var(--line), var(--line)) 11.4px 0 / 3px 74% no-repeat,
        linear-gradient(var(--line), var(--line)) 15.2px 0 / 3px 87% no-repeat, linear-gradient(var(--line), var(--line)) 19px 0 / 3px 100% no-repeat;
}
.report-cover-layout-icon--d::after { content: ''; position: absolute; left: 3px; bottom: 5px; width: 12px; height: 2px; background: var(--sage); }
/* Fire valg: 2 × 2, også på smal skærm */
.report-cover-layouts { display: grid; grid-template-columns: 1fr 1fr; }
.report-cover-layout-opt { min-width: 0; }
.report-cover-elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.report-cover-element { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; }
.report-cover-status { min-height: 18px; margin-top: 10px; font-size: 13px; color: var(--sage); }
.report-cover-status.is-error { color: darkred; }
/* AI-forsidebilleder: knapper, strip af miniaturer og lightbox (assets/js/report-cover-ai.js) */
.report-cover-ai-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-cover-ai-buttons { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.report-cover-ai-buttons [hidden] { display: none !important; }
body.report-cover-modal-open { overflow: hidden; }
/* Stripen: nyeste forslag først, stående 4:5-miniaturer; på smalle skærme ryger den ned under knappen. */
.report-cover-strip { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; max-width: 100%; }
.report-cover-strip[hidden], .report-cover-strip-nav[hidden], .report-cover-strip-caption[hidden], #report-cover-ai-note[hidden] { display: none; }
.report-cover-strip.is-busy { opacity: .6; pointer-events: none; }
.report-cover-strip-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 5px; scrollbar-width: none; padding: 5px; flex: 1 1 auto; min-width: 0; }
.report-cover-strip-track::-webkit-scrollbar { display: none; }
.report-cover-strip-nav { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.report-cover-strip-nav:disabled { opacity: .35; cursor: default; }
.report-cover-chip { position: relative; flex: 0 0 72px; width: 72px; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.report-cover-chip-btn { display: block; width: 100%; height: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; background: var(--sage-light); cursor: pointer; }
.report-cover-chip-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.report-cover-chip.is-selected .report-cover-chip-btn { border-color: var(--sage); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sage); }
.report-cover-chip-zoom {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(15, 20, 30, .62); color: #fff; font-size: 13px; line-height: 22px; text-align: center; cursor: zoom-in; opacity: 0; transition: opacity .12s;
}
.report-cover-chip:hover .report-cover-chip-zoom, .report-cover-chip-zoom:focus-visible { opacity: 1; }
@media (hover: none) { .report-cover-chip-zoom { opacity: 1; } }
.report-cover-chip-check {
    display: none; position: absolute; bottom: 5px; left: 5px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sage); color: #fff; font-size: 12px; line-height: 18px; text-align: center; pointer-events: none;
}
.report-cover-chip.is-selected .report-cover-chip-check { display: block; }
.report-cover-strip-caption { margin-top: 6px; font-size: 13px; color: var(--ink); }
@media (max-width: 640px) { .report-cover-strip { flex-basis: 100%; } }
.report-cover-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(8, 10, 16, .9); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.report-cover-lightbox[hidden] { display: none; }
.report-cover-x { border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 6px; }
.report-cover-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff; min-width: 0; }
.report-cover-lb-figure img { display: block; max-height: calc(100vh - 150px); max-width: min(80vw, 760px); object-fit: contain; border-radius: var(--radius); background: #222; }
.report-cover-lb-figure figcaption { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.report-cover-lb-nav { flex-shrink: 0; background: rgba(255, 255, 255, .14); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.report-cover-lb-nav[hidden] { display: none; }
.report-cover-lb-close { position: absolute; top: 14px; right: 20px; color: #fff; }
/* Status for Google API-nøglen i Admin → AI → API (assets/js/ai-google-settings.js) */
.google-key-status { margin: 0 0 8px; font-weight: 600; }
.google-key-status.is-set { color: #1f6b3a; }
.google-key-status.is-missing { color: darkred; }

/* Fast printbredde for rapportens indhold (sættes af report-chart-render.js' beforeprint-lytter og af report-print.js): 680 px passer med
   standardmargener på både A4 og Letter i stående format, og diagrammerne gen-tegnes mod den bredde, før printlayoutet måles, så intet klippes. */
html.report-printing .report-doc { width: 680px; max-width: none !important; box-sizing: border-box; }
/* ================= Rapport-vieweren: sektionskort, tekstblokke, samlet konklusion (ReportChart::wrapSections()/renderTextBlock()) =================
   Sektion = overskriftsblok. Accent/skrift/mørk farve kommer fra temaet (--rp-accent/--rp-heading-font/--rp-dark, sat af report_theme_css()). Uden en
   overskrift i rapporten får hver figur sit eget kort (.report-section--figure, ingen numre). Alt andet i print: se @media print nedenfor. */
.report-doc { --rp-accent: var(--sage); --rp-dark: var(--ink); }
.report-section {
    background: #fff; border-radius: 10px; margin: 0 0 28px; padding: 40px 44px 22px;
    box-shadow: 0 1px 3px rgba(22, 35, 63, .06), 0 8px 24px rgba(22, 35, 63, .05);
}
.report-section--figure { padding-top: 26px; }
.report-section-head { padding-bottom: 26px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.report-section-no { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--rp-accent); }
.report-doc .report-section-head h2.report-heading-block {
    margin: 0 0 16px !important; font-family: var(--rp-heading-font, inherit); font-size: 40px; line-height: 1.1; font-weight: 600; text-wrap: balance;
}
.report-section-head h2.report-heading-block:empty { display: none; }
.report-section-rule { display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--rp-accent); }
.report-section .report-figure-block { margin: 0; padding: 30px 0; }
.report-section .report-figure-block + .report-figure-block { border-top: 1px dashed var(--line); padding-top: 30px; }
.report-section .report-figure-block h3 { margin: 0 0 6px; font-family: var(--rp-heading-font, inherit); font-size: 17px; font-weight: 600; line-height: 1.35; }
.report-section-foot {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .02em; color: var(--muted);
}

/* Tekstblok: valgfri overskrift + tekst. 'plain' = brødtekst uden boks; 'highlight' = tonet boks med accentkant. Tom tekst skjuler hele blokken. */
.report-text { margin: 20px 0; }
.report-text:has(> .report-text-body:empty) { display: none; }
.report-text-title { margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.report-text-title:empty { display: none; }
.report-text-body { font-size: 15px; line-height: 1.65; white-space: pre-wrap; color: var(--ink); }
.report-text-body.report-figure-conclusion { margin: 0; padding: 0; border: 0; font-size: 15px; color: var(--ink); }
.report-text--highlight {
    padding: 18px 22px; border-radius: 8px; border-left: 4px solid var(--rp-accent);
    background: #F7F2E8; background: color-mix(in srgb, var(--rp-accent) 9%, #fff);
}
.report-text--highlight .report-text-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: .75; }

/* Indholdsfortegnelse som piller under forsiden (kun skærm, kun ved to eller flere sektioner). */
.report-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.report-doc .report-toc a {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.report-toc a span { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--rp-accent); }
.report-doc .report-toc a:hover { border-color: var(--rp-accent); }

/* Rapportens samlede konklusion: stor, mørk boks lige efter forsiden (SurveyAiConclusion::renderReportBox()). */
.report-doc .report-conclusion { margin: 0 0 28px; padding: 36px 44px; border-radius: 10px; background: var(--rp-dark); color: #fff; }
.report-conclusion-label { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.report-conclusion-content { font-family: var(--rp-heading-font, serif); font-size: 18px; line-height: 1.6; color: #fff; }
.report-conclusion-content p { margin: 0 0 12px; }
.report-conclusion-content p:last-child { margin-bottom: 0; }
.report-conclusion-content h3 { margin: 18px 0 8px; font-size: 18px; color: #fff; }
.report-doc .report-conclusion-content h3 { color: #fff; }
.report-conclusion-content a { color: #fff; text-decoration: underline; }

@media (max-width: 640px) {
    .report-section, .report-doc .report-conclusion { margin-left: -24px; margin-right: -24px; border-radius: 0; box-shadow: none; padding: 28px 20px 18px; }
    .report-doc .report-section-head h2.report-heading-block { font-size: 30px; }
    .report-doc .report-conclusion { padding: 28px 20px; }
}

/* Print: ingen skygger/ramme; hver sektion på ny side (undtagen den første — forsiden har selv sideskift efter sig, og den mørke konklusion
   står før den); figur + tekst knækker ikke midt over; farver beholdes. Selve diagram-bredden styres af html.report-printing nedenfor. */
@page report-body { margin: 14mm 12mm 18mm; }
@media print {
    .report-doc { page: report-body; }
    .report-section { background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0; break-before: page; page-break-before: always; }
    .report-section:first-of-type, .report-section--figure, .report-section--prelude { break-before: auto; page-break-before: auto; }
    .report-section--figure { margin-bottom: 24px; }
    .report-section-foot, .report-toc { display: none; }
    .report-section-head { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; }
    .report-section-body > .report-figure-block:first-child { padding-top: 22px; }
    .report-text, .report-conclusion { break-inside: avoid; page-break-inside: avoid; }
    .report-section-no, .report-section-rule, .report-text--highlight, .report-conclusion { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-doc .report-conclusion { border-radius: 0; margin-left: 0; margin-right: 0; padding: 28px 32px; }
}
/* Samme neutrale kort-stil, mens siden er i print-tilstand (klassen sættes af report-chart-render.js/report-print.js lige før print), så diagrammerne
   gen-tegnes mod præcis den bredde de får i selve udskriften. */
html.report-printing .report-section { background: none; box-shadow: none; border-radius: 0; margin: 0 0 24px; padding: 0; }
html.report-printing .report-section-foot { display: none; }
html.report-printing .report-doc .report-conclusion { border-radius: 0; margin-left: 0; margin-right: 0; padding: 28px 32px; }

/* AI-ikon (✦): lille rund markering i hjørnet af AI-skrevet tekst, af den samlede konklusion og af et AI-genereret forsidebillede (ReportChart::aiIcon()).
   Ligger altid i markup'en på AI-indhold, men vises KUN når rapporten har "Vis AI-ikon" slået til (klassen report-doc--ai-icons) — ellers intet ikon i
   visning, delt visning eller print. Pladsen til ikonet reserveres som højre-padding på tekstblokken, så det aldrig dækker overskrift eller tekst. */
.report-ai-icon {
    display: none; position: absolute; top: 8px; right: 8px; z-index: 3; width: 22px; height: 22px; box-sizing: border-box;
    align-items: center; justify-content: center; border-radius: 50%; cursor: help;
    background: #fff; border: 1px solid #d6d6d6; border-color: color-mix(in srgb, var(--rp-accent, #6b7280) 30%, #d6d6d6); color: var(--rp-accent, #6b7280);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-ai-icon svg { display: block; width: 12px; height: 12px; fill: currentColor; }
.report-doc--ai-icons .report-ai-icon { display: inline-flex; }
.report-text, .report-doc .report-conclusion { position: relative; }
.report-doc--ai-icons .report-text--ai { padding-right: 32px; }
.report-doc--ai-icons .report-text--highlight.report-text--ai { padding-right: 44px; }
.report-doc--ai-icons .report-text--ai:not(.report-text--highlight) .report-ai-icon { top: 0; right: 0; }
/* På den mørke konklusion: lys, gennemsigtig variant; på forsidebilledet: hvid cirkel med mørkt ikon, der kan ses på ethvert billede. */
.report-ai-icon--dark { top: 14px; right: 14px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); color: #fff; }
.report-doc--ai-icons .report-conclusion-label { padding-right: 34px; }
.report-ai-icon--image { top: 14px; right: 14px; background: #fff; border-color: rgba(0, 0, 0, .18); color: #1f2937; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@media (max-width: 640px) {
    .report-ai-icon--dark { top: 10px; right: 10px; }
}
@media print {
    /* Forsiden fylder hele siden kant til kant: ikonet holdes uden for printerens urørlige kant. */
    .report-doc .report-ai-icon--image { top: 9mm; right: 9mm; }
}

/* Builderens tekstblok-valg (overskrift + visningsstil), se render_report_text_style_fields() i admin/report-edit.php */
.report-ai-notice { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted, #6b7280); }
.report-ai-notice[hidden] { display: none; }
.report-ai-notice-clear { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.report-ai-notice-clear:hover { color: var(--ink, #111); }
.report-ai-icon-option.is-disabled { opacity: .5; cursor: not-allowed; }
.report-ai-icon-option.is-disabled input { cursor: not-allowed; }
#report-ai-icon-hint { display: block; margin-top: 6px; }
#report-ai-icon-hint[hidden] { display: none; }
.report-text-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.report-text-options input[type="text"] { flex: 1 1 220px; min-width: 0; }
.report-text-style-choice { display: flex; gap: 14px; }
.report-text-style-choice label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }

/* Print/PDF-opførsel for rapport-visningerne (survey/report.php,
   survey/report-batch.php, admin/report-view.php — alle deler
   .report-doc-wrapperen og genbruger ReportChart::renderBlocks()/
   BatchReport::renderInstanceBlocks(), se disses .report-figure-block/
   .report-heading-block-klasser). Ingen blok (figur, overskrift eller
   kommentar) må knække midt over ved et sideskift — og en brugertilføjet
   overskrift-blok skal altid starte på en frisk side (uændret, tidligere
   adfærd). orphans/widows på selve .report-doc er et generelt sikkerheds-
   net for almindelig ombrudt brødtekst (fx en lang kommentar-blok, eller
   selve konklusionsteksten) der er for høj til at page-break-inside:avoid
   kan holde samlet — forhindrer at kun 1-2 linjer efterlades isoleret
   øverst/nederst på en side. Bevidst IKKE et bogstaveligt
   page-break-before:always på HVER blok (ville tvinge én figur pr. side,
   uholdbart for en rapport med mange figurer) — kombinationen af
   break-inside:avoid + orphans/widows giver samme resultat (ingen
   afskårne/isolerede blok-rester) uden den unødvendige sideforbrug. */
@media print {
    .report-doc { orphans: 3; widows: 3; }
    .report-doc .report-figure-block,
    .report-doc .report-heading-block,
    .report-doc p.sub {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .report-doc > .report-heading-block {
        page-break-before: always;
        break-before: page;
    }
}

/* Stablet vandret figur (matrix-spørgsmål): rækketeksten vises som ægte,
   venstrestillet DOM-tekst i sin egen kolonne til venstre for selve
   ECharts-figuren, IKKE som ECharts' egne akse-labels — ECharts
   højrestiller kategori-akse-labels mod aksen som standard, hvilket for en
   kort label efterlod synligt tomrum til venstre inden for den fælles,
   ensartede kolonnebredde (samme bredde bruges for ALLE rækker i figuren,
   jf. dens længste/mest pladskrævende label). Ægte DOM-tekst ombrydes og
   venstrestilles naturligt af browseren i stedet, uden det tomrum. Se
   assets/js/report-chart-render.js (buildMatrixChart) og admin/results.php. */
.stacked-h-figure { display: flex; align-items: stretch; }
.stacked-h-labels { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; }
.stacked-h-label { display: flex; align-items: center; padding-right: 8px; color: #666666; word-break: break-word; box-sizing: border-box; line-height: 1.3; }
/* BEMÆRK: havde tidligere overflow:hidden som en "sikkerhedsforanstaltning"
   mod at et ikke-resized ECharts-canvas kunne overlappe gennemsnits-/
   benchmark-kolonnerne til højre ved print. Det viste sig i praksis at
   klippe den sidste bjælke-segment/label af i print/PDF (fx "Helt enig"),
   fordi et resized canvas kan blive nogle få pixels bredere end sin
   flex-container (afrunding) — helt normalt, men blev fejlagtigt beskåret
   af overflow:hidden. Den rigtige fix er allerede på plads (beforeprint →
   instance.resize() i report-chart-render.js), så denne klipning er ikke
   nødvendig og gjorde mere skade end gavn. */
.stacked-h-chart { flex: 1 1 auto; min-width: 0; }

/* Gennemsnits-/benchmark-kolonner til højre for en stablet vandret figur —
   samme række-op-mod-bjælke-alignment-princip som .stacked-h-labels (samme
   padding-top/bund som ECharts-gridens top/bund, sat i JS), blot til højre
   for figuren i stedet for til venstre. Se buildMatrixChart() i
   assets/js/report-chart-render.js: .stacked-h-avgcol er den valgfrie
   "Vis gennemsnit"-kolonne (rapport-builderens figur-indstilling),
   .stacked-h-benchcol er batch-rapporters automatiske benchmark-kolonne
   (aldrig vist i den almindelige rapport-builder eller enkelt-delte
   rapport-links). */
.stacked-h-avgcol { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; padding-left: 12px; }
.stacked-h-avgcol-row { display: flex; align-items: center; justify-content: flex-start; color: var(--muted); font-size: 13px; box-sizing: border-box; }
/* Når avgCol står foran en benchmark-kolonne (se stacked-h-avgcol-row-strong
   ovenfor), skal tallet centreres i mellemrummet mellem sidste bjælke og
   .stacked-h-benchcol's kantlinje i stedet for at klistre op ad den —
   samme padding på begge sider af teksten giver den centrering. */
.stacked-h-avgcol-benchmark { padding-left: 12px; padding-right: 12px; }
.stacked-h-avgcol-benchmark .stacked-h-avgcol-row { justify-content: center; }
/* Bruges når avgCol viser figurens EGET gennemsnit ved siden af en
   benchmark (i stedet for den almindelige, umarkerede "vis gennemsnit"
   figur-indstilling) — fremhævet fordi det nu er tallet der sammenlignes
   MOD benchmark-tallet i .stacked-h-benchcol, adskilt af dennes venstre
   kantlinje (den ENESTE streg mellem de to gennemsnit). */
.stacked-h-avgcol-row-strong { color: var(--ink); font-weight: 600; }
.stacked-h-benchcol { flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; padding-left: 16px; border-left: 1px solid var(--line); }
.stacked-h-benchcol-row { display: flex; align-items: center; gap: 8px; box-sizing: border-box; font-size: 13px; color: var(--muted); }
.stacked-h-bench-value { white-space: nowrap; }
.stacked-h-bench-diff { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.stacked-h-bench-diff-bar { width: 4px; height: 16px; border-radius: 2px; background: var(--line); }
.stacked-h-bench-diff-pos { color: var(--sage); }
.stacked-h-bench-diff-pos .stacked-h-bench-diff-bar { background: var(--sage); }
.stacked-h-bench-diff-neg { color: var(--danger); }
.stacked-h-bench-diff-neg .stacked-h-bench-diff-bar { background: var(--danger); }
.stacked-h-bench-diff-zero { color: var(--muted); }

/* Benchmark-navnets header (kun matrix-figurer, se buildMatrixChart() i
   assets/js/report-chart-render.js) — indsat som .stacked-h-benchcol's
   FØRSTE flex-barn, så den automatisk får kolonnens egen bredde uden
   manuel bredde-matchning; ingen padding-left her, da forælderens egen
   padding-left allerede rykker ALLE dens børn (header såvel som rækker). */
.stacked-h-benchcol-header {
    flex: 0 0 auto; box-sizing: border-box; font-size: 12px; font-weight: 600;
    color: var(--muted); line-height: 1.3; word-break: break-word; margin-bottom: 4px;
}

/* ---------- Batch-rapporter (admin/report-batches.php) ---------- */
.batch-preview-list { list-style: none; margin: 12px 0; padding: 0; }
.batch-preview-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.batch-preview-list li:last-child { border-bottom: none; }
.batch-preview-zero { color: var(--muted); }
.batch-preview-zero-tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #7A3B1E;
    background: var(--danger-bg); border: 1px solid #E8B4A0; border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.js-batch-generate-btn:disabled, .js-results-export-btn.is-loading { opacity: .6; }
/* Brugerdefineret benchmark-navn, nederst i den grønne benchmark-
   forklaringsboks (admin/report-batches.php). */
.batch-benchmark-label-field { margin: 12px 0 0; }
.batch-benchmark-label-row { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.batch-benchmark-label-row input { flex: 1; }
.batch-benchmark-label-counter { flex-shrink: 0; font-size: 12px; color: var(--muted); min-width: 18px; text-align: right; }
/* Benchmark-lag: sammenligningstabel (gruppe vs. benchmark) under enhver
   figur i den delte batch-rapport, se assets/js/report-chart-render.js. */
.report-benchmark-table { margin-top: 10px; font-size: 13px; }
.report-benchmark-table th, .report-benchmark-table td { padding: 4px 8px; }
.report-benchmark-score { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.report-batch-sticky-header {
    position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--line);
    padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ── Tablet zoom (iPad landscape) ──
   Admin-interfacet er designet til desktop (~1280px+) og virker komprimeret
   på en iPad i landscape (~1024px CSS-bredde). <body> har ingen fast klasse
   at style på (html_head()'s $bodyClass er tom med mindre en enkelt side
   eksplicit sætter den, fx builder-page) — .admin-shell (admin/includes/
   layout.php, wrapperen om sidebar + indhold) er derimod til stede på
   SAMTLIGE indloggede admin-sider og ALDRIG i survey/-frontenden
   (respondentens visning bruger sine egne layoutfiler, se survey/layouts/),
   så den rammer præcis det tilsigtede uden at kunne lække ud i
   respondent-visningen. Portræt-iPad (under 768px) er bevidst udeladt —
   kræver layoutændringer, out of scope her. */
@media (max-width: 1100px) and (min-width: 768px) {
    .admin-shell {
        zoom: 0.88;
    }
}

/* ---------- Rapport-tema-vælger (visuelle preview-kort, ikke dropdown) ---------- */
.report-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.report-theme-card { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.report-theme-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.report-theme-preview {
    width: 100%; aspect-ratio: 4 / 3; border: 2px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s;
}
.report-theme-card.active .report-theme-preview,
.report-theme-card:hover .report-theme-preview { border-color: var(--ink); box-shadow: 0 2px 8px rgba(22,35,63,.12); }
.report-theme-preview-cover {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 18px;
}
.report-theme-preview-accent { width: 20px; height: 3px; border-radius: 2px; }
.report-theme-preview-bars { display: flex; align-items: flex-end; gap: 4px; padding: 8px; height: 30px; }
.report-theme-preview-bars span { flex: 1; }
.report-theme-name { font-size: 12.5px; font-weight: 500; color: var(--muted); text-align: center; }
.report-theme-card.active .report-theme-name { color: var(--ink); font-weight: 600; }

/* ---------- Hjælpecenter (admin/help.php, admin/help-article.php,
   admin/superadmin/help-center.php) ---------- */
.help-search-wrap { position: relative; margin-bottom: 28px; max-width: 560px; }
.help-search-input {
    width: 100%; padding: 14px 16px; font-size: 15px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--card);
}
.help-search-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(107, 143, 113, .15); }
.help-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    max-height: 420px; overflow-y: auto; z-index: 20;
}
.help-search-result {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none;
    color: var(--ink); border-bottom: 1px solid var(--line);
}
.help-search-result:last-child { border-bottom: none; }
.help-search-result:hover { background: var(--sage-light); }
.help-search-result-category { font-size: 12px; color: var(--muted); }
.help-search-result-title { font-size: 14.5px; font-weight: 500; }
.help-search-empty { padding: 16px; margin: 0; }

.help-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.help-category-card {
    display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--card);
    border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.help-category-card:hover { border-color: var(--sage); transform: translateY(-2px); }
.help-category-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.help-category-name { font-size: 16px; font-weight: 600; }
.help-category-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; flex-grow: 1; }
.help-category-count { font-size: 12px; color: var(--sage); font-weight: 500; margin-top: 6px; }

.help-article-list { display: flex; flex-direction: column; gap: 8px; }
.help-article-list-item {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500;
}
.help-article-list-item:hover { border-color: var(--sage); background: var(--sage-light); }
.help-article-list-arrow { color: var(--muted); }

.help-article-page { max-width: 760px; margin: 0 auto; }
.help-article { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 40px 48px; }
.help-article-title { font-family: 'Saira', system-ui, sans-serif; font-size: 30px; margin: 0 0 8px; color: var(--ink); }
.help-article-meta { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.help-article-content { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.help-article-content h2 { font-size: 20px; margin: 32px 0 12px; }
.help-article-content h3 { font-size: 17px; margin: 24px 0 10px; }
.help-article-content p { margin: 0 0 16px; }
.help-article-content ul, .help-article-content ol { margin: 0 0 16px; padding-left: 22px; }
.help-article-content li { margin-bottom: 6px; }
.help-article-content img { max-width: 100%; border-radius: var(--radius); }
.help-article-content a { color: var(--sage); }

/* Trin-for-trin-boks: nummererede steps til handlinger der kræver flere trin
   i rækkefølge. Almindelig <ol> inde i boksen — nummereringen kommer gratis
   fra listen selv, ingen custom counter-CSS nødvendig. */
.help-steps {
    background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 24px; margin: 20px 0;
}
.help-steps ol { margin: 0; padding-left: 20px; }
.help-steps li { margin-bottom: 10px; }
.help-steps li:last-child { margin-bottom: 0; }

/* Tip-boks: nyttige genveje/bedste praksis. */
.help-tip {
    background: #EEF5F0; border: 1px solid #CFE3D4; border-radius: var(--radius);
    padding: 16px 18px; margin: 20px 0; font-size: 14.5px;
}
.help-tip strong { color: #2C5233; }

/* Advarselsboks: handlinger der ikke kan fortrydes/kræver opmærksomhed. */
.help-warning {
    background: #FBF2E3; border: 1px solid #F0DDB4; border-radius: var(--radius);
    padding: 16px 18px; margin: 20px 0; font-size: 14.5px;
}
.help-warning strong { color: #8A5A12; }

/* Kode/variabel-eksempler (flettefelter som {{navn}}). */
.help-article-content code, .help-var {
    font-family: ui-monospace, Consolas, monospace; background: var(--sage-light);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 13.5px; color: var(--ink);
}

/* Enkel UI-illustration/mockup — bruges sparsomt i artiklerne til at vise
   fx en knap eller et menupunkt i systemets egen visuelle stil, uden at det
   er et rigtigt, interaktivt element. */
.help-mockup {
    display: inline-flex; align-items: center; gap: 8px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px;
    margin: 4px 0; font-size: 14px; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.help-mockup-btn {
    display: inline-block; background: var(--ink); color: #fff; border-radius: var(--radius);
    padding: 8px 16px; font-size: 13.5px; font-weight: 500;
}
.help-mockup-btn.help-mockup-btn-sage { background: var(--sage); }

.help-related { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.help-related h3 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.help-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-related a { color: var(--sage); text-decoration: none; font-weight: 500; }
.help-related a:hover { text-decoration: underline; }

.help-feedback { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.help-feedback-question { font-weight: 500; margin: 0 0 12px; }
.help-feedback-buttons { display: flex; justify-content: center; gap: 10px; }
.help-feedback-thanks { color: var(--sage); font-weight: 500; margin: 0; }

/* Super-admin CRUD-listerne (kategorier + artikler pr. kategori). */
.help-admin-row { display: flex; align-items: center; gap: 10px; }
.help-admin-category-row, .help-admin-article-row {
    padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.help-admin-list li:last-child { border-bottom: none; }
.help-admin-row-icon { font-size: 16px; }
.help-admin-row-title { font-weight: 500; }
.help-admin-category-row.dragging, .help-admin-article-row.dragging { opacity: .4; }
.help-admin-preview-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px 24px; min-height: 200px; }

/* "Sektioner"-boksen øverst i admin/superadmin/site-content.php — samme
   træk-og-slip-rækkemønster som .help-admin-category-row ovenfor, se
   assets/js/site-content-sections-reorder.js. */
.site-content-section-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.site-content-section-row:last-child { border-bottom: none; }
.site-content-section-row.dragging { opacity: .4; }
.site-content-section-name { font-weight: 500; flex: 1; }
.site-content-section-visible-label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; cursor: pointer; }

/* Tegnoptæller for AI-prompt-feltet ("Lav en survey med AI", admin/surveys.php
   + assets/js/ai-generate.js) — skjult indtil 1000+ tegn, skifter farve fra
   1400 tegn som en sidste advarsel inden maxlength="1500" selv stopper
   indtastningen. */
.ai-prompt-counter { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ai-prompt-counter.ai-prompt-counter-danger { color: var(--danger); }

/* ---------- Admin-typografi (Saira + Plus Jakarta Sans) ----------
   Gælder KUN sider med body.admin-ui (sat af admin_shell_start()/auth_layout(), som også henter
   fontene via admin_font_links()). Survey-svarsiden, landingssiden og de øvrige sider der deler
   app.css/html_head() er uberørte og beholder Source Serif 4 + Inter (eller deres egen
   designstil, se .style-*). :where(body.admin-ui) giver reglerne ren element-specificitet
   (0,0,1): de vinder over de generelle h1-h3/body-regler længere oppe (senere i filen), men
   komponent-klasser med bevidst egen skrifttype (monospace i .color-hex-input, emoji-stakken
   i .r-visual-icon, tema-forhåndsvisninger m.fl.) vinder stadig over dem. */
body.admin-ui { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
:where(body.admin-ui) h1, :where(body.admin-ui) h2, :where(body.admin-ui) h3,
:where(body.admin-ui) h4, :where(body.admin-ui) h5, :where(body.admin-ui) h6 {
    font-family: 'Saira', system-ui, sans-serif;
}
:where(body.admin-ui) p, :where(body.admin-ui) li, :where(body.admin-ui) td, :where(body.admin-ui) th,
:where(body.admin-ui) label, :where(body.admin-ui) legend, :where(body.admin-ui) input,
:where(body.admin-ui) textarea, :where(body.admin-ui) select, :where(body.admin-ui) nav,
:where(body.admin-ui) a {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Knapper eksplicit — nogle browsere arver ikke font på button */
:where(body.admin-ui) button, :where(body.admin-ui) .btn,
:where(body.admin-ui) [type="button"], :where(body.admin-ui) [type="submit"], :where(body.admin-ui) [type="reset"] {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* NPS-tallet findes både i admin (results.php) og i offentlige rapportvisninger — kun admin-versionen skiftes. */
body.admin-ui .nps-score-value { font-family: 'Saira', system-ui, sans-serif; }

/* ---------- SurveyBotty-sektionen på new-survey.php ----------
   Alt AI-relateret bruger lilla (--ai) — avatar, boble, primærknapper, AI-kortets accent;
   sage er forbeholdt skabelon-kortet/standardelementer. Al CSS er scopet under .admin-ui. */
.admin-ui { --ai: #8B6FA8; --ai-light: #F2EDF8; --ai-line: rgba(139, 111, 168, .4); }

/* "Opret med AI"-kortet: lilla accent (kant, ikon, knap, fokus) — resten af kort-strukturen er fælles, se .ns-* ovenfor */
.admin-ui .ns-card-ai { border-color: var(--ai-line); }
.admin-ui .ns-card-ai:hover { border-color: rgba(139, 111, 168, .7); box-shadow: 0 8px 28px rgba(139, 111, 168, .18); }
.admin-ui .ns-card-ai.ns-card-highlight { border-color: var(--ai); box-shadow: 0 0 0 3px rgba(139, 111, 168, .15); }
.admin-ui .ns-card-ai textarea:focus { border-color: var(--ai); outline: none; box-shadow: 0 0 0 3px rgba(139, 111, 168, .15); }
.admin-ui .ns-btn-ai svg { margin-right: 0; vertical-align: middle; }

/* Selve sektionen: samme bredde som kort-gridet (.ns-grid, 1020px) */
.admin-ui .surveybotty-section {
    max-width: 1020px; margin-top: 18px; padding: 32px; scroll-margin-top: 100px;
    background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
}
.admin-ui .surveybotty-section[hidden] { display: none; }
.admin-ui .sbs-row { display: flex; gap: 16px; align-items: flex-start; }
.admin-ui .sbs-avatar {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--ai); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Saira', system-ui, sans-serif; font-size: 22px; font-weight: 700; line-height: 1;
}
/* Robotikonet (surveybotty_robot_icon(), samme størrelse som i chat-widgettens knap) */
.admin-ui .sbs-avatar svg { width: 26px; height: 26px; display: block; }
.admin-ui .sbs-bubble {
    flex: 1 1 auto; min-width: 0; padding: 16px 20px; background: var(--ai-light); border-radius: 12px;
    font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
.admin-ui .sbs-bubble p { margin: 0; }
.admin-ui .sbs-bubble .sbs-quote-label { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.admin-ui .sbs-quote {
    margin: 6px 0 0; padding: 12px 14px; background: #fff; border: 1px solid rgba(139, 111, 168, .25);
    border-left: 3px solid var(--ai); border-radius: var(--radius); font-size: 14px; line-height: 1.55;
}
.admin-ui .sbs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0 64px; }
.admin-ui .sbs-actions:empty { display: none; }
.admin-ui .sbs-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: var(--radius);
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: opacity .15s;
}
.admin-ui .sbs-btn-primary { background: var(--ai); color: #fff; }
.admin-ui .sbs-btn-primary:hover { opacity: .9; }
.admin-ui .sbs-btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.admin-ui .sbs-btn-ghost:hover { color: var(--ink); border-color: var(--ai-line); }
.admin-ui .sbs-btn:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }

/* Bygge-tilstand: beskeder tilføjes én ad gangen, tidligere dæmpes */
.admin-ui .sbs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-ui .sbs-step { display: flex; align-items: center; gap: 10px; animation: sbs-in .25s ease both; }
.admin-ui .sbs-step.is-past { color: var(--muted); }
.admin-ui .sbs-step.is-final { font-weight: 600; }
.admin-ui .sbs-check {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #2E8B57; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
@keyframes sbs-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-ui .sbs-step { animation: none; } }
@media (max-width: 640px) {
    .admin-ui .surveybotty-section { padding: 20px; }
    .admin-ui .sbs-row { gap: 12px; }
    .admin-ui .sbs-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 18px; }
    .admin-ui .sbs-avatar svg { width: 22px; height: 22px; }
    .admin-ui .sbs-bubble { padding: 14px 16px; }
    .admin-ui .sbs-actions { margin-left: 0; }
    .admin-ui .sbs-actions .sbs-btn { flex: 1 1 100%; }
}

/* AI-kortet: sprogvalg + pris mellem textarea og "Byg med AI"-knappen, og SurveyBotty's sammenfoldelige tænkeboks */
.admin-ui .ns-ai-lang { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.admin-ui .ns-ai-lang-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.admin-ui .ns-ai-lang .ai-lang-checkboxes { margin: 0; gap: 6px 14px; }
.admin-ui .ns-ai-lang .ai-lang-checkbox-item { font-size: 13px; color: var(--ink); cursor: pointer; }
.admin-ui .ns-ai-lang .ai-lang-checkbox-item input { accent-color: var(--ai); }
.admin-ui .ns-ai-cost { font-size: 12.5px; font-weight: 600; color: var(--ai); }
.admin-ui .ns-ai-cost[hidden] { display: none; }
/* "Stop →" ved siden af statusindikatoren (validering + bygning, assets/js/new-survey-botty.js) */
.admin-ui .sbs-build-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-ui .sbs-build-row > .sbs-steps, .admin-ui .sbs-build-row > .sbs-bubble-text { flex: 1 1 auto; min-width: 0; margin-top: 0; margin-bottom: 0; }
.admin-ui .sbs-stop { flex: 0 0 auto; padding: 6px 14px; font-size: 13px; }
.admin-ui .sbs-stop:disabled { opacity: .5; cursor: default; }
.admin-ui .sbs-thoughts-wrap { margin-top: 12px; }
.admin-ui .sbs-thoughts-wrap[hidden], .admin-ui .sbs-thoughts[hidden] { display: none; }
.admin-ui .sbs-thoughts-toggle {
    padding: 0; border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--ai); cursor: pointer;
}
.admin-ui .sbs-thoughts-toggle:hover { text-decoration: underline; }
.admin-ui .sbs-thoughts-toggle:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: 3px; }
.admin-ui .sbs-thoughts {
    max-height: 180px; margin-top: 8px; padding: 10px 12px; overflow-y: auto;
    background: rgba(255, 255, 255, .7); border: 1px solid rgba(139, 111, 168, .25); border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace; font-size: 12px; line-height: 1.55;
    color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- Design → Billeder: billedgalleri til coverbilleder i survey-kortenes billedbånd (4:1), admin/superadmin/design.php?tab=images ---------- */
.admin-ui .gal [hidden], .admin-ui .gal-tile[hidden] { display: none !important; }
.admin-ui .gal-caps { margin: 0 0 12px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
.admin-ui .gal-caps strong { color: var(--ink); }
.admin-ui .gal-summary { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.admin-ui .gal-warn { margin: 0 0 10px; }
.admin-ui .gal-recommend { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.admin-ui .img-shell-check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; margin: 4px 0; }
.admin-ui .img-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.admin-ui .img-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
    min-height: 200px; padding: 20px; border: 2px dashed var(--line); border-radius: var(--radius-lg, 12px); background: var(--paper);
    transition: border-color .15s, background-color .15s;
}
.admin-ui .img-dropzone.is-over { border-color: var(--sage); background: #fff; }
.admin-ui .img-dropzone-icon { font-size: 34px; color: var(--muted); line-height: 1; }
.admin-ui .img-dropzone-title { font-weight: 600; color: var(--ink); }
.admin-ui .img-dropzone-btn { margin-top: 8px; }
.admin-ui .img-upload-meta { min-width: 0; }
.admin-ui .img-gallery-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; margin-bottom: 8px; }
.admin-ui .gal-count { margin-bottom: 14px; min-height: 1em; }
.admin-ui .img-gallery-empty { padding: 22px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.admin-ui .img-gallery-empty-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* Kortbåndets format: .s-head OG galleriets miniaturer deler samme 4:1-beskæring og lodrette fokus (--s-y) — ingen fade. */
.admin-ui .gal-thumb {
    position: relative; width: 100%; aspect-ratio: 4 / 1; box-sizing: border-box; border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px);
    background-image: var(--s-img, none);
    background-size: cover; background-position: center var(--s-y, 50%); background-repeat: no-repeat; background-color: var(--line);
}
.admin-ui .gal-badges { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.admin-ui .gal-badge { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ai-light, #F2EDF8); color: var(--ai, #8B6FA8); }
.admin-ui .gal-badge-off { background: #FFF6E0; color: #6B4E10; }

.admin-ui .gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.admin-ui .gal-tile { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.admin-ui .gal-tile.is-inactive .gal-thumb { opacity: .5; }
.admin-ui .gal-meta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; min-width: 0; }
.admin-ui .gal-name { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.admin-ui .gal-dim { font-size: 12px; color: var(--muted); white-space: nowrap; }
.admin-ui .gal-flags { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.admin-ui .gal-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.admin-ui .gal-saved { font-size: 12px; color: var(--muted); }
.admin-ui .gal-saved.is-ok { color: #2f7a3b; }
.admin-ui .gal-saved.is-error { color: #a8321f; }

/* Nøgleord (tag-input) */
.admin-ui .gal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; min-height: 38px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: text; }
.admin-ui .gal-tags:focus-within { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(22, 35, 63, .08); }
.admin-ui .gal-tags .gal-tags-input { flex: 1 1 110px; min-width: 90px; width: auto; border: 0; outline: 0; box-shadow: none; background: transparent; padding: 3px 2px; margin: 0; font-size: 14px; }
.admin-ui .gal-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px 1px 10px; border-radius: 999px; font-size: 12.5px; background: var(--ai-light, #F2EDF8); color: var(--ink); }
.admin-ui .gal-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 5px; color: var(--muted); }
.admin-ui .gal-chip-x:hover { color: var(--ink); }

/* Klar til upload (trin 1) */
.admin-ui .gal-staged { margin-bottom: 24px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); }
.admin-ui .gal-staged-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-ui .gal-staged-actions { display: flex; gap: 8px; }
.admin-ui .gal-stage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.admin-ui .gal-stage[data-state="error"] { border-color: #e1b4ac; }
.admin-ui .gal-stage[data-state="done"] { border-color: #b7d8bb; }
.admin-ui .gal-stage[data-state="uploading"] { opacity: .75; }
.admin-ui .gal-stage-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-ui .gal-stage-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-ui .gal-stage-top .gal-name { flex: 1; }
.admin-ui .gal-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.admin-ui .gal-stage[data-state="done"] .gal-status { color: #2f7a3b; }
.admin-ui .gal-msg { font-size: 12.5px; }
.admin-ui .gal-msg.is-error { color: #a8321f; }
.admin-ui .gal-msg.is-warn { color: #6B4E10; }

/* Slet-modal */
.admin-ui .gal-delete-thumb {
    aspect-ratio: 4 / 1; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px;
    background-size: cover; background-repeat: no-repeat; background-color: var(--line);
}
.admin-ui .gal-delete-name { font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .admin-ui .img-upload-row, .admin-ui .img-gallery-toolbar, .admin-ui .gal-stage { grid-template-columns: minmax(0, 1fr); }
    .admin-ui .gal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- "✦ Tilføj et spørgsmål med AI": sticky knap i strukturpanelet + modal (assets/js/builder-ai-question.js) ---------- */
/* Panelet må ikke vokse ud over indholdsområdet, så det selv scroller (overflow-y: auto) og knappen kan holde sig i bunden. */
.admin-ui .builder-nav-panel { max-height: 100%; }
/* Flex-kolonne: uden dette presses sidegrupperne sammen (de har overflow: hidden) i stedet for at panelet scroller. */
.admin-ui .builder-nav-panel > * { flex-shrink: 0; }
.admin-ui .bnp-ai-footer {
    position: sticky; bottom: 0; z-index: 2; margin: 6px -8px -8px; padding: 12px 8px 8px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card) 30%);
}
.admin-ui .bnp-ai-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 10px;
    border: none; border-radius: var(--radius); background: var(--ai, #8B6FA8); color: #fff; font-family: inherit;
    font-size: 13px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 111, 168, .3);
}
.admin-ui .bnp-ai-btn:hover { background: #7a5e96; }
.admin-ui .bnp-ai-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.admin-ui .bnp-ai-btn svg { flex-shrink: 0; }
/* Sammenfoldet panel (120 px): kun ikonet — teksten ligger i title-tooltippen. */
.admin-ui .builder-nav-panel.collapsed .bnp-ai-btn-label { display: none; }
.admin-ui .builder-nav-panel.collapsed .bnp-ai-btn { padding: 10px 6px; }

.admin-ui .bq-modal-backdrop {
    position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(22, 35, 63, .55);
}
.admin-ui .bq-modal-backdrop[hidden] { display: none; }
.admin-ui .bq-modal {
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 22px 24px 24px;
    background: var(--card); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(22, 35, 63, .3);
}
.admin-ui .bq-modal.is-busy { cursor: progress; }
.admin-ui .bq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.admin-ui .bq-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; color: var(--ai, #8B6FA8); }
.admin-ui .bq-close {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none;
    border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.admin-ui .bq-close:hover { background: var(--line); color: var(--ink); }
.admin-ui .bq-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.admin-ui .bq-modal textarea, .admin-ui .bq-modal select { width: 100%; }
.admin-ui .bq-modal textarea:focus, .admin-ui .bq-modal select:focus { border-color: var(--ai, #8B6FA8); outline: none; box-shadow: 0 0 0 3px rgba(139, 111, 168, .15); }
.admin-ui .bq-error {
    margin: 4px 0 12px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45;
    color: var(--danger); background: var(--danger-bg); border: 1px solid #E8B4A0; border-radius: var(--radius);
}
.admin-ui .bq-error[hidden], .admin-ui .bq-preview[hidden] { display: none; }
.admin-ui .bq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.admin-ui .bq-preview { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-ui .bq-preview h4 { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.admin-ui .bq-prev-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.admin-ui .bq-prev-row[hidden] { display: none; }
.admin-ui .bq-prev-label { font-size: 12.5px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.admin-ui .bq-prev-value { min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--ink); }
.admin-ui .bq-options { margin: 0; padding-left: 18px; }
.admin-ui .bq-options li { margin-bottom: 3px; }
.admin-ui .bq-none { font-size: 13px; color: var(--muted); }
/* Pris før generering, afvisning med klikbare forslag, gruppe med afkrydsning, placering og "brugt credit" (assets/js/builder-ai-question.js) */
.admin-ui .bq-cost-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.admin-ui .bq-reject { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-ui .bq-reject-msg { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.admin-ui .bq-sugg-label { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.admin-ui .bq-sugg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.admin-ui .bq-sugg { justify-content: flex-start; height: auto; padding: 8px 12px; text-align: left; white-space: normal; line-height: 1.35; }
.admin-ui .bq-reject-end { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.admin-ui .bq-group-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.admin-ui .bq-group-list { margin: 0 0 12px; padding: 0; list-style: none; }
.admin-ui .bq-group-item { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; cursor: pointer; }
.admin-ui .bq-group-item input { width: auto; margin-top: 3px; flex-shrink: 0; }
.admin-ui .bq-gi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--ink); }
.admin-ui .bq-gi-meta { font-size: 12.5px; color: var(--muted); }
.admin-ui .bq-place { margin: 12px 0 8px; }
.admin-ui .bq-credit-used, .admin-ui .bq-trimmed { margin: 8px 0; font-size: 12.5px; color: var(--muted); }
.admin-ui .bq-reject[hidden], .admin-ui #bq-single[hidden], .admin-ui #bq-group[hidden], .admin-ui .bq-sugg-label[hidden], .admin-ui .bq-sugg-list[hidden],
.admin-ui .bq-reject-end[hidden], .admin-ui .bq-trimmed[hidden], .admin-ui .bq-credit-used[hidden], .admin-ui #bq-more[hidden] { display: none; }
@media (max-width: 560px) {
    .admin-ui .bq-modal { padding: 18px 16px 20px; }
    .admin-ui .bq-prev-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Skift cover-billede (dashboardets survey-kort): ikon på kortbåndet + modal + toast (assets/js/card-cover.js) ---------- */
/* Ikonet ligger OVER titlens "stretched link" (.s-title a::after, z-index 1), så et klik på det aldrig åbner kortet. */
.s-cover-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink);
    background: rgba(255, 255, 255, .88); box-shadow: 0 1px 4px rgba(22, 35, 63, .3); transition: background-color .15s, transform .15s;
}
.s-cover-btn:hover { background: #fff; transform: scale(1.06); }
.s-cover-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; background: #fff; }
/* Tooltip (hover + tastaturfokus): åbner nedad og mod venstre, så den holder sig inde i kortet. */
.s-cover-btn::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; white-space: nowrap; pointer-events: none;
    padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; background: var(--ink); color: #fff;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.s-cover-btn:hover::after, .s-cover-btn:focus-visible::after { opacity: 1; visibility: visible; }

.cv-overlay { position: fixed; inset: 0; z-index: 500; /* over SurveyBotty-knappen (z-index 400) */ display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 35, 63, .5); }
.cv-overlay[hidden] { display: none; }
.cv-panel {
    display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: min(92vh, 860px); background: var(--card, #fff);
    border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(22, 35, 63, .35); overflow: hidden;
}
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.cv-head h2 { margin: 0; font-size: 18px; }
.cv-close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.cv-close:hover { color: var(--ink); background: var(--paper); }
.cv-current-line { margin: 6px 20px 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--line); }
.cv-tab { border: 0; background: transparent; padding: 9px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cv-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cv-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }
.cv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; }
.cv-body [hidden] { display: none !important; }
.cv-search { position: relative; margin-bottom: 10px; }
.cv-search input { width: 100%; padding-right: 36px; }
.cv-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--muted); padding: 2px 8px; border-radius: 6px; }
.cv-count { font-size: 13px; color: var(--muted); margin: 0 0 12px; min-height: 1.2em; }
.cv-list { display: flex; flex-direction: column; gap: 14px; }
.cv-item { display: block; position: relative; cursor: pointer; border: 2px solid transparent; border-radius: calc(var(--radius) + 2px); padding: 4px; }
.cv-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cv-item:hover { border-color: var(--line); }
.cv-item.is-selected { border-color: var(--ink); }
.cv-item:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.cv-frame { position: relative; width: 100%; aspect-ratio: 4 / 1; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.cv-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-badges { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.cv-badge { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22, 35, 63, .3); }
.cv-badge-selected { background: var(--ink); color: #fff; }
.cv-meta { padding: 6px 2px 0; }
.cv-title { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; margin-bottom: 4px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-chip { padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--ai-light, #F2EDF8); color: var(--ink); }
.cv-chip mark, .cv-title mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
.cv-empty { padding: 28px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.cv-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--muted); }

.cv-current-box { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.cv-current-box .cv-frame { flex: 0 0 160px; width: 160px; }
.cv-current-box p { margin: 0; font-size: 13px; color: var(--muted); }
.cv-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 22px 16px; border: 2px dashed var(--line); border-radius: var(--radius-lg, 12px); background: var(--paper); transition: border-color .15s, background-color .15s; }
.cv-drop.is-over { border-color: var(--ink); background: #fff; }
.cv-drop-title { font-weight: 600; color: var(--ink); }
.cv-msg { margin: 10px 0 0; font-size: 13px; }
.cv-msg.is-error { color: #a8321f; }
.cv-msg.is-warn { color: #6B4E10; }
.cv-slider { margin: 14px 0 0; }
.cv-slider-row { display: flex; align-items: center; gap: 10px; }
.cv-slider-row input[type="range"] { flex: 1; min-width: 0; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
.cv-slider-row span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cv-preview { margin-top: 16px; }
.cv-preview h3 { margin: 0 0 8px; font-size: 14px; }
.cv-mini { max-width: 280px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--card, #fff); }
.cv-mini .cv-frame { border-radius: 0; border-bottom: 1px solid var(--line); }
.cv-mini-title { padding: 10px 12px; font-weight: 600; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.cv-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; border-radius: var(--radius); border: 1px solid var(--line); }

.cv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--paper); }
.cv-foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 200px; font-size: 13px; }
.cv-selected-line { color: var(--ink); overflow-wrap: anywhere; }
.cv-foot-error { color: #a8321f; font-size: 13px; }
.cv-foot-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 560px) {
    .cv-overlay { padding: 0; align-items: flex-end; }
    .cv-panel { max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .cv-current-box { flex-direction: column; align-items: stretch; }
    .cv-current-box .cv-frame { flex-basis: auto; width: 100%; }
    .cv-foot-actions { width: 100%; }
    .cv-foot-actions .btn { flex: 1; }
}

.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 600; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(22, 35, 63, .3); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Superadmin-galleriet: valgfri titel pr. billede */
.admin-ui .gal-title-input { width: 100%; font-size: 13px; padding: 6px 9px; }