/* Live Stagehand demo — the animated prompter engine used on /help.
   Self-contained: explicit colors (no page variables), all classes sh-*
   prefixed. Paired with /stagehand-demo.js. Reference build:
   mockups/stagehand-engine.html. Steve 2026-08-14. */
.sh-demo { --sh-accent:#ff9f0a; --sh-good:#34d15c; --sh-covered:#8fcc97; --sh-pending:#ffdcb0; --sh-risk:#ff453a;
  --sh-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace; margin: 0 0 28px; }
.sh-stage { position:relative; background:#0b0b0d; border-radius:16px; padding:13px; box-shadow:0 14px 40px rgba(0,0,0,.15); }
.sh-frame { position:relative; border-radius:10px; background:#000; padding:0 26px; height:272px; overflow:hidden; transition:opacity .3s ease; }
.sh-reading { padding:108px 0; transition:opacity .35s ease, transform .4s cubic-bezier(.33,.1,.25,1); }
.sh-sec { margin:0 0 20px; } .sh-sec:last-child { margin-bottom:0; }
.sh-h { font-weight:700; font-size:21px; letter-spacing:-0.01em; text-align:center; margin:0 0 8px; color:var(--sh-accent); transition:color .7s ease; }
.sh-h.said { color:var(--sh-covered); }
.sh-krow { text-align:center; font-family:var(--sh-mono); font-size:11px; color:rgba(255,255,255,.42); margin:0 0 8px; }
.sh-krow b { color:rgba(255,255,255,.6); font-weight:500; }
.sh-body { font-size:15px; line-height:1.55; color:#eceae6; text-align:center; transition:color .8s ease; }
.sh-body.mc { color:var(--sh-pending); } .sh-body.mc.covered { color:var(--sh-covered); }
.sh-w { border-radius:3px; padding:0 2px; transition:background .1s ease; }
.sh-w.cur { background:rgba(255,149,0,.55); }

/* X-ray mode: the raw script with its marks highlighted, over the prompter.
   Palette matches the "What you write" reveal on /scripting (warm light card,
   deep-orange flags, green keys). */
.sh-xray { position:absolute; inset:0; z-index:6; background:#fffaf2; opacity:0; pointer-events:none; transition:opacity .25s ease; overflow-y:auto; padding:18px 24px; }
.sh-xray.on { opacity:1; pointer-events:auto; }
.sh-xray pre { margin:0; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word; color:#1d1d1f; }
.xr-min { color:#9a9188; }
.xr-must { color:#d96400; font-weight:700; }
.xr-hash { color:#c0b7ab; font-weight:700; }
.xr-h { color:#1d1d1f; }
.xr-key { color:#2e9e57; font-weight:600; }
.xr-body { color:#1d1d1f; }

/* The take debrief: the app's card. A solid, orange-bordered panel anchored to
   the bottom of the prompter, sitting OVER the script (not dimming it), with the
   pace metrics, a close X, and the off-script rows. */
.sh-debrief { position:absolute; left:14px; right:14px; bottom:14px; opacity:0; pointer-events:none; transition:opacity .3s ease;
  background:#0e0d0c; border:1.5px solid rgba(255,159,10,0.55); border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,0.6); padding:14px 18px; display:flex; flex-direction:column; gap:11px; }
.sh-debrief.on { opacity:1; pointer-events:auto; }
.sh-metrics { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sh-stat .l { font-size:9.5px; font-weight:600; letter-spacing:.06em; color:rgba(255,159,10,.85); text-transform:uppercase; margin:0 0 4px; }
.sh-stat .v { font-size:21px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
.sh-x { margin-left:auto; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; border:0; padding:0; cursor:pointer; transition:background .15s ease; }
.sh-x:hover { background:rgba(255,255,255,.22); }
.sh-x svg { width:12px; height:12px; color:rgba(255,255,255,.7); }
.sh-od { height:1px; background:rgba(255,255,255,.09); }
.sh-osrow { display:flex; align-items:baseline; gap:10px; }
.sh-osh { font-family:var(--sh-mono); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--sh-accent); }
.sh-vb { margin-left:auto; font-family:var(--sh-mono); font-size:12px; color:rgba(255,255,255,.5); } .sh-vb b { color:#fff; font-weight:700; }
.sh-moment { display:flex; align-items:baseline; gap:9px; }
.sh-badge { font-family:var(--sh-mono); font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:2px 7px; border-radius:5px; text-transform:uppercase; color:#ffb3ad; background:rgba(255,69,58,.14); }
.sh-where { font-family:var(--sh-mono); font-size:12px; color:#fff; text-decoration:underline; text-underline-offset:2.5px; text-decoration-color:rgba(255,255,255,.4); }
.sh-snip { font-size:11.5px; color:rgba(255,255,255,.5); font-style:italic; }

.sh-chin { margin-top:12px; border-radius:10px; background:#111114; border-top:1px solid rgba(255,255,255,.06); padding:11px 16px; display:flex; align-items:center; gap:13px; transition:opacity .3s ease; }
.sh-pips { display:flex; align-items:center; gap:8px; }
.sh-pip { position:relative; width:14px; height:14px; flex:none; }
.sh-pip .ring { position:absolute; inset:0; border-radius:50%; border:1.8px solid var(--sh-accent); background:transparent; transition:background .5s, border-color .5s, box-shadow .3s; }
.sh-pip.key .ring { border-color:rgba(255,255,255,.34); }
.sh-pip.done .ring { background:var(--sh-good); border-color:var(--sh-good); }
.sh-pip.risk .ring { border-color:var(--sh-risk); box-shadow:0 0 4px rgba(255,69,58,.6); }
.sh-pip .check { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:scale(.5); transition:opacity .3s, transform .3s; }
.sh-pip.said .check { opacity:1; transform:scale(1); } .sh-pip.said .ring { opacity:0; }
.sh-pip .check svg { width:14px; height:14px; }
.sh-count { font-family:var(--sh-mono); font-size:13px; color:#fff; min-width:26px; }
.sh-sp { flex:1; }
.sh-nav { font-size:13px; color:rgba(255,255,255,.6); background:#161616; border-radius:7px; padding:3px 10px; cursor:pointer; transition:background .15s ease; }
.sh-nav:hover { background:#242424; color:rgba(255,255,255,.85); }

/* The Navigator pop-up (app-style): a list of every section, current one checked. */
.sh-navmenu { position:absolute; left:50%; transform:translateX(-50%); bottom:64px; z-index:20; display:none;
  min-width:270px; max-width:90%; max-height:210px; overflow-y:auto; padding:6px;
  background:#1c1c1e; border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 18px 46px rgba(0,0,0,.6); }
.sh-navmenu.open { display:block; }
.sh-navrow { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; border-radius:7px;
  padding:7px 12px 7px 8px; font:inherit; font-size:13.5px; color:#e6e4e0; cursor:pointer; }
.sh-navrow:hover { background:rgba(255,255,255,.08); }
.sh-navrow.cur { background:#2f6bd8; color:#fff; }
.sh-nck { width:12px; flex:none; font-size:12px; text-align:center; }
.sh-nd { width:13px; height:13px; flex:none; border-radius:50%; display:inline-grid; place-items:center; box-sizing:border-box; }
.sh-nd.nd-done { background:var(--sh-good); }
.sh-nd.nd-must { border:1.7px solid var(--sh-accent); }
.sh-nd.nd-key { border:1.7px solid rgba(255,255,255,.34); }
.sh-nd.nd-risk { border:1.7px solid var(--sh-risk); }
.sh-nd.nk svg { width:13px; height:13px; }
.sh-nt { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-time { font-family:var(--sh-mono); font-size:12.5px; color:rgba(255,255,255,.55); min-width:80px; text-align:right; }

.sh-runway { border-radius:10px; background:rgba(255,69,58,.09); border:1px solid rgba(255,69,58,.34); display:flex; align-items:center; gap:11px; max-height:0; opacity:0; overflow:hidden; margin-top:0; padding:0 14px; transition:all .35s ease; }
.sh-runway.on { max-height:72px; opacity:1; margin-top:10px; padding:11px 14px; }
.sh-runway .warn { width:17px; height:17px; color:var(--sh-risk); flex:none; }
.sh-runway .msg { font-size:13.5px; color:rgba(255,255,255,.92); } .sh-runway .msg b { color:var(--sh-accent); font-weight:600; }
.sh-runway .jump { margin-left:auto; flex:none; font-size:12.5px; font-weight:600; color:#1a1200; background:var(--sh-accent); border-radius:8px; padding:6px 13px; }

.sh-controls-hint { font-size:13px; font-weight:600; color:#8a8175; margin:18px 0 11px; }
.sh-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; }
.sh-ctl { font: inherit; font-size:13.5px; font-weight:600; border:1.5px solid #e6ddce; background:#fff; color:#4a4133; border-radius:10px; padding:9px 15px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.sh-ctl:hover { border-color:var(--sh-accent); color:#b56a00; background:#fffaf2; }
.sh-ctl.primary { background:var(--sh-accent); border-color:var(--sh-accent); color:#fff; }
.sh-ctl.primary:hover { background:#d96400; border-color:#d96400; }
.sh-ctl.ghost { background:none; border-color:transparent; color:#9b8f7d; }
/* the control the auto-play is performing right now, so a visitor sees what to press */
.sh-ctl-live { border-color:var(--sh-accent); background:#fff2dd; color:#b56a00; box-shadow:0 0 0 3px rgba(255,159,10,.42); animation:sh-pulse 1.1s ease-in-out infinite; }
.sh-ctl-live.primary { background:#d96400; color:#fff; }
@keyframes sh-pulse { 0%,100% { box-shadow:0 0 0 3px rgba(255,159,10,.42); } 50% { box-shadow:0 0 0 6px rgba(255,159,10,.16); } }
@media (prefers-reduced-motion: reduce) { .sh-ctl-live { animation:none; } }
.sh-cap { font-size:14px; color:#6b6255; line-height:1.55; margin:14px 0 0; }
@media (prefers-reduced-motion: reduce) { .sh-reading, .sh-h, .sh-body, .sh-w, .sh-pip .ring, .sh-pip .check { transition:none !important; } }

/* the paste-your-own-script playground behind the STAGEHAND eyebrow */
.sh-eyebrow { cursor:pointer; user-select:none; }
.sh-eyebrow:hover { color:#b56a00; }
.sh-playground { margin:2px 0 22px; }
.sh-playground .sh-pg-hint { font-size:13px; color:#8a8175; margin:0 0 9px; }
.sh-playground textarea { width:100%; box-sizing:border-box; min-height:150px; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6; padding:14px 16px; border:1px solid #e6ddce; border-radius:12px; background:#fffaf2; color:#2a2622; resize:vertical; }
.sh-pg-load { margin-top:10px; font:inherit; font-size:13.5px; font-weight:600; background:#ff9f0a; color:#fff; border:0; border-radius:10px; padding:9px 18px; cursor:pointer; transition:background .15s ease; }
.sh-pg-load:hover { background:#d96400; }

/* A looping take is a picture that moves, not a control surface. The engine
   makes pips, the section label and the debrief's close button clickable,
   which is right on /help and pointless here: there is nothing to recover from
   because it starts again on its own. Scoped to [data-sh-loop] so /help and
   /scripting keep every control. Steve, 2026-08-22. */
.sh-demo[data-sh-loop] .sh-stage,
.sh-demo[data-sh-loop] .sh-chin,
.sh-demo[data-sh-loop] .sh-runway { pointer-events: none; }
.sh-demo[data-sh-loop] .sh-x { display: none; }

/* The document's own `#` line. Tellie draws a level-1 heading at full
   NSColor.systemOrange (#FF9500); level 2 is that at 0.95, which is the
   --sh-accent the sections use. Slightly bigger than a section heading, and it
   is a label on the document rather than a step in it, so it carries no pip. */
.sh-doctitle { text-align:center; font-weight:700; font-size:16px; letter-spacing:-.01em;
  color:#ff9500; margin:0 0 18px; }

/* The separator between key alternatives. Quiet on purpose: the phrases are the
   content, "or" is only there so two of them do not read as one long phrase. */
.sh-kor { font-style:normal; opacity:.5; margin:0 .45em; font-weight:400; }

/* The debrief, sized for the notch rather than for /help.
   Its type was set against /help's full-width stage, around 700px. On an
   audience page the notch is 62% of a 720px window, so roughly 440px, and the
   same sizes read as oversized in it. Everything drops about a fifth, and the
   padding with it. Scoped to [data-sh-loop] so /help and /scripting keep the
   sizes they were tuned at. Steve, 2026-08-22. */
.sh-demo[data-sh-loop] .sh-debrief { padding:11px 13px; gap:8px; border-radius:12px; }
.sh-demo[data-sh-loop] .sh-metrics { gap:14px; }
.sh-demo[data-sh-loop] .sh-stat .l { font-size:8px; margin-bottom:3px; }
.sh-demo[data-sh-loop] .sh-stat .v { font-size:16px; }
.sh-demo[data-sh-loop] .sh-osh { font-size:8.5px; }
.sh-demo[data-sh-loop] .sh-vb { font-size:10px; }
.sh-demo[data-sh-loop] .sh-badge { font-size:8px; padding:2px 6px; }
.sh-demo[data-sh-loop] .sh-where { font-size:10px; }
.sh-demo[data-sh-loop] .sh-snip { font-size:9.5px; }
.sh-demo[data-sh-loop] .sh-osrow { gap:8px; }
.sh-demo[data-sh-loop] .sh-moment { gap:7px; }

/* The ad-lib badge. Missed is red because something is gone; this is the
   opposite event, so it takes the covered green. */
.sh-badge.ok { color:#bff0c8; background:rgba(52,209,92,.14); border-color:rgba(52,209,92,.4); }
/* A badge is a label, never a paragraph: "Ad-lib" was breaking on its own
   hyphen in the notch and rendering as two lines. */
.sh-badge { white-space:nowrap; }

/* The looping take presses Jump there before it jumps, so the banner reads as
   cause and effect rather than the section deciding to go green on its own.
   Nothing else ever adds .pressing, so this is inert on /help and /scripting
   where a real cursor supplies its own :active. */
.sh-runway .jump { transition: transform .08s ease, filter .08s ease; }
.sh-runway .jump.pressing { transform: scale(.93); filter: brightness(.86); }

/* A lead line under the title (scene stage direction, etc). White, like the
   reading body, and untracked: it never turns green. */
.sh-lead { text-align:center; color:rgba(255,255,255,.82); font-size:14px; line-height:1.6;
  margin:0 0 18px; font-style:italic; }