/* /Components/Layout/MainLayout.razor.rz.scp.css */
.skip-to-content[b-gmvau0f68e] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-to-content:focus[b-gmvau0f68e] {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    background: var(--bs-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.page[b-gmvau0f68e] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-gmvau0f68e] {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.content[b-gmvau0f68e] {
    flex: 1;
    min-height: calc(100vh - 3.5rem - 4rem); /* viewport - topbar - footer */
}

.sidebar[b-gmvau0f68e] {
    background: linear-gradient(180deg, #37474f 0%, #263238 100%);
    transition: width 0.3s ease;
}

.top-row[b-gmvau0f68e] {
    background-color: var(--card-bg, #ffffff);
    border-bottom: 1px solid var(--border-color, #cfd2d6);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    position: relative;
    z-index: 1100;
}

    .top-row[b-gmvau0f68e]  a, .top-row[b-gmvau0f68e]  .btn-link {
        white-space: nowrap;
        margin-left: 1rem;
        text-decoration: none;
        color: var(--text-primary, #333);
    }

    .top-row[b-gmvau0f68e]  a:hover, .top-row[b-gmvau0f68e]  .btn-link:hover {
        text-decoration: underline;
    }

.top-row[b-gmvau0f68e]  .top-row-link {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .sidebar[b-gmvau0f68e] {
        display: none !important;
    }

    .top-row[b-gmvau0f68e] {
        display: none !important;
    }

    .top-row[b-gmvau0f68e]  a, .top-row[b-gmvau0f68e]  .btn-link {
        margin-left: 0;
    }

    /* Touch-friendly action items in top bar */
    .top-row[b-gmvau0f68e]  .top-row-actions > * {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .top-row[b-gmvau0f68e]  .top-row-link {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    article[b-gmvau0f68e] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* MBI-9: Space for bottom navigation bar */
    main[b-gmvau0f68e] {
        padding-bottom: var(--shell-bottom-pad, 64px);
    }
}

@media (min-width: 768px) {
    .page[b-gmvau0f68e] {
        flex-direction: row;
    }

    .sidebar[b-gmvau0f68e] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        transition: width 0.3s ease;
    }

    .page.sidebar-collapsed .sidebar[b-gmvau0f68e] {
        width: 70px;
    }

    .top-row[b-gmvau0f68e] {
        position: sticky;
        top: 0;
        z-index: 1100;
    }

    .top-row.auth[b-gmvau0f68e]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-gmvau0f68e] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    article[b-gmvau0f68e] {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
}

#blazor-error-ui[b-gmvau0f68e] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-gmvau0f68e] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Show only the matching language in the error UI */
:global(html[lang="lt"]) #blazor-error-ui [lang="en"][b-gmvau0f68e] { display: none; }
:global(html[lang="en"]) #blazor-error-ui [lang="lt"][b-gmvau0f68e] { display: none; }
:global(html:not([lang="en"]):not([lang="lt"])) #blazor-error-ui [lang="en"][b-gmvau0f68e] { display: inline; }
:global(html:not([lang="en"]):not([lang="lt"])) #blazor-error-ui [lang="lt"][b-gmvau0f68e] { display: none; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-r3krwc44wn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 3.5rem;
    color: white;
    position: absolute;
    top: 0;
    right: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    z-index: 10;
}

.navbar-toggler:checked[b-r3krwc44wn] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-r3krwc44wn] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.25);
}

.navbar-brand[b-r3krwc44wn] {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon[b-r3krwc44wn] {
    font-size: 1.5rem;
    color: #fff;
    /* override .bi box-model — brand icon is a font glyph, not an SVG sprite */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: unset;
    margin-right: 0;
    top: 0;
    background: none;
    line-height: 1;
}

.brand-text[b-r3krwc44wn] {
    transition: opacity 0.3s ease, width 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.95rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.bi[b-r3krwc44wn] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.nav-text[b-r3krwc44wn] {
    transition: opacity 0.3s ease, width 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.bi-house-door-fill-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-newspaper-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z'/%3E%3Cpath d='M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-3h5v1H7zm0 2h5v1H7zm0 2h5v1H7z'/%3E%3C/svg%3E");
}

.bi-pencil-square-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E");
}

/* Custom map icon - folded map with location pin (matching your icon) */
.bi-map-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 50 44'%3E%3Cpath d='M40.5 6.5c-3.6 0-6.5 2.9-6.5 6.5 0 4.3 6.5 11 6.5 11s6.5-6.7 6.5-11c0-3.6-2.9-6.5-6.5-6.5zm0 9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM0 37l14-6V7L0 13v24zm16-6l12 6V13l-12-6v24zm14 6l14-6V7l-14 6v24z'/%3E%3C/svg%3E");
}

.bi-geo-alt-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-geo-alt-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.bi-plus-circle-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3E%3C/svg%3E");
}

.bi-question-circle-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-question-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3E%3C/svg%3E");
}

.bi-megaphone-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-megaphone-fill' viewBox='0 0 16 16'%3E%3Cpath d='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49-.202-.003A2.014 2.014 0 0 1 0 9V7a2.014 2.014 0 0 1 1.994-2.009l.202-.003.019-.001.006-.004C4.464 4.752 7.9 4.288 13 2.714V2.5z'/%3E%3C/svg%3E");
}

.bi-person-circle-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-shield-lock-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-building-fill-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h3v-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V16h3a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H3Zm1 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3C/svg%3E");
}

.bi-chat-square-text-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chat-square-text' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v11.586l-2-2A2 2 0 0 0 11.586 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12Zm-2 8a.5.5 0 0 0 0-1H4a.5.5 0 0 0 0 1h8Zm0-3a.5.5 0 0 0 0-1H4a.5.5 0 0 0 0 1h8Zm-3-3a.5.5 0 0 0 0-1H4a.5.5 0 0 0 0 1h5Z'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu[b-r3krwc44wn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-graph-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

.nav-item[b-r3krwc44wn] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-r3krwc44wn] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-r3krwc44wn] {
        padding-bottom: 1rem;
    }

    .nav-item[b-r3krwc44wn]  .nav-link {
            color: #b0bec5;
            background: none;
            border: none;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
            width: 100%;
            overflow: hidden;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            /* The link is what carries the highlight, so its padding is the only thing holding the
               icon off the highlight's edge. With none, the icon sat flush against it and the only
               apparent gap was whitespace inside the icon artwork. */
            padding: 0 0.75rem;
        }

    /* Selection needs to be legible at a glance, which a fill alone was not: active sat at 12%
       white and hover at 8%, a four-percent difference that reads as the same state. Contrast now
       comes from the fill gap, a white label and the heavier weight — not from an edge treatment,
       which only crowded the icon further. The larger radius stops a 48px-tall row's highlight
       looking like a stray rectangle. */
    .nav-item[b-r3krwc44wn]  a.active {
        background-color: rgba(255,255,255,0.14);
        color: #ffffff;
        border-radius: 8px;
        font-weight: 700;
    }

    .nav-item[b-r3krwc44wn]  .nav-link:hover {
        background-color: rgba(255,255,255,0.06);
        color: #ffffff;
        border-radius: 8px;
    }

    /* Hovering the row you are already on must not read as leaving it. */
    .nav-item[b-r3krwc44wn]  a.active:hover {
        background-color: rgba(255,255,255,0.18);
    }

.nav-scrollable[b-r3krwc44wn] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-r3krwc44wn] {
    display: block;
}

@media (min-width: 768px) {
    .navbar-toggler[b-r3krwc44wn] {
        display: none;
    }

    .nav-scrollable[b-r3krwc44wn] {
        display: block;
    }
}

/* Mobile nav items - larger touch targets */
@media (max-width: 767.98px) {
    .nav-item[b-r3krwc44wn]  .nav-link {
        height: 3.5rem;
        line-height: 3.5rem;
        font-size: 0.85rem;
        /* Deliberately not narrowing the horizontal padding here: the base 0.75rem is what keeps
           the icon off the highlight edge, and 0.5rem would undo it on exactly the screens where
           the highlight is largest. */
    }

    .nav-scrollable[b-r3krwc44wn] {
        max-height: calc(100vh - 3.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Components/Pages/AdminTabs/AdminReviewsTab.razor.rz.scp.css */
/* Mobile touch-target refinements for the admin Reviews moderation table.
   Scoped via CSS isolation so the other admin tables keep their compact sizing.
   Phones only (<=767.98px); desktop/tablet with a mouse stay unchanged. */
@media (max-width: 767.98px) {
    /* WCAG 2.5.8: the default Bootstrap checkbox is ~16px — too small to tap
       reliably. Enlarge the row-selection checkboxes to a 24px minimum. */
    .form-check-input[b-6n73992kp7] {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* WCAG 2.5.8: guarantee >=8px spacing between adjacent per-row action
       buttons (hide / clear-flag / delete) so they are not edge-to-edge. */
    td .btn + .btn[b-6n73992kp7] {
        margin-left: 0.5rem;
    }

    /* Center cell content now that the checkbox is taller than the text rows. */
    td[b-6n73992kp7],
    th[b-6n73992kp7] {
        vertical-align: middle;
    }
}
/* /Components/Pages/AdvertiserDashboard.razor.rz.scp.css */
/* Advertiser dashboard — ad preview and placement cards.
   Nine fields used to describe a banner with nothing showing the result. */

/* ── Preview ────────────────────────────────────────────────────────── */
.adv-preview[b-iukasun5zt] {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
}

.adv-preview-head[b-iukasun5zt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.adv-preview-label[b-iukasun5zt] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.adv-preview-modes[b-iukasun5zt] {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
}

.adv-preview-modes button[b-iukasun5zt] {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.adv-preview-modes button.active[b-iukasun5zt] {
    background: var(--accent-color);
    color: #ffffff;
}

/* The frame stands in for the page the slot sits on, so the ad is judged at its real width */
.adv-preview-frame[b-iukasun5zt] {
    max-width: 728px;
    margin: 0 auto;
    transition: max-width 0.25s ease;
}

.adv-preview-frame.is-mobile[b-iukasun5zt] {
    max-width: 340px;
}

.adv-preview-ad[b-iukasun5zt] {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
}

.adv-preview-sponsored[b-iukasun5zt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

/* 2:1, matching the slot — and matching what the image rules now state */
.adv-preview-media[b-iukasun5zt] {
    aspect-ratio: 2 / 1;
    background: rgba(148, 163, 184, 0.18);
}

.adv-preview-media img[b-iukasun5zt] {
    width: 100%;
    height: 100%;
    /* Fitted, never stretched — the same treatment the live slot gives it, so a portrait
       or square upload shows its letterboxing here rather than in production. */
    object-fit: contain;
    display: block;
}

.adv-preview-media-empty[b-iukasun5zt] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.75rem;
}

.adv-preview-text[b-iukasun5zt] {
    padding: 0.7rem 0.9rem;
}

.adv-preview-text strong[b-iukasun5zt] {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.adv-preview-text p[b-iukasun5zt] {
    margin: 0.2rem 0 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.adv-preview-by[b-iukasun5zt] {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Placement cards ────────────────────────────────────────────────── */
.adv-placements[b-iukasun5zt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.adv-placement[b-iukasun5zt] {
    display: grid;
    gap: 0.2rem;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.adv-placement:hover[b-iukasun5zt] {
    border-color: var(--accent-color);
}

.adv-placement.active[b-iukasun5zt] {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.08);
}

.adv-placement-title[b-iukasun5zt] {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.adv-placement-desc[b-iukasun5zt] {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    .adv-placements[b-iukasun5zt] {
        grid-template-columns: 1fr;
    }
    /* 46px rows rather than a native select wheel */
    .adv-placement[b-iukasun5zt] {
        min-height: 46px;
    }
}
/* /Components/Pages/ClubPage.razor.rz.scp.css */
/* ClubPage.razor.css — scoped styles for the redesigned club page.
   Blazor auto-bundles this because the name matches ClubPage.razor.
   Everything is driven off --club-accent, which ClubPage.razor sets from
   SafeColor(club.AccentColor).

   Adapted from the design project's dev-branch/ClubPage.razor.css. One
   deliberate change: the dark-mode block targets [data-theme="dark"], the
   attribute this app's own styling keys off. The design shipped
   [data-bs-theme="dark"]; <html> now carries both (App.razor mirrors them so
   Bootstrap 5.3's colour modes engage), but data-bs-theme belongs to Bootstrap's
   own components — app styles target data-theme. */

.club-page[b-nm03oupcbf] {
    --club-accent: var(--bs-primary);
    --cp-ink: #14171a;
    --cp-muted: #6b7480;
    --cp-faint: #8b949f;
    --cp-line: #e3e6ea;
    --cp-line-soft: #f0f2f4;
    --cp-surface: #fff;
    --cp-soft: #fafbfc;
    --cp-track: #eaecf0;
    color: var(--cp-ink);
}

/* ── Identity card ─────────────────────────────────────────────── */

/* Deliberately not clipping: the Manage menu is absolutely positioned inside this card, and an
   overflow:hidden here cut its lower half off — the menu is taller than the space left below the
   button. Only the banner ever needed clipping, so it now rounds its own top corners instead. */
.club-identity[b-nm03oupcbf] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    margin-bottom: 24px;
}

.club-banner[b-nm03oupcbf] {
    height: 172px;
    /* 16px card radius less its 1px border, so the banner still nests exactly. */
    border-radius: 15px 15px 0 0;
    background-size: cover;
    background-position: center;
    /* placeholder hatch when the club has no banner */
    background-color: #e6e9ed;
    background-image: repeating-linear-gradient(135deg, #dcdfe4, #dcdfe4 14px, #e6e9ed 14px, #e6e9ed 28px);
}

.club-banner--image[b-nm03oupcbf] {
    background-image: none;
}

.club-identity-body[b-nm03oupcbf] {
    padding: 20px 26px;
}

.club-identity-row[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Avatar sits BELOW the banner — no negative margin, no overlap. */
.club-avatar[b-nm03oupcbf] {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--club-accent);
}

.club-avatar span[b-nm03oupcbf] {
    color: #fff;
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.club-identity-titles[b-nm03oupcbf] {
    flex: 1;
    min-width: 260px;
}

.club-name[b-nm03oupcbf] {
    margin: 0 0 3px;
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.club-name-row[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 3px;
}

.club-meta[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--cp-muted);
    flex-wrap: wrap;
}

.club-meta .sep[b-nm03oupcbf] {
    color: #c9ced4;
}

/* ── Action hierarchy: one primary, one secondary, tools in a menu ── */

.club-actions[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-btn[b-nm03oupcbf] {
    border-radius: 10px;
    padding: 0.6rem 1.15rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
    transition: background-color .12s ease, border-color .12s ease;
}

.cp-btn:disabled[b-nm03oupcbf] {
    opacity: .6;
    cursor: default;
}

.cp-btn--primary[b-nm03oupcbf] {
    background: var(--club-accent);
    border-color: var(--club-accent);
    color: #fff;
    font-weight: 700;
    padding: 0.6rem 1.35rem;
}

.cp-btn--primary:hover[b-nm03oupcbf] {
    filter: brightness(0.92);
    color: #fff;
}

.cp-btn--quiet[b-nm03oupcbf] {
    background: #eef1f4;
    border-color: var(--cp-line);
    color: var(--cp-ink);
}

.cp-btn--quiet:hover[b-nm03oupcbf] {
    background: #e5e9ed;
    color: var(--cp-ink);
}

.cp-btn--outline[b-nm03oupcbf] {
    background: #fff;
    border-color: #d5dae0;
    color: var(--cp-ink);
}

.cp-btn--outline:hover[b-nm03oupcbf] {
    background: #f7f8f9;
    border-color: #c2c9d1;
    color: var(--cp-ink);
}

.cp-btn--dark[b-nm03oupcbf] {
    background: var(--cp-ink);
    border-color: var(--cp-ink);
    color: #fff;
}

.cp-btn--dark:hover[b-nm03oupcbf] {
    background: #24282d;
    color: #fff;
}

.club-actions-divider[b-nm03oupcbf] {
    width: 1px;
    height: 26px;
    background: var(--cp-line);
}

/* Manage menu (pure Blazor state — no Bootstrap JS dependency) */
.club-manage[b-nm03oupcbf] {
    position: relative;
}

/* Invisible full-viewport catcher so any outside click closes the menu.
   Sits under the menu (z-index 29 vs 30) so menu clicks still land. */
.club-manage-backdrop[b-nm03oupcbf] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.club-manage-menu[b-nm03oupcbf] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 23, 26, .14);
    padding: 6px;
    z-index: 30;
}

.club-manage-menu button[b-nm03oupcbf],
.club-manage-menu a[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--cp-ink);
    cursor: pointer;
    text-decoration: none;
}

.club-manage-menu button:hover[b-nm03oupcbf],
.club-manage-menu a:hover[b-nm03oupcbf] {
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.club-manage-menu i[b-nm03oupcbf] {
    width: 16px;
    text-align: center;
    color: var(--cp-muted);
}

.club-manage-menu hr[b-nm03oupcbf] {
    margin: 5px 8px;
    border: none;
    border-top: 1px solid var(--cp-line-soft);
}

/* ── Stats + socials strip inside the identity card ─────────────── */

.club-strip[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-line-soft);
    flex-wrap: wrap;
}

.club-stat-value[b-nm03oupcbf] {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.club-stat-label[b-nm03oupcbf],
.cp-eyebrow[b-nm03oupcbf] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--cp-faint);
}

.club-stat-label[b-nm03oupcbf] {
    margin-top: 5px;
}

.club-socials[b-nm03oupcbf] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.club-socials a[b-nm03oupcbf] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--cp-muted);
    text-decoration: none;
}

.club-socials a:hover[b-nm03oupcbf] {
    background: var(--cp-soft);
    border-color: #d5dae0;
    color: var(--cp-ink);
}

/* ── Two-column body ───────────────────────────────────────────── */

.club-layout[b-nm03oupcbf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 24px;
    align-items: start;
}

.club-main[b-nm03oupcbf] {
    min-width: 0;
}

.club-aside[b-nm03oupcbf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 991.98px) {
    .club-layout[b-nm03oupcbf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cp-card[b-nm03oupcbf] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
}

.cp-card--pad[b-nm03oupcbf] {
    padding: 18px;
}

.cp-card h3.cp-eyebrow[b-nm03oupcbf] {
    margin: 0 0 10px;
}

.cp-tag[b-nm03oupcbf] {
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    border-radius: 999px;
    padding: 0.24rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--cp-muted);
}

.cp-detail-row[b-nm03oupcbf] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.86rem;
}

.cp-detail-row + .cp-detail-row[b-nm03oupcbf] {
    margin-top: 9px;
}

.cp-detail-row span:first-child[b-nm03oupcbf] {
    color: var(--cp-faint);
}

.cp-detail-row span:last-child[b-nm03oupcbf] {
    font-weight: 600;
    text-align: right;
}

/* Header row for a .cp-card whose body is a list of rows (join-request queue). */
.cp-card-head[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cp-line-soft);
}

/* Marks a section in the reorder list that has nothing to render. Quiet on purpose: it is a
   status note, not a warning — an empty section is a perfectly normal state. */
.club-section-empty[b-nm03oupcbf] {
    font-size: 0.72rem;
    color: var(--cp-faint);
    font-style: italic;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Editor rows inside the settings pane (links, facts, FAQ, sponsors, section order).
   Same rhythm as .club-person but without the avatar column. */
.cp-editor-row[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--cp-line-soft);
}

.cp-editor-row:last-child[b-nm03oupcbf] {
    border-bottom: none;
}

/* ── Sidebar: Next meet ────────────────────────────────────────── */

.cp-next-title[b-nm03oupcbf] {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    margin-bottom: 7px;
}

.cp-next-meta[b-nm03oupcbf] {
    font-size: 0.83rem;
    color: var(--cp-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cp-next-meta + .cp-next-meta[b-nm03oupcbf] {
    margin-top: 4px;
}

.cp-btn--block[b-nm03oupcbf] {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ── Tabs as a segmented control (replaces .nav-tabs) ──────────── */

.club-tabs[b-nm03oupcbf] {
    display: flex;
    gap: 3px;
    background: var(--cp-track);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    list-style: none;
}

.club-tabs .nav-link[b-nm03oupcbf] {
    border: none;
    border-radius: 9px;
    padding: 0.55rem 0.95rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    color: #5b6470;
}

.club-tabs .nav-link:hover[b-nm03oupcbf] {
    color: var(--cp-ink);
}

/* Flat fill, hairline border — no drop shadow. */
.club-tabs .nav-link.active[b-nm03oupcbf] {
    background: var(--cp-surface);
    color: var(--cp-ink);
    border: 1px solid var(--cp-line);
    padding: calc(0.55rem - 1px) calc(0.95rem - 1px);
}

.club-tabs .tab-count[b-nm03oupcbf] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cp-faint);
}

.club-tabs .nav-link.active .tab-count[b-nm03oupcbf] {
    color: var(--club-accent);
}

/* "Hidden from visitors" hint on an owner-only tab (Followers / Q&A switched off). */
.club-tabs .tab-hidden-hint[b-nm03oupcbf] {
    font-size: 0.78rem;
    color: var(--cp-faint);
}

/* ── Event rows: date chip + attendee count ────────────────────── */

.club-event-list[b-nm03oupcbf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.club-event[b-nm03oupcbf] {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    padding: 14px;
    text-decoration: none;
    color: var(--cp-ink);
}

.club-event:hover[b-nm03oupcbf] {
    border-color: #c2c9d1;
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.club-event-date[b-nm03oupcbf] {
    width: 58px;
    flex-shrink: 0;
    text-align: center;
    background: color-mix(in srgb, var(--club-accent) 8%, var(--cp-surface));
    border: 1px solid color-mix(in srgb, var(--club-accent) 22%, var(--cp-surface));
    border-radius: 11px;
    padding: 9px 0;
}

.club-event-month[b-nm03oupcbf] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--club-accent);
}

.club-event-day[b-nm03oupcbf] {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.club-event-thumb[b-nm03oupcbf] {
    width: 74px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #e6e9ed;
    background-image: repeating-linear-gradient(135deg, #dcdfe4, #dcdfe4 9px, #e6e9ed 9px, #e6e9ed 18px);
}

.club-event-title[b-nm03oupcbf] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.club-event-meta[b-nm03oupcbf] {
    font-size: 0.84rem;
    color: var(--cp-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.club-event-going[b-nm03oupcbf] {
    text-align: right;
    flex-shrink: 0;
    padding-right: 4px;
}

.club-event-going strong[b-nm03oupcbf] {
    display: block;
    font-size: 0.82rem;
}

.club-event-going span[b-nm03oupcbf] {
    font-size: 0.7rem;
    color: var(--cp-faint);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Member / follower rows ────────────────────────────────────── */

.club-person[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--cp-line-soft);
}

.club-person:last-child[b-nm03oupcbf] {
    border-bottom: none;
}

/* Same corner problem as .pf-row on the profile: this row is a full-bleed child of a rounded
   .cp-card, so its hover fill would square off the card's corners. Rounded here rather than by
   clipping the card, because the Q&A cards hold dropdown menus that must overflow it. */
.club-person:first-child[b-nm03oupcbf] {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.club-person:last-child[b-nm03oupcbf] {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

.club-person:hover[b-nm03oupcbf] {
    background: var(--cp-soft);
}

.club-person-avatar[b-nm03oupcbf] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--cp-track);
    color: #5b6470;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    object-fit: cover;
}

.club-person-name[b-nm03oupcbf] {
    font-weight: 600;
    font-size: 0.94rem;
}

.club-person-sub[b-nm03oupcbf] {
    font-size: 0.79rem;
    color: var(--cp-faint);
    margin-top: 2px;
}

.club-role[b-nm03oupcbf] {
    border-radius: 999px;
    padding: 0.13rem 0.55rem;
    font-size: 0.71rem;
    font-weight: 700;
    flex-shrink: 0;
}

.club-role--owner[b-nm03oupcbf] {
    background: #fdf4e3;
    border: 1px solid #f2e0b8;
    color: #8a6100;
}

.club-role--manager[b-nm03oupcbf] {
    background: color-mix(in srgb, var(--club-accent) 8%, var(--cp-surface));
    border: 1px solid color-mix(in srgb, var(--club-accent) 22%, var(--cp-surface));
    color: color-mix(in srgb, var(--club-accent) 75%, var(--cp-ink));
}

.club-role--member[b-nm03oupcbf] {
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    color: var(--cp-muted);
}

.club-row-action[b-nm03oupcbf] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    color: var(--cp-muted);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.club-row-action:hover[b-nm03oupcbf] {
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.club-row-action:disabled[b-nm03oupcbf] {
    opacity: .45;
    cursor: default;
}

/* Toggled-on state (member billing access) — a flat accent fill, never a shadow. */
.club-row-action.is-on[b-nm03oupcbf] {
    background: color-mix(in srgb, var(--club-accent) 12%, var(--cp-surface));
    border-color: color-mix(in srgb, var(--club-accent) 32%, var(--cp-surface));
    color: var(--club-accent);
}

.club-row-action--ok:hover[b-nm03oupcbf] {
    border-color: #b7dfc0;
    background: #f0f9f2;
    color: #1c7c3a;
}

.club-row-action--danger:hover[b-nm03oupcbf] {
    border-color: #f0c2c2;
    background: #fdf3f3;
    color: #b02a2a;
}

/* Permission chips under a member's name. */
.club-person-perms[b-nm03oupcbf] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

/* Touch targets: rows and their inline actions must stay thumb-sized on phones. */
@media (max-width: 767.98px) {
    .club-row-action[b-nm03oupcbf] {
        width: 44px;
        height: 44px;
    }

    .club-person[b-nm03oupcbf] {
        flex-wrap: wrap;
    }
}

/* ── Q&A ───────────────────────────────────────────────────────── */

.club-question[b-nm03oupcbf] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
}

.club-answer[b-nm03oupcbf] {
    margin: 12px 0 0 43px;
    background: var(--cp-soft);
    border-left: 2px solid var(--club-accent);
    border-radius: 0 10px 10px 0;
    padding: 11px 14px;
}

.club-answer-label[b-nm03oupcbf] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--club-accent);
    margin-bottom: 4px;
}

.club-badge-pending[b-nm03oupcbf] {
    background: #fff6e6;
    border: 1px solid #ffe0a8;
    color: #8a5a00;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-block;
}

/* Pinned questions get a warm hairline, not a heavy Bootstrap border-warning. */
.club-question.is-pinned[b-nm03oupcbf] {
    border-color: #f2e0b8;
    background: #fffdf8;
}

.club-question-foot[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--cp-line-soft);
}

/* ── Settings: left rail + section pane ────────────────────────── */

.club-settings[b-nm03oupcbf] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

@media (max-width: 767.98px) {
    .club-settings[b-nm03oupcbf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.club-settings-rail[b-nm03oupcbf] {
    border-right: 1px solid var(--cp-line-soft);
    padding: 12px;
    background: var(--cp-soft);
}

@media (max-width: 767.98px) {
    .club-settings-rail[b-nm03oupcbf] {
        border-right: none;
        border-bottom: 1px solid var(--cp-line-soft);
        display: flex;
        gap: 4px;
        overflow-x: auto;
    }
}

.club-settings-rail button[b-nm03oupcbf] {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 2px;
    background: none;
    color: var(--cp-muted);
    white-space: nowrap;
}

.club-settings-rail button:hover[b-nm03oupcbf] {
    color: var(--cp-ink);
}

.club-settings-rail button.active[b-nm03oupcbf] {
    background: var(--cp-surface);
    color: var(--cp-ink);
    border-color: var(--cp-line);
}

.club-settings-pane[b-nm03oupcbf] {
    padding: 22px 24px;
}

.club-settings-pane h3[b-nm03oupcbf] {
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.club-settings-hint[b-nm03oupcbf] {
    margin: 0 0 20px;
    font-size: 0.85rem;
    color: var(--cp-muted);
}

.club-settings-pane label.form-label[b-nm03oupcbf] {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.club-settings-footer[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-line-soft);
    flex-wrap: wrap;
}

/* ── Dark mode ──────────────────────────────────────────────────
   NOTE: <html> carries both data-theme and data-bs-theme. App styles target
   data-theme; data-bs-theme is Bootstrap's own colour-mode hook. */

[data-theme="dark"] .club-page[b-nm03oupcbf] {
    --cp-ink: #e8eaed;
    --cp-muted: #a3acb6;
    --cp-faint: #8b949f;
    --cp-line: #2c3238;
    --cp-line-soft: #23282d;
    --cp-surface: #1b1f23;
    --cp-soft: #191d21;
    --cp-track: #24292e;
}

[data-theme="dark"] .club-banner[b-nm03oupcbf] {
    background-color: #23282d;
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 14px, #2b3137 14px, #2b3137 28px);
}

[data-theme="dark"] .club-banner--image[b-nm03oupcbf] {
    background-image: none;
}

[data-theme="dark"] .club-event-thumb[b-nm03oupcbf] {
    background-color: #23282d;
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 9px, #2b3137 9px, #2b3137 18px);
}

[data-theme="dark"] .club-tabs .nav-link[b-nm03oupcbf] {
    color: #a3acb6;
}

[data-theme="dark"] .club-tabs .nav-link.active[b-nm03oupcbf],
[data-theme="dark"] .club-settings-rail button.active[b-nm03oupcbf] {
    background: #2b3137;
    border-color: #363d44;
    color: #fff;
}

[data-theme="dark"] .cp-btn--outline[b-nm03oupcbf],
[data-theme="dark"] .club-socials a[b-nm03oupcbf],
[data-theme="dark"] .club-row-action[b-nm03oupcbf] {
    background: #23282d;
    border-color: #2c3238;
    color: #d3d8de;
}

[data-theme="dark"] .cp-btn--quiet[b-nm03oupcbf] {
    background: #2b3137;
    border-color: #363d44;
    color: #e8eaed;
}

[data-theme="dark"] .cp-btn--dark[b-nm03oupcbf] {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .cp-btn--dark:hover[b-nm03oupcbf] {
    background: #161b22;
}

[data-theme="dark"] .club-person-avatar[b-nm03oupcbf] {
    color: #c8ced6;
}

[data-theme="dark"] .club-role--owner[b-nm03oupcbf] {
    background: #3a2f14;
    border-color: #5a4a22;
    color: #e8c77a;
}

[data-theme="dark"] .club-badge-pending[b-nm03oupcbf] {
    background: #3a2c10;
    border-color: #5c471c;
    color: #f0c473;
}

[data-theme="dark"] .club-meta .sep[b-nm03oupcbf] {
    color: #4a525b;
}

/* ══ Mobile (≤767.98px) ══════════════════════════════════════════════════
   Fits the design to the chrome the app already has: a 56px .bottom-nav plus
   a .mobile-action-bar that app.css already lifts above it. Nothing here
   hardcodes those heights. */
@media (max-width: 767.98px) {
    /* Follow lives in the fixed action bar at this width. */
    .club-follow-desktop[b-nm03oupcbf] {
        display: none !important;
    }

    /* Clear the permanent bottom chrome (~56px nav + ~52px action bar) so the
       last card is never trapped behind it. */
    .club-page[b-nm03oupcbf] {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    .club-banner[b-nm03oupcbf] {
        height: 140px;
    }

    .club-identity-body[b-nm03oupcbf] {
        padding: 16px;
    }

    .club-identity-row[b-nm03oupcbf] {
        gap: 12px;
    }

    .club-avatar[b-nm03oupcbf] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    .club-avatar span[b-nm03oupcbf] {
        font-size: 1.6rem;
    }

    .club-name[b-nm03oupcbf] {
        font-size: 1.12rem;
    }

    .club-identity-titles[b-nm03oupcbf] {
        min-width: 0;
        flex-basis: calc(100% - 72px);
    }

    /* Meta stays on one line rather than stacking into three rows. */
    .club-meta[b-nm03oupcbf] {
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    /* Share + Manage sit as a full-width pair under the name, at a real tap size. */
    .club-actions[b-nm03oupcbf] {
        width: 100%;
        gap: 8px;
    }

    .club-actions .cp-btn[b-nm03oupcbf] {
        min-height: 44px;
        flex: 1 1 0;
        justify-content: center;
    }

    .club-actions-divider[b-nm03oupcbf] {
        display: none;
    }

    .club-manage[b-nm03oupcbf] {
        flex: 1 1 0;
        display: flex;
    }

    .club-manage > .cp-btn[b-nm03oupcbf] {
        width: 100%;
    }

    .club-manage-menu[b-nm03oupcbf] {
        width: min(280px, calc(100vw - 32px));
    }

    /* At 360dp a 34px gap overflows; the socials must not shrink the numbers. */
    .club-strip[b-nm03oupcbf] {
        gap: 16px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .club-socials[b-nm03oupcbf] {
        flex-shrink: 0;
    }

    .club-socials a[b-nm03oupcbf] {
        width: 44px;
        height: 44px;
    }

    /* Tabs keep the segmented shape but scroll instead of wrapping, and stick
       under the browser bar (body already carries env(safe-area-inset-top)). */
    .club-tabs[b-nm03oupcbf] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .club-tabs[b-nm03oupcbf]::-webkit-scrollbar {
        display: none;
    }

    .club-tabs .nav-link[b-nm03oupcbf] {
        white-space: nowrap;
        min-height: 44px;
    }

    /* Sidebar reads after the main column on a phone. */
    .club-aside[b-nm03oupcbf] {
        order: 2;
    }

    .cp-card--pad[b-nm03oupcbf] {
        padding: 14px;
    }

    /* Event rows: keep the date chip, drop the thumbnail for horizontal room. */
    .club-event[b-nm03oupcbf] {
        gap: 12px;
        padding: 12px;
    }

    .club-event-thumb[b-nm03oupcbf] {
        display: none;
    }

    .club-settings-rail button[b-nm03oupcbf] {
        min-height: 44px;
    }
}

/* ── Settings: accent colour live preview ───────────────────────────────
   The colour input alone never showed where the accent lands, so picking one was
   guesswork. These five swatches mirror the five places it appears on the page. */
.club-accent-preview[b-nm03oupcbf] {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}

.club-accent-preview-label[b-nm03oupcbf] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

.club-accent-preview-row[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.club-accent-swatch-banner[b-nm03oupcbf] {
    width: 72px;
    height: 32px;
    border-radius: 6px;
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.20)),
        linear-gradient(var(--club-accent), var(--club-accent));
}

.club-accent-swatch-logo[b-nm03oupcbf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--club-accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.club-accent-preview-btn[b-nm03oupcbf] {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--club-accent);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
}

.club-accent-preview-chip[b-nm03oupcbf] {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--club-accent);
    color: var(--club-accent);
    font-size: 0.75rem;
    font-weight: 600;
}

.club-accent-preview-date[b-nm03oupcbf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--club-accent);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Settings: logo preview ─────────────────────────────────────────────
   Rounded square, matching how the club page actually renders the logo. It used to
   preview as .rounded-circle, so the shape approved was not the shape shipped. */
.club-logo-preview[b-nm03oupcbf] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

/* ── Settings: banner crop preview ──────────────────────────────────────
   app.css crops the banner to 140px below 576px. That crop was invisible here, so a
   banner could lose its subject on phones with no warning. The dashed band marks the
   strip that survives. */
.club-banner-preview img[b-nm03oupcbf] {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.club-banner-safe[b-nm03oupcbf] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 140px;
    transform: translateY(-50%);
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28) inset;
}

.club-banner-safe-note[b-nm03oupcbf] {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    pointer-events: none;
}

/* ── Settings: instant-save marker ──────────────────────────────────────
   Two commit models live in this form — sponsors and the gallery persist on upload,
   everything else waits for Save. Unlabelled, Discard meant different things in
   different places. */
.club-instant-badge[b-nm03oupcbf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #b45309;
}

[data-theme="dark"] .club-instant-badge[b-nm03oupcbf] {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.55);
    color: #fbbf24;
}

/* ── Settings: privacy section ──────────────────────────────────────────
   Lifted out of "Display options", where the most consequential switch in the form
   was formatted exactly like "Show member count". */
.club-privacy-switch[b-nm03oupcbf] {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    margin-bottom: 1rem;
}

.club-privacy-effects[b-nm03oupcbf] {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid var(--border-color);
}

.club-privacy-list[b-nm03oupcbf] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    display: grid;
    gap: 0.35rem;
}

.club-privacy-list li[b-nm03oupcbf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.club-privacy-list i[b-nm03oupcbf] {
    color: var(--text-muted);
    width: 1.1rem;
    text-align: center;
}
/* /Components/Pages/Clubs.razor.rz.scp.css */
/* Clubs listing — editorial gallery layout */
.clubs-page[b-lx2if7eocc] {
    padding-bottom: 2.5rem;
}

/* Page header */
.clubs-header[b-lx2if7eocc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1.25rem 0;
}
.clubs-heading[b-lx2if7eocc] {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    min-width: 0;
}

.clubs-result-count[b-lx2if7eocc] {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.clubs-title[b-lx2if7eocc] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Scope tabs — All / My clubs / Following, as a segmented control */
.clubs-scope[b-lx2if7eocc] {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    background: var(--tile-chip-bg);
    border: 1px solid var(--tile-chip-border);
    border-radius: 999px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.clubs-scope[b-lx2if7eocc]::-webkit-scrollbar { display: none; }

.clubs-scope-tab[b-lx2if7eocc] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1.05rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.clubs-scope-tab:hover[b-lx2if7eocc] { color: var(--text-primary); }
.clubs-scope-tab.active[b-lx2if7eocc] {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

/* Filter bar */
.clubs-toolbar[b-lx2if7eocc] {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    align-items: stretch;
}

.clubs-toolbar .form-control[b-lx2if7eocc],
.clubs-toolbar .form-select[b-lx2if7eocc] {
    height: 42px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
}

.clubs-toolbar .form-control:focus[b-lx2if7eocc],
.clubs-toolbar .form-select:focus[b-lx2if7eocc] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.clubs-search-wrap[b-lx2if7eocc] {
    position: relative;
}
.clubs-search-wrap .bi-search[b-lx2if7eocc] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.clubs-search-wrap .form-control[b-lx2if7eocc] {
    padding-left: 2.35rem;
}

/* Location chips — the head of the location list is one tap; the tail stays in a select */
.clubs-locations[b-lx2if7eocc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.clubs-chip[b-lx2if7eocc] {
    flex: 0 0 auto;
    border: 1px solid var(--tile-chip-border);
    background: var(--tile-chip-bg);
    color: var(--tile-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.clubs-chip:hover[b-lx2if7eocc] {
    background: var(--tile-chip-hover-bg);
    color: var(--text-primary);
}
.clubs-chip.active[b-lx2if7eocc] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.clubs-location-more[b-lx2if7eocc] {
    flex: 0 0 auto;
    width: auto;
    max-width: 190px;
    height: 32px;
    padding: 0.15rem 1.9rem 0.15rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 999px;
    background-color: var(--tile-chip-bg);
    border: 1px solid var(--tile-chip-border);
    color: var(--tile-muted);
}
/* A location picked from the tail has no chip, so the select itself carries the active state */
.clubs-location-more.active[b-lx2if7eocc] {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

/* Card grid */
.clubs-grid[b-lx2if7eocc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.club-tile[b-lx2if7eocc] {
    position: relative;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--tile-title);
    box-shadow: var(--tile-shadow);
    isolation: isolate;
}

.club-tile[b-lx2if7eocc]::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--tile-hover-ring), transparent 40%, transparent 60%, var(--tile-hover-ring));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.club-tile:hover[b-lx2if7eocc] {
    transform: translateY(-4px);
    box-shadow: var(--tile-shadow-hover), 0 0 0 1px var(--tile-hover-ring);
    color: var(--tile-title);
    text-decoration: none !important;
}
.club-tile:hover[b-lx2if7eocc]::before { opacity: 1; }

/* Identity band. A banner used to be forced into 16:10 and clubs without one got a 3rem grey
   icon — the biggest element on the card carrying the least information. The band is now a
   slim strip: an image when there is one, otherwise a wash of the club's own accent colour. */
.club-tile-banner[b-lx2if7eocc] {
    position: relative;
    width: 100%;
    height: 92px;
    background: var(--tile-logo-bg);
    overflow: hidden;
    flex-shrink: 0;
}
.club-tile-banner img[b-lx2if7eocc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.club-tile:hover .club-tile-banner img[b-lx2if7eocc] {
    transform: scale(1.06);
}

/* --tile-accent comes from the club's validated hex accent colour; the fallback keeps the
   band coloured for clubs that never picked one. */
.club-tile-noband .club-tile-banner[b-lx2if7eocc] {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.20)),
        linear-gradient(var(--tile-accent, #2196F3), var(--tile-accent, #2196F3));
}

/* Body — logo sits below the band rather than straddling it */
.club-tile-body[b-lx2if7eocc] {
    padding: 0.95rem 1.25rem 1.1rem 1.25rem;
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "logo heading"
        "desc desc"
        "meta meta";
    column-gap: 0.85rem;
    row-gap: 0.75rem;
    align-content: start;
}

.club-tile-logo[b-lx2if7eocc] {
    grid-area: logo;
    align-self: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--tile-logo-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tile-logo-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.club-tile-logo img[b-lx2if7eocc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.club-tile-logo-fallback[b-lx2if7eocc] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
}

.club-tile-heading[b-lx2if7eocc] {
    grid-area: heading;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

a.club-tile .club-tile-name[b-lx2if7eocc],
.club-tile .club-tile-name[b-lx2if7eocc] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tile-title) !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
a.club-tile:hover .club-tile-name[b-lx2if7eocc],
.club-tile:hover .club-tile-name[b-lx2if7eocc] {
    color: var(--tile-title) !important;
}

.club-tile-sub[b-lx2if7eocc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.club-tile-location[b-lx2if7eocc] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tile-subtle);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.club-tile-location .bi-geo-alt-fill[b-lx2if7eocc] {
    color: var(--accent-color);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Role chip — a club you belong to is no longer anonymous in the directory */
.club-tile-role[b-lx2if7eocc] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: #ffffff;
}
.club-tile-role-following[b-lx2if7eocc] {
    background: var(--tile-chip-bg);
    border: 1px solid var(--tile-chip-border);
    color: var(--tile-muted);
}

.club-tile-private[b-lx2if7eocc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--tile-chip-bg);
    border: 1px solid var(--tile-chip-border);
    color: var(--tile-subtle);
}

.club-tile-desc[b-lx2if7eocc] {
    grid-area: desc;
    margin: 0;
    font-size: 0.85rem;
    color: var(--tile-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.club-tile-meta[b-lx2if7eocc] {
    grid-area: meta;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tile-divider);
    font-size: 0.78rem;
}

.club-tile-meta-item[b-lx2if7eocc] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: var(--tile-chip-bg);
    border: 1px solid var(--tile-chip-border);
    border-radius: 999px;
    color: var(--tile-muted);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.club-tile:hover .club-tile-meta-item[b-lx2if7eocc] {
    background: var(--tile-chip-hover-bg);
}
.club-tile-meta-item i[b-lx2if7eocc] {
    font-size: 0.8rem;
    color: var(--tile-subtle);
}
.club-tile-meta-item strong[b-lx2if7eocc] {
    color: var(--tile-title);
    font-weight: 600;
}

/* Private tiles get a join prompt in the meta slot instead of member/event counts,
   so the row is never empty and the tile does not end in dead space. */
.club-tile-meta-private[b-lx2if7eocc] {
    min-width: 0;
    white-space: normal;
}

.club-tile-skeleton .club-tile-banner[b-lx2if7eocc] {
    background: var(--tile-placeholder-bg);
}

/* Responsive breakpoints */
@media (max-width: 1199.98px) {
    .clubs-grid[b-lx2if7eocc] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .clubs-grid[b-lx2if7eocc] { grid-template-columns: 1fr; gap: 1.25rem; }
    /* height: 42px in .clubs-toolbar would override the global min-height: 44px — unset it on mobile */
    .clubs-toolbar .form-control[b-lx2if7eocc],
    .clubs-toolbar .form-select[b-lx2if7eocc] {
        height: unset;
    }
}

/* Phone: the tile collapses to a compact row so several clubs fit on screen instead of one.
   The band becomes a thin accent stripe down the leading edge and the description drops —
   name, location and counts are what a scanning reader actually uses. */
@media (max-width: 575.98px) {
    .clubs-toolbar[b-lx2if7eocc] { grid-template-columns: 1fr 128px; gap: 0.5rem; }
    .clubs-locations[b-lx2if7eocc] { margin-bottom: 1rem; }

    .clubs-grid[b-lx2if7eocc] { gap: 0.65rem; }

    .club-tile[b-lx2if7eocc] {
        flex-direction: row;
        align-items: stretch;
        border-radius: 12px;
    }
    .club-tile:hover[b-lx2if7eocc] { transform: none; }

    .club-tile-banner[b-lx2if7eocc] {
        width: 5px;
        height: auto;
        flex: 0 0 5px;
        background-image:
            linear-gradient(var(--tile-accent, var(--accent-color)), var(--tile-accent, var(--accent-color)));
    }
    .club-tile-banner img[b-lx2if7eocc] { display: none; }

    .club-tile-body[b-lx2if7eocc] {
        padding: 0.7rem 0.85rem;
        row-gap: 0.5rem;
        column-gap: 0.7rem;
        grid-template-areas:
            "logo heading"
            "meta meta";
        align-content: center;
    }
    .club-tile-logo[b-lx2if7eocc] { width: 42px; height: 42px; border-radius: 10px; }
    .club-tile .club-tile-name[b-lx2if7eocc] { font-size: 0.95rem; }
    .club-tile-desc[b-lx2if7eocc] { display: none; }
    .club-tile-meta[b-lx2if7eocc] {
        padding-top: 0.5rem;
        gap: 0.3rem;
        font-size: 0.72rem;
    }
    .club-tile-meta-item[b-lx2if7eocc] { padding: 0.2rem 0.5rem; }
}
/* /Components/Pages/CreateArticle.razor.rz.scp.css */
/* Create article — the body is the page. Filing moved to the end; review is explained
   in a sidebar before you commit. */

.ca-page[b-yfz3fxxxiu] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem 6rem 1rem;
}

.ca-header[b-yfz3fxxxiu] {
    margin: 0.5rem 0 1rem 0;
}

.ca-title[b-yfz3fxxxiu] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.ca-subtitle[b-yfz3fxxxiu] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Review explained before committing, not after */
.ca-review-banner[b-yfz3fxxxiu] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.ca-review-banner i[b-yfz3fxxxiu] {
    color: var(--accent-color);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ca-layout[b-yfz3fxxxiu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}

.ca-main[b-yfz3fxxxiu] {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
}

/* Oversized headline field sitting above the body */
.ca-main[b-yfz3fxxxiu]  .ca-headline {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    padding: 0.6rem 0.85rem;
    height: auto;
}

/* The editor at reading size and in a serif face — this is the writing surface, not a field */
.ca-body-head[b-yfz3fxxxiu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.ca-readtime[b-yfz3fxxxiu] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.ca-body[b-yfz3fxxxiu]  .ql-editor {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* The formatting toolbar scrolls sideways rather than wrapping onto a second row and
   pushing the text down. */
.ca-body[b-yfz3fxxxiu]  .ql-toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ca-card[b-yfz3fxxxiu] {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    padding: 1.1rem;
}

.ca-card-title[b-yfz3fxxxiu] {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ca-card-hint[b-yfz3fxxxiu] {
    margin: 0 0 0.85rem 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Rail ───────────────────────────────────────────────────────────── */
.ca-rail[b-yfz3fxxxiu] {
    min-width: 0;
}

.ca-rail-sticky[b-yfz3fxxxiu] {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.ca-pipeline[b-yfz3fxxxiu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.ca-pipeline li[b-yfz3fxxxiu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    position: relative;
}

.ca-pipeline-dot[b-yfz3fxxxiu] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.ca-pipeline li.current[b-yfz3fxxxiu] {
    color: var(--text-primary);
    font-weight: 600;
}

.ca-pipeline li.current .ca-pipeline-dot[b-yfz3fxxxiu] {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.ca-pipeline li.alt[b-yfz3fxxxiu] {
    font-style: italic;
}

.ca-allowance[b-yfz3fxxxiu] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.ca-allowance i[b-yfz3fxxxiu] {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

/* ── Commit bar ─────────────────────────────────────────────────────── */
/* Save draft is a quiet outline button that keeps the weight on Submit; both used to be
   the same visual weight. */
.ca-commit[b-yfz3fxxxiu] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.10);
}

/* ::deep because ValidationSummary renders the <ul> itself and it never carries this component's
   scope attribute; .ca-commit is the wrapper this component does write. The class replaces
   validation-errors on that <ul>, so .ca-commit-errors IS the list — the indent belongs here, not
   on a descendant `ul` that does not exist. */
.ca-commit[b-yfz3fxxxiu]  .ca-commit-errors {
    margin: 0;
    font-size: 0.8rem;
    padding-left: 1.1rem;
}

.ca-commit-actions[b-yfz3fxxxiu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ca-layout[b-yfz3fxxxiu] {
        grid-template-columns: 1fr;
    }
    .ca-rail-sticky[b-yfz3fxxxiu] {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .ca-main[b-yfz3fxxxiu]  .ca-headline {
        font-size: 1.25rem;
    }
    .ca-commit[b-yfz3fxxxiu] {
        bottom: calc(56px + env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
    }
    .ca-commit-actions[b-yfz3fxxxiu] {
        margin-left: 0;
        justify-content: stretch;
    }
    .ca-commit-actions .btn[b-yfz3fxxxiu] {
        flex: 1;
    }
    .ca-page[b-yfz3fxxxiu] {
        padding-bottom: 9rem;
    }
}
/* /Components/Pages/CreateEvent.razor.rz.scp.css */
/* Create event — six section cards, a live preview rail and a sticky commit bar.
   Replaces one flat col-md-8 of thirteen ungrouped controls beside an empty col-md-4. */

.ce-page[b-72i851s76d] {
    padding-bottom: 6rem; /* clears the sticky commit bar */
}

/* ── Header ─────────────────────────────────────────────────────────── */
.ce-header[b-72i851s76d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1.25rem 0;
}

.ce-title[b-72i851s76d] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.ce-subtitle[b-72i851s76d] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 52ch;
}

/* Hosting-as is page context, not one of the form's questions */
.ce-hosting[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}

.ce-hosting-label[b-72i851s76d] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

.ce-hosting-switch[b-72i851s76d] {
    border: 0;
    background: transparent;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.ce-layout[b-72i851s76d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

.ce-main[b-72i851s76d] {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

/* The section cards live inside EditForm, which renders the <form>. CSS isolation only stamps
   the scope attribute onto elements written in this file, so a plain `.ce-main form` selector
   compiles to `form[b-xxxx]` and matches nothing — the form belongs to a child component. The
   rule was here and silently inert, which is why every section card sat flush against the next.
   ::deep moves the scope onto the ancestor and lets this reach the child's element. */
.ce-main[b-72i851s76d]  form {
    display: grid;
    gap: 1rem;
}

/* ── Section cards ──────────────────────────────────────────────────── */
.ce-section[b-72i851s76d] {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    overflow: hidden;
}

.ce-section-head[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
}

.ce-section-head h2[b-72i851s76d] {
    margin: 0;
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ce-step[b-72i851s76d] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.20);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ce-section.is-ready .ce-step[b-72i851s76d] {
    background: var(--accent-color);
    color: #ffffff;
}

.ce-section-mark i[b-72i851s76d] {
    font-size: 1.05rem;
    color: var(--text-muted);
}

.ce-section.is-ready .ce-section-mark i[b-72i851s76d] {
    color: #16a34a;
}

.ce-section-body[b-72i851s76d] {
    padding: 1.1rem;
}

.ce-field-row[b-72i851s76d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

/* ── "Goes live" segmented control ──────────────────────────────────── */
.ce-golive[b-72i851s76d] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.ce-segmented[b-72i851s76d] {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.ce-segmented button[b-72i851s76d] {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.ce-segmented button.active[b-72i851s76d] {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

/* ── Pinned-coordinates chip ────────────────────────────────────────── */
.ce-pinned[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: #15803d;
    font-size: 0.85rem;
}

[data-theme="dark"] .ce-pinned[b-72i851s76d] {
    color: #4ade80;
}

.ce-pinned-adjust[b-72i851s76d] {
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: underline;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

/* ── Visibility option cards ────────────────────────────────────────── */
.ce-options[b-72i851s76d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ce-option[b-72i851s76d] {
    display: grid;
    gap: 0.25rem;
    text-align: left;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ce-option:hover[b-72i851s76d] {
    border-color: var(--accent-color);
}

.ce-option.active[b-72i851s76d] {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.08);
}

.ce-option > i[b-72i851s76d] {
    font-size: 1.15rem;
    color: var(--accent-color);
}

.ce-option-title[b-72i851s76d] {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.ce-option-desc[b-72i851s76d] {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Tag chips ──────────────────────────────────────────────────────── */
.ce-tag-chips[b-72i851s76d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.ce-tag-chip[b-72i851s76d] {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-muted);
}

/* ── Preview rail ───────────────────────────────────────────────────── */
.ce-rail[b-72i851s76d] {
    min-width: 0;
}

.ce-rail-sticky[b-72i851s76d] {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.ce-preview-label[b-72i851s76d] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.ce-preview-card[b-72i851s76d] {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ce-preview-media[b-72i851s76d] {
    position: relative;
    aspect-ratio: 16 / 10;
    background: rgba(148, 163, 184, 0.16);
}

.ce-preview-media img[b-72i851s76d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ce-preview-media-empty[b-72i851s76d] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.75rem;
}

.ce-preview-badge[b-72i851s76d] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
}

.ce-preview-body[b-72i851s76d] {
    padding: 0.85rem 1rem 1rem 1rem;
}

.ce-preview-title[b-72i851s76d] {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ce-preview-meta[b-72i851s76d] {
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ce-preview-meta i[b-72i851s76d] {
    margin-right: 0.3rem;
}

.ce-preview-host[b-72i851s76d] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Checklist ──────────────────────────────────────────────────────── */
.ce-checklist ul[b-72i851s76d] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.ce-checklist li[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ce-checklist li i[b-72i851s76d] {
    color: var(--text-muted);
}

.ce-checklist li.done[b-72i851s76d] {
    color: var(--text-primary);
}

.ce-checklist li.done i[b-72i851s76d] {
    color: #16a34a;
}

/* ── Sticky commit bar ──────────────────────────────────────────────── */
.ce-commit[b-72i851s76d] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.10);
}

.ce-commit-status[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ce-commit-quota[b-72i851s76d]::before {
    content: "·";
    margin-right: 0.6rem;
}

.ce-commit-actions[b-72i851s76d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Errors surface once, beside the button — not only at the top of a form you scrolled past.
   ::deep because ValidationSummary renders the <ul> itself, so it never carries this component's
   scope attribute; .ce-commit-actions is the wrapper this component does write. The padding sits
   on the same rule rather than a descendant `ul`: the class replaces validation-errors on the
   <ul> itself, so .ce-commit-errors IS the list — there is no inner ul to indent. */
.ce-commit-actions[b-72i851s76d]  .ce-commit-errors {
    margin: 0;
    font-size: 0.8rem;
    padding-left: 1.1rem;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ce-layout[b-72i851s76d] {
        grid-template-columns: 1fr;
    }
    /* On a narrow screen the preview goes first: you check it, then scroll down to edit. */
    .ce-rail[b-72i851s76d] {
        order: -1;
    }
    .ce-rail-sticky[b-72i851s76d] {
        position: static;
    }
    .ce-checklist[b-72i851s76d] {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ce-field-row[b-72i851s76d],
    .ce-options[b-72i851s76d] {
        grid-template-columns: 1fr;
    }
    .ce-segmented[b-72i851s76d] {
        display: flex;
        width: 100%;
    }
    .ce-segmented button[b-72i851s76d] {
        flex: 1;
    }
    .ce-commit[b-72i851s76d] {
        /* Sits above the 56px bottom nav */
        bottom: calc(56px + env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
    }
    .ce-commit-actions[b-72i851s76d] {
        justify-content: stretch;
    }
    .ce-commit-actions .btn[b-72i851s76d] {
        flex: 1;
    }
    .ce-page[b-72i851s76d] {
        padding-bottom: 9rem;
    }
}
/* /Components/Pages/EventDetails.razor.rz.scp.css */
/* EventDetails.razor.css — scoped styles for the redesigned event page.

   The page used to ship 19 lines of CSS (a responsive map height) and lean on
   Bootstrap defaults, which is why it read as a stack of identical cards. This
   file carries the same design language as ClubPage.razor.css: local --ev-*
   tokens, flat cards with a 1px hairline, one shadow (the Manage menu), and a
   [data-theme="dark"] block — app styles key off data-theme. <html> also carries
   data-bs-theme, but that one is Bootstrap's own colour-mode hook, not ours.

   Scoped CSS does not reach into child components, so CommentSection carries
   its own CommentSection.razor.css and EventImageGallery keeps the CSS it
   already had. */

.event-page[b-nomolynvpq] {
    --ev-ink: #14171a;
    --ev-muted: #6b7480;
    --ev-faint: #8b949f;
    --ev-line: #e3e6ea;
    --ev-line-soft: #f0f2f4;
    --ev-surface: #fff;
    --ev-soft: #fafbfc;
    --ev-track: #eaecf0;
    --ev-warn-bg: #fff4e8;
    --ev-warn-line: #ffdcb8;
    --ev-warn-ink: #96551a;
    --ev-tint-bg: #f0f7fe;
    --ev-tint-line: #d9e9fb;
    --ev-tint-ink: #1668a8;
    --ev-danger-ink: #a03228;
    color: var(--ev-ink);
}

/* ── Hero ───────────────────────────────────────────────────────────────
   Lead photo, title, host and status badges. Back / Share / Manage are light
   chrome over the image instead of six coloured buttons above the headline. */

.ev-hero[b-nomolynvpq] {
    position: relative;
    min-height: 360px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: #cfd4d9;
    display: flex;
    flex-direction: column;
}

.ev-hero--placeholder[b-nomolynvpq] {
    background-image: repeating-linear-gradient(135deg, #c9ced4, #c9ced4 12px, #d3d8dd 12px, #d3d8dd 24px);
}

.ev-hero-veil[b-nomolynvpq] {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(to top, rgba(12, 14, 16, .86) 0%, rgba(12, 14, 16, .2) 58%, rgba(12, 14, 16, .34) 100%);
}

.ev-hero-chrome[b-nomolynvpq] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
}

.ev-hero-tools[b-nomolynvpq] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.ev-chip[b-nomolynvpq] {
    background: rgba(12, 14, 16, .5);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.ev-chip:hover[b-nomolynvpq],
.ev-chip:focus-visible[b-nomolynvpq] {
    background: rgba(12, 14, 16, .72);
    color: #fff;
}

.ev-chip-caret[b-nomolynvpq] {
    font-size: .7rem;
    opacity: .75;
}

.ev-hero-body[b-nomolynvpq] {
    position: relative;
    z-index: 1;
    margin-top: auto;
    /* Clears the facts strip that straddles the hero's bottom edge. */
    padding: 0 22px 72px;
}

.ev-hero-badges[b-nomolynvpq] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px;
}

.ev-badge[b-nomolynvpq] {
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ev-badge--featured[b-nomolynvpq] {
    background: #ffc107;
    color: #14171a;
}

.ev-badge--light[b-nomolynvpq] {
    background: rgba(255, 255, 255, .92);
    color: #14171a;
}

.ev-badge--muted[b-nomolynvpq] {
    background: rgba(12, 14, 16, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
}

/* Clamped to three lines so a long title can never reach the hero chrome. */
.ev-hero-title[b-nomolynvpq] {
    margin: 0;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    max-width: 820px;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-hero-host[b-nomolynvpq] {
    margin-top: 14px;
}

.ev-hero-host-link[b-nomolynvpq] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .92);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
}

.ev-hero-host-link:hover[b-nomolynvpq] {
    color: #fff;
}

.ev-host-avatar[b-nomolynvpq] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--accent-color, #2196F3);
}

.ev-host-avatar--initial[b-nomolynvpq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ── Manage menu (pure Blazor state — no Bootstrap JS dependency) ───────── */

.ev-manage[b-nomolynvpq] {
    position: relative;
}

/* Invisible full-viewport catcher: any outside click closes the menu. Sits
   under the menu (29 vs 30) so menu clicks still land. */
.ev-manage-backdrop[b-nomolynvpq] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.ev-manage-menu[b-nomolynvpq] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 23, 26, .14);
    padding: 6px;
    z-index: 30;
}

.ev-manage-menu button[b-nomolynvpq],
.ev-manage-menu a[b-nomolynvpq] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ev-ink);
    cursor: pointer;
    text-decoration: none;
}

.ev-manage-menu button:hover[b-nomolynvpq],
.ev-manage-menu a:hover[b-nomolynvpq] {
    background: var(--ev-soft);
    color: var(--ev-ink);
}

.ev-manage-menu i[b-nomolynvpq] {
    width: 16px;
    text-align: center;
    color: var(--ev-muted);
}

.ev-manage-menu hr[b-nomolynvpq] {
    margin: 5px 8px;
    border: none;
    border-top: 1px solid var(--ev-line-soft);
}

.ev-manage-menu .ev-menu-warn[b-nomolynvpq],
.ev-manage-menu .ev-menu-warn i[b-nomolynvpq] {
    color: var(--ev-warn-ink);
}

.ev-manage-menu .ev-menu-danger[b-nomolynvpq],
.ev-manage-menu .ev-menu-danger i[b-nomolynvpq] {
    color: var(--ev-danger-ink);
}

/* ── Facts strip ────────────────────────────────────────────────────────
   When / where / going, straddling the hero edge. The single most important
   thing on this page and it used to be inside a tab. */

.ev-facts[b-nomolynvpq] {
    position: relative;
    z-index: 5;
    margin: -32px 24px 0;
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(20, 23, 26, .06);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.ev-fact[b-nomolynvpq] {
    padding: 18px 22px;
    border-right: 1px solid var(--ev-line-soft);
    min-width: 0;
}

.ev-fact:last-child[b-nomolynvpq] {
    border-right: none;
}

.ev-eyebrow[b-nomolynvpq] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ev-faint);
    margin: 0 0 8px;
}

.ev-fact-value[b-nomolynvpq] {
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.ev-fact-sub[b-nomolynvpq] {
    font-size: 0.86rem;
    color: var(--ev-muted);
    margin-top: 4px;
}

.ev-fact-urgent[b-nomolynvpq] {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--ev-warn-ink);
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ev-fact-actions[b-nomolynvpq] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.ev-link[b-nomolynvpq] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-color, #2196F3);
    font-weight: 650;
    font-size: 0.83rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ev-link:hover[b-nomolynvpq] {
    text-decoration: underline;
}

.ev-meter[b-nomolynvpq] {
    height: 6px;
    background: var(--ev-track);
    border-radius: 3px;
    margin-top: 9px;
    overflow: hidden;
}

.ev-meter span[b-nomolynvpq] {
    display: block;
    height: 100%;
    background: var(--accent-color, #2196F3);
    border-radius: 3px;
}

/* ── Two-column body ────────────────────────────────────────────────────
   The rail folds under the main column rather than disappearing. */

.ev-layout[b-nomolynvpq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}

.ev-main[b-nomolynvpq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Deliberately NOT sticky. The design's rail is, but this one carries RSVP,
   attendees, host, check-in and prev/next — taller than a short viewport, and a
   sticky block taller than the viewport pins its top and makes its bottom
   unreachable until the main column ends. */
.ev-aside[b-nomolynvpq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ev-card[b-nomolynvpq] {
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 14px;
}

.ev-card--pad[b-nomolynvpq] {
    padding: 18px 20px;
}

.ev-card--map[b-nomolynvpq] {
    overflow: hidden;
}

.ev-card-head[b-nomolynvpq] {
    padding: 18px 20px 12px;
}

.ev-card-foot[b-nomolynvpq] {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ev-card-foot .ev-btn[b-nomolynvpq] {
    margin-left: auto;
}

.ev-card h2.ev-eyebrow[b-nomolynvpq],
.ev-card h3.ev-eyebrow[b-nomolynvpq] {
    margin: 0 0 10px;
}

/* ── Buttons ────────────────────────────────────────────────────────────
   Same shape language as the club page's .cp-btn family. */

.ev-btn[b-nomolynvpq] {
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.87rem;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .12s ease, border-color .12s ease;
}

.ev-btn:disabled[b-nomolynvpq] {
    opacity: .6;
    cursor: default;
}

.ev-btn--block[b-nomolynvpq] {
    display: flex;
    width: 100%;
}

.ev-btn--primary[b-nomolynvpq] {
    background: var(--accent-color, #2196F3);
    border-color: var(--accent-color, #2196F3);
    color: #fff;
    font-weight: 700;
    padding: 0.65rem 1.35rem;
}

.ev-btn--primary:hover[b-nomolynvpq] {
    filter: brightness(.92);
    color: #fff;
}

.ev-btn--outline[b-nomolynvpq] {
    background: var(--ev-surface);
    border-color: #d5dae0;
    color: var(--ev-ink);
}

.ev-btn--outline:hover[b-nomolynvpq] {
    background: var(--ev-soft);
    border-color: #c2c9d1;
    color: var(--ev-ink);
}

.ev-btn--quiet[b-nomolynvpq] {
    background: var(--ev-track);
    border-color: var(--ev-line);
    color: var(--ev-muted);
}

/* You're going — a flat confirmation fill, never a shadow. */
.ev-btn--going[b-nomolynvpq] {
    background: #eef7ef;
    border-color: #cfe6d1;
    color: #1f5c23;
    font-weight: 700;
    padding: 0.65rem 1.35rem;
}

.ev-btn--going:hover[b-nomolynvpq] {
    background: #e2f0e4;
    color: #1f5c23;
}

/* ── RSVP card ──────────────────────────────────────────────────────────
   Below md the button here is hidden: the sticky .mobile-action-bar already
   carries it, and two competing RSVP buttons would be worse than one. */

.ev-rsvp-secondary[b-nomolynvpq] {
    display: flex;
    gap: 9px;
    margin-top: 11px;
}

.ev-rsvp-secondary .ev-btn[b-nomolynvpq] {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Announcements ──────────────────────────────────────────────────────
   Rendered only when there is something to announce. */

.ev-composer[b-nomolynvpq] {
    background: var(--ev-soft);
    border: 1px solid var(--ev-line-soft);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.ev-update[b-nomolynvpq] {
    border-left: 2px solid var(--accent-color, #2196F3);
    padding-left: 14px;
}

.ev-update + .ev-update[b-nomolynvpq] {
    margin-top: 16px;
}

.ev-update-head[b-nomolynvpq] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ev-update-when[b-nomolynvpq] {
    font-size: 0.78rem;
    color: var(--ev-faint);
    white-space: nowrap;
}

.ev-update-body[b-nomolynvpq] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ev-muted);
    margin: 5px 0 0;
}

.ev-update-by[b-nomolynvpq] {
    font-size: 0.78rem;
    color: var(--ev-faint);
}

/* ── About ──────────────────────────────────────────────────────────────── */

.ev-prose[b-nomolynvpq] {
    font-size: 0.95rem;
    line-height: 1.68;
    color: var(--ev-muted);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.ev-tags[b-nomolynvpq] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
}

.ev-tag[b-nomolynvpq] {
    background: var(--ev-line-soft);
    border-radius: 999px;
    padding: 0.26rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ev-muted);
}

/* ── Map ────────────────────────────────────────────────────────────────
   MOB-001: responsive map height. The map is an inline section now, so this
   container is always laid out — no zero-height init behind a hidden tab. */

.event-map[b-nomolynvpq] {
    width: 100%;
    height: 220px;
    background: var(--ev-track);
}

@media (min-width: 576px) {
    .event-map[b-nomolynvpq] {
        height: 300px;
    }
}

/* MOB-006: landscape orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .event-map[b-nomolynvpq] {
        height: 180px;
    }
}

/* ── Reviews ────────────────────────────────────────────────────────────── */

/* The rating now lives in the public facts strip rather than inside the
   organiser-only reviews card, so it is styled as a fact value. */
.ev-rating-value[b-nomolynvpq] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ev-rating-value .bi-star-fill[b-nomolynvpq] {
    color: #ffc107;
    font-size: 0.9em;
}

.ev-rating-outof[b-nomolynvpq] {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--text-muted);
}

.ev-review[b-nomolynvpq] {
    padding: 12px 0;
    border-top: 1px solid var(--ev-line-soft);
}

.ev-review.is-flagged[b-nomolynvpq] {
    border-left: 3px solid var(--ev-warn-line);
    padding-left: 10px;
}

.ev-review-head[b-nomolynvpq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Attendees ──────────────────────────────────────────────────────────
   The card finally shows who is going instead of only how many. */

.ev-attendees[b-nomolynvpq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ev-avatars[b-nomolynvpq] {
    display: flex;
    flex-shrink: 0;
}

.ev-avatar[b-nomolynvpq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ev-track);
    color: #5b6470;
    font-size: 0.74rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ev-surface);
    flex-shrink: 0;
}

.ev-avatar + .ev-avatar[b-nomolynvpq] {
    margin-left: -9px;
}

.ev-note[b-nomolynvpq] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ev-tint-bg);
    border: 1px solid var(--ev-tint-line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--ev-tint-ink);
}

.ev-note i[b-nomolynvpq] {
    flex-shrink: 0;
}

/* ── Hosted by / check-in ───────────────────────────────────────────────── */

.ev-host-row[b-nomolynvpq] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ev-host-tile[b-nomolynvpq] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--accent-color, #2196F3);
}

.ev-host-tile--initial[b-nomolynvpq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.ev-host-name[b-nomolynvpq] {
    font-weight: 700;
    font-size: 0.92rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ev-checkin-count[b-nomolynvpq] {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.ev-checkin-count strong[b-nomolynvpq] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ev-checkin-count .ev-fact-sub[b-nomolynvpq] {
    margin-top: 0;
}

/* ── Prev / next ────────────────────────────────────────────────────────
   Named, so there is a reason to press either one. */

.ev-neighbours[b-nomolynvpq] {
    display: flex;
    gap: 10px;
}

.ev-neighbour[b-nomolynvpq] {
    flex: 1 1 0;
    min-width: 0;
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 12px;
    padding: 11px 13px;
    text-decoration: none;
    color: var(--ev-ink);
    display: block;
}

.ev-neighbour:hover[b-nomolynvpq] {
    border-color: #c2c9d1;
    background: var(--ev-soft);
    color: var(--ev-ink);
}

.ev-neighbour--next[b-nomolynvpq] {
    text-align: right;
}

.ev-neighbour .ev-eyebrow[b-nomolynvpq] {
    display: block;
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: .1em;
}

.ev-neighbour-title[b-nomolynvpq] {
    display: block;
    font-size: 0.82rem;
    font-weight: 650;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Dark mode ──────────────────────────────────────────────────────────
   NOTE: <html> carries both data-theme and data-bs-theme. App styles target
   data-theme; data-bs-theme is Bootstrap's own colour-mode hook. */

[data-theme="dark"] .event-page[b-nomolynvpq] {
    --ev-ink: #e8eaed;
    --ev-muted: #a3acb6;
    --ev-faint: #8b949f;
    --ev-line: #2c3238;
    --ev-line-soft: #23282d;
    --ev-surface: #1b1f23;
    --ev-soft: #191d21;
    --ev-track: #24292e;
    --ev-warn-bg: #3a2c10;
    --ev-warn-line: #5c471c;
    --ev-warn-ink: #f0c473;
    --ev-tint-bg: #16243a;
    --ev-tint-line: #24405f;
    --ev-tint-ink: #9ccbf5;
    --ev-danger-ink: #e88a80;
}

[data-theme="dark"] .ev-hero[b-nomolynvpq] {
    background-color: #23282d;
}

[data-theme="dark"] .ev-hero--placeholder[b-nomolynvpq] {
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 12px, #2b3137 12px, #2b3137 24px);
}

[data-theme="dark"] .ev-btn--outline[b-nomolynvpq] {
    background: #23282d;
    border-color: #2c3238;
    color: #d3d8de;
}

[data-theme="dark"] .ev-btn--outline:hover[b-nomolynvpq] {
    background: #2b3137;
    border-color: #363d44;
    color: #fff;
}

[data-theme="dark"] .ev-btn--going[b-nomolynvpq] {
    background: #1a2e1d;
    border-color: #2c4a30;
    color: #9fd8a6;
}

[data-theme="dark"] .ev-btn--going:hover[b-nomolynvpq] {
    background: #204025;
    color: #b5e3bb;
}

[data-theme="dark"] .ev-avatar[b-nomolynvpq] {
    color: #c8ced6;
}

[data-theme="dark"] .ev-neighbour:hover[b-nomolynvpq] {
    border-color: #363d44;
}

[data-theme="dark"] .ev-facts[b-nomolynvpq] {
    box-shadow: none;
}

/* ══ Mobile ═════════════════════════════════════════════════════════════
   Fits the design to the chrome the app already has: a 56px .bottom-nav plus
   the .mobile-action-bar that app.css lifts above it. Nothing here hardcodes
   those heights beyond the clearance budget. */

@media (max-width: 991.98px) {
    /* The rail folds under the main content rather than disappearing. */
    .ev-layout[b-nomolynvpq] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    /* Clear the permanent bottom chrome (~56px nav + ~52px action bar) so the
       last card is never trapped behind it. Same clearance ClubPage uses. */
    .event-page[b-nomolynvpq] {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    .ev-hero[b-nomolynvpq] {
        min-height: 240px;
        border-radius: 14px;
    }

    .ev-hero-veil[b-nomolynvpq] {
        border-radius: 14px;
    }

    .ev-hero-chrome[b-nomolynvpq] {
        padding: 10px 12px;
    }

    .ev-chip[b-nomolynvpq] {
        min-height: 44px;
        padding: 0.5rem 0.8rem;
    }

    .ev-hero-body[b-nomolynvpq] {
        padding: 0 14px 56px;
    }

    .ev-hero-title[b-nomolynvpq] {
        font-size: 1.42rem;
        letter-spacing: -0.025em;
        line-height: 1.18;
    }

    .ev-manage-menu[b-nomolynvpq] {
        width: min(280px, calc(100vw - 32px));
    }

    .ev-manage-menu button[b-nomolynvpq],
    .ev-manage-menu a[b-nomolynvpq] {
        min-height: 44px;
    }

    /* One column, rows separated by a rule rather than a column border. */
    .ev-facts[b-nomolynvpq] {
        margin: -24px 10px 0;
        grid-template-columns: minmax(0, 1fr);
        border-radius: 13px;
    }

    .ev-fact[b-nomolynvpq] {
        padding: 13px 14px;
        border-right: none;
        border-bottom: 1px solid var(--ev-line-soft);
    }

    .ev-fact:last-child[b-nomolynvpq] {
        border-bottom: none;
    }

    .ev-fact-actions[b-nomolynvpq] {
        gap: 16px;
    }

    .ev-link[b-nomolynvpq] {
        min-height: 44px;
        align-items: center;
    }

    .ev-layout[b-nomolynvpq] {
        margin-top: 16px;
    }

    .ev-card--pad[b-nomolynvpq] {
        padding: 14px;
    }

    .ev-card-head[b-nomolynvpq] {
        padding: 14px 14px 10px;
    }

    .ev-card-foot[b-nomolynvpq] {
        padding: 12px 14px;
    }

    .ev-card-foot .ev-btn[b-nomolynvpq] {
        min-height: 44px;
    }

    /* RSVP lives in the fixed action bar at this width. */
    .ev-rsvp-desktop[b-nomolynvpq] {
        display: none;
    }

    .ev-rsvp-secondary[b-nomolynvpq] {
        margin-top: 0;
    }

    .ev-rsvp-secondary .ev-btn[b-nomolynvpq] {
        min-height: 44px;
    }

    .ev-neighbour[b-nomolynvpq] {
        min-height: 56px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero-section[b-qcrksldz1i] {
    position: relative;
    width: 100%;
    height: calc(100vh - 5.7rem);
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    border-radius: 1.25rem;
    background-color: #000;
}

.hero-video[b-qcrksldz1i] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    background-color: #000;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    pointer-events: none;
}

/* The hero buttons sit above (.hero-content has higher z-index) so this still
   doesn't block them. We need pointer events to flow to the document for the
   touchstart/click "first user gesture" fallback that nudges play() when iOS
   Low Power Mode or strict autoplay policies block the autoplay attribute. */
.hero-section[b-qcrksldz1i] {
    cursor: default;
}

/* iOS Safari/Chrome show a native "start playback" button overlay on <video>
   even when muted+playsinline+autoplay are set, especially before the play()
   promise resolves. Hide it — the video is decorative and never user-controlled. */
.hero-video[b-qcrksldz1i]::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
.hero-video[b-qcrksldz1i]::-webkit-media-controls {
    display: none !important;
}

/* Subtle play indicator shown when autoplay was blocked (iOS Low Power Mode,
   Safari Auto-Play=Never, low Media Engagement Score, etc). Sits in the bottom
   right corner so it doesn't cover the hero title or buttons. The whole hero
   section is the actual click target (.hero-section[data-paused] cursor) — the
   chip is just a visual hint that tapping will start playback. */
.hero-play-btn[b-qcrksldz1i] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.25s ease, transform 0.15s ease, background 0.2s ease;
    opacity: 0.85;
    pointer-events: auto;
}
.hero-play-btn[hidden][b-qcrksldz1i] { display: none; }
.hero-play-btn:hover[b-qcrksldz1i] { background: rgba(0, 0, 0, 0.7); opacity: 1; }
.hero-play-btn:active[b-qcrksldz1i] { transform: scale(0.92); }
.hero-play-btn i[b-qcrksldz1i] { display: block; }

/* When video is paused/blocked, make the entire hero section a click target so
   users can tap anywhere (not just the small chip) to start playback. The hint
   chip remains as a visual indicator. The pointer cursor is only applied when
   the video is paused (data attribute set by JS). */
.hero-section[data-paused="1"][b-qcrksldz1i] { cursor: pointer; }

.hero-overlay[b-qcrksldz1i] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

.hero-content[b-qcrksldz1i] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    padding: 2rem;
}

.hero-title[b-qcrksldz1i] {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    /* Not uppercased: the brand is written "Terminalo Sargas", and shouting it also cost the
       descenders and word shape that make a two-word name readable at a glance. */
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;
}

.hero-subtitle[b-qcrksldz1i] {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    opacity: 0.9;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-buttons[b-qcrksldz1i] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn[b-qcrksldz1i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    letter-spacing: 0.5px;
}

.hero-btn:hover[b-qcrksldz1i] {
    background: #ffffff;
    color: #1a1a2e;
}

.hero-btn-secondary[b-qcrksldz1i] {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
}

.hero-btn-secondary:hover[b-qcrksldz1i] {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .hero-section[b-qcrksldz1i] {
        min-height: 420px;
        height: calc(100vh - 2.2rem);
        border-radius: 0.75rem;
    }

    .hero-content[b-qcrksldz1i] {
        padding: 1.25rem;
    }

    .hero-buttons[b-qcrksldz1i] {
        gap: 0.75rem;
    }

    .hero-btn[b-qcrksldz1i] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/MapView.razor.rz.scp.css */
/* MapView.razor.css — scoped styles for the redesigned map page.

   Two structural rules this file exists to hold:

   1. The map area gets an EXPLICIT height. Every child of it is absolutely
      positioned, so the box has no intrinsic height and cannot be sized by
      flex-grow against an auto-height parent — it collapses to 0 and the bottom
      nav ends up painted at the top of the screen. The height is expressed in
      dvh, never vh, so iOS Safari's collapsing toolbar cannot change it mid-scroll.
   2. The footer is hidden by exactly ONE mechanism, the
      `article:has(.mapview-fullscreen) ~ footer` rule in app.css. The
      `margin-bottom: -100px` that used to duplicate it here is gone.

   Colours come from the app's existing custom properties so dark mode works.
   NOTE: <html> carries both data-theme and data-bs-theme. App styles target
   data-theme; data-bs-theme is Bootstrap's own colour-mode hook. */

.mapview-fullscreen[b-7gs47s7gfh] {
    /* Local tokens, so every surface on this page moves together. */
    --mv-surface: var(--card-bg, #fff);
    --mv-ink: var(--text-primary, #212529);
    --mv-muted: var(--text-muted, #6c757d);
    --mv-line: var(--border-color, #dee2e6);
    --mv-soft: var(--bg-secondary, #f8f9fa);
    /* One source for the map's own height — the island caps itself against it. */
    --mv-height: calc(100dvh - 3.5rem);

    position: relative;
    /* Break out of article.content's horizontal padding. --content-pad-x (app.css
       :root) tracks that padding at every breakpoint, so this can no longer drift
       out of sync the way the hard-coded -1.5rem did on mobile. */
    margin-left: calc(-1 * var(--content-pad-x, 1.5rem));
    margin-right: calc(-1 * var(--content-pad-x, 1.5rem));
    /* Consume the .content padding-top (1.1rem) */
    margin-top: -1.1rem;
    height: var(--mv-height);
    overflow: hidden;
    color: var(--mv-ink);
}

.mapview-loading[b-7gs47s7gfh] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Map fills the entire container */
.map-container[b-7gs47s7gfh] {
    width: 100%;
    height: 100%;
}

/* --- Map controls: search-this-area + date chips ---------------------------
   Pinned top-LEFT, deliberately opposite the island. .mapview-island is
   z-index 10, so anything floated at the same height on the right sits under it. */
.mapview-controls[b-7gs47s7gfh] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    /* 340px island + its 12px inset + a 12px gutter each side */
    max-width: calc(100% - 376px);
}

.mapview-area-row[b-7gs47s7gfh] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mapview-pill[b-7gs47s7gfh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--mv-line);
    background: var(--mv-surface);
    color: var(--mv-ink);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease;
}

.mapview-pill:hover:not(:disabled)[b-7gs47s7gfh] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.mapview-pill:disabled[b-7gs47s7gfh] {
    opacity: 0.7;
    cursor: default;
}

.mapview-pill--quiet[b-7gs47s7gfh] {
    font-weight: 500;
    color: var(--mv-muted);
}

.mapview-chips[b-7gs47s7gfh] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Date chips are the primary filter on this screen. They are NOT .btn-sm pills —
   that lands near 36px on a phone, below every other control here. See the mobile
   block, where they are raised to 44px. */
.mapview-chip[b-7gs47s7gfh] {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 20px;
    border: 1px solid var(--mv-surface);
    background: var(--mv-surface);
    color: var(--mv-ink);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mapview-chip:hover:not(.active)[b-7gs47s7gfh] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.mapview-chip.active[b-7gs47s7gfh] {
    background: var(--accent-color, #2196F3);
    border-color: var(--accent-color, #2196F3);
    color: #fff;
}

/* --- Floating island ------------------------------------------------------- */
.mapview-island-wrap[b-7gs47s7gfh] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 340px;
}

/* The locate button is a child of the island WRAPPER, anchored to the card rather
   than to the viewport, so it tracks the island's real height at any row count.
   Anchoring it to a percentage of the map body clears a collapsed island but lands
   on the date-chip row the moment the list opens. Phone only. */
.mapview-locate[b-7gs47s7gfh] {
    display: none;
    position: absolute;
    right: 3px;
    bottom: calc(100% + 12px);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--mv-line);
    background: var(--mv-surface);
    color: var(--mv-ink);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.mapview-island[b-7gs47s7gfh] {
    width: 100%;
    border-radius: 12px;
    background: var(--mv-surface);
    color: var(--mv-ink);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.mapview-island.open[b-7gs47s7gfh] {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* Header / toggle button */
.mapview-island-header[b-7gs47s7gfh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border: none;
    background: var(--mv-surface);
    color: var(--mv-ink);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 48px;
    width: 100%;
    text-align: left;
    border-radius: 12px;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.mapview-island.open .mapview-island-header[b-7gs47s7gfh] {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--mv-line);
}

.mapview-island-header:hover[b-7gs47s7gfh] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.mapview-island-title[b-7gs47s7gfh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* One chevron glyph, rotated. The island opens DOWNWARD on desktop (pinned top)
   and UPWARD on a phone (docked bottom), so the arrow has to mean opposite things. */
.mapview-chevron[b-7gs47s7gfh],
.mapview-disclosure-chevron[b-7gs47s7gfh] {
    transition: transform 0.2s ease;
    font-size: 0.8rem;
}

.mapview-island.open .mapview-chevron[b-7gs47s7gfh] {
    transform: rotate(180deg);
}

/* Expandable body */
.mapview-island-body[b-7gs47s7gfh] {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mapview-island.open .mapview-island-body[b-7gs47s7gfh] {
    /* Cap to the map container so the island can never clip past it on short
       viewports (reserve the 12px offset + header + breathing room). The max(0px, …)
       floor matters: a negative length here is invalid at computed-value time, which
       would reset max-height to `none` and let the island grow past the map. */
    max-height: max(0px, min(60dvh, calc(var(--mv-height) - 130px)));
}

/* --- Search inside the island ---------------------------------------------- */
.mapview-search-wrap[b-7gs47s7gfh] {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mv-line);
    flex-shrink: 0;
}

.mapview-search[b-7gs47s7gfh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0.75rem;
    min-height: 40px;
    border: 1px solid var(--mv-line);
    border-radius: 6px;
    background: var(--input-bg, #fff);
}

.mapview-search > .bi-search[b-7gs47s7gfh] {
    color: var(--mv-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mapview-search-input[b-7gs47s7gfh] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--mv-ink);
    font-size: 0.9rem;
    padding: 0;
}

/* Chrome's own search-cancel button would double up with ours. */
.mapview-search-input[b-7gs47s7gfh]::-webkit-search-cancel-button {
    display: none;
}

.mapview-search-clear[b-7gs47s7gfh] {
    border: none;
    background: none;
    color: var(--mv-muted);
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

/* Only the list scrolls; header and search stay put. */
.mapview-list[b-7gs47s7gfh] {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* --- Event rows ------------------------------------------------------------ */
.mapview-event-item[b-7gs47s7gfh] {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mv-line);
    border-left: 3px solid transparent;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.15s;
}

.mapview-event-item:hover[b-7gs47s7gfh] {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.mapview-event-item.active[b-7gs47s7gfh] {
    background: rgba(33, 150, 243, 0.12);
    border-left-color: var(--accent-color, #2196F3);
}

.mapview-row[b-7gs47s7gfh] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

/* The DTO already loads ImageUrl and AttendeeCount for the Mapbox popup; the rows
   used to ignore both. Showing them here costs no new query and no new field. */
.mapview-thumb[b-7gs47s7gfh] {
    width: 56px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
    background-color: #e6e9ed;
    background-image: repeating-linear-gradient(135deg, #dcdfe4, #dcdfe4 6px, #e6e9ed 6px, #e6e9ed 12px);
}

.mapview-row-text[b-7gs47s7gfh] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mapview-row-title[b-7gs47s7gfh] {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.mapview-row-meta[b-7gs47s7gfh] {
    font-size: 0.82rem;
    color: var(--mv-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.mapview-row-place[b-7gs47s7gfh] {
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

/* --- "Not on the map" disclosure ------------------------------------------- */
.mapview-disclosure[b-7gs47s7gfh] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-align: left;
    padding: 0.5rem 1rem;
    min-height: 44px;
    border: none;
    border-bottom: 1px solid var(--mv-line);
    background: var(--mv-soft);
    color: var(--mv-muted);
    font-weight: 700;
    cursor: pointer;
}

.mapview-disclosure small[b-7gs47s7gfh] {
    font-size: 0.875rem;
}

.mapview-disclosure-chevron[b-7gs47s7gfh] {
    margin-left: auto;
}

.mapview-disclosure[aria-expanded="true"] .mapview-disclosure-chevron[b-7gs47s7gfh] {
    transform: rotate(180deg);
}

.mapview-disclosure-body[b-7gs47s7gfh] {
    background: var(--mv-soft);
    border-bottom: 1px solid var(--mv-line);
    padding: 0.625rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mapview-disclosure-body > .mapview-row-meta[b-7gs47s7gfh] {
    line-height: 1.5;
    display: block;
}

.mapview-nocoord-row[b-7gs47s7gfh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

.mapview-nocoord-row:hover .mapview-row-title[b-7gs47s7gfh] {
    text-decoration: underline;
}

/* Cap notice / empty-filter notice */
.mapview-note[b-7gs47s7gfh] {
    padding: 0.75rem 1rem;
    color: var(--mv-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    border-bottom: 1px solid var(--mv-line);
}

/* --- Dark mode ------------------------------------------------------------- */
[data-theme="dark"] .mapview-thumb[b-7gs47s7gfh] {
    background-color: #23282d;
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 6px, #2b3137 6px, #2b3137 12px);
}

[data-theme="dark"] .mapview-event-item.active[b-7gs47s7gfh] {
    background: rgba(66, 165, 245, 0.18);
}

[data-theme="dark"] .mapview-chip[b-7gs47s7gfh],
[data-theme="dark"] .mapview-pill[b-7gs47s7gfh],
[data-theme="dark"] .mapview-locate[b-7gs47s7gfh] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- Mobile ----------------------------------------------------------------
   Fits the design to the chrome that already exists: a 56px .bottom-nav plus the
   safe-area inset. Nothing here hard-codes those numbers — they come from
   --bottom-nav-height / --shell-bottom-pad in app.css. */
@media (max-width: 767.98px) {
    .mapview-fullscreen[b-7gs47s7gfh] {
        /* .top-row is display:none at this width, so there is no 3.5rem topbar to
           subtract. <main> already reserves --shell-bottom-pad for the bottom nav;
           we additionally clear the home-indicator inset it does not account for. */
        --mv-height: calc(100dvh - var(--shell-bottom-pad, 64px) - env(safe-area-inset-bottom));
    }

    /* Search pill full width, chips in one horizontally scrolling row beneath it. */
    .mapview-controls[b-7gs47s7gfh] {
        top: 11px;
        left: 11px;
        right: 11px;
        max-width: none;
    }

    .mapview-area-row[b-7gs47s7gfh] {
        flex-wrap: nowrap;
        width: 100%;
    }

    .mapview-pill[b-7gs47s7gfh] {
        flex: 1;
        min-height: 44px;
        border-radius: 22px;
    }

    .mapview-pill--quiet[b-7gs47s7gfh] {
        flex: 0 0 auto;
    }

    .mapview-chips[b-7gs47s7gfh] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
        /* keep the last chip clear of the right edge while scrolled */
        padding-bottom: 2px;
    }

    .mapview-chips[b-7gs47s7gfh]::-webkit-scrollbar {
        display: none;
    }

    /* 44px, not Bootstrap's ~36px .btn-sm: these are the primary filter on this
       screen and every other control here (search pill, locate, island header,
       rows) already clears 44px. */
    .mapview-chip[b-7gs47s7gfh] {
        flex-shrink: 0;
        min-height: 44px;
        border-radius: 22px;
        padding: 0 15px;
    }

    /* The same island — same card, header, badge and rows — docked to the bottom
       edge and collapsed, so the map is visible on arrival and the list is
       reachable under the thumb. */
    .mapview-island-wrap[b-7gs47s7gfh] {
        top: auto;
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: auto;
    }

    .mapview-locate[b-7gs47s7gfh] {
        display: flex;
    }

    .mapview-chevron[b-7gs47s7gfh] {
        transform: rotate(180deg);
    }

    .mapview-island.open .mapview-chevron[b-7gs47s7gfh] {
        transform: rotate(0deg);
    }

    .mapview-island.open .mapview-island-body[b-7gs47s7gfh] {
        /* Reserve enough of the map for the search pill, the chip row and the locate
           button. The island is bottom-anchored, so this reserve is what puts its top
           edge — and therefore the locate button riding above it — clear of the chips:
           locate's top lands at (reserve - 112px) and the chip row ends at 110px. */
        max-height: max(0px, calc(var(--mv-height) - 240px));
    }

    /* Before the first-render viewport measurement lands, hold the island closed at
       this width so a phone never paints the map covered and then collapses it. The
       server cannot know the viewport, so the prerendered markup carries the desktop
       default and CSS overrides it until the measurement arrives. */
    /* Must carry the same specificity as the `.open` rule above (and follow it), or
       the open state wins and the guard silently does nothing. */
    .mapview-island--pending.open .mapview-island-body[b-7gs47s7gfh] {
        max-height: 0;
    }

    .mapview-island--pending.open .mapview-island-header[b-7gs47s7gfh] {
        border-radius: 12px;
        border-bottom: none;
    }

    .mapview-island--pending.open .mapview-chevron[b-7gs47s7gfh] {
        transform: rotate(180deg);
    }

    .mapview-search[b-7gs47s7gfh] {
        min-height: 44px;
    }

    /* Mapbox's own controls sit bottom-right, i.e. underneath the docked island
       (z-index 10). Drop the zoom/compass group — pinch and rotate are the native
       gestures here — and lift the attribution clear of the card. */
    [b-7gs47s7gfh] .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
        display: none;
    }

    /* 8px island inset + its 48px collapsed header + 8px breathing room. */
    [b-7gs47s7gfh] .mapboxgl-ctrl-bottom-right,
    [b-7gs47s7gfh] .mapboxgl-ctrl-bottom-left {
        bottom: 64px;
    }
}
/* /Components/Pages/News.razor.rz.scp.css */
/* News listing — editorial magazine layout */

.news-page[b-09dnml429u] {
    padding-top: 1.5rem;
    padding-bottom: 2rem;

    /* Local tokens for the few values that have no global var. Overridden for dark below. */
    --news-faint: #8b949f;
    --news-soft-border: #f0f2f4;
    --news-soft-surface: #fafbfc;
    --news-chip-news-bg: #f0f7fe;
    --news-chip-news-border: #d9e9fb;
    --news-chip-news-text: #1668a8;
    --news-chip-review-bg: #fff4e8;
    --news-chip-review-border: #ffdcb8;
    --news-chip-review-text: #96551a;
    --news-filter-idle-text: #5b6470;
    --news-filter-active-bg: #14171a;
    --news-filter-active-text: #ffffff;
}

[data-theme="dark"] .news-page[b-09dnml429u] {
    --news-faint: #98a1ad;
    --news-soft-border: rgba(255, 255, 255, 0.08);
    --news-soft-surface: rgba(255, 255, 255, 0.03);
    --news-chip-news-bg: #14304a;
    --news-chip-news-border: #1d4a70;
    --news-chip-news-text: #7fc0f5;
    --news-chip-review-bg: #3a2a17;
    --news-chip-review-border: #5c4222;
    --news-chip-review-text: #e8b07a;
    --news-filter-idle-text: #b6bdc7;
    --news-filter-active-bg: #e4e4e4;
    --news-filter-active-text: #14171a;
}

/* ---------- Header ---------- */
.news-header[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.75rem;
}

.news-header-top[b-09dnml429u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.news-headline[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.news-eyebrow[b-09dnml429u] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--accent-color);
}

.news-title[b-09dnml429u] {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.news-search[b-09dnml429u] {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin-top: 0;
}

.news-search-icon[b-09dnml429u] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--news-faint);
    pointer-events: none;
    line-height: 1;
}

.news-search-input[b-09dnml429u] {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.25rem;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: var(--tile-bg);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.4;
}

.news-search-input:focus[b-09dnml429u] {
    border-color: var(--accent-color);
    box-shadow: none;
    outline: none;
}

/* Filter row sits above the header rule. */
.news-filter-row[b-09dnml429u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.news-type-filters[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.type-filter[b-09dnml429u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--tile-bg);
    color: var(--news-filter-idle-text);
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.type-filter:hover[b-09dnml429u] {
    border-color: var(--news-faint);
    color: var(--text-primary);
}

.type-filter.active[b-09dnml429u] {
    background: var(--news-filter-active-bg);
    border-color: var(--news-filter-active-bg);
    color: var(--news-filter-active-text);
}

.type-filter-count[b-09dnml429u] {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.62;
}

.news-result-count[b-09dnml429u] {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--news-faint);
    white-space: nowrap;
}

/* ---------- Article type chips ---------- */
.type-chip[b-09dnml429u] {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.35;
    white-space: nowrap;
}

.type-chip-news[b-09dnml429u] {
    background: var(--news-chip-news-bg);
    border-color: var(--news-chip-news-border);
    color: var(--news-chip-news-text);
}

.type-chip-review[b-09dnml429u] {
    background: var(--news-chip-review-bg);
    border-color: var(--news-chip-review-border);
    color: var(--news-chip-review-text);
}

.story-type-row[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.story-tag-row[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.55rem;
}

/* ---------- Hero story ---------- */
.hero-story[b-09dnml429u] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 300px;
    margin-bottom: 1.75rem;
    overflow: hidden;
    border-radius: 16px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
}

.hero-story-noimg[b-09dnml429u] {
    background: var(--tile-placeholder-bg);
}

.hero-story-link[b-09dnml429u] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.hero-story-image[b-09dnml429u] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hero-story-link:hover .hero-story-image[b-09dnml429u] {
    transform: scale(1.03);
}

.hero-story-overlay[b-09dnml429u] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.15) 70%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.hero-story-content[b-09dnml429u] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.75rem 2rem;
    color: #fff;
}

.hero-story-title[b-09dnml429u] {
    margin: 0 0 0.6rem 0;
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease;
}

.hero-story-link:hover .hero-story-title[b-09dnml429u] {
    color: var(--accent-color);
}

.hero-story-preview[b-09dnml429u] {
    margin: 0 0 0.75rem 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 780px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-story-meta[b-09dnml429u] {
    color: rgba(255, 255, 255, 0.8);
}

/* ---------- Top stories row ---------- */
.top-stories-grid[b-09dnml429u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.top-story-card[b-09dnml429u] {
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    color: var(--tile-title);
}

.top-story-card:hover[b-09dnml429u] {
    border-color: var(--accent-color);
}

.top-story-link[b-09dnml429u] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.top-story-image-wrap[b-09dnml429u] {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary);
}

.top-story-image[b-09dnml429u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.top-story-link:hover .top-story-image[b-09dnml429u] {
    transform: scale(1.03);
}

.top-story-body[b-09dnml429u] {
    padding: 14px;
}

.top-story-title[b-09dnml429u] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.top-story-link:hover .top-story-title[b-09dnml429u] {
    color: var(--accent-color);
}

.top-story-preview[b-09dnml429u] {
    margin: 0 0 0.65rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---------- Latest list (grouped by recency) ---------- */
.latest-list[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.latest-group[b-09dnml429u] {
    display: flex;
    flex-direction: column;
}

.latest-group-label[b-09dnml429u] {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--news-faint);
    border-bottom: 1px solid var(--border-color);
}

.latest-group-items[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.latest-item[b-09dnml429u] {
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 14px;
    padding: 14px;
    transition: border-color 0.2s ease;
}

.latest-item:hover[b-09dnml429u] {
    border-color: var(--accent-color);
}

/* Flex rather than a fixed 2-column grid: rows with no image (and sponsored rows whose
   image fails to resolve) then use the full width instead of leaving a dead column. */
.latest-item-link[b-09dnml429u] {
    display: flex;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.latest-item-image-wrap[b-09dnml429u] {
    flex: 0 0 184px;
    width: 184px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 9px;
    background: var(--bg-secondary);
}

.latest-item-image[b-09dnml429u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.latest-item-link:hover .latest-item-image[b-09dnml429u] {
    transform: scale(1.03);
}

.latest-item-body[b-09dnml429u] {
    flex: 1 1 auto;
    min-width: 0;
}

.latest-item-title[b-09dnml429u] {
    margin: 0 0 0.4rem 0;
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.latest-item-link:hover .latest-item-title[b-09dnml429u] {
    color: var(--accent-color);
}

.latest-item-preview[b-09dnml429u] {
    margin: 0 0 0.5rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Sponsored rows keep their own framing but share the card geometry. */
.news-ad-item .latest-item-body[b-09dnml429u] {
    display: flex;
    flex-direction: column;
}

/* ---------- Shared meta ---------- */
.story-meta[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.story-meta-sep[b-09dnml429u] {
    opacity: 0.6;
}

/* ---------- Count ---------- */
.news-count[b-09dnml429u] {
    text-align: center;
    font-size: 0.82rem;
    color: var(--news-faint);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
    .news-title[b-09dnml429u] {
        font-size: 1.75rem;
    }

    .news-header-top[b-09dnml429u] {
        align-items: stretch;
    }

    .news-search[b-09dnml429u] {
        width: 100%;
    }

    .news-search-input[b-09dnml429u] {
        min-height: 44px;
    }

    .news-filter-row[b-09dnml429u] {
        gap: 8px;
    }

    .news-type-filters[b-09dnml429u] {
        width: 100%;
    }

    .type-filter[b-09dnml429u] {
        min-height: 44px;
    }

    .news-result-count[b-09dnml429u] {
        margin-left: 0;
    }

    .hero-story[b-09dnml429u] {
        min-height: 280px;
        margin-bottom: 1.25rem;
    }

    .hero-story-content[b-09dnml429u] {
        padding: 1.1rem 1.1rem 1.25rem;
    }

    .hero-story-title[b-09dnml429u] {
        font-size: 1.45rem;
    }

    .hero-story-preview[b-09dnml429u] {
        font-size: 0.88rem;
    }

    /* Top stories become a snap-scrolling row instead of two stacked full-width
       cards — that stack cost ~700px of scroll before the list even began. */
    .top-stories-grid[b-09dnml429u] {
        display: flex;
        grid-template-columns: none;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* bleed to the container edges so cards can peek */
        margin-inline: -0.75rem;
        padding-inline: 0.75rem;
    }

    .top-stories-grid[b-09dnml429u]::-webkit-scrollbar {
        display: none;
    }

    .top-story-card[b-09dnml429u] {
        flex: 0 0 230px;
        scroll-snap-align: start;
    }

    /* Compact rows: 108px 16:9 thumbnail on the LEFT. The old rule stacked the
       image full-width at 200px tall, making each row ~350px — about two
       articles per screen. This fits roughly five. */
    .latest-item-link[b-09dnml429u] {
        flex-direction: row;
        gap: 0.7rem;
        align-items: flex-start;
    }

    .latest-item-image-wrap[b-09dnml429u] {
        flex: 0 0 108px;
        width: 108px;
        aspect-ratio: 16 / 9;
        height: auto;
        border-radius: 8px;
    }

    .latest-item-title[b-09dnml429u] {
        font-size: 1rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The preview is the first thing to go at this width — chip, date and a
       readable title are what make the row scannable. */
    .latest-item-preview[b-09dnml429u] {
        display: none;
    }

    /* Header block (title + search + type chips) pins together under the
       browser bar. body already carries env(safe-area-inset-top). */
    .news-header[b-09dnml429u] {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--bs-body-bg, #fff);
        padding-top: 0.5rem;
    }

    .news-search[b-09dnml429u] {
        max-width: none;
        width: 100%;
    }

    .news-search-input[b-09dnml429u],
    .type-filter[b-09dnml429u],
    .tag-pill[b-09dnml429u] {
        min-height: 44px;
    }
}

/* ---------- Two-column layout ---------- */
.news-layout[b-09dnml429u] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.news-sidebar[b-09dnml429u] {
    position: sticky;
    top: 5.7rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-widget[b-09dnml429u] {
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    border-radius: 14px;
    padding: 16px;
}

.sidebar-title[b-09dnml429u] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-primary);
    margin: 0 0 0.85rem 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-color);
}

/* ---------- Sidebar: most read ---------- */
.most-read-list[b-09dnml429u] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.most-read-item[b-09dnml429u] {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--news-soft-border);
}
.most-read-item:last-child[b-09dnml429u] {
    border-bottom: none;
    padding-bottom: 0;
}

.most-read-link[b-09dnml429u] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.2s;
}
.most-read-link:hover[b-09dnml429u] {
    color: var(--accent-color);
}
@media (max-width: 767.98px) {
    .most-read-link[b-09dnml429u] {
        min-height: 44px;
        align-items: center;
    }
}

/* Rank was drawn in --border-color, which made it effectively invisible. */
.most-read-rank[b-09dnml429u] {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1.4;
    min-width: 1.1rem;
    flex-shrink: 0;
}

.most-read-text[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.most-read-title[b-09dnml429u] {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.most-read-count[b-09dnml429u] {
    font-size: 0.75rem;
    color: var(--news-faint);
}

/* ---------- Sidebar: browse by tag ---------- */
.sidebar-tags[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Sidebar: from the clubs ---------- */
.club-article-list[b-09dnml429u] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.club-article-item[b-09dnml429u] {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--news-soft-border);
}
.club-article-item:last-child[b-09dnml429u] {
    border-bottom: none;
    padding-bottom: 0;
}

.club-article-link[b-09dnml429u] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.2s;
}
.club-article-link:hover[b-09dnml429u] {
    color: var(--accent-color);
}
@media (max-width: 767.98px) {
    .club-article-link[b-09dnml429u] {
        min-height: 44px;
    }
}

.club-avatar[b-09dnml429u] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 34px;
    background: var(--news-soft-surface);
    border: 1px solid var(--news-soft-border);
}

.club-avatar-fallback[b-09dnml429u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-muted);
}

.club-article-text[b-09dnml429u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.club-article-title[b-09dnml429u] {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.club-article-club[b-09dnml429u] {
    font-size: 0.75rem;
    color: var(--news-faint);
}

/* ---------- Tag pills ---------- */
.tag-pill[b-09dnml429u] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--news-soft-surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.tag-pill:hover[b-09dnml429u] {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.tag-pill-active[b-09dnml429u] {
    background: var(--news-chip-news-bg);
    border-color: var(--news-chip-news-border);
    color: var(--news-chip-news-text);
    font-weight: 700;
}
/* Touch target: 44px minimum on mobile */
@media (max-width: 767.98px) {
    .tag-pill[b-09dnml429u] {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        display: inline-flex;
        align-items: center;
    }
}

/* ---------- Skeleton loaders ---------- */
@keyframes shimmer-b-09dnml429u {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton[b-09dnml429u] {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
    background-size: 1200px 100%;
    animation: shimmer-b-09dnml429u 1.4s infinite linear;
    border-radius: 4px;
}

.skeleton-hero[b-09dnml429u] {
    aspect-ratio: 16 / 9;
    min-height: 300px;
    margin-bottom: 1.75rem;
    border-radius: 16px;
}

.skeleton-grid[b-09dnml429u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.skeleton-card[b-09dnml429u] {
    height: 300px;
    border-radius: 14px;
}

.skeleton-row[b-09dnml429u] {
    height: 132px;
    margin-bottom: 10px;
    border-radius: 14px;
}

.skeleton-sidebar-title[b-09dnml429u] {
    height: 1.1rem;
    width: 60%;
    margin-bottom: 0.85rem;
}

.skeleton-sidebar-item[b-09dnml429u] {
    height: 2.4rem;
    margin-bottom: 0.6rem;
    border-radius: 6px;
}

/* Active tag filter chip — accent-tinted so "filtering by tag" reads differently
   from "searching", with its own clear button. */
.news-active-filters[b-09dnml429u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.active-tag-chip[b-09dnml429u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--news-chip-news-bg);
    border: 1px solid var(--news-chip-news-border);
    color: var(--news-chip-news-text);
    border-radius: 999px;
    padding: 0.28rem 0.5rem 0.28rem 0.75rem;
    font-size: 0.79rem;
    font-weight: 700;
}

.active-tag-clear[b-09dnml429u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(22, 104, 168, 0.12);
    color: inherit;
    cursor: pointer;
    font-size: 0.62rem;
    line-height: 1;
    padding: 0;
}

.active-tag-clear:hover[b-09dnml429u] {
    background: rgba(22, 104, 168, 0.24);
}

[data-theme="dark"] .active-tag-clear[b-09dnml429u] {
    background: rgba(127, 192, 245, 0.16);
}

/* ---------- Back to top ---------- */
.back-to-top[b-09dnml429u] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    z-index: 900;
    transition: opacity 0.25s, transform 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-to-top:hover[b-09dnml429u] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* Mobile: stack sidebar below main content */
@media (max-width: 767.98px) {
    .news-layout[b-09dnml429u] {
        grid-template-columns: 1fr;
    }
    .news-sidebar[b-09dnml429u] {
        position: static;
        max-height: none;
    }
    .skeleton-grid[b-09dnml429u] {
        grid-template-columns: 1fr;
    }
    .skeleton-hero[b-09dnml429u] {
        min-height: 280px;
    }
}

/* .back-to-top sat at a flat bottom:2rem, which put it behind the 56px .bottom-nav
   on mobile (the nav is .d-md-none, so only phones are affected). Raise it above the
   nav and the iOS home indicator — the same treatment app.css already gives
   .btn-back-to-top. Desktop keeps the original 2rem. */
@media (max-width: 767.98px) {
    .back-to-top[b-09dnml429u] {
        bottom: calc(56px + 1rem + env(safe-area-inset-bottom, 0px));
        right: 1rem;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Profile.razor.css — scoped styles for the redesigned profile page.
   Blazor auto-bundles this because the name matches Profile.razor.

   Deliberately mirrors ClubPage.razor.css: the same design language (flat 1px
   borders, no shadows except the drawer, 14px cards, 16px identity card,
   segmented tabs, row lists) so the two pages read as one product. Token names
   are kept identical (--cp-*) and the shared button/card/eyebrow class shapes
   (.cp-btn, .cp-card, .cp-eyebrow) are reused verbatim; page-specific pieces
   are prefixed .pf-.

   Dark mode targets [data-theme="dark"] — the attribute this app's own styling
   keys off (App.razor). <html> also carries data-bs-theme so Bootstrap 5.3's
   colour modes engage, but that one is Bootstrap's, not ours to style against. */

.profile-page[b-nhsbifyi3e] {
    --pf-accent: var(--accent-color, #2196F3);
    --cp-ink: #14171a;
    --cp-muted: #6b7480;
    --cp-faint: #8b949f;
    --cp-line: #e3e6ea;
    --cp-line-soft: #f0f2f4;
    --cp-surface: #fff;
    --cp-soft: #fafbfc;
    --cp-track: #eaecf0;
    --pf-tint-bg: #f0f7fe;
    --pf-tint-line: #d9e9fb;
    --pf-tint-ink: #1668a8;
    color: var(--cp-ink);
}

/* ── Identity card ─────────────────────────────────────────────── */

.pf-identity[b-nhsbifyi3e] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Placeholder hatch — profiles have no banner image, so this is the whole strip. */
.pf-banner[b-nhsbifyi3e] {
    height: 104px;
    background-color: #e6e9ed;
    background-image: repeating-linear-gradient(135deg, #dcdfe4, #dcdfe4 14px, #e6e9ed 14px, #e6e9ed 28px);
}

.pf-identity-body[b-nhsbifyi3e] {
    padding: 20px 26px;
}

.pf-identity-row[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Avatar sits inline beside the name — not centred in its own full-width row. */
.pf-avatar[b-nhsbifyi3e] {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-accent);
}

.pf-avatar span[b-nhsbifyi3e] {
    color: #fff;
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pf-identity-titles[b-nhsbifyi3e] {
    flex: 1;
    min-width: 260px;
}

.pf-name-row[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.pf-name[b-nhsbifyi3e] {
    margin: 0;
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Platform-role badges (UserRoleBadge) shrink to inline chips beside the name.
   ::deep because the badge markup lives in the shared child component. */
.pf-name-row[b-nhsbifyi3e]  .badge {
    /* inline-flex, not Bootstrap's inline-block: the chips carry an icon beside their label, and
       as inline content the icon sits on the text baseline rather than the chip's centre line —
       which reads as each chip being nudged a pixel or two out of line with its neighbours. */
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    vertical-align: middle;
}

.pf-meta[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--cp-muted);
    flex-wrap: wrap;
}

.pf-meta .sep[b-nhsbifyi3e] {
    color: #c9ced4;
}

.pf-bio[b-nhsbifyi3e] {
    margin: 14px 0 0;
    max-width: 680px;
    font-size: 0.94rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.pf-actions[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Shared button shapes (same as the club page) ──────────────── */

.cp-btn[b-nhsbifyi3e] {
    border-radius: 10px;
    padding: 0.6rem 1.15rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.2;
    transition: background-color .12s ease, border-color .12s ease;
}

.cp-btn:disabled[b-nhsbifyi3e] {
    opacity: .6;
    cursor: default;
}

.cp-btn--outline[b-nhsbifyi3e] {
    background: #fff;
    border-color: #d5dae0;
    color: var(--cp-ink);
}

.cp-btn--outline:hover[b-nhsbifyi3e] {
    background: #f7f8f9;
    border-color: #c2c9d1;
    color: var(--cp-ink);
}

.cp-btn--dark[b-nhsbifyi3e] {
    background: var(--cp-ink);
    border-color: var(--cp-ink);
    color: #fff;
}

.cp-btn--dark:hover[b-nhsbifyi3e] {
    background: #24282d;
    color: #fff;
}

.cp-btn--quiet[b-nhsbifyi3e] {
    background: #eef1f4;
    border-color: var(--cp-line);
    color: var(--cp-ink);
}

.cp-btn--quiet:hover[b-nhsbifyi3e] {
    background: #e5e9ed;
    color: var(--cp-ink);
}

.cp-btn--primary[b-nhsbifyi3e] {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: #fff;
    font-weight: 700;
    padding: 0.6rem 1.35rem;
}

.cp-btn--primary:hover[b-nhsbifyi3e] {
    filter: brightness(0.92);
    color: #fff;
}

.cp-btn--sm[b-nhsbifyi3e] {
    padding: 0.4rem 0.8rem;
    font-size: 0.83rem;
    border-radius: 9px;
}

.cp-btn--block[b-nhsbifyi3e] {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ── Stats strip: every stat is a real button that selects its tab ── */

.pf-stats[b-nhsbifyi3e] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-line-soft);
    flex-wrap: wrap;
}

.pf-stat[b-nhsbifyi3e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: none;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 6px 14px 6px 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.pf-stat + .pf-stat[b-nhsbifyi3e] {
    padding-left: 14px;
}

.pf-stat:hover:not(:disabled)[b-nhsbifyi3e] {
    border-color: var(--cp-line);
    background: var(--cp-soft);
}

/* Nothing behind this stat — quiet, same rule the empty tabs follow. */
.pf-stat:disabled[b-nhsbifyi3e] {
    opacity: .45;
    cursor: default;
}

.pf-stat-value[b-nhsbifyi3e] {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pf-stat-label[b-nhsbifyi3e],
.cp-eyebrow[b-nhsbifyi3e] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--cp-faint);
}

/* ── Two-column body ───────────────────────────────────────────── */

.pf-layout[b-nhsbifyi3e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 24px;
    align-items: start;
}

.pf-main[b-nhsbifyi3e] {
    min-width: 0;
}

.pf-aside[b-nhsbifyi3e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 991.98px) {
    .pf-layout[b-nhsbifyi3e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cp-card[b-nhsbifyi3e] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
}

.cp-card--pad[b-nhsbifyi3e] {
    padding: 18px;
}

.cp-card h3.cp-eyebrow[b-nhsbifyi3e],
.cp-card h2.cp-eyebrow[b-nhsbifyi3e] {
    margin: 0 0 12px;
}

.pf-card-head[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

/* Quiet inline link-button ("See all" in a sidebar card header). */
.pf-link-btn[b-nhsbifyi3e] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pf-accent);
    cursor: pointer;
}

.pf-link-btn:hover[b-nhsbifyi3e] {
    text-decoration: underline;
}

/* ── Tabs as a segmented control ───────────────────────────────── */

.pf-tabs[b-nhsbifyi3e] {
    display: flex;
    gap: 3px;
    background: var(--cp-track);
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 20px;
    flex-wrap: wrap;
    list-style: none;
}

.pf-tabs .nav-link[b-nhsbifyi3e] {
    border: none;
    border-radius: 9px;
    padding: 0.55rem 0.95rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    color: #5b6470;
}

.pf-tabs .nav-link:hover[b-nhsbifyi3e] {
    color: var(--cp-ink);
}

/* Flat fill, hairline border — no drop shadow. */
.pf-tabs .nav-link.active[b-nhsbifyi3e] {
    background: var(--cp-surface);
    color: var(--cp-ink);
    border: 1px solid var(--cp-line);
    padding: calc(0.55rem - 1px) calc(0.95rem - 1px);
}

/* An empty tab stays in place and goes quiet rather than disappearing, so the
   navigation never changes shape as data arrives. */
.pf-tabs .nav-link:disabled[b-nhsbifyi3e] {
    opacity: .45;
    cursor: default;
    color: #5b6470;
}

.pf-tabs .tab-count[b-nhsbifyi3e] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cp-faint);
}

.pf-tabs .nav-link.active .tab-count[b-nhsbifyi3e] {
    color: var(--pf-accent);
}

/* ── Events: sub-filter row + rows ─────────────────────────────── */

.pf-filters[b-nhsbifyi3e] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pf-filter[b-nhsbifyi3e] {
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cp-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pf-filter:hover[b-nhsbifyi3e] {
    border-color: #c2c9d1;
    color: var(--cp-ink);
}

.pf-filter.active[b-nhsbifyi3e] {
    background: var(--pf-tint-bg);
    border-color: var(--pf-tint-line);
    color: var(--pf-tint-ink);
}

.pf-filter .pf-filter-count[b-nhsbifyi3e] {
    color: var(--cp-faint);
    font-weight: 700;
}

.pf-list[b-nhsbifyi3e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-event[b-nhsbifyi3e] {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    padding: 14px;
    text-decoration: none;
    color: var(--cp-ink);
}

.pf-event:hover[b-nhsbifyi3e] {
    border-color: #c2c9d1;
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.pf-event-date[b-nhsbifyi3e] {
    width: 58px;
    flex-shrink: 0;
    text-align: center;
    background: color-mix(in srgb, var(--pf-accent) 8%, var(--cp-surface));
    border: 1px solid color-mix(in srgb, var(--pf-accent) 22%, var(--cp-surface));
    border-radius: 11px;
    padding: 9px 0;
}

.pf-event-month[b-nhsbifyi3e] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pf-accent);
}

.pf-event-day[b-nhsbifyi3e] {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pf-event-thumb[b-nhsbifyi3e] {
    width: 74px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #e6e9ed;
    background-image: repeating-linear-gradient(135deg, #dcdfe4, #dcdfe4 9px, #e6e9ed 9px, #e6e9ed 18px);
}

.pf-event-title[b-nhsbifyi3e] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.pf-event-meta[b-nhsbifyi3e] {
    font-size: 0.84rem;
    color: var(--cp-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pf-event-meta .sep[b-nhsbifyi3e] {
    color: #c9ced4;
}

/* Relation chip — what this event is TO this user. The distinction the four
   old tabs encoded is a property of the row, not a place. */
.pf-rel[b-nhsbifyi3e] {
    display: inline-block;
    border-radius: 6px;
    padding: 0.12rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 5px;
}

.pf-rel--attending[b-nhsbifyi3e] {
    background: var(--pf-tint-bg);
    border: 1px solid var(--pf-tint-line);
    color: var(--pf-tint-ink);
}

.pf-rel--organising[b-nhsbifyi3e] {
    background: #fdf4e3;
    border: 1px solid #f2e0b8;
    color: #8a6100;
}

.pf-rel--saved[b-nhsbifyi3e] {
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    color: var(--cp-muted);
}

/* ── Row lists (clubs, sidebar entries) ────────────────────────── */

.pf-row[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--cp-line-soft);
    text-decoration: none;
    color: var(--cp-ink);
}

.pf-row:last-child[b-nhsbifyi3e] {
    border-bottom: none;
}

/* The row runs edge to edge inside a .cp-card, and a child's background is not clipped by its
   parent's border-radius — so the hover fill painted square corners across the card's rounded
   ones and filled the notch outside the curve, reading as a rectangle breaking out of the card.
   The card cannot simply clip: it is the same class the club page uses around Bootstrap dropdown
   menus, which have to escape it. So the rows that touch a corner carry the radius themselves,
   14px less the card's 1px border. A lone row is both :first-child and :last-child and rounds on
   all four corners; a row under a .cp-card-head is neither, and correctly stays square. */
.pf-row:first-child[b-nhsbifyi3e] {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.pf-row:last-child[b-nhsbifyi3e] {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

.pf-row:hover[b-nhsbifyi3e] {
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.pf-row-avatar[b-nhsbifyi3e] {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--cp-track);
    color: #5b6470;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    object-fit: cover;
}

.pf-row-name[b-nhsbifyi3e] {
    font-weight: 600;
    font-size: 0.94rem;
}

.pf-row-sub[b-nhsbifyi3e] {
    font-size: 0.79rem;
    color: var(--cp-faint);
    margin-top: 2px;
}

.pf-row-sub .sep[b-nhsbifyi3e] {
    color: #c9ced4;
}

.pf-role[b-nhsbifyi3e] {
    border-radius: 999px;
    padding: 0.13rem 0.55rem;
    font-size: 0.71rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: auto;
}

.pf-role--owner[b-nhsbifyi3e] {
    background: #fdf4e3;
    border: 1px solid #f2e0b8;
    color: #8a6100;
}

.pf-role--manager[b-nhsbifyi3e] {
    background: var(--pf-tint-bg);
    border: 1px solid var(--pf-tint-line);
    color: var(--pf-tint-ink);
}

.pf-role--member[b-nhsbifyi3e],
.pf-role--following[b-nhsbifyi3e] {
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    color: var(--cp-muted);
}

/* Sidebar rows are tighter than the tab-panel ones. */
.pf-row--compact[b-nhsbifyi3e] {
    padding: 9px 0;
    gap: 10px;
}

.pf-row--compact .pf-row-avatar[b-nhsbifyi3e] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.85rem;
}

/* ── Comments ──────────────────────────────────────────────────── */

.pf-comment[b-nhsbifyi3e] {
    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    padding: 16px;
}

.pf-comment-text[b-nhsbifyi3e] {
    margin: 0 0 8px;
    font-size: 0.94rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.pf-comment-meta[b-nhsbifyi3e] {
    font-size: 0.8rem;
    color: var(--cp-muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pf-comment-meta a[b-nhsbifyi3e] {
    color: var(--pf-accent);
    text-decoration: none;
    font-weight: 600;
}

.pf-comment-meta a:hover[b-nhsbifyi3e] {
    text-decoration: underline;
}

.pf-comment-meta .sep[b-nhsbifyi3e] {
    color: #c9ced4;
}

/* ── Badges: one flat chip language for both sources ───────────────
   Earned badges carry a tier tone; club badges get the same flat chip with a
   small dot for the club colour. Previously a club's arbitrary colour rendered
   as a saturated filled pill that outshouted a gold achievement. */

.pf-badge-grid[b-nhsbifyi3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-badge[b-nhsbifyi3e] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 6px;
    padding: 0.34rem 0.66rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--cp-line);
    background: var(--cp-soft);
    color: var(--cp-muted);
    cursor: default;
}

.pf-badge img[b-nhsbifyi3e] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.pf-badge--gold[b-nhsbifyi3e] {
    background: #fdf4e3;
    border-color: #f2e0b8;
    color: #8a6100;
}

.pf-badge--silver[b-nhsbifyi3e] {
    background: #f1f3f5;
    border-color: #dfe3e7;
    color: #4a5560;
}

.pf-badge--bronze[b-nhsbifyi3e] {
    background: #fbf0e6;
    border-color: #eed7bd;
    color: #8a5325;
}

/* Club colour survives as a 8px dot, not as the chip fill. */
.pf-badge-dot[b-nhsbifyi3e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--cp-faint);
}

.pf-badge-icon[b-nhsbifyi3e] {
    font-size: 0.85rem;
    line-height: 1;
}

/* ── Access requests (sidebar) ─────────────────────────────────── */

.pf-request-row[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--cp-line-soft);
    font-size: 0.86rem;
}

.pf-request-row:last-of-type[b-nhsbifyi3e] {
    border-bottom: none;
}

.pf-hint[b-nhsbifyi3e] {
    font-size: 0.78rem;
    color: var(--cp-faint);
    display: block;
}

.pf-hint:hover[b-nhsbifyi3e] {
    color: var(--cp-muted);
}

/* ── Empty states ──────────────────────────────────────────────── */

.pf-empty[b-nhsbifyi3e] {
    background: var(--cp-surface);
    border: 1px dashed var(--cp-line);
    border-radius: 14px;
    padding: 34px 20px;
    text-align: center;
    color: var(--cp-muted);
}

.pf-empty i[b-nhsbifyi3e] {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
    color: var(--cp-faint);
}

.pf-empty p[b-nhsbifyi3e] {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Notifications & privacy card ──────────────────────────────────
   Kept out of the identity drawer (which is identity-only) but NOT deleted:
   this app has no settings destination for these 20 preferences + the privacy
   switch, so they live here as their own labelled section. */

.pf-prefs[b-nhsbifyi3e] {
    margin-top: 24px;
}


/* ── Edit drawer ───────────────────────────────────────────────────
   A right-side sheet instead of an inline card, so opening the editor no
   longer pushes the whole page down. z-index sits above .bottom-nav (1050) and
   below the Bootstrap crop modal (1055) so the cropper still opens on top. */

.pf-drawer-overlay[b-nhsbifyi3e] {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 26, .45);
    z-index: 1052;
    border: none;
    padding: 0;
    width: 100%;
    cursor: default;
}

.pf-drawer[b-nhsbifyi3e] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100%;
    background: var(--cp-surface);
    border-left: 1px solid var(--cp-line);
    box-shadow: -18px 0 44px rgba(20, 23, 26, .16);
    z-index: 1053;
    display: flex;
    flex-direction: column;
    color: var(--cp-ink);
}

.pf-drawer-head[b-nhsbifyi3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cp-line-soft);
    flex-shrink: 0;
}

.pf-drawer-head h2[b-nhsbifyi3e] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pf-drawer-close[b-nhsbifyi3e] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--cp-line);
    background: var(--cp-surface);
    color: var(--cp-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pf-drawer-close:hover[b-nhsbifyi3e] {
    background: var(--cp-soft);
    color: var(--cp-ink);
}

.pf-drawer-body[b-nhsbifyi3e] {
    padding: 20px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.pf-drawer-body label.form-label[b-nhsbifyi3e] {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.pf-drawer-foot[b-nhsbifyi3e] {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cp-line-soft);
}

.pf-avatar-edit[b-nhsbifyi3e] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Dark mode (app styles target data-theme; data-bs-theme is Bootstrap's) ── */

[data-theme="dark"] .profile-page[b-nhsbifyi3e] {
    --cp-ink: #e8eaed;
    --cp-muted: #a3acb6;
    --cp-faint: #8b949f;
    --cp-line: #2c3238;
    --cp-line-soft: #23282d;
    --cp-surface: #1b1f23;
    --cp-soft: #191d21;
    --cp-track: #24292e;
    --pf-tint-bg: #14263a;
    --pf-tint-line: #1d3f5c;
    --pf-tint-ink: #6db3f2;
}

[data-theme="dark"] .pf-banner[b-nhsbifyi3e] {
    background-color: #23282d;
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 14px, #2b3137 14px, #2b3137 28px);
}

[data-theme="dark"] .pf-event-thumb[b-nhsbifyi3e] {
    background-color: #23282d;
    background-image: repeating-linear-gradient(135deg, #23282d, #23282d 9px, #2b3137 9px, #2b3137 18px);
}

[data-theme="dark"] .pf-tabs .nav-link[b-nhsbifyi3e],
[data-theme="dark"] .pf-tabs .nav-link:disabled[b-nhsbifyi3e] {
    color: #a3acb6;
}

[data-theme="dark"] .pf-tabs .nav-link.active[b-nhsbifyi3e] {
    background: #2b3137;
    border-color: #363d44;
    color: #fff;
}

[data-theme="dark"] .cp-btn--outline[b-nhsbifyi3e],
[data-theme="dark"] .pf-filter[b-nhsbifyi3e],
[data-theme="dark"] .pf-drawer-close[b-nhsbifyi3e] {
    background: #23282d;
    border-color: #2c3238;
    color: #d3d8de;
}

[data-theme="dark"] .cp-btn--quiet[b-nhsbifyi3e] {
    background: #2b3137;
    border-color: #363d44;
    color: #e8eaed;
}

[data-theme="dark"] .cp-btn--dark[b-nhsbifyi3e] {
    background: #0d1117;
    border-color: #30363d;
    color: #fff;
}

[data-theme="dark"] .cp-btn--dark:hover[b-nhsbifyi3e] {
    background: #161b22;
}

[data-theme="dark"] .pf-row-avatar[b-nhsbifyi3e] {
    color: #c8ced6;
}

[data-theme="dark"] .pf-role--owner[b-nhsbifyi3e],
[data-theme="dark"] .pf-rel--organising[b-nhsbifyi3e],
[data-theme="dark"] .pf-badge--gold[b-nhsbifyi3e] {
    background: #3a2f14;
    border-color: #5a4a22;
    color: #e8c77a;
}

[data-theme="dark"] .pf-badge--silver[b-nhsbifyi3e] {
    background: #262b30;
    border-color: #3a4148;
    color: #c3ccd5;
}

[data-theme="dark"] .pf-badge--bronze[b-nhsbifyi3e] {
    background: #33261b;
    border-color: #533f2c;
    color: #d9a878;
}

[data-theme="dark"] .pf-meta .sep[b-nhsbifyi3e],
[data-theme="dark"] .pf-event-meta .sep[b-nhsbifyi3e],
[data-theme="dark"] .pf-comment-meta .sep[b-nhsbifyi3e],
[data-theme="dark"] .pf-row-sub .sep[b-nhsbifyi3e] {
    color: #4a525b;
}

[data-theme="dark"] .pf-drawer-overlay[b-nhsbifyi3e] {
    background: rgba(0, 0, 0, .6);
}

/* ══ Mobile (≤767.98px) ══════════════════════════════════════════════════
   Profile is a BottomNav tab, so this only has to clear the chrome the app
   already owns (56px .bottom-nav + safe area) — nothing is rebuilt here. */
@media (max-width: 767.98px) {
    .profile-page[b-nhsbifyi3e] {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .pf-banner[b-nhsbifyi3e] {
        height: 84px;
    }

    .pf-identity-body[b-nhsbifyi3e] {
        padding: 16px;
    }

    .pf-identity-row[b-nhsbifyi3e] {
        gap: 12px;
    }

    /* Inline and smaller — the old 150px centred avatar cost ~140px of the
       first screen before any content appeared. */
    .pf-avatar[b-nhsbifyi3e] {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    .pf-avatar span[b-nhsbifyi3e] {
        font-size: 1.7rem;
    }

    .pf-name[b-nhsbifyi3e] {
        font-size: 1.2rem;
    }

    .pf-identity-titles[b-nhsbifyi3e] {
        min-width: 0;
        flex-basis: calc(100% - 76px);
    }

    .pf-meta[b-nhsbifyi3e] {
        flex-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .pf-bio[b-nhsbifyi3e] {
        margin-top: 12px;
        font-size: 0.9rem;
    }

    /* Edit + Settings become a full-width pair at a real tap size. */
    .pf-actions[b-nhsbifyi3e] {
        width: 100%;
        gap: 8px;
    }

    .pf-actions .cp-btn[b-nhsbifyi3e] {
        min-height: 44px;
        flex: 1 1 0;
        justify-content: center;
    }

    /* Five stats wrapped to three ragged lines at 393pt. One line, scrolled. */
    .pf-stats[b-nhsbifyi3e] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .pf-stats[b-nhsbifyi3e]::-webkit-scrollbar {
        display: none;
    }

    .pf-stat[b-nhsbifyi3e] {
        flex-shrink: 0;
        min-height: 44px;
        justify-content: center;
        padding: 4px 12px 4px 0;
    }

    .pf-stat + .pf-stat[b-nhsbifyi3e] {
        padding-left: 12px;
    }

    .pf-stat-label[b-nhsbifyi3e] {
        white-space: nowrap;
    }

    /* Tabs keep the segmented shape but scroll instead of wrapping, and stick
       under the browser bar (body already carries env(safe-area-inset-top)). */
    .pf-tabs[b-nhsbifyi3e] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .pf-tabs[b-nhsbifyi3e]::-webkit-scrollbar {
        display: none;
    }

    .pf-tabs .nav-link[b-nhsbifyi3e] {
        white-space: nowrap;
        min-height: 44px;
    }

    .pf-filter[b-nhsbifyi3e] {
        min-height: 44px;
    }

    /* Owner-only cards read after the activity on a phone. */
    .pf-aside[b-nhsbifyi3e] {
        order: 2;
    }

    .cp-card--pad[b-nhsbifyi3e] {
        padding: 14px;
    }

    /* Keep the date chip; the thumbnail costs the title its horizontal room. */
    .pf-event[b-nhsbifyi3e] {
        gap: 12px;
        padding: 12px;
    }

    .pf-event-thumb[b-nhsbifyi3e] {
        display: none;
    }

    .pf-drawer[b-nhsbifyi3e] {
        width: 100%;
        border-left: none;
    }

    .pf-drawer-close[b-nhsbifyi3e] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings — one rail replacing three unconnected places. */

.st-page[b-525tvux1rt] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem 3rem 1rem;
}

.st-header[b-525tvux1rt] {
    margin: 0.5rem 0 1.25rem 0;
}

.st-title[b-525tvux1rt] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.st-subtitle[b-525tvux1rt] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.st-layout[b-525tvux1rt] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* ── Rail ───────────────────────────────────────────────────────────── */
.st-rail[b-525tvux1rt] {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.15rem;
}

.st-rail-item[b-525tvux1rt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.st-rail-item:hover[b-525tvux1rt] {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-primary);
}

.st-rail-item.active[b-525tvux1rt] {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent-color);
}

.st-rail-item i[b-525tvux1rt] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Delete sits apart from the rest, and never reads as just another section */
.st-rail-danger[b-525tvux1rt] {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 10px 10px;
    color: #dc2626;
}

.st-rail-danger:hover[b-525tvux1rt],
.st-rail-danger.active[b-525tvux1rt] {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}

/* ── Pane ───────────────────────────────────────────────────────────── */
.st-pane[b-525tvux1rt] {
    min-width: 0;
}

.st-section-title[b-525tvux1rt] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.st-hint[b-525tvux1rt] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.st-card[b-525tvux1rt] {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
}

.st-effects[b-525tvux1rt] {
    background: rgba(148, 163, 184, 0.10);
}

.st-list[b-525tvux1rt] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: grid;
    gap: 0.35rem;
}

.st-list li[b-525tvux1rt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.st-list i[b-525tvux1rt] {
    color: var(--text-muted);
    width: 1.1rem;
    text-align: center;
}

/* ── Rows (the Identity pages, and the links out) ───────────────────── */
.st-row[b-525tvux1rt] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    /* 46px minimum so these are comfortable tap targets on a phone */
    min-height: 46px;
}

a.st-row-link[b-525tvux1rt] {
    text-decoration: none !important;
    color: var(--text-primary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

a.st-row-link:hover[b-525tvux1rt] {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.05);
}

.st-row-icon[b-525tvux1rt] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.st-row-body[b-525tvux1rt] {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.st-row-desc[b-525tvux1rt] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.st-row-chevron[b-525tvux1rt] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.st-row-danger[b-525tvux1rt] {
    border-color: rgba(220, 38, 38, 0.4);
}

.st-row-danger .st-row-icon[b-525tvux1rt] {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

a.st-row-danger:hover[b-525tvux1rt] {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

/* ── Notifications ──────────────────────────────────────────────────── */
/* Ten rows grouped by role, with both toggles inline. The old layout was a 10x2
   table inside .table-responsive, so the Push column sat off-screen at 393pt. */
.st-notif-head[b-525tvux1rt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
    gap: 0.5rem;
    padding: 0 1rem 0.4rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.st-notif-col[b-525tvux1rt] {
    text-align: center;
}

.st-notif-group[b-525tvux1rt] {
    margin: 1rem 0 0.4rem 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.st-notif-card[b-525tvux1rt] {
    padding: 0;
    overflow: hidden;
}

.st-notif-row[b-525tvux1rt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    min-height: 46px;
}

.st-notif-row:last-child[b-525tvux1rt] {
    border-bottom: 0;
}

.st-notif-label[b-525tvux1rt] {
    display: grid;
    gap: 0.1rem;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.st-notif-toggle[b-525tvux1rt] {
    display: flex;
    justify-content: center;
}

.st-notif-toggle .form-check-input[b-525tvux1rt] {
    margin: 0;
}

/* ── Save ───────────────────────────────────────────────────────────── */
/* Only rendered by sections that actually own savable state, so a Save button
   never appears under something it cannot save. */
.st-save[b-525tvux1rt] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .st-layout[b-525tvux1rt] {
        grid-template-columns: 1fr;
    }
    .st-rail[b-525tvux1rt] {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        gap: 0.3rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    .st-rail[b-525tvux1rt]::-webkit-scrollbar {
        display: none;
    }
    .st-rail-item span[b-525tvux1rt] {
        white-space: nowrap;
    }
    /* The separator that sets Delete apart only makes sense in a vertical rail */
    .st-rail-danger[b-525tvux1rt] {
        margin-top: 0;
        padding-top: 0.6rem;
        border-top: 0;
        border-radius: 10px;
    }
    .st-notif-head[b-525tvux1rt],
    .st-notif-row[b-525tvux1rt] {
        grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem;
    }
}
/* /Components/Shared/BottomNav.razor.rz.scp.css */
.bottom-nav[b-fr4708r6sp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--card-bg, #ffffff);
    border-top: 1px solid var(--border-color, #dee2e6);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item[b-fr4708r6sp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* --bottom-nav-height (app.css :root) is the single source for this height;
       pages that must clear the nav size themselves against the same variable. */
    min-height: var(--bottom-nav-height, 56px);
    padding: 6px 4px 4px;
    text-decoration: none;
    color: var(--text-secondary, #6c757d);
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
    /* Ensure 44px min touch target */
    min-width: 44px;
}

.bottom-nav-item .bi[b-fr4708r6sp] {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 2px;
}

.bottom-nav-label[b-fr4708r6sp] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Active state for NavLink */
.bottom-nav-item.active[b-fr4708r6sp],
.bottom-nav-item:active[b-fr4708r6sp] {
    color: var(--accent-color, var(--bs-primary, #0d6efd));
}

/* Hover on non-touch devices */
@media (hover: hover) {
    .bottom-nav-item:hover[b-fr4708r6sp] {
        color: var(--accent-color, var(--bs-primary, #0d6efd));
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item[b-fr4708r6sp] {
        transition: none;
    }
}

/* --- MOB-005: More panel styles --- */
.more-backdrop[b-fr4708r6sp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.4);
    z-index: 1044;
}

.more-panel[b-fr4708r6sp] {
    position: fixed;
    bottom: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--card-bg, #1a1d23);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1045;
    padding-bottom: 8px;
}

.more-drag-handle[b-fr4708r6sp] {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px 0;
}

.more-drag-bar[b-fr4708r6sp] {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-secondary, rgba(128, 128, 128, 0.4));
}

.more-header[b-fr4708r6sp] {
    padding: 8px 24px 12px 24px;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
}

.more-header-brand[b-fr4708r6sp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.more-brand-icon[b-fr4708r6sp] {
    font-size: 1.4rem;
    color: var(--accent-color, #4dabf7);
}

.more-brand-text[b-fr4708r6sp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.more-footer[b-fr4708r6sp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.more-nav-item[b-fr4708r6sp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    min-height: 44px;
    min-width: 44px;
    color: var(--text-primary, #fff);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
    font-size: 0.95rem;
}

.more-nav-icon[b-fr4708r6sp] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.more-section-label[b-fr4708r6sp] {
    margin-top: 8px;
    border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
}

.more-logout-btn[b-fr4708r6sp] {
    color: #ff6b6b;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* --- MOB-006: Landscape orientation --- */
@media (orientation: landscape) and (max-height: 500px) {
    .bottom-nav[b-fr4708r6sp] {
        min-height: 44px;
    }

    .bottom-nav-item[b-fr4708r6sp] {
        min-height: 44px;
        padding: 4px 4px 2px;
    }

    .bottom-nav-item .bi[b-fr4708r6sp] {
        font-size: 1.1rem;
    }

    .bottom-nav-label[b-fr4708r6sp] {
        font-size: 0.6rem;
    }

    .more-panel[b-fr4708r6sp] {
        max-height: 50vh;
    }
}
/* /Components/Shared/CommentSection.razor.rz.scp.css */
/* CommentSection.razor.css — the Discussion section on the event page.

   Scoped CSS does not cross component boundaries, so the event page's
   EventDetails.razor.css cannot reach in here; these tokens mirror its --ev-*
   set so the card sits in the same design language. Dark mode targets
   [data-theme="dark"], which is what this app sets on <html>. */

.cs-card[b-8cb80k6lw9] {
    --cs-ink: #14171a;
    --cs-muted: #6b7480;
    --cs-faint: #8b949f;
    --cs-line: #e3e6ea;
    --cs-line-soft: #f0f2f4;
    --cs-surface: #fff;
    --cs-track: #eaecf0;
    --cs-warn: #ffdcb8;
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    border-radius: 14px;
    color: var(--cs-ink);
}

.cs-card-body[b-8cb80k6lw9] {
    padding: 18px 20px;
}

.cs-title[b-8cb80k6lw9] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cs-faint);
    margin-bottom: 14px;
}

.cs-list[b-8cb80k6lw9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--cs-line-soft);
}

/* A thread used to be an undifferentiated wall of bold text: name, "- date",
   no avatar. The avatar column is the whole point of this row layout. */
.cs-comment[b-8cb80k6lw9] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.cs-comment.is-flagged[b-8cb80k6lw9] {
    border-left: 3px solid var(--cs-warn);
    padding-left: 10px;
}

.cs-avatar[b-8cb80k6lw9] {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--cs-track);
    color: #5b6470;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cs-body[b-8cb80k6lw9] {
    flex: 1;
    min-width: 0;
}

.cs-head[b-8cb80k6lw9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cs-head strong[b-8cb80k6lw9] {
    font-size: 0.9rem;
    font-weight: 700;
}

.cs-when[b-8cb80k6lw9] {
    font-size: 0.75rem;
    color: var(--cs-faint);
}

.cs-text[b-8cb80k6lw9] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cs-muted);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.cs-tools[b-8cb80k6lw9] {
    flex-shrink: 0;
}

[data-theme="dark"] .cs-card[b-8cb80k6lw9] {
    --cs-ink: #e8eaed;
    --cs-muted: #a3acb6;
    --cs-faint: #8b949f;
    --cs-line: #2c3238;
    --cs-line-soft: #23282d;
    --cs-surface: #1b1f23;
    --cs-track: #24292e;
    --cs-warn: #5c471c;
}

[data-theme="dark"] .cs-avatar[b-8cb80k6lw9] {
    color: #c8ced6;
}

@media (max-width: 767.98px) {
    .cs-card-body[b-8cb80k6lw9] {
        padding: 14px;
    }

    .cs-tools .btn[b-8cb80k6lw9] {
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
[b-3d0uy3gchp] .modal-footer .btn:focus-visible,
[b-3d0uy3gchp] .modal-header .btn-close:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: none;
}
/* /Components/Shared/CookieConsentBanner.razor.rz.scp.css */
.cookie-consent-banner[b-3hc5jane55] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border-top: 1px solid #444;
    z-index: 9999;
    color: #f0f0f0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.cookie-consent-banner a[b-3hc5jane55] {
    color: #7db4ff;
}

/* Mobile: raise banner above the 56px bottom nav */
@media (max-width: 767.98px) {
    .cookie-consent-banner[b-3hc5jane55] {
        bottom: 56px;
        bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

/* MB2-M2: Stack buttons vertically on narrow phones */
@media (max-width: 576px) {
    .cookie-consent-banner .d-flex.gap-2[b-3hc5jane55] {
        flex-direction: column;
        gap: 0.5rem !important;
        width: 100%;
    }

    .cookie-consent-banner .d-flex.gap-2 .btn[b-3hc5jane55] {
        width: 100%;
    }
}

/* MOB-v11-002: OLED true-black for cookie banner */
@media (prefers-color-scheme: dark) {
    :global([data-theme="dark"]) .cookie-consent-banner[b-3hc5jane55] {
        background: #000;
    }
}
/* /Components/Shared/EventImageGallery.razor.rz.scp.css */
/* Fixed aspect-ratio container for single/fallback event images.
   The container paints the hero via CSS background-image (set inline via --hero-image var
   on the page). The <img> element on top is for accessibility (alt text) and lightbox click.
   Even if Blazor's SSR→interactive diff destroys and recreates the <img> element, the
   parent DIV's background stays painted continuously from the same cached image bytes —
   no visible gap, no flash. */
.event-image-container[b-36qz8xo3wv] {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
    background-image: var(--hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-image-container img[b-36qz8xo3wv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 575.98px) {
    .event-image-container[b-36qz8xo3wv] {
        height: 250px;
        border-radius: 0 !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .event-image-container[b-36qz8xo3wv] {
        height: 320px;
    }
}
/* /Components/Shared/InfoTooltip.razor.rz.scp.css */
.info-tooltip[b-8zd2m11e7c] {
    font-size: 0.85rem;
    color: var(--bs-secondary);
    cursor: help;
    margin-left: 0.35rem;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s;
    /* Expand touch target on mobile via padding+negative-margin (visual position unchanged) */
    position: relative;
}

.info-tooltip:hover[b-8zd2m11e7c],
.info-tooltip:focus[b-8zd2m11e7c] {
    opacity: 1;
    color: var(--bs-primary);
}

/* Expand touch target to ≥44px on touch devices without affecting visual layout */
@media (hover: none) {
    .info-tooltip[b-8zd2m11e7c]::before {
        content: '';
        position: absolute;
        inset: -15px;
    }
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
/* No scoped CSS needed — styles are inline to avoid Blazor CSS isolation issues */
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
.loading-overlay[b-qfaej0vrb8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay .spinner-border[b-qfaej0vrb8] {
    width: 3rem;
    height: 3rem;
}

.loading-overlay p[b-qfaej0vrb8] {
    color: white;
}