/* ==========================================================================
   Industry-Standard Screenplay Typography & Page Layout
   (Based on standard Courier 12pt / 10cpi metrics)
   ========================================================================== */

/* The Physical Screenplay Page (Standard US Letter 8.5in x 11in) */
.screenplay-page,
.screenplay-title-page {
  background: var(--bg-page);
  color: var(--text-page);
  width: 8.5in;
  min-height: 11in;
  height: auto;
  margin: 0 auto 30px auto;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  font-family: var(--font-script);
  font-size: 12pt;
  line-height: 1.0;
  letter-spacing: 0;
  box-sizing: border-box;
  position: relative;
  outline: none;
}

/* Page break visual marker */
.page-break-divider {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  margin-bottom: -15px;
  z-index: 10;
}

/* In-editor physical page break gap and header ribbon */
.editor-page-break {
  display: block;
  user-select: none;
  -webkit-user-select: none;
  margin: 45px -1.0in 35px -1.5in;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.editor-page-break-gap {
  height: 24px;
  background: var(--bg-app, #181310);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  position: relative;
}

.editor-page-break-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 1.0in 6px 1.5in;
  background: var(--bg-page, #fffdfa);
  border-top: 1px dashed rgba(224, 107, 36, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.editor-page-break-left {
  font-family: var(--font-main, sans-serif);
  font-size: 8.5pt;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim, #8c7365);
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-page-break-right {
  font-family: var(--font-script, "Courier Prime", Courier, monospace);
  font-size: 10pt;
  font-weight: 700;
  color: #1a130e;
  background: rgba(224, 107, 36, 0.12);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid rgba(224, 107, 36, 0.25);
}

.page-break-label {
  font-family: var(--font-script);
  font-size: 10pt;
  color: var(--text-muted);
  background: var(--bg-surface-elevated);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Title Page Layout
   -------------------------------------------------------------------------- */
.screenplay-title-page {
  padding: 1.0in 1.0in 1.0in 1.5in;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 11in;
  text-align: center;
}

.title-page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3.5in;
}

.title-input-title {
  font-family: var(--font-script);
  font-size: 22pt;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  margin-bottom: 24pt;
  outline: none;
  color: #111;
}

.title-input-by {
  font-family: var(--font-script);
  font-size: 12pt;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  margin-bottom: 12pt;
  outline: none;
  color: #333;
}

.title-input-author {
  font-family: var(--font-script);
  font-size: 14pt;
  font-weight: bold;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  margin-bottom: 40pt;
  outline: none;
  color: #111;
}

.title-page-bottom {
  margin-top: 2.5in;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.title-input-contact {
  font-family: var(--font-script);
  font-size: 11pt;
  border: none;
  background: transparent;
  outline: none;
  width: 50%;
  height: 90px;
  resize: none;
  color: #444;
}

/* --------------------------------------------------------------------------
   Screenplay Page Margins & Elements
   Standard Courier 12pt: 10 characters = 1 inch
   Page width: 8.5 inches (85 columns)
   Margins: Left 1.5 in (15 chars), Right 1.0 in (10 chars), Body 6.0 in (60 chars)
   -------------------------------------------------------------------------- */
.screenplay-page {
  /* Internal padding simulates standard page margins */
  padding-top: 1.0in;
  padding-bottom: 1.0in;
  padding-left: 1.5in;
  padding-right: 1.0in;
  height: auto !important;
  min-height: 11in;
}

/* Individual Screenplay Blocks */
.script-line {
  font-family: var(--font-script);
  font-size: 12pt;
  line-height: 1.25;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
  min-height: 1.25em;
  outline: none;
}

/* Element Type 1: Scene Heading (Slugline) */
/* Indent: 0.0" from body (1.5" from edge). Width: 6.0" (60 chars). UPPERCASE. */
.script-line[data-type="scene"] {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  color: #050505;
}

.script-line[data-type="scene"]:first-child {
  margin-top: 0;
}

/* Element Type 2: Action / Description */
/* Indent: 0.0" from body. Width: 6.0". Mixed case. */
.script-line[data-type="action"] {
  margin-top: 0.75em;
  margin-bottom: 0.25em;
  max-width: 6.0in;
  color: #1a1a1a;
}

/* Element Type 3: Character Name */
/* Indent: ~ 2.2 inches (3.7" from edge). Width: ~ 3.5 inches. UPPERCASE. */
.script-line[data-type="character"] {
  text-transform: uppercase;
  margin-top: 1.1em;
  margin-bottom: 0;
  margin-left: 2.2in;
  max-width: 3.8in;
  font-weight: 700;
  color: #050505;
}

/* Element Type 4: Parenthetical */
/* Indent: ~ 1.6 inches (3.1" from edge). Width: ~ 2.5 inches. */
.script-line[data-type="parenthetical"] {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 1.6in;
  max-width: 2.6in;
  color: #2b2b2b;
}

/* Element Type 5: Dialogue */
/* Indent: ~ 1.0 inch (2.5" from edge). Width: ~ 3.5 inches (35 chars). */
.script-line[data-type="dialogue"] {
  margin-top: 0;
  margin-bottom: 0.75em;
  margin-left: 1.0in;
  max-width: 3.5in;
  color: #111111;
}

/* Element Type 6: Transition */
/* Indent: ~ 4.0 inches (5.5" from edge) or Right-Aligned. UPPERCASE. */
.script-line[data-type="transition"] {
  text-transform: uppercase;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  margin-left: 3.8in;
  text-align: right;
  max-width: 2.2in;
  font-weight: bold;
  color: #050505;
}

/* Element Type 7: Shot */
.script-line[data-type="shot"] {
  text-transform: uppercase;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #050505;
}

/* Element Type 8: Editorial Note */
.script-line[data-type="note"] {
  background: #fef3c7;
  color: #92400e;
  padding: 4px 8px;
  border-left: 3px solid #f59e0b;
  font-style: italic;
  margin: 0.5em 0;
}

/* Currently Active Line Highlight */
.script-line.current-line {
  background: rgba(224, 107, 36, 0.08);
  box-shadow: -3px 0 0 var(--primary-color, #e06b24);
  border-radius: 2px;
}

/* Placeholder for empty lines */
.script-line:empty::before {
  content: attr(data-placeholder);
  color: #b0b5c0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Print & PDF Styling (@media print)
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: letter;
    margin: 0;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .app-header,
  .app-sidebar,
  .app-statusbar,
  .floating-element-bar,
  .view-tabs,
  .page-break-divider,
  .editor-page-break,
  .autocomplete-popup,
  #viewCards,
  #viewReports,
  dialog {
    display: none !important;
  }

  .app-layout,
  .app-workspace,
  .editor-scroll-wrapper,
  .page-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .screenplay-title-page {
    page-break-after: always;
    box-shadow: none !important;
    border: none !important;
    min-height: 11in;
    width: 8.5in;
  }

  .screenplay-page {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: 8.5in !important;
  }

  .script-line[data-type="note"] {
    display: none !important; /* Hide notes in production print per Trelby standard */
  }

  .script-line.current-line {
    background: transparent !important;
  }
}

/* ==========================================================================
   Mobile Responsive Screenplay Layout (Fluid Smart Letter)
   Preserves relative screenplay indent hierarchy while fitting phone screens
   ========================================================================== */
@media (max-width: 768px) {
  .screenplay-page,
  .screenplay-title-page {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin: 0 auto 15px auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .screenplay-page {
    padding: 16px 14px 120px 14px !important; /* bottom padding clears the sticky mobile keyboard bar */
  }

  .screenplay-title-page {
    padding: 24px 16px 36px 16px !important;
    min-height: auto !important;
  }

  .title-page-content {
    margin-top: 15px !important;
  }

  .title-input-title {
    font-size: 1.3rem !important;
    margin-bottom: 14px !important;
  }

  .title-input-by {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }

  .title-input-author {
    font-size: 1.05rem !important;
    margin-bottom: 24px !important;
  }

  .title-page-bottom {
    margin-top: 20px !important;
  }

  .title-input-contact {
    width: 100% !important;
    font-size: 0.85rem !important;
    height: 70px !important;
  }

  .script-line {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  /* Responsive proportional indents for screenplay readability */
  .script-line[data-type="scene"],
  .script-line[data-type="action"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .script-line[data-type="character"] {
    margin-left: 32% !important;
    margin-right: 0 !important;
    max-width: 68% !important;
  }

  .script-line[data-type="parenthetical"] {
    margin-left: 20% !important;
    margin-right: 10% !important;
    max-width: 70% !important;
  }

  .script-line[data-type="dialogue"] {
    margin-left: 12% !important;
    margin-right: 6% !important;
    max-width: 82% !important;
  }

  .script-line[data-type="transition"] {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
    max-width: 100% !important;
  }

  .script-line[data-type="shot"] {
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  .page-break-divider {
    padding: 0 8px !important;
    margin-bottom: -10px !important;
  }

  .page-break-label {
    font-size: 8pt !important;
    padding: 1px 6px !important;
  }
}