/* BUFF OS v66 — slot rows, the 100-day calendar and the day editor. */
.v66-rest { opacity: .62; }
.v66-resttag { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt3); padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); }
.v66-calbtn { width: 100%; margin-top: 12px; min-height: 44px; border-radius: 14px; font-family: inherit;
  font-size: 13.5px; font-weight: 800; color: var(--c, #ff7f5c); background: rgba(var(--crgb, 255, 127, 92), .09);
  border: 1px solid rgba(var(--crgb, 255, 127, 92), .3); cursor: pointer; }
.v66-calbtn:active { transform: scale(.98); }

/* calendar */
.v66-cal { margin-top: 12px; }
.v66-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 5px; }
.v66-dow span { text-align: center; font-size: 10px; font-weight: 800; color: var(--txt3); }
.v66-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.v66-grid .pad { aspect-ratio: 1; }
.v66-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; border-radius: 9px; cursor: pointer; font-family: inherit; padding: 0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); color: var(--txt2); }
.v66-day b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v66-day span { font-size: 8.5px; font-weight: 700; opacity: .6; }
.v66-day.full { background: rgba(var(--crgb, 255, 127, 92), .85); border-color: transparent; color: #1c0d06; }
.v66-day.part { background: rgba(var(--crgb, 255, 127, 92), .3); border-color: rgba(var(--crgb, 255, 127, 92), .4); color: var(--txt); }
.v66-day.miss { background: rgba(255, 90, 90, .14); border-color: rgba(255, 90, 90, .3); }
.v66-day.now { box-shadow: 0 0 0 2px var(--bg, #0b0b0f), 0 0 0 3.5px var(--c, #ff7f5c); color: var(--txt); }
.v66-day.fut { background: rgba(255, 255, 255, .03); }
.v66-day.ed::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: #6fb8ff; }
.v66-day:active { transform: scale(.94); }
.v66-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; font-size: 10.5px;
  font-weight: 700; color: var(--txt3); }
.v66-legend i { width: 11px; height: 11px; border-radius: 3px; margin-left: 7px; background: rgba(255, 255, 255, .06); }
.v66-legend i:first-child { margin-left: 0; }
.v66-legend i.full { background: rgba(var(--crgb, 255, 127, 92), .85); }
.v66-legend i.part { background: rgba(var(--crgb, 255, 127, 92), .3); }
.v66-legend i.miss { background: rgba(255, 90, 90, .18); }
.v66-legend i.now { box-shadow: 0 0 0 1.5px var(--c, #ff7f5c); }
.v66-legend i.ed { background: #6fb8ff; border-radius: 50%; }
.v66-hint { margin-top: 10px; font-size: 11.5px; line-height: 1.45; font-weight: 600; color: var(--txt3); }

/* day editor */
.v66-sheet { --c: #ff7f5c; --crgb: 255, 127, 92; padding: 4px 2px 18px; }
.v66-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.v66-sheet h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.v66-top small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--txt3); }
.v66-reset { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 12px; font-family: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--txt2); background: var(--elev2); border: 1px solid var(--line); }
.v66-erow { padding: 12px 13px; margin-bottom: 9px; border-radius: 16px; background: var(--elev2); border: 1px solid var(--line2); }
.v66-erow.off { opacity: .66; }
.v66-eh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.v66-eh span { font-size: 17px; }
.v66-eh b { font-size: 15px; font-weight: 800; }
.v66-eh em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--c); }
.v66-eh em.ok { color: #5bb98c; } .v66-eh em.rest { color: var(--txt3); }
.v66-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.v66-opt { padding: 8px 11px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--txt2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); cursor: pointer; }
.v66-opt.on { background: var(--c); border-color: transparent; color: #1c0d06; font-weight: 800; }
.v66-opt.v66-off.on { background: rgba(255, 255, 255, .16); color: var(--txt); }
.v66-opt:active { transform: scale(.95); }
.v66-note2 { font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--txt3); }
.v66-sheet .c100-cta { margin-top: 6px; }

/* The movement for the day carries its own traffic light. Everything being green
   made the colour meaningless — now the name itself says how often you can
   repeat it, which is the thing worth knowing at a glance. */
.v66-ex { font-style: normal; font-weight: 800; letter-spacing: .005em; color: #3ff08f; }
.c100-row.tier-g .v66-ex { color: #3ff08f; }
.c100-row.tier-a .v66-ex { color: #ffb259; }
.c100-row.tier-r .v66-ex { color: #ff8585; }
.v66-ex.v66-exrest { color: var(--txt3) !important; font-weight: 700; }

/* the ⓘ on a challenge row — opens the guide for today's movement */
.v66-i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; margin-right: 2px;
  font-family: inherit; font-size: 14px; font-weight: 800; font-style: italic; line-height: 1;
  color: var(--txt2); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v66-i:active { transform: scale(.9); }
.c100-row.c100-ok .v66-i { border-color: rgba(91, 185, 140, .35); }

/* Traffic light on the challenge rows — the same tiers as the Coach library.
   Explained there, not here: on Today it only needs to be recognisable. */
.c100-row.tier-g { background: linear-gradient(180deg, rgba(63, 240, 143, .13), rgba(63, 240, 143, .05)) !important;
  border-color: rgba(63, 240, 143, .3) !important; }
.c100-row.tier-a { background: linear-gradient(180deg, rgba(240, 180, 90, .13), rgba(240, 180, 90, .05)) !important;
  border-color: rgba(240, 180, 90, .3) !important; }
.c100-row.tier-r { background: linear-gradient(180deg, rgba(255, 105, 105, .13), rgba(255, 105, 105, .05)) !important;
  border-color: rgba(255, 105, 105, .3) !important; }
/* A finished row keeps its tier colour; the ✓ and the ring say it is done. */
.c100-row.c100-ok.tier-g, .c100-row.c100-ok.tier-a, .c100-row.c100-ok.tier-r { opacity: .88; }
.c100-row.c100-ok .c100-ico i { color: #5bb98c; }

/* The outer card goes back to the ordinary dark card. It was tinted ember, and
   an ember card behind amber and red rows swallows exactly the signal the
   traffic light is there to give. The eyebrow keeps the accent colour so the
   card still reads as the challenge. */
#homeC100 .c100-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-line) !important;
  box-shadow: none !important;
}

/* ---- v285: the calendar is months and dates now, not 100 numbered squares ---- */
.v66-calsum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.v66-calsum b { font-size: 13.5px; font-weight: 800; }
.v66-calsum span { font-size: 11.5px; font-weight: 700; color: var(--txt3); font-variant-numeric: tabular-nums; }
.v66-mon { margin: 14px 0 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--txt2, var(--txt)); }
.v66-grid .pad.off { display: flex; align-items: flex-start; justify-content: center; aspect-ratio: 1; padding-top: 5px; }
.v66-grid .pad.off b { font-size: 11px; font-weight: 700; color: var(--txt3); opacity: .22; }
.v66-day { justify-content: flex-start; padding-top: 5px; gap: 3px; }
.v66-day b { font-size: 12.5px; }
.v66-dots { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap;
  max-width: 90%; line-height: 1; }
.v66-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; }
.v66-dots i.on { opacity: 1; }
.v66-dots em { font-size: 8px; font-weight: 800; font-style: normal; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt3); opacity: .75; }
.v66-day.rest { background: rgba(255,255,255,.02); border-style: dashed; }
.v66-day.full .v66-dots i { background: #1c0d06; }