/* ============================================================================
   Clinical Performance — BFC Performance
   Single stylesheet: tokens + component layer.

   Fonts: prefer a <link> in <head> over this @import for performance:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap">
   ========================================================================= */
/* @import removed - fonts are loaded via <link> in index.html. */

/* ---------------------------------------------------------------- TOKENS  */
:root {
  /* ==========================================================================
     BFC Performance renk sistemi — 2026-09-07 yeniden markalama.
     Önceki "Clinical Performance" teal + limon katmanı TAMAMEN emekli.
     Yeni sistem üç aileden ibaret:
       1. MAVİ    — tek aksan. Vurgu, birincil buton, aktif sekme, seçili durum.
       2. SLATE / LACİVERT — zemin, yüzey, kenar, metin. Nötr iskelet.
       3. DURUM   — good / caution / risk, YALNIZCA anlam taşıdığı yerde.
     Neon yok: eski limon eylem aksanı ve beş renkli kategori matrisi kaldırıldı.

     Dosya adı ve --cp-* token adları BİLEREK korundu: 40'tan fazla referans
     bunlara bağlı, yeniden adlandırmak görsel bir kazanç vermeden büyük bir
     değişiklik üretirdi. Değişen yalnız değerler.

     Zemin/yüzey/kenar/metin basamakları Claude Design "Light Overhaul"
     referans sayfasından birebir alındı (slate ailesi).
     ========================================================================== */

  /* Yüzeyler ve iskelet */
  --cp-bg:            #F1F5F9;  /* uygulama tuvali — porselen, asla saf beyaz */
  --cp-surface:       #FFFFFF;  /* kart, sayfa, tablo gövdesi */
  --cp-surface-2:     #F8FAFC;  /* oyuk: girdi kuyusu, tablo başlığı, hover */
  --cp-border:        #E2E8F0;  /* 1px saç çizgisi — yükseklik yerine bu token */

  /* Metin */
  --cp-navy:          #0F172A;  /* birincil metin, başlıklar, tüm sayılar  17.9:1 */
  --cp-slate:         #475569;  /* ikincil metin, etiketler, birimler       7.6:1 */
  --cp-slate-2:       #64748B;  /* üçüncül: yer tutucu, zaman damgası       4.8:1 */

  /* Aksan — tek marka rengi. Tasarımın mavisi, birebir. */
  --cp-teal:          #2563EB;  /* isim tarihsel, değer mavi. 5.17:1 beyaza karşı */
  --cp-teal-hover:    #1D4ED8;
  --cp-teal-press:    #1E40AF;
  --cp-teal-wash:     #EBF1FD;  /* rozet / seçili dolgu · üstündeki mavi 4.56:1 */

  /* Durum — yalnız semantik, asla dekoratif. Doygunluk 2026-09-07'de %28
     kısıldı: eski değerler koyu tuval için seçilmişti ve porselen zeminde
     bağırıyordu. Hue korundu, kontrast yeni zemine yeniden tutturuldu. */
  --cp-good:          #3D754F;  /* 4.95:1 */
  --cp-good-wash:     #E4ECE6;  /* dolgu 1.20 · üstündeki metin 4.52 */
  --cp-caution:       #906335;  /* 5.22:1 beyaza · kendi wash'ı üstünde 4.64 */
  --cp-caution-wash:  #F5F1ED;  /* dolgu 1.12 · üstündeki metin 4.64 */
  --cp-risk:          #9E4238;  /* 5.79:1 */
  --cp-risk-wash:     #EAD5D3;  /* dolgu 1.40 · üstündeki metin 4.55 */

  /* Referans — toparlanma / rehberlik, asla bugünün reçetesi. Mavi-gri. */
  --cp-reference:     #5C6BA0;
  --cp-reference-wash:#EFF0F6;

  /* Tipografi */
  --cp-font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --cp-font-body:    'Instrument Sans', system-ui, sans-serif;

  /* Boşluk — 4px taban */
  --cp-space-1:  4px;   --cp-space-2:  8px;   --cp-space-3: 12px;
  --cp-space-4: 16px;   --cp-space-5: 20px;   --cp-space-6: 24px;
  --cp-space-8: 32px;   --cp-space-10:40px;   --cp-space-12:48px;
  --cp-space-16:64px;   --cp-space-20:80px;

  /* Yarıçap */
  --cp-radius-0:    0;
  --cp-radius-sm:   8px;
  --cp-radius-md:   12px;
  --cp-radius-lg:   16px;
  --cp-radius-pill: 999px;

  /* Dolu bir yüzeyin ÜSTÜNDE duran mürekkep */
  --cp-on-accent: #FFFFFF;   /* mavi dolgu koyu -> beyaz mürekkep, 5.17:1 */
  --cp-mark-bg:   #0F172A;
  --cp-mark-fg:   #FFFFFF;

  --cp-text:   var(--cp-navy);
  --cp-text-2: var(--cp-slate);
  --cp-text-3: var(--cp-slate-2);

  /* Veri serisi paleti — 2026-09-07: TEK RENKLİ MAVİ RAMPA.
     Beş renkli kategori matrisi (cyan/violet/blue/emerald/coral) kaldırıldı:
     rebrand tek aksan istiyor ve o matris ekrana beş ayrı hue sokuyordu.
     Yerine aynı mavi hue'nun (h 259) beş açıklık basamağı.

     Bunun bir BEDELİ var, bilerek kabul edildi: rampa "az -> çok" diye okunur,
     oysa HRV'nin beş metriği sıralı değil. İlişkisiz kategoriler için tek
     renkli rampa uzlaşmadır — karşılığında ekran tek aksana iniyor.
     Rampa CVD açısından en güvenli formdur: açıklık farkı protan, döteran ve
     tritan simülasyonlarının ÜÇÜNDEN de sağ çıkar.

     Ölçüm (protan + deutan, komşu çiftler): en kötü komşu ΔE 8.5 (taban 8).
     Kontrast tabanı 3.0:1 — veri işareti metin değil GRAFİK ögesi, WCAG'de
     doğru eşik budur. Slot 1-4 rahat (4.79-15.25), slot 5 sınırda (3.13):
     BEŞ seri gerektiğinde slot 5'i en az kritik metriğe ver, dördü tercih et. */
  --cp-series-1: #00145D;   /* en koyu */
  --cp-series-2: #003181;
  --cp-series-3: #004AB3;
  --cp-series-4: #0064E8;
  --cp-series-5: #3C88FD;   /* en açık — kontrast 3.13, sınırda */

  /* Eylem aksanı — 2026-09-07'de limon EMEKLİ. Birincil buton, FAB ve aktif
     alt sekme artık markanın kendi mavisi. Eskiden "seçili" (teal) ile
     "yapılacak" (limon) iki ayrı renkle ayrılıyordu; rebrand tek aksan
     istediği için o ayrım renkle değil DOLGU/KENAR ile yapılıyor: birincil
     eylem dolu mavi, seçili durum mavi kenar + wash. */
  --cp-action:        #2563EB;
  --cp-action-hover:  #1D4ED8;
  --cp-action-press:  #1E40AF;
  --cp-on-action:     #FFFFFF;
  /* Mavi zeminden 4.72:1 ayrıldığı için kenar GEREKMİYOR — limonda 1.16:1
     olduğu için zorunluydu. */
  --cp-action-border: transparent;

  /* Hazırlık ısı haritası (coach.js). Anlamı TERS: low=iyi, high=risk.
     Açıklık monotonik kalmalı — CVD güvenliği oradan geliyor, hue'dan değil.
     Doygunluk 2026-09-07'de kısıldı, sıra ve açıklık yönü korundu. */
  --cp-ordinal-low:  #E4ECE6;   /* iyi   — sessiz, karta yakın */
  --cp-ordinal-mid:  #D9BC86;   /* dikkat */
  --cp-ordinal-high: #B4707A;   /* risk  — en koyu/doygun, göze ilk çarpan */

  /* Yüzen alt bar. Cam YALNIZ koyu temada (style.css). */
  --cp-nav-bg:     rgba(255,255,255,.94);
  --cp-nav-border: #E2E8F0;
  --cp-nav-shadow: 0 12px 32px rgba(15,23,42,.14);

  --cp-focus: 2px solid var(--cp-teal);
}

/* ------------------------------------------------------------- DARK THEME */
/* Set data-theme="dark" on <html>. Only COLOR tokens change — spacing, radius
   and the type scale are identical across themes, and every component rule
   above is shared. Three things do not simply invert; see the comments. */
[data-theme="dark"] {
  /* Koyu tema — aynı üç aile, ters yönde. Yalnız RENK tokenları değişir;
     boşluk, yarıçap ve tipografi :root'tan gelir. Zemin/yüzey/kenar/metin
     basamakları yine Claude Design referans sayfasından birebir. */
  --cp-bg:            #0F151C;  /* tuval */
  --cp-surface:       #161E27;  /* kart — tuvalden AÇIK durur */
  --cp-surface-2:     #1E2833;  /* oyuk */
  --cp-border:        #27333F;

  --cp-navy:          #F1F5F9;  /* "navy" = birincil mürekkep. Burada off-white. */
  --cp-slate:         #9FB0C0;  /* 7.56:1 kart üstünde */
  --cp-slate-2:       #8595A6;  /* 5.48:1 */

  --cp-teal:          #60A5FA;  /* aynı mavi, koyu zemin için açılmış  6.61:1 */
  --cp-teal-hover:    #93C5FD;
  --cp-teal-press:    #BFDBFE;
  --cp-teal-wash:     #263A53;  /* dolgu 1.45 · üstündeki mavi 4.56 */

  --cp-good:          #62B882;  /* 6.93:1 */
  --cp-good-wash:     #27413C;  /* dolgu 1.53 · üstündeki metin 4.56 */
  --cp-caution:       #D2A768;  /* 7.58:1 */
  --cp-caution-wash:  #454037;  /* dolgu 1.63 · üstündeki metin 4.64 */
  --cp-risk:          #DA776E;  /* 5.51:1 */
  --cp-risk-wash:     #312A31;  /* dolgu 1.21 · üstündeki metin 4.54 */

  --cp-reference:     #8D9BD8;
  --cp-reference-wash:#2D3649;

  /* Koyu temada mavi dolgu AÇIK, o yüzden mürekkep KOYU. Beyaz burada
     1.9:1 verir ve okunmaz — bu satır atlanırsa buton yazısı kaybolur. */
  --cp-on-accent:     #0F151C;   /* #60A5FA üstünde 7.22:1 */
  --cp-mark-bg:       #F1F5F9;
  --cp-mark-fg:       #0F151C;

  --cp-action:        #60A5FA;
  --cp-action-hover:  #93C5FD;
  --cp-action-press:  #BFDBFE;
  --cp-on-action:     #0F151C;
  --cp-action-border: transparent;

  --cp-ordinal-low:  #23372F;
  --cp-ordinal-mid:  #7A6238;
  /* DİKKAT: bu üçlünün açıklığı MONOTONİK olmak zorunda ve komşu adımların
     protan/döteran ΔE'si 8'in altına inmemeli — ısı haritasında renk TEK kanal
     (hücrenin yeri sporcu ve tarih demek, sıralama taşımıyor).
     2026-09-07'de doygunluk kısılırken ilk denemede high'ın AÇIKLIĞI da düşmüş
     ve komşu çift 7.7'ye inmişti; açıklık eski değerinde tutulup yalnız chroma
     %72'ye çekilerek düzeltildi. Şimdi: low/mid 17.8 · mid/high 10.7.
     Kabul testi: ekran görüntüsünü gri tonlamaya çevir, sıra hâlâ okunmalı. */
  --cp-ordinal-high: #C06E76;

  --cp-nav-bg:     rgba(22,30,39,.92);
  --cp-nav-border: #27333F;
  --cp-nav-shadow: 0 14px 38px rgba(0,0,0,.62);

  /* Veri serisi rampası — açık temanın aynı hue'su (259), koyu zemin için
     ters yönde. Slot sırası KORUNUR: bir metrik tema değişince yerini
     kaybetmez. En kötü komşu ΔE 10.3. Slot 1 kontrast 3.00 ile sınırda. */
  --cp-series-1: #2D66BD;   /* en koyu — kontrast 3.00, sınırda */
  --cp-series-2: #2B80FE;
  --cp-series-3: #6BA4FE;
  --cp-series-4: #A1C6FF;
  --cp-series-5: #D7E6FD;   /* en açık */
}

/* ------------------------------------------------------------ BASE / RESET */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cp-bg);
}

body {
  font-family: var(--cp-font-body);
  /* font-size: 16px; line-height: 1.6;  <- DEFERRED, the one deviation from the
     export. style.css sets a 15px/1.5 base and every not-yet-ported screen is
     laid out against it; adopting 16px here reflows all of them at once. The
     .cp-body* classes carry their own sizes, so ported screens are already
     correct. Re-enable when the last screen is ported. */
  color: var(--cp-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a       { color: var(--cp-teal); text-decoration: none; }
a:hover { color: var(--cp-teal-press); text-decoration: underline; }

::selection { background: var(--cp-teal-wash); color: var(--cp-navy); }

button, input, select, textarea { font-family: inherit; }

:focus-visible { outline: var(--cp-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------- TYPE */
.cp-h1 {
  margin: 0;
  font-family: var(--cp-font-heading);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cp-navy);
}
.cp-h2 {
  margin: 0;
  font-family: var(--cp-font-heading);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--cp-navy);
}
.cp-h3 {
  margin: 0;
  font-family: var(--cp-font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-navy);
}
/* Large numeric readout — scores, ratios, totals */
.cp-display {
  font-family: var(--cp-font-heading);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--cp-navy);
  font-variant-numeric: tabular-nums;
}
.cp-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cp-slate);
}
.cp-label--sm  { font-size: 11px; letter-spacing: 0.10em; }
.cp-label--xs  { font-size: 10px; letter-spacing: 0.08em; }
.cp-label--mute{ color: var(--cp-slate-2); }
.cp-label--teal{ color: var(--cp-teal); }

.cp-body-lg { font-size: 18px; line-height: 1.55; color: var(--cp-navy); text-wrap: pretty; }
.cp-body    { font-size: 16px; line-height: 1.6;  color: var(--cp-navy); text-wrap: pretty; }
.cp-body-sm { font-size: 14px; line-height: 1.55; color: var(--cp-slate); text-wrap: pretty; }
.cp-caption { font-size: 12px; line-height: 1.45; color: var(--cp-slate-2); }

/* MANDATORY on every numeric value in the product. */
.cp-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- BUTTONS  */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-2);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-sm);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.cp-btn:focus-visible { outline: var(--cp-focus); outline-offset: 2px; }
.cp-btn[disabled] { opacity: .45; cursor: not-allowed; }

.cp-btn--primary          { background: var(--cp-teal);       border-color: var(--cp-teal);       color: var(--cp-on-accent); }
.cp-btn--primary:hover    { background: var(--cp-teal-hover); border-color: var(--cp-teal-hover); }
.cp-btn--primary:active   { background: var(--cp-teal-press); border-color: var(--cp-teal-press); }

.cp-btn--secondary        { background: transparent;          border-color: var(--cp-teal);       color: var(--cp-teal); }
.cp-btn--secondary:hover  { background: var(--cp-teal-wash); }
.cp-btn--secondary:active { background: var(--cp-teal-wash);  border-color: var(--cp-teal-press); color: var(--cp-teal-press); }

.cp-btn--ghost            { padding-left: 18px; padding-right: 18px; color: var(--cp-teal); }
.cp-btn--ghost:hover      { background: var(--cp-teal-wash); }
.cp-btn--ghost:active     { background: var(--cp-teal-wash);  color: var(--cp-teal-press); }

.cp-btn--block { display: flex; width: 100%; padding: 16px 20px; font-size: 16px; }

/* Square icon button — 36px desktop, 40px+ for touch rows */
.cp-iconbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-sm);
  background: transparent;
  cursor: pointer;
}
.cp-iconbtn:hover  { background: var(--cp-surface-2); }
.cp-iconbtn:active { background: var(--cp-teal-wash); }
.cp-iconbtn--bordered        { width: 40px; height: 40px; border-color: var(--cp-border); background: var(--cp-surface); }
.cp-iconbtn--bordered:hover  { background: var(--cp-teal-wash); border-color: var(--cp-teal); }
/* Unread indicator, positioned inside .cp-iconbtn */
.cp-iconbtn__dot {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px;
  border-radius: var(--cp-radius-pill);
  background: var(--cp-teal);
  border: 2px solid var(--cp-surface);
}

/* ------------------------------------------------------- CHIPS & BADGES   */
.cp-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-pill);
  background: transparent;
  color: var(--cp-slate);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.cp-chip:hover        { background: var(--cp-surface-2); }
.cp-chip.is-active    { background: var(--cp-teal); border-color: var(--cp-teal); color: var(--cp-on-accent); }
.cp-chip.is-active:hover { background: var(--cp-teal-hover); border-color: var(--cp-teal-hover); }

.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--cp-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cp-badge--accent    { background: var(--cp-teal-wash);      color: var(--cp-teal);      border-color: var(--cp-teal); }
.cp-badge--solid     { background: var(--cp-teal);           color: var(--cp-on-accent); }
.cp-badge--neutral   { background: var(--cp-surface-2);      color: var(--cp-slate-2); }
.cp-badge--outline   { background: transparent;              color: var(--cp-slate);     border-color: var(--cp-border); }
.cp-badge--good      { background: var(--cp-good-wash);      color: var(--cp-good); }
.cp-badge--caution   { background: var(--cp-caution-wash);   color: var(--cp-caution); }
.cp-badge--risk      { background: var(--cp-risk-wash);      color: var(--cp-risk); }
/* Red-flag reason chip: outline only, red stays confined to the chip */
.cp-badge--risk-outline { background: transparent; color: var(--cp-risk); border-color: var(--cp-risk); }
.cp-badge--reference { background: var(--cp-reference-wash); color: var(--cp-reference); border-color: var(--cp-reference); }

/* Status dot */
.cp-dot { width: 10px; height: 10px; flex: none; border-radius: var(--cp-radius-pill); background: var(--cp-slate-2); }
.cp-dot--sm         { width: 8px; height: 8px; }
.cp-dot--good       { background: var(--cp-good); }
.cp-dot--caution    { background: var(--cp-caution); }
.cp-dot--risk       { background: var(--cp-risk); }
.cp-dot--accent     { background: var(--cp-teal); }

/* ----------------------------------------------------------------- CARDS  */
.cp-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-5);
}
.cp-card--md        { border-radius: var(--cp-radius-md); }
.cp-card--flush     { padding: 0; overflow: hidden; }      /* for tables/lists */
.cp-card--featured  { background: var(--cp-teal-wash);      border-color: var(--cp-teal); }
.cp-card--recessed  { background: var(--cp-surface-2); }
.cp-card--reference { background: var(--cp-reference-wash); border-left: 3px solid var(--cp-reference); border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0; }

/* Status edge bar. Left corners square so the 3px bar reads as a hard edge. */
.cp-card--edge          { border-left-width: 3px; border-radius: 0 var(--cp-radius-lg) var(--cp-radius-lg) 0; }
.cp-card--edge-good     { border-left-color: var(--cp-good); }
.cp-card--edge-caution  { border-left-color: var(--cp-caution); }
.cp-card--edge-risk     { border-left-color: var(--cp-risk); }

.cp-card__head   { display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3); }
.cp-card__divide { margin-top: var(--cp-space-4); padding-top: var(--cp-space-4); border-top: 1px solid var(--cp-border); }
.cp-card--featured .cp-card__divide { border-top-color: var(--cp-teal); }

/* Metric block used inside card footers */
.cp-metric__label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-slate-2); }
.cp-metric__value { font-size: 17px; font-weight: 600; color: var(--cp-navy); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cp-card--featured .cp-metric__label { color: var(--cp-teal); }

/* ------------------------------------------------------------ FORM INPUTS */
.cp-field { display: block; }
.cp-field > label,
.cp-field__label {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cp-slate);
  margin-bottom: var(--cp-space-2);
}
.cp-field__hint { font-size: 12px; color: var(--cp-slate-2); margin-top: var(--cp-space-2); }

.cp-input, .cp-select {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  background: var(--cp-surface);
  color: var(--cp-navy);
  font-size: 16px; /* 16px minimum — stops mobile Safari zooming on focus */
}
.cp-input::placeholder { color: var(--cp-slate-2); }
.cp-input:hover, .cp-select:hover { border-color: var(--cp-slate-2); }
/* Focus is an OUTLINE, never a shadow or glow. */
.cp-input:focus, .cp-select:focus {
  outline: var(--cp-focus);
  outline-offset: 2px;
  border-color: var(--cp-teal);
}
.cp-input--num { font-variant-numeric: tabular-nums; }
.cp-input--recessed, .cp-select--recessed { background: var(--cp-surface-2); }

/* Select: native chrome stripped, chevron supplied by .cp-select-wrap */
.cp-select { padding-right: 44px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.cp-select-wrap { position: relative; }
.cp-select-wrap > svg { position: absolute; right: 16px; top: 50%; margin-top: -8px; pointer-events: none; }

/* Tap scale — segments fill cumulatively so it reads as a LEVEL, not radios */
.cp-scale { display: flex; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); overflow: hidden; }
.cp-scale__seg {
  flex: 1 1 0;
  height: 56px;               /* above the 44px touch minimum */
  border: 0;
  border-left: 1px solid var(--cp-border);
  background: var(--cp-surface);
  color: var(--cp-slate);
  font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cp-scale__seg:first-child { border-left: 0; }
.cp-scale__seg.is-on { background: var(--cp-teal); color: var(--cp-on-accent); }
.cp-scale__seg:focus-visible { outline: var(--cp-focus); outline-offset: -2px; }

/* ---------------------------------------------------- SEGMENTED CONTROL   */
/* One accent border wraps the pair; the fill edge IS the divider. */
.cp-seg { display: flex; border: 1px solid var(--cp-teal); border-radius: var(--cp-radius-sm); overflow: hidden; }
.cp-seg__opt {
  flex: 1 1 0;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  color: var(--cp-teal);
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer;
}
.cp-seg__opt.is-active { background: var(--cp-teal); color: var(--cp-on-accent); }
.cp-seg__opt:focus-visible { outline: var(--cp-focus); outline-offset: -2px; }
.cp-seg--sm .cp-seg__opt { padding: 10px 18px; font-size: 14px; }

/* Language toggle — same mechanic, pill shape, neutral inactive */
.cp-lang { display: flex; flex: none; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-pill); overflow: hidden; }
.cp-lang__opt {
  padding: 6px 13px; border: 0; background: transparent;
  color: var(--cp-slate); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer;
}
.cp-lang__opt.is-active { background: var(--cp-teal); color: var(--cp-on-accent); }
.cp-lang__opt:focus-visible { outline: var(--cp-focus); outline-offset: -2px; }

/* ---------------------------------------------------------------- HEADER  */
.cp-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--cp-space-6);
  height: 64px;
  padding: 0 var(--cp-space-5);
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-border);   /* the ONLY separation. Never a shadow on scroll. */
}
.cp-header__spacer { flex: 1 1 auto; }
/* Mark + wordmark + chevron share one hit target */
.cp-brand {
  display: flex; align-items: center; gap: var(--cp-space-3);
  padding: 6px 10px 6px 6px;
  border: 1px solid transparent; border-radius: var(--cp-radius-sm);
  background: transparent; cursor: pointer;
}
.cp-brand:hover     { background: var(--cp-surface-2); }
.cp-brand.is-open   { background: var(--cp-surface-2); }
.cp-brand__mark {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--cp-radius-sm);
  background: var(--cp-mark-bg);
  font-family: var(--cp-font-heading); font-weight: 600; font-size: 17px; color: var(--cp-mark-fg);
}
.cp-brand__word {
  font-family: var(--cp-font-heading); font-weight: 500; font-size: 17px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--cp-navy);
}
.cp-brand__chevron { flex: none; transition: none; }
.cp-brand.is-open .cp-brand__chevron { transform: rotate(180deg); }
/* On phones the wordmark shortens to "BFC" — full lockup will not fit at 390px */
.cp-brand--compact .cp-brand__word { font-size: 15px; }
.cp-brand--compact .cp-brand__mark { width: 28px; height: 28px; font-size: 16px; }

/* Sport selector dropdown */
.cp-menu {
  width: 340px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-md);
  overflow: hidden;
}
.cp-menu__head {
  padding: 12px 18px;
  background: var(--cp-surface-2);
  border-bottom: 1px solid var(--cp-border);
  font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cp-slate);
}
.cp-menu__item {
  display: flex; align-items: center; gap: var(--cp-space-3);
  width: 100%;
  padding: 14px 18px;
  border: 0; border-bottom: 1px solid var(--cp-border);
  background: var(--cp-surface);
  text-align: left; cursor: pointer;
  font-size: 15px; color: var(--cp-navy);
}
.cp-menu__item:last-child { border-bottom: 0; }
.cp-menu__item:hover      { background: var(--cp-teal-wash); }
.cp-menu__item.is-active  { font-weight: 600; }
/* Placeholder sports: tertiary text, empty hairline circle, NO hover, not tappable.
   The "Coming soon" pill uses the recessed fill, not a status color — an unbuilt
   sport is not a warning. */
.cp-menu__item.is-disabled       { color: var(--cp-slate-2); cursor: not-allowed; }
.cp-menu__item.is-disabled:hover { background: var(--cp-surface); }
.cp-menu__check {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: var(--cp-radius-pill);
  background: var(--cp-teal);
  color: var(--cp-on-accent);   /* child svg uses stroke="currentColor" */
}
.cp-menu__check--empty { background: transparent; border: 1px solid var(--cp-border); }

/* ------------------------------------------------------- SIDEBAR (desktop)*/
.cp-shell   { display: flex; align-items: flex-start; min-height: 100vh; min-width: 1280px; background: var(--cp-bg); }
.cp-sidebar {
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  width: 240px; flex: none; height: 100vh;
  background: var(--cp-surface);
  border-right: 1px solid var(--cp-border);
}
.cp-sidebar__top    { padding: var(--cp-space-4) var(--cp-space-3) var(--cp-space-3); border-bottom: 1px solid var(--cp-border); }
.cp-sidebar__nav    { display: flex; flex-direction: column; gap: 2px; padding: var(--cp-space-3); flex: 1 1 auto; overflow-y: auto; }
.cp-sidebar__bottom { padding: var(--cp-space-3); border-top: 1px solid var(--cp-border); }
.cp-main            { flex: 1 1 auto; min-width: 0; padding: 36px var(--cp-space-10) 56px; }

.cp-nav__item {
  display: flex; align-items: center; gap: var(--cp-space-3);
  width: 100%;
  padding: 10px 10px 10px 9px;
  border: 0; border-left: 3px solid transparent;
  border-radius: 0 var(--cp-radius-sm) var(--cp-radius-sm) 0;
  background: transparent;
  color: var(--cp-slate);
  font-size: 14px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.cp-nav__item:hover     { background: var(--cp-surface-2); }
.cp-nav__item.is-active { background: var(--cp-teal-wash); border-left-color: var(--cp-teal); color: var(--cp-teal); font-weight: 600; }

/* ---------------------------------------------------------------- TABLES  */
.cp-table__head, .cp-table__row { display: grid; gap: var(--cp-space-3); align-items: center; padding: 14px var(--cp-space-6); }
.cp-table__head {
  padding-top: 12px; padding-bottom: 12px;
  background: var(--cp-surface-2);
  border-bottom: 1px solid var(--cp-border);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-slate);
}
.cp-table__row {
  border-bottom: 1px solid var(--cp-border);
  background: var(--cp-surface);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cp-table__row:hover { background: var(--cp-surface-2); }
/* Neutral standout wash for leaders — deliberately NOT gold/silver/bronze */
.cp-table__row.is-highlight       { background: var(--cp-teal-wash); }
.cp-table__row.is-highlight:hover { background: var(--cp-surface-2); }
.cp-table__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--cp-navy); }
.cp-table__foot { padding: var(--cp-space-4) var(--cp-space-6); font-size: 12px; line-height: 1.55; color: var(--cp-slate-2); }

/* --------------------------------------------------------------- ACCORDION*/
.cp-acc         { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); overflow: hidden; }
.cp-acc__head   {
  display: flex; align-items: center; gap: var(--cp-space-3);
  width: 100%; padding: var(--cp-space-4) 18px;
  border: 0; background: var(--cp-surface);
  text-align: left; cursor: pointer;
}
.cp-acc__head:hover        { background: var(--cp-surface-2); }
.cp-acc__head.is-open      { background: var(--cp-surface-2); }
.cp-acc__title  { font-family: var(--cp-font-heading); font-weight: 600; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-navy); }
.cp-acc__count  { font-size: 12px; color: var(--cp-slate-2); font-variant-numeric: tabular-nums; }
.cp-acc__chev   { flex: none; margin-left: auto; }
.cp-acc__head.is-open .cp-acc__chev { transform: rotate(180deg); }
.cp-acc__body   { border-top: 1px solid var(--cp-border); }
.cp-acc__row    { padding: var(--cp-space-4) 18px; border-bottom: 1px solid var(--cp-border); }
.cp-acc__row:last-child { border-bottom: 0; }

/* ----------------------------------------------------- ACWR GAUGE (coach) */
/* Scale runs 0.50–1.75 so the 0.80–1.30 safe band is the middle 40%.
   Tick labels and marker are positioned from the SAME min/max in JS. */
.cp-gauge          { position: relative; padding-top: 22px; }
.cp-gauge__track   { position: relative; display: flex; height: 26px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); overflow: hidden; }
.cp-gauge__band--warn { background: var(--cp-caution-wash); }
.cp-gauge__band--safe { background: var(--cp-teal-wash); border-left: 1px solid var(--cp-teal); border-right: 1px solid var(--cp-teal); }
.cp-gauge__marker  { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--cp-navy); }
.cp-gauge__flag    { position: absolute; top: 0; font-size: 11px; font-weight: 600; color: var(--cp-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-gauge__ticks   { position: relative; height: 16px; margin-top: var(--cp-space-2); }
.cp-gauge__tick    { position: absolute; top: 0; font-size: 11px; color: var(--cp-slate-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-legend         { display: inline-flex; align-items: center; gap: var(--cp-space-2); font-size: 12px; color: var(--cp-slate); }
.cp-legend__swatch { width: 14px; height: 10px; border: 1px solid var(--cp-border); }

/* ------------------------------------------------------ STACKED SHARE BAR */
.cp-stack      { display: flex; height: 26px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); overflow: hidden; }
.cp-stack__seg { height: 100%; }
/* Segment colors: neutral ramp for all but the majority segment, which takes
   teal — keeps one accent on screen and ties the bar to its caption.
   Ramp order: --cp-navy, --cp-slate, --cp-slate-2, --cp-border. */

/* ------------------------------------------------------------- PHONE SHELL*/
.cp-phone {
  position: relative;
  width: 390px; max-width: 100%; height: 100vh;
  overflow-y: auto;
  background: var(--cp-bg);
  border-left: 1px solid var(--cp-border);
  border-right: 1px solid var(--cp-border);
}
.cp-phone .cp-header { height: 56px; padding: 0 14px; gap: var(--cp-space-2); }
.cp-phone .cp-iconbtn { width: 32px; height: 32px; }

/* --------------------------------------------------------------- UTILITIES*/
.cp-hr      { height: 0; border: 0; border-top: 1px solid var(--cp-border); margin: 0; }
.cp-hr--rule{ border-top: 2px solid var(--cp-navy); }
.cp-row     { display: flex; align-items: center; gap: var(--cp-space-3); }
.cp-row--between { justify-content: space-between; }
.cp-stack-v { display: flex; flex-direction: column; }
.cp-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-5); }
.cp-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cp-space-5); }
.cp-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cp-space-5); }

/* ---------------------------------------------------------------- HRV -----
   2026-08-21 — Claude Design handoff port (hrvhandoff.md) for js/hrv.js's
   score card, trend chart legend, and history rows. Reuses existing
   .cp-card/.cp-card--edge-*/.cp-badge/.cp-dot/.cp-field/.cp-input/.cp-btn/
   .cp-metric__* verbatim (the handoff's own token diff said nothing new was
   needed beyond what Clinical Performance already has) — only the layout
   shells below are genuinely new. */
.cp-score-hero { display: flex; flex-direction: column; gap: var(--cp-space-4); }
.cp-score-hero__header { display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3); }
.cp-score-hero__caption { font-size: 15px; color: var(--cp-slate); margin-top: 4px; }
.cp-score-hero__recommendation { font-size: 14px; line-height: 1.5; color: var(--cp-navy); }
/* rule from the handoff: the big number and the recommendation line never take
   a status color — status lives only in the badge and the card's edge color,
   so a flagged reading still reads calm rather than alarmed. */

.cp-history-row { display: flex; align-items: center; gap: var(--cp-space-5); padding: 14px var(--cp-space-6); border-bottom: 1px solid var(--cp-border); }
.cp-history-row:last-child { border-bottom: none; }
.cp-history-row__date-col { min-width: 66px; display: flex; flex-direction: column; gap: 4px; }
.cp-history-row__date { font-weight: 600; font-size: 14px; color: var(--cp-navy); }
.cp-history-row__stats { display: flex; gap: var(--cp-space-4); margin-left: auto; }
.cp-history-row__stat { text-align: right; min-width: 34px; }
.cp-history-thumb { width: 52px; height: 52px; border-radius: var(--cp-radius-sm); flex: none; overflow: hidden; object-fit: cover; background: var(--cp-surface-2); }

/* Trend-chart tap-to-toggle legend (replaces Chart.js's built-in legend so
   the pill/chip look matches the approved design; click handling in
   hrvWireTrendChart() just toggles Chart.js dataset visibility as before). */
.cp-chart-legend { display: flex; gap: var(--cp-space-2); }
.cp-chart-legend__item { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; min-height: 40px; border-radius: var(--cp-radius-pill); background: var(--cp-surface-2); cursor: pointer; font-weight: 600; font-size: 12px; color: var(--cp-navy); }
.cp-chart-legend__item.is-off { opacity: 0.4; }
.cp-chart-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ------------------------------------------------- BODY COMPOSITION GRID --
   2026-08-30 — js/body-comp.js's 6-metric summary tiles on #/progress. Each
   tile is a <button> that routes to #/progress/body/<metric>. Deliberately
   status-color-free: a falling weight is not "good" and a falling muscle mass
   is not "risk" — that call belongs to the coach, not to the tile, so the only
   accent here is the sparkline's --cp-teal. 3 columns fixed (6 tiles = 2 rows)
   so the layout is identical on a phone and in the desktop shell's content
   column; minmax(0,1fr) lets the long labels ellipsize instead of pushing the
   grid wider than the card. */
.cp-bcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-space-3); }
/* HRV özet kartı dört kutu gösteriyor — 2x2, çünkü 4 kutu üç sütuna bölününce
   ikinci sıra tek başına kalıyor ve HRV etiketleri (Dinlenik nabız) 97px'e
   sığmıyor. Aynı .cp-bctile, yalnızca sütun sayısı farklı. */
.cp-bcgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-bctile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; padding: 12px 10px; text-align: left; cursor: pointer;
  background: var(--cp-surface-2);
  border: 1px solid transparent; border-radius: var(--cp-radius-md);
}
.cp-bctile:hover  { border-color: var(--cp-border); }
.cp-bctile:active { background: var(--cp-teal-wash); }
/* "KAS KÜTLESİ" does not fit one 10px line in a third of a phone-width card,
   so labels wrap; the 2-line min-height keeps every tile's number on the same
   baseline whether its label took one line or two. */
.cp-bctile .cp-metric__label { max-width: 100%; min-height: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.cp-bctile__unit  { font-size: 11px; font-weight: 600; color: var(--cp-slate-2); margin-left: 2px; }
.cp-bctile__delta { font-size: 11px; color: var(--cp-slate); }
/* the empty <span> variant (fewer than 2 measurements) keeps tile heights equal */
.cp-bctile__spark { display: block; width: 100%; height: 24px; margin-top: 4px; }