/* ============================================================
   PCS ACCOUNTING - STRUCTURE

   No colours of its own. Every colour comes from a site theme token,
   so all eight themes work, and a business account that picks a dark
   theme gets dark books.

   Built for a tablet held sideways first: touch targets at least
   44px tall, fields wide enough to read an address in, and nothing
   that needs a mouse to hover.
   ============================================================ */

:root {
	--pa-display: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
	--pa-touch: 2.75rem;
}

/* The shared styles set display on many things, and an element that
   sets its own display ignores the hidden attribute without this. */
.pa-app [hidden],
.pa-refused[hidden] {
	display: none !important;
}

.pa-checking,
.pa-refused {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--ink-muted);
	font-size: calc(1rem * var(--font-scale, 1));
}

.pa-app {
	color: var(--ink);
	font-size: calc(1rem * var(--font-scale, 1));
	padding-bottom: 2rem;
}


/* ---- under construction ---------------------------------------- */

.pa-construction {
	margin: 0;
	padding: 0.6rem 1rem;
	background: var(--warn-soft);
	border-bottom: 1px solid var(--warn);
	color: var(--ink);
	font-size: calc(0.9rem * var(--font-scale, 1));
	text-align: center;
}

.pa-construction strong {
	color: var(--warn);
}


/* ---- the company bar ------------------------------------------- */

.pa-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.5rem 1rem;
	background: var(--surface-alt);
	border-bottom: 1px solid var(--rule);
}

.pa-bar-gap {
	flex: 1 1 auto;
}

.pa-company-switch {
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--pa-touch);
	padding: 0 0.6rem;
	border: 1px solid transparent;
	border-radius: 0.3rem;
	background: none;
	color: var(--accent);
	font-family: var(--pa-display);
	font-weight: 700;
	font-size: calc(1.1rem * var(--font-scale, 1));
	cursor: pointer;
}

.pa-company-switch:hover {
	border-color: var(--rule-strong);
}

.pa-switch-mark {
	color: var(--ink-muted);
	font-size: 0.8em;
}

.pa-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.pa-tab {
	font: inherit;
	min-height: var(--pa-touch);
	padding: 0 0.9rem;
	border: none;
	border-radius: 0.3rem;
	background: none;
	color: var(--ink-muted);
	cursor: pointer;
}

.pa-tab.pa-tab-on {
	background: var(--selected-bg);
	color: var(--accent);
	font-weight: 700;
}

/* Tabs for stages not built yet: visible, so the shape of the product
   is clear, but plainly not ready. */
.pa-tab:disabled {
	color: var(--ink-faint);
	cursor: default;
}


/* ---- buttons and links ----------------------------------------- */

.pa-btn {
	font: inherit;
	min-height: var(--pa-touch);
	padding: 0 1.1rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--button-bg);
	color: var(--button-ink);
	cursor: pointer;
}

.pa-btn:hover {
	background: var(--button-hover-bg);
}

.pa-btn:disabled {
	color: var(--button-disabled-ink);
	cursor: default;
}

.pa-btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
}

.pa-btn-primary:hover {
	background: var(--accent-strong);
}

.pa-link {
	font: inherit;
	padding: 0.4rem 0;
	border: none;
	background: none;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}

.pa-btn:focus-visible,
.pa-link:focus-visible,
.pa-tab:focus-visible,
.pa-card:focus-visible,
.pa-company-switch:focus-visible,
.pa-list-remove:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}


/* ---- screens --------------------------------------------------- */

.pa-screen {
	max-width: 46rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 0;
}

.pa-heading {
	font-family: var(--pa-display);
	font-size: calc(1.5rem * var(--font-scale, 1));
	margin: 0 0 0.4rem;
	color: var(--ink);
	text-wrap: balance;
}

.pa-quiet,
.pa-step-why,
.pa-home-role {
	color: var(--ink-muted);
	margin: 0 0 1.2rem;
	max-width: 60ch;
}

.pa-step-count {
	margin: 0 0 0.3rem;
	color: var(--accent);
	font-size: calc(0.8rem * var(--font-scale, 1));
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pa-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}


/* ---- the picker ------------------------------------------------ */

.pa-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.8rem;
	margin: 1rem 0;
}

.pa-card {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	min-height: 5.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	box-shadow: var(--shadow);
}

.pa-card:hover {
	border-color: var(--accent);
}

.pa-card-name {
	font-family: var(--pa-display);
	font-weight: 700;
	font-size: calc(1.15rem * var(--font-scale, 1));
}

.pa-card-role {
	color: var(--ink-muted);
	font-size: calc(0.9rem * var(--font-scale, 1));
}


/* ---- home ------------------------------------------------------ */

.pa-home-card {
	padding: 1rem 1.2rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
}

.pa-home-card p {
	margin: 0 0 0.6rem;
	max-width: 62ch;
}

.pa-home-card p:last-child {
	margin-bottom: 0;
}


/* ---- fields ---------------------------------------------------- */

.pa-fields {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.pa-step {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.pa-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pa-label {
	font-weight: 700;
	font-size: calc(0.95rem * var(--font-scale, 1));
	color: var(--ink);
}

/* .pa-app in front: the shared form styles set padding and width on
   input[type="text"] and select, and beat a single class. */
.pa-app .pa-input {
	font: inherit;
	min-height: var(--pa-touch);
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--field-bg);
	color: var(--field-ink);
	box-sizing: border-box;
	width: 100%;
}

.pa-app .pa-input::placeholder {
	color: var(--field-placeholder);
}

.pa-app .pa-input:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
	background: var(--field-focus-bg);
}

.pa-app .pa-input:disabled {
	color: var(--ink-faint);
}

.pa-app select.pa-input {
	/* The field is a flex column, which stretches its children; a list
	   of four short choices does not need the full width. */
	align-self: flex-start;
	width: auto;
	min-width: 14rem;
}

/* The growing box: one line to start, as tall as its text after that,
   and past twelve lines it scrolls inside itself instead of pushing the
   page away. /pcsact/js/views/grow.js does the growing. */
.pa-grow {
	resize: none;
	overflow-y: auto;
	max-height: 12lh;
	line-height: 1.4;
}

.pa-help {
	margin: 0;
	color: var(--ink-muted);
	font-size: calc(0.85rem * var(--font-scale, 1));
	max-width: 62ch;
}

.pa-error {
	margin: 0;
	color: var(--danger);
	font-size: calc(0.9rem * var(--font-scale, 1));
	font-weight: 600;
}

.pa-app .pa-field-bad .pa-input {
	border-color: var(--danger);
}

/* Someone else changed this field. Said beside the field, never in a
   window. */
.pa-conflict {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--warn);
	border-left-width: 4px;
	border-radius: 0.3rem;
	background: var(--warn-soft);
}

.pa-conflict-text {
	margin: 0 0 0.6rem;
}

.pa-conflict-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pa-app .pa-field-conflict .pa-input {
	border-color: var(--warn);
}


/* ---- a list of labelled entries (phones, emails) -------------------- */

.pa-list-rows {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pa-list-row {
	display: grid;
	grid-template-columns: minmax(6rem, 9rem) 1fr var(--pa-touch);
	gap: 0.4rem;
}

.pa-list-remove {
	font: inherit;
	font-size: 1.3rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--button-bg);
	color: var(--ink-muted);
	cursor: pointer;
}

.pa-list-remove:hover {
	color: var(--danger);
}

.pa-list .pa-link {
	align-self: flex-start;
}

.pa-list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}


/* ---- HST ------------------------------------------------------- */

.pa-hst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.pa-app .pa-hst .pa-input {
	width: 16rem;
	max-width: 100%;
}

.pa-check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--pa-touch);
	cursor: pointer;
}

.pa-check input {
	width: 1.2rem;
	height: 1.2rem;
}


/* ---- narrow screens -------------------------------------------- */

@media (max-width: 600px) {
	.pa-list-row {
		grid-template-columns: 1fr var(--pa-touch);
	}

	.pa-list-label {
		grid-column: 1 / -1;
	}
}


/* ============================================================
   STAGE 2 - customers, items, bundles
   ============================================================ */

/* Lists want the width; single records read better narrower. */
.pa-screen.pa-wide {
	max-width: 64rem;
}

.pa-list-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	margin-bottom: 0.8rem;
}

.pa-list-head .pa-heading {
	margin: 0;
}

.pa-list-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pa-subhead {
	font-family: var(--pa-display);
	font-size: calc(1.1rem * var(--font-scale, 1));
	margin: 0 0 0.5rem;
	color: var(--ink);
}

.pa-tag {
	display: inline-block;
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--rule-strong);
	border-radius: 999px;
	color: var(--ink-muted);
	font-size: calc(0.7rem * var(--font-scale, 1));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}


/* ---- search ---------------------------------------------------- */

.pa-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 0.8rem;
}

.pa-app .pa-search {
	flex: 1 1 18rem;
	width: auto;
}

.pa-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pa-result {
	font: inherit;
	width: 100%;
	min-height: var(--pa-touch);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 0.4rem;
	background: var(--surface);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.pa-result:hover {
	border-color: var(--accent);
}

.pa-result:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.pa-result-name {
	font-weight: 700;
}

.pa-result-detail,
.pa-result-match {
	color: var(--ink-muted);
	font-size: calc(0.9rem * var(--font-scale, 1));
}

/* Found by a phone or address they no longer use - worth noticing. */
.pa-result-old {
	color: var(--warn);
	font-weight: 600;
}

.pa-results-inline {
	margin-top: 0.4rem;
}


/* ---- contact lists (phones, emails, addresses) --------------------- */

.pa-contacts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.pa-contact-rows {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pa-contact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pa-contact-line {
	display: grid;
	grid-template-columns: minmax(6rem, 8rem) 1fr var(--pa-touch);
	gap: 0.4rem;
	align-items: start;
}

.pa-contact-parts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.pa-contact-parts .pa-input {
	flex: 1 1 12rem;
}

.pa-app .pa-contact-parts .pa-short {
	flex: 0 1 7rem;
}

.pa-contact-addresses .pa-contact-parts textarea {
	flex-basis: 100%;
}

.pa-billing {
	font-size: calc(0.9rem * var(--font-scale, 1));
	color: var(--ink-muted);
}

.pa-contact-conflict .pa-input {
	border-color: var(--warn);
}

.pa-contacts .pa-link {
	align-self: flex-start;
}

/* list-item, not flex: a flex summary loses its open/closed marker, and
   the marker is the only thing saying there is more underneath. */
.pa-earlier summary {
	display: list-item;
	cursor: pointer;
	color: var(--ink-muted);
	padding: 0.7rem 0;
}

.pa-earlier-list {
	margin: 0 0 0.5rem;
	padding-left: 1.2rem;
	color: var(--ink-muted);
	font-size: calc(0.9rem * var(--font-scale, 1));
}


/* ---- items ------------------------------------------------------- */

.pa-table-scroll {
	overflow-x: auto;
}

.pa-table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: calc(0.95rem * var(--font-scale, 1));
}

.pa-table th,
.pa-table td {
	padding: 0.65rem 0.7rem;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.pa-table th {
	color: var(--ink-faint);
	font-size: calc(0.75rem * var(--font-scale, 1));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--rule-strong);
}

.pa-table tbody tr[data-item] {
	cursor: pointer;
}

.pa-table tbody tr[data-item]:hover {
	background: var(--selected-bg);
}

.pa-table tbody tr:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

.pa-table .pa-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pa-code-cell {
	font-weight: 700;
	white-space: nowrap;
}

.pa-app .pa-code {
	text-transform: uppercase;
}

.pa-app .pa-money {
	width: 12rem;
	max-width: 100%;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pa-app .pa-field .pa-money {
	align-self: flex-start;
}


/* ---- a bundle's parts --------------------------------------------- */

.pa-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.pa-parts .pa-subhead,
.pa-parts .pa-help {
	margin: 0;
}

.pa-part-rows {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pa-part {
	display: grid;
	grid-template-columns: 6rem 1fr var(--pa-touch);
	gap: 0.5rem;
	align-items: center;
}

.pa-app .pa-qty {
	text-align: right;
	font-variant-numeric: tabular-nums;
}


@media (max-width: 600px) {
	.pa-contact-line {
		grid-template-columns: 1fr var(--pa-touch);
	}

	.pa-contact-label {
		grid-column: 1 / -1;
	}

	.pa-contact-parts {
		grid-column: 1;
	}
}


/* ============================================================
   STAGE 3 - the intake log, jobs, the two printouts, staff
   ============================================================ */

.pa-faint {
	color: var(--ink-muted);
}

/* ---- segmented choices (Open / Jobs / Done / All, Call / Note ...) ---- */

.pa-segments {
	/* A column of panels stretches its children; these buttons are only
	   as wide as their words. */
	align-self: flex-start;
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--field-border);
	border-radius: 0.35rem;
	overflow: hidden;
}

.pa-segment {
	font: inherit;
	min-height: var(--pa-touch);
	padding: 0 1rem;
	border: none;
	border-right: 1px solid var(--field-border);
	background: var(--button-bg);
	color: var(--button-ink);
	cursor: pointer;
}

.pa-segment:last-child {
	border-right: none;
}

.pa-segment.pa-segment-on {
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
}

.pa-segment:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

/* ---- pills: status and priority ------------------------------------- */

.pa-pill {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: calc(0.75rem * var(--font-scale, 1));
	font-weight: 700;
	white-space: nowrap;
}

.pa-status-logged { color: var(--info); }
.pa-status-job { color: var(--accent); }
.pa-status-done { color: var(--ink-faint); }
.pa-priority-critical { color: var(--danger); background: var(--danger-soft); }
.pa-priority-urgent { color: var(--warn); background: var(--warn-soft); }
.pa-priority-normal,
.pa-priority-passive { color: var(--ink-muted); }

.pa-pills {
	display: inline-flex;
	gap: 0.4rem;
	flex: 1 1 auto;
}

/* ---- the log ------------------------------------------------------ */

.pa-log-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.7rem;
}

.pa-log-number {
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.pa-log-request {
	color: var(--ink);
}

.pa-more {
	margin-top: 0.8rem;
}

/* ---- one intake ------------------------------------------------------- */

.pa-intake-meta,
.pa-tech-line {
	margin: 0 0 0.4rem;
	color: var(--ink-muted);
}

.pa-tech-line strong {
	color: var(--ink);
}

.pa-intake-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 0.4rem;
}

.pa-panel {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.pa-panel .pa-subhead {
	margin: 0;
}

.pa-customer-name {
	align-self: flex-start;
	font-weight: 700;
	font-size: calc(1.1rem * var(--font-scale, 1));
	padding: 0;
	text-align: left;
}

.pa-customer-lines {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pa-customer-lines a,
.pa-map-link {
	color: var(--accent);
}

.pa-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1rem;
	align-items: flex-end;
}

.pa-field-row > .pa-field {
	flex: 1 1 12rem;
}

.pa-app .pa-when {
	width: auto;
	min-width: 14rem;
}

.pa-app .pa-minutes {
	width: 7rem;
}

.pa-actions.pa-actions-tight {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* The log itself: a line down the left, one entry per notch. */
.pa-entries {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--rule-strong);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.pa-entry {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.pa-entry-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.7rem;
	align-items: baseline;
	font-size: calc(0.85rem * var(--font-scale, 1));
}

.pa-entry-kind {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.pa-entry-call .pa-entry-kind,
.pa-entry-intake .pa-entry-kind { color: var(--accent); }
.pa-entry-visit .pa-entry-kind { color: var(--ok); }
.pa-entry-task .pa-entry-kind { color: var(--warn); }

.pa-entry-when {
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.pa-entry-body {
	white-space: pre-wrap;
}

.pa-entry-done .pa-task {
	color: var(--ink-muted);
	text-decoration: line-through;
}

/* A visit still to come stands out: that is where somebody is going. */
.pa-entry-booked {
	padding: 0.4rem 0.6rem;
	border-radius: 0.35rem;
	background: var(--ok-soft);
}

/* Who is going: a tick per person, and which of them leads. */
.pa-tech-pick {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.pa-tech-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	align-items: center;
}

/* ---- new intake ----------------------------------------------------- */

.pa-app .pa-smart {
	font-size: calc(1.1rem * var(--font-scale, 1));
	min-height: 3.2rem;
	border-width: 2px;
	border-color: var(--accent);
}

.pa-smart-field {
	margin-bottom: 0.4rem;
}

.pa-matches {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--info);
	border-left-width: 4px;
	border-radius: 0.35rem;
	background: var(--info-soft);
}

.pa-match-question {
	margin: 0;
	font-weight: 700;
}

.pa-match {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
}

.pa-match-words {
	display: flex;
	flex-direction: column;
}

.pa-chosen {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pa-chosen p {
	margin: 0;
}

.pa-chosen-name {
	font-weight: 700;
	font-size: calc(1.1rem * var(--font-scale, 1));
}

.pa-chosen .pa-link {
	align-self: flex-start;
}

/* ---- staff ---------------------------------------------------------- */

/* Adding a name. Each person below it is a card (Stage 6, at the end). */
.pa-staff-add {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr) minmax(9rem, 12rem) auto;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--rule);
}

@media (max-width: 700px) {
	.pa-staff-add {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- the printouts ---------------------------------------------------- */

.pa-paper-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 1rem;
}

/* The sheet is paper on screen too, in FIXED colours: black ink on white,
   neutral greys that come out the same on a black-and-white printer. A
   deliberate exception to "tokens only", scoped to .pa-paper so none of
   it reaches the rest of the page - the same call the Calendar's printed
   sheets make. */
.pa-paper {
	--pa-paper-ink: #111;
	--pa-paper-soft: #444;
	--pa-paper-faint: #767676;
	--pa-paper-rule: #bdbdbd;

	background: #fff;
	color: var(--pa-paper-ink);
	padding: 1.5rem 1.8rem;
	border-radius: 0.3rem;
	box-shadow: var(--shadow);
	font-size: 11pt;
	line-height: 1.4;
}

.pa-paper-head {
	border-bottom: 2px solid var(--pa-paper-ink);
	padding-bottom: 0.5rem;
	margin-bottom: 0.9rem;
}

.pa-paper-company {
	font-family: var(--pa-display);
	font-size: 9pt;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-paper-soft);
}

.pa-paper-title {
	font-family: var(--pa-display);
	font-size: 17pt;
	margin: 0.1rem 0 0;
	color: var(--pa-paper-ink);
}

.pa-paper-sub {
	color: var(--pa-paper-soft);
}

.pa-paper .pa-faint,
.pa-paper .pa-quiet {
	color: var(--pa-paper-faint);
}

.pa-paper .pa-map-link {
	color: var(--pa-paper-ink);
}

.pa-stops,
.pa-month-list {
	margin: 0;
	padding-left: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.pa-stop,
.pa-month-item {
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--pa-paper-rule);
	break-inside: avoid;
}

.pa-stop-top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.8rem;
	align-items: baseline;
}

.pa-stop-time {
	font-weight: 700;
	font-size: 12pt;
}

.pa-stop-number {
	color: var(--pa-paper-soft);
}

.pa-stop-priority {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pa-stop-where,
.pa-stop-what,
.pa-stop-note {
	margin-top: 0.15rem;
	white-space: pre-wrap;
}

.pa-stop-note {
	color: var(--pa-paper-soft);
	font-style: italic;
}

/* Lined space to write in, on the driver's copy. */
.pa-write-here {
	height: 3.2rem;
	margin-top: 0.4rem;
	background: repeating-linear-gradient(to bottom, transparent 0,
		transparent calc(1.6rem - 1px), var(--pa-paper-rule) calc(1.6rem - 1px),
		var(--pa-paper-rule) 1.6rem);
}

.pa-month-entries {
	margin: 0.3rem 0 0;
	padding-left: 1.1rem;
	font-size: 10pt;
}

@media print {
	/* Only when a printout is the screen showing: then the site's header,
	   nav and footer, the notice, the company bar and the controls all
	   stay off the paper, and the sheet fills it. */
	body:has(#pa-daysheet:not([hidden]), #pa-month:not([hidden])) .Master > :not(.pa-app),
	body:has(#pa-daysheet:not([hidden]), #pa-month:not([hidden])) .pa-construction,
	body:has(#pa-daysheet:not([hidden]), #pa-month:not([hidden])) .pa-bar,
	.pa-paper-controls,
	.pa-screen-only {
		display: none !important;
	}

	body:has(#pa-daysheet:not([hidden]), #pa-month:not([hidden])) {
		background: #fff !important;
	}

	.pa-screen.pa-wide {
		max-width: none;
		padding: 0;
	}

	.pa-paper {
		box-shadow: none;
		padding: 0;
	}

	.pa-paper * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}


/* ============================================================
   STAGE 4 - invoices
   ============================================================ */

/* The invoice editor wants the whole width of a tablet held sideways. */
.pa-screen.pa-xwide {
	max-width: 80rem;
}

.pa-btn-danger {
	color: var(--danger);
	border-color: var(--danger);
}

/* ---- the invoice panel on an intake ---------------------------------- */

.pa-invoice-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.pa-invoice-line .pa-btn {
	margin-left: auto;
}

.pa-intake-invoice .pa-btn {
	align-self: flex-start;
}

.pa-invoice-total {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---- the editor's own fields --------------------------------------------- */

/* Bill to on the left, the dates and terms beside it, as on paper. */
.pa-invoice-fields {
	display: grid;
	grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(9rem, 1fr));
	gap: 0.8rem 1rem;
	align-items: start;
}

.pa-invoice-fields > .pa-field {
	min-width: 0;
}

.pa-app .pa-invoice-fields select.pa-input,
.pa-app .pa-date {
	width: 100%;
	min-width: 0;
}

@media (max-width: 900px) {
	.pa-invoice-fields {
		grid-template-columns: 1fr 1fr;
	}

	.pa-invoice-fields > .pa-field:first-child {
		grid-column: 1 / -1;
	}
}

/* ---- the lines --------------------------------------------------------- */

.pa-lines-wrap {
	margin-top: 1rem;
}

.pa-lines {
	width: 100%;
	min-width: 56rem;
	/* Fixed: every column but the description has its width, and the
	   description takes whatever is left - the widest column, as in 2018. */
	table-layout: fixed;
	border-collapse: collapse;
	font-size: calc(0.95rem * var(--font-scale, 1));
}

.pa-lines th {
	padding: 0.4rem 0.35rem;
	text-align: left;
	color: var(--ink-faint);
	font-size: calc(0.72rem * var(--font-scale, 1));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--rule-strong);
	white-space: nowrap;
}

.pa-lines th.pa-num {
	text-align: right;
}

/* Everything in a row lines up at the top, so a description that grows
   pushes only its own row down and the rest stay level - the 2018 rule. */
.pa-lines td {
	padding: 0.3rem 0.35rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.pa-col-add,
.pa-col-del {
	width: 2.9rem;
	text-align: center;
}

.pa-col-num {
	width: 2rem;
	text-align: center;
	padding-top: 0.9rem !important;
}

.pa-col-date { width: 9.5rem; }
.pa-col-item { width: 12rem; position: relative; }
.pa-col-qty { width: 5.5rem; }
.pa-col-rate { width: 7.5rem; }
.pa-col-amount { width: 7.5rem; }
.pa-col-tax { width: 5rem; }

.pa-app .pa-lines .pa-input {
	min-height: 2.6rem;
	padding: 0.4rem 0.5rem;
}

.pa-app .pa-lines .pa-num,
.pa-app .pa-lines .pa-input.pa-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pa-line-amount {
	padding-top: 0.9rem !important;
	font-weight: 600;
}

.pa-app .pa-line-rate[readonly] {
	background: transparent;
	border-style: dashed;
}

.pa-line-plus {
	font: inherit;
	font-weight: 700;
	font-size: 1.2rem;
	width: var(--pa-touch);
	min-height: 2.6rem;
	border: 1px solid var(--field-border);
	border-radius: 0.3rem;
	background: var(--button-bg);
	color: var(--ink);
	cursor: pointer;
}

.pa-line-plus:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.pa-line-parts {
	margin-top: 0.3rem;
	padding-left: 0.6rem;
	border-left: 2px solid var(--rule-strong);
	color: var(--ink-muted);
	font-size: calc(0.85rem * var(--font-scale, 1));
	white-space: pre-wrap;
}

/* The matches under the product box: part of the row, not a window. */
.pa-line-matches {
	position: absolute;
	z-index: 5;
	left: 0.35rem;
	right: -12rem;
	top: calc(100% - 0.2rem);
	margin: 0;
	padding: 0.2rem;
	list-style: none;
	border: 1px solid var(--rule-strong);
	border-radius: 0.35rem;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.pa-line-match {
	font: inherit;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.3rem 0.6rem;
	border: none;
	border-radius: 0.25rem;
	background: none;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.pa-line-match:hover,
.pa-line-match:focus-visible {
	background: var(--selected-bg);
	outline: none;
}

.pa-line-nomatch {
	padding: 0.4rem 0.6rem;
}

.pa-line-bad td {
	background: var(--danger-soft);
}

.pa-line-subtotal td {
	background: var(--surface-alt);
	font-weight: 700;
}

.pa-subtotal-label {
	text-align: right;
	padding-top: 0.9rem !important;
}

.pa-line-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin-top: 0.6rem;
	color: var(--ink-muted);
}

.pa-lines-readonly .pa-line-controls,
.pa-lines-readonly .pa-col-add > *,
.pa-lines-readonly .pa-col-del > * {
	visibility: hidden;
}

/* ---- totals and the words beside them ------------------------------------- */

.pa-invoice-bottom {
	display: grid;
	grid-template-columns: 1fr minmax(16rem, 22rem);
	gap: 1rem 2rem;
	margin-top: 1.2rem;
	align-items: start;
}

@media (max-width: 800px) {
	.pa-invoice-bottom {
		grid-template-columns: 1fr;
	}
}

.pa-totals {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
}

.pa-total-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-variant-numeric: tabular-nums;
}

.pa-total-grand {
	margin-top: 0.3rem;
	padding-top: 0.4rem;
	border-top: 2px solid var(--rule-strong);
	font-weight: 700;
	font-size: calc(1.15rem * var(--font-scale, 1));
}

.pa-prints {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pa-prints li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 1rem;
}

/* ---- the invoice on paper ---------------------------------------------------- */

.pa-invoice-sheet {
	position: relative;
	max-width: 52rem;
	margin: 0 auto;
}

.pa-void-mark {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	font-family: var(--pa-display);
	font-size: 7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(160, 0, 0, 0.18);
	pointer-events: none;
}

.pa-sheet-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: 0.8rem;
	border-bottom: 2px solid var(--pa-paper-ink);
}

.pa-sheet-company {
	font-family: var(--pa-display);
	font-size: 15pt;
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.pa-sheet-hst {
	margin-top: 0.3rem;
	font-weight: 700;
}

.pa-sheet-facts {
	text-align: right;
}

.pa-sheet-title {
	font-family: var(--pa-display);
	font-size: 20pt;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.pa-sheet-dl {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.1rem 0.8rem;
	justify-content: end;
	margin: 0.3rem 0 0;
}

.pa-sheet-dl dt {
	color: var(--pa-paper-soft);
}

.pa-sheet-dl dd {
	margin: 0;
	font-weight: 700;
	text-align: left;
}

.pa-sheet-billto {
	margin: 0.9rem 0;
}

.pa-sheet-label {
	font-size: 8.5pt;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-paper-soft);
	margin-bottom: 0.2rem;
}

.pa-sheet-lines {
	width: 100%;
	border-collapse: collapse;
	font-size: 10pt;
}

.pa-sheet-lines th {
	text-align: left;
	font-size: 8.5pt;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pa-paper-soft);
	border-bottom: 1px solid var(--pa-paper-ink);
	padding: 0.3rem 0.4rem;
}

.pa-sheet-lines td {
	padding: 0.4rem;
	border-bottom: 1px solid var(--pa-paper-rule);
	vertical-align: top;
}

.pa-sheet-lines .pa-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pa-sheet-lines tr {
	break-inside: avoid;
}

.pa-sheet-date {
	white-space: nowrap;
}

.pa-sheet-code {
	font-weight: 700;
}

.pa-sheet-desc,
.pa-sheet-parts {
	white-space: pre-wrap;
}

.pa-sheet-parts {
	color: var(--pa-paper-soft);
	font-size: 9pt;
	padding-left: 0.6rem;
}

.pa-sheet-subtotal td {
	font-weight: 700;
	text-align: right;
}

.pa-sheet-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1rem;
	break-inside: avoid;
}

.pa-sheet-words {
	flex: 1 1 18rem;
}

.pa-sheet-message,
.pa-sheet-pay {
	white-space: pre-wrap;
	margin-bottom: 0.6rem;
}

.pa-sheet-money {
	flex: 0 1 18rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.pa-sheet-money .pa-total-grand {
	border-top-color: var(--pa-paper-ink);
}

.pa-sheet-foot {
	margin-top: 1.2rem;
	font-size: 8.5pt;
	color: var(--pa-paper-faint);
	text-align: right;
}

@media print {
	body:has(#pa-invoice-print:not([hidden])) .Master > :not(.pa-app),
	body:has(#pa-invoice-print:not([hidden])) .pa-construction,
	body:has(#pa-invoice-print:not([hidden])) .pa-bar {
		display: none !important;
	}

	body:has(#pa-invoice-print:not([hidden])) {
		background: #fff !important;
	}

	.pa-invoice-sheet {
		max-width: none;
	}
}


/* ============================================================
   STAGE 5 - payments, PAID, what is owed, the viewer
   ============================================================ */

/* ---- PAID, owing, overpaid ------------------------------------------- */

/* PAID is green: the theme's own "ok", so it is green in every theme. */
.pa-pill.pa-paid {
	color: var(--ok);
	background: var(--ok-soft);
	letter-spacing: 0.1em;
}

.pa-pill.pa-owing-pill {
	color: var(--warn);
	background: var(--warn-soft);
}

.pa-pill.pa-pill-big {
	font-size: calc(0.95rem * var(--font-scale, 1));
	padding: 0.2rem 0.8rem;
}

.pa-owed {
	margin: 0 0 0.6rem;
	color: var(--ink-muted);
	font-weight: 600;
}

/* ---- under the totals: paid and balance ---------------------------- */

.pa-money-col {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pa-owing[hidden] {
	display: none !important;
}

.pa-total-row.pa-paid-row,
.pa-total-row.pa-paid-row .pa-num {
	color: var(--ok);
}

.pa-total-row.pa-overpaid {
	color: var(--warn);
}

/* ---- the payments on an invoice -------------------------------------- */

.pa-payment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pa-payment-list li {
	display: grid;
	grid-template-columns: 6rem minmax(8rem, 1fr) minmax(6rem, auto) 7rem auto;
	gap: 0.3rem 1rem;
	align-items: center;
	font-variant-numeric: tabular-nums;
}

.pa-payment-list li.pa-help {
	display: block;
}

.pa-payment-list .pa-num {
	text-align: right;
	font-weight: 600;
}

/* Taken off: still listed, so the trail is plain, but plainly not money. */
.pa-payment-removed > span:not(.pa-faint:last-child) {
	text-decoration: line-through;
	color: var(--ink-faint);
}

.pa-pay-form {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.8rem;
	border: 1px dashed var(--rule-strong);
	border-radius: 0.4rem;
}

.pa-pay-form[hidden] {
	display: none !important;
}

@media (max-width: 700px) {
	.pa-payment-list li {
		grid-template-columns: 1fr auto;
	}
}

/* ---- a customer's invoices ------------------------------------------- */

.pa-customer-money {
	margin: 0.4rem 0 1rem;
}

.pa-customer-money[hidden] {
	display: none !important;
}

.pa-customer-owes {
	margin: 0;
	font-weight: 700;
	font-size: calc(1.1rem * var(--font-scale, 1));
}

/* ---- the viewer ------------------------------------------------------ */

.pa-flip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	margin: 1rem 0 0.6rem;
}

.pa-flip-arrow {
	font: inherit;
	font-size: 1.6rem;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: 1px solid var(--field-border);
	background: var(--button-bg);
	color: var(--ink);
	cursor: pointer;
}

.pa-flip-arrow:hover {
	background: var(--button-hover-bg);
}

.pa-flip-card {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	min-height: 14rem;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--rule);
	border-radius: 0.7rem;
	background: var(--surface);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	box-shadow: var(--shadow);
}

.pa-flip-card:hover {
	border-color: var(--accent);
}

.pa-flip-arrow:focus-visible,
.pa-flip-card:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

.pa-flip-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	width: 100%;
}

.pa-flip-number {
	font-family: var(--pa-display);
	font-size: calc(1.6rem * var(--font-scale, 1));
	font-weight: 700;
	color: var(--accent);
}

.pa-flip-who {
	font-size: calc(1.2rem * var(--font-scale, 1));
	font-weight: 700;
}

.pa-flip-what {
	color: var(--ink);
}

.pa-flip-total {
	margin-top: auto;
	align-self: flex-end;
	font-size: calc(1.8rem * var(--font-scale, 1));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pa-flip-where {
	margin: 0;
	text-align: center;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.pa-flip-keys {
	margin: 0.4rem 0 0;
	text-align: center;
	color: var(--ink-faint);
	font-size: calc(0.85rem * var(--font-scale, 1));
}

.pa-app kbd {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.85em;
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--rule-strong);
	border-bottom-width: 2px;
	border-radius: 0.25rem;
	background: var(--surface);
	color: var(--ink);
}

@media (max-width: 600px) {
	.pa-flip {
		grid-template-columns: 1fr 1fr;
	}

	.pa-flip-card {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

/* ---- PAID on paper ----------------------------------------------------- */

.pa-paid-mark {
	position: absolute;
	top: 1.2rem;
	left: 50%;
	transform: translateX(-50%) rotate(-8deg);
	padding: 0.1rem 1.2rem;
	border: 4px solid #1f7a3f;
	border-radius: 0.5rem;
	color: #1f7a3f;
	font-family: var(--pa-display);
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	opacity: 0.8;
	pointer-events: none;
}

.pa-invoice-sheet .pa-paid-row,
.pa-invoice-sheet .pa-paid-row .pa-num {
	color: #1f7a3f;
}


/* ============================================================
   STAGE 6 - your people
   ============================================================ */

/* ---- one person on the staff screen ---------------------------------- */

.pa-people {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pa-person {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.8rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
}

/* Somebody who has left: still there, plainly not current. */
.pa-person-gone {
	border-style: dashed;
}

.pa-person-gone .pa-person-line .pa-input {
	color: var(--ink-muted);
}

/* Name, phone, email, role, Active, Save: one line on a tablet held
   sideways, wrapping onto two on anything narrower. */
.pa-person-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.pa-person-line .pa-input {
	flex: 1 1 9rem;
	min-width: 0;
}

.pa-person-line input[type="email"] {
	flex: 2 1 15rem;
}

/* Two short choices: as wide as the longer one, not the 14rem every
   other list gets. */
.pa-person-line select.pa-input {
	flex: 0 0 auto;
	align-self: center;
	min-width: 0;
}

/* The ticks, and whether they sign in: rows that wrap. */
.pa-person-ticks,
.pa-person-login,
.pa-person-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
}

.pa-person-notice:empty {
	display: none;
}

/* A quiet sentence among buttons: no paragraph margin pushing it up. */
.pa-person-ticks .pa-quiet,
.pa-person-login .pa-quiet {
	margin: 0;
}

.pa-person-notice p {
	margin: 0;
	flex-basis: 100%;
}

.pa-person-warn {
	color: var(--danger);
	font-weight: 700;
}

.pa-invite-link {
	flex: 1 1 18rem;
	min-width: 0;
}

/* ---- an invite, opened from its link ---------------------------------- */

.pa-invite-card {
	max-width: 34rem;
	margin: 1.5rem auto;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	background: var(--surface);
}

.pa-invite-kicker {
	margin: 0;
	color: var(--ink-muted);
}

.pa-invite-company {
	margin: 0.2rem 0 0.8rem;
	font-family: var(--pa-display);
	font-size: calc(1.6rem * var(--font-scale, 1));
}

.pa-invite-what {
	font-size: calc(1.1rem * var(--font-scale, 1));
}

.pa-invite-note {
	font-weight: 700;
}

.pa-invite-wrong {
	color: var(--danger);
}

.pa-invite-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.2rem;
}

/* ---- the picker: a company that is not paid for right now ------------ */

.pa-card:disabled {
	cursor: default;
	border-style: dashed;
}

.pa-card:disabled:hover {
	border-color: var(--rule);
}

.pa-card-closed {
	color: var(--danger);
	font-size: calc(0.9rem * var(--font-scale, 1));
}