/* /Pages/Shared/GameScoreBadge.razor.rz.scp.css */
.score-badge[b-tkjrk2alf2] {
    display: inline-flex;
    align-items: baseline;
    gap: .35em;
    padding: 2px var(--tt-space-2);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface-sunken);
    color: var(--tt-ink);
    font-size: var(--tt-text-caption);
    line-height: 1.4;
    white-space: nowrap;
}

.score-badge-outcome[b-tkjrk2alf2] {
    font-weight: var(--tt-weight-semibold);
}

.score-badge-line[b-tkjrk2alf2] {
    font-weight: var(--tt-weight-bold);
    font-variant-numeric: tabular-nums;
}

.score-badge-won[b-tkjrk2alf2] {
    background: var(--tt-success-soft);
    color: var(--tt-success);
}

.score-badge-lost[b-tkjrk2alf2] {
    background: var(--tt-danger-soft);
    color: var(--tt-danger);
}
/* /Pages/Shared/GameScoreDialog.razor.rz.scp.css */
/* The score box: the team's side, a dash, the opponent's side. Each side is a label over a stepper
   with thumb-sized - and + either side of the number. */

.score-sides[b-r0iw7erk03] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: var(--tt-space-2);
    padding: var(--tt-space-2) 0;
}

.score-side[b-r0iw7erk03] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-space-2);
    min-width: 0;
}

.score-label[b-r0iw7erk03] {
    max-width: 100%;
    overflow: hidden;
    color: var(--tt-ink-muted);
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-semibold);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-stepper[b-r0iw7erk03] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-1);
}

.score-step[b-r0iw7erk03] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tt-tap);
    height: var(--tt-tap);
    border: 1px solid var(--tt-hairline-strong);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface);
    color: var(--tt-ink);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}

.score-step:hover:not(:disabled)[b-r0iw7erk03] {
    background: var(--tt-surface-sunken);
}

.score-step:disabled[b-r0iw7erk03] {
    opacity: .4;
    cursor: default;
}

.score-input[b-r0iw7erk03] {
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--tt-hairline-strong);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface);
    color: var(--tt-ink);
    font-size: var(--tt-text-title);
    font-weight: var(--tt-weight-bold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.score-input[b-r0iw7erk03]::-webkit-outer-spin-button,
.score-input[b-r0iw7erk03]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.score-input:focus-visible[b-r0iw7erk03],
.score-step:focus-visible[b-r0iw7erk03] {
    outline: none;
    box-shadow: var(--tt-focus-ring);
}

.score-dash[b-r0iw7erk03] {
    padding-bottom: .55rem;
    color: var(--tt-ink-faint);
    font-size: var(--tt-text-title);
    font-weight: var(--tt-weight-bold);
}

/* Remove sits apart on the left, away from Save. */
.score-clear[b-r0iw7erk03] {
    margin-right: auto;
    color: var(--tt-danger);
}

/* A phone too narrow for two full-size steppers side by side: smaller buttons, same layout. */
@media (max-width: 400px) {
    .score-step[b-r0iw7erk03] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .score-input[b-r0iw7erk03] {
        width: 2.75rem;
    }
}
/* /Pages/Shared/JerseyNumbersForm.razor.rz.scp.css */
/* Three boxes side by side: short numbers, so a row fits even a narrow phone. */
.numbers-choices[b-b3xezmfrcw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tt-space-2);
}

.numbers-input[b-b3xezmfrcw] {
    text-align: center;
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.numbers-input[aria-invalid="true"][b-b3xezmfrcw] {
    border-color: var(--tt-danger);
}

.numbers-taken-hint[b-b3xezmfrcw] {
    color: var(--tt-danger);
}

/* Numbers already taken: a label, then small chips, so they scan as numbers rather than a run-on sentence. */
.numbers-taken[b-b3xezmfrcw] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.numbers-taken-list[b-b3xezmfrcw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.numbers-taken-chip[b-b3xezmfrcw] {
    min-width: 2.25rem;
    padding: 2px var(--tt-space-2);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface-sunken);
    border: 1px solid var(--tt-hairline);
    color: var(--tt-ink-muted);
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.numbers-intro[b-b3xezmfrcw] {
    margin: 0;
    color: var(--tt-ink-muted);
}

/* The coach's note, as on the uniform screen: a quote, not a form field. */
.numbers-coach-note[b-b3xezmfrcw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tt-space-2) var(--tt-space-3);
    border-left: 3px solid var(--tt-brand);
    border-radius: var(--tt-radius-sm);
    background: var(--tt-brand-soft);
}

.numbers-coach-note-label[b-b3xezmfrcw] {
    font-size: var(--tt-text-micro);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-brand-strong);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.numbers-coach-note p[b-b3xezmfrcw] {
    margin: 0;
    color: var(--tt-ink);
    white-space: pre-line;
}

/* The number given: the jersey's own big number, then the sentence. */
.numbers-given[b-b3xezmfrcw] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
}

.numbers-given > span:last-child[b-b3xezmfrcw] {
    display: flex;
    flex-direction: column;
}

.numbers-given-badge[b-b3xezmfrcw] {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 56px;
    padding: 0 var(--tt-space-2);
    border-radius: var(--tt-radius-md);
    background: var(--tt-brand);
    color: var(--tt-brand-on);
    font-size: var(--tt-text-title);
    font-weight: var(--tt-weight-bold);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Shared/PlayerDetails.razor.rz.scp.css */
/* The player panel: a summary, then groups of rows. Groups are a small heading over rows split by
   hairlines, never boxes inside the panel. Tokens only. */

/* --- Summary ------------------------------------------------------------------------------------ */

.pd-summary[b-9gbjyaizwl] {
    padding-bottom: var(--tt-space-4);
    border-bottom: 1px solid var(--tt-hairline);
}

.pd-summary[b-9gbjyaizwl]  .tt-headshot-compact {
    display: flex;
    align-items: center;
    gap: var(--tt-space-4);
}

.pd-summary[b-9gbjyaizwl]  .tt-headshot-compact .tt-headshot-body {
    flex: 1;
    gap: var(--tt-space-2);
}

.pd-summary[b-9gbjyaizwl]  .tt-headshot-compact .tt-detail-actions {
    margin-top: 0;
}

/* The photo buttons are compact elsewhere; here they're the summary's only controls, so full tap height. */
.pd-summary[b-9gbjyaizwl]  .tt-headshot-compact .tt-btn {
    min-height: var(--tt-tap);
}

.pd-facts[b-9gbjyaizwl] {
    display: grid;
    gap: var(--tt-space-2);
    margin: 0;
}

.pd-fact[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pd-fact dt[b-9gbjyaizwl] {
    font-size: var(--tt-text-micro);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tt-ink-faint);
}

.pd-fact dd[b-9gbjyaizwl] {
    margin: 0;
    font-size: var(--tt-text-callout);
    font-weight: var(--tt-weight-medium);
}

/* --- Groups ------------------------------------------------------------------------------------- */

.pd-group[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.pd-group + .pd-group[b-9gbjyaizwl],
.pd-summary + .pd-group[b-9gbjyaizwl] {
    padding-top: var(--tt-space-2);
}

.pd-group-head[b-9gbjyaizwl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-space-2);
    min-height: var(--tt-tap);
}

.pd-group-title[b-9gbjyaizwl] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-2);
    margin: 0;
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tt-ink-muted);
}

.pd-note[b-9gbjyaizwl] {
    margin: 0;
    font-size: var(--tt-text-callout);
    color: var(--tt-ink);
    overflow-wrap: anywhere;
}

.pd-jersey-field .tt-input[b-9gbjyaizwl] {
    max-width: 8rem;
}

.pd-form[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-3);
    padding: var(--tt-space-3) 0;
    border-top: 1px solid var(--tt-hairline);
}

/* --- Rows --------------------------------------------------------------------------------------- */

.pd-rows[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--tt-hairline);
}

.pd-rows > *[b-9gbjyaizwl] {
    border-bottom: 1px solid var(--tt-hairline);
}

.pd-row[b-9gbjyaizwl] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
    width: 100%;
    min-height: var(--tt-tap-lg);
    padding: var(--tt-space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--tt-hairline);
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
}

a.pd-row[b-9gbjyaizwl],
button.pd-row[b-9gbjyaizwl],
label.pd-row[b-9gbjyaizwl] {
    cursor: pointer;
}

a.pd-row:hover[b-9gbjyaizwl],
button.pd-row:hover:not(:disabled)[b-9gbjyaizwl] {
    background: color-mix(in srgb, var(--tt-surface-sunken) 55%, transparent);
}

button.pd-row:disabled[b-9gbjyaizwl] {
    cursor: default;
    opacity: .6;
}

a.pd-row:focus-visible[b-9gbjyaizwl],
button.pd-row:focus-visible[b-9gbjyaizwl] {
    outline: 2px solid var(--tt-brand);
    outline-offset: -2px;
    border-radius: var(--tt-radius-sm);
}

.pd-row[b-9gbjyaizwl] >  .tt-icon:last-child {
    flex: none;
    color: var(--tt-ink-faint);
}

.pd-row-icon[b-9gbjyaizwl] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--tt-radius-sm);
    background: var(--tt-surface-sunken);
    color: var(--tt-ink-muted);
}

.pd-row-body[b-9gbjyaizwl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-row-title[b-9gbjyaizwl] {
    font-size: var(--tt-text-callout);
    font-weight: var(--tt-weight-semibold);
    overflow-wrap: anywhere;
}

.pd-row-meta[b-9gbjyaizwl] {
    font-size: var(--tt-text-caption);
    color: var(--tt-ink-muted);
    overflow-wrap: anywhere;
}

.pd-row-skeleton[b-9gbjyaizwl] {
    display: block;
    width: 60%;
    height: 12px;
}

.pd-row-action[b-9gbjyaizwl] {
    flex: none;
    font-size: var(--tt-text-callout);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-brand);
}

.pd-row-add[b-9gbjyaizwl] {
    color: var(--tt-brand);
}

.pd-row-add .pd-row-icon[b-9gbjyaizwl] {
    background: var(--tt-brand-soft);
    color: var(--tt-brand-strong);
}

/* --- Guardians ---------------------------------------------------------------------------------- */

.pd-guardian[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
    padding: var(--tt-space-3) 0;
}

.pd-guardian-top[b-9gbjyaizwl] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
}

.pd-guardian-id[b-9gbjyaizwl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-guardian-name[b-9gbjyaizwl] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--tt-space-2);
    font-size: var(--tt-text-callout);
    font-weight: var(--tt-weight-semibold);
    overflow-wrap: anywhere;
}

.pd-guardian-rel[b-9gbjyaizwl] {
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-regular);
    color: var(--tt-ink-muted);
}

/* Lined up under the name, past the avatar. */
.pd-guardian-detail[b-9gbjyaizwl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: calc(34px + var(--tt-space-3));
}

.pd-guardian > .tt-notice[b-9gbjyaizwl] {
    margin-left: calc(34px + var(--tt-space-3));
}

.pd-guardian-meta[b-9gbjyaizwl] {
    font-size: var(--tt-text-caption);
    color: var(--tt-ink-muted);
    overflow-wrap: anywhere;
}

.pd-contact[b-9gbjyaizwl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-2);
    margin-top: var(--tt-space-2);
}

.pd-contact-btn[b-9gbjyaizwl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tt-tap);
    padding: 0 var(--tt-space-3);
    border: 1px solid var(--tt-hairline-strong);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface);
    color: var(--tt-ink);
    font: inherit;
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.pd-contact-btn:hover:not(:disabled)[b-9gbjyaizwl] {
    background: var(--tt-surface-sunken);
}

.pd-contact-btn:disabled[b-9gbjyaizwl] {
    opacity: .6;
    cursor: default;
}

.pd-contact-btn:focus-visible[b-9gbjyaizwl] {
    outline: 2px solid var(--tt-brand);
    outline-offset: 2px;
}

.pd-contact-btn-primary[b-9gbjyaizwl] {
    border-color: transparent;
    background: var(--tt-brand-soft);
    color: var(--tt-brand-strong);
}

.pd-contact-btn-primary:hover:not(:disabled)[b-9gbjyaizwl] {
    background: color-mix(in srgb, var(--tt-brand) 18%, var(--tt-surface));
}
/* /Pages/Shared/TeamChatLinksEditor.razor.rz.scp.css */
/* The coach's team chat setup. Scoped to this component so it can't drift into the rest of the app.
   WhatsApp green is used only as a quiet tint on the chat marks — it says "this opens WhatsApp"
   without taking over the club's own brand colour, which stays on the actions. */

.chat-setup[b-iu935n9t2d] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-4);
}

.chat-setup-head[b-iu935n9t2d] {
    display: flex;
    gap: var(--tt-space-3);
    align-items: flex-start;
}

.chat-setup-mark[b-iu935n9t2d],
.chat-option-icon[b-iu935n9t2d],
.chat-avatar[b-iu935n9t2d] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tt-radius-pill);
    background: color-mix(in srgb, #25d366 16%, var(--tt-surface));
    color: #128c4b;
}

/* The app's dark theme is keyed off data-theme (see tokens.css); lift the green so it reads there. */
:root[data-theme="dark"] .chat-setup-mark[b-iu935n9t2d],
:root[data-theme="dark"] .chat-option-icon[b-iu935n9t2d],
:root[data-theme="dark"] .chat-avatar:not(.chat-avatar-staff)[b-iu935n9t2d] {
    background: color-mix(in srgb, #25d366 22%, var(--tt-surface));
    color: #5be397;
}

.chat-setup-mark[b-iu935n9t2d] {
    width: 48px;
    height: 48px;
}

.chat-setup-title[b-iu935n9t2d] {
    margin: 0 0 var(--tt-space-1);
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
    line-height: var(--tt-leading-tight);
}

.chat-setup-lede[b-iu935n9t2d] {
    margin: 0;
    color: var(--tt-ink-muted);
    line-height: var(--tt-leading-normal);
}

/* --- The two ways to set it up ------------------------------------------------------------------ */

.chat-options[b-iu935n9t2d] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.chat-option[b-iu935n9t2d] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
    width: 100%;
    padding: var(--tt-space-3) var(--tt-space-4);
    border: 1px solid var(--tt-hairline-strong);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-surface);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tt-duration-fast) var(--tt-ease), background var(--tt-duration-fast) var(--tt-ease);
}

.chat-option:hover[b-iu935n9t2d] {
    border-color: var(--tt-brand);
}

.chat-option:active[b-iu935n9t2d] {
    background: var(--tt-surface-sunken);
}

.chat-option:focus-visible[b-iu935n9t2d] {
    outline: none;
    box-shadow: var(--tt-focus-ring);
}

.chat-option-recommended[b-iu935n9t2d] {
    border-color: var(--tt-brand);
    background: var(--tt-brand-soft);
}

.chat-option-icon[b-iu935n9t2d] {
    width: 40px;
    height: 40px;
}

.chat-option-body[b-iu935n9t2d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-option-title[b-iu935n9t2d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-space-2);
    font-weight: var(--tt-weight-semibold);
}

.chat-option-text[b-iu935n9t2d] {
    color: var(--tt-ink-muted);
    font-size: var(--tt-text-callout);
    line-height: var(--tt-leading-normal);
}

/* --- Badges ------------------------------------------------------------------------------------- */

.chat-badge[b-iu935n9t2d] {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--tt-space-2);
    border-radius: var(--tt-radius-pill);
    background: var(--tt-surface-sunken);
    color: var(--tt-ink-muted);
    font-size: var(--tt-text-micro);
    font-weight: var(--tt-weight-semibold);
    letter-spacing: .01em;
    white-space: nowrap;
}

.chat-badge-brand[b-iu935n9t2d] {
    background: var(--tt-brand);
    color: var(--tt-brand-on);
}

.chat-badge-families[b-iu935n9t2d] {
    background: var(--tt-success-soft);
    color: var(--tt-success);
}

.chat-badge-staff[b-iu935n9t2d] {
    background: var(--tt-warning-soft);
    color: var(--tt-ink);
}

/* --- The list of chats -------------------------------------------------------------------------- */

.chat-row[b-iu935n9t2d] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
    min-height: var(--tt-tap-lg);
    padding: var(--tt-space-3) var(--tt-space-2) var(--tt-space-3) var(--tt-space-4);
    border-bottom: 1px solid var(--tt-hairline);
}

.chat-row:last-child[b-iu935n9t2d] {
    border-bottom: 0;
}

.chat-avatar[b-iu935n9t2d] {
    width: 40px;
    height: 40px;
}

.chat-avatar-staff[b-iu935n9t2d] {
    background: var(--tt-warning-soft);
    color: var(--tt-ink);
}

.chat-row-body[b-iu935n9t2d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-1);
}

.chat-row-title[b-iu935n9t2d] {
    font-weight: var(--tt-weight-semibold);
    overflow-wrap: anywhere;
}

.chat-row-tags[b-iu935n9t2d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-1);
}

/* --- Adding or editing one ---------------------------------------------------------------------- */

.chat-form[b-iu935n9t2d] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-4);
}

.chat-form-title[b-iu935n9t2d] {
    margin: 0;
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
}

.chat-steps[b-iu935n9t2d] {
    margin: 0;
    padding: var(--tt-space-3) var(--tt-space-4) var(--tt-space-3) var(--tt-space-8);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface-sunken);
    color: var(--tt-ink-muted);
    font-size: var(--tt-text-callout);
    line-height: var(--tt-leading-normal);
}

.chat-steps li + li[b-iu935n9t2d] {
    margin-top: var(--tt-space-1);
}

.chat-steps strong[b-iu935n9t2d] {
    color: var(--tt-ink);
    font-weight: var(--tt-weight-semibold);
}

.chat-link-ok[b-iu935n9t2d] {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-space-1);
    color: var(--tt-success);
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-medium);
}

.chat-link-bad[b-iu935n9t2d] {
    color: var(--tt-danger);
    font-size: var(--tt-text-caption);
}

.chat-input-bad[b-iu935n9t2d] {
    border-color: var(--tt-danger);
}
/* /Pages/Shared/TeamNumbersEditor.razor.rz.scp.css */
/* One player per row: their number and name, then the numbers to select from, then what will change. */
.numbers-player[b-zctxq84fcl] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
    padding: var(--tt-space-3) var(--tt-space-4);
    border-bottom: 1px solid var(--tt-hairline);
}

.numbers-player:last-child[b-zctxq84fcl] {
    border-bottom: 0;
}

/* A row with a number selected and not yet applied: a bar down its edge, so the coach can scan for them. */
.numbers-player.is-changed[b-zctxq84fcl] {
    box-shadow: inset 3px 0 0 var(--tt-brand);
    background: color-mix(in srgb, var(--tt-brand-soft) 45%, transparent);
}

.numbers-player-head[b-zctxq84fcl] {
    display: flex;
    align-items: center;
    gap: var(--tt-space-3);
}

.numbers-player-text[b-zctxq84fcl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.numbers-player-text .tt-row-meta[b-zctxq84fcl] {
    color: var(--tt-ink-muted);
}

.numbers-badge[b-zctxq84fcl] {
    flex: none;
    min-width: 2.75rem;
    padding: 4px var(--tt-space-2);
    border-radius: var(--tt-radius-sm);
    background: var(--tt-brand-soft);
    color: var(--tt-brand-strong);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.numbers-badge.is-empty[b-zctxq84fcl] {
    background: transparent;
    border: 1px dashed var(--tt-hairline-strong);
    color: var(--tt-ink-muted);
}

/* The numbers to select from, with the "Other" box (placeholder "Type #") as the last cell. 44px tall at least. */
.numbers-picks[b-zctxq84fcl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tt-space-2);
}

.numbers-pick[b-zctxq84fcl] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--tt-space-2) var(--tt-space-1);
    border: 1px solid var(--tt-hairline);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface);
    color: var(--tt-ink);
    font: inherit;
    cursor: pointer;
}

.numbers-pick:hover:not(:disabled)[b-zctxq84fcl] {
    border-color: var(--tt-brand);
}

.numbers-pick:focus-visible[b-zctxq84fcl],
.numbers-other-input:focus-visible[b-zctxq84fcl] {
    outline: 2px solid var(--tt-brand);
    outline-offset: 2px;
}

.numbers-pick:disabled[b-zctxq84fcl] {
    cursor: default;
    opacity: .6;
}

.numbers-pick.is-selected[b-zctxq84fcl],
.numbers-other-input.is-selected[b-zctxq84fcl] {
    border: 2px solid var(--tt-brand);
    background: var(--tt-brand-soft);
}

.numbers-pick-rank[b-zctxq84fcl] {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: var(--tt-text-micro);
    color: var(--tt-ink-muted);
}

.numbers-pick-number[b-zctxq84fcl] {
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.numbers-pick-note[b-zctxq84fcl] {
    font-size: var(--tt-text-micro);
    color: var(--tt-ink-muted);
    text-align: center;
    line-height: 1.2;
}

.numbers-pick.is-shared .numbers-pick-note[b-zctxq84fcl] {
    color: var(--tt-warning);
}

.numbers-pick.is-taken:not(.is-selected)[b-zctxq84fcl] {
    border-style: dashed;
}

.numbers-pick.is-taken .numbers-pick-note[b-zctxq84fcl] {
    color: var(--tt-warning);
}

/* A quarter of a phone's row: the input's usual 12px sides would clip its "Type #" placeholder. */
.numbers-other-input[b-zctxq84fcl] {
    min-width: 0;
    min-height: 56px;
    padding-inline: var(--tt-space-1);
    text-align: center;
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.numbers-other-input[b-zctxq84fcl]::placeholder {
    font-size: var(--tt-text-body);
    font-weight: var(--tt-weight-regular);
}

.numbers-other-input[aria-invalid="true"][b-zctxq84fcl] {
    border-color: var(--tt-danger);
}

.numbers-problem[b-zctxq84fcl] {
    color: var(--tt-danger);
}

.numbers-pending[b-zctxq84fcl] {
    color: var(--tt-ink);
}

.numbers-undo[b-zctxq84fcl] {
    margin-left: var(--tt-space-1);
    min-height: 44px;
    padding: 0 var(--tt-space-2);
    border: 0;
    background: none;
    color: var(--tt-brand-strong);
    font: inherit;
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
}

/* Compact buttons are 36px tall app-wide; here they're the main way to act, so they get the full 44px. */
.tt-btn[b-zctxq84fcl] {
    min-height: 44px;
}
/* /Pages/Shared/TeamUniformEditor.razor.rz.scp.css */
/* The switches sit flush in one card, hairlines between, like the settings hub's rows. */
.uniform-switch[b-t3t3f51dyu] {
    padding: var(--tt-space-3) var(--tt-space-4);
    border-bottom: 1px solid var(--tt-hairline);
}

.uniform-switch:last-child[b-t3t3f51dyu] {
    border-bottom: 0;
}

/* Order totals: the item, then its sizes as chips with the count in bold. */
.uniform-total[b-t3t3f51dyu] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-1);
}

.uniform-chips[b-t3t3f51dyu],
.uniform-picks[b-t3t3f51dyu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.uniform-chip[b-t3t3f51dyu] {
    padding: 2px 10px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-brand-soft);
    color: var(--tt-brand-strong);
    font-size: var(--tt-text-caption);
}

.uniform-chip-missing[b-t3t3f51dyu] {
    background: var(--tt-surface-sunken);
    color: var(--tt-ink-muted);
}

/* One line per player: name, then each item's size. Nothing picked reads as a gap, not an error. */
.uniform-player[b-t3t3f51dyu] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-1);
    padding: var(--tt-space-3) var(--tt-space-4);
    border-bottom: 1px solid var(--tt-hairline);
}

.uniform-player:last-child[b-t3t3f51dyu] {
    border-bottom: 0;
}

.uniform-pick[b-t3t3f51dyu] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--tt-radius-sm);
    background: var(--tt-surface-sunken);
    font-size: var(--tt-text-caption);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink);
}

.uniform-pick-item[b-t3t3f51dyu] {
    font-weight: var(--tt-weight-medium);
    color: var(--tt-ink-muted);
}

.uniform-pick.is-missing[b-t3t3f51dyu] {
    color: var(--tt-ink-faint);
}

.uniform-pick.is-carried[b-t3t3f51dyu] {
    font-style: italic;
    color: var(--tt-warning);
    background: var(--tt-warning-soft);
}

/* A family's note about other items, under the player's sizes. */
.uniform-player-note[b-t3t3f51dyu] {
    font-size: var(--tt-text-caption);
    color: var(--tt-ink-muted);
    overflow-wrap: anywhere;
}

.uniform-player-note.is-carried[b-t3t3f51dyu] {
    font-style: italic;
    color: var(--tt-warning);
}

/* "Saved." beside the note button, centred on it. */
.uniform-saved[b-t3t3f51dyu] {
    align-self: center;
}
/* /Pages/Shared/UniformSizesForm.razor.rz.scp.css */
/* The club's guide above the pickers: its note reads as a note, its chart fits the phone. */
.uniform-guide[b-ap9751oefg] {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.uniform-guide-heading[b-ap9751oefg] {
    margin: 0;
    font-size: var(--tt-text-headline);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink);
}

.uniform-guide-note[b-ap9751oefg] {
    margin: 0;
    color: var(--tt-ink-muted);
    white-space: pre-line;
}

.uniform-guide-chart[b-ap9751oefg] {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--tt-radius-sm);
    border: 1px solid var(--tt-hairline);
}

/* Last season's size, filled in: a nudge to check, not an error. */
.uniform-carried[b-ap9751oefg] {
    color: var(--tt-warning);
}

/* The coach's note about other items, at the top of each child's card: a quote, not a form field. */
.uniform-coach-note[b-ap9751oefg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tt-space-2) var(--tt-space-3);
    border-left: 3px solid var(--tt-brand);
    border-radius: var(--tt-radius-sm);
    background: var(--tt-brand-soft);
}

.uniform-coach-note-label[b-ap9751oefg] {
    font-size: var(--tt-text-micro);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-brand-strong);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.uniform-coach-note p[b-ap9751oefg] {
    margin: 0;
    color: var(--tt-ink);
    white-space: pre-line;
}