/**
 * Splashline paper — the engine's rendering surface. Copied byte-faithful
 * from upstream style.css (github.com/ArtofNor/splashline).
 *
 * ============================= DO NOT RESTYLE =============================
 * The screenplay paper and the PHP paginator cross-reference each other
 * line for line: 54 lines per page (Renderer::LINES_PER_PAGE), fixed
 * Courier metrics (Renderer::WIDTHS / DUAL_WIDTHS), the element indents
 * below, and the deliberate 0.05in right-pad slack. Restyle the chrome
 * AROUND the paper freely; change anything in this file and rendered pages
 * stop matching the computed page count (and print/PDF output breaks).
 * Fix upstream, tag, re-copy — never patch this copy.
 * See docs/storyboon-v05-rebuild.md §1 (the pagination contract).
 * ==========================================================================
 */

:root {
  --paper: #fff;
  --ink: #1a1a1a;
  --bg: #2b2b2b;
  --accent: #7a5cff;
  --muted: #888;
  /* The face every script surface is set in — the one part of the paper meant
     to be swapped. It must be monospaced at 10 characters per inch, because
     that is what Renderer::WIDTHS counts in: 60 characters of action fill the
     6in text block exactly, and a font with any other advance width silently
     moves every page break. Courier Prime, Courier Screenplay and Nimbus Mono
     all qualify; most "monospace" defaults do not. Verify before trusting one,
     in the console on a preview page:

       (s => { s.style.cssText='position:absolute;visibility:hidden;white-space:pre;font:12pt "Your Font"';
               s.textContent='M'.repeat(60); document.body.append(s);
               console.log(s.getBoundingClientRect().width / 96, 'in — want 6'); s.remove();
             })(document.createElement('span'))

     Name a font that isn't installed and the browser falls through the stack
     silently, so measure the result rather than the intent. */
  --script-font: "Courier New", Courier, monospace;
  /* One "character" of 12pt Courier ~= 0.6 * 12pt. 60 chars ~= the classic
     6-inch text block of a US-Letter screenplay page. */
  --page-width: 8.5in;
  /* Top + bottom must sum to 2in: the paginator's 54-line count assumes the
     9in text block that leaves on an 11in page. */
  --page-pad-top: 1in;
  --page-pad-bottom: 1in;
  /* Wider left margin for binding (three-hole punch side) — the industry
     standard, so screenplay sheets are intentionally not centered. */
  --page-pad-left: 1.5in;
  /* Half a character narrower than the nominal 1in: the paginator counts
     wrapped lines in whole characters, and a line that exactly fills its
     column (e.g. 35 chars in the 35-char dialogue box) can tip onto a second
     line from float rounding alone. The 0.05in slack makes exact fits safe
     without moving any break point (the next char still wraps). */
  --page-pad-right: 0.95in;
}

/* The contenteditable page. Inherits the .screenplay page look; these rules
   style the per-line divs and mirror the rendered indents. */
.editor-live {
  min-height: 70vh;
  outline: none;
  caret-color: var(--accent);
  line-height: 1;
}
.editor-live.is-empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
  position: absolute;
}

/* Editor-only: outline + structural markers, dimmed to read as metadata.
   (Preview hides these entirely — they're the writer's private notes.) */
.editor-live .ln.section { color: #b06a00; font-weight: bold; }
.editor-live .ln.synopsis { color: #999; font-style: italic; }
.editor-live .ln.page-break { color: #bbb; text-align: center; }

/* Editor-only: Sahtu comic scripts (.md), classified by heading level. The #s
   themselves aren't here — a comic line keeps its marker in data-mark and shows
   only its body (see editor.js) — so the labels below are drawn rather than
   typed, and the numbers come from counters that follow the same rules
   ComicRenderer prints with: pages count from 1, panels restart on each page. */
/* cpage only. Resetting cpanel here too would put it in the editor's own scope,
   and a counter already in scope can't be re-scoped by a child — every page's
   "counter-reset: cpanel" would then be the same counter and panels would run
   1..n across the whole script instead of restarting. Leaving it out lets each
   page create its own, which is what makes the numbering per-page. */
.editor-live.is-comic { counter-reset: cpage; }

.editor-live .ln.c-page {
  counter-increment: cpage;
  counter-reset: cpanel;
  font-weight: bold;
  text-transform: uppercase;
  /* Underlined rather than ruled off, the same mark Preview gives .cp-no and
     .cp-slug — so the head stops at the end of the slug instead of drawing a
     line across the page. */
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin-top: 1.2em;
}
/* The gap is a margin, not spaces, so the underline breaks across it the way
   Preview's separate .cp-no and .cp-slug spans do. */
.editor-live .ln.c-page::before { content: "PAGE " counter(cpage); margin-right: 0.8em; }
/* The writer numbered the page themselves ("PAGE TWO: ..."), so printing ours
   next to theirs would read as two page numbers. Same call as ComicRenderer:77. */
.editor-live .ln.c-page.c-page-own::before { content: none; }

/* The label is bold, the description isn't — Preview bolds only its
   .panel-label and leaves the description at normal weight. */
.editor-live .ln.c-panel { counter-increment: cpanel; margin-top: 0.9em; }
.editor-live .ln.c-panel::before { content: "PANEL " counter(cpanel) ": "; font-weight: bold; }
/* Scripts that spell the label out ("## **PANEL 1:** ...") show theirs instead
   of the counter — the text is absorbed into data-label the same way the #s
   are, so the asterisks never reach the page. */
.editor-live .ln.c-panel.c-panel-own::before { content: attr(data-label) ": "; }

/* Enter ends a paragraph, and the blank line it writes is shown as the gap it
   means rather than an empty row. It stays a real line — the caret can sit in
   it and Backspace removes it — just a short one. */
.editor-live.is-comic .ln.blank { line-height: 0.7em; }
/* A beat is a two-column form, the same one Preview builds with .beat: the cue
   on the left margin with #, ## and ### all flush, the balloon text 2.2in in
   (the width of .beat-label). Here the columns come from the source's own tab,
   so tab-size places the text — 22 characters is 2.2in at Courier's 10 per inch
   — and the hanging indent keeps wrapped dialogue under that column instead of
   back at the cue. Continuations are the same speech (the parser appends them
   to the beat), so they share the column. */
.editor-live .ln.c-beat { padding-left: 2.2in; text-indent: -2.2in; tab-size: 22; }
.editor-live .ln.c-beat-cont { padding-left: 2.2in; color: #444; }

/* The lettering conventions Preview prints, on the speech only — a beat is
   painted as a .cue and a .say so the cue stays in its column while the words
   beside it get set the way they'll be drawn. Sound effects are heavy, tracked
   and italic (.beat.sfx); captions sit in a tinted box (.beat.caption). */
.editor-live .ln.c-sfx .say { font-weight: bold; font-style: italic; letter-spacing: 0.1em; }
.editor-live .ln.c-caption .say {
  background: #f2f0e9;
  box-shadow: 0 0 0 1px #ddd8c8;
  border-radius: 2px;
}
.editor-live .ln.c-note { color: #8a7b52; font-style: italic; }

/* --- Rendered screenplay --------------------------------------------------- */
/* A sheet of paper: US-Letter width, screenplay margins. The live editor is a
   single continuous sheet; Preview stacks discrete 11in pages. */
.sheet {
  width: var(--page-width);
  margin: 0 auto 1.5rem;
  padding: var(--page-pad-top) var(--page-pad-right) var(--page-pad-bottom) var(--page-pad-left);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* A paginated preview page: exactly letter-sized (padding included). */
.page { height: 11in; position: relative; }

/* Page number in the top margin: 0.5in from the paper's top edge, flush with
   the text block's right margin. Lives inside the 1in top pad, so it never
   costs the paginator a line. */
.page .page-num {
  position: absolute;
  top: 0.5in;
  right: var(--page-pad-right);
}

/* Typography shared by every script surface. Swap the face at --script-font,
   not here, so the editor and both viewers stay on one font. */
.title-page,
.screenplay {
  font-family: var(--script-font);
  font-size: 12pt;
  line-height: 1;
}

.title-page {
  height: 11in;
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* Auto margins on both sides of the main block center it in the space above
   the footer (mirrors .cc-main on the comic cover). */
.tp-main { margin: auto 0; }
.tp-title { font-size: 12pt; font-weight: normal; text-transform: uppercase; text-decoration: underline; margin: 0 0 2em; }
.tp-credit { margin: 0.5em 0; }
.tp-author { margin: 0.5em 0; }
.tp-footer { font-size: 12pt; }

/* One line of the script — shared by the live editor and Preview, so both
   surfaces have identical geometry. Spacing comes from the source's blank
   lines (`.ln.blank`), never from margins. Indents are relative to the text
   block, which already starts at --page-pad-left (1.5in): standard positions
   from the paper's left edge are character 3.7in, parenthetical 3.1in,
   dialogue 2.5in — so the difference from that 1.5in margin goes here. */
.screenplay .ln {
  white-space: pre-wrap;
  /* Exactly one line: the paginator counts 54 lines per 9in text block, which
     only holds if a blank line is precisely 1em (12pt). Anything larger makes
     rendered pages taller than counted and content spills off the sheet. */
  min-height: 1em;
  /* The paginator hard-breaks words longer than a column; the browser must
     do the same or the counts drift. */
  overflow-wrap: break-word;
}

/* Dual dialogue: the paired speeches sit side by side. Column indents must
   match Renderer::DUAL_WIDTHS (character 1in, parenthetical 0.7in,
   dialogue 0.4in left + 0.2in right, inside ~2.9in columns). */
.screenplay .dual-row { display: flex; gap: 0.2in; }
.screenplay .dual-col { flex: 1; min-width: 0; }
.screenplay .dual-col .ln.character { padding-left: 1in; }
.screenplay .dual-col .ln.parenthetical { padding-left: 0.7in; }
.screenplay .dual-col .ln.dialogue { padding-left: 0.4in; padding-right: 0.2in; }
.screenplay .ln.scene-heading { font-weight: bold; text-transform: uppercase; position: relative; }
/* Scene numbers hang outside the text block in both margins, where a numbered
   shooting script prints them, so they never disturb the slug's own width. */
.screenplay .ln.scene-heading .scene-no {
  position: absolute;
  left: -0.75in;
  font-weight: normal;
}
.screenplay .ln.scene-heading .scene-no.right { left: auto; right: -0.6in; }
.screenplay .ln.character { padding-left: 2.2in; }
.screenplay .ln.parenthetical { padding-left: 1.6in; }
.screenplay .ln.dialogue { padding-left: 1in; padding-right: 1.5in; }
.screenplay .ln.transition { text-align: right; text-transform: uppercase; }
.screenplay .ln.section { font-weight: bold; color: #777; text-transform: uppercase; }
.screenplay .ln.centered { text-align: center; }
.screenplay .ln.lyric { font-style: italic; padding-left: 1in; }
.screenplay .ln.character { padding-left: 2.2in; }
.screenplay .ln.parenthetical { padding-left: 1.6in; }
.screenplay .ln.dialogue { padding-left: 1in; padding-right: 1.5in; }
.screenplay .ln.transition { text-align: right; text-transform: uppercase; }
.screenplay .ln.section { font-weight: bold; color: #777; text-transform: uppercase; }
.screenplay .ln.centered { text-align: center; }
.screenplay .ln.lyric { font-style: italic; padding-left: 1in; }

.page-break {
  border: none;
  border-top: 1px dashed #bbb;
  margin: 2em 0;
}

/* --- Comic script view ------------------------------------------------------ */
/* Comic scripts as Courier manuscript, same face as the screenplay side. One
   sheet per comic page; speeches numbered per page for lettering. */
.comic {
  font-family: var(--script-font);
  font-size: 12pt;
  line-height: 1.4;
}
.comic-stats {
  max-width: var(--page-width);
  margin: 0 auto 1rem;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
}
.comic .sheet { padding: 0.75in 1in; }
/* Letter proportions: min-height so a dense page can run long rather than
   clip, but every sheet reads as 8.5x11 paper. */
.comic-page { min-height: 11in; }

.cp-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.4em;
}
.cp-no, .cp-slug {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.cp-badge {
  font-size: 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  align-self: center;
}
.cp-count { margin-left: auto; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.cp-warn {
  font-size: 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  color: #a33;
  border: 1px solid #d99;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  align-self: center;
  white-space: nowrap;
}

.panel { margin-bottom: 1.4em; }
.panel-desc { margin: 0 0 0.7em; }
.panel-label { text-transform: uppercase; }
.p-badge {
  font-size: 0.65rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: #6b6b6b;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.p-badge.splash { background: var(--accent); }

/* A speech: "1. TAG:" at the left, the balloon text in its own column.
   Numbering runs per page, across panels, the way letterers key balloons. */
.beat {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0.9em 0;
}
.beat-label {
  flex: 0 0 2.2in;
  font-weight: bold;
  text-transform: uppercase;
}
.beat-no { color: var(--muted); font-weight: normal; }
.beat-ext { color: var(--muted); font-weight: normal; }
.beat-text { width: 3.3in; }
.beat-text p { margin: 0 0 0.9em; }
.beat-text p:last-child { margin-bottom: 0; }
.beat.sfx .beat-text { font-style: italic; letter-spacing: 0.1em; font-weight: bold; }
.beat.caption .beat-text {
  background: #f2f0e9;
  border: 1px solid #ddd8c8;
  padding: 0.1em 0.45em;
  border-radius: 2px;
}
.beat-wc {
  font-size: 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #a33;
  border: 1px solid #d99;
  border-radius: 4px;
  padding: 0 0.35rem;
  white-space: nowrap;
}

.comic-note { color: #8a7b52; font-style: italic; margin: 0.3em 0; }
.held { color: #8a7b52; }

/* The cover sheet: a letter-proportioned front page built from the preamble. */
.comic-cover {
  min-height: 11in;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.cc-main { margin: auto 0; }
.cc-title {
  font-size: 12pt;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin: 0 0 2em;
}
.cc-line { margin: 0.5em 0; }
.cc-key { color: var(--muted); }
.cc-note { color: #8a7b52; font-style: italic; margin: 1em auto; max-width: 5in; }
.cc-footer { margin-top: auto; }

/* --- Print / PDF ----------------------------------------------------------- */
@media print {
  @page { size: letter; margin: 0; }
  body { background: #fff; }
  .topbar { display: none; }
  main { padding: 0; }
  .sheet {
    margin: 0;
    box-shadow: none;
  }
  .title-page,
  .page { page-break-after: always; }
  .comic-page { page-break-after: always; }
  .comic-stats { display: none; }
}