/* oncall.css - @layer components: the On-Call wizard, scoped under .oncall.
   engine.js mounts into #oncall-app; every selector here starts .oncall so
   nothing here can leak onto the rest of the app. */

@layer components {

	/* ---------- shell ---------- */

	.oncall {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
		grid-template-areas: "head head" "body notes";
		align-items: start;
	}

	@media (max-width: 768px) {
		.oncall {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "head" "body" "notes";
		}
	}

	/* A div, not <header>: chrome.css's bare header{} selector is unlayered
	   and would otherwise force its own height onto this inner bar. */
	.oncall-head {
		grid-area: head;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--sp-4);
		padding: var(--sp-3) var(--sp-6);
		background-color: var(--bg-surface);
		border-bottom: var(--hairline);
		position: sticky;
		top: var(--header-height);
		z-index: 15;
	}

	/* .app-main is its own scroll container on mobile (chrome.css), already
	   starting below the real header, so top:0 there, not another header
	   height (matches .cpm-out's own desktop/mobile sticky-offset split). */
	/* Phone: company name on top (two lines max), agent and actions on one row below. */
	@media (max-width: 768px) {
		.oncall-head {
			top: 0;
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--sp-1) var(--sp-3);
			align-items: center;
			padding-inline: var(--sp-4);
		}

		.oncall-head-main {
			grid-column: 1 / -1;
		}

		.oncall-head .oncall-company {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			white-space: normal;
			overflow: hidden;
			font-size: var(--fs-md);
		}

		.oncall-head .oncall-contact {
			display: none;
		}

		.oncall-head .oncall-agent {
			grid-column: 1;
		}

		.oncall-head-actions {
			grid-column: 1 / -1;
			justify-content: flex-end;
			margin-left: 0;
			gap: var(--sp-3);
		}
	}

	.oncall-head-main {
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		min-width: 0;
	}

	.oncall-company {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--fs-lg);
		color: var(--text-primary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.oncall-agent {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	.oncall-head-actions {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		margin-left: auto;
	}

	/* English / Spanish script switch in the call header. */
	.oncall-lang {
		display: flex;
		gap: var(--sp-1);
	}

	/* Bulleted values inside a spoken line, like the marked cargo. */
	.oncall .say-list {
		margin: var(--sp-2) 0;
		padding-left: var(--sp-5);
		list-style: disc;
	}

	/* "English" tag on a line with no Spanish yet. */
	.oncall .objection summary .pill {
		margin-left: var(--sp-2);
	}

	.oncall :is(.say, .pitch) > .pill {
		margin-right: var(--sp-2);
	}

	/* Colored by the save state the JS already flips on the mount. */
	.oncall-save {
		flex: none;
		font-size: var(--fs-xs);
		font-weight: 600;
		color: var(--text-muted);
	}

	.oncall[data-save="saved"] .oncall-save {
		color: var(--ok);
	}

	.oncall[data-save="error"] .oncall-save {
		color: var(--danger);
	}

	.oncall-body {
		grid-area: body;
		min-width: 0;
		padding: var(--sp-5) var(--sp-6);
	}

	/* Sticky under the app header plus the call header, tall enough to type in. */
	.oncall-notes {
		grid-area: notes;
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		align-self: start;
		position: sticky;
		top: calc(var(--header-height) + 4.5rem);
		height: calc(100vh - var(--header-height) - 4.5rem);
		padding: var(--sp-5) var(--sp-6);
		background-color: var(--bg-surface);
		border-left: var(--hairline);
	}

	@media (max-width: 768px) {
		.oncall-notes {
			position: static;
			height: auto;
			border-left: none;
			border-top: var(--hairline);
		}
	}

	.oncall-notes label {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--fs-xs);
		letter-spacing: var(--track-sm);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.oncall-notes textarea {
		flex: 1 1 auto;
		min-height: 16rem;
		resize: none;
	}

	/* End-call quick-outcome control: a dropdown off the header bar. */
	.oncall-end {
		position: relative;
		border: none;
		background: transparent;
		border-radius: 0;
		overflow: visible;
	}

	.oncall-end summary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-1);
		height: var(--control-h);
		padding: var(--pad-control);
		border: var(--hairline);
		border-radius: var(--radius);
		background-color: var(--bg-surface);
		color: var(--text-muted);
		font-family: var(--font-body);
		font-weight: 600;
		font-size: var(--fs-xs);
		cursor: pointer;
		list-style: none;
	}

	.oncall-end summary::-webkit-details-marker {
		display: none;
	}

	.oncall-end summary::after {
		content: none;
	}

	@media (hover: hover) {
		.oncall-end summary:hover {
			border-color: var(--accent);
			color: var(--accent);
		}
	}

	.oncall-end[open] summary {
		border-color: var(--accent);
		color: var(--accent);
	}

	.oncall-end .choices {
		position: absolute;
		top: calc(100% + var(--sp-1));
		right: 0;
		z-index: 30;
		width: max-content;
		min-width: 12rem;
		background-color: var(--bg-surface);
		border: var(--hairline);
		border-radius: var(--radius);
		box-shadow: var(--shadow-overlay);
		padding: var(--sp-1);
	}

	/* ---------- start form ---------- */

	.oncall-start {
		display: flex;
		flex-direction: column;
		gap: var(--sp-4);
		max-width: 26rem;
		margin: var(--sp-8) auto;
		padding: var(--sp-6);
		background-color: var(--bg-surface);
		border: var(--hairline);
		border-top: var(--hairline-accent);
		border-radius: var(--radius);
	}

	.oncall-start-help {
		margin: 0;
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

	/* ---------- daily call tracker ---------- */

	.oncall-tracker {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		padding: var(--sp-4) var(--sp-6);
	}

	@media (max-width: 768px) {
		.oncall-tracker {
			padding: var(--sp-3);
		}
	}

	.oncall-tracker-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-3);
	}

	.oncall-tracker-label {
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

	.oncall-tracker-count {
		font-family: var(--font-data);
		font-variant-numeric: tabular-nums;
		font-size: var(--fs-md);
		color: var(--text-muted);
	}

	.oncall-tracker-count b {
		font-size: var(--fs-xl);
		color: var(--text-primary);
	}

	.oncall-tracker-bar {
		height: var(--sp-2);
		background-color: var(--bg-inset);
		border-radius: var(--radius-pill);
		overflow: hidden;
	}

	.oncall-tracker-bar > i {
		display: block;
		height: 100%;
		background-color: var(--accent);
		border-radius: inherit;
	}

	.oncall-tracker[data-met] .oncall-tracker-bar > i {
		background-color: var(--ok);
	}

	.oncall .summary pre {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* ---------- progress ---------- */

	.oncall .progress {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		margin-bottom: var(--sp-4);
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	.oncall .progress > span {
		flex: none;
		font-family: var(--font-data);
		font-variant-numeric: tabular-nums;
	}

	.oncall .progress .bar {
		flex: 1;
		height: var(--sp-1);
		background-color: var(--bg-inset);
		border-radius: var(--radius-pill);
		overflow: hidden;
	}

	.oncall .progress .bar > i {
		display: block;
		height: 100%;
		background-color: var(--accent);
	}

	/* ---------- cards ---------- */

	.oncall .card {
		background-color: var(--bg-surface);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-5) var(--sp-6);
		margin-bottom: var(--sp-4);
	}

	.oncall .card h2 {
		margin-bottom: var(--sp-3);
		font-size: var(--fs-lg);
	}

	.oncall .card h3 {
		margin-bottom: var(--sp-2);
		font-size: var(--fs-md);
	}

	.oncall .step-kind {
		display: block;
		margin-bottom: var(--sp-1);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--fs-xxs);
		letter-spacing: var(--track-lg);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.oncall .section-break {
		margin-top: var(--sp-4);
	}

	/* ---------- script lines ---------- */

	.oncall .script {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		margin-bottom: var(--sp-4);
	}

	/* Spoken lines: a tinted, bordered card, clearly not agent instructions. */
	.oncall :where(.say, .pitch, .answer) {
		background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
		border: var(--hairline);
		border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
		border-radius: var(--radius);
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--fs-md);
		line-height: 1.6;
		white-space: pre-wrap;
	}

	.oncall :where(.say, .pitch)::before {
		content: "Say";
		display: block;
		margin-bottom: var(--sp-1);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--fs-xxs);
		letter-spacing: var(--track-lg);
		text-transform: uppercase;
		color: var(--accent);
	}

	/* Conditional say line: tinted from info instead of accent. */
	.oncall .say.cond {
		background-color: color-mix(in srgb, var(--info) 6%, var(--bg-surface));
		border-color: color-mix(in srgb, var(--info) 22%, var(--border));
	}

	.oncall .say.cond::before {
		color: var(--info);
	}

	/* Agent instruction: quiet aside text, never boxed like a say line. */
	.oncall .direction {
		padding-inline: var(--sp-1);
		color: var(--text-muted);
		font-style: italic;
		font-size: var(--fs-sm);
		white-space: pre-wrap;
	}

	.oncall .direction::before {
		content: "\25b8 ";
		font-style: normal;
	}

	/* An action the agent takes mid-script, like placing the caller on hold. */
	.oncall .direction.cue {
		font-weight: 600;
		color: var(--text-secondary);
	}

	.oncall .ph {
		color: var(--warn);
		background-color: color-mix(in srgb, var(--warn) 14%, transparent);
		border-radius: var(--radius-sm);
		padding-inline: var(--sp-1);
	}

	/* Reuses the app's one literal mono stack (elements.css pre) for a raw token. */
	.oncall .missing {
		font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
		font-size: 0.85em;
		color: var(--danger);
		background-color: color-mix(in srgb, var(--danger) 14%, transparent);
		border-radius: var(--radius-sm);
		padding-inline: var(--sp-1);
	}

	/* Objection: the default accordion look (elements.css) is enough. */
	.oncall .objection .answer {
		margin: var(--sp-3);
	}

	/* "Option N" label over each alternate answer. */
	.oncall .objection .answer > .hint {
		display: block;
		margin-bottom: var(--sp-1);
	}

	/* Voicemail script and its outcome buttons, above the intro. */
	.oncall .voicemail {
		margin-bottom: var(--sp-3);
	}

	.oncall .voicemail-body {
		display: flex;
		flex-direction: column;
		gap: var(--sp-3);
		margin: var(--sp-3);
	}

	/* Agent notes: collapsed and visually quiet, unlike a regular accordion. */
	.oncall .agent-notes {
		margin-top: var(--sp-1);
		border: none;
		background: transparent;
		border-radius: 0;
	}

	.oncall .agent-notes summary {
		justify-content: flex-start;
		gap: var(--sp-1);
		padding: var(--sp-1) 0;
		font-family: var(--font-body);
		font-weight: 600;
		font-size: var(--fs-xxs);
		letter-spacing: var(--track-sm);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	@media (hover: hover) {
		.oncall .agent-notes summary:hover {
			color: var(--text-primary);
		}
	}

	.oncall .notes-body {
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		margin-left: var(--sp-3);
		padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
		border-left: var(--hairline);
	}

	.oncall .notes-body .direction {
		padding-inline: 0;
	}

	/* ---------- forms ---------- */

	.oncall .field > label {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--fs-xs);
		letter-spacing: var(--track-sm);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.oncall .field .hint {
		display: block;
		margin-top: var(--sp-1);
		font-family: var(--font-body);
		font-size: var(--fs-xs);
		letter-spacing: normal;
		text-transform: none;
		color: var(--text-muted);
	}

	.oncall .grid2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-3) var(--sp-4);
	}

	.oncall .grid2 .wide {
		grid-column: 1 / -1;
	}

	@media (max-width: 520px) {
		.oncall .grid2 {
			grid-template-columns: 1fr;
		}
	}

	/* Dense inputs in a tight row (vehicle grid, supervisor count). */
	.oncall :where(input, select).compact {
		height: 1.6rem;
		padding-inline: var(--sp-2);
		font-size: var(--fs-xs);
	}

	.oncall .sup-count {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
	}

	.oncall .sup-count-input {
		width: 4rem;
	}

	/* ---------- choices ---------- */

	.oncall .choices {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		margin: var(--sp-2) 0 var(--sp-4);
	}

	.oncall .choices.inline {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* height:auto and white-space:normal override elements.css's fixed-height,
	   nowrap button skin: choice text wraps past one line. */
	.oncall .choice {
		display: flex;
		align-items: flex-start;
		gap: var(--sp-2);
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: var(--control-h);
		white-space: normal;
		justify-content: flex-start;
		background-color: var(--bg-raised);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-2) var(--sp-3);
		text-align: left;
		cursor: pointer;
		color: var(--text-primary);
		font: inherit;
	}

	.oncall .choices.inline .choice {
		width: auto;
		flex: 1 1 8.75rem;
		justify-content: center;
	}

	/* The unstyled title/description wrapper span is a flex item too. */
	.oncall .choice > span {
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
	}

	@media (hover: hover) {
		.oncall .choice:hover {
			border-color: var(--accent);
		}
	}

	.oncall .choice.on {
		border-color: var(--accent);
		background-color: color-mix(in srgb, var(--accent) 10%, transparent);
	}

	.oncall .choice[disabled] {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.oncall .choice .t {
		font-weight: 600;
	}

	.oncall .choice .d {
		display: block;
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	.oncall .check {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		padding-block: var(--sp-1);
		cursor: pointer;
	}

	.oncall .check.corr {
		margin-top: var(--sp-2);
		padding-top: var(--sp-2);
		border-top: var(--hairline);
		border-top-style: dashed;
		color: var(--text-primary);
	}

	.oncall .check.corr:has(input:checked) {
		color: var(--warn);
	}

	.oncall .counter {
		display: inline-flex;
		align-items: center;
		border: var(--hairline);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.oncall .counter button {
		height: var(--control-h);
		width: var(--control-h);
		border: none;
		border-radius: 0;
		background-color: var(--bg-raised);
		color: var(--text-primary);
		font-size: var(--fs-md);
		cursor: pointer;
	}

	@media (hover: hover) {
		.oncall .counter button:hover {
			background-color: color-mix(in srgb, var(--accent) 14%, transparent);
			color: var(--accent);
		}
	}

	.oncall .counter span {
		min-width: var(--control-h);
		text-align: center;
		font-family: var(--font-data);
		font-variant-numeric: tabular-nums;
		font-weight: 700;
	}

	/* ---------- outline-danger, the one tone this app's outline buttons lack ---------- */

	.oncall [data-variant="outline"][data-tone] {
		border-color: var(--tone);
		color: var(--tone);
	}

	@media (hover: hover) {
		.oncall [data-variant="outline"][data-tone]:hover {
			background-color: var(--tone);
			border-color: var(--tone);
			color: var(--accent-fg);
		}
	}

	/* ---------- nav ---------- */

	.oncall .nav {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: var(--sp-2);
	}

	.oncall .grow {
		flex: 1 1 0%;
		min-width: 0;
	}

	/* ---------- callouts ---------- */

	.oncall .callout {
		background-color: color-mix(in srgb, var(--warn) 9%, var(--bg-surface));
		border: var(--hairline);
		border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
		border-radius: var(--radius);
		padding: var(--sp-3) var(--sp-4);
		margin-bottom: var(--sp-3);
	}

	.oncall .callout b {
		display: block;
		margin-bottom: var(--sp-1);
		color: var(--warn);
	}

	.oncall .callout.danger {
		background-color: color-mix(in srgb, var(--danger) 9%, var(--bg-surface));
		border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
	}

	.oncall .callout.danger b {
		color: var(--danger);
	}

	.oncall .callout.info {
		background-color: color-mix(in srgb, var(--info) 9%, var(--bg-surface));
		border-color: color-mix(in srgb, var(--info) 35%, var(--border));
	}

	.oncall .callout.info b {
		color: var(--info);
	}

	/* ---------- item state buttons ---------- */

	.oncall .states {
		display: inline-flex;
		border: var(--hairline);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.oncall .states button {
		border: none;
		border-right: var(--hairline);
		border-radius: 0;
		background-color: var(--bg-raised);
		padding: var(--sp-1) var(--sp-3);
		color: var(--text-muted);
		font-size: var(--fs-xs);
		cursor: pointer;
	}

	.oncall .states button:last-child {
		border-right: none;
	}

	.oncall .states button.on {
		font-weight: 700;
	}

	.oncall .states button.on[data-s="needed"] {
		color: var(--accent);
		background-color: color-mix(in srgb, var(--accent) 13%, transparent);
	}

	.oncall .states button.on[data-s="has"] {
		color: var(--ok);
		background-color: color-mix(in srgb, var(--ok) 13%, transparent);
	}

	.oncall .states button.on[data-s="declined"] {
		color: var(--danger);
		background-color: color-mix(in srgb, var(--danger) 13%, transparent);
	}

	.oncall .states button.on[data-s="unsure"] {
		color: var(--warn);
		background-color: color-mix(in srgb, var(--warn) 13%, transparent);
	}

	.oncall .applies {
		color: var(--text-muted);
		font-size: var(--fs-xs);
		margin-bottom: var(--sp-2);
	}

	.oncall .applies b {
		color: var(--text-primary);
		font-weight: 600;
	}

	/* ---------- presets, rows, vehicles/drivers ---------- */

	.oncall .preset-list {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		margin-bottom: var(--sp-4);
	}

	.oncall .preset {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		background-color: var(--bg-raised);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-2) var(--sp-3);
	}

	.oncall .preset .lbl {
		flex: 1;
		min-width: 0;
	}

	.oncall .preset .lbl .d {
		display: block;
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	.oncall .rows {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
	}

	/* The app-wide .row is a flex row; a wizard row stacks its header and grid. */
	.oncall .row {
		display: grid;
		gap: var(--sp-2);
		background-color: var(--bg-raised);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-2) var(--sp-3);
	}

	.oncall .row.flag {
		border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	}

	.oncall .rhead {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		flex-wrap: wrap;
	}

	.oncall .rhead .name {
		flex: 0 1 14rem;
		min-width: 8.75rem;
	}

	.oncall .rhead > .btn {
		margin-left: auto;
	}

	/* One section per question on the merged vehicles-and-drivers page. */
	.oncall .fleet-section {
		margin-top: var(--sp-5);
		padding-top: var(--sp-4);
		border-top: var(--hairline);
	}

	.oncall .fleet-section:first-of-type {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.oncall .fleet-section > .section-break {
		margin-top: 0;
	}

	.oncall .rgrid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sp-2) var(--sp-3);
	}

	@media (max-width: 520px) {
		.oncall .rgrid {
			grid-template-columns: 1fr;
		}
	}

	.oncall .rgrid input,
	.oncall .rgrid select {
		width: 100%;
	}

	.oncall .rgrid label {
		display: flex;
		flex-direction: column;
		gap: var(--sp-1);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	.oncall .matrix {
		border-collapse: collapse;
		width: 100%;
		font-size: var(--fs-xs);
	}

	.oncall .matrix th,
	.oncall .matrix td {
		border: var(--hairline);
		padding: var(--sp-1) var(--sp-2);
		text-align: center;
	}

	.oncall .matrix th:first-child,
	.oncall .matrix td:first-child {
		text-align: left;
	}

	.oncall .scroll-x {
		overflow-x: auto;
	}

	.oncall .state-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
		gap: var(--sp-1);
		margin: var(--sp-2) 0 var(--sp-3);
	}

	.oncall .state-grid .check {
		padding: var(--sp-1);
		font-size: var(--fs-sm);
	}

	.oncall .state-grid .check.base {
		color: var(--text-muted);
	}

	/* ---------- pitch / pricing items ---------- */

	.oncall .item {
		background-color: var(--bg-raised);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-4);
		margin-bottom: var(--sp-3);
	}

	.oncall .item.st-has {
		opacity: 0.75;
		border-style: dashed;
	}

	.oncall .item.st-declined {
		opacity: 0.6;
	}

	.oncall .item .ihead {
		display: flex;
		align-items: baseline;
		gap: var(--sp-2);
		flex-wrap: wrap;
	}

	.oncall .item .ihead h3 {
		flex: 1;
		min-width: 10rem;
		margin-bottom: 0;
	}

	.oncall .item .goname {
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	.oncall .item .qual {
		color: var(--text-primary);
		font-size: var(--fs-sm);
		margin: var(--sp-1) 0 var(--sp-2);
	}

	.oncall .item .price {
		display: flex;
		gap: var(--sp-4);
		flex-wrap: wrap;
		align-items: baseline;
		margin-bottom: var(--sp-2);
	}

	.oncall .item .price .amt {
		font-family: var(--font-data);
		font-variant-numeric: tabular-nums;
		font-size: var(--fs-xl);
		font-weight: 700;
	}

	.oncall .item .price .ren {
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	.oncall .item .price .info {
		color: var(--info);
		font-size: var(--fs-xs);
	}

	.oncall .group-title {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		margin: var(--sp-5) 0 var(--sp-2);
		color: var(--text-muted);
		font-size: var(--fs-xs);
		letter-spacing: var(--track-lg);
		text-transform: uppercase;
		font-weight: 700;
	}

	.oncall .group-title::after {
		content: "";
		flex: 1;
		align-self: center;
		border-top: var(--hairline);
	}

	/* Needed/has split: dashed to read as a lesser, collapsed subsection. */
	.oncall .subsec {
		border-style: dashed;
		background-color: transparent;
		margin: var(--sp-2) 0 var(--sp-3);
	}

	.oncall .subsec summary {
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

	.oncall .subsec > .item {
		margin: 0 var(--sp-2) var(--sp-2);
	}

	.oncall .subsec.st-has summary {
		color: var(--ok);
	}

	.oncall .subsec.st-declined summary {
		color: var(--danger);
	}

	.oncall .subsec.st-unsure summary {
		color: var(--warn);
	}

	/* ---------- outcome / total bar ---------- */

	.oncall .outcome {
		border-top: var(--hairline);
		margin-top: var(--sp-5);
		padding-top: var(--sp-3);
	}

	.oncall .outcome .field {
		max-width: 20rem;
	}

	.oncall .total-bar {
		position: sticky;
		bottom: 0;
		z-index: 15;
		display: flex;
		gap: var(--sp-5);
		flex-wrap: wrap;
		align-items: baseline;
		background-color: var(--bg-raised);
		border: var(--hairline);
		border-radius: var(--radius);
		padding: var(--sp-3) var(--sp-4);
		margin-top: var(--sp-3);
		box-shadow: var(--shadow-overlay);
	}

	.oncall .total-bar .lbl {
		color: var(--text-muted);
		font-size: var(--fs-xxs);
		letter-spacing: var(--track-sm);
		text-transform: uppercase;
	}

	.oncall .total-bar .val {
		font-family: var(--font-data);
		font-variant-numeric: tabular-nums;
		font-size: var(--fs-xl);
		font-weight: 700;
	}

	.oncall .total-bar .sub {
		color: var(--text-muted);
		font-size: var(--fs-xs);
	}

	/* ---------- summary ---------- */

	.oncall .summary table {
		border-collapse: collapse;
		width: 100%;
		font-size: var(--fs-sm);
	}

	.oncall .summary th,
	.oncall .summary td {
		text-align: left;
		padding: var(--sp-1) var(--sp-2);
		border-bottom: var(--hairline);
		vertical-align: top;
	}

	.oncall .summary th {
		color: var(--text-muted);
		font-weight: 600;
		font-size: var(--fs-xxs);
		letter-spacing: var(--track-sm);
		text-transform: uppercase;
	}

	.oncall .kv {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: var(--sp-1) var(--sp-4);
		font-size: var(--fs-sm);
	}

	.oncall .kv dt {
		color: var(--text-muted);
	}

	/* ---------- utility ---------- */

	.oncall .dim {
		color: var(--text-muted);
	}

	.oncall .small {
		font-size: var(--fs-xs);
	}

	/* Clipboard fallback textarea: appended to <body>, so it sits outside .oncall. */
	.oncall-clip {
		position: fixed;
		left: -9999px;
		top: 0;
	}

	/* ---------- print ---------- */

	@media print {

		.oncall .no-print,
		.oncall-notes,
		.oncall-end,
		.oncall-save {
			display: none;
		}

		.oncall {
			display: block;
		}

		/* Canvas/CanvasText: guaranteed paper-safe regardless of the active theme. */
		.oncall,
		.oncall .card,
		.oncall .item {
			color: CanvasText;
			background-color: Canvas;
		}

		.oncall :where(.card, .item) {
			border: var(--hairline);
			break-inside: avoid;
		}

		.oncall :where(.say, .pitch) {
			background-color: Canvas;
			border: var(--hairline);
		}
	}

}