/* The team hub. */

.error-view:focus { outline: none; }

.error-view__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* --- The stat row ------------------------------------------------------- */

/*
 * The numbers the team came here for, set at hero scale and bracketed by the
 * page's heavy rule. Only what the hub can actually answer: the total, and
 * how many people can still run. A placing would need the whole field, which
 * this page deliberately does not fetch.
 */
.stat-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 48px;
    margin-top: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-text);
}

.stat__value {
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 0.86;
    font-variant-numeric: tabular-nums;
}
.stat__value--accent { color: var(--color-accent); }

.stat__label {
    font-size: 0.63rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.hub-controls {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.hub-controls__note {
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pending-name-note {
    margin-top: var(--space-3);
    font-size: 0.8rem;
    color: var(--color-warning);
}

/* --- Editing ------------------------------------------------------------ */

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid var(--color-text);
}

.edit-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.edit-form__saved {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-size: 0.8rem;
}

/* Two informational boxes closing the page, as in the handoff. */
.hub-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 64px;
}

.hub-note {
    border: 1px solid var(--color-border);
    padding: 28px;
}
.hub-note__title { font-size: 1.5rem; margin-bottom: 14px; }
.hub-note p {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

@media (max-width: 780px) {
    .hub-notes { grid-template-columns: minmax(0, 1fr); }
    .stat-row { gap: 32px; }
}

@media (max-width: 480px) {
    .error-view__actions .button,
    .edit-form__actions .button { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * The colour and pattern picker
 *
 * The tint and the pattern drawings themselves are in global.css, shared with
 * the leaderboard's cards — what is here is only the picker's layout.
 * ------------------------------------------------------------------------ */

.appearance {
    display: grid;
    gap: var(--space-5);
}

.appearance__preview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-1);
    min-height: 8rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--team-band);
    overflow: hidden;
}

.appearance__preview-name,
.appearance__preview-note {
    position: relative;
    overflow-wrap: anywhere;
}

.appearance__preview-name {
    font-family: var(--font-serif);
    font-size: 1.75rem;
}

.appearance__preview-note {
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--team-ink);
}

.appearance__group {
    margin: 0;
    padding: 0;
    border: 0;
}

.appearance__legend {
    padding: 0;
    margin-bottom: var(--space-3);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.appearance__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.appearance__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
}

/*
 * The radio itself is the accessible control and must stay focusable, so it is
 * moved out of sight rather than removed: display:none would take it out of
 * the tab order and out of the group entirely.
 */
.appearance__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.appearance__chip {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid rgba(35, 43, 28, 0.15);
    overflow: hidden;
}

/*
 * A colour chip is the colour, not a card in miniature: the card's tint is far
 * too pale to tell twelve of them apart at this size, so the chip is the band
 * colour over it — the strongest thing the card shows of the hue.
 */
.appearance__chip[data-pattern="none"] {
    background: linear-gradient(160deg, var(--team-band), var(--tint-bottom));
}

.appearance__label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.appearance__option:has(.appearance__input:checked) {
    border-color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-text);
}

.appearance__option:has(.appearance__input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.appearance__option:has(.appearance__input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Finding a team ----------------------------------------------------- */

/* The search bar behind the nav's Team hub entry. Composes global.css's form
   primitives; only the layout of the row and the result list lives here. */

.search-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.search-form__field { flex: 1 1 auto; }

.search-status {
    min-height: 1.4em;
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.search-results {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.search-results__item { border-top: 1px solid var(--color-border); }
.search-results__item:last-child { border-bottom: 1px solid var(--color-border); }

/* A whole row is the target: this is used one-handed, standing up. */
.search-results__button {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    text-align: left;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.search-results__button:hover { color: var(--color-accent); }
.search-results__button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.search-again { margin-top: var(--space-3); }

@media (max-width: 540px) {
    .search-form { flex-direction: column; align-items: stretch; }
}