/* ── SEASONAL & FESTIVAL CHALLENGES ─────────────────────────────────────
   Two surfaces: the Home CTA pill (a sibling of .home-pill-btn in the row
   above the section gallery) and the challenge section further down Home,
   directly above "Your study stats".

   That section deliberately reuses study-stats.css's .ss-rows / .ss-row /
   .ss-m / .ss-heat classes rather than declaring a second card system — the
   challenge panel is meant to read as an extension of the stats panel below
   it, not as a different application. Only what is genuinely new lives here.

   Three rules inherited from that panel and kept:
     1. NOTHING below 0.8rem.
     2. Accent arrives through a custom property set once per theme, and NEVER
        through color-mix() — a browser that drops the declaration would strip
        the one distinction a themed surface exists to make.
     3. Anything on Home is OPAQUE. Home paints an animated scene canvas
        behind the page, so alpha shows moving stars through the content.
*/

/* ── the Home CTA ───────────────────────────────────────────────
   Plain purple with white text, deliberately NOT themed per festival: it sits
   between two neutral pills, and a pill that changes colour six times a year
   reads as a different control each time. The theme lives on the section it
   scrolls to, where there is room for it to mean something. */

/* The slot app-legacy leaves in the pill row. `display: contents` makes the
   BUTTON the flex item rather than this wrapper, so it takes the row's gap,
   its wrapping and the <400px column stacking exactly like its two siblings.
   An empty slot then occupies nothing at all — a plain empty flex child would
   still claim one `gap` of space on Home for every signed-out visitor. */
#home-challenge-cta { display: contents; }

.home-pill-btn.ch-cta {
  background: #6C3FD1;
  border-color: var(--violet-streak, #9B6DFF);
  color: #fff;
}
.home-pill-btn.ch-cta:hover {
  background: #7B4CE6;
  border-color: var(--violet-streak, #9B6DFF);
}
.home-pill-btn.ch-cta:focus-visible {
  outline: 2px solid var(--violet-streak, #9B6DFF);
  outline-offset: 2px;
}
.home-pill-btn.ch-cta .home-pill-ico { opacity: 0.85; }

/* ── theme tokens ───────────────────────────────────────────────
   --ch-acc is the challenge's hue. Restrained on purpose: it tints this one
   section's headings, numbers and bar, and must never make Home look like a
   different product. */

.ch-section { --ch-acc: var(--violet-streak, #9B6DFF); }
.ch-section[data-theme="diwali"]    { --ch-acc: #FFC24D; }
.ch-section[data-theme="holi"]      { --ch-acc: #FF8FB0; }
.ch-section[data-theme="christmas"] { --ch-acc: #6FE8A4; }
.ch-section[data-theme="dussehra"]  { --ch-acc: #FF9A6B; }
.ch-section[data-theme="ganesh"]    { --ch-acc: #FFB55C; }
.ch-section[data-theme="gurunanak"] { --ch-acc: #FFD57A; }
.ch-section[data-theme="spring"]    { --ch-acc: #7BE8A8; }
.ch-section[data-theme="summer"]    { --ch-acc: #FFCE5C; }
.ch-section[data-theme="fall"]      { --ch-acc: #FF9E63; }
.ch-section[data-theme="winter"]    { --ch-acc: #7FD6FF; }

/* ── the section ────────────────────────────────────────────────
   Same shell as .home-stats-section so the two read as one pair, with the
   accent on the border instead of brand blue. */

.ch-section {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 2.5rem auto;
  padding: 1.5rem 1rem 1.3rem;
  background: linear-gradient(168deg, #0a1024 0%, #0b0d22 55%, #080a1a 100%);
  border: 1px solid var(--ch-acc);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  /* The nav is fixed at 64px; without this the smooth scroll from the CTA
     parks the heading underneath it. */
  scroll-margin-top: 84px;
  outline: none;
}
.ch-section[hidden] { display: none; }

/* Landing here from the CTA — a one-shot ring so the eye finds the panel it
   was just sent to. Mirrors .home-stats-section.is-flash. */
.ch-section.is-flash { animation: chFlash 1.4s ease-out 1; }
@keyframes chFlash {
  0%   { box-shadow: 0 0 0 0 rgba(155, 109, 255, 0.5), 0 20px 60px rgba(0,0,0,0.5); }
  60%  { box-shadow: 0 0 0 10px rgba(155, 109, 255, 0), 0 20px 60px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.045); }
}

.ch-head { margin-bottom: 1rem; }
.ch-eyebrow {
  margin: 0 0 0.3rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-acc);
}
.ch-title {
  margin: 0 0 0.35rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f2f7ff;
}
.ch-tagline {
  margin: 0 0 0.45rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: rgba(213, 230, 255, 0.82);
}
.ch-dates {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(170, 196, 232, 0.8);
}

/* Live-challenge switcher — only rendered when more than one is running. */
.ch-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.ch-switch-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #131a35;
  color: rgba(220, 235, 255, 0.85);
  cursor: pointer;
}
.ch-switch-btn.is-on {
  background: var(--ch-acc);
  border-color: var(--ch-acc);
  color: #071021;
}
.ch-switch-btn:focus-visible { outline: 2px solid var(--ch-acc); outline-offset: 2px; }

/* ── overall progress ─────────────────────────────────────────── */

.ch-overall {
  margin: 0 0 1rem;
  padding: 1rem 0.9rem;
  border-radius: 16px;
  background: #0d1330;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.ch-verdict {
  margin: 0 0 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ch-acc);
}
.ch-pct {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ch-acc);
}

/* Starts at zero and grows to --w once .ch-body gains `is-drawn`, so the bar
   sweeps up on arrival rather than appearing already full. Visible movement
   toward completion is the whole reason to show a bar at all. */
.ch-bar {
  height: 10px;
  margin: 0.7rem 0 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ch-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ch-acc);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-body.is-drawn .ch-bar-fill { width: var(--w, 0%); }

.ch-standing {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(213, 230, 255, 0.82);
}
.ch-standing-2 { margin-top: 0.3rem; color: rgba(170, 196, 232, 0.75); }

/* ── the four goals ─────────────────────────────────────────────
   .ss-rows / .ss-row come from study-stats.css — the same "Your daily rounds"
   list, because every row here is likewise a way into the section that moves
   that goal. Only the spacing is new. */

.ch-rows { margin: 0 0 0.9rem; }

/* .ss-row is display:block; this only turns it into two columns so each goal
   can carry its own dial beside the text. Everything else — separators, hover,
   focus ring, typography — is inherited from .ss-row unchanged. */
.ch-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0.6rem;
}
.ch-goal-main { min-width: 0; }
.ch-goal-gauge { line-height: 0; }
.ch-goal-chev { display: flex; align-items: center; }
/* Small enough to read as an indicator beside the row rather than as the
   card-sized chart it is in the stats panel. */
.ch-goal-gauge .ss-gauge { width: 68px; max-width: 68px; }

/* .ss-gauge-fg ships at `stroke-dasharray: 0 100` and only draws under
   `.ss-body.is-drawn` — a class study-stats.js puts on its OWN container after
   paint. Borrowing the gauge without that ancestor leaves every arc pinned at
   zero, silently and permanently: the exact "a rule that does nothing looks
   like the JavaScript never ran" failure this codebase documents. The section
   opts in with its own drawn state, added a frame after the body is written so
   the sweep still animates up from zero. */
.ch-body.is-drawn .ss-gauge-fg { stroke-dasharray: var(--p, 0) 100; stroke-linecap: round; }
.ch-body.is-drawn .ss-gauge-fg.is-zero { stroke-linecap: butt; }

@media (max-width: 380px) {
  .ch-goal-gauge .ss-gauge { width: 56px; max-width: 56px; }
}

/* ── the calendar ───────────────────────────────────────────────
   The stats heatmap over the challenge's own window rather than a fixed
   30 days, which is why .ss-heat takes a column count. */
.ch-cal { --ss-heat-cols: 10; }

/* ── completion tally ───────────────────────────────────────────── */

.ch-tally {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.ch-tally li {
  padding: 0.8rem 0.5rem;
  border-radius: 14px;
  background: #0d1330;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.ch-tally b {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.35rem;
  color: var(--ch-acc);
}
.ch-tally span {
  display: block;
  margin-top: 0.2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(170, 196, 232, 0.8);
}

/* ── actions ────────────────────────────────────────────────────── */

.ch-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.ch-btn {
  flex: 1;
  min-height: 46px;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
/* The one filled control in the section, so it reads as the primary action. */
.ch-btn.is-primary { background: var(--ch-acc); color: #071021; }
.ch-btn.is-primary:hover { filter: brightness(1.1); }
.ch-btn:focus-visible { outline: 2px solid var(--ch-acc); outline-offset: 2px; }

.ch-next {
  margin: 0.9rem 0 0;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ch-acc);
}

/* ── responsive ─────────────────────────────────────────────────── */

@media (min-width: 560px) {
  .ch-section { padding: 1.8rem 1.5rem 1.4rem; }
  .ch-title { font-size: 1.6rem; }
  .ch-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .ch-pct { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-section.is-flash { animation: none; }
  .ch-bar-fill { transition: none; }
}