/* mobile.css
   Indeholder kun de top-niveau @media (max-width: 1024px) blokke der
   tidligere lå i boyfriend.css. Mobile-only regler nestet inde i
   desktop-selektorer er bevidst ladt blive i boyfriend.css.
*/

@media (max-width: 1024px) {
    /* Body bliver flex-column wrapper - lader os kontrollere højden så
       prik-indikatoren altid sidder i bunden af viewporten. Bruger
       fast 100dvh + overflow:hidden så kun indholds-pane'en scroller -
       menu og status bliver klippet i deres pane.

       NB: 100lvh (largest viewport) bruges i stedet for 100dvh så
       wrapperen strækker sig ned i iOS' home-indicator-zone i PWA-mode.
       Ellers efterlader 100dvh en stribe i bunden hvor body's gradient
       skinner igennem under indholdspanelerne. */
    html, body {
        height: 100lvh;
        overflow: hidden;
    }
    body > div:not(#bf_mobile_dots):not(#list_info_container) {
        flex-direction: column;
        align-items: stretch;
        height: 100lvh;
        min-height: 0;
        /* Safe-area: når app'en kører som PWA i fullscreen/standalone
           på iOS tegnes indholdet under den translucente statusbar og
           home-indikatoren. env(safe-area-inset-*) giver os den nøjagtige
           højde af notch/dynamic island/home-bar så vi kan padde rundt
           om dem. I almindelig browser er værdien 0 → ingen effekt.
           box-sizing: border-box er kritisk - ellers bliver wrapperen
           højere end body og overflow:hidden klipper indhold af. */
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Hovedindhold: drop alle faste bredder. NB: helper/mobile-panes.js
       fjerner #content_container og indsætter .content som barn af
       en .bf-pane--content, så vi targeter .content direkte (ikke
       under en #content_container ancestor). */
    body > div #boyfriend,
    #toprowcontainer,
    #toprowcontainer .toprow,
    #content_container,
    .content,
    .content #if_content,
    .content #if_menu,
    .content #if_ad,
    .content #if_profile_content,
    .content #if_profile_menu,
    .content #if_bottom {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Skjul bund-boksen ("annoncering p\u00e5 boyfriend.dk?" + GDPR) p\u00e5
       mobil - GDPR sidder nu i menu-pane'ens bund-r\u00e6kke. */
    .content #if_bottom {
        display: none !important;
    }

    /* Skjul "ny post"-statusbar-blokken på mobil - vi har en pille
       med antal ulæste mails på "post"-menupunktet i stedet. */
    #postikon,
    #post_container {
        display: none !important;
    }

    /* Skjul "dine gæster" + "favoritter" sektioner i statusbaren på
       mobil - tællerne sidder allerede i topbar-counters-rækken. */
    #guest_container,
    #favorite_container,
    .status_main a.heading[href="/s/lists_own/guests"],
    .status_main a.heading[href="/s/lists_own/favorites"] {
        display: none !important;
    }

    /* Lidt mindre fonte på mobil - desktop bruger ~16px overalt. */
    body {
        font-size: 14px;
    }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.35em; }
    h3 { font-size: 1.05em; }

    /* Bruger-status-ikon (svg ved siden af brugernavn) — 15% større
       end desktop's 30px så det er nemmere at ramme på touch. */
    svg[user] {
        width: 34.5px;
    }

    /* Hele #boyfriend wrapperen bliver flex-column så swiperen kan
       grow'e til den resterende højde. */
    body > div #boyfriend {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* Admin-sidepanel under hovedindhold, ikke ved siden af. */
    body > div #team_container {
        /* TODO: skjult midlertidigt - "tager over" content-pane'en ved
           refresh på en profil. Skal integreres ordentligt i three-pane
           layout senere. Se /memories/repo/mobile-team-sidepanel-todo.md. */
        display: none;
        margin-left: 0;
        margin-top: 1.5em;
        width: 100%;
        max-width: 100%;

        & #team_menu, & #team {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
    }

    /* Admin team-statuslinjen i toppen. Skjult midlertidigt på mobil
       indtil den kan integreres i three-pane layoutet.
       Se /memories/repo/mobile-team-sidepanel-todo.md. */
    #team_bar,
    #team_bar_header,
    #team_bar_content {
        display: none !important;
    }

    /* Top-row: header med logo + ticker + menu er bygget med
       absolutte positioner og faste px-koordinater. På mobil
       slipper vi alt det og lader det stakke naturligt. */
    #toprowcontainer {
        height: auto;
        flex-shrink: 0;

        & .toprow {
            height: auto;
            padding: 0 1em 0.4em;
            min-height: 0;
            text-align: left;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            position: relative;
            /* Override desktop's komplekse multi-stop gradient -
               lad body's gradient skinne igennem. */
            background-image: none;
            background-color: transparent;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            /* I almindelig browser har vi en URL-bar/notch over os, så
               giv lidt luft i toppen og stræk indholdet ud i fuld bredde.
               PWA kører standalone og ligger helt op mod statuslinjen,
               hvor det ser bedst ud uden ekstra padding. */
            body.is-browser & {
                padding: 1.5em 1em 0.4em;
            }

            /* Dev-only reload-knap. Sidder absolut i top-h\u00f8jre hj\u00f8rne
               af toprow s\u00e5 den ikke forstyrrer flex-layoutet med logo
               + counters. Skjul p\u00e5 desktop. */
            & #bf-dev-reload {
                display: block;
                width: 36px;
                height: 36px;
                border: 0;
                background: rgba(0, 0, 0, 0);
                color: white;
                font-size: 22px;
                line-height: 1;
                cursor: pointer;
                z-index: 10;
            }

            & #logo {
                position: static;
                left: auto;
                top: auto;
                margin: 0;
                display: block;
                /* Skaler logo'et til ~50% af viewport-bredden. Logoet er
                   rendered via JS med data-width="185", s\u00e5 vi ikke kan
                   bare s\u00e6tte width - vi bruger transform i stedet og
                   kompenserer for transform-origin. */
                transform: scale(calc(50vw / 185));
                transform-origin: top left;
                /* transform p\u00e5virker ikke layout-h\u00f8jden, s\u00e5 elementets
                   originale 80px bliver liggende. Bag-tilf\u00f8j h\u00f8jde
                   manuelt: 80 * (50vw/185) \u2248 0.43 * 50vw = ~21.6vw. */
                height: calc(80px * (50vw / 185));
                width: 50vw;
            }

            & #newsticker {
                /* Skjul i header'en - JS flytter elementet ind i h\u00f8jre
                   kolonne af status-pane'en. Hvis den af en eller anden
                   grund stadig er her, skal den ikke vises. */
                display: none;
            }

            /* Topbar-counters: bell sidder på samme række som logoet,
               skubbet helt ud til højre. */
            & #bf-topbar-counters {
                padding: 0;
                width: auto;
                display: flex;
                align-items: center;
                gap: 6px;
                margin-left: auto;

                & a {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    padding: 3px 7px;
                    color: white;
                    text-decoration: none;
                    font-family: verdana, sans-serif;
                    font-size: 11px;
                    background: rgba(0, 0, 0, 0.18);
                    border-radius: 999px;
                }

                & .bf-tc-pill {
                    display: inline-block;
                    min-width: 1.2em;
                    padding: 0 0.45em;
                    background: #ff6a3d;
                    color: white;
                    border-radius: 999px;
                    font-size: 0.85em;
                    font-weight: bold;
                    text-align: center;
                    line-height: 1.5;
                }

                /* Ikon-only-variant (notifikationer): klokke-SVG i stedet
                   for label, og pillen ligger oven på ikonet i øverste højre
                   hjørne med en hvid ring. */
                & a.bf-tc-iconly {
                    position: relative;
                    padding: 4px 6px;
                    gap: 0;

                    & .bf-tc-icon {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        line-height: 0;

                        & svg {
                            width: 22px;
                            height: 22px;
                            display: block;
                        }
                    }

                    & .bf-tc-pill {
                        position: absolute;
                        top: -4px;
                        right: -8px;
                        min-width: 1.2em;
                        padding: 0.05em 0.35em;
                        font-size: 0.9em;
                        font-weight: bold;
                        line-height: 1.3;
                        box-shadow: 0 0 0 1px white;
                    }
                }
            }
        }

        /* Topmenuen er overflødig på mobil - den lever nu i swipe-pane'en. */
        & #menu {
            display: none;
        }
    }

    /* Faneblad/sub-menu: skjules på mobil - vi spejler den ind i venstre
       menu-pane som rainbow-farvede swatches (se #bf_mobile_swiper nedenfor).
       Originalen bliver i DOM så menu.js's klik-delegering stadig virker. */
    .menu_sub {
        display: none !important;
    }

    /* Profile-overlay sub-menu: 6 faner (profil/dagbog/galleri/gæstebog/
       lounges/debat) — vises som horisontal panel nederst i content-pane'en
       lige over bund-nav'en, samme look som long-press panelet (#bf_lp_panel).
       mobile-panes.js flytter #if_profile_menu ud af .bf-content-scroll
       og gør den til søskende inde i .bf-pane--content. menu.js styrer
       visibility via $('#if_profile_menu').show()/.hide() — når man er
       på en profil-side viser _menu.show('profile', ...) den, ellers er
       den skjult. */
    .bf-pane--content > #if_profile_menu {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 56px;
        z-index: 6;
        padding: 8px 6px 5px;
        background:
            linear-gradient(168deg, rgba(43, 10, 38, 0.85) 0%, rgba(14, 41, 84, 0.85) 50%, rgba(43, 10, 38, 0.85) 100%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 0;
    }
    body.is-pwa .bf-pane--content > #if_profile_menu {
        bottom: 72px;
    }
    /* Sørg for at scroll-indholdet kan rulles forbi profil-rail'en.
       Rail'en er position:absolute og overlapper ellers bunden af
       indholdet — uden ekstra padding kan man ikke se de sidste
       linjer på en lang side. ~80px matcher rail-højden (ikon + tekst
       + padding). */
    .bf-pane--content:has(> #if_profile_menu:not([style*="display: none"])) > .bf-content-scroll {
        padding-bottom: 80px;
    }

    #if_profile_menu .menu_sub {
        display: block !important;
        height: auto;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    #if_profile_menu .menu_sub > ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
        height: auto;
        width: auto;
        position: static;
        table-layout: auto;
    }
    #if_profile_menu .menu_sub > ul > li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: auto;
        padding: 4px 2px;
        background: transparent;
        border: 0;
        border-radius: 8px;
        line-height: 1.1;
        font-size: 0.85em;
        color: #d6dadf;
        position: relative;
        white-space: nowrap;
        cursor: pointer;
        text-align: center;
    }
    /* Icon-wrapper (svg over teksten) — samme look som long-press panel.
       menu.js's select() kalder $('li[data-ref=sel] span').hide() på den
       valgte række, hvilket sætter inline display:none på vores .bf-pm-icon
       (også et span). Tving den synlig igen. */
    #if_profile_menu .menu_sub > ul > li > .bf-pm-icon {
        position: relative;
        display: inline-block !important;
        line-height: 0;
    }
    #if_profile_menu .menu_sub > ul > li > .bf-pm-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }
    /* Skjul tomme padder-li'er som menu.js tilføjer for at ramme 4 rækker. */
    #if_profile_menu .menu_sub > ul > li:empty {
        display: none;
    }
    #if_profile_menu .menu_sub > ul > li.selected {
        background: rgba(255, 255, 255, 0.14);
        color: white;
        font-weight: bold;
    }
    #if_profile_menu .menu_sub > ul > li .text {
        margin: 0;
        text-align: center;
    }
    /* Count = lille pille der overlapper øverste højre hjørne af ikonet.
       mobile-panes.js flytter .count ind i .bf-pm-icon så absolute virker. */
    /* Count = lille pille der overlapper øverste højre hjørne af ikonet.
       mobile-panes.js flytter .count ind i .bf-pm-icon så absolute virker.
       menu.js's select() sætter inline display:none på .count for den
       valgte række — !important holder pillen synlig også for selected. */
    #if_profile_menu .menu_sub > ul > li .bf-pm-icon .count {
        display: inline-block !important;
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 1.2em;
        padding: 0.05em 0.35em;
        background: white;
        color: rgb(14, 41, 84);
        border-radius: 999px;
        font-size: 0.9em;
        font-weight: bold;
        text-align: center;
        line-height: 1.3;
        box-shadow: 0 0 0 1px white;
        margin: 0;
        float: none;
        pointer-events: none;
    }

    /* Hovedindholds-flex: status-sidebar + content stakker. */
    #content_container {
        flex-direction: column;
        flex: 1;
        min-height: 0;
        margin-top: 0;

        & #status .top,
        & #status .header,
        & #status .status_main {
            width: 100%;
            box-sizing: border-box;
        }

        & #status .status_main .link,
        & #status .status_main .link a {
            width: auto;
        }
    }

    /* Profilvisning: 2-kolonne grid for billede + detaljer er for trangt
       på 375px. Stak dem i stedet, og lad fakta-grid'et blive 2 kolonner. */
    .profile {
        & .top {
            grid-template-columns: 1fr;

            & #profile_picture .picture_container {
                height: auto;
                min-height: 18em;
            }

            & #fact_container {
                grid-template-columns: 1fr 1fr;
            }

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

        & #profile_chat {
            margin: 1em;
        }
    }

    /* ----------------------------------------------------------
       Three-pane swiper (menu | content | status).
       Aktiveres af helper/mobile-panes.js der wrapper de tre
       eksisterende noder ind i #bf_mobile_swiper. CSS'en virker
       kun når swiperen er bygget.
       ---------------------------------------------------------- */

    /* Hamburger sidder som første item i content-pane'ens bund-nav
       (se #bf_content_bottomnav). Backdrop dæmper alt under drawer'en. */

    /* Backdrop: vises kun når drawer er åben. Stopper over bund-nav'en
       så burger-knappen forbliver klikbar (samme tap = luk). */
    #bf_menu_backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 56px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.is-pwa #bf_menu_backdrop {
        bottom: 72px;
    }
    body.bf-menu-open #bf_menu_backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.bf-menu-open {
        overflow: hidden;
    }

    #bf_mobile_swiper {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        width: 100%;
        flex: 1;
        min-height: 0;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        & > .bf-pane {
            flex: 0 0 100vw;
            scroll-snap-align: start;
            overflow-y: hidden;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        /* Menu-pane: ikke længere en swipe-pane men en drawer der
           trækkes ind fra venstre kant. Bliver fjernet fra flex-flow
           via position:fixed, så swiperen kun har content + status.
           Slutter ved bund-nav'ens overkant så burger-knappen forbliver
           tilgængelig til at lukke drawer'en igen. */
        & > .bf-pane--menu {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 56px;
            width: 60vw;
            max-width: 360px;
            flex: none;
            background-color: #1f2327;
            padding: 0;
            overflow-y: auto;
            overflow-x: hidden;
            transform: translateX(-100%);
            transition: transform 0.25s ease;
            z-index: 9999;
            /* Box-shadow påføres kun når drawer'en er åben — ellers
               lækker den 16px ud over højre kant og giver en synlig
               fade i venstre side af content-pane'en. */
            padding-top: env(safe-area-inset-top, 0px);
        }
        body.is-pwa & > .bf-pane--menu {
            bottom: 72px;
        }

        body.bf-menu-open & > .bf-pane--menu {
            transform: translateX(0);
            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
        }

        /* Content-pane: pane-rod'en er ikke-scrollende så chip-rail'en
           kan ligge absolut og blive på plads. .bf-content-scroll er den
           faktiske scroller. Chip-rail'en flyder oven på indholdet.
           Pane'en er transparent — .bf-content-scroll bærer den hvide
           baggrund så bund-nav'en kan vise body-gradienten igennem. */
        & > .bf-pane--content {
            background-color: transparent;
            position: relative;
            overflow: hidden;
        }

        & > .bf-pane--content > .bf-content-scroll {
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: white;

            /* Lille side-luft og reduceret top-padding på .innerdiv inde
               i content-pane'en — desktop bruger 1.5em 2em hvilket er
               for meget på mobil. */
            & .innerdiv {
                padding: 0 0.75em 1em 0.75em;
            }
        }

        /* Bund-nav i content-pane'en: 5 inline genveje med ikon over
           kort label. Ligger absolut nederst, oven på .bf-content-scroll
           (som får tilsvarende padding-bottom så indhold ikke gemmes). */
        & > .bf-pane--content > #bf_content_bottomnav,
        & > .bf-pane--status > #bf_status_bottomnav {
            display: flex;
            background: transparent;
            border-top: 0;
            padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
            z-index: 6;

            & a {
                flex: 1 1 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                padding: 4px 2px;
                color: #aab0b6;
                text-decoration: none;
                font-size: 1em;
                line-height: 1;
                transition: color 0.12s;

                & svg {
                    width: 22px;
                    height: 22px;
                    fill: none;
                    stroke: currentColor;
                    stroke-width: 1.8;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }

                &:active,
                &:hover,
                &.is-active {
                    color: white;
                }

                /* Wrapper omkring icon for pille-positionering. */
                & .bf-bn-icon {
                    position: relative;
                    display: inline-block;
                    line-height: 0;
                }

                /* Pille med count (fx ulæste mails) overlapper øverste
                   højre hjørne af ikonet. */
                & .bf-bn-pill {
                    position: absolute;
                    top: -4px;
                    right: -8px;
                    min-width: 1.2em;
                    padding: 0.05em 0.35em;
                    background: #ff6a3d;
                    color: white;
                    border-radius: 999px;
                    font-size: 0.9em;
                    font-weight: bold;
                    text-align: center;
                    line-height: 1.3;
                    box-shadow: 0 0 0 1px white;
                    pointer-events: none;
                }
            }
        }

        /* Content-bund-nav: absolut over .bf-content-scroll. */
        & > .bf-pane--content > #bf_content_bottomnav {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }

        /* Long-press på knapper med data-bn-area: undertryk iOS
           context-menu/text-selection så langtryk ikke trigger
           system-popup'en. */
        & > .bf-pane--content > #bf_content_bottomnav a[data-bn-area] {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
        }

        /* Long-press panel: ligger over bund-nav'en og udvider højden
           opad så body-gradienten skinner igennem. Indhold opbygges
           dynamisk fra MENU_REGISTRY[area].items. */
        & > .bf-pane--content > #bf_lp_panel {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 56px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            padding: 12px 8px 12px;
            background:
                linear-gradient(168deg, rgba(43, 10, 38, 0.85) 0%, rgba(14, 41, 84, 0.85) 50%, rgba(43, 10, 38, 0.85) 100%);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-radius: 16px 16px 0 0;
            z-index: 7;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.18s ease, transform 0.18s ease;
            pointer-events: none;
        }
        & > .bf-pane--content > #bf_lp_panel.is-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        & > .bf-pane--content > #bf_lp_panel a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 4px;
            color: #d6dadf;
            text-decoration: none;
            font-size: 0.85em;
            line-height: 1.1;
            text-align: center;
            border-radius: 8px;
            transition: background 0.12s, color 0.12s;
        }
        & > .bf-pane--content > #bf_lp_panel a:active {
            background: rgba(255, 255, 255, 0.12);
            color: white;
        }
        & > .bf-pane--content > #bf_lp_panel a svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            display: block;
        }
        body.is-pwa & > .bf-pane--content > #bf_lp_panel {
            bottom: 72px;
        }

        /* Status-bund-nav: ligger absolut nederst som i content-pane'en
           så tab-bodyens hvide baggrund kan stoppe ved nav-toppen og body-
           gradienten skinner igennem. */
        & > .bf-pane--status > #bf_status_bottomnav {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }

        & > .bf-pane--status:has(> #bf_status_bottomnav) > #bf_status_tab_body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 56px;
            background-color: white;
        }

        /* Plads til bund-nav'en: scroll-containeren stopper hvor
           nav'en starter, så indhold ikke ligger bagved den. */
        & > .bf-pane--content:has(> #bf_content_bottomnav) > .bf-content-scroll {
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 56px;
        }

        /* PWA standalone: home-indicator område + statuslinjen gør at
           nav'en lander for højt og cut-linjen for lavt. Skub nav'en
           ned og cut-linjen op. */
        /* PWA standalone: nav skal sidde tættere på den faktiske
           skærmbund (env(safe-area-inset-bottom) puffer den ellers
           op), og cut-linjen skal trækkes lidt op. */
        body.is-pwa & > .bf-pane--content > #bf_content_bottomnav,
        body.is-pwa & > .bf-pane--status > #bf_status_bottomnav {
            padding-bottom: 16px;
        }
        body.is-pwa & > .bf-pane--content:has(> #bf_content_bottomnav) > .bf-content-scroll,
        body.is-pwa & > .bf-pane--status:has(> #bf_status_bottomnav) > #bf_status_tab_body {
            bottom: 72px;
        }

        /* Annonce-banner: midlertidigt skjult på mobil for ALLE brugere
           (også ikke-betalende). Backend serverer banneret før vi
           kender abonnements-statussen, og vores forsøg på at toggle
           via body.bf-has-ad blev upålideligt for betalende brugere
           (de så banneret kortvarigt). Slå tilbage til når vi kan
           garantere subscription-status er kendt før første banner
           render.
           Se /memories/repo/mobile-ad-todo.md. */
        & > .bf-pane--content > #if_ad {
            display: none !important;
        }

        /* #bf_sub_rail (mini color-chips i content-pane'ens venstre
           kant) er fjernet sammen med rainbow-swatch sub-menuen.
           Long-press på bund-nav'ens lister/lounges/debat-knapper
           overtager sub-navigation-rollen. */

        & > .bf-pane--status {
            background-color: transparent;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            overflow: hidden;
        }

        /* Tab-bar i toppen af status-pane'en blev erstattet af bund-
           nav'en (#bf_status_bottomnav). #bf_status_tabs eksisterer
           kun som detached state-of-truth — ingen styling nødvendig. */

        & #bf_status_tab_body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            /* I tab-bodyen er fanen selv overskriften — drop H1
               ("Post") og stram .innerdiv-padding så listen får
               plads i den smalle status-pane. */
            & .innerdiv {
                padding: 0;
            }

            & .mail_inbox > .top h1,
            & .mail_show > .innerdiv h1 {
                display: none;
            }

            /* Mail-inbox bruger faste px-kolonner (250+175+170 osv.)
               der er bredere end status-pane'en. Tving fluid layout
               for tab-bodyen. */
            & #mail_heading {
                display: none !important;
            }

            /* Settings-strippen ("Vis post: ... / Afspil lyd ved ny post: ...")
               er noisy i den smalle pane — gem den. Lyd-toggle hører ellers
               hjemme et andet sted (måske i et settings-tab senere). */
            & .mail_inbox > .top {
                display: none !important;
            }

            /* Mail-rækker som messenger-style linjer:
               [ avatar | navn (top) + dato (under) | unread-dot ]
               Resetter alle desktop's float'ede px-kolonner. */
            & #mail_lines > div {
                display: grid;
                grid-template-columns: 38px 1fr auto;
                grid-template-areas: "icon main badge";
                column-gap: 10px;
                align-items: center;
                height: auto;
                min-height: 38px;
                padding: 5px 6px;
                cursor: pointer;
            }

            & #mail_lines .mail_icon {
                grid-area: icon;
                width: 38px;
                height: 38px;
                margin: 0;
                padding: 0;
                float: none;
                text-align: center;

                & img, & svg {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }

            /* Username i grid-area "main" — dato sættes ind under via
               ::after fra [created]-attributten, så vi behøver ikke
               omskrive JS. (Den rigtige .mail_date har faste widths;
               vi gemmer den.) */
            & #mail_lines .mail_username {
                grid-area: main;
                width: auto;
                float: none;
                display: block;
                font-weight: 600;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            & #mail_lines .mail_date {
                grid-area: main;
                align-self: end;
                width: auto;
                float: none;
                margin: 0;
                padding: 0;
                font-size: 11px;
                color: #4a5057;
                line-height: 1.2;
            }

            /* Status-icon ("Du har ny post!") og PDF/SLET hører til
               i tråd-visningen, ikke i listen. */
            & #mail_lines .mail_status,
            & #mail_lines .mail_options {
                display: none !important;
            }

            /* Lille orange dot på ulæste i stedet for fed tekst +
               status-icon. */
            & #mail_lines .mail_unread {
                position: relative;

                & .mail_username {
                    color: #1f2327;
                    font-weight: 700;
                }
            }
            & #mail_lines .mail_unread::after {
                content: "";
                grid-area: badge;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #ff6a3d;
                margin-right: 4px;
            }

            /* Override desktop-zebraen: på mobil sidder listen i en
               mørk status-pane, og desktop's transparent-på-ulige lader
               pane-baggrunden slå igennem som næsten-sort, mens
               blue-light er næsten hvid → enorm kontrast. Brug hvid +
               --blue-light (lyseste blå) som zebra på mobil. */
            & #mail_lines > div.mail_container_div:nth-child(odd) {
                background-color: white;
            }
            & #mail_lines > div.mail_container_div:nth-child(even) {
                background-color: var(--blue-light);
            }

            /* === Mobil messenger (egen template) ===
               .mail_messenger har 4 børn: header, blocked, messages, compose.
               Flex-column: header top, messages flex:1 + scroll, compose pinned. */
            & .mail_messenger {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
                background: #d9dfe4;
            }
            & .mail_messenger > * { flex-shrink: 0; }

            & .msgr_header {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 10px;
                background: #4a6b8a;
                color: white;
                font-weight: 600;

                & .msgr_back {
                    color: white;
                    text-decoration: none;
                    font-size: 22px;
                    line-height: 1;
                    padding: 0 4px;
                }
                & .msgr_title {
                    flex: 1 1 auto;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                & .msgr_profile {
                    flex: 1 1 auto;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: white;
                    text-decoration: none;
                }
                & .msgr_profile .msgr_icon {
                    flex: 0 0 auto;
                    display: inline-flex;
                    align-items: center;
                }
                & .msgr_profile .msgr_icon img {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    object-fit: cover;
                    display: block;
                }
                & .msgr_report {
                    color: white;
                    text-decoration: none;
                    font-size: 16px;
                    padding: 0 4px;
                    opacity: 0.8;
                }
                & .msgr_report:hover { opacity: 1; }
            }

            & .msgr_blocked {
                padding: 8px 10px;
                font-size: 12px;
                color: #4a5057;
                background: #f3d8d8;
            }

            & .msgr_messages {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 8px 6px;
                display: flex;
                flex-direction: column;
            }

            & .msgr_presence,
            & #mail_presence {
                margin: 0;
                padding: 0 8px 4px;
                font-size: 11px;
                color: #4a5057;
                font-style: italic;
            }
            /* Override desktop's rainbow-on-transparent som ellers
               gør teksten usynlig i den smalle mobil-pane. */
            & #mail_presence > span,
            & #mail_presence > span > span {
                background: none;
                -webkit-background-clip: initial;
                background-clip: initial;
                color: #4a5057;
                animation: none;
                font-weight: normal;
                font-size: 11px;
            }

            & .msgr_compose {
                display: flex;
                flex-direction: column;
                gap: 0;
                padding: 0;
                background: white;
                border-top: 1px solid #d0d6dc;
            }
            /* Skjul dropzone'en visuelt — bruges kun til programmatisk
               click på den skjulte file-input via vedhæft-knappen.
               (Drag-drop fra desktop er irrelevant på mobil.) */
            & .msgr_attach_dropzone {
                display: none;
            }
            /* Når der er valgt filer (FileUploader injecter .upload-queue)
               så vises queue'en lige over compose-rækken. */
            & .msgr_compose .upload-queue:not(:empty) {
                padding: 4px 8px;
                font-size: 11px;
                color: #4a5057;
                background: #eef3f6;
                border-bottom: 1px solid #d0d6dc;
            }

            & .msgr_compose_row {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 6px;
            }
            /* Når textarea er fokuseret skiftes align-items til stretch
               så tools-kolonnen og send-knappen følger textarea'ens
               højde mens den vokser opad. */
            & .msgr_compose_row.is-focused {
                align-items: stretch;
            }
            & .msgr_tools {
                display: flex;
                align-items: center;
                gap: 0;
                flex-shrink: 0;

                & .msgr_tool {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 28px;
                    height: 32px;
                    color: #4a6b8a;
                    text-decoration: none;
                    font-size: 18px;
                    line-height: 1;
                }
                & .msgr_tool:hover {
                    color: #1f2327;
                }
            }
            /* Focus-tilstand: tools stables lodret langs venstre kant
               så de altid er synlige men ikke æder breddepladsen. */
            & .msgr_compose_row.is-focused .msgr_tools {
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                & .msgr_tool {
                    width: 28px;
                    height: 24px;
                    font-size: 16px;
                }
            }

            & .msgr_compose textarea {
                flex: 1 1 auto;
                min-width: 0;
                height: 32px;
                min-height: 32px;
                max-height: 120px;
                padding: 6px 10px;
                border: 1px solid #d0d6dc;
                border-radius: 16px;
                resize: none;
                font: inherit;
                line-height: 18px;
                box-sizing: border-box;
            }
            & .msgr_compose textarea:focus {
                outline: none;
                border-color: #d0d6dc;
                box-shadow: none;
            }
            /* I focus-tilstand fylder textarea hele compose-rækkens
               højde (matcher tools-kolonnen). JS auto-grow sætter
               højden direkte; vi sørger her for at min-height matcher
               5 linjer så den straks åbner sig på focus. */
            & .msgr_compose_row.is-focused textarea {
                min-height: 104px;
                height: 104px;
            }
            & .msgr_compose .msgr_send {
                flex-shrink: 0;
                background: #4a6b8a;
                color: white;
                border: 0;
                height: 32px;
                padding: 0 14px;
                border-radius: 16px;
                font-weight: 600;
                cursor: pointer;
                font: inherit;
                line-height: 32px;
            }
            /* Når compose-rækken er stretch'et (focus-tilstand) skal
               send-knappen følge højden men holde sin pille-form. */
            & .msgr_compose_row.is-focused .msgr_send {
                height: auto;
                line-height: 1;
                align-self: flex-end;
            }

            /* Højre actions-kolonne: i default-tilstand vises kun send,
               i focus-tilstand stables report ovenpå og send fylder
               nederste halvdel. */
            & .msgr_actions {
                display: contents;
            }
            & .msgr_actions .msgr_report_inline {
                display: none;
            }
            & .msgr_compose_row.is-focused .msgr_actions {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                width: 56px;
                gap: 4px;
            }
            & .msgr_compose_row.is-focused .msgr_actions .msgr_report_inline {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 1 1 50%;
                color: #4a6b8a;
                background: #eef3f6;
                border: 1px solid #d0d6dc;
                border-radius: 12px;
                font-size: 18px;
                line-height: 1;
                text-decoration: none;
            }
            & .msgr_compose_row.is-focused .msgr_actions .msgr_report_inline:hover {
                color: #1f2327;
                background: #d9e2ea;
            }
            & .msgr_compose_row.is-focused .msgr_actions .msgr_send {
                flex: 1 1 50%;
                height: auto;
                line-height: 1;
                align-self: stretch;
                width: 100%;
            }
            /* Skjul header-report mens compose er fokuseret — der er
               nu en bedre placeret én lige over send-knappen. */
            & .msgr_compose_row.is-focused ~ * .msgr_report,
            .mail_messenger:has(.msgr_compose_row.is-focused) .msgr_header .msgr_report {
                visibility: hidden;
            }
            & .msgr_compose .msgr_send:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            /* Beskedstack — newest nederst. JS prepender, så reverse. */
            & #mail_read {
                display: flex;
                flex-direction: column-reverse;
                gap: 6px;
            }

            & #mail_read > .mail_msg {
                display: flex;
                flex-direction: column;
                max-width: 80%;
                min-width: 0;

                &.mail_from_me {
                    align-self: flex-end;
                    align-items: flex-end;
                }
                &.mail_from_them {
                    align-self: flex-start;
                    align-items: flex-start;
                }
            }

            & #mail_read .mail_header {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
                width: auto;
                height: auto;
                padding: 0 6px 2px;
                background: transparent;
                font-size: 10px;
                color: #6a7077;

                & div {
                    position: static;
                    float: none;
                    width: auto;
                    height: auto;
                    padding: 0;
                    margin: 0;
                    background: transparent;
                    color: inherit;
                    font-size: inherit;
                    line-height: 1.2;
                }

                & div:nth-child(2) a {
                    color: #1f2327;
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & .mail_from_me .mail_header {
                flex-direction: row-reverse;
            }

            & #mail_read .mail_options {
                display: inline-flex;
                gap: 4px;

                & span {
                    cursor: pointer;
                    color: #4a6b8a;
                    font-size: 10px;
                }
            }

            & #mail_read .mail_body {
                display: block;
                width: auto;
                max-width: 100%;
                margin: 0;
                padding: 7px 11px;
                border-radius: 16px;
                line-height: 1.35;
                word-wrap: break-word;
                overflow-wrap: anywhere;

                & div {
                    width: auto;
                    margin: 0;
                    padding: 0;
                    background: transparent;
                }
            }

            & .mail_from_me .mail_body {
                background: #4a6b8a;
                color: white;
                border-bottom-right-radius: 4px;
            }
            & .mail_from_them .mail_body {
                background: white;
                color: #1f2327;
                border-bottom-left-radius: 4px;
            }

            & #mail_read .mail_attachment {
                width: auto;
                margin: 4px 0 0;
                font-size: 11px;
            }
            /* Skjul desktop's header-kolonnetitler ("Vedhæftet fil" /
               "Størrelse") i den smalle mobil-boble. */
            & #mail_read .mail_attachment .header {
                display: none;
            }
            /* Kompakt chip-stil pr. vedhæftning: paperclip + navn + størrelse
               i én linje, i stedet for desktop's 4-kolonne grid. */
            & #mail_read .mail_attachment .attachment {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 4px 8px;
                margin-top: 4px;
                background: #f3f5f8;
                border-radius: 10px;
                width: fit-content;
                max-width: 100%;
            }
            & #mail_read .mail_attachment .attachment > div {
                width: auto;
                padding: 0;
                border: 0;
            }
            & #mail_read .mail_attachment .attachment > div:nth-child(1)::before {
                content: '📎';
                font-size: 13px;
            }
            & #mail_read .mail_attachment .attachment > div:nth-child(2) {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 0 1 auto;
            }
            & #mail_read .mail_attachment .attachment > div:nth-child(2) a {
                color: #2a4a6b;
                text-decoration: underline;
            }
            & #mail_read .mail_attachment .attachment > div:nth-child(3) {
                color: #6a737c;
                flex: 0 0 auto;
            }
            & #mail_read .mail_attachment .attachment > div:nth-child(4) {
                display: none;
            }
            /* Begræns embeds (img/iframe/table) i bobler så HTML-mail
               med store billeder eller tabeller ikke skubber hele
               messenger-pane'en horisontalt. */
            & #mail_read .mail_body img,
            & #mail_read .mail_body iframe,
            & #mail_read .mail_body video {
                max-width: 100%;
                height: auto;
            }
            & #mail_read .mail_body table {
                max-width: 100%;
                table-layout: auto;
            }
            & #mail_read .mail_msg {
                max-width: 100%;
                overflow: hidden;
            }
            & #mail_read .mail_attachment .attachment img {
                max-width: 100%;
                height: auto;
            }
        }

        /* Det gamle #status (chat_ny_besked, item_chat osv.) bliver
           parkeret men skjult — vi beholder DOM-elementerne for at
           undgå at observers/lookups går i stykker. */
        & #bf_status_legacy {
            display: none !important;
        }

        /* Status-pane: kun status. (Newsticker er flyttet til menu-pane.) */
        & .bf-status-split {
            display: block;
            min-height: 100%;
        }

        & .bf-status-left {
            /* Mobil: skjul "status"-overskrift - overflødig i den
               kompakte status-pane. (#item_navn er flyttet til menu-pane.) */
            & #status > .top {
                display: none;
            }
        }

        /* Menu-pane: én kolonne — sektioner stables vertikalt.
           Rækkefølge: user-block, abonnement, chips, newsticker,
           4-box-grid, installer. */
        & .bf-menu-split {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            row-gap: 0;
            column-gap: 0;
        }

        /* DOM-rækkefølgen er ikke nødvendigvis matched med visuel
           rækkefølge fordi menuLeft + menuRight + bottomRow blev
           bygget separat. display:contents på wrappers + order på
           sektioner giver os fuld kontrol uden at flytte DOM rundt. */
        & .bf-menu-split .bf-user-block        { order: 1; }
        & .bf-menu-split #topmenu_right        { order: 2; }
        & .bf-menu-split #bf_menu_sub_slot     { order: 4; }
        & .bf-menu-split .bf-menu-footer-block { order: 5; margin-top: auto; }
        & .bf-menu-split .bf-menu-footer       { order: 6; }
        & .bf-menu-split .bf-menu-install-box  { order: 7; }
        /* Den oprindelige top-menu (post / chat / lounges / debat /
           lister / online / nærmeste / søg) er overflødig på mobil:
           bottom-nav i content-pane'en + chip-rail dækker
           navigationen. Skjul hele #menu i drawer'en. */
        & .bf-menu-split #menu                 { display: none; }

        /* menuLeft + menuRight er kun strukturelle wrappers nu —
           deres børn flades ud i menuSplit's flex-flow så vi kan
           styre rækkefølgen på individuelle elementer via order. */
        & .bf-menu-left {
            display: contents;

            /* Bruger-blokken \u00f8verst i venstre kolonne: navn,
               kontrolpanel/log af, og abonnementsboks. Afsluttes med
               en linje der adskiller fra hovedmenuen nedenfor.
               Venstre-padding flugter med .bf-mirror-heading (1em). */
            & .bf-user-block {
                box-sizing: border-box;
                grid-row: 1;
                padding: 12px 0.6em 12px 1em;
                border-bottom: 1px solid #3a4046;

                /* Brugerens navn \u00f8verst. */
                & #item_navn {
                    padding: 0 0 8px 0;
                    text-align: left;

                    & a, & .status_profilnavn {
                        color: white;
                        font-weight: bold;
                        font-size: 16px;
                        text-decoration: none;
                    }
                }

                /* "Kontrolpanel" + "log af" hejst op fra hovedmenuen,
                   side om side. Lige tekstlinks. */
                & .bf-user-actions {
                    display: flex;
                    gap: 2em;
                    margin: 0;
                    padding: 6px 0;
                    list-style: none;

                    & > li {
                        list-style: none;
                        margin: 0;
                        padding: 0;

                        & > a {
                            color: white;
                            text-decoration: none;
                            font-size: 0.85em;
                        }
                    }
                }
            }

            & #menu {
                grid-row: 2;
                min-height: 0;
            }

            /* Footer-blok: kun newsticker (sidder \u00f8verst i bunden). */
            & .bf-menu-footer-block {
                grid-row: 3;
                border-top: 1px solid #3a4046;
            }

            & #newsticker {
                position: static;
                width: 100%;
                height: auto;
                border: 0;
                background: #14171a;
                color: white;
                padding: 0.7em 0.8em;
                box-sizing: border-box;
                font-size: 0.9em;
                line-height: 1.4;

                /* Visuel rækkefølge: nyheder (link) → title → date.
                   DOM-rækkefølge er #ticker (date + title) så #link
                   (nyheder), så vi bruger flex-order til at vende dem. */
                display: flex;
                flex-direction: column;

                & #link {
                    order: 1;
                    position: static;
                    text-align: left;
                    padding: 0 0 0.3em 0;

                    & a {
                        color: white;
                        text-decoration: none;
                        font-weight: bold;
                        text-transform: uppercase;
                        letter-spacing: 0.05em;
                        font-size: 0.85em;
                    }
                }

                & #ticker {
                    order: 2;
                    position: static;
                    width: 100%;
                    height: auto;
                    padding: 0;
                    color: white;
                    display: flex;
                    flex-direction: column;

                    /* "<br />" mellem date og title - skjul den, vi
                       bruger flex-order i stedet. */
                    & br { display: none; }

                    & a {
                        color: white;
                        text-decoration: none;
                        font-weight: normal;
                    }

                    & .title {
                        order: 1;
                    }

                    & .date {
                        order: 2;
                        text-align: right;
                        opacity: 0.7;
                        font-size: 0.85em;
                        padding-top: 0.2em;
                    }
                }
            }

            /* Visits + online side om side i bunden af menu-pane'ens
               venstre kolonne. (Selve .bf-menu-footer-styling ligger
               som søskende-regel så den også gælder for info+GDPR-
               rækken i højre kolonne.) */

            & #menu {
                display: none !important;

                & ul#menu_logged_in {
                    display: flex;
                    flex-direction: column;

                    /* Mobil-rækkefølge efter JS-reparenting (hjem fjernet,
                       kontrolpanel + log af hejst op i højre menu-kolonne
                       under brugerens navn, nyheder droppet - newsticker
                       i venstre kolonne, info droppet - info+GDPR i
                       bund-rækken):
                       post, chat, lounges, debat, lister, online, nærmeste,
                       søg. */
                    & > li:nth-child(1)  { order: 1; }                /* post */
                    & > li:nth-child(2)  { order: 2; }                /* chat */
                    & > li:nth-child(3)  { order: 3; }                /* lounges */
                    & > li:nth-child(4)  { order: 4; }                /* debat */
                    & > li:nth-child(5)  { order: 5; }                /* lister */
                    & > li:nth-child(6)  { order: 6; }                /* online */
                    & > li:nth-child(7)  { order: 7; }                /* nærmeste */
                    & > li:nth-child(8)  { order: 8; }                /* søg */
                }

                & ul {
                    position: static;
                    display: block;
                    padding: 0;
                    margin: 0;

                    & li {
                        float: none;
                        display: block;
                        height: auto;
                        padding: 0.6em 1em;
                        border-bottom: 1px solid #3a4046;

                        & a {
                            color: white;
                            display: block;
                            padding: 0.4em 0;
                            text-decoration: none;
                        }

                        /* Pille med count (fx ul\u00e6ste mails) inde i en
                           menu-anchor. Sidder til h\u00f8jre i samme linje. */
                        & a > .bf-menu-pill {
                            display: inline-block;
                            float: right;
                            min-width: 1.4em;
                            padding: 0.1em 0.5em;
                            background: #ff6a3d;
                            color: white;
                            border-radius: 999px;
                            font-size: 0.8em;
                            font-weight: bold;
                            text-align: center;
                            line-height: 1.4;
                        }

                        /* Drop sub-menu hover-tricks - vis bare som indrykket liste. */
                        & ul {
                            display: none;
                            position: static;
                            padding-left: 1em;

                            & li {
                                background: transparent;
                                border: 0;
                                width: auto;
                                height: auto;
                                padding: 0.3em 0;
                            }
                        }

                        &.bf-menu-open > ul {
                            display: block;
                        }
                    }
                }
            }
        }

        /* Bund-række: visits, online, info, GDPR som 2x2 grid (var 4
           på én linje før drawer-omstillingen). */
        & .bf-menu-footer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background-color: #14171a;
            border-top: 1px solid #3a4046;

            & > div {
                background-color: #1f2327;
                color: white;
                padding: 0.6em 0.5em;
                text-align: center;
                font-size: 0.85em;

                /* Animations-wrapper: status.js fader gamle/nye tal
                   ind/ud som absolut-positionerede children. */
                & > div {
                    position: relative;
                    height: 1.6em;

                    & > div {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        font-size: 1.4em;
                        font-weight: bold;
                        line-height: 1.1;
                        text-align: center;
                    }
                }

                & > span {
                    display: block;
                    font-size: 0.8em;
                    opacity: 0.7;
                    line-height: 1.2;
                }
            }
        }

        & .bf-menu-right {
            display: contents;

            /* Installer-som-app boksen vises kun n\u00e5r pwa.js har
               modtaget beforeinstallprompt. Stil matcher footer-bokse
               (visits/online/info/GDPR) men med accent-farve s\u00e5 den
               skiller sig en smule ud som CTA. */
            & .bf-menu-install-box {
                background-color: #4a6b8a;
                color: white;
                padding: 0.6em 0.5em;
                text-align: center;
                font-size: 0.85em;
                border-top: 1px solid #3a4046;

                & > div > div {
                    font-size: 1em;
                    font-weight: bold;
                    line-height: 1.2;
                }
                & > span {
                    display: block;
                    font-size: 0.8em;
                    opacity: 0.85;
                    line-height: 1.2;
                }
            }
            & .bf-menu-install-box:hover {
                background-color: #5a7b9a;
            }

            /* Abonnementsboksen, hejst op via JS, sidder \u00f8verst i
               h\u00f8jre kolonne over sub-menuen. Bund-linjen flugter
               med bruger-blokken via subgrid. */
            & #topmenu_right {
                box-sizing: border-box;
                grid-row: 1;
                position: static;
                top: auto;
                left: auto;
                width: auto;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 12px 0 12px 0;
                border-bottom: 1px solid #3a4046;
                text-align: left;
                font-size: 0.8em;

                /* "Dit abonnement udl\u00f8ber:" + dato over selve boksen.
                   Venstre-padding flugter med .bf-mirror-heading (1em). */
                & > .expire {
                    display: block;
                    color: rgba(255, 255, 255, 0.65);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    font-size: 0.85em;
                    padding: 0 0 0.3em 1em;
                }
                & > .active {
                    display: block;
                    color: white;
                    font-weight: bold;
                    padding: 0 0 0.6em 1em;
                }
                & > br {
                    display: none;
                }

                & #abonnementsboks {
                    position: static;
                    display: block;
                    width: auto;
                    height: auto;
                    margin: 0;
                    padding: 0.7em 0.9em;
                    color: white;
                    background: linear-gradient(135deg, #ff6a3d 0%, #c1185b 100%);
                    border: 0;
                    border-radius: 0;
                    line-height: 1.5;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
                    cursor: pointer;
                    transition: transform 0.1s, box-shadow 0.15s;

                    & .left_arrow {
                        display: inline-block;
                        margin-right: 0.35em;
                        opacity: 0.9;
                    }

                    &:hover {
                        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
                    }
                    &:active {
                        transform: translateY(1px);
                    }
                }
            }

            & #bf_menu_sub_slot {
                grid-row: 2 / 4;
                min-height: 0;
                display: flex;
                flex-direction: column;
                gap: 14px;
                overflow: hidden;

                & .bf-mirror {
                    display: flex;
                    flex-direction: column;
                    min-height: 0;
                }
                /* Genbrug newsticker-titlens stil ("NYHEDER"): hvid,
                   bold, uppercase, let letter-spacing og let mindre
                   font. Bund-divider matcher #menu_logged_in's
                   #3a4046 så det visuelt hænger sammen med drawer'en.
                   Top-divider + mørk bg matcher newsticker-blokken
                   så hver mirror-section ligner en lille newsticker. */
                & .bf-mirror-heading {
                    display: block;
                    color: white;
                    text-decoration: none;
                    font-weight: bold;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    font-size: 0.85em;
                    padding: 0.55em 1em;
                    background: #14171a;
                    border-top: 1px solid #3a4046;
                    border-bottom: 1px solid #3a4046;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);

                    &:hover {
                        background-color: #1c2024;
                    }
                }
                & .bf-mirror-list {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    padding: 8px 1em;
                    overflow: hidden;

                    & .link {
                        display: flex !important;
                        align-items: center;
                        gap: 0.6em;
                        padding: 4px 6px;
                        cursor: pointer;
                        color: white;
                        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);

                        &:hover {
                            background-color: rgba(255, 255, 255, 0.06);
                        }
                        & a {
                            color: inherit;
                            text-decoration: none;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        & img {
                            width: 28px;
                            height: 28px;
                            border-radius: 2px;
                            flex: 0 0 auto;
                        }
                    }
                    & .bf-mirror-empty {
                        color: rgba(255, 255, 255, 0.4);
                        font-size: 0.85em;
                        padding: 0.4em 0.2em;
                        text-align: center;
                    }
                }
            }
        }
    }

    /* Indikator-prikker - fixed-pinnede til bunden af viewporten. JS
       flytter dem ud til <body> for at undgå transform-ancestor-fald-
       gruber. */
    /* Indikator-prikker - midlertidigt skjult mens vi finder en placering
       der virker på tværs af containing-block-quirks. JS bygger dem
       stadig så setActiveDot() ikke fejler. */
    #bf_mobile_dots {
        display: none;

        & .bf-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;

            &.is-active {
                background-color: white;
                transform: scale(1.3);
            }
        }
    }

    /* Logged-out: skjul menu- og status-pane'erne s\u00e5 kun content-pane'en
       (med login-formularen) er synlig. mobile-panes.js flytter
       newsticker + visits/info/GDPR + installer ned i .bf-loggedout-footer
       i bunden af content-pane'en, s\u00e5 brugeren stadig har adgang til
       dem uden at swipe. */
    body.is-logged-out {
        & #bf_mobile_swiper {
            overflow-x: hidden;
        }

        & #bf_mobile_swiper > .bf-pane--menu,
        & #bf_mobile_swiper > .bf-pane--status {
            display: none;
        }

        /* Lad content-pane'en blive en flex-column s\u00e5 footer-blokken
           kan sidde i bunden, mens scrolleren tager resten af pladsen. */
        & #bf_mobile_swiper > .bf-pane--content {
            display: flex;
            flex-direction: column;
        }

        & #bf_mobile_swiper > .bf-pane--content > .bf-content-scroll {
            flex: 1 1 auto;
            min-height: 0;
        }

        & .bf-loggedout-footer {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            background-color: #292e32;
            color: white;
            border-top: 1px solid rgba(255, 255, 255, 0.1);

            /* Top-r\u00e6kken: newsticker (venstre, fyldende) + installer (h\u00f8jre, fast bredde).
               Newsticker'en er reparented hertil fra menu-pane'en, s\u00e5 vi
               gentager flex/order-reglerne her (de oprindelige er scoped
               under .bf-menu-left). */
            & .bf-loggedout-top {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 1px;
                background-color: rgba(255, 255, 255, 0.08);
                align-items: stretch;

                & #newsticker {
                    position: static;
                    width: 100%;
                    height: auto;
                    border: 0;
                    background: #14171a;
                    color: white;
                    padding: 0.7em 0.8em;
                    box-sizing: border-box;
                    font-size: 0.9em;
                    line-height: 1.4;
                    display: flex;
                    flex-direction: column;

                    & #link {
                        order: 1;
                        position: static;
                        text-align: left;
                        padding: 0 0 0.3em 0;

                        & a {
                            color: white;
                            text-decoration: none;
                            font-weight: bold;
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                            font-size: 0.85em;
                        }
                    }

                    & #ticker {
                        order: 2;
                        position: static;
                        width: 100%;
                        height: auto;
                        padding: 0;
                        color: white;
                        display: flex;
                        flex-direction: column;

                        & br { display: none; }

                        & a {
                            color: white;
                            text-decoration: none;
                            font-weight: normal;
                        }

                        & .title { order: 1; }

                        & .date {
                            order: 2;
                            text-align: right;
                            opacity: 0.7;
                            font-size: 0.85em;
                            padding-top: 0.2em;
                        }
                    }
                }

                & .bf-menu-install-box {
                    background-color: #4a6b8a;
                    color: white;
                    padding: 0.5em 0.8em;
                    text-align: center;
                    font-size: 11px;
                    cursor: pointer;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 2px;
                    border: 0;

                    & > span {
                        font-size: 9px;
                        line-height: 1.1;
                        opacity: 0.85;
                    }
                }
            }

            /* Bottom-r\u00e6kken \u00f8nsker vi skal se ud som menu-pane'ens
               .bf-menu-footer (samme regelblok overtager) - men i logged-out
               sidder den i en flex-column, ikke i grid'et, s\u00e5 vi nulstiller
               grid-row som ellers er pinned til 4. */
            & .bf-menu-footer {
                grid-row: auto;
                grid-column: auto;
            }
        }
    }

    /* Login-side: desktop-versionen er bygget med fast 280px float +
       absolut positionering i den \u00f8verste billed-banner, og et 3-kolonne
       grid (info / bliv-medlem / log-ind / gemte-logins) i bunden. P\u00e5
       mobil stakker vi alt vertikalt og slipper alle faste bredder. */
    #section_login {
        & > div:nth-child(1) {
            height: auto;
            /* Drop det dekorative banner-billede - p\u00e5 mobil bliver
               velkomst-teksten ulselig p\u00e5 toppen af det. */
            background-image: none !important;
            padding: 1em;

            & > div {
                width: auto;
                position: static;
                float: none;
                top: auto;
                left: auto;
            }

            /* Skjul "Velkommen til boyfriend.dk" - overfl\u00f8dig p\u00e5 mobil
               hvor logoet i toprow allerede siger det. */
            & h1 {
                display: none;
            }
        }

        & > div:nth-child(2) {
            height: auto;
            /* Samme grund - drop baggrundsbilledet, hold pane'en clean. */
            background-image: none !important;
            background-color: #626970;
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 1em;
            gap: 1em;

            /* Gemte logins (3. barn) skal sp\u00e6nde over begge kolonner. */
            & > div:nth-child(3) {
                grid-column: 1 / -1;
            }

            .login {
                grid-template-columns: 1fr;
                margin: 0.5em 0;
                gap: 0.6em;

                & div {
                    & > input:not([type=checkbox]) {
                        width: 100%;
                        box-sizing: border-box;
                        height: 2.2em;
                        font-size: 16px; /* Forhindrer iOS-zoom ved focus */
                    }
                }

                & div:nth-child(3),
                & div:nth-child(4) {
                    grid-template-columns: auto 1fr;
                    justify-self: stretch;
                }
            }

            /* Skjul den native submit-knap - desktop hider den via
               .login .submit, men her er den et s\u00f8skende-element til
               .login og bliver derfor synlig p\u00e5 mobil. */
            form .submit {
                display: none;
            }

            .blivmedlem {
                float: none;
            }

            & .logins_saved .logins_container {
                grid-template-columns: 1fr;
            }
        }

        h7 {
            font-size: 20px;
        }
    }
}

/* === Mobil: lister & qsort-filter (bund-sheet) === */
@media (max-width: 1024px) {
    /* qsort-grid skjules som standard — erstattet af Filter-knappen
       (mobile-panes.js injicerer .bf-qsort-filter-btn lige før). */
    #qsort_filter_display {
        display: none;
    }
    /* Sortbar-rækken (alfabetisk/dato osv.) sjusker også layout —
       gem den, sortering kan stadig ændres via kolonne-overskrifter
       ... som vi gemmer. Brugeren kan altid bruge filter-sheet'et. */
    #qsort_sortbar {
        display: none;
    }

    /* Filter-dock: fast panel i bunden af content-pane'en, lige over
       bottom-nav. Samme placering som #if_profile_menu på profil-sider.
       Selve docken er grid-containeren med 6 lige brede celler. */
    .bf-pane--content > .bf-qsort-filter-dock {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 56px;
        z-index: 6;
        padding: 8px 6px 5px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
        color: #d6dadf;
        font-size: 0.85em;
        line-height: 1.1;
        background:
            linear-gradient(168deg, rgba(43, 10, 38, 0.85) 0%, rgba(14, 41, 84, 0.85) 50%, rgba(43, 10, 38, 0.85) 100%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    body.is-pwa .bf-pane--content > .bf-qsort-filter-dock {
        bottom: 72px;
    }
    /* Sørg for at scroll-indholdet kan rulles forbi filter-dock'en. */
    .bf-pane--content:has(> .bf-qsort-filter-dock) > .bf-content-scroll {
        padding-bottom: 70px;
    }

    /* Vis/reset-celler er <button> uden default-styling, samme look som
       de fire helper-celler. */
    .bf-qsort-iconcell {
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        cursor: pointer;
    }
    .bf-qsort-iconcell .bf-qsort-lbl {
        font-size: 1em;
    }
    .bf-qsort-iconcell:active {
        background: rgba(255, 255, 255, 0.14);
    }

    /* Filter-kort: 4 helper-celler + vis-toggle + reset = 6 inline ikoner.
       Dock'en er grid-containeren; .bf-qsort-filter-btn er display:contents. */
    .bf-qsort-filter-btn {
        display: contents;
        font-family: inherit;
        text-align: center;
        cursor: pointer;
    }
    .bf-qsort-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        padding: 4px 2px;
        border-radius: 8px;
        min-width: 0;
        color: #d6dadf;
        font-size: inherit;
        line-height: 1.1;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
    .bf-qsort-ic {
        display: inline-block;
        line-height: 0;
        color: #d6dadf;
        position: relative;
    }
    .bf-qsort-ic svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }
    /* Sort-indikator (Option B): lille hvid pille i øverste højre
       hjerne af ikonet når kolonnen er aktivt sort-key. Visuelt look
       lånt fra profil-menuens .count: hvid pille med skygge.
       Inde i pillen tegner vi en CSS-pil (samme teknik som .left_arrow
       / .btn_big .arrow) roteret -90° (op) eller +90° (ned). */
    .bf-qsort-sort {
        position: absolute;
        top: -2px;
        right: -10px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 999px;
        box-shadow: 0 0 0 1px #fff;
        display: none;
        pointer-events: none;
    }
    .bf-qsort-sort.is-active {
        display: inline-block;
    }
    .bf-qsort-sort::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid rgb(14, 41, 84);
    }
    .bf-qsort-sort::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 18%;
        transform: translateY(-50%);
        width: 4px;
        height: 2px;
        background: rgb(14, 41, 84);
    }
    /* Op = roter hele pilen -90°; ned = +90°. */
    .bf-qsort-sort.is-up    { transform: rotate(-90deg); }
    .bf-qsort-sort.is-down  { transform: rotate(90deg); }
    .bf-qsort-lbl {
        font-size: 1em;
        opacity: 0.8;
    }
    .bf-qsort-val {
        font-size: 1em;
        color: #fff;
        font-weight: normal;
        opacity: 0.95;
        text-transform: lowercase;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bf-qsort-filter-btn:active .bf-qsort-cell {
        background: rgba(255, 255, 255, 0.14);
    }
    .bf-qsort-filter-btn:active {
        transform: translateY(1px);
    }

    /* Bund-sheet: når body har .bf-qsort-open vises filteret som
       en sub-sub-menu der sidder lige oven på .bf-qsort-filter-dock
       (samme look/position som dock'en, bare et lag højere). Ingen
       backdrop — klik udenfor lukker stadig via JS. */
    body.bf-qsort-open #qsort_filter_display {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        bottom: 132px; /* fallback; JS overskriver med m\u00e5lt dock-h\u00f8jde */
        left: 0;
        right: 0;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        background:
            linear-gradient(168deg, rgba(43, 10, 38, 0.92) 0%, rgba(14, 41, 84, 0.92) 50%, rgba(43, 10, 38, 0.92) 100%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        border-radius: 0;
        padding: 8px 10px;
        margin: 0;
        z-index: 7;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
        gap: 0;
    }
    body.is-pwa.bf-qsort-open #qsort_filter_display {
        max-height: calc(100vh - 220px);
    }
    /* Sheet'et er nu inde i .bf-pane--content (mobile-panes.js flytter
       det ind ved boot). */
    body.bf-qsort-open #qsort_filter_display > div:last-child {
        position: absolute;
        top: 12px;
        right: 16px;
        display: flex;
        gap: 8px;
        padding: 0;
        margin: 0;
        z-index: 1;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox {
        background: transparent;
        border-radius: 0;
        padding: 0;
        margin: 0;
        border-bottom: 0;
        position: static;
        display: block;
        min-width: 0;
        color: #fff;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox:last-of-type {
        border-bottom: 0;
    }
    /* Første box (alder) skal ikke skubbes under de absolutte
       Nulstil/Ok-knapper i top-højre. */
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox:first-child {
        padding-top: 0;
        padding-right: 150px;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div {
        float: none;
        padding: 0;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox div,
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options div {
        float: none !important;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div:nth-child(1) {
        display: none; /* skjul left_arrow ikon i sheet'et */
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div:nth-child(2) {
        display: block;
        font-size: 0.85em;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 0 0 8px 0;
        font-weight: 600;
        opacity: 0.85;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div:nth-child(2) br,
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div:nth-child(2) b {
        display: none; /* værdien står allerede i dock-cellen */
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options {
        display: block !important;
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal !important;
        z-index: auto;
        width: 100% !important;
        box-sizing: border-box;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox {
        width: 100%;
        box-sizing: border-box;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox > div:nth-child(3) {
        float: none !important;
        width: 100%;
        clear: both;
    }
    /* Checkbox-lister: 'Alle' på egen linje, sub-options i et auto-fit grid
       så kolonner er lige brede og labels altid flugter lodret. */
    body.bf-qsort-open #qsort_filter_display #qsort_area_div,
    body.bf-qsort-open #qsort_filter_display #qsort_target_div,
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox:has(input[name="qsort_gender_all"]) .qsort_optionbox_options {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
        column-gap: 8px;
        row-gap: 0;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options > label:not(.bf-age-side) {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        white-space: normal;
        padding: 2px 0;
        min-width: 0;
        color: #fff;
        text-transform: lowercase;
        font-size: 0.95em;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options > label > input[type="checkbox"] {
        flex: 0 0 auto;
        margin-top: 2px;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options > label.qsort-all {
        margin-bottom: 4px;
        font-weight: 600;
        grid-column: 1 / -1;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options select {
        font-size: 16px; /* undgå iOS-zoom */
        padding: 4px 6px;
        margin-right: 6px;
    }
    body.bf-qsort-open #qsort_filter_display .qsort_optionbox_options a {
        display: inline-block;
        padding: 4px 0;
        color: #fff;
    }
    body.bf-qsort-open #qsort_filter_display > div:last-child {
        order: -1;
        align-self: flex-end;
        display: flex;
        gap: 8px;
        padding: 0;
        margin: 0 0 8px 0;
    }
    body.bf-qsort-open #qsort_filter_display > div:last-child > a {
        flex: 0 0 auto;
        text-align: center;
        padding: 6px 14px;
        background: #a51243;
        color: #fff;
        text-decoration: none;
        border-radius: 999px;
        font-weight: 600;
        font-size: 0.85em;
        line-height: 1.2;
    }
    body.bf-qsort-open #qsort_filter_display > div:last-child > a[data-action="qsort-reset"] {
        background: transparent;
        color: #6b7780;
        border: 1px solid #d4dae0;
    }
    /* Per-cell sheet (auto-submit on change): vis kun den valgte
       sektion. Body får data-bf-qsort-only="age|gender|area|target". */
    body.bf-qsort-open[data-bf-qsort-only] #qsort_filter_display > div:last-child {
        display: none !important;
    }
    body.bf-qsort-open[data-bf-qsort-only="age"] #qsort_filter_display .qsort_optionbox:not(:nth-child(1)),
    body.bf-qsort-open[data-bf-qsort-only="gender"] #qsort_filter_display .qsort_optionbox:not(:nth-child(2)),
    body.bf-qsort-open[data-bf-qsort-only="area"] #qsort_filter_display .qsort_optionbox:not(:nth-child(3)),
    body.bf-qsort-open[data-bf-qsort-only="target"] #qsort_filter_display .qsort_optionbox:not(:nth-child(4)) {
        display: none !important;
    }
    /* Den synlige sektion må gerne fylde uden top-knap-padding. */
    body.bf-qsort-open[data-bf-qsort-only] #qsort_filter_display .qsort_optionbox:first-child {
        padding-right: 0;
    }
    /* To separate alder-slidere. Label venstre, slider højre i et
       to-kolonne grid så både "fra" og "til" flugter lodret og
       slideren får mest mulig bredde. */
    .bf-age-slider {
        padding: 4px 0 6px;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }
    .bf-age-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
    }
    .bf-age-side {
        display: grid !important;
        grid-template-columns: 4.5em 1fr;
        align-items: center;
        gap: 10px;
        min-width: 0;
        width: 100%;
        float: none !important;
        padding: 0 !important;
    }
    .bf-age-side > * {
        float: none !important;
        min-width: 0;
    }
    .bf-age-side-label {
        color: #fff;
        font-size: 0.95em;
        text-transform: lowercase;
        white-space: nowrap;
    }
    .bf-age-side-label b {
        font-weight: 600;
    }
    .bf-age-slider input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        height: 24px;
        background: transparent;
        margin: 0;
        padding: 0;
        display: block;
    }
    .bf-age-slider input[type="range"]::-webkit-slider-runnable-track {
        height: 4px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 999px;
    }
    .bf-age-slider input[type="range"]::-moz-range-track {
        height: 4px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        border: 0;
    }
    .bf-age-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #a51243;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        margin-top: -9px;
    }
    .bf-age-slider input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #a51243;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    /* H1 + (vis-toggle + Filter-knap) på samme linje. mobile-panes.js
       pakker dem i .bf-list-head så Filter sidder højre-justeret inline
       med listenavnet. */
    .bf-list-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 10px;
        margin: 14px 0 10px 0;
    }
    .bf-list-head > h1 {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bf-list-head-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    /* Hvis Filter-knappen ikke kan være på samme linje som titlen,
       så lad højre-blok bryde til ny linje og fylde fuld bredde. */
    .bf-qsort-filter-btn {
        max-width: 100%;
    }
    /* Sammendrag af aktive filtre under titlen — viser de fire qsort
       'helper'-tekster (alder/køn/område/søger) som små chips. */
    .bf-qsort-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        margin: 0 0 12px 0;
        font-size: 0.88em;
        color: #6b7780;
        line-height: 1.25;
    }
    .bf-qsort-summary > span {
        background: #EEF3F6;
        padding: 5px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .bf-qsort-summary > span > b {
        color: #14171a;
        font-weight: 600;
    }

    /* Vis-toggle (oversigt | galleri) — flyttet ud af bund-sheet'et
       så den altid er tilgængelig. Fjerner left_arrow + label-cellen,
       viser kun selve oversigt|galleri-linket. */
    .qsort_optionbox.bf-qsort-vis {
        background: #EEF3F6;
        padding: 3px;
        margin: 0;
        position: static;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
    }
    .qsort_optionbox.bf-qsort-vis > div:nth-child(1),
    .qsort_optionbox.bf-qsort-vis > div:nth-child(2) {
        display: none;
    }
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options {
        display: inline-flex !important;
        position: static !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        white-space: nowrap !important;
        font-size: 0;
        gap: 0;
    }
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options a {
        color: #6b7780;
        text-decoration: none !important;
        padding: 5px 10px;
        border-radius: 999px;
        font-weight: 500;
        font-size: 0;
        line-height: 0;
        transition: background 0.15s, color 0.15s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Ikon via ::before med SVG-mask, så aktiv-pillen kan farve den hvid */
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options a[data-mode]::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options a[data-mode="oversigt"]::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v3H3zM3 10.5h18v3H3zM3 16h18v3H3z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v3H3zM3 10.5h18v3H3zM3 16h18v3H3z'/></svg>");
    }
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options a[data-mode="galleri"]::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/></svg>");
    }
    .qsort_optionbox.bf-qsort-vis .qsort_optionbox_options a.bold {
        background: #a51243;
        color: #fff;
        font-weight: 600;
        text-decoration: none !important;
    }

    /* Galleri-mode: 2 per række, tæt gap, ingen indre padding */
    .gallery_grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 4px !important;
    }
    .gallery_grid > div {
        padding: 0 !important;
    }
    .gallery_grid .picture {
        border-radius: 6px !important;
        border: 0 !important;
    }

    /* Liste-rækker som kompakte cards. På mobil bruger vi container-
       grid + subgrid igen så ALLE rækker deler samme 4 kolonne-bredder
       (ellers shifter age/area-bredderne fra række til række). */
    .list_grid {
        display: grid !important;
        width: 100%;
        grid-template-columns: max-content minmax(0, 1.4fr) minmax(0, 1.6fr) max-content !important;
    }
    .list_grid > .lr.is-header {
        display: none !important;
    }
    /* Bagudkompatibel: gamle [header]-rækker (hvis nogen) */
    .list_grid > div[header] {
        display: none !important;
    }

    /* Hver række = subgrid (arver containerens 4 kolonne-tracks).
       Vi definerer 3 row-tracks med template-areas:
       - col 1: avatar (spans alle text-rækker)
       - col 2: username (top) / age (mid)
       - col 3: area (top) / target (mid)
       - col 4: gender (Mand / Fyre — to linjer, spans alle text-rækker)
       Add-cellen får sin egen række på tværs af alle kolonner. */
    .list_grid > .lr {
        display: grid !important;
        grid-column: 1 / -1;
        grid-template-columns: subgrid !important;
        grid-template-areas:
            "icon username area   gender"
            "icon age      target gender"
            "icon date     date   date"
            "icon add      add    add" !important;
        gap: 0 12px !important;
        padding: 8px 10px !important;
        align-items: center !important;
        background-color: transparent;
        border-bottom: 1px solid #eee;
    }
    .list_grid > .lr:nth-child(even) {
        background-color: var(--blue-light, #f4f7f9);
    }
    .list_grid > .lr.highlight {
        background-color: #ffe7ee !important;
    }
    .list_grid > .lr > div {
        padding: 0 !important;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: transparent !important;
    }

    .list_grid > .lr .icon {
        grid-area: icon;
        align-self: center !important;
        text-align: left !important;
        line-height: 0 !important;
        padding-right: 0 !important;
    }
    .list_grid > .lr .icon svg {
        width: 34px;
        height: auto;
        display: block;
        vertical-align: middle;
    }
    .list_grid > .lr .icon img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        vertical-align: top;
    }

    .list_grid > .lr .username {
        grid-area: username;
        font-weight: 600;
        font-size: 1em;
        line-height: 1.25;
        align-self: end;
    }
    .list_grid > .lr .age {
        grid-area: age;
        font-size: 0.85em;
        color: #666;
        line-height: 1.25;
        text-align: left;
        align-self: start;
    }
    .list_grid > .lr .area {
        grid-area: area;
        font-size: 0.9em;
        font-weight: 600;
        color: #14171a;
        line-height: 1.25;
        align-self: end;
    }
    .list_grid > .lr .target {
        grid-area: target;
        font-size: 0.85em;
        color: #666;
        line-height: 1.25;
        align-self: start;
    }
    /* Gender: 'Mand <br> Fyre'. Højre-justeret, spans begge linjer
       lodret. Override desktop's xx-small. */
    .list_grid > .lr .gender {
        grid-area: gender;
        font-size: 0.85em !important;
        color: #888;
        text-align: right;
        line-height: 1.25;
        white-space: normal;
        align-self: center;
    }
    .list_grid > .lr .gender strong {
        font-weight: 600;
        color: #14171a;
    }
    .list_grid > .lr .gender:empty {
        display: none !important;
    }
    /* Add-cellen — fx 'Fjern blokering' (blokerede), eller afstand
       (nærmeste). Spans hele bredden under, kun synlig hvis indhold. */
    .list_grid > .lr .add {
        grid-area: add;
        font-size: 0.85em;
        padding-top: 4px !important;
        text-align: left !important;
    }
    .list_grid > .lr .add:empty {
        display: none !important;
    }
    .list_grid > .lr .add a {
        color: #14171a;
        text-decoration: underline;
    }
    /* Date — vises kun på lister hvor qsort_heading.date != null
       (fx gæster, besøgte). På andre lister hider lists.js cellen. */
    .list_grid > .lr .date {
        grid-area: date;
        font-size: 0.8em;
        color: #888;
        padding-top: 2px !important;
        text-align: left !important;
    }
    .list_grid > .lr .date:empty {
        display: none !important;
    }
}