/* ══════════════════════════════════════════════════════════════════════════
   MCP-fladerne (F5) — Journaloverblik + opslags-popup + kildeviser.
   Design låst 19/8-2026 i docs/design/ (mcp-ux-sprint.md + to mockups).
   Hvid dokument-æstetik: hairlines, blå kun på interaktive elementer.
   Farvegrammatik: rød = fund · amber = uafklaret/kræver blik · grå = tjekket-og-tomt.
   Journal-tro notat-klasser (journal-detail-*, note-para) bor i app.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop + duo (popup + kildepanel side om side) ──────────────────── */
.mcp-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(8, 19, 30, 0.28);
    display: grid; place-items: center; padding: 24px;
    outline: none;
}
.overblik-duo { display: flex; gap: 10px; align-items: flex-start; max-width: min(96vw, 1460px); }
.svar-duo { display: flex; gap: 10px; align-items: flex-start; }

/* ── Journaloverblik-popuppen ──────────────────────────────────────────── */
.overblik-popup {
    width: min(880px, 60vw);
    max-height: min(88vh, 980px);
    border-radius: 18px;
    border: 1px solid rgba(22, 33, 43, 0.14);
    background: #fff;
    box-shadow: 0 22px 46px rgba(21, 50, 74, 0.20);
    display: grid; grid-template-rows: auto auto 1fr;   /* head · cave-ground · body */
    overflow: hidden;
}
.overblik-head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 24px 12px; border-bottom: 1px solid rgba(22, 33, 43, 0.12);
}
.overblik-id { margin-right: auto; }
.overblik-head h1 { font-size: 1.05rem; color: #15324a; font-weight: 600; margin: 0; }
.overblik-cpr { color: #607284; font-size: 0.82rem; margin-top: 2px; }
.overblik-luk {
    border: 0; border-radius: 10px; width: 30px; height: 30px;
    font-size: 1.05rem; background: rgba(255, 255, 255, 0.7); color: #355879; cursor: pointer;
}
/* ── Hentestriben ──────────────────────────────────────────────────────────
   Vises kun mens vaerten henter. Ikke en spinner (P5): trinnene er navngivne
   serverkald, saa laegen ser HVAD der mangler. Baandet sidder mellem hovedet
   og kroppen og forsvinder helt, naar alt er hentet — fladen ser derefter
   ud praecis som foer. */
.overblik-hent { padding: 10px 24px 12px; border-bottom: 1px solid rgba(22, 33, 43, 0.10); }
.hent-spor {
    height: 3px; border-radius: 2px; background: rgba(26, 37, 48, 0.10); overflow: hidden;
}
.hent-fyld {
    height: 100%; border-radius: 2px; background: #3d7ab8;
    transition: width 320ms ease-out;
}
.hent-trin {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    list-style: none; margin: 9px 0 0; padding: 0;
    font-size: 0.78rem; color: #94a3b1;
}
.hent-trin li { display: flex; align-items: center; gap: 6px; }
/* Cirklen foran trinnet baerer tilstanden: tom = ikke begyndt, pulserende =
   i gang, udfyldt = faerdig. Farve alene ville vaere for svagt et signal. */
.hent-trin li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    border: 1px solid currentColor; background: transparent;
}
.hent-trin li.er-faerdig { color: #4a7c59; }
.hent-trin li.er-faerdig::before { background: currentColor; }
.hent-trin li.er-igang { color: #2f6ba6; font-weight: 600; }
.hent-trin li.er-igang::before { background: currentColor; animation: hent-puls 1.1s ease-in-out infinite; }
@keyframes hent-puls { 50% { opacity: 0.25; } }
.sek-skelet { padding: 2px 0 4px; }
@media (prefers-reduced-motion: reduce) {
    .hent-fyld { transition: none; }
    .hent-trin li.er-igang::before { animation: none; }
}
/* Sektionsadskillelse (Morten 25/8, mockup "Fem greb om sektionerne", nr. 4):
   båndet overskrift + rigelig luft. Luften bæres som PADDING, ikke margin
   (Morten 27/8): margin ligger uden for sektionen, så sticky-båndet slap
   62px før næste sektion nåede toppen — udscrollende tekst stod frit over
   det næste bånd. Med padding strækker sektionen (og dermed båndets
   sticky-område) sig helt til afløseren: bånd afløser bånd uden hul. */
.overblik-body { overflow-y: auto; padding: 22px 20px 44px; }
.overblik-body section { padding-bottom: 62px; margin-bottom: 0; }
.overblik-body section:last-of-type { padding-bottom: 0; }

/* ── CAVE-badge (sektion 0) — aldrig uden grundlag ─────────────────────── */
.cave-badge {
    border-radius: 999px; padding: 3px 11px; font-size: 0.76rem; font-weight: 600;
    cursor: pointer; align-self: center; white-space: nowrap;
}
.cave-badge.is-fund { border: 1px solid rgba(166, 61, 47, 0.45); background: rgba(166, 61, 47, 0.07); color: #a63d2f; }
.cave-badge.is-uafklaret { border: 1px solid rgba(180, 120, 30, 0.5); background: rgba(180, 120, 30, 0.07); color: #8a5a10; }
.cave-badge.is-tom { border: 1px solid rgba(22, 33, 43, 0.18); background: rgba(22, 33, 43, 0.04); color: #607284; font-weight: 500; }
.cave-ground { padding: 12px 24px 0; }   /* egen grid-række UDEN FOR scroll-containeren */
.cave-note { font-size: 0.74rem; color: #607284; margin: 5px 0 10px; }

/* ── Ajour-linje (gemt+opdaterer) og degraderings-banner ───────────────── */
.ajour-note {
    margin-bottom: 14px; padding: 9px 13px;
    border: 1px solid rgba(180, 120, 30, 0.35); border-radius: 12px;
    background: rgba(180, 120, 30, 0.05); color: #6b4a10; font-size: 0.83rem;
}
.degrade-note {
    margin-bottom: 14px; padding: 9px 13px;
    border: 1px dashed rgba(47, 108, 143, 0.35); border-radius: 12px;
    color: #15324a; background: rgba(255, 255, 255, 0.55); font-size: 0.83rem;
}

/* ── Sektioner: sticky hoved ───────────────────────────────────────────── */
/* Overskriften ligger i et tonet bånd: sektionsstarten kan ses uden at læses,
   og båndet er det der klæber under scroll. Kun titlen står i båndet. */
.sec-head {
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
    background: #eef4f9; border-radius: 10px; padding: 9px 14px;
    position: sticky; top: 0; z-index: 2;
    /* Papirfarvet glorie: baandet er stopperen (Morten 27/8) - uden den
       skimtes udscrollende tekst i de afrundede hjoerner og som en stribe
       over baandet. Usynlig mod papiret, daekker alt bag sig. */
    box-shadow: 0 0 0 12px #fff;
}
.sec-head h2 {
    font-family: Georgia, "Times New Roman", serif;   /* systemserif — ingen webfont-afhængighed */
    font-size: 1.02rem; font-weight: 600; color: #15324a; margin: 0;
    text-transform: none; letter-spacing: -0.01em;
}
/* Et opslag der IKKE blev gennemført: amber note under overskriften. Tallene
   for gennemførte opslag er væk fra båndet (Morten 26/8) — kun det manglende
   siger fra, så "ingen fund" aldrig kan forveksles med "ikke slået op". */
.sek-utilgaengelig {
    margin: 0 14px 8px; padding: 7px 12px;
    border: 1px solid rgba(180, 120, 30, 0.30); border-radius: 8px;
    background: rgba(180, 120, 30, 0.05); color: #6b4a10; font-size: 0.8rem;
}

/* ── Rækker (hairline-adskilte, dokumentagtige) ────────────────────────── */
.overblik-raekker { display: grid; gap: 0; }
.overblik-raekke {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid rgba(22, 33, 43, 0.08);
    font-size: 0.87rem; background: transparent;
}
.overblik-raekke.kan-klikkes { cursor: pointer; }
.overblik-raekke.kan-klikkes:hover { background: rgba(47, 108, 143, 0.05); }
.raekke-navn { font-weight: 600; color: #16212b; }
/* Nøgletal/status: baggrundsinfo — markant dæmpet og lille, navnet bærer rækken */
.raekke-status { color: #a9b7c6; font-size: 0.7rem; }
.raekke-status.is-overdue { color: #8a5a10; font-weight: 600; }   /* amber: kræver dit blik */
.raekke-aar { margin-left: auto; color: #607284; font-size: 0.78rem; white-space: nowrap; }
.raekke-hint { color: #2f6c8f; font-size: 0.74rem; white-space: nowrap; }

.empty-line {
    margin: 0 14px;
    border: 1px dashed rgba(22, 33, 43, 0.16); border-radius: 8px;
    padding: 8px 12px; color: #5c6f84; font-size: 0.82rem;
    background: rgba(22, 33, 43, 0.02);
}
.mere-knap { border: 0; background: none; color: #2f6c8f; font-size: 0.75rem; cursor: pointer; text-decoration: underline; padding: 4px 14px; }

/* ── Lab-linjen (R13): registerdata, afvigende i amber ─────────────────── */
.lab-linje {
    /* Paa tudsen (mockup-tro): "Seneste tal" staar i aarstals-kolonnen, saa
       ogsaa lab-linjen deler fladens lodrette kant. */
    display: grid; grid-template-columns: var(--tud) 1fr; align-items: baseline;
    padding: 6px 14px 10px; font-size: 0.84rem; color: #33506a;
    border-bottom: 1px solid rgba(22, 33, 43, 0.08);
}
.lab-linje .lab-vaerdier { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lab-navn { font-weight: 600; color: #15324a; font-size: 0.78rem; padding-right: 14px; }
.lab-dato { color: #607284; font-size: 0.74rem; }
.lab-flag { color: #8a5a10; font-weight: 600; }

/* ── Medicin (foldet) + socialt ────────────────────────────────────────── */
.medicin-fold > summary {
    list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
    padding: 8px 14px; border-bottom: 1px solid rgba(22, 33, 43, 0.08); font-size: 0.87rem;
}
.medicin-fold > summary::-webkit-details-marker { display: none; }
.medicin-chev { color: #2f6c8f; font-size: 0.8rem; transition: transform 0.15s; }
.medicin-fold[open] .medicin-chev { transform: rotate(90deg); }
.medicin-hint { margin-left: auto; color: #607284; font-size: 0.78rem; }
.medicin-liste { margin-top: 4px; }
.medicin-raekke { padding: 6px 14px; border-bottom: 1px solid rgba(22, 33, 43, 0.06); font-size: 0.85rem; color: #33506a; }
.social-prosa { padding-left: 14px; max-width: 68ch; font-size: 0.85rem; line-height: 1.7; color: #243240; margin: 0; }

/* ── Entitets-resumé (C-kontrakten, linjeopstillet prosa) ──────────────── */
.entitets-resume { padding: 6px 0 14px 18px; border-bottom: 1px solid rgba(22, 33, 43, 0.08); }
.er-byline { font-size: 0.73rem; color: #607284; margin: 4px 0 8px; }

/* ── Svarlinjer (delt: opslag + entitets-resumé) ───────────────────────── */
.sk-svar { display: grid; gap: 9px; }
.sk-linje {
    /* AI-tekst skal ligge UNDER overskrifterne (sec-head h2 = 1.02rem serif) —
       før stod den på 0.95rem og var størst i fladen (Mortens fund 23/8). */
    font-size: 0.85rem; line-height: 1.6; color: #16212b;
    cursor: pointer; padding: 2px 6px; margin: 0 -6px; border-radius: 6px;
}
.sk-linje:hover { background: rgba(47, 108, 143, 0.05); }
.sk-linje.is-active { background: rgba(47, 108, 143, 0.07); }
/* Sætning uden kilder/dækning: intet panel at åbne — ingen klik-affordance */
.sk-linje.sk-ukildet { cursor: default; }
.sk-linje.sk-ukildet:hover { background: transparent; }
/* Serverens vagter (modalitet ≠ kilde m.fl.): amber = kræver lægens blik */
.sk-advarsel {
    margin-top: 10px; padding: 6px 10px; border-radius: 6px;
    background: rgba(196, 138, 26, 0.10); color: #8a5a10; font-size: 0.8rem;
}

/* ── AttestVisning: tro gengivelse af den officielle blanket ────────────────
   Anatomi fra KL/Lægeforeningens LÆ-blanketter (lae-125, 06/2025): lyst
   blågrønt blanketpapir, tynde mørke rammer, hvide feltbokse med officielle
   småt-labels øverst i boksen, LÆ-koden løst øverst til højre. Arial matcher
   blankettens egen sats og adskiller papiret fra appens UI. */
.attest-papir {
    background: #e9f1f1;
    border: 1px solid #5f7382;
    padding: 14px 18px 12px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #101820;
}
.attest-kodelinje { text-align: right; font-size: 1.02rem; letter-spacing: 0.06em; margin-bottom: 6px; }
.attest-titelraekke { display: flex; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.attest-titelboks {
    flex: 1; background: #fff; border: 1px solid #5f7382;
    padding: 7px 10px 6px; font-size: 1.22rem; line-height: 1.2;
}
.attest-metaboks {
    width: 26%; min-width: 140px; background: #fff; border: 1px solid #5f7382;
    padding: 3px 8px;
}

/* Adresseboksene (Sendes til kommunen / Patientoplysninger) + stregkoden */
.attest-adresseraekke { display: flex; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.attest-adresseboks { flex: 1; background: #fff; border: 1px solid #5f7382; display: flex; flex-direction: column; }
.attest-boks-overskrift { border-bottom: 1px solid #5f7382; padding: 3px 8px 2px; font-size: 0.82rem; }
.attest-boks-krop { flex: 1; min-height: 72px; padding: 3px 8px; }
.attest-boks-hint { font-size: 0.62rem; color: #4a5a66; line-height: 1.5; }
.attest-stregkode { display: flex; align-items: stretch; gap: 3px; }
.attest-stregkode-tal {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 0.56rem; letter-spacing: 0.1em; color: #101820; align-self: center;
}
.attest-stregkode-striber {
    width: 15px;
    background: repeating-linear-gradient(180deg,
        #101820 0 2px, transparent 2px 3px,
        #101820 3px 6px, transparent 6px 8px,
        #101820 8px 9px, transparent 9px 12px);
}

/* Intro-prosaen og sektionsoverskrifterne står direkte på papiret */
.attest-intro { margin: 0 2px 12px; }
.attest-intro p { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.5; color: #101820; }
.attest-problemlinje { margin: 0 2px 10px; font-size: 0.84rem; }
.attest-note { margin: -4px 2px 10px; font-size: 0.74rem; color: #8a5a10; }
.attest-sektionsoverskrift { margin: 12px 0 3px; font-size: 0.96rem; }

/* Feltboksene deler rammer som på papiret — én samlet boks, streg mellem felter */
.attest-felter { background: #fff; border: 1px solid #5f7382; }
.attest-felt + .attest-felt { border-top: 1px solid #5f7382; }
.attest-felt-label {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 5px 10px 0;
}
.attest-felt-officiel { flex: 1; font-size: 0.7rem; line-height: 1.4; color: #4a5a66; }
.attest-felt-officiel strong { color: #101820; }
.attest-stempel { font-size: 0.68rem; white-space: nowrap; padding-top: 1px; }
.attest-stempel.is-journal { color: #4a5a66; }
.attest-stempel.is-gennemsyn {
    color: #8a5a10; font-weight: 700;
    border: 1px solid rgba(196, 138, 26, 0.55); border-radius: 2px;
    background: rgba(196, 138, 26, 0.08); padding: 1px 7px 2px;
}
.attest-felt-tekst {
    padding: 7px 12px 14px; white-space: pre-wrap;
    font-size: 0.92rem; line-height: 1.6; color: #101820;
}
.attest-felt-tom { color: #8b9aa6; font-style: italic; }

/* Retur-sektionen: tekst + tomt afkrydsningsfelt, som på blanketten */
.attest-returboks {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #5f7382; padding: 5px 8px; font-size: 0.84rem;
}
.attest-afkrydsning {
    margin-left: auto; width: 20px; height: 20px;
    border: 1px solid #5f7382; background: #fff; flex-shrink: 0;
}

/* Attestudstedende læge: erklæring + stempel/underskrift-kolonner */
.attest-laegeboks { background: #fff; border: 1px solid #5f7382; }
.attest-laege-prosa { padding: 4px 8px; border-bottom: 1px solid #5f7382; font-size: 0.8rem; line-height: 1.45; }
.attest-laege-kolonner { display: flex; }
.attest-laege-felt { flex: 1; min-height: 66px; padding: 3px 8px; }
.attest-laege-felt + .attest-laege-felt { border-left: 1px solid #5f7382; }

/* Blankettens egen fodlinje (KLE/version) */
.attest-blanketfod {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 8px; font-size: 0.62rem; color: #4a5a66;
}

/* Appens udkast-bånd — uden for papiret, så blanketten står ren */
.attest-udkastband {
    margin-top: 10px; padding: 7px 12px; border-radius: 6px;
    background: rgba(196, 138, 26, 0.10); color: #8a5a10; font-size: 0.78rem;
}

/* Attest-svar fylder mere end prosa — popuppen vokser, så papiret får luft */
.svar-popup.har-attest { width: min(900px, 66vw); max-height: 86vh; }
/* Tidslinjen er en vandret figur: 10 aars spor kan ikke laeses i 620 px.
   Baandet ruller selv vandret, men bredden er det der afgoer hvor lidt
   der SKAL rulles. */
.svar-popup.har-tidslinje { width: min(1180px, 84vw); }
.kraever-handling { color: #8a5a10; font-weight: 600; }
.sk-sup {
    border: 0; background: none; color: #2f6c8f; font-weight: 700; font-size: 0.66rem;
    cursor: pointer; padding: 0 2px; vertical-align: super; line-height: 1;
}
.sk-sup.is-active { background: rgba(47, 108, 143, 0.12); border-radius: 3px; text-decoration: underline; }

/* ── Opslags-popuppen ──────────────────────────────────────────────────── */
.svar-popup {
    width: min(620px, 46vw); max-height: 72vh; overflow-y: auto;
    background: #fff; border: 1px solid rgba(22, 33, 43, 0.18); border-radius: 14px;
    box-shadow: 0 22px 46px rgba(21, 50, 74, 0.24);
    padding: 18px 20px 16px;
}
.sk-q { display: flex; gap: 10px; align-items: baseline; margin-bottom: 16px; }
.sk-q-tekst { flex: 1; color: #15324a; font-size: 0.86rem; font-weight: 600; line-height: 1.4; }
.sk-pin-status { color: #607284; font-size: 0.68rem; white-space: nowrap; }
.sk-luk { border: 0; background: none; color: #607284; cursor: pointer; font-size: 1rem; padding: 0 1px; line-height: 1; }
.svar-popup .sk-svar { margin-bottom: 22px; }
.sk-grundighed { margin-top: 18px; font-size: 0.71rem; color: #607284; }
.sk-langsom-note { color: #8a5a10; }
.sk-tom {
    border: 1px dashed rgba(22, 33, 43, 0.18); border-radius: 8px; padding: 9px 11px;
    background: rgba(22, 33, 43, 0.02); color: #5c6f84; font-size: 0.81rem; line-height: 1.55;
}
.sk-tom-sub { font-size: 0.72rem; color: #607284; }
.sk-degnote {
    border: 1px dashed rgba(47, 108, 143, 0.35); border-radius: 8px; padding: 8px 11px;
    background: rgba(255, 255, 255, 0.6); color: #15324a; font-size: 0.76rem; margin-bottom: 7px;
}
.sk-fund { padding: 7px 2px 8px; border-top: 1px solid rgba(22, 33, 43, 0.08); cursor: pointer; }
.sk-fund:first-of-type { border-top: 0; }
.sk-fund.is-open { cursor: default; }
.sk-fundmeta { font-size: 0.73rem; color: #15324a; font-weight: 600; margin-bottom: 3px; display: flex; gap: 8px; align-items: baseline; }
.sk-fundhint { margin-left: auto; color: #2f6c8f; font-weight: 400; font-size: 0.7rem; white-space: nowrap; }
.sk-fundtekst {
    font-size: 0.79rem; line-height: 1.55; color: #1e3a52;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-fund.is-open .sk-fundtekst { display: block; }
.sk-skel, .mcp-skel {
    display: inline-block; height: 0.72em; border-radius: 3px; width: 180px;
    background: linear-gradient(90deg, rgba(26, 37, 48, 0.06) 25%, rgba(26, 37, 48, 0.13) 50%, rgba(26, 37, 48, 0.06) 75%);
    background-size: 200% 100%; animation: mcp-shimmer 1.3s infinite;
}
.sk-skel { display: block; margin: 0.5em 0; }
@keyframes mcp-shimmer { to { background-position: -200% 0; } }

/* ── Kildepanelet: P1's ene kildeviser (journal-tro, dæmpet + chunk) ───── */
.kilde-panel {
    width: min(520px, 36vw); max-height: 72vh; overflow-y: auto;
    background: #fff; border: 1px solid rgba(22, 33, 43, 0.16); border-radius: 14px;
    box-shadow: 0 22px 46px rgba(21, 50, 74, 0.20);
    padding: 16px 18px;
}
.kp-meta {
    display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
    font-size: 0.74rem; color: #607284; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(22, 33, 43, 0.10);
}
.kp-nr { color: #2f6c8f; font-weight: 700; }
.kp-meta strong { color: #15324a; font-weight: 600; }
.kp-alder { color: #8a5a10; font-weight: 600; }
.kp-skift { margin-left: auto; display: flex; gap: 4px; }
.kp-skift button {
    border: 1px solid rgba(47, 108, 143, 0.35); background: #fff; color: #2f6c8f;
    border-radius: 6px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.kp-skift button.is-active { background: #2f6c8f; color: #fff; border-color: #2f6c8f; }
.kp-daekning {
    border: 1px dashed rgba(22, 33, 43, 0.22); border-radius: 8px;
    background: rgba(22, 33, 43, 0.02); padding: 9px 11px;
    font-size: 0.75rem; color: #5c6f84; line-height: 1.5;
}
/* Dæmpningen er KUN farve — layout/typografi er journalens (rev. 6) */
.kp-notat.is-dimmet .journal-detail-text { color: #97a9bb; }
.kp-notat.is-dimmet .journal-detail-signatur,
.kp-notat.is-dimmet .journal-diag-pill,
.kp-notat.is-dimmet .journal-detail-formalia { opacity: 0.55; }
.kp-notat .chunk { color: #243f59; background: rgba(47, 108, 143, 0.10); border-radius: 3px; padding: 1px 2px; }
/* Notatet bærer sine egne linjeskift (medicinlister, adresseblokke) — de skal
   stå som i journalen, mens tomme linjer fortsat er afsnitsskellet. */
/* Medicinlisten i et notat: foldet sammen som standard (Morten 26/8) — den er
   sjældent grunden til at kilden slås op, men skal kunne åbnes uden at forlade
   notatet. Åbner af sig selv når den bærende passage står i den. */
.notat-medicin > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; gap: 10px;
    color: #33506a; font-size: 0.84rem; padding: 2px 0;
}
.notat-medicin > summary::-webkit-details-marker { display: none; }
.notat-medicin > summary::before { content: "B8"; color: #2f6c8f; font-size: 0.75rem; }
.notat-medicin[open] > summary::before { content: "BE"; }
.notat-medicin-antal { color: #607284; font-size: 0.76rem; }
.notat-medicin-raekke { padding: 3px 0 3px 16px; font-size: 0.84rem; color: #33506a; }

.kp-notat .note-para,
.kp-notat .journal-detail-formalia .formalia-ekstra { white-space: pre-line; }

/* ── Preview-siden /mcp-design (arbejdsredskab, skibes ikke) ───────────── */
.mcp-preview-side { padding: 20px; min-height: 80vh; }
.mcp-preview-rig {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 6px 10px; border-radius: 12px; margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(22, 33, 43, 0.12); font-size: 0.78rem;
}
.mcp-preview-rig span { color: #607284; margin-right: 4px; }
.mcp-preview-rig button {
    border: 1px solid rgba(47, 108, 143, 0.35); background: rgba(255, 255, 255, 0.6);
    color: #15324a; border-radius: 8px; padding: 4px 10px; cursor: pointer;
}
.mcp-preview-rig button.is-active { background: #2f6c8f; color: #fff; border-color: #2f6c8f; }
.mcp-preview-panel {
    width: 340px; background: #fff; border: 1px solid rgba(22, 33, 43, 0.12);
    border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
}
.mcp-preview-patient { display: flex; gap: 8px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(22, 33, 43, 0.12); }
.mcp-preview-patient strong { color: #15324a; }
.mcp-preview-patient span { color: #607284; font-size: 0.8rem; }
.mcp-preview-overbliksknap {
    border: 1px solid rgba(47, 108, 143, 0.35); background: rgba(47, 108, 143, 0.05);
    color: #15324a; border-radius: 10px; padding: 8px 12px; font-weight: 600; cursor: pointer; text-align: left;
}
.mcp-preview-overbliksknap:hover { background: rgba(47, 108, 143, 0.09); }
.mcp-preview-chips { display: flex; flex-direction: column; gap: 6px; }
.mcp-preview-chip {
    border: 1px solid rgba(47, 108, 143, 0.35); background: #fff; color: #15324a;
    border-radius: 999px; padding: 5px 13px; font-size: 0.78rem; cursor: pointer; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcp-preview-chip:hover { background: rgba(47, 108, 143, 0.05); }
.mcp-preview-chip.is-open { background: rgba(47, 108, 143, 0.08); border-color: #2f6c8f; font-weight: 600; }
.mcp-preview-svarvaert { position: fixed; left: 400px; top: 120px; z-index: 60; }

/* ── Integration i konsultationsskærmen (Home.razor) ───────────────────── */
.mcp-overbliksknap {
    border: 1px solid rgba(47, 108, 143, 0.35); background: rgba(47, 108, 143, 0.05);
    color: #15324a; border-radius: 10px; padding: 8px 12px; font-weight: 600;
    cursor: pointer; text-align: left; width: 100%; font-size: 0.85rem;
}
.mcp-overbliksknap:hover { background: rgba(47, 108, 143, 0.09); }
.mcp-overbliksknap:disabled { opacity: 0.5; cursor: default; }
/* Svar-duoen ankres ud for venstre panel — foran diktatet, aldrig i det */
.mcp-svarvaert { position: fixed; left: min(24vw, 380px); top: 110px; z-index: 60; }

/* Usynlig klik-udenfor-fanger bag svar-duoen (lukker uden at dæmpe skærmen) */
.mcp-svarvaert-baggrund { position: fixed; inset: 0; z-index: 59; background: transparent; }

/* ── Tidsaksen (design 1A "Brevet II", 27/8) ────────────────────────────────
   Forloebet paa tidsaksen: EEN tud for hele fladen, saa aarstallene staar paa
   samme x-position i alle sektioner - det er den lodrette kant der baerer
   overblikket. Aarstallet er etiket, aldrig klikmaal. Gentagne aarstal vises
   kun paa foerste raekke i en serie (som i et regnskab). Maaneden sorterer
   serverside og vises aldrig. Vaerdier fra docs/design/journaloverblik-
   flydende.html (form A, browser-verificeret: alle .tid paa samme left). */
.overblik-popup { --tud: 5.4rem; }

.overblik-stam {
    padding: 0 14px; margin-bottom: 20px;
    font-size: 0.78rem; color: #607284; font-variant-numeric: tabular-nums;
}

/* Entitetsblok: navn + spaend i hovedet, forloebet under. */
.fl-ent { margin-bottom: 4px; }
.fl-ent.er-aaben { margin-bottom: 26px; }
/* Fold-hovedet (Mortens valg 27/8): hele linjen er klikmaal, chevronen viser
   tilstanden. Lukket = overblikslinjen; aaben = forloebet nedenunder. */
.fl-ent-head.kan-klikkes { cursor: pointer; border-radius: 6px;
                           padding-top: 5px; padding-bottom: 5px;
                           transition: background 0.12s ease; }
.fl-ent-head.kan-klikkes:hover { background: rgba(47, 108, 143, 0.05); }
.fl-ent.er-aaben > .fl-ent-head { background: rgba(47, 108, 143, 0.05); }
.fl-ent-pil { flex: 0 0 auto; width: 0.85rem; color: #607284; font-size: 0.72rem;
              transition: transform 0.15s ease; transform: translateY(-1px); }
.fl-ent.er-aaben .fl-ent-pil { transform: rotate(90deg) translateX(-1px); }
.fl-ent:last-child { margin-bottom: 0; }
.fl-ent-head { display: flex; align-items: baseline; gap: 12px; padding: 0 14px; margin-bottom: 5px; }
.fl-ent-navn { font-weight: 600; color: #16212b; font-size: 0.92rem; }
.fl-ent-status { color: #a9b7c6; font-size: 0.7rem; }
.fl-ent-spaend { margin-left: auto; color: #607284; font-size: 0.78rem;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-venter { padding: 0 14px; }

/* Status-prosaen: fuld bredde, haengende indrykning saa et ombrudt ord
   aldrig lander i tudsen og laeses som et aarstal. */
.fl-prosa {
    max-width: 64ch; margin: 0 0 8px; padding: 0 14px 0 calc(14px + 1.6rem);
    text-indent: -1.6rem;
    font-size: 0.85rem; line-height: 1.7; color: #243240;
}
/* Haengepartiet foelger aksen (Morten 27/8): etiketten staar paa aarstallets
   plads, teksten paa tekstens - ogsaa naar den ombrydes. Fonten er sat saa
   "HAENGEPARTIER" kan vaere i tudsen (5.4rem). */
.fl-raekke.fl-haengeparti { margin-top: 10px; }
.fl-hp-label {
    font-size: 0.63rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: #8a5a10; padding-right: 8px; white-space: nowrap; align-self: baseline;
}

/* Begivenhedsraekker: aarstal i tudsen, tekst i anden kolonne. */
.fl-raekke {
    display: grid; grid-template-columns: var(--tud) 1fr; align-items: baseline;
    padding: 4px 14px;
    font-size: 0.85rem; line-height: 1.65; color: #243240;
}
.fl-tid {
    font-variant-numeric: tabular-nums; font-size: 0.79rem; font-weight: 600;
    color: #15324a; white-space: nowrap; padding-right: 14px;
}
.fl-tid.er-gentaget { visibility: hidden; }
/* Aktuelt-etiketten: status paa aksen, paa aarstallets plads (rev. 3 B). */
.fl-tid.er-aktuelt { color: #2f6c8f; font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 600; }
.fl-raekke.fl-status { padding-top: 2px; padding-bottom: 2px; }

/* Saetningen er klikbar (V1/H2: efterproevning skal koste mindre end accept)
   - men uden knap-kostume: kun en diskret toning naar musen er der. */
.fl-tekst { min-width: 0; cursor: pointer; border-radius: 3px; padding: 0 1px;
            transition: background 0.12s ease; }
.fl-tekst:hover { background: rgba(47, 108, 143, 0.07); }
.fl-tekst.is-active { background: rgba(47, 108, 143, 0.11); }
.fl-tekst.fl-ukildet { cursor: default; }
.fl-tekst.fl-ukildet:hover { background: transparent; }

.fl-byline { font-size: 0.73rem; color: #607284; margin: 7px 14px 0;
             font-variant-numeric: tabular-nums; }
.fl-ent .fl-byline { margin-left: 14px; }

/* Registerraekker paa samme akse (indlaeggelser, scanninger, planer + kroniske
   uden forloeb): aarstal i tudsen, kun NAVNET er klikbart - og kun naar
   raekken baerer en kilde (D2: ogsaa degraderet skal kilden kunne aabnes). */
.fl-raekker { display: grid; }
.fl-reg {
    /* Form A (maalt i mockuppen): navnet fylder 1fr, status staar ved raekkens
       HOEJRE kant - ikke klaebet til navnet. */
    display: grid; grid-template-columns: var(--tud) 1fr auto; align-items: baseline;
    padding: 7px 14px; border-bottom: 1px solid rgba(22, 33, 43, 0.08);
    font-size: 0.87rem;
}
.fl-reg-navn { font-weight: 600; color: #16212b; }
.fl-reg-navn.kan-klikkes { cursor: pointer; color: #15324a; justify-self: start;
                           border-bottom: 1px solid rgba(47, 108, 143, 0.35); }
.fl-reg-navn.kan-klikkes:hover { color: #2f6c8f; border-bottom-color: #2f6c8f; }
.fl-reg-status { color: #a9b7c6; font-size: 0.7rem; padding-left: 12px; text-align: right; }
.fl-reg-status.is-overdue { color: #8a5a10; font-weight: 600; font-size: 0.78rem; }