/* ============================================================
   DAILY CHALLENGE — only what the shared system does not cover.

   Reused from style.css / guide.css rather than re-declared here:
   .guide-hero .crumbs .pill .lede .felt .felt__lbl .hero (game)
   and the whole demo table/panel, .section .section__head .h2
   .prose .split .split__art .panel-box (stat cards, FAQ items,
   goal card, past list) .grid/.grid--2/.grid--learn (all the
   responsive grids) .reason/.reason__badge (numbered steps)
   .tl__dot (stat icons) .ref-list/.ref-item (past challenges)
   .paytable/.paytable-wrap (recent results) .tag/.tag--teal
   /.tag--gold .callout .notice .table-note .scroll-hint .sr-only
   ============================================================ */

/* trophy artwork sitting on the hero felt */
.dc-hero-art{width:min(100%,340px);border-radius:16px;box-shadow:0 12px 26px rgba(0,0,0,.3)}

/* the one big statement line: today's date, today's goal */
.dc-lead{margin:0;color:var(--navy);font-weight:800;font-size:1.45rem;line-height:1.25}

/* ===== week strip (cards are .panel-box .dc-day) ===== */
.dc-week{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dc-week__list{display:flex;gap:10px;padding:3px}
.dc-day{flex:1 0 82px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:14px;text-align:center;color:var(--muted)}
.dc-day__dow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.dc-day__date{font-size:1.3rem;font-weight:800;color:var(--navy);line-height:1}
.dc-day__mark{width:20px;height:20px;margin-top:2px}
.dc-day__state{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.25}
.dc-day--done{background:#dbf6ee;border-color:#8fd3bf;color:#0a5744}
.dc-day--missed{background:#fdecea;border-color:#eeb4ae;color:#7a241d}
.dc-day--none,.dc-day--future{background:#f4f9f7;border-style:dashed}
.dc-day--today{border:2px solid var(--blue);box-shadow:0 0 0 3px rgba(47,139,220,.18)}

/* ===== stat cards (.panel-box .dc-stat inside .grid .grid--2) ===== */
.dc-stat{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dc-stat__label{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dc-stat__value{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.2}

/* ===== result flags: two more variants of the shared .tag pill ===== */
.dc-tag--miss{background:#fdecea;color:#7a241d}
.dc-tag--none{background:#e7eef3;color:#3d5871}

/* ===== past challenges: shared .ref-item laid out as a row ===== */
.dc-past .ref-item{align-items:center;justify-content:space-between;flex-wrap:wrap}
.dc-past__label{flex:1 1 12rem;min-width:0;color:var(--navy);font-weight:700}
.dc-past__goal{display:block;color:var(--muted);font-weight:600;font-size:.9rem;margin-top:2px}

/* ===== FAQ accordion (each item is a .panel-box <details>) ===== */
.dc-faq{display:grid;gap:12px;margin-top:24px}
.dc-faq__q{display:flex;align-items:center;gap:14px;padding:16px 20px;min-height:56px;cursor:pointer;color:var(--navy);font-weight:800;font-size:1.05rem;line-height:1.45;list-style:none}
.dc-faq__q::-webkit-details-marker{display:none}
.dc-faq__q:hover{background:#f4f9f7}
.dc-faq__q:focus-visible{outline-offset:-3px}
.dc-faq__chev{width:20px;height:20px;flex:none;margin-left:auto;color:var(--teal);transition:transform .2s}
.dc-faq details[open] .dc-faq__chev{transform:rotate(90deg)}
.dc-faq__a{padding:0 20px 18px}
.dc-faq__a a{color:var(--blue);font-weight:600;text-decoration:underline}

@media (min-width:900px){
  .dc-lead{font-size:1.6rem}
  .dc-faq__q{font-size:1.12rem;padding:18px 24px}
  .dc-faq__a{padding:0 24px 20px}
}
@media (min-width:1024px){
  .dc-stats{grid-template-columns:repeat(4,1fr)}
}