/* One sheet of paper holding the whole script. .paper--pad is the yellow legal pad, .paper--typed a Courier manuscript. */
.paper {
  --line: 2rem;
  position: relative;
  margin: 0 auto;
  color: var(--ink);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.2), 0 18px 40px rgb(0 0 0 / 0.45);
}

.paper--pad {
  --margin: 8rem;
  --header: 7rem;
  max-width: 52rem;
  padding: var(--header) 2rem calc(var(--line) * 4) calc(var(--margin) + 1.25rem);
  border-top: 1.4rem solid var(--binding);
  background-color: var(--pad-yellow);
  background-image:
    linear-gradient(to right,
      transparent calc(var(--margin) - 4px), var(--pad-margin) calc(var(--margin) - 4px),
      var(--pad-margin) calc(var(--margin) - 2px), transparent calc(var(--margin) - 2px),
      transparent calc(var(--margin) + 1px), var(--pad-margin) calc(var(--margin) + 1px),
      var(--pad-margin) calc(var(--margin) + 3px), transparent calc(var(--margin) + 3px)),
    linear-gradient(var(--pad-yellow), var(--pad-yellow)),
    linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--pad-rule) calc(var(--line) - 1px));
  /* Rules and margin are one-line tiles repeated down the page: a single gradient as tall as a long script blurs or drops lines. */
  background-size: 100% var(--line), 100% calc(var(--header) - var(--line)), 100% var(--line);
  background-repeat: repeat-y, no-repeat, repeat-y;
  background-position: 0 0, 0 0, 0 calc(var(--header) + 0.35rem);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: var(--line);
}

@container (max-width: 40rem) {
  .paper--pad { --margin: 2.5rem; padding-right: 1rem; padding-left: calc(var(--margin) + 0.75rem); font-size: 1.15rem; }
}

.paper--typed {
  --line: 1em;
  width: 51em;
  max-width: 100%;
  padding: 6em 6em 6em 9em;
  background: var(--typed-paper);
  color: var(--typed-ink);
  font-family: var(--font-typed);
  font-size: min(16px, calc(100cqi / 51));
  line-height: 1;
}

.paper__header { margin-bottom: var(--line); text-align: center; }

.paper__title, .paper__byline { margin: 0; font: inherit; line-height: var(--line); }

.paper--pad .paper__header { position: absolute; inset: 1.5rem 1rem auto calc(var(--margin) + 1.25rem); }
.paper--pad .paper__title { font: 2rem/1.2 var(--font-marker); color: var(--ink); }
.paper--pad .paper__byline { color: var(--pencil); }

.paper--typed .paper__header { padding: 18em 0 24em; border-bottom: 1px dashed #bbb; margin-bottom: 6em; }
.paper--typed .paper__title { text-transform: uppercase; text-decoration: underline; }
.paper--typed .paper__byline { margin-top: 2em; }

.scene { position: relative; }

.scene__heading {
  margin: calc(var(--line) * 2) 0 0;
  font: inherit;
  font-weight: 700;
  line-height: var(--line);
  text-transform: uppercase;
  outline: none;
}

.scene:first-of-type .scene__heading { margin-top: 0; }

/* Writing before the first scene heading, like FADE IN:, has no heading of its own. */
.scene:first-of-type:has(.element:not(:empty)) .scene__heading:empty:not(:focus) { min-height: 0; height: 0; }
.scene:first-of-type:has(.element:not(:empty)) .scene__heading:empty::before { content: none; }
.scene:first-of-type:has(.element:not(:empty)) .scene__heading:empty + .scene__body > .element:first-child { margin-top: 0; }

.scene__beats {
  position: absolute;
  top: 0;
  right: calc(100% + 1.75rem);
  width: calc(var(--margin) - 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pencil);
  font-size: 0.8rem;
  line-height: 1.15;
  transform: rotate(-1.5deg);
}

.scene__beats li + li { margin-top: 0.5rem; }
.scene__beats li::before { content: "– "; }

@container (max-width: 40rem) {
  .paper--pad .scene__beats { position: static; width: auto; margin-top: 0; transform: none; line-height: var(--line); font-size: 0.95rem; }
}

.paper--typed .scene__beats { display: none; }

.scene__body { outline: none; }

[data-placeholder]:empty::before,
.scene__body > .element:only-child:empty::before {
  content: attr(data-placeholder);
  color: var(--pencil);
  opacity: 0.6;
  font-weight: 400;
}

.scene__body > .element:only-child:empty::before { content: "Start writing…"; }

.element {
  margin: var(--line) 0 0;
  min-height: var(--line);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.element[data-kind="character"] { margin-left: 37%; text-transform: uppercase; }
.element[data-kind="parenthetical"] { margin: 0 0 0 27%; max-width: 38%; }
.element[data-kind="dialogue"] { margin: 0 0 0 17%; max-width: 58%; }
.element[data-kind="transition"] { text-align: right; text-transform: uppercase; }
.element[data-kind="shot"] { text-transform: uppercase; }

.page-break {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed #c8c8c8;
  pointer-events: none;
}

.page-break::after {
  content: attr(data-page) ".";
  position: absolute;
  right: 6em;
  top: 0.5em;
  color: #777;
}

.paper--pad .page-break { display: none; }

.element[data-suggestion]::after {
  content: attr(data-suggestion);
  opacity: 0.35;
}

.editor-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  gap: 1rem;
  max-width: calc(100vw - 32px);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--desk);
  color: var(--chrome-muted);
  font: 0.85rem var(--font-typed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
}

.editor-bar__status:empty { display: none; }
.editor-bar__status { color: var(--chrome); }

@media print {
  .toolbar, .editor-bar, .page-break { display: none; }
  body { background: none; }
  .desk { padding: 0; }
  .paper { box-shadow: none; }
}