/* 2026-10-10 04:45 IST - Weight Loss programme page in the coach family (style-coach.css carries the look): only the
   page's own pieces live here - the stat strip under the hero, the planned-minutes slope chart, the habit-streak week
   strip and the chart tooltip. Session-type palette (strength / cardio / CrossFit) re-picked off the
   coach lead hues (purple, green) and validated with the dataviz validator, --mode dark --pairs all, on #141414 and
   #1c1c1c: all checks PASS (worst CVD dE 12.1, normal-vision dE 17.3). Habits use the brand --accent. */
body.pg-program-weight-loss {
  --wl-strength: #2a9fd6;
  --wl-cardio: #c97824;
  --wl-functional: #d1477f;
  --wl-habit: var(--accent);
  --wl-line: #2c2c30;
}

/* 2026-10-10 04:45 IST - stat strip under the step tracker: four plain numbers from the sample week and the ramp */
body.pg-program-weight-loss .wl-stats { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.pg-program-weight-loss .wl-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--pt-card); border: 1px solid #2c2c30; border-top: 4px solid var(--accent); border-radius: 16px; }
body.pg-program-weight-loss .wl-stat-v { font: 600 clamp(28px, 3vw, 40px)/1 var(--body); color: var(--text); }
body.pg-program-weight-loss .wl-stat-l { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* 2026-10-10 04:45 IST - legends (line keys and pip keys, always with text) */
body.pg-program-weight-loss .wl-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--text); }
body.pg-program-weight-loss .wl-legend li { display: inline-flex; align-items: center; gap: 8px; }
body.pg-program-weight-loss .wl-key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--muted); flex: none; }
body.pg-program-weight-loss .wl-k-strength { background: var(--wl-strength); }
body.pg-program-weight-loss .wl-k-cardio { background: var(--wl-cardio); }
body.pg-program-weight-loss .wl-k-functional { background: var(--wl-functional); }

/* 2026-10-10 04:45 IST - slope chart of planned minutes on the coach chart panel (wide or compact by panel width) */
body.pg-program-weight-loss .wl-chart { container-type: inline-size; }
body.pg-program-weight-loss .wl-chart-box { max-width: 980px; margin: 0 auto; }
body.pg-program-weight-loss .wl-slope { display: block; width: 100%; height: auto; overflow: visible; }
body.pg-program-weight-loss .wl-slope-compact { display: none; }
body.pg-program-weight-loss .wl-slope line, body.pg-program-weight-loss .wl-slope path { vector-effect: non-scaling-stroke; }
body.pg-program-weight-loss .wl-slope .wl-gl { stroke: var(--wl-line); stroke-width: 1; }
body.pg-program-weight-loss .wl-slope .wl-base { stroke: #3a3a40; stroke-width: 1; }
body.pg-program-weight-loss .wl-slope .wl-week-rule { stroke: #26262a; stroke-width: 1; }
body.pg-program-weight-loss .wl-slope text { font-family: var(--body); }
body.pg-program-weight-loss .wl-slope .wl-ytick, body.pg-program-weight-loss .wl-slope .wl-yunit { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
body.pg-program-weight-loss .wl-slope .wl-xtick { fill: var(--text); font-size: 14px; font-weight: 600; }
body.pg-program-weight-loss .wl-slope .wl-xtotal { fill: var(--muted); font-size: 13px; }
body.pg-program-weight-loss .wl-slope .wl-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
body.pg-program-weight-loss .wl-slope .wl-dot { stroke: #141414; stroke-width: 2; }
body.pg-program-weight-loss .wl-slope .wl-s-strength .wl-line { stroke: var(--wl-strength); }
body.pg-program-weight-loss .wl-slope .wl-s-strength .wl-dot { fill: var(--wl-strength); }
body.pg-program-weight-loss .wl-slope .wl-s-cardio .wl-line { stroke: var(--wl-cardio); }
body.pg-program-weight-loss .wl-slope .wl-s-cardio .wl-dot { fill: var(--wl-cardio); }
body.pg-program-weight-loss .wl-slope .wl-s-functional .wl-line { stroke: var(--wl-functional); }
body.pg-program-weight-loss .wl-slope .wl-s-functional .wl-dot { fill: var(--wl-functional); }
body.pg-program-weight-loss .wl-slope .wl-end { fill: #c9c8c1; font-size: 14px; }
body.pg-program-weight-loss .wl-slope .wl-end-v { fill: var(--text); font-weight: 700; }
body.pg-program-weight-loss .wl-slope .wl-leader { stroke: var(--muted); stroke-width: 1; }
body.pg-program-weight-loss .wl-slope .wl-hit { fill: transparent; transition: fill .15s; }
body.pg-program-weight-loss .wl-slope .wl-hit.is-hot { fill: rgba(255, 255, 255, .05); }
@container (max-width: 620px) {
  body.pg-program-weight-loss .wl-slope-wide { display: none; }
  body.pg-program-weight-loss .wl-slope-compact { display: block; }
}

/* 2026-10-10 04:45 IST - the four planned weeks under the chart, linked to the chart columns */
body.pg-program-weight-loss .wl-weeks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; }
body.pg-program-weight-loss .wl-week { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #222226; border: 1px solid transparent; transition: border-color .2s; }
body.pg-program-weight-loss .wl-week b { font: 400 20px/1 var(--display); letter-spacing: .05em; color: var(--accent); }
body.pg-program-weight-loss .wl-week span { font-weight: 700; font-size: 14px; color: var(--text); }
body.pg-program-weight-loss .wl-week small { font-size: 13px; line-height: 1.45; color: var(--muted); }
body.pg-program-weight-loss .wl-week:hover, body.pg-program-weight-loss .wl-week.is-hot { border-color: rgba(255, 210, 0, .55); }

/* 2026-10-10 04:45 IST - habit-streak week strip (a real table) on the coach chart panel */
body.pg-program-weight-loss .wl-streak-panel { container-type: inline-size; }
body.pg-program-weight-loss .wl-pip-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; font: 700 11px/1 var(--body); color: #111; background: var(--muted); }
body.pg-program-weight-loss .wl-pip-key.wl-t-strength { background: var(--wl-strength); }
body.pg-program-weight-loss .wl-pip-key.wl-t-cardio { background: var(--wl-cardio); }
body.pg-program-weight-loss .wl-pip-key.wl-t-functional { background: var(--wl-functional); }
body.pg-program-weight-loss .wl-pip-key.wl-k-habit { background: var(--wl-habit); width: 16px; min-width: 16px; height: 16px; border-radius: 50%; }
body.pg-program-weight-loss .wl-streak { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
body.pg-program-weight-loss .wl-streak th, body.pg-program-weight-loss .wl-streak td { padding: 10px 0; text-align: center; border-top: 1px solid var(--wl-line); }
body.pg-program-weight-loss .wl-streak thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
body.pg-program-weight-loss .wl-streak thead th:first-child { width: 30%; }
body.pg-program-weight-loss .wl-streak thead th:last-child { width: 12%; }
body.pg-program-weight-loss .wl-streak abbr { text-decoration: none; }
body.pg-program-weight-loss .wl-streak tbody th { text-align: left; font-weight: 600; font-size: 14px; color: var(--text); padding-right: 14px; line-height: 1.35; }
body.pg-program-weight-loss .wl-cell { position: relative; }
body.pg-program-weight-loss .wl-cell .wl-pip { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; font: 700 11px/1 var(--body); color: #111; border: 2px solid #3a3a40; }
body.pg-program-weight-loss .wl-cell.wl-on .wl-pip { border: 2px solid #141414; }
body.pg-program-weight-loss .wl-cell.wl-t-strength .wl-pip { background: var(--wl-strength); }
body.pg-program-weight-loss .wl-cell.wl-t-cardio .wl-pip { background: var(--wl-cardio); }
body.pg-program-weight-loss .wl-cell.wl-t-functional .wl-pip { background: var(--wl-functional); }
body.pg-program-weight-loss .wl-cell.wl-habit .wl-pip { width: 20px; height: 20px; background: var(--wl-habit); }
body.pg-program-weight-loss .wl-cell.wl-chain::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; height: 4px; margin-top: -2px; background: #3a3a40; z-index: 0; }
body.pg-program-weight-loss .wl-cell.wl-habit.wl-chain::before { background: rgba(255, 210, 0, .45); }
body.pg-program-weight-loss .wl-cell .wl-min { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.pg-program-weight-loss .wl-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
body.pg-program-weight-loss .wl-count b { color: var(--text); font-size: 16px; }
@container (max-width: 560px) {
  body.pg-program-weight-loss .wl-streak, body.pg-program-weight-loss .wl-streak thead, body.pg-program-weight-loss .wl-streak tbody { display: block; }
  body.pg-program-weight-loss .wl-streak tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.3fr); align-items: center; border-top: 1px solid var(--wl-line); padding: 8px 0; }
  body.pg-program-weight-loss .wl-streak thead tr { border-top: 0; padding-top: 0; }
  body.pg-program-weight-loss .wl-streak th, body.pg-program-weight-loss .wl-streak td { border-top: 0; padding: 4px 0; }
  body.pg-program-weight-loss .wl-streak thead th:first-child { display: none; }
  body.pg-program-weight-loss .wl-streak thead th { width: auto; font-size: 11px; letter-spacing: .04em; }
  body.pg-program-weight-loss .wl-streak tbody th { grid-column: 1 / -1; padding: 2px 0 6px; }
  body.pg-program-weight-loss .wl-cell .wl-pip { width: 26px; height: 26px; }
  body.pg-program-weight-loss .wl-cell .wl-min { font-size: 11px; }
  body.pg-program-weight-loss .wl-count { font-size: 11px; white-space: normal; line-height: 1.2; }
  body.pg-program-weight-loss .wl-count b { font-size: 14px; }
}

/* 2026-10-10 04:45 IST - tooltip for the chart columns (created by program-weight-loss.js) */
body.pg-program-weight-loss .wl-tip-pop { position: fixed; z-index: 90; max-width: 300px; padding: 8px 12px; border-radius: 8px; background: #000; border: 1px solid var(--line); color: var(--text); font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }

/* 2026-10-10 04:45 IST - tablets and phones */
@media (max-width: 1180px) {
  body.pg-program-weight-loss .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  body.pg-program-weight-loss .wl-stats { gap: 8px; }
  body.pg-program-weight-loss .wl-stat { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pg-program-weight-loss .wl-week, body.pg-program-weight-loss .wl-slope .wl-hit { transition: none; }
}