/* Team Coach design system: modelled on iOS system styles, shared by the iOS app and the website. Cards are frosted
   glass floating on a soft blue-grey wash, kept mostly opaque so text stays as clear as on plain white. */

:root {
    color-scheme: light dark;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --accent: #007AFF;
    --accent-tint: rgba(0, 122, 255, 0.12);
    --red: #FF3B30;
    --red-tint: rgba(255, 59, 48, 0.1);

    --bg: #E9EEF4;
    --bg-elevated: #FFFFFF;
    --label: #0F1A2A;
    --label-2: rgba(38, 50, 70, 0.72);
    --label-3: rgba(38, 50, 70, 0.38);
    --separator: rgba(38, 50, 70, 0.18);
    --pressed: rgba(15, 26, 42, 0.06);
    --fill: rgba(110, 125, 150, 0.14);
    --bar: rgba(255, 255, 255, 0.66);
    --tab-inactive: #7C8798;
    --alert-bg: rgba(244, 247, 251, 0.9);

    /* The page behind everything: a pale wash with two soft patches of mist, so the glass has something to show. */
    --page:
        radial-gradient(55vmax 40vmax at 10% 6%, rgba(255, 255, 255, 0.95), transparent 70%),
        radial-gradient(45vmax 40vmax at 98% 62%, rgba(150, 182, 220, 0.7), transparent 70%),
        radial-gradient(40vmax 35vmax at 20% 95%, rgba(196, 210, 236, 0.75), transparent 70%),
        linear-gradient(165deg, #EEF2F7 0%, #D8E2EE 55%, #E3EAF3 100%);
    --glass: rgba(255, 255, 255, 0.55);
    --glass-blur: saturate(170%) blur(22px);
    --glass-shadow: 0 1px 3px rgba(31, 45, 70, 0.07), 0 12px 32px rgba(31, 45, 70, 0.12);
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #0A84FF;
        --accent-tint: rgba(10, 132, 255, 0.18);
        --red: #FF453A;
        --red-tint: rgba(255, 69, 58, 0.16);

        --bg: #0E141C;
        --bg-elevated: #1C232D;
        --label: #FFFFFF;
        --label-2: rgba(230, 236, 245, 0.72);
        --label-3: rgba(230, 236, 245, 0.32);
        --separator: rgba(160, 175, 195, 0.22);
        --pressed: rgba(255, 255, 255, 0.08);
        --fill: rgba(130, 145, 170, 0.24);
        --bar: rgba(30, 38, 50, 0.62);
        --tab-inactive: #8D97A6;
        --alert-bg: rgba(36, 44, 56, 0.92);

        --page:
            radial-gradient(55vmax 40vmax at 10% 6%, rgba(80, 110, 150, 0.45), transparent 70%),
            radial-gradient(45vmax 40vmax at 98% 62%, rgba(40, 80, 130, 0.5), transparent 70%),
            radial-gradient(40vmax 35vmax at 20% 95%, rgba(70, 60, 120, 0.35), transparent 70%),
            linear-gradient(165deg, #121A24 0%, #0C1118 60%, #111821 100%);
        --glass: rgba(40, 50, 64, 0.5);
        --glass-blur: saturate(160%) blur(22px);
        --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
    }
}

/* ---------- Base ---------- */

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

/* 17px is the iOS body size. Everything else is sized in rem so it scales together. */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }

/* On iPhone, follow the user's Settings > Display > Text Size (Dynamic Type). */
@supports (-webkit-touch-callout: none) {
    html { font: -apple-system-body; }
}

body {
    margin: 0;
    font-family: var(--font);
    line-height: 1.3;
    background: var(--bg);
    color: var(--label);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

/* The wash sits fixed behind every screen, so it doesn't stretch or scroll with long pages. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--page); pointer-events: none; }

/* ---------- Glass ---------- */

/* Cards: frosted glass. See-through, with the wash blurred behind, and a soft shadow lifting them off the page: no
   border, and no lines between the rows inside. Text stays at full strength, so it reads as well as on plain white. */
.group, .calendar, .info-box, .pay-summary, .stat-card, .course-map-thumb, .action-sheet-cancel, .choice-card, .chat-bubble {
    background: var(--glass);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

input { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
h1:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Screens ---------- */

.screen {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    padding:
        env(safe-area-inset-top)
        max(16px, env(safe-area-inset-right))
        calc(env(safe-area-inset-bottom) + 24px)
        max(16px, env(safe-area-inset-left));
}

.screen.push { animation: push 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes push {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: none; }
}

.nav-bar { display: flex; align-items: center; min-height: 44px; margin-left: -8px; }

.nav-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 8px 0 0;
    font-size: 1rem;
}

.nav-back:active { opacity: 0.5; }
button.nav-back { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }

.nav-trailing { margin-left: auto; display: flex; align-items: center; }
.nav-trailing .nav-text { display: inline-flex; align-items: center; text-decoration: none; }

.large-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 12px 0 8px;
}

.eyebrow {
    margin: 20px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--label-2);
}

.eyebrow + .large-title { margin-top: 2px; }

/* Top-level screens have no back button, so leave the space iOS gives a large title. */
.screen > .large-title:first-child { margin-top: 48px; }
.screen > .eyebrow:first-child { margin-top: 40px; }

.subtitle { margin: 0 0 24px; color: var(--label-2); }

.section-header {
    margin: 28px 0 0;
    padding: 0 16px 8px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--label-2);
}

/* ---------- Grouped lists (like iOS Settings) ---------- */

.group {
    border-radius: 16px;
    overflow: hidden;
}

.group.spaced { margin-top: 32px; }

.group-footer {
    margin: 0;
    padding: 8px 16px 0;
    font-size: 0.875rem;
    color: var(--label-2);
}

.row, .field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--label);
    text-align: left;
    font-size: 1rem;
}


a.row:active, button.row:active { background: var(--pressed); }

.row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 0; min-width: 0; }
.row-title { overflow-wrap: anywhere; }
.row-subtitle { font-size: 0.875rem; color: var(--label-2); overflow-wrap: anywhere; }
/* At most a little over half the row, wrapping if need be, so a long email address can't squeeze out its label. */
.row-value { color: var(--label-2); text-align: right; min-width: 0; max-width: 58%; overflow-wrap: anywhere; }
.row-value.accent { color: var(--accent); }
.nav-done { margin-left: auto; font-weight: 600; }
.chevron { display: flex; color: var(--label-3); }

.row.destructive { justify-content: center; color: var(--red); }

.tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #FFFFFF;
}

.tile.photo { display: block; object-fit: cover; background: var(--fill); }
.tile.blue { background: #007AFF; }
.tile.green { background: #34C759; }
.tile.orange { background: #FF9500; }
.tile.purple { background: #AF52DE; }

.avatar.small { width: 40px; height: 40px; font-size: 0.95rem; }

.coach-option:disabled { cursor: default; }

.avatar.invited { background: var(--fill); color: var(--label-2); }
.action-row { color: var(--accent); }
.action-row .row-title { color: var(--accent); }
.action-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.row-action { color: var(--accent); font-weight: 500; }

.group-bio { margin: 0 0 20px; white-space: pre-line; }

.field-stacked { display: block; padding: 0 16px; }
.field textarea {
    display: block;
    width: 100%;
    min-height: 110px;
    padding: 14px 0;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: var(--label);
    font: inherit;
    font-size: max(1rem, 16px);
    line-height: 1.4;
}
.field textarea::placeholder { color: var(--label-3); }

.text-button {
    flex: none;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 1rem;
}
.text-button.destructive { color: var(--red); }
.text-button:disabled { opacity: 0.4; }

.error-message.spaced { margin-top: 24px; }
.status-text { color: var(--label); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
button.row:disabled { opacity: 0.5; }

.success-message {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(52, 199, 89, 0.14);
    color: #1E7D34;
    font-size: 0.94rem;
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .success-message { color: #4CD964; background: rgba(48, 209, 88, 0.18); }
}

.tick {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--label-3);
    border-radius: 50%;
    color: transparent;
    font-size: 0.9rem;
    font-weight: 700;
}

.tick.on { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.coach-option:disabled .tick.on { opacity: 0.55; }

.profile { gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.profile-name { font-size: 1.25rem; font-weight: 600; }

.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #A5ABB8, #848993);
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Profile photos fill the circle, cropped to fit. */
.avatar.photo { display: block; position: relative; overflow: hidden; background: var(--fill); clip-path: circle(50% at 50% 50%); }
.avatar.photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.avatar.large { width: 76px; height: 76px; font-size: 1.75rem; }
.avatar-button { position: relative; flex: none; cursor: pointer; border-radius: 50%; }
.avatar-button:active { opacity: 0.6; }
.avatar-busy { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
label.action-row { cursor: pointer; }
label.action-row.disabled { opacity: 0.5; pointer-events: none; }
.destructive-row .row-title { color: var(--red); }

/* ---------- Form fields ---------- */

.field-label { flex: 0 0 5.4em; }

.field input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: max(1rem, 16px); /* 16px+ stops iOS zooming in when a field is tapped */
    caret-color: var(--accent);
}

.field input::placeholder { color: var(--label-3); }

.field-button { cursor: pointer; }
.field-button:active { background: var(--pressed); }
.field-value { flex: 1; min-width: 0; padding: 14px 0; text-align: left; }
.field-value.placeholder { color: var(--label-3); }

.field-action {
    flex: none;
    padding: 10px 0 10px 8px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 1rem;
}

.error-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--red-tint);
    color: var(--red);
    font-size: 0.94rem;
    font-weight: 500;
}

.error-message svg { flex: none; }

/* ---------- Buttons ---------- */

.form-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.button:active { opacity: 0.7; }
.button:disabled { opacity: 0.45; cursor: default; }

.button-primary { background: var(--accent); color: #FFFFFF; }
.button-secondary { background: var(--accent-tint); color: var(--accent); }
.button-destructive { background: var(--red); color: #FFFFFF; }
.button-plain { background: none; color: var(--accent); font-weight: 400; }

.footer-prompt { margin: 24px 0 0; text-align: center; color: var(--label-2); }
.footer-prompt a { font-weight: 500; }

/* ---------- Sheets and search (club picker) ---------- */

.sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow-y: auto;
    background-color: var(--bg); background-image: var(--page); background-attachment: fixed;
    animation: slide-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } }

.nav-text {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 1rem;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    margin: 4px 0 20px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--fill);
    color: var(--label-2);
}

.search-field input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--label);
    font-size: max(1rem, 16px);
}

.search-field input::placeholder { color: var(--label-2); }

/* iOS-style on/off switch. */
.switch {
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--fill);
    transition: background 0.2s;
}
.switch.on { background: #34C759; }
.switch:disabled { opacity: 0.6; }
.switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}
.switch.on .switch-knob { transform: translateX(20px); }

@media (prefers-reduced-motion: reduce) {
    .switch, .switch-knob { transition: none; }
}

/* Filter chips: a row of pill buttons that scrolls sideways if it doesn't fit. */
.chips {
    display: flex;
    gap: 8px;
    margin: -8px -16px 16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 22px;
    background: var(--fill);
    color: var(--label);
    font-size: 0.94rem;
    font-weight: 500;
    white-space: nowrap;
}
.chip.on { background: var(--accent); color: #FFFFFF; }
.chip:active { opacity: 0.7; }
.group.hidden { display: none; }

.picker-hint { margin: 8px 16px; color: var(--label-2); }
.picker-footer { margin-top: 20px; }
.check { color: var(--accent); font-size: 1.2rem; font-weight: 600; }
.loading-inline { display: grid; place-items: center; padding: 40px 0; }
.empty-state.compact { padding-top: 24px; }

/* ---------- Welcome ---------- */

.welcome { display: flex; flex-direction: column; }

.welcome-notice { margin: 24px 0 0; text-align: center; }
.welcome-hero { padding-top: 8vh; text-align: center; }

.app-icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    border-radius: 22px;
    background: linear-gradient(160deg, #47A1FF, #0062E0);
    color: #FFFFFF;
    box-shadow: 0 10px 28px rgba(0, 98, 224, 0.3);
}

.welcome-title {
    margin: 0 0 40px;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.accent-text { color: var(--accent); }

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
}

.feature-list li { display: flex; align-items: flex-start; gap: 18px; }
.feature-list svg { flex: none; margin-top: 2px; color: var(--accent); }
.feature-list strong { display: block; margin-bottom: 2px; font-weight: 600; }
.feature-list p { margin: 0; font-size: 0.94rem; color: var(--label-2); }

.invite-text { margin: 0 8px; text-align: center; color: var(--label-2); }

.notice-message {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--fill);
    font-size: 0.94rem;
    text-align: center;
}
.invite-text strong { color: var(--label); font-weight: 600; }

.welcome-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 40px; }

/* ---------- Empty states ---------- */

.empty-state { padding: 14vh 24px 0; text-align: center; color: var(--label-2); }
.empty-state svg { color: var(--label-3); }
.empty-state h2 { margin: 16px 0 6px; font-size: 1.3rem; font-weight: 700; color: var(--label); }
.empty-state p { max-width: 22em; margin: 0 auto; }

/* ---------- Menu bar: a pill floating at the top, and the menu it opens ---------- */

.tab-content:not(.full-screen) .screen { padding-top: calc(env(safe-area-inset-top) + 72px); }

.menu-bar {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 8px);
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100vw - 16px);
    padding: 4px;
    border-radius: 32px;
    background: var(--bar);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}

.menu-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 64px;
    height: 52px;
    padding: 0 8px;
    border: 0;
    border-radius: 26px;
    background: none;
    color: var(--label-2);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.menu-bar-item:active { background: var(--pressed); }
.menu-bar-item.active { background: var(--accent-tint); color: var(--accent); }
.menu-bar-item .bell-count { top: 0; right: 6px; }
.menu-bar .bell { width: 52px; height: 52px; border-radius: 26px; }
.menu-dot {
    position: absolute; top: 6px; right: 16px; width: 10px; height: 10px; border-radius: 5px;
    background: var(--red); box-shadow: 0 0 0 2px var(--bar);
}

.menu-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.35); animation: fade-in 0.2s; }

.menu-sheet {
    position: fixed;
    z-index: 61;
    top: calc(env(safe-area-inset-top) + 8px);
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-width: 600px;
    margin: 0 auto;
    overflow-y: auto;
    padding: 8px 16px 24px;
    border-radius: 28px;
    background: var(--alert-bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: saturate(160%) blur(30px);
    backdrop-filter: saturate(160%) blur(30px);
    animation: menu-drop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes menu-drop { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }

/* Laptops and iPads: the bar becomes an icon rail down the left, and the menu opens beside it. Screens stay centred
   in their 600px column, which leaves room for the rail from this width up. */
@media (min-width: 900px) {
    .tab-content:not(.full-screen) .screen { padding-top: calc(env(safe-area-inset-top) + 16px); }
    .menu-bar {
        top: calc(env(safe-area-inset-top) + 24px);
        left: max(24px, env(safe-area-inset-left));
        transform: none;
        flex-direction: column;
        gap: 6px;
        max-width: none;
        padding: 8px;
        border-radius: 28px;
    }
    .menu-bar-item { min-width: 0; width: 68px; height: 60px; border-radius: 20px; }
    .menu-bar .bell { width: 68px; height: 56px; border-radius: 20px; }
    .menu-sheet {
        top: calc(env(safe-area-inset-top) + 24px);
        bottom: 24px;
        left: calc(max(24px, env(safe-area-inset-left)) + 100px);
        right: auto;
        width: 420px;
        margin: 0;
        animation-name: menu-slide;
    }
    @keyframes menu-slide { from { opacity: 0; transform: translateX(-12px) scale(0.98); } }
}

.menu-sheet-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-right: -8px; }
.menu-title { margin: 0; font-size: 2rem; font-weight: 700; }
.menu-hint { margin: 0 0 16px; color: var(--label-2); font-size: 0.9rem; }

.menu-row { padding: 0; }
.menu-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    min-width: 0;
    padding: 8px 0 8px 16px;
    color: var(--label);
    text-decoration: none;
}
.menu-icon {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    background: var(--accent-tint); color: var(--accent);
}
.menu-count {
    flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--red); color: #FFFFFF; font-size: 0.8rem; font-weight: 700; line-height: 22px; text-align: center;
}
.menu-pin {
    flex: none; display: grid; place-items: center; width: 52px; min-height: 56px; border: 0; background: none;
    color: var(--label-3);
}
.menu-pin.on { color: #FF9F0A; }
.menu-pin:active { background: var(--pressed); }

/* ---------- Alerts ---------- */

.alert-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.4);
    animation: fade-in 0.2s;
}

.alert {
    width: min(300px, 100%);
    overflow: hidden;
    border-radius: 14px;
    background: var(--alert-bg);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    text-align: center;
    animation: pop-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.alert-body { padding: 20px 16px 18px; }
.alert-title { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.alert-message { margin: 0; font-size: 0.875rem; }

.alert-buttons { display: flex; border-top: 0.5px solid var(--separator); }

.alert-buttons button {
    flex: 1;
    min-height: 50px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 1rem;
}

.alert-buttons button + button { border-left: 0.5px solid var(--separator); }
.alert-buttons button:active { background: var(--pressed); }
.alert-buttons .preferred { font-weight: 600; }
.alert-buttons .destructive { color: var(--red); }

/* An action sheet, like iOS: choices in a card at the bottom of the screen, with Cancel on its own beneath. */
.action-sheet-backdrop {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.4); animation: fade-in 0.2s;
}
.action-sheet { width: min(420px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; animation: slide-up 0.25s ease-out; }
.action-sheet-group { overflow: hidden; border-radius: 14px; background: var(--alert-bg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.action-sheet-header { padding: 14px 16px 12px; text-align: center; border-bottom: 0.5px solid var(--separator); }
.action-sheet-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--label-2); }
.action-sheet-message { margin: 2px 0 0; font-size: 0.875rem; color: var(--label-2); }
.action-sheet-button {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px;
    border: 0; background: none; color: var(--accent); font: inherit; font-size: 1.2rem; text-decoration: none; cursor: pointer;
}
.action-sheet-group .action-sheet-button + .action-sheet-button { border-top: 0.5px solid var(--separator); }
.action-sheet-button:active { background: var(--pressed); }
.action-sheet-cancel { border-radius: 14px; font-weight: 600; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-up { from { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
    .screen.push, .sheet, .alert-backdrop, .alert, .action-sheet-backdrop, .action-sheet, .menu-backdrop, .menu-sheet { animation: none; }
}

/* ---------- Loading ---------- */

.loading { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--label-3);
    border-top-color: var(--label-2);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Blazor error banner ---------- */

.blazor-error-boundary { padding: 1rem; background: var(--red); color: #FFFFFF; }
.blazor-error-boundary::after { content: "Something went wrong."; }

/* Calendar: a month grid like the iOS Calendar app, Monday first. */
.month-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; }
.month-name { flex: 1; margin: 0; font-size: 1.25rem; font-weight: 700; }
.month-name { order: -1; }
.month-step {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 22px; background: none; color: var(--accent); cursor: pointer;
}
.month-step:active { background: var(--pressed); }
.month-today { order: -1; margin-right: 4px; }

.calendar { margin: 0 0 8px; padding: 8px 6px; border-radius: 12px; }
.calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-weekday { padding: 4px 0 6px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--label-2); }
.calendar-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 48px; padding: 4px 0; border: 0; background: none; color: var(--label);
    font: inherit; cursor: pointer;
}
.calendar-number {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px;
    font-size: 1.05rem;
}
.calendar-day:active .calendar-number { background: var(--pressed); }
.calendar-day.other-month { color: var(--label-3); }
.calendar-day.today .calendar-number { color: var(--red); font-weight: 700; }
.calendar-day.selected .calendar-number { background: var(--label); color: var(--bg-elevated); font-weight: 700; }
.calendar-day.selected.today .calendar-number { background: var(--red); color: #FFFFFF; }
.calendar-dot { width: 6px; height: 6px; border-radius: 3px; }
.calendar-dot.on { background: var(--accent); }
.calendar-day.other-month .calendar-dot.on { background: var(--label-3); }

/* A small calendar-page tile with the month and day, for races in lists. */
.date-tile {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); line-height: 1.1;
}
.date-tile.past { background: var(--fill); color: var(--label-2); }
.date-tile-month { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.date-tile-day { font-size: 1.15rem; font-weight: 700; }

.badge {
    flex: none; padding: 2px 8px; border-radius: 10px;
    background: #34C759; color: #FFFFFF; font-size: 0.8rem; font-weight: 700;
}
.badge.approve { background: #FF9500; }
.badge.quiet { background: var(--fill); color: var(--label-2); }

/* Segmented control, like iOS: a choice of two or three. */
.segmented { display: flex; gap: 2px; margin: 0 0 8px; padding: 2px; border-radius: 10px; background: var(--fill); }
.segment {
    flex: 1; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 8px;
    background: none; color: var(--label); font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer;
}
.segment.on { background: var(--bg-elevated); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.segmented-footer { margin-bottom: 20px; }

/* Where an athlete stands for a club race. */
.status { flex: none; white-space: nowrap; text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--label-2); }
.status.going { color: #248A3D; }
.status.waiting { color: #C93400; }
.status.declined { color: var(--red); }
@media (prefers-color-scheme: dark) {
    .status.going { color: #30D158; }
    .status.waiting { color: #FF9F0A; }
}
.race-kind { display: inline-block; margin: 0 0 16px; padding: 3px 10px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.race-kind.open { background: var(--fill); color: var(--label-2); }
.button-go { background: #34C759; color: #FFFFFF; }
.button.destructive-text { background: var(--fill); color: var(--red); }

/* Chips that wrap onto more lines instead of scrolling sideways, for choosing races. */
.chips.wrap { flex-wrap: wrap; margin: 0 0 12px; padding: 0; overflow: visible; }
.chip:disabled { opacity: 0.5; cursor: default; }

/* A panel that opens under a row, such as choosing a race for an event. */
.row-panel { padding: 4px 16px 4px 16px; }
.row-panel-hint { margin: 8px 0 10px; color: var(--label-2); font-size: 0.94rem; }
.chevron.down { transform: rotate(90deg); }

/* A unit after a field's value, such as "metres", and a prefix before it, such as "£". */
.field-unit { flex: none; color: var(--label-2); }
.field-prefix { flex: none; margin-right: -6px; color: var(--label); }

/* A personal best's mark, such as 2:14.3, shown clearly at the end of its row. */
.row-value.mark { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.notice-message + .group { margin-top: 16px; }

/* A small label above a set of chips, such as "Running" above the running disciplines. */
.chips-label { margin: 0 0 6px 16px; color: var(--label-2); font-size: 0.85rem; font-weight: 600; }

/* A button that reads as a link inside a sentence, with room to tap. */
.link-button {
    display: inline-block; min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--accent); font: inherit; cursor: pointer;
}

/* A gentle warning that doesn't stop anything, such as a PB over the age-group guidelines. */
.warning-message {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
    background: rgba(255, 149, 0, 0.14); color: #A05A00; font-size: 0.94rem; font-weight: 500;
}
@media (prefers-color-scheme: dark) {
    .warning-message { background: rgba(255, 159, 10, 0.2); color: #FFB340; }
}

/* The group's name at the top of Home, which opens the group switcher. */
.group-switch {
    display: inline-flex; align-items: flex-end; gap: 6px; max-width: 100%; margin: 0; padding: 0;
    border: 0; background: none; color: var(--label); text-align: left; cursor: pointer;
}
.group-switch .large-title { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.group-switch-chevron { flex: none; display: grid; place-items: center; margin-bottom: 0.45em; color: var(--accent); transform: rotate(90deg); }
.group-switch:active { opacity: 0.6; }
.group-switch + .subtitle { margin-top: 4px; }

/* Two buttons side by side in a row, such as Apple Maps and Google Maps. */
.row.map-buttons { gap: 10px; }
.row.map-buttons .button { flex: 1; min-height: 44px; margin: 0; }

/* Free text shown as written, such as an event's arrival notes. */
.info-box { padding: 14px 16px; border-radius: 12px; }

/* An embedded map inside a group, full width, between its rows. */
.map-frame { aspect-ratio: 16 / 10; background: var(--fill); }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* A smaller coloured tile, for an icon at the start of a row. */
.tile.small-tile { width: 30px; height: 30px; border-radius: 8px; }

/* Map apps to open for directions: app-style icons with their names underneath, like the iOS share sheet. */
.row.map-apps { justify-content: center; gap: 28px; padding-top: 12px; padding-bottom: 10px; }
.map-app {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 72px;
    color: var(--label); text-decoration: none;
}
.map-app:active { opacity: 0.6; }
.map-app-icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.map-app-name { font-size: 0.8rem; color: var(--label-2); }

/* iOS-style stepper: a value with − and + buttons. */
.stepper-field { align-items: center; }
.stepper-value { flex: 1; font-variant-numeric: tabular-nums; }
.stepper { display: flex; flex: none; border-radius: 9px; background: var(--fill); overflow: hidden; }
.stepper button {
    width: 52px; height: 36px; border: 0; background: none; color: var(--label);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.stepper button + button { border-left: 1px solid var(--separator); }
.stepper button:disabled { color: var(--label-3); cursor: default; }
.stepper button:active:not(:disabled) { background: var(--pressed); }

/* A sheet's top bar with Cancel on the left and Done on the right. */
.nav-bar.sheet-bar { justify-content: space-between; margin-right: -8px; }

/* A plain-English preview of the step being edited, such as "6 × 400m in 75s · 90s jog". */
.step-preview { color: var(--accent); font-weight: 600; }

/* Session steps: a numbered list, with reps in the accent colour, and tools to reorder or remove. */
.step-row { align-items: center; }
.step-number {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px;
    background: var(--fill); color: var(--label-2); font-size: 0.85rem; font-weight: 700;
}
.step-number.reps { background: var(--accent); color: #FFFFFF; }
.step-edit { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.step-tools { flex: none; display: flex; gap: 2px; }
.step-tool {
    width: 36px; height: 36px; border: 0; border-radius: 18px; background: none;
    color: var(--accent); font-size: 1.05rem; cursor: pointer;
}
.step-tool:disabled { color: var(--label-3); cursor: default; }
.step-tool:active:not(:disabled) { background: var(--pressed); }
.step-tool.remove { color: var(--red); }

.session-stats { margin: -12px 0 20px; color: var(--accent); font-weight: 600; }
.row-disabled { opacity: 0.6; }

/* Calendar days can have an event dot and a training session dot side by side. */
.calendar-dots { display: flex; gap: 3px; height: 6px; }
.calendar-dot.on.session { background: #34C759; }
.date-tile.session { background: rgba(52, 199, 89, 0.16); color: #248A3D; }
@media (prefers-color-scheme: dark) {
    .date-tile.session { color: #30D158; }
}

/* A small two-way switch inside a field, such as Time / Distance for a recovery. */
.mini-segmented { flex: none; display: flex; padding: 2px; border-radius: 8px; background: var(--fill); }
.mini-segmented button {
    min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
    color: var(--label-2); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.mini-segmented button.on { background: var(--bg-elevated); color: var(--label); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* A part's heading in the set editor, with Remove at the end. */
.part-header { display: flex; align-items: center; justify-content: space-between; }
.remove-part { min-height: 0; color: var(--red); font-size: 0.9rem; text-transform: none; }

/* The shorthand box: a typewriter-ish font helps line up brackets and quotes. */
textarea.shorthand { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: max(0.95rem, 16px); }
.typed-preview { border: 1.5px dashed var(--accent); }

/* The bell, in the menu bar, with a red count like an iPhone app badge. */
.bell, .top-button {
    position: relative;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px;
    color: var(--accent); text-decoration: none;
}
.bell:active, .top-button:active { background: var(--pressed); }
.bell-count {
    position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--red); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center;
}
.tab-content { position: relative; }

/* Notifications: unread ones have a blue dot and bold title, like Mail. */
.row.notification { align-items: flex-start; text-align: left; }
.notification-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 5px; }
.notification.unread .notification-dot { background: var(--accent); }
.notification.unread .row-title { font-weight: 600; }
.notification-time { font-size: 0.8rem; color: var(--label-3); }

/* A session to answer: its details, then Going / Can't Make It side by side. */
.answer-card { margin-bottom: 14px; }
.row.answer-buttons { gap: 10px; }
.row.answer-buttons .button { flex: 1; min-height: 48px; margin: 0; }
.row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.link-button.small { min-height: 28px; font-size: 0.85rem; }
.join-form { margin-top: 24px; }

/* Session attendance, for the coach */
.attendance-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 16px 4px; }
.attendance-counts .count {
    padding: 4px 12px; border: 0; border-radius: 999px;
    font: inherit; font-size: 0.95rem; font-weight: 600; background: var(--fill); color: var(--label-2); cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s, background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.attendance-counts .count:active { transform: scale(0.94); }
/* When one is picked, the others step back and it fills in with its colour, with a little pop. */
.attendance-counts.filtered .count:not(.selected) { opacity: 0.4; transform: scale(0.95); }
.attendance-counts .count.selected { transform: scale(1.08); color: #FFFFFF; animation: count-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.attendance-counts .count.going.selected { background: #34C759; box-shadow: 0 4px 14px rgba(52, 199, 89, 0.4); }
.attendance-counts .count.not-going.selected { background: var(--red); box-shadow: 0 4px 14px rgba(255, 59, 48, 0.35); }
.attendance-counts .count.waiting.selected { background: #8E8E93; box-shadow: 0 4px 14px rgba(142, 142, 147, 0.4); }
@keyframes count-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1.08); }
}
.attendance-list { animation: list-in 0.3s ease-out both; }
@keyframes list-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .attendance-counts .count, .attendance-counts .count.selected, .attendance-list { animation: none; transition: none; }
}
.attendance-counts .going { background: rgba(52, 199, 89, 0.15); color: #248A3D; }
.attendance-counts .not-going { background: var(--red-tint); color: var(--red); }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--fill); border: 2px solid var(--label-3, #C7C7CC); }
.status-dot.going { background: #34C759; border-color: #34C759; }
.status-dot.notgoing { background: var(--red); border-color: var(--red); }
.attendance-note { font-style: italic; color: var(--label); }
.warning-text { color: #C93400; }
.spaced-group { margin-top: 16px; }
@media (prefers-color-scheme: dark) {
    .attendance-counts .going { color: #30D158; }
    .warning-text { color: #FF9F0A; }
}
.link-button.destructive-text { color: var(--red); }
.segment:disabled { color: var(--label-3); cursor: default; }

/* Signing up from an invite, a step at a time */
.step-count { margin: -4px 0 16px; color: var(--label-2); font-size: 0.95rem; font-weight: 500; }
.join-banner {
    display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding: 10px 14px;
    border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 0.95rem;
}
.join-banner span { color: var(--label); }
.join-banner strong { font-weight: 600; }
.step-progress { display: flex; gap: 6px; margin: 0 0 18px; }
.step-progress span { flex: 1; height: 5px; border-radius: 3px; background: var(--fill); }
.step-progress span.on { background: var(--accent); }
.step-list { margin: 24px 8px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.step-list li { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; }
.step-number {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-tint); color: var(--accent); font-weight: 700; font-size: 0.95rem;
}
.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice-card {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px;
    border: 2px solid transparent; border-radius: 14px;
    color: var(--label); font: inherit; text-align: left; cursor: pointer;
}
.choice-card > svg { flex: none; color: var(--accent); }
.choice-card:active { background: var(--pressed); }
.choice-card.on { border-color: var(--accent); }
.app-icon.done { background: linear-gradient(160deg, #4CD964, #248A3D); }
.done-tick { font-size: 52px; font-weight: 700; line-height: 1; }
.invite-email { overflow-wrap: anywhere; }
.invite-actions { display: flex; gap: 24px; margin-top: 6px; }
.invite-actions .text-button { padding: 4px 0; }

/* Home: how many athletes the group has, with a few of their faces. */
.athletes-summary { gap: 14px; }
.face-pile { display: flex; flex: none; }
.face-pile .avatar.small { width: 32px; height: 32px; font-size: 0.75rem; margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-elevated); }
.face-pile .avatar.small:first-child { margin-left: 0; }
.face-pile .avatar.more { background: var(--fill); color: var(--label-2); }

/* ---------- Messages ---------- */

.nav-icon {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 22px;
    background: none; color: var(--accent); cursor: pointer;
}
.nav-icon:active { background: var(--pressed); }
.avatar.medium { width: 52px; height: 52px; font-size: 1.15rem; }
.avatar.tiny { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar.group-avatar { background: var(--accent-tint); color: var(--accent); }
.avatar.group-avatar:not(.small):not(.large) { width: 52px; height: 52px; }
.sticky-actions {
    position: sticky; bottom: 0; padding: 12px 0 calc(env(safe-area-inset-bottom) + 12px);
    background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}

/* The chat list */
.chat-row { gap: 12px; align-items: center; }
.chat-row-top, .chat-row-bottom { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-row-top .row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title.unread { font-weight: 700; }
.chat-time { flex: none; font-size: 0.85rem; color: var(--label-2); }
.chat-preview { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.unread-badge {
    flex: none; align-self: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--accent); color: #FFFFFF; font-size: 0.8rem; font-weight: 700; line-height: 22px; text-align: center;
}

/* An open chat fills the screen: header, messages (newest at the bottom), typing box. */
.chat-screen {
    position: fixed; left: 0; right: 0; z-index: 20;
    top: var(--viewport-top, 0px);
    height: var(--viewport-height, 100dvh); /* app.js shrinks this to the space above the keyboard */
    display: flex; flex-direction: column;
    background-color: var(--bg); background-image: var(--page); background-attachment: fixed;
}
.chat-header {
    flex: none; display: flex; align-items: center; gap: 4px;
    padding: calc(env(safe-area-inset-top) + 4px) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    border-bottom: 0.5px solid var(--separator);
    background: var(--bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.chat-header .nav-back { flex: none; border: 0; background: none; color: var(--accent); text-decoration: none; }
.chat-header .nav-back span { display: none; }
.chat-title {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 4px; border: 0; border-radius: 10px; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer;
}
.chat-title:active { background: var(--pressed); }
.chat-title-text { display: flex; flex-direction: column; min-width: 0; }
.chat-title-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title-detail { font-size: 0.8rem; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* column-reverse keeps the view pinned to the newest message, as chat apps do. */
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; -webkit-overflow-scrolling: touch; }
.chat-messages { display: flex; flex-direction: column; gap: 2px; padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
.chat-day { margin: 14px 0 8px; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--label-2); }
.chat-empty { margin: 30vh auto 0; max-width: 18em; text-align: center; color: var(--label-2); }
.load-earlier { align-self: center; margin-bottom: 8px; }

.chat-line { display: flex; align-items: flex-end; gap: 6px; }
.chat-line.last { margin-bottom: 8px; }
.chat-line.mine { justify-content: flex-end; }
.chat-line-avatar { flex: none; width: 28px; }
.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 78%; }
.chat-line.mine .chat-bubble-wrap { align-items: flex-end; }
.chat-sender { margin: 6px 12px 2px; font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.chat-bubble {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 8px 12px 6px; border: 0; border-radius: 18px;
    color: var(--label); font: inherit; font-size: 1.0625rem; line-height: 1.3; text-align: left;
    cursor: pointer; -webkit-user-select: text; user-select: text;
}
.chat-line.mine .chat-bubble { background: var(--accent); color: #FFFFFF; }
.chat-line.theirs.last .chat-bubble { border-bottom-left-radius: 6px; }
.chat-line.mine.last .chat-bubble { border-bottom-right-radius: 6px; }
.chat-bubble.has-photo { padding: 4px 4px 6px; }
.chat-bubble img { display: block; max-width: min(260px, 100%); max-height: 320px; border-radius: 14px; object-fit: cover; }
.chat-bubble.has-photo .chat-text { padding: 2px 8px 0; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble.deleted { background: transparent; border: 1px solid var(--separator); color: var(--label-2); font-style: italic; }
.chat-line.mine .chat-bubble.deleted { color: var(--label-2); background: transparent; }
.chat-time-small { align-self: flex-end; font-size: 0.7rem; opacity: 0.6; }
.chat-bubble.has-photo .chat-time-small { padding-right: 8px; }
.chat-actions { display: flex; gap: 16px; margin: 4px 8px; }
.chat-receipt { margin: 2px 6px 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.75rem; color: var(--label-2); cursor: pointer; }
.chat-receipt-names { margin: 2px 6px; max-width: 16em; font-size: 0.75rem; color: var(--label-2); text-align: right; }

.chat-composer {
    flex: none;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(10px, env(safe-area-inset-left));
    border-top: 0.5px solid var(--separator);
    background: var(--bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
.keyboard-open .chat-composer { padding-bottom: 8px; } /* the keyboard covers the home bar */
.chat-composer.read-only { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--label-2); font-size: 0.9rem; }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-error { margin: 0 4px 6px; color: var(--red); font-size: 0.9rem; }
.chat-photo-button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); cursor: pointer; }
.chat-photo-button.disabled { opacity: 0.4; pointer-events: none; }
.chat-input {
    flex: 1; min-height: 40px; max-height: 140px; padding: 9px 14px; resize: none;
    border: 1px solid var(--separator); border-radius: 20px;
    background: var(--bg-elevated); color: var(--label); font: inherit; font-size: max(1rem, 16px); line-height: 1.3;
    field-sizing: content;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 2px;
    border: 0; border-radius: 50%; background: var(--accent); color: #FFFFFF; cursor: pointer;
}
.chat-send:disabled { background: var(--fill); color: var(--label-2); cursor: default; }

.photo-viewer {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: calc(env(safe-area-inset-top) + 50px) 0 calc(env(safe-area-inset-bottom) + 20px);
    background: #000000;
}
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-viewer-close {
    position: absolute; top: calc(env(safe-area-inset-top) + 8px); right: 12px;
    padding: 8px 12px; border: 0; background: none; color: #FFFFFF; font: inherit; font-size: 1.0625rem; font-weight: 600;
}

.chat-info-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 16px; text-align: center; }
.chat-info-name { margin: 6px 0 0; font-size: 1.6rem; font-weight: 700; }
.chat-info-hero .subtitle { margin: 0; }
.avatar.large.group-avatar { width: 76px; height: 76px; }

/* Muted chats: a small crossed-out bell, and a grey unread badge that doesn't add to the messages button. */
.chat-muted { flex: none; display: inline-flex; color: var(--label-2); }
.unread-badge.muted { background: var(--fill); color: var(--label-2); }

/* Reactions: counts under a bubble, and the like / love / dislike choice when a message is tapped. */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 8px 2px; position: relative; z-index: 1; }
.chat-line.mine .chat-reactions { justify-content: flex-end; }
.reaction-count {
    min-height: 26px; padding: 2px 8px; border: 1px solid var(--separator); border-radius: 13px;
    background: var(--bg-elevated); color: var(--label); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.reaction-count.mine { border-color: var(--accent); background: var(--accent-tint); }
.reaction-picker {
    display: flex; gap: 4px; margin: 6px 4px 2px; padding: 4px 6px; border-radius: 22px;
    background: var(--bg-elevated); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.reaction-choice {
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px;
    background: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.reaction-choice:active { transform: scale(1.15); }
.reaction-choice.on { background: var(--accent-tint); }
.reaction-names { margin: 4px 8px 0; max-width: 18em; font-size: 0.75rem; color: var(--label-2); }
.chat-line.mine .reaction-names { text-align: right; }
.chat-bubble img { cursor: zoom-in; }


/* A list row with a chat shortcut beside the chevron (a button can't sit inside the row's link). */
.row-with-action { position: relative; }
.row-with-action:has(.row-chat) .row-text { margin-right: 48px; }
.row-chat {
    position: absolute; top: 50%; right: 42px; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px;
    background: var(--accent-tint); color: var(--accent); cursor: pointer;
}
.row-chat:active { background: var(--pressed); }
.row-chat:disabled { opacity: 0.5; }

/* ---------- Events ---------- */

.view-switch { margin-bottom: 12px; }
.view-switch .segment { display: grid; place-items: center; text-decoration: none; }
.event-row { align-items: flex-start; gap: 12px; }
.event-row .date-tile { margin-top: 2px; }
.event-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.85rem; color: var(--label-2); }
.event-kind { padding: 0 8px; border-radius: 8px; background: var(--fill); font-weight: 600; }
.event-kind.club { background: var(--accent-tint); color: var(--accent); }
.event-requests { color: var(--accent); font-weight: 600; }
.event-mine { display: block; margin-top: 3px; font-size: 0.9rem; font-weight: 600; color: var(--label-2); }
.event-mine.going { color: #248A3D; }
.event-mine.waiting { color: #C93400; }
.event-mine.declined { color: var(--red); }
@media (prefers-color-scheme: dark) {
    .event-mine.going { color: #30D158; }
    .event-mine.waiting { color: #FF9F0A; }
}
.going-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px; }
.going-name { padding: 4px 10px; border-radius: 999px; background: var(--bg-elevated); font-size: 0.9rem; }
.family-entry .status { align-self: center; }
.request-row { align-items: flex-start; }
.request-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
@media (prefers-color-scheme: dark) {
    /* The selected half of a two-way switch needs to stand out from the dark card behind it. */
    .segment.on { background: #636366; }
}

/* Account: View the app as, for people with more than one role. */
.view-choice { gap: 12px; }
.view-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--fill); color: var(--label-2); }
.view-choice.on .view-icon { background: var(--accent); color: #FFFFFF; }
.view-choice.on .row-title { font-weight: 600; }

/* ---------- Stopwatch ---------- */

.button.small { width: auto; min-height: 36px; padding: 0 14px; font-size: 0.9rem; }
.form-actions.tight { margin-top: 16px; }
.form-actions .button svg { vertical-align: -4px; margin-right: 4px; }
.button.stopwatch-start { min-height: 56px; font-size: 1.15rem; }
.row-check { color: var(--accent); font-weight: 700; font-size: 1.1rem; }
.finish-place {
    flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--fill); color: var(--label-2); font-size: 0.85rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.times-line { font-variant-numeric: tabular-nums; }

/* The running stopwatch has the whole screen: a panel per group, each with its own big button. */
.stopwatch-screen {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column;
    background-color: var(--bg); background-image: var(--page); background-attachment: fixed;
}
.stopwatch-header {
    flex: none; display: flex; align-items: center; gap: 4px;
    padding: calc(env(safe-area-inset-top) + 4px) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
}
.stopwatch-header .nav-back { flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); }
.stopwatch-header .nav-text.destructive-text { color: var(--red); font-weight: 600; }
.stopwatch-header-space { width: 44px; }
.stopwatch-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.squads {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
    padding: 0 max(12px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(12px, env(safe-area-inset-left));
}
@media (min-width: 760px) and (orientation: landscape) {
    .squads { flex-direction: row; }
}
.squad {
    flex: 1 0 auto; display: flex; flex-direction: column; gap: 6px;
    padding: 12px; border-radius: 16px; background: var(--bg-elevated);
    border: 3px solid var(--label-3);
    animation: squad-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.squad.running { border-color: #34C759; flex-grow: 2; } /* the group being timed gets the most room to tap */
/* Each panel is tinted with its border's colour, so its state shows at a glance: blue ready, green running,
   orange recovering, grey done. */
.squad.ready { background: #EAF3FF; border-color: #7DB7FF; }
.squad.running { background: #E8F8EC; }
.squad.recovering { background: #FFF3E0; }
.squad.done { background: var(--fill); }
@media (prefers-color-scheme: dark) {
    .squad.ready { background: rgba(10, 132, 255, 0.16); border-color: #0A84FF; }
    .squad.running { background: rgba(48, 209, 88, 0.14); }
    .squad.recovering { background: rgba(255, 159, 10, 0.15); }
}
/* On a tinted panel, light buttons and chips sit on white rather than grey. */
@media (prefers-color-scheme: light) {
    .squad .squad-buttons .squad-main.all-in, .squad .squad-finish { background: rgba(255, 255, 255, 0.75); }
}
/* Three or four groups share the screen, so their clocks are smaller. */
.squads.many .squad { padding: 10px; gap: 5px; }
.squads.many .squad-clock { font-size: clamp(2.2rem, 7vh, 3.6rem); }
.squads.many .squad-main { min-height: 64px; }
.squads.many .squad-buttons { min-height: 110px; }
.squads.many .squad-buttons .squad-main { min-height: 0; }
.squads.many .squad-actions .button.small { min-height: 32px; padding: 0 10px; font-size: 0.85rem; }
.squads.many .squad-caption { font-size: 0.8rem; }
.squad.recovering { border-color: #FF9500; }
@keyframes squad-in { from { opacity: 0; transform: scale(0.97); } }

.squad-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--label-2); }
.squad-name { font-weight: 600; color: var(--label); }
.squad-rep { text-align: right; }
/* Where the group is, always in view: a purple Set badge and a blue Rep badge, or what's next during a recovery. */
.squad-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; }
.progress-badge {
    padding: 4px 12px; border-radius: 14px; color: #FFFFFF;
    font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.progress-badge.set { background: #AF52DE; }
.progress-badge.rep { background: #007AFF; }
.progress-next { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #C93400; }
.progress-done { font-size: 1.15rem; font-weight: 700; color: #248A3D; }
@media (prefers-color-scheme: dark) {
    .progress-badge.set { background: #BF5AF2; }
    .progress-badge.rep { background: #0A84FF; }
    .progress-next { color: #FF9F0A; }
    .progress-done { color: #30D158; }
}
.squad-clock-row { display: flex; flex-direction: column; align-items: center; }
.squad:not(:has(.squad-main)) .squad-clock-row { flex: 1; justify-content: center; }
.squad-clock {
    font-size: clamp(2.6rem, 11vh, 5.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.squad.recovering .squad-clock { color: #FF9500; }
.squad-clock.urgent { color: var(--red) !important; animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
.squad-caption { font-size: 0.85rem; color: var(--label-2); text-align: center; }

.squad-finishes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.squad-finishes::-webkit-scrollbar { display: none; }
.squad-finish {
    flex: none; padding: 3px 8px; border-radius: 8px; background: var(--fill);
    font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.squad-finish b { color: var(--label-2); font-weight: 600; margin-right: 2px; }

.squad-main {
    flex: 1; min-height: 72px; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; border-radius: 14px; color: #FFFFFF;
    font: inherit; font-size: 1.8rem; font-weight: 700;
    touch-action: manipulation; -webkit-user-select: none; user-select: none; cursor: pointer;
    transition: transform 0.06s, filter 0.06s;
}
.squad-main small { font-size: 0.9rem; font-weight: 500; opacity: 0.85; }
.squad-main.finish { background: var(--accent); }
.squad-main.go { background: #34C759; }
.squad-main.go.due { animation: due 0.8s ease-in-out infinite alternate; }
@keyframes due { to { filter: brightness(1.2); transform: scale(1.015); } }
.squads.many .squad.recovering .squad-main.go { min-height: 56px; font-size: 1.4rem; }
/* Lap above All In, 60/40. All In is a plain click (not on touch-down), so it's harder to hit by mistake. */
.squad-buttons { flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.squad-buttons .squad-main { min-height: 0; }
.squad-buttons .squad-main.finish { flex: 3; }
.squad-buttons .squad-main.all-in { flex: 2; background: var(--fill); color: var(--label); font-size: 1.4rem; }
.squad-main:active { transform: scale(0.97); filter: brightness(1.15); }

.squad-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; flex: none; }
.squad-actions:empty { display: none; }

.split-suggestion {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px;
    background: var(--accent-tint); font-size: 0.9rem;
    animation: squad-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.split-suggestion-actions { display: flex; gap: 6px; }

/* Splitting by hand: every time in one wrapped flow, with a tappable gap between each; a split starts a new line. */
.split-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 8px 0 16px; }
.split-group-name { flex-basis: 100%; margin: 6px 0 0 4px; color: var(--label-2); font-size: 0.85rem; font-weight: 600; }
.split-group-name:first-child { margin-top: 0; }
.split-time {
    display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 10px; border-radius: 10px;
    background: var(--bg-elevated); font-variant-numeric: tabular-nums; font-weight: 500;
}
.split-time b { color: var(--label-3); font-size: 0.8rem; font-weight: 600; }
.split-gap {
    min-width: 40px; min-height: 34px; padding: 0 6px; border: 1px dashed var(--separator); border-radius: 17px;
    background: none; color: var(--label-2); font: inherit; font-size: 0.8rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.split-gap.big { border-style: solid; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.split-gap.on { border: 0; background: var(--red); color: #FFFFFF; font-weight: 600; }
.split-gap:disabled { opacity: 0.4; cursor: default; }
.split-confirm {
    position: sticky; bottom: 0; padding: 12px 0 calc(env(safe-area-inset-bottom) + 12px);
    background: linear-gradient(transparent, var(--bg) 30%);
}

.stopwatch-results {
    flex: 1; overflow-y: auto; width: 100%; max-width: 600px; margin: 0 auto;
    padding: 0 max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 24px) max(16px, env(safe-area-inset-left));
}

/* ---------- Repeating sessions ---------- */

.approve-card {
    display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
    background: rgba(255, 149, 0, 0.14); border: 1px solid rgba(255, 149, 0, 0.45);
}
.approve-card strong { display: block; }
.approve-card p { margin: 2px 0 0; color: var(--label-2); font-size: 0.9rem; }
.series-link { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 16px; font-size: 0.95rem; }
.athlete-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--label-3); display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 0.85rem; font-weight: 700; }
.athlete-check.on { background: var(--accent); border-color: var(--accent); }
.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 12px; }
.weekday {
    min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--bg-elevated);
    color: var(--label); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.weekday.on { background: var(--accent); color: #FFFFFF; }
.group + .segmented { margin-top: 12px; }

/* ---------- Race day ---------- */

.raceday-eyebrow { color: #FF9500; }
.raceday-checklist .row { min-height: 48px; }
.check-mark {
    flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--label-3);
    display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 0.85rem; font-weight: 700;
}
.check-mark.done { background: #34C759; border-color: #34C759; }
.row-value.check-done { color: #34C759; font-weight: 600; }
.meet-card {
    display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: 14px;
    background: rgba(255, 149, 0, 0.14); border: 1px solid rgba(255, 149, 0, 0.45);
}
.meet-icon { color: #FF9500; display: inline-flex; }
.meet-card strong { display: block; }
.meet-point { color: var(--label-2); }
.raceday-filters { margin-bottom: 8px; }
.raceday-athlete { gap: 10px; }
.raceday-athlete.absent .row-title { color: var(--label-2); text-decoration: line-through; }
.raceday-athlete-text { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.raceday-state { font-size: 0.8rem; }
.here-toggle {
    flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--label-3); background: none;
    color: #FFFFFF; font-size: 1.1rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.here-toggle.on { background: #34C759; border-color: #34C759; }
.here-toggle.absent { background: var(--fill); border-color: transparent; color: var(--label-2); }
.bib-chip {
    flex: none; min-width: 52px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
    background: var(--fill); color: var(--label-2); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.bib-chip.on { background: var(--accent-tint); color: var(--accent); }
.bib-chip:disabled { opacity: 0.4; }
.race-time { flex: none; min-width: 76px; font-weight: 600; font-variant-numeric: tabular-nums; }
.raceday-ours { color: var(--accent); }
.course-map-thumb {
    position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
    cursor: zoom-in;
}
.course-map-thumb img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.course-map-thumb span {
    position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 10px;
    background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 0.8rem; font-weight: 600;
}
.course-map-thumb + .group { margin-top: 12px; }
.map-viewer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #000000; }
.map-viewer-bar {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: calc(env(safe-area-inset-top) + 6px) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
}
.map-viewer-button {
    width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF; font-size: 1.4rem; cursor: pointer;
}
.map-viewer-button:disabled { opacity: 0.35; }
.map-viewer-done { margin-left: auto; min-height: 44px; border: 0; background: none; color: #0A84FF; font: inherit; font-weight: 600; cursor: pointer; }
.map-viewer-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.map-viewer-scroll img { display: block; max-width: none; margin: 0 auto; }
.raceday-banner {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
    background: #FF9500; color: #FFFFFF; text-decoration: none;
}
.raceday-banner strong { display: block; }
.raceday-banner .chevron { margin-left: auto; color: #FFFFFF; }
.raceday-button { margin: 14px 0 4px; gap: 6px; }
.raceday-banner > span:not(.chevron) { display: flex; flex-direction: column; font-size: 0.9rem; }

/* ---------- Parking ---------- */

.parking-spot + .parking-spot, .parking-spot + .group { margin-top: 12px; }
.parking-badge {
    flex: none; width: 30px; height: 30px; border-radius: 7px; background: #007AFF; color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem;
}
.parking-notes { white-space: pre-line; color: var(--label); }
.parking-quick { margin-top: 10px; }
.pay-app { margin-top: 4px; }

/* A large title with a button on its right, such as copying a race. */
/* The row takes the title's usual spacing, so the button lines up with the words. */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; }
.title-row .large-title { flex: 1; min-width: 0; margin: 0; }
.title-action {
    flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; color: var(--accent); background: var(--accent-tint);
}
.title-action:active { opacity: 0.7; }

/* ---------- Results photos ---------- */

.results-progress {
    display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border-radius: 14px;
    background: var(--accent-tint);
}
.results-progress strong { display: block; }
.results-progress > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 0.92rem; }
.results-progress > span:last-child > span { color: var(--label-2); }
.results-progress.done { background: rgba(52, 199, 89, 0.15); }
.results-progress.duplicate { background: rgba(255, 149, 0, 0.15); }
.results-progress.failed { background: var(--red-tint); }
.results-progress-icon {
    flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-weight: 700; background: #34C759;
}
.results-progress.duplicate .results-progress-icon { background: #FF9500; }
.results-progress.failed .results-progress-icon { background: var(--red); }
.results-progress .spinner { flex: none; margin-top: 2px; }

.results-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.results-row:first-child { border-top: 0; }
.results-row.unused { opacity: 0.6; }
.results-row-top { display: flex; align-items: center; gap: 10px; }
.results-athlete {
    flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
    background: var(--fill); color: var(--label); font: inherit; font-weight: 600;
}
.results-row-fields { display: flex; gap: 10px; padding-left: 50px; }
.results-row-fields label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.8rem; color: var(--label-2); }
.results-row-fields label:first-child { flex: 2; }
.results-row-fields label:last-child { flex: 1; }
.results-row-fields input {
    width: 100%; min-width: 0; box-sizing: border-box;
    min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill);
    color: var(--label); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.results-row-note { margin: 0; padding-left: 50px; font-size: 0.82rem; color: var(--label-2); }
.results-row-note.possible { color: #FF9500; }

/* A choice inside a form row, such as the race for a results sheet. */
.field select {
    flex: 1; min-width: 0; min-height: 36px; padding: 0 28px 0 0; border: 0; background: none;
    color: var(--label); font: inherit; font-size: 1rem; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--label-3) 50%), linear-gradient(135deg, var(--label-3) 50%, transparent 50%);
    background-position: right 12px center, right 7px center; background-size: 5px 5px; background-repeat: no-repeat;
    text-overflow: ellipsis;
}

/* A race result on an athlete's page: the time or distance, with the place under it. */
.race-result { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.race-result-mark { display: flex; align-items: center; gap: 4px; color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.race-result-place { color: var(--label-2); font-size: 0.85rem; }
/* Marks a provisional result: read from the results pinned up at the event, before the official ones. */
.provisional-mark { display: inline-flex; vertical-align: -2px; color: #FF9500; }

/* A small icon at the end of a row that does something, such as the phone on a contact you can call. */
.row-icon { display: flex; flex: none; color: var(--label-3); }
.row-icon.accent { color: var(--accent); }

/* The total before paying, such as for a membership. */
.pay-summary {
    display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 0; padding: 14px 16px;
    border-radius: 12px; font-size: 1.05rem;
}
.pay-summary strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* A member in the Memberships list: tap the name for their membership, or the pill for their groups. */
.member-row { gap: 10px; }
.member-link { color: inherit; text-decoration: none; }
.group-pill {
    flex: none; max-width: 45%; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 16px;
    background: var(--fill); color: var(--label); font: inherit; font-size: 0.85rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.group-pill.empty { background: rgba(255, 149, 0, 0.16); color: #C93400; font-weight: 600; }
@media (prefers-color-scheme: dark) { .group-pill.empty { color: #FF9F0A; } }

/* A choice in an action sheet that can be ticked, such as a group. */
.action-sheet-option {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px;
    border: 0; border-top: 0.5px solid var(--separator); background: none; color: var(--label); font: inherit;
    text-align: left; cursor: pointer;
}
.action-sheet-option:active { background: var(--pressed); }
.action-sheet-option-text { flex: 1; display: flex; flex-direction: column; font-size: 1.05rem; }
.action-sheet-option-detail { color: var(--label-2); font-size: 0.85rem; }
.group-sheet-empty { padding: 0 16px 14px; text-align: center; }
.action-sheet .error-message { margin: 0; }

/* The coordinator's Dashboard: the numbers at a glance, two to a row. Each opens the list it counts. */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 0; }
.stat-card {
    display: flex; flex-direction: column; gap: 2px; min-height: 84px; padding: 14px 16px; border-radius: 14px;
    color: var(--label); text-decoration: none;
}
.stat-card:active { background: var(--pressed); }
.stat-number { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label { color: var(--label-2); font-size: 0.85rem; }
.stat-card.attention .stat-number { color: #C93400; }
@media (prefers-color-scheme: dark) { .stat-card.attention .stat-number { color: #FF9F0A; } }

/* No signal: the stopwatch carries on, and times wait on the phone. */
.no-signal {
    display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 10px 14px; border-radius: 12px;
    background: rgba(255, 149, 0, 0.14); color: #C93400; font-size: 0.9rem; font-weight: 500;
}
@media (prefers-color-scheme: dark) { .no-signal { color: #FF9F0A; } }
.stopwatch-screen > .no-signal { margin: calc(8px + env(safe-area-inset-top)) 12px 0; }

/* A group's photo: across the top of its page, and as a preview on Edit Group. */
.group-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--fill); }
.group-photo.banner { margin: 0 0 16px; }
.group-photo-preview { padding: 12px 16px; }

/* ---------- Home: a dashboard of glass cards ---------- */

.home-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.greeting-chip {
    padding: 8px 14px; border-radius: 999px;
    background: var(--glass); box-shadow: var(--glass-shadow); font-size: 0.9rem; font-weight: 500;
}
.home-date { margin: 4px 0 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--label-2); }
.home-dashboard .large-title { margin-top: 4px; }

.dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.dash-card { border-radius: 20px; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; }
.dash-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.dash-card-head a {
    padding: 4px 12px; border-radius: 999px; background: var(--fill); color: var(--label);
    font-size: 0.85rem; font-weight: 500; white-space: nowrap;
}
.dash-card-head a:active { background: var(--pressed); }

/* Laptops and iPads: two columns, in a wider page that still leaves room for the menu rail. */
@media (min-width: 900px) {
    .screen.home-dashboard { max-width: min(1040px, calc(100vw - 260px)); }
    .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-dashboard .group-photo.banner { aspect-ratio: 21 / 7; }
}

.reply-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 0.85rem; color: var(--label-2); }
.reply-counts .going { color: #248A3D; font-weight: 600; }
.reply-counts .not-going { color: var(--red); }

.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 16px 16px; }
.quick-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 10px;
    border-radius: 16px; background: var(--bg-elevated); color: var(--label); font-size: 0.8rem; font-weight: 500;
    box-shadow: 0 1px 2px rgba(31, 45, 70, 0.06);
}
.quick-item:active { background: var(--pressed); }
.quick-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }

.weather-now { display: flex; align-items: center; gap: 14px; padding: 8px 16px 4px; }
.weather-icon { color: #FF9F0A; display: grid; }
.weather-temp { font-size: 2.6rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.weather-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weather-words span { color: var(--label-2); font-size: 0.9rem; }
.weather-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 16px; }
.weather-chips span {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
    background: var(--fill); font-size: 0.85rem; color: var(--label-2);
}

@media (prefers-color-scheme: dark) {
    .reply-counts .going { color: #30D158; }
    .quick-item { box-shadow: none; }
}

/* Home's heading: the group's name beside its photo in a large circle, then three square cards (today, athletes,
   next training). */
.home-head { display: flex; align-items: center; gap: 16px; }
.home-head-text { flex: 1; min-width: 0; }
.home-head .subtitle { margin-bottom: 0; }
.group-avatar {
    flex: none; width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
    box-shadow: var(--glass-shadow);
}
.group-avatar.empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: var(--glass); color: var(--accent); font-size: 0.7rem; font-weight: 600;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
span.group-avatar.empty { color: var(--label-3); }

.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.home-stat {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px; border-radius: 20px; background: var(--glass); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    color: var(--label); text-align: center; text-decoration: none;
}
.home-stat:active { opacity: 0.7; }
.home-stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-2); }
.home-stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-stat-value.word { font-size: 1.3rem; }
.home-stat-detail { font-size: 0.8rem; color: var(--label-2); overflow-wrap: anywhere; }

@media (min-width: 900px) {
    .group-avatar { width: 120px; height: 120px; }
    .home-stats { grid-template-columns: repeat(3, 150px); }
}