/* HeySofia Business · b2b.heysofia.dk
 *
 * Sofias palet, kopieret og ikke valgt. Se CLAUDE.md regel 5. Fladen er
 * Sofias eget maerke — Hjem & Pleje er oprindelsen, aldrig afsenderen — og
 * derfor staar hverken forest eller amber her.
 *
 * Skrivebord foerst, men en leder i en hjemmepleje sidder ikke altid ved et
 * skrivebord. Under 900 px bliver sidemenuen til faner i bunden.
 */
:root {
    --lilla: #6D4AC8;
    --pink: #E0559B;
    --midt: #A344A2;
    --forloeb: linear-gradient(115deg, #6D4AC8 0%, #9B4FBE 48%, #E0559B 100%);
    --forloeb-knap: linear-gradient(115deg, #6D4AC8 0%, #B14FB0 55%, #DB2777 100%);
    --forloeb-lys: linear-gradient(115deg, #5E3FB2 0%, #9B4399 55%, #C21F68 100%);

    --dyb: #2A2635;
    --lys-lilla: #A98BEC;
    --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;

    /* Tonale flader. Ikke nye farver — Sofias egne, blandet ned. De giver
       dybde, hvor en hvid boks paa en lys flade ikke kan: en anden tone er
       et lag, en ny farve er et nyt brand. */
    --dyb-2: #353044;
    --glans: #F0ECFA;
    --glans-kant: #DCD3F2;
    --ring: rgba(163, 68, 162, .18);

    --r: 14px;
    --r-lille: 10px;
    --skygge: 0 1px 2px rgba(27, 23, 38, .06), 0 8px 24px rgba(27, 23, 38, .05);
    --skygge-knap: 0 1px 2px rgba(27, 23, 38, .16), 0 4px 12px rgba(109, 74, 200, .28);
    --skygge-loeft: 0 2px 4px rgba(27, 23, 38, .14), 0 8px 20px rgba(109, 74, 200, .32);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; background: var(--flade); color: var(--blaek);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--midt); }

/* ── Ordmaerket ───────────────────────────────────────────────────────
   Marken i prikken over det prikloese i er laast: samme path som paa
   hjemogpleje.dk, uden en eneste rettet knude. Den farves i forloebet; den
   omtegnes ikke.

   KLASSENAVNENE ER IKKE FRIE. sofia-brand.js leder efter `.sofia-wm` og
   `.sofia-i` og fylder marken i `b`'et indeni. Kaldte vi dem noget andet —
   og det gjorde den her fil, indtil en browser viste et i uden prik —
   staar ordmaerket bart, og ingen kontrol ville fange det. */
.sofia-wm {
    font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
    display: inline-flex; align-items: baseline; white-space: nowrap;
    background: var(--forloeb-knap); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* De tre linjer er kopieret ordret fra apps/sofia/assets/sofia.css.
   `b` er sofia-brand.js' maaleprobe og skal fylde nul; SVG'en saettes ind som
   SOESKENDE til den, ikke inde i den. Min foerste udgave stylede
   `.sofia-i b svg`, som aldrig matcher noget — marken sad kun rigtigt, fordi
   scriptet ogsaa saetter top og bredde inline. */
.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; }
.sofia-wm em {
    font-style: normal; font-weight: 700; font-size: .6rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--daempet); margin-left: 8px;
    -webkit-text-fill-color: var(--daempet);
}

/* ── Systemtilstand ──────────────────────────────────────────────────── */
.systemtilstand { position: fixed; inset: 0; background: var(--flade); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
.systemtilstand[hidden] { display: none; }
.systemtilstand-kort { background: var(--kort); border-radius: var(--r); padding: 34px 30px; box-shadow: var(--skygge); text-align: center; max-width: 380px; width: 100%; }
.systemtilstand-maerke { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--daempet); }
.systemtilstand-tekst { font-size: .95rem; margin: 14px 0 16px; line-height: 1.55; }
.systemtilstand-prikker { display: inline-flex; gap: 5px; }
.systemtilstand-prikker span { width: 7px; height: 7px; border-radius: 50%; background: var(--midt); opacity: .35; animation: b2b-prik 1.1s infinite; }
.systemtilstand-prikker span:nth-child(2) { animation-delay: .18s; }
.systemtilstand-prikker span:nth-child(3) { animation-delay: .36s; }
@keyframes b2b-prik { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .systemtilstand-prikker span { animation: none; } }
.systemtilstand[data-tilstand="fejl"] .systemtilstand-prikker { display: none; }
.systemtilstand-knap { margin-top: 6px; font: inherit; font-weight: 700; font-size: .88rem; border: none; background: var(--forloeb-knap); color: #fff; padding: 10px 20px; border-radius: var(--r-lille); cursor: pointer; }

/* ── Log ind ─────────────────────────────────────────────────────────── */
.login { position: fixed; inset: 0; background: var(--flade); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.login[hidden] { display: none; }
.login-boks { background: var(--kort); width: 100%; max-width: 400px; border-radius: var(--r); padding: 42px 32px 30px; 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 h2 { font-size: .95rem; font-weight: 600; color: var(--daempet); margin: 14px 0 22px; }
.login-under { font-size: .8rem; color: var(--daempet); line-height: 1.55; margin: 18px 0 0; }
.login-fejl { background: var(--fejl-flade); color: var(--fejl); font-size: .86rem; padding: 10px 13px; border-radius: var(--r-lille); margin: 12px 0 0; line-height: 1.5; }
.login-fejl[hidden] { display: none; }

.f { margin-bottom: 14px; }
.f label { display: block; font-size: .78rem; font-weight: 700; color: var(--daempet); margin-bottom: 5px; }
.f input, .f select, .f textarea {
    width: 100%; font: inherit; font-size: .94rem; padding: 10px 13px;
    border: 1px solid var(--kant); border-radius: var(--r-lille);
    background: var(--flade); color: var(--blaek);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
/* Feltet er tonet, til man staar i det. En hvid kasse paa et hvidt kort er
   en kant og ingenting; en tonet flade, der bliver hvid ved fokus, siger
   hvor man er, uden en ekstra ramme. */
.f input:hover, .f select:hover, .f textarea:hover { border-color: #D3D0DE; }
.f textarea { min-height: 260px; line-height: 1.6; resize: vertical; font-size: .95rem; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; background: var(--kort); border-color: var(--midt); box-shadow: 0 0 0 3px var(--ring); }
/* To felter, der hoerer sammen, staar ved siden af hinanden. Navn og e-mail
   er ét stykke oplysning om én person, ikke to skridt. */
.f-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 620px) { .f-par { grid-template-columns: 1fr; } }
.f .hint { font-size: .76rem; color: var(--daempet); margin: 5px 0 0; line-height: 1.5; }

/* ── Rammen ──────────────────────────────────────────────────────────── */
.app { min-height: 100%; display: flex; flex-direction: column; }
.app[hidden] { display: none; }
/* Kromen er moerk, og forloebet ligger som en 3 px stribe i bunden af
   hovedet — ikke som flade bag teksten. HS10, godkendt 14. september 2026.
   Hvid paa forloebet giver kun 3,53:1; hvid paa #2A2635 giver 13,6:1. */
.top-bar {
    background: var(--dyb);
    background-image: var(--forloeb);
    background-repeat: no-repeat; background-position: bottom; background-size: 100% 3px;
    color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Paa den moerke krom er ordmaerket hvidt, og »s« er pink. sofia-brand.js
   pakker selv »s« i .sofia-s; farven hoerer til grunden, maerket staar paa. */
.top-bar .sofia-wm { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.top-bar .sofia-s { -webkit-text-fill-color: var(--pink); color: var(--pink); }
.top-bar .sofia-wm em { color: rgba(255,255,255,.62); -webkit-text-fill-color: rgba(255,255,255,.62); }
.hvem { font-size: .8rem; color: rgba(255,255,255,.72); font-weight: 600; text-align: right; line-height: 1.35; }
.hvem b { display: block; color: #fff; font-size: .88rem; font-weight: 700; }
.hvem .rolle { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lys-lilla); }
.udlog {
    font: inherit; font-size: .86rem; font-weight: 600; color: #fff; cursor: pointer;
    padding: 8px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: none;
}
.udlog:hover { background: rgba(255,255,255,.1); }

.krop { display: grid; grid-template-columns: 248px 1fr; flex: 1; align-items: stretch; min-height: 0; }
.side { background: var(--dyb); padding: 24px 0; display: flex; flex-direction: column; gap: 2px; }
.side button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 18px; font: inherit; font-size: .94rem; font-weight: 500;
    color: rgba(255,255,255,.85); background: none; border: none;
    border-left: 3px solid transparent; text-align: left; cursor: pointer;
    position: relative;
}
.side button:hover:not(:disabled) { background: rgba(255,255,255,.06); }
/* Den aktive sektion baerer forloebet som en skinne i venstre kant. Foer var
   den en tonet flade alene, og paa den moerke krom er en tonet flade svaer at
   skelne fra en hover. Skinnen er produktets egen farve, ikke en graa nuance. */
.side button.aktiv::before {
    content: ''; position: absolute; left: -3px; top: 5px; bottom: 5px; width: 3px;
    background: var(--forloeb); border-radius: 0 3px 3px 0;
}
.side button.aktiv {
    background: color-mix(in srgb, var(--lilla) 22%, transparent);
    color: #fff; font-weight: 600;
}
.side button:disabled { color: rgba(255,255,255,.38); cursor: default; }
.side .skel { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 20px 18px 6px; }
/* »SENERE« er et loefte, ikke en fejl. Som bar, daempet tekst laeses den som
   disabled — noget, der er gaaet i stykker. Som chip er den en plads, der er
   holdt: det kommer, og vi ved hvor det lander. */
/* Chippen er komponenten; `.side` saetter kun de farver, den moerke krom
   kraever. Stod formen to steder, ville de to drive fra hinanden — og det
   gjorde de: sidebaren havde chippen, og »Hullerne« paa I dag havde daempet
   tekst. Samme loefte, to udtryk. */
.senere {
    display: inline-flex; align-items: center; flex: none;
    font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
    color: var(--daempet); border: 1px solid var(--kant); background: var(--flade);
}
.side .senere {
    margin-left: auto; color: rgba(255,255,255,.62);
    border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05);
}
/* Arbejdsrum, ikke formular.
   860 px var sat efter en laeselaengde — rigtigt for broedtekst, forkert for
   en flade, en leder har aaben hele dagen ved siden af noget andet. Grænsen
   er nu sat efter, hvad tre talkort og en liste har brug for, ikke efter en
   spalte tekst. Prosaen holdes stadig smal; det er `.under` og `.panel > p`,
   der baerer den, og de har deres egen max-width. */
.midt { padding: 28px 40px 48px; min-width: 0; max-width: 1240px; }
/* Ro ved lange linjer: teksten under en overskrift bliver ikke bredere, selv
   om fladen goer. En saetning paa 1200 px mister oejet mellem to linjer. */
.midt > .under { max-width: 68ch; }

/* To spalter, hvor der er to slags indhold: det, man handler i, og det, man
   holder oeje med. Under 1080 px falder de sammen til én — og paa en telefon
   har de aldrig vaeret to. */
/* 55/45. Foerste udgave var 1,55fr og laeste som 61/39: listen til hoejre
   blev for smal til, at en stilling og en pille kunne staa paa samme linje,
   og raekkerne braekkede. HS10, 14. september 2026. */
.arbejdsflade { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.arbejdsflade > * { min-width: 0; }
@media (max-width: 1080px) { .arbejdsflade { grid-template-columns: 1fr; } }
.midt h1 { font-size: 1.28rem; margin: 0 0 4px; letter-spacing: -.01em; }
.midt .under { font-size: .88rem; color: var(--daempet); margin: 0 0 20px; line-height: 1.55; }
.faner { display: none; }

/* ── Tallet, der betyder noget ───────────────────────────────────────── */
/* Tre tal i en raekke. Det foerste er det, skaermen handler om, og det
   baerer derfor den lilla ramme; de to andre er sammenligning. */
.tal-raekke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.tal-kort { background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; padding: 20px 22px; }
.tal-kort.frem { border-color: var(--lilla); }
.tal-kort .stor { display: flex; align-items: baseline; gap: 6px; }
.tal-kort .stor b { font-size: 2.05rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.tal-kort .stor span { font-size: .94rem; font-weight: 600; color: var(--daempet); }
.tal-kort .navn { margin-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--daempet); }
.tal-kort .under { margin-top: 4px; font-size: .82rem; color: var(--daempet); }
.tal-kort .stor b.nul { color: var(--fejl); }
.tal-kort .stor b.tom { color: var(--daempet); }

/* Panel med overskrift og et tal i hoejre side. */
.panel { background: var(--kort); border: 1px solid var(--kant); border-radius: 12px; padding: 22px 26px; margin-bottom: 18px; }
.panel-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel-hoved h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.panel-hoved span { font-size: .82rem; color: var(--daempet); }
.panel > p { margin: 6px 0 0; font-size: .82rem; color: var(--daempet); line-height: 1.5; }
.linje { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--kant); }
.linje:last-child { border-bottom: none; }
.linje .txt { flex: 1; min-width: 0; }
.linje .txt b { display: block; font-size: .94rem; font-weight: 600; }
.linje .txt span { display: block; margin-top: 2px; font-size: .82rem; color: var(--daempet); }
.linje .naar { font-size: .82rem; color: var(--daempet); white-space: nowrap; }

.maaler { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.maaler .tal { font-size: 2.1rem; font-weight: 800; line-height: 1; white-space: nowrap; background: var(--forloeb-knap); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Nul er ikke en praestation og skal ikke pyntes med et forloeb. */
.maaler .tal.nul { background: none; color: var(--fejl); -webkit-text-fill-color: var(--fejl); }
.maaler .sig { font-size: .92rem; line-height: 1.5; flex: 1; min-width: 190px; }
.maaler .sig b { display: block; margin-bottom: 2px; }
.maaler .sig span { color: var(--daempet); font-size: .86rem; }

/* ── Raekker ─────────────────────────────────────────────────────────── */
.raekke { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r-lille); padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.raekke.kladde { border-color: #D9B85F; background: var(--vent-flade); }
.raekke .navn { flex: 1; min-width: 170px; }
.raekke .navn b { display: block; font-size: .94rem; }
.raekke .navn span { font-size: .78rem; color: var(--daempet); }
.pille { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.p-ude { background: var(--ok-flade); color: var(--ok); }
.p-kladde { background: var(--vent-flade); color: var(--vent); }
.p-intet { background: var(--fejl-flade); color: var(--fejl); }
.p-ro { background: var(--pale); color: var(--daempet); }

/* ── Knapper · tre niveauer, én hoejde-stige ──────────────────────────
   Foer var k1 og en formularkontrol lige store, og sidens vigtigste handling
   laa under tre felter, der fyldte mere end den. Et hierarki er kun et
   hierarki, hvis niveauerne kan ses fra den anden side af rummet.

   k1 primaer  · forloebet, skygge, loeft ved hover. Én pr. skaerm.
   k2 sekundaer · tonal flade. Handlinger, der ikke er skaermens formaal.
   k3 tertiaer · ren tekst. Noget, man kan fortryde.

   Ikonet er valgfrit og staar i knappens egen flex — derfor inline-flex her
   og ikke et ekstra element pr. knap. */
.knap {
    border: 1px solid transparent; font: inherit; font-size: .88rem; font-weight: 700;
    padding: 10px 18px; border-radius: var(--r-lille); cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s, box-shadow .15s, transform .12s, border-color .15s, color .15s;
}
.knap svg { width: 17px; height: 17px; flex: none; }
.knap:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }
/* Navngivne egenskaber i transition ovenfor og ikke »all«: med all animeres
   ogsaa outline-width, og fokusringen glider ind i stedet for at staa der. */
.knap:focus-visible { outline: 2px solid var(--midt); outline-offset: 3px; }

.k1 { background: var(--forloeb-knap); color: #fff; box-shadow: var(--skygge-knap); }
.k1:hover:not(:disabled) { background: var(--forloeb-lys); box-shadow: var(--skygge-loeft); transform: translateY(-1px); }
.k1:active:not(:disabled) { transform: translateY(0); box-shadow: var(--skygge-knap); }

.k2 { background: var(--glans); color: var(--lilla); border-color: var(--glans-kant); }
.k2:hover:not(:disabled) { background: #E7E0F7; border-color: #CFC2EC; }
.k2:active:not(:disabled) { background: #DFD5F3; }

.k3 { background: none; color: var(--midt); padding: 10px 6px; }
.k3:hover:not(:disabled) { color: var(--lilla); text-decoration: underline; text-underline-offset: 3px; }

/* Skaermens ene hovedhandling. »Send invitation« er ikke en formularkontrol
   mere; den er det, siden er til for. */
.knap.stor { padding: 13px 24px; font-size: .95rem; border-radius: 12px; }
.bred { width: 100%; }

.vaerktoej { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.vaerktoej input { flex: 1; min-width: 160px; font: inherit; font-size: .9rem; padding: 9px 13px; border: 1px solid var(--kant); border-radius: var(--r-lille); background: var(--kort); color: var(--blaek); }
.vaerktoej input:focus { outline: none; border-color: var(--midt); box-shadow: 0 0 0 3px rgba(163, 68, 162, .16); }

.besked { padding: 11px 14px; border-radius: var(--r-lille); font-size: .88rem; margin-bottom: 14px; line-height: 1.5; }
.besked-fejl { background: var(--fejl-flade); color: var(--fejl); }
.besked-ok { background: var(--ok-flade); color: var(--ok); }
.besked-vent { background: var(--vent-flade); color: var(--vent); }
.tom { text-align: center; padding: 34px 12px; color: var(--daempet); font-size: .9rem; }
.tom b { display: block; font-size: 1.05rem; color: var(--blaek); margin-bottom: 5px; }
.henter { text-align: center; padding: 30px; color: var(--daempet); font-size: .88rem; }

.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; }
.kort h2 { font-size: .98rem; margin: 0 0 12px; }
.par { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--kant); font-size: .9rem; }
.par:last-child { border-bottom: none; }
.par dt { color: var(--daempet); font-weight: 600; }
.par dd { margin: 0; font-weight: 700; text-align: right; }
dl { margin: 0; }

@media (max-width: 900px) {
    .krop { grid-template-columns: 1fr; }
    .side { display: none; }
    .tal-raekke { grid-template-columns: 1fr; gap: 10px; }
    .panel { padding: 18px 16px; }
    .midt { padding: 16px 16px 90px; max-width: none; }
    .top-bar { padding: 11px 16px; }
    /* Fanerne klaeber til bunden, fordi tommelfingeren er dernede. */
    .faner {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
        background: var(--kort); border-top: 1px solid var(--kant);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .faner button { font: inherit; font-size: .72rem; font-weight: 700; border: none; background: none; color: var(--daempet); padding: 11px 4px; min-height: 52px; cursor: pointer; }
    .faner button.aktiv { color: var(--midt); }
}

/* ── Pulsen · tallet, der siger hvor holdet er ────────────────────────
 *
 * Foer stod »0 af 7« som et stort roedt tal i en hvid kasse. To ting var
 * galt. Roed siger fejl, og nul medarbejdere i Sofia er ikke en fejl — det
 * er dag ét; den leder, der lige har oprettet sig, blev mødt af noget, der
 * lignede en alarm. Og et tal uden en skala viser ingen bevaegelse: 0 af 7
 * og 6 af 7 saa ens ud, bortset fra cifret.
 *
 * Panelet er tonalt og moerkt, fordi det er produktets egen stemme og ikke
 * en formular. Skinnen under tallet er den samme skala hver gang, saa to
 * besoeg kan sammenlignes med oejet. HS10, 14. september 2026.
 */
.puls {
    background: var(--dyb); background-image:
        radial-gradient(120% 140% at 0% 0%, rgba(109, 74, 200, .38) 0%, rgba(109, 74, 200, 0) 58%),
        radial-gradient(90% 120% at 100% 100%, rgba(224, 85, 155, .26) 0%, rgba(224, 85, 155, 0) 60%);
    color: #fff; border-radius: var(--r); padding: 22px 24px; margin-bottom: 18px;
}
.puls-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.puls-tal { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.puls-tal b { font-weight: 800; }
/* Nul pyntes ikke med forloeb — der er intet at fejre endnu — men det er
   heller ikke roedt. Det er daempet hvidt: et udgangspunkt. */
.puls-tal.nul { color: rgba(255,255,255,.55); }
.puls-tal.gang { background: linear-gradient(115deg, #C9B6F5 0%, #F3A6CE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.puls-sig { flex: 1; min-width: 200px; }
.puls-sig b { display: block; font-size: .98rem; font-weight: 700; }
.puls-sig span { display: block; margin-top: 3px; font-size: .84rem; color: rgba(255,255,255,.68); line-height: 1.5; }
.puls-skinne { margin-top: 16px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.puls-skinne i { display: block; height: 100%; border-radius: 999px; background: var(--forloeb); min-width: 3px; }
.puls-bund { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.puls-bund .knap.k2 { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.puls-bund .knap.k2:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.puls-note { font-size: .8rem; color: rgba(255,255,255,.6); }

/* ── Holdet · én liste, ikke fire kort ────────────────────────────────
 * Foer laa hver medarbejder i sit eget kort med egen kant. Fire mennesker
 * blev fire svaevende objekter; et hold er én ting. Nu er det ét kort med
 * haarfine linjer, og hver raekke baerer sine initialer, saa listen kan
 * skimmes paa form og ikke kun paa tekst. */
.hold { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--r); overflow: hidden; }
.hold-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 20px 12px; border-bottom: 1px solid var(--kant); }
.hold-hoved h2 { margin: 0; font-size: .98rem; font-weight: 700; }
.hold-hoved span { font-size: .8rem; color: var(--daempet); }
.hold-raekke { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--pale); }
.hold-raekke:last-child { border-bottom: none; }
.hold-raekke:hover { background: var(--flade); }
/* Én liste er ét objekt. Ligger en `.raekke` inde i `.hold`, holder den op
   med at vaere sit eget kort: ingen egen kant, ingen egen radius, ingen
   margen — kun en haarfin linje til den naeste. Reglen staar her frem for i
   hver skaerm, saa den ikke skal opdages igen. */
.hold > .raekke {
    background: none; border: none; border-radius: 0; margin: 0;
    padding: 13px 20px; border-bottom: 1px solid var(--pale);
}
.hold > .raekke:last-child { border-bottom: none; }
.hold > .raekke:hover { background: var(--flade); }
/* Kladden beholder sit signal, men som en tone i raekken og ikke som en
   gul kasse, der svaever for sig selv. */
.hold > .raekke.kladde { background: var(--vent-flade); }
.hold > .raekke.kladde:hover { background: #F7EBD0; }
.mark {
    flex: none; width: 36px; height: 36px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; letter-spacing: .02em;
    background: var(--glans); color: var(--lilla); border: 1px solid var(--glans-kant);
}
/* Den, der er i gang, baerer forloebet. Forskellen skal kunne ses paa en
   halv meters afstand, ikke laeses. */
.mark.inde { background: var(--forloeb-knap); color: #fff; border-color: transparent; }
.hold-raekke .hold-navn { flex: 1; min-width: 0; }
.hold-raekke .hold-navn b { display: block; font-size: .94rem; font-weight: 600; }
.hold-raekke .hold-navn span { display: block; margin-top: 1px; font-size: .8rem; color: var(--daempet); }

/* ── Tom tilstand med Sofias stemme ───────────────────────────────────── */
.tom-sofia { text-align: center; padding: 30px 20px; }
.tom-sofia .mark { width: 44px; height: 44px; margin: 0 auto 12px; font-size: .9rem; }
.tom-sofia b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.tom-sofia p { margin: 0 0 16px; font-size: .88rem; color: var(--daempet); line-height: 1.55; }

/* ── Fejl, der kan handles paa ────────────────────────────────────────── */
.besked-fejl b { display: block; margin-bottom: 2px; }
.besked .handling { margin-top: 9px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.besked .ref { font-size: .76rem; color: var(--daempet); font-variant-numeric: tabular-nums; }