/**
 * Step Outline Engine front end.
 *
 * Deliberately quiet. The plugin drops into any theme, so this sets structure
 * and leaves colour and type to the theme wherever it can.
 */

.soe-app {
	--soe-grey: #6b6b6b;
	--soe-line: rgba(0, 0, 0, 0.12);
	--soe-flag: #8a5a00;
	/* A solid pair for the primary button. currentColor cannot be used for
	   both its background and its label, because the label then paints in its
	   own background colour and the button reads as an empty block. */
	--soe-ink: #16161a;
	--soe-paper: #ffffff;
	max-width: 46rem;
	margin: 0 auto;
}

.soe-panel {
	margin: 0 0 2rem;
}

.soe-panel__title {
	margin: 0 0 0.75rem;
}

.soe-field {
	display: block;
	margin: 0 0 1rem;
}

.soe-field__label {
	display: block;
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.soe-input {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--soe-line);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.soe-input--file {
	padding: 0.5rem;
}

.soe-hint {
	margin: 0 0 1rem;
	color: var(--soe-grey);
	font-size: 0.9em;
}

.soe-credits {
	margin: 0 0 1rem;
	font-weight: 600;
}

.soe-button {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.soe-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.soe-button--primary {
	background: var(--soe-ink);
	border-color: var(--soe-ink);
	color: var(--soe-paper);
}

.soe-button--primary:hover:not(:disabled),
.soe-button--primary:focus-visible {
	opacity: 0.88;
}

.soe-button--quiet {
	border-color: var(--soe-line);
	color: var(--soe-grey);
}

.soe-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--soe-line);
	overflow: hidden;
}

.soe-bar__fill {
	height: 100%;
	width: 0;
	background: var(--soe-ink);
	transition: width 0.4s ease;
}

.soe-progress__label {
	margin: 0.6rem 0 0.2rem;
	font-weight: 600;
}

.soe-privacy {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--soe-line);
	border-radius: 4px;
}

.soe-privacy__summary {
	cursor: pointer;
	font-weight: 600;
}

.soe-privacy__list {
	margin: 0.75rem 0 0;
	padding-left: 1.2rem;
	color: var(--soe-grey);
	font-size: 0.92em;
}

.soe-privacy__list li {
	margin: 0 0 0.35rem;
}

.soe-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.soe-packs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.soe-history {
	margin: 0;
	padding: 0;
	list-style: none;
}

.soe-history__item {
	border-bottom: 1px solid var(--soe-line);
}

.soe-history__link {
	display: block;
	width: 100%;
	padding: 0.6rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* The passes, while a job runs. */

.soe-progress__explanation {
	margin: 0 0 1.25rem;
	max-width: 34rem;
	line-height: 1.6;
}

.soe-stages {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	counter-reset: soe-stage;
}

.soe-stage {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.3rem 0;
	color: var(--soe-grey);
	font-size: 0.94em;
}

.soe-stage__mark {
	flex: 0 0 auto;
	width: 0.62rem;
	height: 0.62rem;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.soe-stage.is-done {
	color: var(--soe-grey);
}

.soe-stage.is-done .soe-stage__mark {
	background: currentColor;
}

.soe-stage.is-current {
	color: inherit;
	font-weight: 600;
}

.soe-stage.is-current .soe-stage__mark {
	background: var(--soe-ink);
	border-color: var(--soe-ink);
	box-shadow: 0 0 0 3px var(--soe-line);
}

/* The outline itself. */

.soe-outline {
	line-height: 1.6;
}

.soe-outline__header {
	margin: 0 0 2.5rem;
	padding: 0 0 1.25rem;
	border-bottom: 2px solid var(--soe-ink);
}

.soe-outline__title {
	margin: 0 0 0.4rem;
	line-height: 1.2;
}

.soe-outline__meta {
	margin: 0 0 0.3rem;
	font-weight: 600;
}

.soe-outline__meta,
.soe-outline__note {
	color: var(--soe-grey);
	font-size: 0.92em;
}

.soe-outline__note {
	margin: 0;
	max-width: 34rem;
}

.soe-act {
	margin: 0 0 2rem;
}

.soe-act__heading {
	margin: 2.5rem 0 0.25rem;
	padding: 0 0 0.4rem;
	border-bottom: 1px solid var(--soe-line);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.soe-act__heading--mpr {
	margin: 1.75rem 0 0.25rem;
	border-bottom-style: dashed;
	font-size: 0.95rem;
}

.soe-sequence {
	margin: 1.5rem 0 0;
}

.soe-sequence__heading {
	margin: 0 0 0.6rem;
	color: var(--soe-grey);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Steps are a two column grid so the numbers and the page references line up
   down the page instead of drifting with the length of each line. */

.soe-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.soe-step {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	gap: 0 0.6rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--soe-line);
}

.soe-step::before {
	content: attr(data-n);
	color: var(--soe-grey);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.soe-step:last-child {
	border-bottom: 0;
}

/* The one place the method allows italics. */
.soe-step--pov,
.soe-step--pov .soe-step__location,
.soe-step--pov .soe-step__page {
	color: var(--soe-grey);
	font-style: italic;
}

/* The one exception inside the exception: a mark is a mark, not prose, and
   a single italic capital in a box reads as a typo. */
.soe-step--pov .soe-step__kind {
	font-style: normal;
}

.soe-step__location {
	font-weight: 600;
}

.soe-step__beat {
	display: inline-block;
	margin: 0 0.15rem 0 0;
	padding: 0.05rem 0.4rem;
	border-radius: 3px;
	background: var(--soe-ink);
	color: var(--soe-paper);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	vertical-align: 0.08em;
}

.soe-step--pov .soe-step__beat {
	background: var(--soe-grey);
}

.soe-step__page {
	color: var(--soe-grey);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Event or action. Set like the beat marker rather than like the page,
   because it is a reading of the step and not a fact about the file. Outlined
   where the beat is filled, so a line carrying both does not end in two
   solid blocks. */
.soe-step__kind {
	display: inline-block;
	min-width: 1.15em;
	padding: 0.02rem 0.22rem;
	border: 1px solid var(--soe-line);
	border-radius: 3px;
	color: var(--soe-grey);
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	vertical-align: 0.12em;
}

.soe-sequence--unverified {
	margin-left: -0.9rem;
	padding-left: 0.75rem;
	border-left: 3px solid var(--soe-flag);
}

.soe-sequence__flag,
.soe-climax__flag {
	color: var(--soe-flag);
	font-size: 0.92em;
}

.soe-sequence__flag {
	display: block;
	margin: 0 0 0.6rem;
	max-width: 34rem;
}

/* The shape and the climaxes, which are the findings. */

.soe-shape,
.soe-climaxes {
	margin: 3rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--soe-line);
	border-radius: 6px;
}

.soe-shape h3,
.soe-climaxes h3 {
	margin: 0 0 0.8rem;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.soe-shape__table {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.soe-shape__table th {
	color: var(--soe-grey);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.soe-shape__table th,
.soe-shape__table td {
	padding: 0.45rem 0.6rem 0.45rem 0;
	border-bottom: 1px solid var(--soe-line);
	text-align: left;
}

.soe-shape__table tr:last-child td {
	border-bottom: 0;
}

.soe-shape__pov {
	margin: 0;
	max-width: 34rem;
}

.soe-climaxes__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.soe-climax {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--soe-line);
	max-width: 40rem;
}

.soe-climax:last-child {
	border-bottom: 0;
}

.soe-climax--unverified {
	padding-left: 0.75rem;
	border-left: 3px solid var(--soe-flag);
}

.soe-warnings {
	margin: 2rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--soe-line);
	border-radius: 4px;
	color: var(--soe-grey);
	font-size: 0.92em;
}


/* ─────────────────────────────────────────────────────────────────────────
   Colour.

   The palette is the form's own, handed in from Form::css_tokens() rather
   than written out here, so the page a writer waits on and the document they
   download cannot drift apart. Everything is scoped to .soe-app, so a theme
   is free to override any of it.
   ───────────────────────────────────────────────────────────────────────── */

.soe-panel {
	background: var(--soe-sheet, transparent);
	border: 1px solid var(--soe-rule, rgba(0, 0, 0, 0.12));
	border-top: 3px solid var(--soe-navy, currentColor);
	border-radius: 2px;
	padding: 1.35rem 1.5rem;
}

.soe-panel--error { border-top-color: var(--soe-red); }
.soe-panel--quote { border-top-color: var(--soe-red); }

.soe-panel__title {
	color: var(--soe-navy);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.soe-panel--error .soe-panel__title { color: var(--soe-red); }

/* The bar. A track the colour of the form's head tint, filled in navy. */
.soe-bar {
	background: var(--soe-tint);
	border: 1px solid var(--soe-rule);
	border-radius: 99px;
	overflow: hidden;
}

.soe-bar__fill {
	background: var(--soe-navy);
	transition: width 0.45s ease;
}

.soe-progress__label {
	color: var(--soe-navy);
	font-weight: 700;
}

.soe-progress__explanation { color: var(--soe-muted); }

/* The passes. Done in navy, the one running in red, the rest still grey, so
   a glance says where the job is rather than only that it is moving. */
.soe-stage { color: var(--soe-muted); }

.soe-stage.is-done { color: var(--soe-navy); }

.soe-stage.is-done .soe-stage__mark {
	background: var(--soe-navy);
	border-color: var(--soe-navy);
}

.soe-stage.is-current {
	color: var(--soe-red);
	font-weight: 700;
}

.soe-stage.is-current .soe-stage__mark {
	background: var(--soe-red);
	border-color: var(--soe-red);
	box-shadow: 0 0 0 3px rgba(181, 49, 42, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
	.soe-stage.is-current .soe-stage__mark { animation: soe-pulse 1.9s ease-in-out infinite; }
}

@keyframes soe-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(181, 49, 42, 0.18); }
	50%      { box-shadow: 0 0 0 6px rgba(181, 49, 42, 0.05); }
}

/* The two things a writer watching a bar actually needs told. */
.soe-note {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	margin: 0 0 0.8rem;
	padding: 0.85rem 1rem;
	border-radius: 2px;
}

.soe-note--safe {
	background: rgba(47, 61, 107, 0.07);
	border-left: 3px solid var(--soe-navy);
}

.soe-note--wait {
	background: rgba(123, 118, 102, 0.1);
	border-left: 3px solid var(--soe-muted);
}

.soe-note__mark {
	flex: 0 0 auto;
	font-size: 1.05rem;
	line-height: 1.4;
}

.soe-note--safe .soe-note__mark { color: var(--soe-navy); }
.soe-note--wait .soe-note__mark { color: var(--soe-muted); }

.soe-note__title {
	display: block;
	margin: 0 0 0.2rem;
	color: var(--soe-navy);
	letter-spacing: 0.03em;
}

.soe-note--wait .soe-note__title { color: var(--soe-muted); }

.soe-note p {
	margin: 0;
	font-size: 0.93em;
	line-height: 1.55;
}

/* The number that lets a writer leave. Said first, and said in the accent, so
   it is the part of that paragraph the eye lands on. */
.soe-estimate {
	color: var(--soe-navy);
	font-weight: 700;
}

.soe-estimate::after { content: " "; }

/* What the wait is for. */
.soe-coming {
	margin: 1.15rem 0 0;
	padding: 0.95rem 0 0;
	border-top: 1px solid var(--soe-rule);
}

.soe-coming__title {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--soe-navy);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.soe-coming__list {
	margin: 0;
	padding: 0 0 0 1.1rem;
	list-style: square;
}

.soe-coming__list li {
	margin: 0 0 0.32rem;
	font-size: 0.93em;
	line-height: 1.5;
}

.soe-coming__list li::marker { color: var(--soe-red); }

.soe-button--primary {
	background: var(--soe-navy);
	border-color: var(--soe-navy);
	color: #fff;
}

.soe-field__label {
	color: var(--soe-navy);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.soe-input {
	background: #fff;
	border-color: var(--soe-rule);
}

.soe-input:focus {
	outline: 2px solid var(--soe-navy);
	outline-offset: 1px;
}

.soe-credits { color: var(--soe-muted); }

@media (max-width: 30rem) {
	.soe-step {
		grid-template-columns: 2rem 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	.soe-app {
		--soe-line: rgba(255, 255, 255, 0.18);
		--soe-grey: #a5a5a5;
		--soe-flag: #d9a441;
		--soe-ink: #f2f2f2;
		--soe-paper: #16161a;
		/* The form's colours do not survive a dark background: cream paper
		   and a deep navy both disappear. These are the same roles, moved. */
		--soe-sheet: #1d1d22;
		--soe-navy: #93a6de;
		--soe-red: #e8867e;
		--soe-rule: rgba(255, 255, 255, 0.16);
		--soe-muted: #a09a88;
		--soe-tint: #26262c;
	}

	.soe-input { background: #16161a; }
	.soe-button--primary { color: #16161a; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Print: the outline comes out as Form S.D. 21, the same document as the
   .pdf and the .docx downloads.

   The bleed is a fixed element rather than a background on the page, because
   a fixed element is painted on every sheet: a half empty last page still
   comes out cream. Every layer that carries colour also carries
   print-color-adjust, or the browser drops the fills to save ink. The reader
   still has to tick Background graphics in the print dialog; there is no way
   to set that from a stylesheet.
   ───────────────────────────────────────────────────────────────────────── */

.soe-bleed { display: none; }

@page {
	size: A4 portrait;
	margin: 14mm;
}

@media print {
	.soe-bleed {
		display: block;
		position: fixed;
		top: -1in;
		right: -1in;
		bottom: -1in;
		left: -1in;
		z-index: -1;
		/*
		 * The sheet, and its tooth: a 1px line every 3px at 1.8% ink. It
		 * reads as fibre rather than as stripes, and it stays on the sheet.
		 * On an inner box it would stop being paper and become a pattern.
		 */
		background-color: #f6f2e6;
		background-image: repeating-linear-gradient(
			0deg,
			rgba(26, 28, 34, 0.018) 0 1px,
			transparent 1px 3px
		);
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	html,
	body,
	.soe-app {
		/* Flat. The tooth is the sheet's alone. */
		background: #f6f2e6 !important;
		color: #1a1c22;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Everything that is not the outline is screen furniture. */
	.soe-panel--upload,
	.soe-panel--progress,
	.soe-panel--quote,
	.soe-panel--error,
	.soe-panel--buy,
	.soe-panel--history,
	.soe-signin,
	.soe-result__actions,
	.soe-button {
		display: none !important;
	}

	.soe-app,
	.soe-panel--result {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.soe-outline {
		font-family: "Courier New", Courier, monospace;
		font-size: 9.5pt;
		line-height: 1.6;
	}

	.soe-outline__header {
		border: 2px solid #2f3d6b;
		padding: 10px 12px;
		text-align: center;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.soe-outline__title {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 17pt;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.soe-outline__meta,
	.soe-outline__note {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 6.5pt;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #7b7666;
	}

	.soe-act__heading {
		border: 0;
		border-top: 1px solid #2f3d6b;
		border-bottom: 1px solid #cdc6b0;
		padding: 6px 12px;
		background: #e7e9f0;
		color: #2f3d6b;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 8pt;
		letter-spacing: 0.2em;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.soe-sequence__heading {
		padding: 6px 12px;
		border-bottom: 1px solid #cdc6b0;
		color: #7b7666;
		font-size: 7pt;
		letter-spacing: 0.2em;
	}

	.soe-step {
		grid-template-columns: 34px 1fr;
		gap: 0 10px;
		padding: 6px 12px;
		border-bottom: 1px solid #cdc6b0;
		break-inside: avoid;
	}

	.soe-step::before {
		color: #b5312a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 7.5pt;
		font-weight: 700;
	}

	.soe-step--pov {
		background: #efeff3;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.soe-step--pov::before {
		color: #2f3d6b;
	}

	.soe-step__location {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 7.5pt;
		letter-spacing: 0.1em;
	}

	.soe-step__beat {
		background: none;
		color: #b5312a;
		font-size: 8pt;
		padding: 0;
	}

	.soe-shape,
	.soe-climaxes {
		border: 2px solid #b5312a;
		break-inside: avoid;
	}

	.soe-shape h3,
	.soe-climaxes h3 {
		margin: 0;
		padding: 7px 12px;
		border-bottom: 2px solid #b5312a;
		background: #f5e7e6;
		color: #b5312a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 8pt;
		letter-spacing: 0.2em;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.soe-sequence--unverified {
		border-left: 3px solid #b5312a;
	}

	a[href]::after {
		content: none;
	}
}

/* -----------------------------------------------------------------------
 * How this run went.
 *
 * Only rendered for an administrator looking at their own outline. The
 * server sends nothing for anyone else, so a writer never sees this and
 * there is no state here that has to be hidden.
 * -------------------------------------------------------------------- */

.soe-stats {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--soe-line);
	border-left: 3px solid var(--soe-ink);
	background: rgba(0, 0, 0, 0.02);
}

.soe-stats__title {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--soe-grey);
}

.soe-stats__list {
	display: grid;
	/* Pairs while there is room, one per line on a phone. */
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.35rem 1.5rem;
	margin: 0;
}

.soe-stats__list dt {
	color: var(--soe-grey);
	font-size: 0.85rem;
}

.soe-stats__list dd {
	margin: 0 0 0.4rem;
	font-variant-numeric: tabular-nums;
}