/* script reading view — a phone at arm's length while filming is the ONLY use case that
   matters here, so this is not dashboard chrome: it is a reading surface.
   Type is bigger than the portal's body ON PURPOSE (the opposite call from the card
   preview, and for the opposite reason): nothing competes with the text here, and the
   measure is capped at 60ch so it lands inside the 45–75 characters/line readable band. */
.shell-read{max-width:min(680px,94vw);}
/* the brand is a real link back here (the portal's is a span) — keep the wordmark itself,
   not a default-underlined link, or it reads as body copy that happens to be clickable */
.shell-read .brand{text-decoration:none;color:inherit;}
.sback{display:inline-block;margin:4px 0 14px;font-size:12.5px;font-weight:700;color:var(--soft);
  text-decoration:none;}
.sback:hover{color:var(--ink);}
#s-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(24px,5vw,32px);
  line-height:1.15;margin:0 0 6px;max-width:24ch;}
.smeta{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--soft);margin:0 0 16px;}
.snote{font-size:13.5px;line-height:1.5;color:var(--soft);background:var(--g);
  border-left:2px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 13px;margin:0 0 20px;}

/* icon + label everywhere: the icon delivers the "clean and designed" the house rule is
   actually after; the label costs nothing visually if the type is right. Vertical room is
   not the constraint — meaning is. */
.sbar,.scopy-main,.scopy-alt .shot-c,.sfilm{align-items:center;}
.sfilm .i,.scopy-main .i,.shot-c .i{display:inline-flex;vertical-align:-3px;margin-right:7px;}
.sbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 20px;}
/* shot progress — ambient, not a scoreboard */
.sprog{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:-10px 0 16px;min-height:1em;}
.sprog.all{color:var(--teal-d);}
.shot-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
.shot-foot .shot-c{margin:0;}
/* a shot you've already got recedes — it stays legible (you may re-shoot it), it just stops
   competing with the one you're about to do */
.shot-done{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--soft);
  cursor:pointer;padding:6px 0;}
.shot-done input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.shot.done .shot-dirblock,.shot.done .shot-say,.shot.done .shot-beats{opacity:.4;}
.shot.done .shot-n{color:var(--teal-d);}
.sfilm{font:inherit;font-size:12.5px;font-weight:700;color:var(--onchip);background:var(--chip);
  border:none;border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;}
.sfilm[aria-pressed="true"]{background:var(--accent);color:var(--oncolor);}
.sfilm-note{font-size:11.5px;color:var(--soft);flex:1;min-width:0;}

/* the copy bar. "copy the lines" is deliberately the loudest control on the page: IG (main
   camera, ~May 2026), TikTok and CapCut all ship teleprompters, so the highest-value thing
   masa can do is hand over paste-ready spoken text — with NO direction in it, or the client
   reads "close-up on your hands" out loud. */
.scopy{display:flex;flex-direction:column;gap:8px;margin:0 0 26px;padding:14px;
  background:var(--sunk);border-radius:var(--r-sm);align-items:flex-start;}
.scopy-main{font:inherit;font-size:14px;font-weight:800;color:var(--oncolor);background:var(--accent);
  border:none;border-radius:var(--r-pill);padding:12px 22px;cursor:pointer;}
.scopy-main.done{background:var(--teal);}
.scopy-hint{font-size:11.5px;color:var(--soft);}
.scopy-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
.scopy-alt .shot-c{margin:0;}

/* beats vs verbatim: bullets read as cues, a paragraph reads as a teleprompter line.
   The visual difference IS the instruction — you can't recite a bullet list stiffly. */
.shot-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.shot-beat{font-size:17px;line-height:1.5;color:var(--ink);padding-left:16px;position:relative;max-width:60ch;}
.shot-beat::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);}

/* one shot = one chunk. The numbered heading + the say/do split is the whole point:
   a wall of prose is unusable on set, which is exactly what a PDF of this would be. */
.shots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.shot{border-top:1px dashed var(--line);padding:20px 0;}
.shot:last-child{border-bottom:1px dashed var(--line);}
.shot-n{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);font-weight:700;}
.shot-k{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);display:block;margin:12px 0 4px;}
/* the SHOT is direction (what the camera does) — quieter, not spoken */
.shot-do{font-size:14.5px;line-height:1.5;color:var(--soft);margin:0;}
/* the LINE is spoken — the largest thing on the page, because it is the thing being read
   out loud while the phone is at arm's length */
.shot-say{font-size:19px;line-height:1.6;margin:0;color:var(--ink);max-width:60ch;}
.shot-dir{font-size:13px;line-height:1.5;color:var(--soft);font-style:italic;margin:8px 0 0;}
.shot-c{font:inherit;font-size:11.5px;font-weight:700;color:var(--soft);background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;
  margin:10px 0 0;}
.shot-c:hover,.shot-c.done{color:var(--ink);border-color:var(--accent);}

.scap{margin:26px 0 40px;padding:16px 16px 18px;background:var(--sunk);border-radius:var(--r-sm);
  box-shadow:var(--clay);}
.scap-k{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);margin:0 0 8px;}
.scap-t{font-size:14.5px;line-height:1.55;white-space:pre-wrap;margin:0 0 12px;}
.sgate{font-size:14px;color:var(--soft);padding:40px 0;}

/* FILMING MODE — the highest-value feature for the actual use case and the one thing a PDF
   can categorically not do: the screen must not sleep mid-take. Wake Lock where supported
   (it needs a user gesture + a visible page, which a button press satisfies); everything
   else still gets the bigger type + stripped chrome, so the mode degrades rather than lies. */
body.filming .bar,body.filming .sback,body.filming .snote,body.filming .scap{display:none;}
body.filming .shot-say{font-size:24px;line-height:1.65;}
body.filming .shot-beat{font-size:21px;line-height:1.55;}
/* DEMOTE the direction while filming — you already set the shot up; standing in front of
   the camera about to deliver, the direction is noise competing with the line. It stays
   readable (not display:none — they may re-check it), just quiet and out of the way. */
body.filming .shot-dirblock{opacity:.42;font-size:13px;}
body.filming .shot-do,body.filming .shot-dir{font-size:13px;}
body.filming .shot{padding:26px 0;}
/* the copy bar survives filming mode — pasting into the platform's prompter is the ONE
   thing they're most likely to do from this screen */
body.filming .scopy{background:none;padding:0;margin-bottom:18px;}
body.filming .scopy-alt{display:none;}
@media(prefers-reduced-motion:no-preference){
  .shot-c,.sfilm{transition:color .18s var(--ease-out),background .18s var(--ease-out);}
}

/* SEND TO YOUR PHONE — desktop only. NN/g: QR beats a link for cross-device handoff, but
   QR "traditionally has no information scent", so the URL stays visible beside it and the
   QR is never the only path (the page is deep-linkable and the .txt still downloads).
   The 2016 objection to QR — needing a separate app — died with native camera scanning. */
.sqr{display:flex;gap:16px;align-items:center;margin:0 0 26px;padding:14px;
  background:var(--sunk);border-radius:var(--r-sm);}
.sqr-code{flex:0 0 auto;line-height:0;background:#fff;padding:6px;border-radius:8px;}
.sqr-code svg{display:block;}
.sqr-h{font-size:13.5px;font-weight:700;margin:0 0 4px;color:var(--ink);}
.sqr-u{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--soft);margin:0;
  overflow-wrap:anywhere;}
/* the phone IS the target device — a QR pointing at the screen you're holding is a joke */
@media(max-width:640px){ .sqr{display:none;} }
body.filming .sqr{display:none;}