/* Athlete pages (/athletes/{slug}, its edit page, claims and the dashboard): the public pages' look (landing.css),
   with a photo in the header, stat tiles and the results tables of the results pages. */

.ath-hero__inner { padding-bottom: 88px; }
.ath-hero__photo { width: 128px; height: 128px; margin-bottom: 20px; border: 4px solid rgba(255, 255, 255, 0.85); font-size: 40px; }
.ath-hero__name { overflow-wrap: anywhere; }
.ath-hero__facts { max-width: 720px; margin-top: 16px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; color: var(--ag-on-deep); overflow-wrap: anywhere; }
.ath-hero__fact { white-space: nowrap; }
@media (max-width: 360px) { .ath-hero__fact { white-space: normal; } }
.ath-hero__actions { margin-top: 24px; }
@media (max-width: 640px) {
    .ath-hero__inner { padding-bottom: 56px; }
    .ath-hero__photo { width: 104px; height: 104px; font-size: 32px; }
}

.ath-page { padding-bottom: 72px; }
.ath-page .ag-results__subtitle:first-child { margin-top: 0; }
.ath-notice { margin-bottom: 24px; }

.ath-about { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 760px; margin-bottom: 8px; }
.ath-about__bio { font-size: 18px; line-height: 1.6; color: var(--ag-text); white-space: pre-line; overflow-wrap: anywhere; }
.ath-about__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--ag-cyan-ink); }

.ath-empty { margin-top: 8px; }

/* Stat tiles: four across on wide screens, two on phones; the value never wraps */
.ath-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ath-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--ag-line); border-radius: 16px; background: #FFFFFF; }
.ath-stat dt { font-size: 14px; font-weight: 700; color: var(--ag-muted); }
.ath-stat dd { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ath-stat__value { font-family: var(--ag-font-display); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ag-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ath-stat__note { font-size: 13px; color: var(--ag-muted); overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .ath-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .ath-stat { padding: 12px; }
    .ath-stat__value { font-size: 22px; }
}

.ath-tag { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--ag-tint-2); color: var(--ag-deep); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ath-tag--live { background: #FEE4E2; color: #912018; }

.ath-waves { display: block; margin-top: 2px; font-size: 13px; color: var(--ag-muted); font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.ath-more { margin-top: 12px; }
.ath-fine { margin-top: 32px; font-size: 14px; color: var(--ag-muted); }

/* The results tables keep event names readable on phones: the name wraps, the numbers do not */
.ath-page .ag-table td:first-child { overflow-wrap: anywhere; }

/* Edit page */
.ath-edit { max-width: 760px; margin: 0 auto; }
.ath-edit .ag-form-card { display: flex; flex-direction: column; gap: 20px; }
.ath-edit .ag-form-card + .ag-form-card { margin-top: 24px; }
.ath-edit > * + * { margin-top: 24px; }
.ath-edit > .ath-notice + * { margin-top: 0; }
.ath-edit__title { margin-bottom: -12px; font-family: var(--ag-font-display); font-size: 22px; font-weight: 600; color: var(--ag-ink); }
.ath-edit__lead { color: var(--ag-text); }
.ath-edit__photo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ath-edit__photo .ag-avatar { width: 96px; height: 96px; }
.ath-edit__check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 16px; }
.ath-edit__check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex-shrink: 0; }
.ath-edit__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ath-edit__history { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ath-edit__history li { padding-bottom: 10px; border-bottom: 1px solid var(--ag-line-2); font-size: 15px; color: var(--ag-text); overflow-wrap: anywhere; }
.ath-edit__history li:last-child { border-bottom: 0; }
.ath-edit__when { display: block; font-size: 13px; color: var(--ag-muted); }
.ath-edit__legend { float: none; width: auto; margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 700; }
.ath-edit fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ath-manager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Enter an event */
.ath-enter__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ath-enter__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--ag-line-2); }
.ath-enter__row:last-child { border-bottom: 0; }
.ath-enter__name { font-weight: 700; color: var(--ag-ink); overflow-wrap: anywhere; }

/* My events: athlete page requests (organizer pages, app.css look) */
.ath-claims__list { display: flex; flex-direction: column; gap: 12px; }
.ath-claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 18px; }
.ath-claim__text { min-width: 0; overflow-wrap: anywhere; }
.ath-claim__meta, .ath-claim__note { display: block; margin-top: 2px; font-size: 14px; color: var(--ag-muted); }
.ath-claim__note { font-style: italic; color: var(--ag-text); }
.ath-claim__actions { display: flex; gap: 8px; }
.ath-claim__status { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 600; color: var(--ag-cyan-ink); }
.ath-claim__status:empty { display: none; }
/* Sign-ups to check (same name, another contact): the choice of where the entry moves */
.ath-check__move { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--ag-line); border-radius: 12px; }
.ath-check__move legend { float: none; width: auto; margin: 0 0 2px; padding: 0; font-size: 14px; font-weight: 700; }
.ath-check__choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; overflow-wrap: anywhere; }
.ath-check__choice input { flex: none; }
.ath-check__choice .ath-claim__meta { display: inline; margin: 0; }
.ath-check__move .ath-claim__actions { margin-top: 4px; }
.ath-check__first[hidden], .ath-check__move[hidden] { display: none; }
@media (max-width: 640px) {
    .ath-claim { grid-template-columns: minmax(0, 1fr); }
    .ath-claim__actions .btn { flex: 1; min-height: 44px; }
}

/* Private stats: one series per chart in the brand cyan (validated on white), thin marks, recessive grid */
.ath-dash__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ath-dash__empty { color: var(--ag-text); }
.ath-chart { max-width: 640px; margin: 0; padding: 16px; border: 1px solid var(--ag-line); border-radius: 16px; background: #FFFFFF; }
.ath-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ath-chart__grid { stroke: var(--ag-line-2); stroke-width: 1; }
.ath-chart__axis { fill: var(--ag-muted); font-size: 13px; font-family: var(--ag-font-body); }
.ath-chart__line { fill: none; stroke: var(--ag-cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ath-chart__dot { fill: var(--ag-cyan); stroke: #FFFFFF; stroke-width: 2; cursor: pointer; }
.ath-chart__dot:hover, .ath-chart__dot:focus-visible { r: 7; outline: none; }
.ath-chart__caption { margin-top: 8px; font-size: 14px; color: var(--ag-muted); }
.ath-dash__pair { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .ath-dash__pair { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.ath-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ath-bars__row { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) 36px; align-items: center; gap: 10px; }
.ath-bars__label { font-size: 15px; font-weight: 700; color: var(--ag-ink); }
.ath-bars__label small { display: block; font-size: 12px; font-weight: 500; color: var(--ag-muted); }
.ath-bars__track { height: 14px; border-radius: 4px; background: var(--ag-tint); overflow: hidden; }
.ath-bars__fill { display: block; height: 100%; min-width: 0; border-radius: 4px; background: var(--ag-cyan); }
.ath-bars__value { text-align: right; font-weight: 700; color: var(--ag-ink); font-variant-numeric: tabular-nums; }
.ath-dash__calls { margin-top: 32px; }
.ath-judges { margin-bottom: 10px; border: 1px solid var(--ag-line); border-radius: 16px; background: #FFFFFF; }
.ath-judges summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-height: 52px; padding: 12px 16px; cursor: pointer; overflow-wrap: anywhere; }
.ath-judges__total { margin-left: auto; font-weight: 700; color: var(--ag-ink); white-space: nowrap; }
.ath-judges .ag-table-wrap { margin: 0 12px 12px; }

@media (max-width: 640px) {
    .ath-judges .ag-table th, .ath-judges .ag-table td { padding: 10px 8px; }
    .ath-judges .ag-table th { white-space: normal; }
    .ath-judges .ag-table-wrap { margin: 0 8px 8px; }
}

/* Find a surfer */
.ath-search { max-width: 640px; margin-bottom: 28px; }
.ath-search__row { display: flex; gap: 10px; }
.ath-search__row input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--ag-line); border-radius: 12px; font: inherit; font-size: 16px; color: var(--ag-ink); }
.ath-search__row input:focus { outline: none; border-color: var(--ag-cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25); }
.ath-search__row .ag-btn { min-height: 52px; }

/* My athletes */
.ath-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ath-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--ag-line); border-radius: 20px; background: #FFFFFF; }
.ath-card__photo { width: 64px; height: 64px; flex-shrink: 0; font-size: 22px; }
.ath-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ath-card__name { font-family: var(--ag-font-display); font-size: 19px; font-weight: 600; color: var(--ag-ink); overflow-wrap: anywhere; }
.ath-card__meta { font-size: 14px; color: var(--ag-muted); }
.ath-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ath-edit__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ath-edit__three > .ag-field { min-width: 0; }
@media (max-width: 640px) {
    .ath-edit .ag-form-card { padding: 20px 16px; border-radius: 20px; }
    .ath-edit__three { grid-template-columns: minmax(0, 1fr); }
}

/* Circuits: the note for a circuit only admins see, its description, the division links, the verified mark */
.ath-note { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: #F4FAFB; color: var(--ag-text); font-size: 15px; }
.ath-circuit__about { max-width: 65ch; margin: 0 0 20px; color: var(--ag-text); }
.ath-circuit__divisions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ath-circuit__divisions a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--ag-line); border-radius: 999px; background: #FFFFFF; color: var(--ag-cyan-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.ath-circuit__divisions a:hover { border-color: var(--ag-cyan); }
.ath-verified__icon { flex: none; width: 16px; height: 16px; margin-left: 6px; color: var(--ag-cyan); vertical-align: -3px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.ath-circuit__admin { margin: 28px 0 0; }

/* Admin, Circuits */
.adm-circuits__card { padding: 20px; }
.adm-circuits__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; }
.adm-circuits__form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.adm-circuits__list { display: flex; flex-direction: column; gap: 8px; }
.adm-circuits__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; }
.adm-circuits__row--plain { padding: 10px 0; border-bottom: 1px solid var(--ag-line, #D6E6EA); }
.adm-circuits__row-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.adm-circuits__row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.adm-circuits__search { max-width: 640px; }
.adm-circuits__search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-circuits__search-row .form-control, .adm-circuits__search-row .form-select { flex: 1 1 240px; min-width: 0; }
@media (max-width: 767.98px) { .adm-circuits__row-actions .btn, .adm-circuits__search-row .btn { min-height: 40px; } }

/* Private stats: notes under a heat (seen only by the people who manage the page) */
.ath-notes { display: flex; flex-direction: column; gap: 12px; margin: 4px 16px 16px; padding-top: 16px; border-top: 1px solid var(--ag-line); min-width: 0; }
.ath-notes__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--ag-ink); }
.ath-notes__count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #E6F4F7; color: var(--ag-cyan-ink); font-size: 13px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ath-notes__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ath-note-item { padding: 12px 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: #FFFFFF; min-width: 0; }
.ath-note-item__meta { margin: 0 0 4px; font-size: 13px; color: var(--ag-muted); }
.ath-note-item__about { font-weight: 700; color: var(--ag-ink); }
.ath-note-item__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ag-text); }
.ath-note-item__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; margin-top: 8px; font-size: 14px; }
.ath-note-item__edit[open] { flex: 1 1 100%; order: 2; }
.ath-judges .ath-note-item__edit summary { display: inline-block; min-height: 0; padding: 0; cursor: pointer; color: var(--ag-cyan-ink); font-weight: 600; }
.ath-note-item__edit[open] summary { margin-bottom: 8px; }
.ath-note-item__delete { padding: 0; border: 0; background: none; color: #B42318; font-weight: 600; cursor: pointer; }
.ath-note-item__delete:hover, .ath-note-item__edit summary:hover { text-decoration: underline; }
.ath-notes__form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ath-notes__form textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--ag-line); border-radius: 12px; font: inherit; font-size: 15px; resize: vertical; }
.ath-notes__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ath-notes__row select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--ag-line); border-radius: 10px; background: #FFFFFF; font: inherit; font-weight: 400; max-width: 100%; }
@media (max-width: 640px) { .ath-notes__form .ag-btn { width: 100%; min-height: 44px; justify-content: center; } }