/* Sofias egen flade.
 *
 * Skrevet fra ingenting. Der er ingen import fra portalens shell.css og der
 * kommer aldrig en: hele klassen af fejl, vi brugte 9. september 2026 paa, kom
 * af, at Sofia var portalen minus noget. Alt herinde er noget, nogen har lagt
 * her med vilje.
 *
 * Kundens lag er tre ting og kun tre: logo, navn og en enkelt farve, og de
 * roerer ikke Sofias egne. Sofia er pink, purple og graa hos alle.
 */

:root {
    --lilla: #6D4AC8;
    --pink: #E0559B;
    /* Maalt 10. september 2026: #B14FB0 gav 4,15:1 mod sidens flade og 4,55:1
       mod hvid, og kravet for broedtekst er 4,5. Den bruges til links og
       etiketter, saa den er en tekstfarve foer den er en brandfarve. #A344A2
       ligger 5,38:1 mod hvid og 4,90:1 mod fladen, og er visuelt den samme.
       Forloebets egne stop er uroerte; de staar skrevet ud. */
    --midt: #A344A2;
    --forloeb: linear-gradient(115deg, #6D4AC8 0%, #9B4FBE 48%, #E0559B 100%);
    /* Hvid tekst paa forloebet laa under WCAG AA i hoejre ende: #E0559B giver
       3,53:1, og kravet er 4,5. Knappens ende er derfor en moerkere pink, mens
       #E0559B bliver ved med at vaere identitetens pink i maerket, i baandet og i
       gradienttekst, hvor der ikke staar noget ovenpaa. Hover blev foer lysere og
       laa dermed under AA hele vejen; den er nu moerkere, hvilket ogsaa er den
       almindelige forventning til en fyldt knap. Maalt 10. september 2026: knappen
       4,55:1 i sit daarligste punkt, hover 5,69:1. */
    --forloeb-knap: linear-gradient(115deg, #6D4AC8 0%, #B14FB0 55%, #DB2777 100%);
    --forloeb-lys: linear-gradient(115deg, #5E3FB2 0%, #9B4399 55%, #C21F68 100%);

    --blaek: #1B1726;
    --daempet: #6B6880;
    --flade: #F4F4F7;
    --kort: #FFFFFF;
    --kant: #E3E1EA;
    --pale: #EAEAF0;

    --ok: #2D6E4F;
    --ok-flade: #E6F2EC;
    --vent: #8A6A1F;
    --vent-flade: #FBF2DC;
    --fejl: #B43A2E;
    --fejl-flade: #FBE9E7;

    --r: 14px;
    --r-lille: 10px;
    --r-pille: 999px;
    --skygge: 0 1px 2px rgba(27, 23, 38, .06), 0 8px 24px rgba(27, 23, 38, .05);
}

* { box-sizing: border-box; }

/* hidden skal vinde. En klasse med display: flex slaar browserens egen regel
   for [hidden], saa log ind-boksen blev staaende oven paa appen, selv om
   koden havde skjult den. DOM'et sagde det rigtige og skaermen sagde noget
   andet; det var kun et billede, der afsloerede det. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--flade);
    color: var(--blaek);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
}

a { color: var(--midt); }

/* ── Wordmark ────────────────────────────────────────────────────────────
   Markét er Hjem & Plejes egen, uaendret, sat som prikken over i'et.
   Placeringen regnes i sofia-brand.js. */
.sofia-wm {
    position: relative;
    display: inline-block;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
}
.sofia-wm .sofia-i { position: relative; display: inline-block; line-height: 1; }
.sofia-wm .sofia-i svg { position: absolute; left: 50%; display: block; }
.sofia-wm .sofia-i b { display: inline-block; width: 0; height: 0; overflow: hidden; }

/* ── Hovedet ─────────────────────────────────────────────────────────── */
.hoved {
    background: var(--forloeb);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 60;
    padding-top: max(14px, env(safe-area-inset-top));
}
.hoved .sofia-wm { font-size: 1.3rem; color: #fff; }
/* Paa forloebet staar markét hvidt: dens eget forloeb forsvinder i baggrunden. */
.hoved .sofia-wm .sofia-i svg path { fill: #FFFFFF; }
.hoved-hoejre { display: flex; align-items: center; gap: 8px; }
.hoved-navn { font-size: .82rem; font-weight: 600; opacity: .95; }
.hoved-knap {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: var(--r-pille);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.hoved-knap:active { background: rgba(255, 255, 255, .16); }

/* ── Fladen ──────────────────────────────────────────────────────────── */
main { max-width: 560px; margin: 0 auto; padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }

.kunde { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0 18px; text-align: center; }
.kunde img { max-height: 34px; max-width: 190px; object-fit: contain; }
.kunde-navn { font-size: 1rem; font-weight: 800; }
.kunde-under { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--daempet); }

.dag { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dag h1 { margin: 0; font-size: 1.35rem; }
.dag .x { font-size: .7rem; color: var(--daempet); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.dag .d { font-size: .82rem; color: var(--daempet); }

/* Fanerne er tre for de fleste og fire for en leder. Auto-fit i stedet for
   et fast antal spalter, saa den fjerde ikke braekker rækken om paa 390 px. */
.faner { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--pale); padding: 4px; border-radius: 12px; margin-bottom: 16px; }
.faner button { border: none; background: transparent; font: inherit; font-weight: 700; font-size: .86rem; padding: 9px 4px; border-radius: 9px; color: var(--daempet); cursor: pointer; white-space: nowrap; }
@media (max-width: 400px) { .faner button { font-size: .8rem; letter-spacing: -.01em; } }
.faner button.aktiv { background: var(--kort); color: var(--blaek); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.tal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.tal div { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-lille); padding: 10px 12px; text-align: center; }
.tal b { display: block; font-size: 1.35rem; background: var(--forloeb-knap); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tal span { font-size: .68rem; color: var(--daempet); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ── Stoppet ─────────────────────────────────────────────────────────── */
.stop { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.stop.naeste { border-color: var(--midt); box-shadow: 0 0 0 2px rgba(177, 79, 176, .14); }
.stop.faerdig { opacity: .58; }
.stop .nr { width: 36px; height: 36px; border-radius: 50%; background: var(--forloeb-knap); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stop.faerdig .nr { background: var(--ok); }
.stop .navn { font-weight: 800; font-size: 1.05rem; }
.stop .adr { font-size: .84rem; color: var(--daempet); margin-top: 1px; }
.stop .tid { display: flex; gap: 14px; margin-top: 8px; font-size: .82rem; color: var(--daempet); flex-wrap: wrap; }
.stop .tid b { color: var(--blaek); font-size: .95rem; font-variant-numeric: tabular-nums; }
.stop .note { font-size: .82rem; margin-top: 6px; padding: 6px 9px; background: var(--pale); border-radius: 8px; }
.stop .links { display: flex; gap: 14px; margin-top: 10px; font-size: .82rem; flex-wrap: wrap; }
.stop .links a { color: var(--midt); font-weight: 700; text-decoration: none; }
.stop .knap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.stop .knap .stor { grid-column: 1 / -1; }
.stop .pil { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pille); background: var(--pale); color: var(--daempet); margin-left: 6px; vertical-align: middle; }
.stop.aktiv .pil { background: var(--vent-flade); color: var(--vent); }
.stop.faerdig .pil { background: var(--ok-flade); color: var(--ok); }

/* ── Knapper ─────────────────────────────────────────────────────────── */
.knap-primaer, .knap-anden {
    font: inherit;
    font-weight: 700;
    font-size: .92rem;
    padding: 12px 14px;
    border-radius: var(--r-lille);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    min-height: 44px;
}
.knap-primaer { background: var(--forloeb-knap); color: #fff; }
.knap-primaer:hover { background: var(--forloeb-lys); }
.knap-primaer:disabled { opacity: .55; cursor: default; }
.knap-anden { background: var(--pale); color: var(--blaek); }

/* ── Guides og redskaber ─────────────────────────────────────────────── */
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; display: block; text-decoration: none; color: inherit; }
.kort .t { font-weight: 700; }
.kort .r { font-size: .84rem; color: var(--daempet); margin-top: 3px; }
.redskab { display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 12px; }
.redskab .ik { width: 38px; height: 38px; border-radius: var(--r-lille); background: var(--pale); display: flex; align-items: center; justify-content: center; color: var(--midt); }
.redskab .ik svg { width: 20px; height: 20px; }
.redskab .pil { color: var(--daempet); font-size: 1.2rem; }

.tom { text-align: center; padding: 34px 12px; color: var(--daempet); font-size: .9rem; }
.tom b { display: block; font-size: 1.1rem; color: var(--blaek); margin-bottom: 5px; }

/* ── Bundlinjen ──────────────────────────────────────────────────────── */
.bund { position: fixed; bottom: 0; left: 0; right: 0; background: var(--kort); border-top: 1px solid var(--kant); z-index: 55; padding-bottom: env(safe-area-inset-bottom, 0); }
.bund-inder { display: grid; max-width: 560px; margin: 0 auto; }
.bund a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: .68rem; font-weight: 700; color: var(--daempet); text-decoration: none; min-height: 52px; }
.bund a.aktiv { color: var(--midt); }
.bund svg { width: 21px; height: 21px; }

/* ── Beskeder ────────────────────────────────────────────────────────── */
.besked { padding: 11px 14px; border-radius: var(--r-lille); font-size: .88rem; margin-bottom: 12px; }
.besked-fejl { background: var(--fejl-flade); color: var(--fejl); }
.besked-ok { background: var(--ok-flade); color: var(--ok); }
.henter { text-align: center; padding: 30px; color: var(--daempet); font-size: .88rem; }

/* ── Log ind ─────────────────────────────────────────────────────────── */
.login { position: fixed; inset: 0; background: var(--flade); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.login-boks { background: var(--kort); width: 100%; max-width: 400px; border-radius: var(--r); padding: 46px 34px 34px; box-shadow: var(--skygge); position: relative; }
.login-boks::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--forloeb); border-radius: var(--r) var(--r) 0 0; }
.login-boks .sofia-wm { font-size: 2.1rem; margin-bottom: 16px; display: block; }
.login-boks h2 { font-size: .95rem; font-weight: 600; color: var(--daempet); margin: 0 0 22px; }
.felt { margin-bottom: 14px; }
.felt label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--daempet); margin-bottom: 5px; }
.felt input, .felt select, .felt textarea {
    width: 100%;
    font: inherit;
    font-size: 16px; /* under 16px zoomer iOS ind, naar feltet faar fokus */
    padding: 11px 13px;
    border: 1px solid var(--kant);
    border-radius: var(--r-lille);
    background: var(--kort);
    color: var(--blaek);
}
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--midt); box-shadow: 0 0 0 3px rgba(177, 79, 176, .14); }
.login-boks .knap-primaer { width: 100%; margin-top: 4px; }

/* ── Offline ─────────────────────────────────────────────────────────── */
.offline { position: fixed; left: 0; right: 0; top: 0; background: var(--vent-flade); color: var(--vent); text-align: center; font-size: .8rem; font-weight: 700; padding: 7px; z-index: 300; }

@media (min-width: 720px) {
    .bund-inder { max-width: 560px; }
}

/* ── Faglig viden ────────────────────────────────────────────────────────
   Borgerguidens 55 faglige artikler i 11 klynger, hentet gennem funktionen
   der holder noeglen. De staar sammen med arbejdspladsens egne guides,
   fordi en medarbejder ikke taenker i, hvem der har skrevet hvad; hun
   taenker i, hvad hun har brug for at vide lige nu. Derfor to overskrifter
   og ikke to faner. */
.gruppe { margin: 22px 0 12px; }
.gruppe:first-child { margin-top: 0; }
.gruppe h2 { margin: 0 0 3px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--daempet); }
.gruppe p { margin: 0 0 12px; font-size: .82rem; color: var(--daempet); }

.klynger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.klynge {
    background: var(--kort);
    border: 1px solid var(--kant);
    border-radius: var(--r);
    padding: 14px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.klynge:hover { border-color: var(--midt); }
.klynge .t { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.klynge .n { font-size: .74rem; color: var(--daempet); margin-top: auto; }
.klynge .prik { width: 26px; height: 26px; border-radius: 8px; background: var(--forloeb-knap); }

.artikel { padding-bottom: 20px; }
.artikel-luk {
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    font-size: .86rem;
    color: var(--midt);
    padding: 0 0 14px;
    cursor: pointer;
}
.artikel h1 { font-size: 1.3rem; margin: 0 0 6px; }
.artikel .meta { font-size: .74rem; color: var(--daempet); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.artikel-tekst { font-size: 1rem; line-height: 1.62; }
.artikel-tekst h2 { font-size: 1.05rem; margin: 26px 0 8px; }
.artikel-tekst h3 { font-size: .95rem; margin: 20px 0 6px; }
.artikel-tekst p { margin: 0 0 14px; }
.artikel-tekst ul, .artikel-tekst ol { margin: 0 0 14px; padding-left: 22px; }
.artikel-tekst li { margin-bottom: 6px; }
.artikel-tekst a { color: var(--midt); }
.artikel-tekst table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 14px; }
.artikel-tekst th, .artikel-tekst td { border: 1px solid var(--kant); padding: 7px 9px; text-align: left; }
.kilder { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--kant); font-size: .8rem; color: var(--daempet); }
.kilder b { display: block; color: var(--blaek); margin-bottom: 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.kilder li { margin-bottom: 4px; }

/* Soegefeltet, klyngesiden og traeflisten.
   Feltet staar altid oeverst i Guides og er det foerste, en tommelfinger
   moeder: femoghalvtreds artikler kan ikke bladres igennem paa en vagt. */
.soeg { position: relative; display: flex; align-items: center; gap: 9px; background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-lille); padding: 0 12px; margin-bottom: 4px; }
.soeg svg { width: 18px; height: 18px; color: var(--daempet); flex: 0 0 auto; }
.soeg input { flex: 1; border: none; background: none; font: inherit; font-size: 16px; padding: 12px 0; color: var(--blaek); }
.soeg input:focus { outline: none; }
.soeg input::-webkit-search-cancel-button { display: none; }
.soeg:focus-within { border-color: var(--midt); box-shadow: 0 0 0 3px rgba(177, 79, 176, .14); }
.soeg button { border: none; background: none; font: inherit; font-size: 1.3rem; line-height: 1; color: var(--daempet); cursor: pointer; padding: 0 2px; }

.traef { font-size: .78rem; font-weight: 700; color: var(--daempet); margin: 14px 0 10px; }
.tom-lille { font-size: .86rem; color: var(--daempet); padding: 4px 0 6px; }

.tilbage { background: none; border: none; font: inherit; font-weight: 700; font-size: .86rem; color: var(--midt); padding: 16px 0 10px; cursor: pointer; }
.klynge-hoved { margin-bottom: 14px; }
.klynge-hoved h2 { margin: 0 0 3px; font-size: 1.15rem; }
.klynge-hoved p { margin: 0; font-size: .8rem; color: var(--daempet); }

.liste { display: flex; flex-direction: column; gap: 8px; }
.emne { display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); padding: 13px 15px; cursor: pointer; }
.emne:hover { border-color: var(--midt); }
.emne .t { font-weight: 700; font-size: .95rem; }
.emne .r { font-size: .82rem; color: var(--daempet); margin-top: 3px; line-height: 1.45; }
.emne .pil { color: var(--daempet); font-size: 1.2rem; }
.emne.kommer { cursor: default; background: transparent; border-style: dashed; }
.emne.kommer:hover { border-color: var(--kant); }
.emne.kommer .t { color: var(--daempet); }
.emne .maerke { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--daempet); background: var(--pale); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.emne.kommer { grid-template-columns: 1fr auto; }

.artikelkort { width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid var(--kant); cursor: pointer; }
.artikelkort:hover { border-color: var(--midt); }
.artikelkort .k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--midt); margin-top: 4px; }
.artikelkort .r { margin-top: 5px; line-height: 1.45; }

@media (max-width: 380px) {
    .klynger { grid-template-columns: 1fr; }
}

/* ── Tilmelding ──────────────────────────────────────────────────────── */
.login-skift { margin: 16px 0 0; font-size: .84rem; color: var(--daempet); text-align: center; }
.login-skift button { background: none; border: none; font: inherit; font-weight: 700; color: var(--midt); cursor: pointer; padding: 0; }
.login-smaat { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: var(--daempet); }
.felt .hint { display: block; margin-top: 5px; font-size: .74rem; color: var(--daempet); }
#tilmeld-kvittering .knap-anden { width: 100%; margin-top: 16px; }

/* ── Holdet ──────────────────────────────────────────────────────────────
   Lederens skaerm. Et kort pr. rute, med en bjaelke der siger, hvor langt
   dagen er naaet, saa hun kan se det uden at laese tal. */
.holdkort {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--kort);
    border: 1px solid var(--kant);
    border-radius: var(--r);
    padding: 14px 16px 13px;
    margin-bottom: 10px;
    cursor: pointer;
}
.holdkort:hover { border-color: var(--midt); }
.hk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Maerket maa ikke braekke om. Gjorde det det, voksede kortet til tre linjer,
   og »22 min bagud« fyldte mere end den rute, den handlede om. */
.hk-top .maerke { white-space: nowrap; flex: 0 0 auto; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--daempet); background: var(--pale); border-radius: 999px; padding: 4px 9px; }
.hk-top .t { font-weight: 700; font-size: .98rem; }
.hk-tal { font-size: .82rem; color: var(--daempet); margin: 3px 0 9px; }
.bar { height: 6px; border-radius: 999px; background: var(--pale); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--forloeb-knap); border-radius: 999px; }
.maerke.stop { background: var(--fejl-flade); color: var(--fejl); }

/* ── Arbejdspladsens egne guides ─────────────────────────────────────────
   De ser ud som Borgerguidens artikler, fordi de laeses paa samme maade.
   Forskellen er maerket og kvitteringen: en guide fra huset skal kvitteres,
   en artikel skal bare laeses. */
.egenguide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid var(--kant); cursor: pointer; }
.egenguide:hover { border-color: var(--midt); }
.egenguide.laast { opacity: .72; }
.egenguide .maerke { white-space: nowrap; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; background: var(--pale); color: var(--daempet); }
.egenguide .maerke.ok { background: var(--ok-flade); color: var(--ok); }
.egenguide .maerke.ny { background: var(--pale); color: var(--midt); }
.egenguide .maerke.stop { background: var(--fejl-flade); color: var(--fejl); }

.dig { font-size: .82rem; color: var(--daempet); background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-lille); padding: 9px 12px; margin: 14px 0 4px; }
.dig b { color: var(--blaek); }

.stopklods { background: var(--fejl-flade); border: 1px solid #F3C9C3; border-radius: var(--r); padding: 14px 16px; margin: 4px 0 18px; }
.stopklods b { display: block; color: var(--fejl); margin-bottom: 5px; font-size: .92rem; }
.stopklods p { margin: 0; font-size: .88rem; line-height: 1.5; }

.eskalation { background: var(--vent-flade); border-radius: var(--r); padding: 13px 15px; margin: 18px 0 0; font-size: .9rem; line-height: 1.5; color: var(--vent); }
.eskalation b { display: block; color: var(--blaek); margin-bottom: 4px; }

.kvittering { margin-top: 22px; }
.kvittering .knap-primaer { width: 100%; }
.kvitteret { text-align: center; background: var(--ok-flade); color: var(--ok); font-weight: 700; font-size: .9rem; border-radius: var(--r-lille); padding: 12px; }

/* ── Spørg Sofia ──────────────────────────────────────────────────────
   Linjen staar over fanerne og skal se ud som en invitation, ikke som et
   soegefelt. Derfor forloebet i kanten og ikke i fladen: den skal kunne ses
   paa en telefon i en opgang uden at tage opmaerksomheden fra ruten. */
.spoerg-bar { margin: 0 0 12px; }
.spoerg-aabn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; border-radius: 14px; cursor: pointer;
    font: inherit; font-weight: 600; text-align: left; color: var(--blaek);
    background: var(--kort); border: 1.5px solid transparent;
    background-image: linear-gradient(var(--kort), var(--kort)), var(--forloeb-knap);
    background-origin: border-box; background-clip: padding-box, border-box;
    box-shadow: 0 1px 3px rgba(27, 23, 38, .07);
}
.spoerg-aabn:hover { box-shadow: 0 3px 10px rgba(109, 74, 200, .16); }
.spoerg-aabn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--lilla); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.spoerg-aabn span { color: var(--daempet); font-weight: 600; }

/* Samtalen fylder skaermen under hovedet. Feltet sidder i bunden, hvor
   tommelfingeren er, og flowet ruller for sig selv, saa hun ikke mister
   feltet, naar svaret er langt. */
.samtale { display: flex; flex-direction: column; min-height: calc(100vh - 300px); padding-bottom: 8px; }
.samtale-hoved { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.samtale-tilbage, .samtale-ryd {
    border: none; background: none; font: inherit; font-weight: 700; font-size: .86rem;
    color: var(--midt); cursor: pointer; padding: 4px 0;
}
.samtale-ryd { color: var(--daempet); font-weight: 600; }
.samtale-flow { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }

.samtale-tom { padding: 8px 2px 4px; }
.samtale-hej { font-size: 1.06rem; font-weight: 700; margin: 0 0 4px; }
.samtale-under { font-size: .9rem; color: var(--daempet); margin: 0 0 18px; }
.samtale-forslag { display: flex; flex-direction: column; gap: 8px; }
.samtale-forslag button {
    text-align: left; font: inherit; font-size: .92rem; cursor: pointer;
    padding: 11px 13px; border-radius: 12px; border: 1px solid var(--kant);
    background: var(--kort); color: var(--blaek);
}
.samtale-forslag button:hover { border-color: var(--midt); color: var(--midt); }

.boble { max-width: 92%; font-size: .96rem; line-height: 1.55; }
.boble-mig {
    align-self: flex-end; background: var(--forloeb-knap); color: #fff;
    padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-weight: 500;
}
.boble-sofia {
    align-self: flex-start; background: var(--kort); border: 1px solid var(--kant);
    padding: 13px 14px; border-radius: 16px 16px 16px 4px; max-width: 100%; width: 100%;
}
.boble-fejl { border-color: var(--fejl); background: var(--fejl-flade); color: var(--fejl); }

/* De tre prikker. Et spoergsmaal koster et opslag i et andet hus, og uden et
   tegn paa liv trykker hun igen. */
.boble-venter { display: flex; gap: 5px; width: auto; padding: 15px 16px; }
.boble-venter span { width: 7px; height: 7px; border-radius: 50%; background: var(--midt); opacity: .35; animation: sofia-prik 1.1s infinite; }
.boble-venter span:nth-child(2) { animation-delay: .18s; }
.boble-venter span:nth-child(3) { animation-delay: .36s; }
@keyframes sofia-prik { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .boble-venter span { animation: none; } }

/* Linjen om hvor sikker Sofia er. Den skal kunne ses uden at laeses: et
   svar, hun kan handle paa, og et svar, der kun er det naermeste, maa ikke
   se ens ud paa en skaerm i en opgang. */
.svar-linje { margin: 0 0 12px; font-weight: 600; font-size: .9rem; }
.svar-sikker .svar-linje { color: var(--ok); }
.svar-usikker .svar-linje { color: var(--vent); }
.svar-intet .svar-linje { color: var(--daempet); margin-bottom: 0; }

.kilde-kort { border-left: 3px solid var(--midt); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.kilde-kort:last-of-type { margin-bottom: 4px; }
.kilde-hoved { font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.kilde-kort p { margin: 0 0 8px; font-size: .93rem; line-height: 1.58; }
.kilde-bund { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kilde-artikel { font-size: .78rem; color: var(--daempet); font-weight: 600; }
.kilde-aabn { border: none; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--midt); cursor: pointer; padding: 0; }

.svar-vaerktoej { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kant); }
.svar-hoejt {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    font: inherit; font-size: .82rem; font-weight: 700; color: var(--daempet); cursor: pointer; padding: 0;
}
.svar-hoejt svg { width: 15px; height: 15px; }
.svar-hoejt:hover, .svar-hoejt.laeser { color: var(--midt); }

/* Feltet. Det klaeber til bunden, fordi et spoergsmaal nummer to er reglen og
   ikke undtagelsen, og fordi tommelfingeren er dernede. */
/* Feltet klaeber til bunden, men over bundlinjen og ikke bag den.
   Foerste udgave sad paa bottom: 0, og bundlinjen er fixed og 52 px hoej med
   sit eget sikkerhedsomraade under. Feltet laa altsaa praecis bag menuen, saa
   snart samtalen var laengere end skaermen — og det er den efter ét svar. */
.samtale-bund {
    position: sticky; bottom: calc(53px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 0; background: var(--flade);
    box-shadow: 0 -10px 12px -8px rgba(244, 244, 247, .95);
}
.samtale-bund textarea {
    flex: 1; font: inherit; font-size: 1rem; line-height: 1.45; resize: none;
    padding: 11px 14px; border-radius: 14px; border: 1px solid var(--kant);
    background: var(--kort); color: var(--blaek); min-height: 44px; max-height: 132px;
}
.samtale-bund textarea:focus { outline: none; border-color: var(--midt); box-shadow: 0 0 0 3px rgba(163, 68, 162, .16); }
.samtale-mik, .samtale-send {
    flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; border: 1px solid var(--kant); background: var(--kort);
}
.samtale-mik svg, .samtale-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.samtale-mik { color: var(--daempet); }
.samtale-mik.lytter { color: #fff; background: var(--pink); border-color: var(--pink); }
.samtale-send { color: #fff; background: var(--forloeb-knap); border-color: transparent; }
.samtale-send:hover { background: var(--forloeb-lys); }

/* Det andet og det tredje svar staar foldet: overskriften og artiklen kan
   ses, teksten kommer, naar der trykkes. */
.kilde-foldet { border-left-color: var(--kant); }
.kilde-foldet.aaben { border-left-color: var(--midt); }
.kilde-fold {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; text-align: left; border: none; background: none; font: inherit;
    cursor: pointer; padding: 2px 0; color: var(--blaek);
}
.kilde-fold .kilde-hoved { margin: 0; }
.kilde-fold::after { content: 'Vis'; font-size: .78rem; font-weight: 700; color: var(--midt); margin-top: 4px; }
.kilde-foldet.aaben .kilde-fold::after { content: 'Skjul'; }
.kilde-mere { padding-top: 8px; }

/* ── Naar hun taler ──────────────────────────────────────────────────────
   Lyttetilstanden var foer en knap, der skiftede farve. Det er for lidt, naar
   telefonen ligger paa et bord og hun har handsker paa: hun skal kunne se paa
   en armslaengdes afstand, at Sofia hoerer efter, og at ordene rammer rigtigt.
   Derfor fylder det skaermen, og derfor staar det, hun siger, med det samme.

   Det er ogsaa et vaern. En app, der lytter, skal vise at den lytter; er
   panelet vaek, lytter den ikke. */
/* Panelet DAEKKER samtalen, det staar ikke i koe under den. Foerste udgave
   blev haeftet nederst i floaden, saa »Jeg lytter« havnede under forslagene og
   ordene, hun sagde, laa uden for skaermen. Naar hun taler, er det det eneste,
   der skal vaere paa skaermen. */
.samtale-flow{position:relative}
.samtale-lytter{
    position:absolute;inset:0;z-index:3;background:var(--flade,#F4F1F6);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:2.2rem 1.2rem 2.6rem;gap:.2rem;
}
.lytter-ring{
    width:7.5rem;height:7.5rem;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 50%, rgba(160,60,200,.16) 0%, rgba(160,60,200,0) 70%);
    margin-bottom:1.1rem;
}
.lytter-mik{
    width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#7B3FD4,#E0348C);color:#fff;
    box-shadow:0 10px 26px rgba(123,63,212,.38);
}
.lytter-mik svg{width:2rem;height:2rem}
/* Ringen aander, saa det kan ses paa afstand at den er i gang. */
@media (prefers-reduced-motion: no-preference){
    .lytter-ring{animation:lytter-puls 1.8s ease-in-out infinite}
    @keyframes lytter-puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
}
.lytter-titel{font-weight:800;font-size:1.05rem;margin:0 0 .3rem}
.lytter-under{font-size:.92rem;color:#5F5266;margin:0;max-width:20rem}
/* Ordene, mens de siges. Kursiv og i citationstegn, fordi det er et udkast og
   ikke noget, hun har sendt endnu. */
.lytter-ord{font-style:italic;font-size:1rem;color:#2C2534;margin:1.1rem 0 0;min-height:1.4em;max-width:22rem}

/* ── Kontakten til »Hey Sofia« ───────────────────────────────────────────
   Den staar i samtalens hoved ved siden af Ryd samtalen, fordi det er der,
   man er, naar man skal bruge den. Slukket er den en almindelig knap; taendt
   lyser prikken, saa det kan ses paa afstand, at telefonen lytter. Det er med
   vilje ikke en diskret kontakt. */
.samtale-vaekke{
    display:inline-flex;align-items:center;gap:.45rem;
    font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
    padding:.32em .7em;border:1.5px solid var(--kant,#DDD6E2);border-radius:999px;
    background:transparent;color:var(--daempet,#5F5266);
}
.samtale-vaekke .vaekke-prik{
    width:.5rem;height:.5rem;border-radius:50%;background:currentColor;opacity:.45;
}
.samtale-vaekke.til{
    border-color:#E0348C;color:#C01B72;background:rgba(224,52,140,.08);
}
.samtale-vaekke.til .vaekke-prik{background:#E0348C;opacity:1}
@media (prefers-reduced-motion: no-preference){
    .samtale-vaekke.til .vaekke-prik{animation:vaekke-puls 1.4s ease-in-out infinite}
    @keyframes vaekke-puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
}