/* The Desk tools for writers: SCREENPLAY, a script laid out as it prints,
   and WORDCOUNT.

   A screenplay page is measured in characters and lines of 12-point
   Courier: ten characters and six lines to the inch. So the page here is
   set in em and ch of its own face. A line is 1em, an inch is 6em, the
   page is 8.5 by 11 inches (51em by 66em), the margins are an inch, and
   an inch and a half on the left; the indents are in ch, so dialogue
   starts ten characters in whatever monospaced face the system has.
   On a phone the margins close up and the indents become shares of the
   width, and the browser wraps the lines again; the page breaks stay
   where the printed pages break. */

.sp-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.sp-h { font: 600 var(--text-sm) var(--font-sans); margin: 0 0 8px; }
.sp-scroll { max-height: 440px; overflow: auto; }
.sp-scroll thead th { position: sticky; top: 0; background: var(--paper-raised); z-index: 1; }
.sp-jump { color: var(--accent-strong); text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 3px; }
.sp-jump:hover { text-decoration-color: currentColor; }
.sp-tools { align-items: end; margin-bottom: 14px; }
.sp-tools .action-row { margin-top: 0; }

.sp-frame {
  background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: 24px 16px; max-height: 80vh; overflow: auto;
}
.sp-page {
  position: relative; box-sizing: border-box;
  width: 51em; min-height: 66em; max-width: 100%; margin: 0 auto 20px; padding: 6em 6em 6em 9em;
  font: var(--text-md)/1 "Courier Prime", "Courier New", Courier, var(--font-mono);
  color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule);
}
.sp-page:last-child { margin-bottom: 0; }
.sp-el { white-space: pre-wrap; max-width: 60ch; overflow-wrap: anywhere; }
.sp-gap { margin-top: 1em; }
.sp-character, .sp-more { padding-left: 22ch; }
.sp-dialogue, .sp-lyric { padding-left: 10ch; max-width: 45ch; }
.sp-parenthetical { padding-left: 16ch; max-width: 41ch; }
.sp-lyric { font-style: italic; }
.sp-transition { text-align: right; }
.sp-centered { text-align: center; }
.sp-pno { position: absolute; top: 3em; right: 6em; }
.sp-num { position: absolute; left: 3em; }
.sp-num-r { left: auto; right: 2em; }
.sp-tl { white-space: pre-wrap; min-height: 1em; }
.sp-al-center { text-align: center; }
.sp-al-right { text-align: right; }

@media (max-width: 900px) {
  .sp-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sp-frame { padding: 10px 8px; }
  .sp-page { width: auto; min-height: 0; padding: 3em 1.5em; font-size: var(--text-2xs); }
  .sp-character, .sp-more { padding-left: min(22ch, 28%); }
  .sp-dialogue, .sp-lyric { padding-left: min(10ch, 10%); }
  .sp-parenthetical { padding-left: min(16ch, 18%); }
  .sp-num { display: none; }
  .sp-pno { top: 1em; right: 1.5em; }
}

/* WORDCOUNT */
.wc-area { min-height: 220px; }
.wc-note { display: block; font: 400 var(--text-2xs) var(--font-sans); color: var(--ink-soft); margin-top: 2px; }
.wc-set { margin-top: 14px; }