/* Writing: the document editor (CodeMirror 6), the paginated preview and the outline. */

@font-face { font-family: "Courier Prime"; src: url("/assets/CourierPrime-Regular-e0eeeb52.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/CourierPrime-Bold-c9ee43fa.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/CourierPrime-Italic-1682cbbe.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/CourierPrime-BoldItalic-0b200ec9.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

.writing-surface .cm-editor { min-height: 70vh; background: #fff; }
.writing-surface .cm-editor.cm-focused { outline: none; }
.writing-surface .cm-scroller { font-family: inherit; overflow: visible; }
.writing-surface .cm-content { padding: 3rem 0 40vh; caret-color: #18181b; }
.writing-surface .cm-panels { position: sticky; top: 0; z-index: 10; }

/* --- Fountain: a page-like column of 60 characters ------------------------- */
/* CodeMirror's content is a growing flex item; fix its width and centre it. */
.writing-surface .cm-content.cm-fountain {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 16px; line-height: 1.6;
  flex: 0 1 auto; width: calc(60ch + 9rem); max-width: 100%; margin: 0 auto;
}
.cm-fountain .cm-line { padding: 0 4.5rem; position: relative; }
.cm-fountain .cm-fs-scene_heading { text-transform: uppercase; font-weight: 700; }
.cm-fountain .cm-fs-shot { text-transform: uppercase; }
.cm-fountain .cm-fs-character { padding-left: calc(4.5rem + 22ch); }
.cm-fountain .cm-fs-parenthetical { padding-left: calc(4.5rem + 16ch); padding-right: calc(4.5rem + 19ch); }
.cm-fountain .cm-fs-dialogue,
.cm-fountain .cm-fs-lyrics { padding-left: calc(4.5rem + 10ch); padding-right: calc(4.5rem + 15ch); }
.cm-fountain .cm-fs-lyrics { font-style: italic; }
.cm-fountain .cm-fs-transition { text-align: right; text-transform: uppercase; }
.cm-fountain .cm-fs-centered { text-align: center; }
.cm-fountain .cm-fs-dual { box-shadow: inset 3px 0 0 #e4e4e7; }
.cm-fountain .cm-fs-dual-right { box-shadow: inset 3px 0 0 #d97706; }
.cm-fountain .cm-fs-section { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; color: #b45309; }
.cm-fountain .cm-fs-depth-1 { font-size: 1.15em; }
.cm-fountain .cm-fs-synopsis { color: #71717a; font-style: italic; }
.cm-fountain .cm-fs-note { color: #854d0e; background: #fefce8; }
.cm-fountain .cm-fs-boneyard { color: #71717a; }
.cm-fountain .cm-fs-page_break { color: #71717a; border-bottom: 1px dashed #d4d4d8; }
.cm-fountain .cm-fs-title_key { color: #71717a; }
.cm-fountain .cm-fs-bold { font-weight: 700; }
.cm-fountain .cm-fs-italic { font-style: italic; }
.cm-fountain .cm-fs-underline { text-decoration: underline; }
.cm-fountain .cm-fs-highlight { background: #fde68a; }
.cm-fountain span.cm-fs-note { font-style: italic; }
.cm-fs-scene-number {
  position: absolute; left: 0.75rem; width: 3rem; text-align: right;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #71717a;
}
.cm-fs-page-break {
  position: absolute; right: 0.5rem; margin-top: -0.9em;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; color: #71717a;
}
.cm-fs-page-break::before { content: ""; position: absolute; right: 2.25rem; top: 50%; width: calc(60ch + 4rem); border-top: 1px dotted #e4e4e7; }

/* --- Markdown live preview ---------------------------------------------------- */
.writing-surface .cm-content.cm-markdown {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1.7; color: #27272a;
  flex: 0 1 auto; width: calc(70ch + 4rem); max-width: 100%; margin: 0 auto;
}
.cm-markdown .cm-line { padding: 0 2rem; }
.cm-markdown .cm-md-h { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 650; color: #18181b; }
.cm-markdown .cm-md-h1 { font-size: 1.75em; line-height: 1.3; padding-top: 0.6em; }
.cm-markdown .cm-md-h2 { font-size: 1.35em; padding-top: 0.5em; }
.cm-markdown .cm-md-h3 { font-size: 1.12em; padding-top: 0.4em; }
.cm-markdown .cm-md-em { font-style: italic; }
.cm-markdown .cm-md-strong { font-weight: 700; }
.cm-markdown .cm-md-strike { text-decoration: line-through; }
.cm-markdown .cm-md-code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; background: #f4f4f5; border-radius: 3px; padding: 0 3px; }
.cm-markdown .cm-md-codeblock { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; background: #f4f4f5; }
.cm-markdown .cm-md-link { color: #b45309; text-decoration: underline; text-underline-offset: 2px; }
.cm-markdown .cm-md-quote { border-left: 3px solid #e4e4e7; padding-left: calc(2rem - 3px); color: #52525b; font-style: italic; }
.cm-markdown .cm-md-hr { border-bottom: 1px solid #e4e4e7; }
.cm-markdown .cm-md-listmark { color: #71717a; }

/* Comments: highlights and the button on a selection */
.writing-surface .cm-comment { background: rgb(253 230 138 / 0.45); border-bottom: 2px solid #f59e0b; cursor: pointer; }
.writing-surface .cm-comment-active { background: rgb(251 191 36 / 0.6); }
.writing-surface .cm-tooltip:has(.cm-comment-button) { border: 0; background: transparent; }
.cm-comment-button {
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #fff; background: #18181b; border-radius: 6px; padding: 3px 8px; cursor: pointer;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}
.cm-comment-button:hover { background: #3f3f46; }

/* Breakdown tags: one colour per element kind (tagging mode only). */
.writing-surface .cm-tag { border-bottom: 2px solid currentColor; cursor: pointer; }
.writing-surface .cm-tooltip:has(.cm-tag-button) { border: 0; background: transparent; }
.cm-tag-button {
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #fff; background: #0369a1; border-radius: 6px; padding: 3px 8px; cursor: pointer;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}
.cm-tag-swatch { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: currentColor; }
.cm-tag-character { color: #dc2626; background-color: rgb(220 38 38 / 0.12); }
.cm-tag-location { color: #2563eb; background-color: rgb(37 99 235 / 0.12); }
.cm-tag-prop { color: #7c3aed; background-color: rgb(124 58 237 / 0.12); }
.cm-tag-costume { color: #db2777; background-color: rgb(219 39 119 / 0.12); }
.cm-tag-makeup { color: #be185d; background-color: rgb(190 24 93 / 0.12); }
.cm-tag-vfx { color: #0891b2; background-color: rgb(8 145 178 / 0.12); }
.cm-tag-sfx { color: #0e7490; background-color: rgb(14 116 144 / 0.12); }
.cm-tag-vehicle { color: #4d7c0f; background-color: rgb(77 124 15 / 0.12); }
.cm-tag-animal { color: #a16207; background-color: rgb(161 98 7 / 0.12); }
.cm-tag-extras { color: #ea580c; background-color: rgb(234 88 12 / 0.12); }
.cm-tag-set_dressing { color: #9333ea; background-color: rgb(147 51 234 / 0.12); }
.cm-tag-music { color: #059669; background-color: rgb(5 150 105 / 0.12); }
.cm-tag-sound { color: #0d9488; background-color: rgb(13 148 136 / 0.12); }
.cm-tag-stunt { color: #b91c1c; background-color: rgb(185 28 28 / 0.12); }
.cm-tag-camera { color: #475569; background-color: rgb(71 85 105 / 0.12); }
.cm-tag-other { color: #57534e; background-color: rgb(87 83 78 / 0.12); }

/* Remote cursors (y-codemirror.next) */
.writing-surface .cm-ySelectionInfo { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; font-style: normal; font-weight: 600; opacity: 1; padding: 1px 4px; border-radius: 3px; top: -1.3em; }

/* --- Panes: the preview replaces the editor, or sits beside it on wide screens ------ */
.writing-panes { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.writing-panes .writing-preview { display: none; }
.writing-panes.preview-open .writing-preview { display: block; }
.writing-panes.preview-open .writing-surface { display: none; }
@media (min-width: 1280px) {
  .writing-panes.preview-open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .writing-panes.preview-open .writing-surface { display: block; }
  .writing-panes.preview-open .writing-preview { position: sticky; top: 4rem; max-height: calc(100vh - 4rem); overflow-y: auto; border-left: 1px solid #e4e4e7; }
}

/* --- Paginated preview ------------------------------------------------------------ */
.sp-preview { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem 1rem 6rem; }
.sp-page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.04); font-family: "Courier Prime", "Courier New", monospace; color: #111; }
.sp-line { position: absolute; white-space: pre; overflow: visible; cursor: text; }
.sp-line.sp-scene_heading { font-weight: inherit; }
.sp-line.sp-page_number, .sp-line.sp-scene-number { cursor: default; }
.sp-highlight { background: #fde68a; }
.sp-note { color: #854d0e; background: #fefce8; }

/* --- Outline ------------------------------------------------------------------------- */
.sp-outline { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.sp-outline button { display: flex; width: 100%; align-items: baseline; gap: 0.5rem; border-radius: 0.375rem; padding: 0.3rem 0.5rem; text-align: left; color: #3f3f46; cursor: pointer; }
.sp-outline button:hover { background: #f4f4f5; color: #18181b; }
.sp-outline-section > button { margin-top: 0.5rem; font-weight: 600; color: #b45309; }
.sp-outline-scene .sp-outline-title, .sp-outline-heading .sp-outline-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sp-outline-scene .sp-outline-title { text-transform: uppercase; font-size: 12px; letter-spacing: 0.01em; }
.sp-outline-number { flex: none; min-width: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 600; color: #71717a; }
.sp-outline-meta { flex: none; font-size: 11px; color: #71717a; font-variant-numeric: tabular-nums; }
.sp-outline-color { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 9999px; align-self: center; }
.sp-outline-synopsis { margin: -0.1rem 0 0.3rem 2.75rem; font-size: 12px; line-height: 1.4; color: #71717a; font-style: italic; }
.sp-outline-depth-2 > button { padding-left: 1rem; }
.sp-outline-depth-3 > button { padding-left: 1.5rem; }
.sp-outline-heading.sp-outline-depth-1 > button { font-weight: 600; }
.sp-outline-empty { font-size: 13px; color: #71717a; padding: 0.5rem; }