html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Focus rings are for keyboard navigation only — suppress them for mouse/programmatic focus. */
:focus:not(:focus-visible) {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/*  ------------------------------------------------------------------------
    Boot screen — the Park Buffalo brand panel, borrowed from the sign-in
    screen (navy ground, diagonal stripes, orange glow, split wordmark) so the
    app doesn't open on stock-template blue and then snap to the gym's colours.

    The type is Saira Condensed / Archivo via branded.css, which pulls them
    with an @import — a chained request, so the first paint may land in the
    fallback and swap. Both stacks name a real fallback for that reason.
    ------------------------------------------------------------------------ */

.pb-boot {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pb-navy, #22285B);
}

/* Both decorative, and both behind the content. */
.pb-boot__stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 2px, transparent 2px, transparent 16px);
}

.pb-boot__glow {
    position: absolute;
    right: -140px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,96,37,.32), transparent 70%);
}

.pb-boot__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
}

.pb-boot__logo {
    font: 800 clamp(26px, 7vw, 38px) var(--pb-display, 'Saira Condensed'), sans-serif;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
}

    .pb-boot__logo span {
        color: var(--pb-accent, #E66025);
        letter-spacing: .12em;
    }

/*  Ring and mark share one grid cell, so they stay concentric at any size
    without either one being positioned against the other. */
.pb-boot__mark {
    display: grid;
    place-items: center;
    margin-top: 2.25rem;
}

    .pb-boot__mark > * {
        grid-area: 1 / 1;
    }

/*  The buffalo is the same #E66025 as the ring and is knocked out rather than
    filled white, so it needs no plate on the navy. Sized to leave the ring
    clear air rather than crowd it. */
.pb-boot__buffalo {
    width: 3rem;
    height: 3rem;
}

/*  The framework's ring. Sized in rem so it holds its proportion against the
    wordmark, and rotated so the arc starts at twelve o'clock. */
.loading-progress {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
}

    .loading-progress circle {
        fill: none;
        stroke: rgba(255,255,255,.12);
        stroke-width: .45rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--pb-accent, #E66025);
            stroke-linecap: round;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray .1s ease-in-out;
        }

/*  Keeping the percentage rather than a bare word: on a slow phone the number
    moving is the difference between "downloading" and "broken". The pulse
    covers the stretch before the first progress event, when the ring is still
    empty and nothing else on screen is moving. */
.loading-progress-text {
    margin-top: 1.5rem;
    font: 500 13px var(--pb-body, 'Archivo'), sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #B7BBD2;
    animation: pb-boot-pulse 2s ease-in-out infinite;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

@keyframes pb-boot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-progress-text { animation: none; }
    .loading-progress circle:last-child { transition: none; }
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}