/* ====================================================================
    SVG stroke utilities — reusable icon styling across mobile UI.
    ==================================================================== */
svg[class*="bf-pm"],
svg[class*="bf-bn"] {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ====================================================================
   Mobile viewport scaffold.
   Holder app-shell i viewport-hjde p5 mobil/PWA og reserverer
   safe-area uden at l6kke overflow. Desktop nulstiller i min-width.
   ==================================================================== */
body.is-pwa, html:has(body.is-pwa) {
    height: 100lvh;
}

body > div:not(#list_info_container):not(#bf_profile_action_rail):not(.modal-overlay):not(#bf-report-box) {
    flex-direction: column;
    align-items: stretch;
    height: 100dvh;
    min-height: 0;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
body.is-pwa > div:not(#list_info_container):not(#bf_profile_action_rail):not(.modal-overlay):not(#bf-report-box) {
    height: 100lvh;
}

@media (min-width: 64em) {
    html, body {
        height: auto;
        overflow-y: scroll;
        overflow-x: clip;
    }
    body.is-pwa, html:has(body.is-pwa) {
        height: auto;
    }
    body > div:not(#list_info_container):not(#bf_profile_action_rail):not(.modal-overlay):not(#bf_boot_splash):not(#bf-report-box) {
        flex-direction: row;
        align-items: initial;
        height: auto;
        box-sizing: content-box;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body.is-pwa > div:not(#list_info_container):not(#bf_profile_action_rail):not(.modal-overlay):not(#bf_boot_splash):not(#bf-report-box) {
        height: auto;
    }

}

/* #postikon (post-ikonet i topbar) og #post_container (wrapperen om
   det) toggles via JS på desktop — på mobil skal de aldrig vises,
   uanset hvad JS gør. !important fordi JS sætter display via inline
   style; uden important ville inline vinde på mobil. Desktop @media
   reverter til auto så JS kan styre normalt. */
#postikon, #post_container {
    display: none !important;

    @media (min-width: 64em) {
        display: revert !important;
    }
}

/* #team_menu / #team: indhold og menu i admin-sidepanelet.
   Bredden styres af #team_container ovenfor (se outer shell). */
#team_menu, #team {
    background-color: var(--white);
    overflow: hidden;
}


.thumb_link {
    text-decoration: none;

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

.thumb_comment_box {
	padding: 0.62rem;
	margin: 0.25rem;
	width: 28.12rem;
	overflow: hidden;
	position: relative;
    background-color: var(--white);

    & > a {
        font-weight: bold;
        text-decoration: none;
    }
}

.thumb_comment_box_remove {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1px 0.31rem 0 0;

    & a {
        font-weight: bold;
        color: var(--steel);
        text-decoration: none;
    }
}

.thumb_textarea {
    border-style: none;
    overflow: hidden;
    width: 28.12rem;
}

/* Alders-slider widget brugt i qsort-popup, søg-formular og profil-
   qualify-rows. Markup genereres af _elements.age_slider_markup() i
   www/js/libs/elements.js og bindes med _elements.age_slider_bind(). */
.bf-age-slider--desktop {
    padding: 0.25rem 0 0.38rem;
    width: 100%;
    max-width: 20rem;
    display: block;

    & .bf-age-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }
    & .bf-age-side {
        display: grid;
        grid-template-columns: 5em 1fr;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        width: 100%;
        padding: 0;

        & > * {
            min-width: 0;
        }
    }
    & .bf-age-side-label {
        font-size: var(--fs-body);
        white-space: nowrap;
    }
    & input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        min-width: 0;
        height: 1.38rem;
        background: var(--trans-a00);
        margin: 0;
        padding: 0;
        display: block;

        &::-webkit-slider-runnable-track {
            height: 0.25rem;
            background: var(--trans-a20);
            border-radius: 999px;
        }
        &::-moz-range-track {
            height: 0.25rem;
            background: var(--trans-a20);
            border-radius: 999px;
            border: 0;
        }
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1.12rem;
            height: 1.12rem;
            border-radius: 50%;
            background: var(--white);
            border: 0.12rem solid var(--brand-pink);
            box-shadow: 0 1px 2px var(--trans-a20);
            cursor: pointer;
            margin-top: -0.44rem;
        }
        &::-moz-range-thumb {
            width: 1.12rem;
            height: 1.12rem;
            border-radius: 50%;
            background: var(--white);
            border: 0.12rem solid var(--brand-pink);
            box-shadow: 0 1px 2px var(--trans-a20);
            cursor: pointer;
        }
    }
}
/* Give popup containing the age slider extra room so the track has
   enough pixels for one-pixel-per-year resolution-ish (83 steps). */
.qsort_optionbox_options:has(.bf-age-slider--desktop) {
    min-width: 21.25rem;
}

/* Payment */
.buyknap {
	width: 2.5rem;
	background-color: var(--white);
	font-size: var(--fs-xs);
}

/*
	Anmeld-funktioner
*/
[data-auto="icon"][data-icon="report"] {
    color: #8d96a6;
}

[data-auto="icon"][data-icon="report"] svg {
    padding: 20%;
}

.bf-report-cta {
    display: flex;
    gap: 0.62rem;

    & > .bf-report-cta__icon {
        display: inline-flex;
        flex: 0 0 auto;

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

    & > .bf-report-cta__link {
        text-decoration: none;
    }

    &.bf-report-cta--forum {
        align-items: center;

        & > .bf-report-cta__icon {
            width: 3.9rem;
            height: 3.9rem;
        }
    }

    /* Mail: smal kolonne i send-knap-området → stak ikon OVER tekst og
       centrér, så teksten ikke klemmes/flyder ud til højre for ikonet.
       Kompakt: mindre ikon, ingen p-margin, tæt linjeafstand. */
    &.bf-report-cta--mail {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.1rem;

        & > .bf-report-cta__icon {
            width: 2.6rem;
            height: 2.6rem;
        }

        & > .bf-report-cta__link {
            line-height: 1.25;

            & p {
                margin: 0 0 0.1rem;
            }
        }
    }

    &.bf-report-cta--profile,
    &.bf-report-cta--gallery {
        align-items: flex-start;
    }

    &.bf-report-cta--profile > .bf-report-cta__icon {
        width: 3.46rem;
        height: 3.46rem;
    }

    &.bf-report-cta--gallery > .bf-report-cta__icon {
        width: 4.5rem;
        height: 4.5rem;
    }
}

.report_container {
    background-color: var(--blue-dark);
    padding: 2.81rem 0.62rem 0.94rem 0.62rem;
    border-radius: 0.94rem;
}

.report_container .bf-report-cta__link {
	text-decoration: none;
	color: var(--steel);
	font-size: var(--fs-xs);
    text-shadow: 1px 1px var(--gray-line-soft);
}

.report-box {
	background-color: var(--blue-dark);
    min-height: 2.19rem;
    margin: 2em;
    border-radius: 1em;
    padding: 1em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & > .bf-report-cta__link {
        line-height: 1.35;
    }

}

.hidden {
	display: none;
}

.clear {
	clear: both;
}

.center {
    text-align: center;
}


.fright {
    float: right;
}

/* ====================================================================
   Sub-tab strip (.menu_sub) — fx scorechat / fri chat / privat chat.
   Mobil: skjult. menu.js's klik-delegering virker stadig (markup er i
   DOM); inde i swipe-pane'en gen-spejles elementet som rainbow-chips
    og som profil-overlay (scoped block lige nedenfor).
   Desktop (>= 64em): klassisk gradient-tab-row.
   ==================================================================== */

.menu_sub {
    /* Mobil-default: skjult. Den gamle tab-row hører til den faste
       770px-content-frame; mobil-navigationen sker via swipe-pane og
       bottom-nav. */
    display: none;

    @media (min-width: 64em) {
        display: block;
        position: relative;
        background-color: var(--surface-dark);
        height: 1.94rem;

        & ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 1.94rem;
            display: table;
            table-layout: fixed;
            width: var(--content-inner);
            position: relative;

            & li {
                height: 1.94rem;
                padding: 0 0.31rem;
                background-color: var(--blue-dark);
                border-right: 1px solid var(--white);
                display: table-cell;
                line-height: 1.25rem;
                position: relative;

                &:first-child {
                    border-top-left-radius: 0.94rem;
                }

                & .count {
                    background-color: var(--gray-soft);
                    border-radius: 0.5rem;
                    padding: 1px 0.44rem 0.12rem 0.44rem;
                    font-weight: bold;
                    float: left;
                    text-align: center;
                    line-height: 0.81rem;
                    margin: 0.5rem 0 0 0.31rem;
                }

                & .text {
                    margin: 0.38rem 0 0 0;
                    text-align: center;
                }
            }
        }

        & .selected {
            background-color: var(--white);
        }
    }
}

.section_chat, .section_chat_history {
    & #qsort_filter_display {
        margin-top: 0;
        padding: 1.5em 2em 0 2em;
    }

    & #chat_content_container {
        height: 1px;
    }

    & #chat_content_container, #chat_history_content_container {
        & #chat_content, #chat_history_content {
            display: grid;
            grid-template-columns: minmax(11rem, 1.8fr) minmax(0, 5.2fr);

            padding-top: 0;
            overflow: hidden;
            max-height: 100%;

            & > div {
                display: contents;

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

                & a, a:active {
                    font-weight: bold;
                    text-decoration: none;
                }

                & div:nth-child(1) {
                    & a {
                        display: block;
                        cursor: pointer;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                & div {
                    padding: 0.5em;
                    word-wrap: break-word;

                    & span {
                        color: var(--accent-blue);
                    }
                }

                .red {
                    color: var(--red);
                }

                .blue {
                    color: var(--name-blue) ! important;
                    font-weight: bold;
                    background-color: var(--pink-soft) ! important;
                }
            }
        }
    }

     /* Desktop chat-box layout. Mobil (<64em) styles ligger i den mobile sektion i denne fil
       og bygger en messenger-style grid (tools | input | send) — så vi
       må IKKE lade desktop's 5fr/2fr/2fr-grid eller width:25rem-input
       sive ned i mobil-viewport'en. Hele blokken gates af min-width: 64em. */
    @media (min-width: 64em) {
        & #chat_box {
            display: grid;
            grid-template-columns: 5fr 2fr 2fr;
            gap: 0;
            width: 100%;
            padding: 0.62rem;
            min-height: 4.69rem;
            background-color: #C5D2DA;

            /* Privat-rum: pink baggrund. Klassen toggles fra chat.js
               (boxcolor / renderRoom) i stedet for inline-style. */
            &.private {
                background-color: pink;
            }
            margin-bottom: 0.62rem;

            & #msg_name {
                font-weight: bold;
            }

            & input,
            & textarea {
                width: 25rem;
            }

            & textarea {
                resize: none;
                font: inherit;
            }

            & .bf-chat-tools a {
                text-decoration: none;
                color: var(--accent-blue);
            }

            & #to_name {
                line-height: 1.56rem;
            }
        }
    }
}

/* Desktop scorechat: qsort dropdown must be able to overflow the
   content column and stack above the status sidebar. #if_content is
   otherwise overflow:hidden globally, which clips the popup. */
@media (min-width: 64em) {
    #content_container > .content #if_content:has(.section_chat #qsort_filter_display) {
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    .section_chat #qsort_filter_display,
    .section_chat .qsort_optionbox {
        position: relative;
        z-index: 21;
    }
}


#item_navn {
	padding-top: 0.94rem;
    text-align: center;
}



#team_container {
    position: relative;
    top: 6.62rem;
}

.innerdiv {
    padding: 1.5em 2em 1.5em 2em;
}

.mailheader, .lounge-tree > .category {
    background-color: var(--surface-header);
    min-height: 1.25rem;
    color: var(--surface-header-text);
    padding: 0.25rem;
}

/* ====================================================================
    Legacy global typography baseline.
    NOTE: The rules in this section still override the newer token-based
    heading/body sizing declared earlier in the file, because they appear
    later in source order and target broad legacy markup.
    Any further narrowing of h1/h2/p/div/td here requires a visual sweep.
    ==================================================================== */
.m1 {
	line-height: 0.94rem;
	padding: 0.25rem;
	background-color: var(--blue-light);
}

/* Radio-gruppe som klikbare tekst-links med pipe-separator (Alle | Mine
   favoritter). Markup: <div class="radio-pipe"> med <input type="radio">
   + <label for=...> par, adskilt af bogstavelige "|" tekst-noder.
   Selve radioen skjules off-screen så <label> bliver klik-target.
   Aktiv valg fremhæves med fed. Bruges på desktop, mobil og PWA. */
.radio-pipe {
	display: inline-block;

	& input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
		width: 0;
		height: 0;
	}
	& label {
		display: inline-block;
		padding: 0.5em;
		cursor: pointer;
	}
	& input[type="radio"]:checked + label {
		font-weight: bold;
	}
}

.div_head {
	clear: both;
	float: left;
	width: 45%;
	padding: 0.5rem 0.19rem 0.19rem 0.19rem;
}

.div_element {
	float: left;
	padding: 0.19rem;
}

.div_infoboks, .div_errorboks {
	clear: both;
	font-style: italic;
}

.div_infoboks {
	color: var(--steel);
	padding: 0.19rem 0.62rem 0.94rem 0.62rem;
	margin: 0 0 0 45%;
}

.div_errorboks, div[data-error] {
	color: var(--red);
	margin: 0;
	max-width: 21.88rem;
}

input[type="text"], input[type="password"] {
    border: 1px solid var(--surface-border);
	padding: 0.19rem;
	border-radius: 0.19rem;
}

.infoboks {
    clear: both;
    border: 1px solid var(--steel);
    padding: 0.94rem;
    margin: 0.94rem 0 0.94rem 0;
}

select {
	padding: 0.19rem;
	border-style: solid;
	border-width: 1px;
    border-color: var(--surface-border);
	border-radius: 0.38rem;
}

#area_dk, #area_other {
	text-decoration: none;
}

/* Sektion-overskrifter inde i en .innerdiv (også indlejret i forms eller
   data-template-wrappers) skal rydde floats — ellers flyder de ind på
   siden af floated .div_head/.div_element-par. Generisk fordi mange
   indstillings-/info-sider bruger samme `.innerdiv > form > h2`-mønster. */
.innerdiv h2 {
	clear: both;
}

.status_profilnavn {
	color: var(--white);
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
}


/* Admin team-statuslinjen i toppen.
   Mobil-først: skjult midlertidigt indtil den kan integreres i
   three-pane layoutet (se /memories/repo/mobile-team-sidepanel-todo.md).
   Desktop (>= 64em): 160px sidepanel med padding/farver. */
#team_bar,
#team_bar_header,
#team_bar_content {
    display: none;
}

@media (min-width: 64em) {
    #team_bar {
        display: block;
        padding: 1.5em 1em 1em 1em;
        color: var(--white);
        width: 10rem;
        background-color: var(--steel);

        & .arrow {
            clear: both;
            float: left;
            padding: 0.19rem 0.38rem 0 0;
        }

        & .item {
            float: left;
            padding: 0.19rem 0;
        }

        & .item_other {
            clear: both;
            padding: 0 0 0 1.25rem;
        }

        & .item a, & .item_other a {
            color: var(--white);
            text-decoration: none;
            font-weight: normal;
        }

        & .team_header {
            clear: both;
            font-weight: bold;
            padding: 0.31rem 0 0 1.25rem;
        }

        & #intet_at_validere {
            display: none;
            color: var(--white);
            font-weight: bold;
            padding-bottom: 0.94rem;
        }

        & .id_input {
            clear: both;
            padding: 0.62rem 0 0 1.25rem;
            font-weight: bold;
        }

        & input {
            font-size: 10px;
            border: 1px solid var(--black);
        }
    }

    #team_bar_header,
    #team_bar_content {
        display: block;
    }
}

#profile_txt {
	width: 45.44rem;
	overflow:hidden;
	font-size: 10pt;
	padding: 1.88rem 0 0.62rem 0;
	clear: both;
}

#pager {
    float: right;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;

    .left {
        background-color: var(--white);
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        height: 1.56rem;

    }


    .list {
        background-color: var(--white);
        padding-left: 0.19rem;
        padding-right: 0.19rem;
        height: 1.56rem;
        line-height: 1.56rem;
        text-align: center;
        cursor: pointer;
    }

    .right {
        text-align: left;
        background-color: var(--white);
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        height: 1.56rem;
    }

    & > div {
        & > div {
            background-color: var(--blue-dark);
            border-radius: 50%;
            height: 1.56rem;
            width: 1.56rem;
            line-height: 1.44rem;
            padding-left: 0.4em;

            letter-spacing: -30%;
            font-size: 1rem;
            color: var(--surface-mid);
            font-family: monospace;
            cursor: pointer;

            &.disabled {
                opacity: 0.3;
                cursor: default;
                pointer-events: none;
            }
        }
    }
}

#mail_mere {
    position: absolute;
    margin-left: -5.62rem;
    margin-top: 1.25rem;
    left: 50%;
    display: none;
}

#mail_settings {
	float: right;
	width: 18.75rem;

    & div:nth-child(odd) {
        float: left;
        padding: 0.19rem;
    }

    & div:nth-child(even) {
        float: right;
        padding: 0.19rem;
    }

    .selected {
        font-weight: bold;
    }
}

 #mail_read {
    & .mail_header {
        background-color: var(--blue-dark);
        color: var(--gray-text);
        display: grid;
        grid-template-columns: clamp(7rem, 11vw, 9rem) minmax(0, 1fr) 150px;
        margin-top: 0.62rem;

        & div {
            align-content: center;
            padding: 0.5rem 0 0.5rem 1rem;
        }

        & div:nth-child(1) {
            border-right: 0.12rem solid var(--white);
        }

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

        & div:nth-child(3) {
            text-align: right;

            & span {
                margin: 0 0 0 0.5em;
            }
        }
    }

    & .mail_body {
        display: grid;
        grid-template-columns: clamp(7rem, 11vw, 9rem) minmax(0, 1fr);

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

            & > div {
                max-width: 100%;
                overflow: hidden;
            }
        }
    }

    & .mail_attachment {
        & .header {
            display: grid;
            width: 100%;
            grid-template-columns: 80px auto 80px 80px;
            font-weight: bold;
        }

        & .attachment {
            display: grid;
            margin: 0;
            width: 100%;
            grid-template-columns: 80px auto 80px 80px;
        }
    }

    & .mail_attachment .attachment div:not(:nth-child(1)),
    & .mail_attachment .header div:not(:nth-child(1)) {
        background-color: var(--blue-light);
        padding: 0.25rem 0.25rem 0.25rem 0.94rem;
    }

    & .mail_attachment .attachment div:nth-child(3),
    & .mail_attachment .header div:nth-child(3) {
        text-align: right;
    }

    & .highlight {
        animation-name: highlight;
        animation-duration: 4s;
    }
}

@keyframes highlight {
  0%   {background-color:var(--steel); }
  25%   {background-color:var(--steel); }
  100% {background-color:var(--blue-dark); }
}

.btn_normal {
    background-color: var(--blue-dark);
    border-radius: 0.75rem;
    padding: 0 0.94rem 0 0.31rem;
    cursor: pointer;
    display: inline-block;
    clear: both;

    /* Tekst-label (span nr. 2): nudge 2px ned så den optisk flugter
       med arrow-cirklen — translateY undgår at ændre line-box. */
    & span:nth-child(2) {
        display: inline-block;
        transform: translateY(1px);
    }
}

.btn_big {
    background-color: var(--steel);
    border-radius: 0.75rem;
    cursor: pointer;
    display: inline-block;
    clear: both;

    font-size: 13px;
    color: var(--white);
    font-weight: bold;
    padding: 0 1em 0 0;
    height: 1.44rem;
    min-width: 6.25rem;

    & span:nth-child(2) {
        vertical-align: top;
        line-height: 1.8em;
        padding-top: 0.12rem;
    }

    & .arrow {
        /* Højre-gap mellem pil-cirkel og tekst SKAL være rem, ikke em: .arrow
           har font-size:0 (iOS tofu-fix), så et em-gap kollapser til 0 og
           teksten klistrer til cirklen. */
        margin: 0 0.5rem 0 0.12rem;
        height: 1.12rem;
        width: 1.12rem;

        border: 1px solid var(--white);
        background-color: var(--white);
        border-radius: 50%;
        display: inline-block;
        /* Tekst-spans (Nulstil osv.) bruger vertical-align: top +
           line-height: 1.8em — så lad arrow'en bruge samme baseline,
           ellers ender den 2-0.19rem over teksten optisk. */
        vertical-align: top;
        margin-top: 0.19rem;
        position: relative;
        /* Skjul evt. entity-tekst (&var(--c-129094);) — iOS WebKit har ingen
           font for U+1F846 og rendrer tofu. Tegner trekanten i CSS
           i stedet, så udseendet er identisk på desktop og iOS. */
        font-size: 0;
        color: var(--trans-a00);

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-top: 0.44rem solid var(--trans-a00);
            border-bottom: 0.44rem solid var(--trans-a00);
            border-left: 0.5rem solid var(--gray-text);
        }
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 20%;
            transform: translateY(-50%);
            width: 0.38rem;
            height: 0.19rem;
            background-color: var(--gray-text);
        }
    }


}

.left_arrow {
    margin: 0.31rem;
    height: 0.75rem;
    width: 0.75rem;
    border: 1px solid var(--white);
    background-color: var(--white);
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    /* Samme årsag som .arrow ovenfor — U+1F80A renders som tofu på iOS. */
    font-size: 0;
    color: var(--trans-a00);
}
.left_arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 62%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 0.31rem solid var(--trans-a00);
    border-bottom: 0.31rem solid var(--trans-a00);
    border-left: 0.31rem solid var(--gray-text);
}
.left_arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 18%;
    transform: translateY(-50%);
    width: 0.25rem;
    height: 0.12rem;
    background-color: var(--gray-text);
}

.knap {
    padding: 0.5rem 0.94rem 0.5rem 0.94rem;
    border: 1px solid var(--black);
    border-radius: 0.19rem;
    background-color: var(--gray-line-soft);
    color: var(--black);
    text-decoration: none;
    min-width: 3.12rem;
}

#lounges_search_header {
    margin-top: 2em;
}

#lounges_sub_container {
	width: 100%;
	margin: 1em 1em 2em 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

#lounges_sub_container>div {
	width: 22%;
	margin: 0 0.19rem 0.19rem 0;
	padding: 0.5rem;
	background-color: var(--white);
	border-radius: 0.19rem;
}

#lounges_sub_container div div:nth-child(1) {
    font-weight: bold;
    margin-bottom: 0.19rem;
}

/* ====================================================================
   Section: Lounges + Debat
   ==================================================================== */

#lounge_joinpart {
    /* Floatet til højre øverst, så "meld mig ind"/"meld mig ud" flugter med
       toppen af beskrivelsen og ligger flush mod højre kant. Beskrivelsen
       flyder til venstre for knappen. (Mobil skjuler hele blokken.) */
    float: right;
    margin: 0 0 0.5em 1em;

    /* Containeren floater nu selv — neutralisér de indre .fright, så knappen
       ikke dobbelt-floater inde i en shrink-wrappet float. */
    & .fright {
        float: none;
    }
}

#lounge_admin {
    /* Starter altid under den højre-floatede #lounge_joinpart, også hvis
       beskrivelsen er kortere end knappen. */
    clear: both;
    padding: 0.75rem;
    border-left: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    border-right: 1px solid var(--white);
    display: none;

    & a {
        padding: 1em;
    }

    & .edit {
        padding: 1em;
    }
}

.lounges_suggest_next {
    float: right;
    padding: 2em;
}

#debat_header {
    clear: both;
    margin-top: 3em;

    /* "Deltag i debatten": samme udtryk som mobil-rail'ens debat-knap
       (debate-join-ikonet, --surface-dark, gennemsigtig baggrund), her med
       tekstlabel ved siden af. Knappen ligger inde i <h1>, så typografien
       nulstilles til brødtekst. Mobil skjuler den og bruger action-rail'en. */
    & .bf-debate-join {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        border: none;
        background: var(--trans-a00);
        color: var(--surface-dark);
        font-size: var(--fs-body);
        font-weight: 400;
        cursor: pointer;
        padding: 0;

        & > div[data-auto="icon"] {
            display: flex;
            width: 1.25rem;
            height: 1.25rem;
        }

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

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

/* "meld mig ind" floatet til højre for "Medlemmer"-overskriften — samme
   knap som ved beskrivelsen, så man kan melde sig ind uden at scrolle op.
   Knappen ligger i <h1>, så typografien nulstilles til brødtekst. Mobil
   bruger action-rail'en og skjuler den (mobile.css). */
.lounge_members_head .btn_normal {
    font-size: var(--fs-body);
    font-weight: 400;
}

#mail_announce {
    position: relative;
    height: 3.12rem;
}

#mail_ikke_mere, #mail_wait {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1.88rem;
    width: 90%;
    text-align: center;
    font-weight: bold;
    display: none;
}

#mail_presence {
    margin-left: 5.62rem;
    display: none;
}

#mail_presence > span {
    font-size: var(--fs-body);
    font-weight: bold;
}
#mail_presence > span {
    background: linear-gradient(to right, var(--c-6666ff), var(--c-0099ff) , var(--icon-online), var(--c-ff3399), var(--c-6666ff));
    background-clip: text;
    color: var(--trans-a00);
    animation: rainbow_animation 4s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

.validation_highlight {
    background-color: var(--icon-online);
}

.validation_box {
    padding: 0.5rem;
    width: 4em;
    text-align: center;
}


.table {
	padding: 0.62rem;
    border-radius: var(--radius-panel);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
	grid-template-rows: auto;
}

.table[header] {
    background-color: var(--surface-header) ! important;
}

.table .right {
	text-align: right;
}

.table:nth-child(even) {
    background-color: var(--surface-panel);
}

.form {
    & input,
    & textarea {
        width: 100%;
    }

    & p {
        margin: 0.62rem 0 0 0;
        padding: 0;
        font-weight: bold;
    }

    & .submit {
        margin: 1.25rem 0 1.25rem 0.62rem;
    }

    & .error {
        color: var(--red);
        font-weight: bold;
        display: none;
    }
}

.lounges_teasers>div {
	margin: 1.25rem 0 0 0;
	float: left;
	min-width: 18.75rem;
	width: 50%;
}

.lounges_teasers>div:first-child {
	padding-right: 0.62rem;
}

.lounges_teasers>div>div[header] {
	padding: 0.62rem;
	border-radius: 0.19rem;
	background-color: var(--blue-dark) ! important;
}

.mail_icon, .mail_username, .mail_status, .mail_date {
	cursor: pointer;
}

/* Dot til lounges f.eks. */
.member_dot {
    margin: 0 0.31rem 0 0;
    height: 0.38rem;
    width: 0.38rem;
    border: 1px solid var(--steel);
    border-radius: 50%;
    display: inline-block;
}

.member_dot.active {
    background-color: var(--steel);
}


.status_online {
	color: var(--white);
	padding: 1em;
	background-color: var(--steel);
	width: 10rem;

    & .visits_container {
        padding-bottom: 1em;
        display: none;
        
        & > div {
            position: relative;
            height: 2em;

            & > div {
                font-size: 16px;
                font-weight: bold;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    & .online_container {
        margin-top: 1em;
        padding-bottom: 1em;
        
        & > div {
            position: relative;
            height: 2em;

            & > div {
                font-size: 16px;
                font-weight: bold;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    & .profiles_container {
        padding-bottom: 1em;
        
        & > div {
            position: relative;
            height: 2em;

            & > div {
                font-size: 16px;
                font-weight: bold;
                width: 100%;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        & .disclaimer {
            font-size: 8px;
            text-align: center;
            margin: 0.31rem 10% 0 10%;
        }
    }
}

#text_emoticons {
    display: flex ! important;
    flex-wrap: wrap;
    width: 100%;
}

#text_emoticons > div {
    min-width: 10%;
    text-align: center;
    padding: 0.31rem;
    flex: 1 1 auto;
    margin: auto;
}



/* Noter */
.notes-grid {
    display: grid;
    gap: 1.25rem;
    padding: 0.5rem;

    & .card {
        display: grid;
        grid-template-columns: 125px 1fr;
        gap: 0.62rem;
        border: 1px solid var(--gray-soft);
        border-radius: 0.5rem;
        overflow: hidden;
        transition: box-shadow 0.3s;

        & .highlight {
            background-color: var(--name-pink) ! important;
        }
    }

    & .card:hover {
        box-shadow: 0 4px 8px var(--trans-a10);
    }

    & .image {
        padding: 0.62rem;
        text-align: center;

        & img {
            max-width: 100%;
        }
    }

    & .content {
        padding: 0.62rem;
    }

    & .header {
        display: grid;
        grid-template-columns: 250px auto;
        align-items: center;
        padding: 0.62rem;
        background-color: var(--blue-dark);
    }

    & .details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        font-size: var(--fs-body);
        color: var(--gray-text);
        padding: 0.62rem;
        background-color: var(--white);
    }

    & .text {
        padding: 0.62rem;
        border-radius: 0.25rem;
        position: relative;
        white-space: nowrap;    
    }

    & .delete {
        text-align: right;
    }
}


#infiload_announce {
    position: relative;
    height: 3.12rem;
}

#infiload_ikke_mere, #infiload_wait {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1.88rem;
    width: 90%;
    text-align: center;
    font-weight: bold;
    display: none;
}

#infiload_mere {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.88rem;
    display: none;
    min-width: 6.25rem;
    height: 1.44rem;
    padding: 0 1em;
    border-radius: 0.75rem;
    background-color: var(--steel);
    color: var(--white);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.44rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

#infiload_mere:hover {
    background-color: var(--steel-dark);
}



/*
 * Forum: trådlinjer (oversigt) + enkelt-poster (tråd-side).
 * Markup (frontend.html):
 *   .thread-line  → 7 children: dot, title, creator, date, lounge, updater, updated
 *   .forum-post   → 8 children: date, icon, username, actions, number, admin, content, likes
 * Begge bruger named grid-areas så vi kan reflowe på tværs af viewports.
 * Mobil = stacked card, desktop = klassisk tabel-look.
 */

.thread-line {
    display: grid;
    margin-bottom: 0;

    /* Mobil: kort-rækker i samme stil som medlemslisten — zebra-baggrund,
       fin bundstreg og kompakt typografi i stedet for den gamle "billige
       tabel" hvor hver celle havde sin egen .m1-baggrund. Dot er en lille
       status-prik centreret i venstre kolonne; titlen er fremhævet og
       meta-linjerne (Af / Nyeste + datoer) er dæmpede. */
    grid-template-columns: max-content minmax(0, 1fr) auto;
    grid-template-areas:
        "dot title   title"
        "dot lounge  lounge"
        "dot creator date"
        "dot updater updated";
    column-gap: 0.62rem;
    row-gap: 0.05rem;
    padding: 0.6rem 0.62rem;
    border-bottom: 1px solid var(--gray-soft);

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

    & > div {
        padding: 0;
        min-height: 0;
        line-height: 1.3;
        background: var(--trans-a00);
    }

    & .thread-line-dot {
        grid-area: dot;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.12rem;

        & .member_dot {
            width: 0.62rem;
            height: 0.62rem;
            margin: 0;
        }
    }

    & .thread-line-title {
        grid-area: title;
        font-weight: 700;
        font-size: var(--fs-sm);
        line-height: 1.3;
        color: var(--surface-dark);
        white-space: normal;
        cursor: pointer;
    }

    & .thread-line-lounge {
        grid-area: lounge;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--fs-xs);
        color: var(--gray-text);
    }

    & .thread-line-creator {
        grid-area: creator;
        font-size: var(--fs-xs);
        color: var(--steel);
    }

    & .thread-line-date {
        grid-area: date;
        font-size: var(--fs-xs);
        color: var(--steel);
        text-align: right;
    }

    & .thread-line-updater {
        grid-area: updater;
        font-size: var(--fs-xs);
        color: var(--steel);
    }

    & .thread-line-updated {
        grid-area: updated;
        font-size: var(--fs-xs);
        color: var(--steel);
        text-align: right;
    }

    /* === Desktop layout (>= 64em) ===
       Per-klasse RESET af mobil-only properties nødvendig (jf. lessons
       fra .list_grid-passet — mobile selectors har specificity (0,3,0)). */
    @media (min-width: 64em) {
        grid-template-columns: 1fr 20fr 10fr 6fr;
        grid-template-areas:
            "dot title  created_by created_at"
            ".   lounge updated_by updated_at";
        column-gap: 0;
        row-gap: 0;
        padding: 0;
        margin-bottom: 0;
        border-bottom: 1px solid var(--gray-soft);

        & > div {
            padding: 0.5rem;
            min-height: 1rem;
            line-height: normal;
        }

        & .thread-line-title {
            font-size: inherit;
            line-height: normal;
            color: inherit;
        }

        & .thread-line-dot {
            display: block;
            padding-left: 1.2em;
            padding-right: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            align-self: auto;

            & .member_dot {
                width: 0.38rem;
                height: 0.38rem;
                margin: 0 0.31rem 0 0;
            }
        }

        & .thread-line-creator {
            grid-area: created_by;
            font-size: inherit;
        }

        & .thread-line-date {
            grid-area: created_at;
            font-size: inherit;
            color: inherit;
            text-align: left;
        }

        & .thread-line-lounge {
            font-size: inherit;
            color: inherit;
            margin-bottom: 0.2rem;
        }

        & .thread-line-updater {
            grid-area: updated_by;
            font-size: inherit;
            margin-bottom: 0.2rem;
        }

        & .thread-line-updated {
            grid-area: updated_at;
            font-size: inherit;
            text-align: left;
            margin-bottom: 0.2rem;
        }
    }
}




/* "Flere debatter"-knap under tråd-listen i lounge-visningen (erstatter
   det gamle "[ flere ]"-link). Diskret pille med tekst + chevron,
   centreret under kort-rækkerne. */
.thread-more {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0.5rem 0.25rem;
}

.thread-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    padding: 0.44rem 0.95rem;
    border: 1px solid var(--blue-dark);
    border-radius: 999px;
    background: var(--white);
    color: var(--surface-dark);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;

    &:hover {
        background: var(--blue-light);
        border-color: var(--steel);
        box-shadow: 0 0.12rem 0.38rem var(--trans-a10);
    }

    &:active {
        transform: scale(0.97);
    }

    & .thread-more-chev {
        display: inline-flex;
        width: 0.95rem;
        height: 0.95rem;

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

#thread_closed {
    padding: 3em;
    font-weight: bold;
}

/* #thread_subscribe (gammel grid + blå-grå bar til to-div-markup) er
   erstattet af .thread-subscribe i sections.css. */

/* Header-wrapperne folder ud (display: contents), så .forum-post's grid på
   desktop placerer ikon/navn/dato/thumbs/#nr direkte som hidtil. På mobil
   sættes de til flex (sections.css) og bliver en rigtig header-bar. */
.forum-post-header,
.forum-post-meta {
    display: contents;
}

.forum-post {
    display: grid;
    margin: 0.2em 0 0.8em 0;
    font-size: var(--fs-xs);

    /* Mobil: 3 kolonner — ikon venstre (spans 2 rows), username/date i
       midten, thumbs/number til højre. Admin/content/footer fylder
       hele bredden under. */
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas:
        "icon  username thumbs"
        "icon  date     number"
        "admin admin    admin"
        "content content content"
        "footer footer footer";
    column-gap: 0.5em;
    padding: 0.5em;

    & > div {
        padding: 0.2em 0.3em;
        min-height: 1rem;
    }

    & .forum-post-date {
        grid-area: date;
        font-size: 0.8em;
        color: var(--steel);
        line-height: 1.2;
        align-self: start;
    }

    & .forum-post-icon {
        grid-area: icon;
        align-self: center;
        padding: 0;
    }

    & .forum-post-username {
        grid-area: username;
        font-weight: bold;
        align-self: end;
    }

    & .forum-post-actions {
        grid-area: thumbs;
        align-self: center;
        text-align: right;

        & a { display: inline-block; }
        & img { margin: 0.19rem; }
        & svg {
            margin: 0.19rem;
            width: 1.06rem;
            height: 1.06rem;
            color: var(--gray-text);
            vertical-align: middle;
        }
    }

    & .forum-post-number {
        grid-area: number;
        text-align: right;
        font-weight: bold;
        font-size: 0.85em;
        align-self: center;
    }

    & .forum-post-hover-info {
        position: relative;
    }

    & .forum-post-admin {
        grid-area: admin;
        padding: 0.2em 0 0 0;
        text-align: center;
        font-size: 0.85em;

        & p {
            margin: 0;
            padding: 0;
        }
    }

    & .forum-post-content {
        grid-area: content;
        padding: 0.6em 0.4em;
        white-space: pre-line;
    }

    & .forum-post-likes {
        grid-area: footer;
        text-align: right;
        color: var(--gray-text);
        font-size: 0.85em;
    }

    /* === Desktop layout (>= 64em) === */
    @media (min-width: 64em) {
        margin-bottom: 0.8em;
        margin-top: 0.2em;
        grid-template-columns: 3fr 1fr 17fr 3fr 1fr;
        grid-template-areas:
            "date icon  username thumbs number"
            "admin content content content content"
            ".     footer footer footer footer";
        column-gap: 0;
        padding: 0;

        /* Header-cellerne ligger nu inde i .forum-post-header/.forum-post-meta
           (display: contents), så de medregnes i grid'et men er ikke længere
           direkte børn. :where() holder specificiteten = `& > div`, så de
           per-element-regler nedenfor stadig vinder. */
        & > div,
        & :where(.forum-post-header, .forum-post-meta) > div {
            padding: 0.5rem;
            min-height: 1rem;
            line-height: 1.2rem;
        }

        & .forum-post-date {
            text-align: center;
            line-height: 1em;
            font-size: inherit;
            color: inherit;
            align-self: auto;
        }

        & .forum-post-icon {
            text-align: right;
            padding: 0.5rem 0.5rem 0.5rem 2em;
            align-self: auto;
        }

        & .forum-post-username {
            padding-left: 0;
            align-self: auto;
        }

        & .forum-post-actions {
            align-self: auto;
            text-align: left;
        }

        & .forum-post-number {
            font-size: inherit;
            align-self: auto;
        }

        & .forum-post-admin {
            font-size: inherit;
            padding: 0.2em 0 0 0;
        }

        & .forum-post-content {
            padding: 2em;
            margin-bottom: 0.2rem;
        }

        & .forum-post-likes {
            padding: 0.5rem;
            margin-bottom: 0.2rem;
            font-size: inherit;
            color: var(--gray-text);
        }
    }
}



/*
 * Lounges (kategori-blokke + tree-nav).
 * .lounges-grid bruges i flere sammenhænge: lounges-frontpage's
 * sub-kategorier, søgebar-wrap, og subcategory-sidens kategori-grupper.
 * Mobil = stack heading-over-content. Desktop (>= 64em) = 1fr/4fr
 * to-kolonner med heading til venstre.
 *
 * NB: lounges-frontpage'en (#lounges_categories) har sin egen
 * specialiserede mobil-redesign i den mobile sektion i denne fil (sticky søgebar, 2-kolonne
 * grid). Den blok target'er via :has() så den ikke kæmper mod cascade.
 */

.lounges-grid {
    display: grid;
    margin: 0.3em;
    /* Mobil: stack heading-over-content. */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.25rem;

    @media (min-width: 64em) {
        grid-template-columns: 1fr 4fr;
        grid-template-rows: auto;
        row-gap: 0;
    }
}

.lounges-left {
    /* Mobil: heading står på sin egen række over indholdet —
       venstrejusteret, lille bund-padding. */
    text-align: left;
    padding: 0.4em 0.6em 0.2em;
    font-weight: bold;
    color: var(--black);

    @media (min-width: 64em) {
        text-align: right;
        padding: 1em;
    }
}

.lounges-right {
    padding: 0.6em 0.7em;
    background-color: var(--white);

    @media (min-width: 64em) {
        padding: 0.8em;
    }
}

.lounges-right-line {
    border-top: 1px solid var(--blue-dark);
    padding: 0.6em 0.7em;

    @media (min-width: 64em) {
        padding: 0.9em 1em 1em 1em;
    }

    & a {
        padding: 0.3em;
    }
}

.lounge-tree {
    border: 1px solid var(--blue-dark);
    list-style: none;
    margin: 0;
    font-size: var(--fs-xs);
    /* Mobil: kompakt indre padding, mindre bund. */
    padding: 0 0 1em 0;

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

    & ul {
        list-style: none;
        /* Mobil: 0.8em margin (mindre indrykning, hele træet snævert). */
        margin: 0.8em;
        padding: 0;

        @media (min-width: 64em) {
            margin: 1.5em;
        }
    }

    & .category {
        padding: 0.6em 0.5em 0.4em 0.7em;
        margin-bottom: 0.8em;
        font-weight: bold;
        color: var(--black);

        @media (min-width: 64em) {
            padding: 1em 0.5em 0.5em 1em;
            margin-bottom: 1.5em;
        }
    }

    & .subcategory {
        font-weight: bold;
        color: var(--black);
        margin: 0.8em 0 0.4em 0;

        @media (min-width: 64em) {
            margin: 1.5em 0 0.5em 0;
        }
    }

    & .lounge {
        /* Mobil: mindre indrykning så lounge-titler ikke wrappes for tidligt. */
        margin-left: 1em;
        line-height: 1.3em;

        @media (min-width: 64em) {
            margin-left: 2em;
            line-height: 1.2em;
        }
    }
}

/* Lounge-træ — mobil brush-up. Kun mobil; desktop beholder eksisterende stil.
   Mål: tydeligt niveau-hierarki (niveau 1 mest fremtrædende, niveau 2 sekundær
   + indrykket), INGEN linjer mellem lounges (de lignede overskrifter), og dot
   centreret lodret med lounge-navnet. */
body.is-mobile-layout .lounge-tree {
    border: 0;
    margin: 0.5rem 0 1.25rem;
    padding: 0;
    font-size: var(--fs-sm);

    /* Nestede niveauer rykkes ind, så hierarkiet ses visuelt. */
    & ul {
        margin: 0;
        padding-left: 0.7rem;
    }

    /* Niveau 1 (hovedkategori): MEST fremtrædende — mørk, fed, lidt større, med
       luft over og en fin underlinje der markerer sektionsstarten. */
    & .category {
        background: var(--trans-a00);
        min-height: 0;
        margin: 1.5rem 0 0.5rem;
        padding: 0 0 0.3rem;
        border-bottom: 1px solid var(--gray-line-soft);
        font-size: var(--fs-body);
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: var(--surface-dark);
    }

    & > .category:first-child {
        margin-top: 0;
    }

    /* Niveau 2 (underkategori): sekundær — fed men mindre end niveau 1, dæmpet
       farve, ingen linje. */
    & .subcategory {
        margin: 0.85rem 0 0.15rem;
        padding: 0;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--steel);
    }

    /* Lounge: ren række — dot + navn. INGEN skillelinjer; kun lidt lodret
       afstand. Dot centreres lodret med navnet. */
    & .lounge {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0;
        padding: 0.32rem 0;
        line-height: 1.3;

        & .member_dot {
            flex: 0 0 auto;
            margin: 0;
            align-self: center;
            /* Den lille prik centrerer i linjeboksen, hvilket sidder en anelse
               over tekstens x-højde-midte; skub den minimalt ned så den flugter
               med navnet. */
            position: relative;
            top: 0.1rem;
        }

        & a {
            flex: 1;
            min-width: 0;
            color: var(--surface-dark);
            text-decoration: none;
        }
    }
}

#lounges_intro {
    /* Mobil: trim 3em → 1em så vi ikke spilder skærm-plads. */
    margin: var(--space-section-mobile);

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

/* ====================================================================
   Section: Lists
   ==================================================================== */

#lounges_common {
    margin: 1em 0;
    padding: 1em;
    text-align: right;
}

#int1, #int2, #int4, #int5, #int6 {
    font-size: large;
    cursor: pointer;
    opacity: 40%;
    &:hover {
        opacity: 100%;
    }
}

.int_opacity {
    opacity: 100%;
}


/* Long-press på userinfo-trigger må ikke selecte tekst eller vise
   iOS' callout-menu (Copy/Look Up). Gælder også selve popuppen. */
[data-userinfo] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#list_info_container {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    border: 1px solid var(--surface-border);
    padding: 0.6em;
    position: absolute;
    background-color: var(--surface-card);
    z-index: 9999;
    width: max-content;
    max-width: min(22.5rem, calc(100vw - 1.5rem));
    border-radius: var(--radius-popover);
    box-shadow: 0 6px 24px var(--surface-shadow);
    display: grid;
    grid-template-areas:
        "picture picture"
        "inter_title inter_title"
        "inter inter"
        "visit_title write_title"
        "visit write"
        "notes_title notes_title"
        "notes notes";
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    column-gap: 0;
    row-gap: 0.25rem;
    align-items: start;
    align-content: start;

    & > div {
        padding: 0.25rem 0.38rem;
    }

    & .picture {
        grid-area: picture;
        display: flex;
        justify-content: center;
        margin-bottom: 0.38rem;
        background: var(--surface-card);
        border-radius: var(--radius-card);
        padding: 0.62rem !important;

        &:empty {
            display: none;
        }

        & img {
            border: 1px solid var(--black);
            max-width: 12.5rem;
            max-height: 15rem;
            width: auto;
            height: auto;
            object-fit: cover;
            display: block;
        }
    }

    & :is(.write_title, .visit_title, .inter_title, .notes_title) {
        font-weight: bold;
        background-color: var(--surface-card);
        padding: 0.38rem 0.62rem;
    }

    & :is(.write_title, .visit_title, .inter_title) {
        white-space: nowrap;
    }

    & .write_title  { grid-area: write_title; }
    & .visit_title  { grid-area: visit_title; }
    & .inter_title  { grid-area: inter_title; }
    & .notes_title  { grid-area: notes_title; }

    & .write  { grid-area: write;  white-space: nowrap; }
    & .visit  { grid-area: visit;  white-space: nowrap; }
    & .inter  { grid-area: inter;  white-space: nowrap; }

    & .notes {
        grid-area: notes;
        white-space: normal;
        overflow-wrap: anywhere;
    }

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

        &[selected],
        &:hover {
            opacity: 100%;
        }
    }
}

/*
 * Lister: container-grid + subgrid-rows. Containeren ejer kolonne-
 * tracks så ALLE rækker deler præcis samme breddefordeling. Hver
 * .lr er sit eget grid med `grid-template-columns: subgrid`, hvilket
 * arver containerens tracks (subgrid har god browser-support: Chrome
 * 117+, Firefox 71+, Safari 16+).
 *
 * MOBIL (default):
 *   4 container-kolonner, hver række bruger 4 row-tracks med
 *   grid-template-areas så avatar er en høj kolonne til venstre og
 *   user/age/area/target/gender wrapper rundt om den. Header-rækken
 *   (.is-header) skjules — kompakte cards behøver ikke kolonne-headers.
 *
 * DESKTOP (>= 64em):
 *   8 container-kolonner i én række pr. .lr:
 *   date | icon | username | age | gender | target | area | add
 *   - date: skjules typisk via qsort_heading (kun gæster/besøgte bruger den)
 *   - add:  skjules typisk via qsort_heading (kun nærmeste/blokerede bruger den)
 *   Skjulte celler bliver bare tomme i deres kolonne — kolonne-bredden
 *   collapser hvis ingen række har indhold (max-content på 0 = 0).
 */
.list_grid {
    display: grid;
    width: 100%;
    /* Mobil: 4 kolonner. Avatar venstre (fast bredde), så user/age,
       så area/target, så gender højre. */
    grid-template-columns: max-content minmax(0, 1.4fr) minmax(0, 1.6fr) max-content;

    & > .lr {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-areas:
            "icon username area   gender"
            "icon age      target gender"
            "icon date     date   date"
            "icon add      add    add";
        gap: 0 0.75rem;
        padding: 0.5rem 0.62rem;
        align-items: center;
        background-color: var(--trans-a00);
        border-bottom: 1px solid var(--gray-soft);

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

        &.highlight {
            /* navigator.js sætter .highlight på .lr efter retur fra besøgt
               profil. Farves direkte på rækken (ikke per-celle) — subgrid
               gør at en `> div` regel kun rammer celler der fuldt udfylder
               deres subgrid-track, så enkelte celler ville se mere fremhævede
               ud end de andre. Rækken har display: grid + grid-column: 1 / -1,
               så baggrunden dækker hele bredden i ét bånd. */
            background-color: var(--name-pink);
        }

        & > div {
            padding: 0;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--trans-a00);
            cursor: pointer;
        }

        /* Header-rækken er kun nyttig i desktop's enkelt-rækkes layout. */
        &.is-header {
            display: none;
        }

        & .icon {
            grid-area: icon;
            align-self: center;
            text-align: left;
            line-height: 0;
            padding-right: 0;

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

            & img {
                width: 2.38rem;
                height: 2.38rem;
                border-radius: 50%;
                object-fit: cover;
                display: block;
            }
        }

        & .username {
            grid-area: username;
            font-weight: 600;
            line-height: 1.25;
            align-self: end;
        }

        & .age {
            grid-area: age;
            font-size: var(--fs-body);
            color: var(--gray-text);
            line-height: 1.25;
            text-align: left;
            align-self: start;
        }

        & .area {
            grid-area: area;
            font-size: var(--fs-body);
            font-weight: 600;
            color: var(--surface-dark);
            line-height: 1.25;
            align-self: end;
        }

        & .target {
            grid-area: target;
            font-size: var(--fs-body);
            color: var(--gray-text);
            line-height: 1.25;
            align-self: start;
        }

        /* Gender: 'Mand <br> Fyre'. Højre-justeret, spans begge linjer
           lodret. */
        & .gender {
            grid-area: gender;
            font-size: var(--fs-body);
            color: var(--steel);
            text-align: right;
            line-height: 1.25;
            white-space: normal;
            align-self: center;

            & strong {
                font-weight: 600;
                color: var(--surface-dark);
            }

            &:empty { display: none; }
        }

        /* Add-cellen — fx 'Fjern blokering' (blokerede), eller afstand
           (nærmeste). Spans hele bredden under, kun synlig hvis indhold. */
        & .add {
            grid-area: add;
            font-size: var(--fs-body);
            padding-top: 0.25rem;
            text-align: left;

            &:empty { display: none; }

            & a {
                color: var(--surface-dark);
                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. */
        & .date {
            grid-area: date;
            font-size: var(--fs-xs);
            color: var(--steel);
            padding-top: 0.12rem;
            text-align: left;

            &:empty { display: none; }
        }
    }

    /* === Desktop layout (>= 64em) ===
       VIGTIGT: De mobile per-klasse regler (.gender/.icon/.age/...) har
       specificity (0,3,0). En generisk `& > div` reset er kun (0,2,1)
       og taber. Derfor SKAL hver desktop-regel selv resette mobil-only
       properties på sin egen klasse — ellers står de tilbage og ødelægger
       row-højden + lodret alignment. */
    @media (min-width: 64em) {
        grid-template-columns:
            minmax(0, max-content)  /* date */
            auto                    /* icon */
            minmax(0, 2fr)          /* username */
            minmax(0, max-content)  /* age */
            minmax(0, max-content)  /* gender */
            minmax(0, 1.5fr)        /* target */
            minmax(0, 2fr)          /* area */
            minmax(0, max-content); /* add */

        & > .lr {
            grid-template-areas: none;
            gap: 0;
            padding: 0;
            border-bottom: 0;

            /* Generisk fallback (lavere specificitet end per-klasse-
               reglerne længere nede, men dækker child-divs uden klasse). */
            & > div {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                text-align: left;
                white-space: nowrap;
                line-height: normal;
                font-size: inherit;
                color: inherit;
                font-weight: normal;
            }

            &.is-header {
                display: grid;
                background-color: var(--blue-dark);
                margin-bottom: 0.4em;

                & > div {
                    background-color: var(--trans-a00);
                    font-weight: bold;
                }
            }

            /* Per-klasse desktop-styling. Hver regel RESETTER eksplicit
               de mobil-only properties den klasse satte, så vi vinder
               specificitets-kampen mod mobile defaults (0,3,0 vs 0,3,0
               → senere vinder). */
            & .date {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                white-space: nowrap;
                line-height: normal;
                text-align: right;
                color: var(--gray-text);
            }

            & .icon {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                text-align: right;

                /* Member-ikonet er en SVG med kun viewBox (ingen intrinsic
                   width). Global `svg[user] { width: 1.88rem }` sætter normalt
                   bredden, men mobiles `.list_grid > .lr .icon svg` (0,3,1)
                   har overskrevet til 34px — vi skal bringe den tilbage
                   til desktop-størrelsen her. */
                & svg {
                    width: 1.88rem;
                    height: auto;
                    display: inline-block;
                    vertical-align: middle;
                }

                & img {
                    width: auto;
                    height: auto;
                    border-radius: 0;
                    object-fit: initial;
                    display: inline-block;
                    vertical-align: middle;
                }
            }

            & .username {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                font-weight: 600;
                text-align: left;
            }

            & .age {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                font-size: inherit;
                color: inherit;
                text-align: right;
            }

            /* ALLE .gender (inkl. header) skal have layout-reset, ellers
               sidder header-cellen ("Køn") tilbage med mobil's
               align-self: center og text-align: right og ser ud som
               om den hænger på en separat række. */
            & .gender {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                color: inherit;
                text-align: left;
                white-space: nowrap;
                line-height: normal;
                font-size: inherit;
            }

            /* Datalinjernes "Mand<br>Fyre" skal vise begge linjer i lille
               skrift — kun for non-header. */
            & .gender:not([header]) {
                line-height: 1.2;
                white-space: normal;
            }

            & .target {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                font-size: inherit;
                color: inherit;
                text-align: left;
                white-space: nowrap;
            }

            & .area {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                font-size: inherit;
                font-weight: normal;
                color: inherit;
                text-align: left;
            }

            & .add {
                grid-area: auto;
                align-self: auto;
                padding: 0.85em 0.8em;
                line-height: normal;
                text-align: right;
                font-size: inherit;
            }
        }
    }
}

.gallery_grid {
    display: grid;
    /* Mobil-default: 2 kolonner, tæt gap, ingen indre padding. */
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0.25rem;
    gap: 0.5rem;

    @media (min-width: 64em) {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 0.5em;
        gap: 1em;
    }

    & > div {
        /* Mobil: ingen padding (billed-flade fylder cellen). */
        padding: 0;
        cursor: pointer;

        @media (min-width: 64em) {
            padding: 1em;
        }
    }

    & .picture {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        aspect-ratio: 0.8;
        /* Mobil: mindre afrunding, ingen border. */
        border-radius: 0.38rem;
        border: 0;

        @media (min-width: 64em) {
            border-radius: 1em;
            border: 1px solid var(--blue-dark);
        }
    }

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

    & .details > div:first-child {
        display: grid;
        grid-template-columns: 1fr 5fr;

        &:hover + div {
            display: grid;
        }
    }

    & .details > div:first-child > div {
        margin: auto 0.5em auto 0;
        font-weight: bold;
    }

    & .details > div:nth-child(2) {
        display: none;
        grid-template-columns: 2fr 5fr;
        margin: 1.5em 0em 1em 0em;
    }

    & .username {
        overflow: hidden;
    }

    & .age_title {
        font-weight: bold;
    }

    & .gender_title {
        font-weight: bold;
    }

    & .gender_to_title {
        font-weight: bold;
    }

    & .target_title {
        font-weight: bold;
    }

    & .area_title {
        font-weight: bold;
        margin-bottom: 1em;
    }

    & .area {
        margin-bottom: 1em;
    }

    & .add {
        grid-column: 1 / 2;
    }
}



/* Lister - dagbøger */
.diary-grid {
    display: grid;
    grid-template-columns: 20% auto;
    font-size: var(--fs-body);

    & .diary-image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        aspect-ratio: 0.8;
        border-radius: 1em;
        border: 1px solid var(--blue-dark);
        margin: 0.2em;
    }

    & .diary-content {
        margin: 0em 0em 1em 1em;
    }

    & .highlight {
        background-color: var(--name-pink) ! important;
    }

    & .diary-date {
        text-align: center;
    }

    & .diary-username, .diary-date {
        padding: 1em;
        background-color: var(--blue-dark);
        font-weight: bold;
    }

    & .diary-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        font-size: 0.9em;
        color: var(--gray-text);
        padding: 0.8em;
        background-color: var(--white);
    }

    & .diary-text {
        padding: 0.8em;
        white-space: pre-wrap;
        /* Bryd lange unbroken-strings (typisk URLs) så de ikke skubber
           container'en ud over højre kant. */
        overflow-wrap: anywhere;
    }

    & .diary-link {
        text-align: right;
        padding: 1em;
    }
}


[data-member-link] {
    cursor: pointer;
}




.autosize {
    display: grid;
}

.autosize::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.autosize > textarea {
    resize: none;
    overflow: hidden;
}

.autosize > textarea, .autosize::after {
    width: 100%;
    padding: 2em;
    min-height: 12.5rem;
    background-color: var(--white);
    color: var(--black);
    font-size: var(--fs-body);
    grid-area: 1 / 1 / 2 / 2;
}

.write_additional {
    padding: 0.5em;

    & a {
        display: inline-block;
        margin: 0.5em;
    }
}


.box_blue_outline {
    padding: 0.75rem;
    border: 1px solid var(--white);
    margin-top: 2.5em;

    & >h1:first-child {
         margin-top: 0;
    }
}

.box_blue_background {
    padding: 2em;
    white-space: pre-line;
	line-height: 1.5em;
	background-color: var(--white);
}

.box_outer_blue_gradient {
	background-image: linear-gradient(var(--surface-panel-strong), var(--surface-card));
}

.box_outer_yellow_gradient {
	padding: 1em 2em 1em 2em;
	border: 1px solid var(--surface-border-strong);
    background-image: linear-gradient(var(--yellow-dark), var(--yellow-light));
}

/* Typeahead-dropdown under søgefeltet. Kompakte rækker (avatar + navn +
   alder) bygget i search.js — bevidst IKKE .list_grid-cardet. Forankret
   til søgefeltets kolonne; scroller hvis mange forslag. */
.lists_suggest {
    position: absolute;
    top: 0;          /* #search_suggest sidder allerede lige under søgepillen */
    left: 0;
    right: 0;
    z-index: 9999;
    max-height: 60vh;
    overflow-y: auto;
    background-color: var(--surface-card) !important;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px var(--surface-shadow);

    & .suggest-row {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        gap: 0.62rem;
        padding: 0.69rem 0.85rem;
        cursor: pointer;
        border-bottom: 1px solid var(--gray-soft);

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

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

        & .icon {
            line-height: 0;

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

            & img {
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                object-fit: cover;
                display: block;
            }
        }

        & .username {
            justify-self: start;
            text-align: left;
            font-weight: 600;
            line-height: 1.25;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .age {
            justify-self: end;
            font-size: var(--fs-body);
            color: var(--gray-text);
            white-space: nowrap;
        }
    }
}

.search {
    & .search_text_box {
        padding: 1em;

        /* Søgepillen (input + ryd + søg) som én .bf-searchbar (delt med
           lounges/debat). Knapperne gøres lidt bredere end den delte
           kvadratiske default, så de er nemmere at ramme med en finger. */
        & .bf-searchbar-btn {
            aspect-ratio: auto;
            min-width: 3.5rem;
            padding: 0 0.85rem;
        }

        /* Radio-vælgeren (Søg i: Brugernavn | Profiltekst) lige under pillen,
           med kun lidt luft. */
        & .radio-pipe {
            margin-top: 0.35rem;
        }
    }
}



.search-details-section {
    margin-top: 0.19rem;
}

.search-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--blue-dark);
    border-top: none;

    & > div {
        padding: 1em;
    }

}

.search-options label {
    cursor: pointer;
}

/* Postnumre sidder nederst i Bopæl-gruppen (efter Udland-radioen) — giv lidt
   luft over så overskriften ikke klistrer til sidste land. */
[data-template="search_postalcode"] {
    padding-top: 0.85em;
}

.postal-inputs {
    margin-bottom: 2em;
    padding: 0.31rem;

    & input {
        width: 2.5rem;
    }
}

.search-actions-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding-top: 0.94rem;
}

.search-actions-left {
    text-align: left;
}

.search-actions-right {
    text-align: right;
}

.saved-searches-section {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;

    & .header {
        grid-column: 1 / span 2;
        font-weight: bold;
        background-color: var(--blue-dark);
    }

    & > div {
        display: contents;

        & > div {
            padding: 1em;
            text-align: left;
        }
    }

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

    & .notice {
        padding: 2em;
    }

}

#search_noresult {
    padding: 3em;
    text-align: center;
    font-weight: bold;
    display: none;
}

#invoice_details {
    text-align: right;
    padding: 3em;
}

#payment_order {
    & .payment_order_container {
        display: contents;
    }


    &   div {
        padding: 0.75em ! important;
    }

    & .ordrenummer {
        text-align: right;
        font-weight: bold;
    }

    & .table {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr max-content 1.4rem;
    }

    & .table > .mailheader {
        display: flex;
        align-items: center;
        line-height: 1.2;
    }

    & .table > .mailheader.right {
        justify-content: flex-end;
    }

    & .table > div {
        white-space: nowrap;
    }

    & .payment_order_container > div:nth-child(-n + 5) {
        border-bottom: 1px solid var(--gray-soft);
    }

    & .table > div.right,
    & .payment_order_container > div:nth-child(5n + 4),
    & .pris_vat,
    & .pris_total {
        text-align: right;
    }

    & .payment-remove-cta [data-auto='icon'] {
        display: inline-flex;
        width: 1rem;
        height: 1rem;
    }
}