/**
 * Coach / manager self-service page (players/team_status_react).
 *
 * SIZING: the root font-size is 10px site-wide, so 1rem = 10px. Body text here
 * is 1.6rem, secondary 1.4rem, chips and tags 1.2rem — and nothing goes below
 * 1.2rem, for the same reason roster_upload.css says so: coaches read this on a
 * phone, standing on a touchline.
 *
 * The email gate's own elements are styled by email_gate.css under `eg-`; the
 * only thing this file does for it is theme the `eg-gate--tds` modifier.
 */

/* The page is a deeper gray than the site's --cultured (97% lightness) on
   purpose: white cards on --cultured barely separated from it, and the page
   reads as five cards only if each one stands off the background (Loi,
   2026-09-29). The sticky jump bar uses the same value. */
.tds-page {
    --tds-page-bg: #e8ebf0;
    min-height: 100vh;
    background-color: var(--tds-page-bg);
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--charcoal, #3d4554);
    font-size: 1.6rem;
    padding-bottom: 4rem;
}

/* ------------------------------------------------------------------ header */

.tds-header {
    padding: 1.6rem 2rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.tds-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: var(--cinnamon-satin, #c7687f);
}

.tds-event {
    margin: 0.4rem 0 0;
    font-size: 1.5rem;
}

.tds-signedin {
    margin: 0.4rem 0 0;
    font-size: 1.3rem;
    color: #6b7280;
}

/* ------------------------------------------------------------------- cards */

.tds-card {
    max-width: 96rem;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.tds-card h2 {
    margin: 0 0 0.6rem;
    font-size: 1.9rem;
    font-weight: 600;
}

.tds-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.tds-login {
    max-width: 56rem;
}

.tds-subtitle {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
    color: #6b7280;
}

.tds-muted {
    font-size: 1.4rem;
    color: #6b7280;
    margin: 0 0 1.4rem;
}

.tds-empty {
    font-size: 1.5rem;
    padding: 1.6rem 0;
}

.tds-error,
.tds-notice {
    max-width: 96rem;
    margin: 1.6rem auto 0;
    padding: 1rem 1.4rem;
    border-radius: 6px;
    font-size: 1.4rem;
}

.tds-error {
    background-color: #fdecef;
    border: 1px solid #f3c6ce;
    color: #8c2f42;
}

.tds-notice {
    background-color: #eef6ee;
    border: 1px solid #c9e2c9;
    color: #2f6b3a;
    margin: 0 0 1.4rem;
}

/* Blue, deliberately not the red error or the green confirmation: "you are not
   the person this page is for" is context, not a problem and not a result. */
.tds-staffnote {
    margin: 0 0 1.4rem;
    padding: 1rem 1.4rem;
    border-radius: 6px;
    background-color: #eef2fa;
    border: 1px solid #ccd8ee;
    color: #33477a;
    font-size: 1.4rem;
}

/* Amber, and deliberately none of the three above: the GotSport divergence is
   not an error on this page (nothing failed), not a confirmation (nothing
   succeeded) and not staff context. It is work the coach owes somewhere else,
   which is its own category and the one thing on this page that cannot be
   actioned by a button here. */
.tds-divergence {
    margin: 0 0 1.6rem;
    padding: 1.2rem 1.4rem;
    border-radius: 6px;
    background-color: #fdf5e7;
    border: 1px solid #eddcb9;
    color: #6b4d16;
    font-size: 1.4rem;
}

.tds-divergence h3 {
    margin: 0 0 0.8rem;
    font-size: 1.5rem;
}

.tds-divergence p {
    margin: 0 0 0.8rem;
    line-height: 1.5;
}

.tds-divergence p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------ the verdict and checklist */
/* Issue #525: the answer to "are we done?" comes before any name. The stamp is
   large on purpose, so a coach who only wanted that answer stops reading here.
   The word and the mark carry the meaning; the green is decoration, same rule
   as the status chips below. */

.tds-checklist {
    margin: 0 0 2.4rem;
}

.tds-stamp {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0 0 1.6rem;
    padding: 1.6rem 2rem;
    border: 3px solid #2f6b3a;
    border-radius: 10px;
    background-color: #eef6ee;
    color: #2f6b3a;
}

.tds-stamp__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    background-color: #2f6b3a;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 700;
}

.tds-stamp__text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tds-stamp__word {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.tds-stamp__detail {
    font-size: 1.5rem;
}

.tds-checklist__verdict {
    margin: 0 0 1.2rem;
}

.tds-card .tds-checklist__verdict {
    font-size: 1.8rem;
}

/* The "based on documents received as of" footnote under the verdict: quiet,
   but always present, so a coach can compare it with when they last acted. */
.tds-checklist__as-of {
    margin: -0.4rem 0 1.2rem;
    font-size: 1.3rem;
    font-style: italic;
    color: #6b7280;
}

.tds-callout {
    margin: 0 0 1.2rem;
    padding: 1.2rem 1.6rem;
    border-radius: 6px;
    border-left: 4px solid #9ca3af;
    background-color: #f9fafb;
    font-size: 1.4rem;
}

.tds-callout h4 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.tds-callout ul {
    margin: 0;
    padding-left: 2rem;
    line-height: 1.6;
}

/* The email's accent callout, for the same bucket. */
.tds-callout--action {
    border-left-color: var(--cinnamon-satin, #c7687f);
    background-color: #fdf2f5;
}

.tds-callout--action h4 {
    color: var(--cinnamon-satin, #c7687f);
}

/* The online waiver link a coach sends their families: neutral grey, not the
   action pink, because it is a tool to use rather than a deficiency. */
.tds-waiverlink__hint {
    margin: 0 0 0.8rem;
    color: #55606f;
}

.tds-waiverlink__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.tds-waiverlink__url {
    flex: 1 1 24rem;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1px solid #d5d8de;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 1.3rem;
    color: var(--charcoal, #3d4554);
}

/* A receipt, not a demand: no fill, muted text. */
.tds-callout--done {
    background: none;
    color: #6b7280;
}

/* The age questions (AgeQuestions.tsx). A calm slate edge rather than the
   action pink: they are questions, and nothing about them is assumed wrong. */
.tds-callout--age {
    border-left-color: #64748b;
    background-color: #f8fafc;
}

.tds-age + .tds-age {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e5e7eb;
}

.tds-age__text {
    margin: 0 0 0.8rem;
}

.tds-age__answered {
    margin: 0;
    color: #55606f;
}

.tds-age__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tds-age__fixes {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tds-age__fix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.tds-age__label {
    margin: 0;
    font-weight: 600;
    font-size: 1.3rem;
}

/* Name, date and Save on one line, wrapping only on a phone. The input's
   width is set here because the page's base input rule is full width. */
.tds-age__dob {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.tds-age__dob label {
    min-width: 14rem;
}

.tds-age__dob input {
    width: auto;
    flex: 0 0 auto;
}

.tds-age__dob input,
.tds-age__note {
    padding: 0.5rem 0.8rem;
    border: 1px solid #d5d8de;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1.3rem;
    color: var(--charcoal, #3d4554);
    background-color: #ffffff;
}

.tds-age__note {
    width: 100%;
    max-width: 48rem;
    box-sizing: border-box;
    resize: vertical;
}

/* The collapsed player list (#532) sits at the top of the Players card, above
   the not-attending names and the sign-off, so it needs a little air on both
   sides that those get from their own top borders. */
.tds-upload-toggle {
    display: block;
    margin: 0 0 0.6rem;
}

.tds-players-toggle {
    display: block;
    margin: 0.4rem 0 1.2rem;
}

.tds-back {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0.8rem;
    font-size: 1.4rem;
    color: var(--cinnamon-satin, #c7687f);
    cursor: pointer;
}

.tds-back:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------- table */

/* .tds-tablewrap has no rule of its own any more. It still scrolls sideways (a
   phone is narrower than four document columns, and the page body must never be
   the thing that scrolls sideways), but that overflow-x is in style.css with the
   sticky-header pattern that turns it off again on a screen wide enough not to
   need it. Declared here it would beat that rule and the header would stop
   sticking. App.tsx watches this wrapper. */

.tds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
}

/* style.css carries a global `th, td { border: 1px solid; text-align: center;
   font-size: small }` from the schedule tables. All three have to be undone
   explicitly here, or this table renders boxed, center-aligned and a size
   smaller than the paragraph above it — the borders are the visible half, the
   font-size the one that is easy to miss, since `small` beats inheritance. */
.tds-table th,
.tds-table td {
    border: none;
    text-align: left;
    font-size: 1.5rem;
}

/* The background and the shadow are this table's half of the sticky header in
   style.css: a transparent header lets rows pass through it, and the 2px border
   below stays with the collapsed grid rather than traveling with the pinned
   cells, so the shadow has to redraw it. */
.tds-table th {
    padding: 0.8rem 1rem;
    border-bottom: 2px solid #e5e7eb;
    font-size: 1.3rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    background: var(--white, #fff);
    --sticky-head-shadow: inset 0 -2px 0 #e5e7eb;
}

.tds-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #f0f1f3;
    vertical-align: middle;
}

.tds-table tr:hover td {
    background-color: #fafbfc;
}

.tds-name {
    font-weight: 500;
    white-space: nowrap;
}

.tds-jersey {
    margin-left: 0.8rem;
    font-size: 1.2rem;
    color: #6b7280;
}

.tds-tag {
    margin-left: 0.8rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background-color: #eef1f6;
    font-size: 1.2rem;
    color: #6b7280;
}

.tds-status-cell,
.tds-action-cell {
    white-space: nowrap;
}

/* ------------------------------------------------------------------- chips */

/* ------------------------------------------------------------------- chips
 *
 * HUE CARRIES NOTHING HERE. This column was a pale-green "Received" beside a
 * pale-red "Missing", which is the worst available encoding: red-green
 * deficiency is the common kind, and to a protan the red reads near-black
 * while the green reads red — the two swap round. Three things now separate
 * them, none of which is hue:
 *
 *   1. a glyph (✓ / ✕ / ! / –), set in the markup;
 *   2. WEIGHT — Missing is bold, Received is not;
 *   3. LUMINANCE — Missing is white on a dark fill and is the only dark thing
 *      in a pale row, so it is the first thing the eye lands on whatever it
 *      does with color. Received has no fill at all and recedes.
 *
 * That ordering is also just better for the job: this table is a to-do list,
 * and the items already done should not compete with the ones that are not.
 */

.tds-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 1.2rem;
    white-space: nowrap;
}

.tds-chip__mark {
    font-size: 1.1rem;
    line-height: 1;
}

/* Quiet on purpose: no fill, no border, normal weight. */
.tds-chip--received {
    background: none;
    padding-left: 0;
    color: #6b7280;
    font-weight: 400;
}

/* The one that has to be seen. Dark fill + white text is a luminance contrast,
   which survives any color vision; the red is for everyone else's benefit and
   is doing no work on its own. */
.tds-chip--missing {
    background-color: #a12d43;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Something DID arrive and the next step belongs to the family, not to the
   coach's chasing list — so it is neither of the above. Outlined rather than
   filled keeps it below Missing in the visual order, and amber sits on the
   blue-yellow axis, which red-green deficiency leaves intact. */
.tds-chip--unusable {
    background-color: #fdf0dc;
    border: 1px solid #d8a34a;
    color: #7a4e0a;
    font-weight: 600;
}

.tds-chip--not-required {
    background: none;
    padding-left: 0;
    color: #9aa0aa;
    font-weight: 400;
}

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

.tds-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 1.3rem;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
}

.tds-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.tds-btn--quiet {
    background-color: #ffffff;
    border-color: #d5d8de;
    color: #6b7280;
}

.tds-btn--quiet:hover:not(:disabled) {
    border-color: #b9bdc6;
    color: var(--charcoal, #3d4554);
}

/* The per-row action, deliberately NOT a bordered control.
   A pill in the row of "Received" / "Missing" pills gets read as a third
   STATUS however it is worded — that is what "Not playing" did — so the one
   thing in the row that is pressable is the one thing with no box around it. */
.tds-btn--action {
    background: none;
    border: none;
    padding: 0.5rem 0;
    /* Neutral, NOT the brand pink it started as. Pink text beside the dark-red
       Missing chip put two warm tones in one row competing for the eye — and
       to red-green-deficient vision they are the same tone. The chip is the
       thing that must be seen; this is the only text in its column and carries
       a standing underline so it still reads as pressable. */
    color: #55606f;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: #c3c8d0;
    text-underline-offset: 3px;
}

.tds-btn--action:hover:not(:disabled) {
    color: var(--charcoal, #3d4554);
    text-decoration-color: currentColor;
}

.tds-btn--danger {
    background-color: var(--cinnamon-satin, #c7687f);
    color: #ffffff;
}

.tds-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.tds-confirm__q {
    font-size: 1.3rem;
    color: var(--charcoal, #3d4554);
}

/* The one PRIMARY control on the page. Everything else here is quiet by
   design (the page is for reading), so the confirmation is the only thing
   that gets a filled button, which is exactly the emphasis it should have as
   the last step of check-in. */
.tds-btn--primary {
    background-color: var(--charcoal, #3d4554);
    color: #ffffff;
    padding: 0.8rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.tds-btn--primary:hover:not(:disabled) {
    background-color: #2c3341;
}

/* -------------------------------------------- the coach's own confirmation */

/* Its own block under the table, separated by a rule rather than boxed: the
   sentence is about the list above it, and a card would read as a section of
   its own that could be answered without reading the names. */
.tds-attest {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e5e7eb;
}

.tds-attest h3 {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
    color: var(--charcoal, #3d4554);
}

.tds-attest .tds-muted {
    max-width: 60rem;
}

.tds-attest__confirm {
    max-width: 60rem;
}

/* The sentence being agreed to. Set apart from the surrounding copy because it
   is the thing being asserted rather than an explanation of it: a coach may be
   held to this, so it must not read as more page furniture. */
.tds-attest__statement {
    margin: 0 0 1.2rem;
    padding: 1.2rem 1.6rem;
    background-color: #ffffff;
    border-left: 3px solid var(--cinnamon-satin, #c7687f);
    border-radius: 4px;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--charcoal, #3d4554);
}

/* What signing records, said plainly under the statement. Quieter than the
   statement above it on purpose: it is not part of the assertion, it is what
   happens when you agree to it. */
.tds-attest__notice {
    margin: 0 0 1.2rem;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #6b7280;
}

.tds-attest__actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------- holding area */

.tds-scratched {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e5e7eb;
}

.tds-scratched ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tds-scratched li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 46rem;
    padding: 0.6rem 0;
    font-size: 1.5rem;
    color: #6b7280;
}


/* ------------------------------------------ who gets this team's email */

/* Staff only, and last on the card on purpose: it is administration of the
   page rather than the thing the page is about, so it must not compete with
   the roster or with the confirmation above it. Collapsed by default for the
   same reason. */
.tds-managers {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid #e5e7eb;
}

/* A disclosure control that reads as a heading, not a button. Shared by the
   managers panel and the collapsed player list (#532), so the two expandable
   parts of the card look like the same kind of thing. */
.tds-toggle {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--charcoal, #3d4554);
    cursor: pointer;
}

.tds-toggle:hover {
    text-decoration: underline;
}

.tds-managers__body {
    margin-top: 1.2rem;
    max-width: 60rem;
}

.tds-managers__list {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
}

.tds-managers__list li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f2f4;
    font-size: 1.4rem;
    color: var(--charcoal, #3d4554);
}

.tds-managers__email {
    flex: 1 1 auto;
    /* An address is the one string here that must not be truncated: it is what
       a staff member reads back to whoever asked. */
    word-break: break-all;
}

/* Where the address came from, quiet because it is the answer to a question
   nobody asked until they wonder why a row has no Remove beside it. */
.tds-managers__origin {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: #6b7280;
}

.tds-managers__add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.tds-managers__add label {
    flex: 0 0 100%;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--charcoal, #3d4554);
}

.tds-managers__add input {
    flex: 1 1 22rem;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--charcoal, #3d4554);
}

.tds-managers__add input:focus {
    outline: 2px solid var(--cinnamon-satin, #c7687f);
    outline-offset: 1px;
}

/* -------------------------------------------------------- email gate theme */

.eg-gate--tds {
    max-width: 52rem;
}

/* ------------------------------------------------ documents panel (#536) */

/* Not received, not refused: nothing has ruled on it yet. Outlined and
   neutral so it cannot be mistaken for either end. */
.tds-chip--pending {
    background: none;
    border: 1px solid #c3c8d0;
    color: #55606f;
    font-weight: 500;
}

/* The upload button beside a deficiency. Bordered, unlike the row action in
   the player table, because here it sits beside a sentence rather than in a
   row of status pills, and it is the one thing on the line to do. */
.tds-btn--upload {
    margin-left: 0.4rem;
    padding: 0.2rem 0.9rem;
    background-color: #ffffff;
    border-color: #b9bdc6;
    color: var(--charcoal, #3d4554);
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
}

.tds-btn--upload:hover:not(:disabled) {
    border-color: var(--charcoal, #3d4554);
}

.tds-doc__note {
    margin: 0.4rem 0 0;
    font-size: 1.3rem;
    color: #6b7280;
}

.tds-doc__reasons {
    margin: 0.6rem 0 0;
    padding-left: 2rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.tds-timeline {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0 0 0 1.2rem;
    border-left: 2px solid #e5e7eb;
    font-size: 1.3rem;
    line-height: 1.6;
}

.tds-timeline ul {
    margin: 0.2rem 0 0.4rem;
    padding-left: 2rem;
    color: #55606f;
}

.tds-timeline__when {
    display: inline-block;
    min-width: 19rem;
    margin-right: 0.8rem;
    color: #6b7280;
}

/* The shared upload component centers itself in 720px, which suits the old
   standalone upload page. Inside the portal's card it is one section among
   others, so it takes the card's left edge like the rest of them. */
.tds-card .roster-documents {
    max-width: none;
    margin: 0;
    padding: 0.8rem 0 2.4rem;
}
.tds-card .roster-documents-folded {
    padding-bottom: 0.8rem;
}
.tds-card .roster-documents-folded .roster-doc-intro {
    margin: 0;
}

/* The status-change email opt-in (issue #573): a settings row, the words on the
   left and the switch on the right, on the Contact card and inside an upload's
   confirmation. The whole row is the label, so a tap anywhere on it flips it. */
.tds-notify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin: 1.2rem 0 0;
    font-size: 1.4rem;
    color: var(--charcoal, #3d4554);
    cursor: pointer;
}

.tds-notify__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.35;
}

.tds-notify__text strong {
    font-size: 1.5rem;
    font-weight: 600;
}

.tds-notify__sub {
    font-size: 1.3rem;
    color: #6b7280;
}

/* The switch: a real checkbox stretched invisibly over the track, so focus,
   Space and the screen reader's "switch, on/off" all come from the input. */
.tds-switch {
    position: relative;
    flex: none;
    width: 4.4rem;
    height: 2.4rem;
}

.tds-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tds-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-color: #cfd5dd;
    transition: background-color 0.15s;
    pointer-events: none;
}

.tds-switch span::after {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.tds-switch input:checked + span {
    background-color: #2f6b3a;
}

.tds-switch input:checked + span::after {
    transform: translateX(2rem);
}

.tds-switch input:focus-visible + span {
    outline: 2px solid var(--cinnamon-satin, #c7687f);
    outline-offset: 2px;
}

.tds-switch input:disabled {
    cursor: wait;
}

/* ------------------------------------------ the page as cards (2026-09-29) */

/* One card per question (TeamPanel's default export). A little tighter than a
   lone card's 2rem, so five of them read as one page rather than five. The
   scroll margin keeps a section's heading clear of the sticky jump bar when a
   link lands on it. */
.tds-card.tds-section {
    margin: 1.6rem auto;
    scroll-margin-top: 6.4rem;
}

.tds-section__sub {
    margin: 0 0 1.2rem;
    font-size: 1.4rem;
    color: #6b7280;
}

/* The section links. Sticky, on the page's own gray so rows scrolling under it
   do not show through, and as wide as the cards so its left edge lines up. */
.tds-jump {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 96rem;
    margin: 0 auto;
    padding: 0.8rem 0;
    background-color: var(--tds-page-bg, #e8ebf0);
}

.tds-jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid #cfd5dd;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--charcoal, #3d4554);
    text-decoration: none;
}

.tds-jump a:hover {
    border-color: var(--cinnamon-satin, #c7687f);
    color: var(--cinnamon-satin, #c7687f);
}

.tds-jump__count {
    min-width: 2rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: var(--cinnamon-satin, #c7687f);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

/* A plain in-text link, for "See players" and "Go to sign-off". */
.tds-link {
    color: var(--cinnamon-satin, #c7687f);
    font-weight: 600;
    white-space: nowrap;
}

.tds-muted-inline {
    color: #6b7280;
    font-size: 1.3rem;
}

/* ------------------------------------------------ the documents table */

.tds-doctable td {
    vertical-align: top;
}

.tds-doctable .tds-docrow__name {
    white-space: nowrap;
    width: 1%;
}

.tds-doctable .tds-docrow__status {
    white-space: nowrap;
    width: 1%;
}

.tds-docrow__label {
    font-weight: 600;
}

/* The document's name opens its history in place (Loi, 2026-09-29), so it has
   to look like it does something: link color and a chevron that turns. */
.tds-docrow__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cinnamon-satin, #c7687f);
    cursor: pointer;
    text-align: left;
}

.tds-docrow__toggle:hover {
    text-decoration: underline;
}

.tds-docrow__chev {
    display: inline-block;
    font-size: 1.1rem;
    transition: transform 0.15s;
}

.tds-docrow__toggle[aria-expanded="true"] .tds-docrow__chev {
    transform: rotate(90deg);
}

.tds-doctable tr.tds-docrow__detail td,
.tds-doctable tr.tds-docrow__detail:hover td {
    padding: 1.2rem 1.6rem 1.6rem 2.8rem;
    background-color: #f7f8fa;
}

.tds-docrow__subhead {
    margin: 1.4rem 0 0.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.tds-docrow__detail td > .tds-docrow__subhead:first-child,
.tds-docrow__detail td > .tds-doc__rosters:first-child {
    margin-top: 0;
}

.tds-docrow__reasons {
    margin: 0 0 0.4rem;
    padding-left: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.tds-docrow__text {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    line-height: 1.5;
    white-space: normal;
}

.tds-docrow__files {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tds-docrow__files li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    padding: 0.4rem 0;
    font-size: 1.4rem;
}

/* The eye and trash (Loi, 2026-09-29). Quiet until hovered, so the row's
   status chip stays the first thing read; the trash turns red on hover as the
   one warning before its own confirmation. */
.tds-fileicons {
    display: inline-flex;
    gap: 0.2rem;
    margin-left: 0.8rem;
    vertical-align: middle;
}

.tds-icon {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #6b7280;
    cursor: pointer;
}

.tds-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

.tds-icon:hover:not(:disabled) {
    background-color: #eef0f3;
    color: var(--charcoal, #3d4554);
}

.tds-icon--delete:hover:not(:disabled) {
    color: #a3303f;
}

.tds-icon:focus-visible {
    outline: 2px solid var(--cinnamon-satin, #c7687f);
    outline-offset: 1px;
}

.tds-doclegend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin: 1.2rem 0 0;
    font-size: 1.3rem;
    color: #6b7280;
}

.tds-doclegend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tds-doclegend svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* A signed-off roster is one line where the button was; the documents table
   already carries it as a row. */
.tds-attest--done {
    font-size: 1.4rem;
    color: #2f6b3a;
}

/* Contact & notifications: small controls, each on its own line with a rule
   between, so they read as a list of settings rather than as lookalike
   toggles scattered down the page. */
.tds-contact > * + * {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #eef0f2;
}

.tds-contact .tds-notify,
.tds-contact .tds-managers {
    margin-top: 1.2rem;
}

.tds-contact h2 + * {
    border-top: none;
    padding-top: 0;
}

/* On a phone the table becomes stacked rows: the name and its chip on one
   line, the notes under them, so nothing scrolls sideways. */
@media (max-width: 600px) {
    .tds-doctable thead {
        display: none;
    }

    /* Out of table layout entirely, or the table keeps the width its widest
       cell asked for and the page scrolls sideways. */
    .tds-doctable,
    .tds-doctable tbody {
        display: block;
        width: 100%;
    }

    /* File names are long unbroken strings ("North_York_Academy_U17_...pdf"). */
    .tds-doctable td {
        overflow-wrap: anywhere;
    }

    .tds-doctable .tds-docrow__name {
        white-space: normal;
    }

    .tds-doctable tr.tds-docrow {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.6rem 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #f0f1f3;
    }

    .tds-doctable tr.tds-docrow td {
        padding: 0;
        border: none;
        width: auto;
    }

    .tds-doctable tr.tds-docrow td.tds-docrow__notes {
        grid-column: 1 / -1;
    }

    .tds-doctable tr.tds-docrow__detail,
    .tds-doctable tr.tds-docrow__detail td {
        display: block;
    }

    .tds-doctable tr.tds-docrow__detail td {
        padding-left: 1.2rem;
    }

    .tds-timeline__when {
        display: block;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tds-docrow__chev {
        transition: none;
    }
}

/* The Remove roster button inside a document row's details: space from the
   date it follows. */
.tds-docrow__detail .tds-doc__rosters li .tds-btn {
    margin-left: 0.8rem;
}