/* script.css: the Script stage (Movie door) on the CoS kit. Page-only classes are sc-. */
.sc-work { gap: 0; }
.sc-paper { position: relative; flex: 1; min-height: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-screen); display: flex; flex-direction: column; overflow: hidden; }
.sc-head { flex: none; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 22px 10px; border-bottom: 1px solid var(--line-soft); }
.sc-head h2 { font: 600 22px/1.1 var(--cond); }
.sc-stats { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 15px; color: var(--text-2); }
.sc-stats b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-speaker { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.sc-speaker select { height: 30px; padding: 0 6px; width: auto; }
.sc-video-banner { flex: none; margin: 10px 22px 0; padding: 8px 12px; border-radius: 9px; background: var(--run-soft); color: var(--text); font-size: 14px; line-height: 1.4; }
.sc-video-banner b { font-weight: 600; }
.sc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 96px; scrollbar-gutter: stable; }
.sc-scroll::-webkit-scrollbar { width: 10px; }
.sc-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 5px; border: 2px solid var(--panel); }
.sc-doc { max-width: 900px; margin: 0 auto; }
.sc-sec { margin-bottom: 14px; }
.sc-sech { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; font-size: 12.5px; color: var(--muted); }
.sc-sech .sc-secn { font: 600 13px var(--ui); color: var(--text-2); }
.sc-sech .sc-note { font-style: italic; }
.sc-sech .chip { height: 20px; font-size: 11px; padding: 0 7px; }
.sc-sech .btn.xs { height: 22px; }
.sc-para { font: 400 19px/1.62 var(--ui); color: var(--text); }
.sc-line { border-radius: 4px; cursor: text; transition: background .15s; position: relative; }
.sc-line:hover { background: var(--hover); }
.sc-line em { font-style: italic; color: var(--text-2); }
.sc-line.sc-pick { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.sc-line.sc-open { background: var(--raised); }
.sc-line.sc-chg { background: color-mix(in srgb, var(--done) 16%, transparent); }
.sc-line.sc-marked::after, .sc-line.sc-chg::after { content: "✎"; font-size: 11px; color: var(--accent-ink); vertical-align: super; margin-left: 2px; }
.sc-line.sc-locked { cursor: default; }
.sc-line del { color: var(--need); text-decoration: line-through; text-decoration-thickness: 2px; background: var(--need-soft); border-radius: 3px; }
.sc-line ins { color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--done) 26%, transparent); border-radius: 3px; padding: 0 2px; }
.sc-tagprop { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: 9px; background: var(--done-soft); color: var(--done); margin: 0 4px; vertical-align: 2px; }
.sc-proplab { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px; border: 1px dashed var(--accent-line); color: var(--accent-ink); margin-left: 4px; vertical-align: 3px; }

/* the line's direction, opened in place (SC2) */
.sc-dir { display: block; margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--accent-line); font-size: 14px; box-shadow: var(--shadow-pop); cursor: default; }
.sc-dir-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 14px var(--ui); }
.sc-dir-h .sc-grow { flex: 1; }
.sc-dir-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.sc-dir-g .sf-fld + .sf-fld { margin-top: 0; }
.sc-dir textarea.sf-field { min-height: 52px; resize: none; font-size: 13.5px; }
.sc-dir input.sf-field { font-size: 13.5px; }
.sc-dir-f { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.sc-dir-f .sc-hint { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 160px; }

/* hands-on: direction beside every passage */
.sc-rows .sc-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.sc-rows .sc-row:first-of-type { border-top: 0; }
.sc-rows .sc-para { font-size: 16.5px; line-height: 1.5; }
.sc-rdir { font-size: 12.5px; line-height: 1.4; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.sc-rdir b { color: var(--accent-ink); font-weight: 600; }
.sc-rdir .sc-rmeta { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.sc-rdir select { height: 24px; font-size: 12px; padding: 0 4px; width: auto; }
.sc-rows .sc-dir { grid-column: 1 / -1; }

/* panel */
.sc-picked { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 8px; padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.sc-picked q { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-picked:empty { display: none; }
.sc-hint0 { font-size: 13px; color: var(--muted); line-height: 1.45; }
.sc-fx { display: flex; flex-direction: column; gap: 5px; }
.sc-fx-g { border-radius: 9px; padding: 5px 9px; background: var(--bg-2); border: 1px solid var(--line-soft); font-size: 13px; line-height: 1.4; color: var(--text-2); }
.sc-fx-g > b { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13.5px; font-weight: 600; margin-bottom: 1px; }
.sc-fx-g > b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.sc-fx-g.ok > b::before { background: var(--done); }
.sc-fx-g.shift > b::before { background: var(--run); }
.sc-fx-g.look > b::before { background: var(--accent); }
.sc-fx-g.media > b::before { background: var(--need); }
.sc-fx-g ul { list-style: none; margin: 2px 0 0; padding: 0; }
.sc-fx-g li { display: flex; justify-content: space-between; gap: 8px; }
.sc-fx-g li span:last-child { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.sc-fx-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); color: var(--text); font-weight: 600; }
.sc-fx-total span:last-child { font-size: 15px; font-variant-numeric: tabular-nums; }
.sc-fx-what { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.sc-fx-what b { font-weight: 600; }
.sc-fx-btns { display: flex; gap: 8px; margin-top: 4px; }
.sc-fx-btns .btn.primary { flex: 1; }
.sc-fx-note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.sc-last { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.sc-last del { color: var(--need); }
.sc-last ins { text-decoration: none; color: var(--done); }
.sc-pron { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sc-pron .sc-pr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; margin: 0; }
.sc-pron .sc-pr + .sc-pr { margin-top: 0; }
.sc-pron .sf-lab { margin: 0; color: var(--text-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.sc-pron .sf-filled { margin-left: 0; }
.sc-pron .sf-field { height: 30px; padding: 0 8px; font-size: 13px; }

/* the strip: the parts along the read */
.sc-strip { display: flex; gap: 3px; align-items: stretch; height: 44px; }
.sc-strip button { position: relative; min-width: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-2); color: var(--text-2); font: 500 12px var(--ui); padding: 3px 6px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.sc-strip button b i { font-style: normal; }
.sc-strip button b { color: var(--text); font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.sc-strip button:hover { border-color: var(--accent-line); color: var(--text); }
.sc-strip button.sc-touch { border-color: var(--accent); }
.sc-strip .sc-total { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 4px 0 8px; font-size: 12px; color: var(--muted); }
.sc-strip .sc-total b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .sc-head { padding: 8px 12px; gap: 6px 10px; }
  .sc-head h2 { font-size: 18px; }
  .sc-stats { font-size: 13px; gap: 8px; }
  .sc-scroll { padding: 10px 12px 70px; }
  .sc-para { font-size: 16.5px; }
  .sc-dir-g { grid-template-columns: 1fr; }
  .sc-rows .sc-row { grid-template-columns: 1fr; gap: 4px; }
  .sc-strip { height: 36px; }
  .sc-strip button span, .sc-strip .sc-sd { display: none; }
  .sc-strip button { align-items: center; padding: 2px; }
  .sc-video-banner { margin: 8px 12px 0; font-size: 13px; }
}

/* 19:55: words first in the line editor; why Approve is dimmed, in words; the empty (Short / Ad) script */
.sc-dir .sc-words textarea.sf-field { min-height: 64px; font-size: 16px; line-height: 1.45; border-color: var(--accent-line); }
.sc-dir-sub { font: 600 12.5px var(--ui); color: var(--muted); margin: 10px 0 6px; text-transform: none; }
.sc-foot { flex-wrap: wrap; }
.sc-foot .sc-approve-why { flex-basis: 100%; font-size: 12.5px; color: var(--text-2); }
.sc-target { color: var(--text-2); }
.sc-target.sc-over b { color: var(--need); }
.sc-empty { max-width: 720px; margin: 24px auto; display: flex; flex-direction: column; gap: 10px; }
.sc-empty h3 { font: 600 24px var(--cond); }
.sc-empty p { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.sc-empty textarea.sf-field { min-height: 180px; font-size: 16px; line-height: 1.55; resize: vertical; }
.sc-howline { margin-top: 6px; font-size: 12.5px; }
.sc-fx-v2 { color: var(--accent-ink); font-weight: 600; }