/* =========================================================
   DF / BNB — CHALLENGES CHECKLIST  (extras only)
   Base layout comes from df-bnb-titles.css (shared).
   This file adds ONLY challenge-specific overrides:
     – checkbox accent colour
     – checked-state dimming
     – sub-challenge rows
   ========================================================= */

/* ===== Checkbox green accent ===== */
.check{
  accent-color: var(--accent);
}

/* ===== Checked state: dim gently ===== */
.reward:has(.check:checked){
  opacity: 0.6;
}
.reward:has(.check:checked):hover{
  opacity: 0.8;
}

/* ===== Header card: item-count line =====
   "There are currently N challenges." Sits under the blurb, above the
   progress bar, per the style-guide checklist header spec. The pennant
   version of this rule is scoped to #dfbnbPlanRoot so it can't reach us. */
.cmptTopCount{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  opacity: .9;
}

/* ===== Header card: cross-reference note =====
   Sits under the count line. Used where content moved to another page. */
.cmptTopNote{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: .9;
}
.cmptTopNote__lead{ font-weight: 700; }
.cmptTopNote__link{
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.cmptTopNote__link:hover{ text-decoration: underline; }

/* ===== Row body visibility is CLASS-DRIVEN =====
   House rule: never set inline display on .rewardBody. Expand All / Close All
   and the Style-B search all toggle .is-open, so an inline style silently
   wins over them and the row falls out of sync. */
.rewardBody{ display: none; }
.reward.is-open > .rewardBody{ display: block; }

/* ===== Detail expand: vertical stack (not 3-column like titles) ===== */
.detailGrid{
  grid-template-columns: 1fr;
}

/* ===== Sub-challenge rows (nested inside parent) ===== */
.chalSubRow{
  border-color: color-mix(in srgb, var(--text) 8%, transparent);
  background: color-mix(in srgb, var(--text) 2%, var(--panel));
  border-radius: 10px;
  margin-bottom: 6px;
}

.chalSubRow .rewardHead{
  padding: 8px 10px;
}

.chalSubRow .rewardTitleBtn{
  font-size: 13px;
  font-weight: 700;
}

.chalSubRow .detailsBlock{
  padding-top: 8px;
  margin-top: 8px;
}

.chalSubRow .detailBox{
  min-height: 60px;
  padding: 10px;
}

.chalSubRow .detailText{
  font-size: 11px;
}

/* ===================================================================
   CHALLENGE REDESIGN (challenge-style-guide) — stat row, sub-expands,
   reward card, conditions box, META/SUB pills, lightbox.
   Backgrounds follow the depth ladder: root .reward rgba(245,241,227,.55),
   sub-expand .45, inner data boxes white .45 (warm cream, both modes).
   =================================================================== */
.pills{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill{
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
/* ★ NEW pill: the canonical .pill.pillNew lives in df-bnb-titles.css (loaded
   first as our base) — gold gradient, weight 900, #3a1f00 text. Do NOT
   redefine it here; challenges only needs it to not wrap. */
.pill.pillNew{ white-space: nowrap; }

.pillMeta{ color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pillSub{ color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); opacity: .85; }

/* Stat row */
.chalStatRow{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin: 4px 0 10px;
}
.chalStat{ padding: 9px 12px; border-radius: 10px; border: 1px solid var(--stroke); background: rgba(245,241,227,0.45); }
.chalStatLabel{ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .65; color: var(--text); }
.chalStatValue{ margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--text); }
.chalStat--gold{ background: color-mix(in srgb, #f6c64b 26%, var(--panel)); border-color: color-mix(in srgb, #b37400 55%, transparent); }

/* Sub-expands (teal label, no chevron, class-driven) */
.detailsBlock{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 0; }
.detailText--muted{ font-style: italic; opacity: .62; }
.subExpand{ border: 1px solid var(--stroke); background: rgba(245,241,227,0.45); border-radius: 12px; overflow: hidden; }
.subExpandHead{ display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; }
.subExpandHead:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); }
.subExpandLabel{ font-weight: 800; font-size: 15px; letter-spacing: .02em; color: var(--accent); }
.subExpandBody{ display: none; padding: 12px; border-top: 1px solid var(--stroke); }
.subExpand.is-open > .subExpandBody{ display: block; }

.penSection{ display: flex; flex-direction: column; gap: 10px; }
.penCondHead{ margin: 2px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.penCondBox{ padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.45); border: 1px solid var(--stroke); }
.penCondList{ margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.penCondList li{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; word-break: break-word; color: var(--text); opacity: .9; }
.penKVGroup{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.45); border: 1px solid var(--stroke); }
.penKV{ display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.penKV__label{ flex: 0 0 auto; min-width: 104px; font-weight: 700; opacity: .7; }
.penKV__value{ flex: 1 1 auto; min-width: 0; font-weight: 600; opacity: .95; }
.penKV__value--mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; opacity: .9; }

/* Reward vertical card + borderless lightbox thumbnail */
.chalRewardCard{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.chalRewardName{ font-weight: 800; font-size: 15px; color: var(--accent); }
.chalRewardImg{ width: 180px; max-width: 100%; height: auto; cursor: zoom-in; display: block; }
.chalGuideLink{ color: var(--accent); font-weight: 700; text-decoration: none; display: block; margin-bottom: 4px; }
.chalGuideLink:hover{ text-decoration: underline; }

/* Nested sub-challenge container (under a META row) */
.chalSubNest{ display: flex; flex-direction: column; gap: 8px; }
.chalSubNest .reward{ border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }

/* Lightbox (appended to body) */
.penLightbox{ position: fixed; inset: 0; z-index: 1000000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.penLightbox img{ max-width: 90vw; max-height: 90vh; border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.55); }