/* ============================================================
   Triathlon feature styles
   ============================================================ */

/* ---- Discipline colour tokens ---- */
:root {
    --tri-swim:       #2563eb;   /* blue */
    --tri-swim-light: #dbeafe;
    --tri-swim-dark:  #1d4ed8;

    --tri-bike:       #16a34a;   /* green */
    --tri-bike-light: #dcfce7;
    --tri-bike-dark:  #15803d;

    --tri-run:        #ea580c;   /* orange */
    --tri-run-light:  #ffedd5;
    --tri-run-dark:   #c2410c;

    --tri-brick:      #7c3aed;   /* purple */
    --tri-brick-light:#ede9fe;
    --tri-brick-dark: #6d28d9;

    --tri-race:       #dc2626;   /* red */
    --tri-race-light: #fee2e2;

    /* Phase colours */
    --phase-base:    #0891b2;
    --phase-build:   #d97706;
    --phase-peak:    #dc2626;
    --phase-taper:   #7c3aed;
}

[data-theme="dark"] {
    --tri-swim-light: rgba(37, 99, 235, 0.18);
    --tri-bike-light: rgba(22, 163, 74, 0.18);
    --tri-run-light:  rgba(234, 88, 12, 0.18);
    --tri-brick-light:rgba(124, 58, 237, 0.18);
    --tri-race-light: rgba(220, 38, 38, 0.18);
}

/* ============================================================
   Distance selection page  (triathlon.html)
   ============================================================ */

.tri-hero {
    text-align: center;
    padding: var(--space-16) var(--space-6) var(--space-10);
}

.tri-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

.tri-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    line-height: 1.1;
}

.tri-hero-sub {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

/* Distance cards grid */
.tri-distances {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-16);
}

.tri-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.tri-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    text-align: left;
}

.tri-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(28, 25, 23, 0.10);
    transform: translateY(-2px);
}

.tri-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ghost);
}

.tri-card-radio {
    /* Hidden visually but real for form submission */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tri-card-check {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    transition: border-color var(--duration-fast), background var(--duration-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tri-card.is-selected .tri-card-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.tri-card.is-selected .tri-card-check::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

.tri-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}

.tri-card-badge.sprint  { background: var(--tri-swim-light);  color: var(--tri-swim-dark); }
.tri-card-badge.olympic { background: var(--tri-bike-light);  color: var(--tri-bike-dark); }
.tri-card-badge.half    { background: var(--tri-brick-light); color: var(--tri-brick-dark); }

.tri-card h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

.tri-card-duration {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.tri-card-distances {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.tri-distance-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.tri-discipline-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.tri-discipline-dot.swim  { background: var(--tri-swim); }
.tri-discipline-dot.bike  { background: var(--tri-bike); }
.tri-discipline-dot.run   { background: var(--tri-run); }

.tri-distance-label {
    color: var(--color-text-secondary);
    min-width: 32px;
}

.tri-distance-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.tri-card-prereq {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    line-height: 1.5;
}

/* Submit button */
.tri-submit-row {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   Plan display page  (triathlon_plan.html)
   ============================================================ */

.tri-plan-header {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-10) var(--space-6) var(--space-8);
}

.tri-plan-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.tri-plan-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.tri-plan-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.tri-plan-meta {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* Phase legend */
.tri-phase-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.tri-phase-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tri-phase-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.tri-phase-pill.base   { background: rgba(8, 145, 178, 0.12); color: var(--phase-base); }
.tri-phase-pill.build  { background: rgba(217, 119, 6, 0.12); color: var(--phase-build); }
.tri-phase-pill.peak   { background: rgba(220, 38, 38, 0.12); color: var(--phase-peak); }
.tri-phase-pill.taper  { background: rgba(124, 58, 237, 0.12); color: var(--phase-taper); }

.tri-phase-pill.base  .dot  { background: var(--phase-base); }
.tri-phase-pill.build .dot  { background: var(--phase-build); }
.tri-phase-pill.peak  .dot  { background: var(--phase-peak); }
.tri-phase-pill.taper .dot  { background: var(--phase-taper); }

/* Main content */
.tri-plan-body {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-16);
}

/* Week accordion */
.tri-week-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tri-week {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.tri-week:hover {
    box-shadow: 0 2px 12px rgba(28, 25, 23, 0.07);
}

.tri-week.is-recovery {
    border-color: var(--color-border);
    background: var(--color-surface);
}

/* Week header (clickable) */
.tri-week-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.tri-week-header::-webkit-details-marker { display: none; }

.tri-week-num {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    min-width: 52px;
    flex-shrink: 0;
}

.tri-week-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 1;
}

.tri-phase-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tri-phase-badge.base   { background: rgba(8, 145, 178, 0.12); color: var(--phase-base); }
.tri-phase-badge.build  { background: rgba(217, 119, 6, 0.12); color: var(--phase-build); }
.tri-phase-badge.peak   { background: rgba(220, 38, 38, 0.12); color: var(--phase-peak); }
.tri-phase-badge.taper  { background: rgba(124, 58, 237, 0.12); color: var(--phase-taper); }

.tri-recovery-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.tri-week-volumes {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
    flex-wrap: wrap;
}

.tri-vol {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.tri-vol-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.tri-vol-dot.swim  { background: var(--tri-swim); }
.tri-vol-dot.bike  { background: var(--tri-bike); }
.tri-vol-dot.run   { background: var(--tri-run); }

.tri-vol-text {
    color: var(--color-text-secondary);
}

.tri-week-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--duration-fast) var(--ease-out);
}

details[open] .tri-week-chevron {
    transform: rotate(180deg);
}

/* Week body */
.tri-week-body {
    padding: 0 var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border-subtle);
}

/* Volume summary row */
.tri-volume-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.tri-vol-card {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
}

.tri-vol-card.swim  { background: var(--tri-swim-light); }
.tri-vol-card.bike  { background: var(--tri-bike-light); }
.tri-vol-card.run   { background: var(--tri-run-light); }
.tri-vol-card.total { background: var(--color-surface); }

.tri-vol-card-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.tri-vol-card.swim  .tri-vol-card-label { color: var(--tri-swim-dark); }
.tri-vol-card.bike  .tri-vol-card-label { color: var(--tri-bike-dark); }
.tri-vol-card.run   .tri-vol-card-label { color: var(--tri-run-dark); }
.tri-vol-card.total .tri-vol-card-label { color: var(--color-text-muted); }

.tri-vol-card-value {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

/* Day schedule */
.tri-schedule {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    flex-wrap: wrap;
}

.tri-schedule-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    flex: 1;
}

.tri-sched-label {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.tri-sched-pills {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    width: 100%;
}

.tri-sched-pill {
    width: 100%;
    padding: 3px 4px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: var(--weight-bold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tri-sched-pill.swim   { background: var(--tri-swim-light);  color: var(--tri-swim-dark); }
.tri-sched-pill.bike   { background: var(--tri-bike-light);  color: var(--tri-bike-dark); }
.tri-sched-pill.run    { background: var(--tri-run-light);   color: var(--tri-run-dark); }
.tri-sched-pill.brick  { background: var(--tri-brick-light); color: var(--tri-brick-dark); }
.tri-sched-pill.rest   { background: var(--color-surface);   color: var(--color-text-muted); }
.tri-sched-pill.race   { background: var(--tri-race-light);  color: var(--tri-race); }

/* Key sessions */
.tri-key-sessions-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: var(--space-4) 0 var(--space-3);
}

.tri-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tri-session {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
}

.tri-session.swim   { background: var(--tri-swim-light);  border-color: rgba(37, 99, 235, 0.15); }
.tri-session.bike   { background: var(--tri-bike-light);  border-color: rgba(22, 163, 74, 0.15); }
.tri-session.run    { background: var(--tri-run-light);   border-color: rgba(234, 88, 12, 0.15); }
.tri-session.brick  { background: var(--tri-brick-light); border-color: rgba(124, 58, 237, 0.15); }
.tri-session.race   { background: var(--tri-race-light);  border-color: rgba(220, 38, 38, 0.15); }

.tri-session-type {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-top: 1px;
}

.tri-session.swim  .tri-session-type { background: var(--tri-swim);  color: #fff; }
.tri-session.bike  .tri-session-type { background: var(--tri-bike);  color: #fff; }
.tri-session.run   .tri-session-type { background: var(--tri-run);   color: #fff; }
.tri-session.brick .tri-session-type { background: var(--tri-brick); color: #fff; }
.tri-session.race  .tri-session-type { background: var(--tri-race);  color: #fff; }

.tri-session-content {
    flex: 1;
    min-width: 0;
}

.tri-session-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.tri-session-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Coaching note */
.tri-coaching-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-primary);
}

.tri-coaching-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 1px;
}

.tri-coaching-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Delete button */
.tri-delete-row {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .tri-volume-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tri-week-volumes {
        display: none;   /* hidden on small screens — shown in expanded body */
    }

    .tri-cards {
        grid-template-columns: 1fr;
    }
}