/* Preview-specific styles moved from styles.css */


.preview-pane { font-size: 1rem; background-color: var(--paper-white); }
.preview-pane code, .preview-pane pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* Ensure the preview area and its scrollable body remain paper-colored at all times.
   Use a tiled paper image from `/img/paper-tile.png` with the CSS color as a fallback. */
#preview .pane-body, .preview-pane .pane-body { background-color: transparent; height: 100%; min-height: 0; overflow: hidden; }
/* Preview container — background controlled by --preview-bg custom property */
#preview {
  background-color: var(--preview-bg, var(--snow));
  color: var(--paper-text);
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative; /* container for pseudo-element texture */
}
/* Preview background options set via body attribute */
body[data-preview-bg="snow"] { --preview-bg: var(--snow); }
body[data-preview-bg="white"] { --preview-bg: var(--paper-pure-white); }
body[data-preview-bg="paper"] { --preview-bg: var(--paper-white); }

#preview > .pane-body { position: relative; z-index: 1; }

/* Preview overlay (page guides) — hidden by default and toggled via settings */
.preview-overlay {
  position: absolute;
  /* anchor to top of preview pane so ruler aligns with editor header */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: none; /* shown when aria-hidden="false" */
  z-index: 900; /* above preview content but below modal UI */
}
.preview-overlay[aria-hidden="false"] { display: block; }

/* Outline the page body exactly (8.5in wide) and provide rails for inset
   positions (dialogue left, parenthetical, character center, etc) */
.preview-overlay .page-outline {
  position: absolute;
  top: var(--header-height);
  bottom: 0;
  /* center the page width inside the preview area */
  left: calc((100% - var(--page-width)) / 2);
  width: var(--page-width);
  box-sizing: border-box;
}

/* Horizontal ruler at top of preview - matches header height */
.preview-overlay .overlay-ruler {
  position: absolute;
  top: 0;
  left: calc((100% - var(--page-width)) / 2);
  width: var(--page-width);
  height: var(--header-height);
  background: color-mix(in srgb, var(--preview-bg, var(--paper-white)) 50%, transparent);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
}
/* Generate tick marks with repeating gradient - 1/4 inch increments */
.preview-overlay .overlay-ruler::before {
  content: '';
  position: absolute;
  left: -1px; /* offset to align tick center with rail center */
  right: 0;
  bottom: 0;
  height: 100%;
  /* Quarter-inch ticks using layered gradients */
  background-image:
    /* Whole inch ticks (tallest, 60% height) */
    repeating-linear-gradient(
      to right,
      var(--accent) 0px,
      var(--accent) 2px,
      transparent 2px,
      transparent 1in
    ),
    /* Half inch ticks (medium, 40% height) */
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 0.5in,
      color-mix(in srgb, var(--accent) 70%, transparent) 0.5in,
      color-mix(in srgb, var(--accent) 70%, transparent) calc(0.5in + 1px),
      transparent calc(0.5in + 1px),
      transparent 1in
    ),
    /* Quarter inch ticks (shortest, 25% height) */
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 0.25in,
      color-mix(in srgb, var(--accent) 50%, transparent) 0.25in,
      color-mix(in srgb, var(--accent) 50%, transparent) calc(0.25in + 1px),
      transparent calc(0.25in + 1px),
      transparent 0.5in
    );
  background-position: 0 bottom, 0 bottom, 0 bottom;
  background-size: 1in 60%, 1in 40%, 0.5in 25%;
  background-repeat: repeat-x;
}

/* Central hover label for rails - positioned in center of preview pane */
.rail-hover-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--modal-padding);
  /* Inverse colors relative to the preview (light background) */
  background: var(--preview-bg, var(--paper-white));
  /* Match rails on hover: blue accent border */
  border: 1px solid var(--accent);
  box-shadow: none; /* no glow effects — use border to show highlight */
  color: var(--paper-text);
  font-family: var(--ui-font); /* match UI text style instead of preview font */
  font-size: var(--ui-font-size);
  text-align: center;
  pointer-events: none;
  z-index: 950;
  display: none;
  flex-direction: column;
  gap: var(--list-gap);
  opacity: 0;
  transition: opacity 100ms ease;
}
.rail-hover-label.visible {
  display: flex;
  opacity: 1;
}
.rail-hover-label .label-name {
  font-weight: 400; /* match UI (no bold) */
  color: var(--paper-text);
}
.rail-hover-label .label-measurement {
  font-size: 0.875rem;
  color: var(--preview-muted);
}

.preview-overlay .rail {
  position: absolute;
  top: var(--header-height); /* below ruler */
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
  pointer-events: auto;
  cursor: pointer;
  transition: background 100ms ease, box-shadow 100ms ease;
}
/* Invisible wider hitbox for easier hover targeting */
.preview-overlay .rail::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15px;
  width: 32px;
  background: transparent;
}
.preview-overlay .rail::before {
  /* Remove label content - now shown on hover in central label */
  content: '';
  display: none;
}
.preview-overlay .rail:hover,
.preview-overlay .rail.hovered {
  width: 3px;
  margin-left: -0.5px;
  background: var(--accent);
}
.preview-overlay .rail.highlight {
  animation: none;
}
@keyframes rail-highlight-flash {
  0% { background: var(--accent); width: 6px; margin-left: -2px; }
  100% { background: color-mix(in srgb, var(--accent) 60%, var(--border) 40%); width: 2px; margin-left: 0; }
}

/* Rails mapped to screenplay rails using the global inch-based variables */
/* Rails are 2px wide, so offset by -1px to center on exact inch position */
.preview-overlay .left-margin { left: calc((100% - var(--page-width)) / 2 + 0in - 1px); }
.preview-overlay .action-left { left: calc((100% - var(--page-width)) / 2 + var(--page-margin-left) - 1px); }
.preview-overlay .dialogue-left { left: calc((100% - var(--page-width)) / 2 + var(--dialogue-left) - 1px); }
.preview-overlay .parenthetical-left { left: calc((100% - var(--page-width)) / 2 + var(--parenthetical-left) - 1px); }
.preview-overlay .character-center { left: calc((100% - var(--page-width)) / 2 + var(--character-center)); transform: translateX(-50%); }
.preview-overlay .character-center:hover { transform: translateX(-50%); margin-left: 0; }
.preview-overlay .dialogue-right { left: calc((100% - var(--page-width)) / 2 + var(--dialogue-right) - 1px); }
/* Transition rails (6.0 & 6.5in), text-right (page-margin-left + max text width), and page-right */
.preview-overlay .transition-6 { left: calc((100% - var(--page-width)) / 2 + 6in - 1px); }
.preview-overlay .transition-6-5 { left: calc((100% - var(--page-width)) / 2 + 6.5in - 1px); }
.preview-overlay .text-right { left: calc((100% - var(--page-width)) / 2 + var(--page-margin-left) + var(--max-text-width) - 1px); }
.preview-overlay .page-right { left: calc((100% - var(--page-width)) / 2 + var(--page-width) - 1px); }

/* Hide Monaco editor scrollbars so the minimap acts as the primary scrollbar */
.monaco-editor .scrollbar.horizontal,
.monaco-scrollable-element > .scrollbar.horizontal {
  /* hide only horizontal scrollbar so vertical scrollbars remain visible */
  display: none !important;
}

/* Ensure minimap slider is clickable */
.monaco-editor .minimap .slider {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Remove the top header inside the preview pane so only the editor shows a header */
.preview-pane .pane-body { padding-top: 0; }

/* Ensure preview column and inner wrappers fill available height so content reaches bottom */
.preview-pane { display: flex; flex-direction: column; height: 100%; position: relative; }
.preview-pane .pane-body { flex: 1 1 auto; }

.fountain-wrapper { height: 100%; }
/* Fountain-specific elements use Courier Prime */
.preview-pane .fountain, .preview-pane .fountain script, .preview-pane .fountain-page, .preview-pane .fountain-scene, .preview-pane .fountain-dialogue {
  font-family: 'Courier Prime', "Courier New", Courier, monospace;
}

/* Ensure normal (roman) font-style for rendered preview text */
.preview-pane, .preview-pane pre, .preview-pane code, .preview-pane .fountain { font-style: normal; }

/* Apply Courier Prime only to Fountain output and code blocks */
.preview-pane pre,
.preview-pane code,
.preview-pane .fountain,
.preview-pane .fountain * {
  font-family: 'Courier Prime', "Courier New", Courier, monospace;
}

.preview-pane .fountain {
  /* Respect real screenplay page width when possible while remaining responsive */
  width: 100%;
  margin: 0;
  background-color: transparent;
  color: var(--paper-text);
  box-sizing: border-box;
  /* Use page margins (top/right/bottom/left) exactly as industry standard */
  padding: var(--page-margin-top) var(--page-margin-right) var(--page-margin-bottom) var(--page-margin-left);
    /* Single-spaced 12pt Courier (Courier Prime), and ensure monospaced layout */
  font-family: 'Courier Prime', "Courier New", Courier, monospace;
    /* Keep screenplay text at exact 12pt but allow adjustable leading (unitless multiplier).
      Use the CSS variable --preview-leading (defaults to 1). */
    font-size: 12pt;
    line-height: var(--preview-leading, 1);
  box-shadow: none;
  min-height: 100%;
}
.fountain-wrapper { display:flex; justify-content:center; width: 100%; height: 100%; background: transparent; }
.fountain-block { display:block; margin:1.5em auto; max-width:48em; }
.preview-pane .fountain h1, .preview-pane .fountain h2, .preview-pane .fountain h3 { font-weight:700; }

/* Set preview area text (the content) to Courier Prime at 12pt specifically. This targets the #preview container
   and common preview content elements; site headers and UI are unaffected. */
#preview, #preview .fountain, #preview pre, #preview code {
  font-family: 'Courier Prime', "Courier New", Courier, monospace;
  font-size: 12pt;
  font-style: normal;
}

/* Enforce exact 12pt sizing for all preview content (including headings, numbers, and inline elements).
   Use !important to avoid accidental overrides; this ensures the preview always renders at the spec'd 12pt. */
#preview, #preview * {
  font-size: 12pt !important;
}

/* Title page should not be forced to 12pt — allow the title page to render with
   its natural/document font sizes (headings, author lines, etc). This overrides
   the global 12pt enforcement for title page sections only. */
/* Title page typography (adopt Afterwriting conventions)
   The vendored parser emits title page tokens with classes like `titlepagesection`
   and `titlepagetoken`. Historically we relied on Afterwriting's default
   sizing for title pages; explicitly restore that behavior here by applying
   conservative, typographically appropriate sizes for title elements.
*/
#preview .fountain .titlepagesection {
  font-family: 'Courier Prime', "Courier New", Courier, monospace !important;
  line-height: 1.15;
}

/* Main title (large, bold, centered by default) */
#preview .fountain .titlepagesection h1.titlepagetoken {
  font-size: 28pt !important; /* ~37.3px */
  font-weight: 700 !important;
  margin: 12pt 0 6pt 0 !important;
  text-transform: none !important;
}

/* Author and similar metadata lines (slightly larger than body) */
#preview .fountain .titlepagesection p.author.titlepagetoken,
#preview .fountain .titlepagesection p.credit.titlepagetoken {
  font-size: 14pt !important; /* ~18.6px */
  margin: 6pt 0 !important;
}

/* Other title page tokens (contact/source/etc.) use smaller metadata sizing */
#preview .fountain .titlepagesection p.titlepagetoken {
  font-size: 12pt !important; /* fallback for unspecified token types */
  margin: 6pt 0 !important;
  color: var(--preview-muted, #666) !important;
}

/* Ensure center / left / right alignment rules still apply */
#preview .fountain .titlepagesection[data-position="cc"],
#preview .fountain .titlepagesection[data-position="tc"] {
  text-align: center;
}
#preview .fountain .titlepagesection[data-position="tl"],
#preview .fountain .titlepagesection[data-position="bl"] {
  text-align: left;
}
#preview .fountain .titlepagesection[data-position="tr"],
#preview .fountain .titlepagesection[data-position="br"] {
  text-align: right;
}
/* Force normal style for all fountain elements by default */
.preview-pane .fountain * {
  font-style: normal;
}

/* Title page styling - matches Afterwriting's titlepagesection structure */
.preview-pane .fountain .titlepagesection {
  display: block;
  margin-bottom: 24pt;
  margin-top: 0;
}

.preview-pane .fountain .titlepagesection p {
  margin: 12pt 0;
}

/* Center positions */
.preview-pane .fountain .titlepagesection[data-position="cc"],
.preview-pane .fountain .titlepagesection[data-position="tc"] {
  text-align: center;
}

.preview-pane .fountain .titlepagesection[data-position="cc"] p,
.preview-pane .fountain .titlepagesection[data-position="tc"] p {
  text-align: center;
}

/* Left positions */
.preview-pane .fountain .titlepagesection[data-position="tl"],
.preview-pane .fountain .titlepagesection[data-position="bl"] {
  text-align: left;
}

.preview-pane .fountain .titlepagesection[data-position="tl"] p,
.preview-pane .fountain .titlepagesection[data-position="bl"] p {
  text-align: left;
}

/* Right positions */
.preview-pane .fountain .titlepagesection[data-position="tr"],
.preview-pane .fountain .titlepagesection[data-position="br"] {
  text-align: right;
}

.preview-pane .fountain .titlepagesection[data-position="tr"] p,
.preview-pane .fountain .titlepagesection[data-position="br"] p {
  text-align: right;
}

/* Page break after title page */
.preview-pane .fountain .page-break {
  margin: 24pt 0;
  border: none;
  border-top: 1px solid var(--paper-border);
  height: 0;
}

/* SCREENPLAY-SPECIFIC LAYOUT RULES (based on NFI screenplay-format reference)
   Measurements are inches from the left side of the page (exact industry rails).
   The .fountain element already has page margin padding; convert page positions into offsets
   relative to that padding using calc() so elements align exactly.
*/

/* Reset all fountain elements to no default margins, then apply specific spacing */
.preview-pane .fountain h1,
.preview-pane .fountain h2,
.preview-pane .fountain h3,
.preview-pane .fountain h4,
.preview-pane .fountain p {
  margin: 0;
}

/* Action lines and general body text are left-aligned at the left page margin */
.preview-pane .fountain .action,
.preview-pane .fountain .fountain-action,
.preview-pane .fountain .scene,
.preview-pane .fountain .fountain-scene,
.preview-pane .fountain p {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Action blocks followed by dialogue get a blank line (12pt) */
.preview-pane .fountain .action + .dialogue-block,
.preview-pane .fountain p + .dialogue-block {
  margin-top: 12pt;
}

/* Dialogue block: starts at 2.5in from page left -> relative to container left padding */
.preview-pane .fountain .dialogue,
.preview-pane .fountain .fountain-dialogue {
  margin: 0;
  margin-left: calc(var(--dialogue-left) - var(--page-margin-left));
  margin-right: 0; /* ragged right */
  /* limit width so long lines wrap like a real screenplay column (dialogue right limit) */
  max-width: calc(var(--dialogue-right) - var(--dialogue-left));
}

/* Parenthetical (wrylies): left offset at 3.0in from page left (spec.md) */
.preview-pane .fountain .parenthetical,
.preview-pane .fountain .fountain-parenthetical {
  margin: 0;
  margin-left: calc(var(--parenthetical-left) - var(--page-margin-left));
  margin-right: 0;
  font-style: italic !important; /* keep minor directions readable */
  /* keep parenthetical lines short (preferred single line) */
  max-width: calc(var(--dialogue-right) - var(--parenthetical-left));
}

/* Character name: centered at 4.0in from page left; use transform to center the name at that column (spec.md) */
.preview-pane .fountain .character,
.preview-pane .fountain .fountain-character {
  margin: 0;
  position: relative;
  left: calc(var(--character-center) - var(--page-margin-left));
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  font-weight: 700;
}

/* Dialogue block: first character in block gets top margin, last dialogue gets bottom margin */
.preview-pane .fountain .dialogue-block { margin: 0; }
.preview-pane .fountain .dialogue-block:first-of-type { margin-top: 12pt; }
.preview-pane .fountain .dialogue-block:last-of-type { margin-bottom: 12pt; }
.preview-pane .fountain .dialogue-block + .dialogue-block { margin-top: 12pt; }
.preview-pane .fountain .dialogue-block + .action,
.preview-pane .fountain .dialogue-block + .section,
.preview-pane .fountain .dialogue-block + .scene-heading,
.preview-pane .fountain .dialogue-block + .transition {
  margin-top: 12pt;
}

/* Scene headings: 12pt above (blank line), 12pt below */
.preview-pane .fountain .scene-heading,
.preview-pane .fountain .fountain-heading,
.preview-pane .fountain h3 {
  /* two blank lines (24pt) before a new scene */
  margin: 24pt 0 12pt 0;
  text-transform: uppercase;
  margin-left: 0;
}

/* Scene number styling (left of heading). Fixed-width block so numbers align neatly.
   We use a small right-margin to create a single character spacing between number+dot and heading text. */
.preview-pane .fountain .scene-heading {
  position: relative; /* anchor for absolute-positioned scene numbers */
}

.preview-pane .fountain .scene-heading .scene-number {
  position: absolute;
  /* anchor to the left edge of the heading and then translate left by its own
    width plus 12pt so the right edge of the number sits 12pt left of the
    content/indent. To keep the number vertically aligned with the heading
    even when the preview line-height (leading) changes, position the number
    at 50% and translateY(-50%) so it vertically centers on the heading line. */
  left: 0;
  top: 50%;
  /* move left into the gutter and vertically center */
  transform: translate(calc(-100% - 12pt), -50%);
  display: inline-block;
  vertical-align: baseline;
  /* lock line-height to 1 so the number's baseline is deterministic and doesn't
     inherit the heading's variable line-height. */
  line-height: 1;
  min-width: 3ch; /* fixed width so multi-digit numbers align */
  text-align: right;
  margin-right: 1ch; /* one character spacing between number+dot and heading */
  color: color-mix(in srgb, var(--paper-text) 75%, var(--muted) 25%);
  font-weight: 700;
}
.preview-pane .fountain .scene-heading:first-child,
.preview-pane .fountain h3:first-child {
  margin-top: 0; /* no space before first element on page */
}

/* Scene headings after another block should have two blank lines (24pt) before them */
.preview-pane .fountain .action + .scene-heading,
.preview-pane .fountain p + .scene-heading {
  margin-top: 24pt;
}

/* Transitions: 12pt above and below */
.preview-pane .fountain .transition,
.preview-pane .fountain h2 {
  margin: 12pt 0;
  text-align: right;
  text-transform: uppercase;
  margin-right: 0;
  font-weight: 700;
}

/* Action (and general body) uses global max width (6.0in) */
.preview-pane .fountain .action,
.preview-pane .fountain .fountain-action {
  max-width: var(--max-text-width);
}

/* When an author intentionally leaves a blank line between two action/description
   paragraphs in the editor, the parser produces separate action blocks. Ensure
   those consecutive action blocks render with a blank line separating them. */
.preview-pane .fountain .action + .action,
.preview-pane .fountain .fountain-action + .fountain-action {
  margin-top: 12pt;
}

/* Sections: 12pt above, 6pt below (half line) */
.preview-pane .fountain .section {
  margin: 12pt 0 6pt 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-medium);
}
.preview-pane .fountain .section:first-child {
  margin-top: 0; /* no space before first element on page */
}

/* Synopsis: 6pt above and below (no blank line spacing) */
.preview-pane .fountain .synopsis {
  margin: 6pt 0;
  font-style: italic;
  color: color-mix(in srgb, var(--paper-text) 70%, transparent 30%);
  margin-left: 0;
}

/* Notes: 6pt above and below */
.preview-pane .fountain .note,
.preview-pane .fountain .note-block {
  margin: 6pt 0;
  font-style: italic;
  color: color-mix(in srgb, var(--note-color) 80%, var(--paper-text) 20%);
}

.preview-pane .fountain .note-block {
  border-left: 2px solid color-mix(in srgb, var(--note-color) 65%, transparent 35%);
  padding-left: var(--control-gap);
}

/* Lyrics: indented like dialogue, with 12pt spacing */
.preview-pane .fountain .lyric {
  margin: 0;
  font-style: italic;
  margin-left: calc(var(--dialogue-left) - var(--page-margin-left));
}
.preview-pane .fountain .lyric:first-of-type {
  margin-top: 12pt;
}
.preview-pane .fountain .lyric:last-of-type {
  margin-bottom: 12pt;
}

/* Page breaks: 12pt above and below */
.preview-pane .fountain hr.page-break {
  border: none;
  border-top: 1px dashed color-mix(in srgb, var(--paper-text) 35%, transparent 65%);
  margin: 12pt 0;
}

.preview-pane .fountain .dual-dialogue {
  display: flex;
  gap: var(--space-lg);
  margin: 12pt 0;
}

.preview-pane .fountain .dual-dialogue__column {
  flex: 1 1 50%;
  min-width: 0;
}

.preview-pane .fountain .dual-dialogue__column--left {
  padding-right: var(--control-gap);
}

.preview-pane .fountain .dual-dialogue__column--right {
  padding-left: var(--control-gap);
}

.preview-pane .fountain .dual-dialogue__column .character {
  position: static;
  left: auto;
  transform: none;
  text-align: center;
}

.preview-pane .fountain .dual-dialogue__column .dialogue,
.preview-pane .fountain .dual-dialogue__column .parenthetical {
  margin-left: 0;
  max-width: 100%;
}

.preview-pane .fountain .dual-dialogue__column .dialogue-block {
  margin: 0 0 var(--control-gap) 0;
}

/* Allow a visual page gutter when page is wider than viewport */
.preview-pane { display: flex; justify-content: center; }

/* Keep page-like look while ensuring readability on small screens */
@media (max-width: calc(8.5in + 80px)) {
  .preview-pane .fountain { width: calc(100% - 32px); padding-left: min(1.5in, 16px); padding-right: min(1in, 16px); }
}

/* Removed responsive stacking to keep two-pane layout stable. Narrow windows will show
  an aspect-ratio warning modal handled via JS instead of automatically stacking panes. */
/* @media (max-width: 960px) { .split { flex-direction: column; height: 100vh; } .pane { min-height: 50vh; } } */

@media (prefers-color-scheme: dark) {
  /* :root overrides removed to rely on JS class toggling */
}