/*
 * KEIKO application frame
 *
 * The admin system's outer shell - side menu, top bar and content area - plus the
 * light / dark colour layer on top of the HUD template (app.min.css). Loaded last.
 *
 *  1200px and up   full side menu (can be collapsed to the icon rail)
 *  768 - 1199px    icon rail; the full menu opens over the page
 *  under 768px     no rail; the full menu opens over the page
 */

/* ---------------------------------------------------------------------- */
/* colours                                                                */
/* ---------------------------------------------------------------------- */

:root,
[data-bs-theme=dark] {
    --kx-accent: #3cd2a5;
    --kx-accent-rgb: 60, 210, 165;
    --kx-accent-text: #3cd2a5;
    --kx-ink: #0d1219;
    --kx-text: rgba(255, 255, 255, 0.92);
    --kx-text-muted: rgba(255, 255, 255, 0.58);
    --kx-line: rgba(255, 255, 255, 0.09);
    --kx-page-bg: #1a2530;
    --kx-sidebar-bg: #141d26;
    --kx-topbar-bg: var(--kx-sidebar-bg);
    --kx-hover: rgba(255, 255, 255, 0.06);
    --kx-active: rgba(var(--kx-accent-rgb), 0.16);
    --kx-tile: rgba(255, 255, 255, 0.07);
    --kx-menu-bg: #1c2a35;
    --kx-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --kx-glow: rgba(var(--kx-accent-rgb), 0.16);

    /* one flat blue-slate canvas - none of the template's photo, fade or grid pattern */
    --bs-body-bg: var(--kx-page-bg);
    --bs-body-bg-cover: none;
    --bs-body-bg-image: none;
    --bs-body-bg-gradient: linear-gradient(var(--kx-page-bg), var(--kx-page-bg));
}

[data-bs-theme=light] {
    --kx-accent: #3cd2a5;
    --kx-accent-rgb: 60, 210, 165;
    --kx-accent-text: #148a68;
    --kx-ink: #0d1219;
    --kx-text: #1b2530;
    --kx-text-muted: #5b6977;
    --kx-line: #d5dde4;
    --kx-page-bg: #eef2f5;
    --kx-sidebar-bg: #e1e8ee;
    --kx-topbar-bg: var(--kx-sidebar-bg);
    --kx-hover: rgba(13, 18, 25, 0.05);
    --kx-active: rgba(var(--kx-accent-rgb), 0.22);
    --kx-tile: #ffffff;
    --kx-menu-bg: #ffffff;
    --kx-shadow: 0 18px 50px rgba(20, 35, 50, 0.16);
    --kx-glow: rgba(var(--kx-accent-rgb), 0.22);

    --bs-body-bg: var(--kx-page-bg);
    --bs-body-bg-cover: none;
    --bs-body-bg-image: none;
    --bs-body-bg-gradient: linear-gradient(var(--kx-page-bg), var(--kx-page-bg));

    /* the template's light colours are pale greys - give text and panels real contrast */
    --bs-body-color: #1b2530;
    --bs-body-color-rgb: 27, 37, 48;
    --bs-heading-color: #0d1219;
    --bs-emphasis-color: #0d1219;
    --bs-secondary-color: #5f6d7a;
    --bs-border-color: #dde3e9;
    --bs-component-bg: #ffffff;
    --bs-theme: #1fa982;
    --bs-theme-rgb: 31, 169, 130;
    --bs-link-color: #148a68;
    --bs-link-color-rgb: 20, 138, 104;
    --bs-link-hover-color: #0f6e53;
}

/* ---------------------------------------------------------------------- */
/* light theme touches for the template and the app's own styles          */
/* ---------------------------------------------------------------------- */

/* text that custom.css sets for the dark theme */
[data-bs-theme=light] .pulse-subtitle {
    color: #6b7785 !important;
}

[data-bs-theme=light] .drop-item::first-line {
    color: #0d1219;
}

/* the template's loading bar (pace.js, bundled in vendor.min.js) - the green line that
   fills across the top of the page while it loads */
.pace,
.pace-progress,
.pace-activity {
    display: none !important;
}

/* ---------------------------------------------------------------------- */
/* type                                                                   */
/* ---------------------------------------------------------------------- */

body.kx-body {
    font-family: "Chakra Petch", "Segoe UI", sans-serif;
    min-height: 100vh;
}

[data-bs-theme=light] body.kx-body {
    font-weight: 400;
}

/* page headings from the individual pages */
.kx-content .page-header {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bs-heading-color, #fff);
    margin: 0.25rem 0 0.4rem;
}

.kx-content .page-header + p {
    color: var(--kx-text-muted);
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* shell                                                                  */
/* ---------------------------------------------------------------------- */

.kx-shell {
    --kx-sidebar-width: 16.5rem;
    --kx-rail-width: 5.25rem;
    --kx-topbar-height: 3.75rem;
    min-height: 100vh;
}

.kx-main {
    min-width: 0;
    margin-left: var(--kx-sidebar-width);
    transition: margin-left 0.25s ease;
}

/* ---------------------------------------------------------------------- */
/* side menu                                                              */
/* ---------------------------------------------------------------------- */

.kx-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    width: var(--kx-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--kx-sidebar-bg);
    border-right: 1px solid var(--kx-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.kx-sidebar > * {
    position: relative;
    z-index: 1;
}

/* the club switcher's list opens over the menu below it */
.kx-sidebar > .kx-club {
    z-index: 3;
}

/* the club, with a switcher when the user runs more than one */
.kx-club {
    padding: 0.85rem 0.85rem 0.6rem;
}

.kx-club-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--kx-text);
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.kx-club-btn:not(:disabled):hover,
.kx-club-btn[aria-expanded=true] {
    background: var(--kx-hover);
    border-color: var(--kx-line);
}

.kx-club-btn:disabled {
    opacity: 1;
    cursor: default;
}

.kx-club-logo {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.55rem;
    background: var(--kx-tile);
    border: 1px solid rgba(var(--kx-accent-rgb), 0.35);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.08);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--kx-accent-text);
}

.kx-club-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.2rem;
}

.kx-club-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.kx-club-name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-club-sub {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-club-chevron {
    color: var(--kx-text-muted);
}

/* the menu itself */
.kx-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0.85rem 1rem;
    scrollbar-width: thin;
}

.kx-nav-group + .kx-nav-group {
    margin-top: 1.1rem;
}

.kx-nav-heading {
    padding: 0 0.7rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.6rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--kx-text);
    font-size: 0.9rem;
    text-decoration: none;
    opacity: 0.82;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.kx-nav-link i {
    width: 1.35rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1;
}

.kx-nav-link:hover {
    background: var(--kx-hover);
    color: var(--kx-text);
    opacity: 1;
}

.kx-nav-link.active {
    background: var(--kx-active);
    color: var(--kx-text);
    font-weight: 600;
    opacity: 1;
}

.kx-nav-link.active i {
    color: var(--kx-accent-text);
    text-shadow: 0 0 12px rgba(var(--kx-accent-rgb), 0.55);
}

.kx-nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(var(--kx-accent-rgb), 0.18);
}

/* a teal marker on the current page */
.kx-nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.85rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the short name is only used in the icon rail */
.kx-nav-short {
    display: none;
}

/* bottom of the menu */
.kx-sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 1rem;
    border-top: 1px solid var(--kx-line);
}

.kx-wordmark img {
    height: 1.1rem;
    width: auto;
    display: block;
    opacity: 0.7;
}

.kx-logo-light {
    display: none !important;
}

[data-bs-theme=light] .kx-logo-dark {
    display: none !important;
}

[data-bs-theme=light] .kx-logo-light {
    display: block !important;
}

/* ---------------------------------------------------------------------- */
/* top bar                                                                */
/* ---------------------------------------------------------------------- */

.kx-topbar {
    position: sticky;
    top: 0;
    z-index: 1025;
    height: var(--kx-topbar-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.75rem;
    background: var(--kx-topbar-bg);
    border-bottom: 1px solid var(--kx-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* a solid teal line along the bottom of the top bar */
.kx-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(var(--kx-accent-rgb), 0.35);
    pointer-events: none;
}

.kx-crumbs {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.kx-crumbs i {
    font-size: 0.7rem;
    color: var(--kx-text-muted);
}

.kx-crumb-group {
    color: var(--kx-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.kx-crumb-page {
    color: var(--kx-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kx-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kx-line);
    border-radius: 0.55rem;
    background: transparent;
    color: var(--kx-text);
    font-size: 1.1rem;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.kx-icon-btn:hover {
    background: var(--kx-hover);
    border-color: rgba(var(--kx-accent-rgb), 0.45);
    color: var(--kx-accent-text);
}

.kx-menu-btn {
    display: none;
}

/* a teal ring for keyboard users, nothing after a click */
.kx-club-btn:focus,
.kx-user-btn:focus,
.kx-icon-btn:focus,
.kx-nav-link:focus {
    outline: none;
}

.kx-club-btn:focus-visible,
.kx-user-btn:focus-visible,
.kx-icon-btn:focus-visible,
.kx-nav-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.45);
}

/* night / day switch - the knob slides to the moon at night and the sun by day */
.kx-theme-switch {
    position: relative;
    width: 4.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.55rem;
    border: 1px solid var(--kx-line);
    border-radius: 2rem;
    background: rgba(0, 0, 0, 0.25);
    color: var(--kx-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.kx-theme-switch:hover {
    border-color: rgba(var(--kx-accent-rgb), 0.5);
}

.kx-theme-switch:focus {
    outline: none;
}

.kx-theme-switch:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.45);
}

.kx-theme-switch .bi {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.kx-theme-knob {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(145deg, #4ae0b3, #22a882);
    box-shadow: 0 0 14px rgba(var(--kx-accent-rgb), 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.4, 0.2, 0.2, 1.3);
}

/* night: knob on the moon (right) */
[data-bs-theme=dark] .kx-theme-knob {
    transform: translateX(1.95rem);
}

[data-bs-theme=dark] .kx-theme-switch .bi-moon-stars-fill {
    color: var(--kx-ink);
}

/* day: knob on the sun (left) */
[data-bs-theme=light] .kx-theme-switch {
    background: rgba(255, 255, 255, 0.7);
}

[data-bs-theme=light] .kx-theme-switch .bi-sun-fill {
    color: #ffffff;
}

/* the signed in user */
.kx-user-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 2.5rem;
    padding: 0 0.6rem 0 0.25rem;
    border: 1px solid var(--kx-line);
    border-radius: 2rem;
    background: transparent;
    color: var(--kx-text);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.kx-user-btn:hover,
.kx-user-btn[aria-expanded=true] {
    background: var(--kx-hover);
    border-color: rgba(var(--kx-accent-rgb), 0.45);
}

.kx-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #4ae0b3, #22a882);
    box-shadow: 0 0 0 2px var(--kx-menu-bg), 0 0 0 3px rgba(var(--kx-accent-rgb), 0.5);
    color: var(--kx-ink);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.kx-avatar.is-large {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.95rem;
}

.kx-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 10rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-user-btn .bi-chevron-down {
    font-size: 0.7rem;
    color: var(--kx-text-muted);
}

/* ---------------------------------------------------------------------- */
/* drop down menus (club switcher and user menu)                          */
/* ---------------------------------------------------------------------- */

.kx-dropdown.dropdown-menu {
    min-width: 16rem;
    padding: 0.45rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
    background: var(--kx-menu-bg);
    box-shadow: var(--kx-shadow);
    font-size: 0.875rem;
}

.kx-dropdown .dropdown-header {
    padding: 0.5rem 0.65rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.45rem;
    color: var(--kx-text);
}

.kx-dropdown .dropdown-item:hover,
.kx-dropdown .dropdown-item:focus {
    background: var(--kx-hover);
    color: var(--kx-text);
}

.kx-dropdown .dropdown-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--kx-text-muted);
}

.kx-dropdown .dropdown-item.active,
.kx-dropdown .dropdown-item:active {
    background: var(--kx-active);
    color: var(--kx-text);
}

.kx-dropdown .dropdown-item .kx-check {
    margin-left: auto;
    color: var(--kx-accent-text);
}

.kx-dropdown .dropdown-divider {
    margin: 0.4rem 0.2rem;
    border-color: var(--kx-line);
}

.kx-dropdown .kx-club-logo {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

.kx-user-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.65rem 0.75rem;
}

.kx-user-card-name {
    font-weight: 600;
    color: var(--kx-text);
}

.kx-user-card-email {
    font-size: 0.78rem;
    color: var(--kx-text-muted);
    word-break: break-all;
}

/* the language flags in the user menu (the look is flags.css) */
.kx-lang-row {
    padding: 0.3rem 0.85rem 0.6rem;
}

/* ---------------------------------------------------------------------- */
/* content                                                                */
/* ---------------------------------------------------------------------- */

.kx-content.app-content {
    padding: 1.75rem 2rem 3rem;
    margin: 0;
    max-width: none;
}

.kx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: rgba(5, 10, 15, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ---------------------------------------------------------------------- */
/* icon rail                                                              */
/* ---------------------------------------------------------------------- */

/* the compact menu - icons with small labels underneath */
@media (min-width: 768px) {
    .kx-shell.is-rail:not(.is-open) .kx-sidebar {
        width: var(--kx-rail-width);
    }

    .kx-shell.is-rail:not(.is-open) .kx-club {
        padding: 0.85rem 0.6rem 0.6rem;
    }

    .kx-shell.is-rail:not(.is-open) .kx-club-btn {
        justify-content: center;
        padding: 0.45rem 0;
    }

    .kx-shell.is-rail:not(.is-open) .kx-club-text,
    .kx-shell.is-rail:not(.is-open) .kx-club-chevron,
    .kx-shell.is-rail:not(.is-open) .kx-nav-heading,
    .kx-shell.is-rail:not(.is-open) .kx-wordmark {
        display: none;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav {
        padding: 0.4rem 0.5rem 1rem;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-group + .kx-nav-group {
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--kx-line);
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-link {
        flex-direction: column;
        justify-content: center;
        gap: 0.3rem;
        min-height: 3.6rem;
        padding: 0.5rem 0.2rem;
        text-align: center;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-link i {
        font-size: 1.2rem;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-link .kx-nav-label {
        display: none;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-short {
        display: block;
        max-width: 100%;
        font-size: 0.64rem;
        line-height: 1.15;
        letter-spacing: 0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kx-shell.is-rail:not(.is-open) .kx-nav-link.active::before {
        left: -0.5rem;
    }

    .kx-shell.is-rail:not(.is-open) .kx-sidebar-foot {
        justify-content: center;
        padding: 0.85rem 0.5rem 1rem;
    }

    .kx-shell.is-rail .kx-main {
        margin-left: var(--kx-rail-width);
    }

    .kx-rail-toggle .bi {
        transition: transform 0.25s ease;
    }

    .kx-shell.is-rail:not(.is-open) .kx-rail-toggle .bi {
        transform: scaleX(-1);
    }
}

/* tablets - always the rail, the full menu opens over the page */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .kx-main {
        margin-left: var(--kx-rail-width);
    }

    .kx-shell.is-open .kx-sidebar {
        width: var(--kx-sidebar-width);
        box-shadow: var(--kx-shadow);
    }

    .kx-menu-btn {
        display: inline-flex;
    }

    .kx-topbar {
        padding: 0 1.25rem;
    }

    .kx-content.app-content {
        padding: 1.5rem 1.25rem 2.5rem;
    }
}

/* phones - no rail, the full menu slides in */
@media (max-width: 767.98px) {
    .kx-main {
        margin-left: 0;
    }

    .kx-sidebar {
        transform: translateX(-100%);
    }

    .kx-shell.is-open .kx-sidebar {
        transform: none;
        box-shadow: var(--kx-shadow);
    }

    .kx-menu-btn {
        display: inline-flex;
    }

    .kx-rail-toggle {
        display: none;
    }

    .kx-topbar {
        padding: 0 0.85rem;
    }

    .kx-crumb-group,
    .kx-crumbs i,
    .kx-user-name,
    .kx-user-btn .bi-chevron-down {
        display: none;
    }

    .kx-user-btn {
        padding: 0 0.25rem;
    }

    .kx-content.app-content {
        padding: 1.25rem 0.85rem 2rem;
    }
}

.kx-shell.is-open .kx-backdrop {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1200px) {
    .kx-shell.is-open .kx-backdrop {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kx-sidebar,
    .kx-main,
    .kx-backdrop {
        transition: none;
    }
}


/* ---------------------------------------------------------------------- */
/* components - cards, headline figures, lists (dashboard and beyond)     */
/* ---------------------------------------------------------------------- */

:root,
[data-bs-theme=dark] {
    --kx-card-bg: #212e3a;
    --kx-card-border: rgba(255, 255, 255, 0.07);
    --kx-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.14);
    --kx-up: #3cd2a5;
    --kx-down: #ff7a7a;
}

[data-bs-theme=light] {
    --kx-card-bg: #ffffff;
    --kx-card-border: #e2e7ec;
    --kx-card-shadow: 0 1px 2px rgba(20, 35, 50, 0.05), 0 8px 24px rgba(20, 35, 50, 0.05);
    --kx-up: #12a17a;
    --kx-down: #d64545;
}

.kx-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--kx-card-bg);
    border: 1px solid var(--kx-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--kx-card-shadow);
}

.kx-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.15rem 1.25rem 0.5rem;
}

.kx-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-card-subtitle {
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-card-body {
    flex: 1;
    padding: 0.5rem 1.25rem 1.25rem;
}

.kx-card-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kx-accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.kx-card-link:hover {
    text-decoration: underline;
}

/* segmented buttons - month / quarter / year */
.kx-seg {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.15);
}

[data-bs-theme=light] .kx-seg {
    background: #eef2f5;
}

.kx-seg button {
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--kx-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

.kx-seg button:hover {
    color: var(--kx-text);
}

.kx-seg button.active {
    background: var(--kx-accent);
    color: var(--kx-ink);
    box-shadow: 0 2px 8px rgba(var(--kx-accent-rgb), 0.35);
}

.kx-select {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
    padding: 0.3rem 2rem 0.3rem 0.7rem;
    font-size: 0.8rem;
    border-radius: 0.55rem;
}

/* charts sit in a fixed height box so they line up */
.kx-chart {
    height: 18rem;
    margin: 0 -0.5rem;
}

.kx-chart.is-tall {
    height: 20rem;
}

/* ---------------------------------------------------------------------- */
/* dashboard                                                              */
/* ---------------------------------------------------------------------- */

.kx-dash {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kx-hello {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.kx-hello-club {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.kx-hello-logo {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.9rem;
    background: var(--kx-tile);
    border: 1px solid rgba(var(--kx-accent-rgb), 0.3);
    box-shadow: 0 0 0 4px rgba(var(--kx-accent-rgb), 0.07);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kx-accent-text);
}

.kx-hello-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.3rem;
}

.kx-hello-date {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kx-accent-text);
}

.kx-hello h1 {
    margin: 0.15rem 0 0.1rem;
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--bs-heading-color, #fff);
}

.kx-hello p {
    margin: 0;
    color: var(--kx-text-muted);
}

.kx-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kx-quick a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.6rem;
    background: var(--kx-card-bg);
    color: var(--kx-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.kx-quick a i {
    color: var(--kx-accent-text);
    font-size: 1rem;
}

.kx-quick a:hover {
    border-color: rgba(var(--kx-accent-rgb), 0.55);
    transform: translateY(-1px);
}

.kx-quick a.is-primary {
    background: var(--kx-accent);
    border-color: var(--kx-accent);
    color: var(--kx-ink);
}

.kx-quick a.is-primary i {
    color: var(--kx-ink);
}

/* headline figures */
.kx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.kx-kpi {
    position: relative;
    overflow: hidden;
    padding: 1.2rem 1.25rem 1.1rem;
}

.kx-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.kx-kpi-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

.kx-kpi-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(var(--kx-accent-rgb), 0.13);
    color: var(--kx-accent-text);
    font-size: 1.1rem;
}

.kx-kpi-value {
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-heading-color, #fff);
    letter-spacing: 0.01em;
}

.kx-kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.76rem;
    color: var(--kx-text-muted);
}

.kx-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.72rem;
}

.kx-delta.is-up {
    background: rgba(var(--kx-accent-rgb), 0.15);
    color: var(--kx-up);
}

.kx-delta.is-down {
    background: rgba(255, 107, 107, 0.14);
    color: var(--kx-down);
}

.kx-delta.is-flat {
    background: var(--kx-hover);
    color: var(--kx-text-muted);
}

/* lists of classes, payments and birthdays */
.kx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kx-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--kx-line);
}

.kx-list li:last-child {
    border-bottom: 0;
}

.kx-list-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: var(--kx-tile);
    border: 1px solid var(--kx-line);
    line-height: 1;
}

.kx-list-icon.is-date span:first-child {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-accent-text);
}

.kx-list-icon.is-date span:last-child {
    margin-top: 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-list-icon.is-avatar {
    border-radius: 50%;
    background: rgba(var(--kx-accent-rgb), 0.14);
    border-color: rgba(var(--kx-accent-rgb), 0.25);
    color: var(--kx-accent-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.kx-list-main {
    flex: 1;
    min-width: 0;
}

.kx-list-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--kx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-list-sub {
    font-size: 0.76rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-list-end {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kx-text);
    white-space: nowrap;
}

.kx-list-end .kx-list-sub {
    font-weight: 400;
}

.kx-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    background: rgba(var(--kx-accent-rgb), 0.14);
    color: var(--kx-accent-text);
    font-size: 0.7rem;
    font-weight: 700;
}

/* nothing to show yet */
.kx-empty {
    height: 100%;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--kx-text-muted);
    font-size: 0.85rem;
}

/* the big icon only - not icons inside a button in the empty state */
.kx-empty > i {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kx-hover);
    font-size: 1.3rem;
    color: var(--kx-accent-text);
}

@media (max-width: 1399.98px) {
    .kx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kx-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-hello h1 {
        font-size: 1.5rem;
    }
}


/* ---------------------------------------------------------------------- */
/* forms - every page built with FormHelper picks these up                */
/* ---------------------------------------------------------------------- */

:root,
[data-bs-theme=dark] {
    --kx-input-bg: rgba(8, 14, 20, 0.32);
    --kx-input-border: rgba(255, 255, 255, 0.12);
    --kx-input-border-hover: rgba(255, 255, 255, 0.24);
    --kx-switch-off: rgba(255, 255, 255, 0.18);
    --kx-danger: #ff7a7a;
    --kx-danger-rgb: 255, 122, 122;
    --kx-check: rgba(255, 255, 255, 0.05);
}

[data-bs-theme=light] {
    --kx-input-bg: #ffffff;
    --kx-input-border: #cdd6de;
    --kx-input-border-hover: #a9b6c2;
    --kx-switch-off: #c3ccd5;
    --kx-danger: #d64545;
    --kx-danger-rgb: 214, 69, 69;
    --kx-check: rgba(20, 35, 50, 0.06);
}

/* labels */
.form-label {
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-label-hint {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--kx-text-muted);
}

/* text boxes and drop downs */
.form-control,
.form-select {
    min-height: 2.6rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    color: var(--kx-text);
    background-color: var(--kx-input-bg);
    border: 1px solid var(--kx-input-border);
    border-radius: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select {
    padding-right: 2.25rem;
}

textarea.form-control {
    line-height: 1.55;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--kx-input-border-hover);
}

.form-control:focus,
.form-select:focus {
    color: var(--kx-text);
    background-color: var(--kx-input-bg);
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.18);
    outline: 0;
}

.form-control::placeholder {
    color: var(--kx-text-muted);
    opacity: 0.75;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly]:not([type=date]):not([type=time]) {
    opacity: 0.65;
}

.form-control-sm,
.form-select-sm {
    min-height: 2.1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.82rem;
    border-radius: 0.5rem;
}

.kx-select {
    min-height: 2.1rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--kx-danger);
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--kx-danger-rgb), 0.2);
}

/* the message under a field that failed */
.kx-content p.text-danger.mt-2 {
    margin-top: 0.4rem !important;
    font-size: 0.8rem;
    color: var(--kx-danger) !important;
}

.input-group-text {
    color: var(--kx-text-muted);
    background: var(--kx-hover);
    border-color: var(--kx-input-border);
    border-radius: 0.6rem;
}

.form-check-input {
    border-color: var(--kx-input-border-hover);
    background-color: var(--kx-input-bg);
}

.form-check-input:checked {
    background-color: var(--kx-accent);
    border-color: var(--kx-accent);
}

.form-check-input:focus {
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.18);
}

/* searchable drop downs (select-picker plugin) look like the other fields */
body .picker {
    min-height: 2.6rem;
    background-color: var(--kx-input-bg);
    border: 1px solid var(--kx-input-border);
    border-radius: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body .picker:hover {
    border-color: var(--kx-input-border-hover);
}

body .picker:focus-within {
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.18);
}

body .picker .pc-select .pc-element {
    min-height: calc(2.6rem - 2px);
    padding: 0.55rem 2.25rem 0.55rem 0.8rem;
    font-size: 0.9rem;
    color: var(--kx-text);
    border-radius: 0.6rem;
}

body .picker .pc-select .pc-list {
    top: calc(100% + 6px);
    left: -1px;
    width: calc(100% + 2px);
    padding: 0.4rem;
    background: var(--kx-menu-bg);
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
    box-shadow: var(--kx-shadow);
}

body .picker .pc-select .pc-list input[type=search] {
    width: 100%;
    margin: 0 0 0.35rem;
    color: var(--kx-text);
    background: var(--kx-input-bg);
    border-color: var(--kx-input-border);
    border-radius: 0.5rem;
}

body .picker .pc-select .pc-list input[type=search]:focus {
    border-color: var(--kx-accent);
    box-shadow: none;
}

body .picker .pc-select .pc-list ul > li {
    padding: 0.45rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.875rem;
    color: var(--kx-text);
}

body .picker .pc-select .pc-list ul > li:hover {
    background: var(--kx-active);
    color: var(--kx-text);
}

/* on / off switch (FormHelper::switchInput) - label on the left, switch on the right */
.kx-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    cursor: pointer;
}

.kx-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kx-switch-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--kx-text);
}

.kx-switch-track {
    order: 2;
    position: relative;
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--kx-switch-off);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.kx-switch-knob {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.kx-switch-input:checked + .kx-switch-track {
    background: var(--kx-accent);
}

.kx-switch-input:checked + .kx-switch-track .kx-switch-knob {
    transform: translateX(1.1rem);
}

.kx-switch-input:focus-visible + .kx-switch-track {
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

.kx-switch-input:disabled + .kx-switch-track {
    opacity: 0.5;
}

.kx-switch.is-invalid .kx-switch-track {
    box-shadow: 0 0 0 2px var(--kx-danger);
}

/* a group of switches reads as one list */
.kx-switches {
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
}

.kx-switches > .kx-switch {
    padding: 0.85rem 1rem;
}

.kx-switches > .kx-switch + .kx-switch,
.kx-switches > p + .kx-switch {
    border-top: 1px solid var(--kx-line);
}

.kx-switches > p.text-danger {
    padding: 0 1rem 0.75rem;
}

/* colour pickers (spectrum plugin) - a swatch and its code */
.sp-replacer {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.6rem;
    min-width: 9rem;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    color: var(--kx-text);
    background: var(--kx-input-bg);
    border: 1px solid var(--kx-input-border);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-replacer:hover {
    border-color: var(--kx-input-border-hover);
    color: var(--kx-text);
}

.sp-replacer.sp-active {
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.18);
}

.sp-replacer .sp-preview {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border: 1px solid var(--kx-input-border-hover);
    border-radius: 0.4rem;
    overflow: hidden;
}

.sp-replacer .sp-dd {
    display: none;
}

.kx-color-code,
.kx-swatch-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

body .sp-container {
    background: var(--kx-menu-bg);
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
    box-shadow: var(--kx-shadow);
}

body .sp-container .sp-picker-container .sp-input-container .sp-input {
    border-radius: 0.45rem;
}

/* a colour shown read only */
.kx-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.kx-swatch-chip {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
    border: 1px solid var(--kx-input-border-hover);
}

/* file uploads */
.kx-file-input .form-control {
    padding: 0.35rem;
    cursor: pointer;
}

.form-control[type=file]::file-selector-button {
    margin: 0 0.75rem 0 0;
    padding: 0.35rem 0.85rem;
    border: 0;
    border-radius: 0.45rem;
    background: rgba(var(--kx-accent-rgb), 0.14);
    color: var(--kx-accent-text);
    font-size: 0.82rem;
    font-weight: 600;
}

.form-control[type=file]:hover:not(:disabled):not([readonly])::file-selector-button {
    background: rgba(var(--kx-accent-rgb), 0.24);
}

.kx-file-stored {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 2.6rem;
    padding: 0.45rem 0.6rem 0.45rem 0.45rem;
    background: var(--kx-input-bg);
    border: 1px solid var(--kx-input-border);
    border-radius: 0.6rem;
}

.kx-file-thumb {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.45rem;
    font-size: 1.2rem;
    color: var(--kx-accent-text);
    background-color: var(--kx-hover);
    background-image: conic-gradient(var(--kx-check) 25%, transparent 0 50%, var(--kx-check) 0 75%, transparent 0);
    background-size: 12px 12px;
}

.kx-file-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kx-file-name {
    flex: 1;
    min-width: 6rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kx-text);
}

.kx-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---------------------------------------------------------------------- */
/* buttons                                                                */
/* ---------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.6rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
    letter-spacing: 0.01em;
}

.btn-sm {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.78rem;
    --bs-btn-border-radius: 0.5rem;
}

.btn > .bi:first-child:not(:only-child) {
    margin-right: 0.35rem;
}

/* main action - solid green; the submit button in an old style form footer gets it too.
   colours are set directly as well because the template sets them without the variables */
.btn-theme,
.kx-content .hljs-container .btn-outline-theme[type=submit] {
    --bs-btn-color: var(--kx-ink);
    --bs-btn-bg: var(--kx-accent);
    --bs-btn-border-color: var(--kx-accent);
    --bs-btn-hover-color: var(--kx-ink);
    --bs-btn-hover-bg: #5adcb5;
    --bs-btn-hover-border-color: #5adcb5;
    --bs-btn-active-color: var(--kx-ink);
    --bs-btn-active-bg: #34bf96;
    --bs-btn-active-border-color: #34bf96;
    --bs-btn-disabled-color: var(--kx-ink);
    --bs-btn-disabled-bg: var(--kx-accent);
    --bs-btn-disabled-border-color: var(--kx-accent);
    box-shadow: 0 2px 10px rgba(var(--kx-accent-rgb), 0.22);
}

/* secondary green action - a soft tint */
.btn-outline-theme {
    --bs-btn-color: var(--kx-accent-text);
    --bs-btn-bg: rgba(var(--kx-accent-rgb), 0.08);
    --bs-btn-border-color: rgba(var(--kx-accent-rgb), 0.35);
    --bs-btn-hover-color: var(--kx-ink);
    --bs-btn-hover-bg: var(--kx-accent);
    --bs-btn-hover-border-color: var(--kx-accent);
    --bs-btn-active-color: var(--kx-ink);
    --bs-btn-active-bg: #34bf96;
    --bs-btn-active-border-color: #34bf96;
    --bs-btn-disabled-color: var(--kx-accent-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(var(--kx-accent-rgb), 0.35);
}

.btn-theme,
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.kx-content .hljs-container .btn-outline-theme[type=submit],
.kx-content .hljs-container .btn-outline-theme[type=submit]:hover,
.kx-content .hljs-container .btn-outline-theme[type=submit]:focus,
.kx-content .hljs-container .btn-outline-theme[type=submit]:active {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-theme:hover,
.kx-content .hljs-container .btn-outline-theme[type=submit]:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-theme::before {
    display: none;
}

.btn-outline-theme {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-outline-theme:hover,
.btn-outline-theme.active,
.btn-outline-theme:active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-theme:disabled,
.btn-outline-theme.disabled {
    color: var(--bs-btn-disabled-color);
}

/* neutral action - cancel, back, reset */
.btn-outline-default {
    --bs-btn-color: var(--kx-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--kx-input-border);
    --bs-btn-hover-color: var(--kx-text);
    --bs-btn-hover-bg: var(--kx-hover);
    --bs-btn-hover-border-color: var(--kx-input-border-hover);
    --bs-btn-active-color: var(--kx-text);
    --bs-btn-active-bg: var(--kx-hover);
    --bs-btn-active-border-color: var(--kx-input-border-hover);
    --bs-btn-disabled-color: var(--kx-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kx-input-border);
}

.btn-outline-danger {
    --bs-btn-color: var(--kx-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--kx-danger-rgb), 0.4);
    --bs-btn-hover-color: var(--kx-danger);
    --bs-btn-hover-bg: rgba(var(--kx-danger-rgb), 0.12);
    --bs-btn-hover-border-color: var(--kx-danger);
    --bs-btn-active-color: var(--kx-danger);
    --bs-btn-active-bg: rgba(var(--kx-danger-rgb), 0.18);
    --bs-btn-active-border-color: var(--kx-danger);
}

/* ---------------------------------------------------------------------- */
/* messages                                                               */
/* ---------------------------------------------------------------------- */

.kx-content .alert,
.kx-owings .alert {
    --bs-alert-border-radius: 0.7rem;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.85rem;
    font-size: 0.9rem;
    color: var(--kx-text);
}

.kx-content .alert-danger,
.kx-owings .alert-danger {
    --bs-alert-bg: rgba(var(--kx-danger-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--kx-danger-rgb), 0.35);
}

.kx-content .alert-success,
.kx-content .alert-info,
.kx-owings .alert-success {
    --bs-alert-bg: rgba(var(--kx-accent-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--kx-accent-rgb), 0.35);
}

.kx-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.kx-alert > .bi {
    font-size: 1.1rem;
    line-height: 1.25;
}

.kx-alert.alert-danger > .bi {
    color: var(--kx-danger);
}

.kx-alert.alert-success > .bi {
    color: var(--kx-accent-text);
}

/* ---------------------------------------------------------------------- */
/* the template's panels - solid cards like the dashboard's               */
/* ---------------------------------------------------------------------- */

.kx-content .card {
    background: var(--kx-card-bg);
    border: 1px solid var(--kx-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--kx-card-shadow);
}

.kx-content .card .card-arrow {
    display: none;
}

.kx-content .card > .hljs-container {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--kx-line);
}

.kx-content .card-body h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-content hr {
    border-color: var(--kx-line);
    opacity: 1;
}

.form-view {
    font-size: 0.95rem;
    color: var(--kx-text);
}

/* ---------------------------------------------------------------------- */
/* page heading and settings pages                                        */
/* ---------------------------------------------------------------------- */

.kx-page {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kx-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.kx-page-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--bs-heading-color, #fff);
}

.kx-page-sub {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--kx-text-muted);
}

.kx-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* a page's own form (not forms inside lists, like the payments date range) */
.kx-page > form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* a section: what it is on the left, its settings on the right */
.kx-settings {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 1rem 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kx-line);
}

.kx-settings-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border-radius: 0.6rem;
    background: rgba(var(--kx-accent-rgb), 0.13);
    color: var(--kx-accent-text);
    font-size: 1.05rem;
}

.kx-settings-title {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-settings-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--kx-text-muted);
}

.kx-settings-card {
    height: auto;
}

.kx-settings-card > .kx-card-body {
    padding: 1.5rem;
}

.kx-subhead {
    margin: 0 0 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-settings-card > .kx-subhead {
    margin: 1.4rem 1.5rem 0;
}

.kx-card-body .kx-subhead:not(:first-child) {
    margin-top: 1.75rem;
}

.kx-subhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.kx-subhead-row .kx-subhead {
    margin: 0;
}

/* values shown read only - a label over each value, ruled rows */
.kx-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    margin: 0;
    padding: 0.25rem 1.5rem 0;
    overflow: hidden;
}

.kx-fields.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kx-fields.is-1 {
    grid-template-columns: minmax(0, 1fr);
}

.kx-field {
    min-width: 0;
    margin-bottom: -1px;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--kx-line);
}

.kx-field dt {
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

.kx-field dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--kx-text);
    overflow-wrap: anywhere;
}

.kx-unset {
    font-style: italic;
    color: var(--kx-text-muted);
    opacity: 0.8;
}

/* yes / no with a status dot */
.kx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.kx-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--kx-switch-off);
}

.kx-status.is-on::before {
    background: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.18);
}

/* images shown on a checkerboard so transparent logos read properly */
.kx-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.kx-image {
    margin: 0;
}

.kx-image-frame {
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.65rem;
    background-color: var(--kx-input-bg);
    background-image: conic-gradient(var(--kx-check) 25%, transparent 0 50%, var(--kx-check) 0 75%, transparent 0);
    background-size: 16px 16px;
}

.kx-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kx-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

/* save / cancel stays in reach at the bottom of long forms */
.kx-actionbar {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: var(--kx-card-bg);
    border: 1px solid var(--kx-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--kx-shadow);
}

@media (max-width: 991.98px) {
    .kx-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-settings-intro {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0.75rem;
    }

    .kx-settings-icon {
        margin: 0;
    }

    .kx-settings-title {
        margin: 0;
    }

    .kx-settings-desc {
        grid-column: 1 / -1;
        margin-top: 0.5rem;
    }

    .kx-dojo-actions {
        grid-column: 1 / -1;
        margin: 0.75rem 0 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .kx-fields,
    .kx-fields.is-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------------------------------------------------------------------- */
/* list and form pages - widths, back link, form card                     */
/* ---------------------------------------------------------------------- */

.kx-page.is-medium {
    max-width: 60rem;
}

.kx-page.is-narrow {
    max-width: 44rem;
}

.kx-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    text-decoration: none;
}

.kx-back:hover {
    color: var(--kx-accent-text);
}

.kx-form-body {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: 1.5rem;
}

.kx-card-foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--kx-line);
}

.kx-help {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--kx-text-muted);
}

.kx-switch-desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

/* ---------------------------------------------------------------------- */
/* ordered lists - grades, titles, roles                                  */
/* ---------------------------------------------------------------------- */

.kx-order {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-order-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1.25rem;
    border-top: 1px solid var(--kx-line);
    transition: background 0.15s ease;
}

.kx-order-row:hover {
    background: var(--kx-hover);
}

.kx-order-row:last-child {
    border-radius: 0 0 0.9rem 0.9rem;
}

.kx-order-pos {
    width: 1.75rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--kx-text-muted);
    font-variant-numeric: tabular-nums;
}

.kx-order-media {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: var(--kx-hover);
    color: var(--kx-text-muted);
    font-size: 1.1rem;
    overflow: hidden;
}

.kx-order-media img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.kx-order-main {
    flex: 1;
    min-width: 0;
}

.kx-order-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kx-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.kx-order-name:hover {
    color: var(--kx-accent-text);
}

.kx-order-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

/* a small on / off label */
.kx-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-tag.is-on {
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
}

.kx-icon-action {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--kx-text-muted);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kx-icon-action:hover {
    color: var(--kx-text);
    background: var(--kx-hover);
    border-color: var(--kx-line);
}

.kx-icon-action.is-danger:hover {
    color: var(--kx-danger);
    background: rgba(var(--kx-danger-rgb), 0.1);
    border-color: rgba(var(--kx-danger-rgb), 0.3);
}

.kx-icon-action:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.kx-icon-action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

@media (max-width: 575.98px) {
    .kx-order-row {
        flex-wrap: wrap;
        padding: 0.8rem 1rem;
    }

    .kx-order-row .kx-row-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------------- */
/* dialogs                                                                */
/* ---------------------------------------------------------------------- */

.modal-content {
    color: var(--kx-text);
    background: var(--kx-menu-bg);
    border: 1px solid var(--kx-line);
    border-radius: 1rem;
    box-shadow: var(--kx-shadow);
}

.modal-header,
.modal-footer {
    border-color: var(--kx-line);
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.modal-backdrop.show {
    opacity: 0.6;
}

/* a confirmation - icon, question, answer buttons */
.kx-confirm .modal-body {
    padding: 1.5rem 1.5rem 0.75rem;
    text-align: center;
}

.kx-confirm .modal-footer {
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.5rem;
    border: 0;
}

.kx-confirm .modal-footer .btn {
    flex: 1;
    margin: 0;
}

.kx-confirm-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-confirm-icon.is-danger {
    color: var(--kx-danger);
    background: rgba(var(--kx-danger-rgb), 0.13);
}

.kx-confirm-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.kx-confirm-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--kx-text-muted);
}

/* the template's other buttons, as used in older dialogs */
.btn-primary {
    --bs-btn-color: var(--kx-ink);
    --bs-btn-bg: var(--kx-accent);
    --bs-btn-border-color: var(--kx-accent);
    --bs-btn-hover-color: var(--kx-ink);
    --bs-btn-hover-bg: #5adcb5;
    --bs-btn-hover-border-color: #5adcb5;
    --bs-btn-active-color: var(--kx-ink);
    --bs-btn-active-bg: #34bf96;
    --bs-btn-active-border-color: #34bf96;
}

.btn-secondary {
    --bs-btn-color: var(--kx-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--kx-input-border);
    --bs-btn-hover-color: var(--kx-text);
    --bs-btn-hover-bg: var(--kx-hover);
    --bs-btn-hover-border-color: var(--kx-input-border-hover);
    --bs-btn-active-color: var(--kx-text);
    --bs-btn-active-bg: var(--kx-hover);
    --bs-btn-active-border-color: var(--kx-input-border-hover);
}

.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #d64545;
    --bs-btn-border-color: #d64545;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #e05a5a;
    --bs-btn-hover-border-color: #e05a5a;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #c23b3b;
    --bs-btn-active-border-color: #c23b3b;
}

.btn-primary,
.btn-primary:hover,
.btn-secondary,
.btn-secondary:hover,
.btn-danger,
.btn-danger:hover {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

[data-bs-theme=dark] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* a row that was just moved glows, and its number lights up, so it is easy to follow */
.kx-order-row {
    position: relative;
}

.kx-order-row.is-moved {
    z-index: 2;
    animation: kx-order-moved 1.4s ease-out;
}

.kx-order-row.is-moved .kx-order-pos {
    animation: kx-order-moved-pos 1.4s ease-out;
}

@keyframes kx-order-moved {
    0%, 35% {
        background: rgba(var(--kx-accent-rgb), 0.14);
        box-shadow: inset 3px 0 0 var(--kx-accent), 0 8px 26px rgba(var(--kx-accent-rgb), 0.25);
    }
    100% {
        background: transparent;
        box-shadow: inset 3px 0 0 transparent, 0 0 0 transparent;
    }
}

@keyframes kx-order-moved-pos {
    0%, 35% {
        color: var(--kx-ink);
        background: var(--kx-accent);
        border-radius: 50%;
        transform: scale(0.9);
    }
    100% {
        color: var(--kx-text-muted);
        background: transparent;
        transform: none;
    }
}

.kx-order-pos {
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .kx-order-row.is-moved,
    .kx-order-row.is-moved .kx-order-pos {
        animation: none;
    }
}

/* ---------------------------------------------------------------------- */
/* tournament leaderboard                                                 */
/* ---------------------------------------------------------------------- */

:root,
[data-bs-theme=dark] {
    --kx-gold: #f2c14e;
    --kx-gold-rgb: 242, 193, 78;
    --kx-gold-text: #f5cd6b;
    --kx-silver: #c3ccd6;
    --kx-silver-rgb: 195, 204, 214;
    --kx-silver-text: #d3dae2;
    --kx-bronze: #d48a55;
    --kx-bronze-rgb: 212, 138, 85;
    --kx-bronze-text: #e09a68;
}

[data-bs-theme=light] {
    --kx-gold-text: #a3750c;
    --kx-silver-text: #66737f;
    --kx-bronze-text: #a5592a;
}

.kx-board-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* headline figures */
.kx-board-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.kx-board-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    background: var(--kx-card-bg);
    border: 1px solid var(--kx-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--kx-card-shadow);
}

.kx-board-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    font-size: 1.05rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-board-stat-icon.is-gold {
    color: var(--kx-gold-text);
    background: rgba(var(--kx-gold-rgb), 0.15);
}

.kx-board-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-heading-color, #fff);
    font-variant-numeric: tabular-nums;
}

.kx-board-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

/* the podium - second, first, third, each standing on its step */
.kx-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
    padding-top: 1.5rem;
}

.kx-podium.is-2 {
    grid-template-columns: repeat(2, minmax(0, 17rem));
    justify-content: center;
}

.kx-podium.is-1 {
    grid-template-columns: minmax(0, 19rem);
    justify-content: center;
}

.kx-podium-place {
    --kx-medal: var(--kx-gold);
    --kx-medal-rgb: var(--kx-gold-rgb);
    --kx-medal-text: var(--kx-gold-text);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: kx-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--kx-delay, 0s);
}

.kx-podium-place.is-silver {
    --kx-medal: var(--kx-silver);
    --kx-medal-rgb: var(--kx-silver-rgb);
    --kx-medal-text: var(--kx-silver-text);
}

.kx-podium-place.is-bronze {
    --kx-medal: var(--kx-bronze);
    --kx-medal-rgb: var(--kx-bronze-rgb);
    --kx-medal-text: var(--kx-bronze-text);
}

.kx-podium-player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 1rem 1.15rem;
    text-align: center;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(var(--kx-medal-rgb), 0.14), transparent 70%),
        var(--kx-card-bg);
    border: 1px solid rgba(var(--kx-medal-rgb), 0.3);
    border-radius: 0.9rem;
    box-shadow: var(--kx-card-shadow);
}

.is-gold .kx-podium-player {
    padding-top: 1.75rem;
    border-color: rgba(var(--kx-medal-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--kx-medal-rgb), 0.15), 0 18px 44px rgba(var(--kx-medal-rgb), 0.14);
}

.kx-podium-crown {
    position: absolute;
    top: -1.05rem;
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    margin-left: -1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    color: #3a2a05;
    background: linear-gradient(145deg, #ffe08a, var(--kx-gold));
    box-shadow: 0 4px 14px rgba(var(--kx-gold-rgb), 0.45);
    animation: kx-float 2.6s ease-in-out infinite alternate;
}

.kx-podium-avatar {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kx-medal-text);
    background: rgba(var(--kx-medal-rgb), 0.14);
    box-shadow: 0 0 0 3px var(--kx-medal), 0 0 0 7px rgba(var(--kx-medal-rgb), 0.15);
}

.is-gold .kx-podium-avatar {
    width: 5rem;
    height: 5rem;
    font-size: 1.45rem;
}

.kx-podium-medal {
    position: absolute;
    right: -0.2rem;
    bottom: -0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1d1606;
    background: var(--kx-medal);
    border: 2px solid var(--kx-card-bg);
}

.kx-podium-name {
    max-width: 100%;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
    overflow-wrap: anywhere;
}

.kx-podium-tag {
    margin-top: 0.3rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kx-medal-text);
    background: rgba(var(--kx-medal-rgb), 0.15);
}

.kx-podium-score {
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-heading-color, #fff);
    font-variant-numeric: tabular-nums;
}

.is-gold .kx-podium-score {
    font-size: 2.5rem;
    color: var(--kx-medal-text);
}

.kx-podium-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.9rem;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-podium-meta .bi {
    margin-right: 0.15rem;
}

.kx-podium-date {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--kx-text-muted);
    opacity: 0.8;
}

/* delete sits quietly in the corner until the card is pointed at */
.kx-podium-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--kx-text-muted);
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.kx-podium-player:hover .kx-podium-delete,
.kx-podium-delete:focus-visible {
    opacity: 1;
}

.kx-podium-delete:hover {
    color: var(--kx-danger);
    background: rgba(var(--kx-danger-rgb), 0.1);
}

@media (hover: none) {
    .kx-podium-delete {
        opacity: 0.6;
    }
}

/* the steps */
.kx-podium-block {
    height: 3.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    border-top: 3px solid var(--kx-medal);
    border-radius: 0.6rem 0.6rem 0 0;
    background: linear-gradient(180deg, rgba(var(--kx-medal-rgb), 0.28), rgba(var(--kx-medal-rgb), 0.04));
}

.kx-podium-block span {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--kx-medal-text);
    opacity: 0.85;
}

.is-silver .kx-podium-block {
    height: 5.25rem;
}

.is-gold .kx-podium-block {
    height: 7rem;
}

/* full standings */
.kx-standings {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-standing {
    display: grid;
    grid-template-columns: 2rem 2.4rem minmax(0, 1fr) minmax(5rem, 9rem) 3.75rem auto 2.1rem;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--kx-line);
    animation: kx-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--kx-delay, 0s);
    transition: background 0.15s ease;
}

.kx-standing:hover {
    background: var(--kx-hover);
}

.kx-standing:last-child {
    border-radius: 0 0 0.9rem 0.9rem;
}

.kx-standing-rank {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kx-text-muted);
    font-variant-numeric: tabular-nums;
}

.kx-standing .kx-list-icon {
    width: 2.4rem;
    height: 2.4rem;
}

.kx-standing-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--kx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kx-standing-sub {
    font-size: 0.72rem;
    color: var(--kx-text-muted);
}

.kx-standing-bar {
    height: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--kx-hover);
}

.kx-standing-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--kx-accent-rgb), 0.55), var(--kx-accent));
    transform-origin: left;
    animation: kx-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--kx-delay, 0s) + 0.15s);
}

.kx-standing-score {
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kx-text);
    font-variant-numeric: tabular-nums;
}

.kx-standing-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* nobody has played yet */
.kx-board-empty {
    align-items: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.kx-board-empty-art {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 2.6rem;
    color: var(--kx-gold-text);
    background: radial-gradient(circle, rgba(var(--kx-gold-rgb), 0.22), rgba(var(--kx-gold-rgb), 0.04) 70%);
    box-shadow: 0 0 0 1px rgba(var(--kx-gold-rgb), 0.25), 0 0 0 10px rgba(var(--kx-gold-rgb), 0.05);
}

.kx-board-empty-art .bi {
    animation: kx-float 2.6s ease-in-out infinite alternate;
}

.kx-board-empty h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-board-empty p {
    max-width: 28rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--kx-text-muted);
}

@keyframes kx-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@keyframes kx-grow {
    from {
        transform: scaleX(0);
    }
}

@keyframes kx-float {
    to {
        transform: translateY(-4px);
    }
}

@media (max-width: 991.98px) {
    .kx-board-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kx-standing {
        grid-template-columns: 2rem 2.4rem minmax(0, 1fr) minmax(4rem, 7rem) 3.5rem 2.1rem;
    }

    .kx-standing-meta {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .kx-podium,
    .kx-podium.is-2 {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 1rem;
    }

    .kx-podium-place.is-gold {
        order: -1;
    }

    .kx-podium-block {
        display: none;
    }

    .kx-standing {
        grid-template-columns: 1.5rem 2.4rem minmax(0, 1fr) auto 2.1rem;
        padding: 0.75rem 1rem;
    }

    .kx-standing-bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kx-podium-place,
    .kx-standing,
    .kx-standing-bar span,
    .kx-podium-crown,
    .kx-board-empty-art .bi {
        animation: none;
    }
}

/* ---------------------------------------------------------------------- */
/* words - a library: categories on the left, the chosen words on the right */
/* ---------------------------------------------------------------------- */

.kx-words {
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

.kx-words-nav {
    position: sticky;
    top: calc(var(--kx-topbar-height, 3.75rem) + 1rem);
    max-height: calc(100vh - var(--kx-topbar-height, 3.75rem) - 2rem);
    height: auto;
    overflow: hidden;
}

.kx-words-search {
    position: relative;
    padding: 1rem 1rem 0.5rem;
}

.kx-words-search .bi {
    position: absolute;
    top: 50%;
    left: 1.75rem;
    margin-top: 0.25rem;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--kx-text-muted);
    pointer-events: none;
}

.kx-words-search .form-control {
    padding-left: 2.3rem;
}

.kx-words-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.25rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

/* the category tree */
.kx-tree,
.kx-tree-subs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-tree {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0.5rem 0.75rem;
}

.kx-tree-cat-row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    border-radius: 0.55rem;
}

.kx-tree-cat-row:hover {
    background: var(--kx-hover);
}

.kx-tree-toggle,
.kx-tree-sub {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--kx-text);
    text-align: left;
    font-size: 0.875rem;
}

.kx-tree-toggle {
    font-weight: 600;
}

.kx-tree-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--kx-text-muted);
    transition: transform 0.2s ease;
}

.kx-tree-cat.is-open .kx-tree-chevron {
    transform: rotate(90deg);
}

.kx-tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kx-tree-count {
    flex-shrink: 0;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-tree-more {
    width: 1.9rem;
    height: 1.9rem;
    opacity: 0;
}

.kx-tree-cat-row:hover .kx-tree-more,
.kx-tree-more:focus-visible,
.kx-tree-more[aria-expanded=true] {
    opacity: 1;
}

@media (hover: none) {
    .kx-tree-more {
        opacity: 0.7;
    }
}

/* subcategories hang off a guide line under their category */
.kx-tree-subs {
    display: none;
    margin: 0.1rem 0 0.4rem 1.05rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--kx-line);
}

.kx-tree-cat.is-open .kx-tree-subs {
    display: block;
}

.kx-tree-subs li {
    display: flex;
}

.kx-tree-sub {
    padding: 0.45rem 0.6rem;
    color: var(--kx-text-muted);
}

/* a subcategory and its "..." button - laid out like a category row, so the counts line up */
.kx-tree-sub-row {
    align-items: center;
    gap: 0.15rem;
    border-radius: 0.55rem;
}

.kx-tree-sub-row:hover .kx-tree-more {
    opacity: 1;
}

.kx-tree-sub:hover {
    color: var(--kx-text);
    background: var(--kx-hover);
}

/* the chosen subcategory looks like the chosen menu item: a soft tint and a solid
   bar to its left - here the bar sits on the tree's guide line */
.kx-tree-sub {
    position: relative;
}

.kx-tree-sub.is-active {
    color: var(--kx-text);
    font-weight: 600;
    background: var(--kx-active);
    box-shadow: inset 0 0 0 1px rgba(var(--kx-accent-rgb), 0.18);
}

.kx-tree-sub.is-active::before {
    content: "";
    position: absolute;
    left: calc(-0.6rem - 2px);
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-tree-sub.is-active .kx-tree-count {
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.15);
}

.kx-tree-sub.is-empty {
    font-style: italic;
    font-size: 0.8rem;
}

/* menus (the "..." buttons) */
.kx-menu {
    min-width: 13rem;
    padding: 0.35rem;
    background: var(--kx-menu-bg);
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
    box-shadow: var(--kx-shadow);
}

.kx-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.45rem;
    font-size: 0.85rem;
    color: var(--kx-text);
}

.kx-menu .dropdown-item .bi {
    width: 1rem;
    color: var(--kx-text-muted);
}

.kx-menu .dropdown-item:hover,
.kx-menu .dropdown-item:focus {
    color: var(--kx-text);
    background: var(--kx-hover);
}

.kx-menu .dropdown-item:disabled {
    opacity: 0.4;
}

.kx-menu .dropdown-item.is-danger,
.kx-menu .dropdown-item.is-danger .bi {
    color: var(--kx-danger);
}

.kx-menu .dropdown-item.is-danger:hover {
    background: rgba(var(--kx-danger-rgb), 0.1);
}

.kx-menu .dropdown-divider {
    margin: 0.3rem 0;
    border-color: var(--kx-line);
    opacity: 1;
}

/* the chosen subcategory */
.kx-words-panel[hidden] {
    display: none !important;
}

.kx-words-panel {
    height: auto;
    animation: kx-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.kx-words-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
}

.kx-words-crumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kx-accent-text);
}

.kx-words-crumb .bi {
    font-size: 0.65rem;
}

.kx-words-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--bs-heading-color, #fff);
}

.kx-words-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* a word: the phrase, an arrow, its translation */
.kx-word-pair {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
}

.kx-word-local {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--kx-text);
    overflow-wrap: anywhere;
}

.kx-word-arrow {
    font-size: 0.8rem;
    color: var(--kx-text-muted);
    opacity: 0.6;
}

.kx-word-foreign {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-accent-text);
    overflow-wrap: anywhere;
}

.kx-word-pair:hover .kx-word-local,
.kx-word-pair:hover .kx-word-foreign {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kx-word-media {
    flex-shrink: 0;
    display: flex;
    gap: 0.45rem;
    min-width: 4.5rem;
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-word-path {
    flex-shrink: 0;
    max-width: 40%;
    font-size: 0.72rem;
    color: var(--kx-text-muted);
    text-align: right;
}

.kx-word-row.is-result {
    padding-left: 1.25rem;
}

/* the phrase pair on the word form */
.kx-phrase-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.kx-phrase {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.75rem;
    background: var(--kx-hover);
}

.kx-phrase.is-foreign {
    border-color: rgba(var(--kx-accent-rgb), 0.3);
    background: rgba(var(--kx-accent-rgb), 0.05);
}

.kx-phrase-arrow {
    align-self: center;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-words-empty-art {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 2.6rem;
    color: var(--kx-accent-text);
    background: radial-gradient(circle, rgba(var(--kx-accent-rgb), 0.2), rgba(var(--kx-accent-rgb), 0.04) 70%);
    box-shadow: 0 0 0 1px rgba(var(--kx-accent-rgb), 0.25), 0 0 0 10px rgba(var(--kx-accent-rgb), 0.05);
}

@media (max-width: 991.98px) {
    .kx-words {
        grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
    }

    .kx-word-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .kx-word-arrow {
        display: none;
    }

    .kx-word-media {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .kx-words {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-words-nav {
        position: static;
        max-height: none;
    }

    .kx-phrase-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-phrase-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

/* ---------------------------------------------------------------------- */
/* busy overlay - shown while moving to another page or loading           */
/* ---------------------------------------------------------------------- */

.kx-busy {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 16, 22, 0.3);
    cursor: progress;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

[data-bs-theme=light] .kx-busy {
    background: rgba(238, 242, 245, 0.5);
}

.kx-busy.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

/* a green ring turning on a small disc of the card colour */
.kx-busy-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 3px solid rgba(var(--kx-accent-rgb), 0.18);
    border-top-color: var(--kx-accent);
    box-shadow: 0 0 0 0.85rem var(--kx-card-bg), 0 0 0 calc(0.85rem + 1px) var(--kx-card-border), 0 14px 40px rgba(0, 0, 0, 0.3);
    background: var(--kx-card-bg);
    animation: kx-spin 0.8s linear infinite;
}

@keyframes kx-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kx-busy-spinner {
        animation-duration: 1.6s;
    }
}

/* ---------------------------------------------------------------------- */
/* katas - the chosen kata as a numbered sequence of steps                */
/* ---------------------------------------------------------------------- */

/* the kata on show is marked in the tree like the chosen menu item */
.kx-tree-cat.is-current > .kx-tree-cat-row {
    position: relative;
    background: var(--kx-active);
    box-shadow: inset 0 0 0 1px rgba(var(--kx-accent-rgb), 0.18);
}

.kx-tree-cat.is-current > .kx-tree-cat-row::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-tree-cat.is-current .kx-tree-count {
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.15);
}

/* steps hang off a line, each with its number in a circle */
.kx-steps {
    margin: 0;
    padding: 0.5rem 1.25rem 1.5rem;
    list-style: none;
}

.kx-step {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: 1.25rem;
    scroll-margin-top: 6rem;
}

.kx-step:last-child {
    padding-bottom: 0;
}

/* the line joining one step to the next */
.kx-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    bottom: 0.25rem;
    left: calc(1.125rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--kx-line);
}

.kx-step-marker {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
    box-shadow: 0 0 0 1px rgba(var(--kx-accent-rgb), 0.3);
}

.kx-step-body {
    min-width: 0;
    border: 1px solid var(--kx-line);
    border-radius: 0.8rem;
    background: var(--kx-hover);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.kx-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 0.75rem 0.7rem 1rem;
}

.kx-step-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-step-sub {
    font-size: 0.72rem;
    color: var(--kx-text-muted);
}

.kx-step-empty {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0.9rem;
    border-top: 1px solid var(--kx-line);
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-step-actions {
    margin: 0;
}

.kx-step-actions .kx-order-row {
    padding: 0.55rem 0.75rem 0.55rem 0.5rem;
}

.kx-step-actions .kx-order-row:last-child {
    border-radius: 0 0 0.8rem 0.8rem;
}

.kx-action-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.kx-action-title {
    font-weight: 500;
}

.kx-action-main:hover .kx-action-title {
    color: var(--kx-accent-text);
}

/* the start of the description, on one line */
.kx-action-desc {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* a step that was just jumped to lights up for a moment */
.kx-step.is-flash .kx-step-body {
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.2), 0 10px 30px rgba(var(--kx-accent-rgb), 0.15);
}

.kx-step.is-flash .kx-step-marker {
    color: var(--kx-ink);
    background: var(--kx-accent);
}

.kx-search-hit {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 575.98px) {
    .kx-steps {
        padding: 0.5rem 0.75rem 1rem;
    }

    .kx-step {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: 0.6rem;
    }

    .kx-step-marker {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .kx-step:not(:last-child)::before {
        left: calc(0.875rem - 1px);
        top: 2rem;
    }
}

/* ---------------------------------------------------------------------- */
/* purchasable items - a catalogue of product cards                       */
/* ---------------------------------------------------------------------- */

.kx-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kx-shop-toolbar .kx-seg {
    flex-wrap: wrap;
}

.kx-seg-count {
    margin-left: 0.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    background: var(--kx-hover);
}

.kx-seg button.active .kx-seg-count {
    background: rgba(13, 18, 25, 0.15);
}

.kx-shop-search {
    flex: 0 1 18rem;
    padding: 0;
}

.kx-shop-search .bi {
    left: 0.8rem;
    margin-top: 0;
}

.kx-shop-group[hidden],
.kx-product[hidden] {
    display: none !important;
}

.kx-shop-group-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.kx-shop-group-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-shop-group-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-shop-group-count {
    font-size: 0.75rem;
    color: var(--kx-text-muted);
}

.kx-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 1rem;
}

/* a product: picture on top, then name, description and price */
.kx-product {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kx-card-bg);
    border: 1px solid var(--kx-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--kx-card-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: kx-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: var(--kx-delay, 0s);
}

.kx-product:not(.is-preview):hover {
    transform: translateY(-3px);
    border-color: rgba(var(--kx-accent-rgb), 0.4);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

/* the whole card opens the item; the delete button sits above the link */
.kx-product-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.kx-product-link:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--kx-accent);
}

.kx-product-media {
    position: relative;
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem;
    font-size: 2.4rem;
    color: var(--kx-text-muted);
    background:
        radial-gradient(90% 90% at 50% 20%, rgba(var(--kx-accent-rgb), 0.1), transparent 70%),
        var(--kx-hover);
    border-bottom: 1px solid var(--kx-line);
}

.kx-product-media > .bi {
    opacity: 0.55;
}

.kx-product-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kx-product-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--kx-accent-text);
    background: var(--kx-card-bg);
    box-shadow: 0 0 0 1px rgba(var(--kx-accent-rgb), 0.35);
}

.kx-product-badge.is-default {
    color: #3a2a05;
    background: linear-gradient(145deg, #ffe08a, var(--kx-gold));
    box-shadow: 0 3px 10px rgba(var(--kx-gold-rgb), 0.35);
}

.kx-product-delete {
    z-index: 2;
    background: var(--kx-card-bg);
}

.kx-product:hover .kx-product-delete,
.kx-product-delete:focus-visible {
    opacity: 1;
}

.kx-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem 1rem;
}

.kx-product-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kx-text);
    overflow-wrap: anywhere;
}

.kx-product-name.is-placeholder {
    color: var(--kx-text-muted);
    font-style: italic;
}

.kx-product-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--kx-text-muted);
}

.kx-product-price {
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kx-accent-text);
    font-variant-numeric: tabular-nums;
}

/* the dashed tile for adding another item */
.kx-product-add {
    min-height: 14rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1.5px dashed var(--kx-input-border-hover);
    background: transparent;
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    text-decoration: none;
}

.kx-product-add span {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
    transition: transform 0.2s ease;
}

.kx-product-add:hover {
    color: var(--kx-accent-text);
    border-color: var(--kx-accent);
    background: rgba(var(--kx-accent-rgb), 0.05);
}

.kx-product-add:hover span {
    transform: scale(1.08);
}

/* the item form, with its live preview beside it */
.kx-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
    align-items: start;
    gap: 1.5rem;
}

.kx-item-preview {
    position: sticky;
    top: calc(var(--kx-topbar-height, 3.75rem) + 1.25rem);
}

.kx-product.is-preview {
    animation: none;
}

/* choices shown as cards with an explanation (like the item priority) */
.kx-choices {
    display: grid;
    gap: 0.6rem;
}

.kx-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--kx-input-border);
    border-radius: 0.75rem;
    background: var(--kx-input-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.kx-choice:hover {
    border-color: var(--kx-input-border-hover);
}

.kx-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kx-choice-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kx-choice-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-choice-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--kx-text-muted);
}

.kx-choice:has(input:checked) {
    border-color: var(--kx-accent);
    background: rgba(var(--kx-accent-rgb), 0.07);
    box-shadow: 0 0 0 1px var(--kx-accent);
}

.kx-choice:has(input:checked) .kx-choice-icon {
    color: var(--kx-ink);
    background: var(--kx-accent);
}

.kx-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

fieldset legend.kx-subhead {
    float: none;
    width: auto;
}

@media (max-width: 991.98px) {
    .kx-item-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-item-preview {
        position: static;
        max-width: 17rem;
    }
}

@media (max-width: 575.98px) {
    .kx-shop-search {
        flex-basis: 100%;
    }

    .kx-shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kx-product {
        animation: none;
    }
}

/* ---------------------------------------------------------------------- */
/* payments - the ledger                                                  */
/* ---------------------------------------------------------------------- */

.kx-ledger-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.kx-period-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kx-period-seg {
    flex-wrap: wrap;
}

.kx-period-custom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.kx-period-custom[hidden] {
    display: none;
}

.kx-period-custom .form-control {
    width: auto;
}

.kx-period-text {
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-period-text .bi {
    margin-right: 0.3rem;
}

/* how the money came in - a bar made of one part per payment method */
.kx-source-mix {
    height: auto;
    padding: 1rem 1.25rem 1.1rem;
}

.kx-source-mix .kx-subhead {
    margin-bottom: 0.7rem;
}

.kx-source-bar {
    display: flex;
    gap: 2px;
    height: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--kx-hover);
}

.kx-source-part {
    min-width: 4px;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.kx-source-part.is-dim {
    opacity: 0.25;
}

.kx-source-part.is-none {
    flex: 1;
    cursor: default;
}

.kx-source-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 0.8rem;
}

.kx-source-key {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.5rem;
    margin-left: -0.5rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    font-size: 0.82rem;
    color: var(--kx-text);
}

.kx-source-key:hover {
    background: var(--kx-hover);
}

.kx-source-key.is-active {
    background: var(--kx-active);
    box-shadow: inset 0 0 0 1px rgba(var(--kx-accent-rgb), 0.25);
}

.kx-source-key.is-empty {
    opacity: 0.5;
}

.kx-source-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--kx-dot, var(--kx-accent));
}

.kx-source-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.kx-source-share {
    font-size: 0.75rem;
    color: var(--kx-text-muted);
}

/* the list itself */
.kx-ledger {
    height: auto;
}

.kx-ledger-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kx-line);
}

/* starts small and grows into the room left, so the filters beside it stay on one line */
.kx-ledger-search {
    flex: 1 1 12rem;
    max-width: 24rem;
    padding: 0;
}

.kx-ledger-search .bi {
    left: 0.8rem;
    margin-top: 0;
}

.kx-ledger-head,
.kx-ledger-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 0.8fr) 7rem;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
}

.kx-ledger-head {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
    border-bottom: 1px solid var(--kx-line);
}

.kx-ledger-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-ledger-row {
    position: relative;
    border-bottom: 1px solid var(--kx-line);
    cursor: pointer;
    transition: background 0.15s ease;
}

.kx-ledger-row[hidden] {
    display: none;
}

.kx-ledger-row:hover {
    background: var(--kx-hover);
}

.kx-ledger-row:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--kx-accent);
}

/* the payment open in the side panel */
.kx-ledger-row.is-open {
    background: var(--kx-active);
}

.kx-ledger-row.is-open::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-ledger-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0;
    border-radius: 0.55rem;
    background: var(--kx-hover);
    line-height: 1.1;
}

.kx-ledger-day {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-ledger-month {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kx-text-muted);
}

.kx-ledger-member {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.kx-ledger-member .kx-list-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
}

.kx-ledger-name,
.kx-ledger-items {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kx-ledger-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-ledger-number {
    font-size: 0.72rem;
    color: var(--kx-text-muted);
    font-variant-numeric: tabular-nums;
}

.kx-ledger-for {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.kx-ledger-items {
    max-width: 100%;
    font-size: 0.85rem;
    color: var(--kx-text);
}

.kx-ledger-source {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-ledger-amount {
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kx-text);
    font-variant-numeric: tabular-nums;
}

.kx-ledger-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    font-size: 0.8rem;
    color: var(--kx-text-muted);
}

.kx-ledger-foot[hidden],
.kx-ledger-none[hidden] {
    display: none;
}

/* the side panel */
.kx-panel.offcanvas {
    --bs-offcanvas-width: 30rem;
    color: var(--kx-text);
    background: var(--kx-menu-bg);
    border-left: 1px solid var(--kx-line);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
}

.kx-panel .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kx-line);
}

.kx-panel .offcanvas-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-panel .offcanvas-body {
    padding: 1.25rem;
}

.kx-panel-loading {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.kx-panel-loading .kx-busy-spinner {
    box-shadow: none;
    background: transparent;
}

/* ---------------------------------------------------------------------- */
/* payments - a payment's details, written like a receipt                 */
/* ---------------------------------------------------------------------- */

.kx-receipt {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kx-receipt-hero {
    padding-bottom: 1.1rem;
    border-bottom: 1px dashed var(--kx-input-border-hover);
}

.kx-receipt-amount {
    margin: 0.2rem 0 0.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-heading-color, #fff);
    font-variant-numeric: tabular-nums;
}

.kx-receipt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-receipt-meta .bi {
    margin-right: 0.25rem;
}

.kx-receipt-member {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.75rem;
    background: var(--kx-hover);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.kx-receipt-member:not(.is-static):hover {
    border-color: rgba(var(--kx-accent-rgb), 0.45);
}

.kx-receipt-member-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-receipt-member-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kx-accent-text);
}

.kx-receipt-section .kx-subhead {
    margin-bottom: 0.6rem;
}

.kx-receipt-lines,
.kx-receipt-docs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-receipt-lines li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--kx-line);
}

.kx-receipt-line-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--kx-text);
}

.kx-receipt-line-note,
.kx-receipt-line-qty {
    display: block;
    font-size: 0.75rem;
    color: var(--kx-text-muted);
}

.kx-receipt-line-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kx-receipt-totals {
    margin: 0.75rem 0 0;
}

.kx-receipt-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-receipt-totals dt {
    font-weight: 500;
}

.kx-receipt-totals dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.kx-receipt-totals > .is-total {
    margin-top: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--kx-line);
    font-size: 1.05rem;
    color: var(--kx-text);
}

.kx-receipt-totals > .is-total dt,
.kx-receipt-totals > .is-total dd {
    font-weight: 700;
}

.kx-receipt-comment {
    margin: 0;
    font-size: 0.88rem;
    color: var(--kx-text);
}

.kx-receipt-docs li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--kx-line);
    font-size: 0.85rem;
}

.kx-receipt-docs li > .bi {
    font-size: 1.2rem;
    color: var(--kx-danger);
}

.kx-receipt-docs li > .min-w-0 {
    flex: 1;
}

.kx-receipt-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.kx-receipt-open {
    margin-left: auto;
}

.kx-field-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

/* ---------------------------------------------------------------------- */
/* payments - recording a payment, checkout style                         */
/* ---------------------------------------------------------------------- */

.kx-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
    align-items: start;
    gap: 1.25rem;
}

.kx-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kx-checkout-main .kx-card {
    height: auto;
}

.kx-checkout-main .kx-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.kx-checkout-side {
    position: sticky;
    top: calc(var(--kx-topbar-height, 3.75rem) + 1.25rem);
}

.kx-checkout-receipt {
    height: auto;
}

.kx-checkout-receipt .kx-card-body {
    padding: 1.25rem;
}

/* the number in front of each step */
.kx-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    font-size: 0.68rem;
    letter-spacing: 0;
    color: var(--kx-ink);
    background: var(--kx-accent);
}

/* the catalogue - tap an item to add it */
/* groups of the catalogue - small ones (2 items or fewer) half width, side by side */
.kx-catalogue-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
}

.kx-catalogue-group.is-wide {
    grid-column: 1 / -1;
}

.kx-catalogue-group:not(.is-wide) .kx-catalogue {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

@media (max-width: 575.98px) {
    .kx-catalogue-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kx-catalogue-group[hidden] {
    display: none;
}

.kx-catalogue-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

.kx-catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.6rem;
}

.kx-catalogue-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-height: 4.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--kx-input-border);
    border-radius: 0.7rem;
    background: var(--kx-input-bg);
    color: var(--kx-text);
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.kx-catalogue-item[hidden] {
    display: none;
}

.kx-catalogue-item:hover {
    border-color: rgba(var(--kx-accent-rgb), 0.5);
    background: rgba(var(--kx-accent-rgb), 0.05);
}

.kx-catalogue-item:active {
    transform: scale(0.97);
}

.kx-catalogue-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

.kx-catalogue-item.is-chosen {
    border-color: var(--kx-accent);
    background: rgba(var(--kx-accent-rgb), 0.08);
}

.kx-catalogue-name {
    padding-right: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.kx-catalogue-price {
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--kx-accent-text);
    font-variant-numeric: tabular-nums;
}

/* how many are on the payment */
.kx-catalogue-count {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--kx-ink);
    background: var(--kx-accent);
}

.kx-catalogue-item.is-chosen .kx-catalogue-count {
    display: inline-flex;
}

/* the lines on the payment */
.kx-checkout-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-checkout-line {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--kx-line);
}

.kx-checkout-line.is-new {
    animation: kx-line-in 0.6s ease-out;
}

@keyframes kx-line-in {
    from {
        background: rgba(var(--kx-accent-rgb), 0.14);
    }
}

.kx-checkout-line-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kx-checkout-line-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-checkout-line-top .kx-icon-action {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.8rem;
}

.kx-checkout-line-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.kx-line-times {
    color: var(--kx-text-muted);
}

.kx-line-price {
    width: 6.5rem;
    min-height: 2rem;
    text-align: right;
}

.kx-checkout-line-total {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kx-line-note {
    margin-top: 0.45rem;
}

.kx-line-note[hidden] {
    display: none;
}

.kx-line-note-toggle {
    margin-top: 0.35rem;
}

/* a quantity with - and + either side */
.kx-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 2rem;
    border: 1px solid var(--kx-input-border);
    border-radius: 0.5rem;
    background: var(--kx-input-bg);
    overflow: hidden;
}

.kx-stepper button {
    width: 1.9rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kx-text-muted);
    font-size: 1rem;
    line-height: 1;
}

.kx-stepper button:hover {
    color: var(--kx-text);
    background: var(--kx-hover);
}

.kx-stepper input {
    width: 2.6rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--kx-line);
    border-right: 1px solid var(--kx-line);
    background: transparent;
    color: var(--kx-text);
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
}

.kx-stepper input::-webkit-outer-spin-button,
.kx-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kx-stepper input:focus {
    outline: 0;
    background: var(--kx-hover);
}

.kx-checkout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 0.5rem;
    border: 1.5px dashed var(--kx-input-border);
    border-radius: 0.75rem;
    font-size: 0.82rem;
    color: var(--kx-text-muted);
    text-align: center;
}

.kx-checkout-empty[hidden] {
    display: none;
}

.kx-checkout-empty .bi {
    font-size: 1.4rem;
    opacity: 0.6;
}

.kx-checkout-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--kx-input-border-hover);
}

.kx-checkout-fields legend {
    float: none;
    width: auto;
    margin-bottom: 0.4rem;
}

.kx-checkout-errors {
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem 0.7rem 1.9rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    color: var(--kx-danger);
    background: rgba(var(--kx-danger-rgb), 0.08);
}

.kx-checkout-submit {
    width: 100%;
    margin-top: 1.25rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: 1rem;
}

/* one-tap choices, like how a payment was made */
.kx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.kx-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.kx-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kx-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--kx-input-border);
    border-radius: 999px;
    background: var(--kx-input-bg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kx-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kx-chip:hover span {
    border-color: var(--kx-input-border-hover);
}

.kx-chip input:checked + span {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    color: var(--kx-ink);
}

.kx-chip input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

/* a link that is really a button */
.kx-link-button {
    padding: 0;
    border: 0;
    background: transparent;
}

.kx-link-button[hidden] {
    display: none;
}

@media (max-width: 1199.98px) {
    .kx-ledger-head,
    .kx-ledger-row {
        grid-template-columns: 3.25rem minmax(0, 1.3fr) minmax(0, 1.2fr) 6.5rem;
    }

    .kx-ledger-head > :nth-child(4),
    .kx-ledger-source {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .kx-checkout {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-checkout-side {
        position: static;
    }

    .kx-period-text {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media (max-width: 767.98px) {
    .kx-ledger-head {
        display: none;
    }

    .kx-ledger-row {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        padding: 0.7rem 1rem;
    }

    .kx-ledger-for {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .kx-ledger-amount {
        grid-column: 3;
        grid-row: 1;
    }
}

/* the shade behind a side panel */
.offcanvas-backdrop {
    background-color: #05090d;
}

.offcanvas-backdrop.show {
    opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* finding a member by typing (recording a payment)                       */
/* ---------------------------------------------------------------------- */

.kx-member-find {
    position: relative;
}

.kx-member-find[hidden],
.kx-member-chosen[hidden],
.kx-member-results[hidden] {
    display: none;
}

.kx-member-search {
    padding: 0;
}

.kx-member-search .bi {
    left: 0.9rem;
    margin-top: 0;
}

.kx-member-search .form-control {
    min-height: 3rem;
    padding-left: 2.5rem;
    font-size: 0.95rem;
}

.kx-member-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 22rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--kx-menu-bg);
    border: 1px solid var(--kx-line);
    border-radius: 0.75rem;
    box-shadow: var(--kx-shadow);
}

.kx-member-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.55rem;
    cursor: pointer;
}

.kx-member-option .kx-list-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
}

.kx-member-option.is-active,
.kx-member-option:hover {
    background: var(--kx-active);
}

.kx-member-option-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-member-option-name mark {
    padding: 0;
    color: var(--kx-accent-text);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kx-member-detail {
    display: block;
    font-size: 0.75rem;
    color: var(--kx-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kx-member-more {
    padding: 0.55rem 0.6rem 0.4rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

/* the member once chosen */
.kx-member-chosen {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.75rem 0.7rem 0.8rem;
    border: 1px solid rgba(var(--kx-accent-rgb), 0.45);
    border-radius: 0.75rem;
    background: rgba(var(--kx-accent-rgb), 0.07);
    animation: kx-line-in 0.6s ease-out;
}

.kx-member-chosen > .min-w-0 {
    flex: 1;
}

/* a payment just recorded or saved glows briefly in the list */
.kx-ledger-row.is-new {
    animation: kx-ledger-new 2s ease-out;
}

@keyframes kx-ledger-new {
    0%, 40% {
        background: rgba(var(--kx-accent-rgb), 0.18);
    }
}

/* the "custom item" tile and a custom line's name box */
.kx-catalogue-item.is-custom {
    min-height: 3.5rem;
    border-style: dashed;
    background: transparent;
}

.kx-catalogue-item.is-custom .kx-catalogue-name {
    color: var(--kx-accent-text);
}

.kx-catalogue-hint {
    font-size: 0.75rem;
    color: var(--kx-text-muted);
}

.kx-line-name {
    flex: 1;
    min-height: 2rem;
    font-weight: 600;
}

.kx-line-name[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* notifications - the list                                               */
/* ---------------------------------------------------------------------- */

:root,
[data-bs-theme=dark] {
    --kx-blue: #75b8eb;
    --kx-blue-rgb: 117, 184, 235;
    --kx-blue-text: #8cc6f0;
    --kx-amber-rgb: 242, 180, 92;
    --kx-amber-text: #f2b45c;
}

[data-bs-theme=light] {
    --kx-blue-text: #2a76b0;
    --kx-amber-text: #a8650c;
}

/* a count inside a tab or a heading */
.kx-seg-count {
    display: inline-block;
    min-width: 1.3rem;
    margin-left: 0.2rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1.3rem;
    text-align: center;
    background: var(--kx-hover);
}

.kx-seg button.active .kx-seg-count {
    background: rgba(13, 18, 25, 0.16);
}

.kx-note-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-note-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1.6fr) minmax(0, 1fr) 9.5rem 3.5rem;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--kx-line);
    cursor: pointer;
    transition: background 0.15s ease;
}

.kx-note-row[hidden] {
    display: none;
}

.kx-note-row:hover {
    background: var(--kx-hover);
}

.kx-note-row:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--kx-accent);
}

.kx-note-row.is-open {
    background: var(--kx-active);
}

.kx-note-row.is-open::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-note-row.is-new {
    animation: kx-ledger-new 2s ease-out;
}

/* the way it was sent, each with its own colour */
.kx-note-channel {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    font-size: 1.05rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-note-channel.is-e {
    color: var(--kx-blue-text);
    background: rgba(var(--kx-blue-rgb), 0.15);
}

.kx-note-channel.is-s {
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.15);
}

.kx-note-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kx-note-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-note-snippet {
    font-size: 0.78rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-note-audience {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--kx-text-muted);
}

.kx-note-audience span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-note-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.kx-note-date {
    font-size: 0.74rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
}

.kx-note-reach {
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* where it is up to */
.kx-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-state.is-draft {
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.15);
}

.kx-state.is-scheduled,
.kx-state.is-sending {
    color: var(--kx-blue-text);
    background: rgba(var(--kx-blue-rgb), 0.15);
}

.kx-state.is-live,
.kx-state.is-sent {
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.14);
}

/* showing in the app right now - a softly pulsing dot */
.kx-state.is-live::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--kx-accent);
    animation: kx-live 1.8s ease-in-out infinite;
}

@keyframes kx-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--kx-accent-rgb), 0.55); }
    50% { box-shadow: 0 0 0 0.3rem rgba(var(--kx-accent-rgb), 0); }
}

.kx-note-starts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.kx-note-empty > .bi {
    font-size: 2.2rem;
}

/* ---------------------------------------------------------------------- */
/* notifications - the side panel                                         */
/* ---------------------------------------------------------------------- */

.kx-note-hero-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.kx-note-hero-top .kx-note-channel {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    border-radius: 0.55rem;
}

.kx-note-hero-title {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    overflow-wrap: anywhere;
}

.kx-note-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kx-note-actions .btn {
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-font-size: 0.85rem;
}

.kx-note-facts {
    margin: 0;
}

.kx-note-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--kx-line);
    font-size: 0.85rem;
}

.kx-note-facts > div:last-child {
    border-bottom: 0;
}

.kx-note-facts dt {
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-note-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-recipient-search {
    margin: 0.6rem 0;
    padding: 0;
}

.kx-recipients {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-recipients li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0;
}

.kx-recipients li[hidden] {
    display: none;
}

.kx-recipients .kx-list-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.7rem;
}

.kx-recipient-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kx-text);
}

/* ---------------------------------------------------------------------- */
/* notifications - writing one                                            */
/* ---------------------------------------------------------------------- */

.kx-compose-channels,
.kx-compose-audiences {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kx-compose-audiences.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kx-compose-channels .kx-choice,
.kx-compose-audiences .kx-choice {
    height: 100%;
}

/* a group: a row of choices for each kind of filter */
.kx-compose-group,
.kx-compose-one {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--kx-line);
}

.kx-compose-group[hidden],
.kx-compose-one[hidden] {
    display: none;
}

.kx-filter-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
}

.kx-filter-row > p {
    grid-column: 2;
}

.kx-filter-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-filter-clear {
    font-size: 0.72rem;
    font-weight: 500;
}

.kx-filter-row .kx-chip span {
    min-height: 2rem;
    padding: 0.25rem 0.8rem;
    font-size: 0.8rem;
}

.kx-age-range {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-age-range .form-control {
    width: 5.5rem;
}

/* who it goes to, worked out as the choices change */
.kx-audience {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    background: rgba(var(--kx-accent-rgb), 0.09);
    border: 1px solid rgba(var(--kx-accent-rgb), 0.3);
    transition: opacity 0.2s ease;
}

.kx-audience.is-checking {
    opacity: 0.55;
}

.kx-audience-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--kx-ink);
    background: var(--kx-accent);
}

.kx-audience-text {
    flex: 1;
}

.kx-audience-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-audience-notes {
    font-size: 0.76rem;
    color: var(--kx-text-muted);
}

.kx-audience-notes[hidden] {
    display: none;
}

.kx-audience.is-empty {
    background: rgba(var(--kx-amber-rgb), 0.1);
    border-color: rgba(var(--kx-amber-rgb), 0.35);
}

.kx-audience.is-empty .kx-audience-icon {
    background: rgba(var(--kx-amber-rgb), 0.9);
}

.kx-audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-audience-list[hidden] {
    display: none;
}

.kx-audience-list li {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--kx-text);
    background: var(--kx-hover);
}

.kx-audience-list li span {
    font-weight: 400;
    color: var(--kx-text-muted);
}

/* the message and how much room is left */
.kx-compose-message {
    min-height: 9rem;
    resize: vertical;
}

.kx-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 0.3rem;
}

.kx-counter {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    font-variant-numeric: tabular-nums;
}

.kx-counter.is-near {
    color: var(--kx-amber-text);
}

.kx-counter.is-over {
    color: var(--kx-danger);
}

.kx-compose-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.kx-compose-dates .input-group {
    width: auto;
    max-width: 22rem;
}

#datePanel[hidden] {
    display: none;
}

/* a one-tap button that looks like a chip */
.kx-chip-button {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--kx-input-border);
    border-radius: 999px;
    background: var(--kx-input-bg);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kx-chip-button:hover {
    border-color: var(--kx-input-border-hover);
}

.kx-chip-button.is-active {
    border-color: var(--kx-accent);
    background: rgba(var(--kx-accent-rgb), 0.14);
    color: var(--kx-accent-text);
}

/* the preview and sending, kept in view */
.kx-compose-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kx-compose-side .kx-card {
    height: auto;
}

.kx-compose-side .kx-card-body {
    padding: 1.25rem;
}

.kx-compose-summary {
    margin: 0 0 0.25rem;
}

.kx-compose-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.kx-compose-summary > div[hidden] {
    display: none;
}

.kx-compose-summary dt {
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-compose-summary dd {
    margin: 0;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-compose-cancel {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
    text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* notifications - what members see                                       */
/* ---------------------------------------------------------------------- */

.kx-preview {
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
}

.kx-preview [hidden] {
    display: none !important;
}

/* anything not written yet shows a soft placeholder */
.kx-preview [data-empty]:empty::before {
    content: attr(data-empty);
    opacity: 0.45;
}

/* a phone */
.kx-device {
    width: 100%;
    max-width: 16.5rem;
    padding: 0.5rem;
    border-radius: 2.2rem;
    background: #0a0f15;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.35);
}

[data-bs-theme=light] .kx-device {
    background: #1b2530;
    box-shadow: 0 18px 40px rgba(20, 35, 50, 0.25);
}

.kx-device-screen {
    position: relative;
    min-height: 23rem;
    overflow: hidden;
    border-radius: 1.75rem;
    color: rgba(255, 255, 255, 0.92);
    background: #1a2530;
}

.kx-device-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1.25rem 0.3rem;
    font-size: 0.62rem;
    font-weight: 700;
}

.kx-device-bar .bi {
    margin-left: 0.15rem;
}

.kx-app-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem 0.4rem;
}

.kx-app-logo {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 800;
    color: #0d1219;
    background: var(--kx-accent);
}

.kx-app-club {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-app-note {
    margin: 0.6rem 0.75rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(var(--kx-accent-rgb), 0.35);
    background: linear-gradient(180deg, rgba(var(--kx-accent-rgb), 0.16), rgba(var(--kx-accent-rgb), 0.05));
}

.kx-app-note-top {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3cd2a5;
}

.kx-app-note-top span {
    margin-left: auto;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.5);
}

.kx-app-note-title {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.kx-app-note-text {
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.8);
}

.kx-app-note-dates {
    margin-top: 0.55rem;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.5);
}

/* the rest of the app, faded out */
.kx-app-ghost {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem 1rem;
    opacity: 0.5;
}

.kx-app-ghost span {
    height: 3rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.06);
}

.kx-app-ghost span:nth-child(2) {
    height: 4.5rem;
}

/* a text message */
.kx-device-screen.is-sms {
    color: #111;
    background: #f4f4f7;
}

.kx-sms-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
}

.kx-sms-avatar {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#a3a9b3, #858b95);
}

.kx-sms-sender {
    font-size: 0.66rem;
    font-weight: 600;
}

.kx-sms-thread {
    padding: 0.75rem;
}

.kx-sms-time {
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.6rem;
    color: #8a8f98;
}

.kx-sms-bubble {
    max-width: 88%;
    padding: 0.5rem 0.75rem;
    border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #e3e4e9;
}

/* an email */
.kx-mail {
    width: 100%;
    overflow: hidden;
    border-radius: 0.8rem;
    border: 1px solid var(--kx-line);
    color: #1b2530;
    background: #ffffff;
}

.kx-mail-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #e3e8ed;
    background: #f6f8fa;
}

.kx-mail-avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    color: #0d1219;
    background: #3cd2a5;
}

.kx-mail-from {
    font-size: 0.8rem;
    font-weight: 700;
}

.kx-mail-subject {
    font-size: 0.76rem;
    color: #5b6977;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-mail-body {
    padding: 1.1rem 1rem 1.4rem;
    border-top: 3px solid #3cd2a5;
}

.kx-mail-eyebrow {
    margin-bottom: 0.7rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1f9e79;
}

.kx-mail-text {
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 22rem;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------- */
/* notifications - smaller screens                                        */
/* ---------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .kx-note-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* who it is for moves under the name */
    .kx-note-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) 8.5rem 3rem;
        grid-template-areas: "icon main when reach" "icon audience when reach";
        row-gap: 0.15rem;
    }

    .kx-note-row .kx-note-channel { grid-area: icon; }
    .kx-note-main { grid-area: main; }
    .kx-note-audience { grid-area: audience; font-size: 0.74rem; }
    .kx-note-when { grid-area: when; }
    .kx-note-reach { grid-area: reach; }

    .kx-compose-channels,
    .kx-compose-audiences,
    .kx-compose-audiences.is-four {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    /* on a tablet the choices sit side by side again, with the preview below */
    .kx-compose-channels,
    .kx-compose-audiences {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kx-compose-audiences.is-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kx-compose-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 767.98px) {
    .kx-compose-channels,
    .kx-compose-audiences,
    .kx-compose-audiences.is-four,
    .kx-compose-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-filter-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-filter-row > p {
        grid-column: 1;
    }

    .kx-filter-label {
        flex-direction: row;
        align-items: baseline;
        gap: 0.6rem;
        padding-top: 0;
    }
}

@media (max-width: 575.98px) {
    .kx-note-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        grid-template-areas: "icon main reach" "icon audience audience" "icon when when";
        padding: 0.75rem 1rem;
    }

    .kx-note-when {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.25rem;
    }
}

/* ---------------------------------------------------------------------- */
/* members - shared pieces: avatar, belt                                  */
/* ---------------------------------------------------------------------- */
/* initials in a plain circle (the grade shows its belt colour beside the name) */
/* initials in a circle, with the member's belt colour as a ring */
.kx-avatar {
    --kx-belt: transparent;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
    box-shadow: none;
}

.kx-avatar.is-large {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 1.05rem;
}

.kx-avatar.is-xl {
    width: 5rem;
    height: 5rem;
    font-size: 1.6rem;
    box-shadow: none;
}

/* a grade with a small belt swatch */
.kx-belt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-belt-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-belt-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 0.55rem;
    flex-shrink: 0;
    border-radius: 0.2rem;
    background: var(--kx-belt);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.kx-belt-swatch.is-none {
    background: repeating-linear-gradient(45deg, var(--kx-hover), var(--kx-hover) 3px, transparent 3px, transparent 6px);
    box-shadow: inset 0 0 0 1px var(--kx-line);
}

.kx-belt-image {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    object-fit: contain;
}

/* how recently someone trained */
.kx-seen-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--kx-text-muted);
    opacity: 0.6;
}

.is-recent .kx-seen-dot { background: var(--kx-accent); opacity: 1; }
.is-lapsing .kx-seen-dot { background: var(--kx-amber-text); opacity: 1; }
.is-away .kx-seen-dot { background: var(--kx-danger); opacity: 1; }

/* ---------------------------------------------------------------------- */
/* members - the list                                                     */
/* ---------------------------------------------------------------------- */

/* a headline figure that can be clicked to narrow the list */
.kx-stat-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kx-stat-button:hover {
    border-color: var(--kx-input-border-hover);
}

.kx-stat-button.is-warn .kx-board-stat-icon {
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.15);
}

.kx-stat-button.is-active {
    border-color: var(--kx-amber-text);
    box-shadow: 0 0 0 1px var(--kx-amber-text);
}

.kx-roster-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.82rem;
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.08);
    border-bottom: 1px solid var(--kx-line);
}

.kx-roster-filter[hidden] {
    display: none;
}

.kx-roster-head,
.kx-roster-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.2fr) 8.5rem;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
}

.kx-roster-head {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
    border-bottom: 1px solid var(--kx-line);
}

.kx-roster-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-roster-row {
    position: relative;
    border-bottom: 1px solid var(--kx-line);
    cursor: pointer;
    transition: background 0.15s ease;
}

.kx-roster-row[hidden] {
    display: none;
}

.kx-roster-row:hover {
    background: var(--kx-hover);
}

.kx-roster-row:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--kx-accent);
}

.kx-roster-row.is-open {
    background: var(--kx-active);
}

.kx-roster-row.is-open::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kx-accent);
}

.kx-roster-row.is-inactive .kx-avatar,
.kx-roster-row.is-inactive .kx-roster-name {
    opacity: 0.6;
}

.kx-roster-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kx-roster-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-roster-title {
    font-weight: 500;
    color: var(--kx-accent-text);
}

.kx-roster-flag {
    margin-left: 0.2rem;
    font-size: 0.8rem;
    color: var(--kx-text-muted);
}

.kx-roster-sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.kx-roster-sub .kx-state {
    padding: 0 0.45rem;
    font-size: 0.66rem;
}

.kx-roster-contact {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-roster-contact span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-roster-seen {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text);
    white-space: nowrap;
}

.kx-roster-seen.is-never {
    font-weight: 400;
    color: var(--kx-text-muted);
}

/* ---------------------------------------------------------------------- */
/* members - the quick look and the profile                               */
/* ---------------------------------------------------------------------- */

.kx-member-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    height: auto;
    padding: 1.5rem;
}

/* a card is a column by default - the hero is a row */
.kx-card.kx-member-hero {
    flex-direction: row;
    height: auto;
}

.kx-member-hero.is-compact {
    gap: 1rem;
    padding: 0;
    flex-wrap: nowrap;
}

.kx-card.kx-member-hero.is-compact {
    padding: 1rem 1.25rem;
}

.kx-member-hero-text {
    flex: 1 1 18rem;
}

.kx-member-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    overflow-wrap: anywhere;
}

h1.kx-member-name {
    font-size: 1.6rem;
}

.kx-member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-member-grade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.6rem;
}

.kx-member-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kx-member-glance .kx-member-actions {
    margin: 1.1rem 0;
}

.kx-member-actions .btn {
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-font-size: 0.85rem;
}

.kx-more-button {
    width: 2.3rem;
    padding-left: 0;
    padding-right: 0;
}

/* three figures side by side */
.kx-member-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.kx-member-trio > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.7rem;
    background: var(--kx-hover);
}

.kx-member-trio-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-member-trio-label {
    font-size: 0.7rem;
    color: var(--kx-text-muted);
}

.kx-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.45rem 0;
    font-size: 0.85rem;
    color: var(--kx-text);
    overflow-wrap: anywhere;
}

.kx-contact-list li > .bi {
    margin-top: 0.1rem;
    color: var(--kx-text-muted);
}

.kx-contact-list a {
    display: block;
    color: var(--kx-text);
    text-decoration: none;
}

.kx-contact-list a:hover {
    color: var(--kx-accent-text);
}

/* a weekly class: its day, name and time */
.kx-member-class {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
}

.kx-member-class > .min-w-0 {
    flex: 1;
}

.kx-member-class .kx-member-detail {
    white-space: normal;
}

.kx-member-class .kx-tag {
    display: inline-block;
    flex-shrink: 0;
    max-width: 45%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kx-member-class-day {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.12);
}

/* the profile: the main column and the details beside it */
.kx-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    align-items: start;
    gap: 1.25rem;
}

.kx-profile-main,
.kx-profile-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kx-profile .kx-card {
    height: auto;
}

.kx-profile .kx-card-body {
    padding: 1.25rem 1.5rem;
}

.kx-page > .kx-member-hero,
.kx-page > .kx-board-stats {
    margin-bottom: 1.25rem;
}

.kx-board-stat.is-recent .kx-board-stat-icon { color: var(--kx-accent-text); }
.kx-board-stat.is-lapsing .kx-board-stat-icon { color: var(--kx-amber-text); background: rgba(var(--kx-amber-rgb), 0.15); }
.kx-board-stat.is-away .kx-board-stat-icon { color: var(--kx-danger); background: rgba(var(--kx-danger-rgb), 0.12); }

/* a bar for each week of the year */
.kx-weeks {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 4.5rem;
    margin-top: 1rem;
}

.kx-week {
    flex: 1;
    height: var(--kx-h);
    min-height: 3px;
    border-radius: 2px;
    background: var(--kx-accent);
}

.kx-week.is-none {
    background: var(--kx-line);
}

.kx-weeks-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--kx-text-muted);
}

/* a list of dated things - classes attended, payments */
.kx-timeline {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-timeline li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--kx-line);
}

.kx-timeline li:last-child {
    border-bottom: 0;
}

.kx-timeline li[hidden] {
    display: none;
}

.kx-timeline.is-links li {
    padding: 0;
}

.kx-timeline.is-links a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.kx-timeline.is-links a:hover {
    background: var(--kx-hover);
}

/* the text beside the date takes the room left and shortens itself, so a tag never pushes off the screen */
.kx-timeline li > .min-w-0 {
    flex: 1;
    min-width: 0;
}

.kx-timeline .kx-ledger-date {
    width: 2.8rem;
    flex-shrink: 0;
}

.kx-profile-tabs[hidden],
[data-pane-body][hidden] {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* members - the form                                                     */
/* ---------------------------------------------------------------------- */

.kx-member-live {
    margin-bottom: 1.25rem;
}

.kx-optional {
    font-weight: 400;
    color: var(--kx-text-muted);
}

.kx-contact-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kx-grade-chips .kx-chip span {
    gap: 0.5rem;
}

.kx-grade-chips .kx-chip input:checked + span .kx-belt-swatch {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(13, 18, 25, 0.4);
}

.kx-narrow-input {
    max-width: 16rem;
}

#finishedPanel[hidden],
#mobileNeeded[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* members - smaller screens                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .kx-roster-head {
        display: none;
    }

    /* the contact details move under the name */
    .kx-roster-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 10rem) 7.5rem;
        grid-template-areas: "avatar who grade seen" "avatar contact grade seen";
        row-gap: 0.1rem;
    }

    .kx-roster-row .kx-avatar { grid-area: avatar; }
    .kx-roster-who { grid-area: who; }
    .kx-roster-grade { grid-area: grade; }
    .kx-roster-contact { grid-area: contact; flex-direction: row; gap: 0.6rem; font-size: 0.74rem; }
    .kx-roster-seen { grid-area: seen; }

    .kx-profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .kx-profile-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 767.98px) {
    .kx-profile-side,
    .kx-contact-choices {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .kx-roster-row {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        grid-template-areas: "avatar who seen" "avatar grade grade" "avatar contact contact";
        padding: 0.7rem 1rem;
    }

    .kx-roster-contact {
        display: none;
    }

    .kx-member-trio {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------- */
/* members - two colour belts and the grading history                     */
/* ---------------------------------------------------------------------- */

/* a belt with a coloured tip near its end, e.g. "Red belt, brown tip" */
.kx-belt-swatch.is-tip {
    background: linear-gradient(90deg, var(--kx-belt) 0 62%, var(--kx-tip) 62% 84%, var(--kx-belt) 84%);
}

/* a belt split along its length, e.g. "Yellow/Orange" */
.kx-belt-swatch.is-split {
    background: linear-gradient(180deg, var(--kx-belt) 0 50%, var(--kx-tip) 50%);
}

/* the grading history: one step per grading on a line, newest at the top */
.kx-gradings {
    position: relative;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.kx-gradings li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.55rem 0 0.55rem 0;
}

/* the line joining one grading to the next */
.kx-gradings li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 1.45rem;
    bottom: -0.55rem;
    width: 2px;
    background: var(--kx-line);
}

.kx-grading-dot {
    position: relative;
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
    border-radius: 50%;
    border: 2px solid var(--kx-text-muted);
    background: var(--kx-card-bg, var(--kx-tile));
}

.kx-gradings li.is-current .kx-grading-dot {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    box-shadow: 0 0 0 4px rgba(var(--kx-accent-rgb), 0.18);
}

.kx-grading-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.kx-grading-main .kx-member-detail {
    white-space: normal;
}

.kx-grading-main .kx-belt {
    font-size: 0.88rem;
}

.kx-grading-now {
    font-weight: 600;
    color: var(--kx-accent-text);
}

.kx-grading-notes {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--kx-text-muted);
}

/* edit and delete stay quiet until the row is pointed at */
.kx-gradings .kx-row-actions {
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.kx-gradings li:hover .kx-row-actions,
.kx-gradings .kx-row-actions:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .kx-gradings .kx-row-actions {
        opacity: 1;
    }
}

/* the payment open in the side panel */
.kx-timeline.is-links li.is-open a {
    background: var(--kx-active);
}

.kx-modal .modal-body .kx-grade-chips {
    max-height: 14rem;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------- */
/* club management - tabs and the week board                              */
/* ---------------------------------------------------------------------- */

.kx-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--kx-line);
}

.kx-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    text-decoration: none;
}

.kx-tab:hover {
    color: var(--kx-text);
}

.kx-tab.active {
    color: var(--kx-accent-text);
    border-bottom-color: var(--kx-accent);
}

.kx-weekbar {
    height: auto;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem 1.1rem;
}

.kx-weekbar-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.kx-weekbar-title {
    display: flex;
    flex: 1;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-weekbar-title .kx-card-link {
    font-size: 0.82rem;
}

/* a date box that looks like a button */
.kx-weekbar-jump {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border-radius: 0.7rem;
    border: 1px solid var(--kx-input-border);
    color: var(--kx-text);
    cursor: pointer;
}

.kx-weekbar-jump input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.kx-weekbar-jump input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* previous / next, big enough for a thumb */
.kx-roll-nav {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid var(--kx-input-border);
    font-size: 1.1rem;
    color: var(--kx-text);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kx-roll-nav:hover {
    background: var(--kx-hover);
    border-color: var(--kx-input-border-hover);
    color: var(--kx-text);
}

.kx-roll-nav.is-off {
    opacity: 0.3;
}

.kx-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.kx-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-height: 4.4rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.8rem;
    background: transparent;
    color: var(--kx-text);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kx-day:hover {
    background: var(--kx-hover);
}

.kx-day-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-day-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.kx-day-dots {
    display: flex;
    gap: 3px;
    height: 6px;
}

.kx-day-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kx-accent);
}

.kx-day.is-today {
    border-color: rgba(var(--kx-accent-rgb), 0.55);
}

.kx-day.is-today .kx-day-name {
    color: var(--kx-accent-text);
}

.kx-day.active {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    color: var(--kx-ink);
}

.kx-day.active .kx-day-name {
    color: rgba(13, 18, 25, 0.7);
}

.kx-day.active .kx-day-dots i {
    background: var(--kx-ink);
}

.kx-day-panel[hidden] {
    display: none;
}

.kx-day-heading {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

/* a session on the board: time, class and how many came */
.kx-sess {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr) auto 1.25rem;
    align-items: center;
    gap: 1rem;
    height: auto;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--kx-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.kx-card.kx-sess {
    flex-direction: row;
}

.kx-sess:hover {
    color: var(--kx-text);
    border-color: var(--kx-input-border-hover);
}

.kx-sess:active {
    transform: scale(0.99);
}

.kx-sess.is-now {
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 1px var(--kx-accent), var(--kx-card-shadow);
}

.kx-sess.is-done {
    opacity: 0.8;
}

.kx-sess-time {
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
    border-right: 1px solid var(--kx-line);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kx-sess-time small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-sess-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kx-sess-name {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-sess-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--kx-text-muted);
}

.kx-sess-bar,
.kx-roll-bar {
    display: block;
    height: 6px;
    margin-top: 0.3rem;
    overflow: hidden;
    border-radius: 99px;
    background: var(--kx-line);
}

.kx-sess-bar span,
.kx-roll-bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--kx-accent);
    transition: width 0.3s ease;
}

.kx-sess-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.kx-sess-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kx-text);
    white-space: nowrap;
}

.kx-sess-go {
    color: var(--kx-text-muted);
}

.kx-day-empty {
    height: auto;
}

/* ---------------------------------------------------------------------- */
/* club management - classes, events and dojos                            */
/* ---------------------------------------------------------------------- */

.kx-dojos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kx-dojos > .kx-dojo:first-child {
    padding-top: 0.25rem;
    border-top: 0;
}

.kx-dojo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.kx-dojo-list {
    min-width: 0;
}

.kx-dojo-sub {
    margin-top: 1.4rem;
}

.kx-dojo-none {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    color: var(--kx-text-muted);
    font-size: 0.85rem;
}

.kx-card.kx-dojo-none {
    flex-direction: row;
}

/* a class or event on its overview: its next sessions as small dates under the name */
.kx-class-card {
    position: relative;
}

.kx-class-card .kx-sess-name {
    color: var(--kx-text);
    text-decoration: none;
}

.kx-sess-chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    width: fit-content;
    max-width: 100%;
}

.kx-sess-chip {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.45rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--kx-text);
    background: var(--kx-hover);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kx-sess-chip:hover {
    border-color: var(--kx-accent);
    color: var(--kx-accent-text);
}

.kx-sess-chip.is-today {
    border-color: var(--kx-accent);
    background: rgba(var(--kx-accent-rgb), 0.15);
    color: var(--kx-accent-text);
}

.kx-sess-more {
    font-size: 0.74rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
}

.kx-sess-more.is-low {
    color: var(--kx-amber-text);
}

.kx-sess-chips.is-empty {
    gap: 0.5rem 0.75rem;
    padding: 0.3rem 0.3rem 0.3rem 0.6rem;
    border: 1px dashed var(--kx-input-border-hover);
    border-radius: 0.55rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-sess-chip-action {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-font-size: 0.75rem;
}

.kx-sess-time.is-event .kx-sess-day {
    color: var(--kx-blue-text);
}

/* a roll call: which of its class's sessions this is, and the name back to the class */
.kx-roll-of {
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-roll-heading a {
    color: inherit;
    text-decoration: none;
}

.kx-roll-heading a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.kx-sess-day {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-accent-text);
}

.kx-class-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.kx-class-row:hover {
    background: var(--kx-hover);
    color: inherit;
}

.kx-class-row > .min-w-0 {
    flex: 1;
}

.kx-class-sched {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    white-space: nowrap;
}

.kx-class-sched.is-low {
    color: var(--kx-amber-text);
}

.kx-class-sched.is-none {
    color: var(--kx-danger);
}

.kx-member-class-day.is-event {
    color: var(--kx-blue-text);
    background: rgba(var(--kx-blue-rgb), 0.15);
    font-size: 1rem;
}

.kx-member-class-day.is-off {
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-inactive-classes {
    height: auto;
    margin-top: 1.25rem;
    padding: 0.9rem 1.25rem;
}

.kx-inactive-classes summary {
    font-weight: 600;
    color: var(--kx-text-muted);
    cursor: pointer;
}

.kx-inactive-classes[open] summary {
    margin-bottom: 0.5rem;
}

/* a class's page */
.kx-class-badge {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 1.6rem;
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

.kx-class-badge.is-event {
    color: var(--kx-blue-text);
    background: rgba(var(--kx-blue-rgb), 0.15);
}

/* a roll call: the timetable's mark, with a small class or event mark in its bottom right */
.kx-timetable-badge {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.45rem;
}

.kx-badge-sub {
    position: absolute;
    right: -0.4rem;
    bottom: -0.4rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--kx-card-bg);
    border-radius: 0.55rem;
    font-size: 0.8rem;
    color: var(--kx-accent-text);
    background: linear-gradient(rgba(var(--kx-accent-rgb), 0.22), rgba(var(--kx-accent-rgb), 0.22)), var(--kx-card-bg);
}

.kx-badge-sub.is-event {
    color: var(--kx-blue-text);
    background: linear-gradient(rgba(var(--kx-blue-rgb), 0.25), rgba(var(--kx-blue-rgb), 0.25)), var(--kx-card-bg);
}

@media (max-width: 575.98px) {
    .kx-timetable-badge {
        display: none;
    }
}

.kx-class-desc {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-session-list a > .min-w-0 {
    flex: 1;
}

.kx-session-list li > a {
    flex: 1;
    width: auto;
    margin-right: -0.5rem;
}

.kx-session-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kx-text-muted);
    white-space: nowrap;
}

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

.kx-day-chips .kx-chip span {
    min-width: 6.5rem;
    justify-content: center;
}

.kx-schedule-classes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.6rem;
}

.kx-schedule-classes .kx-choice {
    align-items: center;
}

/* ---------------------------------------------------------------------- */
/* club management - the roll call                                        */
/* ---------------------------------------------------------------------- */

.kx-roll-page {
    padding-bottom: 6rem;
}

.kx-roll-head {
    height: auto;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.kx-roll-head-top {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.kx-roll-title {
    flex: 1;
}

.kx-roll-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kx-text-muted);
}

.kx-roll-heading {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    overflow-wrap: anywhere;
}

.kx-roll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-roll-meta .bi {
    margin-right: 0.25rem;
}

.kx-roll-count {
    margin-top: 1.1rem;
}

.kx-roll-big {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kx-checkin-start {
    align-self: center;
    margin-left: auto;
}

.kx-roll-big-num {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--kx-accent-text);
    font-variant-numeric: tabular-nums;
}

.kx-roll-big-of {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kx-text);
}

.kx-roll-bar {
    height: 10px;
    margin-top: 0.6rem;
}

.kx-roll {
    height: auto;
}

.kx-roll-toolbar {
    position: sticky;
    top: var(--kx-topbar-height, 3.75rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--kx-line);
    border-radius: 0.9rem 0.9rem 0 0;
    background: var(--kx-card-bg);
}

.kx-roll-search {
    flex: 1 1 14rem;
    max-width: 22rem;
    padding: 0;
}

.kx-roll-search .bi {
    left: 0.8rem;
    margin-top: 0;
}

/* a class page: the heading and buttons on one line, the search full width beneath */
.kx-roll-toolbar.is-class .kx-roll-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
}

.kx-roll-filter button {
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
}

.kx-roll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.kx-roll-actions .btn {
    --bs-btn-padding-y: 0.55rem;
}

.kx-roll-list {
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
}

.kx-roll-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--kx-line);
    border-bottom: 1px solid var(--kx-line);
    background: var(--kx-hover);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text);
}

/* a role's band: a little gap above each one after the first, so the groups read apart */
.kx-roll-group + .kx-roll-row {
    border-top: 0;
}

.kx-roll-row + .kx-roll-group {
    margin-top: 0.75rem;
}

.kx-roll-list > .kx-roll-group:first-child {
    border-top: 0;
}

.kx-roll-group-count {
    margin-left: auto;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--kx-text-muted);
}

.kx-roll-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 1.25rem;
    transition: background 0.15s ease;
}

.kx-roll-row + .kx-roll-row {
    border-top: 1px solid var(--kx-line);
}

.kx-roll-row.is-here {
    background: rgba(var(--kx-accent-rgb), 0.06);
}

/* the person: tap for their details (or to choose them) */
.kx-roll-person {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    min-height: 3.75rem;
    padding: 0.35rem 0;
    border: 0;
    background: transparent;
    color: var(--kx-text);
    text-align: left;
}

.kx-roll-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kx-roll-name {
    font-size: 0.98rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-roll-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.76rem;
    color: var(--kx-text-muted);
}

.kx-roll-sub .kx-belt {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-dot-sep::before {
    content: "·";
}

.kx-roll-flags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.kx-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--kx-text-muted);
    background: var(--kx-hover);
}

.kx-flag.is-visitor {
    color: var(--kx-blue-text);
    background: rgba(var(--kx-blue-rgb), 0.15);
}

.kx-flag.is-birthday {
    color: #e88ab8;
    background: rgba(232, 138, 184, 0.14);
}

/* here or not: one big tap */
.kx-roll-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 7.5rem;
    height: 3rem;
    padding: 0 1rem;
    flex-shrink: 0;
    border: 1px solid var(--kx-input-border);
    border-radius: 0.8rem;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--kx-text-muted);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.kx-roll-mark .bi {
    font-size: 1.2rem;
}

.kx-roll-mark small {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.8;
}

.kx-roll-mark:hover {
    border-color: var(--kx-input-border-hover);
    color: var(--kx-text);
}

.kx-roll-mark:active {
    transform: scale(0.96);
}

.kx-roll-mark[aria-pressed="true"] {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    color: var(--kx-ink);
}

.kx-roll-mark:disabled {
    opacity: 0.4;
}

.kx-roll-seen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--kx-text);
    white-space: nowrap;
}

.kx-roll-seen small {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

/* choosing several: a tick takes the avatar's place */
.kx-roll-check {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--kx-input-border);
    color: transparent;
    font-size: 1.2rem;
}

.kx-selecting .kx-roll-check {
    display: flex;
}

.kx-selecting .kx-roll-person .kx-avatar {
    display: none;
}

.kx-selecting .kx-roll-mark {
    display: none;
}

.kx-roll-row.is-selected {
    background: var(--kx-active);
}

.kx-roll-row.is-selected .kx-roll-check {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    color: var(--kx-ink);
}

#selectToggle.active {
    border-color: var(--kx-accent);
    color: var(--kx-accent-text);
}

/* what can be done to the chosen people */
/* it sits at the bottom of the screen, within the page (so it never hides under the menu) */
.kx-bulkbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 1030;
    margin-top: 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border: 1px solid var(--kx-line);
    border-radius: 1rem;
    background: var(--kx-menu-bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.kx-bulkbar[hidden] {
    display: none;
}

.kx-bulkbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    max-width: 72rem;
    margin: 0 auto;
}

.kx-bulkbar-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--kx-text);
}

.kx-bulkbar.is-empty .kx-bulkbar-count {
    font-weight: 500;
    color: var(--kx-text-muted);
}

.kx-bulkbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-left: auto;
}

.kx-bulkbar-actions .btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.8rem;
}

/* one member's panel */
.kx-sheet-block {
    margin-top: 1.1rem;
}

.kx-sheet-label {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-here-seg {
    display: flex;
    width: 100%;
}

.kx-here-seg button {
    flex: 1;
    padding: 0.7rem;
    font-size: 0.95rem;
}

.kx-mobile-fact dd {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.kx-mobile-edit[hidden],
.kx-sheet-grade[hidden],
.kx-sheet-move[hidden] {
    display: none;
}

.kx-sheet-actions {
    display: flex;
    flex-direction: column;
    margin-top: 1.1rem;
    border-top: 1px solid var(--kx-line);
}

.kx-sheet-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--kx-line);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--kx-text);
    text-align: left;
    text-decoration: none;
}

.kx-sheet-action:hover {
    color: var(--kx-accent-text);
}

.kx-sheet-action > span {
    flex: 1;
}

.kx-sheet-action > .bi:first-child {
    width: 1.5rem;
    font-size: 1.1rem;
    color: var(--kx-text-muted);
}

.kx-sheet-action.is-danger,
.kx-sheet-action.is-danger > .bi:first-child {
    color: var(--kx-danger);
}

.kx-sheet-grade,
.kx-sheet-move {
    padding: 0.75rem 0 1rem;
    border-bottom: 1px solid var(--kx-line);
}

/* adding people */
.kx-add-sheet.offcanvas {
    --bs-offcanvas-width: 32rem;
}

.kx-add-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

.kx-add-tabs button {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.88rem;
}

[data-add-pane][hidden] {
    display: none;
}

.kx-add-search {
    padding: 0;
    margin-bottom: 0.5rem;
}

.kx-add-search .bi {
    left: 0.8rem;
    margin-top: 0;
}

.kx-add-results,
.kx-add-pending {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-add-result button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.4rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--kx-line);
    background: transparent;
    color: var(--kx-text);
    text-align: left;
}

.kx-add-result button:hover {
    background: var(--kx-hover);
}

.kx-add-result .bi {
    font-size: 1.35rem;
    color: var(--kx-accent-text);
}

.kx-add-pending li {
    padding: 0.75rem;
    margin-bottom: 0.6rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(var(--kx-accent-rgb), 0.35);
    background: rgba(var(--kx-accent-rgb), 0.06);
}

.kx-add-pending-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.kx-add-how {
    display: flex;
    width: 100%;
    margin-top: 0.6rem;
}

.kx-add-how button {
    flex: 1;
    padding: 0.5rem;
}

.kx-add-roles {
    margin-top: 0.6rem;
}

#addPendingWrap {
    margin-bottom: 1.25rem;
}

#addPendingWrap[hidden] {
    display: none;
}

/* what just happened, at the bottom of the screen */
.kx-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.8rem 1rem 0.8rem 1.25rem;
    border-radius: 0.9rem;
    background: #0d1219;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, 1rem);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-bs-theme=light] .kx-toast {
    background: #1b2530;
}

.kx-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

.kx-toast[hidden] {
    display: none;
}

.kx-toast.is-error {
    background: #8c2a2a;
}

body.kx-selecting .kx-toast {
    bottom: 6rem;
}

.kx-toast-undo {
    padding: 0.35rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: #3cd2a5;
    font-weight: 700;
}

.kx-toast-undo[hidden] {
    display: none;
}

.kx-pin-input {
    -webkit-text-security: disc;
    max-width: 10rem;
    margin: 0.75rem auto 0;
    font-size: 1.6rem;
    letter-spacing: 0.6em;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* club management - self check-in                                        */
/* ---------------------------------------------------------------------- */

body.kx-kiosk {
    min-height: 100vh;
    margin: 0;
    font-family: "Chakra Petch", system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.92);
    background: #121b24;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.kx-kiosk-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #0d1219;
    border-bottom: 2px solid #3cd2a5;
}

.kx-kiosk-club {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.kx-kiosk-club img {
    max-height: 2.5rem;
    max-width: 8rem;
    object-fit: contain;
}

.kx-kiosk-class {
    text-align: center;
}

.kx-kiosk-class h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.kx-kiosk-class span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.kx-kiosk-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #3cd2a5;
}

.kx-kiosk-count small {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.kx-kiosk-main {
    padding: 1.5rem 1.5rem 6rem;
}

.kx-kiosk-prompt {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
}

.kx-kiosk-letters {
    position: sticky;
    top: 5.5rem;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.kx-kiosk-letters[hidden] {
    display: none;
}

.kx-kiosk-letters button {
    min-width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}

.kx-kiosk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.9rem;
}

.kx-kiosk-letter {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
    scroll-margin-top: 9rem;
}

.kx-kiosk-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-height: 10rem;
    padding: 1.1rem 0.6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.kx-kiosk-tile:active {
    transform: scale(0.96);
}

.kx-kiosk-tile .kx-avatar {
    --kx-card-bg: #1a2530;
    margin-bottom: 0.3rem;
}

.kx-kiosk-first {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.kx-kiosk-rest {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.kx-kiosk-tick {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    display: none;
    font-size: 1.5rem;
    color: #3cd2a5;
}

.kx-kiosk-tile.is-here {
    border-color: #3cd2a5;
    background: rgba(60, 210, 165, 0.15);
}

.kx-kiosk-tile.is-here .kx-kiosk-tick {
    display: block;
}

.kx-kiosk-missing {
    margin: 2rem 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.kx-kiosk-welcome {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 9, 13, 0.55);
    pointer-events: none;
}

.kx-kiosk-welcome[hidden] {
    display: none;
}

.kx-kiosk-welcome-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 3rem;
    border-radius: 1.5rem;
    background: #0d1219;
    border: 2px solid #3cd2a5;
    text-align: center;
    animation: kx-kiosk-pop 0.25s ease-out;
}

.kx-kiosk-welcome-card .bi {
    font-size: 3.5rem;
    color: #3cd2a5;
}

.kx-kiosk-welcome-card strong {
    font-size: 2rem;
}

.kx-kiosk-welcome-card span {
    color: rgba(255, 255, 255, 0.6);
}

.kx-kiosk-welcome.is-undo .kx-kiosk-welcome-card {
    border-color: #f2b45c;
}

.kx-kiosk-welcome.is-undo .bi {
    color: #f2b45c;
}

@keyframes kx-kiosk-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.kx-kiosk-lock {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 6;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.kx-kiosk-pad,
.kx-kiosk-start {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 9, 13, 0.85);
}

.kx-kiosk-pad[hidden],
.kx-kiosk-start[hidden] {
    display: none;
}

.kx-kiosk-start button {
    padding: 1.25rem 2.5rem;
    border: 0;
    border-radius: 1rem;
    background: #3cd2a5;
    color: #0d1219;
    font-size: 1.4rem;
    font-weight: 700;
}

.kx-kiosk-pad-card {
    width: 20rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #1a2530;
    text-align: center;
}

.kx-kiosk-pad-title {
    margin-bottom: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.kx-kiosk-pad-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.kx-kiosk-pad-dots i {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.kx-kiosk-pad-dots i.is-on {
    background: #3cd2a5;
    border-color: #3cd2a5;
}

.kx-kiosk-pad.is-wrong .kx-kiosk-pad-dots {
    animation: kx-shake 0.4s;
}

.kx-kiosk-pad.is-wrong .kx-kiosk-pad-dots i.is-on {
    background: #ff7a7a;
    border-color: #ff7a7a;
}

@keyframes kx-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.kx-kiosk-pad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.kx-kiosk-pad-keys button {
    height: 4rem;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.kx-kiosk-pad-keys button.is-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------- */
/* club management - smaller screens                                      */
/* ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .kx-roll-actions {
        margin-left: 0;
        width: 100%;
    }

    .kx-roll-actions .btn {
        flex: 1;
    }

    .kx-roll-search {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .kx-day {
        min-height: 3.8rem;
    }

    .kx-day-num {
        font-size: 1.05rem;
    }

    .kx-sess {
        grid-template-columns: 5.25rem minmax(0, 1fr) 1rem;
    }

    .kx-sess-side {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
    }

    .kx-kiosk-head {
        grid-template-columns: 1fr auto;
    }

    .kx-kiosk-club {
        display: none;
    }

    .kx-choices.kx-two {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .kx-roll-mark {
        min-width: 5.5rem;
    }

    .kx-roll-mark span {
        display: none;
    }

    .kx-bulkbar-actions .btn span {
        display: none;
    }
}

/* a class's sessions in a narrow column: the text gives way, the count stays */
.kx-session-list a > .min-w-0 {
    flex: 1 1 auto;
    overflow: hidden;
}

.kx-session-list .kx-recipient-name,
.kx-session-list .kx-member-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-timeline.is-links.kx-session-list a {
    width: auto;
}

/* ---------------------------------------------------------------------- */
/* side menu - the way back to the last roll call or class opened         */
/* ---------------------------------------------------------------------- */

.kx-nav-link.kx-nav-last {
    min-height: 2.9rem;
    margin: 0.1rem 0 0.25rem 1.1rem;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid rgba(var(--kx-accent-rgb), 0.45);
    border-radius: 0 0.5rem 0.5rem 0;
    opacity: 1;
}

.kx-nav-last i {
    font-size: 0.95rem;
    color: var(--kx-accent-text);
}

.kx-nav-last .kx-nav-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.kx-nav-last-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-nav-last-detail {
    font-size: 0.7rem;
    color: var(--kx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kx-nav-last.is-here {
    background: var(--kx-active);
    border-left-color: var(--kx-accent);
}

/* in the icon rail it is a small button of its own under Classes */
.kx-shell.is-rail:not(.is-open) .kx-nav-link.kx-nav-last {
    margin: 0.1rem 0 0.25rem;
    border-left: 0;
    border-radius: 0.5rem;
    background: rgba(var(--kx-accent-rgb), 0.1);
}

.kx-shell.is-rail:not(.is-open) .kx-nav-last.is-here {
    background: var(--kx-active);
}

/* not paid for a while: a small red mark on the bottom right of the initials circle */
.kx-roll-person .kx-avatar {
    position: relative;
}

.kx-message-channels {
    display: flex;
    width: 100%;
    margin-bottom: 0.9rem;
}

.kx-message-channels button {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.88rem;
}

.kx-message-reach {
    margin-top: 0;
}

.kx-narrow-dates {
    max-width: 22rem;
}

#messageDates[hidden] {
    display: none;
}

/* self check-in - "is this you?" before checking someone in */
.kx-kiosk-confirm {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 9, 13, 0.75);
}

.kx-kiosk-confirm[hidden] {
    display: none;
}

.kx-kiosk-confirm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 30rem;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #1a2530;
    text-align: center;
    animation: kx-kiosk-pop 0.2s ease-out;
}

.kx-kiosk-confirm-card .kx-avatar {
    --kx-card-bg: #1a2530;
    margin-bottom: 0.4rem;
}

.kx-kiosk-confirm-ask {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.kx-kiosk-confirm-card strong {
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
}

.kx-kiosk-confirm-unpaid {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(242, 180, 92, 0.45);
    background: rgba(242, 180, 92, 0.12);
    color: #f2b45c;
    font-size: 0.95rem;
    text-align: left;
}

.kx-kiosk-confirm-unpaid[hidden] {
    display: none;
}

.kx-kiosk-confirm-unpaid .bi {
    margin-top: 0.1rem;
    font-size: 1.15rem;
}

.kx-kiosk-confirm-buttons {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1rem;
}

.kx-kiosk-confirm-buttons button {
    min-height: 4rem;
    border-radius: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.kx-kiosk-confirm-buttons .is-no {
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.kx-kiosk-confirm-buttons .is-yes {
    border: 0;
    background: #3cd2a5;
    color: #0d1219;
}

/* bulk add - three steps along the top */
.kx-bulkadd-steps {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    counter-reset: kx-step;
}

.kx-bulkadd-steps li {
    flex: 1;
    padding-top: 0.45rem;
    border-top: 3px solid var(--kx-line);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
    counter-increment: kx-step;
}

.kx-bulkadd-steps li::before {
    content: counter(kx-step) ". ";
}

.kx-bulkadd-steps li.active {
    border-top-color: var(--kx-accent);
    color: var(--kx-accent-text);
}

.kx-bulkadd-steps li.done {
    border-top-color: rgba(var(--kx-accent-rgb), 0.45);
}

[data-bulkadd-step][hidden] {
    display: none;
}

/* the people found, each ticked or not */
.kx-bulkadd-list {
    max-height: 50vh;
    margin: 0.5rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border-top: 1px solid var(--kx-line);
}

.kx-bulkadd-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    margin: 0;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--kx-line);
    cursor: pointer;
}

.kx-bulkadd-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kx-bulkadd-item .kx-roll-check {
    display: flex;
}

.kx-bulkadd-item.is-on .kx-roll-check {
    border-color: var(--kx-accent);
    background: var(--kx-accent);
    color: var(--kx-ink);
}

.kx-bulkadd-item:not(.is-on) .kx-recipient-name {
    color: var(--kx-text-muted);
    text-decoration: line-through;
}

.kx-bulkadd-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0.5rem 0.5rem;
    text-align: center;
}

.kx-bulkadd-confirm strong {
    font-size: 1.15rem;
    color: var(--kx-text);
}

#bulkAddSheet .kx-filter-row {
    grid-template-columns: minmax(0, 1fr);
}

#bulkAddSheet .kx-filter-label {
    flex-direction: row;
    padding-top: 0;
}

#bulkAddSheet .kx-audience {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* terms                                                                  */
/* ---------------------------------------------------------------------- */

.kx-term-card {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    height: auto;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
}

.kx-card.kx-term-card {
    flex-direction: row;
}

.kx-term-card.is-done {
    opacity: 0.8;
}

.kx-term-when {
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
    border-right: 1px solid var(--kx-line);
    line-height: 1.2;
}

.kx-term-month {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

.kx-term-year {
    font-size: 0.75rem;
    color: var(--kx-text-muted);
}

.kx-term-main {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kx-term-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.kx-term-fees {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-term-fee.is-owed {
    color: var(--kx-danger);
    font-weight: 600;
}

.kx-term-fee.is-paid .bi {
    color: var(--kx-accent-text);
}

.kx-choice.is-static {
    cursor: default;
}

@media (max-width: 575.98px) {
    .kx-term-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kx-term-when {
        display: none;
    }
}

/* ---------------------------------------------------------------------- */
/* fees owed - the circle by a member, and the fees dialog                */
/* ---------------------------------------------------------------------- */

/* green with a tick when nothing is owed, red with how many when something is */
.kx-owing-badge {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.kx-owing-badge.is-clear {
    color: var(--kx-accent-text);
    border-color: rgba(var(--kx-accent-rgb), 0.45);
    background: rgba(var(--kx-accent-rgb), 0.1);
}

.kx-owing-badge.is-owed {
    color: #fff;
    background: var(--kx-danger);
    box-shadow: 0 0 0 4px rgba(var(--kx-danger-rgb), 0.15);
}

button.kx-owing-badge:hover {
    transform: scale(1.06);
}

button.kx-owing-badge:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.4);
}

.kx-owing-badge.is-large {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

.kx-owing-badge.is-small {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}

/* the dialog */
.kx-owings .modal-header {
    align-items: flex-start;
}

.kx-owings-sub {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--kx-text-muted);
}

.kx-owings-sub .is-owed {
    color: var(--kx-danger);
    font-weight: 600;
}

.kx-owings-loading {
    padding: 2rem 0;
    text-align: center;
    color: var(--kx-text-muted);
}

.kx-owings-head {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

.kx-owings-head:first-child,
.alert + .kx-owings-head {
    margin-top: 0;
}

.kx-owings-clear {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0 0.25rem;
}

.kx-owings-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kx-owing-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
}

.kx-owing-row + .kx-owing-row {
    margin-top: 0.5rem;
}

.kx-owing-row.is-paying {
    border-color: rgba(var(--kx-accent-rgb), 0.55);
    background: rgba(var(--kx-accent-rgb), 0.05);
}

.kx-owing-pick .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.kx-owing-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kx-owing-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.kx-owing-confirm {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.82rem;
}

/* what is being paid for a fee */
.kx-owing-paying {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.kx-owing-paying .form-select {
    flex: 1 1 14rem;
    width: auto;
}

.kx-owing-amount {
    flex: 0 1 12rem;
}

.kx-owing-partial {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
}

/* the history */
.kx-owings-list.is-history .kx-owing-row {
    grid-template-columns: auto minmax(0, 1fr);
    border-style: dashed;
}

.kx-owing-state {
    font-size: 1.1rem;
    color: var(--kx-text-muted);
}

.kx-owing-row.is-D .kx-owing-state {
    color: var(--kx-accent-text);
}

.kx-owing-row.is-C .kx-owing-title {
    color: var(--kx-text-muted);
    text-decoration: line-through;
}

.kx-owing-lines {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--kx-text-muted);
}

.kx-tag.is-P {
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.15);
}

.kx-tag.is-part {
    color: var(--kx-amber-text);
    background: rgba(var(--kx-amber-rgb), 0.15);
}

.kx-tag.is-D {
    color: var(--kx-accent-text);
    background: rgba(var(--kx-accent-rgb), 0.13);
}

/* paying: how, when, and the total */
.kx-owings-foot {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
}

.kx-owings-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.kx-owings-field .form-label {
    display: block;
    margin-bottom: 0.3rem;
}

.kx-owings-field .form-control {
    width: 10rem;
}

.kx-owings-receipt {
    margin: 0 0 0.45rem;
}

.kx-owings-go {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 0 auto;
}

.kx-owings-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.kx-owings-total small {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kx-text-muted);
}

@media (max-width: 575.98px) {
    .kx-owing-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .kx-owing-waive {
        grid-column: 2;
    }

    .kx-owing-paying {
        grid-column: 1 / -1;
    }

    .kx-owings-go {
        width: 100%;
        justify-content: space-between;
    }
}

/* a member's fees on their profile */
.kx-tag.is-owed {
    color: var(--kx-danger);
    background: rgba(var(--kx-danger-rgb), 0.12);
}

.kx-fee-list li.is-C .kx-recipient-name {
    color: var(--kx-text-muted);
    text-decoration: line-through;
}

/* the Payments page: Fees owed and Payments tabs */
.kx-pay-tabs {
    width: max-content;
    max-width: 100%;
    margin-bottom: 1rem;
}

.kx-owed-summary {
    padding: 0.75rem 1.25rem 0;
    font-size: 0.85rem;
    color: var(--kx-text-muted);
}

.kx-owed-list {
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    list-style: none;
}

.kx-owed-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.25rem;
}

.kx-owed-row + .kx-owed-row {
    border-top: 1px solid var(--kx-line);
}

.kx-owed-row .kx-recipient-name {
    text-decoration: none;
}

.kx-owed-row .kx-recipient-name:hover {
    text-decoration: underline;
}

/* Pulse: fees still owed, above the recent payments */
.kx-owed-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kx-text);
    text-decoration: none;
}

.kx-owed-strip.is-owed {
    border-color: rgba(var(--kx-danger-rgb), 0.35);
    background: rgba(var(--kx-danger-rgb), 0.06);
}

.kx-owed-strip:hover {
    background: var(--kx-hover);
}

/* on a phone the circle on the roll call is a little smaller, leaving room for the name */
@media (max-width: 575.98px) {
    .kx-roll-row .kx-owing-badge {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.78rem;
    }
}

/* "Payment recorded." after the fees dialog closes, on pages without a toast of their own */
.kx-owings-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid rgba(var(--kx-accent-rgb), 0.4);
    border-radius: 0.8rem;
    background: var(--kx-card-bg, var(--kx-tile));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    color: var(--kx-text);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.kx-owings-toast .bi {
    color: var(--kx-accent-text);
}

.kx-owings-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* the fees dialog's "Waive this fee?" - a yes / no box over the dialog */
.kx-owings {
    position: relative;
}

/* (the theme makes everything in a dialog position: relative - this one covers it) */
.modal .modal-content > .kx-owings-ask {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: inherit;
    background: rgba(10, 16, 22, 0.55);
}

.modal .modal-content > .kx-owings-ask[hidden] {
    display: none;
}

.kx-owings-ask-box {
    width: min(100%, 22rem);
    padding: 1.5rem;
    border: 1px solid var(--kx-line);
    border-radius: 0.9rem;
    background: var(--kx-card-bg, var(--kx-tile));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.kx-owings-ask-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.kx-owings-ask-buttons .btn {
    flex: 1;
}

/* searchable dropdowns from the keyboard: the box shows focus, and the choice the arrows are on */
.picker .pc-trigger:focus-visible {
    outline: 0;
    border-color: var(--kx-accent);
    box-shadow: 0 0 0 3px rgba(var(--kx-accent-rgb), 0.3);
}

.picker .pc-list li.is-key {
    color: var(--kx-text);
    background: rgba(var(--kx-accent-rgb), 0.16);
}