/* Screenplay print view. Mirrors afterwriting's A4 print profile
   (js/utils/print-profiles.js) so the HTML reads like the canonical PDF:
   Courier Prime 12pt, A4 page, screenplay indents, grey-italic goals.

   Everything is scoped under .screenplay so it never touches the live app.
   Metrics (inches, matching the A4 profile):
     page    A4 8.27 x 11.7, margins top 1.0 / left 1.5 / right 1.0
     font    Courier Prime 12pt, char 0.1in advance, line 0.1667in (~1.0)
     indents past the 1.5in left margin / widths (max chars x 0.1in):
       scene_heading / action  0      / 5.8in (58)
       character cue           2.0in  / 3.3in (33)
       parenthetical           1.5in  / 2.6in (26)
       dialogue                1.0in  / 3.6in (36)
   Close, NOT pixel-identical — CSS, not PDFKit; pagination especially differs. */

/* Courier Prime — afterwriting ships these TTFs; build-spa copies them to
   dist/fonts. System Courier New has different metrics, so we bundle the real
   font for fidelity (and to stay offline, like the rest of the SPA). */
@font-face {
	font-family: 'Courier Prime';
	src: url('./fonts/CourierPrime-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Courier Prime';
	src: url('./fonts/CourierPrime-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Courier Prime';
	src: url('./fonts/CourierPrime-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Courier Prime';
	src: url('./fonts/CourierPrime-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

/* The route lifts the SPA's 640px column so the page can be full A4 width. */
body.screenplay-mode .app {
	max-width: none;
	box-shadow: none;
	background: #d9dde3;
}
body.screenplay-mode main {
	padding: 0;
}

/* Screen-only print toolbar (hidden when actually printing). */
.sp-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}
.sp-toolbar button {
	font: 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	padding: 8px 14px;
	border: 1px solid #b8c0cc;
	border-radius: 8px;
	background: #fff;
	color: #1e293b;
	cursor: pointer;
}
.sp-toolbar .sp-hint {
	font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #64748b;
}

/* The A4 page sheet. On screen it floats on a grey backdrop; in print it fills
   the @page box (margins applied there, so padding drops to 0). */
.screenplay {
	font-family: 'Courier Prime', 'Courier New', monospace;
	font-size: 12pt;
	line-height: 0.1667in;
	color: #000;
	background: #fff;
	width: 8.27in;
	min-height: 11.7in;
	margin: 16px auto 40px;
	padding: 1in 1in 1in 1.5in; /* top / right / (bottom) / left */
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
	position: relative;
}

/* Content column is 5.8in (58 chars). Each element indents PAST the 1.5in left
   margin via margin-left; width is the char-count * 0.1in. A blank line between
   elements = one 0.1667in line (screenplay rhythm), so default margins are 0 and
   spacing is added explicitly where the format calls for it. */
.screenplay p,
.screenplay h2 {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: normal;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	/* No metrics-based pagination (no MORE/CONT'D); we only hint the browser's own
	   page-breaker. A paragraph keeps >=2 lines together across a page boundary. */
	widows: 2;
	orphans: 2;
	/* Neutralise app.css's global block styling (e.g. its boxed `.goal`); the
	   screenplay wants bare, Fountain-like text, not the SPA's cards. */
	background: none;
	border: 0;
}

/* Scene heading — caps, blank line above, scene id in the left gutter. */
.screenplay .scene {
	margin-bottom: 0.1667in;
}
.screenplay .scene-heading {
	text-transform: uppercase;
	font-weight: bold;
	max-width: 5.8in;
	margin: 0.3334in 0 0.1667in; /* two lines above, one below */
	/* Never strand a heading at the page foot with its scene starting overleaf. */
	break-after: avoid;
	page-break-after: avoid;
}
.screenplay .scene:first-child .scene-heading {
	margin-top: 0;
}
.screenplay .scene-num {
	position: absolute;
	left: 0.5in;
	font-weight: bold;
}

/* Action — full width, blank line after. */
.screenplay .action {
	max-width: 5.8in;
	margin-bottom: 0.1667in;
}

/* Goal — the one set-apart element: grey-italic with a bold label.
   afterwriting renders notes #888888 italic; we match. */
.screenplay .goal {
	max-width: 5.8in;
	color: #888;
	font-style: italic;
	margin-bottom: 0.1667in;
}
.screenplay .goal .glabel {
	font-weight: bold;
}

/* Readiness markers (unpolished / not-ready). The note is a bold grey flag; the
   synopsis is grey-italic prose standing in for a not-ready scene's hidden body. */
.screenplay .draft-note {
	max-width: 5.8in;
	color: #888;
	font-weight: bold;
	margin-bottom: 0.1667in;
}
.screenplay .synopsis {
	max-width: 5.8in;
	color: #888;
	font-style: italic;
	margin-bottom: 0.1667in;
}

/* Dialogue block — cue + optional parenthetical + speech, kept together so a
   cue never splits from its line across a page. Blank line after the block. */
.screenplay .dialogue-block {
	margin-bottom: 0.1667in;
	break-inside: avoid;
	page-break-inside: avoid;
}
/* Cue: 2.0in past margin, 3.3in wide. Bold (a styling choice — afterwriting does
   NOT bold cues by default; HTML/PDF diverge here pending a decision). */
.screenplay .cue {
	margin-left: 2in;
	max-width: 3.3in;
	font-weight: bold;
}
/* Parenthetical (and trailing dialogue note): 1.5in past margin, 2.6in wide. */
.screenplay .paren {
	margin-left: 1.5in;
	max-width: 2.6in;
}
/* Dialogue speech: 1.0in past margin, 3.6in wide. */
.screenplay .dialogue {
	margin-left: 1in;
	max-width: 3.6in;
}

/* ---- print ---- */
@media print {
	body.screenplay-mode .app {
		background: #fff;
	}
	.sp-toolbar,
	body.screenplay-mode header {
		display: none;
	}
	/* 1in margins all round; the extra 0.5in of the screenplay's 1.5in left
	   margin is recreated as .screenplay padding (below) — NOT as @page margin —
	   so the scene number can live just left of the heading in PRINTABLE space.
	   Content placed in an @page margin box is clipped by the browser, which is
	   why the numbers vanished before. */
	@page {
		size: A4;
		margin: 1in;
	}
	.screenplay {
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 0 0 0 0.5in;
		box-shadow: none;
	}
	/* Anchored to the .screenplay padding-box left edge (= the 1in page margin),
	   so the number prints 0.5in left of the heading, inside the printable area. */
	.screenplay .scene-num {
		left: 0;
	}
}