/* Unorthodox Ops — 2.0 polish layer.
   Design tokens + unification pass. Loaded LAST so it wins ties.
   Does not rewrite existing CSS — it harmonizes it. */

/* ---------- design tokens ---------- */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 12px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5);
  --btn-h: 52px;
}

/* ---------- cards: one language ---------- */
.card,
.today-readiness, .today-workout, .today-stat, .today-week, .today-lock,
.featC-card, .sensor-lock, .lock-card, .done-panel, .fw-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
/* Normalize card padding where the base didn't set it */
.card { padding: var(--sp-5); }

/* ---------- section headers: eyebrow + title, always ---------- */
.section-head { margin: 0 0 var(--sp-3); }
.section-head .eyebrow-red,
.section-head .eyebrow-green,
.section-head .eyebrow-muted { margin: 0 0 var(--sp-1); display: block; }
.card-title, .section-title {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.5px; line-height: 1.05;
}

/* ---------- buttons: consistent sizing + press physics ---------- */
.btn-red, .btn-block, .today-cta, .ob-cta,
.ta-btn, .featg-file, .featC-refresh {
  min-height: var(--btn-h);
  border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-red:active, .today-cta:active, .ob-cta:active { transform: scale(0.98); }
.tab:active { transform: scale(0.94); }
.today-action:active, .ob-opt:active, .ob-day:active { transform: scale(0.96); }

/* ---------- Coach tab: give the insight cards air + identity ----------
   Readiness / deload / weekly report were identical stacked blocks.
   Each gets a distinct top accent + spacing so the eye can parse them. */
#view-coach .featC-sec {
  margin: var(--sp-4) 0;
  position: relative;
}
#view-coach .featC-sec + .featC-sec { margin-top: var(--sp-5); }
#view-coach #featC-ready-sec .featC-card { border-top: 3px solid var(--green); }
#view-coach #featC-deload-sec .featC-card,
#view-coach #featC-deload-sec > div:not(:empty) { border-top: 3px solid #f5a623; }
#view-coach #featC-wreport-sec .featC-card { border-top: 3px solid var(--red); }
/* Section labels above each insight card */
#view-coach #featC-ready-sec::before,
#view-coach #featC-deload-sec::before,
#view-coach #featC-wreport-sec::before {
  display: block; margin: 0 0 var(--sp-2);
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}
#view-coach #featC-ready-sec::before { content: 'Recovery'; }
#view-coach #featC-deload-sec::before { content: 'Load management'; }
#view-coach #featC-wreport-sec::before { content: 'Weekly review'; }
/* Pro AI Lab gets the same treatment */
#view-coach #featg-lab { margin-top: var(--sp-6); }
#view-coach #featg-lab::before {
  display: block; margin: 0 0 var(--sp-2);
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); content: 'AI tools';
}

/* ---------- number count-up utility ---------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- focus visibility (accessibility polish) ---------- */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--red-soft); outline-offset: 2px;
}

/* ---------- tab bar: 9 tabs fit ---------- */
.tabbar { gap: 1px; padding-left: 6px; padding-right: 6px; }
.tab { font-size: 9px; padding: 6px 0; min-width: 0; }
.tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab svg { width: 21px; height: 21px; }

/* ---------- page-head rhythm ---------- */
.page-head { margin-bottom: var(--sp-4); }
.view > *:first-child { animation: fadeUp 0.3s ease; }

/* ---------- dividers between stacked cards ---------- */
.stack-gap > * + * { margin-top: var(--sp-4); }

/* ---- Tab bar: make it unmissable but on-brand ---- */
.tabbar {
  border-top: 1px solid rgba(225, 6, 0, 0.45);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.65), 0 -1px 12px rgba(225, 6, 0, 0.12);
  background: rgba(10, 10, 12, 0.98);
}
.tabbar::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  filter: blur(1px); opacity: 0.8; pointer-events: none;
}
.tab { color: #9a9aa3; position: relative; }
.tab svg { width: 24px; height: 24px; }
.tab.on {
  background: linear-gradient(135deg, rgba(225, 6, 0, 0.32), rgba(225, 6, 0, 0.10));
  color: #fff;
  box-shadow: 0 0 18px rgba(225, 6, 0, 0.35), inset 0 0 0 1px rgba(225, 6, 0, 0.35);
}
.tab.on::after {
  content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 3px;
  background: var(--red); box-shadow: 0 0 8px var(--red);
}
.tab.on svg { color: var(--red-soft, #ff6b62); }