/* ════════════════════════════════════════════════════════════════════════
   FIZZEEK Calendar v2 (Round 202 — May 3, 2026)

   Single source of truth for the muscle-memory.html calendar.
   Modeled on Apple Fitness, Nike Training Club, Peloton:
     • Pure flat layout — zero per-cell tiles/borders/shadows
     • Day numbers in equipment colors (orange free / blue cable)
     • TODAY = filled brand-gold circle anchor (~36×36) with bold black
       digit. Single visual anchor like Apple's red.
     • SELECTED (≠ today) = bold + larger digit only, equipment color
     • COMPLETED = small green dot below digit
     • PR + COMPLETED = gold dot
     • REST = diagonal slash + dim, equipment color stays
     • Out-of-month = 0.30 opacity (handled by JS inline style)

   Scoped to [data-fzcal="v2"] attribute that JS now sets on every cell.
   That attribute makes selectors uniquely matched without legacy rule
   competition. Loaded LAST in muscle-memory.html so source-order
   tiebreaks favor these rules where specificity ties.
   ════════════════════════════════════════════════════════════════════════ */

/* ──────────── 1. CELL CHROME RESET — both views, both modes ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"],
html body section.week-nav .day-col[data-fzcal="v2"].selected,
html body section.week-nav .day-col[data-fzcal="v2"].today,
html body section.week-nav .day-col[data-fzcal="v2"].completed,
html body section.week-nav .day-col[data-fzcal="v2"].day-rest,
html body section.week-nav .day-col[data-fzcal="v2"].day-pr,
html body #daysRow .day-col[data-fzcal="v2"],
html body #daysRow .day-col[data-fzcal="v2"].mn-day-cell,
html body #daysRow .day-col[data-fzcal="v2"].selected,
html body #daysRow .day-col[data-fzcal="v2"].today,
html body #daysRow .day-col[data-fzcal="v2"].completed,
html body #daysRow .day-col[data-fzcal="v2"].day-rest,
html body #daysRow .day-col[data-fzcal="v2"].selected.today,
html body.light-mode section.week-nav .day-col[data-fzcal="v2"],
html body.light-mode section.week-nav .day-col[data-fzcal="v2"].selected,
html body.light-mode section.week-nav .day-col[data-fzcal="v2"].today,
html body.light-mode #daysRow .day-col[data-fzcal="v2"],
html body.light-mode #daysRow .day-col[data-fzcal="v2"].selected,
html body.light-mode #daysRow .day-col[data-fzcal="v2"].today,
html body.light-mode #daysRow .day-col[data-fzcal="v2"].selected.today,
html body.month-view-active #daysRow .day-col[data-fzcal="v2"].mn-day-cell.selected,
html body.month-view-active #daysRow .day-col[data-fzcal="v2"].mn-day-cell.selected.today,
html body.light-mode.month-view-active #daysRow .day-col[data-fzcal="v2"].mn-day-cell.selected,
html body.light-mode.month-view-active #daysRow .day-col[data-fzcal="v2"].mn-day-cell.selected.today{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-color:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  outline-offset:0 !important;
  transform:none !important;
  padding:6px 0 !important;
  z-index:auto !important;
  position:relative !important;
}

/* Inner pill .wm-day-body / .day-body — strip surface */
html body section.week-nav .day-col[data-fzcal="v2"] .wm-day-body,
html body section.week-nav .day-col[data-fzcal="v2"] .day-body,
html body section.week-nav .day-col[data-fzcal="v2"].selected .wm-day-body,
html body section.week-nav .day-col[data-fzcal="v2"].today .wm-day-body,
html body.light-mode section.week-nav .day-col[data-fzcal="v2"] .wm-day-body,
html body.light-mode section.week-nav .day-col[data-fzcal="v2"] .day-body{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Equipment-color underline bars (.wm-fill) — hidden */
html body section.week-nav .day-col[data-fzcal="v2"] .wm-fill,
html body.light-mode section.week-nav .day-col[data-fzcal="v2"] .wm-fill{
  display:none !important;
}

/* PR-trophy SVG + any trophy class — hidden */
html body section.week-nav .day-col[data-fzcal="v2"] .day-pr-trophy,
html body section.week-nav .day-col[data-fzcal="v2"] [class*="trophy"],
html body #daysRow .day-col[data-fzcal="v2"] .day-pr-trophy,
html body #daysRow .day-col[data-fzcal="v2"] [class*="trophy"]{
  display:none !important;
}

/* Day-letter inside individual month-grid cells — hidden (column
   header at top labels them). Week-strip keeps eyebrow letter. */
html body #daysRow .day-col[data-fzcal="v2"].mn-day-cell .day-letter,
html body #daysRow .day-col[data-fzcal="v2"].mn-day-cell .wm-day-letter{
  display:none !important;
}

/* ──────────── 2. DAY NUMBER — base styling ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"] .day-number,
html body section.week-nav .day-col[data-fzcal="v2"] .wm-day-num,
html body #daysRow .day-col[data-fzcal="v2"] .mn-day-num,
html body #daysRow .day-col[data-fzcal="v2"] .day-number{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  margin:0 auto !important;
  font-size:17px !important;
  font-weight:600 !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:50% !important;
  text-shadow:none !important;
  text-decoration:none !important;
  color:rgba(255,255,255,0.92) !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"] .day-number,
body.light-mode section.week-nav .day-col[data-fzcal="v2"] .wm-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"] .mn-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"] .day-number{
  color:rgba(0,0,0,0.92) !important;
}

/* ──────────── 3. EQUIPMENT-COLORED DIGITS ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"][data-week-type="free"] .day-number,
html body section.week-nav .day-col[data-fzcal="v2"][data-week-type="free"] .wm-day-num,
html body #daysRow .day-col[data-fzcal="v2"][data-week-type="free"] .mn-day-num,
html body #daysRow .day-col[data-fzcal="v2"][data-week-type="free"] .day-number{
  color:#E8924A !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"][data-week-type="free"] .day-number,
body.light-mode section.week-nav .day-col[data-fzcal="v2"][data-week-type="free"] .wm-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"][data-week-type="free"] .mn-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"][data-week-type="free"] .day-number{
  color:#C47A30 !important;
}
html body section.week-nav .day-col[data-fzcal="v2"][data-week-type="cable"] .day-number,
html body section.week-nav .day-col[data-fzcal="v2"][data-week-type="cable"] .wm-day-num,
html body #daysRow .day-col[data-fzcal="v2"][data-week-type="cable"] .mn-day-num,
html body #daysRow .day-col[data-fzcal="v2"][data-week-type="cable"] .day-number{
  color:#7EB5E2 !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"][data-week-type="cable"] .day-number,
body.light-mode section.week-nav .day-col[data-fzcal="v2"][data-week-type="cable"] .wm-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"][data-week-type="cable"] .mn-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"][data-week-type="cable"] .day-number{
  color:#4A8BC2 !important;
}

/* ──────────── 4. REST DAY — neutral text + slash + dim ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"].day-rest,
html body #daysRow .day-col[data-fzcal="v2"].day-rest{
  opacity:0.55 !important;
}
html body section.week-nav .day-col[data-fzcal="v2"].day-rest .day-number,
html body section.week-nav .day-col[data-fzcal="v2"].day-rest .wm-day-num,
html body #daysRow .day-col[data-fzcal="v2"].day-rest .mn-day-num,
html body #daysRow .day-col[data-fzcal="v2"].day-rest .day-number{
  color:#fff !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"].day-rest .day-number,
body.light-mode section.week-nav .day-col[data-fzcal="v2"].day-rest .wm-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"].day-rest .mn-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"].day-rest .day-number{
  color:#000 !important;
}

/* ──────────── 5. TODAY = FILLED GOLD CIRCLE ANCHOR ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"].today .day-number,
html body section.week-nav .day-col[data-fzcal="v2"].today .wm-day-num,
html body #daysRow .day-col[data-fzcal="v2"].today .mn-day-num,
html body #daysRow .day-col[data-fzcal="v2"].today .day-number{
  background:#D9B878 !important;
  color:#000 !important;
  font-weight:900 !important;
  border:0 !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"].today .day-number,
body.light-mode section.week-nav .day-col[data-fzcal="v2"].today .wm-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"].today .mn-day-num,
body.light-mode #daysRow .day-col[data-fzcal="v2"].today .day-number{
  background:#8B6A14 !important;
  color:#fff !important;
}

/* ──────────── 6. SELECTED (NOT TODAY) = hollow gold ring around digit ────────────
   R210 (May 3): user can tap any day to view its workout. Without a visual
   indicator on the grid, only the banner card below updates and the user
   can't tell which day they tapped. Hollow gold ring around the digit
   solves this without competing with today's filled gold anchor. */
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .day-number,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .wm-day-num,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .mn-day-num,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .day-number{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  background:transparent !important;
  border:2px solid #D9B878 !important;
  border-radius:50% !important;
  font-weight:800 !important;
  font-size:17px !important;
  line-height:1 !important;
  /* color stays equipment color from R195 — orange/blue/neutral */
}
body.light-mode section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .day-number,
body.light-mode section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .wm-day-num,
body.light-mode #daysRow .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .mn-day-num,
body.light-mode #daysRow .day-col.day-col.day-col[data-fzcal="v2"].selected:not(.today) .day-number{
  border:2px solid #8B6A14 !important;
}

/* ──────────── 7. COMPLETION DOT (NOT TODAY — gold circle wins) ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"].completed:not(.today)::after,
html body #daysRow .day-col[data-fzcal="v2"].completed:not(.today)::after{
  content:'' !important;
  position:absolute !important;
  /* R217: explicit reset so legacy ::after rules' top/right/background-image
     don't merge with ours and cause stretched/skewed dots. */
  top:auto !important;
  right:auto !important;
  bottom:3px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#22c55e !important;
  background-image:none !important;
  display:block !important;
  z-index:5 !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"].completed:not(.today)::after,
body.light-mode #daysRow .day-col[data-fzcal="v2"].completed:not(.today)::after{
  background:#16a34a !important;
}

/* PR + COMPLETED → gold dot instead of green.
   R213: bumped to stacked-class specificity so the gold always wins
   over any legacy green-paint rule. Also slightly bigger (5→6px) +
   gold glow to read as the premium "PR achieved" status.
   R214: dropped :not(.today) so today + PR also shows the gold dot
   beneath today's gold filled circle. PR is a special status that
   should always be visible, even on today. */
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].day-pr.completed::after,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"].day-pr.completed::after{
  content:'' !important;
  position:absolute !important;
  /* R217: explicit reset on top/right/background-image so legacy ::after
     properties don't merge with ours. */
  top:auto !important;
  right:auto !important;
  bottom:3px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  display:block !important;
  background:#D9B878 !important;
  background-image:none !important;
  box-shadow:0 0 4px rgba(217,184,120,0.55) !important;
  z-index:5 !important;
}
body.light-mode section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].day-pr.completed::after,
body.light-mode #daysRow .day-col.day-col.day-col[data-fzcal="v2"].day-pr.completed::after{
  background:#8B6A14 !important;
  box-shadow:0 0 3px rgba(139,106,20,0.45) !important;
}

/* ──────────── 8. DAY-LETTER eyebrow (week strip only) ──────────── */
html body section.week-nav .day-col[data-fzcal="v2"]:not(.mn-day-cell) .day-letter,
html body section.week-nav .day-col[data-fzcal="v2"]:not(.mn-day-cell) .wm-day-letter{
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.55) !important;
  margin-bottom:4px !important;
}
body.light-mode section.week-nav .day-col[data-fzcal="v2"]:not(.mn-day-cell) .day-letter,
body.light-mode section.week-nav .day-col[data-fzcal="v2"]:not(.mn-day-cell) .wm-day-letter{
  color:rgba(0,0,0,0.55) !important;
}

/* ──────────── 9. R217: KILL legacy underline-bar ::before pseudos ────────────
   Multiple legacy rules paint colored bars at the bottom of cells:
     • R104: equipment-color bars on every non-rest day cell (line 6400-6425)
     • R104b: completed-day stronger bars (lines 5620-5640, 6042-6080)
     • R104c: green-check ::after at top-right of completed cells (line 7663)
   Stacked-class specificity (.day-col.day-col.day-col) forces them off so
   the fzcal-v2 ::after dot is the single source of truth. */
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"]::before,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"][data-week-type="free"]::before,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"][data-week-type="cable"]::before,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].completed::before,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].completed[data-week-type="free"]::before,
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].completed[data-week-type="cable"]::before,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"]::before,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"][data-week-type="free"]::before,
html body #daysRow .day-col.day-col.day-col[data-fzcal="v2"][data-week-type="cable"]::before{
  content:none !important;
  display:none !important;
  background:transparent !important;
  background-image:none !important;
}

/* Also kill the legacy green-check ::after on COMPLETED cells that don't
   match my fzcal-v2 ::after rule (because they're missing one of the
   classes I check). The legacy check renders top:3px right:3px which
   competes with my fzcal dot. */
html body section.week-nav .day-col.day-col.day-col[data-fzcal="v2"].completed:not(.today):not(.day-pr)::after{
  /* this matches R213 green-dot rule scope; explicitly reset legacy bg-image */
  background-image:none !important;
  top:auto !important;
  right:auto !important;
}