/* Saunagus — mobil-først, YOGO-inspireret udtryk (lys base, Roboto, navy accent),
   ingen frameworks */

/* Roboto self-hostet (variabel font, 100-900 i én woff2 — ingen Google-CDN/GDPR).
   Latin-subset dækker dansk (æøå ligger i U+0000-00FF). */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/roboto-latin.woff2") format("woff2");
}

:root {
    /* "Skiltet" — emalje-skilt/håndværks-udtryk (GoSauna-forslag D): skovgrøn som
       reel primærfarve, havre-baggrund, skarpe hjørner. Se .claude/skills/ui-design. */
    --bg: #f4efe4;
    --surface: #fffdf8;
    --text: #221c12;
    --text-dim: #7d715c;
    --accent: #364037;         /* skovgrøn - samme som logoets baggrund */
    --accent-contrast: #ffffff;
    /* Menuskuffen: en anelse mørkere end topbjælken, så de to grønne flader kan
       skelnes fra hinanden når menuen folder ud UNDER bjælken. */
    --nav-drawer-bg: #1f3626;
    --warm: #b3791f;           /* oker/mosstard til advarsler/få pladser */

    /* Rød står UDENFOR paletten med vilje: den skal sige "slet" eller "se her" og
       ikke kunne forveksles med skovgrøn (valgt) eller oker (advarsel). Den har
       ligget hardkodet fem steder siden YOGO-tiden; tokeniseret 9/10-2026, da
       NY-mærket blev det sjette. */
    --danger: #dc2626;
    /* Stjerner i en samlet vurdering: den velkendte guldfarve, som folk genkender
       fra ratings alle andre steder. Bevidst IKKE --warm (der betyder advarsel) og
       ikke --accent (grøn læses ikke som stjerner). */
    --star: #e0a010;
    /* HJERTET - det eneste røde i paletten (Anders 2/10-2026). Et fyldt hjerte skal
       være rødt; grøn læses ikke som "mit", og oker er advarslen. En dyb, varm rød,
       ikke en skrigende: paletten er jordnær (skovgrøn, havre, oker), og #ff0000 ville
       skurre mod havren. Kontrast 4,7:1 mod --bg og 5,4:1 mod --surface - over 3:1 for
       et grafisk element, og over 4,5:1 hvis det nogensinde bærer tekst.
       KUN hjertet bruger den. Den destruktive røde ("Slet min konto") er en ANDEN farve
       med en anden betydning - se ui-design-skillen. */
    --hjerte: #c0392b;
    --border: #ded2b8;
    --shadow: 0 1px 2px rgb(0 0 0 / 5%);
    --radius: 4px;
    /* Høje, afrundede VALGKASSER - ugestribens dage. --radius (4px) er "skiltets"
       skarpe plade-hjørne og er for hårdt til en kasse man trykker på, og 999px ville
       gøre den til en pille. Brug den KUN til den slags blokke; kort og bokse bliver
       ved med at være --radius. */
    --radius-blok: 14px;
}

* { box-sizing: border-box; }

/* Basis-linkfarve. Uden denne falder ethvert <a> UDEN egen klasse tilbage på
   browserens blå/lilla besøgt-farve - fx anmeldelses-linket på profilsiden.
   Klassebaserede regler (.day-header, .nav-link, .vchip …) vinder som før. */
a { color: var(--accent); }

/* Afkrydsningsfelter/radioknapper tegnes af styresystemet og bliver iOS-blå
   uden dette - accent-color er den eneste måde at brande dem uden at bygge
   hele kontrollen om. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

main {
    max-width: 42rem;
    margin: 0 auto;
    /* padding-top: sidens første kort må ikke klistre op ad den grønne topbjælke.
       Ligger her (ikke på de enkelte sider), så det gælder ensartet overalt. */
    padding: 1rem 1rem 3rem;
}

/* -- Header/footer -------------------------------------------------------- */

/* IKKE sticky. Bjælken har samme grønne farve som fx "INDSTILLINGER"-bjælken
   (.day-header), så en sticky header skar den midtover når man scrollede - det
   lignede en fejl frem for indhold der gled bagom. Menuen har ikke brug for
   sticky: den pinner selv bjælken mens den er åben, se html.nav-open nedenfor. */
.site-header {
    position: relative;
    padding: max(env(safe-area-inset-top), 0.5rem) 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    /* "Skiltet": headeren er selv en fuld-bredde skovgrøn plade, ligesom
       .day-header-mønstret der allerede bruges i resultatlisten. */
    background: var(--accent);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-contrast);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.02em;   /* GoSauna vises i blandet case (ikke versaler) */
    padding: 0.5rem;
}

/* Ordmærket: logo i fuld højde til venstre, og navn + undertekst som en kolonne ved
   siden af. Kolonnen er venstrestillet, så de to linjer flugter (Anders 22/9-2026). */
.brand-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.brand-undertekst {
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    opacity: 0.85;
    /* Nul margen: PÅ FORSIDEN er elementet et <h1> (MainLayout), og en h1 har som
       standard 0.67em over og under. Uden den her linje ville topbjælken vokse på
       forsiden alene. Skrift og vægt sættes allerede ovenfor, så h1 og span tegnes
       bit for bit ens. */
    margin: 0;
}

/* Logoet i topbaren. Dets grønne baggrund er den samme som headerens (--accent),
   så billedet flyder sømløst ind i skiltet - kun kobber-teksten "Go sauna" ses. */
.brand img {
    /* Fuld højde: logoet er lige så højt som navn + undertekst tilsammen. */
    height: 3rem;
    width: auto;
    display: block;
    border-radius: 4px;
}

/* -- Hamburger-menu: skubbe-skuffe (checkbox-hack, ingen JS nødvendig) ------ */

/* position:fixed - IKKE absolute. Et klik på <label for="nav-toggle"> giver
   checkboxen fokus, og browseren scroller altid det fokuserede element ind i
   billedet. Som absolute sidder den i toppen af DOKUMENTET, så siden hoppede
   til toppen hver gang man åbnede menuen længere nede. Fixed betyder at den
   altid allerede er i viewporten, så der er intet at scrolle til. */
.nav-toggle-input {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Burgeren er BÅDE åbn- og luk-knap: de tre streger foldes til et ✕ når menuen
   er åben (se :checked-reglerne nedenfor). Den ligger i den sticky topbjælke med
   højere z-index end skuffen, så den altid kan klikkes. */
.nav-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius);
    transition: background 0.25s ease;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-contrast);
    transition: transform 0.25s ease, opacity 0.15s ease;
}

/* ☰ -> ✕. Stregerne står med 4px mellemrum (14px høj stak), så den øverste skal
   6px ned og den nederste 6px op for at mødes i midten; den midterste fades ud. */
.nav-toggle-input:checked ~ .nav-push .nav-burger { background: var(--nav-drawer-bg); }
.nav-toggle-input:checked ~ .nav-push .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-push .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle-input:checked ~ .nav-push .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Skuffen starter UNDER topbjælken (--header-h måles af initNavLock() i
   App.razor) og er en anelse mørkere end bjælken, så de to flader kan skelnes.
   Topbjælken beholder sin egen farve og dæmpes ikke. */
.nav-drawer {
    position: fixed;
    top: var(--header-h, 3.25rem);
    left: 0;
    bottom: 0;
    width: 18rem;
    max-width: 80vw;
    background: var(--nav-drawer-bg);
    color: var(--accent-contrast);
    z-index: 30;
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    transform: translateX(-100%);
    /* visibility (ikke kun transform) - ellers kan en LUKKET menus links stadig
       nås med tab-tasten ude i det usynlige. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
}

.nav-link {
    color: var(--accent-contrast);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.85rem 0.6rem;
    border-radius: var(--radius);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.12); }
/* Skillestreg mellem menuens grupper. */
.nav-skil { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); margin: 0.5rem 1rem; }

/* Sprogskifter øverst i menuen: viser det sprog man kan skifte TIL. Adskilt fra
   selve navigationen med en linje nedenunder, så den ikke læses som et menupunkt
   på linje med Kurser/Kontakt. */
.nav-lang {
    gap: 0.6rem;
    padding-bottom: 1rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-flag { font-size: 1.2rem; line-height: 1; }

/* Mørk scrim over resten af sitet: dæmper det visuelt OG fanger alle klik, så
   siden bagved reelt er låst mens menuen er åben. Starter under topbjælken, så
   den ikke dæmpes med. Lukker menuen ved klik udenfor (samme checkbox,
   <label for> virker uanset hvor i dokumentet den sidder). */
.nav-scrim {
    position: fixed;
    inset: var(--header-h, 3.25rem) 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Menuen lægger sig OVENPÅ siden (overlay) - siden skubbes ikke længere.

   VIGTIGT: .nav-push må ALDRIG få en transform (heller ikke translateX(0)).
   Enhver transform-værdi undtagen none gør elementet til containing block for
   position:fixed-efterkommere, så fx kalender-/sortering-dropdownen (.cal-pop/
   .radius-pop) ville blive placeret i forhold til dokumentet i stedet for
   viewporten - og dermed lande præcis scrollY pixels forkert, når man har
   scrollet ned. Se initFullWidthPopovers() i App.razor, der sætter top ud fra
   getBoundingClientRect() (viewport-koordinater). */
.nav-push {
    position: relative;
    background: var(--bg);
    min-height: 100vh;
}

.nav-toggle-input:checked ~ .nav-drawer { transform: translateX(0); visibility: visible; }
.nav-toggle-input:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

/* Scroll-lås mens menuen er åben. Klassen sættes af setNavOpen() i App.razor,
   fordi en søskende-selector fra checkboxen ikke kan nå <html>/<body>.
   position:fixed på <body> (ikke bare overflow:hidden, som iOS Safari ignorerer
   ved touch) - den nødvendige top:-scrollY sættes samme sted. */
html.nav-open { overflow: hidden; }
html.nav-open body {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Med <body> låst som position:fixed findes der ingen scrollport, så headerens
   sticky-binding holder den IKKE længere øverst - den ville følge med ned i det
   forskudte indhold og forsvinde ud af billedet. Derfor pinnes den eksplicit
   imens, og .nav-push kompenserer med samme højde i padding, så indholdet bagved
   ikke hopper når bjælken forlader/genindtræder i flowet. */
/* SPA'en (/ny, senere forsiden) ruller IKKE i dokumentet. Hele viewporten er én søjle:
   topbjælke, filtre, stribe - og LISTEN som den eneste der ruller, i sin egen beholder
   (.feed-rulle). Hvorfor: med dokument-scroll tegnede Safari et frame med det gamle
   indhold på den nye scroll-position og et blankt frame hvor dokumentet var kortere end
   positionen (skærmoptagelse, Anders 1/10-2026), og værktøjslinjerne gled ind og ud når
   et dagtryk lagde scrollen nær toppen. I en beholder er alt det ude af ligningen.

   Svip op (indhold ned): bjælke, filtre og tællelinje folder sammen (max-height), kun
   striben bliver. Svip ned: de folder ud igen. Listen flytter sig ikke - beholderen
   bliver bare højere eller lavere. Det er den sticky topbjælke noten ovenfor forbyder,
   men her STÅR intet fast over indhold: der er ikke noget indhold bag toppen. */
/* Dokumentet må IKKE kunne rulle - heller ikke de få pixels Safari ellers finder til et
   bounce når listen rammer sin bund: hele siden hoppede op og ned, og striben flippede
   mellem to dage (skærmoptagelse, Anders 1/10-2026). html+body låses i højde og overflow,
   og overscroll stopper ved listen. */
html.spa-side { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* iOS Safari ignorerer overflow:hidden på body ved touch (se også menuens scroll-lås i
   ui-design-skillen): dokumentet kunne stadig trækkes nogle pixels, og bjælken hoppede
   (anden optagelse, Anders 1/10-2026). position:fixed er den eneste lås der holder. */
html.spa-side body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
html.spa-side .nav-push { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
/* flex-basis 0 hele vejen ned til beholderen: med "auto" meldte listen sin FULDE
   indholdshøjde som basis, søjlen løb over, og topbjælken blev klemt til 17 px. */
html.spa-side .site-header { flex: 0 0 auto; }
html.spa-side .site-footer { display: none; }   /* appens visning: linkene står i menuen */
html.spa-side main { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; width: 100%; }
html.spa-side #spa { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
html.spa-side .spa-klaebrig { position: static; flex: 0 0 auto; }
html.spa-side .feed-rulle {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Fuld bredde som før: listens kort bryder ud af main's sidepadding. */
    margin: 0 -1rem;
    padding: 0 1rem 3rem;
}
/* Det der ligger EFTER listen i main (tilbage-bjælken, sektioner) hører ikke til her. */
html.spa-side .nav-home-bar, html.spa-side .efter-tilbage { display: none; }
/* Forsidens oversigtsblok hører til samme familie: den står efter #spa i main, og i
   app-skallen er main en søjle hvor #spa skal have al pladsen. Stod blokken med, ville
   den klemme gus-listen sammen - præcis som .site-footer ville, og den er skjult her
   af samme grund (linjen ovenfor). En gæst med JavaScript ser derfor intet nyt; en
   crawler uden JavaScript - og en gæst med JS slået fra - ser hele blokken. */
html.spa-side .forside-oversigt { display: none; }
/* Sammenfoldningen: alt over striben får max-height 0. 240 px er rigeligt over den
   udfoldede højde (bjælke 80 + filtre 46 + chips + tællelinje 23 + luft). */
html.spa-side .spa-klaebrig > :not(.ugestribe) {
    max-height: 240px;
    overflow: hidden;
    transition: max-height 0.22s ease, padding 0.22s ease, margin 0.22s ease;
}
/* BJÆLKEN følger fingeren (Anders 2/10-2026): JS sætter --bjaelke-fold i pixels pr.
   scroll-hændelse, og bjælken rykkes op med translateY + en negativ bund-margin, så
   alt under (filtre, stribe, liste) følger med i samme tempo. Kun bjælken: den har
   ingen position:fixed-paneler i sig, så en transform her kan ikke fange noget. Når
   sporet står stille, klæber den til en ende med en kort overgang (.bjaelke-blidt). */
html.spa-side .site-header {
    transform: translateY(calc(-1 * var(--bjaelke-fold, 0px)));
    margin-bottom: calc(-1 * var(--bjaelke-fold, 0px));
}
html.spa-side.bjaelke-blidt .site-header {
    transition: transform 0.16s ease-out, margin-bottom 0.16s ease-out;
}
html.spa-side.spa-skjul .spa-klaebrig > :not(.ugestribe) {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
}
html.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;               /* over skuffen, så ✕'et altid kan klikkes */
}
html.nav-open .nav-push { padding-top: var(--header-h, 3.25rem); }

@media (prefers-reduced-motion: reduce) {
    .nav-drawer, .nav-scrim, .nav-burger span { transition: none; }
}

/* "Tilbage til GoSauna forside" - genbruger .day-header's fuld-bredde
   bjælke-mønster (inkl. dets -1rem sidemargin til at bryde ud af main's
   padding) i bunden af siden i stedet for øverst i resultatlisten. Kun
   margin-top justeres (mere luft ned til indholdet ovenfor), IKKE hele
   margin-shorthanden - ellers overskrives .day-header's -1rem sidemargin. */


/* Konto-genvej i øverste højre hjørne, fælles for hele sitet - kun ikonet
   når man ikke er logget ind, ikon + fornavn når man er. */
.site-header-account {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.site-header-account-icon {
    padding: 0;
    width: 44px;
    justify-content: center;
    font-size: 1.15rem;
}

.site-footer {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* Betingelser + privatliv: to links på én linje, der brydes pænt på en telefon. */
.footer-jura {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
}

/* -- Filtre ---------------------------------------------------------------- */

.filters { margin: 0 0 1rem; }   /* toppen kommer nu fra main's padding */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;               /* touch-target */
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

/* .chip's display:inline-flex ellers vinder over browserens standard
   [hidden] { display:none } - skal eksplicit overstyres igen */
.chip[hidden] { display: none; }

.chip-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* Datovælgerens pille - deler øverste linje 50/50 med "Alle steder" */

.date-stepper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    /* Kalender og "Alle steder" deler topbjælken 50/50 (minus halvdelen af gap'et).
       Sortering ligger på sin egen fulde linje nedenunder (se .sort-row).
       min-width:0 er nødvendigt for at flex-basis:50% reelt kan vinde over
       indholdets naturlige min-content-bredde (ellers wrapper rækken). */
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
}

.cal-dd { flex: 1; min-width: 0; }

/* -- Bekræftelses-notits (fx efter log ud) ----------------------------------- */
.notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
}

.cal-dd summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}

.cal-dd summary::-webkit-details-marker { display: none; }

/* Folder ud i fuld skærmbredde uanset hvor triggeren selv sidder i toppen
   (position:fixed, ikke absolute) - den lodrette top sættes præcist af
   initFullWidthPopovers() i App.razor; værdien her er blot et fallback.
   max-width + margin:auto: på mobil (viewport < ca. 42rem) fylder den nøjagtig
   som før (kun begrænset af left/right); på bredere skærme (tablet/desktop)
   må den IKKE strække sig til hele vinduets bredde - kun så bred som sidens
   eget indhold (<main>'s max-width), centreret samme sted. */
.cal-pop {
    position: fixed;
    top: 5.5rem;
    left: 1rem;
    right: 1rem;
    max-width: 40rem;
    margin: 0 auto;
    z-index: 20;
    /* Panelet havde hverken loft eller rulning, så "Alle dage"-knappen nederst lå under
       iPhonens browserknapper og kunne ikke rammes (Anders 16/9-2026). dvh - ikke vh -
       er den SYNLIGE højde: vh regner bjælkerne med, som om de ikke var der.
       initFullWidthPopovers() sætter et præcist loft ud fra triggerens plads; det her
       er reserven, hvis scriptet ikke har kørt endnu. */
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}

/* "Nær mig" med radius-dropdown */

.chip-group {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    /* Se kommentaren ved .date-stepper - 50/50-fordelingen sættes samme sted. */
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
}

/* Sortering: egen fulde linje under dato/afstand (ikke en tredje kolonne dér) -
   .chips genbruges som wrapper, men med kun ét fuld-bredde barn. Triggeren viser
   selve det aktive valg som tekst (ikke kun ikonet), så popup'en holder sig til
   én kolonne (labels er lange sætninger). */
.sort-row { margin-top: 0.5rem; }
/* Sortering og Tema deler linjen 50/50 (samme fordeling som dato+sted-rækken). */
.sort-dd { flex: 1 1 calc(50% - 0.25rem); }
.sort-dd .radius-pop { grid-template-columns: 1fr; }
.sort-icon { font-size: 1.1rem; }

.chip-group-active {
    background: var(--accent);
    border-color: var(--accent);
}

.chip-group-active .chip-main { color: var(--accent-contrast); }

/* Hele "Alle steder"-chippen er summary — et klik hvor som helst åbner dropdownen */
.chip-main {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-main::-webkit-details-marker { display: none; }

/* Folder ud i fuld skærmbredde ligesom kalenderen (position:fixed) - antal
   kolonner tilpasser sig automatisk den tilgængelige bredde. max-width +
   margin:auto: må ikke strække sig til hele vinduets bredde på brede skærme
   - se kommentaren ved .cal-pop. */
.radius-pop {
    position: fixed;
    top: 5.5rem;
    left: 1rem;
    right: 1rem;
    max-width: 40rem;
    margin: 0 auto;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 2px;
    padding: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

.radius-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text);
    font: inherit;
    min-height: 44px;
    min-width: 6rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}

.radius-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.radius-sel {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}


/* Kalender (én valgbar dato) */

.calendar {
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    color: var(--accent);
    text-decoration: none;
    border-radius: 50%;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-dow {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    padding-bottom: 0.25rem;
}

.cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 40px;
    border-radius: 50%;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

a.cal-day:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.cal-day.cal-sel {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

.cal-off { color: var(--text-dim); opacity: 0.45; }

/* "I dag" markeres med en RING (ikke en fyldt cirkel, som er forbeholdt den
   VALGTE dag) - de to tilstande kan optræde samtidig og skal kunne skelnes:
   ring alene = i dag men en anden dag er valgt; ring + fyld = i dag er valgt. */
.cal-day.cal-today {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-day.cal-today.cal-sel { box-shadow: inset 0 0 0 2px var(--accent-contrast); }

.cal-status {
    display: flex;
    align-items: center;
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--text-dim);
    /* Klæbende i bunden af panelet: ruller man i månedens dage, følger "I dag" og
       "Alle dage" med, i stedet for at forsvinde under kanten. */
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding: 0.5rem 0 0.15rem;
}

.cal-status a { color: var(--accent); }
.cal-status-right { margin-left: auto; }

.cal-status-btn {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Tidsrum-filter (7-17/17-23) i bunden af kalender-dropdownen */
.periode-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.periode-row .radius-opt { flex: 1; min-width: 0; }

/* Steds-oversigt (multiselect) */

.venue-filter {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Hver filtergruppe (Gussteder, Gustema, Gusmester, Andre events) er sit eget kort.
   Lidt mere markant end resten af kortene på siden (tydeligere kant + let skygge),
   så de tre filterbokse springer i øjnene som deres egen gruppe. */
.filter-section {
    padding: 0.75rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
}

.filter-heading {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Foldbare filter-sektioner (native <details>-accordion, lukket til at starte med) */
.filter-summary {
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;              /* touch-target */
    padding-right: 2.25rem;        /* plads til .filter-reset, se nedenfor */
    cursor: pointer;
    user-select: none;
}

.filter-summary::-webkit-details-marker { display: none; }

.filter-summary .filter-heading { margin: 0; }

.filter-section[open] .filter-summary { margin-bottom: 0.5rem; }

/* Låst tema (hovedmenuens "Kurser"/"Åndedræt og yoga"): samme boks-stil, men intet
   at folde ud eller nulstille - ren <div>, ikke <details>, så ingen klik-affordance. */
.filter-section-locked .filter-summary {
    cursor: default;
    padding-right: 2.25rem;   /* plads til det røde kryds (tilbage til gus-søgningen) */
}

/* Nulstil-kryds pr. filter-sektion: kun synligt når sektionen har et valg. Ligger
   INDE i selve <summary> - kun summary'ens INDHOLD forbliver synligt/i DOM'en når
   <details> er lukket (standardtilstanden); en sibling udenfor summary (som fx
   radius-pop/cal-pop, der først vises NÅR sektionen er åben) ville være usynlig
   præcis når krydset skal kunne ses. Interaktive elementer inde i <summary>
   trigger IKKE selv accordion-toggle ved klik (afprøvet). */
.filter-reset {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--warm) 12%, transparent);
    color: var(--warm);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

/* [hidden] er ellers "display:none" fra UA-stylesheettet, men vores egen
   "display:flex" ovenfor (samme specificitet, senere i cascaden) overtrumfer
   den - så en tema-reset uden valgt tema ellers stadig ville stå og vise sig. */
.filter-reset[hidden] { display: none; }

.filter-reset:hover { background: color-mix(in srgb, var(--warm) 22%, transparent); }

/* Badge på summary så den valgte værdi ses selv når sektionen er lukket */
.filter-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}

.geo-note {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--accent);
}

.geo-note a { color: var(--accent); }

.venue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Gussteder og Gusmester (forsiden): ét navn pr. linje i stedet for ombrydende
   chips, i en fælles højde-begrænset, scrollbar boks - de to sektioner skal
   fremstå og virke ens. Kun disse to lister, ikke Tema (som deler
   .venue-list-basen men beholder de ombrydende chips). */
#venue-list, #instructor-list {
    flex-direction: column;
    flex-wrap: nowrap;    /* ellers laver flex column+wrap+max-height flere "kolonner" i stedet for at scrolle */
    align-items: stretch;
    max-height: 15rem;
    overflow-y: auto;
}

/* "Kun ledige" - eget til/fra-filter, adskilt fra tema-chip-rækken på sin egen linje */
/* "Faciliteter"-overskrift i tema-dropdownen: egen fuld-bredde linje mellem temaer og faciliteter. */
.tema-group-head {
    flex-basis: 100%;
    margin: 0.7rem 0 0.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Vandret streg over "Kun ledige". */
.tema-ledige-row {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

/* Gusmester-vælger: filter-felt + scroll-bar liste af navne (virker på iOS) */
.instructor-filter {
    font: inherit;
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
}

/* Fritekst-søgning i de viste gus. Egen boks under Gusmester - ikke et <details>,
   for feltet skal være synligt og klar til at skrive i med det samme. */
.gus-search-box { padding: 0.6rem 0.75rem; }

/* .instructor-filter har bundmargen fordi den står OVER en chip-liste; her er
   feltet det eneste i boksen, så margenen ville blive til dødt hvidt felt. */
.gus-search { margin-bottom: 0; }

/* Klippekort-note ved gusstedet (eventside + stedside). Dæmpet: det er stedets
   generelle vilkår, ikke prisen på det event man kigger på. */
.clipcard {
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-size: 0.95rem;
}

/* Postnummer-linjen på event-kortet. Lidt lysere end resten af kort-metaen:
   den er placerings-info, ikke noget man scanner efter. */
.card-zip { opacity: 0.8; }

/* Kortsiden (/kort). Højden er sat i vh frem for px, så kortet fylder skærmen
   på en telefon uden at blive absurd højt på en stor skærm. */
.kort {
    height: 65vh;
    min-height: 320px;
    max-height: 640px;
    margin: 0 0 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    /* Leaflets egne lag tegnes med position:absolute - uden isolation kan de
       lægge sig over sitets header når man scroller. */
    isolation: isolate;
}

/* ---- Kortsiden (/kort) ------------------------------------------------------
   Kortet i FULD skærmbredde: samme negative-margin-teknik som .day-header-bjælkerne
   (main har 1rem sidepadding). På brede skærme stopper det ved sidens max-bredde -
   margenen æder kun paddingen. */
.kortside-kort {
    margin-left: -1rem;
    margin-right: -1rem;
    width: auto;
    /* Kortet SKAL fylde mest muligt (Anders 23/9-2026): overskriften er væk, og
       højden er nu skærmen minus topbjælken, knapperne og by-rækken. dvh frem for vh,
       så mobilens adresselinje ikke skubber bunden ud af billedet. */
    height: 68vh;
    height: calc(100dvh - 15rem);
    min-height: 20rem;
    max-height: 900px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* Fokusknapperne over kortet. Samme form som by-chippen på /gussteder (lys flade,
   pilleform) - IKKE .sted-by, som er tegnet til panelets grønne baggrund og ville
   stå som hvid tekst på havre. */
.kort-byer { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.75rem; }
.kort-by {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.kort-by:hover, .kort-by:focus-visible { border-color: var(--accent); background: var(--bg); }
/* Min position: kun ikonet, så den bliver kvadratisk og skiller sig ud fra bynavnene. */
.kort-byer .sted-minpos { min-width: 44px; padding: 0.35rem 0.6rem; }

/* De valgte gussteder under kortet. Fyldes af JS (syncKortValgte) og viser samme
   valg som kortets markører og popup-knapper. */
.kort-valg { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.kort-valg-titel { margin: 0 0 0.25rem; font-size: 1.15rem; }
.kort-valg-linje { margin: 0 0 0.5rem; }
.kort-valgte { list-style: none; padding: 0; margin: 0; display: grid; }
/* Navn+adresse i venstre spalte (adressen må gerne ombryde), Fjern fast til højre,
   så knapperne står på linje uanset hvor langt navnet er. */
.kort-valgt {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.kort-valgt:last-child { border-bottom: 0; }
.kort-valgt-navn { font-weight: 600; text-decoration: none; }
.kort-valgt-navn:hover { text-decoration: underline; }
.kort-valgt-fjern {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
    background: none;
    border: 0;
    padding: 0.2rem 0;
    text-decoration: underline;
    cursor: pointer;
}
.kort-valgt-fjern:hover { color: var(--text); }
/* Knap-rækken i toppen: hovedknappen fylder pladsen, "Ryd" tager kun sin egen. */
/* Kortsidens fire knapper på én linje: ikon, sidens udgang (får pladsen), Luk/Ryd, Del.
   De tre små beholder deres bredde; kun den midterste strækker sig. */
.kort-knapper { display: flex; align-items: stretch; gap: 0.4rem; margin: 0 0 0.6rem; }
.kort-knapper > * { min-height: 44px; }
.kort-knapper .kort-vis-gus { flex: 1; min-width: 0; text-align: center; }
.kort-knapper .btn { padding-left: 0.85rem; padding-right: 0.85rem; white-space: nowrap; }
.kort-knap-ikon { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding-left: 0.5rem; padding-right: 0.5rem; }
/* Inaktiv: knappen findes, men der er endnu intet at vise. Ikke skjult - den fortæller
   hvad man skal gøre ("Vælg gussteder"). */
.kort-knap-inaktiv { opacity: 0.55; pointer-events: none; cursor: default; }

/* Del-boksen under knapperne. */
/* Del-boksen folder sig ud og trækker sig flydende tilbage igen. Højden animeres med
   grid-template-rows (0fr -> 1fr), som er den eneste måde at animere "auto" på uden at
   låse en pixelhøjde fast. [hidden] fjernes/sættes af JS ét tick før/efter, så den både
   kan animere og forsvinde helt ud af fanerækkefølgen. */
.kort-del {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0 0 0.75rem;
    transition: grid-template-rows 260ms ease, opacity 200ms ease, margin 260ms ease;
}
/* display:grid ovenfor slår ellers browserens [hidden]-skjul ihjel: den lukkede boks fyldte
   26 px + margen og kunne tabbes ind i (fundet 25/9-2026). Samme mønster som .watch-name-box. */
.kort-del[hidden] { display: none; }
.kort-del > * { overflow: hidden; }
.kort-del-aaben { grid-template-rows: 1fr; opacity: 1; }
.kort-del-boks { padding: 0.75rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface); }
@media (prefers-reduced-motion: reduce) {
    .kort-del { transition: none; }
}
.kort-del-titel { margin: 0 0 0.5rem; font-weight: 600; }
.kort-del-raekke { display: flex; gap: 0.5rem; }
/* Hele knappen skal kunne rammes, ikke kun teksten (Anders 23/9-2026). */
.kort-del-kopier { min-height: 44px; min-width: 6.5rem; display: inline-flex;
    align-items: center; justify-content: center; white-space: nowrap; }
.kort-del-url { flex: 1; min-width: 0; min-height: 44px; padding: 0.35rem 0.6rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 1rem; background: var(--bg); color: var(--text); }   /* 16 px: under det zoomer iOS ved fokus */
.kort-del-hint { margin: 0.5rem 0 0; }

/* Layout-standard-siden (/design, kun test). */
.design-side h3 { font-size: 1rem; margin: 1.2rem 0 0.3rem; }
.design-side h4 { font-size: 0.95rem; margin: 1rem 0 0.3rem; color: var(--text-dim); }
.design-raekke { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.design-farver { list-style: none; padding: 0; }
.design-farver li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.design-prik { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--border); flex: none; }

/* ---- Tryk-reaktioner: "Stempel" og "Stempel med hak" ------------------------
   Navngivne standarder - se /design (kun test). Anders 23/9-2026.

   Reaktionen hænger på KLASSEN .knap-trykket, ikke på :active: iOS Safari sætter slet
   ikke :active på en almindelig knap, og et museklik varer 40-60 ms - kortere end
   effekten. JS'en i App.razor sætter klassen ved pointerdown og holder den i mindst
   160 ms, så man NÅR at se den.

   Stempel:          knappen mases flad mens fingeren er nede, og springer tilbage med
                     et lille overskud - som et stempel der rammer papiret.
   Stempel med hak:  det samme, plus et flueben der fejer ind med kvitteringen.
   Begge skifter til den varme farve i kvitteringens 2,4 sekunder. */
.knap-stempel, .knap-stempel-hak {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;   /* ingen 300 ms ventetid på dobbelttryk */
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 260ms ease, border-color 260ms ease;
}
.knap-stempel.knap-trykket, .knap-stempel-hak.knap-trykket {
    transform: scale(1.07, 0.82);
    transition-duration: 120ms;
}

/* Fluebenet fejer ind foran teksten - kun i "med hak". */
.knap-stempel-hak.knap-kvitter::before {
    content: "✓";
    margin-right: 0.4rem;
    display: inline-block;
    animation: knap-hak 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes knap-hak {
    from { transform: translateX(-0.8rem) scale(0.4); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Kvitteringen: den varme farve i 2,4 sekunder, ind og ud med en blød overgang. */
.knap-kvitter { background: var(--warm); border-color: var(--warm); }
.knap-fejl { background: var(--text-dim); border-color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
    .knap-stempel, .knap-stempel-hak { transition: background-color 260ms ease; }
    .knap-stempel.knap-trykket, .knap-stempel-hak.knap-trykket { transform: none; }
    .knap-stempel-hak.knap-kvitter::before { animation: none; }
}

.kort-valg-knapper { display: flex; gap: 0.5rem; margin: 0 0 0.9rem; }
.kort-valg-knapper .kort-vis-gus { flex: 1; text-align: center; }

/* ---- Kortets markører: knapper, ikke prikker (Anders 19/9-2026) -------------
   En prik på 9 px er svær at ramme med en tommelfinger og siger ikke hvilket sted
   den er. Markøren bærer derfor gusstedets navn.

   Leaflet positionerer selve .leaflet-marker-icon med transform, så pillen må ikke
   sidde på den - den ville overskrive placeringen. Derfor ligger stilen på en indre
   <span>, som centreres over punktet med sin egen transform. */
.kort-navn, .kort-klynge {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    /* Skilte-udtrykket: fuld flade, hvid tekst, skarp hvid kant så navnet kan læses
       oven på både by, skov og vand. */
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgb(0 0 0 / 35%);
}
.kort-navn {
    /* Navnet må fylde, men ikke dække kortet: lange navne klippes med ellipse. */
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 0.4rem 0.7rem;
    min-height: 30px;
}
/* Valgt gussted: samme oker som resten af sitets "valgt"-tilstand på kortet, og en
   anelse større, så det kan ses i en klump af navne. */
.kort-navn-valgt {
    background: var(--warm);
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff, 0 2px 5px rgb(0 0 0 / 40%);
}
/* Klyngen: ét tal, rundt og større end et navn - den er et MÅL man trykker på for
   at komme videre, ikke en etiket man læser. 44 px er touch-målet fra resten af
   sitet. */
.kort-klynge {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Klyngen svarer på "er de gussteder jeg har valgt, med heri?" - ellers ser et kort
   med 35 valgte steder i København ud som om intet er valgt (Anders 29/9-2026).
   Samme oker som .kort-navn-valgt, så farven betyder det samme overalt på kortet:
     alle valgt    -> hel oker flade
     nogle valgt   -> en lagkage, hvor okerstykket er andelen (--valgt-del)
     ingen valgt   -> uændret skovgrøn
   Tallet ligger ovenpå i begge tilfælde; conic-gradient er en baggrund, ikke indhold. */
.kort-klynge-valgt {
    background: var(--warm);
    box-shadow: 0 0 0 2px #fff, 0 2px 5px rgb(0 0 0 / 40%);
}
.kort-klynge-delvis {
    background: conic-gradient(var(--warm) 0 var(--valgt-del, 0%), var(--accent) var(--valgt-del, 0%) 100%);
    box-shadow: 0 0 0 2px #fff, 0 2px 5px rgb(0 0 0 / 40%);
}
/* Lagkagen ville ellers skære tallet midtover på kanten mellem de to farver. En lille
   skygge holder cifrene læselige oven på begge farver. */
.kort-klynge-delvis { text-shadow: 0 1px 2px rgb(0 0 0 / 55%); }

.kort-klynge:hover, .kort-navn:hover { filter: brightness(1.12); }

/* Krydset i popup'en (Anders 28/9-2026). Leaflet leverer det som 24x24 px oppe i hjørnet
   - under vores 44 px-mål for alt man skal ramme med en tommelfinger, og det eneste sted
   i popup'en hvor man IKKE vælger en handling. Uden det måtte man ramme "Vis gus" eller
   "Læs mere" for at komme af med boksen, altså navigere væk for at lukke.
   Gælder alle tre kort: forsidens panel, /kort og landingssidernes. */
/* Bemærk specificiteten: leaflet.css indlæses EFTER app.css (se App.razor's head), så en
   regel med samme vægt taber på rækkefølgen. Klassen gentages derfor - det er den mindst
   indgribende måde at vinde på uden !important. */
.leaflet-container a.leaflet-popup-close-button.leaflet-popup-close-button {
    width: 44px;
    height: 44px;
    font-family: var(--font-family);
    font-size: 30px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;
    color: var(--text);
    border-radius: 50%;
}
.leaflet-container a.leaflet-popup-close-button.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button.leaflet-popup-close-button:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* Krydset fylder nu 44 px i hjørnet, så stedets navn skal have plads ved siden af -
   ellers løber en lang overskrift ind under det. */
.leaflet-popup-content.leaflet-popup-content { margin-right: 44px; }

/* Luk og Ryd deler plads på kortsiden: JS sætter [hidden] på den ene, men .btn's
   egen "display: inline-block" slår browserens [hidden] ihjel, så begge stod fremme
   (Anders 29/9-2026, set på iPhone). Samme fælde som .chip og .filter-reset. */
.kort-luk[hidden], .kort-ryd[hidden] { display: none; }

.kort-popup-navn { display: block; font-weight: 700; }
/* Leaflets eget stylesheet farver links i popup'en blå (.leaflet-container a) og indlæses
   EFTER app.css - så sitets accent tabte på rækkefølgen, og stednavnet stod blåt med
   understregning i SPA'ens popup (1/10-2026). Klassen gentages for at vinde, som ved
   lukkekrydset. */
.leaflet-container a.kort-popup-navn.kort-popup-navn { color: var(--accent); text-decoration: none; }
.kort-popup-adr { color: var(--text-dim); margin: 0.15rem 0 0; }
.kort-popup a { font-weight: 600; }
/* Popup'ens to handlinger er KNAPPER (Anders 19/9-2026), ikke tekstlinks: de er
   det man kom for, og de skal kunne rammes med en tommelfinger. "Se gus" er
   hovedvejen og har fuld flade; "Tilføj til filter" er den lette. */
.kort-popup-bund {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.kort-popup-bund .kort-gus,
.kort-popup-bund .kort-tilfoej {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.kort-popup-bund .kort-gus {
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1px solid var(--accent);
}
.kort-popup-bund .kort-tilfoej {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
}
.kort-popup-bund .kort-tilfoej:hover { border-color: var(--accent); }
/* "Vis altid"-sted uden kommende gus: en rolig statustekst, ikke en knap der ikke
   fører nogen steder hen. */
.kort-popup-bund .kort-gus-ingen {
    background: none;
    border: 0;
    color: var(--text-dim);
    font-weight: 500;
    cursor: default;
    min-height: 0;
}

.kort-liste { list-style: none; padding: 0; margin: 0; }
.kort-liste li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.kort-liste li:last-child { border-bottom: 0; }
.kort-adresse { color: var(--text-dim); }

/* "Gussteder"-listesiden: hvert sted som et tydeligt adskilt kort (ingen streg
   mellem stederne - luft og kant-boks i stedet). Navn/adresse og fotos linker til
   gusstedets side; "Gus" står højrestillet på navnelinjen. */
/* Byerne nederst på /gussteder. Formen er sitets egen chip (.vchip fra sted-vælgeren),
   så rækken ikke ligner et fremmed element - blot uden 44px-højden, for her er der 50
   af dem og ingen grund til at fylde en halv skærm.

   Tallet er antal gussteder og bærer sin egen lille flade: uden den flød by og tal
   sammen til "København 28" som var det ét navn. */
.by-sektion { margin-top: 1.5rem; }
.by-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.75rem 0 0; }
.by-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.by-chip:hover, .by-chip:focus-visible {
    border-color: var(--accent);
    background: var(--bg);
}
.by-chip-tal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.by-chip:hover .by-chip-tal { background: var(--surface); }

.gussted-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
/* Ingen hvid flade (Anders 17/9-2026): kortet står på sidens egen havrefarve og
   tegnes kun af sin kant. Den hvide --surface skubbede fotos og navn ned i et
   fremmed lag - havren lader rækken af fotos være det der løfter sig. Samme form
   bruges af by-listen på /saunagus/byer. */
.gussted-item {
    display: grid;
    gap: 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
}
/* "3 gussteder · 12 gus" på by-kortet: egen linje under bynavnet, uden den margen
   .watch-fine ellers har (den står som et afsnit her, ikke som en hale). */
.gussted-tal { margin: 0; }

/* Valgt gussted på /gussteder. Kortet er den tredje visning af samme valg som
   lokationsmenuens liste og kortet, så det skal kunne ses på afstand: accent-kant
   hele vejen rundt og et flueben foran navnet - samme sprog som chippens ✓. */
.gussted-valgt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gussted-mark { display: inline-block; min-width: 0; font-weight: 700; color: var(--accent); }
.gussted-valgt .gussted-mark { min-width: 1.1em; }
/* Vælger-knappen: højrestillet i kortets bund, let form så den ikke konkurrerer med
   "Vis gus"-knappen øverst. */
.gussted-vaelg {
    justify-self: end;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    min-height: 40px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.gussted-vaelg:hover, .gussted-vaelg:focus-visible { border-color: var(--accent); background: var(--surface); }
.gussted-valgt .gussted-vaelg { border-color: var(--accent); }
.gussted-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.gussted-titel { text-decoration: none; color: inherit; min-width: 0; }
.gussted-titel:hover .gussted-navn { text-decoration: underline; }
.gussted-navn { font-weight: 600; color: var(--text); }
.gussted-fotos { text-decoration: none; }   /* <a> uden om foto-gitteret */
.kort-antal { display: block; color: var(--text-dim); font-size: 0.9rem; }

/* Opsætnings-området (/indstillinger/opsaetning) */
.venue-roles, .role-grants { list-style: none; padding: 0; margin: 0.5rem 0; }
.venue-roles li {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.venue-roles li:last-child { border-bottom: 0; }
.role-badge {
    font-size: 0.8rem; color: var(--text-dim); white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.6rem;
}
/* Sektioner: mere luft, og en fin skillelinje mellem hver. */
/* Administratorens godkendelses-boks. Markeret med en kant, fordi den er det eneste
   sted på siden hvor en handling rammer hele sitets synlighed - og fordi den kun
   findes for system-admin, hvor resten af siden ser ens ud for alle. */
.venue-admin-gate {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: var(--surface-2, rgba(0,0,0,0.02));
}
.venue-admin-gate h4 { margin-top: 0; }
.venue-approve-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1rem; }
.venue-approve-row form { display: flex; gap: 0.6rem; align-items: center; }
/* GODKENDELSES-KØEN (/indstillinger/opsaetning/ventende). Hvert ventende gussted står
   som en indrammet blok, fordi den skal læses som ÉN ting man siger ja eller nej til -
   stedet har ingen side at se det på endnu. */
.venue-pending { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.venue-pending h4 { margin-top: 0; }
.venue-pending-adr { margin: 0 0 0.6rem; color: var(--muted); }
.venue-pending-fotos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0; }
.venue-pending-fotos figure { margin: 0; max-width: 200px; }
.venue-pending-fotos img { width: 100%; height: auto; border-radius: 6px; display: block; }
.venue-pending-fotos figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
.venue-pending-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.venue-pending-tekst { margin: 0.8rem 0; max-width: 70ch; }
.venue-pending-tekst p { margin: 0.2rem 0 0; line-height: 1.5; white-space: pre-wrap; }
.venue-pending-kontakt { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; margin: 0.8rem 0 0; }
.venue-pending-kontakt dt { font-weight: 600; }
.venue-pending-kontakt dd { margin: 0; overflow-wrap: anywhere; }

.claim-list { margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.5; }
.claim-note { margin: 0.35rem 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--border);
              white-space: pre-wrap; }
.claim-list li + li { margin-top: 0.6rem; }

.venue-claim-tekst { margin: 0 0 1rem; max-width: 52ch; line-height: 1.5; color: var(--muted); }
.claim-intro { max-width: 60ch; line-height: 1.55; }

/* Bylinket over naboerne på stedsiden - luft ned til "Andre gussteder i nærheden" */
.andre-gussteder .venue-bylink { margin: 0; font-weight: 600; }
.andre-gussteder .venue-bylink + h2 { margin-top: 2rem; }
.naboer .nabo-afstand { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

.gus-liste { list-style: none; margin: 0; padding: 0; }
.gus-liste li { padding: 0.7rem 0; border-bottom: 1px solid var(--border); display: flex;
                flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.gus-liste li:last-child { border-bottom: 0; }
.gus-aflyst { opacity: 0.55; }
.gus-handlinger { display: flex; gap: 0.5rem; }

.sociale-ikoner { display: flex; gap: 1rem; align-items: center; }
.sociale-ikoner a { color: var(--muted); display: inline-flex; }
.sociale-ikoner a:hover, .sociale-ikoner a:focus-visible { color: var(--accent); }

.submit-gruppe { font-size: 0.95rem; font-weight: 600; margin: 0.5rem 0 0; }
/* Står gruppe-overskriften efter et felt, skal den have luft over sig - ellers
   klistrer den til feltet ovenfor og ligner dets hjælpetekst. */
label + .submit-gruppe, .venue-adr-row + .submit-gruppe { margin-top: 1.75rem; }

.venue-adr-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.venue-adr-row label { flex: 1 1 8rem; }

.venue-section { margin-top: 2rem; }
.venue-section + .venue-section { border-top: 1px solid var(--border); padding-top: 1.75rem; }
.venue-section h4 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.venue-section > .watch-fine { margin: 0 0 1rem; max-width: 44ch; line-height: 1.5; }

/* ALLE felter i opsætningen deler font (Roboto) + look - konsistent på tværs. */
.venue-section input:not([type=checkbox]):not([type=file]),
.venue-section textarea {
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
}
.venue-section textarea { width: 100%; line-height: 1.55; resize: vertical; min-height: 3.25rem; }
.venue-section input[type=file] { font: inherit; }

.role-grants li {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0; border-bottom: 1px solid var(--border);
}
.role-grants li:last-child { border-bottom: 0; }
.role-add { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; align-items: center; }
.role-add input { flex: 1 1 12rem; }
.slug-prefix { align-self: center; color: var(--text-dim); font-weight: 600; }
.venue-desc { border-top: 1px solid var(--border); padding-top: 0.75rem; }
/* Gusstedets beskrivelse med let formatering (13/10-2026, Services/Beskrivelse.cs):
   afsnit, fed/kursiv, lister og links - samme luft som den gamle pre-wrap-tekst. */
.venue-tekst p { margin: 0 0 0.6rem; line-height: 1.55; }
.venue-tekst p:last-child, .venue-tekst ul:last-child, .venue-tekst ol:last-child { margin-bottom: 0; }
.venue-tekst ul, .venue-tekst ol { margin: 0 0 0.6rem; padding-left: 1.3rem; line-height: 1.55; }

/* Knapper i stedet for links. Fjern = diskret fare-knap; foto-pile = ikon-knapper;
   btn-outline til "Se gusstedets side". */
.btn-remove {
    font: inherit; cursor: pointer; font-weight: 600; white-space: nowrap;
    background: var(--surface); color: #b42318;
    border: 1px solid #e6c3bf; border-radius: 999px; padding: 0.45rem 0.95rem;
}
.btn-remove:hover { background: #fbeceb; }
.foto-arrow {
    font: inherit; cursor: pointer; font-size: 1.15rem; line-height: 1;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 0.35rem 0.6rem;
}
.foto-arrow[disabled] { opacity: 0.3; cursor: default; }
.btn-outline {
    display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 0.95rem;
}
.btn-outline:hover { border-color: var(--accent); }

/* Primær-knapper i opsætningen får lidt luft over sig. */
.venue-section .btn-book { margin-top: 0.25rem; }

/* Stakkede formularer (beskrivelse, søgeord, tilføj-gussted): label på egen linje,
   felt fuld bredde under med luft. */
.venue-section .watch-form { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.venue-section .watch-form label { display: block; width: 100%; font-weight: 600; }
.venue-section .watch-form label input,
.venue-section .watch-form label textarea { width: 100%; margin-top: 0.4rem; font-weight: 400; }
.venue-settings-title { margin: 1rem 0 0.25rem; font-size: 1.4rem; }

/* Faciliteter-fieldset på tilføj-gussted-formularen. */
.submit-facilities { border: 0; padding: 0; margin: 0; width: 100%; }
.submit-facilities legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }

/* Postnr + by side om side (postnr smallere). */
.submit-zipcity { display: flex; gap: 1rem; width: 100%; }
.submit-zipcity label:first-child { flex: 0 0 8rem; }
.submit-zipcity label:last-child { flex: 1 1 auto; }

/* Content-providerens foto-styring (op til 3). Hver række: thumbnail + kildetekst +
   handlinger (op/ned/gem/fjern). */
.venue-fotos { list-style: none; padding: 0; margin: 0.5rem 0; }
.venue-foto-row {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.venue-fotos li:last-child .venue-foto-row { border-bottom: 0; }
.venue-foto-row img {
    width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius);
    flex: 0 0 auto; background: var(--bg);
}
.venue-foto-fields { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
.venue-foto-fields input[type=text] {
    font: inherit; padding: 0.4rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg); color: var(--text); width: 100%;
}
.venue-foto-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.venue-foto-actions button[disabled] { opacity: 0.35; cursor: default; }

/* "Vis på listen": hvilket af stedets fotos der står på gus-kortene og i gussted-listen
   (Anders 2/10-2026). Formet som en chip, fordi det ER et valg og ikke en handling -
   valgt tilstand er primærfarve som fyld, præcis som en valgt chip andre steder på
   sitet. 44 px: den skal kunne rammes med en tommel. Markeringen står TO steder - hak i
   knappen og en ramme om fotoet - ellers skal man gætte hvilket af tre der er valgt. */
.foto-liste {
    font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.25rem;
    min-height: 44px; padding: 0 0.9rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
}
.foto-liste:hover { border-color: var(--accent); }
.foto-liste-valgt {
    background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}
.venue-foto-valgt .venue-foto-row img { outline: 3px solid var(--accent); outline-offset: -3px; }
.venue-foto-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; align-items: center; }
.venue-foto-add input[type=text] {
    font: inherit; padding: 0.5rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg); color: var(--text); flex: 1 1 12rem;
}

/* Faciliteter (venue-tags) som afkrydsning. */
/* Google-stjernerne på gusstedets side. Tallet bærer informationen; stjernerne er
   genkendelsen, og "på Google" er den kildeangivelse Google kræver. */
.venue-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0.5rem 0 0; }
/* Under anmeldelses-knappen: centreret og med luft, så den ikke klæber til knappen. */
.venue-rating-under { justify-content: center; margin: 1.5rem 0 0; }
.venue-stjerner { color: var(--warm); letter-spacing: 0.05em; }

.venue-tags-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.4rem 1rem; margin: 0.5rem 0 0.75rem;
}
.venue-tag-check { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.venue-tag-check input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

/* Faciliteter-mærkater på stedsiden (samme .tag-badge som event-kortene). */
.venue-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* Kort-listens bundlinje: "Læs mere" til venstre, "Gus" højrestillet. */
.kort-liste-bund { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.15rem; }
.kort-laesmere { font-weight: 600; }
.kort-gus { font-weight: 600; white-space: nowrap; }
.kort-gus-ingen { color: var(--text-dim); font-weight: 500; }
/* Højrestillet "Se gus" pr. gusmester i stedets gusmester-liste. */
.gusmester-segus { font-weight: 600; white-space: nowrap; }
/* "Se alle gus"-boksen på gusstedets side. */
/* "Se alle gus"-link lige under beskrivelsen, med én tom linjes afstand. Højere
   specificitet end ".event-section p" så margin-top slår igennem. */

.vchip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
}

.vchip-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.vchip-active .distance { color: inherit; }

/* NY-mærket på et tema der er under 7 dage gammelt (Anders 9/10-2026).
   En lille rød cirkel i chippens øverste højre hjørne.

   Chippen får position: relative, så prikken kan hænge i hjørnet - men den må IKKE
   skubbe teksten eller ændre chippens mål: rækken af temaer skal stå som før, og
   touch-målet er stadig de 44 px. Derfor absolut placering og ingen padding-ændring.

   Rød er en ny farve i paletten og står med vilje udenfor den: den skal sige "se her"
   og ikke ligne hverken skovgrøn (valgt) eller oker (advarsel). Samme røde som
   "Slet min konto" bruger i forvejen. */
.vchip { position: relative; }

.vchip-ny {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    /* Ring i FLADEN BAG chippen, så prikken læses som et mærke ovenpå og ikke smelter
       sammen med kanten. Fladen er filterpanelet (--nav-drawer-bg), ikke sidens havre:
       med var(--bg) blev ringen en lys glorie på den mørkegrønne plade - set på test
       9/10-2026, før nogen andre end mig havde set den. */
    box-shadow: 0 0 0 2px var(--nav-drawer-bg);
}

.vchip .distance { font-style: normal; margin-left: 0.35rem; font-size: 0.85rem; }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.filter-inline {
    display: grid;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    flex: 1;
    min-width: 10rem;
}

.filter-inline select,
.filter-inline input[type="search"] {
    font: inherit;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    min-height: 44px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font: inherit;
    font-weight: 700;   /* YOGO: fede pilleknapper */
    text-decoration: none;
    cursor: pointer;
}

.btn-book { background: var(--accent); color: #fff; }

.btn-big {
    width: 100%;
    font-size: 1.1rem;
    margin: 0.5rem 0 1rem;
}

/* -- Liste ------------------------------------------------------------------- */

/* Firkantet bjælke (samme farver som knapperne) i fuld skærmbredde - bryder ud af
   <main>'s faste 1rem sidepadding (se main { padding: 0 1rem 3rem }) med negativ
   margin, og lægger paddingen ind igen så teksten ikke sidder i selve kanten.
   Genbruges også som link (indstillingernes sektionsnavne + "GoSauna forsiden"),
   derfor display:block (ellers inline som <a>) og text-decoration:none. */
.day-header {
    display: block;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin: 1.5rem -1rem 0.5rem;
    padding: 0.5rem 1rem;
}

/* Tilbage-bjælken er en day-header, men bunden af siden - ikke en dag i en liste.
   Reglen SKAL stå efter .day-header: dens margin-shorthand ovenfor nulstiller ellers
   både top og bund igen (det gjorde den, første gang luften blev sat 9/9-2026).
   Luft under bjælken, fordi "Andre gussteder i nærheden" ligger EFTER den (se
   SectionOutlet i MainLayout) og med 8px stødte op i den som ét element. */
.nav-home-bar {
    margin-top: 2.5rem;
    margin-bottom: 1.75rem;
}

/* Steds-bjælke under dagsoverskriften, kun ved afstands-sortering (se
   Sortering-dropdown) - samme fuld-bredde-mønster som .day-header, men lettere
   markeret (sekundært niveau, ikke en ny dag). */
.venue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1rem -1rem 0.5rem;
    padding: 0.45rem 1rem;
}
.venue-header-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Afstandstallet fremhæves tydeligt: grøn pille med hvidt tal, så det springer i øjnene
   når man har sorteret på afstand. Samme .venue-header-bjælke bruges også i "Gussted
   (alfabetisk)" - dér er der bare ingen afstand at vise. */
.venue-header-distance {
    font-weight: 800;
    font-size: 0.9rem;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

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

.event-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.9rem;
    display: grid;
    gap: 0.6rem;
}

.event-card.sold-out { opacity: 0.65; }

.card-link {
    display: flex;
    gap: 0.9rem;
    color: inherit;
    text-decoration: none;
}

.card-time {
    flex-shrink: 0;
    text-align: center;
    min-width: 3.2rem;
}

.card-time .time {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.card-time .time-end {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* flex: 1 - ellers er kroppen kun så bred som sit indhold, og afstanden i
   overskriften (SPA'en) stod ikke på linje fra kort til kort (Anders 1/10-2026). */
.card-body { flex: 1 1 auto; min-width: 0; }

.card-body h3 {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
}

.card-meta {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.distance { color: var(--accent); font-weight: 600; }
/* SPA-kortet: afstanden højrestillet og tydelig i overskriftslinjen, når positionen
   kendes (Anders 1/10-2026). Samme accent som .distance, så det betyder det samme. */
.card-head { display: flex; align-items: baseline; gap: 0.5rem; }
.card-head h3 { flex: 1 1 auto; min-width: 0; }
.card-afstand { flex: 0 0 auto; color: var(--accent); font-weight: 700; white-space: nowrap; }
.room { color: var(--text-dim); font-weight: 600; }
.card-address { margin-top: 0.1rem; }

.card-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Kort-link til venstre, book-knap skubbes til højre (også når den står alene) */
.map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.map-link:hover { text-decoration: underline; }
/* Gusstedets www lige under kort-linket - samme stil, egen linje. */
.venue-website {
    display: flex;
    width: fit-content;
    /* En lang adresse må ALDRIG gøre siden bredere. Et gussted med en dyb URL
       (amagercentret.dk/oplevelser/sauna-du-et-energi-boost-koeb-billet) skubbede
       hele stedsiden 67 px ud til højre 10/9-2026 - og fejlen ses kun ved at måle,
       for teksten stod pænt, den lå bare uden for skærmen. */
    max-width: 100%;
    overflow-wrap: anywhere;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.venue-website:hover { text-decoration: underline; }
.card-foot .btn-book { margin-left: auto; }

/* NAVNELINJEN og listefotoet side om side: fotoet højrestillet ud for gusstednavnet
   (Anders 2/10-2026). Teksten er den der giver efter (`min-width: 0`), så et langt
   stednavn ombrydes frem for at skubbe fotoet ud over kortets kant. `flex-start`
   stiller fotoets overkant i flugt med navnets - ikke med midten af tekstblokken. */
.card-navn { display: flex; align-items: flex-start; gap: 0.6rem; }
.card-navn-tekst { flex: 1 1 auto; min-width: 0; }
.card-navn .card-listefoto { flex: 0 0 auto; max-width: 40%; }

.card-tags {
    margin: 0.4rem 0 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Pladser/pris og mærkater er nu TO linjer (Anders 2/10-2026) - mærkaterne følger
   tættere på, så de to linjer læses som én blok og ikke som to afsnit. */
.card-maerkater { margin-top: 0.3rem; }

/* ---- KORT B (Anders 14/10-2026) ---------------------------------------------------
   Gusstedets foto øverst med tiden (venstre) og de ledige pladser (højre) som mærker;
   titel, sted, gusmester og mærkater under; pris og Book nederst. Afløser det lille
   listefoto. I kilden står titlen FØR fotoet (SEO-agenten: skærmlæsere og AI-udtræk
   læser "titel → sted → tid"); `order: -1` flytter fotoet op. Fotoets HØJDE står her og
   ikke i billedet, så kortet ikke hopper når fotoet lander. Samme markup i Razor
   (EventCardList) og React (GusKort). */
.event-card { padding: 0; gap: 0; overflow: hidden; border-radius: var(--radius-blok); display: flex; flex-direction: column; }
.event-card .card-link { flex-direction: column; gap: 0; flex: 1 1 auto; }
.card-foto { order: -1; position: relative; height: 11rem; background: var(--bg); }
.card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-foto .card-time {
    position: absolute; left: 0.75rem; bottom: 0.75rem; min-width: 0; text-align: left;
    background: var(--surface); border-radius: 10px; padding: 0.3rem 0.6rem 0.35rem; line-height: 1.1;
    box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}
.card-foto .card-time .time { color: var(--text); font-size: 1.35rem; font-weight: 800; }
.card-foto .card-time .time-end { display: block; font-size: 0.75rem; font-weight: 600; }
.card-foto .card-ledige {
    position: absolute; right: 0.75rem; bottom: 0.75rem;
    background: var(--accent); color: var(--accent-contrast); box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}
.card-foto .card-ledige.spots-few { background: var(--warm); color: #fff; }
.card-foto .card-ledige.spots-none { background: #6f675a; color: #fff; }
.event-card .card-body { padding: 0.8rem 1rem 0; }
/* Uden foto: tid og pladser øverst i teksten, så kortet stadig kan skimmes på tid. */
.card-tidslinje { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.35rem; }
.card-tidslinje .card-time { display: flex; align-items: baseline; gap: 0.15rem; min-width: 0; text-align: left; }
.card-tidslinje .card-time .time { display: inline; }
.event-card .card-foot { padding: 0.65rem 1rem 0.9rem; margin-top: auto; }
.event-card .card-foot .price { font-weight: 700; }

/* GITTERET (Anders 14/10-2026, "Forsiden A"): 1 / 2 / 3 kort pr. række. Forsidens
   app-skal får plads til det; teksttunge sider holder deres 42rem. */
@media (min-width: 40rem) {
    html.spa-side main { max-width: 80rem; }
    .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .event-list > .feed-indslag { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
    .event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.spots {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.spots-ok   { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.spots-few  { background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--warm); }
.spots-none { background: color-mix(in srgb, var(--text-dim) 18%, transparent); color: var(--text-dim); }

.price { font-size: 0.9rem; font-weight: 600; }

/* -- Registrering / alarmer -------------------------------------------------- */

.watch-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
}

.watch-form { display: grid; gap: 0.7rem; margin: 0.6rem 0; }
.watch-form label { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; }

/* En label der INDEHOLDER et flueben eller en radioknap er ikke "etiket over felt":
   feltet og teksten hører på SAMME linje. Uden dette bliver fluebenet strakt ud i
   fuld bredde med teksten under - det skete for "Gentag hver uge" på opret-gus-siden.
   Reglen står ét sted, så et nyt afkrydsningsfelt arver den i stedet for at skulle
   have sin egen undtagelse; consent-check og pref-chip var to kopier af samme lap. */
.watch-form label:has(> input[type="checkbox"]),
.watch-form label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}
.watch-form label:has(> input[type="checkbox"]) > input,
.watch-form label:has(> input[type="radio"]) > input {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}
/* Marketing-tilvalg på login-siden: flueben + tekst på række, almindelig vægt. */
.watch-form label.consent-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    color: var(--text-dim);
}
.consent-check input { margin-top: 0.15rem; flex-shrink: 0; }
/* Alle tekst-lignende felter, uanset type. Listen var før POSITIV (email/text/uden
   type), og et telefonfelt faldt derfor udenfor og fik browserens standard-look midt
   i en ellers ensartet formular. Negativ liste i stedet: styl alt, undtagen det der
   ikke er et tekstfelt - så arver et nyt felt (tel, url, number, dato) udseendet
   automatisk i stedet for at skulle huskes her. */
.watch-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
.watch-form textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    /* 16px: normal, læsbar font i felterne OG forhindrer iOS' auto-zoom ved fokus
       (Safari zoomer ind når et felt har font-size under 16px). */
    font-size: 16px;
    background: var(--bg);
    color: inherit;
}
.watch-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.watch-consent {
    flex-direction: row !important;
    display: flex;
    gap: 0.5rem;
    align-items: start;
    font-weight: 400 !important;
}
.watch-consent input { margin-top: 0.2rem; }
.watch-fine { font-size: 0.8rem; color: var(--text-dim); margin: 0.4rem 0 0; }
/* "og få besked om nye gus" under Følg-knappen: centreret, lidt større end den
   almindelige hjælpetekst, og med ekstra luft over (et linjeskifts afstand fra
   knappen). Højere specificitet end .watch-fine, så størrelse+margin slår igennem. */
.hero-actions .follow-hint { text-align: center; font-size: 1.1rem; margin-top: 1.1rem; }
.watch-ok { color: var(--accent); font-weight: 600; }
.watch-err { color: var(--warm); font-weight: 600; }

.my-watches, .my-consents { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.my-watches li, .my-consents li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
/* Hele rækken er et link (Anders 2/10-2026): "Nye events" fører til forsiden med
   overvågningens filter, "Mine events"/"Ledig plads" til eventets egen side. Teksten
   skal se ud som før - sort, ikke understreget - for det er indhold, ikke et link i en
   sætning; at man kan trykke, mærkes på at HELE rækken tager imod.

   44 px at ramme (ui-design-skillen), og `min-width: 0` så en lang titel brydes frem
   for at skubbe Slet/Fjern ud over kanten. */
.watch-raekke {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text);
    text-decoration: none;
}
.watch-raekke:hover { text-decoration: underline; }

/* "Mine anmeldelser": hver anmeldelse er sin egen blok med en skillelinje under,
   så de tre stjernerækker ikke løber sammen. Handlingerne ligger i én gruppe til
   højre, hvilket er dét der giver "Redigér" den samme lodrette linje i alle rækker. */
.my-ratings li {
    align-items: flex-start;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}
.my-ratings li:last-child { border-bottom: none; padding-bottom: 0; }

.my-rating-main { min-width: 0; flex: 1; }
.my-rating-head { margin: 0 0 0.2rem; }
.my-rating-main .prewrap { margin: 0 0 0.2rem; }

/* Fast bredde: ellers bestemmer "Redigér"/"Slet"s egen tekstlængde kolonnen, og
   den flytter sig når sproget skifter. */
.rating-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-shrink: 0;
}
.rating-actions form { margin: 0; }

/* Slet-bekræftelse der IKKE flytter siden: "Slet" byttes ud med "Sikker? Ja Nej"
   i SAMME linje, i stedet for at folde noget ud under rækken. Begge tilstande er
   én tekstlinje, så rækkens højde er uændret og intet nedenunder hopper. */
.del-confirm > summary {
    list-style: none;
    cursor: pointer;
}
.del-confirm > summary::-webkit-details-marker { display: none; }
.del-confirm[open] > summary { display: none; }

.del-confirm-row {
    display: none;
    align-items: center;
    gap: 0.7rem;
    white-space: nowrap;
}
.del-confirm[open] .del-confirm-row { display: inline-flex; }
.del-confirm-row form { margin: 0; }
.del-confirm-q { font-size: 0.85rem; color: var(--text-dim); }

/* Admin-moderation: handlingerne står under anmeldelsen, ikke ude til højre. */
.admin-rating-actions { justify-content: flex-start; gap: 1.1rem; margin-top: 0.4rem; }

/* Det destruktive valg markeres, så "Ja" ikke ser ud som "Nej". Selektoren skal
   være mere specifik end .link-btn, som står senere i filen og ellers vinder. */
.del-confirm-row .del-yes { color: var(--danger); }

/* Datoen er kontekst, ikke indhold - den skal kunne springes over med øjnene. */
.rating-date {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 400;
}
.rating-list-stars .rating-date { margin-left: 0.5rem; }

.link-btn {
    background: none;
    border: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.btn-danger { background: var(--danger); color: #fff; }

/* To-trins bekræftelse: info + "er du sikker?" vises først når man folder ud */
.confirm-delete summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer;
}
.confirm-delete summary::-webkit-details-marker { display: none; }
.confirm-delete[open] summary { opacity: 0.6; }
/* Neutral som standard: boksen bruges lige så meget til harmløse ting (bedøm,
   opret overvågning, log ud) som til destruktive. Den røde toning er derfor
   opt-in via .confirm-body-danger - ellers advarer vi om at gemme en anmeldelse. */
.confirm-body {
    margin-top: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.confirm-body-danger {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: color-mix(in srgb, var(--danger) 6%, transparent);
}
.confirm-body p { margin: 0 0 0.6rem; }
/* Alle knapper er blå (ingen hvide): sekundære arver basens navy udseende. */
.btn-off { background: var(--accent); color: var(--accent-contrast); }

/* Dæmpet knap til det AFVISENDE valg i en bekræftelse ("Nej"). Alle øvrige
   varianter er fyldte, så et "Nej" i dem ville veje lige så tungt som selve
   handlingen - og ved slet-konto må den sikre udvej ikke skrige lige så højt
   som den røde. */
.btn-quiet {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
}
.btn-quiet:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Ja/Nej side om side, centreret. flex-wrap: på en smal skærm må den lange
   "Ja, slet min konto permanent" hellere bryde til egen linje end blive klemt. */
.confirm-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}
.confirm-actions form { margin: 0; }
/* .btn-center's auto-margin ville skubbe knapperne fra hinanden i rækken */
.confirm-actions .btn-center { margin: 0; }

.offer-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.offer-actions .btn { min-height: 44px; }

/* -- Præferencecenter (mobil-først, store touch-targets) --------------------- */

.prefs-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.prefs section { margin-top: 1.6rem; }
.prefs h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; }

/* Topnavigation mellem indstillingernes 3 undersider - lige under "Indstillinger"-bjælken */
.settings-nav { margin: 0.75rem 0 0; }

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border);
}
/* Teksten flekser og ombryder internt, så switchen ALTID bliver til højre -
   uanset om beskrivelsen fylder én eller flere linjer (uden dette pressede en
   lang beskrivelse switchen ned på egen linje til venstre). */
.toggle-row > div { flex: 1; min-width: 0; }
.toggle-row .btn { min-height: 44px; }

/* Slider-kontakt (til/fra) - ren CSS, submitter formen ved klik */
.switch {
    flex-shrink: 0;
    position: relative;
    width: 56px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-dim) 45%, transparent);
    cursor: pointer;
    transition: background 0.15s ease;
}
.switch.on { background: var(--accent); }
.switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: left 0.15s ease;
}
.switch.on .switch-knob { left: 27px; }
.toggle-state {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
}

/* Multi-select som chips - hele chippen er et touch-target */
/* Luft mellem overvågningslisten og "Opret overvågning" - ellers klistrer knappen
   op ad den sidste række og ligner en handling PÅ den. */
.watch-tilfoej { margin-top: 1.25rem; }

.pref-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Foretrukne gussteder: ét sted pr. linje - kun denne liste, ikke temaer/andre events. */
.pref-chips-venues { flex-direction: column; align-items: stretch; }
.pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}
.pref-chip input { width: 1.15rem; height: 1.15rem; }

/* Chips inde i en watch-form (overvågnings-byggeren). Uden dette vinder
   ".watch-form label { display: grid; font-weight: 600 }", og hver chip bliver til en
   høj boks med afkrydsningsfeltet på sin egen linje over et fedt stednavn. Chippen er
   ikke et formularfelt med etiket ovenover - den ER valget. */
.watch-form label.pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 400;
}
.watch-form label.pref-chip:has(input:checked) { font-weight: 600; }
.pref-chip:has(input:checked) {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: var(--accent);
    font-weight: 600;
}

/* Interesser: handlingsrække (Gem interesser + send-mail-knap) og navne-boks */
.pref-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}
.watch-name-box {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.6rem;
    max-width: 28rem;
}
/* display:grid ovenfor slår ellers browserens [hidden]-skjul ihjel -> skjul eksplicit */
.watch-name-box[hidden] { display: none; }
.watch-name-box label { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; }
.watch-name-box input[type="text"] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--bg);
    color: inherit;
}
.watch-name-box .btn { justify-self: start; }

/* Deaktiveret gem-knap (ingen ændringer at gemme) */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Mine overvågninger: tre adskilte områder */
.watch-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.9rem 1rem;
    margin-top: 0.7rem;
}
.watch-group > h3 {
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.watch-group p { margin: 0; }
.watch-group.is-soon {
    border-style: dashed;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    color: var(--text-dim);
}
.cs-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

/* Kategori-/eksklusions-tags på kort og detaljeside */

.tag-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.tag-cat {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border: 1px dashed var(--accent);
}

.tag-excl {
    background: color-mix(in srgb, var(--text-dim) 14%, transparent);
    color: var(--text-dim);
    border: 1px dashed var(--text-dim);
}

.empty {
    text-align: center;
    color: var(--text-dim);
    padding: 3rem 1rem;
}

.empty-text { margin: 0; }

/* "Henter flere gus længere ude …" mens den udvidede baggrunds-hentning kører. */
.udvidet-status {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* Fald-tilbage-knapper i tom-tilstand: samme pille-idiom som .chip,
   outline der fyldes med accent ved hover (som en aktiv chip). */
.empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.empty-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* -- Detaljeside --------------------------------------------------------------- */

.event-details {
    display: grid;
    gap: 1rem;
}

/* Foto-strip over beskrivelsen på et gussteds side: op til 3 fotos med
   kildehenvisning lagt nederst på billedet (tekst, uden link). */
.venue-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.venue-photo {
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
}
.venue-photo img {
    display: block;
    width: 100%;
    height: auto;               /* width/height-attributterne styrer intet - aspect-ratio gør */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Stedsiden: hvert foto i fuld bredde, naturlig højde (ingen beskæring). */
/* "Saunagus hos os" - en overskrift INDE i beskrivelses-sektionen, så de to tekster
   hænger sammen som ét afsnit om stedet frem for at ligne to løsrevne bokse. */
.venue-gus-overskrift { margin: 1.5rem 0 0.4rem; font-size: 1.1rem; }

/* Landingssider (by, kommune, tema). Knappen er sidens formål og står højt. */
/* Knappen tæt på overskriften (Anders 16/9-2026). Afstanden var 57 px sammensat af
   tre ting: h1'ens bundmargen, knap-rækkens topmargen og .btn-big's egne 8 px. Da
   undertekst-linjen forsvandt, stod de tre tilbage som et hul. Knappens egne 8 px
   får lov at være luften. */
.landing h1 { margin-bottom: 0.5rem; }
.landing-cta { margin: 0 0 1.5rem; }
/* Den lette af to knapper. Egen klasse frem for .btn-outline: .btn står SENERE i
   filen og ville vinde med sin fyldte baggrund - to ens knapper ved siden af
   hinanden siger ikke hvilken der er hovedvejen. */
.btn-sekundaer {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-sekundaer:hover { border-color: var(--accent); }
.landing-cta .btn-big + .btn-big { margin-top: 0; }
.landing-tekst p { line-height: 1.6; margin: 0 0 0.9rem; }
/* Den valgte gusmester under forsidens chip-række: navnet som pille med et kryds, samme
   form som de fjernbare chips andre steder. Krydset er 44px bredt at ramme. */
.gusmester-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-size: 0.9rem; }
.gusmester-filter-label { color: var(--text-dim); }
.gusmester-chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); }
.gusmester-chip a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.gusmester-chip-navn { padding: 0 0.25rem 0 0.9rem; font-weight: 600; }
.gusmester-chip-x { min-width: 44px; justify-content: center; font-size: 1.2rem; line-height: 1; }

/* Svarblokken: sidens svar i tal, lige under overskriften. Lidt større end brødteksten,
   så den læses FØR knappen - men stadig tekst, ikke en boks. */
.landing-svar { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.1rem; }
/* Fotokort under knappen på en by-/kommuneside: ét pr. gussted teksten nævner.
   Genbruger .venue-photo (samme ramme, samme 4:3 og samme kildehenvisning som
   gusstedernes egne sider) - her med stedets navn under fotoet som undertekst. */
.landing-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0.25rem 0 1.1rem; }
@media (min-width: 33rem) { .landing-fotos { grid-template-columns: repeat(3, 1fr); } }
.landing-foto { display: grid; gap: 0.3rem; text-decoration: none; color: var(--text); }
.landing-foto-navn { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.landing-foto:hover .landing-foto-navn { text-decoration: underline; }

.landing-steder, .landing-naboer { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.55rem; }
.landing-steder a, .landing-naboer a { font-weight: 600; }
/* Gusstederne på en by-/kommuneside står som blokke: navn-linje, Mærkaterne nedenunder, og
   mere luft MELLEM stederne end mellem navn og mærkater - så mærkaterne læses som stedets,
   ikke som det næstes (Anders 24/9-2026). */
.landing-steder { gap: 1rem; }
.landing-gus h2 { margin: 0.5rem 0 0; }
.landing-gus .day-header { margin-left: 0; margin-right: 0; }

/* BY OG TEMA A (Anders 14/10-2026): siden bruger bredden, men TEKSTEN bliver i
   læsebredde (~42rem, cirka 70 tegn) - lange linjer er svære at læse. Fotokortene og
   gussteds-listen står i gitter: 2 / 3 / 4 fotokort og 1 / 2 kolonner steder. */
@media (min-width: 40rem) {
    main:has(> article.landing), main:has(article.landing) { max-width: 72rem; }
    article.landing > h1, .landing-svar, .landing-cta, .landing-tekst { max-width: 42rem; }
    .landing-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    .landing-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .landing-steder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
    .landing-naboer { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
}
/* Det indlejrede kort under gussted-listen (Anders 26/9-2026). Højden er 80 % af skærmen
   (Anders 26/9-2026; var 15/21 rem): kortet skal kunne bære at man zoomer ind i det, og
   et kort på 240 px er et frimærke på en telefon. Den må IKKE være en procent af
   forælderen - Leaflet skal kunne måle en konkret højde, ellers står containeren 0 px høj
   og ternene udebliver. vh først, dvh bagefter: dvh trækker iOS' adresselinje fra, og de
   browsere der ikke kender enheden, falder tilbage på vh. */
.landing-kort {
    height: 80vh;
    height: 80dvh;
    margin: 1rem 0 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.landing-sted-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }

/* Oversigterne (/saunagus/byer og /saunagus/temaer). Byerne er en tæt liste - man
   skanner efter sit eget bynavn. Temaerne har en linje forklaring under hver, så
   valget kan træffes uden at åbne tolv sider. */
.landing-oversigt { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.5rem; }
.landing-oversigt a { font-weight: 600; }
.landing-temaer { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 1.1rem; }
.landing-temaer a { font-weight: 600; font-size: 1.05rem; }
.landing-tema-kort { margin: 0.2rem 0 0; line-height: 1.5; color: var(--text-dim); }

/* Fotokarrusellen under teaser-linjen (afløste de to grønne bannere 16/9-2026,
   forslag A). Ren CSS: scroll-snap gør swipet, og hvert kort er et link. Teksten
   ligger I fotoet på en mørk gradient - derfor ingen knap: fotoet er budskabet. */
.forside-kar-hylster { display: grid; gap: 0.4rem; margin: 0 0 0.75rem; }
.forside-kar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.forside-kar::-webkit-scrollbar { display: none; }
.forside-kort {
    position: relative;
    flex: 0 0 100%;                /* ét foto ad gangen, fuld bredde */
    scroll-snap-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--accent-contrast);
}
.forside-kort img {
    display: block;
    width: 100%;
    /* height:auto er IKKE til pynt: <img> har width/height som attributter (de
       reserverer pladsen og undgår at siden hopper), og en fast height vinder over
       aspect-ratio - et forhold beregnes kun når den ene dimension er auto. Uden
       linjen her blev kortet 386 x 800 px i stedet for 386 x 241. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
/* Gradienten er det der gør teksten læsbar OVEN PÅ et foto vi ikke selv styrer
   lysstyrken i. Den skal være mørk nok i bunden til hvid tekst - også på et foto
   med en lys himmel eller sand nederst. */
.forside-kort-tekst {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 0.1rem;
    padding: 2.6rem 0.85rem 0.75rem;
    background: linear-gradient(to top, rgba(18, 16, 11, 0.88) 18%, rgba(18, 16, 11, 0));
}
.forside-kort-tekst strong { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.forside-kort-tekst em { font-style: normal; font-size: 0.85rem; opacity: 0.85; }
.forside-kort:hover .forside-kort-tekst strong { text-decoration: underline; }
/* Hele kortet er linket - også fotoet. Uden en synlig reaktion på TRYK føles et foto
   dødt på en telefon, hvor der hverken er markør eller hover (Anders 16/9-2026).
   Standard-tap-highlight slås fra til fordel for en reaktion vi selv styrer. */
.forside-kort { -webkit-tap-highlight-color: transparent; }
.forside-kort:active { transform: scale(0.995); }
.forside-kort:active img { filter: brightness(0.85); }
.forside-kort:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .forside-kort:active { transform: none; } }

.forside-prikker { display: flex; gap: 0.35rem; justify-content: center; }
.forside-prikker button {
    width: 0.45rem;
    height: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
}
.forside-prikker button[aria-current="true"] {
    width: 1.1rem;
    border-radius: 0.25rem;
    background: var(--accent);
}

/* "Vælg en dag, tema eller lokation for at se flere gus": forsiden viser kun den
   nærmeste uge, og uden linjen her ser listen ud til at slutte dér. */
.horisont-hint {
    margin: 1.25rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-dim);
}

/* Gusmesterens portræt: gusstedets eget billede af personen, over bioen.
   Bredden står i HTML'en (regnet af fotoets format mod en fast højde), så to
   gusmester-sider fylder det samme lodret uanset om billedet står op eller ligger
   ned - og `height: auto` lader browseren beholde formatet på en smal skærm. */
.instruktor-portraet { margin: 0 0 1rem; }
.instruktor-portraet img {
    max-width: min(100%, 20rem);
    height: auto;
    border-radius: var(--radius, 10px);
    display: block;
}
.instruktor-portraet .foto-kilde {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin: 0.3rem 0 0;
}
.instruktor-portraet .foto-kilde a { color: inherit; }

/* Gusmesterens bio: teksten er gusstedets egen, og kilden står lille under. */
.instruktor-bio p.prewrap { line-height: 1.55; margin: 0 0 0.35rem; }
/* Gusmesterens EGNE ord (13/10-2026): står før gusstedernes bio'er. */
.instruktor-egen p.prewrap { line-height: 1.55; margin: 0 0 0.5rem; }
.instruktor-fakta { margin: 0 0 0.5rem; color: var(--text-dim); font-size: 0.92rem; }
.instruktor-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.25rem 0 0.75rem; }
.instruktor-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.bio-kilde { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1rem; }

.venue-photos-full { display: grid; gap: 0.75rem; }
.venue-photo-full {
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
}
.venue-photo-full img { display: block; width: 100%; height: auto; }

/* Event-siden: de 3 små gussteds-fotos som en række miniaturer (fuld visning på /sted). */
.venue-photos-mini { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.venue-photos-mini img {
    flex: 1 1 0;
    width: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--border);
}
.venue-desc-mini { color: var(--text-dim); margin-top: 0.5rem; }

.photo-credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.4rem 0.2rem;
    font-size: 0.66rem;
    line-height: 1.15;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
}
@media (max-width: 480px) {
    .venue-photos { gap: 0.3rem; }
    .photo-credit { font-size: 0.58rem; padding: 0.5rem 0.3rem 0.15rem; }
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.back-link:hover { color: var(--accent); }

/* Kort: fælles udseende for hero og indholds-sektioner */
.event-hero,
.event-section,
.rating-section,
.event-details .watch-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin: 0;
}

/* Alarm- og følg-knapperne (Sæt alarm / Følg event / Login / Afmeld / Følg ikke
   længere) skal fremstå som ét ensartet, centreret sæt - .btn er inline-flex, så
   den skal selv være en (blok-niveau) flex-boks for at width:fit-content +
   margin:auto reelt centrerer den vandret i .watch-box. */
.event-details .watch-box .btn,
.event-hero .hero-actions .btn {
    display: flex;
    width: fit-content;
    margin: 0.6rem auto 0;
}
/* "Se alle gus" som centreret tekst-link under hero-knapperne (ikke en knap). */
.event-hero .hero-actions .hero-allgus { text-align: center; margin: 0.75rem 0 0; }

/* Hero'en trækkes lidt frem med en accent-kant i toppen */
/* Ingen accent-kant i toppen: hero'en skal se ud præcis som Sted-/Gusmester-
   boksene nedenunder, så eventsiden fremstår som ét ensartet sæt kort. */
.event-hero {
    display: grid;
    gap: 0.6rem;
}

.event-hero h1 {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.2;
}

.event-venue {
    margin: 0;
    color: var(--text-dim);
    font-weight: 600;
}

.event-hero .card-tags { margin: 0; }

/* ---- EVENT B (Anders 14/10-2026) --------------------------------------------------
   Stedets hovedbillede i fuld bredde øverst; titel, sted og tid ligger oven på fotoet på
   en mørk gradient (kontrast uanset foto). I KILDEN står titlen før fotoet - de deler bare
   samme gitter-celle. Fotoets højde står her, så siden ikke hopper. */
.event-hero.har-foto { padding: 0; overflow: hidden; gap: 0.6rem; }
.event-hero.har-foto > :not(.event-foto):not(.event-hero-tekst) { margin-left: 1.25rem; margin-right: 1.25rem; }
.event-hero.har-foto > :last-child { margin-bottom: 1.25rem; }
.event-hero.har-foto .event-foto, .event-hero.har-foto .event-hero-tekst { grid-row: 1; grid-column: 1; }
.event-foto { height: 16rem; background: var(--bg); }
.event-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-hero.har-foto .event-hero-tekst {
    position: relative; z-index: 1; align-self: end; display: grid; gap: 0.3rem;
    padding: 3rem 1.25rem 1rem; color: #fff;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 68%));
}
.event-hero.har-foto .event-hero-tekst h1,
.event-hero.har-foto .event-hero-tekst .event-when { color: #fff; }
.event-hero.har-foto .event-hero-tekst .event-venue { color: rgb(255 255 255 / 88%); }
/* Klokken beholder sine farver (sat = skovgrøn) - på fotoet står den på en lys cirkel. */
.event-hero.har-foto .event-hero-tekst .klokke,
.event-hero.har-foto .event-hero-tekst .hjerte { background: rgb(255 253 248 / 92%); border-radius: 50%; }
.event-hero-tekst { display: grid; gap: 0.6rem; }

/* ---- STED B (Anders 14/10-2026) ---------------------------------------------------
   Samme hero som Event B (.event-hero.har-foto). De øvrige fotos som miniaturer der åbner
   stort i en CSS-lysboks (:target); "Næste saunagus" i en spalte der står først på
   telefonen og fast i højre side på desktop. */
.event-foto { margin: 0; }
.sted-miniaturer { display: grid; gap: 0.4rem; }
.sted-miniaturer-raekke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.sted-miniature { display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg); aspect-ratio: 4 / 3; }
.sted-miniature img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sted-miniature:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.sted-kilder { margin: 0; }
.lysboks { display: none; }
.lysboks:target {
    display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 60;
    padding: 3.5rem 1rem 1rem; background: rgb(0 0 0 / 88%);
}
.lysboks figure { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: 0.4rem; }
.lysboks img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border-radius: var(--radius); }
.lysboks .photo-credit, .lysboks .photo-credit a { color: rgb(255 255 255 / 85%); }
.lysboks-luk {
    position: absolute; top: 0.75rem; right: 0.75rem; width: 44px; height: 44px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%; background: rgb(255 255 255 / 15%); color: #fff; font-size: 1.8rem; text-decoration: none;
}
.sted-naeste { display: grid; gap: 0.6rem; }
.sted-naeste h2 { margin: 0; }
.sted-naeste-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sted-naeste-liste a {
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--bg);
}
.sted-naeste-liste a:hover { border-color: var(--accent); }
.sted-naeste-tid { grid-row: 1 / span 2; font-weight: 700; color: var(--accent); white-space: nowrap; }
.sted-naeste-titel { font-weight: 600; }
.sted-naeste-meta { color: var(--text-dim); font-size: 0.88rem; }
.sted-naeste .btn-big { margin: 0.2rem 0 0; width: 100%; justify-content: center; }
@media (min-width: 64rem) {
    .event-spalter > .sted-side { order: 2; position: sticky; top: 1rem; }
    .event-spalter > .sted-side + .event-spalte-hoved { order: 1; }
    .sted-miniaturer-raekke { grid-template-columns: repeat(4, minmax(0, 10rem)); }
}

/* ---- GUSMESTER B (Anders 14/10-2026) ---------------------------------------------
   Banner med gusstedets foto, et rundt portræt der stikker op over kanten, navnet under.
   I kilden står navnet først; `order` lægger banner og portræt øverst. Uden portræt står
   initialerne i cirklen, uden banner står cirklen øverst i kortet. */
.gm-hero.gm-har-banner { padding-top: 0; overflow: hidden; }
.gm-hero > .gm-banner { order: -2; margin: 0 -1.25rem; height: 11rem; background: var(--bg); }
.gm-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-hero > .gm-rund-raekke { order: -1; display: flex; align-items: flex-end; gap: 0.75rem; }
.gm-har-banner > .gm-rund-raekke { margin-top: -3.4rem; }
.gm-rund {
    flex: 0 0 auto; width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--surface); background: var(--accent); box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.gm-initialer {
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-contrast); font-weight: 800; font-size: 2rem; letter-spacing: 0.04em;
}
.gm-kilde { font-size: 0.78rem; padding-bottom: 0.3rem; }
@media (min-width: 64rem) {
    .gm-hero > .gm-banner { height: 15rem; }
    .gm-rund { width: 8rem; height: 8rem; }
    .gm-har-banner > .gm-rund-raekke { margin-top: -4.4rem; }
}

/* ---- VIDEN C (Anders 14/10-2026): artiklen i læsebredde, "Prøv det selv" til højre
   på desktop (under artiklen på telefon). Boksen står efter artiklen i kilden. */
.viden-layout { display: grid; gap: 1rem; }
.viden-proev { display: grid; gap: 0.6rem; align-content: start; }
.viden-proev h2 { margin: 0; }
.viden-proev-temaer { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.viden-proev-temaer a { text-decoration: none; }
@media (min-width: 64rem) {
    main:has(.viden-layout) { max-width: 72rem; }
    .viden-layout { grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
    .viden-proev { position: sticky; top: 1rem; }
}

/* Spalterne: én søjle på telefon og tablet, to på desktop (beskrivelse og sted | gusmester). */
.event-spalter, .event-spalte-hoved, .event-spalte-side { display: grid; gap: 1rem; align-content: start; }

/* BOOK-BJÆLKEN: sidens ene handlings-knap. Fast i bunden på telefon og tablet - med pris
   og pladser - og i hero'en på desktop. Siden får luft i bunden, så bjælken ikke dækker
   sidefoden. Uden en knap (intet bookinglink) står den ikke fast. */
.book-bjaelke { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.book-bjaelke .btn, .book-bjaelke form, .book-bjaelke .watch-form { margin: 0; }
.book-bjaelke-info { font-size: 0.95rem; white-space: nowrap; }
.gm-spalter > .rating-section { margin-top: 0; }
.landing-gus .landing-cta { margin-top: 1rem; }
@media (max-width: 63.99rem) {
    .book-bjaelke:has(.btn) {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0 !important;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(0 0 0 / 12%);
        flex-wrap: nowrap;
    }
    .book-bjaelke:has(.btn) .btn-big { min-height: 44px; padding: 0 1.25rem; font-size: 1rem; }
    body:has(.book-bjaelke .btn) { padding-bottom: 5rem; }
}
@media (min-width: 64rem) {
    main:has(.event-details) { max-width: 72rem; }
    .event-foto { height: 22rem; }
    .event-spalter { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .book-bjaelke-info { display: none; }
    .book-bjaelke { justify-content: flex-start; }
    .book-bjaelke .btn-big { width: auto; padding-left: 2rem; padding-right: 2rem; }
}

.event-when {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

/* Gus-sidens tags: egen linje under pladser/pris, samme luft mellem mærkaterne. */
.event-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }

.event-facts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0;
}

.event-hero .btn-big { align-self: start; margin-top: 0.3rem; }

.event-section h2 {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}
.event-section p { margin: 0.35rem 0; }
.event-section p:first-of-type { margin-top: 0; }
.event-section p:last-child { margin-bottom: 0; }

/* Foldbar sektion inde i et kort (fx "Gusmestre" på stedsiden). Overskriften er
   selve klik-fladen, så hele linjen folder ud - samme <details>-mønster som
   filtrene på forsiden, blot med kortets egen h2-stil. */
.fold-section > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
}
.fold-section > summary::-webkit-details-marker { display: none; }
.fold-section > summary h2 { margin: 0; }
.fold-section[open] > summary { margin-bottom: 0.5rem; }
.fold-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}
/* Pil der roterer når sektionen er foldet ud - eneste visuelle hint om at den kan klikkes */
.fold-section > summary::after {
    content: "›";
    margin-left: auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-dim);
    transition: transform 0.2s ease;
}
.fold-section[open] > summary::after { transform: rotate(90deg); }

.cancelled-banner {
    background: color-mix(in srgb, var(--warm) 15%, transparent);
    color: var(--warm);
    padding: 0.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    margin: 0;
}

.prewrap { white-space: pre-line; }

/* :not(.btn): link-knapper (fx "Følg [navn]") skal beholde knappens egen tekstfarve —
   ellers bliver de navy-på-navy og ser tomme ud. Samme fælde ramte landingssidens kort
   26/9-2026: det står inde i en .event-section, så både kortets markører og popup'ens
   grønne knap blev grøn tekst på grøn flade og så helt tomme ud. Begge dele er nu
   elementer uden eget <a> (markøren er en <span>, popup'en har kun den lyse knap) - men
   sætter du en knap med EGEN baggrund ind i en .event-section, så skriv den på listen her,
   ellers ser den tom ud. */
.event-section a:not(.btn),
.event-hero a:not(.btn) { color: var(--accent); }

/* -- Admin-statistik: simpel tabel ---------------------------------------------- */
.admin-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 32rem;
    font-size: 0.9rem;
}
.admin-table th, .admin-table td {
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.admin-table th { color: var(--text-dim); font-weight: 600; }
.admin-stats h3 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }

/* Admin-sitemap (/indstillinger/admin): en lille træstruktur - Admin som rod,
   de enkelte admin-sider som grene med en kort beskrivelse hver. */
.admin-tree-root {
    font-weight: 700;
    margin: 1.25rem 0 0;
}
.admin-tree {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0 0 0 1.25rem;
    border-left: 2px solid var(--border);
}
.admin-tree li {
    position: relative;
    padding: 0 0 1.1rem 1rem;
}
.admin-tree li:last-child { padding-bottom: 0; }
.admin-tree li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.85rem;
    width: 1rem;
    height: 2px;
    background: var(--border);
}
.admin-tree a {
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    font-size: 1.05rem;
}
.admin-tree a:hover { text-decoration: underline; }
.admin-tree p { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.88rem; }

/* Tilbage-link øverst på hver admin-underside, til admin-sitemappet */
.admin-crumb {
    display: inline-block;
    margin: 0 0 0.9rem;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.admin-crumb:hover { color: var(--accent); }

/* Drift-overblik (/indstillinger/drift/overblik): nøgletal i små kort */
.drift-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.drift-stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem;
    background: var(--surface);
}
.drift-stat-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}
.drift-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.drift-stat .watch-fine { margin-top: 0.4rem; }

.drift-stat-link {
    display: inline-block;
    text-decoration: none;
    color: var(--accent);
}
.drift-stat-link:hover { text-decoration: underline; }

/* Simpelt CSS-søjlediagram (ledige pladser pr. time) - ingen JS/chart-bibliotek */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    height: 8rem;
    padding: 0 0 0.25rem;
    margin: 0.75rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.bar-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 1.8rem;
    height: 100%;
    min-width: 1.8rem;
}
.bar-chart-value {
    font-size: 0.65rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}
/* To søjler pr. time (pladser på holdene vs. ledige) side om side i samme kolonne */
.bar-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.bar-chart-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.bar-chart-bar-capacity { background: var(--border); }
.bar-chart-bar-available { background: var(--accent); }
.bar-chart-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.bar-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin: 0.5rem 0 0;
}
.bar-chart-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.bar-chart-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    display: inline-block;
}
.bar-chart-swatch-capacity { background: var(--border); }
.bar-chart-swatch-available { background: var(--accent); }

/* Filter-/periodeformularer (dato, sted, tema) på tværs af admin-statistikken -
   samme touch-venlige felter som .watch-form, men vandret og ombrydende i stedet
   for stablet, så flere filtre kan stå på linje uden at spilde lodret plads. */
.admin-filter-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}
.admin-table-wrap { overflow-x: auto; }

/* -- Ratings (event-siden, "Mine anmeldelser", admin) --------------------------- */
.rating-section { margin-top: 1rem; }
.rating-section > h3 { margin: 0 0 0.6rem; }
.rating-avg { font-size: 1.1rem; margin: 0 0 0.6rem; }
.rating-avg strong { margin: 0 0.15rem; }

/* Stjernerne i en SAMLET vurdering (anmeldelses-sektionen + event-siden). Kun
   selve stjernerne farves - tallet og antallet skal blive ved med at læse som tekst. */
.stars-avg { color: var(--star); letter-spacing: 0.05em; }

/* Vandret linje mellem overskrift/gennemsnit og de enkelte anmeldelser. Ligger på
   listen (ikke på overskriften), så linjen kun optræder når der FINDES anmeldelser. */
.rating-list { list-style: none; margin: 0 0 0.7rem; padding: 0.9rem 0 0; display: grid; gap: 0.8rem;
               border-top: 1px solid var(--border); }
.rating-list li { padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.rating-list li:last-child { border-bottom: none; padding-bottom: 0; }
.rating-list-stars { margin: 0 0 0.15rem; color: var(--accent); letter-spacing: 0.05em; }
.rating-list-stars strong { color: var(--text); font-weight: 600; margin-left: 0.3rem; }

/* Centreret enkeltknap (Bedøm/Redigér, Opret overvågning …). width:fit-content +
   auto-margin, fordi .btn er inline-flex og derfor ikke selv kan centreres af
   text-align. Bruges også på <summary>-knapper, der ellers arver blok-bredde. */
.btn-center {
    display: flex;
    width: fit-content;
    margin: 0.9rem auto 0;
}
.confirm-delete:has(> .btn-center) { text-align: center; }

/* "Ingen anmeldelser endnu": står alene mellem overskrift og knap, så den skal
   læses som almindelig tekst - ikke som nedtonet fodnote. */
.rating-empty {
    text-align: center;
    color: var(--text);
    margin: 1.1rem 0;
}

/* Stjernevælger: rigtige radioknapper (virker uden JS), store touch-targets (min 44px),
   visuelt vendt om (row-reverse) så CSS-sti-broderen kan highlighte "denne og alle
   foregående" via ~ på hover/checked uden JS. */
.star-picker { border: none; padding: 0; margin: 0 0 0.9rem; }
.star-picker legend { font-size: 0.8rem; color: var(--text-dim); padding: 0; }
.star-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.1rem; }
.star-picker .star { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.star-picker .star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-picker .star span { font-size: 2.1rem; line-height: 1; color: var(--border); padding: 0.4rem; min-width: 44px; text-align: center; }
.star-picker .star input:checked ~ span,
.star-picker .star input:focus-visible ~ span { color: #e0a300; }
.star-picker .star:hover span,
.star-picker .star:hover ~ .star span { color: #e0a300; }

/* -- Blazor-fejlvisning (fra templaten) ----------------------------------------- */

h1:focus { outline: none; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: var(--radius);
}

.blazor-error-boundary::after { content: "Der opstod en fejl."; }

/* ============ Top-panelerne: dato, sortering og tema (Anders 27/9-2026) ==========
   De tre var dropdowns der lagde sig som en hvid boks under triggeren. Nu åbner de
   som lokationsmenuen: den grønne flade der glider ind fra højre, med titel og Luk
   i toppen. Selve mekanikken er stadig <details name="topdd"> - den giver gratis
   indbyrdes eksklusivitet og virker uden JavaScript - men indholdet er flyttet ud i
   et fastgjort panel og farvet til den grønne bund.

   Ind-animationen er en @keyframes og ikke en transition: en lukket <details> tegner
   slet ikke sit indhold, så der er ingen "før"-tilstand at animere fra. Ud-animationen
   køres af lukTopdd() i App.razor, som venter på den, før open fjernes. */
.cal-pop.topdd-panel,
.radius-pop.topdd-panel {
    position: fixed;
    top: var(--header-h, 3.25rem);
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--nav-drawer-bg);
    color: var(--accent-contrast);
    z-index: 30;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: topdd-ind 250ms ease;
}
@media (min-width: 768px) {
    .cal-pop.topdd-panel,
    .radius-pop.topdd-panel {
        left: auto;
        width: min(50vw, 540px);
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.28);
    }
}
@keyframes topdd-ind {
    from { transform: translateX(100%); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}
.topdd-panel.topdd-lukker { animation: topdd-ud 200ms ease forwards; }
@keyframes topdd-ud {
    from { transform: none; opacity: 1; }
    to { transform: translateX(100%); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .topdd-panel, .topdd-panel.topdd-lukker { animation: none; }
}
/* Sorterings-panelet var et grid med auto-fill-kolonner. I en boks på 3 linjer var det
   rigtigt; i et panel der fylder skærmen, strakte rækkerne sig til 260 px hver, så fem
   valg fyldte en hel telefon. I panelet er det derfor en lodret liste - ét valg pr. linje,
   venstrestillet som byerne i lokationsmenuen. */
.radius-pop.topdd-panel { display: block; }
.radius-pop.topdd-panel > .radius-opt {
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0.5rem 0.9rem;
    margin-bottom: 2px;
}
/* Den grønne OK-knap forsvandt i den grønne flade - i panelet er den hvid med grøn tekst,
   som de valgte chips. */
.topdd-panel .btn-book {
    background: var(--accent-contrast);
    color: var(--accent);
    border-color: var(--accent-contrast);
}

/* Indholdet stod på hvid flade før og skal nu kunne læses på den grønne. Farverne
   følger lokationsmenuens: hvid tekst, og det VALGTE vendes om (hvid flade, grøn
   tekst), så det er lige så tydeligt som en fyldt chip på en lys side. */
.topdd-panel .calendar { background: none; border: 0; padding: 0; }
.topdd-panel .cal-head strong,
.topdd-panel .cal-day { color: var(--accent-contrast); }
/* Måneds-knapperne: piller med månedens navn ("‹ Sep", "Nov ›"), samme udtryk som Luk.
   Som <button> arvede de browserens egen grå/hvide flade og blev to tunge cirkler. */
.topdd-panel .cal-nav {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--accent-contrast);
    cursor: pointer;
}
.topdd-panel .cal-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
/* Slået fra = første eller sidste måned vi har gus i. Den bliver stående, så man kan se
   at man er ved kanten - i stedet for at knappen forsvinder og hovedet hopper. */
.topdd-panel .cal-nav:disabled { opacity: 0.35; cursor: default; }
.topdd-panel .cal-dow { color: rgba(255, 255, 255, 0.7); }
.topdd-panel .cal-off { color: rgba(255, 255, 255, 0.45); }
.topdd-panel a.cal-day:hover,
.topdd-panel .radius-opt:hover { background: rgba(255, 255, 255, 0.14); }
.topdd-panel .cal-day.cal-sel {
    background: var(--accent-contrast);
    color: var(--accent);
}
.topdd-panel .cal-day.cal-today { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65); }
.topdd-panel .cal-day.cal-today.cal-sel { box-shadow: inset 0 0 0 2px var(--accent); }
.topdd-panel .cal-status {
    background: var(--nav-drawer-bg);
    color: rgba(255, 255, 255, 0.7);
}
.topdd-panel .cal-status-btn {
    background: var(--accent-contrast);
    color: var(--accent) !important;
}
.topdd-panel .periode-row { border-top-color: rgba(255, 255, 255, 0.25); }
.topdd-panel .radius-opt { color: var(--accent-contrast); }
.topdd-panel .radius-sel {
    background: var(--accent-contrast);
    color: var(--accent);
}
.topdd-panel .vchip {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--accent-contrast);
}
.topdd-panel .vchip-active {
    background: var(--accent-contrast);
    border-color: var(--accent-contrast);
    color: var(--accent);
}
.topdd-panel .tema-group-head { color: rgba(255, 255, 255, 0.75); }
.topdd-panel .tema-ledige-row { border-top-color: rgba(255, 255, 255, 0.25); }
/* Tema-listen havde sit eget loft (55vh) fra dengang den lå i en boks - i et panel
   der allerede fylder skærmen, ville det bare give to rullefelter i hinanden. */
.topdd-panel .venue-list { max-height: none; overflow: visible; }

/* ============ Sted-panel: fuldskærms-vælger fra højre (📍-chippen) ============
   Samme farve som hovedmenuen (--nav-drawer-bg). Checkbox-hack som nav-drawer'en;
   ved ?vaelger=… server-renderes checkbox'en som checked, så panelet står åbent
   på tværs af enhanced navigation (fx mens man vælger flere steder i listen). */
.sted-panel-toggle { display: none; }
.sted-panel {
    position: fixed;
    /* Topbaren skal forblive synlig: panelet starter under headeren, i samme
       højde som hovedmenuen (nav-drawer) - og fylder resten af skærmen. */
    top: var(--header-h, 3.25rem);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nav-drawer-bg);
    color: var(--accent-contrast);
    z-index: 30;                    /* som nav-drawer: under headeren, over indhold */
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);    /* ind fra HØJRE */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
}
.sted-panel-toggle:checked ~ .sted-panel { transform: translateX(0); visibility: visible; }
/* Desktop/tablet: panelet er et side-panel fra højre (max ~50% / 540px), ikke fuld
   skærm. På mobil (< 768px) fylder det stadig 100%, hvor det giver mening. */
@media (min-width: 768px) {
    .sted-panel {
        left: auto;
        width: min(50vw, 540px);
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.28);
    }
}
/* Lås body-scroll mens panelet er åbent (samme behov som nav-menuen). */
body:has(.sted-panel-toggle:checked) { overflow: hidden; }

.sted-panel-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    min-height: 44px;
}
.sted-panel-title { font-weight: 700; font-size: 1.1rem; flex: 1; text-align: left; }
/* "Tilbage" og "Luk" som pille-KNAPPER (samme udtryk som byknapperne). */
.sted-panel-btn {
    color: var(--accent-contrast);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    text-decoration: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.sted-panel-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Klient-side visnings-skift: panelet renderer alle tre visninger (menu/liste/kort);
   data-view afgør hvilken der vises. Vi SKJULER de inaktive (frem for at sætte display
   på den aktive), så hver visnings naturlige layout bevares. */
.sted-panel[data-view="menu"] .panel-view-liste,
.sted-panel[data-view="menu"] .panel-view-kort,
.sted-panel[data-view="liste"] .panel-view-menu,
.sted-panel[data-view="liste"] .panel-view-kort,
.sted-panel[data-view="kort"] .panel-view-menu,
.sted-panel[data-view="kort"] .panel-view-liste { display: none; }
/* Den aktive liste-/kort-visning fylder panelets højde, så listens og kortets flex:1
   virker (de er nu wrappet i .panel-view-*, ikke længere direkte flex-børn af panelet).
   Uden dette får kortet en forkert/kollapset højde -> Leaflet måler galt -> forskudte tern. */
.panel-view { flex: 1; min-height: 0; }
.sted-panel[data-view="liste"] .panel-view-liste,
.sted-panel[data-view="kort"] .panel-view-kort { display: flex; flex-direction: column; }
/* Header-knapper der kun hører til én visning (min-position=kort, Ryd=liste). */
.sted-panel[data-view="menu"] .panel-only-kort,
.sted-panel[data-view="menu"] .panel-only-liste,
.sted-panel[data-view="liste"] .panel-only-kort,
.sted-panel[data-view="kort"] .panel-only-liste { display: none; }
/* Titlen står til venstre (flex: 1 skubber knapperne - Luk + Nulstil - til højre). */

/* Menu-visningen: punkter som hovedmenuens links + tynde skillelinjer. */
.sted-menu { display: flex; flex-direction: column; gap: 0.25rem; }
.sted-item {
    color: var(--accent-contrast);
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.85rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
}
.sted-item:hover { background: rgba(255, 255, 255, 0.08); }
.sted-item-active { background: var(--accent); }
.sted-sep { border: none; border-top: 1px solid rgba(255, 255, 255, 0.22); margin: 0.5rem 0; }

/* Liste-visningen: de kendte vchips, restylet til den mørke bund. */
.sted-panel-search {
    margin: 0.25rem 0 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-contrast);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.sted-panel-search::placeholder { color: rgba(255, 255, 255, 0.6); }
/* I panelet skal listen fylde HELE fladen og scrolle dér - ikke den gamle
   15rem-boks fra forsidens sektion (#venue-list-reglen ovenfor). */
.sted-panel-list#venue-list { max-height: none; flex: 1; padding-bottom: 1rem; }
.sted-panel .vchip {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--accent-contrast);
}
.sted-panel .vchip-active { background: var(--accent); border-color: var(--accent); }

/* Kort-visningen: byknapper over et kort der fylder resten af panelet. */
.sted-panel-byer { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.sted-by {
    color: var(--accent-contrast);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    font: inherit;
    font-size: 0.92rem;
    padding: 0.35rem 0.9rem;
    min-height: 40px;
    cursor: pointer;
}
.sted-by:hover { background: rgba(255, 255, 255, 0.2); }
.sted-panel-kort { flex: 1; min-height: 60vh; border-radius: 10px; }

/* Tema på sorterings-linjen: popup'en er chips + "Kun ledige"-række, ikke
   radius-pop'ens grid af ens valgmuligheder. */
.tema-pop { display: block; }
.tema-pop .venue-list { max-height: 55vh; overflow-y: auto; }
/* Låst kategori (Kurser/Åndedræt og yoga): chip med label + kryds, ingen dropdown. */
.tema-locked { display: flex; align-items: center; }
.tema-locked .chip-main { flex: 1; }
.tema-locked-x {
    color: var(--accent-contrast);
    text-decoration: none;
    font-weight: 700;
    padding: 0.35rem 0.8rem 0.35rem 0.2rem;
}

/* Teaser under topbaren: én linje + info-ikon der åbner /info. */
.teaser {
    display: flex;
    justify-content: center;   /* hele teksten centreret */
    margin: 0 0 0.75rem;
}
/* Hele linjen er ét link (til /info) med info-ikonet sidst. */
.teaser-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dim);
    text-decoration: none;
    min-height: 44px;          /* ordentligt touch-mål */
}
.teaser-info { color: var(--accent); font-size: 1.25rem; line-height: 1; }

/* /info: de syv vigtigste funktioner. */
.info-list { padding-left: 1.25rem; display: grid; gap: 0.9rem; }
.info-list li { line-height: 1.5; }

/* "Min position"-ikonet: højrestillet for enden af byknapperne over kortet. */
.sted-minpos { display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 0.35rem 0.6rem; }

/* OK-knappen i tema-popup'en: egen linje, nederst til højre. */
.tema-ok-row { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.tema-ok { min-width: 6rem; }

/* Min position søger: pulsér mens tilladelse/GPS afventes. */
.sted-minpos-soeger { animation: minpos-puls 1s ease-in-out infinite; }
@keyframes minpos-puls { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sted-minpos-soeger { animation: none; opacity: 0.5; } }

/* Liste-toppens knapper: inaktiv Ryd (intet valgt) + grøn OK. */
.sted-panel-btn-inaktiv { opacity: 0.4; cursor: default; pointer-events: none; }
.sted-panel-ok { background: var(--accent); border-color: var(--accent); }
.sted-panel-ok:hover { background: var(--accent); opacity: 0.9; }

/* Sted-blokken på eventsiden: navn+adresse er ét klikbart link til stedets side,
   uden link-farve/understregning (blokken opfører sig som et kort). */
.venue-address-link { color: inherit; text-decoration: none; }
.venue-address-link:hover strong { text-decoration: underline; }

/* /info: afsnits-overskrifter (Åbent for alle / Med en gratis profil). */
.info-heading { margin: 1.5rem 0 0.75rem; font-size: 1.15rem; }

/* Info-siden: hver funktion som en lille blok - overskrift + et par linjer.
   Teksten er til at læse, ikke til at scanne, så linjeafstanden er lidt større. */
.info-side p { line-height: 1.55; }
/* Vidensider: trin, sammenligningstabel og kilder. Tabellen er det eneste der må være
   bredere end skærmen - den ruller i sin egen kasse, siden gør ikke. */
.viden li { line-height: 1.55; margin-bottom: 0.4rem; }
.viden-tabel { overflow-x: auto; margin: 0 0 1rem; }
.viden-tabel table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.viden-tabel th, .viden-tabel td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); }
.viden-tabel thead th { font-weight: 700; }
.viden-tabel tbody th { font-weight: 600; min-width: 9rem; }
.viden h2 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
.viden h3 { font-size: 1rem; margin: 1.1rem 0 0.3rem; }
.viden hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); margin: 1.5rem 0; }
.viden-oversigt { list-style: none; padding: 0; }
.viden-oversigt li { margin: 0 0 1rem; }
.viden-oversigt li > a { font-weight: 700; font-size: 1.05rem; }
.viden-oversigt li > .watch-fine { display: block; }
.viden-udkast-maerke { margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem;
    background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--warm); }
.viden-kilder { font-size: 0.88rem; color: var(--text-dim); }
.viden-kilder a { overflow-wrap: anywhere; }
.info-blok { margin: 0 0 1.1rem; }
.info-blok h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.info-blok p { margin: 0 0 0.4rem; }
.info-fine { color: var(--text-dim); font-size: 0.92rem; }
.info-cta { margin: 1rem 0 1.5rem; }

/* Sted-panelets liste: tæller + flueben gør det tydeligt hvad der er valgt. */
.sted-valgt-linje { margin: 0 0 0.5rem; font-size: 0.95rem; }
.sted-panel .vchip-mark { display: inline-block; min-width: 1.1em; font-weight: 700; }
.sted-item-antal { font-weight: 400; opacity: 0.85; margin-left: 0.35rem; }

/* Kort-popup: "Tilføj/Fjern" er en <button>, fordi valget sker klient-side uden
   genindlæsning. SELVE UDSEENDET står længere oppe under .kort-popup-bund, hvor den
   er en rigtig knap ved siden af "Se gus" (Anders 19/9-2026). Her står kun det der
   gælder uanset hvor knappen måtte blive brugt. */
.kort-tilfoej { font: inherit; cursor: pointer; }
/* Leaflets zoom-kontrol ligger som standard OVER popup'en og skjulte stednavnet.
   Popup-panelet hæves, så en åben popup altid kan læses. */
.leaflet-pane.leaflet-popup-pane { z-index: 900; }

/* Filterfelt øverst på /gussteder og /saunagus/byer. Teaseren står lige under og
   overtager bundmargenen, så de to hører sammen som ét felt. */
.gussted-filter { margin: 0 0 0.35rem; }
.filter-teaser { margin: 0 0 1.25rem; font-size: 0.85rem; color: var(--text-dim); }

/* ============ SPA'ens listevisning (plan-fase 3) ================================
   React-komponenterne i Saunagus.Web/Spa bruger sitets egne klasser: kortet, chippen,
   .day-header, .empty og top-panelerne står allerede ovenfor og genbruges uændret.
   Kun det nedenfor er nyt - ugestriben, tæller/sorterings-linjen og filterrækken -
   og det er bygget af de samme tokens: ingen nye farver, piller på 999px, bokse på
   var(--radius), og alt interaktivt på mindst 44px.

   Hele blokken kan slettes igen den dag SPA'en forsvinder; intet uden for den rører
   disse klasser. */

/* Serverens første skærm har ingen filterrække, ugestribe eller tællelinje - React
   tegner dem først ved montering. Uden en reserveret plads ville HELE listen hoppe
   ned i det øjeblik SPA'en overtager, og et layout-hop er præcis det "overtagelse"
   ikke måtte koste (docs/spa-plan.md afsnit 6). Ny.razor renderer derfor en tom
   pladsholder med nøjagtig den højde React's tre rækker fylder.

   Tallet er MÅLT (test, 30/9-2026: 46 px filterrække + 12+80+8 ugestribe + 46
   tællelinje, med de to sammenfaldende margener talt én gang), og smoke-scenariet
   `ny` vogter det: sidens højde med og uden JavaScript må ikke skride fra hinanden.
   Ændrer en af de tre rækker højde, skal tallet med. Striben gik fra 59 til 80 px
   den dag dagene blev høje kasser (30/9-2026). */
:root { --spa-top-h: 146px; }  /* 170 -> 146 den 1/10-2026: taellelinjen fjernet (24 px maalt) */
/* 192 -> 170 den 1/10-2026: sorteringen flyttede op i filterrækken som ikon, så
   tællelinjen gik fra 46 til 23 px (målt som forskel i sidehøjde uden/med JS: 22 px). */
.spa-plads { height: var(--spa-top-h); }
/* Karrusellen stod i den klæbrige blok ét døgn (1/10-2026) og er fjernet igen
   (Anders 2/10): pladsholderen er dermed igen kun filterrækken + ugestriben. */

/* Mens en ny forankring hentes, står det gamle indhold HELT uændret - ikke en tom skærm,
   og heller ikke dæmpet: en fade ned og op igen ER et blink for øjet, selv om en
   tæller af kort ikke ser det (Anders 1/10-2026, iPhone). Kun klik er slået fra. */
.feed-stale { pointer-events: none; }

/* Filterrækken: "Hvor henne" fylder linjen, de tre ikoner er faste firkanter.
   Chip-gruppen vil som standard dele linjen 50/50 (se .chip-group) - her skal den ene
   være bred og de andre små.

   ALTID ÉN RÆKKE (Anders 4/10-2026). `.chips` har `flex-wrap: wrap`, og da klokken kom
   til som det fjerde element, ombrød rækken på en telefon: filterikonet stod alene på
   anden linje, og den klæbrige blok blev 48 px højere - plads taget fra listen. Det er
   "Hvor henne" der giver efter, fordi den har `min-width: 0` og en tekst der må
   afkortes; de tre ikoner har et fast mål der ikke må krympe under 44 px. */
.filter-raekke { flex-wrap: nowrap; }
.filter-raekke .hvor-henne { flex: 1 1 auto; min-width: 0; }
.filter-raekke .hvor-henne .chip-main {
    /* Teksten afkortes frem for at presse rækken ud over skærmen. */
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.filter-raekke .filter-dd { flex: 0 0 auto; }
.filter-raekke .sort-dd { flex: 0 0 auto; }
/* Klokken er en fast firkant som sine to naboer. Uden den her linje delte .chip-group
   linjen 50/50, klokken blev lige så bred som "Hvor henne", og filterikonet blev
   skubbet ned på en anden række (Anders' skærmbillede 4/10-2026). */
/* ... og UDEN chip-flade: bare ikonet, som på event-siden (Anders 4/10-2026). `.chip-group`
   giver ellers hvid baggrund, ramme og pilleform - og så ligner klokken en knap mere end
   den ligner sin tvilling på event-siden. Tryk-fladen er stadig de 44 px `.chip-main`
   sætter; det er kun fladen man KAN SE der er væk. */
.filter-raekke .overvaag-dd {
    flex: 0 0 auto;
    border: 0;
    background: none;
}
.filter-knap { padding: 0.35rem 0.6rem; min-width: 44px; gap: 0.3rem; }
.overvaag-knap { padding: 0.35rem 0.4rem; min-width: 44px; gap: 0.3rem; }
.chip-group-active .filter-knap { color: var(--accent-contrast); }
.chip-group-active .filter-badge {
    background: var(--accent-contrast);
    color: var(--accent);
}

/* Ugestriben: klæbrig lige under topbjælken, som selv scroller væk (den MÅ ikke
   gøres sticky - den har samme grønne farve som .day-header og skar dem midtover,
   se ui-design-skillen). Striben står derfor på sidens havrefarve og støder aldrig
   sammen med de grønne dagsoverskrifter. Fuld bredde som .day-header, så baggrunden
   dækker helt ud i kanten når den er klæbet fast.

   DAGENE FØLGER FINGEREN: sporet er vandret scrollbart med scroll-snap, én uge pr.
   snap-side. Det er browserens egen rulning - ikke et swipe vi selv regner ud - så
   bevægelsen er den iOS giver, og ugerne snapper på plads af sig selv. */
/* Filterrækken og ugestriben klæber som ÉN blok under topbjælken - topbjælken selv
   scroller væk (den må ikke være sticky, se noten om .site-header). Så kan de
   øvrige filtre nås uden at scrolle hele vejen op (Anders 30/9-2026). Baggrunden er
   sidens egen, så blokken ikke støder sammen med de grønne daghoveder. */
.spa-klaebrig {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    /* De 16 px luft mellem topbjælke og filterrække er <main>'s padding. Den ligger
       UDEN FOR den klæbrige blok og forsvandt derfor op bag bjælken når blokken var
       stuck: "Hvor henne" sad klemt mod bjælken (Anders 1/10-2026). Luften trækkes
       ind i blokken som padding, og blokken op med samme mål - det naturlige layout
       øverst på siden er uændret, men luften følger nu med. */
    margin: -1rem -1rem 0;
    padding: 1rem 1rem 0;
}
.ugestribe {
    display: flex;
    align-items: center;
    /* Ingen gap: de syv kasser skal have plads nok til at være 44 px brede ved siden
       af to 44 px-pile på en telefonskærm (420 px giver 45,7 px pr. kasse). */
    margin: 0.75rem -1rem 0.5rem;
    padding: 0.35rem 0.15rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.ugestribe-pil {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent);
    border-radius: 999px;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.ugestribe-pil:disabled { opacity: 0.35; cursor: default; }

/* Sporet: én uge ad gangen, snappet på plads. Rullebjælken skjules - den ville
   lægge sig hen over prikkerne og få striben til at skifte højde på desktop. */
.ugestribe-spor {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ugestribe-spor::-webkit-scrollbar { display: none; }

/* Én uge = én snap-side der fylder hele sporet. min-width holder de syv kasser på
   mindst 44 px også på en meget smal skærm; da bliver siden en anelse bredere end
   sporet i stedet for at kasserne bliver for små til en tommelfinger. */
.ugestribe-uge {
    flex: 0 0 100%;
    min-width: max-content;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Dagen er en HØJ, afrundet kasse - ikke en cirkel (Twinspirit-udtrykket): ugedagen
   lille og versal øverst, dagens tal stort, prikken under. */
.ugestribe-dag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 44px;
    min-height: 68px;
    padding: 0.35rem 0;
    border: 1px solid transparent;
    border-radius: var(--radius-blok);
    background: none;
    color: var(--text);
    font: inherit;
    line-height: 1.1;
    cursor: pointer;
}

.ugestribe-ugedag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    /* Samme spatiering som daghovederne - de to siger det samme om den samme dag. */
    letter-spacing: 0.05em;
}
.ugestribe-tal { font-size: 1.4rem; font-weight: 700; }

/* I dag markeres med en ring, den valgte dag fyldes med accent - samme to niveauer
   som kalenderens .cal-today og .cal-sel havde. */
.ugestribe-idag { border-color: var(--accent); }
.ugestribe-valgt {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.ugestribe-valgt .ugestribe-ugedag { color: var(--accent-contrast); }

/* Uden for vinduet i begge ender: dagene før i dag (der er ingen gus at komme efter
   i går) og dagene efter serverens 90-dages-horisont. De bliver stående, så ugen
   stadig er en uge - men dæmpede og uden tryk. */
.ugestribe-udenfor { color: var(--text-dim); cursor: default; }
.ugestribe-udenfor .ugestribe-ugedag { opacity: 0.6; }
.ugestribe-udenfor .ugestribe-tal { font-weight: 400; }

/* Prikken siger "her er noget". Den tomme variant fylder den samme plads, så
   tallene ikke hopper op og ned når filteret ændrer sig. */
.ugestribe-prik {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.ugestribe-prik.tom { background: transparent; }
.ugestribe-valgt .ugestribe-prik { background: var(--accent-contrast); }
.ugestribe-udenfor .ugestribe-prik { background: var(--text-dim); opacity: 0.5; }
/* En dag uden gus for de valgte filtre: nedtonet som dagene uden for vinduet, men
   uden prik - der ER ingenting at vise, så den kan ikke trykkes. */
.ugestribe-tom { color: var(--text-dim); opacity: 0.55; cursor: default; }

/* Tæller + sortering på én linje over listen ("57 gus · Sortering"). */
.liste-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem;
}
.liste-antal { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.liste-skil { color: var(--text-dim); }
.liste-top .sort-dd { flex: 0 1 auto; }
.liste-top .chip-main { justify-content: flex-start; }

/* ========== Skyderen: sitets FØRSTE range-kontrol (1/10-2026) ==========
   Samlet ét sted med vilje, så den kan GENBRUGES. Alt herunder er generelt for en
   dobbelt-skyder; kun klassenavnet `tid-` siger at den første kunde var tidslinjen i
   SPA'ens filterpanel (kl. 5-23, to greb). Skal der en skyder mere til, hører den her -
   og den skal først stå på /design, ellers findes den ikke (ui-design-skillen).

   Mekanikken er det kendte dobbelt-range-trick: to gennemsigtige <input type="range">
   oven på ét spor. Tre ting er ikke til diskussion:
     1. Grebet er 44x44 px - minimum touch-target, håndhævet eksplicit som på alt andet
        interaktivt.
     2. Input'et har `pointer-events: none` og KUN grebet `auto`: ellers ville det
        øverste input dække hele sporet, og naboens greb kunne ikke gribes.
     3. `touch-action: none` på sporet. Uden den læser iOS en vandret trækning som en
        lodret scroll, og grebet slipper midt i bevægelsen.
   Bjælken for det valgte interval regnes ud af grebets bredde (--tid-greb) og to
   ANDELE 0-1 (--tid-a/--tid-b), fordi et greb kun kan bevæge sig mellem sine egne halve
   bredder: en ren procent af sporet ville ligge skævt i enderne. */
.tid-vaelger { --tid-greb: 44px; margin: 0 0 0.9rem; }
.tid-valgt { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
.tid-spor {
    position: relative;
    height: var(--tid-greb);
    touch-action: none;
}
.tid-spor::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -3px;
    left: calc(var(--tid-greb) / 2);
    right: calc(var(--tid-greb) / 2);
    height: 6px;
    border-radius: 999px;
    background: var(--border);
}
.tid-valgt-bjaelke {
    position: absolute;
    top: 50%;
    margin-top: -3px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    left: calc(var(--tid-greb) / 2 + (100% - var(--tid-greb)) * var(--tid-a));
    width: calc((100% - var(--tid-greb)) * (var(--tid-b) - var(--tid-a)));
}
.tid-skyder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--tid-greb);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    touch-action: none;
}
.tid-skyder-til { z-index: 2; }
/* Står de to greb oven i hinanden, lægges det greb der har plads at løbe på øverst -
   ellers kan man ikke komme videre fra en tidslinje der er klappet sammen til ét punkt. */
.tid-skyder-oeverst { z-index: 3; }
.tid-skyder::-webkit-slider-runnable-track { height: var(--tid-greb); background: none; border: 0; }
.tid-skyder::-moz-range-track { height: var(--tid-greb); background: none; border: 0; }
.tid-skyder::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: var(--tid-greb);
    height: var(--tid-greb);
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
}
.tid-skyder::-moz-range-thumb {
    pointer-events: auto;
    box-sizing: border-box;
    width: var(--tid-greb);
    height: var(--tid-greb);
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
}
.tid-skyder:focus { outline: none; }
.tid-skyder:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }
.tid-skyder:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent); }
.tid-ender {
    display: flex;
    justify-content: space-between;
    padding: 0 calc(var(--tid-greb) / 2 - 0.3rem);
    font-size: 0.8rem;
    color: var(--text-dim);
}
/* I det grønne panel vendes den om, præcis som de valgte chips: hvid bjælke og hvide
   greb med grøn ring på en dæmpet hvid skinne. Ingen nye farver - kun tokens. */
.topdd-panel .tid-valgt { color: var(--accent-contrast); }
.topdd-panel .tid-spor::before { background: rgba(255, 255, 255, 0.35); }
.topdd-panel .tid-valgt-bjaelke { background: var(--accent-contrast); }
.topdd-panel .tid-skyder::-webkit-slider-thumb { background: var(--accent-contrast); }
.topdd-panel .tid-skyder::-moz-range-thumb { background: var(--accent-contrast); }
.topdd-panel .tid-ender { color: rgba(255, 255, 255, 0.75); }

/* Vagtposterne for uendelig scroll. De er usynlige, men skal have en HØJDE - et
   element på 0px kan en IntersectionObserver ikke se skære kanten. */
.feed-vagt { height: 1px; }

/* Forklaringen under et slukket valg i et top-panel (fx "Afstand kræver din
   position"). Den står på den grønne flade og arver dens hvide tekst. */
.topdd-hint {
    margin: 0.25rem 0 0;
    padding: 0 0.9rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Et slukket valg bliver stående og gråtones: en mulighed der forsvinder, ligner en
   fejl - en der er slukket, kan forklares. */
.radius-opt:disabled { opacity: 0.45; cursor: default; }
.radius-opt:disabled:hover { background: none; }

/* ---- SPA'ens tre visninger: pillen, kortet og stedlisten (fase 4, 1/10-2026) -------
   Strukturen er EDC's (planens afsnit 14), udtrykket vores: ÉN flydende pille nederst
   midt på skærmen skifter mellem liste, kort og stedliste. Den er fixed og gemmer sig
   IKKE ved scroll - en knap man skal scrolle op efter, bliver en knap man ikke bruger,
   og det var hele grunden til at den afløste topbjælkens kort-link. */
.vis-pille {
    position: fixed;
    left: 50%;
    /* Hjemmeskærms-bjælken på iPhone ligger i de nederste ~34 px: uden safe-area ville
       pillen sidde bag den og kun kunne rammes halvt. */
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    /* 15: over den klæbrige top (10) og over kortet (som er isoleret, se
       .spa-kortflade) - men UNDER hovedmenuens scrim (20) og skuffe (30), så en åben
       menu dæmper pillen som alt andet indhold. */
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    /* Gennemsigtig (Anders 5/10-2026): pillen ligger OVEN PÅ listen og dækkede et korts
       knapper. 82 % skovgrøn lader indholdet ane sig bagved, og slørringen holder
       teksten læsbar hen over et foto - uden den flimrer hvid tekst på lyse kort.
       `background-color` som reserve, hvor backdrop-filter ikke findes: dér er pillen
       bare lidt gennemsigtig, aldrig ulæselig. */
    background: color-mix(in srgb, var(--accent) 82%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--accent-contrast);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
    -webkit-tap-highlight-color: transparent;
}
.vis-pille:hover { text-decoration: none; }
.vis-pille:active { transform: translateX(-50%) scale(0.97); }
.vis-pille:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vis-pille:active { transform: translateX(-50%); } }

/* Pillen ligger OVEN PÅ beholderen, så det sidste kort i listen og den sidste række i
   stedlisten skal kunne scrolles fri af den. */
html.spa-side .feed-rulle { padding-bottom: 5.5rem; }
/* Listen bliver stående i DOM'en mens kortet er fremme (den beholder sine lyttere og
   sine sider), så [hidden] skal faktisk skjule den - .feed-rulle har flex-egenskaber
   fra spa-side-reglen, og et display her ville slå browserens [hidden] ihjel på samme
   måde som .btn gjorde det for Luk/Ryd på kortsiden (Anders 29/9-2026). */
html.spa-side .feed-rulle[hidden] { display: none; }

/* Kortet fylder PRÆCIS den plads listen havde: under den klæbrige top, resten af
   skærmen. Ingen scroll - et kort panorerer, det ruller ikke. */
.spa-kortflade {
    position: relative;
    /* ISOLERET med vilje: Leaflet giver sine egne lag z-index 200-900 (terner, markører,
       popups, kontroller). Uden et stacking context her ville de ligge i samme stak som
       resten af siden, og Vis-pillen (z-index 15) ville forsvinde bag kortternene. Med
       isolation gælder Leaflets tal kun INDE i kortet. */
    isolation: isolate;
    z-index: 0;
    flex: 1 1 0%;
    min-height: 0;
    /* Fuld bredde som listens kort: ud i kanten, forbi main's sidepadding. */
    margin: 0 -1rem;
}
.spa-kort { width: 100%; height: 100%; background: var(--bg); }

/* VISNINGERNES BEHOLDER (14/10-2026): liste, kort, gussteder og gusmestre står i én
   søjle under den klæbrige top - samme flex-regler som de havde direkte i #spa. */
html.spa-side .spa-visning { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
/* KORTET C (Anders 14/10-2026): fra 40rem står listen og kortet side om side, halvt og
   halvt; listen ruller for sig, kortet står fast. På telefonen skiftes der med pillen
   som før. Listen har kun én spalte på tablet og to på desktop - den har halv bredde. */
@media (min-width: 40rem) {
    html.spa-side .spa-visning.med-kort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1rem; }
    html.spa-side .spa-visning.med-kort > .feed-rulle { min-height: 0; height: 100%; margin-right: 0; padding-right: 0; }
    html.spa-side .spa-visning.med-kort > .feed-rulle .day-header { margin-right: 0; }
    html.spa-side .spa-visning.med-kort > .spa-kortflade { margin: 0 -1rem 0 0; height: 100%; }
    .spa-visning.med-kort .event-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64rem) {
    .spa-visning.med-kort .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Serverens første skærm på /ny/kort: en tom flade med kortets egen plads, så
   stedlisten under den ikke hopper når React monterer det rigtige kort. */
.spa-kortflade-tom { min-height: 55vh; }
/* Knapperne ligger OVEN PÅ kortet (pladsen er kortets, Anders 23/9-2026), over
   Leaflets egne kontroller men under pillen. */
.spa-kort-knapper {
    position: absolute;
    top: 0.6rem;
    right: 1.6rem;
    /* Over Leaflets egne kontroller (800), under popup-panelet (900): en åben popup må
       gerne dække knappen - den er det man kigger på. */
    z-index: 850;
    display: flex;
    gap: 0.5rem;
}

/* ---- Kortets popup: stedets tre miniaturer + info-knappen (Anders 2/10-2026) -------
   "Se gus" røg ud af popup'en: man er på kortet for at vælge HVOR, og knappen sprang
   over det valg. Tilbage er den der toggler valget, og et link til stedets egen side.
   Fotoerne er det der gør en nål til et sted man kan genkende. */
.kort-popup-fotos {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
}
.kort-popup-fotos img {
    /* Tre fotos + to mellemrum skal kunne være i en popup på 320 px (Leaflets maxWidth
       sættes efter skærmen, se Kort.tsx) - derfor en ANDEL af bredden og ikke 72 px i
       beton: på en 320 px-skærm bliver de lidt mindre i stedet for at bryde linjen. */
    flex: 1 1 0;
    max-width: 72px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg);
}
/* Info-knappen: samme form som "Tilføj til filter", men kun ikonet - den brede knap er
   handlingen, denne er vejen videre. 44 px, som alt man skal ramme. */
.kort-popup-bund .kort-info {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
    text-decoration: none;
}
.kort-popup-bund .kort-info:hover { border-color: var(--accent); }

/* Stedlisten: ét gussted pr. række, fluebenet er hele rækken. */
.spa-steder-rulle { padding-top: 0.75rem; }

/* Søgefeltet er sitets ENESTE søgning nu, og det så ud som en grå streg (Anders
   2/10-2026). Samme udtryk som sitets øvrige filterfelter - hvid flade, ramme i
   --border, 44 px - plus et forstørrelsesglas inde i feltet, så man kan se hvad det er
   før man har læst placeholderen. */
.spa-steder-soeg { position: relative; margin: 0 0 0.5rem; }
.spa-steder-soeg-ikon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;   /* ikonet må ikke stjæle klikket fra feltet */
}
.spa-steder-felt {
    min-height: 44px;
    padding-left: 2.6rem;   /* plads til ikonet */
    margin-bottom: 0;
    background: var(--surface);
}
/* Skillelinjen mellem de valgte og resten. En anelse kraftigere end rækkernes egen
   streg - den skiller to grupper, ikke to rækker. */
.spa-steder-skel {
    height: 0;
    margin: 0.5rem 0;
    border-top: 2px solid var(--border);
    list-style: none;
}
.spa-steder { list-style: none; padding: 0; margin: 0; }
.spa-sted {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.spa-sted-vaelg {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* Hakket er en firkant med en ramme, ikke et systemtegnet afkrydsningsfelt: det samme
   "Stempel med hak"-udtryk som resten af sitet, og det kan rammes. */
.spa-sted-hak {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--accent-contrast);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.spa-sted-valgt .spa-sted-hak { background: var(--accent); border-color: var(--accent); }
.spa-sted-tekst { display: grid; gap: 0.15rem; min-width: 0; }
.spa-sted-navn { font-weight: 600; }
.spa-sted-meta { color: var(--text-dim); font-size: 0.85rem; }
.spa-sted-maerkater { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
/* Stedets LISTEFOTO til højre i rækken - afløste "Gus"-knappen (Anders 2/10-2026):
   rækken er VÆLGEREN til "hvor henne", og en knap der gjorde noget andet, var det ene
   sted man kunne ramme forkert. Pladsen er FAST bred og står der også uden foto, så
   tekstspalten er lige bred i alle rækker og navnene brydes ens.

   Højden er den samme som gus-kortets listefoto (64 px), og bredden følger fotoets eget
   format: et stående foto bliver smallere, ikke beskåret. */
.spa-sted-foto {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 96px;
    margin-left: auto;
}
.spa-sted-foto img {
    display: block;
    height: 64px;
    width: auto;
    /* Kun et PANORAMA rammer loftet (et 16:9-foto vil være 114 px bredt). Så - og kun
       så - beskærer `cover` i siderne frem for at trykke billedet skævt. */
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg);
}

/* Stedlisten som serveren renderer den FØR JS (crawleren og en langsom telefon):
   navnene som tekst, ikke en tom flade. React erstatter den ved montering. */
.spa-steder-tekst { list-style: none; padding: 0; margin: 0; }
.spa-steder-tekst li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.spa-steder-tekst a { font-weight: 600; }
.spa-steder-tags { color: var(--text-dim); font-size: 0.85rem; }


/* ---- Gus-kortets listefoto og listens indslag (Anders 2/10-2026) -------------------
   ÉT foto pr. gussted på kortet - "listefotoet". Først var det tre miniaturer; de blev
   ét foto samme dag. Og ikke ét STORT fotokort: det blev afvist og står stadig afvist
   (spa-plan.md afsnit 14), fordi det viste tre gus pr. skærm mod ni.

   Højden er fast (64 px) og bredden følger fotoets format, så et stående foto bliver
   smallere frem for beskåret - og rækken af kort bølger ikke. Begge mål kommer fra
   serveren (ListefotoDto), så Razor og React skriver de samme tal.

   Fotoet står HØJRESTILLET ud for gusstednavnet (Anders 2/10-2026) - ikke under
   teksten, hvor det gjorde kortet ~70 px højere uden at vise mere. Se `.card-navn`. */
.card-listefoto { margin: 0; }
.card-listefoto img {
    display: block;
    height: 64px;
    width: auto;
    /* Loftet gælder kun de bredeste formater: et 4:3-foto er 85 px bredt og rører den
       ikke. Rammer et panorama den, beskærer `cover` i siderne - det er at foretrække
       frem for et billede der er trykket sammen. Selve loftet (40 % af kortets bredde)
       sidder på `.card-navn .card-listefoto`, hvor procenten har en kendt bredde at
       regne af; her følger billedet bare sin boks. */
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg);
}

/* Indslaget: karrusellens fotokort, nu i listen. Det står MELLEM dagene - lige over et
   daghoved - og bruger .forside-kort ordret, så der kun er ét sted der definerer det
   udtryk. Luften under fotoet adskiller det fra daghovedet, så de to ikke klæber
   sammen til én blok. */
.feed-indslag {
    margin: 1.1rem 0 1rem;
    /* Midt i en dag ER indslaget et <li> inde i .event-list (ellers er markup'et
       ugyldigt, og browseren flytter det ud). Så det må ikke arve listens punkttegn
       eller dens egen afstand. */
    list-style: none;
}
.feed-indslag .forside-kort {
    display: block;
    flex: none;
    scroll-snap-align: none;
}

/* ---- Hjertet (fase 5, Anders 2/10-2026) -------------------------------------------
   ÉT mønster to steder på gus-kortet - ud for GUSSTEDETS navn (foretrukket gussted) og
   ud for GUSMESTERENS navn (følg gusmesteren) - og det samme i gussted-listen og i
   kortets popup. Mønstret står på /design.

   Tre krav, og de er ikke pynt:

     1. **44 px at ramme, 20 px at se.** Tommelfingeren skal kunne ramme det
        (ui-design-skillen), men et 44 px højt element i en 0,88rem meta-linje ville gøre
        hvert kort 48 px højere. Derfor står selve hjertet i 44x44 med NEGATIV lodret
        margin: margin-boksen er 20 px høj - præcis tekstlinjen - mens den flade der
        tager imod fingeren er hel. Målt med getBoundingClientRect i smoke.
     2. **På en LISTE vises kun de SATTE** (Anders 2/10-2026, efter at have set den):
        et tomt outline-hjerte ved hvert eneste navn er støj, og pladsen reserveres
        IKKE - der skal ingen huller være i meta-linjen. Man sætter hjertet på de
        server-renderede sider (se `.hjerte-stor` nederst); på listen tager man det af.
     3. **Én ny farve, og kun til dette.** Outline i --text-dim, fyldt i --hjerte (rød).
        Rød kom i paletten FOR hjertets skyld (Anders 2/10-2026): grøn læses ikke som
        "mit". Brug --hjerte nøjagtig her og ingen andre steder.

   Serveren tegner det SAMME markup på /ny (EventCardList's `Hjerter`), så overtagelsen
   er ét frame. Indtil React har overtaget, kan det ikke trykkes - det er med vilje:
   profilen kendes først dér. */
.hjerte {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Hit-fladen må ikke gøre linjen højere: 44 - 2x12 = 20 px i flowet. */
    margin: -12px -11px;
    vertical-align: middle;
    /* Som <button> på de server-renderede sider arver den ellers browserens egen grå
       flade og ramme - samme nulstilling som sitets øvrige ikon-knapper. */
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.hjerte-ikon { display: block; pointer-events: none; }
/* `display: inline-flex` ovenfor slår browserens egen [hidden] ihjel - samme fælde som
   .btn og .chip (se .kort-luk[hidden]). Kortets popup bygges ÉN gang pr. markør og
   skjuler hjertet med `hidden` indtil profilen siger andet; uden den her linje stod der
   en tom 44 px-firkant ved stednavnet. */
.hjerte[hidden] { display: none; }
/* Sat: fyldt og RØDT (Anders 2/10-2026). CSS vinder over SVG'ens egen fill="none", så
   der kun er ÉN udgave af ikonet at vedligeholde. Det TOMME hjerte bliver ved med at
   være --text-dim: en side fuld af røde konturer ville råbe om noget man ikke har valgt. */
.hjerte-sat { color: var(--hjerte); }
.hjerte-sat .hjerte-ikon { fill: var(--hjerte); }
.hjerte:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -10px;
    border-radius: 50%;
}

/* I gussted-listen sidder hjertet i selve navne-linjen, så navnet og hjertet hører
   sammen - og rækken rundt om det toggler stadig valget. */
.spa-sted-navn { display: flex; align-items: center; gap: 0.1rem; }

/* I kortets popup står hjertet ved stednavnet, hvor pladsen i forvejen var der. */
.kort-popup-navnlinje { display: flex; align-items: center; gap: 0.1rem; }
.kort-popup-navnlinje .kort-popup-navn { flex: 1 1 auto; min-width: 0; }

/* KLOKKEN i filterrækken: "giv mig besked om nye gus der matcher" (Anders 4/10-2026).
   Her lå `.filter-overvaag` - en linje nederst i filterpanelet, der sendte gæsten ud af
   SPA'en til en server-renderet side. Den er væk: funktionen har sit eget ikon mellem
   "Hvor" og filtrene, og panelet opretter overvågningen uden at forlade forsiden.

   Ikonet er en KLOKKE og ikke et hjerte: hjertet betyder "det her er mit" og er rødt,
   klokken "giv mig besked" og er grøn. Samme løfte som klokken på event-siden, så
   gæsten ikke skal lære et tredje system. Knappen deler `.filter-knap`s mål, så de tre
   ikoner i rækken står som ét sæt.

   Hvad overvågningen DÆKKER, med stedernes og temaernes rigtige navne: man skal kunne
   se hvad man bestiller, før man navngiver det. */
.overvaag-daekker {
    margin: 0 0 0.75rem;
    color: var(--accent-contrast);
    line-height: 1.45;
}
.overvaag-navn {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    color: var(--accent-contrast);
    font-weight: 600;
}
.overvaag-navn input {
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 400;
}
/* Svaret efter et tryk. Ikke en boble her: panelet er allerede åbent, og beskeden skal
   kunne stå til man lukker det - modsat klokkens boble, der kvitterer og forsvinder. */
.overvaag-ok, .overvaag-fejl {
    margin: 0.6rem 0 0;
    font-weight: 600;
    color: var(--accent-contrast);
}
.overvaag-fejl { color: #ffd9d2; }
.overvaag-alle {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.5rem;
    color: var(--accent-contrast);
    font-weight: 600;
    text-decoration: underline;
}

/* Det STORE hjerte på de server-renderede sider (/event, /sted, /gusmester) - Anders
   2/10-2026. På listen er hjertet en lille markering, og kun de SATTE vises; her er det
   kontrollen man VÆLGER med, så det er stort, står i begge tilstande, og ligger yderst
   til højre på navnets linje. 30 px ikon i et 44 px mål. */
.hjerte-linje {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* Navnet fylder, hjertet står yderst. `min-width: 0` så et langt navn brydes frem for
   at skubbe hjertet ud over kanten. */
.hjerte-linje > :first-child { flex: 1 1 auto; min-width: 0; margin-right: 0; }
.hjerte-linje > form { flex: 0 0 auto; display: flex; }
/* KUN størrelsen her: farven kommer fra .hjerte / .hjerte-sat, som står før i filen -
   en color-regel her ville overskrive det satte hjertes accent. */
.hjerte-stor {
    /* Her er der plads: hit-fladen er hele knappen, så ingen negativ margin. */
    margin: 0;
}
.hjerte-stor:disabled { opacity: 0.5; cursor: default; }
/* Sted-sektionens adresse er TRE linjer, og hjertet hører ved den første - ikke midt
   på blokken. Egen klasse frem for at ændre .hjerte-linje: gusmester- og
   stedside-linjerne er ÉN linje, og dér er `center` rigtigt. */
.hjerte-linje-top { align-items: flex-start; }
/* Eventsidens tre linjer: pladser tilbage, holdets og saunaens størrelse (13/10-2026). */
.event-stoerrelser { list-style: none; margin: 0.5rem 0; padding: 0; }
.event-stoerrelser li { margin: 0.15rem 0; }
/* Klokke + hjerte side om side ud for et navn (sted- og gusmester-siden, 13/10-2026). */
.hjerte-linje > .ikon-par { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
.ikon-par > form { display: flex; }

/* ---- KLOKKEN: "giv mig besked om dette event" (Anders 2/10-2026) -------------------
   Ud for event-navnet, og den afløser hele "Følg dette event"-boksen der stod nederst
   på event-siden.

   Den arver hjertets form med vilje - 30 px ikon i et 44 px mål, yderst til højre på
   navnets linje - men ALDRIG dets farve. Hjertet er rødt og betyder "det her er mit";
   klokken er skovgrøn og betyder "giv mig besked". To løfter, to farver, samme
   placering, så man kan skelne dem uden at læse. */
.klokke {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.klokke-ikon { display: block; pointer-events: none; }
/* `display: inline-flex` slår browserens egen [hidden] ihjel - samme fælde som .btn,
   .chip og .hjerte. */
.klokke[hidden] { display: none; }
/* Sat: skovgrøn, og KUN klokkelegemet fyldes. Fyldte man hele ikonet, blev knebelen
   (den lille bue nederst) en klat der ikke ligner en klokke. */
.klokke-sat { color: var(--accent); }
.klokke-sat .klokke-ikon path:first-child { fill: var(--accent); }
.klokke:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -10px;
    border-radius: 50%;
}
/* Her er der plads: hit-fladen er hele knappen, så ingen negativ margin (modsat
   listens hjerte, hvor 44 px ville gøre hvert kort højere). */
.klokke-stor { margin: 0; }
.klokke-stor:disabled { opacity: 0.5; cursor: default; }

/* Huset om klokken er boblens holdepunkt. Uden det ville boblen regne sin plads ud fra
   kortet og ikke fra ikonet. */
.besked-hus { position: relative; display: flex; }

/* BOBLEN: kvitteringen, 2 sekunder (variant A af fire, valgt 2/10-2026). Den peger op
   mod klokken, hænger i højre kant og vokser til VENSTRE, så den bliver inde i kortet
   uanset hvor lang teksten er. Den ligger uden for flowet - intet på siden flytter sig
   når den kommer og går.

   `right: 0` og en max-bredde frem for en fast: en engelsk tekst er kortere end en
   dansk, og boblen skal følge sin egen tekst. */
.besked-boble {
    position: absolute;
    top: 46px;
    right: 0;
    z-index: 5;
    /* `width: max-content` er IKKE pynt - uden den var boblen ulæselig (Anders 4/10-2026).
       Et absolut placeret element med kun `right` sat får sin bredde af afstanden fra
       beholderens venstrekant til `right` - og beholderen her er selve knappen, 44 px.
       Teksten blev derfor brudt til ét BOGSTAV pr. linje, en lodret søjle ved siden af
       ikonet. `max-width` kunne ikke redde den: den sætter et loft, ikke et gulv. */
    width: max-content;
    /* Må aldrig blive bredere end skærmen: på en 320 px-telefon er 17rem for meget. */
    max-width: min(17rem, 68vw);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    /* Teksten er kort, men et stednavn i en fejlbesked kan være langt. */
    overflow-wrap: anywhere;
}
/* Pilen: et drejet kvadrat i samme farve, under boblens overkant så den ikke viser en
   kant. Den sidder ud for klokkens midte (44 / 2 - 5 = 17 px fra højre). */
.besked-boble::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 17px;
    width: 10px;
    height: 10px;
    background: var(--accent);
    transform: rotate(45deg);
}
/* Samme fælde igen: `position: absolute` giver et display, og så virker [hidden] ikke
   af sig selv. JavaScript tager `hidden` af i 2 sekunder. */
.besked-boble[hidden] { display: none; }

/* Event-navnets linje: titlen fylder, klokken står yderst. Samme form som
   .hjerte-linje, men h1'en har sin egen linjehøjde, så ikonet skal stå i TOPPEN -
   ellers hænger det midt ude for en titel der brydes over to linjer. */
.titel-linje {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.titel-linje > h1 { flex: 1 1 auto; min-width: 0; }
.titel-linje > form, .titel-linje > .klokke { flex: 0 0 auto; display: flex; }
/* Ikonet trækkes op i flugt med titlens første linje: h1'en er 1,7rem med line-height
   1,2, og knappen er 44 px. */
.titel-linje .besked-hus, .titel-linje > .klokke { margin-top: -0.35rem; margin-right: -0.5rem; }

/* Kortets tekst-knapper: "Vælg viste" og "Ryd" (Anders 2/10-2026, planens afsnit 17).
   De ligger i samme stak som lokations-knappen OVEN PÅ kortet - pladsen er kortets.
   Samme pille-form som sitets øvrige sekundære knapper, bare kompakt: der skal være
   plads til tre knapper uden at de dækker nålene. */
/* Tre knapper i stakken nu - de skal kunne brydes på en smal telefon frem for at
   skubbe sig selv ud over kortets kant. */
.spa-kort-knapper { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 3.2rem); }
.kort-knap-tekst {
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
    white-space: nowrap;
}
/* Slået fra = der er intet valgt at rydde. Den bliver STÅENDE (ikke skjult), så
   stakken ikke hopper i højden når man vælger det første gussted. */
.kort-knap-tekst:disabled { opacity: 0.45; cursor: default; }

/* "Ingen gussteder inden for 5 km - viser de 3 nærmeste" (Anders 2/10-2026).
   En rolig besked-linje øverst i listen, ikke en alarm: valget LYKKEDES, det rakte bare
   længere ud end man bad om. Samme dæmpede tekst som fintekst, men med en venstrekant i
   oker, så øjet fanger den på vej ned i listen. Den scroller væk som alt andet - den
   samme sætning står i Hvor henne-panelet, hvor man kan slå den op igen. */
.feed-besked {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--warm);
    background: var(--surface);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 0.88rem;
}

/* Spinneren mens serveren hentes (Anders 5/10-2026). Den vises KUN når skærmen står
   med gammelt indhold og venter på en ny første side (`visStale` i App.tsx) - ikke ved
   sidehentning i bunden, som har sin egen linje.

   `position: fixed`, fordi listen ruller: en spinner inde i beholderen ville ligge
   tusind pixels oppe og aldrig blive set. Den ligger lavt nok til ikke at dække den
   klæbrige top, og pointer-events: none, så den ikke stjæler et tryk. */
.feed-spinner {
    position: fixed;
    left: 50%;
    top: 38%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-dim);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    pointer-events: none;
}
.feed-spinner-ring {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* Ringen er accentfarven; den "manglende" fjerdedel er det der ses rotere. */
    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    animation: feed-spinner-drej 0.8s linear infinite;
}
@keyframes feed-spinner-drej { to { transform: rotate(360deg); } }
/* Uden bevægelse: ringen står stille som en hel cirkel - teksten bærer beskeden. */
@media (prefers-reduced-motion: reduce) {
    .feed-spinner-ring { animation: none; border-top-color: var(--accent); opacity: 0.6; }
}

/* "Læs mere" i gussted-listen (Anders 5/10-2026): fotoet OG teksten i ÉT link til
   stedets side. Linket ligger VED SIDEN AF vælge-knappen, ikke inde i den - et <a>
   må ikke ligge i en <button>. Lodret stak, så teksten står UNDER fotoet. */
.spa-sted-laes {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.2rem;
    /* Hele linket er tappevenligt, og den lodrette luft matcher knappens. */
    min-height: 44px;
    padding: 0.55rem 0;
    color: var(--text-dim);
    text-decoration: none;
}
.spa-sted-laes-tekst {
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
}
.spa-sted-laes:hover .spa-sted-laes-tekst,
.spa-sted-laes:focus-visible .spa-sted-laes-tekst { color: var(--accent); }
.spa-sted-laes:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
/* Fotoet sidder nu i linket; marginen der skubbede det til højre hører til rækken. */
.spa-sted-laes .spa-sted-foto { margin-left: 0; }

/* GUSSTEDER A (Anders 14/10-2026): stedkort i gitter, som kortene på min side - fotoet
   øverst i fuld bredde, navn, by, antal gus og mærkater under. Rækkens opbygning er den
   samme (vælge-knappen + "Læs mere"-linket med fotoet); her flyttes linket op over
   knappen med `order`, og "Læs mere" står som et mærke på fotoet. 1 / 2 / 3 pr. række. */
.spa-stedkort { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .spa-stedkort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .spa-stedkort { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spa-stedkort > .spa-sted {
    flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-blok);
    background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.spa-stedkort > .spa-sted.spa-sted-valgt { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.spa-stedkort .spa-sted-laes { order: -1; position: relative; display: block; min-height: 0; padding: 0; }
.spa-stedkort .spa-sted-foto { display: block; width: 100%; height: 9rem; background: var(--bg); }
.spa-stedkort .spa-sted-foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.spa-stedkort .spa-sted-laes-tekst {
    position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.2rem 0.65rem; border-radius: 999px;
    background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
.spa-stedkort .spa-sted-vaelg { padding: 0.75rem 0.9rem 0.9rem; align-items: flex-start; }
/* Uden foto: ingen tom flade - "Læs mere" står som et link under teksten. */
.spa-stedkort .spa-sted-laes:not(:has(img)) { order: 1; padding: 0 0.9rem 0.8rem; }
.spa-stedkort .spa-sted-laes:not(:has(img)) .spa-sted-foto { display: none; }
.spa-stedkort .spa-sted-laes:not(:has(img)) .spa-sted-laes-tekst {
    position: static; padding: 0; background: none; box-shadow: none; text-decoration: underline; color: var(--text-dim);
}

/* Tekst kun for skærmlæsere. Fandtes ikke i repoet før nu: den bærer stednavnet inde i
   "Læs mere"-linket, så ankerteksten bliver "Læs mere om Albertslund Svøm & Fitness"
   i stedet for 143 gange det samme - uden at ændre det man SER. */
.kun-skaermlaeser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Overskriften på /gussteder (Anders 5/10-2026). Den sidder over søgefeltet INDE i den
   rullende beholder og ruller derfor med - toppen er allerede klæbrig, og et lag mere
   ville spise skærmen på en telefon. Dæmpet og lille: den fortæller hvad siden ER, men
   det er listen man er kommet efter. */
.spa-steder-titel {
    margin: 0.2rem 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* "Ryd" i panelets top, til venstre for "Luk" (Anders 5/10-2026). Den lå før nederst i
   listen, og med de ti kommuner over sig skulle man scrolle for at finde den. Den
   arver .sted-panel-btn; det eneste egne er den slukkede tilstand, for den er slukket
   netop når der ikke er noget valgt - altså det meste af tiden. */
.topdd-ryd:disabled {
    opacity: 0.4;
    cursor: default;
}
.topdd-ryd:disabled:hover { background: rgba(255, 255, 255, 0.1); }

/* Gusmester-listen: ét gussted pr. linje under navnet (Anders 6/10-2026). Meta-linjen
   er `inline` på gussted-listen, hvor der kun er én; her er der flere, og de skal stå
   under hinanden. Samme tekst-udtryk, ny opstilling. */
.spa-sted-tekst .spa-sted-meta + .spa-sted-meta,
li.spa-sted .spa-sted-meta { display: block; }

/* Gusmester-listen: ét gussted pr. linje med sin adresse under sig (Anders 7/10-2026).
   Navnet i tekstfarven, adressen dæmpet - samme forhold som på gus-kortet, hvor
   stednavnet og postnummer-linjen står over hinanden. */
.spa-gm-sted { display: block; margin-top: 0.15rem; }
.spa-gm-stednavn { display: block; font-size: 0.88rem; color: var(--text); }
.spa-gm-sted .spa-sted-meta { display: block; }

/* Krydset på en filter-chip der kun kan FJERNES. Temaernes chips slår til og fra; de
   valgte gusmestre kan kun tages af, og krydset siger det uden at man skal prøve. */
.vchip-kryds { margin-left: 0.4rem; opacity: 0.75; font-weight: 700; }

/* ---------------------------------------------------------------------------
   FORSIDENS OVERSIGT (SEO-agenten 9/10-2026)

   Blokken efter gus-listen med byer, gussteder, kommuner og temaer. Den er der for
   den der læser siden UDEN at køre JavaScript - en AI-crawler eller en gæst med JS
   slået fra - og er skjult i app-skallen (html.spa-side, se ovenfor). Formen er
   derfor løbende tekst med links, ikke kort eller lister: den skal kunne læses
   oppefra og ned af en maskine, og fylde lidt for et menneske.
   --------------------------------------------------------------------------- */
.forside-oversigt {
    margin: 2rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linje, rgba(0, 0, 0, 0.12));
    font-size: 0.92rem;
    line-height: 1.6;
}
.forside-oversigt h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.forside-oversigt h3 { font-size: 0.95rem; margin: 1.1rem 0 0.3rem; }
.forside-oversigt p { margin: 0 0 0.4rem; }
/* Links med luft nok til at kunne rammes med en finger, også når de står i løbende
   tekst - blokken er synlig for en gæst uden JavaScript, og dér skal den kunne bruges. */
.forside-oversigt-liste a { display: inline-block; padding: 0.1rem 0; }
.forside-oversigt-tal { opacity: 0.7; }

/* ===== MIN SIDE (Anders 13/10-2026) =====================================================
   Hele selvbetjeningen: venstremenu + indhold, i fuld skærmbredde.

   HVORFOR FULD BREDDE, når resten af sitet har 42rem læsebredde: min side er ikke en
   tekst man læser, men et arbejdsbord man bruger. Menuen skal stå fast til venstre, og
   indholdet skal kunne bære to kolonner kort. Bredden sættes HER og kun her, på den
   <main> der indeholder siden - ingen anden side rører ved den.

   FARVERNE ER SITETS EGNE (Anders' valg): skovgrøn accent, rødt hjerte, den varme bund.
   Layoutet er inspireret af findensaunagus' min-profil, farverne er ikke. */

main:has(> .minside) {
    max-width: none;
    padding: 0;
}

.minside {
    min-height: 60vh;
}

.minside-ramme {
    display: grid;
    grid-template-columns: 17rem 1fr;
    align-items: start;
    gap: 0;
}

/* --- Venstremenuen ------------------------------------------------------------------ */

.minside-sidebar {
    position: sticky;
    top: 0;
    align-self: stretch;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.25rem 1rem 2rem;
    border-right: 1px solid var(--border);
    background: var(--surface);
}

.minside-hilsen {
    margin: 0 0 1.25rem;
    padding: 0 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.minside-gruppe { margin-bottom: 1.5rem; }

.minside-gruppe-titel {
    margin: 0 0 0.4rem;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Menupunktet er et RIGTIGT link (⌘-klik skal virke), men ser ud som en knap. */
.minside-punkt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: var(--radius-blok);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.minside-punkt:hover { background: var(--bg); }

.minside-punkt-valgt,
.minside-punkt-valgt:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

.minside-ikon { flex: 0 0 auto; }

.minside-punkt-under {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-dim);
}

.minside-punkt-valgt .minside-punkt-under { color: rgb(255 255 255 / 75%); }

/* "Skift til"-punkterne: samme form, men de fører et andet sted hen - derfor en
   tyndere streg omkring, så de ikke ligner endnu et menupunkt i rækken. */
.minside-skift {
    border: 1px solid var(--border);
    margin-bottom: 0.4rem;
}

.minside-tilbage {
    display: block;
    margin: 0 0 1rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.minside-kommer {
    margin: 0 0 0.75rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-dim);
}

/* --- Indholdet ---------------------------------------------------------------------- */

.minside-indhold {
    /* justify-self: der er ingen auto-margin her, men reglen gør det umuligt for en
       arvet margin at krympe kolonnen igen (se kommentaren i App.tsx). */
    justify-self: stretch;
    width: 100%;
    max-width: 72rem;
    margin: 0;
    padding: 1.75rem 2rem 4rem;
}

.minside-hoved {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.minside-hoved h1 { margin: 0.1rem 0 0; font-size: 2rem; }

.minside-overlinje {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.minside-under { margin: 0.4rem 0 0; color: var(--text-dim); }

.minside-sektion { margin-bottom: 2.5rem; }
.minside-sektion > h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.minside-sektion-titel { margin: 0 0 0.75rem; font-size: 1.15rem; }

.minside-indlaeser { color: var(--text-dim); }

.minside-tom {
    padding: 1.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
    color: var(--text-dim);
    line-height: 1.55;
}

.minside-tom p { margin: 0 0 0.75rem; }
.minside-tom p:last-child { margin-bottom: 0; }

/* --- Kort (gussteder) --------------------------------------------------------------- */

.minside-kort-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.minside-kort {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.minside-kort-foto { display: block; line-height: 0; }

.minside-kort-foto img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
}

.minside-kort-krop { padding: 0.9rem 1rem 1rem; }

.minside-kort-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.minside-kort-top h3 { margin: 0; font-size: 1.05rem; }
.minside-kort-top h3 a { text-decoration: none; color: var(--text); }
.minside-kort-top h3 a:hover { text-decoration: underline; }

.minside-kort-meta { margin: 0.2rem 0 0; color: var(--text-dim); font-size: 0.9rem; }
.minside-kort-naeste { margin: 0.6rem 0 0; font-size: 0.92rem; }
.minside-pris { color: var(--text-dim); }

/* De to markeringer står sammen, klokken først (besked) og hjertet yderst (mit) -
   samme rækkefølge som på sted- og gusmester-siderne. */
.minside-markeringer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.15rem;
}

/* --- Rækker (gusmestre, events, beskeder, anmeldelser) ------------------------------- */

.minside-raekker {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
    overflow: hidden;
}

.minside-raekke {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}

.minside-raekke:last-child { border-bottom: 0; }
.minside-raekke-blok { display: block; }
.minside-raekke-mat { opacity: 0.6; }

.minside-raekke-foto {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg);
}

.minside-raekke-foto img { width: 100%; height: 100%; object-fit: cover; }

.minside-raekke-tekst { flex: 1 1 auto; min-width: 0; }

.minside-raekke-navn { display: block; font-weight: 600; }
.minside-raekke-navn a { color: var(--text); text-decoration: none; }
.minside-raekke-navn a:hover { text-decoration: underline; }

.minside-raekke-meta {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-dim);
    font-size: 0.88rem;
}

.minside-anmeldelse-tekst {
    margin: 0.5rem 0 0;
    line-height: 1.55;
    white-space: pre-wrap;
}

.minside-maerkat {
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 0.78rem;
    white-space: nowrap;
}

.minside-maerkat-alarm { background: #f6e9cf; color: #8a5a1f; }

.minside-fjern {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.minside-fjern:hover { border-color: var(--danger); color: var(--danger); }
.minside-fjern:disabled { opacity: 0.5; cursor: default; }

/* Mine anmeldelser: søgefeltet står altid øverst; hver anmeldelse har Ret + Slet. */
.minside-anmeld-soeg { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.minside-anmeld-knap { flex: 0 0 auto; min-height: 44px; }
.minside-anmeldelse-top { display: flex; align-items: flex-start; gap: 0.9rem; }
.minside-anmeldelse-knapper { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.minside-ret:hover { border-color: var(--accent); color: var(--accent); }
.minside-raekke-meta a { color: var(--accent); }

/* Beskeder: emnet er en knap der folder teksten ud. */
.minside-besked-top {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.minside-besked-tekst {
    margin: 0.75rem 0 0;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-blok);
    background: var(--bg);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* --- Profil-formen ------------------------------------------------------------------ */

.minside-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.minside-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.minside-form input { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; }

.minside-fakta { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.25rem; margin: 0 0 1rem; }
.minside-fakta dt { color: var(--text-dim); }
.minside-fakta dd { margin: 0; }

/* --- Gussted-delen (etape 2): sektioner, felter, fotos, fliser, tjekliste ------------- */

/* Sektionen er et KORT - som i Anders' forlæg: titel til venstre, en kort forklaring
   til højre, en tynd streg under, og indholdet nedenunder. */
.minside-kortsektion {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.minside-kortsektion-hoved {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.minside-kortsektion-hoved h2 { margin: 0; font-size: 1.15rem; }
.minside-kortsektion-hoved p { margin: 0; max-width: 46ch; color: var(--text-dim); font-size: 0.88rem; line-height: 1.45; }

/* Indhold + højre spalte (tjeklisten). Én spalte på smalle skærme. */
.minside-to-spalter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 1.25rem;
    align-items: start;
}

.minside-spalte-side { position: sticky; top: 1rem; }

.minside-felter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.minside-felt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 0;
}

.minside-felt-bred { grid-column: 1 / -1; }

.minside-felt input,
.minside-felt textarea,
.minside-felt select {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font: inherit;
    font-weight: 400;
    color: var(--text);
}

.minside-felt textarea { min-height: 7rem; line-height: 1.5; resize: vertical; }
.minside-felt input[readonly] { color: var(--text-dim); background: var(--surface); }

.minside-gem {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.minside-forslag {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--warm);
    background: #f6e9cf;
    border-radius: var(--radius);
    line-height: 1.5;
}

/* Fotos: tre kolonner kort med billede, kildetekst og knapper under. */
.minside-fotoliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.minside-foto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.minside-foto-billede {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-blok);
    background: var(--bg);
}

.minside-foto-billede img { width: 100%; height: 100%; object-fit: cover; }

.minside-foto-maerke {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    background: rgb(0 0 0 / 65%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.minside-foto-kilde { display: flex; gap: 0.4rem; }
.minside-foto-kilde input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
}

.minside-foto-knapper { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.minside-valgt,
.minside-valgt:disabled {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    opacity: 1;
}

.minside-upload { align-items: end; }

/* Fil-input skjult bag en rigtig knap: label'en ER knappen, så den kan rammes med
   tommelfingeren og læses af en skærmlæser. */
.minside-filknap { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.minside-filknap input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Faciliteter som fliser (Anders' forlæg): to kolonner, et flueben pr. flise, den valgte
   har en kraftig kant. */
.minside-fliser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.minside-flise {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 48px;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
    cursor: pointer;
}

.minside-flise input { width: 1.15rem; height: 1.15rem; margin: 0; }
.minside-flise-valgt { border: 2px solid var(--accent); padding: calc(0.6rem - 1px) calc(0.85rem - 1px); background: var(--bg); font-weight: 600; }

/* Tjeklisten: højre spalte, "Det mangler 5 af 7". */
.minside-tjekliste {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-blok);
    background: var(--surface);
}

.minside-tjekliste-titel {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.6rem;
    font-weight: 700;
}

.minside-tjekliste-titel span { color: var(--text-dim); font-weight: 400; font-size: 0.88rem; }
.minside-tjekliste ul { margin: 0; padding-left: 1.1rem; line-height: 1.8; }

.minside-maerkat-admin { background: var(--accent); color: var(--accent-contrast); }

/* --- Dialoger (Radix) ----------------------------------------------------------------- */

.minside-dialog-skygge {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(0 0 0 / 40%);
}

.minside-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 61;
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    padding: 1.4rem 1.5rem 1.25rem;
    border-radius: var(--radius-blok);
    background: var(--surface);
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

.minside-dialog-bred { width: min(40rem, calc(100vw - 2rem)); }
.minside-dialog-titel { margin: 0 0 0.4rem; font-size: 1.2rem; }
.minside-dialog-tekst { margin: 0 0 1.1rem; color: var(--text-dim); line-height: 1.5; }

.minside-dialog-knapper {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.minside-knap-slet { background: var(--danger); color: #fff; }
.minside-knap-slet:hover { filter: brightness(0.92); }

/* --- Telefonen: menuen er en skuffe -------------------------------------------------- */

.minside-menuknap { display: none; }
.minside-skygge { display: none; }

@media (max-width: 56rem) {
    .minside-ramme { grid-template-columns: 1fr; }

    .minside-menuknap {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin: 1rem 1rem 0;
        padding: 0.55rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-blok);
        background: var(--surface);
        font: inherit;
        cursor: pointer;
    }

    /* Skuffen ligger over indholdet mens den er åben - der er ikke plads til begge,
       og indholdet er dét man kom efter. */
    .minside-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(19rem, 86vw);
        max-height: none;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        box-shadow: 0 0 2rem rgb(0 0 0 / 25%);
    }

    .minside-skuffe-aaben .minside-sidebar { transform: translateX(0); }

    .minside-skygge {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgb(0 0 0 / 35%);
    }

    .minside-indhold { padding: 1rem 1rem 3rem; }
    .minside-hoved { flex-wrap: wrap; }
    .minside-hoved h1 { font-size: 1.6rem; }
    .minside-kort-liste { grid-template-columns: 1fr; }
    .minside-to-spalter { grid-template-columns: 1fr; }
    .minside-spalte-side { position: static; order: -1; }
    .minside-felter { grid-template-columns: 1fr; }
    .minside-kortsektion { padding: 1rem; }
}

/* ---- Min side, etape 3: administrator ------------------------------------------------
   Genbruger de gamle admin-mønstre (.drift-stats, .bar-chart, .admin-table, .venue-pending)
   - kun rammen omkring dem er ny. */
.minside-advarsel {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-blok);
    background: #f6e9cf;
    color: #8a5a1f;
    font-weight: 600;
}
.minside-advarsel a { color: inherit; }

.minside-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1.25rem; }
.minside-felt-vokser { flex: 1 1 16rem; }
.minside-chips { margin: 0 0 1.25rem; }
.minside-underoverskrift { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.minside-bulk { margin-bottom: 1.25rem; }
.minside-ventende-navn { margin: 0 0 0.3rem; font-size: 1.25rem; }
.minside-knapper-venstre { justify-content: flex-start; flex-wrap: wrap; }
.minside-hoved-knapper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.minside-kortsektion .admin-table-wrap { margin-top: 0.5rem; }

/* Skift til-kortene (13/10-2026): hele kortet er ét link. Uden foto står ikonet på havre. */
.minside-skiftkort > a { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
/* Hover KUN med en rigtig mus: på iPhone gjorde understregningen første tryk til et
   "hover-tryk", og først andet tryk skiftede til gusstedet (Anders' optagelse 14/10-2026). */
@media (hover: hover) { .minside-skiftkort > a:hover .minside-skiftkort-navn { text-decoration: underline; } }
.minside-skiftkort .minside-kort-foto img { display: block; }
.minside-skiftkort-ikon { display: flex; align-items: center; justify-content: center; height: 9rem; background: var(--bg); color: var(--accent); }
.minside-skiftkort-navn { display: block; font-weight: 700; font-size: 1.05rem; }
.minside-skiftkort .minside-kort-meta { display: block; }

.minside-felt-info { font-weight: 400; color: var(--text-dim); font-size: 0.82rem; }

/* Saunagus-siden: forsidens kort i en sektion - samme kort, ingen ekstra ramme. */
.minside-hentet { margin: 0 0 0.75rem; font-weight: 600; }
.minside-forsidekort { margin: 0; padding: 0; list-style: none; }

.minside-gusmester-linje { display: flex; gap: 0.5rem; align-items: center; }
.minside-gusmester-linje input { flex: 1 1 auto; }
.minside-tilfoej { align-self: flex-start; }

/* Formatfelt: en rigtig editor (Tiptap) til beskrivelserne (13/10-2026). Fladen ligner
   et tekstfelt; indholdet er formateret som på stedets side (.venue-tekst). */
.minside-editor { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-weight: 400; }
.minside-editor:focus-within { border-color: var(--accent); }
.minside-formatlinje { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.minside-formatlinje button { min-height: 36px; min-width: 40px; padding: 0.2rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.minside-formatlinje button.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.minside-editor-flade { min-height: 8rem; padding: 0.6rem 0.75rem; outline: none; }
.minside-se-siden { margin-top: 1rem; }
.minside-se-siden .btn { width: 100%; justify-content: center; }

/* Min gusmesterprofil (13/10-2026). */
.minside-luft-over { margin-top: 0.9rem; }
.minside-portraet { display: block; height: 160px; width: auto; max-width: 100%; margin-bottom: 0.9rem; border-radius: var(--radius); object-fit: cover; }
.minside-to-felter { display: grid; grid-template-columns: 1fr 6.5rem; gap: 0.5rem; }
.minside-felt-titel { margin: 1.1rem 0 0.5rem; font-size: 0.85rem; font-weight: 600; }

.minside-forbehold { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 0.9rem; }
.minside-forbehold summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.minside-forbehold ul { margin: 0.25rem 0 0; padding-left: 1.2rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
    .minside-sidebar { transition: none; }
}