/* ShotFold's Script document: paper, a continuous number gutter and screenplay
   stops. Checkout keeps its own chrome, softer bands and more open spacing. */
.chrome.script-tabs .ver-chip { min-width: 0; overflow: hidden; flex-shrink: 0; }
.chrome.script-tabs .ver-chip > span:first-child { flex: none; }
.chrome.script-tabs .ver-chip > span:not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 540px) {
  .chrome.script-tabs .toolbar .seg.center { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; min-width: 0; }
  .chrome.script-tabs .toolbar .seg.center button { flex-direction: column; gap: 3px; height: 40px; padding: 3px 2px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  /* Five tabs and comparison controls need separate rows at this width. */
  .chrome.script-tabs:has(.compare-tools-bar) .toolbar { height: auto; min-height: 82px; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 6px; }
  .chrome.script-tabs:has(.compare-tools-bar) .toolbar .seg.center { position: static; transform: none; order: -1; flex: 1 0 100%; justify-content: center; --tab-strip-h: 42px; }
  .chrome.script-tabs:has(.compare-tools-bar) .toolbar .seg.center button { padding-inline: 14px; }
  .chrome.script-tabs:has(.compare-tools-bar) .topbar.hdr .crumbs { max-width: none; }
}
.canvas.script-host { overflow: hidden; padding: 0; min-width: 0; }
.script-view { --script-thumbnail-rail: 136px; --script-gutter: 62px; --script-comments: 64px; --script-row-inset: 13px; --script-text-size: 17px; --script-paper: var(--bg-raise); container: script-pane / inline-size; height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--bg); }
.script-view[data-text-size="small"] { --script-text-size: 15px; }
.script-view[data-text-size="large"] { --script-text-size: 20px; }
.script-view [hidden] { display: none !important; }
.script-view-toolbar { gap: 7px; padding-right: 48px; /* reserve the shared tray handle */ }
.script-view.editing .script-view-toolbar { flex-wrap: wrap; }
.script-view.editing .script-search { flex-basis: 170px; }
.script-view-count { color: var(--ink-3); font: 10px var(--mono); white-space: nowrap; margin-right: 10px; }
.script-size-toggle { flex: none; }
.script-size-toggle button { width: 25px; padding: 0; font-size: 11px; }
.script-sections-button { color: var(--ink-2); font-size: 11.5px; padding: 0 7px; gap: 8px; }
.script-sections-button svg { width: 10px; height: 10px; }
.script-search { flex: 0 1 200px; min-width: 90px; }
.script-search-results { display: flex; align-items: center; gap: 1px; flex: none; }
.script-search-count { min-width: 24px; margin-right: 3px; text-align: right; color: var(--ink-2); font: 10px var(--mono); }
.script-search-results .btn { width: 23px; height: 26px; }
.script-view-tools, .script-edit-tools, .script-edit-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.script-view-tools .btn { color: var(--ink-2); }
.script-view-tools .btn:hover { color: var(--ink); }
.script-display-pop .title:not(:first-child) { margin-top: 12px; }
.script-view-mode { display: flex; margin: 0 4px; }
.script-view-mode button { flex: 1; }
.script-display-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px 4px 7px; }
.script-section-menu { max-height: min(480px, 70vh); overflow: auto; min-width: 240px; }
.script-section-swatch { width: 3px; height: 18px; border-radius: 2px; background: var(--section-color); flex: none; }
.script-section-menu-number { color: var(--ink-3); font: 10px var(--mono); min-width: 18px; }
.script-edit-tools { border-left: 1px solid var(--line); padding-left: 8px; margin-left: 3px; }
.script-edit-actions { margin-left: 8px; gap: 6px; }
.script-edit-actions .btn { height: 27px; font-size: 11px; }
.script-edit-bar { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; padding: 5px 12px; border-bottom: 1px solid var(--line); }
.script-edit-bar > .script-edit-error { margin-right: auto; }
.script-edit-error { font-size: 11px; color: var(--ink-3); }
.script-edit-error.save-failed { color: var(--danger); }
.script-bold { font-weight: 750; }
.script-italic { font-style: italic; }
.script-redo svg { transform: scaleX(-1); }

.script-body { flex: 1; min-height: 0; min-width: 0; display: flex; position: relative; overflow: hidden; --script-time-width: 76px; }
.script-columns { flex: 1; min-height: 0; min-width: 0; display: flex; }
.script-compare-primary, .script-compare-secondary { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; container: script-pane / inline-size; }
.script-compare-secondary { border-left: 1px solid var(--line-strong); }
.script-compare-secondary > .script-compare-header { padding-right: 42px; }
.script-compare-header { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 14px; border-bottom: 1px solid var(--line); background: var(--bg-sunk); }
.script-compare-header strong { min-width: 0; flex: 1; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-compare-header > span { color: var(--ink-3); font-size: 10px; }
.script-compare-audio { flex: none; width: 27px; height: 27px; }
.script-compare-audio[aria-pressed="true"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.script-view-toolbar > [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.script-diff-legend { display: flex; gap: 10px; font-size: 10px; color: var(--ink-2); flex-wrap: wrap; }
.script-diff-legend > span { border-left: 3px solid var(--ok); padding-left: 5px; }
.script-diff-legend > .moved { border-color: var(--shot-yellow); }
.script-compare-secondary > .script-editor { --script-thumbnail-rail: 4px; --script-comments: 18px; }
.comparing-scripts .script-body { --script-time-width: 58px; }
.comparing-scripts .script-editor { --script-thumbnail-rail: 4px; }
.comparing-scripts .script-view-toolbar { flex-wrap: wrap; }
@container script-pane (max-width: 600px) {
  .script-columns:has(.script-compare-secondary:not([hidden])) { flex-direction: column; }
  .script-compare-secondary { border-left: 0; border-top: 1px solid var(--line-strong); }
}
.script-editor { --script-rail: calc(var(--script-thumbnail-rail) + var(--script-gutter)); flex: 1; min-height: 0; min-width: 0; width: 100%; max-width: 1080px; margin: 0 auto; }
.script-view.hide-thumbnails .script-editor { --script-thumbnail-rail: 0px; }
.script-time-ruler { position: relative; flex: 0 0 var(--script-time-width); border-right: 1px solid var(--line); background: var(--bg-sunk); overflow: hidden; touch-action: none; cursor: ns-resize; user-select: none; }
.script-time-ruler[aria-disabled="true"] { cursor: default; }
.script-time-ruler:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.script-time-tick { position: absolute; right: 0; padding: 2px 9px 2px 3px; color: var(--ink-3); font: 9px/16px var(--mono); white-space: nowrap; }
.script-time-tick::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; border-top: 1px solid var(--line-strong); }
.script-playhead { position: absolute; top: 0; inset-inline: 0; height: 1px; background: color-mix(in srgb, var(--ok) 70%, transparent); z-index: 4; pointer-events: none; }
.script-playhead-label { position: absolute; top: -9px; left: 2px; width: calc(var(--script-time-width) - 4px); border-radius: 2px; background: var(--ok); color: var(--bg); text-align: center; font: 600 9px/18px var(--mono); white-space: nowrap; }
.script-loop-region, .script-range-draft { position: absolute; inset-inline: 0; pointer-events: none; border-block: 1px solid color-mix(in srgb, var(--ok) 60%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); z-index: 3; }
.script-range-draft { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.script-loop-clear { position: absolute; left: calc(var(--script-time-width) + 6px); top: 3px; width: 22px; height: 22px; display: grid; place-items: center; pointer-events: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink-2); }
.script-loop-clear svg { width: 12px; height: 12px; }
.script-shuttle { border-top: 1px solid var(--line); }
.script-cm.cm-editor { height: 100%; background: transparent; color: var(--ink); font: var(--script-text-size)/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.script-cm.cm-editor.cm-focused { outline: none; }
.script-cm .cm-scroller { display: block; position: relative; height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; font: inherit; }
.script-cm .cm-content { position: relative; margin: 18px var(--script-comments) 60px var(--script-rail); padding: 0 0 60px; min-height: calc(100% - 78px); caret-color: var(--ink); border: 1px solid var(--line); border-left: 0; border-radius: 0 4px 4px 0; }
/* Paper sits below CodeMirror's negative-z selection layer, not over it. */
.script-cm .cm-content::after { content: ""; position: absolute; inset: 0; z-index: -10; pointer-events: none; background: var(--script-paper); border-radius: inherit; }
/* The gutter shares the measured content height, including virtualized lines. */
.script-cm .cm-content::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(-1 * var(--script-gutter)); width: var(--script-gutter); pointer-events: none; background: color-mix(in srgb, var(--bg) 40%, var(--script-paper)); border: 1px solid var(--line); border-right-color: color-mix(in srgb, var(--line) 55%, transparent); border-radius: 4px 0 0 4px; }
.script-cm .cm-line { padding: 0 24px 0 12px; overflow-wrap: anywhere; }
.script-cm .cm-line:not(.script-review-line) { min-height: 18px; line-height: 18px; }
.script-cm .cm-line.script-review-line { min-height: 55px; padding-top: var(--script-row-inset); padding-bottom: var(--script-row-inset); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.script-character { color: var(--speaker-color); font-weight: 750; }
.script-emphasis { font-weight: inherit; }
strong.script-emphasis { font-weight: 750; }
.script-markup { color: var(--ink-3); }
.script-cm.cm-editor > .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
.script-cm.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.script-cm .cm-cursor { border-left-color: var(--ink); }
.script-view:not(.editing) .cm-cursorLayer { visibility: hidden; }
.script-view:not(.editing) .cm-content { caret-color: transparent; }
.script-cm .script-review-line.playing { box-shadow: inset 2px 0 0 var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.script-cm .script-review-line.search-hit { background: color-mix(in srgb, var(--shot-yellow) 10%, transparent); }
.script-cm .script-review-line.search-current { box-shadow: inset 2px 0 0 var(--shot-yellow); }
.script-cm .script-review-line.selected { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 69%, transparent); background: color-mix(in srgb, var(--accent) 3.75%, transparent); }
.script-section-wrap { position: relative; padding: 12px 0 4px; }
.script-section-wrap:first-child { padding-top: 0; }
.script-section { min-height: 32px; padding: 7px 16px; border-left: 3px solid var(--section-color); background: color-mix(in srgb, var(--section-color) 8%, var(--script-paper)); display: flex; align-items: baseline; gap: 12px; }
.script-section::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3px; height: 4px; background: var(--section-color); }
.script-cm .script-review-line:is(.script-diff-added, .script-diff-changed) { background: color-mix(in srgb, var(--ok) 13%, transparent); border-right: 3px solid var(--ok); }
.script-cm .script-review-line.script-diff-moved { background: color-mix(in srgb, var(--shot-yellow) 13%, transparent); border-right: 3px solid var(--shot-yellow); }
.script-cm .script-review-line.compare-match { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.script-cm .script-section-line { position: relative; }
.script-cm .script-section-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px; background: var(--section-color); pointer-events: none; }
.script-section h2 { font-size: 12px; line-height: 1.5; font-weight: 620; margin: 0; overflow-wrap: anywhere; letter-spacing: 0; }
.script-section-number { font: 10px var(--mono); color: var(--ink-2); }

/* Rails are measured from CodeMirror's actual line boxes, including wrapping. */
.script-rails { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; user-select: none; font: 12px var(--sans); }
.script-rail-row { position: absolute; left: 0; right: 0; }
.script-shot-rail { position: absolute; width: var(--script-rail); top: 0; bottom: 0; left: 0; color: var(--ink-3); }
.script-line-number { position: absolute; left: calc(var(--script-rail) - var(--script-gutter) / 2); transform: translateX(-50%); top: calc(var(--script-row-inset) + var(--script-text-size) * .85 - 9.5px); min-width: 38px; max-width: calc(var(--script-gutter) - 12px); padding: 1px 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--script-paper); color: var(--ink-2); text-align: center; font: 10px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-line-number { pointer-events: auto; cursor: pointer; }
.script-line-number:disabled { opacity: 1; cursor: default; }
.script-view:not(.hide-statuses, .editing) .script-line-number.has-status { border-color: var(--status-color); background: color-mix(in srgb, var(--status-color) 18%, var(--script-paper)); color: var(--ink); }
.script-view:not(.hide-statuses, .editing) .script-line-number.mixed { border-style: dashed; }
.script-line-number:enabled:hover, .script-line-number:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 2px; }
.script-thumbnails { position: absolute; z-index: 6; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.script-thumbnail { display: block; width: 100%; padding: 0; background: var(--bg); border: 0; text-align: left; color: var(--ink-2); }
.script-thumbnail-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--thumb-bed); border-radius: var(--r-s); overflow: hidden; }
.script-thumbnail-image img { width: 100%; height: 100%; object-fit: contain; }
.script-thumbnail-image > svg { width: 24px; height: 24px; }
.script-thumbnail-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px; padding: 4px 1px; font-size: 10px; }
.script-thumbnail-caption > span { color: var(--ink-3); font: 9px var(--mono); }
.script-thumbnails.compact .script-thumbnail-caption { display: none; }
.script-comment-rail { position: absolute; width: var(--script-comments); right: 0; top: calc(var(--script-row-inset) + var(--script-text-size) * .85 - 12px); padding-left: 10px; display: flex; align-items: flex-start; gap: 3px; pointer-events: auto; }
.script-avatars { display: flex; align-items: center; gap: 3px; }
.script-avatar { position: relative; width: 24px; height: 24px; flex: none; font-size: 9px; font-weight: 640; padding: 0; display: grid; place-items: center; transition: background var(--t-fast); }
.script-avatar:hover { background: color-mix(in srgb, var(--author-color) 25%, var(--bg-raise)); }
.script-avatar svg { width: 13px; height: 13px; }
.script-avatar-count { position: absolute; bottom: -7px; right: -4px; font: 8px/12px var(--mono); background: var(--bg); color: var(--ink-2); border-radius: 3px; padding: 0 2px; }
.script-line-comment.btn { width: 24px; height: 24px; color: var(--ink-3); }
.script-line-comment svg { width: 13px; height: 13px; }
.script-line-comment { visibility: hidden; }
.script-rail-row:is(.hovered, .selected, :focus-within) .script-line-comment { visibility: visible; }
.script-view.editing .script-line-number { visibility: visible; }
.script-view.hide-numbers .script-line-number { display: none; }
.script-view.paragraphs { --script-row-inset: 7px; }
.script-view.paragraphs .cm-line.script-review-line { min-height: 43px; border-bottom: 0; }
.script-view.editing .script-avatars { visibility: hidden; }
.script-view-empty { margin: auto; text-align: center; padding: 30px; }
.script-view-empty h2 { font-size: 16px; font-weight: 500; margin: 0 0 18px; }
.script-quote-action { position: absolute; z-index: 8; width: 32px; height: 32px; padding: 7px; box-shadow: var(--shadow-pop); }
.script-comment-cue { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; overflow: hidden; }
.script-comment-cue path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; animation: script-comment-cue 1600ms ease-in-out both; }
@keyframes script-comment-cue {
  0% { stroke-dashoffset: 1; opacity: 0; }
  20%, 80% { stroke-dashoffset: 0; opacity: .7; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
.script-conflict-dialog { width: min(900px, 95vw); max-width: 900px; }
.script-conflict-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.script-conflict-columns h3 { font-size: 13px; }
.script-conflict-columns pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; font: 14px/1.6 var(--sans); padding-right: 10px; }
@container script-pane (max-width: 760px) {
  .script-editor { --script-thumbnail-rail: 72px; --script-gutter: 58px; --script-comments: 64px; }
  .script-view-count { display: none; }
}
@container script-pane (max-width: 520px) {
  .script-body { --script-time-width: 60px; }
  .script-time-tick { font-size: 8px; padding-right: 5px; }
  .script-playhead-label { font-size: 8px; }
  .script-editor { --script-thumbnail-rail: 4px; --script-gutter: 54px; --script-comments: 58px; }
  .script-view-toolbar { flex-wrap: wrap; gap: 4px; padding: 6px 48px 6px 6px; }
  .script-search { flex: 1 1 80px; }
  .script-search-results { order: 2; margin-left: auto; }
  .script-edit-bar { gap: 5px; padding: 5px 7px; }
  .script-edit-error { flex: 1; }
  .script-edit-actions { margin-left: auto; }
  .script-view.editing .script-view-toolbar > .spacer { display: none; }
  .script-view.editing .script-view-toolbar .script-search { flex: 1 1 120px; }
  .script-edit-tools { padding-left: 0; margin-left: 0; border-left: 0; }
  .script-cm .cm-content { margin-top: 16px; }
  .script-cm .cm-line { padding-left: 12px; padding-right: 10px; }
  .script-section { padding: 7px 10px; gap: 8px; }
  .script-comment-rail { padding-left: 5px; }
}
@media (max-width: 700px) {
  .script-view-toolbar { padding-right: 6px; }
  .script-conflict-columns { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .script-conflict-columns pre { max-height: 25vh; }
}
@media (hover: none) {
  .script-line-comment { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .script-view * { transition: none !important; }
  .script-comment-cue path { animation: none; opacity: .7; }
}
.analysis-status {
  font-size: 12px;
  line-height: 1.3;
  max-width: 160px;
  white-space: normal;
  overflow-wrap: anywhere;
}