/* Live on-set SPA. Read-only, mobile-first, one-handed. Design tokens + goal /
   beat styling, index, nav, actor-lens and error styles for the real app. */

:root {
	--you: #0e7490;
	--you-bg: #e3f3f5;
	--film: #b45309;
	--film-bg: #fffbeb;
	--other: #475569;
	--ink: #1e293b;
	--muted: #64748b;
	--line: #e2e8f0;
	--page: #e9edf3;
	--card: #fff;
	--sub: #f8fafc;
	--action: #334155;
	--accent: #4338ca;
	--danger: #b91c1c;
	--danger-bg: #fef2f2;
	--ok: #15803d;
	--ok-bg: #ecfdf5;
	--gutter: 12px;
}
body.dark {
	--you: #8ecfd8;
	--you-bg: #25535d;
	--film: #fcd34d;
	--film-bg: #3a2c0a;
	--other: #94a3b8;
	--ink: #e2e8f0;
	--muted: #94a3b8;
	--line: #334155;
	--page: #0b1120;
	--card: #1e293b;
	--sub: #172033;
	--action: #cbd5e1;
	--accent: #a5b4fc;
	--danger: #fca5a5;
	--danger-bg: #2a1212;
	--ok: #6ee7b7;
	--ok-bg: #0d2a1d;
}
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Always use the full viewport width, capped at 640px (never narrower on
   mid-size screens). */
.app {
	max-width: 640px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--card);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

/* ---- header ---- */
header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--card);
	border-bottom: 1px solid var(--line);
	padding: 10px 12px;
}
.titlerow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.titlerow h1 {
	font-size: 15px;
	margin: 0;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hdr-l {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.hdr-r {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
select {
	font: inherit;
	padding: 5px 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
}
.iconbtn {
	font: inherit;
	font-size: 15px;
	line-height: 1;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
	padding: 5px 9px;
	cursor: pointer;
	flex: none;
}
.back {
	font-size: 18px;
	padding: 4px 10px;
}

main {
	padding: 14px var(--gutter) 90px;
}

/* ---- index ---- */
.toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
/* The order toggle + print link, riding inside the sticky header (second row
   under the title). Tight: the header supplies the surrounding padding. */
.hdr-tools {
	margin: 8px 0 0;
}
.t-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}
.seg {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: 9px;
	overflow: hidden;
}
.seg button {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	border: 0;
	background: var(--card);
	color: var(--muted);
	padding: 6px 12px;
	cursor: pointer;
}
.seg button + button {
	border-left: 1px solid var(--line);
}
.seg button.on {
	background: var(--accent);
	color: #fff;
}
body.dark .seg button.on {
	color: #0b1120;
}
.filter {
	font-size: 13px;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}
.filter input {
	accent-color: var(--accent);
}
/* Link to the screenplay print view; pushed to the trailing edge of its row. The
   nowrap keeps the label intact so a tight row wraps it whole onto the next line
   (the toolbar / .scene-h are flex-wrap) rather than breaking it mid-phrase. */
.sp-link {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}

.daygroup {
	margin-bottom: 18px;
}
.day-h {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.day-h .today {
	font-size: 10px;
	letter-spacing: 0.04em;
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
	padding: 1px 7px;
}
body.dark .day-h .today {
	color: #0b1120;
}

.scard {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 11px 13px;
	margin-bottom: 10px;
	background: var(--card);
}
.scard.mine {
	background: var(--you-bg);
	border-color: var(--you-bg);
}
.scard .s-top {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.scard .s-id {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	flex: none;
}
.scard .s-title {
	font-weight: 600;
}
.scard .s-slug {
	font-size: 12px;
	color: var(--muted);
	margin-top: 3px;
}
.scard .s-time {
	font-size: 12px;
	color: var(--muted);
	font-weight: 600;
}

/* ---- readiness (status) ----
   Card chip + scene banner + synopsis box for unpolished / not-ready scenes.
   `unpolished` reuses the film/amber lane (a draft, still shown); `not-ready`
   reads as recessed/incomplete (the body is hidden). */
.s-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 1px 7px;
	flex: none;
}
.s-badge.ready {
	background: var(--ok-bg);
	color: var(--ok);
}
.s-badge.unpolished {
	background: var(--film-bg);
	color: var(--film);
}
.s-badge.not-ready {
	background: var(--sub);
	color: var(--muted);
	border: 1px solid var(--line);
}
/* Scene-view banner above the body (unpolished) or the synopsis (not-ready). */
.snotice {
	border-radius: 10px;
	padding: 9px 12px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
}
.snotice.unpolished {
	background: var(--film-bg);
	color: var(--film);
	border: 1px solid var(--film);
}
.snotice.not-ready {
	background: var(--sub);
	color: var(--muted);
	border: 1px solid var(--line);
}
/* The synopsis shown in place of a not-ready scene's hidden body. */
.synopsis {
	color: var(--ink);
	line-height: 1.55;
}
.synopsis.empty {
	color: var(--muted);
	font-style: italic;
}
/* Header-bar chips on the whole-film print view: "N drafts" / "N hidden scenes".
   Screen-only chrome (the header is display:none in print), so it never enters
   the PDF. Colour matches the matching status badge — amber draft, muted hidden. */
.hidden-flag {
	font-size: 12px;
	font-weight: 700;
	border: 1px solid;
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}
.hidden-flag.unpolished {
	color: var(--film);
	background: var(--film-bg);
	border-color: var(--film);
}
.hidden-flag.not-ready {
	color: var(--muted);
	background: var(--sub);
	border-color: var(--line);
}

/* ---- scene heading ---- */
.scene-h {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
	margin-bottom: 14px;
}
/* The print link rides the heading row (dropping below the slug on narrow
   screens); opt it out of the slug's uppercasing. */
.scene-h .sp-link {
	text-transform: none;
	letter-spacing: normal;
}

/* ---- goals (txt-like) ----
   Shown only at a goal's intro beat; duration is implicit. Each goal is its own
   card — the only boxed element — and content flows unwrapped between them.
   Uniformly dimmed so brightness reads as the goal/content divider. No colour
   bar — the lane is carried by the label text (it clashed with the actor-lens
   left accent). */
.goal {
	background: var(--sub);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 9px 12px;
	margin: 4px 0 11px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--muted);
}
/* Tighter gap when goal cards stack (same beat) than goal -> content. */
.goal + .goal {
	margin-top: -5px;
}
.goal .glabel {
	font-weight: 700;
}
/* Actor-lens: the selected character's own goal. Picks up the `--you` accent
   (border + label) so choosing a character highlights their goals alongside
   their dialogue/action lines. */
.goal.mine {
	border-color: var(--you);
}
.goal.mine .glabel {
	color: var(--you);
}

/* ---- content (unwrapped) ---- */
.action {
	margin: 0 0 11px;
	color: var(--ink);
}
/* Actor-lens: an action the lensed character is in. Subtler than spoken lines
   (teal edge rule, no fill) so it still reads as action, not dialogue — which
   owns the solid fill. The rule is drawn as a pseudo-element bled out to the
   page edge (`--gutter`), so the text box itself stays aligned with every
   other line. */
.action.mine {
	position: relative;
	color: var(--ink);
}
.action.mine::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--gutter));
	width: 3px;
	background: var(--you);
}
/* Dialogue = an elevated card (white fill, DASHED border) so it stands out as
   foreground script — distinct from goals (recessed grey, SOLID border) and
   from plain action prose. Header = the speaker (.who); body = the line. */
.dlg {
	margin: 0 0 11px;
	background: var(--card);
	border: 1px dashed var(--line);
	border-radius: 10px;
	padding: 8px 11px;
}
.dlg .who {
	display: block;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}
.dlg .txt {
	margin-top: 3px;
}
.dlg .dnote {
	font-size: 12px;
	color: var(--muted);
	font-style: italic;
	margin-top: 2px;
}
.dlg.mine {
	background: var(--you-bg);
	border-color: var(--you-bg);
}
.dlg.mine .who {
	color: var(--you);
}

/* ---- error (loud and closed) ---- */
.fatal {
	margin: 40px 12px;
	padding: 16px;
	border: 1px solid var(--danger);
	background: var(--danger-bg);
	border-radius: 12px;
	color: var(--danger);
}
.fatal h2 {
	margin: 0 0 8px;
	font-size: 16px;
}
.fatal pre {
	white-space: pre-wrap;
	font-size: 12px;
	margin: 8px 0 0;
	color: var(--ink);
}
.fatal button {
	margin-top: 12px;
}