/* /Components/Account/JuniorDetailsForm.razor.rz.scp.css */
/* Next-of-kin section only — everything else (photo, country-field, mobile-field,
   martial-arts list, --wide layout modifiers, .panel-head's own flex layout) comes from
   wwwroot/app.css, shared with MyDetails.razor.css. */
.nok-panel[b-jq3c2oarcs] {
    margin-top: 1.5rem;
}

/* A field's own label sharing its row with a "use my ..." prefill button (Address). */
.field-label-row[b-jq3c2oarcs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

    .field-label-row .form-label[b-jq3c2oarcs] {
        margin-bottom: 0;
    }
/* /Components/Account/Pages/MyDetails.razor.rz.scp.css */
/* Page-local only — the shared field styling (photo, country-field, mobile-field,
   martial-arts list, --wide layout modifiers) lives in wwwroot/app.css so
   JuniorDetailsForm.razor can reuse it without a second copy-paste. The base tab-strip
   look (.tabs__nav / .tabs__btn) moved there too once ClubMembers.razor needed the same
   tabs pattern — see app.css. Only this page's own "Add Junior" plus-badge variant
   stays here. */

/* "Add Junior" is an action, not an identity — a filled accent badge instead of an
   outline icon sets it apart from the person tabs beside it. The icon inside (.tabs-icon)
   is rendered by the AppIcon child component, so its own sizing lives in wwwroot/app.css
   — a parent's scoped CSS can't reach into markup a child component renders. */
.tabs__btn-badge[b-7bx9dg957d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}

    .tabs__btn--add:hover .tabs__btn-badge[b-7bx9dg957d],
    .tabs__btn--add.is-active .tabs__btn-badge[b-7bx9dg957d] {
        background: var(--accent);
        color: var(--accent-ink);
    }

/* Only the adult profile has the Parent/Guardian Only checkbox. */
.ma-guardian-only[b-7bx9dg957d] {
    padding-bottom: .6rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--line);
}

/* "Unsaved changes" prompt — shown before switching tabs or navigating away with an
   edited-but-unsaved form. Controlled entirely by wwwroot/js/my-details.js. */
.modal-overlay[b-7bx9dg957d] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.modal-box[b-7bx9dg957d] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    max-width: 26rem;
    width: 100%;
}

    .modal-box h2[b-7bx9dg957d] {
        margin: 0 0 .5rem;
        font-size: 1.1rem;
    }

    .modal-box p[b-7bx9dg957d] {
        color: var(--ink-2);
        margin: 0 0 1.25rem;
    }

.modal-actions[b-7bx9dg957d] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}
/* /Components/Layout/BeltStripe.razor.rz.scp.css */
.belt-stripe[b-1qguy9qgdb] {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    /* A hairline on the inner edge in the page's ink colour, so white and black belts still show. */
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--ink) 40%, transparent);
}

    .belt-stripe svg[b-1qguy9qgdb] {
        display: block;
        width: 100%;
        height: 100%;
    }
/* /Components/Layout/BeltSwatch.razor.rz.scp.css */
.belt-swatch[b-z7gza0er98] {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: visible;
}

/* A hairline in the page's ink colour, so a white belt shows on a light page and a black one on a dark page. */
.belt-swatch rect[data-part="outline"][b-z7gza0er98] {
    stroke: color-mix(in srgb, var(--ink) 32%, transparent);
    stroke-width: 1;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-s8kg7m6hbt] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-s8kg7m6hbt] {
    flex: 1;
}

.sidebar[b-s8kg7m6hbt] {
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.top-row[b-s8kg7m6hbt] {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    justify-content: flex-end;
    gap: 1rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-s8kg7m6hbt]  a {
        white-space: nowrap;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        font-size: .85rem;
        font-weight: 500;
        color: var(--ink-2);
    }

        .top-row[b-s8kg7m6hbt]  a:hover {
            color: var(--ink);
        }

@media (max-width: 640.98px) {
    .top-row[b-s8kg7m6hbt] {
        justify-content: space-between;
    }
}

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

    .sidebar[b-s8kg7m6hbt] {
        width: 244px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

    .top-row[b-s8kg7m6hbt], article[b-s8kg7m6hbt] {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

#blazor-error-ui[b-s8kg7m6hbt] {
    background: var(--surface);
    color: var(--ink);
    border-top: 3px solid var(--accent);
    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-s8kg7m6hbt] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ---------- brand row ---------- */
.top-row[b-qurix6ilfp] {
    min-height: 3.75rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border-bottom: 1px solid var(--line);
}

.navbar-brand[b-qurix6ilfp] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0;
    text-decoration: none;
}

.navbar-brand[b-qurix6ilfp]  .brand-mark {
    width: 26px;
    height: 26px;
    color: var(--accent);
    flex-shrink: 0;
}

.brand-text[b-qurix6ilfp] {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1;
}

    .brand-text b[b-qurix6ilfp] {
        font-weight: inherit;
        color: var(--accent);
    }

/* ---------- mobile toggler ---------- */
.navbar-toggler[b-qurix6ilfp] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238a8a8a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.4rem var(--surface-2);
}

    .navbar-toggler:checked[b-qurix6ilfp] {
        background-color: var(--surface);
    }

/* ---------- nav ---------- */
nav.flex-column[b-qurix6ilfp] {
    padding: .75rem .5rem 1.5rem;
}

.nav-section[b-qurix6ilfp] {
    margin: 1.25rem .75rem .35rem;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav-item[b-qurix6ilfp] {
    font-size: .9rem;
    padding: 0;
}

    .nav-item[b-qurix6ilfp]  .nav-link {
        color: var(--ink-2);
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        height: auto;
        min-height: 2.25rem;
        display: flex;
        align-items: center;
        line-height: 1.3;
        width: 100%;
        margin: 1px 0;
        padding: .45rem .75rem;
        font-family: var(--font-body);
        font-size: .875rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color .1s ease, color .1s ease;
    }

.nav-item[b-qurix6ilfp]  a.active {
    color: var(--ink);
    background: var(--surface-2);
    font-weight: 600;
}

.nav-badge[b-qurix6ilfp] {
    margin-left: .4rem;
    color: var(--accent);
    font-weight: 700;
    font-size: .85em;
}

.nav-item[b-qurix6ilfp]  .nav-link:hover {
    color: var(--ink);
    background: var(--surface-2);
}

/* ---------- club subtree ---------- */
.nav-clubname[b-qurix6ilfp] {
    margin: 1rem .75rem .15rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* section-style headings ("My Memberships", "System Admin") */
.nav-clubname:not(.nav-clubname--logo)[b-qurix6ilfp] {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1.5rem;
}

.nav-clubname--logo[b-qurix6ilfp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
}

/* first club row sits close under the "My Club(s)" section label */
.nav-clubname:not(.nav-clubname--logo) + .nav-clubname--logo[b-qurix6ilfp] {
    margin-top: .35rem;
}

.nav-clubname__text[b-qurix6ilfp] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item--lvl2[b-qurix6ilfp]  .nav-link,
.nav-item--lvl3[b-qurix6ilfp]  .nav-link {
    padding-left: 1.65rem;
    min-height: 2rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--muted);
}

    .nav-item--lvl2[b-qurix6ilfp]  .nav-link:hover,
    .nav-item--lvl3[b-qurix6ilfp]  .nav-link:hover,
    .nav-item--lvl2[b-qurix6ilfp]  a.active,
    .nav-item--lvl3[b-qurix6ilfp]  a.active {
        color: var(--ink);
    }

.nav-item[b-qurix6ilfp]  .nav-link--logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .9rem;
}

    .nav-item[b-qurix6ilfp]  .nav-link--logo .nav-link__text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- collapse behaviour ---------- */
.nav-scrollable[b-qurix6ilfp] {
    display: none;
}

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

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

    .nav-scrollable[b-qurix6ilfp] {
        display: block;
        height: calc(100vh - 3.75rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/SubscriptionPlanCard.razor.rz.scp.css */
/* Dark whatever the theme, like a membership card: white type needs a dark ground to read on, and
   the plan's own photo (when it has one) sits under a scrim so the prices always read. */
.plan-card[b-y458cu0h23] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 13.5rem;
    height: 100%; /* cards in one grid row match heights */
    padding: 1.15rem 1.25rem 1.1rem;
    border-radius: var(--radius-lg);
    background: #101217;
    box-shadow: var(--shadow);
    color: #f4f1ec;
}

.plan-card:not(.plan-card--plain)[b-y458cu0h23]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--plan-image);
    background-size: cover;
    background-position: center;
}

/* Plain cards get a faint diagonal sheen in the club accent instead of a photo. */
.plan-card[b-y458cu0h23]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Light at the top so the photo shows; dark behind the prices so they always read. */
    background: linear-gradient(180deg, rgba(10, 11, 14, .38) 0%, rgba(10, 11, 14, .6) 42%, rgba(10, 11, 14, .92) 100%);
}

.plan-card--plain[b-y458cu0h23]::after {
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 60%),
        linear-gradient(160deg, #1a1c22 0%, #0d0e12 100%);
}

.plan-card--retired[b-y458cu0h23] {
    filter: grayscale(.85);
    opacity: .8;
}

.plan-card__top[b-y458cu0h23] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .5rem;
}

.plan-card__coverage[b-y458cu0h23],
.plan-card__chip[b-y458cu0h23] {
    white-space: nowrap;
}

.plan-card__coverage[b-y458cu0h23],
.plan-card__retired[b-y458cu0h23] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.plan-card__retired[b-y458cu0h23] {
    margin-left: auto;
    background: rgba(255, 255, 255, .28);
}

/* Same weight as the coverage label, outlined so it reads as a feature rather than a status. */
.plan-card__chip[b-y458cu0h23] {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff);
    color: #fff;
}

.plan-card__name[b-y458cu0h23] {
    margin: .35rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: #fff;
}

.plan-card__desc[b-y458cu0h23] {
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    color: rgba(244, 241, 236, .82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-card__prices[b-y458cu0h23] {
    list-style: none;
    margin: auto 0 0;
    padding: .65rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    display: grid;
    gap: .3rem;
}

.plan-card__prices li[b-y458cu0h23] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .15rem .55rem;
}

.plan-card__dur[b-y458cu0h23] {
    min-width: 5.5rem;
    font-size: .8rem;
    color: rgba(244, 241, 236, .75);
}

.plan-card__amount[b-y458cu0h23] {
    font-size: 1.15rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.plan-card__amount small[b-y458cu0h23] {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(244, 241, 236, .75);
}

.plan-card__monthly[b-y458cu0h23] {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: rgba(244, 241, 236, .75);
}

.plan-card__noprice[b-y458cu0h23] {
    margin: auto 0 0;
    font-size: .85rem;
    color: rgba(244, 241, 236, .7);
}

.plan-card__foot[b-y458cu0h23] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .78rem;
    color: rgba(244, 241, 236, .8);
}
/* /Components/Pages/Admin/ClubPositions.razor.rz.scp.css */
.add-form[b-dxpmg83lwf] {
    max-width: 32rem;
}

.rename-form[b-dxpmg83lwf] {
    display: flex;
    gap: .5rem;
    align-items: center;
    max-width: 26rem;
}

    .rename-form input[b-dxpmg83lwf] {
        flex: 1;
    }
/* /Components/Pages/Admin/MartialArts.razor.rz.scp.css */
.add-form[b-88py6sp4h0] {
    max-width: 32rem;
}
/* /Components/Pages/Admin/MartialArtSettings.razor.rz.scp.css */
form.inline[b-e4t9s8za88] {
    display: inline;
}

    form.inline + form.inline[b-e4t9s8za88] {
        margin-left: .35rem;
    }

td.nowrap[b-e4t9s8za88] {
    white-space: nowrap;
}

.add-inline[b-e4t9s8za88] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: 1rem;
}

    .add-inline input[name="name"][b-e4t9s8za88] {
        flex: 0 1 12rem;
    }

    .add-inline input[name="description"][b-e4t9s8za88] {
        flex: 1 1 14rem;
    }
/* /Components/Pages/Clubs/ClubDetails.razor.rz.scp.css */
.club-head__flag[b-v1wj8zdce1] {
    vertical-align: baseline;
    margin-left: .55rem;
    border-radius: 2px;
    border: 1px solid var(--line);
    position: relative;
    top: 1px;
}

.loc-list[b-v1wj8zdce1] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .5rem;
}

/* accordion row: collapsed shows label + country only */
.loc-item[b-v1wj8zdce1] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

    .loc-item > summary[b-v1wj8zdce1] {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .7rem .9rem;
        cursor: pointer;
        list-style: none;
    }

        .loc-item > summary[b-v1wj8zdce1]::-webkit-details-marker {
            display: none;
        }

        .loc-item > summary[b-v1wj8zdce1]::after {
            content: "+";
            margin-left: auto;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1;
        }

    .loc-item[open] > summary[b-v1wj8zdce1]::after {
        content: "\2212"; /* minus */
    }

    .loc-item[open] > summary[b-v1wj8zdce1] {
        border-bottom: 1px solid var(--line);
    }

.loc-item__name[b-v1wj8zdce1] {
    font-weight: 600;
    font-size: .9rem;
}

.loc-item__country[b-v1wj8zdce1] {
    font-size: .85rem;
}

.loc-item .loc-flag[b-v1wj8zdce1] {
    border-radius: 2px;
    border: 1px solid var(--line);
    display: block;
}

/* the edit form sits inside the open accordion — drop its own border/bg */
.loc-item[b-v1wj8zdce1]  .loc-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 1rem 1.1rem 1.15rem;
}

/* "Add New Location" — a native <details> whose <summary> is styled as a button; the add form
   only shows once it's opened (and only when the club already has a location). */
.loc-add > summary[b-v1wj8zdce1] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

    .loc-add > summary[b-v1wj8zdce1]::-webkit-details-marker {
        display: none;
    }

.loc-add[open] > summary[b-v1wj8zdce1] {
    border-color: var(--accent);
    color: var(--accent);
}

.loc-add__body[b-v1wj8zdce1] {
    margin-top: .25rem;
}

/* ---- holidays: same accordion rows as locations; several pills, so let the summary wrap */
.hol-item > summary[b-v1wj8zdce1] {
    flex-wrap: wrap;
}

.hol-item--past[b-v1wj8zdce1] {
    opacity: .7;
}

/* the edit form sits inside the open accordion — drop its own border/bg */
.hol-item[b-v1wj8zdce1]  .hol-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 1rem 1.1rem 1.15rem;
}
/* /Components/Pages/Clubs/ClubGradingSessions.razor.rz.scp.css */
/* Year and month grouping — same look as the Previous sessions page (ClubSessionHistory). The
   date chip, .sess-title and .sess-meta come from wwwroot/app.css. */

.hist-year + .hist-year[b-bmeqyhq551] {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.hist-year__heading[b-bmeqyhq551] {
    margin: 0 0 .9rem;
}

.hist-month + .hist-month[b-bmeqyhq551] {
    margin-top: 1.35rem;
}

.hist-month__heading[b-bmeqyhq551] {
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 .3rem;
}

/* ---- one grading date */
.grh-list[b-bmeqyhq551] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.grh-row[b-bmeqyhq551] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem 1.1rem;
    align-items: start;
    padding: .9rem .6rem;
    border-radius: var(--radius);
}

    .grh-row + .grh-row[b-bmeqyhq551] {
        border-top: 1px solid var(--line);
    }

    .grh-row:hover[b-bmeqyhq551] {
        background: var(--surface-2);
    }

/* The title is the link; stretching it makes the whole row open the date. */
.grh-row__link[b-bmeqyhq551]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.grh-row__link:focus-visible[b-bmeqyhq551] {
    outline: none;
}

    .grh-row__link:focus-visible[b-bmeqyhq551]::after {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.grh-row--cancelled .grh-row__body[b-bmeqyhq551] {
    opacity: .6;
}

.grh-row__body[b-bmeqyhq551] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

    .grh-row__body p[b-bmeqyhq551] {
        margin: 0;
    }

.grh-row__system[b-bmeqyhq551],
.grh-row__examiners[b-bmeqyhq551] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .85rem;
    color: var(--ink-2);
}

    .grh-row__system[b-bmeqyhq551]  svg,
    .grh-row__examiners[b-bmeqyhq551]  svg {
        flex-shrink: 0;
        width: .95rem;
        height: .95rem;
        margin-top: .15rem;
        color: var(--muted);
    }

.grh-row__system[b-bmeqyhq551] {
    font-weight: 600;
    color: var(--ink);
}

.grh-row__belts[b-bmeqyhq551] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    margin: .1rem 0;
}

.grh-belt[b-bmeqyhq551] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--ink-2);
}

.grh-row__aside[b-bmeqyhq551] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45rem;
    text-align: right;
}

.grh-pill--progress[b-bmeqyhq551] {
    background: color-mix(in srgb, var(--warn) 16%, transparent);
    color: color-mix(in srgb, var(--warn) 75%, var(--ink));
}

.grh-stats[b-bmeqyhq551] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .2rem .9rem;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

    .grh-stats b[b-bmeqyhq551] {
        color: var(--ink);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
    }

.grh-stats__pass b[b-bmeqyhq551] {
    color: var(--ok);
}

.grh-stats__fail b[b-bmeqyhq551] {
    color: var(--accent);
}

.grh-sofar[b-bmeqyhq551] {
    font-size: .72rem;
    color: var(--muted);
}

@media (max-width: 640px) {
    .grh-row[b-bmeqyhq551] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .grh-row__aside[b-bmeqyhq551] {
        grid-column: 2;
        align-items: flex-start;
        text-align: left;
    }

    .grh-stats[b-bmeqyhq551] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Clubs/ClubGroups.razor.rz.scp.css */
.group-list[b-to73snag84] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .5rem;
}

/* accordion row: collapsed shows title + member count only */
.group-item[b-to73snag84] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 0 .9rem;
}

    .group-item > summary[b-to73snag84] {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: .7rem 0;
        cursor: pointer;
        list-style: none;
    }

        .group-item > summary[b-to73snag84]::-webkit-details-marker {
            display: none;
        }

        .group-item > summary[b-to73snag84]::after {
            content: "+";
            margin-left: auto;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1;
        }

    .group-item[open] > summary[b-to73snag84]::after {
        content: "\2212"; /* minus */
    }

    .group-item[open] > summary[b-to73snag84] {
        border-bottom: 1px solid var(--line);
    }

    .group-item > form[b-to73snag84] {
        padding: .9rem 0;
    }

.group-item__name[b-to73snag84] {
    font-weight: 600;
    font-size: .9rem;
}
/* /Components/Pages/Clubs/ClubHolidayForm.razor.rz.scp.css */
.hol-form[b-m3869pgird] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 1.1rem 1.25rem 1.25rem;
}

.hol-form--new[b-m3869pgird] {
    background: transparent;
    border-style: dashed;
}

.hol-grid[b-m3869pgird] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.hol-grid__full[b-m3869pgird] {
    grid-column: 1 / -1;
}

@media (max-width: 620px) {
    .hol-grid[b-m3869pgird] {
        grid-template-columns: 1fr;
    }
}

.hol-locations[b-m3869pgird] {
    margin: .5rem 0 0 1.75rem;
    padding-left: .75rem;
    border-left: 2px solid var(--line);
}

/* the "?" beside "Apply to all locations": hover/focus for the explanation (native tooltip) */
.hol-tip[b-m3869pgird] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: .35rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}

    .hol-tip:hover[b-m3869pgird],
    .hol-tip:focus-visible[b-m3869pgird] {
        color: var(--accent);
        border-color: var(--accent);
        outline: none;
    }

/* "[x] Notify all members   [ 14 ] days before   Sent 3 Oct 2026" — one line, wraps on narrow screens */
.hol-notice[b-m3869pgird] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    margin-bottom: .55rem;
}

    .hol-notice .form-check[b-m3869pgird] {
        min-width: 11rem;
        margin: 0;
    }

.hol-days[b-m3869pgird] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--ink-2);
}

    .hol-days .form-control[b-m3869pgird] {
        width: 5rem;
    }

.hol-sent[b-m3869pgird] {
    font-size: .78rem;
    color: var(--ok);
}

.hol-form__actions[b-m3869pgird] {
    display: flex;
    gap: .5rem;
}
/* /Components/Pages/Clubs/ClubLocationForm.razor.rz.scp.css */
.loc-form[b-i2i0qtlloo] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 1.1rem 1.25rem 1.25rem;
}

.loc-form--new[b-i2i0qtlloo] {
    background: transparent;
    border-style: dashed;
}

.loc-grid[b-i2i0qtlloo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.loc-grid__full[b-i2i0qtlloo] {
    grid-column: 1 / -1;
}

.loc-grid__primary[b-i2i0qtlloo] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
}

@media (max-width: 620px) {
    .loc-grid[b-i2i0qtlloo] {
        grid-template-columns: 1fr;
    }
}

.country-field[b-i2i0qtlloo] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .country-field .form-select[b-i2i0qtlloo] {
        flex: 1;
        min-width: 0;
    }

.loc-flag[b-i2i0qtlloo] {
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid var(--line);
    display: block;
}

.loc-form__actions[b-i2i0qtlloo] {
    display: flex;
    gap: .5rem;
}

.loc-map-wrap[b-i2i0qtlloo] {
    display: flex;
    flex-direction: column;
}

    .loc-map-wrap .form-label[b-i2i0qtlloo] {
        display: block;
    }

.loc-hours[b-i2i0qtlloo] {
    margin-top: .25rem;
}

.loc-hours__note[b-i2i0qtlloo] {
    margin: .15rem 0 .7rem;
}

.loc-hours__bulk[b-i2i0qtlloo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

    .loc-hours__bulk .form-control[b-i2i0qtlloo] {
        width: auto;
        flex: 0 0 auto;
    }

.loc-hours__grid[b-i2i0qtlloo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem 1.5rem;
}

/* only the full-width hours block (add form / maps off) splits into two columns */
.loc-hours.loc-grid__full .loc-hours__grid[b-i2i0qtlloo] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
    .loc-hours.loc-grid__full .loc-hours__grid[b-i2i0qtlloo] {
        grid-template-columns: 1fr;
    }
}

.loc-hours__day[b-i2i0qtlloo] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .loc-hours__day .form-control[b-i2i0qtlloo] {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

.loc-hours__label[b-i2i0qtlloo] {
    width: 2.6rem;
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
}

.loc-hours__dash[b-i2i0qtlloo] {
    color: var(--muted);
}

.loc-map__foot[b-i2i0qtlloo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}

    .loc-map__foot .loc-map__hint[b-i2i0qtlloo] {
        margin: 0;
        flex: 1;
        min-width: 12rem;
    }
/* /Components/Pages/Clubs/ClubLogoEdit.razor.rz.scp.css */
.logo-panel[b-38skcci2nu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
    max-width: 44rem;
}

.logo-current[b-38skcci2nu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

    .logo-current[b-38skcci2nu]  .club-logo {
        width: 160px;
        height: 160px;
        border-radius: var(--radius);
    }

.logo-form[b-38skcci2nu] {
    min-width: 18rem;
    flex: 1;
}

    .logo-form fieldset[b-38skcci2nu] {
        border: 0;
        padding: 0;
        margin: 0;
    }

    .logo-form legend[b-38skcci2nu] {
        float: none;
        width: auto;
        margin-bottom: .4rem;
        font-size: .875rem;
        font-weight: 500;
    }

.logo-hint[b-38skcci2nu] {
    flex-basis: 100%;
    font-size: .82rem;
    margin: 1rem 0 0;
}
/* /Components/Pages/Clubs/ClubManage.razor.rz.scp.css */
/* .club-hero* lives in app.css (shared with the Club details preview) */

/* ---------- stat row ---------- */
.stat-row[b-q9hvuv71zp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-q9hvuv71zp] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.35rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: .9rem;
    align-items: center;
}

.stat-card__icon[b-q9hvuv71zp] {
    grid-row: 1 / span 3;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .stat-card__icon[b-q9hvuv71zp]  svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.stat-card__label[b-q9hvuv71zp] {
    font-size: .8rem;
    color: var(--muted);
}

.stat-card__value[b-q9hvuv71zp] {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.stat-card__sub[b-q9hvuv71zp] {
    font-size: .8rem;
    color: var(--muted);
}

/* ---------- main grid ----------
   Same three columns and gap as the stat row above, so Teaching lines up under the Disciplines
   card and Sessions takes the two columns to its left. */
.club-grid[b-q9hvuv71zp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.sessions-panel[b-q9hvuv71zp] {
    grid-column: span 2;
}

.club-side[b-q9hvuv71zp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

    .club-side > .panel[b-q9hvuv71zp] {
        margin: 0;
    }

@media (max-width: 900px) {
    .stat-row[b-q9hvuv71zp] {
        grid-template-columns: 1fr;
    }

    .club-grid[b-q9hvuv71zp] {
        grid-template-columns: 1fr;
    }

    .sessions-panel[b-q9hvuv71zp] {
        grid-column: auto;
    }
}

/* .loc-tabs/.loc-tab/.loc-tab--active moved to wwwroot/app.css — the Club Members roster
   now uses them too, so they're global rather than duplicated per page. */

/* The session row styles (.sess-list, .sess-row and its parts, .sess-title, .sess-tick,
   .sess-meta and its variants, .sess-pill variants, the base .sess-date, .rsvp-stat variants,
   .sess-empty) also moved to wwwroot/app.css — the sessions history page
   (ClubSessionHistory.razor) renders the same rows and needed them too. What's left here is
   specific to this page's own "current session" hero card. */

/* ---------- sessions: the three cards ---------- */
.sess-cards[b-q9hvuv71zp] {
    display: flex;
    flex-direction: column;
    /* extra room between the current/upcoming hero and the Next/Previous cards below it */
    gap: 2.5rem;
}

.sess-lists[b-q9hvuv71zp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.sess-card[b-q9hvuv71zp] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    min-width: 0;
}

.sess-card__head[b-q9hvuv71zp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.sess-card__title[b-q9hvuv71zp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .88rem;
    font-weight: 650;
}

    .sess-card__title[b-q9hvuv71zp]  svg {
        width: 1rem;
        height: 1rem;
        color: var(--accent);
    }

/* the running / next session */
.sess-hero[b-q9hvuv71zp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .9rem 1.1rem;
}

.sess-hero--cancelled .sess-hero__body[b-q9hvuv71zp] {
    opacity: .7;
}

.sess-hero__body[b-q9hvuv71zp] {
    flex: 1 1 12rem;
    min-width: 0;
}

    .sess-hero__body .sess-title[b-q9hvuv71zp] {
        font-size: 1.1rem;
    }

.sess-hero__stats[b-q9hvuv71zp] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8rem;
    color: var(--muted);
    white-space: nowrap;
}

/* a session a club admin has marked complete — the hero's own circular badge (rows use the
   smaller inline .sess-tick instead, in app.css) */
.sess-card__status[b-q9hvuv71zp] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.sess-done[b-q9hvuv71zp] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
}

    .sess-done[b-q9hvuv71zp]  svg {
        width: .85rem;
        height: .85rem;
        stroke-width: 2.5;
    }

/* the hero's own larger date chip — the shared .sess-date base lives in app.css */
.sess-date--large[b-q9hvuv71zp] {
    width: 4.2rem;
    padding: .5rem 0;
}

    .sess-date--large .sess-date__dow[b-q9hvuv71zp],
    .sess-date--large .sess-date__mon[b-q9hvuv71zp] {
        font-size: .7rem;
    }

    .sess-date--large .sess-date__day[b-q9hvuv71zp] {
        font-size: 1.8rem;
    }

/* ---------- teaching ---------- */
.teach-group + .teach-group[b-q9hvuv71zp] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.teach-group__head[b-q9hvuv71zp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.teach-group__name[b-q9hvuv71zp] {
    font-size: .875rem;
    font-weight: 600;
}

.teach-group__count[b-q9hvuv71zp] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .05rem .45rem;
}

/* governing body: pushed to the right edge of the martial-art heading row */
.teach-group__gb[b-q9hvuv71zp] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .7rem;
    padding: .1rem .5rem;
    white-space: nowrap;
}

.tag-row[b-q9hvuv71zp] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.tag[b-q9hvuv71zp] {
    font-size: .8rem;
    padding: .25rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

/* governing-body tags: quieter, pill-shaped, to read apart from disciplines */
.tag--gb[b-q9hvuv71zp] {
    background: transparent;
    border-radius: var(--radius-pill);
    border-style: dashed;
    color: var(--muted);
}

/* ---------- empty states ---------- */
.empty-state[b-q9hvuv71zp] {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state__icon[b-q9hvuv71zp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    margin-bottom: .75rem;
}

    .empty-state__icon[b-q9hvuv71zp]  svg {
        width: 1.3rem;
        height: 1.3rem;
    }

.empty-state__title[b-q9hvuv71zp] {
    font-weight: 600;
    margin: 0 0 .2rem;
}

.empty-state__sub[b-q9hvuv71zp] {
    color: var(--muted);
    font-size: .875rem;
    margin: 0 0 1rem;
}

/* ---- Grading panel: each active belt system, with how many active members hold each belt */
.manage-grading[b-q9hvuv71zp] {
    margin: 0 0 1rem;
}

.manage-grading__system[b-q9hvuv71zp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .15rem .75rem;
    margin: 0 0 .4rem;
    font-size: .9rem;
}

    .manage-grading__system .text-muted[b-q9hvuv71zp] {
        font-size: .78rem;
    }

.manage-grading__belts[b-q9hvuv71zp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .1rem;
}

    .manage-grading__belts li[b-q9hvuv71zp] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .6rem;
        padding: .2rem 0;
        font-size: .85rem;
    }

.manage-grading__name[b-q9hvuv71zp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manage-grading__count[b-q9hvuv71zp] {
    min-width: 1.75rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Belts nobody holds yet recede, so the ones in use stand out. */
.manage-grading__belt--none .manage-grading__name[b-q9hvuv71zp],
.manage-grading__belt--none .manage-grading__count[b-q9hvuv71zp] {
    color: var(--muted);
    font-weight: 400;
}

.manage-grading__summary[b-q9hvuv71zp] {
    margin: 0 0 .9rem;
    font-size: .8rem;
}

.manage-grading__manage[b-q9hvuv71zp] {
    width: 100%;
    justify-content: center;
}

    .manage-grading__manage[b-q9hvuv71zp]  svg {
        width: 1rem;
        height: 1rem;
    }
/* /Components/Pages/Clubs/ClubMemberProfile.razor.rz.scp.css */
.avatar.avatar--lg[b-ii5upsrnth] {
    width: 56px;
    height: 56px;
    font-size: 1.05rem;
    border-radius: var(--radius);
}

/* last session attended / last login — read-only, so it's its own panel, outside the save form */
.activity-facts[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

    .activity-facts dt[b-ii5upsrnth] {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .2rem;
    }

    .activity-facts dd[b-ii5upsrnth] {
        margin: 0;
    }

.chk-grid[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .25rem 1rem;
}

.disc-grid[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}

.disc-group[b-ii5upsrnth] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .8rem 1rem 1rem;
    margin: 0;
}

    .disc-group legend[b-ii5upsrnth] {
        float: none;
        width: auto;
        margin: 0 0 .45rem;
        padding: 0;
        font-size: .8rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--ink);
    }

/* ---- Subscription panel: one block per subscription (current first), then the assign form */
.sub-panel[b-ii5upsrnth] {
    margin-top: 1.5rem;
}

.sub-item[b-ii5upsrnth] {
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

    .sub-item:first-of-type[b-ii5upsrnth] {
        border-top: 0;
        padding-top: .25rem;
    }

.sub-item--past[b-ii5upsrnth] {
    opacity: .72;
}

.sub-item__head[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    margin-bottom: .6rem;
}

    .sub-item__head h3[b-ii5upsrnth] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 650;
    }

.sub-item__via[b-ii5upsrnth] {
    font-size: .82rem;
    color: var(--muted);
}

.sub-facts[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .6rem 1.5rem;
    margin: 0 0 .6rem;
}

    .sub-facts dt[b-ii5upsrnth] {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .1rem;
    }

    .sub-facts dd[b-ii5upsrnth] {
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

.sub-override[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    margin-bottom: .6rem;
    font-size: .88rem;
}

.sub-pauses[b-ii5upsrnth] {
    list-style: none;
    margin: 0 0 .6rem;
    padding: 0;
    display: grid;
    gap: .45rem;
}

    .sub-pauses li[b-ii5upsrnth] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .4rem 1rem;
        padding: .5rem .75rem;
        border-radius: var(--radius-sm);
        background: var(--accent-soft);
        font-size: .88rem;
    }

.sub-pauses__actions[b-ii5upsrnth],
.sub-actions[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.sub-inline[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .sub-inline .form-control[b-ii5upsrnth] {
        width: auto;
    }

/* A <details> opens its form in place, underneath the row of actions. */
.sub-details > summary[b-ii5upsrnth] {
    cursor: pointer;
    font-size: .875rem;
    color: var(--link);
    list-style: none;
}

    .sub-details > summary[b-ii5upsrnth]::-webkit-details-marker {
        display: none;
    }

.sub-details[open][b-ii5upsrnth] {
    flex-basis: 100%;
    order: 10;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

    .sub-details[open] > summary[b-ii5upsrnth] {
        margin-bottom: .6rem;
        font-weight: 600;
    }

.sub-form-grid[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .6rem .9rem;
    align-items: end;
}

.sub-form-grid__wide[b-ii5upsrnth] {
    grid-column: 1 / -1;
}

.sub-form-grid > .btn[b-ii5upsrnth] {
    justify-self: start;
}

.sub-assign[b-ii5upsrnth] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto minmax(10rem, 1fr) auto;
    gap: .75rem 1rem;
    align-items: end;
}

@media (max-width: 800px) {
    .sub-assign[b-ii5upsrnth] {
        grid-template-columns: minmax(0, 1fr);
    }

        .sub-assign > .btn[b-ii5upsrnth] {
            justify-self: start;
        }
}

.sub-assign__freq[b-ii5upsrnth] {
    margin: 0;
    padding: 0;
    border: 0;
}

    .sub-assign__freq legend[b-ii5upsrnth] {
        float: none;
        width: auto;
    }

.sub-unavailable[b-ii5upsrnth] {
    margin-top: .9rem;
    font-size: .875rem;
    color: var(--muted);
}

    .sub-unavailable summary[b-ii5upsrnth] {
        cursor: pointer;
    }

    .sub-unavailable ul[b-ii5upsrnth] {
        margin: .5rem 0 0;
        padding-left: 1.1rem;
    }

/* Martial arts & disciplines: "Trains in X" heads each art; its disciplines sit underneath. */
.disc-art[b-ii5upsrnth] {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--line);
}

.disc-sub[b-ii5upsrnth] {
    margin: 0 0 .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.disc-none[b-ii5upsrnth] {
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
}

/* ---- Belts panel: each belt system the member can be graded in */
.belts-panel[b-ii5upsrnth] {
    margin-top: 1.25rem;
}

.belt-art + .belt-art[b-ii5upsrnth] {
    margin-top: 1.25rem;
}

.belt-art__title[b-ii5upsrnth] {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.belt-sys[b-ii5upsrnth] {
    display: grid;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

    .belt-sys + .belt-sys[b-ii5upsrnth] {
        margin-top: .6rem;
    }

.belt-sys__head[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.belt-sys__current[b-ii5upsrnth] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

    .belt-sys__current strong[b-ii5upsrnth] {
        display: block;
    }

    .belt-sys__current span[b-ii5upsrnth] {
        font-size: .82rem;
        color: var(--muted);
    }

.belt-pick[b-ii5upsrnth] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.belt-pick__opt[b-ii5upsrnth] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .4rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    cursor: pointer;
    max-width: 7.5rem;
    text-align: center;
}

    .belt-pick__opt input[b-ii5upsrnth] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .belt-pick__opt:has(input:checked)[b-ii5upsrnth] {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    .belt-pick__opt:has(input:focus-visible)[b-ii5upsrnth] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.belt-award[b-ii5upsrnth] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

    .belt-award .form-label[b-ii5upsrnth] {
        font-size: .78rem;
        margin-bottom: .2rem;
    }

.belt-history[b-ii5upsrnth] {
    font-size: .85rem;
}

    .belt-history summary[b-ii5upsrnth] {
        cursor: pointer;
        color: var(--link);
    }

    .belt-history ul[b-ii5upsrnth] {
        list-style: none;
        margin: .5rem 0 0;
        padding: 0;
        display: grid;
        gap: .35rem;
    }

    .belt-history li[b-ii5upsrnth] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .belt-history form[b-ii5upsrnth] {
        display: inline;
    }

/* A grading they didn't pass: the belt they went for, faded, with a "Not passed" tag. */
.belt-history__failed[b-ii5upsrnth]  .belt-swatch {
    opacity: .45;
}

.belt-history__failed > strong[b-ii5upsrnth] {
    color: var(--ink-2);
    font-weight: 600;
}

.belt-history__pill[b-ii5upsrnth] {
    background: var(--accent-soft);
    color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
/* /Components/Pages/Clubs/ClubSessionDate.razor.rz.scp.css */
.date-card[b-bqzlcpn03i] {
    position: relative;
    max-width: 44rem;
}

.date-card--cancelled .date-facts[b-bqzlcpn03i] {
    opacity: .55;
}

.date-facts[b-bqzlcpn03i] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin: 0;
}

    .date-facts dt[b-bqzlcpn03i] {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: .15rem;
    }

    .date-facts dd[b-bqzlcpn03i] {
        margin: 0;
    }

.rsvp-intro[b-bqzlcpn03i] {
    margin: -.4rem 0 1rem;
    font-size: .88rem;
}

.rsvp-list[b-bqzlcpn03i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rsvp-row[b-bqzlcpn03i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .7rem 0;
    border-top: 1px solid var(--line);
}

    .rsvp-row:first-child[b-bqzlcpn03i] {
        border-top: 0;
        padding-top: 0;
    }

.rsvp-row__name[b-bqzlcpn03i] {
    font-weight: 600;
    flex: 1 1 8rem;
    min-width: 0;
}

.rsvp-row__actions[b-bqzlcpn03i] {
    display: inline-flex;
    gap: .4rem;
    margin-left: auto;
}

.rsvp-all[b-bqzlcpn03i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.rsvp-all__label[b-bqzlcpn03i] {
    margin-right: auto;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.rsvp-hint[b-bqzlcpn03i] {
    font-size: .82rem;
    margin: .8rem 0 0;
}

/* Red "stamp" laid across the card — same look as the one on the admin's date list. */
.cancel-watermark[b-bqzlcpn03i] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    padding: .2rem 1.1rem;
    border: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 800;
    font-size: clamp(1.1rem, 5vw, 1.9rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
    pointer-events: none;
    user-select: none;
}

.rsvp-row__name .text-muted[b-bqzlcpn03i] {
    margin-left: .3rem;
    font-weight: 400;
}

.cancel-watermark--holiday[b-bqzlcpn03i] {
    border-color: var(--warn);
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}
/* /Components/Pages/Clubs/ClubSessionEdit.razor.rz.scp.css */
/* ---- form: one titled card per topic, two per row on wide screens */
.session-grid[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.session-section--wide[b-d5xbld3kvx] {
    grid-column: 1 / -1;
}

/* Each column stacks its own cards, so their heights don't have to line up across the page. */
.session-col[b-d5xbld3kvx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

@media (max-width: 900px) {
    .session-grid[b-d5xbld3kvx] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One column: the cards join the main grid and their "order" puts them back in sequence. */
    .session-col[b-d5xbld3kvx] {
        display: contents;
    }
}

/* ---- type of session: three radio cards */
.session-kinds[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 760px) {
    .session-kinds[b-d5xbld3kvx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.session-kind[b-d5xbld3kvx] {
    position: relative;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}

    .session-kind:hover[b-d5xbld3kvx] {
        border-color: var(--line-strong);
    }

    .session-kind:has(input:checked)[b-d5xbld3kvx] {
        border-color: var(--accent);
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    .session-kind:has(input:focus-visible)[b-d5xbld3kvx] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* The radio stays real (keyboard, screen readers) but the whole card is the target. */
    .session-kind input[b-d5xbld3kvx] {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
    }

.session-kind__icon[b-d5xbld3kvx] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-2);
}

.session-kind:has(input:checked) .session-kind__icon[b-d5xbld3kvx] {
    background: var(--accent);
    color: #fff;
}

    .session-kind__icon[b-d5xbld3kvx]  svg {
        width: 1.05rem;
        height: 1.05rem;
    }

.session-kind__body[b-d5xbld3kvx] {
    display: grid;
    gap: .2rem;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--muted);
}

    .session-kind__body strong[b-d5xbld3kvx] {
        font-size: .95rem;
        color: var(--ink);
    }

/* ---- grading: the session's grading type, then the examiners */
.grading-setup[b-d5xbld3kvx] {
    display: grid;
    gap: 1.1rem;
}

.grading-setup__head[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: .85rem;
    align-items: start;
}

@media (max-width: 700px) {
    .grading-setup__head[b-d5xbld3kvx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.grading-setup__belts-head[b-d5xbld3kvx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .35rem;
    margin-bottom: .45rem;
}

    .grading-setup__belts-head .btn-link[b-d5xbld3kvx] {
        padding: 0 .3rem;
        font-size: .8rem;
    }

.belt-picks[b-d5xbld3kvx] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.belt-pick[b-d5xbld3kvx] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .6rem .3rem .45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

    .belt-pick:has(input:checked)[b-d5xbld3kvx] {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .belt-pick:has(input:focus-visible)[b-d5xbld3kvx] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .belt-pick input[b-d5xbld3kvx] {
        margin: 0;
        accent-color: var(--accent);
    }

.grading-setup__examiner-setup[b-d5xbld3kvx] {
    padding-top: .85rem;
    border-top: 1px solid var(--line);
}

.grading-setup__setup-text[b-d5xbld3kvx] {
    margin: 0 0 .5rem;
    font-size: .86rem;
}

.grading-setup__override[b-d5xbld3kvx] {
    margin: .6rem 0 0 1.75rem;
    padding-left: .75rem;
    border-left: 2px solid var(--line);
}

    .grading-setup__override .form-text[b-d5xbld3kvx] {
        margin: .4rem 0 .6rem;
    }

.grading-subhead[b-d5xbld3kvx] {
    margin: 1.5rem 0 .35rem;
}

.grading-intro[b-d5xbld3kvx] {
    margin: 0 0 .75rem;
}

.examiner-list[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: .5rem;
}

.examiner-row[b-d5xbld3kvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

    .examiner-row .form-check[b-d5xbld3kvx] {
        margin: 0;
    }

.examiner-chief[b-d5xbld3kvx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
}

    .examiner-chief input[b-d5xbld3kvx] {
        accent-color: var(--accent);
    }

    .examiner-chief:has(input:disabled)[b-d5xbld3kvx] {
        opacity: .45;
        cursor: default;
    }

    .examiner-chief:has(input:checked)[b-d5xbld3kvx] {
        color: var(--accent);
    }

/* ---- invited groups on a grading: "remove after grading" under each group */
.remove-after[b-d5xbld3kvx] {
    margin: -.1rem 0 .45rem 1.75rem;
    font-size: .84rem;
}

    .remove-after:has(input:disabled)[b-d5xbld3kvx] {
        opacity: .5;
    }

.remove-after-tip[b-d5xbld3kvx] {
    margin: .9rem 0 0;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px dashed var(--line-strong);
    font-size: .84rem;
    color: var(--ink-2);
}

.field-row[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.form-actions[b-d5xbld3kvx] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
}

/* ---- weekday toggles: hidden checkbox + pill label, still a real checkbox for keyboard/AT */
.days-grid[b-d5xbld3kvx] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.day-chip[b-d5xbld3kvx] {
    position: relative;
}

    .day-chip input[b-d5xbld3kvx] {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
    }

    .day-chip label[b-d5xbld3kvx] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.9rem;
        padding: .3rem .7rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-pill);
        background: var(--surface-2);
        color: var(--ink-2);
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
    }

    .day-chip input:checked + label[b-d5xbld3kvx] {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent);
    }

    .day-chip input:focus-visible + label[b-d5xbld3kvx] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

/* ---- card image panel — same shape as ClubLogoEdit.razor.css (component CSS isolation
   means that file's rules don't reach this page, so it's duplicated rather than shared). */
.logo-panel[b-d5xbld3kvx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
    max-width: 44rem;
}

.logo-panel > .section-head[b-d5xbld3kvx] {
    flex-basis: 100%;
    margin-bottom: 0;
}

.logo-current[b-d5xbld3kvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.session-card-img[b-d5xbld3kvx] {
    border-radius: var(--radius);
    object-fit: cover;
}

.logo-form[b-d5xbld3kvx] {
    min-width: 18rem;
    flex: 1;
}

.logo-hint[b-d5xbld3kvx] {
    flex-basis: 100%;
    font-size: .82rem;
    margin: 1rem 0 0;
}

/* ---- upcoming-instance accordion — same shape as ClubGroups.razor.css's .group-item,
   duplicated for the same component-isolation reason as above. */
.group-list[b-d5xbld3kvx] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .5rem;
}

.group-item[b-d5xbld3kvx] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 0 .9rem;
}

    .group-item > summary[b-d5xbld3kvx] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem .55rem;
        padding: .7rem 0;
        cursor: pointer;
        list-style: none;
    }

        .group-item > summary[b-d5xbld3kvx]::-webkit-details-marker {
            display: none;
        }

        .group-item > summary[b-d5xbld3kvx]::after {
            content: "+";
            margin-left: auto;
            width: 1rem;
            text-align: center;
            color: var(--muted);
            font-size: 1rem;
            line-height: 1;
        }

    .group-item[open] > summary[b-d5xbld3kvx]::after {
        content: "\2212"; /* minus */
    }

    .group-item[open] > summary[b-d5xbld3kvx] {
        border-bottom: 1px solid var(--line);
    }

    .group-item > form[b-d5xbld3kvx] {
        padding: .9rem 0;
    }

/* With stats present they take the free space (pushing themselves + the marker right);
   without, the marker does. Two auto margins in one row would split the space instead. */
.group-item > summary.has-stats[b-d5xbld3kvx]::after {
    margin-left: 0;
}

/* Accepted / declined / awaiting, right-aligned beside the +/- marker. */
.rsvp-stats[b-d5xbld3kvx] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .78rem;
    color: var(--muted);
    white-space: nowrap;
}

.rsvp-stat[b-d5xbld3kvx] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .rsvp-stat[b-d5xbld3kvx]::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--muted);
    }

    .rsvp-stat b[b-d5xbld3kvx] {
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

.rsvp-stat--accepted[b-d5xbld3kvx]::before {
    background: var(--ok);
}

.rsvp-stat--declined[b-d5xbld3kvx]::before {
    background: var(--accent);
}

.group-item__name[b-d5xbld3kvx] {
    font-weight: 600;
    font-size: .9rem;
}

/* ---- per-date panel: RSVP tally, description, coaches, cancel */
.inst-body[b-d5xbld3kvx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .9rem 0;
}

.inst-note[b-d5xbld3kvx] {
    margin: 0;
    font-size: .86rem;
    color: var(--ink-2);
}

.inst-section .form-label[b-d5xbld3kvx] {
    margin-bottom: .4rem;
}

.inst-actions[b-d5xbld3kvx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
}

.cancel-box[b-d5xbld3kvx] {
    border-top: 1px solid var(--line);
    padding-top: .8rem;
}

    .cancel-box > summary[b-d5xbld3kvx] {
        cursor: pointer;
        font-size: .86rem;
        font-weight: 600;
        color: var(--accent);
        list-style: none;
    }

        .cancel-box > summary[b-d5xbld3kvx]::-webkit-details-marker {
            display: none;
        }

    .cancel-box > summary.reinstate-summary[b-d5xbld3kvx] {
        color: var(--ink);
    }

    .cancel-box > form[b-d5xbld3kvx] {
        padding-top: .8rem;
    }

.cancel-before[b-d5xbld3kvx] {
    margin-top: .6rem;
}

/* ---- cancelled date: a red "stamp" in the row, row content dimmed. It sits in the flex
   flow (not absolutely positioned) so it can never overlap the RSVP stats beside it. */
.group-item--cancelled > summary .group-item__name[b-d5xbld3kvx] {
    text-decoration: line-through;
    color: var(--muted);
}

.group-item--cancelled .rsvp-stats[b-d5xbld3kvx] {
    opacity: .6;
}

.cancel-watermark[b-d5xbld3kvx] {
    flex-shrink: 0;
    margin-inline: .35rem;
    padding: .05rem .75rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
    transform: rotate(-4deg);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 520px) {
    .cancel-watermark[b-d5xbld3kvx] {
        font-size: .8rem;
        letter-spacing: .08em;
        padding-inline: .5rem;
    }
}

.form-check-label .pill[b-d5xbld3kvx] {
    margin-left: .4rem;
}

/* ---- invited groups: who the ticked groups add up to */
.audience-stats[b-d5xbld3kvx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin: 1rem 0 .6rem;
}

.audience-stat[b-d5xbld3kvx] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

    .audience-stat b[b-d5xbld3kvx] {
        font-size: 1.35rem;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .audience-stat span[b-d5xbld3kvx] {
        font-size: .74rem;
        line-height: 1.25;
        color: var(--muted);
    }

/* ---- "View invites" modal. The lists inside are built by JS, so they get no scope attribute
   of their own — ::deep lets these rules reach them from the dialog. */
.invites-modal[b-d5xbld3kvx] {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(82vh, 42rem);
    padding: 1.25rem 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    overflow-y: auto;
}

    .invites-modal[b-d5xbld3kvx]::backdrop {
        background: rgba(8, 9, 12, .6);
    }

.invites-modal__head[b-d5xbld3kvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .invites-modal__head h2[b-d5xbld3kvx] {
        margin: 0;
        font-size: 1.15rem;
    }

/* Close button: an icon in the text colour (white in dark, near-black in light) that turns
   the accent red on hover — Bootstrap's own .btn-close draws a fixed black X that vanishes
   on the dark surface. */
.invites-modal__close[b-d5xbld3kvx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

    .invites-modal__close:hover[b-d5xbld3kvx] {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .invites-modal__close:focus-visible[b-d5xbld3kvx] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .invites-modal__close[b-d5xbld3kvx]  svg {
        width: 1.2rem;
        height: 1.2rem;
    }

.invites-modal__head h2:focus[b-d5xbld3kvx] {
    outline: none;
}

.invites-modal__intro[b-d5xbld3kvx] {
    margin: .4rem 0 0;
    font-size: .84rem;
}

.invites-modal__subhead[b-d5xbld3kvx] {
    margin: 1.25rem 0 .6rem;
}

    .invites-modal__subhead span[b-d5xbld3kvx] {
        color: var(--ink-2);
        font-weight: 500;
        letter-spacing: 0;
    }

.invites-modal[b-d5xbld3kvx]  .invite-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.invites-modal[b-d5xbld3kvx]  .invite-person {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .6rem;
}

.invites-modal[b-d5xbld3kvx]  .invite-person__name {
    font-weight: 600;
    font-size: .92rem;
}

.invites-modal[b-d5xbld3kvx]  .invite-note {
    font-size: .78rem;
    color: var(--muted);
}

.invites-modal[b-d5xbld3kvx]  .invite-empty {
    color: var(--muted);
    font-size: .86rem;
}

.invites-modal[b-d5xbld3kvx]  .invite-parent {
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.invites-modal[b-d5xbld3kvx]  .invite-kids {
    list-style: none;
    margin: .55rem 0 0 1rem;
    padding: 0 0 0 .9rem;
    border-left: 2px solid var(--line-strong);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .88rem;
}

/* ---- a date that falls in a club holiday: same stamp as "Session Cancelled", in the warning
   amber so the two read differently at a glance; the row is dimmed and its body is read-only */
.cancel-watermark--holiday[b-d5xbld3kvx] {
    border-color: var(--warn);
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.group-item--holiday > summary .group-item__name[b-d5xbld3kvx] {
    color: var(--muted);
}

.holiday-name[b-d5xbld3kvx] {
    font-size: .82rem;
    color: var(--muted);
}
/* /Components/Pages/Clubs/ClubSessionHistory.razor.rz.scp.css */
/* The session row styles (.sess-list, .sess-row and its parts, .sess-title, .sess-tick,
   .sess-meta and its variants, .sess-pill variants, .sess-date, .rsvp-stat variants) all live in
   wwwroot/app.css — shared with the Manage Club dashboard's Next/Previous 5 cards. */

.hist-year + .hist-year[b-jm0pcxtl3c] {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.hist-year__heading[b-jm0pcxtl3c] {
    margin: 0 0 .9rem;
}

.hist-month + .hist-month[b-jm0pcxtl3c] {
    margin-top: 1.35rem;
}

.hist-month__heading[b-jm0pcxtl3c] {
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 .3rem;
}
/* /Components/Pages/Clubs/ClubSessionRegister.razor.rz.scp.css */
/* ---------- header: the session's details ---------- */
.reg-header[b-xw6c4jtg18] {
    position: relative;
    margin-bottom: 1.25rem;
}

.reg-header__top[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.reg-header__title[b-xw6c4jtg18] {
    flex: 1 1 14rem;
    min-width: 0;
}

    .reg-header__title h1[b-xw6c4jtg18] {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .reg-header__title .eyebrow[b-xw6c4jtg18] {
        margin-bottom: .25rem;
    }

.reg-header__actions[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.reg-facts[b-xw6c4jtg18] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

    .reg-facts dt[b-xw6c4jtg18] {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin-bottom: .2rem;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }

        .reg-facts dt[b-xw6c4jtg18]  svg {
            width: .9rem;
            height: .9rem;
        }

    .reg-facts dd[b-xw6c4jtg18] {
        margin: 0;
        font-weight: 500;
    }

.reg-header--off .reg-header__top[b-xw6c4jtg18],
.reg-header--off .reg-facts[b-xw6c4jtg18] {
    opacity: .55;
}

.reg-alert[b-xw6c4jtg18] {
    margin-bottom: 1.25rem;
}

/* ---------- register ---------- */
.reg-stats[b-xw6c4jtg18] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: .85rem;
    color: var(--muted);
}

    .reg-stats b[b-xw6c4jtg18] {
        color: var(--ink);
        font-size: 1.05rem;
        font-variant-numeric: tabular-nums;
    }

.reg-stats__accepted b[b-xw6c4jtg18] {
    color: var(--ok);
}

.reg-stats__declined b[b-xw6c4jtg18] {
    color: var(--accent);
}

.reg-stats__attended b[b-xw6c4jtg18] {
    color: var(--ink);
}

.reg-note[b-xw6c4jtg18] {
    margin: -.25rem 0 1rem;
    font-size: .88rem;
}

.reg-subhead[b-xw6c4jtg18] {
    margin: 1.4rem 0 .5rem;
}

    .reg-subhead span[b-xw6c4jtg18] {
        color: var(--ink-2);
        font-weight: 500;
        letter-spacing: 0;
    }

.reg-none[b-xw6c4jtg18] {
    margin: 0;
    font-size: .88rem;
}

.reg-list[b-xw6c4jtg18] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reg-row[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .65rem 0;
    border-top: 1px solid var(--line);
}

    .reg-row:first-child[b-xw6c4jtg18] {
        border-top: 0;
    }

.reg-row__name[b-xw6c4jtg18] {
    flex: 1 1 8rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.reg-row__attend[b-xw6c4jtg18] {
    margin: 0;
    margin-left: auto;
    min-width: 8.5rem;
    display: flex;
    justify-content: flex-end;
}

.reg-pill--declined[b-xw6c4jtg18] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* juniors sit under their parent / guardian */
.reg-guardian[b-xw6c4jtg18] {
    margin-top: .9rem;
}

    .reg-guardian:first-of-type[b-xw6c4jtg18] {
        margin-top: 0;
    }

.reg-guardian__head[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 0 0 .1rem;
    font-size: .88rem;
}

.reg-guardian__name[b-xw6c4jtg18] {
    font-weight: 600;
}

.reg-list--juniors[b-xw6c4jtg18] {
    margin-left: 1.1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--line);
}

.reg-empty[b-xw6c4jtg18] {
    text-align: center;
    padding: 1.5rem 1rem;
}

.reg-empty__title[b-xw6c4jtg18] {
    font-weight: 600;
    margin: 0 0 .2rem;
}

/* ---------- the attended toggle ---------- */
.att-toggle[b-xw6c4jtg18] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 8.5rem;
    padding: .3rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

    .att-toggle:hover[b-xw6c4jtg18] {
        border-color: var(--ok);
        color: var(--ok);
    }

    .att-toggle:focus-visible[b-xw6c4jtg18] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .att-toggle:disabled[b-xw6c4jtg18] {
        opacity: .6;
        cursor: progress;
    }

    .att-toggle[b-xw6c4jtg18]  svg {
        width: .95rem;
        height: .95rem;
    }

.att-toggle--on[b-xw6c4jtg18] {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

    .att-toggle--on:hover[b-xw6c4jtg18] {
        background: color-mix(in srgb, var(--ok) 88%, #000);
        border-color: color-mix(in srgb, var(--ok) 88%, #000);
        color: #fff;
    }

.reg-row__attend.pill[b-xw6c4jtg18] {
    min-width: 0;
}

    .reg-row__attend.pill[b-xw6c4jtg18]  svg {
        width: .85rem;
        height: .85rem;
    }

/* ---------- the paid toggle / covered badge (same shape as the attended toggle) ---------- */
.reg-row__paid[b-xw6c4jtg18] {
    margin: 0;
    display: flex;
}

.paid-toggle[b-xw6c4jtg18] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

    .paid-toggle:hover[b-xw6c4jtg18] {
        border-color: var(--ok);
        color: var(--ok);
    }

    .paid-toggle:focus-visible[b-xw6c4jtg18] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .paid-toggle:disabled[b-xw6c4jtg18] {
        opacity: .6;
        cursor: progress;
    }

    .paid-toggle[b-xw6c4jtg18]  svg {
        width: .95rem;
        height: .95rem;
    }

.paid-toggle--on[b-xw6c4jtg18] {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

    .paid-toggle--on:hover[b-xw6c4jtg18] {
        background: color-mix(in srgb, var(--ok) 88%, #000);
        border-color: color-mix(in srgb, var(--ok) 88%, #000);
        color: #fff;
    }

.reg-row__paid.pill[b-xw6c4jtg18] {
    min-width: 0;
}

    .reg-row__paid.pill[b-xw6c4jtg18]  svg {
        width: .85rem;
        height: .85rem;
    }

/* A plan's session limit was used up, so the Paid toggle is back — this says why. */
.reg-row__coverage-note[b-xw6c4jtg18] {
    font-size: .75rem;
    color: var(--warn);
    align-self: center;
}

/* ---------- complete / reopen ---------- */
.reg-inline[b-xw6c4jtg18] {
    margin: 0;
}

.reg-done[b-xw6c4jtg18]  svg {
    width: .85rem;
    height: .85rem;
}

/* ---------- second line of a row: note + grading ---------- */
.reg-row__more[b-xw6c4jtg18] {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .4rem .75rem;
    padding-left: calc(2.1rem + .75rem); /* lines up under the name, past the avatar */
}

.reg-notebox[b-xw6c4jtg18] {
    flex: 1 1 auto;
    min-width: 0;
}

    .reg-notebox[open][b-xw6c4jtg18] {
        flex-basis: 100%;
    }

.reg-notebox__toggle[b-xw6c4jtg18] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

    .reg-notebox__toggle[b-xw6c4jtg18]::-webkit-details-marker {
        display: none;
    }

    .reg-notebox__toggle:hover[b-xw6c4jtg18] {
        color: var(--accent-hover);
        text-decoration: underline;
    }

    .reg-notebox__toggle:focus-visible[b-xw6c4jtg18] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    .reg-notebox__toggle[b-xw6c4jtg18]  svg,
.reg-notebox__read[b-xw6c4jtg18]  svg {
        width: .9rem;
        height: .9rem;
        flex-shrink: 0;
    }

.reg-notebox__form[b-xw6c4jtg18] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .35rem;
    max-width: 40rem;
}

.reg-notebox__actions[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    font-size: .8rem;
}

.reg-notebox__read[b-xw6c4jtg18] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    flex: 1 1 auto;
    margin: 0;
    font-size: .85rem;
    color: var(--ink-2);
    white-space: pre-line;
}

/* ---------- grading card (grading sessions only) ---------- */
.reg-grading[b-xw6c4jtg18] {
    margin-bottom: 1.25rem;
}

.reg-grading__body[b-xw6c4jtg18] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    align-items: start;
}

@media (max-width: 700px) {
    .reg-grading__body[b-xw6c4jtg18] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.reg-grading__lead[b-xw6c4jtg18] {
    margin: 0 0 .85rem;
    max-width: 38rem;
    color: var(--ink-2);
}

.reg-grading__stats[b-xw6c4jtg18] {
    margin-bottom: .85rem;
}

.reg-grading__actions[b-xw6c4jtg18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .75rem;
}

    .reg-grading__actions[b-xw6c4jtg18]  svg,
    .reg-grading__lead + form[b-xw6c4jtg18]  svg {
        width: 1rem;
        height: 1rem;
    }

/* An admin who isn't on the panel: say plainly why the sheet won't let them score. */
.reg-grading__note[b-xw6c4jtg18] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 .85rem;
    padding: .65rem .8rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    font-size: .86rem;
    color: var(--ink);
}

    .reg-grading__note[b-xw6c4jtg18]  svg {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        margin-top: .15rem;
        color: var(--warn);
    }

.reg-examiners[b-xw6c4jtg18] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}

.reg-examiner[b-xw6c4jtg18] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .88rem;
}

.reg-examiner__name[b-xw6c4jtg18],
.reg-examiner__chief[b-xw6c4jtg18] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    cursor: pointer;
}

    .reg-examiner__name input[b-xw6c4jtg18],
    .reg-examiner__chief input[b-xw6c4jtg18] {
        accent-color: var(--accent);
    }

.reg-examiner__chief[b-xw6c4jtg18] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

    .reg-examiner__chief:has(input:disabled)[b-xw6c4jtg18] {
        opacity: .45;
        cursor: default;
    }

    .reg-examiner__chief:has(input:checked)[b-xw6c4jtg18] {
        color: var(--accent);
    }

.reg-grading__qr[b-xw6c4jtg18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 12.5rem;
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: center;
}

    /* Always dark-on-white, so it scans in dark mode too. */
    .reg-grading__qr img[b-xw6c4jtg18] {
        width: 100%;
        max-width: 10.5rem;
        height: auto;
        padding: .4rem;
        border-radius: var(--radius-sm);
        background: #fff;
        image-rendering: pixelated;
    }

    .reg-grading__qr figcaption[b-xw6c4jtg18] {
        display: grid;
        gap: .25rem;
        font-size: .78rem;
        line-height: 1.4;
        color: var(--muted);
    }

        .reg-grading__qr figcaption strong[b-xw6c4jtg18] {
            font-size: .88rem;
            color: var(--ink);
        }

.reg-grading__url[b-xw6c4jtg18] {
    font-size: .72rem;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .reg-grading__qr[b-xw6c4jtg18] {
        width: auto;
        flex-direction: row;
        text-align: left;
    }

        .reg-grading__qr img[b-xw6c4jtg18] {
            width: 7.5rem;
        }
}

/* ---------- avatar + stamp (same look as the invitee's page) ---------- */
.avatar[b-xw6c4jtg18] {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.cancel-watermark[b-xw6c4jtg18] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    padding: .2rem 1.1rem;
    border: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-weight: 800;
    font-size: clamp(1.1rem, 5vw, 1.9rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
    pointer-events: none;
    user-select: none;
}

.cancel-watermark--holiday[b-xw6c4jtg18] {
    border-color: var(--warn);
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}
/* /Components/Pages/Clubs/ClubSubscriptionEdit.razor.rz.scp.css */
/* ---- form: one titled card per topic, two per row on wide screens (same shape as the session editor) */
.plan-grid[b-8dvxjudmqm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.plan-section--wide[b-8dvxjudmqm] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .plan-grid[b-8dvxjudmqm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- pairs of small number inputs */
.plan-pair[b-8dvxjudmqm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: .75rem;
}

.plan-groups[b-8dvxjudmqm] {
    margin-top: .5rem;
}

.plan-radio[b-8dvxjudmqm] {
    margin-bottom: .6rem;
}

.plan-radio__hint[b-8dvxjudmqm] {
    display: block;
    font-size: .8rem;
    color: var(--muted);
}

/* ---- price rows */
.price-rows[b-8dvxjudmqm] {
    display: grid;
    gap: .75rem;
    margin-bottom: .75rem;
}

.price-row[b-8dvxjudmqm] {
    display: grid;
    grid-template-columns: minmax(12rem, 1.3fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    align-items: end;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.price-row .form-label[b-8dvxjudmqm] {
    font-size: .8rem;
    margin-bottom: .2rem;
}

.price-row__remove[b-8dvxjudmqm] {
    margin-bottom: .2rem;
}

.price-row__hint[b-8dvxjudmqm] {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.price-row__hint:empty[b-8dvxjudmqm] {
    display: none;
}

@media (max-width: 700px) {
    .price-row[b-8dvxjudmqm] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .price-row__field--dur[b-8dvxjudmqm] {
        grid-column: 1 / -1;
    }

    .price-row__remove[b-8dvxjudmqm] {
        grid-column: 2;
        justify-self: end;
    }
}

/* ---- actions + image + retire */
.plan-actions[b-8dvxjudmqm] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.25rem 0 1.75rem;
}

.plan-image__row[b-8dvxjudmqm] {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .plan-image__row[b-8dvxjudmqm] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.plan-retire[b-8dvxjudmqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.plan-retire__title[b-8dvxjudmqm] {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 650;
}
/* /Components/Pages/Clubs/ClubSubscriptions.razor.rz.scp.css */
.plans-head[b-fdjhkpj0ne] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.plans-head h2[b-fdjhkpj0ne] {
    margin: 0 0 .25rem;
    font-size: 1.25rem;
}

.plans-head p[b-fdjhkpj0ne] {
    max-width: 60ch;
}

.plans-grid[b-fdjhkpj0ne] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
}

.plans-grid__item[b-fdjhkpj0ne] {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: transform .15s ease;
}

.plans-grid__item:hover[b-fdjhkpj0ne] {
    transform: translateY(-2px);
}

.plans-grid__item:focus-visible[b-fdjhkpj0ne] {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .plans-grid__item[b-fdjhkpj0ne] {
        transition: none;
    }

    .plans-grid__item:hover[b-fdjhkpj0ne] {
        transform: none;
    }
}

/* ---- member orders: requests awaiting payment, and paid orders needing attention */
.orders-panel[b-fdjhkpj0ne] {
    margin-bottom: 1.5rem;
}

.orders-panel--attention[b-fdjhkpj0ne] {
    border-color: var(--warn);
}

.order-row[b-fdjhkpj0ne] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
}

.order-row__who ul[b-fdjhkpj0ne] {
    margin: .3rem 0 0;
    padding-left: 1.1rem;
    font-size: .88rem;
}

.order-row__note[b-fdjhkpj0ne] {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--warn);
}

.order-row__actions[b-fdjhkpj0ne] {
    display: grid;
    gap: .5rem;
    justify-items: start;
    align-content: start;
}

.order-row__paid[b-fdjhkpj0ne] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .8rem;
}

.order-row__decline summary[b-fdjhkpj0ne] {
    cursor: pointer;
    font-size: .85rem;
    color: var(--link);
}
/* /Components/Pages/Clubs/ClubTeaching.razor.rz.scp.css */
.teaching-grid[b-qhpx57qens] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin-bottom: 0;
}

.teaching-group[b-qhpx57qens] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .85rem 1rem 1rem;
    margin: 0;
}

    .teaching-group legend[b-qhpx57qens] {
        float: none;
        width: auto;
        margin: 0 0 .5rem;
        padding: 0;
        font-size: .8rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--ink);
    }

    .teaching-group .form-check[b-qhpx57qens] {
        margin-bottom: .15rem;
    }

.teaching-group__only[b-qhpx57qens] {
    padding-bottom: .5rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--line);
}

.teaching-group__hint[b-qhpx57qens] {
    font-size: .8rem;
    margin: .1rem 0 .3rem;
}

.teaching-group__gbs[b-qhpx57qens] {
    margin-top: .55rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
}

.teaching-group__gbs-head[b-qhpx57qens] {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    margin: 0 0 .3rem;
}

/* browser dims disabled inputs; also fade the label so the exclusion reads clearly */
.teaching-group .form-check-input:disabled ~ .form-check-label[b-qhpx57qens] {
    opacity: .5;
}
/* /Components/Pages/Clubs/GradingScorecard.razor.rz.scp.css */
/* The live scoring sheet — same look as the approved mockup, on the app's own tokens. */
.gs[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* Result tints: pass steps of green, from faint to strong. */
    --gs-p1: color-mix(in srgb, var(--ok) 10%, var(--surface));
    --gs-p2: color-mix(in srgb, var(--ok) 22%, var(--surface));
    --gs-p3: color-mix(in srgb, var(--ok) 38%, var(--surface));
    --gs-p-text: color-mix(in srgb, var(--ok) 70%, var(--ink));
    --gs-fail-text: color-mix(in srgb, var(--accent) 80%, var(--ink));
    --gs-warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
    --gs-warn-text: color-mix(in srgb, var(--warn) 75%, var(--ink));
}

.gs .panel[b-qge53v4cd5] {
    margin: 0;
}

.gs-muted[b-qge53v4cd5] {
    color: var(--muted);
    font-size: .86rem;
}

.gs-small[b-qge53v4cd5] {
    font-size: .78rem;
}

.gs-right[b-qge53v4cd5] {
    text-align: right;
}

.gs-center[b-qge53v4cd5] {
    text-align: center;
}

.gs-nowrap[b-qge53v4cd5] {
    white-space: nowrap;
}

.gs-grow[b-qge53v4cd5] {
    flex: 1 1 auto;
}

.gs-label[b-qge53v4cd5] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.gs-empty h1[b-qge53v4cd5] {
    font-size: 1.4rem;
}

.gs-alert[b-qge53v4cd5] {
    margin: 0;
}

/* ---------- header ---------- */
.gs-head[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

    .gs-head h1[b-qge53v4cd5] {
        margin: .15rem 0 .25rem;
        font-size: 1.7rem;
    }

.gs-head__meta[b-qge53v4cd5] {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.gs-head__side[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

.gs-progress[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    color: var(--muted);
}

    .gs-progress strong[b-qge53v4cd5] {
        color: var(--ink);
    }

.gs-progress__bar[b-qge53v4cd5] {
    width: 8.5rem;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

    .gs-progress__bar span[b-qge53v4cd5] {
        display: block;
        height: 100%;
        background: var(--ok);
    }

/* ---------- segmented controls ---------- */
.gs-seg[b-qge53v4cd5] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

    .gs-seg button[b-qge53v4cd5] {
        min-height: 2.1rem;
        padding: 0 .85rem;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--muted);
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

        .gs-seg button.on[b-qge53v4cd5] {
            background: var(--ink);
            color: var(--surface);
        }

        .gs-seg button:focus-visible[b-qge53v4cd5] {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

.gs-seg__count[b-qge53v4cd5] {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ---------- banners ---------- */
.gs-banner[b-qge53v4cd5] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .95rem;
    border-radius: var(--radius);
    font-size: .9rem;
}

    .gs-banner[b-qge53v4cd5]  svg {
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
        margin-top: .1rem;
    }

.gs-banner--readonly[b-qge53v4cd5] {
    background: var(--gs-warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    color: var(--ink);
}

    .gs-banner--readonly[b-qge53v4cd5]  svg {
        color: var(--warn);
    }

.gs-banner--ok[b-qge53v4cd5] {
    background: var(--ok-soft);
    color: var(--gs-p-text);
    font-weight: 600;
}

/* ---------- how it's scored ---------- */
.gs-rules[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.gs-rules__line[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .6rem;
}

.gs-rules__title[b-qge53v4cd5] {
    font-weight: 700;
    font-size: .92rem;
}

.gs-rules__note[b-qge53v4cd5],
.gs-rules__panel[b-qge53v4cd5] {
    margin: 0;
    font-size: .84rem;
    color: var(--muted);
}

.gs-rules__panel[b-qge53v4cd5] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

    .gs-rules__panel[b-qge53v4cd5]  svg,
    .gs-rules__line[b-qge53v4cd5]  svg {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
    }

.gs-examiner--you[b-qge53v4cd5] {
    color: var(--ink);
    font-weight: 600;
}

.gs-qr[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: .25rem 0 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    max-width: 30rem;
}

    /* Dark on white always, so it scans in dark mode too. */
    .gs-qr img[b-qge53v4cd5] {
        width: 9rem;
        height: auto;
        padding: .35rem;
        border-radius: var(--radius-sm);
        background: #fff;
        image-rendering: pixelated;
    }

    .gs-qr figcaption[b-qge53v4cd5] {
        display: grid;
        gap: .25rem;
        font-size: .82rem;
        color: var(--muted);
    }

        .gs-qr figcaption strong[b-qge53v4cd5] {
            color: var(--ink);
        }

.gs-qr__url[b-qge53v4cd5] {
    font-size: .72rem;
    overflow-wrap: anywhere;
}

/* ---------- pills, chips, cells ---------- */
.gs-pill[b-qge53v4cd5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.5rem;
    padding: 0 .6rem;
    border-radius: var(--radius-pill);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.gs-st-pass[b-qge53v4cd5] {
    background: var(--ok-soft);
    color: var(--gs-p-text);
}

.gs-st-fail[b-qge53v4cd5] {
    background: var(--accent-soft);
    color: var(--gs-fail-text);
}

.gs-st-progress[b-qge53v4cd5] {
    background: var(--gs-warn-soft);
    color: var(--gs-warn-text);
}

.gs-st-none[b-qge53v4cd5] {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--line);
}

.gs-ex[b-qge53v4cd5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.75rem;
    padding: 0 .6rem 0 .25rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

    .gs-ex b[b-qge53v4cd5] {
        font-weight: 700;
    }

.gs-ex--low b[b-qge53v4cd5] {
    color: var(--gs-fail-text);
}

.gs-ex--none[b-qge53v4cd5] {
    color: var(--muted);
}

.gs-av[b-qge53v4cd5] {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--line);
    font-size: .6rem;
    font-weight: 700;
    color: var(--ink);
    flex-shrink: 0;
}

.gs-cell[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 3.2rem;
    padding: .45rem .35rem;
    border-radius: 8px;
    text-align: center;
}

    .gs-cell strong[b-qge53v4cd5] {
        font-size: 1.1rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .gs-cell span[b-qge53v4cd5] {
        font-size: .7rem;
        font-variant-numeric: tabular-nums;
        opacity: .85;
        white-space: nowrap;
    }

.gs-cell--big[b-qge53v4cd5] {
    width: 5.5rem;
}

    .gs-cell--big strong[b-qge53v4cd5] {
        font-size: 1.6rem;
    }

.gs-c-none[b-qge53v4cd5],
.gs-c-na[b-qge53v4cd5] {
    background: var(--surface-2);
    color: var(--muted);
}

.gs-c-na strong[b-qge53v4cd5] {
    font-size: .8rem;
    font-weight: 600;
}

.gs-c-fail[b-qge53v4cd5] {
    background: var(--accent-soft);
    color: var(--gs-fail-text);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.gs-c-p1[b-qge53v4cd5] {
    background: var(--gs-p1);
    color: var(--gs-p-text);
}

.gs-c-p2[b-qge53v4cd5] {
    background: var(--gs-p2);
    color: var(--gs-p-text);
}

.gs-c-p3[b-qge53v4cd5] {
    background: var(--gs-p3);
    color: var(--gs-p-text);
}

.gs[b-qge53v4cd5]  .gs-belt {
    display: inline-block;
    vertical-align: middle;
}

.gs-nobelt[b-qge53v4cd5] {
    font-size: .7rem;
    color: var(--muted);
}

/* ---------- score buttons ---------- */
.gs-scores[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.gs-sb[b-qge53v4cd5] {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 .4rem;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

    .gs-sb:hover:not(:disabled)[b-qge53v4cd5] {
        border-color: var(--ink);
    }

    .gs-sb:focus-visible[b-qge53v4cd5] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .gs-sb.low[b-qge53v4cd5] {
        color: var(--gs-fail-text);
    }

    .gs-sb.on[b-qge53v4cd5] {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--surface);
    }

        .gs-sb.on.low[b-qge53v4cd5] {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

    .gs-sb:disabled[b-qge53v4cd5] {
        cursor: default;
        opacity: .55;
    }

        .gs-sb:disabled.on[b-qge53v4cd5] {
            opacity: 1;
        }

.gs-scores--words .gs-sb[b-qge53v4cd5] {
    padding: 0 .8rem;
    font-size: .85rem;
}

.gs-others[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

    .gs-others:empty[b-qge53v4cd5] {
        display: none;
    }

.gs-others__label[b-qge53v4cd5] {
    font-size: .75rem;
    color: var(--muted);
}

.gs-comments[b-qge53v4cd5] {
    display: grid;
    gap: .35rem;
}

    .gs-comments:empty[b-qge53v4cd5] {
        display: none;
    }

.gs-comment[b-qge53v4cd5] {
    font-size: .88rem;
}

.gs-comment-read[b-qge53v4cd5] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    font-size: .84rem;
    color: var(--ink-2);
}

/* ---------- syllabus tooltip ---------- */
.gs-tip[b-qge53v4cd5] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.gs-tip__btn[b-qge53v4cd5] {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    font-style: italic;
    cursor: help;
}

    .gs-tip__btn:hover[b-qge53v4cd5],
    .gs-tip__btn:focus-visible[b-qge53v4cd5] {
        color: var(--ink);
        border-color: var(--ink);
    }

.gs-tip__bubble[b-qge53v4cd5] {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: min(21rem, 80vw);
    padding: .75rem .9rem;
    border-radius: 10px;
    background: var(--ink);
    color: var(--surface);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s;
}

.gs-tip:hover .gs-tip__bubble[b-qge53v4cd5],
.gs-tip:focus-within .gs-tip__bubble[b-qge53v4cd5] {
    opacity: 1;
    visibility: visible;
}

.gs-tip__title[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    font-weight: 800;
}

.gs-tip__foot[b-qge53v4cd5] {
    display: block;
    margin-top: .5rem;
    font-size: .7rem;
    opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
    .gs-tip__bubble[b-qge53v4cd5] {
        transition: none;
    }
}

/* ---------- scorecard view ---------- */
.gs-card-layout[b-qge53v4cd5] {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.gs-rail[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem;
}

.gs-rail__title[b-qge53v4cd5] {
    padding: .25rem .5rem .5rem;
}

.gs-cand[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .7rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .gs-cand:hover[b-qge53v4cd5] {
        background: var(--surface-2);
    }

    .gs-cand.on[b-qge53v4cd5] {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

.gs-cand__text[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.gs-cand__name[b-qge53v4cd5] {
    font-size: .9rem;
    font-weight: 600;
}

.gs-cand__belts[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: var(--muted);
}

.gs-card[b-qge53v4cd5] {
    padding: 0;
    min-width: 0;
}

.gs-card__head[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line);
}

.gs-avatar[b-qge53v4cd5] {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-weight: 800;
    flex-shrink: 0;
}

.gs-card__who[b-qge53v4cd5] {
    flex: 1 1 14rem;
    min-width: 0;
}

    .gs-card__who p[b-qge53v4cd5] {
        margin: .2rem 0 0;
    }

.gs-card__name[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

    .gs-card__name h2[b-qge53v4cd5] {
        margin: 0;
        font-size: 1.35rem;
    }

.gs-linkbtn[b-qge53v4cd5] {
    padding: 0;
    font-size: .8rem;
}

.gs-going[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .5rem .85rem;
    border-radius: 10px;
    background: var(--surface-2);
}

.gs-going__belts[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 600;
}

.gs-going__select[b-qge53v4cd5] {
    width: auto;
    min-width: 8rem;
}

.gs-nav[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

    .gs-nav .btn[b-qge53v4cd5]  svg {
        width: 1rem;
        height: 1rem;
        transform: rotate(-90deg);
    }

.gs-nav__pos[b-qge53v4cd5] {
    min-width: 2.75rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gs-rowhead[b-qge53v4cd5],
.gs-row[b-qge53v4cd5] {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr) 6.5rem;
    gap: .6rem 1.4rem;
    padding: .9rem 1.4rem;
}

.gs-rowhead[b-qge53v4cd5] {
    padding-bottom: .3rem;
    align-items: end;
}

.gs-rowhead--area[b-qge53v4cd5],
.gs-row--area[b-qge53v4cd5] {
    grid-template-columns: 14rem minmax(0, 1fr) 6.5rem;
}

.gs-row[b-qge53v4cd5] {
    border-top: 1px solid var(--line);
    align-items: start;
}

.gs-row__what[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-top: .3rem;
}

.gs-row__name[b-qge53v4cd5] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .gs-row__name strong[b-qge53v4cd5] {
        font-size: 1rem;
    }

.gs-row__score[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}

.gs-row__na[b-qge53v4cd5] {
    margin: .6rem 0 0;
}

.gs-combined[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    text-align: right;
}

.gs-none[b-qge53v4cd5] {
    margin: 0;
    padding: 1.25rem 1.4rem;
    color: var(--muted);
}

.gs-result[b-qge53v4cd5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
    margin: .5rem 1.4rem 1.4rem;
    padding: 1.1rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.gs-result__main[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}

.gs-result__line[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .9rem;
}

.gs-result__label[b-qge53v4cd5] {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--muted);
}

.gs-result--pass[b-qge53v4cd5] {
    color: var(--gs-p-text);
}

.gs-result--fail[b-qge53v4cd5] {
    color: var(--gs-fail-text);
}

.gs-result__note[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .88rem;
}

.gs-result__side[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    max-width: 13rem;
    text-align: right;
}

.gs-override[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .8rem;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .88rem;
}

.gs-override--applied[b-qge53v4cd5] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-style: dashed;
    border-color: var(--line-strong);
}

.gs-override__row[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    .gs-override__row .form-control[b-qge53v4cd5] {
        flex: 1 1 14rem;
    }

/* ---------- by-area view ---------- */
.gs-area[b-qge53v4cd5] {
    padding: 0;
}

.gs-area__head[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.1rem 1.4rem 1rem;
    border-bottom: 1px solid var(--line);
}

.gs-area__tabs[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.gs-area__title[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
}

    .gs-area__title h2[b-qge53v4cd5] {
        margin: 0 0 .2rem;
        font-size: 1.45rem;
    }

    .gs-area__title p[b-qge53v4cd5] {
        margin: 0;
        max-width: 44rem;
    }

.gs-area__next[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.gs-grp[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .6rem;
    padding: .6rem 1.4rem;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    font-size: .9rem;
    font-weight: 700;
}

.gs-area__foot[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--line);
}

    .gs-area__foot .gs-muted[b-qge53v4cd5] {
        flex: 1 1 18rem;
    }

/* ---------- grid view ---------- */
.gs-gridview[b-qge53v4cd5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-gridview__tools[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.gs-check[b-qge53v4cd5] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    cursor: pointer;
}

    .gs-check input[b-qge53v4cd5] {
        width: 1.1rem;
        height: 1.1rem;
        accent-color: var(--accent);
    }

.gs-table-wrap[b-qge53v4cd5] {
    overflow-x: auto;
}

.gs-table[b-qge53v4cd5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: .35rem;
    font-size: .88rem;
}

    .gs-table th[b-qge53v4cd5] {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 .25rem .35rem;
        border-bottom: 1px solid var(--line);
        vertical-align: bottom;
    }

    .gs-table td[b-qge53v4cd5] {
        vertical-align: middle;
        padding: 0 .25rem;
    }

        .gs-table td .gs-cell[b-qge53v4cd5] {
            min-width: 4.25rem;
        }

.gs-avg[b-qge53v4cd5] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gs-confirm[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

    .gs-confirm > div:first-child[b-qge53v4cd5] {
        flex: 1 1 22rem;
    }

    .gs-confirm p[b-qge53v4cd5] {
        margin: .25rem 0 0;
        max-width: 44rem;
    }

.gs-confirm__ask[b-qge53v4cd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1000px) {
    .gs-card-layout[b-qge53v4cd5] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Candidates become a strip you swipe along, above the scorecard. */
    .gs-rail[b-qge53v4cd5] {
        flex-direction: row;
        overflow-x: auto;
        gap: .4rem;
        padding: .5rem;
    }

    .gs-rail__title[b-qge53v4cd5] {
        display: none;
    }

    .gs-cand[b-qge53v4cd5] {
        flex: 0 0 auto;
        width: auto;
        max-width: 15rem;
        border-color: var(--line);
    }
}

@media (max-width: 760px) {
    .gs-head__side[b-qge53v4cd5] {
        align-items: stretch;
        width: 100%;
    }

    .gs-seg--views[b-qge53v4cd5] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gs-hide-sm[b-qge53v4cd5] {
        display: none;
    }

    /* The areas as a 2-column grid of buttons, so every one is visible and easy to tap. */
    .gs-seg--areas[b-qge53v4cd5] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

        .gs-seg--areas button[b-qge53v4cd5] {
            white-space: normal;
            padding: .45rem .5rem;
            line-height: 1.25;
        }

    .gs-rowhead[b-qge53v4cd5] {
        display: none;
    }

    .gs-row[b-qge53v4cd5],
    .gs-row--area[b-qge53v4cd5] {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .9rem 1rem;
    }

    .gs-row__score[b-qge53v4cd5] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .gs-combined[b-qge53v4cd5] {
        grid-column: 2;
        grid-row: 1;
    }

    .gs-cell--big[b-qge53v4cd5] {
        width: 4.25rem;
    }

    /* Score buttons in rows of five, big enough for a thumb. */
    .gs-scores:not(.gs-scores--words)[b-qge53v4cd5] {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .gs-sb[b-qge53v4cd5] {
        min-width: 0;
        width: 100%;
    }

    .gs-card__head[b-qge53v4cd5],
    .gs-area__head[b-qge53v4cd5],
    .gs-grp[b-qge53v4cd5],
    .gs-area__foot[b-qge53v4cd5] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .gs-result[b-qge53v4cd5] {
        grid-template-columns: minmax(0, 1fr);
        margin: .5rem 1rem 1rem;
    }

    .gs-result__side[b-qge53v4cd5] {
        align-items: stretch;
        max-width: none;
        text-align: left;
    }

    .gs-going[b-qge53v4cd5] {
        flex: 1 1 100%;
        align-items: flex-start;
    }

    .gs-qr[b-qge53v4cd5] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Clubs/MySubscriptions.razor.rz.scp.css */
.ms-status[b-cqubwe8375] {
    margin-top: 1rem;
}

/* People down the left, the basket kept in view on the right; one column on narrow screens. */
.ms-layout[b-cqubwe8375] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: 1.25rem;
    align-items: start;
    margin-top: 1.25rem;
}

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

.ms-people[b-cqubwe8375] {
    display: grid;
    gap: 1.25rem;
}

.ms-side[b-cqubwe8375] {
    display: grid;
    gap: 1.25rem;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
}

@media (max-width: 960px) {
    .ms-side[b-cqubwe8375] {
        position: static;
    }

    /* On a phone a basket with something in it goes first, so it isn't a long scroll away. */
    .ms-layout--has-basket .ms-side[b-cqubwe8375] {
        order: -1;
    }
}

/* ---- a person */
.ms-person__head[b-cqubwe8375] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

    .ms-person__head h2[b-cqubwe8375] {
        margin: 0;
        font-size: 1.15rem;
    }

.ms-person__sub[b-cqubwe8375] {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}

.ms-none[b-cqubwe8375] {
    color: var(--muted);
    margin: 0 0 .5rem;
}

/* ---- a current subscription */
.ms-sub[b-cqubwe8375] {
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.ms-sub__head[b-cqubwe8375] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin-bottom: .5rem;
}

    .ms-sub__head h3[b-cqubwe8375] {
        margin: 0;
        font-size: 1rem;
        font-weight: 650;
    }

.ms-sub__via[b-cqubwe8375] {
    font-size: .82rem;
    color: var(--muted);
}

.ms-facts[b-cqubwe8375] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .5rem 1.25rem;
    margin: 0 0 .5rem;
}

    .ms-facts dt[b-cqubwe8375] {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .ms-facts dd[b-cqubwe8375] {
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

.ms-pause[b-cqubwe8375] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    padding: .45rem .7rem;
    margin-bottom: .5rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    font-size: .88rem;
}

.ms-actions[b-cqubwe8375] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.ms-details > summary[b-cqubwe8375] {
    cursor: pointer;
    font-size: .875rem;
    color: var(--link);
    list-style: none;
}

    .ms-details > summary[b-cqubwe8375]::-webkit-details-marker {
        display: none;
    }

.ms-details[open][b-cqubwe8375] {
    flex-basis: 100%;
    order: 10;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.ms-form-grid[b-cqubwe8375] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: .6rem .9rem;
    align-items: end;
    margin-top: .5rem;
}

.ms-form-grid__wide[b-cqubwe8375] {
    grid-column: 1 / -1;
}

.ms-form-grid > .btn[b-cqubwe8375] {
    justify-self: start;
}

.ms-hint[b-cqubwe8375] {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
}

.ms-past[b-cqubwe8375],
.ms-unavailable[b-cqubwe8375] {
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--muted);
}

    .ms-past summary[b-cqubwe8375],
    .ms-unavailable summary[b-cqubwe8375] {
        cursor: pointer;
    }

    .ms-past ul[b-cqubwe8375],
    .ms-unavailable ul[b-cqubwe8375] {
        margin: .4rem 0 0;
        padding-left: 1.1rem;
    }

/* ---- plans to buy: the card, and under it the option + add form */
.ms-plans[b-cqubwe8375] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.ms-plan[b-cqubwe8375] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ms-plan__form[b-cqubwe8375] {
    display: grid;
    gap: .5rem;
}

    .ms-plan__form .btn[b-cqubwe8375] {
        justify-self: start;
    }

.ms-plan__freq .form-check[b-cqubwe8375] {
    font-size: .875rem;
}

.ms-plan__renew[b-cqubwe8375] {
    font-size: .875rem;
}

.ms-plan__renew-hint[b-cqubwe8375],
.ms-plan__rolling[b-cqubwe8375] {
    display: block;
    font-size: .78rem;
    color: var(--muted);
}

.ms-plan__rolling[b-cqubwe8375] {
    margin: 0;
}

/* "Auto-renews" / "Rolling monthly" beside the status pill. */
.ms-renews[b-cqubwe8375] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

    .ms-renews[b-cqubwe8375]  svg {
        width: .8rem;
        height: .8rem;
    }

/* ---- basket */
.ms-basket .panel-head h2[b-cqubwe8375] {
    font-size: 1.1rem;
}

.ms-lines[b-cqubwe8375] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-line[b-cqubwe8375] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem;
    align-items: start;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}

.ms-line__what[b-cqubwe8375] {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.ms-line__desc[b-cqubwe8375] {
    font-weight: 600;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.ms-line__terms[b-cqubwe8375] {
    font-size: .78rem;
    color: var(--muted);
}

.ms-line__amount[b-cqubwe8375] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ms-line__remove[b-cqubwe8375] {
    margin: 0;
}

.ms-notices[b-cqubwe8375] {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
    font-size: .8rem;
    color: var(--warn);
}

.ms-total[b-cqubwe8375] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: .8rem;
    font-size: 1rem;
}

    .ms-total strong[b-cqubwe8375] {
        font-size: 1.35rem;
        font-variant-numeric: tabular-nums;
    }

.ms-then[b-cqubwe8375] {
    margin: .3rem 0 0;
    font-size: .8rem;
    color: var(--muted);
}

.ms-checkout[b-cqubwe8375] {
    margin-top: 1rem;
}

.ms-secure[b-cqubwe8375] {
    margin: .5rem 0 0;
    font-size: .75rem;
    color: var(--muted);
}

/* ---- requests */
.ms-request[b-cqubwe8375] {
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .875rem;
}

    .ms-request ul[b-cqubwe8375] {
        margin: .35rem 0 0;
        padding-left: 1.1rem;
    }

.ms-request__when[b-cqubwe8375] {
    margin-left: .4rem;
    color: var(--muted);
}

.ms-request__note[b-cqubwe8375] {
    margin: .3rem 0 0;
    color: var(--muted);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------- signed-out hero ---------- */
.home-hero[b-qhi1wper26] {
    max-width: 46rem;
    padding: clamp(1.5rem, 5vw, 4rem) 0;
}

.home-hero[b-qhi1wper26]  .hero-mark {
    width: 84px;
    height: 84px;
    color: var(--accent);
    margin-bottom: 1.4rem;
}

.home-hero h1[b-qhi1wper26] {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
}

.home-hero .lead-serif[b-qhi1wper26] {
    max-width: 40ch;
    margin-bottom: 1.8rem;
}

.hero-actions[b-qhi1wper26] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ---------- dashboard ---------- */
.dash-header[b-qhi1wper26] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

    .dash-header h1[b-qhi1wper26] {
        margin-bottom: 0;
    }

.dash-intro[b-qhi1wper26] {
    max-width: 42ch;
    margin-bottom: 1.5rem;
}

.dash-actions[b-qhi1wper26] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.75rem;
}

/* ---------- entry cards ---------- */
.entry-cards[b-qhi1wper26] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: 60rem;
}

.entry-card[b-qhi1wper26] {
    position: relative;
    min-height: 15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.entry-card[b-qhi1wper26]  .entry-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--ink);
    opacity: .10;
    pointer-events: none;
}

.entry-card__scrim[b-qhi1wper26] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--surface) 12%,
        color-mix(in srgb, var(--surface) 55%, transparent) 45%,
        transparent 100%);
}

.entry-card__body[b-qhi1wper26] {
    position: relative;
    padding: 1.5rem;
}

.entry-card__title[b-qhi1wper26] {
    margin: 0 0 .35rem;
}

.entry-card__sub[b-qhi1wper26] {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    max-width: 32ch;
}

.entry-card__cta[b-qhi1wper26] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    color: var(--accent);
}

/* .club-card* + .club-cards now live in app.css (shared). Just the dashboard spacing here. */
.club-cards[b-qhi1wper26] {
    margin-bottom: 1.5rem;
}

.entry-card[b-qhi1wper26]  .entry-card__arrow {
    width: 1rem;
    height: 1rem;
    transition: transform .15s ease;
}

.entry-card:hover[b-qhi1wper26] {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--lift);
}

    .entry-card:hover[b-qhi1wper26]  .entry-card__art {
        opacity: .16;
    }

    .entry-card:hover[b-qhi1wper26]  .entry-card__arrow {
        transform: translateX(3px);
    }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .entry-card[b-qhi1wper26]  .entry-card__art {
        opacity: .14;
    }

    :root:not([data-theme="light"]) .entry-card:hover[b-qhi1wper26]  .entry-card__art {
        opacity: .22;
    }
}

:root[data-theme="dark"] .entry-card[b-qhi1wper26]  .entry-card__art {
    opacity: .14;
}

:root[data-theme="dark"] .entry-card:hover[b-qhi1wper26]  .entry-card__art {
    opacity: .22;
}
/* /Components/Pages/Messages/ClubMessageCard.razor.rz.scp.css */
/* The wrapper is the size container (a container can't be styled by its own queries or units, only
   what's inside it): the cqw sizes below follow its width, which is the card's. */
.mcard-scope[b-wz2ofbkopr] {
    container: mcard / inline-size;
    max-width: 48rem;
}

/* "Fight Night": dark whatever the theme, like a poster — white type needs a dark ground to read on. */
.mcard[b-wz2ofbkopr] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 68cqw; /* about 3:2 (cqw = the card's width); a long message makes it taller */
    background: #0b0c0f;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: #f4f1ec;
    font-family: "Archivo", system-ui, sans-serif;
}

/* the club's background image, under a scrim so the type always reads */
.mcard:not(.mcard--plain)[b-wz2ofbkopr]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center 28%;
}

.mcard[b-wz2ofbkopr]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9, 10, 13, .84) 0%, rgba(9, 10, 13, .56) 40%, rgba(9, 10, 13, .92) 100%);
}

/* ---------- top: logo + club ---------- */
.mcard__top[b-wz2ofbkopr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.9rem 2.5rem 0;
}

.mcard__logo[b-wz2ofbkopr] {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65);
}

.mcard__club[b-wz2ofbkopr] {
    flex: 1;
    min-width: 0;
}

.mcard__club-name[b-wz2ofbkopr] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Archivo Black", "Archivo", sans-serif;
    font-size: .95rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.mcard__kind[b-wz2ofbkopr] {
    margin: .3rem 0 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #ff7377;
}

.mcard__about[b-wz2ofbkopr] {
    flex-shrink: 0;
    padding: .5rem .85rem;
    border: 1.5px solid #d63a3f;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- the red band: what it's about ---------- */
.mcard__band[b-wz2ofbkopr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: 1.6rem;
    padding: .95rem 3.9rem .95rem 2.5rem;
    background: #d63a3f;
    clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
    color: #fff;
}

.mcard__band-title[b-wz2ofbkopr] {
    font-family: "Archivo Black", "Archivo", sans-serif;
    font-size: 1.4rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.mcard__band-when[b-wz2ofbkopr] {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------- the message ---------- */
.mcard__msg[b-wz2ofbkopr] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 3.5rem;
    text-align: center;
}

.mcard__stack[b-wz2ofbkopr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    max-width: 100%;
}

/* Font sizes for the hero text and the headline are set inline, from their length (see the component). */
.mcard__caps[b-wz2ofbkopr] {
    margin: 0;
    max-width: 100%;
    font-family: "Archivo Black", "Archivo", sans-serif;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -.005em;
    text-wrap: balance;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}

.mcard__caps--outline[b-wz2ofbkopr] {
    color: transparent;
    -webkit-text-stroke: 2px #f4f1ec;
    text-shadow: none;
}

.mcard__sentence[b-wz2ofbkopr] {
    margin: 0;
    max-width: min(100%, 40rem); /* keeps a long note to a comfortable line length */
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.006em;
    text-wrap: balance;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.mcard__sub[b-wz2ofbkopr] {
    margin: 0;
    font-family: "Archivo Black", "Archivo", sans-serif;
    font-size: 2.2rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: #ff7377;
}

.mcard__para[b-wz2ofbkopr] {
    margin: .4rem 0 0;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #e4e1dc;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.mcard__cta[b-wz2ofbkopr] {
    margin-top: .7rem;
    padding: .9rem 1.9rem;
    background: #d63a3f;
    color: #fff;
    font-family: "Archivo Black", "Archivo", sans-serif;
    font-size: .85rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}

    .mcard__cta:hover[b-wz2ofbkopr],
    .mcard__cta:focus-visible[b-wz2ofbkopr] {
        background: #ea4b50;
        color: #fff;
    }

    .mcard__cta:focus-visible[b-wz2ofbkopr] {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }

/* ---------- facts along the bottom ---------- */
.mcard__facts[b-wz2ofbkopr] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    margin: 0;
    padding: 0 2.5rem 1.9rem;
}

.mcard__fact[b-wz2ofbkopr] {
    flex: 1 1 8rem;
    min-width: 0;
    padding-top: .65rem;
    border-top: 2px solid #d63a3f;
}

.mcard__fact-label[b-wz2ofbkopr] {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #b3b0ab;
}

.mcard__fact-value[b-wz2ofbkopr] {
    display: block;
    margin-top: .3rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Narrow cards (a phone, or a tight column): snugger padding, and the "About …" pill drops onto its own
   line rather than squeezing the club's name. Keyed to the card's own width, not the screen's. */
@container mcard (max-width: 34rem) {
    .mcard__top[b-wz2ofbkopr] {
        flex-wrap: wrap;
        padding: 1.3rem 1.3rem 0;
    }

    .mcard__club[b-wz2ofbkopr] {
        flex-basis: 8rem;
    }

    /* let a long club name wrap rather than be cut off */
    .mcard__club-name[b-wz2ofbkopr] {
        white-space: normal;
        letter-spacing: .14em;
    }

    .mcard__band[b-wz2ofbkopr] {
        margin-top: 1.2rem;
        padding: .8rem 2.6rem .8rem 1.3rem;
    }

    .mcard__band-title[b-wz2ofbkopr] {
        font-size: 1.15rem;
    }

    .mcard__msg[b-wz2ofbkopr] {
        padding: 1.3rem 1.3rem;
    }

    .mcard__facts[b-wz2ofbkopr] {
        padding: 0 1.3rem 1.3rem;
        gap: .9rem 1.2rem;
    }

    .mcard__fact[b-wz2ofbkopr] {
        flex-basis: 40%;
    }
}