/* VOLT Phase 5 — Agent Theater AI Shopper transformation (v15-theater, .47).
   Theater-ONLY stylesheet: linked only on /agent-theater, after
   v14-theater.css (which loads after v13-site.css, the source of the
   .th-* base styles and the design tokens used below). It gives the
   live section a distinct shopper-panel identity, makes preset
   selection unmistakable, adds motion to the working journey, and
   styles the sticky progress bar, activity line, discovery strip,
   finale figures, and jump-to-result button added in .47.
   Presentation only — no other page loads this file. */

/* Live shopper panel identity */
.th-shopper{margin-top:26px;border-radius:24px;padding:26px;background:linear-gradient(155deg,#1a2f63 0%,#101f42 45%,#0b1428 100%);border:1px solid #5c6c99;box-shadow:0 0 0 1px rgba(47,123,255,.18),0 24px 60px rgba(2,6,18,.6),inset 0 1px 0 rgba(94,162,255,.25);position:relative}
@media (max-width:700px){.th-shopper{padding:20px 16px}}
.th-shopper h2{font-size:clamp(1.7rem,4.6vw,2.4rem);letter-spacing:.01em;color:var(--ink)}
.th-shopper-sub{color:#dbe6fa;font-size:1.05rem;max-width:56ch}
.th-shopper-head{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.th-shopper-imgs{display:flex;gap:10px}
.th-shopper-imgs img{width:76px;height:76px;object-fit:cover;border-radius:14px;border:1px solid rgba(94,162,255,.45)}
@media (max-width:700px){.th-shopper-imgs img{width:56px;height:56px}}

/* The panel replaces the old section gradient as the live identity. */
.th-live-section{background:none;border:0}

/* Composer inside the panel loses its own panel background. */
.th-shopper .th-composer{background:rgba(10,14,24,.45);border-color:rgba(94,162,255,.4)}
.th-shopper .th-preset{background:rgba(13,19,34,.65)}

/* Preset selection — unmistakable, via :has and the JS .is-selected fallback. */
.th-preset{position:relative}
.th-preset:has(input:checked),.th-preset.is-selected{border-color:#2f7bff;background:rgba(47,123,255,.14);box-shadow:0 0 0 2px #2f7bff,0 16px 36px rgba(31,107,240,.28)}
.th-preset:has(input:checked)::after,.th-preset.is-selected::after{content:"✓ Selected";position:absolute;top:10px;right:10px;background:#1f6bf0;color:#fff;font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px}
.th-preset-hint{margin-top:12px;color:#cfe2ff;font-size:.98rem;font-weight:600}
.th-preset-hint[hidden]{display:none}

/* Journey v2 — done check + animated ring on the active step. */
.th-journey li.done::before{content:"✓"}
@keyframes thRing{0%{box-shadow:0 0 0 0 rgba(47,123,255,.45)}70%{box-shadow:0 0 0 9px rgba(47,123,255,0)}100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}}
.th-journey li.active::before{animation:thRing 1.8s ease-out infinite}

/* Elapsed readout in the stage head. */
.th-elapsed{color:var(--mut2);font-size:.95rem}
.th-elapsed b{color:var(--ink)}

/* Activity line + working spinner dot. */
.th-activity{display:flex;align-items:center;gap:10px;margin:14px 0 4px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;color:var(--mut2);font-size:.98rem}
.th-activity[hidden]{display:none}
.th-activity-dot{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(94,162,255,.35);border-top-color:#5ea2ff}
#thStage.is-working .th-activity-dot{animation:thSpin .85s linear infinite}
@keyframes thSpin{to{transform:rotate(360deg)}}

/* Sticky progress bar. */
.th-sticky{position:sticky;top:69px;z-index:40;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:rgba(11,16,27,.94);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:12px;padding:9px 14px;margin:14px 0 4px;font-size:.95rem;color:var(--mut2)}
.th-sticky b{color:var(--ink)}
.th-sticky-stage{font-weight:800;color:var(--ink)}
.th-sticky[hidden]{display:none}

/* Discovery strip — products the agent is looking at. */
.th-discover-wrap[hidden]{display:none}
.th-discover-wrap h4{margin:16px 0 4px;font-size:.95rem;color:var(--mut2);letter-spacing:.04em;text-transform:uppercase}
.th-discover{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px}
.th-discover-card{flex:0 0 108px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:4px}
.th-discover-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.th-discover-card b{font-size:.82rem;line-height:1.25}
.th-discover-card span{color:var(--blue2);font-weight:700;font-size:.9rem}

/* Compact product stream on phones. */
@media (max-width:700px){.th-stream{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}.th-card .bd h3{font-size:.95rem}}

/* Finale figures + verified-compatibility line. */
.th-finale-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.th-finale-fig{background:rgba(10,14,24,.5);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.th-finale-fig span{font-size:.85rem;color:var(--mut2);text-transform:uppercase;letter-spacing:.06em}
.th-finale-fig b{font-size:1.45rem;color:var(--ink)}
@media (max-width:480px){.th-finale-fig b{font-size:1.15rem}}
.th-finale-compat{color:var(--ok);font-weight:700;margin-top:10px}

/* Jump-to-result pill. */
.th-jump{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;background:#1f6bf0;color:#fff;border:0;border-radius:999px;padding:13px 22px;font-weight:800;font-size:1rem;box-shadow:0 16px 40px rgba(0,0,0,.5);cursor:pointer}
.th-jump[hidden]{display:none}

/* Reduced motion: no ring pulse, no spinner. */
@media (prefers-reduced-motion:reduce){.th-journey li.active::before{animation:none}#thStage.is-working .th-activity-dot{animation:none}}