/**
 * Screenplay editor & reader — Celtx-compatible US Letter layout (Courier 12pt, industry margins).
 * Line spacing targets ~51 lines per page (Academy Nicholl / Celtx default).
 */

/* ── Editor script mode page frame ── */

body.script-mode .page-flow {
  max-width: 8.5in;
  width: 100%;
}

body.script-mode .page-content {
  max-width: none;
  padding: 1in 1in 1in 1.5in;
}

body.script-mode .chapter-number {
  display: none;
}

body.script-mode:not(.is-title-page) .chapter-title {
  display: none;
}

body.script-mode .chapter-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 24px;
}

body.script-mode .editor {
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1.058;
  letter-spacing: 0;
  min-height: 9in;
  padding: 0;
  color: var(--page-text);
}

body.script-mode .editor p {
  margin: 0 0 1em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Act — centered, ALL CAPS */
body.script-mode .editor p.script-act {
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 1em;
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Scene Heading — full width, ALL CAPS */
body.script-mode .editor p.script-scene {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

body.script-mode .editor p.script-scene:first-child {
  margin-top: 0;
}

/* Action — full width */
body.script-mode .editor p.script-action {
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Character — ALL CAPS at 3.7in from page left */
body.script-mode .editor p.script-character {
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: 0;
  padding-left: 3.7in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Dialogue — 2.5in left, 2.5in right from page left */
body.script-mode .editor p.script-dialogue {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2.5in;
  padding-right: 2.5in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Parenthetical — 3.4in from page left */
body.script-mode .editor p.script-parenthetical {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 3.4in;
  padding-right: 2.5in;
  margin-left: -1.5in;
  margin-right: -1in;
  font-style: normal;
}

/* Transition — right-aligned, ALL CAPS */
body.script-mode .editor p.script-transition {
  text-transform: uppercase;
  text-align: right;
  margin-top: 1em;
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Shot — full width, ALL CAPS */
body.script-mode .editor p.script-shot {
  text-transform: uppercase;
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

/* Text — general text block, same width as action */
body.script-mode .editor p.script-text {
  padding-left: 1.5in;
  padding-right: 1in;
  margin-left: -1.5in;
  margin-right: -1in;
}

body.script-mode .editor:empty::before {
  content: attr(data-script-placeholder);
  color: var(--page-subtle, #94a3b8);
  font-style: italic;
  text-transform: none;
  display: block;
  padding-left: 0;
}

/* Title page (front matter) — Celtx centered layout */
body.script-mode.is-title-page .chapter-title {
  display: block;
  margin-top: 3in;
  margin-bottom: 0.5in;
  font-size: 14pt;
}

.script-title-builder {
  display: none;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1.4;
  text-align: center;
  padding: 2.5in 0 1in;
}

body.script-mode.is-title-page .script-title-builder {
  display: block;
}

body.script-mode.is-title-page .script-editor-wrap {
  display: none;
}

.script-editor-wrap {
  position: relative;
}

.script-title-field {
  display: block;
  width: min(100%, 5.5in);
  margin: 0 auto 0.75em;
  border: none;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
  background: transparent;
  color: var(--page-text);
  font: inherit;
  text-align: center;
  outline: none;
  padding: 4px 8px;
}

.script-title-field::placeholder {
  color: var(--page-subtle, #94a3b8);
  opacity: 0.85;
}

.script-title-field--title {
  font-size: 14pt;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1.25em;
}

.script-title-label {
  display: block;
  margin: 1.5em auto 0.35em;
  font-size: 12pt;
}

.script-title-spacer {
  height: 2.5in;
}

.script-assist {
  position: absolute;
  z-index: 30;
  min-width: 180px;
  max-width: 320px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--topbar-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  padding: 4px;
}

.script-assist.hidden {
  display: none;
}

.script-assist-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--page-text);
  font-family: "Courier New", Courier, monospace;
  font-size: 11pt;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
}

.script-assist-item:hover,
.script-assist-item.is-active {
  background: rgba(124, 58, 237, 0.16);
}

.script-format-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.script-scene-nav {
  display: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px 12px;
}

body.script-mode .script-scene-nav {
  display: block;
}

.script-scene-nav-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-subtle, #94a3b8);
  margin-bottom: 8px;
}

.script-scene-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}

.script-scene-nav-item {
  border: none;
  background: transparent;
  color: var(--page-text);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
}

.script-scene-nav-item:hover,
.script-scene-nav-item.is-active {
  background: rgba(124, 58, 237, 0.14);
}

.script-scene-nav-item small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 2px;
}

body.script-mode.is-title-page .editor p {
  text-align: center;
  text-transform: none;
  font-weight: 400;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

body.script-mode.is-title-page .editor p.script-scene,
body.script-mode.is-title-page .editor p.script-action,
body.script-mode.is-title-page .editor p.script-character,
body.script-mode.is-title-page .editor p.script-dialogue,
body.script-mode.is-title-page .editor p.script-parenthetical,
body.script-mode.is-title-page .editor p.script-transition,
body.script-mode.is-title-page .editor p.script-shot,
body.script-mode.is-title-page .editor p.script-act,
body.script-mode.is-title-page .editor p.script-text {
  text-align: center;
  text-transform: none;
  font-weight: 400;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ── Script toolbar (Celtx element picker) ── */

.script-toolbar {
  display: none;
  min-height: 54px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

body.script-mode .script-toolbar {
  display: flex;
}

body.script-mode #toolbar {
  display: none !important;
}

body.script-mode .bg-bar,
body.script-mode #insertSceneBreakBtn,
body.script-mode #insertImageBtn,
body.script-mode #pageLayoutBtn,
body.script-mode #backgroundBtn,
body.script-mode #fontSelect,
body.script-mode #fontSizeSelect,
body.script-mode #formatSelect,
body.script-mode #quoteBtn {
  display: none !important;
}

.script-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 12px;
}

.script-toolbar-meta.sprint-anchor {
  display: inline-flex;
}

.script-toolbar-meta.toolbar-wordcount {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.script-element-picker {
  position: relative;
  flex: 0 1 auto;
}

.script-element-picker-btn {
  min-width: 220px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--topbar-bg);
  border-radius: 8px;
  color: var(--page-text);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.script-element-picker-btn:hover,
.script-element-picker-btn[aria-expanded="true"] {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.08);
}

.script-element-picker-label {
  flex: 1;
  text-align: left;
}

.script-element-picker-hint {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.55;
  white-space: nowrap;
}

.script-element-picker-caret {
  font-size: 11px;
  opacity: 0.7;
}

.script-element-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 260px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--topbar-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  padding: 6px;
}

.script-element-menu.hidden {
  display: none;
}

.script-element-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--page-text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
}

.script-element-menu-item:hover,
.script-element-menu-item.is-active {
  background: rgba(124, 58, 237, 0.14);
}

.script-element-menu-shortcut {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.55;
}

.script-toolbar-hint {
  font-size: 11px;
  color: var(--page-subtle, #94a3b8);
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}

body.script-mode .copyright-mode-bar {
  display: none !important;
}

body.script-mode .copyright-builder {
  display: none !important;
}

@media (max-width: 900px) {
  body.script-mode .page-content {
    padding: 0.75in 0.5in 0.75in 0.75in;
  }

  body.script-mode .editor p.script-scene,
  body.script-mode .editor p.script-action,
  body.script-mode .editor p.script-character,
  body.script-mode .editor p.script-dialogue,
  body.script-mode .editor p.script-parenthetical,
  body.script-mode .editor p.script-transition,
  body.script-mode .editor p.script-shot,
  body.script-mode .editor p.script-act,
  body.script-mode .editor p.script-text {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  body.script-mode .editor p.script-character {
    padding-left: 22%;
  }

  body.script-mode .editor p.script-dialogue {
    padding-left: 10%;
    padding-right: 10%;
  }

  body.script-mode .editor p.script-parenthetical {
    padding-left: 14%;
    padding-right: 14%;
  }

  .script-toolbar-hint,
  .script-element-picker-hint {
    display: none;
  }

  .script-element-picker-btn {
    min-width: 160px;
  }
}

@media (max-width: 600px) {
  body.script-mode .script-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  body.toolbar-mobile-open.script-mode .script-toolbar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
  }

  .script-element-picker,
  .script-element-picker-btn {
    width: 100%;
  }
}

/* ── Reader script mode ── */

.script-reader {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12pt !important;
  line-height: 1.058 !important;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 1in 1in 1in 1.5in;
}

.script-reader p {
  margin: 0 0 1em;
  white-space: pre-wrap;
}

.script-reader p.script-act {
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  margin-top: 2em;
}

.script-reader p.script-scene {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 1.5em;
}

.script-reader p.script-character {
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: 0;
  padding-left: 2.2in;
}

.script-reader p.script-dialogue {
  margin-top: 0;
  padding-left: 1in;
  padding-right: 1in;
}

.script-reader p.script-parenthetical {
  margin-top: 0;
  padding-left: 1.4in;
  padding-right: 1in;
}

.script-reader p.script-transition {
  text-transform: uppercase;
  text-align: right;
  margin-top: 1em;
}

.script-reader p.script-shot,
.script-reader p.script-text {
  text-transform: uppercase;
}

@media print {
  body.script-mode .editor,
  .script-reader {
    font-size: 12pt;
    line-height: 1.058;
  }
}