body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: var(--brand-page, #f4f4f4);
    color: var(--brand-text, #222);
}

.app-header {
    background-color: var(--brand-primary, #222);
    color: var(--brand-on-primary, white);
    text-align: center;
    padding: 20px;
}

.app-header h1 {
    margin: 0;
    font-size: 24px;
}

.member-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px;
    background-color: var(--brand-card, white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--brand-card-text, #222);
}

.member-nav a,
.member-nav button {
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.member-nav a:hover,
.member-nav button:hover,
.member-nav a:focus-visible,
.member-nav button:focus-visible,
.member-nav a[aria-current="page"] {
    background-color: var(--brand-primary, #222);
    color: var(--brand-on-primary, white);
}

.app-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 20px;
}

.welcome-card {
    background-color: var(--brand-card, white);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--brand-card-text, #222);
}

.welcome-card h2 {
    margin-top: 0;
}

.welcome-card p {
    font-size: 17px;
    line-height: 1.5;
}

#testButton {
    background-color: var(--brand-primary, #222);
    color: var(--brand-on-primary, white);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
}

#testButton:hover {
    opacity: 0.8;
}

#message {
    font-weight: bold;
    margin-top: 20px;
}

/* ----------------------------------
   Member Profile
---------------------------------- */

.profile-page {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--brand-card-text, #222);
}

.profile-page-content {
    max-width: 900px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.profile-photo-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    font-size: 32px;
    font-weight: bold;
    flex-shrink: 0;
}

.profile-heading h2 {
    margin: 0 0 6px;
}

.profile-location {
    margin: 0;
    opacity: 0.75;
}

.profile-header-roles {
    margin: 6px 0 0;
    line-height: 1.4;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.profile-preview-banner {
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 2px solid rgba(90, 45, 120, 0.55);
    border-radius: 10px;
    background-color: rgba(90, 45, 120, 0.08);
}

.profile-preview-banner p {
    margin: 0;
    font-weight: bold;
}

@media (max-width: 520px) {

    .profile-preview-banner {
        align-items: stretch;
        flex-direction: column;
    }

}

.profile-action-button {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid currentColor;
    border-radius: 6px;
    text-decoration: none;
}

.profile-section {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.profile-section h3 {
    margin-top: 0;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );
    gap: 16px;
}

.profile-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-detail-label {
    font-size: 0.85rem;
    font-weight: bold;
    opacity: 0.7;
}

.profile-muted {
    opacity: 0.65;
    font-style: italic;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.profile-role-badge {
    padding: 6px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.9rem;
}

.profile-sport-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-sport-tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 11px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.04);
    line-height: 1.25;
}

.profile-footer-actions {
    margin-top: 30px;
}

@media (max-width: 600px) {

    .profile-page {
        padding: 22px 18px;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-heading {
        min-width: 0;
    }

    .profile-header-roles {
        overflow-wrap: anywhere;
    }

    .profile-details-grid {
        grid-template-columns: 1fr;
    }

}

.settings-notice {
    padding: 14px 16px;
    border-left: 4px solid #7b5a24;
    border-radius: 6px;
    background: #fff8e8;
}

.settings-toolbar,
.settings-save-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.settings-save-panel > div {
    flex: 1 1 420px;
}

.settings-save-panel p {
    margin: 6px 0;
}

.button-secondary {
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    cursor: pointer;
}

.question-manager-list {
    display: grid;
    gap: 18px;
}

.membership-dues-type-card h4 {
    margin: 0 0 16px;
}

.membership-dues-type-card textarea {
    resize: vertical;
}

.membership-type-eligibility-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.membership-type-eligibility-panel h5 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.country-picker {
    margin-top: 10px;
}

.country-picker summary {
    cursor: pointer;
    font-weight: 600;
}

.selected-country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    margin-top: 10px;
}

.selected-country-chip {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    cursor: pointer;
}

.country-checkbox-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    max-height: 220px;
    margin-top: 10px;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.country-checkbox-list .checkbox-option {
    min-width: 0;
    overflow-wrap: anywhere;
}

.membership-version-detail-list {
    display: grid;
    gap: 16px;
}

.membership-version-detail-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.membership-version-detail-card h3 {
    margin: 0 0 16px;
}

.membership-version-detail-card dl,
.membership-version-detail-card dl div {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.membership-version-detail-card dl {
    gap: 14px;
}

.membership-version-detail-card dt {
    font-weight: 700;
}

.membership-version-detail-card dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .country-checkbox-list {
        grid-template-columns: 1fr;
    }
}

.question-manager-card {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    background: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: var(--brand-card-text, #222);
}

.question-manager-card-inactive {
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--brand-card, white);
    opacity: 0.78;
 color: var(--brand-card-text, #222); }

.question-manager-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.question-manager-heading h3 {
    margin: 0;
}

.question-status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: bold;
}

.question-status.active {
    background: #e3f3e7;
    color: #245b31;
}

.question-status.inactive {
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.question-manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.question-options-panel,
.question-explanation-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.system-options-source {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
}

.question-manager-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.question-manager-actions p {
    margin: 0;
}

.question-manager-action-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.button-danger {
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid #9f1d1d;
    border-radius: 6px;
    background: #b42323;
    color: white;
    font: inherit;
    cursor: pointer;
}

.button-danger:hover,
.button-danger:focus-visible {
    background: #8f1818;
}

.admin-confirm-dialog {
    width: min(520px, calc(100% - 40px));
    box-sizing: border-box;
    padding: 24px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.admin-confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.admin-confirm-dialog h2 {
    margin-top: 0;
}

.admin-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

.application-preview-dialog {
    width: min(900px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--brand-page, #f4f4f4);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    overflow: auto;
}

.application-preview-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.application-preview-heading {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.application-preview-heading h2,
.application-preview-heading p {
    margin: 0;
}

.application-preview-dialog > .settings-notice {
    margin: 20px 24px 0;
}

.application-preview-content {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.application-preview-content .application-form-section {
    margin: 0;
}

.settings-version-history {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
}

#applicationVersionHistoryList {
    display: grid;
    gap: 10px;
}

.version-history-item {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.version-history-item:hover,
.version-history-item:focus-visible {
    border-color: currentColor;
    background: rgba(0, 0, 0, 0.03);
}

.version-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px 0;
}

.version-question-list {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.version-question-card {
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.version-question-card h3,
.version-question-card p {
    margin: 0 0 6px;
}

.preview-question {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

@media (max-width: 700px) {
    .question-manager-grid {
        grid-template-columns: 1fr;
    }

    .question-manager-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .question-manager-action-buttons,
    .application-preview-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .application-preview-dialog {
        width: calc(100% - 16px);
        max-height: calc(100vh - 16px);
    }
}

/* ----------------------------------
   Administration
---------------------------------- */

.membership-application-page {
    max-width: 850px;
}

.membership-status-page {
    max-width: 760px;
}

.membership-progress-card {
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--brand-card-text, #222);
}

.membership-progress-card h3 {
    margin-top: 0;
}

.membership-progress-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.membership-progress-details div {
    min-width: 0;
    padding: 14px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.05);
    overflow-wrap: anywhere;
}

.membership-progress-details dt {
    font-weight: bold;
}

.membership-progress-details dd {
    margin: 4px 0 0;
}

.application-heading-card,
.application-verification-card,
.application-form-placeholder,
.application-form-section {
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--brand-card-text, #222);
}

.application-status-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.application-status-summary div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.05);
}

.application-status-summary span {
    font-size: 0.88rem;
}

.application-heading-card h2,
.application-heading-card p,
.application-verification-card h3 {
    margin-top: 4px;
}

.application-verification-card {
    border: 2px solid rgba(90, 45, 120, 0.38);
}

.application-verification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.application-verification-actions button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    cursor: pointer;
}

.application-form-section h3 {
    margin-top: 0;
}

.application-custom-question + .application-custom-question {
    margin-top: 1.5rem;
}

.configurable-text-question {
    display: grid;
    gap: 8px;
    min-width: 0;
    font-weight: bold;
}

.configurable-text-question input,
.configurable-text-question textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #777;
    border-radius: 6px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    font-weight: normal;
}

.configurable-text-question textarea {
    min-height: 132px;
    resize: vertical;
}

.membership-type-fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.membership-type-fieldset legend {
    margin-bottom: 12px;
    font-weight: bold;
}

.membership-type-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.membership-type-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    cursor: pointer;
}

.membership-type-card:has(input:checked) {
    border-color: rgba(90, 45, 120, 0.8);
    background-color: rgba(90, 45, 120, 0.08);
}

.membership-type-card input {
    margin-top: 3px;
    flex-shrink: 0;
}

.membership-type-card > span,
.membership-type-card strong,
.membership-type-card span {
    display: block;
    min-width: 0;
}

.membership-type-card strong,
.membership-type-price {
    margin-bottom: 7px;
}

.membership-type-price {
    font-weight: bold;
}

.application-document-placeholders,
.application-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

.application-document-placeholders button,
.application-form-actions button,
.selected-sponsor button,
.sponsor-search-results button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
}

.application-form-actions button,
.selected-sponsor button,
.sponsor-search-results button {
    cursor: pointer;
}

.sponsor-search-results {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.sponsor-search-results button {
    text-align: left;
}

.selected-sponsor {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
}

.selected-sponsor span,
.selected-sponsor strong {
    display: block;
    margin-bottom: 6px;
}

.sponsor-request-option {
    margin-top: 20px;
}

.application-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-weight: bold;
}

.application-or-divider::before,
.application-or-divider::after {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
    flex: 1;
}

.application-fieldset,
.application-reference {
    min-width: 0;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.application-fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 20px 0 0;
}

.application-save-section {
    border: 2px solid rgba(90, 45, 120, 0.38);
}

@media (max-width: 600px) {

    .application-status-summary {
        grid-template-columns: 1fr;
    }

    .membership-type-cards {
        grid-template-columns: 1fr;
    }

    .application-form-section {
        padding: 20px 16px;
    }

    .application-document-placeholders,
    .application-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

}

.admin-page,
.admin-members-page,
.admin-member-page {
    max-width: 1200px;
}

.admin-manage-link {
    font-weight: bold;
    white-space: nowrap;
}

.admin-detail-card {
    box-sizing: border-box;
    margin-top: 24px;
    padding: 24px;
    border-radius: 12px;
    background: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow-wrap: anywhere;
    color: var(--brand-card-text, #222);
}

.admin-detail-card h3 {
    margin-top: 0;
}

.super-admin-indicator {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(90, 45, 120, 0.55);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: bold;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-detail-grid div {
    min-width: 0;
}

.admin-detail-grid dt {
    font-weight: bold;
}

.admin-detail-grid dd {
    margin: 4px 0 0;
}

.admin-uid {
    color: inherit;
    font-size: 0.88rem;
}

.member-history-list {
    display: grid;
    gap: 16px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.member-history-list li {
    padding: 16px 18px;
    border-left: 4px solid var(--brand-accent-border, #667788);
    border-radius: 0 8px 8px 0;
    background: var(--brand-card);
}

.member-history-list time,
.member-history-list strong {
    display: block;
}

.member-history-list time,
.member-history-actor {
    color: inherit;
    font-size: 0.88rem;
}

.member-history-list strong {
    margin-top: 4px;
}

.member-history-list p {
    margin: 8px 0 0;
}

.member-history-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.member-history-download-status {
    margin: 10px 0 0;
}

.admin-page-heading {
    padding: 24px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--brand-card-text, #222);
}

.admin-page-heading h2,
.admin-page-heading p {
    margin: 4px 0;
}

.email-help-link {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background-color: var(--brand-primary, #222);
    color: var(--brand-on-primary, white);
    font-weight: bold;
    text-decoration: none;
}

.email-help-link:hover,
.email-help-link:focus-visible {
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.email-help-page article {
    margin-top: 24px;
}

.email-help-page h4 {
    margin-bottom: 8px;
}

.email-help-page li + li {
    margin-top: 8px;
}

.email-help-table-container {
    margin: 18px 0;
    overflow-x: auto;
}

.email-help-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.email-help-table th,
.email-help-table td {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: left;
    vertical-align: top;
}

.email-help-table thead th {
    background-color: rgba(0, 0, 0, 0.06);
}

.email-help-troubleshooting {
    margin-top: 22px;
    padding: 16px;
    border-left: 4px solid #a65b00;
    border-radius: 6px;
    background-color: #fff4df;
}

.email-help-troubleshooting h4,
.email-help-troubleshooting p,
.email-help-page .settings-notice p {
    margin-top: 0;
}

.email-help-troubleshooting p:last-child,
.email-help-page .settings-notice p:last-child {
    margin-bottom: 0;
}

.destructive-tool-panel {
    border-color: #a65b00;
}

.destructive-action-button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #7b3f00;
    border-radius: 6px;
    background-color: #fff4df;
    color: #522a00;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

.destructive-action-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.destructive-action-button:focus-visible {
    outline: 3px solid rgba(0, 90, 180, 0.45);
    outline-offset: 2px;
}

.dashboard-card-admin {
    border-color: var(--brand-accent-border, #667788);
}

.admin-search-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 24px 0 16px;
}

.admin-search-field label {
    font-weight: bold;
}

.admin-search-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
}

.admin-search-field input:focus-visible {
    outline: 3px solid rgba(0, 90, 180, 0.45);
    outline-offset: 2px;
}

.admin-members-filter {
    max-width: 320px;
    margin-bottom: 16px;
}

.admin-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}

.admin-sort-button span {
    min-width: 1em;
}

.admin-sort-button:focus-visible {
    outline: 3px solid rgba(0, 90, 180, 0.45);
    outline-offset: 3px;
}

.admin-table-container {
    margin-top: 18px;
}

.admin-members-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.admin-members-table th,
.admin-members-table td {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    text-align: left;
    vertical-align: top;
}

.admin-members-table th {
    background-color: rgba(0, 0, 0, 0.06);
}

@media (max-width: 760px) {

    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-members-table,
    .admin-members-table tbody,
    .admin-members-table tr,
    .admin-members-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .admin-members-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .admin-members-table tr {
        margin-bottom: 18px;
        border: 1px solid rgba(0, 0, 0, 0.18);
        border-radius: 10px;
        overflow: hidden;
        background-color: var(--brand-card, white);
        color: var(--brand-card-text, #222);
}

    .admin-members-table td {
        display: grid;
        grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
        gap: 12px;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        overflow-wrap: anywhere;
    }

    .admin-members-table td:last-child {
        border-bottom: 0;
    }

    .admin-members-table td::before {
        content: attr(data-label);
        font-weight: bold;
    }

}

/* ----------------------------------
   Member Dashboard
---------------------------------- */

.dashboard-page {
    max-width: 900px;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--brand-card-text, #222);
}

.dashboard-welcome h2,
.dashboard-welcome p {
    margin: 4px 0;
}

.dashboard-eyebrow {
    opacity: 0.7;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(240px, 1fr)
    );
    gap: 18px;
    margin-top: 24px;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    min-height: 160px;
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dashboard-card[hidden] {
    display: none;
}

a.dashboard-card:hover,
a.dashboard-card:focus-visible {
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dashboard-card h3 {
    margin: 0 0 8px;
}

.dashboard-card p {
    flex-grow: 1;
    margin: 0 0 18px;
    line-height: 1.5;
}

.dashboard-card span {
    font-weight: bold;
}

.dashboard-card .dashboard-card-status {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.88rem;
    font-weight: normal;
}

.dashboard-card .dashboard-card-status.has-attention {
    background: #fff0cf;
    color: #744400;
    font-weight: bold;
}

.dashboard-card-placeholder {
    opacity: 0.7;
}

@media (max-width: 600px) {

    .dashboard-welcome {
        flex-direction: column;
        text-align: center;
    }

}

/* ----------------------------------
   Profile Photo Editor
---------------------------------- */

.profile-photo-editor {
    margin-bottom: 30px;
}

.profile-photo-preview {
    margin-bottom: 16px;
}

.profile-photo-image {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

#profilePhotoInput {
    display: block;
    margin-top: 8px;
    margin-bottom: 12px;
}

.profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ----------------------------------
   Edit Profile Form
---------------------------------- */

.edit-profile-page {
    max-width: 900px;
}

.edit-profile-card {
    padding: 30px;
    border-radius: 12px;
    background-color: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--brand-card-text, #222);
}

.edit-profile-card > h2 {
    margin-top: 0;
}

.profile-form {
    margin-top: 30px;
}

.form-section {
    margin-top: 34px;
}

.form-section:first-child {
    margin-top: 0;
}

.form-section h3 {
    margin: 0 0 18px;
}

.form-divider {
    margin: 34px 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.form-row,
.field-with-visibility {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.form-row-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-with-visibility {
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
    align-items: end;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin-top: 18px;
}

.form-row .form-field,
.field-with-visibility .form-field {
    margin-top: 0;
}

.form-field label {
    font-weight: bold;
}

.form-field input,
.form-field select,
.form-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
}

.form-field textarea {
    resize: vertical;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.checkbox-option input:focus-visible,
.profile-form button:focus-visible {
    outline: 3px solid rgba(0, 90, 180, 0.45);
    outline-offset: 2px;
}

.field-help {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

.visibility-control-inline {
    max-width: 320px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(210px, 1fr)
    );
    gap: 10px 18px;
    margin: 18px 0;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 36px;
    line-height: 1.35;
    cursor: pointer;
}

/* ----------------------------------
   Admin Application Review
---------------------------------- */

.admin-application-filter {
    max-width: 320px;
}

.admin-application-list,
.admin-application-sections {
    display: grid;
    gap: 18px;
    margin: 24px 0;
}

.admin-application-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-application-card,
.admin-application-section,
.admin-review-panel {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
}

.admin-application-card.needs-sponsor,
.admin-review-flag {
    border-color: #a65b00;
    background: #fff4df;
}

.admin-review-flag {
    padding: 7px 12px;
    border: 1px solid #a65b00;
    border-radius: 999px;
    font-weight: bold;
}

.admin-review-flag:not([hidden]) {
    display: inline-block;
}

.admin-application-card h3,
.admin-application-section h3,
.admin-review-panel h3 {
    margin-top: 0;
}

.admin-application-card dl,
.admin-application-section dl {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
    gap: 8px 16px;
}

.admin-application-card dt,
.admin-application-section dt {
    font-weight: bold;
}

.admin-application-card dd,
.admin-application-section dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.admin-review-panel {
    margin: 24px 0;
}

.application-review-checks-status {
    font-weight: bold;
}

.application-review-checks-list {
    display: grid;
    gap: 12px;
    margin-bottom: 0;
    padding-left: 22px;
}

.application-review-checks-list li::marker {
    color: #a65b00;
}

.application-review-checks-list strong,
.application-review-checks-list span {
    display: block;
}

@media (max-width: 600px) {
    .admin-application-card dl,
    .admin-application-section dl {
        grid-template-columns: 1fr;
    }

    .admin-application-card dd,
    .admin-application-section dd {
        margin-bottom: 8px;
    }
}

.checkbox-option input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
}

.profile-form button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font: inherit;
    cursor: pointer;
}

.primary-save-button {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.form-save-section {
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 650px) {

    .edit-profile-card {
        padding: 22px 18px;
    }

    .form-row-two-columns,
    .field-with-visibility {
        grid-template-columns: 1fr;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }

}

/* ----------------------------------
   Member Lookup
---------------------------------- */

.member-directory {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.member-directory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.member-directory-heading h2,
.member-directory-heading p {
    margin-top: 0;
}

.member-search-input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font: inherit;
}

.member-results {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background-color: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.member-card:hover,
.member-card:focus-visible {
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.member-card-photo-image,
.member-card-photo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
}

.member-card-photo-image {
    object-fit: cover;
}

.member-card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    font-size: 24px;
    font-weight: bold;
}

.member-card-details {
    min-width: 0;
}

.member-card-details h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.portal-role-label {
    width: fit-content;
    margin: 2px 0 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(90, 45, 120, 0.12);
    color: #5a2d78;
    font-size: 0.84rem;
    font-weight: bold;
}

.member-card-location,
.member-card-membership {
    margin: 4px 0;
}

.member-card-location {
    opacity: 0.75;
}

.member-card-membership {
    font-size: 0.9rem;
}

.member-card-action {
    display: inline-block;
    margin-top: 12px;
    font-weight: bold;
    text-decoration: underline;
}

@media (max-width: 600px) {

    .member-directory-heading {
        flex-direction: column;
    }

    .member-card {
        align-items: flex-start;
    }

}

/* Honor conditional application fields without discarding their saved values. */
.custom-question-explanation[hidden],
#adminRevisionRequestPanel[hidden] {
    display: none;
}

.application-review-checks-status[data-state="ready"] {
    color: #166534;
    background: #f0fdf4;
    border-left: 4px solid #166534;
    padding: 10px 12px;
}
.application-review-checks-status[data-state="blocking"],
.application-review-checks-list li[data-severity="blocking"] {
    color: #9a3412;
    background: #fff7ed;
    border-left: 4px solid #9a3412;
    padding: 10px 12px;
}

#jointManualFields[hidden], #jointExistingFields[hidden] { display: none; }
#jointHouseholdStatus[data-state="match"], #applicationReviewChecksList [data-severity="success"] { color: #166534; }
#jointHouseholdStatus[data-state="warning"], #applicationReviewChecksList [data-severity="warning"] { color: #9a3412; }

/* Membership accounting cards use the existing form/card layout. */
#membershipPayments { grid-column: 1 / -1; }
#membershipPayments:not([data-presentation="membership"]) { white-space: pre-line; }
#membershipPayments label { display: block; margin: .7rem 0; }
#membershipPayments input, #membershipPayments select { display: block; max-width: 100%; }
.payment-warning { border-left: 4px solid #ad6800; padding: .75rem; background: #fff4da; color: #593600; }
.payment-history-item { border-top: 1px solid #ddd; padding: .75rem 0; }

/* Stage A: scoped visibility respects hidden even where form styles set display. */
#membershipPayments [hidden], #applicationRevisionBanner[hidden], #applicationRevisionPanel[hidden] { display: none; }
#applicationRevisionBanner, #applicationRevisionPanel {
    background: #fff4da; color: #593600; border: 1px solid #ad6800;
    border-left-width: 5px; border-radius: 8px; padding: 1rem; margin: 1rem 0;
    overflow-wrap: anywhere;
}
#applicationRevisionBanner h3, #applicationRevisionPanel h3 { color: #593600; margin-top: 0; }
#applicationRevisionMessage, #applicationRevisionRequestMessage { white-space: pre-wrap; }
.application-status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: .65rem; margin: 1rem 0; }
.application-status-card { display: flex; flex-direction: column; min-width: 0; padding: .8rem; border: 2px solid #bbb; border-radius: 8px; background: var(--brand-card, white); overflow-wrap: anywhere;  color: var(--brand-card-text, #222); }
.application-status-card h3 { min-height: 2.8em; line-height: 1.4; font-size: 1rem; margin: 0 0 .5rem; }
.application-status-card.selected { border-color: #215c40; background: #edf7f0; }
.application-status-card button:focus-visible { outline: 3px solid #215c40; outline-offset: 3px; }

/* Membership information panels: scoped, informational counterparts to dashboard cards. */
.membership-page .membership-panel {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background: var(--brand-card, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow-wrap: anywhere;
    color: var(--brand-card-text, #222);
}
.membership-page .membership-panel > h3 { margin-top: 0; }
/* The first panel supplies the gap below this heading; do not preserve HTML whitespace. */
.membership-page #membershipPaymentsHeading { margin-block: 24px 0; }
.membership-page .membership-info-grid,
.membership-page .membership-transaction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: 20px 0;
}
.membership-page dt { color: inherit; font-size: 0.875rem; line-height: 1.5; }
.membership-page dd { margin: 4px 0 0; font-weight: 600; line-height: 1.5; }
.membership-page .membership-status-indicator {
    display: inline-block;
    border: 1px solid #777;
    border-radius: 6px;
    padding: 4px 10px;
    background: var(--brand-card, white);
    color: var(--brand-card-text, #222);
    font-weight: 600;
}
.membership-page .membership-amount-due { font-size: 2rem; font-weight: 700; margin: 8px 0; }
.membership-page .membership-dues-breakdown > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 10px 0;
}
.membership-page .membership-dues-breakdown dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.membership-page .membership-balance { border-top: 2px solid #444; margin-top: 8px; }
.membership-page .membership-balance dt { color: var(--brand-text, #222); font-weight: 700; font-size: 1rem; }
.membership-page .payment-history-item { border-top: 1px solid #ccc; padding: 16px 0; }
.membership-page #membershipPayments p { white-space: pre-line; }
@media (max-width: 600px) {
    .membership-page .membership-info-grid,
    .membership-page .membership-transaction-grid { grid-template-columns: minmax(0, 1fr); }
    .membership-page .membership-panel { padding: 18px; }
}


.membership-page .membership-pay-now {
    padding: 12px 24px;
    border: 1px solid #222;
    border-radius: 6px;
    background: #222;
    color: white;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.membership-page .membership-payment-dialog {
    box-sizing: border-box;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #777;
    border-radius: 12px;
    color: var(--brand-card-text, #222);
    background: var(--brand-card, white);
    overflow-wrap: anywhere;
}
.membership-page .membership-payment-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.membership-page .membership-payment-dialog address { white-space: pre-line; font-style: normal; line-height: 1.6; }
.membership-page .membership-payment-dialog section { margin-top: 20px; padding-top: 12px; border-top: 1px solid #ccc; }
.membership-page .membership-payment-dialog button { min-height: 44px; padding: 10px 18px; font: inherit; }
.membership-page .membership-stripe-unavailable { color: var(--brand-card-text, #222); background: var(--brand-card, white); padding: 12px; border-radius: 6px; }
.membership-page .membership-stripe-unavailable button:disabled { color: #626262; border: 1px solid #aaa; background: #eee; }
.membership-page .membership-pay-now:focus-visible,
.membership-page .membership-payment-dialog button:focus-visible { outline: 3px solid #215c40; outline-offset: 3px; }

/* Hidden notification/badge elements must not inherit an explicit display value. */
#adminDashboard .dashboard-card-status[hidden],
#adminDashboard .super-admin-indicator[hidden] { display: none; }

#adminDashboard #adminDuesAttentionCount { text-align: center; }

/* Shared appearance tokens: semantic attention/error/success colors stay separate. */
:root {
    --brand-attention: #fff0cf; --brand-on-attention: #786b50;
    --brand-primary: #222222; --brand-on-primary: #ffffff;
    --brand-highlight: #E3F2FE; --brand-on-highlight: #000000;
    --brand-page: #f4f4f4; --brand-card: #ffffff; --brand-header: #222222;
    --brand-text: #000000; --brand-card-text: #000000; --brand-header-text: #ffffff;
    --brand-logo-size: 120px; --brand-banner: none; --brand-link: #222222; --brand-link-card: #222222;
}
.app-header {
    background-color: var(--brand-header);
    background-image: var(--brand-banner);
    background-size: cover; background-position: center;
    color: var(--brand-header-text);
}
.app-logo { width: var(--brand-logo-size); max-width: 100%; height: auto; object-fit: contain; }
body { color: var(--brand-text); }
.member-nav, .dashboard-card, .welcome-card, .profile-card, .admin-detail-card,
.admin-review-panel, .membership-page .membership-panel, .branding-panel,
.profile-form, .membership-payment-dialog { color: var(--brand-card-text); }
.member-nav a:hover, .member-nav button:hover, .member-nav a:focus-visible,
.member-nav button:focus-visible, .member-nav a[aria-current="page"], .branding-highlight {
    background: var(--brand-highlight); color: var(--brand-on-highlight);
}
a:not(.dashboard-card):not(.member-nav a):not(.profile-action-button) { color: var(--brand-link); text-decoration-thickness: 2px; }
:where(button:not(.member-nav button):not(.destructive-action-button):not(.admin-sort-button)), .profile-action-button {
    background-color: var(--brand-primary); color: var(--brand-on-primary);
}
button:disabled { opacity: .6; cursor: not-allowed; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea {
    background-color: var(--brand-card); color: var(--brand-card-text); border-color: currentColor;
}
.profile-muted, .field-help, .dashboard-eyebrow { color: inherit; opacity: .8; }
.branding-panel { background: var(--brand-card); border: 1px solid; border-radius: 12px; padding: 22px; margin: 20px 0; }
.branding-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.branding-fields label { display: grid; gap: 6px; }
.branding-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.branding-preview { background: var(--brand-page); color: var(--brand-text); padding: 16px; border-radius: 12px; }
.branding-preview .dashboard-card { color: var(--brand-card-text); }
.branding-preview-controls { display: grid; gap: 14px; justify-items: start; }
.branding-attention { background: #fff0cf; color: #744400; padding: 10px; border-radius: 8px; }
.branding-highlight { padding: 10px; }
:where(button,a,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media(max-width: 480px) { .branding-fields { grid-template-columns: 1fr; } .branding-preview { padding: 10px; } }
.settings-notice, .email-help-troubleshooting, .admin-application-card.needs-sponsor, .admin-review-flag { color: #522a00; }
.application-status-card.selected { color: #166534; }
.membership-page .membership-stripe-unavailable { color: #626262; background: #f5f5f5; }
.email-help-link { background: var(--brand-primary); color: var(--brand-on-primary) !important; }
.branding-panel button { padding: 10px 14px; border: 1px solid currentColor; border-radius: 6px; font: inherit; }
.branding-panel input, .branding-panel select { max-width: 100%; box-sizing: border-box; }

.portal-role-label { background: var(--brand-highlight); color: var(--brand-on-highlight); }
#jointHouseholdStatus[data-state="match"], #applicationReviewChecksList [data-severity="success"] { background: #f0fdf4; }
#jointHouseholdStatus[data-state="warning"], #applicationReviewChecksList [data-severity="warning"] { background: #fff7ed; }
.membership-page .membership-pay-now { background: var(--brand-primary); color: var(--brand-on-primary); }

.dashboard-card, .welcome-card, .profile-card, .admin-detail-card, .admin-page-heading, .admin-review-panel, .membership-panel, .branding-panel { --brand-link: var(--brand-link-card); }
.branding-panel { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Attention-only surfaces; destructive buttons, errors and success stay independent. */
.branding-attention,
.dashboard-card .dashboard-card-status.has-attention,
.settings-notice, .email-help-troubleshooting,
.admin-application-card.needs-sponsor, .admin-review-flag,
.payment-warning, #applicationRevisionBanner, #applicationRevisionPanel,
#jointHouseholdStatus[data-state="warning"], #applicationReviewChecksList [data-severity="warning"] {
    background: var(--brand-attention); color: var(--brand-on-attention); border-color: var(--brand-on-attention);
}
#applicationRevisionBanner h3, #applicationRevisionPanel h3 { color: var(--brand-on-attention); }

/* Shared label spacing: text/select controls only, not checkbox/radio rows. */
:where(label[for]):has(+ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)) {
    display: block;
    margin-block-end: .5rem;
}
:where(label) > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    display: block;
    margin-block-start: .5rem;
    max-width: 100%;
    box-sizing: border-box;
}
/* Grid labels already supply their own gap; do not double it. */
.branding-fields label { gap: .5rem; }
.branding-fields label > :is(input,select,textarea) { margin-block-start: 0; }
.branding-panel h3 { font-size: 1.25rem; line-height: 1.4; }
.branding-panel h4 { font-size: 1.1rem; line-height: 1.4; margin-block: 1.5rem .75rem; }
.branding-panel button { font-size: .95rem; line-height: 1.4; padding: .55rem .85rem; }
.branding-panel > select, .branding-panel > input { width: 100%; max-width: 28rem; }

/* Navigation text uses the chosen header text with contrast against its own surface. */
.member-nav { color: var(--brand-nav-text, var(--brand-card-text)); }

/* Shared branding copy wraps independently of the navigation below the header. */
.brand-header-copy { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: inherit; }
.app-header .brand-header-copy :is(h1,h2) { margin: 0; color: inherit; }
.brand-header-subtitle { margin: .35rem 0 0; font-size: 1rem; line-height: 1.4; color: inherit; }
.brand-header-subtitle[hidden] { display: none; }

/* Static HTML logos stay hidden until an explicit saved or local image is resolved. */
.app-logo:not(.brand-logo-visible) { display: none; }
.branding-group { min-width: 0; margin: 1rem 0; padding: 1rem; border: 1px solid currentColor; border-radius: 8px; }
.branding-group legend { font-weight: 700; }
.branding-group .branding-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
#currentLogoPreview { max-width: 100%; max-height: 160px; object-fit: contain; }
@media(max-width: 600px) { .branding-group .branding-fields { grid-template-columns: 1fr; } }

/* Login fields retain their labels and native autofill/validation semantics. */
.login-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.login-field { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.login-field label { margin: 0; }
.login-field input { width: 100%; box-sizing: border-box; }
@media(max-width: 600px) { .login-fields { grid-template-columns: 1fr; } }
.application-status-card [data-count] { margin: auto 0 1rem; padding-top: .5rem; }
.application-status-card button { margin-top: auto; }
.admin-members-table th { background: var(--brand-highlight); color: var(--brand-on-highlight); }
.admin-members-table :is(th,td) { overflow-wrap: anywhere; }
.admin-members-table th { min-width: 6rem; }
.admin-members-table .admin-sort-button { background: transparent; color: inherit; align-items: baseline; }
.admin-sort-button span { flex-shrink: 0; }
:where(button,.profile-action-button):enabled:hover { text-decoration: underline; }
:where(button,.profile-action-button):active { text-decoration: underline; }
button:disabled { opacity: 1; border-style: dashed; cursor: not-allowed; }

/* Consolidated Club Information editors retain independent save actions. */
.club-information-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.club-information-form > label:not(.checkbox-option), .club-information-form .form-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.club-information-form input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; min-height: 44px; }
.club-information-form > :is(button,p,.checkbox-option,.application-form-actions) { grid-column: 1 / -1; }
.club-information-form > button { justify-self: start; }
@media(max-width: 650px) { .club-information-form { grid-template-columns: 1fr; } }

#duesYearCards, .dues-history-rates { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 1rem; }
.dues-history-entry { padding-block: 1rem; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.dues-history-rates dd { margin: .35rem 0 0; font-weight: bold; }
#annualDuesHistory summary { cursor: pointer; }

.policy-matrix-scroll { max-width: 100%; overflow-x: auto; margin-bottom: 1rem; }
.policy-matrix { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--brand-card-text); background: var(--brand-card); }
.policy-matrix caption { text-align: left; padding: .75rem 0; }
.policy-matrix :is(th,td) { padding: .65rem; border-bottom: 1px solid currentColor; vertical-align: middle; }
.policy-matrix thead th { background: var(--brand-highlight); color: var(--brand-on-highlight); min-width: 7rem; }
.policy-matrix tr > th:first-child { position: sticky; left: 0; z-index: 1; min-width: 13rem; text-align: left; background: var(--brand-card); color: var(--brand-card-text); }
.policy-matrix select { width: 5rem; min-height: 44px; margin: 0; }
.policy-matrix select:disabled { opacity: 1; border-style: dashed; }

.renewal-date-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.renewal-date-grid label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.renewal-date-grid input { width: 100%; box-sizing: border-box; }
@media(max-width: 650px) { .renewal-date-grid { grid-template-columns: 1fr; } }

.member-id-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.member-id-fields label, .member-id-manual label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.member-id-fields input, .member-id-manual :is(input,select) { width: 100%; box-sizing: border-box; min-height: 44px; }
.member-id-fields input, .member-id-manual input { padding: 12px 14px; font: inherit; line-height: 1.4; text-align: start; }
.member-id-fields output { overflow-wrap: anywhere; }
.member-id-manual { display: grid; gap: 1rem; }
.member-id-manual button { justify-self: start; }
@media(max-width: 650px) { .member-id-fields { grid-template-columns: 1fr; } }

/* Payments & Billing only: match the reviewed Settings input spacing. */
#paymentSettingsForm :is(input,textarea),
#mailed-check :is(input,textarea) {
    padding: 12px 14px;
    box-sizing: border-box;
    min-height: 44px;
    font: inherit;
    line-height: 1.4;
}

.document-upload-form { display: grid; gap: 1rem; }
.document-upload-form label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.document-upload-form input { padding: 12px 14px; box-sizing: border-box; width: 100%; font: inherit; }
.document-upload-form button { justify-self: start; }
.document-version { border-top: 1px solid currentColor; padding-block: 1rem; overflow-wrap: anywhere; }

/* Account creation only: retain shared card, theme and button behavior. */
.create-account-page { width: 100%; box-sizing: border-box; }
.create-account-page .welcome-card { max-width: 480px; margin-inline: auto; padding: clamp(20px, 5vw, 36px); box-sizing: border-box; text-align: left; }
.create-account-page .welcome-card h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.25; margin: 0 0 12px; }
.create-account-page .welcome-card p { font-size: 1rem; line-height: 1.5; margin: 0 0 20px; }
.create-account-page #createAccountForm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.create-account-page .create-account-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.create-account-page .create-account-field label { margin: 0; font-size: 1rem; font-weight: 600; }
.create-account-page .create-account-field input { width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 12px 14px; border: 1px solid currentColor; border-radius: 6px; background: var(--brand-card, #fff); color: var(--brand-card-text, #222); font: inherit; font-size: 1rem; }
.create-account-page #createAccountForm button { width: 100%; margin: 4px 0 0; padding: 12px 16px; font-size: 1rem; line-height: 1.5; }
.create-account-page :is(input, button, a):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.create-account-page #message { margin-block: 20px; overflow-wrap: anywhere; }
.create-account-page #message:empty { margin-block: 12px; }
.create-account-page .welcome-card > p:last-child { margin-bottom: 0; }