/* ============================================================
   Editor — paper, elements, view modes, ruler
   ============================================================ */

/* ---------- Editor pane container ---------- */
.editor-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-7) 0;
  background: var(--c-bg);
}

.editor-scroll.view-speed { padding: var(--s-5) var(--s-5); align-items: stretch; }

/* ---------- Book + page frames ----------
   The editor consists of three layered things:

     .book           positioned container, sized to the page width
     .page-frames    decorative overlay drawing each page rectangle
     .editor-surface the contenteditable layer, transparent, on top

   The frames are absolutely positioned siblings to the editor inside
   the book. Pagination JS measures element positions after every
   change and rebuilds the frames so each page exactly contains a
   contiguous run of elements, with no element straddling a break.
   ---------------------------------------------------------------- */

.book {
  position: relative;
  width: var(--page-w);
  flex: 0 0 auto;
  flex-shrink: 0;
}

.page-frames {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Each .page-sheet is one rendered piece of paper inside the frames overlay.
   Its position and height are set inline by the pagination engine. */
.page-sheet {
  position: absolute;
  left: 0;
  width: var(--page-w);
  background: var(--c-page);
  box-shadow: var(--shadow-page);
  /* A clean border so the paper edge is unambiguous against the workspace */
  border: 1px solid var(--c-line-strong);
  border-radius: 1px;
}

/* Page number badge in the top-right corner of every sheet */
.page-sheet[data-page-number]::after {
  content: 'Page ' attr(data-page-number);
  position: absolute;
  top: 24px;
  right: var(--page-mr);
  font-family: var(--f-script);
  font-size: var(--fs-script);
  color: var(--c-ink-soft);
  opacity: 0.55;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.page-sheet[data-page-number='1']::after { content: ''; }   /* page 1 unnumbered */

/* ---------- Margin guides ----------
   Hidden by default — both the corner brackets and the dashed text-frame
   rectangle are off until the user explicitly opts in via either:
     • Invisibles toggle (View → Show Invisibles, or the status bar
       Invisibles button) — shows the four corner brackets only.
     • Show Page Margins toggle (View menu) — shows a full dashed
       rectangle around the entire text frame.
   The two are independent: a writer who only wants margin hints can use
   either; a writer who wants neither gets a clean page.
*/
.page-sheet::before {
  content: '';
  position: absolute;
  top: var(--page-mt);
  bottom: var(--page-mb);
  left: var(--page-ml);
  right: var(--page-mr);
  pointer-events: none;
  /* No background by default — the brackets only paint when the
     show-invisibles class is present on a parent (set on <body>). */
}

/* Invisibles on: paint the four corner brackets. */
.show-invisibles .page-sheet::before {
  background:
    /* top-left: top + left borders */
    linear-gradient(to right,  var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) top    left   / 14px 1px no-repeat,
    linear-gradient(to bottom, var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) top    left   / 1px 14px no-repeat,
    /* top-right */
    linear-gradient(to left,   var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) top    right  / 14px 1px no-repeat,
    linear-gradient(to bottom, var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) top    right  / 1px 14px no-repeat,
    /* bottom-left */
    linear-gradient(to right,  var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) bottom left   / 14px 1px no-repeat,
    linear-gradient(to top,    var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) bottom left   / 1px 14px no-repeat,
    /* bottom-right */
    linear-gradient(to left,   var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) bottom right  / 14px 1px no-repeat,
    linear-gradient(to top,    var(--c-margin-guide) 0, var(--c-margin-guide) 14px, transparent 14px) bottom right  / 1px 14px no-repeat;
}

/* Show Margins toggle: replace the corner brackets with a full dashed
   rectangle around the text frame for users who prefer the explicit guide. */
.show-margins .page-sheet::before {
  background: none;
  border: 1px dashed var(--c-margin-guide-strong);
}

/* ---------- The contenteditable surface ----------
   Sits on top of the frames. The `.page` class is kept (it carries the
   typography rules), but background and border are dropped — the frames
   beneath show through. Padding still creates the text frame margins.
*/
.page {
  width: var(--page-w);
  font-family: var(--f-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  color: var(--c-ink);
  outline: none;
  caret-color: var(--c-accent);
}

.editor-surface {
  position: relative;
  z-index: 1;
  background: transparent;
  /* Horizontal padding sets the left & right text frame; vertical padding
     is handled per-page via .editor-surface > .element[data-first-on-page]
     so element boundaries always align to the top margin of a page. */
  padding: var(--page-mt) var(--page-mr) var(--page-mb) var(--page-ml);
  min-height: var(--page-h);
}

/* When the engine flags an element as the first on a new page, push it
   down with a top margin equal to the gap between sheets plus the page's
   top margin. The visual effect: the text reads as if on a new sheet. */
.editor-surface .element[data-first-on-page] {
  margin-top: var(--page-spill, 0px);
}

/* Speed view: drop the page chrome entirely, fill width comfortably.
   The book wrapper relaxes its width and the frames overlay disappears. */
.editor-scroll.view-speed .book {
  width: min(820px, calc(100% - var(--s-8)));
}
.editor-scroll.view-speed .page-frames { display: none; }
.editor-scroll.view-speed .editor-surface {
  min-height: 0;
  padding: var(--s-5) var(--s-3);
}
/* In speed view the per-element page-break top margin is meaningless */
.editor-scroll.view-speed .editor-surface .element[data-first-on-page] {
  margin-top: 0;
}

/* Page view: same as Normal but with extra spacing between sheets and
   the dashed margin guides shown by default. */
.editor-scroll.view-page .page-sheet {
  border-color: var(--c-line-strong);
}
.editor-scroll.view-page .page-sheet::before {
  border-color: rgba(99, 102, 241, 0.18);
}

/* ---------- Element paragraphs ---------- */
.element {
  margin: 0;
  padding: 0;
  position: relative;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 1.2em;
}

/* Empty-state hint for elements */
.element[data-empty="true"]::before {
  content: attr(data-placeholder);
  position: absolute;
  left: 0;
  color: var(--c-faint);
  pointer-events: none;
  font-style: italic;
  user-select: none;
}

/* Scene heading */
.element.scene {
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: var(--el-action-indent);
}

.element.scene:first-child { margin-top: 0; }

/* Action */
.element.action {
  margin-top: 1em;
  margin-left: var(--el-action-indent);
  width: 100%;
}

/* Character */
.element.character {
  text-transform: uppercase;
  margin-top: 1em;
  margin-left: var(--el-character-indent);
}

/* Parenthetical */
.element.parenthetical {
  margin-left: var(--el-parenthetical-indent);
  max-width: var(--el-dialogue-width);
  font-style: normal; /* parens are auto-added — italic looks dated */
}

/* Dialogue */
.element.dialogue {
  margin-left: var(--el-dialogue-indent);
  max-width: var(--el-dialogue-width);
}

/* Transition */
.element.transition {
  text-transform: uppercase;
  text-align: right;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Shot */
.element.shot {
  text-transform: uppercase;
  margin-top: 1em;
  margin-left: var(--el-action-indent);
}

/* Cast list */
.element.cast {
  margin-top: 1em;
  margin-left: var(--el-action-indent);
}

/* Active element subtle indicator (only when editor focused) */
.editor-pane:focus-within .element.active {
  background: linear-gradient(to right, transparent 0, transparent 100%);
}

.editor-pane:focus-within .element.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-accent);
  border-radius: 1px;
  opacity: 0.6;
}

/* ---------- Revision marks ---------- */
/* Asterisk margin marker per industry-standard revision convention */
.element.revised {
  position: relative;
}

.element.revised::after {
  content: '*';
  position: absolute;
  right: -28px;
  top: 0;
  color: var(--rev-blue);
  font-weight: bold;
}

/* Map specific revision colours to data attribute */
.element.revised[data-revision="Blue"]::after      { color: var(--rev-blue); }
.element.revised[data-revision="Pink"]::after      { color: var(--rev-pink); }
.element.revised[data-revision="Yellow"]::after    { color: var(--rev-yellow); }
.element.revised[data-revision="Green"]::after     { color: var(--rev-green); }
.element.revised[data-revision="Goldenrod"]::after { color: var(--rev-goldenrod); }
.element.revised[data-revision="Buff"]::after      { color: var(--rev-buff); }
.element.revised[data-revision="Salmon"]::after    { color: var(--rev-salmon); }
.element.revised[data-revision="Cherry"]::after    { color: var(--rev-cherry); }
.element.revised[data-revision="Tan"]::after       { color: var(--rev-tan); }

/* ---------- Page break (Page View) ---------- */
.page-break {
  display: block;
  height: 0;
  position: relative;
  margin: 0;
  pointer-events: none;
}

.page-break.visible {
  height: var(--s-6);
  border-top: 1px dashed var(--c-line-strong);
  margin: var(--s-3) calc(-1 * var(--page-ml)) var(--s-3) calc(-1 * var(--page-ml));
}

/* ---------- Watermark ---------- */
.page.has-watermark::before {
  content: attr(data-watermark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--f-script);
  font-size: 96px;
  font-weight: bold;
  color: rgba(20, 22, 28, 0.06);
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 0;
}

/* ---------- Invisibles (show/hide non-printing chars) ---------- */
.show-invisibles .element::after-content {
  content: '¶';
}

.show-invisibles .element {
  position: relative;
}

.show-invisibles .element:not(.revised)::after {
  content: '¶';
  display: inline;
  color: var(--c-faint);
  margin-left: 4px;
  opacity: 0.5;
}

/* ---------- Ruler (above page) ---------- */
.ruler {
  position: sticky;
  top: 0;
  z-index: 10;
  width: var(--page-w);
  height: 22px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  margin: 0 auto;
  display: none;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--c-muted);
  user-select: none;
}

.ruler.visible { display: block; }

.ruler-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.ruler-tick {
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 1px;
  background: var(--c-line-strong);
}

.ruler-tick.major { bottom: 4px; background: var(--c-muted); }
.ruler-tick.major::after {
  content: attr(data-label);
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  color: var(--c-muted);
}

.ruler-marker {
  position: absolute;
  top: 4px;
  width: 10px;
  height: 14px;
  cursor: ew-resize;
  background: var(--c-accent);
  border-radius: 2px;
  opacity: 0.85;
  transform: translateX(-50%);
  transition: opacity var(--t-fast) var(--ease);
}

.ruler-marker:hover { opacity: 1; }
.ruler-marker.right { background: var(--c-ink); }

/* ---------- Title Page editor ---------- */
.title-page-shell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: var(--s-7) 0;
  overflow: auto;
  background: var(--c-bg);
}

.tp-paper {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--c-page);
  box-shadow: var(--shadow-page);
  padding: 3in 1in 1in 1.5in;
  font-family: var(--f-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tp-block.tp-center { text-align: center; }

.tp-field {
  outline: none;
  white-space: pre-wrap;
  border-radius: 4px;
  padding: 4px 6px;
  margin: 0 auto;
  min-height: 1.5em;
  cursor: text;
  transition: background-color var(--t-fast) var(--ease);
}

.tp-field:hover { background: var(--c-hover); }
.tp-field:focus { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-accent); }

.tp-field.empty::before {
  content: attr(data-placeholder);
  color: var(--c-faint);
  white-space: pre-wrap;
}

.tp-title  { font-size: 18px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1em; }
.tp-by     { font-style: italic; color: var(--c-muted); margin-bottom: 0.5em; }
.tp-author { margin-bottom: 1em; }
.tp-based-on { font-size: 14px; color: var(--c-ink-soft); margin-top: 1em; }

.tp-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  margin-top: 4em;
}
.tp-draft   { text-align: left;  flex: 0 0 auto; min-width: 8em; }
.tp-contact { text-align: right; flex: 0 0 auto; min-width: 12em; }

/* ---------- Index card view ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-bg);
  min-height: 100%;
}

.card {
  background: var(--c-page);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--s-3);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 140px;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-num {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-muted);
  font-weight: var(--fw-semi);
}

.card-heading {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  line-height: 1.3;
  word-wrap: break-word;
}

.card-summary {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.4;
  flex: 1;
  outline: none;
}

.card-summary[contenteditable="true"]:empty::before {
  content: 'Summary…';
  color: var(--c-faint);
  font-style: italic;
}

/* Card "script" variant — shows first lines of scene */
.card.script-variant .card-summary {
  font-family: var(--f-script);
  color: var(--c-ink);
  font-size: var(--fs-sm);
}

/* Scene view (table-like) */
.scene-view {
  padding: var(--s-5);
  width: 100%;
}

.scene-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}

.scene-table th, .scene-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}

.scene-table th {
  background: var(--c-bg);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-muted);
}

.scene-table tr:last-child td { border-bottom: 0; }
.scene-table tr:hover td { background: var(--c-hover); cursor: pointer; }

/* ---------- Scrollbars (subtle) ---------- */
.editor-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.editor-scroll::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border: 3px solid var(--c-bg);
  border-radius: 6px;
}
.editor-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }
.editor-scroll::-webkit-scrollbar-track { background: var(--c-bg); }