/* ---------------------------------------------------------------------------
   live-update — admin-flade.

   Mobilfoerst. Hele fladen skal kunne betjenes med én tommelfinger, staaende ude
   i marken, i sollys og med handsker paa. Deraf: store touch-targets (44px er
   minimum), hoej kontrast, og ingen hover-afhaengig funktionalitet.

   Ingen build-step. Ren CSS med custom properties.
   --------------------------------------------------------------------------- */

/* --- Bro til designsystemets tokens ---------------------------------------

   tokens.css indlaeses FOER denne fil og holder hele paletten. Her mappes de
   navne resten af filen allerede bruger, over paa tokens.

   Det er derfor hele fladen skifter udtryk uden at de knap 1100 linjer herunder
   bliver roert: ét sted at aendre, og hver enkelt komponent beholder sin egen
   betydning. Skrives der ny CSS, bruges tokens direkte — denne bro er til det
   der allerede stod her.

   Moerkt tema haandteres ogsaa af tokens.css, baade efter systemets indstilling
   og via .theme-dark. Den @media-blok der stod her, er derfor vaek: to steder
   der satte samme farver ville uundgaaeligt komme ud af trit.

   Bemaerk at --text-muted IKKE staar her. Navnet findes allerede som token med
   samme betydning, saa en linje her ville vaere en cirkulaer reference til sig
   selv — og en cirkulaer custom property er ugyldig, hvorved farven ville falde
   helt ud. */

:root {
    --bg: var(--bg-app);
    --surface: var(--bg-surface);
    --surface-alt: var(--bg-raised);
    --border: var(--border-subtle);
    --text: var(--text-body);

    /* Designet har ingen blaa. Den primaere handling er naesten-sort paa lys bund
       og lime i moerkt tema — tokenet vender selv. */
    --accent: var(--action-primary-bg);
    --accent-text: var(--action-primary-fg);

    /* --danger er TEKST og streger — den vender med temaet (roed-600 paa lyst,
       roed-500 paa moerkt), saa "Slet" og en advarsel bliver ved med at kunne
       laeses. --danger-fill er en roed FLADE med hvid tekst og skal ikke vende. */
    --danger: var(--text-live);
    --danger-fill: var(--action-danger-bg);
    --danger-bg: var(--err-bg);
    --success: var(--ok-fg);
    --success-bg: var(--ok-bg);

    --radius: var(--radius-md);
    --tap: var(--tap-min);

    /* Sikker afstand til iPhones hjemme-indikator og hulkant. Ikke en del af
       designsystemet — den kender ikke enheden. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* hidden-attributtet skal VIRKE. Browserens egen regel er svag og bliver slaaet af
   enhver display-regel paa elementet — og et element vi tror er skjult, men ikke er,
   er en fejl man leder laenge efter. */
[hidden] {
    display: none !important;
}

/* --- Skjult for oejet, ikke for skaermlaeseren -----------------------------

   Bruges til maerkets ord ("Udvisning", "Mål"), som farven baerer visuelt. En farve
   er ingenting for en skaermlaeser, og roed mod groen er netop det par omkring 8 %
   af maend ikke kan skelne — saa ordet skal findes, ogsaa naar det ikke ses.

   clip-path frem for display: none eller visibility: hidden, som begge ville skjule
   teksten for skaermlaeseren ogsaa. Og frem for text-indent: -9999px, som laegger et
   element uden for laerredet og kan give vandret scroll. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
html {
    /* Forhindrer at iOS zoomer teksten naar telefonen drejes. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    letter-spacing: var(--text-body-ls);
    -webkit-font-smoothing: antialiased;
    padding-bottom: var(--safe-bottom);
}

/* (.body--centered er fjernet sammen med .card/.card--narrow. De blev kun brugt af
   login-skaermen, som nu har sit eget layout — se .body--login laengere nede.) */

/* --- Topbar ---------------------------------------------------------------

   64px hoej, sticky, og den dropper ALDRIG sine menupunkter paa smalle skaerme.
   Det der forsvinder under 640px er navnet og ordet "Log ud" — altsaa pynt.
   Navigationen er ikke pynt: en reporter der ikke kan skifte skaerm med
   tommelfingeren, er strandet. */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    /* Luft mellem ordmaerket og menuen: de er to forskellige ting, og staar de
       taet, laeses "Events" som en del af navnet. */
    gap: var(--space-10);
    min-height: 64px;
    padding: var(--safe-top) var(--gutter-page) 0;
    background: var(--bg-surface);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-primary);
    text-decoration: none;
    /* Ordmaerket er ikke et link man skal se er et link. */
    text-decoration-color: transparent;
}

/* --- Ordmaerket ------------------------------------------------------------

   Ét saet regler, fordi maerket staar to steder: i toppen og paa login. Markupen
   ligger i templates/layout/_wordmark.html.twig. */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-primary);
}

.wordmark__dot {
    border-radius: 50%;
    background: var(--red-600);
    flex: none;
    /* Pulserer efter sgo's oenske. Bekymringen om to samtidige animationer er
       ikke aktuel: LIVE-maerket i eventlisten er en stille roed pille uden prik,
       saa denne er den eneste loebende animation paa skaermen. Skulle maerket en
       dag ogsaa pulsere, er det DET der skal holde igen — brandet er konstant,
       en status er ikke. prefers-reduced-motion haandteres i tokens.css. */
    animation: live-pulse 1.6s var(--ease-in-out) infinite;
}

.wordmark__text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* "Live" i lettere vaegt, saa ordmaerket har en form frem for at vaere ét ord. */
.wordmark__light {
    font-weight: 500;
}

.wordmark--sm .wordmark__dot {
    width: 9px;
    height: 9px;
}

.wordmark--sm .wordmark__text {
    font-size: 20px;
}

.wordmark--lg .wordmark__dot {
    width: 13px;
    height: 13px;
}

.wordmark--lg .wordmark__text {
    font-size: 34px;
    letter-spacing: -0.024em;
}

/* Menuen fylder HELE barens hoejde.

   Det er ikke kosmetik: den aktive limestreg er en inset box-shadow i linkets
   underkant, saa linkets hoejde bestemmer hvor stregen lander. Barens
   align-items: center gjorde linket 44px hoejt og centreret i en 64px bar, og
   stregen sad derfor og svaevede midt i baren i stedet for at moede headerens egen
   linje — praecis den fejl sgo saa mod designoplaegget. Med stretch er linkets
   underkant den samme som barens. */
.topbar__nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: var(--space-9);
    /* Skubber brugerdelen helt ud i hoejre kant. */
    margin-right: auto;
}

.topbar__navlink {
    display: inline-flex;
    /* Teksten centreres i den fulde hoejde; stregen bliver i bunden. */
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-1);
    font-size: var(--text-body-sm-size);
    color: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
}

.topbar__navlink:hover {
    color: var(--text-primary);
}

/* Aktivt punkt: tungere vaegt og en limestreg UNDER teksten — aldrig en udfyldt
   pille. Stregen er en inset box-shadow frem for en border, saa teksten ikke
   flytter sig når den bliver aktiv. */
.topbar__navlink.is-active {
    font-weight: 750;
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--lime-500);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar__name {
    font-size: var(--text-body-sm-size);
    font-weight: 650;
    color: var(--text-body);
    white-space: nowrap;
}

.topbar__divider {
    width: var(--border-width);
    height: 20px;
    background: var(--border-subtle);
}

.topbar__logout {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-body-sm-size);
    cursor: pointer;
}

.topbar__logout:hover {
    color: var(--text-primary);
}

/* --- Tema-knappen --------------------------------------------------------- */

.topbar__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--tap-min);
    height: var(--tap-min);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
}

.topbar__icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/*
   Ikonet vaelges af klassen paa <html>, ikke af JavaScript.

   Alle tre ligger i markupen, og kun ét vises. Dermed er knappen rigtig fra
   foerste frame — ogsaa i det oejeblik foer theme.js er hentet. Havde JS skullet
   vaelge, ville der vaere et glimt med det forkerte ikon paa hver side.

   Ingen klasse = auto.
*/
.themeicon {
    display: none;
    grid-area: 1 / 1;
}

.themeicon--auto {
    display: block;
}

.theme-light .themeicon--auto,
.theme-dark .themeicon--auto {
    display: none;
}

.theme-light .themeicon--light {
    display: block;
}

.theme-dark .themeicon--dark {
    display: block;
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Lime som FYLD med naesten-sort tekst. Lime baerer ikke kontrast som tekst
       paa lys bund, men omvendt er den fin. */
    background: var(--lime-500);
    color: var(--ink-950);
    font-size: var(--text-meta-size);
    font-weight: 700;
}

/* Stoerre i brugerlisten, hvor den er et portraet og ikke et hjoerne-maerke. */
.avatar--lg {
    width: 38px;
    height: 38px;
    font-size: var(--text-body-sm-size);
}

/* Kun kontur: bruges til alle andre end administratorer, saa den udfyldte lime
   betyder noget frem for at vaere dekoration paa hver raekke. */
.avatar--quiet {
    background: transparent;
    border: var(--border-width) solid var(--border-default);
    color: var(--text-muted);
}

/* Telefon: navnet og ordet "Log ud" ryger, ikonet og navigationen bliver. */
@media (max-width: 640px) {
    /* Luften mellem ordmaerke og menu strammes: paa en 360px skaerm skal
       ordmaerke, to menupunkter, avatar og log-ud-ikon vaere der samtidig. */
    .topbar {
        gap: var(--space-6);
    }

    .topbar__nav {
        gap: var(--space-6);
    }

    .topbar__name,
    .topbar__logout-label {
        display: none;
    }

    /* Avataren og skillelinjen ryger ogsaa paa telefon. Toppen har nu to
       ikonknapper til hoejre, og de skal beholde deres 44px — en tap-target man
       rammer forbi er vaerre end en manglende initial. Man ved i forvejen hvem man
       er logget ind som paa sin egen telefon.

       Bemaerk .topbar__user foran: en bar .avatar-regel ville ogsaa skjule
       avatarerne i BRUGERLISTEN, hvor de er baerende — de viser hvem der er
       administrator. */
    .topbar__user .avatar,
    .topbar__divider {
        display: none;
    }

    .wordmark--sm .wordmark__text {
        font-size: 16px;
    }
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
    max-width: var(--width-content);
    margin: 0 auto;
    padding: var(--space-7) var(--gutter-page) var(--space-12);
}

/* Formularer er smallere end indhold. Ikke pynt: en tekstlinje der er 820px bred
   er svaer at scanne, og et felt der er bredere end sit indhold ser ud som om der
   mangler noget. Designet saetter 560px. */
.wrap--form {
    max-width: var(--width-form);
}

/* --- Destruktiv sektion ---------------------------------------------------

   Adskilt fra formularen med luft og en stiplet kant. Stiplet frem for fuld: det
   er ikke et kort med indhold, det er en advarsel — og en fuld kant ville laese som
   endnu et panel man skal udfylde. */

.danger {
    margin-top: var(--space-11);
    padding-top: var(--space-8);
    border-top: var(--border-width) dashed var(--border-default);
}

.danger__lead {
    margin: 0 0 var(--space-6);
    font-size: var(--text-body-sm-size);
    color: var(--text-muted);
    text-wrap: pretty;
}

/* --- Log ind ---------------------------------------------------------------

   Den ene skaerm uden topbar, saa ordmaerket staar for sig over kortet og baerer
   afsenderen. 420px: bredt nok til at et felt ikke ser klemt ud, smalt nok til at
   det ikke ligner en formular med flere kolonner.

   align-content: center frem for place-items: center — indholdet er TO elementer
   (maerket og main), og de skal centreres som én gruppe, ikke hver for sig. */

.body--login {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-7);
    min-height: 100dvh;
    padding: var(--space-8) var(--gutter-page);
    background: var(--bg-app);
}

.login,
.login__brand {
    width: min(420px, 100%);
}

.login__card {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.login__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
    letter-spacing: -0.016em;
    font-weight: 800;
    color: var(--text-primary);
}

.login__lead {
    margin: 0 0 var(--space-7);
    font-size: var(--text-body-sm-size);
    color: var(--text-muted);
}

.page__title {
    margin: 0 0 1rem;
    font-size: 1.375rem;
    line-height: 1.25;
}

.page__lead {
    margin: -0.5rem 0 1.5rem;
    color: var(--text-muted);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.panel__title {
    margin: 0 0 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.stack {
    display: grid;
    gap: var(--space-7);
}

/* --- Formularer ---------------------------------------------------------- */

.field {
    display: grid;
    gap: 0.375rem;
}

.field__label {
    font-size: var(--text-label-size);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    font-weight: var(--text-label-weight);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    min-height: var(--control-h-lg);
    padding: 0.625rem var(--space-5);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-body);
    /* 16px er ikke en aestetisk beslutning: Safari paa iOS zoomer ind paa
       ethvert felt med mindre skrift, og saa hopper hele layoutet. */
    font: inherit;
    font-size: 1rem;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    /* --border-focus er naesten-sort paa lyst og lime i moerkt tema. Ringen skal
       kunne ses paa den flade den ligger paa, og en fast farve kan kun det ene. */
    outline: var(--border-width-strong) solid var(--border-focus);
    outline-offset: 2px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--tap);
    cursor: pointer;
}

.checkbox input {
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
}

/* --- Knapper ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    /* Fjerner de 300 ms forsinkelse iOS ellers laegger paa et tryk. */
    touch-action: manipulation;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    padding: 0 0.5rem;
}

.btn--block {
    width: 100%;
}

/* Den ene primaere handling paa en skaerm. Hoejere frem for bredere, saa den ogsaa
   er den stoerste tap-target. */
.btn--lg {
    min-height: var(--control-h-lg);
    padding: 0 var(--space-8);
    font-size: var(--text-body-size);
}

/* --- Beskeder ------------------------------------------------------------ */

.alert {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.alert--error {
    background: var(--err-bg);
    border-color: var(--err-fg);
    color: var(--err-fg);
}

.alert--success {
    background: var(--ok-bg);
    border-color: var(--ok-fg);
    color: var(--ok-fg);
}

.empty {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

/* --- Eyebrow --------------------------------------------------------------

   Den lille versale overskrift der aabner en gruppe. Den kraftige spatiering
   (0.14em) er det der gør den til et skilt frem for en overskrift — uden den
   laeses den blot som lille, fed tekst. */

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    font-size: var(--text-eyebrow-size);
    line-height: var(--text-eyebrow-lh);
    letter-spacing: var(--text-eyebrow-ls);
    font-weight: var(--text-eyebrow-weight);
    text-transform: uppercase;
    color: var(--text-muted);
}

.eyebrow--spaced {
    margin-top: var(--space-9);
}

/* Tallet i mono, saa det laeses som et antal og ikke som en del af teksten. */
.eyebrow__count {
    font-family: var(--font-mono);
    font-size: var(--text-meta-size);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-faint);
}

/* --- Eventliste ----------------------------------------------------------- */

.eventrows,
.eventlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

/* .eventlist bruges paa event-siden til de tildelte reportere. Samme raekke-udtryk
   som eventrow, men uden link: en tildeling er ikke noget man klikker paa. Den
   deler bevidst ikke klasse med eventrow, for de to lister vil divergere. */
.eventlist__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    min-height: var(--tap-min);
    padding: 10px var(--space-6);
    background: var(--bg-raised);
    border-radius: var(--radius-md);
    font-size: var(--text-body-sm-size);
}

/* HELE raekken er linket, ikke kun titlen. En 44px hoej flade er til at ramme
   med en tommelfinger; et ord er ikke. */
.eventrow__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    min-height: var(--tap-min);
    padding: 14px var(--space-6);
    background: var(--bg-raised);
    border-radius: var(--radius-md);
    color: var(--text-body);
    text-decoration: none;
}

.eventrow__link:hover {
    background: var(--bg-active);
}

.eventrow__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Understregningen ligger paa titlen ved hover — limen er en 2px streg, aldrig
   tekstfarve. */
.eventrow__link:hover .eventrow__title {
    text-decoration: underline;
    text-decoration-color: var(--lime-600);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.eventrow__meta {
    font-size: var(--text-meta-size);
    color: var(--text-faint);
}

.eventrow__count {
    font-size: var(--text-meta-size);
    color: var(--text-faint);
    /* Tabulaere cifre, saa tallene staar under hinanden fra raekke til raekke. */
    font-variant-numeric: tabular-nums;
}

/* Badgen skubbes ud i hoejre kant — men kun naar der er plads. Braekker raekken
   paa en smal skaerm, falder den ned uden at efterlade et hul. */
.eventrow__link .badge {
    margin-left: auto;
}

/* --- Tom gruppe -----------------------------------------------------------

   Stiplet frem for en almindelig linje: en tom gruppe er en plads der VENTER paa
   indhold, og det siger en stiplet kant af sig selv. */

.emptystate {
    margin: 0;
    padding: var(--space-7) var(--space-6);
    border: var(--border-width) dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-body-sm-size);
    text-align: center;
}

/* (Reglen for en primaer knap nederst i et panel er fjernet sammen med "Nyt
   event"-knappen, der nu sidder i sidehovedet. Ingen skal lede efter hvorfor der
   staar en tom regel.) */

/* --- Status-badges -------------------------------------------------------

   Firkantede chips (4px), ikke piller: en pille laeses som noget man kan trykke
   paa, og det kan en status ikke. */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-3);
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--bg-raised);
    border: var(--border-width) solid transparent;
    color: var(--text-muted);
}

.badge--live {
    background: var(--danger-fill);
    border-color: var(--danger-fill);
    color: #fff;
}

/* Pause og kladde er begge "ikke live" og deler derfor udtryk — forskellen staar
   i ordet, ikke i farven. */
.badge--paused,
.badge--draft {
    background: var(--bg-raised);
    color: var(--text-body);
}

/* Afsluttet er den ENESTE der er outlined: den er ovre, og den skal traede et
   skridt tilbage uden at forsvinde. */
.badge--finished {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-faint);
}

/* Udfyldt naesten-sort. Bruges til rollen ADMINISTRATOR, som er den eneste rolle
   der kan alt — de oevrige er konturer. */
.badge--strong {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
}

.badge--outline {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-muted);
}

.badge--off {
    background: var(--bg-raised);
    color: var(--text-muted);
}

.badge--locked {
    background: var(--danger-fill);
    border-color: var(--danger-fill);
    color: #fff;
}

/* --- Nyt password, vist én gang ------------------------------------------- */

/*
   Fremhaevet med vilje. Passwordet kan ikke hentes frem igen, saa boksen skal
   vaere umulig at scrolle forbi — og teksten stor nok til at kunne laeses op i
   telefonen uden at knibe oejnene sammen.
*/
.credentials {
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}

.credentials__title {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
}

.credentials__lead {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.credentials__pair {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.875rem;
    margin: 0;
    align-items: baseline;
}

.credentials__pair dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.credentials__pair dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Stor og med afstand mellem tegnene: det skal kunne laeses op i telefonen. */
.credentials__secret {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--surface-alt);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    user-select: all;
}

/* --- Brugerliste ---------------------------------------------------------- */

.userlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

/* ÉN ombrydende raekke, ikke et gitter med faste kolonner.

   Det var forskellen mod designoplaegget: med grid-template-columns laa maerkerne
   og handlingerne i hver sin kolonne med fast bredde, og raekken kunne kun bryde
   ved sine kolonnegraenser. Som flex-wrap flytter ét element ad gangen ned naar
   pladsen bliver knap, og paa en bred skaerm staar alt paa én linje. */
.userlist__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

/* En deaktiveret bruger daempes, men skjules ikke: de skal kunne findes og
   aktiveres igen. */
.userlist__item--off {
    opacity: 0.62;
}

/* Navn og e-mail er det ene element der maa VOKSE og krympe; alle andre beholder
   deres indholdsbredde. 180px er gulvet: under det bliver en e-mail ulaeselig, og
   saa er det bedre at raekken bryder. */
.userlist__who {
    flex: 1 1 180px;
    min-width: 0;
}

.userlist__name {
    font-weight: 750;
    color: var(--text-primary);
}

/* "— dig" staar i almindelig vaegt og daempet farve: det er en oplysning om hvem
   der laeser, ikke en del af navnet. */
.userlist__name .muted {
    font-weight: 400;
}

.userlist__mail {
    font-size: var(--text-body-sm-size);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.userlist__seen {
    flex: none;
    font-size: var(--text-body-sm-size);
    color: var(--text-muted);
    white-space: nowrap;
}

/* margin-left: auto skubber handlingerne ud i hoejre kant, uanset hvor mange
   maerker brugeren har foran sig. Det er derfor en laast bruger med tre maerker
   ikke skubber knapperne ud af raekke. */
.userlist__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    flex: none;
    margin-left: auto;
}

/* Et felt der vises men ikke kan aendres — fx e-mailen paa en bruger. */
.field__static {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
    .badge--live {
        animation: pulse 2s ease-in-out infinite;
    }
}

@keyframes pulse {
    50% { opacity: 0.55; }
}

/* --- Sidehoved med handling i hoejre side ---------------------------------- */

.pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pagehead .page__title {
    margin-bottom: 0.5rem;
}

.pagehead .page__lead {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.panel + .panel {
    margin-top: 1rem;
}

.panel__lead {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.muted {
    color: var(--text-muted);
    font-weight: 400;
}

/* --- Felt-hjaelpetekster --------------------------------------------------- */

.field__hint {
    color: var(--text-muted);
    font-size: var(--text-label-size);
    line-height: 1.45;
}

/* Slug'en i hjaelpeteksten under Titel. Mono paa en hævet chip, fordi den er en
   adresse og ikke prosa — og fordi den er det ene ord i saetningen man ikke maa
   laese fejl. */
.field__hint code {
    padding: 2px var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--bg-raised);
    color: var(--text-body);
    font-family: var(--font-mono);
    font-size: var(--text-meta-size);
}

.field__optional {
    color: var(--text-muted);
    font-weight: 400;
}

.fieldset {
    margin: 0;
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.fieldset legend {
    padding: 0 var(--space-3);
}

/* To kolonner som standard, én paa telefon. Tildelingslister bliver hurtigt
   lange, og en enkelt kolonne kraever unoedig scroll paa en tablet.

   Bemaerk graensen: 640px, altsaa samme breakpoint som resten af fladen bruger.
   Den stod foer paa 30rem (480px) — et tal der ikke svarede til noget andet, og
   som gav to kolonner paa en telefon i landskab hvor der ikke er plads. */
.checkgrid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1fr 1fr;
}

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

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

/* Paa telefon bliver knapperne fuld bredde og stablet. To halve knapper side om
   side er begge for smalle at ramme, og den primaere skal vaere den oeverste. */
@media (max-width: 640px) {
    .actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Embed-koder ---------------------------------------------------------- */

.embed + .embed {
    margin-top: 1rem;
}

.embed__label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.embed__code {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text);
    /* Monospace og ingen ombrydningsskjul: koden skal kunne markeres praecist,
       ogsaa naar den er laengere end feltet. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

code {
    padding: 0.0625rem 0.3125rem;
    border-radius: 4px;
    background: var(--surface-alt);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

/* --- Composer ------------------------------------------------------------- */

/* Kompakt med vilje: composer'en sidder over daekningen, saa hver linje den
   fylder er en linje mindre af det redaktoeren arbejder i. */
.composer {
    display: grid;
    gap: 0.625rem;
}

/* Tid og overskrift paa samme raekke. Tiden er faa tegn, saa en hel linje til
   den var spild. */
.composer__top {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.composer__clock {
    display: grid;
    gap: 0.25rem;
    /* Fast, smal bredde: feltet indeholder "35" eller "45+2", og et bredt felt
       inviterer til at skrive noget der ikke hoerer der. flex: none saa det ikke
       klemmes af overskriften. */
    flex: none;
    width: 5.5rem;
}

.composer__title {
    display: grid;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.composer .field {
    gap: 0.25rem;
}

/* Hurtigvalg til tiden. Mindre end en rigtig knap — de er genveje, ikke
   handlinger, og maa ikke tage opmaerksomheden fra Send. */
.composer__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.chip__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-5);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--action-secondary-bg);
    color: var(--action-secondary-fg);
    font: inherit;
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.chip__btn:hover {
    background: var(--bg-active);
}

/* Minut-pillen: det foreslaaede tal er skaermens loudeste element, fordi det er
   det ene felt der naesten altid er rigtigt som det staar. Naesten-sort flade med
   limefarvede monocifre — samme udtryk som minutchippen paa hvert indlaeg, saa
   tallet ser ens ud fra man saetter det til man ser det staa i daekningen. */
.chip__btn--suggest {
    background: var(--minute-bg);
    border-color: var(--minute-bg);
    color: var(--minute-fg);
    font-family: var(--font-mono);
    font-size: var(--text-minute-size);
    font-weight: var(--text-minute-weight);
    letter-spacing: var(--text-minute-ls);
    font-variant-numeric: tabular-nums;
}

.chip__btn--suggest:hover {
    background: var(--ink-800);
}

/* − og + trykkes ofte flere gange i træk, så de skal være lette at ramme
   gentagne gange. Ens bredde, så fingeren ikke skal flytte sig mellem dem. */
.chip__btn--step {
    width: 2.75rem;
    padding: 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

/* --- Billeder i composer'en ----------------------------------------------- */

.composer__media {
    display: grid;
    gap: 0.5rem;
}

/* Filfeltet er skjult og aktiveres af sin label, saa knappen kan se ud som de
   oevrige chips. Feltet forbliver i DOMen: tastatur og skaermlaeser afhaenger af
   det. */
.chip__btn--file {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Luft mellem ikon og tekst. */
    gap: var(--space-3);
    width: fit-content;
    cursor: pointer;
}

/* Ikonet maa ikke klemmes hvis teksten braekker. */
.chip__btn--file svg {
    flex: none;
}

.chip__btn--file input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.composer__uploadstatus {
    margin: 0;
    min-height: 1.125rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.composer__uploadstatus--ok { color: var(--success); }
.composer__uploadstatus--warn { color: var(--danger); }

/* Miniaturer. Faste, kvadratiske felter: en raekke billeder i blandede
   formater ville ellers give en ujaevn kant, og her er formaalet kun at kunne
   se HVILKE billeder der er valgt. */
.thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.thumb {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-alt);
}

.thumb img,
.thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Baggrund saa feltet ikke blinker hvidt, mens video-headeren hentes. */
    background: var(--surface-alt);
}

/* Varigheden paa en video-miniature. Uden ffmpeg findes der ingen rigtig
   thumbnail, saa maerket er det der gør det tydeligt at det ER en video. */
.thumb__kind {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    padding: 1px var(--space-3);
    /* Kapsel, og en fast sort med 82% — ikke et tema-token. Maerket ligger oven paa
       et fotografi, hvis lyshed vi ikke kender, saa det skal vaere loesrevet fra
       lyst/moerkt tema og altid vaere laesbart. */
    border-radius: var(--radius-pill);
    background: rgb(0 0 0 / 0.82);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.62);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

/* Miniature med afkrydsning til fjernelse, brugt paa redigeringssiden.
   Afkrydsning frem for en slet-knap: sletningen sker foerst naar rettelsen
   gemmes, saa et fejltryk kan fortrydes ved at annullere. */
/* 150px i 4:3. Stoerre end miniaturerne i daekningen med vilje: her skal man
   traeffe en beslutning om HVILKET billede der ryger, og et 88px kvadrat med et
   beskaaret motiv er ikke nok at gaa efter. */
.thumb--removable {
    width: 150px;
    height: auto;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.thumb__check {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.1875rem 0;
    background: rgb(0 0 0 / 0.62);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
}

.thumb__check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--danger);
}

/* Markér tydeligt at billedet ryger ved gemning. */
.thumb--removable:has(input:checked) img {
    opacity: 0.35;
}

.thumb--removable:has(input:checked) .thumb__check {
    background: var(--danger-fill);
}

/* I listen over sendte indlaeg er miniaturerne kun til at se med — der er ingen
   fjern-knap, fordi et billede fjernes ved at rette indlaegget. */
.thumbs--readonly {
    margin-top: var(--space-5);
}

/* 130px i 4:3 frem for et kvadrat paa 88px. Kvadratet var en pladsbeslutning, men
   det beskaerer alt: et bredt stadionbillede bliver en midterudsnit uden kontekst,
   og en portraetvideo bliver et ansigt uden hoved. 4:3 er tættere paa det formatet
   faktisk er, saa redaktoeren kan se HVAD billedet viser inden de sender. */
.thumbs--readonly .thumb {
    width: 130px;
    height: auto;
    aspect-ratio: 4 / 3;
}

/* Segmented control: én sammenhaengende flade med tre segmenter, ikke tre
   fritstaaende knapper. Sporet omkring gør at de tre laeses som ét valg. */
.composer__kinds {
    display: flex;
    /* Ingen ombrydning: de tre typer skal staa paa én linje ogsaa paa en
       telefon. Det er derfor de korte navne findes. */
    flex-wrap: nowrap;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--bg-raised);
    border-radius: var(--radius-pill);
}

.composer__kinds .chip {
    flex: 1 1 0;
    min-width: 0;
}

.composer__kinds .chip > span {
    width: 100%;
    justify-content: center;
}

/* Radioknapper som trykflader. En rigtig radio er for lille til en tommelfinger,
   men den skal blive i DOMen: tastatur og skaermlaeser afhaenger af den. */
.chip {
    position: relative;
    display: inline-flex;
}

.chip input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* DIREKTE barn. Var det en loes descendant-selektor, ramte den ogsaa ikonet
   inde i knappens tekst — og dens "background: transparent" gjorde masken
   usynlig. Det kostede en runde at finde, fordi ikonet var der hele tiden. */
.chip > span {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h-md);
    padding: 0 var(--space-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-body-sm-size);
    font-weight: var(--text-label-weight);
}

/* Den valgte er en naesten-sort pille — de fravalgte har hverken flade eller kant.
   Det er det der gør gruppen til en SEGMENTED CONTROL frem for tre knapper: kun
   én kan vaere valgt, og det skal kunne ses paa ét blik hvilken. */
.chip input:checked + span {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
}

.chip input:focus-visible + span {
    outline: var(--border-width-strong) solid var(--border-focus);
    outline-offset: 2px;
}

/* De to maerke-knapper i composeren.

   Samme udtryk som hurtigvalgene til tiden (.chip__btn): en sekundaer pille med
   kant. De er to UAFHAENGIGE til/fra-valg, saa de maa ikke se ud som et
   segmenteret spor — et spor lover at man skal vaelge én af dem. */

.composer__markers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.chip--toggle > span {
    gap: var(--space-4);
    padding: 0 var(--space-5);
    border-color: var(--border-default);
    background: var(--action-secondary-bg);
    color: var(--action-secondary-fg);
}

.chip--toggle:hover > span {
    border-color: var(--border-strong);
}

/*
   Valgt: knappen viser DEN FARVE den saetter paa indlaegget.

   Foer bar knappen et ikon der sagde hvad den gjorde. Ikonerne er fjernet, og
   farven er nu hele signalet — saa knappen skal vise farven frem for at blive
   naesten-sort som de oevrige valg. Ellers skulle man huske hvilken af de to der
   giver groent.

   Kanten er den maettede farve og fladen den samme tone som indlaegget faar, saa
   knappen er en foerste smagsproeve paa resultatet.
*/
.chip--toggle input:checked + span {
    color: var(--text-primary);
    font-weight: 750;
}

.chip--toggle-goal input:checked + span {
    background: linear-gradient(var(--marker-goal-bg), var(--marker-goal-bg)), var(--bg-surface);
    border-color: var(--green-500);
}

.chip--toggle-penalty input:checked + span {
    background: linear-gradient(var(--marker-penalty-bg), var(--marker-penalty-bg)), var(--bg-surface);
    border-color: var(--red-500);
}

.composer__send {
    display: grid;
    gap: 0.5rem;
}

.composer__status {
    margin: 0;
    min-height: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.composer__status--ok { color: var(--success); }
.composer__status--warn { color: var(--danger); }

/* --- Feed-listen i admin -------------------------------------------------- */

/*
   Dækningen står FLUSH — uden panel-ramme.

   Tidligere var der tre lag polstring inden i hinanden: sidens gutter, panelets
   egen ramme og polstring, og hvert indlæg som sit eget kort. På en telefon
   spiste det en betydelig del af bredden, og indlæggene blev smallere end de
   behøvede. Nu bærer siden gutteren, og indlæggene adskilles af en linje — samme
   greb som viewer-siden bruger.
*/
.panel--flush {
    padding: 0;
    border: 0;
    background: transparent;
}

.feed {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.625rem;
}

/* Hvert indlaeg er sit eget kort. Det er den YDRE panel-ramme der er fjernet, saa
   der ikke er to rammer inden i hinanden — kortet omkring indlaegget bliver, fordi
   det er det der adskiller indlaeggene fra hinanden i en lang liste. */
/* Border-first: 1px kant paa en flade, ingen skygge. En liste med skygger paa
   hvert kort bliver stoejende, og kanten gør samme arbejde. */
.feed__item {
    padding: var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

/* Typen markeres med en tykkere streg i venstre kant af kortet.

   Farverne foelger designsystemet frem for de tidligere blaa/groenne: lime til
   fremhaevet, roed til fastholdt. Det er ikke kosmetik — roed betyder live og
   fastholdt overalt ellers i fladen (status-badge, minutchip), og en groen streg
   her ville vaere den ene undtagelse man skal laere udenad. */
.feed__item--highlight,
.feed__item--pinned {
    border-left-width: var(--rule-live);
}

.feed__item--highlight {
    border-left-color: var(--border-accent);
    /* Tinten som et LAG oven paa kortets farve — se fix-begrundelsen i
       viewer.css: et bart var(--lime-tint) er gennemsigtigt. */
    background: linear-gradient(var(--lime-tint), var(--lime-tint)), var(--bg-card);
}

.feed__item--pinned {
    border-left-color: var(--danger-fill);
}

/* Baggrundsfarve efter maerket: groen ved maal, roed ved udvisning (sgo, 2026-08-18).

   :has() frem for en modifier-klasse paa elementet. Det sparer baade en klasse i
   skabelonen OG en aendring i viewer.js, som bygger nye indlaeg i browseren — med
   en klasse skulle den samme regel vedligeholdes tre steder. Filerne bruger
   :has() i forvejen (fx .live__media:has(img + img)), saa det er ikke ny grund.

   BEMAERK at dette bryder designsystemets regel om at roed aldrig er en flade.
   Det er en truffet beslutning og staar i AFVIGELSER.md.

   Staar EFTER --highlight, saa maerket vinder naar et indlaeg er baade fremhaevet
   og et maal: farven siger HVAD der skete, og det er den vigtigere oplysning.
   Limestregen i venstre kant bliver — kant og baggrund er to forskellige signaler. */

.feed__item[data-marker="goal"] {
    background: linear-gradient(var(--marker-goal-bg), var(--marker-goal-bg)), var(--bg-card);
}

.feed__item[data-marker="penalty"] {
    background: linear-gradient(var(--marker-penalty-bg), var(--marker-penalty-bg)), var(--bg-card);
}
/* Optimistisk indsat, endnu ikke bekraeftet af serveren. Dæmpet frem for
   animeret: en pulserende post midt i en daekning er distraherende. */
.feed__item--pending {
    opacity: 0.6;
}

.feed__item--failed {
    border-left-color: var(--danger);
    opacity: 1;
}

.feed__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    font-size: var(--text-meta-size);
    color: var(--text-faint);
}

/* Minutchippen er indlaeggets ankerpunkt — det man scanner efter naar man leder
   efter et bestemt oejeblik i en lang daekning. Derfor mono med tabulaere cifre:
   "7" og "45+2" skal have samme cifferbredde, saa chippene staar i en kolonne
   frem for at danse.

   Farverne kommer fra --minute-*, som vender med temaet: naesten-sort med lime paa
   lyst, lime med naesten-sort i moerkt tema. Den er dermed det kraftigste element i
   begge tilstande, hvilket er meningen. */
.feed__clock {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--minute-bg);
    color: var(--minute-fg);
    font-family: var(--font-mono);
    font-size: var(--text-minute-size);
    line-height: var(--text-minute-lh);
    letter-spacing: var(--text-minute-ls);
    font-weight: var(--text-minute-weight);
    font-variant-numeric: tabular-nums;
}

/* Et fastholdt indlaeg faar roed chip med hvid tekst. Roed betyder fastholdt og
   live i hele fladen, og chippen er det foerste man ser paa kortet. */
.feed__item--pinned .feed__clock {
    background: var(--minute-pinned-bg);
    color: var(--minute-pinned-fg);
}

.feed__state {
    color: var(--text-muted);
    font-style: italic;
}

.feed__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
    font-weight: var(--text-h3-weight);
    color: var(--text-primary);
}

.feed__body {
    /* Ombrydning af lange ord og URLer: en uafbrudt streng maa ikke skubbe
       layoutet ud i vandret scroll paa en telefon. */
    overflow-wrap: anywhere;
}

.feed__body p {
    margin: 0 0 0.5rem;
}

.feed__body p:last-child {
    margin-bottom: 0;
}

/* Handlingerne pr. indlæg. Flere små formularer side om side — hver knap er sin
   egen POST, så de virker uden JavaScript.
   nowrap: raekken skal holde én linje ogsaa paa en telefon. Det er derfor typerne
   er samlet i ét segmenteret felt og bruger korte navne. */
/* Ingen border-top laengere: indlaegget har selv en linje i bunden, og to streger
   taet paa hinanden gør listen urolig at se paa. */
/* Handlingerne er en BJAELKE i kortets bund paa en hævet flade, ikke knapper der
   svaever i indholdet. Det adskiller "det indlaegget siger" fra "det du kan gøre
   med det" uden en streg mere i en liste der allerede har mange.

   De negative marginer traekker bjaelken ud til kortets indvendige kant; radius i
   bunden foelger kortets, minus den 1px kant den ligger inden for. */
.feed__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
    padding: var(--space-4) var(--space-6);
    background: var(--bg-raised);
    border-bottom-left-radius: calc(var(--radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

/* Mindre end en primær knap, men aldrig under 44px paa en telefon: de sidder i en
   liste man scroller igennem med tommelfingeren, og et fejltryk paa Slet er dyrt.
   --control-h-sm er 32px paa desktop og 44px under 640px — netop derfor findes
   tokenet. */
.btn--tiny {
    min-height: var(--control-h-sm);
    padding: 0 14px;
    /* Pille. Designet er entydigt: hver knap og hver segmented control er en
       pille — ogsaa de smaa raekke-handlinger. */
    border-radius: var(--radius-pill);
    border-color: var(--border-subtle);
    font-size: var(--text-label-size);
    font-weight: 700;
    white-space: nowrap;
    flex: none;
}

/* --- Segmenteret typevælger ----------------------------------------------- */

/*
   Tre valg i ét felt frem for løse knapper. Det viser hvilken type indlægget
   HAR, ikke kun hvad man kan skifte til — og det holder tre valg inden for en
   enkelt linje, hvor tre separate knapper ville ombryde på en telefon.
*/
/* Tre SELVSTAENDIGE piller med luft imellem, ikke ét sammenhaengende spor.

   Forskellen er ikke kosmetisk. Sporet i composeren er ét valg der skal traeffes
   nu, og der hoerer den samlede flade til. Her nede er det en visning af hvad
   indlaegget ER, hvor to af de tre samtidig er knapper der aendrer det. Losere
   piller siger "tre ting du kan gøre"; et spor siger "vaelg ét af tre".

   margin-right: auto skubber Redigér og Slet ud i hoejre kant. Pillerne selv har
   indholdsbredde — Normal, Fremhæv og Fasthold er naesten lige lange, saa de
   kommer ud som lige brede af sig selv frem for at skulle strækkes. */
.segmented {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    margin-right: auto;
}

.segmented__btn {
    /* Indholdsbredde, men maa gerne KRYMPE: paa en telefon skal alle fem
       elementer i bjaelken blive paa én linje — det var et udtrykkeligt oenske,
       og det er derfor de korte navne findes. */
    flex: 0 1 auto;
    min-width: 0;
    min-height: var(--control-h-sm);
    padding: 0 var(--space-6);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--text-muted);
    font: inherit;
    font-size: var(--text-meta-size);
    font-weight: var(--text-label-weight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    touch-action: manipulation;
}

.segmented__btn:not(:disabled):hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Den aktive er disabled — den kan ikke sendes igen — men skal ikke se
   deaktiveret ud. Derfor sættes farverne eksplicit. */
.segmented__btn--on,
.segmented__btn:disabled {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
    cursor: default;
    opacity: 1;
}

/*
   Paa telefon strammes ALT i handlingsbjaelken, saa de fem elementer kan holde
   linjen inden for skaermens bredde.

   Baggrund: da kravet om én linje blev aftalt, var knapperne kompakte 34px med
   12px tekst og typerne laa i ét smalt spor. Designsystemet gjorde dem til piller
   med 13px/700 og 14px polstring, og typerne til tre selvstaendige piller med luft
   imellem — altsaa maerkbart bredere. Paa en 360px skaerm tippede raekken derfor ud
   over kanten, og siden fik en lille vandret scroll saa snart der var et indlaeg.
   Fundet af sgo 2026-08-12.

   Regnestykke paa en 360px skaerm: 16px gutter i hver side og 16px kortpolstring i
   hver side giver 296px til bjaelkens indhold. Stramningerne herunder frigør 24px:
   4px paa bjaelkens to mellemrum, 4px paa segmentgruppens to, og 16px paa de to
   raekke-knappers polstring.

   Hoejden roeres IKKE — 44px staar, fordi et fejltryk paa Slet er dyrt.
*/
@media (max-width: 640px) {
    .feed__actions {
        gap: var(--space-2);
    }

    .segmented {
        gap: var(--space-2);
    }

    .segmented__btn {
        padding: 0 var(--space-3);
    }

    .feed__actions .btn--tiny {
        padding: 0 10px;
    }
}

/* --- Diskret ikonknap ----------------------------------------------------- */

.iconbtn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    flex: none;
}

.iconbtn:hover {
    background: var(--surface-alt);
    color: var(--text);
}

/* Kursiv, fordi det er en bemaerkning OM indlaegget og ikke en del af det. En
   rettelse skal kunne ses uden at raabe. */
.feed__editedmark {
    font-style: italic;
}

/* En destruktiv handling er den SAMME knap med roed tekst — ikke en roed flade.
   En roed flade skriger og bliver dermed noget man klikker paa for at faa den vaek;
   roed tekst siger "taenk dig om" uden at trække blikket til sig i en liste hvor
   den staar paa hver eneste raekke. */
.btn--danger {
    color: var(--danger);
    border-color: var(--border-subtle);
}

.btn--danger:hover {
    border-color: var(--danger);
}