/* Screenplay editor — layout and chrome.
 * ---------------------------------------------------------------------------
 * Every colour here is a variable. The palette is set per install in
 * index.html, which is the only file that differs between the Alysm and MOFA
 * copies of this app.
 *
 * MIRRORED FILE. A byte-identical twin lives at
 *   MOFA/tools/screenwriter/style.css
 *
 * The page itself is not styled here — screenplay geometry is generated from
 * fountain.js by Fountain.geometryCss(), so the ruler and the paginator cannot
 * disagree. This file positions the paper around it.
 */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

button, select, input {
  font: inherit;
  color: inherit;
}

/* ── frame ───────────────────────────────────────────────────────────────── */

#app {
  display: grid;
  grid-template-columns: 272px 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: 'top top' 'side work';
  height: 100vh;
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent);
  display: inline-block;
}

#scriptTitle {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
}

.topbar .spacer { flex: 1; }

.save-state {
  font-size: 12px;
  color: var(--ink-3);
  min-width: 8ch;
  text-align: right;
}
.save-state.saving { color: var(--warn); }
.save-state.dirty { color: var(--ink-2); }
.save-state.error { color: var(--danger); }

.page-count {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.bar-button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.bar-button:hover { border-color: var(--accent); }
.bar-button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.bar-button.danger:hover { border-color: var(--danger); color: var(--danger); }

select.bar-button { appearance: none; padding-right: 22px; }

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.view-toggle button {
  background: var(--panel-2);
  border: 0;
  padding: 5px 11px;
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.view-toggle button:last-child { border-right: 0; }
.view-toggle button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* ── sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  grid-area: side;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.sidebar-tabs button {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 4px;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sidebar-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }

.panel {
  flex: 1;
  overflow: auto;
  padding: 10px;
  min-height: 0;
}
.panel[hidden] { display: none; }

.panel h4 {
  margin: 16px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.panel .empty { color: var(--ink-3); font-size: 13px; }
.panel .note { color: var(--ink-3); font-size: 12px; margin: 4px 0 0; }

.script-item, .outline-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
  color: var(--ink);
}
.script-item:hover, .outline-item:hover { background: var(--panel-2); }
.script-item.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.script-name { display: block; font-weight: 600; }
.script-meta { display: block; font-size: 11px; color: var(--ink-3); }

.outline-item.scene {
  display: flex;
  gap: 8px;
  font-family: var(--font-script);
  font-size: 12px;
}
.outline-page {
  color: var(--ink-3);
  min-width: 2.4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.outline-item.section { font-weight: 700; margin-top: 8px; }
.outline-item.section.depth-2 { padding-left: 14px; font-weight: 600; }
.outline-item.section.depth-3 { padding-left: 26px; font-weight: 400; }
.outline-item.synopsis { color: var(--ink-3); font-size: 12px; font-style: italic; padding-left: 14px; }

.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.figures dt { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.figures dd { margin: 0; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

table.cast { width: 100%; border-collapse: collapse; font-size: 12px; }
table.cast th { text-align: left; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--line); }
table.cast td { border-bottom: 1px solid var(--line); padding: 3px 0; }
table.cast td:nth-child(2), table.cast td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }

ul.places { list-style: none; margin: 0; padding: 0; font-size: 12px; }
ul.places li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 3px 0; }
ul.places span { color: var(--ink-3); }

/* ── workspace ───────────────────────────────────────────────────────────── */

.workspace {
  grid-area: work;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  min-width: 0;
}
#app[data-view='write'] .workspace { grid-template-columns: 1fr; }
#app[data-view='write'] .preview-pane { display: none; }
#app[data-view='pages'] .workspace { grid-template-columns: 1fr; }
#app[data-view='pages'] .editor-pane { display: none; }

.editor-pane {
  position: relative;
  min-width: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

/* The highlight layer and the textarea must agree on every metric that affects
   line wrapping, or the colours slide out from under the caret. Anything set
   here is set for both. */
#editor, #highlight {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 26px 30px 40vh;
  border: 0;
  font-family: var(--font-script);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

#highlight {
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

#editor {
  z-index: 2;
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
  overflow: auto;
}
#editor::selection { background: var(--select); }

.hl-line { min-height: 1.5em; }
.hl-action { color: var(--ink); }
.hl-scene { color: var(--hl-scene); font-weight: 700; }
.hl-character { color: var(--hl-character); font-weight: 600; }
.hl-dialogue { color: var(--hl-dialogue); }
.hl-parenthetical { color: var(--hl-parenthetical); font-style: italic; }
.hl-transition { color: var(--hl-transition); }
.hl-section { color: var(--hl-section); font-weight: 700; }
.hl-synopsis { color: var(--hl-synopsis); font-style: italic; }
.hl-title { color: var(--hl-synopsis); }

/* ── the page ────────────────────────────────────────────────────────────── */

.preview-pane {
  overflow: auto;
  background: var(--desk);
  padding: 22px 0 40vh;
  min-width: 0;
}

.screenplay { zoom: var(--page-zoom, .9); }

.screenplay .page {
  position: relative;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto 18px;
  padding: 1in 1in .83in 1.5in;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
}

.screenplay .page-number {
  position: absolute;
  top: .5in;
  right: 1in;
  font-family: var(--font-page);
  font-size: 12pt;
  line-height: 1;
}

.screenplay .row { position: relative; }
.screenplay .row.here { background: var(--here); }

.screenplay .scene-number {
  position: absolute;
  font-weight: 400;
}
.screenplay .scene-number.left { left: -8ch; }
.screenplay .scene-number.right { right: -6ch; }

.screenplay .title-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-page);
  font-size: 12pt;
  line-height: 1.5;
}
.tp-centre { margin-top: 3.2in; text-align: center; }
.tp-title { text-transform: uppercase; text-decoration: underline; }
.tp-credit { margin-top: .5in; }
.tp-author { margin-top: .1in; }
.tp-source { margin-top: .5in; }
.tp-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.tp-right { text-align: right; }

/* ── overlays ────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 30;
}
.overlay[hidden] { display: none; }

.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: min(620px, 92vw);
  max-height: 70vh;
  overflow: auto;
  padding: 16px;
}
.sheet h3 { margin: 0 0 10px; }
.sheet .row-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

#jumpInput {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}
#jumpList { margin-top: 10px; display: flex; flex-direction: column; }
#jumpList button {
  display: flex;
  gap: 10px;
  text-align: left;
  background: none;
  border: 0;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-script);
  font-size: 12px;
}
#jumpList button:hover, #jumpList button.first { background: var(--accent-soft); }
.jump-kind { color: var(--ink-3); min-width: 3ch; text-align: right; }

ul.revision-list { list-style: none; margin: 0; padding: 0; }
ul.revision-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
ul.revision-list li span:first-child { flex: 1; }
.revision-size { color: var(--ink-3); font-size: 12px; }
ul.revision-list button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
ul.revision-list button.danger:hover { border-color: var(--danger); color: var(--danger); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.sidebar-actions .bar-button { flex: 1; padding: 5px 4px; font-size: 12px; }

.hint {
  color: var(--ink-3);
  font-size: 12px;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
}
.hint kbd {
  font-family: var(--font-script);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
}

@media (max-width: 1100px) {
  #app { grid-template-columns: 216px 1fr; }
  .workspace { grid-template-columns: 1fr; }
  #app[data-view='split'] .preview-pane { display: none; }
}