/* ═══════════════════════════════════════════════════════════════
   STFMatches — Thomson Park — site.css
   Palette + loader + wordmark lifted from CourtPoach (quick-and-dirty v1).
   Red means YOU. Green means YES/DO IT. Navy means the club.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Surface */
    --tp-cream:       #FCF8ED;
    --tp-cream-high:  #F5EFDF;
    --tp-white:       #FFFFFF;

    /* Identity */
    --tp-navy:        #1F2C68;
    --tp-red:         #C8282C;
    --tp-green:       #CEE04A;
    --tp-go:          #2E9E44;  /* readable green for the "available" check icon */
    --tp-silver:      #B8BFC6;
    --tp-grey:        #8A8A80;
    --tp-grey-dim:    #6B6B62;
    --tp-light-grey:  #D8D8D0;

    /* Type */
    --tp-font-display: 'Big Shoulders Display', 'Arial Black', sans-serif;
    --tp-font-body:    'Public Sans', system-ui, sans-serif;

    /* Radii */
    --tp-r-chip:   12px;
    --tp-r-cell:   12px;
    --tp-r-button: 16px;
    --tp-r-modal:  20px;

    /* Shadow (cards) */
    --tp-shadow-modal: 0 4px 8px rgba(31, 44, 104, 0.08);
}

/* ═══════════════════════════════════════ Base ═══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--tp-cream);
    color: var(--tp-navy);
    font-family: var(--tp-font-body);
    font-size: 18px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--tp-navy);
    text-decoration: none;
}

p a, li a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

button, input, select { font-family: inherit; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════
   Loader (overlay content) — tennis ball drop with squash + shadow.
   ═══════════════════════════════════════ */

.page-overlay { background: var(--tp-cream); }

.tp-loader {
    position: relative;
    width: 56px;
    height: 96px;
    color: var(--tp-navy);
}

.tp-ball {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -16px;
    width: 32px;
    height: 32px;
    transform-origin: 50% 100%;
    animation: tp-drop 1400ms cubic-bezier(.5,.05,.5,.95) infinite;
}

.tp-ball-rot {
    width: 100%;
    height: 100%;
    animation: tp-spin 1400ms cubic-bezier(.35,.1,.65,.9) infinite;
}

.tp-ball .tp-ball-svg { display: block; width: 100%; height: 100%; }

.tp-loader-shadow {
    position: absolute;
    left: 50%;
    bottom: 5px;
    margin-left: -18px;
    width: 36px;
    height: 5px;
    border-radius: 50%;
    background: var(--tp-navy);
    opacity: 0.175;
    filter: blur(3px);
    animation: tp-drop-shadow 1400ms cubic-bezier(.5,.05,.5,.95) infinite;
}

@keyframes tp-drop {
    0%   { top: 0;    transform: scale(1, 1); }
    42%  { top: 52px; transform: scale(1, 1); }
    48%  { top: 56px; transform: scale(1.06, 0.92); }
    55%  { top: 55px; transform: scale(1.02, 0.97); }
    100% { top: 0;    transform: scale(1, 1); }
}

@keyframes tp-spin {
    0%   { transform: rotate(0deg); }
    42%  { transform: rotate(300deg); }
    55%  { transform: rotate(315deg); }
    100% { transform: rotate(360deg); }
}

@keyframes tp-drop-shadow {
    0%        { transform: scale(0.35); opacity: 0.15; }
    42%, 55%  { transform: scale(1);    opacity: 0.4; }
    100%      { transform: scale(0.35); opacity: 0.15; }
}

/* ═══════════════════════════════════════ Header / wordmark ═══════════════════════════════════════ */

.tp-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--tp-cream);
}

.tp-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tp-navy);
    min-width: 0;
}

.tp-wordmark-emblem {
    display: inline-block;
    margin-right: -6px;
    width: 40px;
    height: 40px;
    color: var(--tp-navy);
}

.tp-wordmark-emblem .tp-racquets { width: 100%; height: 100%; }

.tp-wordmark-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.95;
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tp-wordmark-line { display: block; }

/* Home icon back to the captain dashboard — only rendered inside the captain area. */
.tp-home {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--tp-navy);
}

.tp-home svg { width: 24px; height: 24px; }

/* Discreet captain entry — open for now; gets proper placement once the captain login lands. */
.tp-headlink {
    margin-left: auto;
    color: var(--tp-grey-dim);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

@media (min-width: 420px) {
    .tp-wordmark-emblem { width: 48px; height: 48px; margin-right: -8px; }
    .tp-wordmark-text   { font-size: 26px; }
}

/* ═══════════════════════════════════════ Main ═══════════════════════════════════════ */

.tp-main {
    flex: 1;
    padding: 0 16px 32px;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* ═══════════════════════════════════════ Type + buttons ═══════════════════════════════════════ */

.tp-display {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 32px;
    line-height: 1.1;
    color: var(--tp-navy);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

.tp-body {
    font-family: var(--tp-font-body);
    font-size: 20px;
    color: var(--tp-navy);
    margin: 0 0 16px;
}

.tp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--tp-r-button);
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

.tp-btn-primary { background: var(--tp-green); color: var(--tp-navy); }
.tp-btn-destructive { background: var(--tp-red); color: var(--tp-cream); }

/* ═══════════════════════════════════════ Alerts (toast) ═══════════════════════════════════════ */

.tp-alerts {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.tp-alert {
    padding: 10px 16px;
    border-radius: var(--tp-r-button);
    background: var(--tp-navy);
    color: var(--tp-cream);
    font-family: var(--tp-font-body);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--tp-shadow-modal);
    opacity: 1;
    transition: opacity 300ms ease-out;
    max-width: 320px;
}

.tp-alert--danger  { background: var(--tp-red); }
.tp-alert--success { background: var(--tp-navy); }
.tp-alert--fade    { opacity: 0; }

/* ═══════════════════════════════════════ Choose-your-name ═══════════════════════════════════════ */

.tp-choose {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 4px 48px;
}

.tp-choose-head { text-align: center; margin-bottom: 24px; }

.tp-choose-emblem {
    display: inline-block;
    width: 64px;
    height: 64px;
    color: var(--tp-navy);
}

.tp-choose-emblem .tp-racquets { width: 100%; height: 100%; }

.tp-choose .tp-display { text-align: center; margin: 8px 0 4px; }

.tp-choose-sub { margin: 0; color: var(--tp-grey-dim); font-size: 16px; }

.tp-choose-list { display: flex; flex-direction: column; gap: 10px; }
.tp-choose-list form { margin: 0; }

.tp-choose-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--tp-white);
    border: 1px solid var(--tp-light-grey);
    border-radius: var(--tp-r-button);
    color: var(--tp-navy);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.tp-choose-btn:active { background: var(--tp-cream-high); }

.tp-choose-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tp-navy);
    color: var(--tp-cream);
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 20px;
}

.tp-choose-name { flex: 1; }
.tp-choose-arrow { color: var(--tp-grey); }

/* ═══════════════════════════════════════ Chevrons (shared) ═══════════════════════════════════════ */

/* One crisp chevron drawn from two borders — used site-wide, never a font glyph (which renders flat).
   Base points right; modifiers rotate it. Colour inherits via currentColor; size from width/height. */
.tp-chev {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
.tp-chev--left { transform: rotate(135deg); }
.tp-chev--up   { transform: rotate(-135deg); }
.tp-chev--down { transform: rotate(45deg); }

/* ═══════════════════════════════════════ Availability page ═══════════════════════════════════════ */

.tp-avail { padding-top: 8px; }

.tp-avail-intro { margin-bottom: 20px; }
.tp-avail-intro .tp-display { margin-bottom: 8px; }

.tp-avail-hi {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 18px;
}

.tp-switch-form { margin: 0; }

.tp-switch {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--tp-navy);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tp-avail-help { color: var(--tp-grey-dim); font-size: 15px; margin: 8px 0 0; }

.tp-fixture {
    background: var(--tp-white);
    border: 1px solid var(--tp-light-grey);
    border-radius: var(--tp-r-cell);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.tp-fixture-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tp-cream-high);
}

.tp-fixture-date {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.tp-fixture-opp { color: var(--tp-grey-dim); font-size: 16px; }

.tp-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.tp-slot + .tp-slot { border-top: 1px solid var(--tp-cream-high); }

.tp-slot-time {
    display: flex;
    flex-direction: column;
    font-size: 17px;
    font-weight: 600;
}

.tp-slot-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--tp-grey);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-slot-btns { display: flex; gap: 8px; }
.tp-slot-btns form { margin: 0; }

.tp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--tp-r-button);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-grey-dim);
    font-family: var(--tp-font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.tp-pill-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Resting: green check, red X. When a choice is selected the pill fills with that colour, so the
   icon falls back to the button's text colour (navy on green / cream on red) to stay legible. */
.tp-pill--yes:not(.is-on) .tp-pill-ico { color: var(--tp-go); }
.tp-pill--no:not(.is-on)  .tp-pill-ico { color: var(--tp-red); }

.tp-pill--yes.is-on { background: var(--tp-green); border-color: var(--tp-green); color: var(--tp-navy); }
.tp-pill--no.is-on  { background: var(--tp-red);   border-color: var(--tp-red);   color: var(--tp-cream); }

/* ═══════════════════════════════════════ Captain — match times ════════════════════════════════ */

.tp-cap { padding-top: 8px; }

.tp-cap-note { margin: 0 0 6px; color: var(--tp-grey-dim); font-size: 14px; }

.tp-bucket { padding: 10px 0; }
.tp-bucket + .tp-bucket { border-top: 1px solid var(--tp-cream-high); }

.tp-bucket-time {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-grey-dim);
    margin-bottom: 8px;
}

.tp-bucket-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-bucket-lines form { margin: 0; }
.tp-bucket-empty { color: var(--tp-grey); font-size: 14px; font-style: italic; }

/* A division reads as a movable token: navy fill, with a swap glyph hinting "tap to move". */
.tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border-radius: var(--tp-r-button);
    border: 2px solid var(--tp-navy);
    background: var(--tp-navy);
    color: var(--tp-cream);
    font-family: var(--tp-font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.tp-chip:active { transform: translateY(1px); }
.tp-chip-ico { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; }

/* ═══════════════════════════════════════ Captain — lineups ═══════════════════════════════════════ */

/* Each match day is a <details>. The next day opens by default; the rest collapse to their date +
   opponent (the summary) so the whole season fits on one screen. */
.tp-day { padding: 0; }   /* the summary/body carry their own padding */

.tp-day-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;          /* drop the default disclosure triangle (Firefox) */
}

.tp-day-sum::-webkit-details-marker { display: none; }   /* …and WebKit */

/* Crisp chevron at the end of the summary row — down when collapsed, flips up when open. */
.tp-day-sum::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    margin-bottom: 3px;        /* lift the down-tip to the row's optical centre */
    align-self: center;
    border-right: 2px solid var(--tp-silver);
    border-bottom: 2px solid var(--tp-silver);
    transform: rotate(45deg);          /* down */
    transition: transform 0.15s ease;
}

.tp-day[open] .tp-day-sum::after { transform: rotate(-135deg); margin-bottom: 0; }   /* up */

/* When open, separate the summary from the lineup body; the body carries its own padding. */
.tp-day[open] .tp-day-sum { border-bottom: 1px solid var(--tp-cream-high); }
.tp-day-body { padding: 12px 16px 14px; }

/* The lineup reads the way the captain pastes it: grouped under a timeslot heading (the time pill),
   then one "division — players" row per line. */
.tp-wa-group + .tp-wa-group { margin-top: 12px; }
.tp-wa-time { margin-bottom: 4px; }              /* the time pill, promoted to a group heading */
.tp-wa-lines { display: flex; flex-direction: column; }

.tp-wa-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 0;
}

.tp-wa-line + .tp-wa-line { border-top: 1px solid var(--tp-cream-high); }

.tp-line-label {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tp-navy);
    min-width: 92px;
}

/* Timeslot reads as a small quiet tag (mirrors .tp-tag, lighter). */
.tp-line-slot {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tp-cream-high);
    color: var(--tp-grey-dim);
    font-size: 12px;
    font-weight: 700;
}

.tp-line-players { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }

/* Confirmed players read solid and prominent; players still awaiting a response render tentative
   (lighter, italic, dimmed) so the captain can see at a glance which names aren't locked in. */
.tp-player--confirmed { color: var(--tp-navy); font-weight: 700; }
.tp-player--tentative { color: var(--tp-grey-dim); font-weight: 500; font-style: italic; }
/* Player names are invisible links to the player's edit page — look exactly like the plain text.
   `color: inherit` makes bare links (Sitting / Awaiting / Court-time table) adopt their surrounding
   colour; the higher-specificity two-class rules keep the lineup chips' confirmed/tentative colour. */
.tp-player-link { color: inherit; text-decoration: none; cursor: pointer; }
.tp-player-link.tp-player--confirmed { color: var(--tp-navy); }
.tp-player-link.tp-player--tentative { color: var(--tp-grey-dim); }
.tp-amp { color: var(--tp-grey-dim); font-weight: 400; margin: 0 2px; }

.tp-lineup-await { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--tp-grey-dim); }

.tp-lineup-sit { margin: 10px 0 0; font-size: 14px; color: var(--tp-grey-dim); }
.tp-lineup-sit .tp-meta-key { margin-right: 4px; }

/* Bench keys read as a traffic light: green = available (call on now), neutral = no response yet
   (chase first), red = unavailable (out). The "available" / "no response" lines sit tight together. */
.tp-lineup-noresp, .tp-lineup-unavail { margin-top: 4px; }
.tp-lineup-avail .tp-meta-key  { color: var(--tp-go); }
.tp-lineup-unavail .tp-meta-key { color: var(--tp-red); }

/* Timeslot qualifier shown only for a split-state player (e.g. "Nathan (7:00 pm)"). */
.tp-bench-time { color: var(--tp-grey); font-size: 0.92em; }

/* Match-day availability summary — sits once above the options, divided from the lineup below. */
.tp-day-avail { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--tp-cream-high); }
.tp-day-avail .tp-lineup-sit:first-child { margin-top: 0; }

.tp-lineup-flags {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--tp-grey-dim);
    font-size: 13px;
}

.tp-lineup-flags li { margin: 2px 0; }

/* "Copy for WhatsApp" — the captain pastes the chosen lineup into the team group. */
.tp-wa-actions { margin-top: 12px; margin-bottom: 10px; }
.tp-wa-copy { min-height: 44px; font-size: 15px; }
.tp-wa-copy.is-copied { background: var(--tp-go); color: var(--tp-cream); }

/* Game number leads the day summary — the lineup's primary identifier. */
.tp-wa-game {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-navy);
}

/* "Other options" disclosure — collapsed by default, no JS. */
.tp-alts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tp-cream-high); }

.tp-alts > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tp-grey-dim);
}

.tp-alts > summary::-webkit-details-marker { display: none; }

/* Crisp chevron beside the label — down when collapsed, flips up when open. */
.tp-alts > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-bottom: 3px;
    border-right: 2px solid var(--tp-silver);
    border-bottom: 2px solid var(--tp-silver);
    transform: rotate(45deg);          /* down */
    transition: transform 0.15s ease;
}

.tp-alts[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; }   /* up */

.tp-alt { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--tp-light-grey); }

.tp-alt-h {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
    margin-bottom: 4px;
}

/* Court-time fairness table — compact rows, numbers right-aligned. */
.tp-court { display: flex; flex-direction: column; }

/* Player name fills the row; the games-played count sits right-aligned in a fixed column so the
   header and data rows line up despite the header's smaller font-size. */
.tp-court-row {
    display: grid;
    /* Fixed fee column (not auto) so every row's grid lines up — each row is its own grid, so an
       auto track would size per-row and knock the header's "Played" out of line with the counts. */
    grid-template-columns: minmax(0, 1fr) 52px 124px;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
}

.tp-court-row + .tp-court-row { border-top: 1px solid var(--tp-cream-high); }

/* Fees-paid column — a tappable check box per player (PRG toggle, works without JS). */
.tp-court-fee { justify-self: end; }
.tp-court-head .tp-court-fee {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
}
.tp-court-fee form { margin: 0; }
/* Two small, quiet tap-to-set chips (Cash / E-transfer) per row — kept diminutive so the fee
   column doesn't dominate the row. Much slimmer/lighter than the standard .tp-seg. */
.tp-fee-segs { display: flex; gap: 4px; justify-content: flex-end; }
.tp-fee-segs form { margin: 0; }
/* Higher specificity than the base .tp-seg (defined later in the file) so these slimming
   overrides actually win regardless of source order. */
.tp-seg.tp-seg--fee {
    min-height: 22px;
    padding: 0 6px;
    border-width: 1px;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.tp-court-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
}

.tp-court-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-navy);
    min-width: 0;
}

.tp-court-head .tp-court-name { font-weight: 700; }

.tp-court-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-court-row:not(.tp-court-head) .tp-court-num { font-size: 15px; color: var(--tp-grey-dim); }

/* Quiet "see also" link to a related page (e.g. Lineups → Court time). */
.tp-seealso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--tp-grey-dim);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.tp-seealso .tp-chev { width: 7px; height: 7px; }
.tp-seealso:active { color: var(--tp-navy); }

/* ═══════════════════════════════════════ Captain — shared ═══════════════════════════════════════ */

/* Quiet "up a level" link sitting above each captain page heading. */
.tp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px;
    color: var(--tp-grey-dim);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.tp-back .tp-chev { width: 7px; height: 7px; }   /* a touch smaller, to sit inline with the label */

.tp-back:active { color: var(--tp-navy); }

/* ═══════════════════════════════════════ Captain — dashboard hub ═══════════════════════════════ */

.tp-hub-nav { display: flex; flex-direction: column; gap: 12px; }

.tp-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: var(--tp-white);
    border: 1px solid var(--tp-light-grey);
    border-radius: var(--tp-r-cell);
    color: var(--tp-navy);
    text-decoration: none;
}

.tp-hub-card:active { background: var(--tp-cream-high); }

.tp-hub-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tp-navy);
    color: var(--tp-cream);
}

.tp-hub-ico svg { width: 24px; height: 24px; }

.tp-hub-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.tp-hub-title {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.tp-hub-sub { color: var(--tp-grey-dim); font-size: 14px; }
.tp-hub-arrow { color: var(--tp-silver); }

/* ═══════════════════════════════════════ Captain — roster list ═══════════════════════════════ */

.tp-roster { display: flex; flex-direction: column; gap: 10px; }

/* The card. Holds the tappable row and (optionally) a collapsible notes strip; overflow:hidden
   clips both children to the rounded corners. */
.tp-roster-item {
    background: var(--tp-white);
    border: 1px solid var(--tp-light-grey);
    border-radius: var(--tp-r-cell);
    overflow: hidden;
}

/* Full-width horizontal bands stacked top to bottom — name+tier, then Plays, then Partners — so
   long division lists get the whole width instead of a cramped right-hand column. */
.tp-roster-row {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    color: var(--tp-navy);
    text-decoration: none;
}

.tp-roster-row:active { background: var(--tp-cream-high); }

/* When a Notes strip follows, drop the row's bottom padding so Notes reads as the next band in the
   list (Plays · Partners · Notes) rather than a separate block below. */
.tp-roster-row:has(+ .tp-roster-notes) { padding-bottom: 0; }

/* Header band: name + gender + tier on one line, arrow pushed to the right. A full-bleed rule
   below it (breaking out of the row's side padding) mirrors the divider above Notes. */
.tp-roster-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--tp-cream-high);
}

.tp-roster-head .tp-tier { align-self: center; }

/* A label/value band. Label sits in a fixed left gutter so every value lines up. */
.tp-band { display: flex; align-items: flex-start; gap: 10px; }
.tp-band + .tp-band { margin-top: 6px; }

.tp-band-key {
    flex: 0 0 70px;
    padding-top: 3px;            /* optically align the small label with the tag/text row */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
}

.tp-band-val {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tp-navy);
}

/* Bullet between divisions / partners — a clear filled dot with breathing room on each side. */
.tp-band-sep {
    margin: 0 8px;
    color: var(--tp-silver);
    font-size: 22px;            /* • glyph — sized up so it reads as a real bullet, not a period */
    line-height: 0;
    vertical-align: middle;
}

/* Notes can be long — a quiet "Notes" disclosure at the foot of the card keeps every row an even
   height, expanding only on tap. Reads as the last band; the container carries the card's bottom pad. */
.tp-roster-notes { padding-bottom: 12px; }

.tp-roster-notes > summary {
    display: flex;
    align-items: center;
    gap: 6px;                  /* keep the chevron right beside the word */
    padding: 6px 16px 0;       /* 6px = the band gap above, so Notes lines up under Partners */
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
}

.tp-roster-notes > summary::-webkit-details-marker { display: none; }

/* A vertical chevron beside "Notes": points down to expand, flips up when open. Drawn from two
   borders (not a font glyph) so it stays crisp and angular. */
.tp-roster-notes > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-bottom: 3px;        /* lift the down-pointing tip to the text's optical centre */
    border-right: 2px solid var(--tp-silver);
    border-bottom: 2px solid var(--tp-silver);
    transform: rotate(45deg);          /* right+bottom borders, rotated → a "v" pointing down */
    transition: transform 0.15s ease;
}

.tp-roster-notes[open] > summary::after { transform: rotate(-135deg); }   /* flips to point up */

.tp-roster-notes-body {
    padding: 6px 16px 0;       /* small gap under the Notes label; container handles the bottom */
    color: var(--tp-grey-dim);
    font-size: 14px;
    white-space: pre-wrap;     /* preserve any line breaks the captain typed */
}

.tp-roster-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.tp-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.tp-meta-key {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tp-grey);
}

.tp-meta-val { color: var(--tp-navy); }
.tp-meta-empty { color: var(--tp-grey); font-style: italic; font-size: 14px; }
.tp-meta-note { color: var(--tp-grey-dim); font-size: 13px; }


.tp-roster-arrow { margin-left: auto; color: var(--tp-silver); }   /* chevron drawn by .tp-chev */

/* Gender marker — tiny uppercase tag next to a name. */
.tp-gender {
    font-family: var(--tp-font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.tp-gender--m { background: rgba(31, 44, 104, 0.10); color: var(--tp-navy); }
.tp-gender--f { background: rgba(200, 40, 44, 0.12); color: var(--tp-red); }

/* Skill tier badge. */
.tp-tier {
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Rated tiers share one neutral style — strength is shown by the label, not colour.
   Unrated stays visually distinct (dashed outline) so it reads as a to-do. */
.tp-tier--strong,
.tp-tier--solid,
.tp-tier--developing { background: var(--tp-cream-high); color: var(--tp-grey-dim); }
.tp-tier--none       { background: transparent; color: var(--tp-grey); border: 1px dashed var(--tp-light-grey); }

/* Status badge (past matches): recorded/played vs. not-yet — mirrors the tier-pill shape. */
.tp-status {
    align-self: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.tp-status--done { background: var(--tp-green); color: var(--tp-navy); }
.tp-status--todo { background: transparent; color: var(--tp-grey); border: 1px dashed var(--tp-light-grey); }

/* Opponent line on a match row — lighter than the date it follows. */
.tp-match-opp { color: var(--tp-grey-dim); font-weight: 600; }

/* Add-a-match form: a stack of labelled fields. */
.tp-match-add { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tp-field { display: flex; flex-direction: column; gap: 4px; }
.tp-field-label { font-size: 14px; font-weight: 700; color: var(--tp-grey-dim); }

.tp-input {
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--tp-r-button);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-navy);
    font-family: var(--tp-font-body);
    font-size: 16px;
}

/* Lineup editor: the two slot dropdowns stacked under each line, one Save at the foot. */
.tp-slot-list { display: flex; flex-direction: column; gap: 8px; }
.tp-slot-list .tp-select { width: 100%; }
.tp-save-lineup { width: 100%; margin-top: 4px; }

/* ═══════════════════════════════════════ Captain — player edit ═══════════════════════════════ */

.tp-edit-sec {
    background: var(--tp-white);
    border: 1px solid var(--tp-light-grey);
    border-radius: var(--tp-r-cell);
    padding: 16px;
    margin-bottom: 14px;
}

.tp-edit-h {
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tp-navy);
    margin: 0 0 4px;
}

.tp-edit-hint { color: var(--tp-grey-dim); font-size: 14px; margin: 0 0 12px; }

/* Segmented control (tier chips): a row of tappable outline pills. */
.tp-seg-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-seg-group form { margin: 0; }

.tp-seg {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--tp-r-button);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-grey-dim);
    font-family: var(--tp-font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.tp-seg:active { transform: translateY(1px); }
.tp-seg.is-on { background: var(--tp-navy); border-color: var(--tp-navy); color: var(--tp-cream); }

/* Ranked list: a numbered, ordered row with up / down / remove controls. */
.tp-rank-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tp-rank-list:empty { margin-bottom: 0; }

.tp-rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--tp-cream);
    border: 1px solid var(--tp-cream-high);
    border-radius: var(--tp-r-chip);
}

.tp-rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tp-navy);
    color: var(--tp-cream);
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 15px;
}

.tp-rank-label { flex: 1; font-size: 16px; font-weight: 600; }

.tp-rank-actions { display: flex; gap: 6px; }
.tp-rank-actions form { margin: 0; }

.tp-rank-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tp-r-chip);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-navy);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.tp-rank-btn:active { transform: translateY(1px); }
.tp-rank-btn:disabled { opacity: 0.35; cursor: default; }
.tp-rank-btn--rm { color: var(--tp-red); border-color: rgba(200, 40, 44, 0.35); }

/* Add row: native select + Add button. */
.tp-add { display: flex; gap: 8px; margin: 0; }
.tp-add .tp-input { flex: 1; }

.tp-select {
    flex: 1;
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--tp-r-button);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-navy);
    font-family: var(--tp-font-body);
    font-size: 16px;
}

.tp-add-btn {
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--tp-r-button);
    border: 0;
    background: var(--tp-navy);
    color: var(--tp-cream);
    font-family: var(--tp-font-display);
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

/* Notes editor. */
.tp-notes-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }

.tp-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--tp-r-cell);
    border: 2px solid var(--tp-light-grey);
    background: var(--tp-white);
    color: var(--tp-navy);
    font-family: var(--tp-font-body);
    font-size: 16px;
    resize: vertical;
}

.tp-notes-save { align-self: flex-start; min-height: 48px; font-size: 16px; }

/* ═══════════════════════════════════════ Dashboard reminder ═══════════════════════════════════════ */

.tp-remind { display: flex; flex-direction: column; }
.tp-remind-await { margin-top: 0; display: flex; align-items: center; gap: 8px; color: var(--tp-red); font-weight: 700; }
.tp-remind-await-ico { width: 22px; height: 22px; flex-shrink: 0; }
.tp-remind-text { margin-bottom: 12px; }
.tp-remind-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tp-remind-done { margin: 0; font-weight: 600; }

/* ═══════════════════════════════════════ Reduced motion ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .tp-ball, .tp-ball-rot, .tp-loader-shadow { animation: none; }
}