/* dashboard-visual-max.css — the dramatic pass for the training dashboard (/dashboard).
   Additive-only enhancement layer in the #427/#449/welcome-visual-max language: gradient
   inks, glass strips, accent rails, unified hover elevation, scroll-reveal. Every layer
   carries data or hierarchy — no decoration without function. Compositor-safe (transform/
   opacity/filter only), reduced-motion-gated, CSP-safe (pure CSS, no external assets).
   Paint on top of honest numbers, never instead of them: no layer alters any value,
   floor, or empty state the truth contracts pin. */

/* 1. headline: gradient ink — the page's one display moment */
.shell h1 {
  background: linear-gradient(92deg, var(--text) 55%, var(--ink) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 2. eyebrow + section kickers: accent tick, mono tracking (wayfinding hierarchy) */
.sec-head::before { content: "// "; color: var(--ink); }
.eyebrow, .sec-head { letter-spacing: .18em; }

/* 3. stat tiles: glass instrument strip — six numbers read as ONE readout row.
      tabular-nums keeps columns steady as values change (data legibility, not paint). */
.tiles { position: relative; }
.tile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), var(--surface));
  backdrop-filter: blur(6px);
}
.tile b { font-variant-numeric: tabular-nums; }

/* 4. intelligence modules: accent rail — one gradient spine marks the computed tier
      (progression, muscle volume, PR timeline, training load) apart from nav/cards */
.lifts, .muscles, .prtl, .loadcard, .stand {
  position: relative;
}
.lifts::before, .muscles::before, .prtl::before, .loadcard::before, .stand::before {
  content: ""; position: absolute; left: -10px; top: 4px; bottom: 4px; width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--action), var(--teal));
  opacity: .55;
 pointer-events: none;
}

/* 5. unified hover elevation — every data row is one product family (transform-only) */
.lifts li, .muscles > *, .prtl > li, .stand > *, .loadcard, .card, .pending {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lifts li:hover, .muscles > :hover, .prtl > li:hover, .stand > :hover, .loadcard:hover, .card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .55);
}

/* 6. streak + pending: the daily-return hooks get a quiet living edge */
.streak-line { border-left: 2px solid var(--teal); padding-left: 10px; }
.pending { box-shadow: 0 0 0 1px var(--line-strong), 0 10px 36px -20px var(--action); }

/* 7. progress fills (muscle bars, achievement bars): gradient fill carries the same
      two-ink semantics as the rail — position IS the data, the gradient only ranks it */
.achv .achv-fill, .muscles .mfill {
  background: linear-gradient(90deg, var(--action), var(--teal));
}
.muscles .mfill.under, .muscles .mfill.over { background: var(--warn); }

/* 8. primary buttons: depth + focus pull (the sheet-export CTA earns the weight) */
.btn-primary {
  box-shadow: 0 6px 24px -8px var(--action);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--action); }

/* 9. scroll-reveal for below-fold modules (native CSS animation-timeline; no JS) */
@supports (animation-timeline: view()) {
  .muscles, .prtl, .loadcard, .achv, .card {
    animation: dvm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%;
  }
  @keyframes dvm-rise { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* 10. motion honesty: every animated layer collapses to static under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lifts li, .muscles > *, .prtl > li, .stand > *, .loadcard, .card, .pending, .btn-primary { transition: none !important; }
  .lifts li:hover, .muscles > :hover, .prtl > li:hover, .stand > :hover, .loadcard:hover, .card:hover, .btn-primary:hover { transform: none; box-shadow: none; }
  .muscles, .prtl, .loadcard, .achv, .card { animation: none !important; opacity: 1; transform: none; }
}