/* Read On Air - a small radio studio: acoustic-tile wall, walnut trim, a brushed-steel tape deck, an ON AIR lamp,
 * and the script typed on onion-skin paper. */
:root {
  --bg: #efe9df; --panel: #fbf8f2; --ink: #23201c; --soft: #5f574d; --line: #d9cfc0; --chip: #f1e9db; --tile: rgba(90, 70, 45, .07);
  --acc: #b3261e; --acc-ink: #ffffff; --focus: #1f5fbf; --field: #fffdf9; --walnut: #6b4a2f; --brass: #a8781e;
  --steel-1: #d9dadc; --steel-2: #b9bcc1; --plate: #2b2d31; --tape: #6a4a2c; --tape-over: #c2412f; --reel: #c9ccd1; --reel-back: #8d9198;
  --paper: #fdfbf4; --paper-ink: #2a2620; --belief-bg: #fff0b8; --belief-ink: #4a3800; --pulpit: #b3261e;
  --flag-bg: #f8dcd6; --flag-ink: #7a1d14; --ok-bg: #dcecdf; --ok-ink: #1d5130; --warn-bg: #f7ecc9; --warn-ink: #5e4304; --ask-bg: #e3e8f5; --ask-ink: #26376b;
  --shadow: 0 1px 0 rgba(50, 35, 20, .05), 0 6px 18px rgba(50, 35, 20, .09);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #16130f; --panel: #211d18; --ink: #efe8dc; --soft: #b7ab9b; --line: #3b342b; --chip: #2c2620; --tile: rgba(240, 220, 190, .035);
  --acc: #ff8a7a; --acc-ink: #2b0703; --focus: #8fb4ff; --field: #1b1813; --walnut: #c7986c; --brass: #e0b25a;
  --steel-1: #4a4d53; --steel-2: #393b40; --plate: #121315; --tape: #8a6440; --tape-over: #ff7a66; --reel: #9a9ea6; --reel-back: #5d6168;
  --paper: #f3eee2; --paper-ink: #2a2620; --belief-bg: #fff0b8; --belief-ink: #4a3800; --pulpit: #b3261e;
  --flag-bg: #4a1c16; --flag-ink: #ffcabf; --ok-bg: #18361f; --ok-ink: #b7e6c4; --warn-bg: #3d3010; --warn-ink: #ffe3a3; --ask-bg: #1f2944; --ask-ink: #cdd9ff;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--bg); background-image: radial-gradient(var(--tile) 1.4px, transparent 1.6px); background-size: 14px 14px; color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
a { color: var(--acc); }
h1, h2, h3, h4, .cs-title { font-family: "Rockwell", "Roboto Slab", "Iowan Old Style", Georgia, serif; }
.hidden { display: none !important; }
.small { font-size: .88rem; }
.muted { color: var(--soft); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.none { color: var(--soft); font-style: italic; }

/* Header */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--panel); border-bottom: 3px solid var(--walnut); }
.back { text-decoration: none; color: var(--soft); font-size: .92rem; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand strong { font-family: "Rockwell", "Roboto Slab", Georgia, serif; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 34px; height: 21px; flex: none; }
.lg-bg { fill: var(--steel-1); stroke: var(--walnut); stroke-width: 1.2; }
.lg-r { fill: var(--reel); stroke: var(--plate); stroke-width: 1; }
.lg-h { fill: var(--plate); }
.lg-t { fill: none; stroke: var(--tape); stroke-width: 1.4; }
.session { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Controls */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: var(--acc); }
.pill.solid { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.pill.solid:hover { filter: brightness(1.06); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: .8rem; }
.pill.big { padding: 10px 20px; font-size: 1rem; }
.pill:disabled { opacity: .5; cursor: not-allowed; }
.chip { padding: 5px 12px; border-radius: 4px; border: 1px solid var(--line); border-left: 4px solid var(--walnut); background: var(--chip); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; }
.chip.on { border-color: var(--acc); border-left-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
textarea { width: 100%; font: 1rem/1.65 "Courier Prime", "Courier New", Courier, monospace; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; min-height: 140px; }
textarea.drop { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
textarea:focus, .pill:focus-visible, .chip:focus-visible, .segb:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0 0 6px; background: var(--panel); }
.seg-l { padding: 6px 10px 6px 14px; }
.segb { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; cursor: pointer; font-size: .88rem; border-left: 1px solid var(--line); }
.segb input { margin: 0; accent-color: var(--acc); }
.draftrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#countLine.over { color: var(--acc); font-weight: 700; }
.filepick { position: relative; overflow: hidden; }
.filepick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Layout */
main { max-width: 1060px; margin: 0 auto; padding: 18px 18px 40px; }
.hero { padding: 14px 4px 6px; }
.kicker { margin: 0 0 10px; font-size: .9rem; color: var(--soft); border-left: 3px solid var(--acc); padding-left: 10px; }
h1 { margin: 0 0 8px; font-size: 2.4rem; line-height: 1.1; }
.h1b { display: block; font-size: 1.15rem; color: var(--acc); margin-top: 4px; font-weight: 600; }
.lede { max-width: 780px; margin: 0 0 12px; }
.samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); min-width: 0; }
.ph { margin: 0 0 10px; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--walnut); color: #fff; font: 700 .85rem/1 -apple-system, sans-serif; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .step-no { color: #1b130b; }
.free { font: 600 .7rem/1 -apple-system, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ok-ink); background: var(--ok-bg); padding: 4px 7px; border-radius: 6px; }
.lbl { display: block; font-weight: 600; font-size: .92rem; margin: 10px 0 5px; }
.lbl .muted { font-weight: 400; }
.note { background: var(--chip); border-radius: 8px; padding: 7px 10px; margin: 8px 0 0; }

/* The studio: deck, lamp, meter */
.studio-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.deckwrap { position: relative; }
.deck { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(30, 20, 10, .22)); }
.d-body { fill: var(--steel-1); stroke: var(--steel-2); stroke-width: 2; }
.d-plate { fill: var(--plate); }
.d-back { fill: var(--reel-back); }
.d-pack { fill: var(--tape); }
.d-pack-over { fill: var(--tape-over); }
.d-front { fill: var(--reel); stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.d-hub { fill: var(--plate); }
.d-spindle { fill: var(--reel); }
.d-tape { fill: none; stroke: var(--tape); stroke-width: 3; stroke-linejoin: round; }
.d-tape-over { stroke: var(--tape-over); }
.d-head { fill: var(--plate); stroke: var(--brass); stroke-width: 1.5; }
.d-window-count { fill: #141414; stroke: var(--steel-2); }
.d-count { fill: #ffb347; font: 700 12px ui-monospace, Menlo, monospace; letter-spacing: .06em; }
.d-cap { fill: #2b2d31; font: 700 9.5px -apple-system, sans-serif; letter-spacing: .08em; }
:root[data-theme="dark"] .d-cap { fill: #e8e4dc; }
.d-cap-over { fill: #a8211a; }
:root[data-theme="dark"] .d-cap-over { fill: #ff8a7a; }
.d-reel { transform-box: fill-box; transform-origin: center; }
.rolling .d-reel { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rolling .d-reel { animation: none; } }
.onair { position: absolute; top: -10px; right: 12px; z-index: 2; padding: 4px 12px; border-radius: 6px; background: #3a1512; border: 2px solid #1d0a08; box-shadow: inset 0 0 8px rgba(0, 0, 0, .6); }
.onair-t { font: 800 .82rem/1.2 -apple-system, sans-serif; letter-spacing: .18em; color: #d08a7f; }
.onair.ready { background: #5a2a12; }
.onair.ready .onair-t { color: #e9a45a; }
.onair.lit { background: #d6271c; border-color: #8f130c; box-shadow: 0 0 18px rgba(255, 60, 40, .65), inset 0 0 6px rgba(255, 220, 200, .5); }
.onair.lit .onair-t { color: #fff6ee; text-shadow: 0 0 6px #ffd3c8; }
.vubox { max-width: 240px; }
.vu { width: 100%; height: auto; display: block; }
.vu-face { fill: #f6e8c4; stroke: var(--walnut); stroke-width: 2; }
.vu-arc { fill: none; stroke: #2b2620; stroke-width: 2; }
.vu-arc.vu-red, .vu-tick.vu-red { stroke: #b3261e; stroke-width: 3; }
.vu-tick { stroke: #2b2620; stroke-width: 1.5; }
.vu-num { fill: #2b2620; font: 700 9px -apple-system, sans-serif; text-anchor: middle; }
.vu-label { fill: #5a4630; font: 800 10px -apple-system, sans-serif; letter-spacing: .2em; text-anchor: middle; }
.vu-needle { stroke: #1d1a16; stroke-width: 2; stroke-linecap: round; }
.vu-needle.vu-hot { stroke: #b3261e; }
.vu-pivot { fill: #1d1a16; }
.checklist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; font-size: .9rem; }
.checklist li { padding: 5px 9px; border-radius: 8px; background: var(--chip); overflow-wrap: anywhere; }
.checklist li.ok { background: var(--ok-bg); color: var(--ok-ink); }
.checklist li.no { background: var(--flag-bg); color: var(--flag-ink); }
.checklist li.ask { background: var(--ask-bg); color: var(--ask-ink); }
.ck { display: inline-block; width: 1.1em; font-weight: 800; font-family: ui-monospace, monospace; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 14px 0; font-size: .9rem; }
.facts dt { font-weight: 700; color: var(--soft); }
.facts dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

/* The script: onion-skin paper with a typed draft */
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lg-belief { background: var(--belief-bg); color: var(--belief-ink); padding: 0 5px; border-radius: 3px; }
.lg-pulpit { text-decoration: underline wavy var(--pulpit); text-underline-offset: 3px; }
.script { background: var(--paper); color: var(--paper-ink); border: 1px solid #d8cfbd; border-left: 34px solid #f1ebdc; border-radius: 4px; padding: 14px 16px; font: .98rem/1.85 "Courier Prime", "Courier New", Courier, monospace; box-shadow: inset 2px 0 0 #e6a7a0, var(--shadow); overflow-wrap: anywhere; max-height: 520px; overflow-y: auto; }
.sc-p { margin: 0 0 1em; }
.sc-empty { color: #7a7060; font-style: italic; margin: 0; }
.sc-belief { background: var(--belief-bg); color: var(--belief-ink); border-radius: 2px; }
.sc-pulpit { text-decoration: underline wavy var(--pulpit); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sc-over { color: #6b6253; text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, .55); }
.sc-mark, .legend .sc-mark { display: inline-block; font: 700 .7rem/1.2 ui-monospace, Menlo, monospace; color: #fff; background: #5c4a36; padding: 1px 5px; border-radius: 3px; margin: 0 4px 0 0; vertical-align: 2px; }
.sc-time { display: block; margin: 8px 0; padding: 3px 8px; font: 800 .74rem/1.4 -apple-system, sans-serif; letter-spacing: .1em; color: #fff; background: #b3261e; border-radius: 3px; }
.exports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Ask + progress */
.runrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.gate { background: var(--flag-bg); color: var(--flag-ink); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; }
.gate .pill { margin-left: 4px; }
.steps { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.step { color: var(--soft); }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--ok-ink); }
.step-ic { display: inline-block; width: 1.2em; font-family: ui-monospace, monospace; }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--field); border-radius: 8px; padding: 10px; font-size: .82rem; max-height: 340px; overflow: auto; }

/* The reading: a producer's cue sheet on a clipboard */
.res-kick { text-transform: uppercase; letter-spacing: .12em; color: var(--soft); margin: 0 0 8px; font-weight: 700; }
.cuesheet { position: relative; background: var(--paper); color: var(--paper-ink); padding: 26px 20px 18px; border-radius: 6px; border: 1px solid #d8cfbd; border-top: 14px solid var(--walnut); box-shadow: var(--shadow); }
.cuesheet::before { content: ""; position: absolute; top: -20px; left: 50%; width: 92px; height: 18px; margin-left: -46px; border-radius: 4px; background: linear-gradient(#c9ccd1, #8d9198); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.cuesheet h4 { margin: 16px 0 8px; font-size: 1rem; color: #6b4a2f; text-transform: uppercase; letter-spacing: .08em; }
.cuesheet .none { color: #6f6656; }
.cuesheet .note { background: #f4e6bf; color: #4d3a0c; }
.cs-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cs-title { margin: 0; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; flex: 1 1 220px; min-width: 0; }
.badge { display: inline-block; padding: 5px 11px; border-radius: 4px; font: 800 .78rem/1.2 -apple-system, sans-serif; letter-spacing: .12em; background: #3a1512; color: #e9a45a; border: 2px solid #1d0a08; white-space: nowrap; }
.badge.v-on_air { background: #d6271c; color: #fff6ee; border-color: #8f130c; box-shadow: 0 0 10px rgba(255, 60, 40, .45); }
.badge.v-off_the_pulpit { background: #f6dfa0; color: #4d3504; border-color: #b8913a; }
.badge.v-find_the_moment { background: #dfe6f6; color: #233873; border-color: #8ea0cf; }
.badge.v-name_it { background: #efd6cf; color: #6a1b10; border-color: #c4867a; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 0; }
.cs-cell { border: 1px dashed #c9bda6; border-radius: 6px; padding: 8px 10px; min-width: 0; }
.cs-l { display: block; font: 800 .7rem/1.3 -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #7a5c3e; margin-bottom: 3px; }
.cs-belief, .cs-moment { margin: 0; font: 1rem/1.5 "Courier Prime", "Courier New", Courier, monospace; overflow-wrap: anywhere; }
.cs-belief { background: var(--belief-bg); color: var(--belief-ink); display: inline; padding: 0 3px; }
.cs-belief.none { background: none; }
.notes { list-style: none; counter-reset: cue; margin: 0; padding: 0; display: grid; gap: 8px; }
.notes > li { counter-increment: cue; position: relative; padding: 8px 10px 8px 38px; border-radius: 6px; background: #f6f1e4; border: 1px solid #e3d9c4; overflow-wrap: anywhere; }
.notes > li::before { content: counter(cue); position: absolute; left: 9px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: #6b4a2f; color: #fff; font: 700 .72rem/20px -apple-system, sans-serif; text-align: center; }
.notes > li.none { padding-left: 10px; background: none; border-style: dashed; }
.notes > li.none::before { display: none; }
.nh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kind { font: 800 .7rem/1.4 -apple-system, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; background: #e7dfcd; color: #3d3428; }
.kind.k-keep { background: #d5ead9; color: #164027; }
.kind.k-cut { background: #f4d3cc; color: #6d170e; }
.kind.k-show { background: #f3e3b0; color: #4f3a05; }
.kind.k-ask { background: #dde4f5; color: #22356d; }
.at { font-size: .74rem; color: #6f6656; }
.notes > li.gone { opacity: .72; border-style: dashed; }
.gone-t { font-weight: 700; color: #6b4a2f; }
.nq { display: block; margin: 5px 0 3px; font: .95rem/1.5 "Courier Prime", "Courier New", Courier, monospace; color: #3d362c; }
.nq::before { content: "\201C"; } .nq::after { content: "\201D"; }
.nt { margin: 0; font-size: .93rem; }
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.line-card { border-left: 4px solid #b3261e; background: #fbf6ea; border-radius: 4px; padding: 8px 10px; min-width: 0; }
.line-card p { margin: 0 0 6px; font: 1rem/1.5 "Courier Prime", "Courier New", Courier, monospace; overflow-wrap: anywhere; }
.result h4 { font-size: 1.05rem; }
.recon { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.recon li { padding: 7px 10px; border-radius: 8px; background: var(--chip); font-size: .9rem; }
.recon li.warn { background: var(--warn-bg); color: var(--warn-ink); }
.recon li.none { font-style: normal; color: var(--ok-ink); background: var(--ok-bg); }

/* Saved scripts */
.cardrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.saved { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.hrow.none { border-style: dashed; }
.hdot { width: 14px; height: 14px; border-radius: 50%; background: var(--reel-back); box-shadow: inset 0 0 0 4px var(--reel); flex: none; }
.hdot.v-on_air { background: #d6271c; } .hdot.v-off_the_pulpit { background: #c9a24a; } .hdot.v-find_the_moment { background: #5470b8; } .hdot.v-name_it { background: #a85a4c; }
.hinfo { flex: 1; display: grid; min-width: 0; }
.hinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtns { display: flex; gap: 4px; }

/* Footer + toasts */
.foot { max-width: 1060px; margin: 0 auto; padding: 0 18px 40px; color: var(--soft); font-size: .86rem; }
.toasts { position: fixed; right: 14px; bottom: 14px; display: grid; gap: 8px; z-index: 30; max-width: min(380px, calc(100vw - 28px)); }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-size: .9rem; transition: opacity .5s; }
.toast.err { background: var(--flag-bg); color: var(--flag-ink); border: 1px solid var(--acc); }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 760px) {
  .studio-top { grid-template-columns: 1fr; }
  .checks { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
  .checklist { margin: 0; }
  .lines, .cs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bar { padding: 8px 12px; gap: 8px; }
  .back-t { display: none; }
  .brand strong { font-size: .98rem; }
  main { padding: 12px 12px 30px; }
  .foot { padding: 0 12px 30px; }
  h1 { font-size: 1.95rem; }
  .h1b { font-size: 1.02rem; }
  .panel { padding: 14px 13px; }
  .checks { grid-template-columns: 1fr; }
  .vubox { max-width: 200px; }
  .facts { grid-template-columns: 1fr; gap: 0 0; }
  .facts dd { margin-bottom: 6px; }
  .script { border-left-width: 14px; padding: 12px 11px; font-size: .92rem; }
  .cuesheet { padding: 24px 13px 14px; }
  .seg-l { width: 100%; padding: 6px 12px 2px; }
  .seg { border-radius: 12px; }
  .segb:first-of-type { border-left: 0; }
}
.d-roller { fill: var(--reel); stroke: var(--plate); stroke-width: 2; }