:root {
    --slate: #0F172A;
    --sky: #38BDF8;
    --violet: #A78BFA;
    --rose: #FB7185;
    --mist: #F8FAFC;

    --text: var(--slate);
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --bg: var(--mist);
    --surface: #ffffff;
    --surface-hover: #f3f4f6;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --primary: var(--violet);
    --primary-hover: #8B5CF6;
    --primary-soft: #ede9fe;
    --danger: var(--rose);
    --danger-hover: #E11D48;
    --danger-soft: #ffe4e6;
    --on-primary: white;
    --on-danger: white;
    --success: #16a34a;
    --warning: #f59e0b;
    --warning-soft: #e5e7eb;
    --warning-soft-text: #374151;

    --swim: var(--sky);
    --bike: var(--violet);
    --run: var(--rose);

    --phase-base-bg: #dbeafe;
    --phase-build-bg: #dcfce7;
    --phase-peak-bg: #fef3c7;
    --phase-taper-bg: #fce7f3;
    --phase-recovery-bg: #f3e8ff;
    --phase-base-fg: #1e40af;
    --phase-build-fg: #166534;
    --phase-peak-fg: #92400e;
    --phase-taper-fg: #9d174d;
    --phase-recovery-fg: #6b21a8;
}

[data-theme="light"] {
    --text: var(--slate);
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --bg: var(--mist);
    --surface: #ffffff;
    --surface-hover: #f3f4f6;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --primary: var(--violet);
    --primary-hover: #8B5CF6;
    --primary-soft: #ede9fe;
    --danger: var(--rose);
    --danger-hover: #E11D48;
    --danger-soft: #ffe4e6;
    --on-primary: white;
    --on-danger: white;
    --success: #16a34a;
    --warning: #f59e0b;
    --warning-soft: #e5e7eb;
    --warning-soft-text: #374151;

    --phase-base-bg: #dbeafe;
    --phase-build-bg: #dcfce7;
    --phase-peak-bg: #fef3c7;
    --phase-taper-bg: #fce7f3;
    --phase-recovery-bg: #f3e8ff;
    --phase-base-fg: #1e40af;
    --phase-build-fg: #166534;
    --phase-peak-fg: #92400e;
    --phase-taper-fg: #9d174d;
    --phase-recovery-fg: #6b21a8;
}

[data-theme="dark"] {
    --text: #cbd5e1;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;
    --bg: #111827;
    --surface: #1e293b;
    --surface-hover: #334155;
    --border: #334155;
    --border-strong: #475569;
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-soft: #1e1b4b;
    --danger: #e11d48;
    --danger-hover: #be123c;
    --danger-soft: #450a0a;
    --on-primary: #e2e8f0;
    --on-danger: #e2e8f0;
    --success: #4ade80;
    --warning: #fbbf24;
    --warning-soft: #475569;
    --warning-soft-text: #cbd5e1;

    --phase-base-bg: #1e3a8a;
    --phase-build-bg: #14532d;
    --phase-peak-bg: #78350f;
    --phase-taper-bg: #831843;
    --phase-recovery-bg: #581c87;
    --phase-base-fg: #93c5fd;
    --phase-build-fg: #86efac;
    --phase-peak-fg: #fcd34d;
    --phase-taper-fg: #f9a8d4;
    --phase-recovery-fg: #d8b4fe;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --text: #cbd5e1;
        --text-muted: #94a3b8;
        --text-subtle: #64748b;
        --bg: #111827;
        --surface: #1e293b;
        --surface-hover: #334155;
        --border: #334155;
        --border-strong: #475569;
        --primary: #8b5cf6;
        --primary-hover: #7c3aed;
        --primary-soft: #1e1b4b;
        --danger: #e11d48;
        --danger-hover: #be123c;
        --danger-soft: #450a0a;
        --on-primary: #e2e8f0;
        --on-danger: #e2e8f0;
        --success: #4ade80;
        --warning: #fbbf24;
        --warning-soft: #475569;
        --warning-soft-text: #cbd5e1;

        --phase-base-bg: #1e3a8a;
        --phase-build-bg: #14532d;
        --phase-peak-bg: #78350f;
        --phase-taper-bg: #831843;
        --phase-recovery-bg: #581c87;
        --phase-base-fg: #93c5fd;
        --phase-build-fg: #86efac;
        --phase-peak-fg: #fcd34d;
        --phase-taper-fg: #f9a8d4;
        --phase-recovery-fg: #d8b4fe;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

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

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
}

body:has(#chat-container) main {
    min-height: 0;
}


.site-header {
    padding: 1rem 1rem 0;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-logo-mark {
    height: 1.75rem;
    width: auto;
}

.site-footer {
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
}

.site-footer a {
    color: var(--text-muted);
}

.site-footer a:hover {
    color: var(--text);
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.app-nav ul {
    display: flex;
    list-style: none;
    gap: 0.25rem;
}

.app-nav a {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0.375rem;
}

.app-nav a:hover,
.force-state-hover .app-nav a {
    background: var(--surface-hover);
    color: var(--text);
}

.app-nav a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary);
}

.app-nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-nav-actions button {
    background: none;
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
}

.app-nav-actions button:hover,
.force-state-hover .app-nav-actions button {
    background: var(--surface-hover);
    color: var(--text);
}

.chat-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.chat-sidebar {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.chat-sidebar .new-conversation {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.chat-sidebar .new-conversation:hover {
    background: var(--primary-soft);
}

.sidebar-heading {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.conversation-list {
    overflow-y: auto;
    flex: 1;
}

.conversation-item {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border);
}

.conversation-item:hover,
.force-state-hover .conversation-item {
    background: var(--surface-hover);
}

.conversation-item.selected {
    background: var(--primary-soft);
    color: var(--primary);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.empty-state {
    text-align: center;
    color: var(--text-subtle);
    padding: 2rem;
}

.sidebar-toggle {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-toggle {
        display: block;
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 20;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: 0.375rem;
        padding: 0.375rem 0.625rem;
        font-size: 1.25rem;
        cursor: pointer;
        line-height: 1;
    }

    .chat-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 250px;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .chat-sidebar.open {
        display: flex;
    }
}

body:has(#chat-container) {
    height: 100dvh;
}

#chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    max-width: 48rem;
    width: 100%;
}

#messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    max-width: 85%;
    line-height: 1.5;
}

.message.user {
    background: var(--primary);
    color: var(--on-primary);
    align-self: flex-end;
    white-space: pre-wrap;
}

.message.assistant {
    background: var(--surface);
    align-self: flex-start;
    border: 1px solid var(--border);
}

.message.assistant table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.message.assistant th,
.message.assistant td {
    border: 1px solid var(--border);
    padding: 0.375rem 0.625rem;
    text-align: left;
}

.message.assistant th {
    background: var(--surface-hover);
    font-weight: 600;
}

.message.assistant tr:nth-child(even) td {
    background: var(--surface-hover);
}

.message.assistant h1,
.message.assistant h2,
.message.assistant h3 {
    margin: 0.75rem 0 0.25rem;
    line-height: 1.3;
}

.message.assistant h1 { font-size: 1.25rem; }
.message.assistant h2 { font-size: 1.125rem; }
.message.assistant h3 { font-size: 1rem; }

.message.assistant h1:first-child,
.message.assistant h2:first-child,
.message.assistant h3:first-child {
    margin-top: 0;
}

.message.assistant p,
.message.assistant ul,
.message.assistant ol {
    margin: 0.375rem 0;
}

.message.assistant ul,
.message.assistant ol {
    padding-left: 1.5rem;
}

#chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    max-width: 48rem;
    width: 100%;
}

#chat-form textarea {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    overflow-y: hidden;
}

#chat-form textarea:focus,
.force-state-focus #chat-form textarea {
    outline: none;
    border-color: var(--primary);
}

#chat-form textarea:disabled {
    background: var(--surface-hover);
    color: var(--text-subtle);
}

.typing-indicator {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.typing-indicator span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--text-subtle);
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.16s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

main:has(.login-page),
main:has(.landing) {
    max-width: 48rem;
}

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 2rem;
}

.login-page-top {
    justify-content: flex-start;
    padding-top: 4rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 20rem;
}

.login-form label {
    font-size: 0.875rem;
    font-weight: 500;
}

.login-form input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: inherit;
}

.login-form input:focus,
.force-state-focus .login-form input {
    outline: none;
    border-color: var(--primary);
}

.login-form button {
    margin-top: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 0.375rem;
    font-size: 1rem;
    cursor: pointer;
}

.login-form button:hover,
.force-state-hover .login-form button {
    background: var(--primary-hover);
}

.login-error {
    color: var(--danger);
    font-size: 0.875rem;
}

.login-message {
    color: var(--success);
    font-size: 0.875rem;
}

.back-link {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.back-link:hover {
    color: var(--text);
}

.upload-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 0.5rem;
    font-size: 0.875rem;
}

.upload-label {
    color: var(--text-muted);
}

.upload-form input[type="file"] {
    font-size: 0.875rem;
}

.upload-form button {
    padding: 0.25rem 0.75rem;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.upload-form button:hover,
.force-state-hover .upload-form button {
    background: var(--surface-hover);
    color: var(--text);
}

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1rem;
}

.landing p {
    color: var(--text-muted);
}

.landing a {
    color: var(--primary);
}

.landing a:hover {
    color: var(--primary-hover);
}

.prose {
    padding: 2rem 1rem;
    line-height: 1.6;
}

.prose h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.prose .meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.prose h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.prose h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
}

.prose p, .prose ul {
    margin-bottom: 0.75rem;
}

.prose ul {
    padding-left: 1.5rem;
}

.prose a {
    color: var(--primary);
}

.prose a:hover {
    color: var(--primary-hover);
}

/* Plan page */

.plan-page {
    padding: 1rem;
    flex: 1;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.calendar-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
}

.calendar-nav-link {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
}

.calendar-nav-link:hover,
.force-state-hover .calendar-nav-link {
    color: var(--text);
}

.calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar th {
    padding: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-day {
    border: 1px solid var(--border);
    padding: 0.25rem;
    vertical-align: top;
    height: 6rem;
}

.calendar-day.other-month {
    background: var(--surface-hover);
    color: var(--text-subtle);
}

[data-theme="dark"] .calendar-day {
    background: var(--surface);
}
[data-theme="dark"] .calendar-day.other-month {
    background: var(--bg);
}
[data-theme="dark"] .calendar-session {
    background: var(--surface-hover);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .calendar-day {
        background: var(--surface);
    }
    html:not([data-theme="light"]) .calendar-day.other-month {
        background: var(--bg);
    }
    html:not([data-theme="light"]) .calendar-session {
        background: var(--surface-hover);
    }
}

.calendar-day.today {
    background: var(--primary-soft);
}

.day-number {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.phase-row td {
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border);
    border-bottom: none;
}

.phase-row.base td { background: var(--phase-base-bg); }
.phase-row.build td { background: var(--phase-build-bg); }
.phase-row.peak td { background: var(--phase-peak-bg); }
.phase-row.taper td { background: var(--phase-taper-bg); }
.phase-row.recovery td { background: var(--phase-recovery-bg); }

.phase-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
}

.phase-label.base { color: var(--phase-base-fg); }
.phase-label.build { color: var(--phase-build-fg); }
.phase-label.peak { color: var(--phase-peak-fg); }
.phase-label.taper { color: var(--phase-taper-fg); }
.phase-label.recovery { color: var(--phase-recovery-fg); }

.calendar-session {
    font-size: 0.6875rem;
    padding: 0.125rem 0.25rem;
    margin-bottom: 0.125rem;
    border-radius: 0.25rem;
    color: var(--text);
    border-left: 2px solid;
    background: var(--surface);
    line-height: 1.3;
}

.calendar-session.swim {
    border-color: var(--swim);
}

.calendar-session.bike {
    border-color: var(--bike);
}

.calendar-session.run {
    border-color: var(--run);
}

.calendar-session.strength {
    border-color: var(--primary);
}

.session-sport {
    font-weight: 600;
    text-transform: capitalize;
}

.session-title {
    display: block;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    margin-bottom: 0.125rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event.priority-A {
    background: var(--danger);
    color: var(--on-danger);
}

.calendar-event.priority-B {
    background: var(--warning);
    color: var(--on-primary);
}

.calendar-event.priority-C {
    background: var(--warning-soft);
    color: var(--warning-soft-text);
}

/* Activities page */

.activities-page {
    padding: 1.5rem;
    flex: 1;
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.activities-page.drag-active {
    outline: 2px dashed var(--primary);
    outline-offset: -8px;
    background: var(--primary-soft);
}

.activities-page.drag-active * {
    pointer-events: none;
}

/* Upload banner (the whole page is the drop target) */

.upload-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin: 0 0 1.25rem;
    background: var(--primary-soft);
    border-radius: 0.5rem;
    color: var(--text);
}

.upload-banner-icon {
    display: inline-flex;
    color: var(--primary);
}

.upload-banner-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.upload-banner-text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text);
}

.upload-banner-link {
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}

.upload-banner-link:hover,
.upload-banner-link:focus-within {
    color: var(--primary-hover);
}

.upload-banner-input {
    /* Visually hidden but keyboard-focusable. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.upload-progress {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    font-size: 0.875rem;
    max-width: 20rem;
    z-index: 50;
}

.upload-progress-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.upload-progress ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
}

.upload-progress li {
    padding: 0.125rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Activities table */

.activities-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.activities-table th,
.activities-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.activities-table thead th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}

.activity-row {
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background 0.1s;
}

.activity-row:hover {
    background: var(--surface-hover);
}

.activity-row.sport-swim {
    border-left-color: var(--swim);
    color: var(--text);
}
.activity-row.sport-bike {
    border-left-color: var(--bike);
}
.activity-row.sport-run {
    border-left-color: var(--run);
}

.activity-row td:nth-child(5),  /* Avg HR */
.activity-row td:nth-child(6) { /* Source */
    color: var(--text-muted);
}

/* Sport icon (used in row sport cell + week summary) */

.sport-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
}

.sport-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.15em;
}

/* Font Awesome's person-swimming faces left; mirror so the swimmer swims right. */
.sport-swim .sport-icon svg {
    transform: scaleX(-1);
}

.activity-row.sport-swim .sport-icon { color: var(--swim); }
.activity-row.sport-bike .sport-icon { color: var(--bike); }
.activity-row.sport-run  .sport-icon { color: var(--run); }

/* Weekly summary row */

.week-summary td {
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.625rem 0.75rem;
}

.week-summary-label {
    font-weight: 600;
    color: var(--text);
    margin-right: 1rem;
}

.week-summary-stats {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.week-summary-sport {
    margin-right: 0.875rem;
    white-space: nowrap;
}

.week-summary-sport.sport-swim { color: var(--swim); }
.week-summary-sport.sport-bike { color: var(--bike); }
.week-summary-sport.sport-run  { color: var(--run); }

.week-summary-total {
    margin-left: 0.5rem;
    color: var(--text);
    font-weight: 500;
}

.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: 3rem 1rem;
}

.events-page {
    padding: 1.5rem;
    flex: 1;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.event-hero {
    position: relative;
    background: linear-gradient(135deg, var(--slate), #1e293b);
    color: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.4);
}

.event-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--primary-soft), transparent 60%);
    opacity: 0.15;
    pointer-events: none;
}

.event-hero > * {
    position: relative;
}

.event-hero-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.event-hero-name {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.event-hero-countdown {
    margin: 0 0 0.25rem;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.event-hero-date {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.events-section {
    margin-bottom: 2.5rem;
}

.events-heading {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.event-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.event-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.event-card:hover,
.force-state-hover .event-card {
    box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.15);
    transform: translateY(-1px);
}

.event-card-when {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

.event-card-name {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.event-card-date {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.event-card-past {
    opacity: 0.75;
}

.event-card-past .event-card-when {
    color: var(--text-muted);
}

.event-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.event-chip {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.event-hero .event-chip {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.event-chip-priority.priority-a {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-hover);
}

.event-chip-priority.priority-b {
    background: var(--bg);
    border-color: var(--border-strong);
    color: var(--text);
}

.event-chip-priority.priority-c {
    background: transparent;
    border-color: var(--border);
    color: var(--text-subtle);
}

.event-hero .event-chip-priority.priority-a {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.event-card.priority-a {
    border-left-color: var(--primary);
}

.event-card.priority-b {
    border-left-color: var(--border-strong);
}

.event-card.priority-c {
    border-left-color: var(--border);
}

.events-empty {
    color: var(--text-muted);
    margin: 0;
    padding: 2rem 0;
    text-align: center;
}

.delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>") center / 1rem no-repeat;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: transparent;
}

.delete-btn:hover,
.force-state-hover .delete-btn {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FB7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>");
    background-color: var(--danger-soft);
}

#confirm-modal {
    margin: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 22rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

#confirm-modal::backdrop {
    background: rgb(0 0 0 / 0.3);
}

#confirm-modal p {
    margin: 0 0 1.25rem;
    color: var(--text);
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-actions button {
    padding: 0.375rem 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 0.875rem;
}

.modal-actions button:hover,
.force-state-hover .modal-actions button {
    background: var(--border);
}

.modal-actions #modal-confirm {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
}

.modal-actions #modal-confirm:hover,
.force-state-hover .modal-actions #modal-confirm {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

/* Admin: soft-deleted activity rows */
.deleted-row {
    color: var(--text-subtle);
}

.deleted-row td:first-child {
    text-decoration: line-through;
}

main:has(.admin-layout) {
    max-width: 1200px;
}

.admin-layout {
    display: flex;
    min-height: calc(100vh - 8rem);
}

.admin-nav {
    width: 200px;
    flex-shrink: 0;
    padding: 2rem 0;
    border-right: 1px solid var(--border);
}

.admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
}

.admin a {
    color: var(--primary);
}

.admin a:visited {
    color: var(--primary);
}

.admin-nav a:hover,
.force-state-hover .admin-nav a {
    background: var(--surface-hover);
}

.admin-nav a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary);
    border-left: 3px solid var(--primary);
    padding-left: calc(1rem - 3px);
}

.admin {
    flex: 1;
    min-width: 0;
    padding: 2rem;
}

.admin-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.admin-header h1 {
    margin: 0;
}

.admin-header .inline-form button {
    padding: 0.25rem 0.75rem;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text);
}

.admin-header .inline-form button:hover,
.force-state-hover .admin-header .inline-form button {
    background: var(--surface-hover);
}

.summary-cell {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.resummarize-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-subtle);
    padding: 0.375rem;
    line-height: 1;
    border-radius: 0.25rem;
}

.resummarize-btn:hover,
.force-state-hover .resummarize-btn {
    color: var(--primary);
}

.admin table {
    width: 100%;
    border-collapse: collapse;
}

.admin th,
.admin td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin th {
    font-weight: 600;
}

.admin .judge-response {
    max-width: 40ch;
    max-height: 12em;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.85em;
}

.admin .message {
    max-width: 100%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    align-self: stretch;
    white-space: normal;
}

.admin .message.user {
    background: var(--surface);
    color: var(--text);
    border-left: 1px solid var(--border);
    border-right: 3px solid var(--primary);
}

.admin .block-tool-use,
.admin .block-tool-result {
    margin: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.admin .block-tool-use summary,
.admin .block-tool-result summary {
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    font-family: monospace;
    background: var(--surface-hover);
    color: var(--text);
}

.admin .block-tool-use pre,
.admin .block-tool-result pre {
    margin: 0;
    padding: 0.625rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    background: var(--surface-hover);
}

.admin .block-tool-result.error summary,
.admin .block-tool-result.error.inline .tool-name {
    color: var(--danger);
}

.admin .inline {
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.admin .inline .tool-name {
    font-family: monospace;
    color: var(--text);
    background: var(--surface-hover);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.admin .inline code {
    color: var(--text-muted);
}

.admin .training-plan-table {
    font-size: 0.875rem;
    border-radius: 0 0 0.375rem 0.375rem;
    overflow: hidden;
}

.admin .clickable-row {
    cursor: pointer;
}

.admin .clickable-row:hover {
    background: var(--primary-soft);
}

.admin .session-row {
    cursor: pointer;
}

.admin .session-row:hover {
    background: var(--primary-soft);
}

.admin .session-row.expanded {
    background: var(--primary-soft);
}

.admin .intervals-row td {
    padding: 0;
    background: var(--surface-hover);
}

.admin .intervals-table {
    width: 100%;
    font-size: 0.8125rem;
    margin: 0;
}

.admin .intervals-table th {
    background: var(--surface-hover);
}


#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
}

.toast {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    max-width: 24rem;
    font-size: 0.9rem;
}

.toast-error {
    background: var(--danger-soft);
    color: var(--danger-hover);
    border: 1px solid var(--danger);
}

.toast-info {
    background: var(--primary-soft);
    color: var(--primary-hover);
    border: 1px solid var(--primary);
}

.invites-page {
    padding: 1.5rem;
    flex: 1;
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.invite-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.invite-hero-header .invite-hero-eyebrow {
    margin: 0;
}

.invites-quota-pill {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-hover);
}

.invite-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.1);
}

.invite-hero-empty {
    background: var(--mist);
    border-style: dashed;
    box-shadow: none;
}

.invite-hero-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.invite-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.invite-link-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9375rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    background: var(--bg);
    color: var(--text);
}

.invite-link-input:focus,
.force-state-focus .invite-link-input {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.invite-hero-help {
    margin: 0.875rem 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.invite-rotate-form {
    display: inline;
    margin: 0;
}

.invite-rotate-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text-subtle);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

.invite-rotate-link:hover,
.force-state-hover .invite-rotate-link {
    color: var(--primary);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover:not(:disabled),
.force-state-hover .btn-primary:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:disabled {
    background: color-mix(in srgb, var(--primary) 50%, var(--surface));
    border-color: transparent;
    cursor: default;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover,
.force-state-hover .btn-secondary {
    background: var(--border);
    border-color: var(--text-subtle);
}

.invites-section {
    margin-bottom: 2rem;
}

.invites-heading {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.invites-empty {
    color: var(--text-muted);
    margin: 0;
    padding: 2rem 0;
    text-align: center;
    font-style: italic;
}

.invite-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.invite-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
}

.invite-card-name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.invite-card-date {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.invite-consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.875rem;
}

.theme-toggle {
    margin-left: auto;
}

.theme-toggle fieldset {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    display: inline-flex;
    padding: 0.125rem;
    gap: 0.125rem;
    background: var(--surface);
}

.theme-toggle label {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.theme-toggle label:hover,
.force-state-hover .theme-toggle label {
    color: var(--text);
}

.theme-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-toggle label:has(input[type="radio"]:checked) {
    background: var(--primary-soft);
    color: var(--text);
}

.theme-toggle input[type="radio"]:focus-visible + span,
.force-state-focus .theme-toggle input[type="radio"] + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.theme-toggle noscript button {
    margin-left: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

/* Strava integration ------------------------------------------------ */

.activities-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--primary-hover);
}

.strava-connect { display: inline-block; line-height: 0; }
.strava-connect img { display: block; height: 32px; width: auto; }

.strava-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--text);
    font-size: 0.875rem;
}

.strava-progress {
    padding: 0.75rem 1rem;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 0.9rem;
}
.powered-by-strava { margin-top: 2rem; text-align: right; }
.powered-by-strava a { display: inline-block; line-height: 0; }
.powered-by-strava img { display: block; height: 16px; width: auto; }

.strava-logo-light { display: inline; }
.strava-logo-dark { display: none; }

[data-theme="dark"] .strava-logo-light { display: none; }
[data-theme="dark"] .strava-logo-dark { display: inline; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .strava-logo-light { display: none; }
    html:not([data-theme="light"]) .strava-logo-dark { display: inline; }
}

.source-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
}
/* Strava orange #FC4C02 — brand requirement, see note above. */
.source-badge--strava { background: #FC4C02; color: #fff; }
.source-badge--fit    { background: var(--primary-soft); color: var(--text); }
.source-badge--manual { background: var(--mist); color: var(--text-muted); }

/* Multisport group — summary row matches the activity-row column layout;
   leg rows are hidden by default and revealed via a hidden checkbox + :has(). */

.multisport-summary {
    border-bottom: 1px solid var(--border);
    /* Reserve 3px on the left to match .activity-row's transparent left
       border so the columns line up. The stripe is painted by a pseudo on
       the first cell (see .multisport-toggle-cell::before). */
    border-left: 3px solid transparent;
    transition: background 0.1s;
    cursor: pointer;
}

/* Solo activity rows get their height from the .delete-btn (1.75rem
   inline-flex) inflating the actions cell line-box. The multisport summary
   has no group-level delete, so we put an invisible inline-block of the
   same height inside the last cell's label — same effect, same row height. */
.multisport-summary td:last-child .multisport-cell-toggle::before {
    content: "";
    display: inline-block;
    height: 1.75rem;
    vertical-align: middle;
}

.multisport-summary:hover {
    background-color: var(--surface-hover);
}

.multisport-summary td:nth-child(5),  /* Avg HR */
.multisport-summary td:nth-child(6) { /* Source */
    color: var(--text-muted);
}

.multisport-toggle-cell {
    position: relative;
}

/* The 3px stripe lives on the FIRST cell, offset 3px left so it occupies
   the same horizontal slot as the .activity-row border-left would. */
.multisport-toggle-cell::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--text-muted);
}

/* Each cell wraps its content in a <label> that fills the cell (negative
   margin extends through the cell's padding) so any pixel of the row
   triggers the expand/collapse toggle. */
.multisport-cell-toggle {
    display: block;
    margin: -0.5rem -0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
}

/* CSS-triangle chevron, sized to ~text height and aligned to the text's
   visual middle so it sits centred next to the date. */
.multisport-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.45rem;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--text-muted);
    vertical-align: middle;
    transition: transform 0.15s ease;
}

.multisport-group:has(.multisport-toggle-input:checked) .multisport-chevron {
    transform: rotate(90deg);
}

.multisport-group:not(:has(.multisport-toggle-input:checked)) .multisport-leg {
    display: none;
}

.multisport-sport-icons {
    margin-right: 0.4rem;
}

.multisport-sport-icons > span + span {
    margin-left: 0.15rem;
}

.multisport-sport-icons .sport-swim { color: var(--swim); }
.multisport-sport-icons .sport-bike { color: var(--bike); }
.multisport-sport-icons .sport-run  { color: var(--run); }

.multisport-distances {
    font-variant-numeric: tabular-nums;
}

.multisport-distances .sport-swim { color: var(--swim); }
.multisport-distances .sport-bike { color: var(--bike); }
.multisport-distances .sport-run  { color: var(--run); }

.multisport-distances-sep {
    color: var(--text-subtle);
    margin: 0 0.25rem;
}

/* Leg rows: muted, slight indent on the time cell, no left border accent. */
.multisport-leg {
    color: var(--text-muted);
    background: var(--bg);
    font-size: 0.8125rem;
}

.multisport-leg td {
    border-bottom: 1px solid var(--border);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.multisport-leg-time {
    padding-left: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.multisport-leg.sport-swim .sport-icon { color: var(--swim); }
.multisport-leg.sport-bike .sport-icon { color: var(--bike); }
.multisport-leg.sport-run  .sport-icon { color: var(--run); }

.multisport-leg-transition {
    color: var(--text-subtle);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Sport-stripe paint for the 3px left stripe, applied to the pseudo on
   the first cell. The combinations enumerated here cover every shape
   `sport_order` can take after grouping (swim/bike/run in canonical order,
   transitions excluded). */

.multisport-stripes-swim-bike-run .multisport-toggle-cell::before {
    background: linear-gradient(
        to bottom,
        var(--swim) 0 33.33%,
        var(--bike) 33.33% 66.66%,
        var(--run)  66.66% 100%
    );
}

.multisport-stripes-swim-bike .multisport-toggle-cell::before {
    background: linear-gradient(
        to bottom,
        var(--swim) 0 50%,
        var(--bike) 50% 100%
    );
}

.multisport-stripes-swim-run .multisport-toggle-cell::before {
    background: linear-gradient(
        to bottom,
        var(--swim) 0 50%,
        var(--run)  50% 100%
    );
}

.multisport-stripes-bike-run .multisport-toggle-cell::before {
    background: linear-gradient(
        to bottom,
        var(--bike) 0 50%,
        var(--run)  50% 100%
    );
}

.multisport-stripes-swim .multisport-toggle-cell::before { background: var(--swim); }
.multisport-stripes-bike .multisport-toggle-cell::before { background: var(--bike); }
.multisport-stripes-run  .multisport-toggle-cell::before { background: var(--run); }

/* Design identity page */

.design-page {
    padding: 1.5rem 2rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.design-page > h1 {
    margin-bottom: 0.5rem;
}

.design-page > p.lead {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 60ch;
}

.design-anchor-nav {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    margin-bottom: 2rem;
    z-index: 5;
}

.design-anchor-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.design-anchor-nav a,
.design-anchor-nav a:visited {
    color: var(--text-muted);
    text-decoration: none;
}

.design-anchor-nav a:hover {
    color: var(--primary);
}

.design-section {
    margin-bottom: 3rem;
}

.design-section > h2 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.design-section-desc {
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.theme-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.theme-pair-light,
.theme-pair-dark {
    padding: 1.25rem;
    background: var(--bg);
    color: var(--text);
    min-width: 0;
}

.theme-pair-light {
    border-right: 1px solid var(--border);
}

@media (max-width: 900px) {
    .theme-pair {
        grid-template-columns: 1fr;
    }
    .theme-pair-light {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.design-figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.design-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
}

.design-figcaption {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    word-break: break-word;
}

.design-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.design-swatch {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.75rem;
}

.design-swatch-chip {
    height: 2.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border);
}

.design-swatch-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text);
}

.design-swatch-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-subtle);
}

.design-token-group {
    margin-bottom: 1.25rem;
}

.design-token-group > h3 {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.design-row-of-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

/* Token swatches — driven by data-token attribute. CSP-safe alternative
   to inline `style="background: var(--TOKEN);"`. */
.design-swatch-chip[data-token="slate"]              { background: var(--slate); }
.design-swatch-chip[data-token="sky"]                { background: var(--sky); }
.design-swatch-chip[data-token="violet"]             { background: var(--violet); }
.design-swatch-chip[data-token="rose"]               { background: var(--rose); }
.design-swatch-chip[data-token="mist"]               { background: var(--mist); }
.design-swatch-chip[data-token="text"]               { background: var(--text); }
.design-swatch-chip[data-token="text-muted"]         { background: var(--text-muted); }
.design-swatch-chip[data-token="text-subtle"]        { background: var(--text-subtle); }
.design-swatch-chip[data-token="bg"]                 { background: var(--bg); }
.design-swatch-chip[data-token="surface"]            { background: var(--surface); }
.design-swatch-chip[data-token="surface-hover"]      { background: var(--surface-hover); }
.design-swatch-chip[data-token="border"]             { background: var(--border); }
.design-swatch-chip[data-token="border-strong"]      { background: var(--border-strong); }
.design-swatch-chip[data-token="primary"]            { background: var(--primary); }
.design-swatch-chip[data-token="primary-hover"]      { background: var(--primary-hover); }
.design-swatch-chip[data-token="primary-soft"]       { background: var(--primary-soft); }
.design-swatch-chip[data-token="danger"]             { background: var(--danger); }
.design-swatch-chip[data-token="danger-hover"]       { background: var(--danger-hover); }
.design-swatch-chip[data-token="danger-soft"]        { background: var(--danger-soft); }
.design-swatch-chip[data-token="success"]            { background: var(--success); }
.design-swatch-chip[data-token="warning"]            { background: var(--warning); }
.design-swatch-chip[data-token="warning-soft"]       { background: var(--warning-soft); }
.design-swatch-chip[data-token="warning-soft-text"]  { background: var(--warning-soft-text); }
.design-swatch-chip[data-token="swim"]               { background: var(--swim); }
.design-swatch-chip[data-token="bike"]               { background: var(--bike); }
.design-swatch-chip[data-token="run"]                { background: var(--run); }
.design-swatch-chip[data-token="phase-base-bg"]      { background: var(--phase-base-bg); }
.design-swatch-chip[data-token="phase-build-bg"]     { background: var(--phase-build-bg); }
.design-swatch-chip[data-token="phase-peak-bg"]      { background: var(--phase-peak-bg); }
.design-swatch-chip[data-token="phase-taper-bg"]     { background: var(--phase-taper-bg); }
.design-swatch-chip[data-token="phase-recovery-bg"]  { background: var(--phase-recovery-bg); }
.design-swatch-chip[data-token="phase-base-fg"]      { background: var(--phase-base-fg); }
.design-swatch-chip[data-token="phase-build-fg"]     { background: var(--phase-build-fg); }
.design-swatch-chip[data-token="phase-peak-fg"]      { background: var(--phase-peak-fg); }
.design-swatch-chip[data-token="phase-taper-fg"]     { background: var(--phase-taper-fg); }
.design-swatch-chip[data-token="phase-recovery-fg"]  { background: var(--phase-recovery-fg); }

/* Typography section: text colour scale exhibits */
.design-text-token-default { color: var(--text); }
.design-text-token-muted   { color: var(--text-muted); }
.design-text-token-subtle  { color: var(--text-subtle); }

/* Demo wrappers — force real components into the design-page grid context
   without relying on inline styles. Each maps to one specific exhibit. */
.design-demo-prose          { padding: 0; }
.design-demo-chat-form      { padding: 0; border: none; }
.design-demo-login-form     { max-width: none; }
.design-demo-theme-toggle   { margin: 0; }
.design-demo-modal-actions  { justify-content: flex-start; }
.design-demo-admin          { padding: 0; }
.design-demo-modal-open     { position: static; display: block; margin: 0; }
.design-demo-site-header    { padding: 0.5rem 1rem; background: var(--bg); }

/* Page-local utilities (only for design.html and its partials). */
.design-u-mt           { margin-top: 1.25rem; }
.design-u-mt-sm        { margin-top: 0.5rem; }
.design-u-mb           { margin-bottom: 1rem; }
.design-u-mb-sm        { margin-bottom: 0.5rem; }
.design-u-row          { display: flex; gap: 0.5rem; }
.design-u-self-center  { align-self: center; }
.design-u-text-lg      { font-size: 1.5rem; }
.design-u-fixed-w-narrow { width: 8rem; }
.design-u-pad-y        { padding: 1.5rem 0; }
.design-u-no-margin    { margin: 0; }