/* VOLT Phase 5 — Agent Theater (v16, seamless panel pass .49).
   Loaded only on /agent-theater, after v14 + v15. Everything here is
   scoped to the blue AI Shopper panel: the live mission view now lives
   INSIDE .th-shopper (composer -> live -> finale in one panel), and the
   detailed record (timeline, comparison, compatibility, technical
   evidence) sits in the collapsed-by-default Behind the Scenes details.
   No storefront selectors are touched. */

/* Stage inside the panel: tighter, panel-toned separation (base
   .th-stage carries section-level margin/border from the site sheet). */
.th-shopper .th-stage{margin-top:22px;border-top:1px solid rgba(94,162,255,.35);padding-top:20px}

/* Live state: a restrained intensification of the panel rim so the
   panel itself reads as "on air" once a mission starts. */
.th-shopper.is-live{border-color:#7ea8e8;box-shadow:0 0 0 1px rgba(47,123,255,.35),0 24px 60px rgba(2,6,18,.6),inset 0 1px 0 rgba(94,162,255,.35)}

/* JS-hidden elements inside the panel must honor [hidden] even where a
   class rule sets display (composer form, open note, reset button). */
.th-shopper #thComposer[hidden],.th-shopper #thLiveNote[hidden],.th-shopper #thNewMission[hidden]{display:none}

/* Status cluster rhythm inside the panel. */
.th-shopper .th-meter-wrap{margin-top:14px}
.th-shopper #thOutcome{margin-top:18px}
.th-shopper .th-cart-panel{margin-top:18px}

/* Panels that moved inside the shopper take the panel's glass tone
   (same treatment v15 gives the composer). */
.th-shopper .th-panel{background:rgba(10,14,24,.45);border-color:rgba(94,162,255,.4)}

/* Finale inside the panel: keep the card, deepen its ground so the
   figures stay readable on the gradient. */
.th-shopper #thFinale{background:rgba(8,12,22,.72)}

/* ----- Behind the Scenes ----- */
.th-bts{margin-top:18px;border:1px solid rgba(94,162,255,.4);border-radius:16px;background:rgba(10,14,24,.45)}
.th-bts>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;font-weight:800;font-size:1.02rem;color:var(--ink);border-radius:16px}
.th-bts>summary::-webkit-details-marker{display:none}
.th-bts>summary::after{content:"▸";margin-left:auto;color:#5ea2ff;font-size:1.1rem}
.th-bts[open]>summary::after{content:"▾"}
.th-bts>summary:hover{background:rgba(47,123,255,.12)}
.th-bts>summary:focus-visible{outline:2px solid #5ea2ff;outline-offset:2px}
.th-bts-body{padding:2px 16px 16px;display:grid;gap:14px}
.th-bts-evidence h4{margin:6px 0 8px;font-size:.95rem;color:var(--mut2);letter-spacing:.04em;text-transform:uppercase}
.th-bts #thCompat:not(:empty){background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px}

/* Reset affordance under the finished mission. */
.th-new-mission{margin-top:16px}

/* The stage's sticky bar already pins at top:69px (v15 fix in .48);
   inside the panel it remains a complement for long panels — no change. */

@media (prefers-reduced-motion:reduce){
  .th-shopper .th-stage,.th-bts>summary{transition:none}
}

/* ============================================================
   Production-readiness fix (.56, 2026-11-03) — theater sticky
   bar vs the grown desktop header. The .55 fix let .head-in
   grow with the two-row desktop nav, so the sticky site header
   is now 93.625px tall in its stuck state (was 65px). .th-sticky
   (v15-theater.css) still pins at top:69px — the old 65px header
   plus its original 4px breathing gap — so at desktop widths
   its top ~24.6px slid under the header (measured on .55 @1440:
   bar top 69 vs header bottom 93.625, only ~19.7px of the bar
   visible). Fix, scoped to the site's own desktop breakpoint
   (min-width:1024px, as used by the hero / stage-grid rules):
   pin at 93.625 + 4 = 97.625, rounded to 98px — the original
   4px gap preserved. Below 1024px the header is 65px tall and
   top:69px stays exactly as it was.
   ============================================================ */
@media (min-width:1024px){
  .th-sticky{top:98px}
}

/* ============================================================
   Production-readiness fix (.57, 2026-11-03) — theater sticky
   bar in the 821-1023px band (WS6 residual, widened). The .56
   override is scoped min-width:1024px, but the full nav is
   displayed from 821px up (the @media (max-width:820px) block
   is what hides .main-nav and shows .nav-toggle), so in this
   band the sticky header is tall while .th-sticky still pinned
   at the mobile top:69px. Measured on live .56 (fix57):
   the header is 141.9375px tall at 821-999px (the nav wraps to
   THREE rows there — at 900px the stuck bar sat at top 69 vs
   header bottom 141.9375: 72.9375px obscured, 0px visible)
   and 93.625px at 1000-1023px (two rows — at 1023px the stuck
   bar was obscured 24.625px, the WS6 residual). Fix, pure
   append, original 4px breathing gap preserved in both zones:
   141.9375 + 4 = 145.9375 -> 146px from 821px, restated to the
   .56 value 93.625 + 4 = 97.625 -> 98px from 1000px (the later
   section wins where both apply; at >=1024px it agrees with
   the .56 section above). At <=820px neither section applies
   and top:69px against the 65px header is unchanged.
   ============================================================ */
@media (min-width:821px){
  .th-sticky{top:146px}
}
@media (min-width:1000px){
  .th-sticky{top:98px}
}