/* Table Read (design/TABLE-READ.md): every page is a page of tonight's
   screenplay. Shared by the web player, the share pages, the legal pages and
   the home page; the tokens (colors, sizes, grid, timings) come from
   /styles/tokens.css, generated from design/tokens.json. Courier Prime is the
   only face. Hierarchy comes from screenplay tools alone: caps, size, bold,
   underline, indentation and white space. */

@font-face { font-family: "Courier Prime"; src: url("/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/CourierPrime-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* One line of body text: the vertical rhythm. One blank line between elements. */
  --lh: calc(var(--line) * var(--type-body));
  --gutter: max(16px, var(--margin-ch));
}

*, *::before, *::after { box-sizing: border-box; }

/* The root is user-scalable: every size is rem. On iOS Safari the root size
   follows Dynamic Type (only the size: the face is set on body). */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--type-body)/var(--line) "Courier Prime", "Courier New", monospace;
  letter-spacing: 0;
  font-kerning: none;
  font-synthesis: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; font: inherit; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: 0; }
::selection { background: var(--highlight); color: var(--on-highlight); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ the page */

/* The text block: 60 characters at most, like a real screenplay line, with a
   2 ch margin a side on phones (16 px at the smallest). */
.page {
  max-width: calc(60ch + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) calc(3 * var(--lh)) max(var(--gutter), env(safe-area-inset-left));
}

/* Page header: one small line, a hairline under it. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2ch;
  min-height: 44px;
  margin: 0 0 var(--lh);
  font-size: var(--type-small);
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.page-header .ph-left, .page-header .ph-right { display: inline-flex; align-items: center; gap: 1ch; min-width: 0; }
.page-header .ph-right { justify-content: flex-end; text-align: right; }
.page-header a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ screenplay elements */

/* Every element is followed by one blank line, as in a real script. */
.slug, .action, .block, .transition, .title-page, .ledger, .center { margin: 0 0 var(--lh); }

.slug { font-weight: 700; text-transform: uppercase; }
.transition { text-align: right; text-transform: uppercase; }
.center { text-align: center; }

/* A dialogue block: a cue, an optional parenthetical, the lines. No blank lines inside. */
.cue { margin: 0 var(--dialogue-inset); text-align: center; text-transform: uppercase; }
.paren { margin: 0 var(--parenthetical-inset); font-style: italic; color: var(--ink2); }
.dialogue { margin: 0 var(--dialogue-inset); }
.block > .dialogue + .dialogue { margin-top: var(--lh); }

/* At accessibility text sizes the insets collapse to 2 ch (table-read.js sets .ax). */
.ax .cue, .ax .dialogue, .ax .paren { margin-left: 2ch; margin-right: 2ch; }

.small { font-size: var(--type-small); }
.ink2 { color: var(--ink2); }
.bold { font-weight: 700; }
.caps { text-transform: uppercase; }
.display { font-size: var(--type-display); font-weight: 700; line-height: var(--line); }

/* The title page: centered, the title in caps and underlined. */
.title-page { text-align: center; padding-top: var(--lh); }
.title-page > * + * { margin-top: var(--lh); }
.title-page .tight { margin-top: 0; }
.title { font-weight: 700; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

/* The highlighter: you, and nothing else. A flat marker stroke per line of
   text, extending about 0.3 ch past it, each end a little uneven. */
.hl, mark {
  background: var(--highlight);
  color: var(--on-highlight);
  padding: 0.15em 0.3ch;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 0.22em 0.36em 0.3em 0.18em / 0.3em 0.24em 0.34em 0.2em;
}
.hl-1 { border-radius: 0.34em 0.2em 0.24em 0.32em / 0.24em 0.32em 0.2em 0.3em; }
.hl-2 { border-radius: 0.18em 0.3em 0.38em 0.24em / 0.34em 0.2em 0.28em 0.26em; }
.hl-3 { border-radius: 0.3em 0.24em 0.2em 0.36em / 0.2em 0.3em 0.32em 0.24em; }

/* The redline: a strikethrough on blocked casting and rewritten lines, nowhere else. */
.struck, del { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--redline); text-decoration-thickness: 2px; }

/* Seat colors: Hollywood revision colors, only ever a tab or a cue underline. */
.seat-blue { --seat: var(--seat-blue); }
.seat-pink { --seat: var(--seat-pink); }
.seat-green { --seat: var(--seat-green); }
.seat-goldenrod { --seat: var(--seat-goldenrod); }
.seat-buff { --seat: var(--seat-buff); }
.seat-salmon { --seat: var(--seat-salmon); }
.seat-cherry { --seat: var(--seat-cherry); }
.seat-tan { --seat: var(--seat-tan); }
.tab { display: inline-block; flex: none; width: 1ch; height: calc(0.8 * var(--line) * 1em); vertical-align: -0.2em; background: var(--seat, var(--ink2)); }
.seat-line { text-decoration: underline; text-decoration-color: var(--seat, var(--ink)); text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-skip-ink: none; }

/* A redaction bar: solid ink where a hidden name sits, one line tall less 15%. */
.redact { display: block; height: calc(0.85 * var(--lh)); margin: calc(0.075 * var(--lh)) 0; max-width: 100%; background: var(--ink); }
.w8 { width: 8ch; } .w9 { width: 9ch; } .w10 { width: 10ch; } .w11 { width: 11ch; } .w12 { width: 12ch; }
.w13 { width: 13ch; } .w14 { width: 14ch; } .w15 { width: 15ch; } .w16 { width: 16ch; }

/* Ledger row: name left, value right, dot leaders between. */
.ledger { list-style: none; }
/* Three columns: the name takes what it needs (and wraps when it must), the
   leader takes the rest (two dots at least), the value never splits. A note
   under a row (.sub) spans all three. */
.ledger li { display: grid; grid-template-columns: minmax(0, max-content) minmax(2ch, 1fr) auto; column-gap: 1ch; align-items: baseline; min-height: var(--lh); }
.ledger .k { min-width: 0; }
.ledger .v { text-align: right; }
.ledger .dots { min-width: 0; overflow: hidden; white-space: nowrap; color: var(--ink2); }
.ledger .dots::after { content: "................................................................................................................................"; }
.ledger .sub { display: block; grid-column: 1 / -1; color: var(--ink2); font-size: var(--type-small); }

/* Reely's mark, small, beside REELY (V.O.). Drawn in the ink of the text around it. */
.reely-mark {
  display: inline-block;
  width: 1.6em;
  height: 1.2em;
  margin-right: 0.6ch;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("/brand/reely-mark.svg") center / contain no-repeat;
  mask: url("/brand/reely-mark.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------ buttons */

/* No boxes, no shadows. Primary: caps bold on the highlighter. Secondary:
   caps underlined. Disabled: ink2. At least 44 px tall at any text size. */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: inherit;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.btn.primary { font-weight: 700; }
.btn.secondary { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--ink2); cursor: default; text-decoration: none; }
.btn:disabled .hl, .btn[aria-disabled="true"] .hl { background: none; color: inherit; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 3ch; margin: 0 0 var(--lh); }
.actions.right { justify-content: flex-end; }

/* ------------------------------------------------------------ the foot of every page */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  margin-top: calc(2 * var(--lh));
  border-top: 1px solid var(--rule);
  font-size: var(--type-small);
  text-transform: uppercase;
}
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* Legal pages and share pages share the fine print. */
.fineprint { color: var(--ink2); font-size: var(--type-small); margin: 0 0 var(--lh); }
.report { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2ch; margin: 0 0 var(--lh); }
.report-status:empty { display: none; }
.legal ul { list-style: none; }
.legal li { margin: 0 0 var(--lh); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}