/*
 * Shared UI components — reusable building blocks loaded on every page.
 * Includes the .section card wrapper, button variants, section labels, and
 * analytics-platform components (zone distribution, range bar, PB cards).
 */

/* ---- Section wrapper (white card with hairline border) ---- */
.section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.section h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.section h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

/* ---- Section label (the "// coach", "// phases" eyebrow style) ---- */
.section-label,
h2.section-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
}

/* ---- Button variants (modifiers on the base button in tokens.css) ---- */
.btn-sm {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
}
/* Outlined pill — cobalt outline on transparent. */
.btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}
.btn-ghost:hover { background: var(--color-primary-light); }
.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:hover { background: #b8442f; border-color: #b8442f; }

/* ---- Card kicker / section eyebrow ---- */
.card-kicker {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-info);
    margin-bottom: var(--space-1);
}
.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

/* ---- Accent-coloured stat values ---- */
.stat-value.is-blue  { color: var(--color-value-blue); }
.stat-value.is-green { color: var(--color-value-green); }
.stat-value.is-gold  { color: var(--color-value-gold); }
.stat-value.is-red   { color: var(--color-value-red); }

/* Hero number — larger emphasis figure (e.g. weekly volume headline) */
.hero-number {
    font-family: var(--font-display);  /* Playfair serif — editorial big number */
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-value-blue);
}
.hero-number-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ---- Insight callouts (the green ✓ / red ⚠ rows) ---- */
.insight-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}
.insight-icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-weight: var(--font-weight-bold);
}
.insight.is-good .insight-icon { color: var(--color-value-green); }
.insight.is-warn .insight-icon { color: var(--color-value-red); }
.insight.is-info .insight-icon { color: var(--color-info); }
.insight strong { font-weight: var(--font-weight-semibold); }

/* Filled insight box (the "Excellent — 80% easy running" panel) */
.insight-box {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin-top: var(--space-4);
}
.insight-box.is-good {
    background: rgba(31, 157, 87, 0.10);
    color: #166b3c;
}
.insight-box.is-warn {
    background: rgba(217, 165, 33, 0.12);
    color: #7d5e0c;
}
.insight-box.is-bad {
    background: rgba(214, 69, 58, 0.10);
    color: #922b21;
}

/* ---- HR zone distribution ---- */
.zone-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: var(--space-4) 0;
    background: var(--color-neutral-100);
}
.zone-bar-seg { height: 100%; }
.zone-seg-1 { background: var(--color-zone-1); }
.zone-seg-2 { background: var(--color-zone-2); }
.zone-seg-3 { background: var(--color-zone-3); }
.zone-seg-4 { background: var(--color-zone-4); }
.zone-seg-5 { background: var(--color-zone-5); }

.zone-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}
.zone-card {
    background: var(--color-neutral-900);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    color: #fff;
}
.zone-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}
.zone-card-range {
    font-size: 10px;
    color: var(--color-neutral-400);
    margin: 2px 0 var(--space-2);
    line-height: var(--line-height-tight);
}
.zone-card-time {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.zone-card-pct {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-400);
    margin-top: 2px;
}
.zone-card.z1 .zone-card-name { color: var(--color-zone-1); }
.zone-card.z2 .zone-card-name { color: var(--color-zone-2); }
.zone-card.z3 .zone-card-name { color: var(--color-zone-3); }
.zone-card.z4 .zone-card-name { color: var(--color-zone-4); }
.zone-card.z5 .zone-card-name { color: var(--color-zone-5); }
.zone-card.z1 .zone-card-time,
.zone-card.z2 .zone-card-time,
.zone-card.z3 .zone-card-time,
.zone-card.z4 .zone-card-time,
.zone-card.z5 .zone-card-time { color: #fff; }
.zone-card.z2 .zone-card-time { color: var(--color-zone-2); }
.zone-card.z3 .zone-card-time { color: var(--color-zone-3); }
.zone-card.z4 .zone-card-time { color: var(--color-zone-4); }
.zone-card.z5 .zone-card-time { color: var(--color-zone-5); }

.zone-edit-link {
    display: block;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* ---- Race-potential range bar (Floor / Likely / Ceiling) ---- */
.range-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.range-col { text-align: center; flex: 1; }
.range-col.is-likely { flex: 1.3; }
.range-col-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.range-col-value {
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.range-col.is-floor   .range-col-value { font-size: var(--font-size-lg); color: var(--color-text-muted); }
.range-col.is-likely  .range-col-value { font-size: var(--font-size-2xl); color: var(--color-text); }
.range-col.is-ceiling .range-col-value { font-size: var(--font-size-lg); color: var(--color-value-green); }

.range-track {
    position: relative;
    height: 6px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        var(--color-neutral-300) 0%,
        var(--color-value-green) 100%
    );
    margin: var(--space-2) 0 var(--space-4);
}
.range-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-value-blue);
    border: 2px solid var(--color-surface);
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-sm);
}

/* ---- Personal-best cards ---- */
.pb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}
.pb-card {
    border-top: 2px solid var(--color-border);
    padding-top: var(--space-3);
}
.pb-card-icon { font-size: var(--font-size-lg); }
.pb-card-distance {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin: var(--space-1) 0;
}
.pb-card-time {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}
.pb-card-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.pb-history {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}
.pb-history li {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: var(--space-2);
}

/* ---- Physiological profile panel ---- */
.profile-panel {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-4);
}
.profile-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.btn-dark {
    background: var(--color-neutral-900);
    color: #fff;
    white-space: nowrap;
}
.btn-dark:hover { background: var(--color-neutral-800); }

.profile-rows {
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.profile-row-name { display: flex; flex-direction: column; min-width: 120px; }
.profile-row-name .muted { font-size: var(--font-size-xs); }
.profile-row-metrics {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    flex: 1;
}
.profile-row-metrics .muted {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.profile-row-metrics .is-red   { color: var(--color-value-red); }
.profile-row-metrics .is-blue  { color: var(--color-value-blue); }
.profile-row-metrics .is-green { color: var(--color-value-green); }
.profile-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

/* ---- Deeper look (training page) ---- */
.deeper-look { margin-top: var(--space-4); }
.dl-panel {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.dl-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.dl-goal { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* Goal marker on the range track (hollow ring, distinct from today's dot) */
.range-goal-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 2px solid var(--color-value-green);
    transform: translate(-50%, -50%);
}

.dl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.dl-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.dl-reason { font-size: var(--font-size-sm); margin: var(--space-2) 0 0; }
.dl-feasibility { font-size: var(--font-size-sm); margin: var(--space-2) 0 0; }
.dl-note { font-size: var(--font-size-sm); color: #8a3800; margin: var(--space-1) 0 0; }

.dl-calendar { margin-top: var(--space-5); }
.dl-cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.dl-range-toggle { display: inline-flex; gap: 2px; background: var(--color-neutral-100); border-radius: var(--radius-md); padding: 2px; }
.dl-range-toggle button {
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
}
.dl-range-toggle button.active { background: var(--color-neutral-900); color: #fff; }

.dl-week { margin-bottom: var(--space-3); }
.dl-week-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}
.dl-week-head .is-blue { color: var(--color-value-blue); }
.dl-week-head .is-red  { color: var(--color-value-red); }
.dl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.dl-day {
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) 0;
}
.dl-day-name {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.dl-day-km {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ---- Section sub-navigation (e.g. Fitness: Snapshot / Predictions / Trends) ---- */
.subnav {
    display: flex;
    gap: var(--space-1);
    margin: 0 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.subnav a {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.subnav a:hover { color: var(--color-text); }
.subnav a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
/* On narrow screens let the tabs scroll horizontally rather than wrap or
   overflow the viewport, so the row stays a single consistent strip. */
@media (max-width: 768px) {
    .subnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .subnav a { white-space: nowrap; padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ---- Coach's Read ---- */
.coachs-read-card { background: var(--color-surface); }
.coachs-read-headline {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--line-height-tight);
    margin: var(--space-1) 0 var(--space-3);
}
.coachs-read-detail {
    font-size: var(--font-size-md);
    color: var(--color-neutral-700);
    line-height: var(--line-height-loose);
    margin: 0;
    max-width: 70ch;
}

/* ---- Where-you-are-now zone-state cards ---- */
.zone-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.zone-state-card {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.zone-state-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.zone-state-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.zone-state-current-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-value-blue);
    margin-bottom: var(--space-1);
}
.zone-state-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}
.zone-state-value.zone-state-noscore { color: var(--color-neutral-400); }

/* Clear "how to get a score" call-to-action on no-score cards */
.zone-state-todo {
    margin-top: var(--space-3);
    background: rgba(217, 165, 33, 0.10);
    border: 1px solid rgba(217, 165, 33, 0.30);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.zone-state-todo-head {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: #7d5e0c;
    margin-bottom: var(--space-1);
}
.zone-state-todo-test {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-normal);
}
.zone-state-todo-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.zone-state-unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    letter-spacing: normal;
}
.zone-state-best {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ---- Add-test before/after week preview (stacked, full width) ---- */
.test-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: var(--space-4) 0 var(--space-2);
}
.test-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.test-day {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    min-height: 96px;
    background: var(--color-surface);
}
.test-day-slot { border-color: var(--color-value-green); border-width: 2px; }
.test-day-name {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.test-item {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    margin-bottom: 2px;
}
.test-item-rest { color: var(--color-neutral-400); }
.test-item-kept { background: var(--color-neutral-100); color: var(--color-text); }
.test-item-added { background: rgba(31,157,87,0.18); color: #166b3c; font-weight: var(--font-weight-semibold); }
.test-item-removed { background: var(--color-neutral-100); color: var(--color-neutral-400); text-decoration: line-through; }

/* ---- Plan-alignment prompt banner ---- */
.plan-align-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
}
.plan-align-banner .btn { white-space: nowrap; flex-shrink: 0; }
.plan-align-body {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}
.plan-align-icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.plan-align-fitter {
    background: rgba(31, 157, 87, 0.10);
    border-color: rgba(31, 157, 87, 0.30);
}
.plan-align-behind {
    background: rgba(217, 165, 33, 0.12);
    border-color: rgba(217, 165, 33, 0.30);
}
/* "Raise your goal" nudge — cobalt-tinted to echo the blue "Under-target"
   confidence read it stems from. */
.plan-align-too_easy {
    background: var(--color-primary-light);
    border-color: var(--color-primary-muted);
}
.plan-align-too_easy .plan-align-icon { color: var(--color-primary); }
.plan-align-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ---- Confidence pill ---- */
.confidence-pill {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
}
.confidence-pill.is-high   { background: rgba(31,157,87,0.12);  color: #166b3c; }
.confidence-pill.is-medium { background: rgba(217,165,33,0.14); color: #7d5e0c; }
.confidence-pill.is-low    { background: var(--color-neutral-100); color: var(--color-text-muted); }