/* ============================================================
   OutRun — styles (tokens : DESIGN.md). Mobile-first, thème auto.
   ============================================================ */
:root {
  --font-sans:"Geist", system-ui, -apple-system, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", monospace;

  /* primitives */
  --brand-lime:#DEEA00; --brand-lavender:#BC92F8; --ink:#0B191E; --paper:#FAF6F1;
  --pastel-mint:#A9E7D8; --pastel-sky:#BFD4FB; --pastel-coral:#F8C6BB;

  /* sémantique — clair */
  --bg:#FAF6F1; --surface:#FFFFFF; --surface-2:#F5F1EC;
  --border:#E4E0DC; --border-strong:#D3D0CC;
  --text-primary:#0B191E; --text-secondary:#6E6E6D; --text-muted:#8C8A88;
  --accent:#DEEA00; --accent-on:#0B191E; --accent-2:#BC92F8;
  --success:#10864B; --success-surface:#E4F6EA; --success-text:#0F7A40; --on-success:#FFFFFF;
  --warning:#E08A00; --warning-surface:#FBEFD5; --warning-text:#8A5300;

  /* chips discipline (clair & sombre : fond pastel + encre foncée) */
  --chip-trail-bg:var(--pastel-mint);  --chip-trail-fg:#0B5F52;
  --chip-cycling-bg:var(--pastel-sky); --chip-cycling-fg:#274F9E;
  --chip-gym-bg:var(--pastel-coral);   --chip-gym-fg:#8F2C1C;

  /* échelle */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow:0 1px 2px rgba(11,25,30,.04), 0 1px 3px rgba(11,25,30,.06);
  --shadow-lg:0 8px 24px rgba(11,25,30,.12), 0 2px 6px rgba(11,25,30,.08);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
  --header-h:118px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark;
  --bg:#0B191E; --surface:#11222B; --surface-2:#172C36;
  --border:#27363F; --border-strong:#37474F;
  --text-primary:#F2F4F3; --text-secondary:#AEB9BD; --text-muted:#7E8A8F;
  --success:#31C579; --success-surface:#102319; --success-text:#5FDD97; --on-success:#04140B;
  --warning:#F5B23D; --warning-surface:#241B06; --warning-text:#F0C36B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text-primary);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono { font-family:var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em; }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }

/* ---------- layout ---------- */
.wrap { max-width:640px; margin:0 auto; padding:0 var(--s4) calc(var(--s7) + env(safe-area-inset-bottom)); }

/* ---------- header ---------- */
.header {
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top);
}
.header-in { max-width:640px; margin:0 auto; padding:var(--s4) var(--s4) var(--s3); }
.brandline { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.athlete { display:flex; align-items:center; gap:var(--s3); min-width:0; }
.avatar {
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-on); font-weight:600; font-size:15px;
}
.athlete > div { min-width:0; }
.athlete h1 { margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.athlete .meta { margin:0; font-size:12.5px; color:var(--text-secondary); }
.switch {
  border:1px solid var(--border); background:var(--surface); color:var(--text-secondary);
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:500; flex:none;
}
.switch:hover { border-color:var(--border-strong); }

.weeknav { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s3); }
.weeknav button.nav {
  width:36px; height:36px; flex:none; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-secondary);
}
.weeknav button.nav:hover { border-color:var(--border-strong); color:var(--text-primary); }
.weeknav button.nav:disabled { opacity:.4; cursor:not-allowed; }
.weekmid { flex:1; min-width:0; text-align:center; }
.weekmid .wk { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.weekmid .rg { font-size:12px; color:var(--text-secondary); }
.today-btn {
  flex:none; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm);
  height:36px; padding:0 12px; font-size:12.5px; font-weight:500; color:var(--text-secondary);
}
.today-btn:hover { border-color:var(--border-strong); color:var(--text-primary); }

.chips { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); }
.pill { font-size:11.5px; font-weight:600; letter-spacing:.01em; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--text-secondary); border:1px solid var(--border); }
.pill.phase { background:color-mix(in srgb, var(--accent-2) 22%, var(--surface)); color:var(--text-primary); border-color:transparent; }
.pill.jj { background:color-mix(in srgb, var(--accent) 26%, var(--surface)); color:var(--text-primary); border-color:transparent; }
.pill.deload { background:var(--warning-surface); color:var(--warning-text); border-color:transparent; }

/* ---------- day groups ---------- */
.days { margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s5); }
.day-h { display:flex; align-items:baseline; gap:var(--s2); margin:0 0 var(--s3); padding:0 var(--s1); }
.day-h .dow { font-size:13px; font-weight:600; text-transform:capitalize; }
.day-h .dnum { font-size:12px; color:var(--text-muted); }
.day.is-today .day-h .dow { color:var(--text-primary); }
.day.is-today .day-h .today-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%, transparent); }
.stack { display:flex; flex-direction:column; gap:var(--s3); }

/* ---------- session card ---------- */
.card {
  width:100%; text-align:left; display:flex; align-items:flex-start; gap:var(--s3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow); transition:border-color .12s, transform .08s;
}
.card:hover { border-color:var(--border-strong); }
.card:active { transform:scale(.994); }
.card.rest { background:transparent; border-style:dashed; box-shadow:none; }
.card.today { border-color:color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow:var(--shadow-lg), 0 0 0 1px var(--accent) inset; }

.icon {
  width:40px; height:40px; flex:none; border-radius:var(--r); display:grid; place-items:center;
  background:var(--chip-bg,var(--surface-2)); color:var(--chip-fg,var(--text-muted));
}
.icon svg { width:21px; height:21px; }
.card.type-race .icon, .card.type-test_race .icon { background:var(--accent); color:var(--accent-on); }

.body { flex:1; min-width:0; }
.titlerow { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.titlerow .name { font-size:15px; font-weight:600; letter-spacing:-.01em; }
.tag { font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; background:var(--success-surface); color:var(--success-text); }
.tag.dot::before { content:"●"; font-size:7px; vertical-align:middle; margin-right:4px; }
.subrow { display:flex; align-items:center; gap:var(--s2); margin-top:2px; }
.dur { font-size:12.5px; color:var(--text-secondary); }
.disc-label { font-size:12.5px; color:var(--text-muted); }
.comment { margin:var(--s2) 0 0; font-size:13px; color:var(--text-secondary); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chev { flex:none; align-self:center; color:var(--text-muted); }
.card.rest .comment { color:var(--text-muted); }

/* ---------- modal / bottom sheet ---------- */
.backdrop { position:fixed; inset:0; z-index:50; background:rgba(11,25,30,.45);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; animation:fade .18s forwards; }
.backdrop.closing { animation:fadeout .16s forwards; }
@keyframes fade { to { opacity:1; } } @keyframes fadeout { to { opacity:0; } }
.sheet {
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto; background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-lg);
  padding:var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  transform:translateY(100%); animation:up .24s cubic-bezier(.22,1,.36,1) forwards;
}
.backdrop.closing .sheet { animation:down .18s forwards; }
@keyframes up { to { transform:translateY(0); } } @keyframes down { to { transform:translateY(100%); } }
@media (min-width:680px) {
  .backdrop { align-items:center; }
  .sheet { border-radius:var(--r-xl); max-height:88vh; animation:pop .2s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes pop { from { transform:translateY(12px); opacity:.6; } to { transform:none; opacity:1; } }
}
.grab { width:36px; height:4px; border-radius:99px; background:var(--border-strong); margin:0 auto var(--s4); }
.m-head { display:flex; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s4); }
.m-head .icon { width:46px; height:46px; }
.m-head h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.015em; }
.m-head .m-meta { margin:3px 0 0; font-size:13px; color:var(--text-secondary); text-transform:capitalize; }
.m-close { margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-2); display:grid; place-items:center; color:var(--text-secondary); }

.section { margin-top:var(--s5); }
.section > h3 { margin:0 0 var(--s3); font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); padding:var(--s4); }
.kv dt { color:var(--text-secondary); font-size:13.5px; }
.kv dd { margin:0; text-align:right; font-size:14px; font-weight:500; }
.zonechips { display:flex; gap:var(--s2); flex-wrap:wrap; }
.zc { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); }
.prose { font-size:14.5px; line-height:1.6; color:var(--text-primary); white-space:pre-wrap; }
.empty-note { font-size:13.5px; color:var(--text-muted); background:var(--surface-2);
  border:1px dashed var(--border); border-radius:var(--r); padding:var(--s4); }

/* ---------- picker (root) ---------- */
.picker { padding-top:var(--s7); }
.picker h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 var(--s2); }
.picker p { color:var(--text-secondary); margin:0 0 var(--s5); }
.athlete-card { display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow); margin-bottom:var(--s3); }
.athlete-card:hover { border-color:var(--border-strong); }
.athlete-card .info { flex:1; min-width:0; }
.athlete-card .info .nm { font-weight:600; }
.athlete-card .info .rc { font-size:12.5px; color:var(--text-secondary); }

.state { padding-top:var(--s7); text-align:center; color:var(--text-secondary); }
.brand-mark { font-weight:700; letter-spacing:-.02em; }
.brand-mark b { color:var(--accent-on); background:var(--accent); padding:0 6px; border-radius:6px; }