/* PuffinROW-only styles. Shared brand styles come from vendor/puffin/. */

.brand-row { color: var(--brand-red); }
.navbar.bg-primary .brand-wordmark { color: var(--brand-cream); }

.stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }
.stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

.goal-progress { height: 0.75rem; }
.chart-box { position: relative; height: 320px; }

.interval-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: baseline; }
.interval-row { cursor: pointer; }
.interval-row.is-focused > td { background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent); }
.interval-chip { --chip: var(--bs-primary); border: 1px solid var(--chip); color: var(--bs-body-color); background: transparent; }
.interval-chip .interval-dot { background: var(--chip); }
.interval-chip.is-off { opacity: 0.45; text-decoration: line-through; }

/* Landing page */
.showcase-card { border-top: 4px solid var(--bs-primary); }
.step-number { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; background: var(--bs-primary); }
.cta-band { background: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); }
.how-to li { margin-bottom: 0.6rem; }

/* About page */
.about-section { padding: 2.5rem 0; border-top: 1px solid var(--bs-border-color); scroll-margin-top: 1rem; }
.about-hero + .about-section { border-top: 0; }
.icon-list li { display: flex; gap: 0.85rem; margin-bottom: 0.9rem; }
.icon-list i { color: var(--bs-primary); font-size: 1.3rem; line-height: 1.4; }
.share-table td:not(:first-child), .share-table th:not(:first-child) { font-size: 0.9rem; }
.share-table .bi { font-size: 1.1rem; }

/* Legal pages */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.15rem; margin-top: 2rem; }

/* Workout: stacked stroke panels sharing one x axis */
.stroke-panel { position: relative; height: 120px; touch-action: pan-y; }
.stroke-panel-main { height: 200px; }
.stroke-card.is-last .stroke-panel { height: 150px; }
.stroke-card.is-last .stroke-panel-main { height: 230px; }
/* One card per metric: a border, a header and a gap make each chart its own thing. */
.stroke-card { border: 1px solid var(--bs-border-color); border-radius: 0.5rem; padding: 0.35rem 0.5rem 0.25rem;
    margin-bottom: 0.5rem; background: var(--bs-body-bg); }
.stroke-card-title { font-size: 0.8rem; font-weight: 600; margin-left: 0.25rem; }
.metric-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; }
.stroke-readout { min-height: 1.6rem; }
.stroke-readout table td { padding: 0 0.75rem 0 0; white-space: nowrap; }
.friend-qr { width: 150px; background: #fff; padding: 6px; border-radius: 8px; }
.friend-qr svg { width: 100%; height: auto; display: block; }
.erg-dot-rower { background: #2FB6CF; } .erg-dot-bike { background: #F5BB33; } .erg-dot-skierg { background: #2FCB84; }

/* Competition: medals, trophies, streaks, celebration */
.medal { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    font-weight: 700; font-size: 0.85rem; color: var(--bs-body-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
.medal-gold { background: linear-gradient(135deg, #F7D774, #D4A017); color: #3b2c00; border-color: #c99a12; }
.medal-silver { background: linear-gradient(135deg, #E6E8EB, #A9B0B8); color: #2c3138; border-color: #9aa1a9; }
.medal-bronze { background: linear-gradient(135deg, #E8B48A, #B87333); color: #3a1f08; border-color: #a8662c; }
.trophy-gold { color: #D4A017; } .trophy-silver { color: #A9B0B8; } .trophy-bronze { color: #B87333; } .trophy-none { color: var(--bs-success); }
.streak { color: #E8590C; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.leaderboard tr.is-me > td { background: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
.leaderboard .goal-progress { height: 0.35rem; min-width: 5rem; }
.race-finished { font-weight: 600; }
.race-line { font-size: 1.05rem; }
.celebrate { background: linear-gradient(120deg, color-mix(in srgb, #D4A017 22%, var(--bs-body-bg)), color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg))); }
.celebrate .bi-trophy-fill { font-size: 2.6rem; }
.award .bi { font-size: 1.6rem; color: var(--bs-primary); }
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.milestone { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--bs-border-color); font-size: 0.85rem; color: var(--bs-secondary-color); }
.milestone.is-reached { border-color: var(--bs-success); color: var(--bs-success); background: color-mix(in srgb, var(--bs-success) 8%, transparent); font-weight: 600; }
.milestone.is-next { border-style: dashed; border-color: var(--bs-primary); color: var(--bs-primary); }
.weekly-race .bi-lightning-charge-fill { color: #F5BB33; }
.weekly-wins { color: #D4A017; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.since-visit { border-left: 4px solid var(--bs-primary); }
.news { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.75rem; font-size: 0.9rem; white-space: nowrap; }
.news-up .bi, .news-milestone .bi { color: var(--bs-success); } .news-down .bi { color: var(--bs-danger); }
.news-finish .bi { color: var(--bs-primary); } .news-trophy .bi { color: #D4A017; }

.nav-sync { white-space: nowrap; }
/* The navbar is dark-themed, which would lighten the teal; keep the brand teal
   with white text, as the dashboard's buttons have it. */
.navbar .nav-sync { --bs-primary: #0E7F93; --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; }
.nav-sync:disabled { opacity: 1; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.freshness { color: var(--bs-secondary-color); font-weight: 400; }
.freshness.is-stale { color: var(--bs-warning-text-emphasis); }
tr.is-stale > td { opacity: 0.85; }