/* ============================================================
   enhance.css — shared upgrades layered over the health app
   Loaded LAST so it overrides each page's inline :root.
   Covers: #8 contrast, #7 desktop layout, #10 palette unify
   ============================================================ */

:root {
  /* #10 Palette unify — single sage anchor across all pages
     (index used #f3f5f1, training/sleep used #f5f5f7). */
  --bg: #f3f5f1;
  --surface: #ffffff;
  --surface-2: #ecefe8;

  /* #8 Contrast — darken muted tones to pass WCAG AA for small text.
     Was --muted #6e6e73/#6a6c66, --muted-2 #86868b/#8b8d86 (failed AA). */
  --muted: #585a52;
  --muted-2: #6e7066;
}

/* ===== #7 Desktop / tablet layout ===== */
@media (min-width: 760px) {
  .container, .wrap { max-width: 880px; }

  /* Pinned health cards: 2-up on wide screens */
  .pin-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .pin-card { min-height: 168px; }

  /* Discipline KPI grids breathe wider */
  .kpis { gap: 12px; }
  .kpi.hero { padding: 22px 24px; }

  /* Reports list reads better with a touch more room */
  .module-list .mod-row { padding: 16px 22px; }
}

@media (min-width: 1100px) {
  .container, .wrap { max-width: 1040px; }
  .pin-stack { grid-template-columns: repeat(2, 1fr); }
}

/* ===== injected components (readiness, knee strip, staleness) ===== */
.ah-staleness {
  display: flex; align-items: center; gap: 10px;
  background: rgba(160,107,0,0.10);
  border: 1px solid rgba(160,107,0,0.30);
  color: #7a5200;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px; font-weight: 600;
  margin: 0 2px 14px;
}
.ah-staleness svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.2; }
.ah-staleness.ok { background: rgba(46,111,61,0.08); border-color: rgba(46,111,61,0.22); color: #2e6f3d; }

/* Readiness pinned card */
.pin-card.cat-ready .pc-label svg { color: var(--teal); }
.ready-ring { width: 56px; height: 56px; flex-shrink: 0; }
.ready-ring text { font: 800 19px Inter, sans-serif; fill: var(--ink); }

/* Knee / ACL trend strip */
.knee-card { padding: 16px 18px 18px; }
.knee-card .kc-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.knee-card .kc-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.knee-card .kc-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.knee-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.knee-dots span {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  background: var(--muted-2);
}
.knee-dots span.green { background: #2e6f3d; }
.knee-dots span.yellow { background: #a06b00; }
.knee-dots span.red { background: #b3261e; }
.knee-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.knee-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }