/* ============================================================================
   PT Max shared styles — Performance Dark.
   All colour comes from tokens.css (--npt-*). Do not add raw hex colours here;
   if a colour is missing, add a token first (docs/design/performance-dark-system.md).
   The app is dark-only; body always carries the npt-dark class (hardcoded in
   each head's markup).
   ========================================================================== */

html, body {
    overscroll-behavior-y: contain;
}

.ghost {
    opacity: 0.5;
}

.training-goal {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    display: inline-block;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

.aed {
    display: inline-block;
    width: 1em;
    height: 1em;
    /* makes it inherit text color */
    background-color: currentColor;
    /* SVG mask */
    -webkit-mask: url('/_content/NPT.Base.Shared/icons/aed.svg') no-repeat center / contain;
    mask: url('/_content/NPT.Base.Shared/icons/aed.svg') no-repeat center / contain;
    /* keeps it aligned with text */
    vertical-align: -0.125em;
}


/* Overrides */
.two-col .mud-input-control.mud-input-outlined-with-label {
    margin-top: 0;
}

.mud-button-label {
    padding-top: 6px;
    padding-bottom: 6px;
}

.text-center {
    text-align: center;
}

.validation-message {
    color: var(--npt-danger);
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--npt-divider-strong);
}

.no-select {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Old IE/Edge */
    user-select: none; /* Standard (covers most modern browsers) */
}

.mud-theme-transparent.dialog-app-bar {
    background: var(--npt-card) !important;
}

.filter-chip.mud-chip {
    background: var(--npt-card) !important;
    border: 1px solid var(--npt-card-border);
    border-radius: 9px;
    height: 34px;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--npt-text-2) !important;
}

    .filter-chip.mud-chip .chip-count {
        font-family: var(--npt-font-mono);
        font-size: 11px;
        margin-left: 5px;
        color: var(--npt-text-3);
    }

    .filter-chip.mud-chip.mud-chip-selected {
        background: var(--npt-blue-tint-bg) !important;
        border-color: var(--npt-blue);
        color: var(--npt-blue-tint-text) !important;
    }

        .filter-chip.mud-chip.mud-chip-selected .chip-count {
            color: var(--npt-blue-tint-text);
        }

/* ── Page-level dark overrides ─────────────────────────────────────────────
   The base styles for these live in page/component-scoped CSS that Phase 2
   will restyle screen by screen. body.npt-dark is permanent (hardcoded), so
   these always apply; the selector survives only to out-rank the scoped
   [b-xxx] specificity. Fold each into its page when that screen is sculpted. */
body.npt-dark .session-card .title,
body.npt-dark .session-card .ring-main,
body.npt-dark .session-card .stat-num,
body.npt-dark .session-card .activity-text {
    color: var(--npt-text);
}

body.npt-dark .progress-ring {
    --track-color: rgba(255,255,255,0.12);
}

body.npt-dark .progress-ring::before {
    background: var(--npt-card);
}

/* Animations */
@keyframes pulse-attention {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0.35);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0,0,0,0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
}

/* Apply to any element */
.pulse {
    animation: pulse-attention 1.5s infinite;
}

.pulse-radar {
    position: relative;
    z-index: 1;
}

.pulse-radar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid var(--mud-palette-primary);
    opacity: 0;
    animation: radar-pulse 1.8s infinite;
}

@keyframes radar-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.25);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Custom Search Bar */
.custom-search-bar {
    display: flex;
    width: 100%;
    gap: 12px;
    font-size: 15px;
    background: var(--npt-card);
    border: 1px solid var(--npt-card-border);
    color: var(--npt-text);
    padding: 2px;
    border-radius: 11px;
}

    .custom-search-bar > div:first-child {
        text-align: center;
        flex-shrink: 0;
        line-height: 46px;
        padding-left: 14px;
        font-size: 14px;
        color: var(--npt-text-3);
    }

    .custom-search-bar > div:last-child {
        flex: 1;
    }

    .custom-search-bar input {
        background: transparent;
        color: var(--npt-text);
        line-height: 46px;
        width: 100%;
        padding-right: 15px;
    }

    .custom-search-bar input {
        outline: none;
        border: none;
        box-shadow: none;
    }

    .custom-search-bar:focus-within {
        border-color: var(--npt-blue);
        box-shadow: 0 0 0 3px rgba(31, 94, 240, 0.18);
        background: var(--npt-card);
    }

/* ── Client roster (ClientsPage) ─────────────────────────────────────────── */
.roster-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 20px 2px 8px;
}

.roster-count {
    font-size: 12px;
    color: var(--npt-text-3);
}

.roster-card {
    background: var(--npt-card);
    border: 1px solid var(--npt-card-border);
    border-radius: 16px;
    overflow: hidden;
}

.roster-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: var(--npt-text);
    text-decoration: none;
}

    .roster-row + .roster-row {
        border-top: 1px solid var(--npt-card-border);
    }

    .roster-row:active {
        background: var(--npt-blue-tint-bg);
    }

    .roster-row.dim {
        opacity: .55;
    }

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

.roster-name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roster-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--npt-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .roster-sub .npt-mono {
        font-size: 11.5px;
    }

    .roster-sub .sep {
        margin: 0 4px;
        color: var(--npt-text-faint);
    }

    .roster-sub .ok {
        color: var(--npt-success);
    }

    .roster-sub .warn {
        color: var(--npt-warning);
    }

    .roster-sub .danger {
        color: var(--npt-danger);
    }

.roster-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

    .roster-dot.ok {
        background: var(--npt-success);
    }

    .roster-dot.warn {
        background: var(--npt-warning);
    }

    .roster-dot.danger {
        background: var(--npt-danger);
    }

    .roster-dot.idle {
        background: var(--npt-text-faint);
    }

.roster-empty {
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--npt-text-3);
}

:root {
    --custom-border: solid var(--npt-card-border) 2px;
}

.custom-border {
    border: var(--custom-border);
}

/* Custom text field */
.custom-text-field, .custom-height-field {
    display: flex;
    width: 100%;
    gap: 16px;
    font-size: 20px;
    border: var(--custom-border);
    padding: 2px;
    background: var(--npt-card);
    border-radius: 15px;
}

    .custom-text-field-wrapper p.mud-typography.mud-typography-subtitle2 {
        color: var(--npt-text-2) !important;
    }

.custom-text-field > div:first-child,
.custom-height-field > div:first-child {
    text-align: center;
    flex-shrink: 0;
    line-height: 50px;
    padding-left: 14px;
    color: var(--npt-text-3);
}

.custom-text-field > div:last-child {
    flex: 1;
}


.custom-height-field input, .custom-text-field input, .custom-text-field textarea {
    background: transparent;
    color: var(--npt-text);
    width: 100%;
    padding-right: 15px;
    outline: none;
    border: none;
    box-shadow: none;
}

.custom-text-field input, .custom-height-field input, {
    line-height: 50px;
}

.custom-text-field textarea {
    line-height: 40px;
}

.custom-text-field:focus-within, .custom-height-field:focus-within, {
    border-color: var(--npt-blue);
    box-shadow: 0 0 0 3px rgba(31, 94, 240, 0.18);
    background: var(--npt-card);
}

.custom-text-field.readonly {
    cursor: default;
}

.custom-text-field.readonly input {
    color: var(--npt-text-2);
    cursor: default;
}

.custom-text-field.readonly:focus-within {
    background: var(--npt-hover);
}

/* Show/hide password eye inlay */
.custom-text-field > div.has-pw-toggle {
    position: relative;
}

.custom-text-field > div.has-pw-toggle input {
    padding-right: 46px;
}

.custom-text-field .pw-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--npt-text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.custom-text-field .pw-toggle:hover {
    color: var(--npt-text);
}

/* Custom height field */
.custom-height-field {
    display: flex;
    align-items: center;
}

    /* input wrapper */
    .custom-height-field > div:first-child {
        flex: 1;
    }

    /* unit label */
    .custom-height-field > div:last-child {
        text-align: right;
        flex-shrink: 0;
        padding-right: 14px;
        line-height: 50px;
        color: var(--npt-text-3);
    }


/* Custom dropdown */
.custom-select-field {
    background: var(--npt-card);
    border-radius: 15px;
}

/* bottom bar main */
nav.bottom {
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--npt-nav);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -8px 10px -4px rgba(0, 0, 0, 0.4);
}

    nav.bottom div.indicator {
        position: absolute;
        top: 0px;
        height: 20px;
        transition: left 0.2s ease;
        left: calc( ((100% - 64px) / var(--tab-count) * var(--active-index)) + 32px);
        width: 40px;
        width: calc( ((100% - 64px) / var(--tab-count)) );
    }

        nav.bottom div.indicator > div {
            height: 6px;
            top: -0px;
            width: 40px;
            margin: 0 auto;
            position: relative;
            background: var(--mud-palette-primary);
            border-radius: 0 0 8px 8px;
        }

    nav.bottom ul {
        background: var(--npt-nav);
        display: flex;
        justify-content: space-between; /* Or use space-around / space-evenly */
        text-align: center;
    }

        nav.bottom ul li {
            flex: 1;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center
        }

            nav.bottom ul li a.active {
                color: var(--mud-palette-primary);
            }

            nav.bottom ul li a {
                color: var(--mud-palette-text-disabled);
                font-weight: 600;
                font-size: 11px;
                padding-top: 10px;
                padding-bottom: 12px;
                line-height: 20px;
            }

                nav.bottom ul li a i {
                    font-size: 22px
                }




/* The lighthouse — the coach's check-in code, centre stage of the nav.
   The one volt element in the app chrome (check-in = "now", rule 2). */
nav.bottom .nav-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--npt-volt);
    color: var(--npt-on-volt);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin: 0 auto;
    transform: translateY(-14px);
    box-shadow: 0 6px 20px rgba(216, 255, 62, .35), 0 2px 8px rgba(0, 0, 0, .4);
    padding: 0 !important;
}

.badge-wrapper {
    position: relative
}

.badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--mud-palette-gray-default);
    height: 15px;
    width: 15px;
    border-radius: 15px;
    box-shadow: 0 0 16px 0px var(--mud-palette-gray-default);
}
.badge.small {
    height: 10px;
    width: 10px;
}
.badge.top {
    bottom: auto;
    top: 10px;
}

    .badge.inactive {
        display: none;
    }

    .badge.active {
        background: var(--npt-success);
        box-shadow: 0 0 16px 0px var(--npt-success);
    }
    .badge.red {
        background: var(--npt-danger);
        box-shadow: 0 0 16px 0px var(--npt-danger);
    }


/* Selectable card - REGISTRATION */


.registration-selectable-card {
    border: solid 2px var(--npt-card-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--npt-card);
}

    .registration-selectable-card.selected {
        border: solid 2px var(--mud-palette-primary);
    }

    .registration-selectable-card > div.registration-selectable-card-two-col {
        display: flex;
        gap: 10px;
    }

    .registration-selectable-card .left {
        width: 90px; /* fixed width */
        flex-shrink: 0; /* don't collapse */
    }

    .registration-selectable-card .right {
        flex: 1; /* take remaining space */
        position: relative;
    }

    .registration-selectable-card .selection-indicator {
        position: absolute;
        top: 0;
        right: 0;
    }


/* Mud alert info icon */
.mud-alert-text-info .mud-icon-root.mud-svg-icon.mud-icon-size-medium {
    color: var(--mud-palette-primary);
}


/* Big Profile picture */
.profile-picture-wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
}

    .profile-picture-wrapper button.mud-button {
        font-weight: bold;
        text-transform: capitalize
    }

    .profile-picture-wrapper img {
        display: block;
        border: 4px var(--npt-card) solid;
        height: 150px;
        width: 150px;
        object-position: center;
        border-radius: 75px;
        box-shadow: var(--mud-elevation-2);
        margin: 0 auto;
    }

    .profile-picture-wrapper.small img {
        height: 100px;
        width: 100px;
        object-position: center;
        border-radius: 50px;
    }


/* helpers */

.two-col {
    display: flex;
    gap: 1rem; /* space between columns */
    align-items: flex-start; /* or stretch/center */
}

    .two-col > div {
        flex: 1 1 0; /* equal columns */
        min-width: 0; /* prevents overflow from long content */
    }

        .two-col > div.toggle-right {
            flex: 0 0 auto; /* stop 50% expansion */
            margin-left: auto;
        }
.two-col > div.square {
    flex: 0 0 120px; /* fixed width (pick your size) */
    aspect-ratio: 1 / 1; /* keeps it square */
}



/* Profile */
.avatar-wrap {
    position: relative;
    width: 120px;
    margin: 0 auto;
}

.avatar {
    width: 120px;
    height: 120px;
    border: 3px solid var(--npt-card);
    box-shadow: var(--mud-elevation-4);
}

.avatar-edit {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: var(--npt-card);
    box-shadow: var(--mud-elevation-2);
}

.coach-code-card {
    background: var(--npt-blue-tint-bg);
    color: var(--npt-text);
    border-radius: 16px;
}

.code-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: var(--npt-font-mono);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
}

.code-gap {
    width: 18px;
}

.share-btn {
    background: var(--npt-blue) !important;
    color: #fff !important;
    border-radius: 12px;
}

.copy-btn {
    background: transparent;
    border-radius: 12px;
    width: 52px;
    height: 52px;
}

.list {
    padding: 8px;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-radius: 12px;
}

    .list-row + .list-row {
        margin-top: 6px;
    }

.list-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--npt-text);
}

.list-right {
    opacity: .75;
    display: flex;
    align-items: center;
}

    .list-right.ok {
        color: var(--mud-palette-success-text);
        opacity: 1;
    }

    .list-right.chev {
        opacity: .45;
    }

.list-divider {
    height: 1px;
    margin: 10px 8px;
    background: rgba(255,255,255,.08);
    border-radius: 1px;
}

.clickable {
    cursor: pointer;
}

/* <button> rendered as a list row (e.g. Logout) — strip UA button chrome so it
   sits at exactly the same proportions as its anchor-row siblings. */
button.logout-row {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.danger {
    background: transparent;
}

.danger .list-left {
    color: var(--mud-palette-error);
}

.danger:hover {
    background: rgba(228, 91, 96, .1);
}


/* Session Confirmations */

.confirm-session-wrap {
    width: 100%;
}

.confirm-all-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    background: var(--npt-blue);
    color: white;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(31, 94, 240, 0.25);
    cursor: pointer;
    margin-bottom: 16px;
}

    .confirm-all-btn .check {
        margin-right: 8px;
        font-size: 13px;
    }

.session-card {
    background: var(--npt-card);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--npt-card-border);
}

.session-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.session-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.person-meta {
    min-width: 0;
}

.name {
    font-size: 18px;
    font-weight: 700;
    color: var(--npt-text);
    line-height: 1.1;
    margin-bottom: 4px;
}

.type {
    font-size: 14px;
    color: var(--npt-text-2);
    font-weight: 500;
}

.session-card > .session-header > .session-card-badge {
    flex-shrink: 0;
    background: var(--npt-blue-tint-bg);
    color: var(--npt-blue-tint-text);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.session-details {
    display: flex;
    gap: 36px;
    margin-bottom: 22px;
}

.detail-block {
    min-width: 90px;
}

.detail-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--npt-text-3);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.detail-value {
    font-family: var(--npt-font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--npt-text);
    line-height: 1.1;
}

.session-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.action-btn {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.15s ease;
}

    .action-btn.secondary {
        background: var(--npt-hover);
        color: var(--npt-text-2);
        border-color: rgba(255,255,255,0.1);
    }

        .action-btn.secondary:hover {
            background: rgba(255,255,255,0.08);
        }

    .action-btn.primary {
        background: var(--npt-blue-tint-bg);
        color: var(--npt-blue-tint-text);
    }

        .action-btn.primary:hover {
            background: rgba(31, 94, 240, 0.28);
        }

/* ===== Motion layer ========================================================
   Live things breathe; countable objects arrive with weight. Rules:
   - Motion only on "now" signals (rule 2) and one-shot entrances.
   - Slow and shallow — a heartbeat, not a strobe.
   - Everything dies under prefers-reduced-motion. */

@keyframes npt-breathe-live {
    0%, 100% { box-shadow: 0 0 16px rgba(78, 208, 126, .14); }
    50%      { box-shadow: 0 0 28px rgba(78, 208, 126, .32); }
}

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

@keyframes npt-seg-in {
    from { transform: scaleY(.25); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

@keyframes npt-rise {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* A session in progress breathes (coach Today list). */
.today-card.live {
    animation: npt-breathe-live 3.2s ease-in-out infinite;
}

/* The LIVE pill on the calendar keeps a slow heartbeat. */
.status-pill.live {
    animation: npt-pulse-soft 2.6s ease-in-out infinite;
}

/* "Online now" presence dot on the roster. */
.roster-dot.ok {
    animation: npt-pulse-soft 2.6s ease-in-out infinite;
}

/* Credit segments count in left-to-right (delay staggered inline). */
.credit-segments .seg {
    animation: npt-seg-in .4s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Weekly-activity bars grow up from the baseline (delay staggered inline). */
.activity-card .bar {
    transform-origin: bottom;
    animation: npt-rise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .today-card.live,
    .status-pill.live,
    .roster-dot.ok,
    .credit-segments .seg,
    .activity-card .bar {
        animation: none !important;
    }
}

/* ── Progress: shared log-sheet chrome ─────────────────────────────────────
   Used by WeightLogSheet and SleepLogSheet. Lives here rather than in either
   component because a component <style> block only ships when that component
   renders — the sleep sheet would otherwise inherit nothing on a page where
   the weight sheet never opened. */
.log-sheet {
    background: var(--npt-card);
    border: 1px solid var(--npt-divider-strong);
    border-radius: var(--npt-radius-card);
    padding: 16px;
}

.log-sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.log-sheet-date {
    font-size: 11px;
    color: var(--npt-text-3);
    white-space: nowrap;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-btn {
    flex: 0 0 46px;
    height: 46px;
    border-radius: var(--npt-radius-button);
    border: 1px solid var(--npt-card-border);
    background: var(--npt-hover);
    color: var(--npt-text);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.step-btn:active {
    background: var(--npt-blue-tint-bg);
    border-color: var(--npt-blue);
}

.step-value {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.step-unit {
    font-size: 13px;
    color: var(--npt-text-3);
}

.log-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.log-cancel,
.log-save {
    flex: 1;
    height: 44px;
    border-radius: var(--npt-radius-button);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--npt-card-border);
}

.log-cancel {
    flex: 0 0 34%;
    background: none;
    color: var(--npt-text-2);
}

.log-save {
    background: var(--npt-blue);
    border-color: var(--npt-blue);
    color: #fff;
}

.log-save:disabled {
    opacity: .4;
}

/* The note field is a lone Mud component inside otherwise hand-rolled chrome —
   pull it down to match. */
.log-note .mud-input-outlined-border {
    border-radius: var(--npt-radius-button);
}

/* ── Progress: history rows, section heads, pager ──────────────────────────
   Shared by the weight and sleep detail pages and their dedicated history
   pages. Four copies of the same block was one copy away from drifting.
   ClientProgressPage keeps its own tighter variant in its component <style>,
   which still wins — component styles render after this file. */
.section-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 26px 2px 10px;
}

.section-count {
    font-size: 10.5px;
    color: var(--npt-text-faint);
}

.hist-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
}

.hist-row + .hist-row {
    border-top: 1px solid var(--npt-card-border);
}

.hist-row.today {
    background: rgba(216, 255, 62, .04);
}

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

.hist-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.hist-val {
    font-size: 14.5px;
    color: var(--npt-text);
}

.hist-delta {
    font-size: 11.5px;
}

.hist-date {
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--npt-text-faint);
    letter-spacing: .04em;
}

.hist-note {
    margin-top: 5px;
    font-size: 12px;
    font-style: italic;
    color: var(--npt-text-3);
}

.bmi-chip {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--npt-text-3);
    background: var(--npt-hover);
    border: 1px solid var(--npt-card-border);
    border-radius: var(--npt-radius-chip);
    padding: 3px 7px;
}

.row-edit,
.row-del {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--npt-text-faint);
    cursor: pointer;
}

.row-edit:active,
.row-del:active {
    color: var(--npt-text-2);
}

/* "Show all N" — the last row of a truncated list, so it reads as the
   continuation of the card rather than a button parked underneath it. */
.show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-top: 1px solid var(--npt-card-border);
    background: none;
    color: var(--npt-blue-tint-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.show-more:active {
    background: var(--npt-blue-tint-bg);
}

.show-more i {
    font-size: 10px;
}

/* ── Pager ─────────────────────────────────────────────────────────────── */
.pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 2px 0;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 15px;
    border-radius: var(--npt-radius-button);
    border: 1px solid var(--npt-card-border);
    background: var(--npt-card);
    color: var(--npt-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pager-btn:disabled {
    opacity: .32;
    cursor: default;
}

.pager-range {
    flex: 1;
    text-align: center;
    font-family: var(--npt-font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--npt-text-faint);
}

/* Sleep rows carry a quality bar flush to the card's left edge, so they lose the
   left padding and tighten the gap. A modifier rather than a page-level override
   of .hist-row — component <style> blocks land ahead of this file in document
   order, so a same-specificity override there silently loses. */
.hist-row.with-bar {
    gap: 11px;
    padding-left: 0;
}