/* Kategori-chips: regnbuefarvede, klikbare niveauer. Deles af galleriets
   mapper (#show_kategorier) og lounge-kategorierne (#lounge_categories).
   Selve farven sættes inline fra JS (hsl-fordeling, 360/antal). */
.bf-category-chips {
    display: flex;
    flex-wrap: wrap;

    & > div {
        padding: 1em 1.5em;
        margin: 0.3em;
        cursor: pointer;
    }
}

/* Tekst klippet til N linjer (kun mobil) med en "vis alt"-toggle. Antal
   linjer sættes inline fra JS (_elements.clampText) via --bf-clamp-lines.
   Toggle'en tilføjes kun når teksten reelt er klippet. */
body.is-mobile-layout .bf-clamp:not(.is-expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--bf-clamp-lines, 6);
    overflow: hidden;
}

.bf-clamp-toggle {
    display: inline-block;
    margin: 0.15rem 0 0.4rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-blue);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

/* Søgebar: tekstfelt + ikon-knap som én samlet pille. Ingen mellemrum og
   runde hjørner kun på yderkanten, så input + knap visuelt deler én
   container. Deles af lounges-søg (#loungeform) og debat-filterets søgefelt
   (#kategoriform). .bf-searchbar-select genbruger felt-stilen til en
   dropdown ved siden af. */
.bf-searchbar {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.bf-searchbar-input,
.bf-searchbar-select {
    min-height: 2.5em;
    padding: 0.5em 0.75em;
    font-size: 16px;
}

.bf-searchbar-input {
    flex: 1;
    min-width: 0;
    border-radius: 0.4rem 0 0 0.4rem;
}

.bf-searchbar-select {
    width: 100%;
    border-radius: 0.4rem;
}

.bf-searchbar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Kvadratisk: bredden følger pillens (stretchede) højde, så knapperne
       bliver større, lettere tap-mål på mobil i stedet for smalle striber.
       min-width er en fallback hvis aspect-ratio ikke slår igennem. */
    aspect-ratio: 1;
    min-width: 2.5em;
    background: var(--accent-blue);
    color: var(--white);
    text-decoration: none;

    /* Tving SVG-størrelse så ikonet ikke render'er i sin naturlige (kæmpe)
       viewBox-størrelse på desktop. */
    & svg {
        width: 1.25em;
        height: 1.25em;
        display: block;
    }
}

/* Sekundær, dæmpet knap — fx "Ryd" ved siden af den primære (blå) søg-knap. */
.bf-searchbar-btn-reset {
    background: var(--steel);
}

/* Afrunding følger positionen i pillen, så vilkårligt mange knapper kan
   stå i rad: inputtet (først) afrundes til venstre via .bf-searchbar-input,
   det sidste element til højre, og mellemliggende knapper er flade. */
.bf-searchbar > :last-child {
    border-top-right-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}

/* På subcategory-siden følger "Lounges"-headeren lige efter chips'ene; giv
   lidt luft imellem (lounge-visningen har en beskrivelse mellem chips og
   resten, så den scopes herfra og ikke på den delte .bf-category-chips). */
#lounges_location {
    margin-bottom: 0.75em;
}

.section_pictures {
    & .gallery_picture_container_frame {
        &:hover .gallery_picture_edit {
            display: block;
        }

        & .gallery_picture_edit {
            position: absolute;
            bottom: 0;
            display: none;
            text-align: center;
            background-color: var(--white);
            width: 100%;

            & > div,
            & > a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                padding: 0.5em;
            }

            & .movebox svg {
                display: block;
            }

            & > a.bf-gallery-action-icon {
                width: 1.75rem;
                height: 1.75rem;
                padding: 0.35em;
                color: var(--surface-mid);
                text-decoration: none;

                & svg {
                    width: 1.05rem;
                    height: 1.05rem;
                    display: block;
                }

                &:hover {
                    color: var(--brand-pink);
                }
            }

        }
    }

    & #show_inbox {
        background-color: var(--white);
        padding: 2em;
        margin: 2em 0 2em 0;

        & h1 {
            margin: 0 0 0.5em 0.3em;
        }
    }

    & #show_kategorier {
        background-color: var(--white);
        padding: 2em;
        margin: 2em 0 0 0;
        display: none;

        & h1 {
            margin: 0 0 0.5em 0.3em;
        }

        & .edit {
            display: none;
            float: right;
        }

        & .container {
            max-height: 20em;
            overflow: auto;

            /* Galleriets mapper fylder rækken ud; lounge-kategorierne
               (samme chips) får lov at følge indholdsbredden. */
            & > div {
                flex-grow: 2;
            }
        }
    }

    #attach {
        padding: 1.25rem;
        background-color: var(--white);
    }

    & :is(#show_inbox, #picture_container) {
        & .gallery_container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

            & .gallery_picture_container_frame {
                margin: 0.5em;
                position: relative;
                aspect-ratio: 1;
                text-align: center;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                cursor: pointer;
                border-radius: 1em;
                border: 1px solid var(--blue-dark);
                overflow: hidden;

                & .details {
                    display: none;
                    border-radius: 1em;
                    background-color: var(--white);
                    opacity: 90%;
                    margin: 1em;
                    padding: 0.5em;

                    & .date {
                        font-size: var(--fs-xs);
                        font-weight: bold;
                    }

                    & .text {
                        font-size: var(--fs-sm);
                    }

                    & .mediatype {
                        font-weight: bold;
                    }

                    & .pic_hidden {
                        color: var(--red);
                        font-weight: bold;
                    }
                }

                &:hover .details {
                    display: block;
                }
            }
        }
    }

    & #show_inbox {
        display: none;

        & .gallery_container .gallery_picture_container_frame .details {
            & .inbox {
                margin: 1em 0 0 0;

                &:hover + div {
                    display: grid;
                }

                & > div {
                    margin: auto 0.5em auto 0;
                }

                & > div:nth-child(odd) {
                    font-weight: bold;
                    text-align: left;
                }

                & > div:nth-child(even) {
                    text-align: right;
                }
            }
        }
    }

    & #picture_container {
        & .gallery_header {
            padding: 1em;
            margin: 1em 0 1em 0;
            font-weight: bold;
            color: var(--gray-text);
            background-color: var(--blue-dark);
        }

        & .gallery_header_light {
            padding: 1em;
            margin: 1em 0 1em 0;
            font-weight: bold;
            color: var(--gray-text);
            background-color: var(--white);
        }

        & .gallery_container .gallery_picture_container_frame .details {
            & .movebox {
                margin: 0;
                padding: 0;
            }
        }
    }

    & #show_nopictures {
        margin: 3em 3em 5em 0em;
        display: none;
    }

    & #show_private {
        display: none;
    }

    & #show_report {
        display: none;
    }

    & #show_upload {
        display: none;
    }

    & #show_upload_box {
        display: none;
    }

    & #show_additional {
        display: none;

        & div {
            width: 21.88rem;
            margin-top: 4em;
        }
    }
}

.section_login {
    /* Hero-billede: serveren sætter .bg1/.bg2/.bg3 på hero-båndet (random
       1-3). Map hver til sit billede (kun brugt på desktop-hero'en). */
    & .bg1 { background-image: url('/static/static/themes/1/login/random/1.jpg'); }
    & .bg2 { background-image: url('/static/static/themes/1/login/random/2.jpg'); }
    & .bg3 { background-image: url('/static/static/themes/1/login/random/3.jpg'); }

  /* === MOBIL: centreret login-kort ===
     Fuldt scopet under is-mobile-layout, så INTET af dette rører desktop.
     Ingen header (skjult i mobile.css under is-logged-out). De to top-divs
     (velkomst + panel) reflowes til ét hvidt kort: logo → intro → felter →
     "Bliv medlem". Baggrunden er body'ens egen brand-gradient (transparent her). */
  body.is-mobile-layout & {
    background: var(--trans-a00);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;            /* de to kort-halvdele skal sidde sømløst sammen */
    box-sizing: border-box;

    /* Fælles bredde for logo-frame + kort. */
    & > div:nth-child(1),
    & > div:nth-child(2) {
        width: 100%;
        max-width: 22rem;
        box-sizing: border-box;
    }

    /* div(1) = velkomst-wrapper = kortets TOP. Logoet kommer fra den rigtige
       header (#toprowcontainer) ovenfor — INGEN injiceret logo her. */
    & > div:nth-child(1) {
        background-image: none !important;
        text-align: center;

        & h1 { display: none; }              /* headeren har allerede logoet */

        /* Intro-teksten på hvid kort-top. */
        & > div {
            background: var(--white);
            border-radius: var(--radius-card) var(--radius-card) 0 0;
            padding: 1.25rem 1.25rem 0.75rem;
        }

        & p {
            margin: 0.5rem 0;
            font-size: var(--fs-sm);
            color: var(--gray-text);
            line-height: 1.4;
        }
    }

    & > div:nth-child(2) {
        background: var(--white);
        padding: 0.5rem 1.25rem 1.5rem;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: 0 4px 18px var(--trans-a30);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        /* "Bliv medlem" som sekundær handling UNDER login-felterne. */
        & > div:nth-child(1) {
            order: 2;
            border-top: 1px solid var(--gray-soft);
            padding-top: 1rem;
            text-align: center;

            & h7 { display: none; }
            & p { font-size: var(--fs-sm); color: var(--gray-text); margin: 0 0 0.6rem; }

            & .blivmedlem {
                float: none;
                & a { display: inline-flex; }
            }
        }

        /* Log ind-blokken først. */
        & > div:nth-child(2) {
            order: 1;

            & h7 {
                display: block;
                font-size: var(--fs-h3);
                font-weight: 700;
                color: var(--surface-dark);
                margin: 0 0 0.5rem;
            }
        }

        /* Gemte logins (hvis nogen) nederst i kortet. */
        & .logins_saved {
            order: 3;
            border-top: 1px solid var(--gray-soft);
            padding-top: 0.85rem;

            & h7 { font-size: var(--fs-sm); font-weight: 700; color: var(--gray-text); }
            & p  { font-size: var(--fs-xs); color: var(--gray-text); margin: 0.2rem 0 0.5rem; }

            /* Hver gemt login = to flade søskende-divs [brugernavn, "glem login"].
               2-kolonne grid med row-flow lægger brugernavn (1fr) til venstre og
               "glem login" (auto) til højre på samme række — én login pr. række. */
            & .logins_container {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: stretch;
                gap: 0.4rem 0.6rem;
            }

            /* Brugernavn: tap-bar link — ikke en knap/input. Bare lidt lodret
               padding for et behageligt tap-mål. */
            & .logins_container > div:nth-child(odd) {
                cursor: pointer;
                display: flex;
                align-items: center;
                padding: 0.35rem 0;
                color: var(--accent-blue);
                font-weight: 600;
                font-size: var(--fs-sm);

                &:active { opacity: 0.6; }
            }

            /* "glem login": dæmpet sekundær-handling til højre. */
            & .logins_container > div:nth-child(even) {
                cursor: pointer;
                align-self: center;
                justify-self: end;
                color: var(--gray-text);
                font-size: var(--fs-xs);
                text-decoration: underline;
            }
        }

        & .login {
            /* 2-kolonne grid: brugernavn + adgangskode spænder fuld bredde,
               nederste række = "Husk mig"-blok (venstre) + Log ind-knap (højre). */
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 0.6rem 0.75rem;

            & > div { margin: 0; }

            /* Brugernavn (1) + adgangskode (2): fuld bredde. */
            & > div:nth-child(1),
            & > div:nth-child(2) {
                grid-column: 1 / -1;
            }

            & label, & > div { font-size: var(--fs-sm); color: var(--surface-dark); }

            & input:not([type=checkbox]) {
                width: 100%;
                height: 2.6em;
                font-size: 16px;
                box-sizing: border-box;
                border: 1px solid var(--gray-line-soft);
                border-radius: var(--radius-sm);
                padding: 0 0.6em;
                margin-top: 0.15rem;
            }

            /* Husk mig + glemt login — venstre celle i nederste række. */
            & .login_remember {
                grid-column: 1;
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                gap: 0.4rem;
            }

            & .forgot {
                color: var(--accent-blue);
                font-size: var(--fs-xs);
                text-decoration: none;
            }

            /* Log ind-knap — højre celle ved siden af Husk mig. */
            & .fright {
                grid-column: 2;
                float: none;
            }

            & .submit { width: 1px; height: 0; overflow: hidden; }
        }

        form .submit { display: none; }

        /* Log ind + Bliv medlem: samme primær-knap som resten af mobil-sitet
           (.btn_normal/.btn_big[data-submit] → fuld bredde, --c-6666ff blå).
           Begge er span.btn_big med pil + tekst + .clear; skjul pil/clear og
           gør pillen fuld bredde. */
        & .btn_big {
            /* Flex-centrering så teksten sidder midt i pillen uanset .btn_big's
               legacy float/clear/vertical-align-internals (de klippede teksten
               når den bare var display:block). */
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 100%;
            min-height: 2.75rem;
            padding: 0.5rem 0.88rem;
            border-radius: 0.62rem;
            background: linear-gradient(180deg, var(--c-6666ff) 0%, var(--c-6666ff) 100%);
            color: var(--white);
            font-weight: 600;
            font-size: var(--fs-body);
            line-height: 1.2;
            text-decoration: none;
            box-shadow: 0 1px 2px var(--trans-a30);
            cursor: pointer;

            &:active {
                background: linear-gradient(180deg, var(--c-6666ff) 0%, var(--c-2c46c8) 100%);
            }

            /* Neutralisér legacy-spans: pil + clear skjules, tekst-span nulstilles
               (den havde vertical-align:top + evt. translateY der skubbede den op). */
            & > .arrow,
            & > .clear { display: none; }

            & > span {
                transform: none;
                vertical-align: middle;
                line-height: 1.2;
            }
        }
    }
  }

  /* === DESKTOP (alt der IKKE er mobil-layout): original hero + 3-kolonne-
     panel. Fuldt scopet, så mobil-kortets stilarter aldrig lækker herind. === */
  body:not(.is-mobile-layout) & {
        & > div:nth-child(1) {
            height: 15.25rem;
            padding: 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;

            & > div {
                width: 17.5rem;
                position: relative;
                float: left;
                top: 2.19rem;
                left: 19.06rem;
            }

            /* Logo-injektionen er mobil-only; skjul på desktop hvis tilstede. */
            & .bf-login-logo { display: none; }
        }

        & > div:nth-child(2) {
            display: grid;
            background-image:
                radial-gradient(ellipse 60% 80% at 35% 30%, rgba(255,255,255,0.55) 0%, transparent 70%),
                linear-gradient(to bottom right, #bccbd2 0%, #d2dee2 55%, #e2ebee 100%);
            background-color: var(--trans-a00);
            /* Auto-højde (var fast 9.88rem) — moderne, luftigere felter + knapper
               kræver mere plads end den gamle kompakte højde. */
            height: auto;
            min-height: 9.88rem;
            grid-template-columns: 6fr 5fr 5fr;
            padding: 2.25em 2.5em;
            gap: 2.5em;
            box-sizing: border-box;

            /* Kolonne-overskrifter: lettere, moderne — men hvide som originalt. */
            & h7 {
                display: block;
                font-size: 1.4rem;
                font-weight: 700;
                letter-spacing: -0.01em;
                color: var(--white);
                margin: 0 0 0.6rem;
            }

            & p {
                color: var(--gray-text);
                line-height: 1.45;
                margin: 0 0 1rem;
            }

            .blivmedlem {
                float: none;
                margin-top: 0.5rem;
            }

            .login {
                display: grid;
                margin: 0;
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem 0.9rem;
                align-items: end;

                /* Felt-labels: små, dæmpede. */
                & > div { font-size: var(--fs-sm); color: var(--gray-text); }

                /* Moderne inputfelter: fuld kolonnebredde, padding, blødt
                   fokus. (Erstatter de bittesmå 7.19rem browser-defaults.) */
                & div > input:not([type=checkbox]) {
                    width: 100%;
                    height: auto;
                    box-sizing: border-box;
                    padding: 0.5rem 0.65rem;
                    margin-top: 0.2rem;
                    font-size: 0.95rem;
                    border: 1px solid var(--gray-line-soft);
                    border-radius: var(--radius-sm);
                    background: var(--white);
                    transition: border-color 0.12s, box-shadow 0.12s;

                    &:focus {
                        outline: none;
                        border-color: var(--accent-blue);
                        box-shadow: 0 0 0 3px rgba(74, 107, 138, 0.18);
                    }
                }

                /* Husk mig + glemt login — venstre, under felterne. */
                & .login_remember {
                    grid-column: 1;
                    display: grid;
                    grid-template-columns: auto 1fr;
                    align-items: center;
                    gap: 0.4rem;
                    justify-self: start;
                }

                & .forgot {
                    color: var(--accent-blue);
                    font-size: var(--fs-xs);
                    text-decoration: none;

                    &:hover { text-decoration: underline; }
                }

                /* Log ind-knap — højre, ud for husk-mig-rækken. */
                & .fright {
                    grid-column: 2;
                    display: block;
                    justify-self: end;
                    align-self: center;
                    padding: 0;
                }
            }

            /* Den native submit-knap (.submit > input[type=submit]) er en
               søskende til .login og skal være skjult — den rigtige knap er den
               stylede .btn_big "Log ind". */
            form .submit {
                display: none;
            }

            & .logins_saved {
                & .logins_container {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 0.3rem;
                    margin-top: 0.5rem;
                }

                /* Brugernavn = link, "glem login" = dæmpet. */
                & .logins_container > div:nth-child(odd) {
                    cursor: pointer;
                    color: var(--accent-blue);
                    font-weight: 600;
                    &:hover { text-decoration: underline; }
                }
                & .logins_container > div:nth-child(even) {
                    cursor: pointer;
                    color: var(--gray-text);
                    font-size: var(--fs-xs);
                    margin-bottom: 0.4rem;
                    &:hover { text-decoration: underline; }
                }
            }
        }

    }
}

/* ====================================================================
    Section: Profile
    ==================================================================== */
.section_profile {
    & .inter {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    & .inter span {
        font-size: large;
        opacity: 40%;
        cursor: pointer;

        &[selected] {
            opacity: 100%;
        }

        &:hover {
            opacity: 100%;
        }
    }

    & .top {
        display: grid;
        /* Mobil: stack billede over detaljer/fakta. */
        grid-template-columns: 1fr;
        gap: 1em;

        @media (min-width: 64em) {
            grid-template-columns: 1fr 1fr;
        }

        & #profile_picture {
            & .picture_container {
                padding: 1em;
                /* Mobil: lad højden vokse med indholdet (no_picture
                   placeholderen) i stedet for fast 25em.
                   Specialiseret hero-redesign til mobil med rigtigt
                         billede ligger i den mobile sektion under
                   `.section_profile:has(#profile_picture ...)`. */
                height: auto;
                min-height: 18em;
                border-radius: 0.5em;
                background-color: var(--blue-dark);
                text-align: center;

                @media (min-width: 64em) {
                    height: 25em;
                    min-height: 0;
                }

                & img {
                    max-width: 100%;
                    max-height: 100%;
                    border-radius: 0.31rem;
                }

                & .no_picture {
                    margin-top: 0;
                    /* Tone placeholderen ned: ikke fuld bredde, centreret
                     og lidt gennemsigtig så den ikke dominerer profilen. */
                    width: 60%;
                    aspect-ratio: 1 / 1;
                    margin-inline: auto;
                    opacity: 0.8;

                    & > svg {
                        width: 100%;
                        height: 100%;
                    }
                }

                & > div {
                    margin-top: 2em;
                }
            }
        }

        & #profile_details {
            display: flex;
            justify-content: space-between;
            border-radius: var(--radius-card);
            font-weight: bold;
            padding: 1em;
            background-color: var(--surface-panel-strong);

            & > div:nth-child(1) {
                padding-right: 1em;
                text-align: right;
            }
        }

        & :is(#fact_container, #interact) {
            display: grid;
            margin-top: 0.3em;
            gap: 0.5em;

            & > div {
                padding: 0.5em;
                border-radius: var(--radius-panel);
                /* Mobil: lille kant så de står som distinkte tiles
                   uden at have desktop's omkringliggende blue-dark wrap. */
                border: 1px solid var(--surface-border);

                @media (min-width: 64em) {
                    border: 0;
                }

                & div:nth-child(2) {
                    font-weight: bold;
                }
            }
        }

        & #fact_container {
            width: 100%;
            grid-template-columns: repeat(3, auto);

            & > div {
                background-color: var(--surface-panel);
            }
        }

        & #interact {
            grid-template-columns: 1fr 1fr;

            & > div {
                background-color: var(--surface-panel);
            }
        }

    }

    & #profile_new {
        cursor: pointer;
    }

    & #profile_chat {
        /* Mobil: trim 3em → 1em. Hero-redesignet i den mobile sektion positionerer
           dette element absolut når der er et billede; her sætter vi blot
           en fornuftig non-hero default. */
        margin: var(--space-section-mobile);
        padding: 0 0 0.31rem 0;
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--surface-dark);

        @media (min-width: 64em) {
            margin: var(--space-section-desktop);
        }

        & > [data-auto="icon"] {
            display: inline-flex;
            width: 1.8em;
            height: 1.8em;
            flex: 0 0 auto;
        }
        & > [data-auto="icon"] svg {
            width: 100%;
            height: 100%;
        }
        & a {
            font-weight: bold;
            text-decoration: none;
            min-height: 1.8em;
            display: inline-flex;
            align-items: center;
        }
    }

    & #profile_lounges {
        & div {
            font-weight: bold;
        }

        & a {
            padding: 0.7em 0.7em 0.7em 0;

            &[data-common='1'] {
                font-weight: bold;
            }
        }
    }

    #profile_report {
        background-color: var(--surface-panel);
        display: flex;
        align-items: center;
        gap: 0.5rem;

        & > .bf-report-cta__icon {
            padding-left: 1rem;
            display: inline-flex;
            width: 3.46rem;
            height: 3.46rem;

            & svg {
                width: 100%;
                height: 100%;
            }
        }

        & > .bf-report-cta__link {
            flex: 1;
            padding: 1.56rem 0 0.62rem 1.25rem;
            text-decoration: none;
            color: var(--steel);
            font-size: var(--fs-xs);
        }
    }

    #profile_fav_note {
        padding: 2em;
        display: flex;

        &>div {
            width: 50%;
        }

        & #profile_favorites > div {
            margin: 1em 0 0 0;
            cursor: pointer;
            display: flex;
            align-items: center;

            & .pf-action-icon {
                display: inline-flex;
                width: 1.25rem;
                height: 1.25rem;
                margin-right: 0.62rem;
                vertical-align: middle;
                color: var(--surface-mid);

                & svg {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            &#favorite_rem .pf-action-icon {
                color: var(--orange);
            }

            &:is(#ignore_add, #ignore_add_cool, #ignore_no) .pf-action-icon {
                color: var(--brand-pink);
            }
        }

        & #profile_notes {
            & textarea {
                width: 100%;
                border: none;
                overflow: auto;
            }

            & div {
                padding-top: 0.5em;
                float: right;
            }
        }
    }

    .admin_profile_cases {
        & .admin-restore {
            padding: 0.5em 1em 1em 1em;

            & p {
                margin: 1em;
            }
        }

        & .admin-note-none {
            padding: 0.5em 1em 1em 1em;
        }

    }

}

.section_diary {
    & #diary_subscribe {
        background-color: var(--blue-dark);
        padding: 1em;
    }

    /* .edit_options lå før under `#diary_write` (et id som template.js
       udleder af data-template). Et id slår mobil-reglens
       `body.is-mobile-layout .section_diary .edit_options` på specificitet, så
       mobil-layoutet aldrig vandt. Scopet er nu klassebaseret = samme desktop-
       look, men mobil-overstyringen kan tage over. */
    & .edit_options {
        padding: 2em 0 2em 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;

        & > div:nth-child(3) {
            justify-self: end;
        }

        & > div > div {
            padding: 0.5em 0 0 0.7em;
        }

        & select {
            width: 6.25rem;
        }
    }

    & #diary-container {
        & .diary-item {
            & .diary-header {
                padding: 1em;
                background-color: var(--blue-dark);
                display: flex;
                justify-content: space-between;

                & .diary-date {
                    color: var(--black);
                    padding-top: 0.19rem;
                    font-weight: bold;
                }

                & .diary-actions {
                    text-align: right;

                    & a {
                        margin: 0.5em;
                    }

                    & a.diary_action_icon > [data-auto="icon"] {
                        display: inline-flex;
                        width: 0.92rem;
                        height: 0.92rem;
                        vertical-align: middle;
                    }

                    & a.diary_action_icon > [data-auto="icon"] svg {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }

            & .diary-note {
                padding: 1em 2em 1em 2em;
                border-bottom: 1px solid var(--blue-dark);
            }

            & .diary-text {
                word-wrap: break-word;
                padding: 2em;
                background-color: var(--white);
            }

            & .diary-likedata {
                padding: 1em 2em 2em 2em;
            }
        
        }
    }
}

.section_guestbook {
    font-size: var(--fs-xs);

    & .visible_to {
        float: left;
        padding: 1em;

        & > div {
            padding-left: 0.31rem;
        }
    }

    & .submit {
        float: right;
        padding: 2em 0 2em 2em;
    }

    & #guestbook-container {
        & .guestbook-item {
            margin-bottom: 2em;

            & .guestbook-header {
                padding: 1em;
                background-color: var(--blue-dark);
                display: grid;
                /* Brugernavnet sizes til sit indhold (auto) så lange navne ikke
                   løber ind i datoen; column-gap holder afstand mellem dem.
                   Datoen tager den fleksible midte, actions ligger til højre. */
                grid-template-columns: auto 1fr auto;
                column-gap: 1em;
                align-items: baseline;

                & .guestbook-date {
                    font-weight: bold;
                }

                & .guestbook-actions {
                    text-align: right;

                    & a {
                        margin: 0.5em;
                    }
                }
            }

            & .guestbook-note {
                padding: 1em 2em 1em 2em;
                border-bottom: 1px solid var(--blue-dark);
                white-space: pre-line;
            }

            & .guestbook-text {
                padding: 2em;
                background-color: var(--white);
            }
        }
    }

    & #guestbook-none {
        padding: 2em;
    }
}

/* ====================================================================
   Section: Mail
   ==================================================================== */
.section_mail_inbox {
    --mail-cols: 48px minmax(0, 1fr) 40px 130px 110px;
    & .top {
        display: grid;
        grid-template-columns: 4fr 1fr;

        & div:nth-child(2) {
            justify-content: end;
        }
    }

     /* Heading bruger samme kolonnemodel som desktop-rækker:
         [ ikon | navn | status | dato | options ] */
    & #mail_heading {
        margin-bottom: 0;
        background-color: var(--blue-dark);
        font-weight: bold;
        padding: 0.6em 1em;
        color: var(--gray-text);
        display: grid;
        grid-template-columns: var(--mail-cols);
        column-gap: 0.75rem;
        align-items: center;

          /* Justér heading-celler til de relevante kolonner uden
              hardcoded margin-left på alle children. */
        & div {
            margin-left: 0;
        }
        & div:nth-child(1) { grid-column: 2; }
        & div:nth-child(2) { grid-column: 3 / span 2; }
        & div:nth-child(3) { display: none; } /* Dato-overskrift droppet — datoen taler for sig selv */
   }
}

/* === Desktop #mail_lines: række-layout, status og ulæst-state === */
#mail_lines {
    & > div.mail_container_div {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 40px 130px 110px;
        align-items: center;
        min-height: 1.88rem;
        padding: 0.19rem 1em;
        cursor: pointer;
        border-left: 0.38rem solid var(--trans-a00);
    }

    /* Grid styrer placering; children nulstilles til moderne layout. */
    & .mail_icon {
        width: 1.88rem;
        height: 1.88rem;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        align-self: center;
    }

    & > div.mail_container_div > div:first-child {
        grid-column: 1 / span 2;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.62rem;
    }

    & .mail_username {
        width: auto;
        flex: 1 1 auto;
        align-self: center;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .mail_status {
        align-self: center;
        margin: 0;
        position: static;
        color: var(--black);
        font-size: 11px;
        line-height: 1.1;
        overflow: hidden;

        & div {
            position: static;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        & img {
            /* Native bitmap-størrelse — ingen forced width/height. */
            flex-shrink: 0;
            vertical-align: middle;
        }

        & svg {
            width: 1.1rem;
            height: 1.1rem;
            flex-shrink: 0;
            vertical-align: middle;
            color: var(--gray-text);
        }

          /* Gentagen status-tekst skjules i listevisning; ikonet bærer
              meningen. Tooltip via alt/title bevares. */
        & div::after {
            content: none;
        }

        & > div {
                /* Skjul text-node via font-size:0; ikonet styres separat. */
            font-size: 0;
        }

        & > div > * {
            font-size: 11px;
        }
    }

    & .mail_date {
        float: none;
        align-self: center;
        line-height: 1.2;
        margin: 0;
        padding: 0;
        color: var(--gray-text);
        font-size: 11px;
    }

    & .mail_options {
        float: none;
        margin: 0;
        line-height: 1;
        text-align: right;
        opacity: 1;
        display: flex;
        gap: 0.25rem;
        justify-content: flex-end;
        align-items: center;
        align-self: center;
    }

    /* Ulæst: venstre-stribe + bold username, ikke bold på hele rækken. */
    & > div.mail_container_div.mail_unread {
        border-left-color: var(--accent-blue);
        background-color: var(--white);
    }

    & .mail_unread .mail_username {
        font-weight: 700;
        color: var(--surface-dark);
    }

    & .mail_unread .mail_date {
        font-weight: 700;
        color: var(--surface-dark);
    }

    /* Undgå "bold overalt" i ulæste rækker. */
    & .mail_unread > div {
        font-weight: normal;
    }

    /* Zebra-striber: light blue på lige rækker. */
    & > div:nth-child(odd) {
        background-color: var(--trans-a00);
    }

    & > div.mail_container_div:nth-child(even) {
        background-color: var(--blue-light);
    }
}

#mail_lines .mail_options span,
#mail_read .mail_options span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background-color: var(--trans-a00);
    color: var(--steel);
    border: 1px solid var(--gray-line-soft);
    cursor: pointer;
    border-radius: 0.25rem;
    font-weight: 600;
    padding: 0.12rem 0.38rem;
    line-height: 1;
    text-decoration: none;
    font-size: 10px;
    transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}
#mail_lines .mail_options span:hover,
#mail_read .mail_options span:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.section_mail_show {
    & #mail_blocked {
        padding-top: 0 ! important;
    }

    & .presence {
        padding-top: 0 ! important;
    }
}

.section_mail_show #mail_read > .mail_msg {
    padding: 0 1em;
	width: 100%;
    max-width: 100%;
}

.section_news {
    & #news_items {
        display: grid;
        grid-template-columns: 1fr 5fr;

        & > div {
            display: contents;
        }

        & > div:nth-child(odd) > div {
            background-color: var(--blue-dark);
            font-weight: bold;
            padding: 0.5rem;
        }

        & > div:nth-child(even) > div:nth-child(2) {
            background-color: var(--blue-light);
            padding: 1rem;
            margin: 0 0 1rem 0;

            & > div:nth-child(2) {
                font-size: var(--fs-xs);
                text-align: right;
                padding: 0.2rem 0 0 0;
                color: var(--steel);

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


/* ====================================================================
    Section: Controlpanel (hub + 9 sub-forms)
    Desktop: .punkt_container kort floater i 2 kolonner; mobil overskriver
    til iOS Settings-stil sammenhængende liste.
   ==================================================================== */
.section_controlpanel {
    & .punkt_container {
        margin: 0.94rem;
        width: 40%;
        float: left;
        height: 3.12rem;
    }

    body.is-mobile-layout & {
        & .punkt_container {
            float: none;
            width: 100%;
            /* Desktop låser højden til 3.12rem — mobil skal lade
               beskrivelses-teksten wrappe over flere linjer. */
            height: auto;
            margin: 0;
            padding: 0.7rem 0.85rem;
            background-color: var(--white);
            border-radius: 0;
            border-top: 1px solid var(--gray-line-soft);
            position: relative;

            /* Sidste kort i en gruppe får også bund-streg så listen lukker
               pænt før næste sektions-etiket. */
            &:last-of-type,
            &:has(+ h2) {
                border-bottom: 1px solid var(--gray-line-soft);
            }

            /* Subtilt chevron-indikator til højre — signalerer at rækken
               er en navigations-action. */
            &::after {
                content: '›';
                position: absolute;
                right: 0.85rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--gray-text);
                font-size: 1.4em;
                line-height: 1;
                opacity: 0.6;
            }

            & > a {
                display: block;
                font-weight: 600;
                font-size: var(--fs-body);
                color: var(--surface-dark);
                text-decoration: none;
                padding-right: 1rem;
            }

            & > p {
                margin: 0.1rem 0 0;
                color: var(--gray-text);
                font-size: var(--fs-sm);
                line-height: 1.3;
                padding-right: 1rem;
            }
        }
    }
}


/* ====================================================================
    Section: Notifications (list + settings)

    Notifikations-rækken deles af tre steder: den dedikerede side
    (.section_notifications), dropdown'en i status-panelet
    (#notifications_dropdown_body) og .compact-varianten samme sted. Derfor
    er rækken stylet GLOBALT (ikke mobil-scoped) så den ser ens og pæn ud på
    både desktop og mobil. Layout: [ikon] [navn / verbum+link] [dismiss].
   ==================================================================== */
.notifications_row {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--gray-line-soft);
    cursor: pointer;
}
.notifications_row:last-of-type {
    border-bottom: 1px solid var(--gray-line-soft);
}
.notifications_row.unread {
    background-color: var(--blue-light);
}
.notifications_row:hover {
    background-color: var(--gray-soft);
}

.notifications_actor_icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
}

.notifications_actor_name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-weight: 600;
    color: var(--surface-dark);
    text-decoration: none;
    font-size: var(--fs-body);
}

.notifications_text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: var(--fs-sm);
    color: var(--gray-text);
    line-height: 1.3;
}

.notifications_time {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    font-size: var(--fs-xs);
    color: var(--steel);
    margin-top: 0.1rem;
}

.notifications_dismiss {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    color: var(--steel);
    text-decoration: none;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
}
.notifications_dismiss:hover {
    color: var(--brand-pink);
    background: var(--gray-soft);
}

/* Compact (dropdown i status-panelet): ingen dismiss-kolonne, lidt tættere. */
.notifications_row.compact {
    grid-template-columns: 2rem 1fr;
    padding: 0.55rem 0.7rem;
}
.notifications_row.compact .notifications_actor_icon {
    width: 2rem;
    height: 2rem;
}

/* Status-panelets notifikations-ticker. Overskriften (#notifications_bell)
   genbruger .heading-stilen som de andre status-overskrifter; badgen skjules
   (teksten holdes ved lige for mobil-topbarens pille-spejling). Tickeren viser
   én ulæst notifikation ad gangen — klik markerer den læst og navigerer. */
#notifications_badge {
    display: none;
}
/* Tickeren ligner den gamle "seneste"-widget: ingen kort-baggrund, intet ikon
   (brugerinfo via hover-popup på navnet), lille tekst der flyder som én sætning
   uden tvungne linjeskift. Tekst er hvid som resten af status-panelet
   (.status_main color:white på steel-baggrund). */
#notifications_outer_container {
    /* Luft over overskriften. Afstanden NED til "dine gæster" ejes af det
       <br/> der står foran den overskrift (samme mekanisme som favoritter),
       så gabet er ens uanset om notifikations-blokken vises eller ej. */
    padding: 0.7rem 0 0;
}
#notifications_ticker .notifications_row {
    display: block;
    border: 0;
    background: none;
    /* Tæt på overskriften foroven; afstanden nedenunder ejes af container-
       paddingen. */
    padding: 0.1rem 0.35rem 0;
    font-size: var(--fs-xxs);
    line-height: 1.35;
    color: var(--white);
    animation: bf-notif-fade 0.4s ease;
}
#notifications_ticker .notifications_actor_name,
#notifications_ticker .notifications_text {
    font-size: var(--fs-xxs);
    color: var(--white);
}
#notifications_ticker .notifications_actor_name {
    cursor: pointer;
}
#notifications_ticker .notifications_target_link {
    color: var(--white);
    text-decoration: underline;
}
@keyframes bf-notif-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.section_notifications {
    body.is-mobile-layout & {
        & .notifications_empty {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--gray-text);
        }

        /* Notifikation-indstillinger: hver præference er et <label> med
           checkbox + tekst. Stilet som tap-bare rækker. */
        & .notifications_pref_line {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0.85rem;
            border-top: 1px solid var(--gray-line-soft);
            font-size: var(--fs-body);
            cursor: pointer;

            &:last-of-type {
                border-bottom: 1px solid var(--gray-line-soft);
            }

            & input[type="checkbox"] {
                width: 1.25rem;
                height: 1.25rem;
                accent-color: var(--accent-blue);
                flex: 0 0 auto;
            }
        }
    }
}


/* ====================================================================
    Section: Info (info, regler, kontakt, annoncering)
    Tekst-tunge sider — primært typografi + læselig liste-styling.
   ==================================================================== */
.section_info {
    body.is-mobile-layout & {
        & p,
        & li {
            line-height: 1.5;
        }

        & ul,
        & ol {
            padding-left: 1.25rem;
            margin: 0.5rem 0 1rem;
        }

        & li {
            margin-bottom: 0.35rem;
        }

        /* Status-ikon-legend ("Hvad betyder ikonerne?") — hver række
           som tap-bar entry med ikon + label. */
        & .info-status-legend {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 0.75rem 0;
            font-style: normal;

            & .info-status-row {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            & .info-status-icon {
                flex: 0 0 1.75rem;

                & svg {
                    width: 1.75rem;
                    height: auto;
                    display: block;
                }
            }
        }
    }
}


/* ====================================================================
    Section: Search
    Desktop bruger 6-kolonne filter-grid; mobil stacker alt single-column.
   ==================================================================== */
.section_search {
    body.is-mobile-layout & {
        & .search-details-grid {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 0.5rem 0;
            /* Fjern desktop-gridets boks-ramme (border: 1px solid blue-dark i
               boyfriend.css) — på mobil bruger vi flex-column med per-række
               border-bottom, så container-rammen er en synlig leftover. */
            border: 0;

            & > div {
                padding: 0.5rem 0;
                border-bottom: 1px solid var(--gray-line-soft);

                &:last-child {
                    border-bottom: 0;
                }
            }
        }

        & .search-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin: 0.5rem 0 0.25rem;
        }

        /* Galleri-filtrene ligger i template-wrappers (vises/skjules efter
           abonnement via inline display). Når de er synlige skal deres chips
           flyde ind i samme flex-række som de øvrige filter-chips — men kun
           override når wrapperen IKKE er skjult (display:none sættes inline af
           .hide() og må vinde). :not([style*="none"]) respekterer skjul. */
        & .search-options > [data-template]:not([style*="none"]) {
            display: contents;
        }

        /* Tap-bar pille-chip: hele labelen toggler checkboxen (native). Skifter
           til udfyldt accent-look når :checked. Den oprindelige checkbox skjules
           visuelt men beholdes i DOM så form-serialisering + :checked virker. */
        & .search-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.44rem 0.75rem;
            border: 1px solid var(--gray-line-soft);
            border-radius: var(--radius-lg);
            background: var(--surface-card);
            color: var(--surface-dark);
            font-size: var(--fs-sm);
            line-height: 1.1;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.12s, border-color 0.12s, color 0.12s;

            /* Skjul den native boks — chippen selv er den synlige tilstand.
               Beholder den fokuserbar/serialiserbar. */
            & > input[type="checkbox"] {
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
                margin: 0;
                pointer-events: none;
            }

            &:active {
                background: var(--blue-light);
            }

            &:has(> input:checked) {
                background: var(--accent-blue);
                border-color: var(--accent-blue);
                color: var(--white);
                font-weight: 600;
            }

            /* Tastatur-fokus: synlig ring uden at flytte layout. */
            &:has(> input:focus-visible) {
                outline: 2px solid var(--accent-blue);
                outline-offset: 1px;
            }
        }

        & .search_text_box {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.5rem;
        }

        & .postal-inputs {
            display: flex;
            align-items: center;
            gap: 0.4rem;

            & input[type="text"] {
                width: 4.5rem;
            }
        }

        /* Sektions-overskrifter (Tekstsøgning/Detaljer/Gemte søgninger) som
           flade iOS-uppercase-labels — samme udtryk som lounges/debat. Den
           globale .header (mobile.css) giver en grå-blå bjælke-baggrund; vi
           nulstiller den til transparent her, ligesom de andre sektioner. */
        & .header {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            color: var(--gray-text);
            padding: 1rem 0 0.4rem;
            margin-top: 0;
            background: var(--trans-a00);
        }

        /* Gruppe-overskrifter i detalje-formularen (Køn/Alder/Som er/Bopæl/
           Der søger/Filter osv.) er bare <b>. Giv dem samme dæmpede iOS-
           uppercase-label som sektions-headerne og lounges/debat — så hele
           siden har ét overskrifts-sprog. Undtag <b> inde i <label> (land-
           radioknapper: Danmark/Grønland/...) og slider-tallene (18/100). */
        & .search-details-grid b:not(label b):not(.bf-age-side-label b):not(.search-group-toggle) {
            display: block;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            color: var(--gray-text);
            margin-bottom: 0.15rem;
        }

        /* Sammenfoldelig chip-gruppe (search.js #enhanceCollapsibleGroups):
           titlen bliver en tap-bar række med en summary ("Alle" / valgte) til
           højre og en chevron. Kun én åben ad gangen. Selektoren matcher
           specificiteten af `b:not(label b)`-reglen ovenfor, så display:flex
           vinder over dens display:block. */
        & .search-details-grid b.search-group-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0;
            margin-bottom: 0;
            cursor: pointer;
            user-select: none;

            /* Samme iOS-label-typografi som de øvrige gruppe-titler. */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            color: var(--gray-text);

            /* Chevron via ::after — peger ned, roterer op når udfoldet. */
            &::after {
                content: '';
                width: 0.5rem;
                height: 0.5rem;
                border-right: 2px solid var(--gray-text);
                border-bottom: 2px solid var(--gray-text);
                transform: rotate(45deg);
                transition: transform 0.15s;
                flex: 0 0 auto;
            }

            &[aria-expanded="true"]::after {
                transform: rotate(-135deg);
            }
        }

        /* Summary-tekst (valgte chips eller "Alle"): skubbes helt til højre,
           normal-cased (ikke uppercase som titlen) så labels er læselige. */
        & .search-group-summary {
            margin-left: auto;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 400;
            font-size: var(--fs-sm);
            color: var(--surface-dark);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 60%;
        }

        & .search-group-body[hidden] {
            display: none;
        }

        /* Handlingsknapper (Gem valg | Nulstil | Søg). data-auto="knap" har
           erstattet <a> med <span class="btn_normal"> indeholdende pil + tekst
           + .clear. På mobil gør vi dem til fuldbredde touch-knapper i én række;
           "Søg" er den primære (accent), de øvrige dæmpede. */
        & .search-actions-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding-top: 1rem;

            & .search-actions-left,
            & .search-actions-right {
                display: contents;
            }

            & .btn_normal {
                flex: 1 1 8rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 2.75rem;
                padding: 0 1rem;
                border-radius: var(--radius-popover);
                background: var(--gray-line-soft);
                color: var(--surface-dark);
                font-size: var(--fs-sm);
                font-weight: 600;
                text-decoration: none;
                box-shadow: 0 1px 2px var(--trans-a20);

                /* Pilen inde i knappen larmer på de dæmpede knapper — skjul den,
                   så vi får en ren centreret label. */
                & > .left_arrow,
                & > .clear {
                    display: none;
                }

                & > span:nth-child(2) {
                    transform: none;
                }

                &:active {
                    filter: brightness(0.95);
                }

                /* Primær: Søg. */
                &[data-action="search-prepare"] {
                    flex-basis: 100%;
                    order: 3;
                    background: var(--accent-blue);
                    color: var(--white);
                }
            }
        }

        /* Gemte søgninger: tidligere bar header + tekstlinje. Nu et kort med
           liste-rækker (navn + "fjern"). loadSavedSearches() appender hver
           søgning som <div data-search-id><div><a>navn</a></div><div><a>fjern</a></div></div>. */
        /* Basis-reglen (boyfriend.css) gør sektionen til et 2-kolonne grid med
           display:contents på rækkerne (desktop name|fjern). På mobil vil vi
           have en simpel lodret kort-liste, så vi nulstiller grid + contents. */
        & .saved-searches-section {
            display: block;
            margin-top: 1.25rem;

            /* Undo base `& > div { display: contents }`. Header-wrapperen og
               hver gemt-søgning-række er direkte <div>-børn. */
            & > div {
                display: block;
            }

            & > div[data-search-id] {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                padding: 0.69rem 0.85rem;
                border: 1px solid var(--gray-soft);
                border-radius: var(--radius-card);
                background: var(--surface-card);
                margin-bottom: 0.4rem;

                /* Indre name/fjern-divs: base sætter padding:1em + contents-
                   arv; nulstil så flex-layoutet styrer. */
                & > div {
                    display: block;
                    padding: 0;
                    text-align: left;
                }

                & a {
                    text-decoration: none;
                    cursor: pointer;
                }

                /* Navn: primær, fylder pladsen. */
                & > div:first-child a {
                    font-weight: 600;
                    color: var(--surface-dark);
                }

                /* "fjern": dæmpet sekundær-handling. */
                & > div:last-child a {
                    color: var(--gray-text);
                    font-size: var(--fs-sm);
                }
            }

            /* Base `:nth-child(even) { text-align:right }` højre-stiller hver
               anden række — uønsket i den lodrette liste. */
            & > div:nth-child(even) {
                text-align: left;
            }

            & .notice {
                padding: 0.85rem;
                border: 1px dashed var(--gray-line-soft);
                border-radius: var(--radius-card);
                color: var(--gray-text);
                font-size: var(--fs-sm);
                text-align: center;
            }
        }
    }
}

/* Profilnavn-forslag (autocomplete): dropdown'en (.lists_suggest) er absolut
   positioneret. #search_suggest er nu en fuldbredde flex-item lige UNDER
   søgepillen, så den er den naturlige positioneringskontekst — dropdown'en
   ligger så automatisk klistret under inputtet uden hårdkodede offsets.
   Selve dropdown-stylingen ligger i boyfriend.css (.lists_suggest). */
#search_suggest {
    position: relative;
}


/* ====================================================================
    Section: Lounges (frontpage + subcategory, own, view, suggest)
    Frontpage DOM (bygges af lounges.js):
       .lounges-grid
         .lounges-left.mailheader > a   (kategori-titel)
         .lounges-right-line > a, a, a  (under-kategorier, inline)
       #lounges_newest > .table > {tile}
       #lounges_random > .table > {tile}
   ==================================================================== */
.section_lounges {
    body.is-mobile-layout & {
        & .lounges-grid {
            grid-template-columns: 1fr;
            row-gap: 0;
            margin: 0;
        }

        /* Kategori-overskrift (det sker, dagligt, ...) som iOS uppercase-label
           i stedet for mailheader-boks. */
        & .lounges-left.mailheader {
            background: var(--trans-a00);
            padding: 1.25rem 0.85rem 0.5rem;
            min-height: 0;

            & > a {
                text-transform: uppercase;
                letter-spacing: 0.06em;
                font-size: var(--fs-xs);
                font-weight: 700;
                color: var(--gray-text);
                text-decoration: none;
            }
        }

        /* Under-kategorier: vis som wrap'bare chips i stedet for en lang
           liste — gør det muligt at scanne hele indholdet af en kategori
           på få linjer i stedet for én række pr. underkategori. */
        & .lounges-right-line {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            border-top: 0;
            padding: 0 0.85rem 0.85rem;

            & > a {
                display: inline-flex;
                align-items: center;
                padding: 0.4rem 0.7rem;
                background: var(--blue-light);
                border-radius: 999px;
                font-size: var(--fs-sm);
                font-weight: 500;
                color: var(--surface-dark);
                text-decoration: none;
                border: 0;
                line-height: 1.2;
                white-space: nowrap;
            }
        }

        /* Teaser-sektionen "Nyeste / 20 hurtige" som 2-kolonne grid på
           mobil. Desktop's `.lounges_teasers>div { float:left; min-width:
           18.75rem; width:50% }` (boyfriend.css:1176) nulstilles så grid-
           layout kan styre kolonnerne — `min-width: 0` lader cellerne
           shrinke under deres naturlige indhold, ellers ville titlerne
           tvinge hver kolonne bredere end skærmen. */
        & .lounges_teasers {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            align-items: start;
        }

        & .lounges_teasers > div {
            float: none;
            width: auto;
            min-width: 0;
            margin: 0;
            padding: 0;
        }

        /* Lounge-lister (subcategory + frontpage teasers + søgeresultater).
           For subcategory's #lounges_container og søgeresultaternes
           #lounges_search_results grupperer JS i pair-containere — pair'en
           vises som 2-kolonne grid så listen kommer i halv højde. For
           #lounges_newest og #lounges_random har hver .table kun ét tile,
           så de overrides til single-column nedenfor. #lounges_sub_container
           (subcategory-sidens "Underkategorier") håndteres separat længere
           nede som pills. */
        & #lounges_newest,
        & #lounges_random,
        & #lounges_container,
        & #lounges_search_results,
        & #lounges_list {
            display: flex;
            flex-direction: column;

            /* Pair-container: 2-kolonne grid uden synlige skillelinjer —
               cellernes padding bærer den visuelle rytme. */
            & > .table {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0;
                padding: 0;
                background: var(--trans-a00);
                border-radius: 0;
            }

            /* Hver lounge-tile som tap-bar celle — top-aligned så dot,
               titel og medlems-tæller står lige i toppen, uanset hvor
               mange linjer titlen wrapper til.
               `:not(.subscription-teaser)`: husannonce-teaseren injiceres som
               direkte > div og må IKKE arve tile-flex/hvid-baggrund.
               `:not(.table)`: KRITISK — uden den slår `div:not(...)` (type +
               :not = højere specificitet) `& > .table`-reglen, så selve
               .table-wrapperne (frontpage-teaserne har én tile pr. .table)
               også får tile-padding + min-height → hver række fordobles og
               listen får enorme mellemrum. Med :not(.table) styres .table
               igen af grid-reglen ovenfor. */
            & > .table > div,
            & > div:not(.subscription-teaser):not(.table) {
                display: flex;
                align-items: flex-start;
                gap: 0.4rem;
                padding: 0.7rem 0.75rem;
                min-height: 2.75rem;
                background: var(--white);
                min-width: 0;
            }

            /* Dot låses til sin naturlige 6×6 px så flex ikke kan skævvride
               cirklen. Justeres lidt ned ift. tekstens første linje. */
            & .member_dot {
                flex: 0 0 0.38rem;
                margin: 0;
                margin-top: 0.35rem;
            }

            & a {
                color: var(--surface-dark);
                text-decoration: none;
                font-weight: 500;
                font-size: var(--fs-sm);
                line-height: 1.25;
                flex: 1;
                min-width: 0;
            }

            /* Medlems-tæller dæmpes så fokus er på lounge-navnet. */
            & span {
                color: var(--gray-text);
                font-size: var(--fs-xs);
                flex: 0 0 auto;
            }
        }

        /* Frontpage-teaser-listerne: hver .table har kun ét tile, så over-
           skriv pair-griddet til single-column. .lounges_teasers-ancestor
           bumper specificity over base-reglen for #lounges_container m.fl. */
        & .lounges_teasers #lounges_newest > .table,
        & .lounges_teasers #lounges_random > .table {
            grid-template-columns: 1fr;
        }

        /* Subcategory-sidens "Underkategorier" rendres som pills i en
           wrap-row så de matcher frontpage'ens kategori-pille design.
           DOM'en er nestede divs (JS bygger `<div>><div>><a>` pr. kategori
           + spacer-div når der ikke er subcats), så vi bruger
           `display: contents` til at folde nestingen ud og skjuler
           &nbsp;-spaceren via `:not(:has(a))`. */
        & #lounges_sub_container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            padding: 0.5rem 0.85rem;
        }

        & #lounges_sub_container > div,
        & #lounges_sub_container > div > div:has(a) {
            display: contents;
        }

        & #lounges_sub_container > div > div:not(:has(a)) {
            display: none;
        }

        & #lounges_sub_container a {
            display: inline-flex;
            align-items: center;
            padding: 0.4rem 0.7rem;
            background: var(--blue-light);
            border-radius: 999px;
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--surface-dark);
            text-decoration: none;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* Frontpage-rækkefølge på mobil: titel → search → search-results
           → categories → teasers. Template'en bevarer desktop-rækkefølgen
           (categories → search → teasers); flex `order` overstyrer kun
           visuel placering på mobil. Reglen scopes til frontpage'en alene
           via `:has(#lounges_categories)` — ellers ville subcategory-siden
           (samme .section_lounges.innerdiv) også blive flex-column og dens
           h1 (breadcrumb) ville flyde forbi de øvrige order: 0 børn. */
        &.innerdiv:has(#lounges_categories) {
            display: flex;
            flex-direction: column;
        }

        &.innerdiv:has(#lounges_categories) > h1 { order: 1; }
        &.innerdiv:has(#lounges_categories) > .lounges-grid { order: 2; }
        &.innerdiv:has(#lounges_categories) > #lounges_search_header { order: 3; }
        &.innerdiv:has(#lounges_categories) > #lounges_search_results { order: 4; }
        &.innerdiv:has(#lounges_categories) > #lounges_categories { order: 5; }
        &.innerdiv:has(#lounges_categories) > .lounges_teasers { order: 6; }

        /* "søg"-sektionen øverst: brug iOS label-style også her. */
        & .lounges-grid > .lounges-left.mailheader b {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-size: var(--fs-xs);
            color: var(--gray-text);
        }
    }
}


/* ====================================================================
    Section: Debat (fokus, forum, thread, report)
    .forum-post er en grid med 8 celler på desktop; mobil bruger en
    kompakt 2-kolonne layout: meta-strimmel øverst, indhold under.
   ==================================================================== */
.section_debat {
    body.is-mobile-layout & {
        /* Indlæg: en grå header-bar (flex, lodret centreret) med ikon →
           navn/dato → like/dislike → #nr, derunder selve indlægget. Samme
           som desktop, blot med datoen under navnet. Admin (slet/ban) skjult. */
        & .forum-post {
            display: flex;
            flex-direction: column;
            padding: 0;
            background: var(--white);
            border-top: 1px solid var(--gray-line-soft);

            /* Selve baren bærer den grå farve; de enkelte celler gøres
               transparente så det bliver én ubrudt bar. */
            & .forum-post-header {
                display: flex;
                align-items: center;
                gap: 0.6rem;
                padding: 0.4rem 0.7rem;
                background: var(--surface-header);
            }

            & .forum-post-icon,
            & .forum-post-username,
            & .forum-post-date,
            & .forum-post-actions,
            & .forum-post-number {
                background: var(--trans-a00);
                padding: 0;
                min-height: 0;
            }

            /* Ikon til venstre for navnet. */
            & .forum-post-icon {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
            }

            /* Navn over dato; fylder den midterste plads så thumbs/#nr skubbes
               helt til højre. */
            & .forum-post-meta {
                flex: 1 1 auto;
                min-width: 0;
                display: flex;
                flex-direction: column;
            }

            /* align-self nulstilles: desktop-grid'ets `align-self: end/start`
               styrer i flex-column'en KRYDS-aksen (vandret) og ville skubbe
               navnet til højre / datoen rundt. Venstrestil dem begge. */
            & .forum-post-username {
                align-self: flex-start;
                font-weight: 600;
                font-size: var(--fs-sm);
                line-height: 1.2;

                & a { color: var(--surface-dark); }
            }

            & .forum-post-date {
                align-self: flex-start;
                font-size: var(--fs-xs);
                line-height: 1.2;
                color: var(--steel);
            }

            & .forum-post-actions {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                gap: 0.5rem;

                & a { display: inline-flex; color: var(--steel); }
                & svg { width: 1.2rem; height: 1.2rem; display: block; }
            }

            & .forum-post-number {
                flex: 0 0 auto;
                font-weight: 600;
                font-size: var(--fs-xs);
                color: var(--gray-text);
            }

            /* Admin-handlinger (slet indlæg / ban) skjult på mobil for nu. */
            & .forum-post-admin { display: none; }

            & .forum-post-content {
                padding: 0.7rem;
                font-size: var(--fs-body);
                line-height: 1.4;
            }

            & .forum-post-likes {
                padding: 0 0.7rem 0.7rem;
                text-align: right;
                font-size: var(--fs-xs);
                color: var(--steel);
            }
        }

        /* Hover-tooltip (række-id) giver ingen mening på touch. */
        & .forum-post-hover-info { display: none; }

        & .header {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            color: var(--gray-text);
            padding: 1rem 0 0.4rem;
            background: var(--trans-a00);
        }

        /* Debat-filter (kategori-dropdown + søgebar): stables i én kolonne
           så de lange labels ikke klemmes i .form-setup'ens 1fr/4fr-grid.
           Labels får samme iOS-uppercase-stil som lounges-søg. */
        & .form-setup {
            grid-template-columns: 1fr;
            gap: 0.35rem;
            margin: 1rem 0 1.25rem;
        }

        & .form-setup > div:nth-child(odd) {
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            font-weight: 600;
            color: var(--gray-text);
            padding-top: 0.5rem;
        }
    }
}


/* ====================================================================
    Debat: tråd-visning — "overvåg"-række, sammenfoldelige retningslinjer
    og svar-boksen. Svar-boksen dockes på mobil i #bf_content_bottombar
    (uden for .section_debat), så dens stil bor her — ikke scopet til
    sektionen.
   ==================================================================== */

/* "Overvåg denne tråd": kompakt række over indlæggene. */
.thread-subscribe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0 1rem;
    font-size: var(--fs-sm);

    & input {
        margin: 0;
        flex: 0 0 auto;
    }

    & label {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem;
        cursor: pointer;
    }

    & span {
        color: var(--gray-text);
        font-size: var(--fs-xs);
    }
}

/* Svar-boks-wrapper (#debat_form). INGEN baggrund — ligesom mail-compose'en
   er baren gennemsigtig, så side-gradienten skinner igennem (selve input-
   pillen og Send-knappen har deres egen baggrund). Tidligere var den hvid. */

.bf-thread-reply #thread_closed {
    padding: 0.6rem 0.5rem;
    text-align: center;
    color: var(--gray-text);
    font-size: var(--fs-sm);
}

/* Desktop (interim): debat-svaret (.msgr_compose) som en simpel bordet
   compose-række — smiley + "?" til venstre, textarea, og anmeld + Send til
   højre. Erstattes senere af den fulde mail-write-look. På mobil styres den
   i stedet af den delte .msgr_compose-CSS i mobile.css. */
body:not(.is-mobile-layout) .bf-forum-reply {
    & .msgr_compose_row {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
        padding: 0.5rem;
        border: 1px solid var(--gray-soft);
        border-radius: 0.6rem;
        background: var(--white);
    }

    & .msgr_tools {
        display: flex;
        gap: 0.25rem;
        flex: 0 0 auto;
    }

    & .msgr_tool {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2.4rem;
        color: var(--steel);
        text-decoration: none;

        & svg { width: 1.2rem; height: 1.2rem; display: block; }
    }
    & .msgr_tool:hover { color: var(--surface-dark); }

    & textarea {
        flex: 1;
        min-width: 0;
        min-height: 2.4rem;
        max-height: 9rem;
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--gray-soft);
        border-radius: 0.6rem;
        font: inherit;
        resize: none;
    }

    & .msgr_actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex: 0 0 auto;
    }

    & .msgr_report_inline {
        display: inline-flex;
        align-items: center;
        color: var(--steel);
        text-decoration: none;

        & svg { width: 1.2rem; height: 1.2rem; display: block; }
    }
    & .msgr_report_inline:hover { color: var(--brand-pink); }

    & .msgr_send {
        height: 2.4rem;
        padding: 0 1.1rem;
        border: 0;
        border-radius: 0.6rem;
        background: var(--accent-blue);
        color: var(--white);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Retningslinjer-modalens indhold. */
.bf-debat-rules {
    padding: 1rem 1.25rem;
    line-height: 1.5;

    & ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
    & li { margin: 0.3rem 0; }
}

/* "Start ny tråd"-knap i forum-visningen (åbner new-thread-modalen). */
.bf-newthread-trigger-wrap {
    margin: 0.85rem 0 0.25rem;
}

.bf-newthread-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;

    & svg {
        width: 1.2rem;
        height: 1.2rem;
        display: block;
    }
}

body.is-mobile-layout .bf-newthread-trigger {
    display: flex;
    justify-content: center;
}

/* New-thread-modalens form (åbnes via _modal.show('debat','newthread')).
   .modal-body padder allerede 1rem; tekstfarver ARVES fra .modal-dialog
   (sort på desktop, hvid på den mørke mobil-sheet) — derfor sætter vi IKKE
   farve på labels/rules. Inputs får eksplicit lys baggrund + mørk tekst, så
   de er læsbare på begge temaer. */
.bf-newthread {
    & form {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    & .bf-newthread-label {
        font-weight: 600;
        font-size: var(--fs-sm);
        margin-top: 0.6rem;
    }

    & input[name="titel"] {
        width: 100%;
        min-height: 2.5em;
        padding: 0.5em 0.75em;
        border: 1px solid var(--gray-soft);
        border-radius: 0.5rem;
        font-size: 16px;
        background: var(--white);
        color: var(--black);
    }

    & .autosize > textarea,
    & .autosize::after {
        min-height: 6rem;
        max-height: 14rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--gray-soft);
        border-radius: 0.5rem;
        font-size: 16px;
        line-height: 1.4;
    }

    & .bf-newthread-error:not(:empty) {
        color: var(--brand-pink);
        font-size: var(--fs-sm);
        padding: 0.15rem 0;
    }

    & .bf-newthread-rules {
        margin: 0.6rem 0 0.2rem;
        font-size: var(--fs-sm);

        & summary {
            cursor: pointer;
            font-weight: 600;
            padding: 0.4rem 0;
        }

        & p  { margin: 0.4rem 0; }
        & ul { margin: 0.25rem 0 0; padding-left: 1.2em; }
    }

    & .bf-newthread-actions {
        margin-top: 0.75rem;
        text-align: right;
    }
}


/* ====================================================================
    Section: Payment (cart, invoice, transactions)
    Cart har en 5-kolonne grid; mobil omformer hver række til en
    label/value-stak med totalen i fed nederst.
   ==================================================================== */
.section_payment {
    body.is-mobile-layout & {
        & .table {
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        & .payment_order_container {
            display: flex;
            flex-direction: column;
        }

        & .ordrenummer {
            padding: 0.5rem 0.85rem;
            font-size: var(--fs-sm);
            color: var(--gray-text);
        }

        /* Total-rækken får mere visuel vægt. */
        & .pris_total {
            font-weight: 700;
            font-size: var(--fs-h3);
        }

        & .betalingsbetingelser {
            padding: 1rem 0.85rem;

            & ul {
                padding-left: 1.25rem;
                margin: 0.5rem 0 1rem;

                & li {
                    margin-bottom: 0.4rem;
                    line-height: 1.4;
                }
            }
        }
    }
}

/* Faktura/kvittering deler .section_payment med kurven, men er en 4-kolonne
   tabel (antal/tekst/stykpris/total). Den generiske flex-column-regel ovenfor
   ville stable hver celle på sin egen linje — her omformes hver række i stedet
   til en pæn label/value-linje (én ekstra .section_invoice-klasse på roden). */
body.is-mobile-layout .section_invoice {
    /* Kolonne-headeren (Antal/Tekst/Pris/Total) er meningsløs når rækkerne
       bliver label/value-stakke — skjul den. */
    & .table[header]:has(+ #invoice-line-container) {
        display: none;
    }

    /* Hver beløbsrække: tekst til venstre, beløb til højre. */
    & .table {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.1rem 0.75rem;
        align-items: baseline;
        padding: 0.45rem 0.65rem;
    }

    /* Tomme mængde-/tekst-celler i subtotal-rækkerne fylder ikke. */
    & .table > div:empty {
        display: none;
    }

    /* Linjevaren har 4 celler; antal=1 og stykpris=total er redundant på
       mobil — behold kun tekst + total. */
    & #invoice-line-container > div:nth-child(1),
    & #invoice-line-container > div:nth-child(3) {
        display: none;
    }

    /* Total-rækken fremhæves med streg over og fed skrift. */
    & .table[header] {
        background: transparent !important;
        font-weight: 700;
        font-size: var(--fs-h3);
        border-top: 1px solid var(--gray-line-soft);
        margin-top: 0.25rem;
        padding-top: 0.6rem;
    }
}


/* ====================================================================
    Section: Profile sub-pages — report form, picture editor
    Forms dækkes af det generiske div_head/div_element-mønster; her er
    kun page-specifikke justeringer.
   ==================================================================== */
.section_profile_report {
    body.is-mobile-layout & {
        & .header {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: var(--fs-xs);
            color: var(--gray-text);
            padding: 1rem 0 0.4rem;
        }
    }
}

.section_profile_picture {
    body.is-mobile-layout & {
        /* Profilbillede-arkivet (tidligere brugte billeder) stables som
           grid med større tap-areal. */
        & .gallery_picture_container_frame {
            min-height: 8rem;
        }
    }
}


/* ====================================================================
    Section: Newuser
    Lang registrerings-form med info-bokse mellem felter — tighter
    spacing så formen ikke bliver endeløs på lille skærm.
   ==================================================================== */
.section_newuser {
    body.is-mobile-layout & {
        & .infoboks {
            padding: 0.75rem 0.85rem;
            margin-bottom: 0.5rem;

            & p {
                margin: 0.4rem 0;
                line-height: 1.4;
            }
        }
    }
}


/* ====================================================================
    Section: Glemt (forgotten password)
    Standard form-mønster; behandles af det generiske div_head/div_element
    mobile-pattern. Kun småjusteringer her.
   ==================================================================== */
.section_glemt {
    body.is-mobile-layout & {
        & h2 {
            /* h2 i .innerdiv får iOS Settings-stil fra mobile.css generelt;
               glemt's h2 fungerer som titel for det enkelte trin, så lidt
               mere padding-top til adskillelse. */
            margin-top: 1.25rem;
        }
    }
}