/* SIMUL8OR — DAILY CHALLENGE MODALS (prototype)
   S8 skin over the production markup contract. The engine (js/main.js) owns
   #challengeBriefModal + the chm* ids; this file is presentation only.
   Load AFTER s8-tokens.css + s8-ui.css (uses their tokens, keyframes, .s8-modal).

   Brief modal = mockup "Option B" (ticket): gold hairline + tinted hero with a
   numbered event header, rules as a 2x2 spec grid, yesterday's field promoted to
   real figures, and a full-width primary CTA. Production writes a combined title
   and a combined yesterday string; index.aspx reshapes them into this layout. */

/* ── entrance: match the other prototype modals (fade + drop-in) ── */
#challengeBriefModal.is-open,
#challengeRevealModal.is-open{animation:s8-modal-fade-in .15s linear both}
#challengeBriefModal.is-closing,
#challengeRevealModal.is-closing{display:grid;animation:s8-modal-fade-out .15s linear both;pointer-events:none}
#challengeBriefModal .chm-modal,
#challengeRevealModal .chm-modal{transform:translateY(-50px)}
#challengeBriefModal.is-open .chm-modal,
#challengeRevealModal.is-open .chm-modal{animation:s8-modal-drop-in .3s ease-out both}
@media (prefers-reduced-motion:reduce){
  #challengeBriefModal.is-open,
  #challengeRevealModal.is-open,
  #challengeBriefModal.is-closing,
  #challengeRevealModal.is-closing,
  #challengeBriefModal.is-open .chm-modal,
  #challengeRevealModal.is-open .chm-modal{animation:none}
  #challengeBriefModal .chm-modal,
  #challengeRevealModal .chm-modal{transform:none}
}

/* ── dialog ── */
/* Backdrop + stacking come from the shared .s8-unlock-layer / .s8-unlock-scrim
   (z-index:2200, above the replay bar) — same as the $1M unlock modal. */
.chm-modal{position:relative;z-index:1;max-width:452px}
.chm-x{position:absolute;top:10px;right:10px;z-index:3}

/* ── hero (B) ── */
.b-hero{position:relative;padding:var(--s8-6) var(--s8-5) var(--s8-5);text-align:center;border-bottom:1px solid var(--s8-line);background:linear-gradient(180deg,rgba(245,177,74,.10),transparent 78%),var(--s8-panel)}
.b-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--s8-reward-grad)}
.b-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-gold-hi)}
.b-kicker i{width:5px;height:5px;border-radius:50%;background:var(--s8-gold);display:block}
.b-num{margin:10px 0 0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em;color:#fff}
.b-num span{color:var(--s8-gold-hi)}
.b-hero p{margin:10px auto 0;max-width:34ch;font-size:var(--s8-fs-md);color:var(--s8-fg-2);text-wrap:pretty}

/* ── body (B) ── */
.b-body{gap:var(--s8-3);padding:var(--s8-4) var(--s8-5)}
.b-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r);overflow:hidden}
.b-grid div{padding:var(--s8-3);background:var(--s8-panel-2);font-size:var(--s8-fs-sm);color:var(--s8-fg-2);line-height:1.4}
.b-grid b{display:block;color:#fff;font-weight:600}
.b-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-3);padding:var(--s8-3);border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-inset)}
.b-stats div{display:flex;flex-direction:column;gap:3px}
.b-stats span{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.b-stats b{font-size:var(--s8-fs-lg);font-weight:600;color:#fff;letter-spacing:-.01em}
.b-stats b.s8-up{color:var(--s8-up)}
.b-stats b.s8-down{color:var(--s8-down)}

/* out-of-trades notice — engine toggles display; not part of the B mockup but
   required by the production flow (Pro upsell copy). */
.chm-warn{padding:10px var(--s8-3);border:1px solid var(--s8-warn-line);border-radius:var(--s8-r);background:var(--s8-warn-tint);color:var(--s8-warn);font-size:var(--s8-fs-sm);line-height:1.4}

/* ── footer (B): full-width CTA ── */
.b-foot{justify-content:stretch;padding:var(--s8-4) var(--s8-5)}
/* main.js sets the label via textContent (wipes any child icon), so the play
   glyph is a CSS triangle that survives the rewrite. */
.chm-cta::before{content:"";flex:none;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.chm-cta.chm-cta-pro{background:var(--s8-reward-grad);border-color:transparent;color:#3a2503}
.chm-cta.chm-cta-pro:hover{background:var(--s8-reward-grad);filter:brightness(1.05)}
.chm-cta.chm-cta-pro::before{display:none}

@media (max-width:640px){
  .b-hero{padding:var(--s8-6) var(--s8-4) var(--s8-4)}
  .b-num{font-size:38px}
}

/* ══ REVEAL MODAL = mockup "Option A" (result-first) ═══════════════════════
   Score is the headline; share sits under it; sign-in follows as the way to be
   ranked. main.js (renderChallengeReveal/applyRevealAuthState) drives the ids
   and the .chm-desc / .chm-divider / .chm-legal query targets. */
.chm-reveal{max-width:420px;max-height:calc(100dvh - var(--s8-6));overflow-y:auto}
.chm-reveal__body{gap:var(--s8-4);padding:var(--s8-6) var(--s8-5) var(--s8-5)}
.chm-reveal__head{display:flex;flex-direction:column;gap:var(--s8-2);text-align:center}
.chm-title{margin:0;font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:#fff}
.chm-title .chm-amt{color:var(--s8-gold-hi)}
.chm-desc{margin:0;font-size:var(--s8-fs-md);line-height:1.45;color:var(--s8-fg-2);text-wrap:pretty}
.chm-desc b{font-weight:600}

/* result panel: flat 0% reads neutral — semantic colour only for real P&L */
.a-res{display:flex;flex-direction:column;align-items:center;gap:var(--s8-1);padding:var(--s8-6) var(--s8-4);border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-inset)}
.chm-score{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:46px;line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--s8-fg)}
.chm-score.pos{color:var(--s8-up)}
.chm-score.neg{color:var(--s8-down)}
.chm-score-sub{font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}

/* auth / actions: kit .s8-provider rows (share is the ghost variant) */
.chm-auth{display:flex;flex-direction:column;gap:var(--s8-2)}
.chm-auth .s8-provider{justify-content:center;gap:10px}
.chm-share{background:transparent}
.chm-share.copied{border-color:var(--s8-up-line);color:var(--s8-up)}
.chm-provider__icn{width:15px;height:15px;flex:none}
.chm-divider{display:flex;align-items:center;gap:var(--s8-3);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.chm-divider::before,.chm-divider::after{content:"";flex:1;height:1px;background:var(--s8-line)}
.chm-legal{margin:0}

/* ── challenge-mode Finish state on the visible replay controls ── */
#startBtn.is-finish,#play.is-finish{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
#startBtn.is-finish:hover,#play.is-finish:hover{background:var(--s8-up-line)}
#startBtn.is-finish svg,#play.is-finish svg{stroke:var(--s8-up)}