/* Removed erroneous top-of-file drive-list / drive-item block */
:root {
  /* Base font size used by the UI. Keep in pt to match screenplay sizing. */
  --base-font-size: 12pt;
  /* Nord Theme - Polar Night & Frost */
  color-scheme: dark;
  
  /* Polar Night */
  --bg: #2E3440; /* nord0 */
  --bg-alt: #3B4252; /* nord1 */
  --border: #434C5E; /* nord2 */
  --muted: #4C566A; /* nord3 */
  
  /* Snow Storm */
  --text: #D8DEE9; /* nord4 */
  --snow: #ECEFF4; /* nord6 - light background */
  
  /* Frost */
  --accent: #88C0D0; /* nord8 */
  --accent-strong: #5E81AC; /* nord10 */

  /* Aurora (semantic colors) */
  --danger: #BF616A; /* nord11 - red */
  --warning: #D08770; /* nord12 - orange */
  --caution: #EBCB8B; /* nord13 - yellow */
  --success: #A3BE8C; /* nord14 - green */
  --note-color: #5A7A53; /* greenish note color */

  /* Paper (preview) tokens — keep preview appearance unchanged but tokenized */
  --paper-white: #eeede1;
  --paper-text: #111111;
  --shadow-color: #00000099; /* shadow color (used in box-shadow tokens) */
  
  /* Additional UI color tokens for consistent theming (hex/8-digit hex where alpha needed) */
  --hover-surface-color: #D8DEE90D; /* nord4 with ~5% opacity */
  --focus-ring-color: #D8DEE914; /* nord4 with ~8% opacity */
  --header-shadow-color: #2E344033; /* nord0 with ~20% opacity */
  --switch-knob-shadow-color: #2E344040; /* nord0 with ~25% opacity */
  --panel-border-color: #2E34401A; /* nord0 with ~10% opacity */
  --placeholder-muted: #D8DEE999; /* nord4 with ~60% opacity */
  --select-focus-color: #88C0D026; /* nord8 with ~15% opacity */
  /* Muted color used for preview overlays (dark text on light backgrounds) */
  --preview-muted: color-mix(in srgb, var(--paper-text) 70%, var(--muted) 30%);
  --switch-height: 24px; /* height of toggle switch */
  --switch-knob-size: 18px; /* knob diameter inside the switch */
  --switch-width: 44px; /* total width of the switch track */
  --switch-border-size: 1px; /* border thickness used on switch tracks */
  /* derived sizes for clean math and perfect centering */
  --switch-inner-height: calc(var(--switch-height) - (var(--switch-border-size) * 2));
  --switch-inset: calc((var(--switch-inner-height) - var(--switch-knob-size)) / 2);
  --panel-border-weak: #2E34401A; /* nord0 with ~10% opacity */
  --backdrop-color: rgba(46, 52, 64, 0.45); /* nord0 with 45% opacity for modal backdrops */
  --backdrop-blur: 0.66em; /* blur amount for modal backdrops */
  --ui-font: 'Noto Sans Mono', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-family: var(--ui-font);

  /* Letter-spacing tokens (typography spacing tokens) */
  --letter-spacing-base: 0.02em;       /* default UI text */
  --letter-spacing-heading: 0.02em;    /* section / header spacing */
  --letter-spacing-wide: 0.02em;       /* wide tracking for smallcaps / badges */
  --letter-spacing-control: 0.02em;    /* controls, button labels */
  --letter-spacing-medium: 0.02em;     /* medium tracking for sublabels */
  --letter-spacing-tight: 0.00em;     /* tight tracking for dense headings where needed */

  /* Control spacing tokens */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --control-padding-vert: 0.375rem; /* 6px */
  --control-padding-horiz: 0.75rem; /* 12px */
  --control-height: 2.25rem; /* 36px */
  --control-gap: var(--space-sm); /* 8px */
  --layout-gap: var(--space-md); /* 16px */
  --header-height: 3rem; /* 48px */
  --modal-padding: 1.25rem; /* 20px - slightly more breathing room */
  --slide-offset: 1.5rem; /* 24px - used for modal slide animations */
  --focus-min-width: 728px; /* minimum width in focus mode to fit outline + stats drawers */

  /* screenplay layout "rails" — all units in inches to match industry specs */
  --page-width: 8.5in; /* page width */
  --page-margin-left: 1.5in;
  --page-margin-right: 1in;
  --page-margin-top: 1in;
  --page-margin-bottom: 1in;
  /* element columns referenced from page left edge: */
  --dialogue-left: 2.5in;      /* dialogue left edge from page left */
  --parenthetical-left: 3.0in; /* parenthetical left edge from page left (spec.md) */
  --character-center: 4.0in;   /* center column for character names (spec.md) */
  --dialogue-right: 5.5in;     /* dialogue right limit (spec.md) */
  --max-text-width: 6.0in;     /* global max text width */
  --ui-line-height: 1.4; /* default line height for UI text and popups */
  --list-gap: 0; /* tighter gap used between list items (defaults to ~2px) */
  /* Scrollbar defaults for panel scrollers */
  --scrollbar-width: 12px; /* WebKit scrollbar width */
  --scrollbar-thumb-color: color-mix(in srgb, var(--border) 70%, var(--bg) 30%); /* default thumb color */
  --scrollbar-thumb-hover: color-mix(in srgb, var(--border) 85%, var(--bg) 15%);
}

/* Clickable controls use a subtle rounded box (no accent color for link text) */
button,
.status-link {
  background: transparent;
  border: 1px solid var(--border);
  /* use compact padding but ensure controls share a consistent min height */
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  min-height: var(--control-height);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  font-family: var(--ui-font);
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  border-radius: 0; /* remove edge rounding on selection box */
  font-size: 1rem;
  line-height: 1;
}
button:hover, .status-link:hover {
  background: var(--hover-surface-color);
}
button:focus-visible, .status-link:focus-visible {
  /* Use a coloured outline rather than an extra thick box-shadow */
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: none;
}

button:disabled, .status-link:disabled,
button[disabled], .status-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--border);
  color: var(--muted);
}

/* Theme overrides removed — stylesheet is dark-only and uses :root tokens */

* { box-sizing: border-box; box-shadow: none !important; text-shadow: none !important; }

/* Screen reader only - visually hidden but accessible to assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status message in status bar */
.status-message {
  margin-left: var(--space-sm);
  color: var(--placeholder-muted);
}
.status-message:empty { display: none; }

/* Keep page from scrolling — panes are individually scrollable. */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
/* Use scaled base font size so `rem` and UI elements can follow base font size */
html { font-size: var(--base-font-size); }
body { padding-bottom: 0; font-family: var(--ui-font); font-size: var(--base-font-size); }

.split {
  display: flex;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 1px;
  background: var(--bg);
  align-items: stretch;
  justify-content: center;
  overflow-x: hidden;
}

.split,
.pane,
.pane-body,
#editor,
.monaco-editor,
.monaco-editor .overflow-guard {
  min-width: 0 !important;
}

/* Monaco handles its own overflow - don't override */

body.editor-focused .split {
  justify-content: center;
  /* When the preview is hidden and the editor is centered we want the
     surrounding area to match the Nord background so the editor appears
     centered against the same paper-like background on both sides. */
  background: var(--bg);
}

body.editor-focused .preview-pane { display: none; }

body.editor-focused .editor-pane {
  flex: 0 1 auto;
  width: var(--page-width); /* Match the preview width for a focused page-like feel */
  max-width: 100%;
  margin: 0 auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: relative;
}

/* Focus mode resize handles */
.focus-resize-handle {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 100;
  background: transparent;
  transition: background 100ms ease;
}
.focus-resize-handle:hover,
.focus-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.3;
}
.focus-resize-handle.dragging.at-limit {
  animation: resize-limit-flash 100ms ease-out;
}
@keyframes resize-limit-flash {
  0% { background: var(--danger); opacity: 0.6; }
  100% { background: transparent; opacity: 0.3; }
}
.focus-resize-handle--left {
  left: -4px;
}
.focus-resize-handle--right {
  right: -4px;
}
body.editor-focused .focus-resize-handle {
  display: block;
}
body.focus-resizing {
  cursor: ew-resize !important;
  user-select: none !important;
}

.pane {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  min-height: 0;
}

.editor-pane {
  flex: 1 1 auto;      /* allows grow/shrink */
  min-width: 0;         /* critical: allow shrinking */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
/* Reserve a stable vertical space for the editor to prevent layout shifts when Monaco initializes */
.editor-pane { min-height: calc(100vh - (var(--header-height) * 2)); }


/* Preview is fixed to page width */
.preview-pane {
  /* The preview must be exactly 8.5in wide (WGA page width) — this is
     a strict requirement so rendered pages match industry dimensions. */
  flex: 0 0 8.5in;
  width: 8.5in;
  /* Leave height/content to the preview itself (multiple pages). Do NOT
     clamp the preview width — it must always be 8.5in even when viewport
     is narrower. Horizontal scrolling at the page level is allowed so the
     preview stays reachable. */
}

.pane-header {
  display: flex;
  align-items: center;
  /* force a consistent header height and avoid extra vertical padding that
     pushes content out of vertical center. We keep horizontal padding only */
  height: var(--header-height);
  padding: 0 var(--layout-gap);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  /* removed drop shadow to keep a flat UI */
  gap: var(--layout-gap);
}
.pane-header-left {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  min-width: 0; /* Allow flex item to shrink below content size */
  flex: 1;
}
/* Make the filename a block-level flex item so text-overflow:ellipsis works
   consistently — this ensures truncation removes whole characters and shows
   a trailing ellipsis instead of visually clipping the end. */
#current-filename {
  display: block; /* override the header child rule (inline-flex) */
  width: 100%;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pane-header-right {
  margin-left: auto; /* push right group to the far edge */
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

/* Ensure all immediate header children use identical line-height and centering
   so left and right content visually aligns on the same baseline. This covers
   filenames, small connection labels and header controls. */
.pane-header-left > *, .pane-header-right > * {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.pane-header h1, .pane-header h2 {
  margin: 0;
  /* Headings should not define their own font styles; inherit so they
     match the surrounding UI text. Placement is handled by the header
     container (flex + align-items:center) so headings only need margins. */
  font: inherit;
  line-height: inherit;
}

/* Make header controls visually compact and centered */
.pane-header .status-link, .pane-header button {
  /* header controls should be compact but respect the global control height */
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  min-width: 3.5rem; /* reserve width to avoid icon/label layout changes */
}
.pane-header .status-link, .pane-header button, .settings-header button, .settings-header .status-link {
  line-height: 1 !important; /* keep header controls visually compact */
}
.pane-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.editor-pane .pane-body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

#editor {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
}
/* Reserve editor height and make skeleton background while Monaco loads */
#editor { min-height: calc(60vh - (var(--header-height) * 1)); }

.editor-placeholder { background: linear-gradient(90deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.01) 100%); border-radius: 4px; }

.preview-pane .pane-body { padding: 0; line-height: 1.6; }
.editor-placeholder { display:flex; align-items:center; justify-content:center; gap: .75rem; height:100%; padding: var(--layout-gap); color: var(--placeholder-muted); font-style: italic; cursor: pointer; }
/* Ensure placeholder reserves reasonable space so the editor initialization doesn't push layout */
.editor-placeholder { min-height: calc(60vh - (var(--header-height) * 1)); }

/* Small spinner shown while the Monaco editor is loading */
.editor-spinner {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--placeholder-muted);
  border-right-color: rgba(0,0,0,0.08);
  box-sizing: border-box;
  display: inline-block;
  animation: editor-spin 900ms linear infinite;
}

/* Small spinner helper class: for status-bar, autosave countdown, etc. */
.editor-spinner--small,
.status-indicator .editor-spinner--small,
.status-link .editor-spinner--small,
#autosave-countdown .editor-spinner--small,
#status-bar .editor-spinner--small {
  /* Make the spinner the same overall height as action buttons
     Reduce border thickness so it looks balanced */
  width: calc(var(--control-height) - (var(--control-padding-vert) * 2));
  height: calc(var(--control-height) - (var(--control-padding-vert) * 2));
  border: 2px solid transparent;
  border-top-color: var(--placeholder-muted);
  border-right-color: rgba(0,0,0,0.12);
  vertical-align: middle;
  display: inline-block;
}

/* Utility modifier: shrink the default .editor-spinner for inline use */
.editor-spinner.editor-spinner--small { width: inherit; height: inherit; border-width: inherit; }

/* Overlay used for Drive/network operations. Covers the editor pane and
   blurs content underneath while showing the same spinner used for editor load. */
.drive-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 450;
  background: rgba(46,52,64,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.drive-overlay.open {
  display: flex;
  pointer-events: auto;
}

/* When the global overlay is visible, hide other spinner elements (e.g. modal list spinner)
   so there is only one visible spinner on screen. */
body.global-overlay-open .drive-loading {
  visibility: hidden;
}
body.global-overlay-open .drive-loading .editor-spinner {
  visibility: hidden;
}
body.global-overlay-open #editor-placeholder .editor-spinner {
  visibility: hidden;
}

@keyframes editor-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Spellcheck error decoration - red dotted underline */
.spellcheck-error {
  text-decoration: underline wavy var(--danger);
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
}

/* Spellcheck suggestions popup */
.spellcheck-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  padding: var(--space-sm);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* Remove drop shadow — prefer a flat panel style consistent with the rest of the UI */
  box-shadow: none;
  background: var(--bg); /* use the same panel background as other modals/panels */
  z-index: 1000;
  min-width: 140px;
  max-width: 220px;
}

.spellcheck-suggestion-btn {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease;
  white-space: nowrap;
}

.spellcheck-suggestion-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.spellcheck-ignore-btn {
  /* Make 'add to dictionary' visually align with suggestion buttons:
     - same padding and full-width layout so highlighting is even
     - keep a subtle top divider but use normal font styling to avoid uneven vertical spacing */
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  margin-top: var(--space-sm);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--snow);
  font-style: normal;
  text-align: left;
  cursor: pointer;
  transition: color 100ms ease, background 100ms ease;
}

.spellcheck-ignore-btn:hover {
  color: var(--accent);
  background: transparent;
}

.spellcheck-ignore-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  color: var(--accent);
  background: transparent;
}

.spellcheck-no-suggestions {
  padding: var(--space-sm) var(--space-sm);
  color: var(--placeholder-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.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: #ffffff; }
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: 1rem;
  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, .monaco-scrollable-element > .scrollbar, .monaco-editor .overflow-guard > .monaco-scrollable-element::-webkit-scrollbar { 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; }

.outline-drawer {
  position: absolute;
  inset: 0;
  z-index: 320;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--layout-gap);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
  padding: var(--layout-gap);
  box-sizing: border-box;
}
.outline-drawer .outline-backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  z-index: 0;
  pointer-events: none;
}
.outline-drawer .outline-panel {
  width: min(clamp(280px, 32vw, 420px), 100%);
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: translateX(calc(-1 * var(--slide-offset)));
  transition: transform 100ms ease, opacity 100ms ease;
  opacity: 0;
  position: relative;
  z-index: 1;
}
.outline-drawer .outline-stats-panel {
  width: min(260px, 100%);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: flex-start;
  transform: translateX(calc(-1 * var(--slide-offset)));
  transition: transform 100ms ease 100ms, opacity 100ms ease 100ms;
  opacity: 0;
  position: relative;
  z-index: 1;
}
.outline-drawer.open {
  pointer-events: auto;
  opacity: 1;
}
.outline-drawer.open .outline-backdrop {
  pointer-events: auto;
}
.outline-drawer.open .outline-panel {
  transform: translateX(0);
  opacity: 1;
}
.outline-drawer.open .outline-stats-panel {
  transform: translateX(0);
  opacity: 1;
}
.outline-stats-body {
  padding: var(--modal-padding);
  display: flex;
  flex-direction: column;
}
.outline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--border);
  letter-spacing: var(--letter-spacing-base);
}
.outline-panel__header h3 {
  margin: 0;
  font: inherit;
}
.scene-outline-count { color: var(--placeholder-muted); font-size: 0.9rem; }
.outline-panel__body {
  padding: var(--modal-padding);
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.scene-outline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--list-gap); }
.scene-outline-list li { margin: 0; padding: 0; }
/* Shared row style used across panels: outline rows, drive lists, dictionary rows, and picker options
  Keep behavior in a single place so spacing and hover states remain consistent. */
.panel-row,
.scene-outline__row {
  /* Match suggestion/drive item styling for consistent flat UI */
  width: 100%; border: none; background: transparent; display: flex; align-items: center;
  gap: var(--control-gap); padding: var(--space-sm) var(--space-sm); cursor: pointer;
  text-align: left; color: var(--text); font-family: inherit; min-height: auto;
  transition: background 100ms ease, color 100ms ease;
}
.scene-outline__row:hover,
.panel-row:hover {
  background: var(--accent);
  color: var(--bg);
}
.scene-outline__row:focus-visible,
.panel-row:focus-visible {
  background: var(--accent);
  color: var(--bg);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.scene-outline__number { font-weight: 400; min-width: 2.5rem; text-align: right; color: inherit; opacity: 0.7; }
.scene-outline__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ui-font); color: inherit; }
.scene-outline__meta { font-size: 0.85rem; color: inherit; opacity: 0.6; }
.scene-outline-empty { margin: var(--control-gap) 0 0; font-size: 0.95rem; color: var(--placeholder-muted); }
.outline-panel.is-empty .scene-outline-list { display: none; }
.outline-panel:not(.is-empty) .scene-outline-empty { display: none; }

/* Dictionary drawer */
.dictionary-drawer {
  position: absolute;
  inset: 0;
  z-index: 320;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
  padding: var(--layout-gap);
  box-sizing: border-box;
}
.dictionary-drawer .dictionary-backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  z-index: 0;
  pointer-events: none;
}
.dictionary-drawer .dictionary-panel {
  width: min(clamp(240px, 28vw, 340px), 100%);
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: translateX(calc(-1 * var(--slide-offset)));
  transition: transform 100ms ease, opacity 100ms ease;
  opacity: 0;
  position: relative;
  z-index: 1;
}
.dictionary-drawer.open {
  pointer-events: auto;
  opacity: 1;
}
.dictionary-drawer.open .dictionary-backdrop {
  pointer-events: auto;
}
.dictionary-drawer.open .dictionary-panel {
  transform: translateX(0);
  opacity: 1;
}
.dictionary-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-padding);
  border-bottom: 1px solid var(--border);
  letter-spacing: var(--letter-spacing-base);
}
.dictionary-panel__header h3 {
  margin: 0;
  font: inherit;
}
.dictionary-word-count { color: var(--placeholder-muted); font-size: 0.9rem; }
.dictionary-panel__body {
  padding: var(--modal-padding);
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dictionary-word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--list-gap); }
.dictionary-word-list li { margin: 0; padding: 0; }
.dictionary-word-list .dictionary-word-row, .panel-row {
  /* Match drive/outline row styling: flat, full-width, accent on hover */
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--control-gap);
  padding: var(--space-sm) var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: background 100ms ease, color 100ms ease;
  min-height: auto;
  text-align: left;
}
.dictionary-word-list .dictionary-word-row:hover,
.dictionary-word-list .dictionary-word-row:focus-visible {
  /* same highlight behavior as suggestion rows */
  background: var(--accent);
  color: var(--bg);
}
.dictionary-word-list .word-text {
  flex: 1;
  min-width: 0;
  font-family: var(--ui-font);
  font-size: 1rem;
  color: inherit; /* inherit so hover state inverts text */
}
.dictionary-word-list .word-delete {
  /* Subdued until row hover, then visible with inherited color */
  opacity: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  min-height: auto;
  font-size: 0.85rem;
  font-family: var(--ui-font);
  color: inherit;
  cursor: pointer;
  transition: opacity 100ms ease;
  display: inline-flex;
  align-items: center;
}
.dictionary-word-list .dictionary-word-row:hover .word-delete,
.dictionary-word-list .dictionary-word-row:focus-visible .word-delete { opacity: 0.7; }
.dictionary-word-list .word-delete:hover { opacity: 1; }
.dictionary-word-list .word-delete:focus-visible {
  outline: none;
  opacity: 1;
}
.dictionary-empty { margin: var(--control-gap) 0 0; font-size: 0.95rem; color: var(--placeholder-muted); }
.dictionary-panel.is-empty .dictionary-word-list { display: none; }
.dictionary-panel:not(.is-empty) .dictionary-empty { display: none; }

.fountain-wrapper { height: 100%; }

/* about page */
.about-layout {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  overflow: auto;
}
.about-panel {
  width: min(720px, 100%);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-height: calc(100vh - var(--space-xl) * 2);
  overflow: auto;
}
.about-header h1 { margin: 0 0 var(--space-xs); font: inherit; font-size: 1.5rem; text-transform: lowercase; }
.about-tagline { margin: 0; color: var(--placeholder-muted); font-size: 0.95rem; }
.about-section { border-top: 1px solid var(--border); padding-top: var(--layout-gap); }
.about-section:first-of-type { border-top: none; padding-top: 0; }
.about-section h2 { margin: 0 0 var(--control-gap); font: inherit; text-transform: lowercase; }
.about-section p { margin: 0 0 var(--control-gap); line-height: 1.5; }
.about-section ul { margin: 0 0 var(--control-gap) var(--layout-gap); padding: 0 0 0 var(--layout-gap); line-height: 1.5; }
.about-section a {
  color: var(--text);
  text-decoration: none;
  border: none;
  padding: 0;
  border-bottom: 1px solid transparent;
}
.about-section a:hover,
.about-section a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* 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 / single-spaced per WGA spec. Do NOT scale. */
  font-size: 12pt;
  line-height: 12pt; /* single spacing -> matches spec's 54 lines per page */
  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;
}

/* Force normal style for all fountain elements by default */
.preview-pane .fountain * {
  font-style: normal;
}

/* 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.
*/

/* 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-left: 0;
  margin-right: 0;
}

/* Dialogue block: starts at 2.5in from page left -> relative to container left padding */
.preview-pane .fountain .dialogue,
.preview-pane .fountain .fountain-dialogue {
  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-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 {
  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 spacing */
.preview-pane .fountain .dialogue-block { margin: var(--control-gap) 0; }

/* Transitions should align right and be uppercased */
.preview-pane .fountain .transition { 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,
.preview-pane .fountain p {
  max-width: var(--max-text-width);
}

/* Headings (SLUGS) should be uppercased and sit at the left margin */
.preview-pane .fountain .scene-heading,
.preview-pane .fountain .fountain-heading,
.preview-pane .fountain .scene,
.preview-pane .fountain .fountain-scene {
  text-transform: uppercase;
  margin-left: 0;
}

.preview-pane .fountain .section {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-medium);
  margin: var(--control-gap) 0 var(--space-xs) 0;
}

.preview-pane .fountain .synopsis {
  font-style: italic;
  color: color-mix(in srgb, var(--paper-text) 70%, transparent 30%);
  margin-left: 0;
}

.preview-pane .fountain .note,
.preview-pane .fountain .note-block {
  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);
  margin: var(--control-gap) 0;
}

.preview-pane .fountain .lyric {
  font-style: italic;
  margin-left: calc(var(--dialogue-left) - var(--page-margin-left));
}

.preview-pane .fountain hr.page-break {
  border: none;
  border-top: 1px dashed color-mix(in srgb, var(--paper-text) 35%, transparent 65%);
  margin: var(--layout-gap) 0;
}

.preview-pane .fountain .dual-dialogue {
  display: flex;
  gap: var(--space-lg);
  margin: var(--control-gap) 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 */
}

/* Bottom status bar */
.status-bar {
  position: relative;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center; /* vertically center items inside */
  justify-content: space-between;
  padding: 0 var(--layout-gap);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text);
}
.status-bar .status-left { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: var(--control-gap); line-height: 1; }
.status-bar #script-stats { display: inline-flex; align-items: center; height: 100%; line-height: 1; color: var(--placeholder-muted); margin-right: var(--control-gap); font-size: 0.85rem; gap: var(--space-xs); letter-spacing: var(--letter-spacing-base); }
.status-bar #script-stats { display: inline-flex; align-items: center; height: 100%; line-height: 1; color: var(--placeholder-muted); margin-right: var(--control-gap); font-size: 0.85rem; gap: var(--space-xs); letter-spacing: var(--letter-spacing-base); min-width: 6ch; visibility: hidden; }
.status-bar #script-stats[data-has-stats="true"] { visibility: visible; }
.status-message { min-width: 12ch; display: inline-block; }
.status-message:empty { visibility: hidden; }
.status-bar #status-right-text { display: flex; align-items: center; height: 100%; line-height: 1; }
.status-bar .status-right { color: var(--accent); margin-left: var(--layout-gap); flex:none; display: inline-flex; align-items: center; gap: var(--control-gap); line-height: 1; }
/* Ensure status-right actions reserve width so their labels/shortcuts don't shift layout */
.status-bar .status-right button, .status-bar .status-right .status-link { min-width: 3.5rem; }

/* Reserve space for save indicator to avoid shifts when it appears/disappears */
#save-status { min-width: 4ch; display: inline-block; }

/* Full-screen aspect warning modal (blocks interaction when the window is too narrow) */
.aspect-modal {
  /* Scope the aspect warning to the editor pane (reparented at runtime).
     Use absolute positioning so the backdrop only covers the editor area. */
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-in-out;
}
.aspect-modal.open { opacity: 1; pointer-events: auto; }
.aspect-modal .panel { background: var(--bg); border: 1px solid var(--border); padding: var(--modal-padding); width: min(720px, 90vw); box-sizing: border-box; text-align: center; transform: translateY(calc(-1 * var(--slide-offset))); opacity: 0; transition: transform 100ms ease, opacity 100ms ease; }
.aspect-modal.open .panel { transform: translateY(0); opacity: 1; }
.aspect-modal h2 { margin: 0 0 var(--control-gap) 0; font: inherit; line-height: inherit; }
.aspect-modal p { margin: 0; color: var(--placeholder-muted); }
.aspect-modal .actions { margin-top: var(--layout-gap); display:flex; gap:var(--control-gap); justify-content:center; }
.aspect-modal .actions .status-link, .aspect-modal .actions button { min-width: 120px; }

/* Custom confirm/alert modal - replaces browser dialogs */
.confirm-modal {
  /* Scope confirm modal to the editor pane by default (reparented into
     .editor-pane at runtime). Use absolute positioning so the backdrop
     covers only the editor area rather than the whole viewport. */
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-in-out;
}
.confirm-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.confirm-modal .confirm-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
.confirm-modal .confirm-panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--modal-padding);
  width: min(400px, 90vw);
  box-sizing: border-box;
  text-align: center;
  transform: translateY(calc(-1 * var(--slide-offset)));
  opacity: 0;
  transition: transform 100ms ease, opacity 100ms ease;
}
.confirm-modal.open .confirm-panel {
  transform: translateY(0);
  opacity: 1;
}
.confirm-modal .confirm-title {
  margin: 0 0 var(--control-gap) 0;
  font: inherit;
  line-height: inherit;
}
.confirm-modal .confirm-message {
  margin: 0;
  color: var(--placeholder-muted);
}
.confirm-modal .confirm-actions {
  margin-top: var(--layout-gap);
  display: flex;
  gap: var(--control-gap);
  justify-content: center;
}
.confirm-modal .confirm-actions .status-link {
  min-width: 80px;
  justify-content: center;
  text-align: center;
}
/* Hide cancel button for alert-style (single button) dialogs */
.confirm-modal.alert-mode #confirm-cancel {
  display: none;
}

/* When aspect modal is open, prevent pointer events through the rest of the app */
.aspect-modal.open ~ * { pointer-events: none; }

/* Plain text links used in the status bar (no button chrome) */
.status-link { margin-left: var(--control-gap); }

/* Shortcut hint shown inside status links */
.status-link .shortcut {
  margin-left: var(--control-gap);
  color: var(--placeholder-muted);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}

/* Remove visible shortcut labels from the UI while keeping shortcut handlers
   in JS active. This hides the small inline shortcut hints on buttons/links
  but leaves plain text messages (e.g. "hard refresh (⌘⇧R) to load the latest version")
   untouched because they are not marked with the .shortcut class. */
.shortcut { display: none !important; }



/* ------------------------------------------------------------------
   UI typography normalization
   Make all application UI elements (headers, controls, modal text, status
   messages, etc.) use a consistent font-weight and size. Explicitly exclude
   the preview pane/preview content so rendered screenplays remain unchanged.
   ------------------------------------------------------------------ */
/* Scope to panes that are not the preview, and common modal/status elements */
.pane:not(.preview-pane),
.pane:not(.preview-pane) *,
.settings-modal, .settings-modal *,
.confirm-modal, .confirm-modal *,
.drive-panel, .drive-panel *,
.drive-modal, .drive-modal *,
.aspect-modal, .aspect-modal *,
.outline-panel, .outline-panel *,
.status-bar, .status-bar * {
  font-weight: 400 !important;
  font-size: 1rem !important; /* normalize to UI size used elsewhere */
  line-height: var(--ui-line-height) !important;
  /* Ensure all UI text uses the same letter-spacing token to keep spacing consistent */
  letter-spacing: var(--letter-spacing-base) !important;
  font-style: normal !important;
}

/* Ensure headings in the UI are visually identical to regular text */
.pane:not(.preview-pane) h1,
.pane:not(.preview-pane) h2,
.pane:not(.preview-pane) h3,
.pane:not(.preview-pane) h4,
.pane:not(.preview-pane) h5,
.pane:not(.preview-pane) h6,
.settings-header h3,
.aspect-modal h2 {
  margin: 0; /* keep spacing behaviour unchanged */
  /* Do not force heading-specific font properties here; headings should
     inherit UI font metrics so they look identical to body text. */
  font: inherit;
  line-height: inherit;
}


/* Settings modal */
.editor-pane { position: relative; }

/* Modals position relative to the editor pane so they center over the editor only */
.settings-modal {
  position: absolute; inset: 0; display: flex; z-index: 300;
  /* Use opacity/visibility for transitions; keep the modal in the DOM to animate */
  opacity: 0; pointer-events: none;
  transition: opacity 100ms ease-in-out;
  padding: var(--layout-gap);
  box-sizing: border-box;
}
/* Default: modals align to bottom-right (file, settings triggered from status bar) */
.settings-modal {
  align-items: flex-end;
  justify-content: flex-end;
}
.settings-modal.open {
  opacity: 1; pointer-events: auto;
}
.settings-modal .settings-backdrop { position: absolute; inset: 0; background-color: var(--backdrop-color); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); z-index: 0; pointer-events: none; }
.settings-modal.open .settings-backdrop { pointer-events: auto; }
.settings-modal .settings-panel { position: relative; z-index: 1;
  width: min(calc(var(--left-pane-width, 680px) * 0.85), calc(100% - var(--space-xl)));
  min-width: 320px; max-width: calc(100% - var(--space-xl)); max-height: calc(100% - var(--space-xl)); overflow: auto; background: var(--bg); border: 1px solid var(--border);
  transform: translateX(var(--slide-offset)); opacity: 0; transition: transform 100ms ease, opacity 100ms ease;
}
.settings-modal.open .settings-panel { transform: translateX(0); opacity: 1; }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: var(--modal-padding); border-bottom: 1px solid var(--border); }
.settings-header h3 { margin: 0; font: inherit; line-height: inherit; /* heading text inherits UI font styling */
  /* Don't change display for the heading — allow the container's flex
     alignment to vertically center it. */
  display: block;
}

/* Make header/right-controls consistent inside modal header */
.settings-header button, .settings-header .status-link, .settings-header .header-actions {
  line-height: 1; display: inline-flex; align-items: center; vertical-align: middle;
}
.settings-body { padding: var(--modal-padding); font-size: 1rem; line-height: 1.4; color: var(--text); }
/* Ensure paragraphs and lists inside popups use UI line-height and have bottom margin for spacing */
.settings-modal p, .settings-modal ul, .settings-modal ol, .confirm-modal p, .picker-modal p, .drive-modal p, .outline-panel p, .dictionary-panel p {
  line-height: var(--ui-line-height);
  margin-bottom: var(--control-gap);
}
.settings-row { margin: var(--control-gap) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--control-gap); }
.settings-note { color: var(--placeholder-muted); margin-bottom: var(--control-gap); }
.settings-panel input[type="range"] { width: 200px; }
.settings-panel  { margin: 0; }

/* Ensure buttons inside settings panel use the global control padding */
.settings-panel button, .settings-panel .status-link {
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  font-size: 1rem;
}
.settings-panel .file-modal-badge {
  /* Badge sizes and spacing scale with the badge font-size variable */
  --file-modal-badge-size: 2rem; /* default badge font-size */
    /* Gap relative to badge font size — change this to increase/decrease space between
      the bottom of the badge and the top of the modal panel. Default multiplier 1.25 mirrors
      the original `top: -2.5rem` for a 2rem badge. */
    --file-modal-badge-gap-factor: 1.6; /* increased gap to modal */
    --file-modal-badge-gap: calc(var(--file-modal-badge-size) * var(--file-modal-badge-gap-factor)); /* gap between badge baseline and modal edge */
  position: absolute;
  /* position the badge above the modal panel — use the font-size based gap for consistent proportional spacing */
  top: calc(var(--file-modal-badge-gap) * -1);
  left: var(--modal-padding); /* align with start of modal content (inside padding) */
  transform: translateY(calc(var(--file-modal-badge-gap) * -0.12));
  /* auto-width so the large font can display naturally */
  width: auto;
  text-align: left;
  font-family: 'Courier Prime', monospace;
  font-style: italic; /* render italic if the font provides it */
  font-size: var(--file-modal-badge-size) !important; /* scaled size */
  font-size: 32px; /* fallback */
  color: var(--snow);
  white-space: nowrap;
  opacity: 0; /* start hidden */
  z-index: 999; /* above the panel and overlays */
  pointer-events: none; /* not interactive */
  transition: opacity 160ms ease, transform 160ms ease;
  line-height: 1;
  text-shadow: none; /* no glow effects */
  overflow: visible;
}
.settings-modal.open .settings-panel .file-modal-badge {
  opacity: 1; /* fully opaque when visible */
  transform: translateY(0);
}

/* Make sure the file modal's panel allows overflow so the badge is visible */
#file-modal .settings-panel {
  overflow: visible;
}

/* Special case: a button alone in a row should align left, with left edge aligned to header text.
   The -1px margin compensates for the button's 1px border so the button's outer left edge
   aligns vertically with the modal header text (e.g., "file" in the file modal). */
.settings-row > button:only-child,
.settings-row > .status-link:only-child {
  margin-right: auto;
  margin-left: -1px;
}

/* Picker trigger in settings row aligns right like toggle switches */
.settings-row > .picker-trigger {
  flex: 0 0 auto;
}

/* Toggle switch used in settings */
.settings-switch { display: inline-flex; align-items: center; }
.settings-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.settings-switch .switch-slider {
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--switch-height) / 2); /* rounded outer corners */
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  transition: background .15s ease, border-color .15s ease;
}
.settings-switch .switch-slider::after {
  content: '';
  position: absolute;
  width: var(--switch-knob-size);
  height: var(--switch-knob-size);
  left: var(--switch-inset);
  top: var(--switch-inset);
  /* remove glow/box-shadow for consistency */
  background: var(--bg-alt);
  box-shadow: none;
  transform: translateX(0);
  border-radius: 50%;
  transition: transform .15s ease;
}
.settings-switch input[type="checkbox"]:focus-visible + .switch-slider {
  /* disabled focus highlight for toggle switch */
  box-shadow: none;
}
.settings-switch input[type="checkbox"]:checked + .switch-slider {
  background: var(--accent);
  border-color: var(--panel-border-weak);
}
.settings-switch input[type="checkbox"]:checked + .switch-slider::after {
  /* move knob to right edge while preserving equal inset on both sides.
     When left is (height - knob)/2 the required translate simplifies to
     (switch-width - switch-height) so the math stays stable across sizes. */
  /* move knob to the right while preserving equal inner insets:
     translateX = track width - knob size - (inset * 2) */
  /* translate distance = inner track width - knob - (inset * 2) */
  transform: translateX(calc((var(--switch-width) - (var(--switch-border-size) * 2)) - var(--switch-knob-size) - (var(--switch-inset) * 2)));
}

/* small aesthetic improvement: make the knob slightly elevated on active */
.settings-switch input[type="checkbox"]:active + .switch-slider::after {
  transform: translateX(calc((var(--switch-width) - (var(--switch-border-size) * 2)) - var(--switch-knob-size) - (var(--switch-inset) * 2))) scale(0.98);
}

/* Improve modal spacing and actions layout */
.settings-panel { display: flex; flex-direction: column; }
.settings-panel .settings-body { padding: var(--modal-padding); display: flex; flex-direction: column; gap: var(--control-gap); box-sizing: border-box; }
.settings-panel .settings-body .settings-row { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--control-gap); width: 100%; }
/* Labels in settings rows take available space, controls align right */
.settings-panel .settings-body .settings-row > label:first-child { flex: 1 1 auto; color: var(--placeholder-muted); font-size: 1rem; }
.settings-panel .settings-body .settings-row > label.settings-switch { flex: 0 0 auto; }
.settings-panel .settings-body .settings-row .row-control { flex: 1 1 auto; display: flex; align-items: center; gap: var(--control-gap); }

/* Horizontal divider in settings panels */
.settings-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--control-gap) calc(-1 * var(--modal-padding));
}

/* Action buttons area at the bottom of panels */
.settings-panel .modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--control-gap);
  padding: var(--modal-padding);
  border-top: 1px solid var(--border);
  background: transparent;
}
.settings-panel .modal-actions button { min-height: var(--control-height); padding: var(--control-padding-vert) var(--control-padding-horiz); }

/* Ensure inputs align vertically with buttons */
.settings-panel input[type="text"], .settings-panel input[type="number"], .settings-panel input[type="range"] { height: 36px; line-height: normal; }

/* Export modal/controls removed — export UI deprecated. */

.stats-panel .settings-body {
  padding-top: 0;
}

.stats-grid {
  display: flex;
  flex-direction: column;
}

.stats-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--control-gap) 0;
  border-bottom: 1px solid var(--border);
}
.stats-row:last-child {
  border-bottom: none;
}

.stat-label {
  margin: 0;
  text-transform: none;
  font-size: 0.85rem;
  color: var(--placeholder-muted);
  letter-spacing: var(--letter-spacing-base);
}

.stat-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  text-align: right;
}

/* Allow settings rows to wrap on narrow screens and keep controls usable */
@media (max-width: 520px) {
  .settings-panel .settings-body .settings-row { flex-direction: column; align-items: stretch; }
  .settings-panel .settings-body .settings-row > label:first-child { width: 100%; margin-bottom: var(--space-xs); }
  .settings-panel .settings-body .settings-row > label.settings-switch { align-self: flex-start; }
  .settings-panel .settings-body .settings-row > select { align-self: flex-start; }
  .settings-panel .modal-actions { justify-content: center; }
}

/* Remove purely visual focus styling for mouse-based interactions, but
   re-enable :focus-visible for keyboard users to preserve accessibility. */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Show a visible focus ring for keyboard users only */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .settings-panel { width: calc(100% - var(--space-xl)); border-radius: 0; }
}

/* Status indicators (Nord colors) */
.status-indicator {
  font-weight: 400;
  margin-right: var(--layout-gap);
}
.status-disconnected { color: var(--danger); }
.status-unsaved-new { color: var(--warning); }
.status-unsaved-edited { color: var(--caution); }
.status-saved { color: var(--success); }

/* Drive Modal Styles */
.drive-panel {
  width: min(600px, 90vw);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  border: 1px solid var(--border);
}

.drive-body {
  display: flex;
  flex-direction: column;
  /* reduce gap to tighten space between the list and controls */
  gap: var(--control-gap);
  overflow: hidden; /* contain scrollable list */
  flex: 1;
}

.drive-list {
  flex: 1;
  overflow-y: auto;
  border: none; /* remove inner border for flat look */
  background: transparent;
  min-height: 6rem;
  /* limit visible items to ~8 rows; after that the list becomes scrollable */
  max-height: 12rem;
  display: flex;
  flex-direction: column;
  gap: var(--list-gap); /* small gap between items for readability */
  /* Reserve space for the scrollbar so item highlighting doesn't overlap it */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-right: 1rem; /* space for scrollbar and visual breathing room */
}

/* Drive items: reuse the shared panel-row styles */
.drive-item {
  /* Match suggestion button styling for consistent flat UI */
  padding: var(--space-sm) calc(var(--space-sm) + 1rem);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: transparent;
  font-size: 1rem;
  gap: var(--control-gap);
  color: var(--text);
  transition: color 100ms ease;
  width: 100%;
  text-align: left;
  min-height: auto;
  position: relative; /* allow pseudo-element highlight */
  z-index: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.drive-item:last-child {
  border-bottom: none;
}

/* highlight layer that stops before the scrollbar */
.drive-item::before {
  content: '';
  position: absolute;
  left: 0;
  right: 1rem; /* stop 1rem before right edge (scrollbar area) */
  top: 0;
  bottom: 0;
  background: transparent;
  border-radius: 0; /* reset rounding so highlight matches panel rows */
  transition: background 100ms ease;
  z-index: 0;
}

.drive-item > * { z-index: 1; }

/* disable pseudo-element hover highlight to use full-row background */
.drive-item:hover::before,
.drive-item:focus-visible::before { background: transparent; }

.drive-item:hover,
.drive-item:focus-visible {
  background: var(--accent);
  color: var(--bg);
  outline: none;
}

/* Remove any native button/active background that can appear under some browsers */
.drive-item:active {
  background: transparent;
  color: var(--bg);
}

.drive-item.selected::before { background: transparent; }
.drive-item.selected { background: var(--accent); color: var(--bg); }

.drive-item-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit; /* inherit so hover/selected state works */
}

.drive-item-date {
  font-size: 0.85rem;
  color: inherit; /* inherit so hover/selected state works */
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

.drive-controls {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  /* Removed the top border; keep small padding for comfortable spacing */
  padding-top: var(--control-gap);
}

.drive-input {
  background: var(--bg);
  /* flat text input: blue edge always */
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--text);
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  font-family: var(--ui-font);
  font-size: 1rem;
  width: 100%;
}

.drive-input:focus-visible {
  border-color: var(--accent);
}

/* Unified flat text input style used across modals and panels.
  Matches `.drive-input` appearance and keeps visual consistency for
  other text inputs (settings text inputs, numeric inputs).
  Centralized selectors make smaller future changes easier. */
.drive-input,
.drive-input,
.settings-panel input[type="text"],
.settings-panel input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--text);
  padding: var(--control-padding-vert) var(--control-padding-horiz);
  font-family: var(--ui-font);
  font-size: 1rem;
  width: 100%;
}

.drive-input:focus-visible,
.drive-input:focus-visible,
.settings-panel input[type="text"]:focus-visible,
.settings-panel input[type="number"]:focus-visible {
  border-color: var(--accent);
}

/* WebKit scrollbar styling to make the track/thumb visible */
/* Unified scrollbar styling for app panels (preserve Monaco editor scrollbars) */
/* These selectors apply to the primary scrollable panels in the UI and are
   chosen to avoid affecting Monaco's scroll implementation (monaco-editor).
   Adjust `width` and `thumb` color to match the Nord theme. */
.panel-scrollable {
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */
  padding-right: 1rem; /* reserve space so highlights don't overlap the scrollbar */
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}

.panel-scrollable::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
.panel-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.panel-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 8px;
  border: 1px solid transparent;
}
.panel-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

.drive-actions {
  display: flex;
  gap: var(--control-gap);
  align-items: center;
  width: 100%; /* ensure it fills the container width so spacer works */
}

/* Ensure the left-most button in drive actions aligns its text with the list items above.
   List items have padding, and the button has padding, so they visually align.
   However, if the button has a border and the list has a border, they should align exactly.
   We ensure the button container has no extra margin. */
.drive-actions button:first-child {
  margin-left: 0;
}

.danger-link {
  color: var(--danger);
  border-color: var(--danger);
}

.danger-link:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.primary-link {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 400;
}

.primary-link:hover {
  background: var(--select-focus-color);
}

.drive-list {
  position: relative;
  min-height: 6rem; /* ensure there's space to center the spinner vertically */
}

.drive-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes outline-highlight-pulse {
  0% { background-color: rgba(255, 236, 179, 0.9); }
  100% { background-color: transparent; }
}

.preview-pane .outline-highlight {
  animation: outline-highlight-pulse 100ms ease-in-out;
}

/* ----------------------------------------------------------------
   Custom Picker System - replaces native <select> elements
   ---------------------------------------------------------------- */

/* Picker trigger button (replaces select) - styled as plain UI text */
.picker-trigger {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--snow);
  font-family: var(--ui-font);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  text-align: right;
  line-height: var(--switch-height);
  height: var(--switch-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: auto;
  transition: color 100ms ease;
}
.picker-trigger:hover {
  color: var(--accent);
  background: transparent;
}
.picker-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Picker modal - similar to file picker / drive modal */
.picker-modal {
  /* Scope the picker modal to the editor pane (not the whole viewport) so
     the backdrop only affects the editor like other modals. When the panel
     is "pinned" (near cursor) it switches to fixed positioning via JS. */
  position: absolute;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-in-out;
}
.picker-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.picker-modal .picker-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
.picker-modal .picker-panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  /* match other panels: give the same outer padding as modal content */
  padding: var(--modal-padding);
  min-width: 180px;
  max-width: min(320px, 90vw);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-1 * var(--slide-offset)));
  opacity: 0;
  transition: transform 100ms ease, opacity 100ms ease;
}
.picker-modal.open .picker-panel {
  transform: translateY(0);
  opacity: 1;
}
.picker-modal .picker-panel.pinned {
  /* When JS pins the panel next to the cursor we place it with absolute coords
     relative to the editor pane so it "sticks" when the editor is resized.
     If the JS prefers viewport-fixed positioning (no editor pane available)
     the script will set position:fixed inline as a fallback. */
  position: absolute;
  transform: none !important;
  transition: none;
}
/* picker has no title — options render directly inside the padded panel */
.picker-modal .picker-options {
  list-style: none;
  margin: 0;
  padding: 0; /* rely on panel padding to space content */
  overflow-y: auto;
  flex: 1;
}
.picker-modal .picker-option {
  margin: 0;
  padding: 0;
}
.picker-modal .picker-option button {
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-sm) var(--space-sm);
  margin: 0;
  height: auto;
  line-height: 1;
  min-height: auto;
  text-align: left;
  color: var(--snow); /* match picker trigger text color */
  font-family: var(--ui-font);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  transition: color 100ms ease; /* match trigger hover color transition */
}
.picker-modal .picker-option button:hover {
  background: var(--accent); /* match outline row hover: accent background */
  color: var(--bg); /* invert text color on hover */
}
.picker-modal .picker-option button[aria-selected="true"] {
  /* When an option is selected (aria-selected) it should be highlighted
     with the accent background while keeping dark text for readability */
  background: var(--accent);
  color: var(--bg);
  font-weight: 400;
}
.picker-modal .picker-option button[aria-selected="true"]::after {
  content: '✓';
  font-size: 0.9em;
  opacity: 0.9;
  color: var(--bg);
  margin-left: 0.5rem;
}