/* CoachPulse v2 — design tokens + shell + shared components */
:root {
    --bg: #050505;
    --card: #101010;
    --card-2: #171717;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.13);
    --txt: #f2f2f2;
    --txt-2: rgba(255,255,255,0.58);
    --txt-3: rgba(255,255,255,0.34);
    --accent: #00d4aa;
    --accent-dim: rgba(0,212,170,0.14);
    --swim: #38bdf8;
    --bike: #f59e0b;
    --run: #f87171;
    --gym: #34d399;
    --multi: #b48cdc;
    --green: #34d399;
    --red: #f87171;
    --orange: #fb923c;
    --purple: #a78bfa;
    --blue: #38bdf8;
    --gold: #e8c547;
    --disp: 'Barlow Condensed', 'Inter', sans-serif;
    --ui: 'Inter', -apple-system, sans-serif;
    --tabbar-h: 58px;
    --head-h: 56px;
    --maxw: 1280px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body { font-family:var(--ui); background:var(--bg); color:var(--txt); min-height:100dvh; font-size:16px; line-height:1.5; }
button { font-family:var(--ui); cursor:pointer; }
a { color:var(--accent); }
input, select, textarea {
    font-family:var(--ui); font-size:16px; color:var(--txt);
    background:var(--card-2); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px;
    width:100%; outline:none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:active:not(:disabled) { transform:scale(0.97); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

.skip-link { position:absolute; top:-100%; left:16px; z-index:400; background:var(--accent); color:#00251d; padding:8px 16px; border-radius:8px; font-weight:600; font-size:0.85em; text-decoration:none; }
.skip-link:focus { top:8px; }

/* ── Login ─────────────────────────────────── */
#login { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-box { text-align:center; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.login-icon { border-radius:16px; }
.login-brand { font-size:26px; font-weight:800; letter-spacing:-0.02em; }
.login-tag { font-size:13.5px; color:var(--txt-2); }
.login-v2 { font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); background:var(--accent-dim); border-radius:999px; padding:4px 12px; margin-bottom:8px; }
.login-error { color:var(--red); font-size:13px; min-height:18px; }
.login-back { font-size:12.5px; color:var(--txt-3); text-decoration:none; margin-top:14px; }

/* ── Impersonation banner ──────────────────── */
#impersonation-banner { background:#5b3b12; color:#fde8c3; font-size:12.5px; font-weight:600; padding:8px 16px; display:flex; align-items:center; justify-content:center; gap:12px; }
#impersonation-banner button { background:rgba(0,0,0,0.3); color:#fde8c3; border:1px solid rgba(253,232,195,0.3); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; }

/* ── Header ────────────────────────────────── */
.apphead {
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    height:var(--head-h); position:sticky; top:0; z-index:60;
    background:rgba(5,5,5,0.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}
.logo-mark { width:30px; height:30px; border-radius:9px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; }
.season-chip { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--txt-2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 12px; max-width:180px; }
.season-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.season-menu { display:none; position:absolute; top:52px; left:56px; z-index:80; background:var(--card-2); border:1px solid var(--line-2); border-radius:14px; min-width:230px; box-shadow:0 16px 40px rgba(0,0,0,0.6); overflow:hidden; padding:6px; }
.season-menu.open { display:block; }
.season-menu .sm-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:none; border:none; color:var(--txt); font-size:13px; font-weight:600; padding:10px 12px; border-radius:9px; text-align:left; }
.season-menu .sm-item:hover { background:var(--card); }
.season-menu .sm-item.cur { color:var(--accent); }
.season-menu .sm-badge { font-size:9px; font-weight:800; letter-spacing:0.08em; padding:3px 7px; border-radius:6px; background:var(--card); color:var(--txt-3); }
.season-menu .sm-badge.active { background:var(--accent-dim); color:var(--accent); }
.season-menu .sm-manage { display:block; text-align:center; font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; padding:10px; border-top:1px solid var(--line); margin-top:4px; }
.head-spacer { flex:1; }
.fresh-pill { display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:999px; padding:6px 11px; color:var(--txt-3); font-size:11.5px; font-weight:600; }
.fresh-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.fresh-dot.aging { background:var(--orange); }
.fresh-dot.stale { background:var(--red); }
.avatar-wrap { position:relative; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#2b6a5c,#0e3f36); border:1px solid rgba(0,212,170,0.35); color:#bdf7e9; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-menu { display:none; position:absolute; right:0; top:44px; z-index:80; background:var(--card-2); border:1px solid var(--line-2); border-radius:14px; min-width:190px; box-shadow:0 16px 40px rgba(0,0,0,0.6); padding:6px; }
.avatar-menu.open { display:block; }
.avatar-menu a { display:block; color:var(--txt); font-size:13px; font-weight:600; text-decoration:none; padding:10px 12px; border-radius:9px; }
.avatar-menu a:hover { background:var(--card); }
.avatar-menu-div { height:1px; background:var(--line); margin:4px 8px; }
.avatar-menu-logout { color:var(--red) !important; }

/* ── Screens ───────────────────────────────── */
.screens { max-width:var(--maxw); margin:0 auto; width:100%; }
.screen { display:none; padding:14px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 40px); animation:fadeUp 0.22s cubic-bezier(0.16,1,0.3,1); }
.screen.on { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── Tab bar (mobile) / sidebar (desktop) ──── */
.tabbar {
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    background:rgba(8,8,8,0.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    display:flex; padding:5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
}
.tab { flex:1; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--txt-3); position:relative; border-radius:12px; }
.tab span { font-size:9.5px; font-weight:600; letter-spacing:0.02em; }
.tabbar .tab svg { width:19px; height:19px; }
.tab.on { color:var(--accent); }
.tab .badge { position:absolute; top:2px; right:calc(50% - 19px); min-width:16px; height:16px; border-radius:8px; background:var(--accent); color:#00251d; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; }

@media (min-width:1024px) {
    /* Top navigation: tabs live in the header row, centered */
    .tabbar {
        left:50%; right:auto; top:0; bottom:auto; width:auto; height:var(--head-h);
        transform:translateX(-50%);
        flex-direction:row; align-items:center; gap:4px;
        border-top:none; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
        padding:0; z-index:76;
    }
    .tab { flex:0 0 auto; flex-direction:row; gap:9px; padding:8px 16px; border-radius:999px; }
    .tab span { font-size:13px; font-weight:600; }
    .tab:hover { color:var(--txt-2); }
    .tab.on { background:var(--accent-dim); color:var(--accent); }
    .tab .badge { position:static; margin-left:2px; }
    .tab svg { width:17px; height:17px; }
    .screen { padding:26px 32px 60px; }
    .apphead { z-index:75; padding-left:24px; padding-right:24px; }
    .season-menu { left:auto; }
}
@media (min-width:1024px) and (max-width:1219px) {
    .tab span { display:none; }
    .tab { padding:9px 13px; }
}

/* ── Shared components ─────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
.card + .card { margin-top:10px; }
.section-label { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--txt-3); margin:22px 0 10px; display:flex; align-items:center; justify-content:space-between; }
.section-label a, .section-label button.linkish { color:var(--accent); font-size:11.5px; font-weight:600; text-decoration:none; letter-spacing:0.02em; text-transform:none; background:none; border:none; }
.dc-stream-leg { font-size:10px; font-weight:600; color:var(--accent); text-transform:none; letter-spacing:0.02em; border:1px dashed rgba(0,212,170,0.4); border-radius:5px; padding:1px 7px; background:rgba(0,212,170,0.07); }
.pill-pr { color:var(--gold); background:rgba(232,197,71,0.12); margin-right:6px; }
.dc-prs { font-size:12px; color:var(--gold); background:rgba(232,197,71,0.08); border:1px solid rgba(232,197,71,0.25); border-radius:10px; padding:9px 12px; margin:10px 0 2px; line-height:1.5; }
.dc-prs b { font-weight:700; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--txt-3); }
.h1 { font-size:24px; font-weight:700; letter-spacing:-0.02em; margin-top:2px; }

.sticky-filters {
    position:sticky; top:var(--head-h); z-index:40;
    background:var(--bg); margin:0 -16px 12px; padding:10px 16px 2px;
}
@media (min-width:1024px) { .sticky-filters { margin:0 -32px 12px; padding:10px 32px 2px; } }

.chips { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex-shrink:0; font-size:12px; font-weight:600; color:var(--txt-2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.chip.on { background:var(--accent-dim); border-color:rgba(0,212,170,0.4); color:var(--accent); }

.btn { height:44px; border-radius:12px; border:none; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 18px; }
.btn-primary { background:var(--accent); color:#00251d; }
.btn-ghost { background:var(--card-2); color:var(--txt); border:1px solid var(--line-2); }
.btn-danger { background:rgba(248,113,113,0.12); color:var(--red); border:1px solid rgba(248,113,113,0.3); }
.btn:disabled { opacity:0.45; cursor:default; }
.btn-sm { height:34px; font-size:12px; padding:0 13px; border-radius:9px; }

.pill { font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; letter-spacing:0.03em; display:inline-block; }
.pill-done { background:rgba(52,211,153,0.13); color:var(--green); }
.pill-today { background:var(--accent); color:#00251d; }
.pill-up { background:var(--card-2); color:var(--txt-3); }
.pill-rest { background:transparent; border:1px dashed var(--line-2); color:var(--txt-3); }

.seg { display:flex; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:3px; margin-bottom:14px; }
.seg button { flex:1; height:36px; border:none; border-radius:9px; background:transparent; font-size:13px; font-weight:600; color:var(--txt-2); }
.seg button.on { background:var(--card-2); color:var(--txt); box-shadow:0 1px 4px rgba(0,0,0,0.4); }

.mchip { display:inline-flex; align-items:baseline; gap:5px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.mchip b { font-family:var(--disp); font-size:18px; font-weight:700; }
.mchip span { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-3); }

.stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.sg { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 12px; }
.sg .v { font-family:var(--disp); font-size:22px; font-weight:700; }
.sg .v small { font-size:12px; font-weight:500; color:var(--txt-2); }
.sg .k { font-size:9.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-3); margin-top:2px; }
.sg .d { font-size:10.5px; font-weight:600; margin-top:2px; }
@media (min-width:1024px) { .stat-grid { grid-template-columns:repeat(6, 1fr); } }

.banner { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--txt-2); display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.banner b { color:var(--txt); }
.banner.warn { border-color:rgba(251,146,60,0.35); }
.banner.crit { border-color:rgba(248,113,113,0.4); }
.banner .banner-x { margin-left:auto; background:none; border:none; color:var(--txt-3); font-size:16px; flex-shrink:0; }

/* Setup checklist */
.checklist { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:14px; }
.checklist h3 { font-size:14px; font-weight:700; margin-bottom:12px; }
.cl-step { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.cl-ic { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--card-2); color:var(--txt-3); }
.cl-step.done .cl-ic { background:rgba(52,211,153,0.15); color:var(--green); }
.cl-step.active .cl-ic { background:var(--accent-dim); color:var(--accent); }
.cl-step .cl-name { font-size:13.5px; font-weight:600; flex:1; }
.cl-step.done .cl-name { color:var(--txt-3); text-decoration:line-through; }
.cl-step.locked .cl-name { color:var(--txt-3); }

/* Detail push */
.detail { position:fixed; inset:0; z-index:90; background:var(--bg); display:none; flex-direction:column; animation:slideIn 0.25s cubic-bezier(0.16,1,0.3,1); }
.detail.on { display:flex; }
@keyframes slideIn { from { transform:translateX(48px); opacity:0; } to { transform:none; opacity:1; } }
.det-head { display:flex; align-items:center; gap:11px; padding:14px 16px 10px; flex-shrink:0; }
.det-back { width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--txt); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.det-crumb { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--txt-3); }
.det-body { flex:1; overflow-y:auto; padding:2px 18px 40px; -webkit-overflow-scrolling:touch; }
.det-title { font-size:21px; font-weight:700; letter-spacing:-0.02em; }
@media (min-width:1024px) {
    .detail { left:0; background:rgba(0,0,0,0.55); }
    .detail .det-panel { max-width:680px; margin:4vh auto; background:var(--bg); border:1px solid var(--line-2); border-radius:20px; height:88vh; display:flex; flex-direction:column; width:calc(100% - 48px); }
}
.det-panel { display:flex; flex-direction:column; height:100%; min-height:0; }

/* Overlay sheets (editors) */
.overlay { position:fixed; inset:0; z-index:95; background:rgba(0,0,0,0.6); display:none; align-items:flex-end; justify-content:center; }
.overlay.on { display:flex; }
.sheet { background:var(--card); border:1px solid var(--line-2); border-radius:20px 20px 0 0; width:100%; max-width:560px; max-height:88dvh; overflow-y:auto; padding:18px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:1024px) { .overlay { align-items:center; } .sheet { border-radius:20px; } }
.sheet h3 { font-size:16px; font-weight:700; margin-bottom:14px; }
.sheet-x { float:right; background:none; border:none; color:var(--txt-3); font-size:20px; }

/* Forms */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-field { margin-bottom:12px; }
.form-field label { display:block; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-3); margin-bottom:6px; }
.form-field .req { color:var(--red); }
.form-actions { display:flex; gap:8px; margin-top:16px; }
.form-actions .spacer { flex:1; }
.form-status { font-size:12.5px; margin-top:10px; min-height:16px; }
.form-status.err { color:var(--red); }
.form-status.ok { color:var(--green); }
.chip-toggle { display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:var(--txt-2); background:var(--card-2); border:1px solid var(--line-2); border-radius:999px; padding:8px 14px; cursor:pointer; user-select:none; }
.chip-toggle.on { background:var(--accent-dim); border-color:rgba(0,212,170,0.4); color:var(--accent); }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl th { text-align:left; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt-3); padding:8px 10px; border-bottom:1px solid var(--line-2); }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--line); color:var(--txt-2); }
.tbl td b { color:var(--txt); }

/* Markdown content */
.md { font-size:13.5px; line-height:1.6; color:var(--txt-2); }
.md h2 { font-size:15px; font-weight:700; color:var(--txt); margin:14px 0 8px; }
.md h3 { font-size:13.5px; font-weight:700; color:var(--txt); margin:12px 0 6px; }
.md p { margin:0 0 8px; }
.md strong { color:var(--txt); font-weight:600; }
.md hr { border:none; border-top:1px solid var(--line); margin:12px 0; }
.md table { width:100%; border-collapse:collapse; margin:8px 0 12px; font-size:12px; }
.md th { text-align:left; font-weight:700; color:var(--txt-3); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; padding:6px 8px; border-bottom:1px solid var(--line-2); }
.md td { padding:6px 8px; border-bottom:1px solid var(--line); }
.md .status-cell.good { color:var(--green); }
.md .status-cell.bad { color:var(--red); }
.md .status-cell.warn { color:var(--orange); }

/* Rings */
.ring-wrap { position:relative; flex-shrink:0; }
.ring-wrap svg { transform:rotate(-90deg); display:block; }
.ring-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num .val { font-family:var(--disp); font-weight:700; line-height:1; }
.ring-num .cap { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--txt-3); margin-top:2px; }

/* Empty state */
.empty { text-align:center; padding:40px 20px; color:var(--txt-3); font-size:13.5px; }
.empty b { display:block; color:var(--txt-2); font-size:15px; margin-bottom:6px; }

/* Skeletons */
.skel { background:linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size:200% 100%; animation:skel 1.4s infinite; border-radius:10px; }
@keyframes skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
.skel-card { height:110px; border-radius:18px; margin-bottom:10px; }
.skel-row { height:56px; border-radius:14px; margin-bottom:8px; }

/* ── Season breadcrumb + phase legend (Today card + Train gantt) ── */
.sp-crumb { font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; line-height:1.9; }
.sp-cr-block { color:var(--txt); }
.sp-cr-dim { color:var(--txt-3); font-weight:500; }
.sp-cr-week { color:var(--accent); }
.sp-cr-sep { color:rgba(255,255,255,0.25); margin:0 5px; }
.sp-legend { display:flex; gap:5px 13px; flex-wrap:wrap; font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--txt-3); line-height:1.6; }
.sp-leg { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.sp-leg-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── Unified session card (Today / Activity / Train) ── */
.dcard {
    position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:13px 14px; cursor:pointer;
}
.dcard:hover { border-color:var(--line-2); }
.dc-top { display:flex; align-items:flex-start; gap:12px; }
.dc-icon { width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.dc-txt { flex:1; min-width:0; }
.dc-title { font-size:14px; font-weight:700; letter-spacing:-0.01em; }
.dc-sub { font-size:11px; color:var(--txt-3); margin-top:1px; }
.dc-stats { font-size:12.5px; color:var(--txt-2); margin-top:5px; }
.dc-stats b { color:var(--txt); font-weight:600; }
.dc-verdict { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.dc-goal { font-size:11.5px; color:var(--txt-3); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-more { font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap; }
.dc-unread { position:absolute; top:11px; right:11px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.dcard .grade, .dcard .pill-done { flex-shrink:0; }
.dc-det-meta { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.dc-planned { margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.dc-planned summary { font-size:12px; font-weight:700; color:var(--txt-2); cursor:pointer; }

/* Grade chips */
.grade { font-size:10px; font-weight:800; letter-spacing:0.04em; padding:3px 8px; border-radius:6px; text-transform:uppercase; }
.grade.nailed-it { background:rgba(52,211,153,0.15); color:var(--green); }
.grade.close, .grade.on-track { background:rgba(232,197,71,0.14); color:var(--gold); }
.grade.missed, .grade.overcooked { background:rgba(248,113,113,0.14); color:var(--red); }

/* Utility */
.muted { color:var(--txt-2); }
.dim { color:var(--txt-3); }
.disp { font-family:var(--disp); }
.hidden { display:none !important; }
.mt8 { margin-top:8px; } .mt12 { margin-top:12px; } .mt16 { margin-top:16px; }