:root{
  --bg:#fbfaf6;--ink:#1c1b19;--muted:#6b675f;--rule:#dcd7cc;--link:#7a3e12;
  --sel:#f3e3b5;--card:#ffffff;--accent:#7a3e12;--rec:#c0392b;--ok:#4f8a5b;--warn:#b97f00;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bar-h:3.25rem;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#161513;--ink:#e8e4da;--muted:#9a958a;--rule:#34312c;--link:#e0a36b;
    --sel:#4a3d1c;--card:#201e1b;--accent:#e0a36b;--rec:#e06b5e;--ok:#7fbf8c;--warn:#e0a93a}
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:"Courier Prime","Courier New",Courier,monospace;font-size:15px;line-height:1.4}
button,select{font:inherit;font-family:var(--ui)}

#bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.6rem;
  min-height:var(--bar-h);padding:calc(env(safe-area-inset-top,0px) + .4rem) 16px .4rem;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);font-family:var(--ui)}
#file{flex:1;min-width:0;max-width:40rem;padding:.35rem .4rem;border:1px solid var(--rule);border-radius:6px;
  background:var(--card);color:var(--ink);font-size:.95rem}
/* a read-only link: the script and its pictures, and nothing to act with */
body[data-mode="read"] #rec,
body[data-mode="read"] #nav,
body[data-mode="read"] #showdone,
body[data-mode="read"] #session,
body[data-mode="read"] #orphans,
body[data-mode="read"] .sheet{display:none!important}
body[data-mode="read"] .ln{cursor:default}

.chip{flex:none;padding:.3rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);
  color:var(--muted);font-size:.78rem;white-space:nowrap}
.chip.on{color:var(--ink);border-color:var(--accent)}
.session{font-size:.8rem;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.session::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--muted)}
.session.on::before{background:var(--ok)}

.page{max-width:62ch;margin:0 auto;padding:1.5rem 16px calc(9rem + env(safe-area-inset-bottom,0px))}
.titlepage{text-align:center;padding-block:2rem 3rem}
.titlepage h1{font-size:1.4rem;letter-spacing:.2em;margin:0 0 .4rem}
.titlepage p{margin:.2rem 0;color:var(--muted)}
h2.act{text-align:center;text-decoration:underline;font-size:1rem;margin:3rem 0 1.6rem}
h3.scene,h3.shot{font-size:1rem;margin:1.8rem 0 .9rem}
h3.shot{font-weight:400}
p{margin:0}
p.action{margin:0 0 .9rem}
.speech{margin:0 0 .9rem}
p.cue{margin-left:22ch}
p.paren{margin-left:16ch;max-width:25ch}
p.dialogue{margin-left:10ch;max-width:36ch}
p.transition{text-align:right;margin:1rem 0}
p.centered{text-align:center;margin:1.4rem 0}
.pagebreak{border-top:1px dashed var(--rule);margin:2.5rem 0}
@media (max-width:560px){p.cue{margin-left:12ch}p.paren{margin-left:8ch}p.dialogue{margin-left:4ch}}

.ln{cursor:pointer;border-radius:3px;-webkit-tap-highlight-color:transparent}
.ln.sel{background:var(--sel);box-shadow:0 0 0 .2rem var(--sel)}
.ln.noted{text-decoration:underline dotted color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:.25em}

.note,.orphans{font-family:var(--ui);font-size:.88rem;line-height:1.45}
.note{margin:.2rem 0 1rem;padding:.55rem .7rem;border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:6px;background:var(--card)}
.note.resolved{border-left-color:var(--ok)}
.note.failed{border-left-color:var(--rec)}
.notehead{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;color:var(--muted);font-size:.78rem}
.status{text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.note.resolved .status{color:var(--ok)}
.note.failed .status{color:var(--rec)}
.note.answered .status{color:var(--accent)}
.transcript{margin-top:.25rem}
.transcript.quiet{color:var(--muted);font-style:italic}
.thread{margin-top:.45rem;padding-top:.4rem;border-top:1px solid var(--rule)}
.thread p{margin:.15rem 0}
.thread .who{font-weight:600;margin-right:.3rem}
.noteactions{display:flex;gap:.8rem;margin-top:.4rem}
.linkbtn{background:none;border:0;padding:.2rem 0;color:var(--link);font-size:.82rem;cursor:pointer}
.linkbtn.quiet{color:var(--muted);margin-left:auto}
.note audio{width:100%;margin-top:.4rem;height:2.2rem}

.refs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 1rem}
.ref{margin:0;width:8.5rem;cursor:zoom-in}
.ref img{display:block;width:100%;height:5.5rem;object-fit:cover;border-radius:4px;
  border:1px solid var(--rule);background:var(--card)}
.ref.full{width:100%;cursor:zoom-out}
.ref.full img{height:auto;object-fit:contain}

/* the location: above its scene heading, across the text column */
.refs.location{display:block;margin:1.6rem 0 .5rem}
.refs.location .ref{width:100%}
.refs.location .ref img{height:auto;aspect-ratio:16/9}
.refs.location .ref.full img{aspect-ratio:auto;object-fit:contain}
.refs.location .ref.gap .nopic{height:3rem}

/* everything else: out in the margin, anchored to its line, clear of the script */
.page{position:relative}
@media (min-width:901px){
  .scenemargin{position:absolute;left:100%;margin-left:1.75rem;width:10rem}
  /* placed by parkMargins(): beside its line, or parked in the stack under the top bar */
  .refs.margin{position:absolute;left:0;width:10rem;display:block;margin:0}
  .refs.margin .ref{width:100%;margin-bottom:.55rem}
  .refs.margin .ref.full{position:fixed;inset:4vh 4vw;width:auto;z-index:40;margin:0;
    background:var(--bg);padding:.6rem;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);overflow:auto}
  .refs.margin .ref.full img{height:auto;max-height:84vh;object-fit:contain}
}
@media (max-width:900px){
  .refs.margin{position:static;display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 1rem;width:auto}
}
.ref figcaption{font-family:var(--ui);font-size:.72rem;line-height:1.25;color:var(--muted);margin-top:.2rem}
.ref.gap .nopic{display:flex;align-items:center;justify-content:center;text-align:center;height:5.5rem;padding:.3rem;
  border:1px dashed var(--rule);border-radius:4px;color:var(--muted);font-family:var(--ui);font-size:.7rem}

.linetools,.composer{font-family:var(--ui);font-size:.88rem;margin:.3rem 0 1rem}
.linetools{display:flex;gap:1rem}
.composer{padding:.55rem .7rem;border:1px solid var(--accent);border-radius:6px;background:var(--card)}
.composerhead{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.composerarea{width:100%;margin-top:.35rem;padding:.45rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--bg);color:var(--ink);font-family:"Courier Prime","Courier New",monospace;font-size:.95rem;
  line-height:1.4;resize:vertical;overflow-y:auto;min-height:2.4rem}
.composeractions{display:flex;align-items:center;justify-content:flex-end;gap:.9rem;margin-top:.45rem}
.composerstatus{margin-right:auto;color:var(--muted);font-size:.8rem}
.primary{padding:.35rem .9rem;border:0;border-radius:6px;background:var(--accent);color:var(--bg);font-weight:600}

.orphans{max-width:62ch;margin:1rem auto 0;padding:0 16px}
.orphans h2{font-size:.9rem;margin:0 0 .4rem;color:var(--muted)}
.quote{font-family:"Courier Prime","Courier New",monospace;color:var(--muted);margin-top:.2rem}

.rec{position:fixed;left:50%;transform:translateX(-50%);z-index:20;
  bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:.6rem;min-height:3.6rem;padding:0 1.5rem;border-radius:999px;
  border:0;background:var(--accent);color:var(--bg);font-weight:600;font-size:1rem;
  box-shadow:0 4px 18px rgba(0,0,0,.25);white-space:nowrap}
.rec:disabled{background:var(--rule);color:var(--muted);box-shadow:none}
.recdot{width:.9rem;height:.9rem;border-radius:50%;background:currentColor}
.rec.recording{background:var(--rec);color:#fff}
/* the dot tracks the microphone level, so silence is visible while recording */
.rec.recording .recdot{border-radius:2px;transform:scale(calc(.5 + var(--level,.4) * 1.1));
  transition:transform .1s linear}
.note.no_sound{border-left-color:var(--warn)}
.note.no_sound .status{color:var(--warn)}

.nav{position:fixed;right:16px;z-index:20;display:flex;align-items:center;gap:.2rem;
  bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  padding:.15rem .3rem;border:1px solid var(--rule);border-radius:999px;
  background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.18);font-family:var(--ui)}
.nav button{min-width:2.2rem;min-height:2.2rem;border:0;border-radius:50%;background:none;color:var(--ink);font-size:1rem}
.nav button:active{background:var(--sel)}
#notecount{min-width:2.6rem;text-align:center;color:var(--muted);font-size:.78rem}
@media (max-width:560px){.nav{bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}}
.note.flash{outline:2px solid var(--accent);outline-offset:2px}
.reply{margin-top:.35rem}
.reply .who{color:var(--accent)}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;font-family:var(--ui);
  padding:1rem 16px calc(1rem + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:1px solid var(--rule);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.entity{max-height:82vh;overflow:auto}
.entityhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  position:sticky;top:0;background:var(--card);padding-bottom:.5rem}
#entityname{font-weight:600}
.entitymeta{color:var(--muted);font-size:.8rem;margin-left:.5rem}
.frames{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
.frame{display:flex;gap:.7rem;padding:.5rem;border:1px solid var(--rule);border-radius:6px;background:var(--bg)}
.frame.retired{opacity:.45}
.frame.canonical{border-color:var(--ok)}
.frame img{width:9rem;height:6rem;object-fit:cover;border-radius:4px;cursor:zoom-in;background:var(--card)}
.frame .framebody{flex:1;min-width:0;font-size:.85rem}
.frame .meta{color:var(--muted);font-size:.76rem}
.frame .notes{margin:.2rem 0;line-height:1.35}
.frame .path{word-break:break-all;opacity:.7}
@media (max-width:560px){.frame{flex-direction:column}.frame img{width:100%;height:9rem}}

.permtitle{font-weight:600}
.permdesc{margin:.3rem 0 .5rem;color:var(--muted)}
.sheet pre{max-height:40vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.8rem;
  background:var(--bg);padding:.5rem;border-radius:4px}
.permbuttons{display:flex;gap:.8rem;margin-top:.8rem}
.permbuttons button{flex:1;min-height:3rem;border-radius:8px;border:1px solid var(--rule);font-weight:600}
.allow{background:var(--ok);color:#fff;border-color:transparent}
.deny{background:var(--card);color:var(--ink)}

.toast{position:fixed;left:16px;right:16px;z-index:25;bottom:calc(5.6rem + env(safe-area-inset-bottom,0px));
  max-width:28rem;margin:0 auto;padding:.6rem .8rem;border-radius:8px;font-family:var(--ui);font-size:.88rem;
  background:var(--ink);color:var(--bg);text-align:center}