/*
 * HCC theme: the engine's screens (hcc-core), styled through their existing classes.
 * The engine's own register.css and screens.css still load first; these rules follow them.
 * Nothing here changes what a screen says. The record page follows the plan's example
 * record: a record sheet, scope boxes, a facts table with Seen, Observed and Stated chips,
 * and the live seal.
 */

/* ------------------------------------------------------------------ token bridge */

/*
 * The engine's stylesheets reuse two of the theme's token names inside their own scopes
 * (--hcc-ink and --hcc-muted in .hcc-screen, --hcc-rule in .hcc-register and .hcc-record),
 * with WordPress admin grays. "inherit" hands each one back the theme's value for the
 * current color scheme; the engine-only names map onto the theme's tokens.
 */
.hcc-main .hcc-screen,
.hcc-main .hcc-screen:not(.hcc-admin *) {
	--hcc-ink: inherit;
	--hcc-muted: inherit;
	--hcc-line: var(--hcc-rule-strong);
	--hcc-ok: var(--hcc-green);
	--hcc-ok-bg: var(--hcc-green-soft);
	--hcc-error: var(--hcc-critical);
	--hcc-error-bg: var(--hcc-critical-soft);
	--hcc-info-bg: var(--hcc-chip);
	color: var(--hcc-ink);
}

.hcc-main .hcc-register,
.hcc-main .hcc-record {
	--hcc-rule: inherit;
	--hcc-soft: var(--hcc-muted);
}

/* ------------------------------------------------------------------ Register pages: the document */

.hcc-register-page .hcc-main > .hcc-engine-page {
	max-width: none;
	padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem) var(--hcc-gutter) var(--hcc-space-section);
}

.hcc-register-page .hcc-main > .hcc-register-extra {
	max-width: none;
}

.hcc-register-extra > * {
	margin-block: 0;
}

.hcc-register,
.hcc-record {
	max-width: var(--hcc-wide);
	margin-inline: auto;
	line-height: 1.6;
}

.hcc-record {
	max-width: 960px;
}

/* ------------------------------------------------------------------ the Register index */

.hcc-register__head {
	max-width: 46rem;
	margin-bottom: 2rem;
}

.hcc-register__head h1,
.hcc-register--missing h1 {
	font-size: var(--hcc-step-5);
	line-height: 1.04;
	margin-bottom: 0.4em;
}

.hcc-register__head > p:first-of-type {
	font-size: var(--hcc-step-1);
	line-height: 1.55;
}

.hcc-register__note {
	display: inline-flex;
	gap: 0.6rem;
	align-items: baseline;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--hcc-seal-gold);
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-register__missing {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--hcc-rule);
	border-left: 3px solid var(--hcc-critical);
	border-radius: var(--hcc-radius);
	background: var(--hcc-critical-soft);
}

.hcc-register__missing p:last-child {
	margin-bottom: 0;
}

.hcc-register__search {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1rem 1.25rem;
	align-items: end;
	margin: 0 0 1.75rem;
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-top: 3px solid var(--hcc-seal-gold);
	border-radius: var(--hcc-radius);
	box-shadow: var(--hcc-shadow);
}

.hcc-register__search .hcc-field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	min-width: 0;
}

.hcc-register__search .hcc-field--q {
	grid-column: 1 / -1;
}

.hcc-register__search .hcc-field label {
	font-weight: 600;
	font-size: 0.9rem;
}

.hcc-register__search .hcc-field input,
.hcc-register__search .hcc-field select {
	width: 100%;
	min-height: 2.875rem;
}

.hcc-register__search .hcc-field--q input {
	font-size: 1.15rem;
	min-height: 3.25rem;
	font-family: var(--hcc-body);
}

.hcc-register__search .hcc-field--go button {
	width: 100%;
	min-height: 2.875rem;
	padding: 0.7rem 1.25rem;
	border: 0;
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hcc-register__search .hcc-field--go button:hover {
	background: var(--hcc-btn-bg-hover);
}

.hcc-register__count {
	font-family: var(--hcc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcc-muted);
	margin: 0 0 0.75rem;
}

.hcc-register__empty {
	padding: 2rem 1.25rem;
	text-align: center;
	color: var(--hcc-muted);
	border: 1px dashed var(--hcc-rule-strong);
	border-radius: var(--hcc-radius);
}

.hcc-register__results {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.hcc-listing {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name no"
		"where where"
		"status status";
	gap: 0.15rem 1rem;
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.hcc-listing + .hcc-listing {
	margin-top: 0;
}

@media (min-width: 760px) {
	.hcc-listing {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"name status no"
			"where status no";
		align-items: center;
		column-gap: 1.5rem;
	}
}

.hcc-listing:hover {
	border-color: var(--hcc-seal-gold);
	box-shadow: var(--hcc-shadow);
}

.hcc-listing__name {
	grid-area: name;
	font-family: var(--hcc-display);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--hcc-ink);
	text-decoration: none;
}

.hcc-listing__name::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hcc-listing__name:hover {
	color: var(--hcc-gold-strong);
}

.hcc-listing:focus-within {
	outline: 2px solid var(--hcc-focus);
	outline-offset: 2px;
}

.hcc-listing__name:focus-visible {
	outline: none;
}

.hcc-listing__where {
	grid-area: where;
	color: var(--hcc-muted);
	font-size: 0.95rem;
}

.hcc-listing__status {
	grid-area: status;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hcc-muted);
}

.hcc-listing__status::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	border: 1.5px solid var(--hcc-off);
	flex: none;
}

.hcc-listing--verified .hcc-listing__status {
	color: var(--hcc-green);
}

.hcc-listing--verified .hcc-listing__status::before {
	background: var(--hcc-green);
	border-color: var(--hcc-green);
}

.hcc-listing__no {
	grid-area: no;
	justify-self: end;
	font-family: var(--hcc-mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--hcc-muted);
	white-space: nowrap;
}

.hcc-register__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	margin: 1rem 0 2rem;
	font-family: var(--hcc-mono);
	font-size: 0.85rem;
}

.hcc-register__pages a {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius-sm);
	text-decoration: none;
	color: var(--hcc-ink);
}

.hcc-register__pages a:hover {
	border-color: var(--hcc-seal-gold);
}

.hcc-register__help {
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: color-mix(in srgb, var(--hcc-chip) 70%, transparent);
}

.hcc-register__help h2 {
	font-size: var(--hcc-step-2);
	margin: 0 0 0.75rem;
}

.hcc-register__help h2 + ul {
	margin-bottom: 1.75rem;
}

.hcc-register__help ul {
	list-style: none;
	padding: 0;
}

.hcc-register__help li {
	position: relative;
	padding-left: 1.35rem;
}

.hcc-register__help li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.62em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	border: 1px solid var(--hcc-seal-gold);
	background: color-mix(in srgb, var(--hcc-seal-gold) 35%, transparent);
}

.hcc-register__help p:last-child {
	margin-bottom: 0;
}

/* A record that is not public. */
.hcc-register--missing {
	max-width: 46rem;
	padding-block: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.hcc-register--missing p:first-of-type {
	font-size: var(--hcc-step-1);
}

/* ------------------------------------------------------------------ the record page */

.hcc-record__crumbs {
	margin: 0 0 1.25rem;
	font-family: var(--hcc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hcc-record__crumbs a {
	color: var(--hcc-muted);
	text-decoration: none;
}

.hcc-record__crumbs a::before {
	content: "\2190\00a0";
}

.hcc-record__crumbs a:hover {
	color: var(--hcc-gold-strong);
}

.hcc-record__preview {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.15rem;
	border: 1px solid var(--hcc-rule);
	border-left: 3px solid var(--hcc-seal-gold);
	border-radius: var(--hcc-radius);
	background: var(--hcc-gold-soft);
	color: var(--hcc-ink);
}

/* The record card: everything below the crumbs and preview sits on one sheet. */
.hcc-record {
	--hcc-record-pad: clamp(1.15rem, 0.8rem + 1.6vw, 2rem);
}

.hcc-record__head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 1.5rem;
	align-items: start;
	margin: 0;
	padding: var(--hcc-record-pad);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-bottom: 0;
	border-radius: var(--hcc-radius) var(--hcc-radius) 0 0;
}

.hcc-record__head::before {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	top: -1px;
	height: 3px;
	border-radius: var(--hcc-radius) var(--hcc-radius) 0 0;
	background: var(--hcc-seal-gold);
}

.hcc-record--not_current .hcc-record__head::before {
	background: var(--hcc-off);
}

.hcc-record__id > * {
	margin: 0;
}

.hcc-record__no {
	display: inline-block;
	margin-bottom: 0.75rem !important;
	padding: 0.15rem 0.55rem;
	border-radius: 4px;
	background: var(--hcc-chip);
	font-family: var(--hcc-mono);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--hcc-ink);
}

.hcc-record__name {
	font-size: var(--hcc-step-4);
	line-height: 1.08;
	margin: 0 0 0.4rem !important;
}

.hcc-record__where {
	color: var(--hcc-muted);
	font-size: 0.98rem;
}

.hcc-record__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1rem !important;
	padding: 0.4rem 0.85rem;
	border-radius: var(--hcc-radius);
	background: var(--hcc-chip);
	color: var(--hcc-muted);
	font-size: 0.95rem;
}

.hcc-record__status::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	flex: none;
}

.hcc-record__status strong {
	font-weight: 700;
}

.hcc-record--verified .hcc-record__status {
	background: var(--hcc-green-soft);
	color: var(--hcc-green);
}

.hcc-record--verified .hcc-record__status::before {
	background: currentColor;
}

.hcc-record__seal {
	width: clamp(88px, 18vw, 156px);
	height: auto;
	aspect-ratio: 1;
	filter: drop-shadow(0 8px 18px rgba(22, 20, 15, 0.18));
}

/* The sheet: label and value rows. */
.hcc-record__summary {
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0 var(--hcc-record-pad);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-top: 1px solid var(--hcc-rule);
	border-bottom: 0;
}

.hcc-record__summary dt,
.hcc-record__summary dd {
	margin: 0;
	padding: 0.85rem 0;
	border-top: 1px solid var(--hcc-rule);
}

.hcc-record__summary dt:first-of-type,
.hcc-record__summary dt:first-of-type + dd {
	border-top: 0;
}

.hcc-record__summary dt {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcc-muted);
	padding-top: 1.05rem;
}

.hcc-record__summary dd {
	font-weight: 500;
	overflow-wrap: anywhere;
	padding-left: 1rem;
}

/* Dates and the level read as record data. */
.hcc-record__summary dt:nth-of-type(2) + dd,
.hcc-record__summary dt:nth-of-type(3) + dd {
	font-family: var(--hcc-mono);
	font-size: 0.95rem;
}

.hcc-record__ended,
.hcc-record__affiliated {
	margin: 0;
	padding: 1rem var(--hcc-record-pad);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-bottom: 0;
	border-radius: 0;
}

.hcc-record__ended {
	border-left: 3px solid var(--hcc-off);
}

.hcc-record__ended p:first-child {
	font-weight: 700;
}

.hcc-record__ended p:last-child,
.hcc-record__affiliated p:last-child {
	margin-bottom: 0;
}

/* Each section after the sheet continues the card. */
.hcc-record__scope,
.hcc-record__facts,
.hcc-record__history {
	margin: 0;
	padding: var(--hcc-record-pad);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-bottom: 0;
}

.hcc-record__scope h2,
.hcc-record__facts h2,
.hcc-record__history h2 {
	font-size: var(--hcc-step-2);
	margin: 0 0 1rem;
}

/* Scope boxes: covers, does not cover. */
.hcc-record__scope {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem;
}

@media (min-width: 640px) {
	.hcc-record__scope {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hcc-record__scope > p:only-of-type {
		grid-column: 1 / -1;
	}
}

.hcc-record__scope > h2,
.hcc-record__scope > .hcc-record__referred {
	grid-column: 1 / -1;
}

.hcc-record__scope > p {
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	font-size: 0.97rem;
}

.hcc-record__scope > p strong {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcc-muted);
}

.hcc-record__scope > p:first-of-type:not(:last-of-type) {
	border-color: color-mix(in srgb, var(--hcc-green) 35%, var(--hcc-rule));
	background: color-mix(in srgb, var(--hcc-green-soft) 55%, transparent);
}

.hcc-record__scope > p:first-of-type:not(:last-of-type) strong {
	color: var(--hcc-green);
}

.hcc-record__referred {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.hcc-record__referred li {
	margin: 0;
	padding: 0.7rem 1rem;
	border-radius: var(--hcc-radius);
	background: var(--hcc-gold-soft);
	color: var(--hcc-ink);
	font-size: 0.95rem;
}

/* The facts table. */
.hcc-record__facts table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	overflow: hidden;
	font-size: 0.95rem;
}

.hcc-record__facts thead th {
	background: var(--hcc-chip);
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-record__facts tbody th,
.hcc-record__facts tbody td {
	padding: 0.8rem 0.85rem;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-record__facts tbody tr:last-child > * {
	border-bottom: 0;
}

.hcc-record__facts tbody th {
	font-weight: 600;
	width: 28%;
}

.hcc-record__facts tbody td:nth-child(3) {
	white-space: nowrap;
	font-family: var(--hcc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--hcc-muted);
}

.hcc-record__facts .hcc-fact__date {
	white-space: nowrap;
	font-family: var(--hcc-mono);
	font-size: 0.85rem;
	color: var(--hcc-muted);
}

.hcc-fact--non_halal_items th,
.hcc-fact--non_halal_items td:nth-child(2) {
	font-weight: 700;
}

/* Basis chips: hcc.js wraps the basis word in .hcc-chip--seen, --observed or --stated. */
.hcc-record__facts .hcc-chip {
	font-size: 0.75rem;
}

/* History. */
.hcc-record__history ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hcc-record__history li {
	position: relative;
	margin: 0;
	padding: 0.35rem 0 0.35rem 1.35rem;
	font-family: var(--hcc-mono);
	font-size: 0.88rem;
}

.hcc-record__history li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.85rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	border: 1px solid var(--hcc-seal-gold);
}

/* The lines that close every record. */
.hcc-record__lines {
	margin: 0;
	padding: var(--hcc-record-pad);
	background: var(--hcc-chip);
	border: 1px solid var(--hcc-rule);
	border-radius: 0 0 var(--hcc-radius) var(--hcc-radius);
	font-size: 0.9rem;
	color: var(--hcc-muted);
}

/* Links on the engine's tinted boxes take the deeper gold (the link gold is 4.3:1 on chip). */
.hcc-record__lines,
.hcc-record__preview,
.hcc-record__referred,
.hcc-register__missing,
.hcc-notice {
	--hcc-gold: var(--hcc-gold-strong);
}

.hcc-record__lines p {
	margin: 0 0 0.6rem;
	max-width: 50em;
}

.hcc-record__lines p:first-child {
	color: var(--hcc-ink);
}

.hcc-record__founding {
	color: var(--hcc-gold-strong);
}

.hcc-record__short a {
	font-family: var(--hcc-mono);
	font-size: 0.88rem;
}

.hcc-record__concern {
	margin: 1rem 0 0 !important;
}

.hcc-record__concern a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-surface);
	color: var(--hcc-ink);
	font-weight: 600;
	text-decoration: none;
}

.hcc-record__concern a:hover {
	border-color: var(--hcc-seal-gold);
	color: var(--hcc-ink);
}

/* Phones: the sheet stacks; facts become one card per fact. */
@media (max-width: 640px) {
	.hcc-record__head {
		grid-template-columns: minmax(0, 1fr) 84px;
	}

	.hcc-record__seal {
		width: 84px;
	}

	.hcc-record__summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcc-record__summary dt {
		padding: 0.85rem 0 0;
	}

	.hcc-record__summary dd {
		border-top: 0;
		padding: 0.15rem 0 0.85rem;
	}

	.hcc-record__status {
		align-items: flex-start;
	}

	.hcc-record__status::before {
		margin-top: 0.4em;
	}

	.hcc-record__summary dt:first-of-type {
		border-top: 0;
	}

	.hcc-record__facts table {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.hcc-record__facts thead {
		display: none;
	}

	.hcc-record__facts tbody,
	.hcc-record__facts tr {
		display: block;
	}

	.hcc-record__facts tbody tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0.35rem 0.75rem;
		align-items: center;
		margin: 0 0 0.6rem;
		padding: 0.85rem 0.95rem;
		border: 1px solid var(--hcc-rule);
		border-radius: var(--hcc-radius);
	}

	.hcc-record__facts tbody th,
	.hcc-record__facts tbody td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.hcc-record__facts tbody th,
	.hcc-record__facts tbody td:nth-child(2) {
		grid-column: 1 / -1;
	}

	.hcc-record__facts tbody th {
		font-family: var(--hcc-mono);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--hcc-muted);
	}

	.hcc-record__facts .hcc-fact__date {
		justify-self: start;
	}
}

/* ------------------------------------------------------------------ screens (portal, desk, forms) */

.hcc-screen {
	line-height: 1.6;
}

.hcc-screen h2 {
	font-size: var(--hcc-step-3);
	margin: 0 0 0.6rem;
}

.hcc-screen h3 {
	font-size: var(--hcc-step-2);
	margin: 1.75rem 0 0.6rem;
}

.hcc-screen > section > p:first-of-type,
.hcc-screen > [data-hcc-screen] > p:first-of-type {
	max-width: 46em;
}

.hcc-screen form {
	max-width: 46rem;
}

.hcc-screen .hcc-desk form,
.hcc-screen form.hcc-inline {
	max-width: none;
}

.hcc-screen form > p {
	margin: 0 0 1.1rem;
}

.hcc-screen label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.hcc-screen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hcc-screen select,
.hcc-screen textarea {
	display: block;
	width: 100%;
	max-width: 36rem;
}

.hcc-screen .hcc-inline input,
.hcc-screen .hcc-inline select {
	display: inline-block;
	width: auto;
}

.hcc-screen input[type="file"] {
	font-size: 0.95rem;
}

/* The concern form's file note sits on its own line under the picker. */
.hcc-screen input[type="file"] + .hcc-small {
	display: block;
	margin-top: 0.4rem;
}

.hcc-screen .hcc-choice {
	margin: 0 0 0.9rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-surface);
	max-width: 36rem;
}

.hcc-screen .hcc-choice label {
	display: block;
	margin: 0;
	font-weight: 500;
	padding-left: 1.65rem;
	text-indent: -1.65rem;
}

.hcc-screen fieldset {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem 0.5rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
	max-width: 46rem;
}

.hcc-screen legend {
	padding: 0 0.4rem;
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hcc-muted);
}

.hcc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 2.75rem;
	padding: 0.6rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hcc-button:hover {
	background: var(--hcc-btn-bg-hover);
	color: var(--hcc-btn-fg);
	text-decoration: none;
}

.hcc-button--quiet {
	background: transparent;
	color: var(--hcc-ink);
	border-color: var(--hcc-rule-strong);
	opacity: 1;
}

.hcc-button--quiet:hover {
	background: color-mix(in srgb, var(--hcc-seal-gold) 10%, transparent);
	border-color: var(--hcc-seal-gold);
	color: var(--hcc-ink);
}

.hcc-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.hcc-box {
	margin: 1.25rem 0;
	padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
	background: var(--hcc-surface);
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
}

.hcc-box > :first-child {
	margin-top: 0;
}

.hcc-box > :last-child {
	margin-bottom: 0;
}

.hcc-notice {
	margin: 0.9rem 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--hcc-rule);
	border-left: 3px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius);
	background: var(--hcc-chip);
	color: var(--hcc-ink);
}

.hcc-notice > :last-child {
	margin-bottom: 0;
}

.hcc-notice--info {
	border-left-color: var(--hcc-seal-gold);
	background: var(--hcc-gold-soft);
}

.hcc-notice--ok {
	border-left-color: var(--hcc-green);
	background: var(--hcc-green-soft);
}

.hcc-notice--error {
	border-left-color: var(--hcc-critical);
	background: var(--hcc-critical-soft);
}

/* [hcc_thanks form] opened with no form behind it: a quiet note, not a notice. */
.hcc-thanks__direct {
	margin: 0.75rem 0 0;
	padding-left: 0.85rem;
	border-left: 3px solid var(--hcc-rule-strong);
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
}

.hcc-small {
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
}

.hcc-big {
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-4);
	line-height: 1.1;
	margin: 0.5rem 0;
}

.hcc-big strong {
	font-weight: 400;
}

/* Tables in screens. */
.hcc-table,
.hcc-price-list__levels,
.hcc-price-list__services {
	width: 100%;
	margin: 0.75rem 0 1.5rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
	font-size: 0.95rem;
}

.hcc-screen .hcc-table th,
.hcc-screen .hcc-table td,
.hcc-price-list th,
.hcc-price-list td {
	border: 0;
	border-bottom: 1px solid var(--hcc-rule);
	padding: 0.65rem 0.85rem;
	text-align: left;
	vertical-align: top;
}

.hcc-screen .hcc-table thead th,
.hcc-price-list thead th {
	background: var(--hcc-chip);
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hcc-muted);
}

.hcc-screen .hcc-table tbody th[scope="row"] {
	font-weight: 600;
}

.hcc-screen .hcc-table tr:last-child > *,
.hcc-price-list tr:last-child > * {
	border-bottom: 0;
}

.hcc-table-wrap .hcc-table {
	margin: 0;
	border: 0;
	border-radius: 0;
}

.hcc-screen .hcc-table-wrap,
.hcc-tab-body {
	overflow-x: auto;
}

/* A record number never breaks at its hyphen. */
.hcc-nowrap {
	white-space: nowrap;
}

/*
 * A screen table that stacks on phones instead of squeezing four columns into 390px
 * (the portal's Training tab): each row becomes a block, and each cell after the first
 * shows its column name from data-label.
 */
@media (max-width: 599px) {
	.hcc-screen .hcc-table-wrap--stack {
		overflow-x: visible;
	}

	.hcc-screen .hcc-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hcc-screen .hcc-table--stack,
	.hcc-screen .hcc-table--stack tbody,
	.hcc-screen .hcc-table--stack tr,
	.hcc-screen .hcc-table--stack td {
		display: block;
		width: auto;
	}

	.hcc-screen .hcc-table--stack tr {
		padding: 0.75rem 0.85rem;
		border-bottom: 1px solid var(--hcc-rule);
	}

	.hcc-screen .hcc-table--stack tr:last-child {
		border-bottom: 0;
	}

	.hcc-screen .hcc-table--stack td,
	.hcc-screen .hcc-table--stack tr:last-child > td {
		padding: 0.15rem 0;
		border: 0;
	}

	.hcc-screen .hcc-table--stack td:first-child {
		font-weight: 600;
	}

	.hcc-screen .hcc-table--stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-top: 0.5rem;
		font-family: var(--hcc-mono);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--hcc-muted);
	}
}

/* Fact lists inside screens. */
.hcc-facts {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
	gap: 0;
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--hcc-rule);
}

.hcc-facts dt,
.hcc-facts dd {
	margin: 0;
	padding: 0.55rem 1rem 0.55rem 0;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-facts dt {
	font-family: var(--hcc-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hcc-muted);
	padding-top: 0.75rem;
}

@media (max-width: 600px) {
	.hcc-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcc-facts dt {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* Desk tabs. */
.hcc-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-tabs li {
	margin: 0;
}

.hcc-tabs a {
	display: block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--hcc-rule);
	border-radius: 999px;
	background: var(--hcc-surface);
	color: var(--hcc-ink);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.hcc-tabs a:hover {
	border-color: var(--hcc-seal-gold);
}

.hcc-tabs .is-current a,
.hcc-tabs a[aria-current] {
	background: var(--hcc-btn-bg);
	border-color: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
	font-weight: 600;
	border-bottom-width: 1px;
}

.hcc-hints {
	list-style: none;
	padding: 0;
}

.hcc-hints .is-ok {
	color: var(--hcc-green);
}

.hcc-hints .is-missing,
.hcc-screen .is-overdue {
	color: var(--hcc-critical);
}

/* Case threads. */
.hcc-messages {
	list-style: none;
	margin: 0.5rem 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.hcc-messages li {
	margin: 0;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
}

.hcc-case + .hcc-case {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--hcc-rule);
}

.hcc-screen details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--hcc-gold);
	margin: 0.5rem 0;
}

/* Founding board and transparency. */
.hcc-founding-list {
	padding-left: 1.6em;
}

.hcc-founding-list li::marker {
	font-family: var(--hcc-mono);
	color: var(--hcc-gold-strong);
}

.hcc-transparency .hcc-table th[scope="row"] {
	width: 70%;
}

.hcc-transparency .hcc-table td {
	font-family: var(--hcc-mono);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* A median with nothing to measure reads in words ("No concerns closed yet"): body type, whole words. */
.hcc-transparency .hcc-table td.is-words {
	min-width: 8.5rem;
	font-family: var(--hcc-body);
	font-size: var(--hcc-step--1);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* The theme's grouped numbers (hcc/screens/transparency.php): one small table per group. */
.hcc-transparency__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
	align-items: start;
}

.hcc-transparency__group {
	min-width: 0;
}

.hcc-transparency .hcc-transparency__table {
	margin: 0;
}

.hcc-transparency__table caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 0.5rem;
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-1);
	color: var(--hcc-ink);
}

.hcc-screen .hcc-transparency__table tr.is-total th[scope="row"] {
	font-weight: 600;
}

.hcc-screen .hcc-transparency__table tr.is-part th[scope="row"] {
	font-weight: 400;
	padding-left: 1.75rem;
	color: var(--hcc-muted);
}

.hcc-screen .hcc-transparency__table tr.is-part td {
	color: var(--hcc-muted);
}

.hcc-transparency__note {
	margin: 0.5rem 0 0;
	font-size: var(--hcc-step--1);
	color: var(--hcc-muted);
}

/* Price list and perks. */
.hcc-price-list td,
.hcc-price-list__levels td {
	font-variant-numeric: tabular-nums;
}

.hcc-perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}

.hcc-perk {
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
}

.hcc-perk__title {
	font-family: var(--hcc-display);
	font-size: var(--hcc-step-2);
	margin: 0 0 0.35rem;
}

.hcc-perk__partner,
.hcc-perk__status {
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--hcc-muted);
}

/* Desk screens use the full wide column. */
.hcc-screen--desk,
.hcc-desk {
	max-width: none;
}

.hcc-check-row + .hcc-check-row {
	border-top: 1px solid var(--hcc-rule);
}

/* Screens printed inside an ink band read on the band. */
.hcc-section--ink .hcc-box,
.hcc-section--ink .hcc-table,
.hcc-section--ink .hcc-choice,
.hcc-section--ink fieldset {
	background: var(--hcc-surface);
}

/*
 * HCC Academy learner screens. A quiz question is the legend of its fieldset, so it reads
 * as a question in body type, not as a small uppercase label like the staff forms.
 */
.hcc-academy.hcc-screen legend {
	padding: 0 0.4rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.45;
	text-transform: none;
	color: var(--hcc-ink);
}

.hcc-academy.hcc-screen .hcc-academy__noprint {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
}

/* The question sits inside its box, above the choices, however many lines it takes. */
.hcc-academy.hcc-screen fieldset > legend {
	float: left;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0;
}

.hcc-academy.hcc-screen fieldset > legend + * {
	clear: both;
}

/* ------------------------------------------------------------------ phones: fields that never zoom */

/*
 * Safari on a phone zooms the page into any field whose text is under 16px, and the desk's
 * fields sit inside smaller text (.hcc-small, tables). On touch screens and narrow windows every
 * screen field is at least 16px.
 */
@media (max-width: 759px), (pointer: coarse) {
	.hcc-screen :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
		font-size: max(16px, 1rem);
	}

	/* The desk tabs and the file's back link are thumb-sized too. */
	.hcc-tabs a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

/*
 * The desk workbench's line table on a phone: each line stacks into a block instead of four
 * columns of one word each. Visit mode is the phone's way through a check; this keeps the
 * desktop table readable when someone opens it on a phone anyway.
 */
@media (max-width: 599px) {
	.hcc-screen .hcc-lines thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hcc-screen .hcc-lines,
	.hcc-screen .hcc-lines tbody,
	.hcc-screen .hcc-lines tr,
	.hcc-screen .hcc-lines td {
		display: block;
		width: auto;
	}

	.hcc-screen .hcc-lines tr {
		padding: 0.75rem 0.85rem;
		border-bottom: 1px solid var(--hcc-rule);
	}

	.hcc-screen .hcc-lines td,
	.hcc-screen .hcc-lines tr:last-child > td {
		padding: 0.2rem 0;
		border: 0;
	}

	.hcc-screen .hcc-lines td textarea {
		width: 100%;
	}
}

/* The workbench list: the checker's own checks link straight to visit mode. */
.hcc-visit-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-left: 0.5rem;
	font-weight: 600;
}

/* ------------------------------------------------------------------ visit mode (a phone at the business) */

/*
 * templates/screens/desk/visit.php and assets/screens/visit.js: one card at a time, big result
 * buttons, a Save bar that stays under the thumb, every tap target at least 44px, no table.
 */
.hcc-visit [hidden],
.hcc-visit__texts {
	display: none !important;
}

.hcc-visit {
	max-width: 40rem;
}

/* The desk's tab body scrolls sideways for wide tables, which would keep the Save bar from sticking. */
.hcc-tab-body:has(.hcc-visit),
.hcc-tab-body.hcc-tab-body--visit {
	overflow: visible;
}

/* Focus moves to a card's heading so a screen reader starts there; a heading takes no ring. */
.hcc-visit [tabindex="-1"]:focus {
	outline: none;
}

.hcc-visit__head {
	margin: 0 0 1rem;
}

.hcc-visit__place {
	margin: 0 0 0.6rem;
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-visit__check {
	margin-right: 0.35rem;
	color: var(--hcc-ink);
	font-family: var(--hcc-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.hcc-visit__steps ol {
	display: flex;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcc-visit__steps li {
	flex: 1 1 auto;
	margin: 0;
}

.hcc-visit__steps a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.3rem 0.2rem;
	border: 1px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-surface);
	color: var(--hcc-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	overflow-wrap: normal;
	word-break: normal;
}

.hcc-visit__steps a[aria-current] {
	border-color: var(--hcc-btn-bg);
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
}

.hcc-visit__progress {
	display: grid;
	gap: 0.35rem;
	margin: 0.75rem 0 0;
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-visit__progress progress {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 0.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--hcc-rule);
	overflow: hidden;
}

.hcc-visit__progress progress::-webkit-progress-bar {
	border-radius: 999px;
	background: var(--hcc-rule);
}

.hcc-visit__progress progress::-webkit-progress-value {
	border-radius: 999px;
	background: var(--hcc-green);
}

.hcc-visit__progress progress::-moz-progress-bar {
	background: var(--hcc-green);
}

.hcc-visit__status {
	margin: 0.6rem 0 0;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--hcc-green);
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-green-soft);
}

.hcc-visit__status:empty {
	display: none;
}

.hcc-visit__card {
	margin: 0 0 1.25rem;
	padding: 1rem 1rem 0;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-surface);
}

.hcc-visit__card > h3,
.hcc-visit .hcc-line__title {
	margin: 0.2rem 0 0.6rem;
	font-size: var(--hcc-step-2);
}

.hcc-visit__card h4 {
	margin: 1rem 0 0.3rem;
	color: var(--hcc-muted);
	font-family: var(--hcc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.hcc-visit .hcc-line__where {
	margin: 0;
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-visit .hcc-line__id {
	margin-right: 0.3rem;
	font-family: var(--hcc-mono);
	font-size: 0.85em;
}

.hcc-visit .hcc-line__now {
	margin: 0 0 0.75rem;
}

.hcc-visit .hcc-line__req,
.hcc-visit .hcc-line__proof {
	margin: 0 0 0.75rem;
	font-size: var(--hcc-step--1);
	line-height: 1.5;
}

.hcc-visit .hcc-line__req h4,
.hcc-visit .hcc-line__proof h4 {
	margin: 0 0 0.15rem;
}

.hcc-visit .hcc-line__req p,
.hcc-visit .hcc-line__proof p {
	margin: 0;
}

.hcc-visit .hcc-chip--pass {
	background: var(--hcc-green-soft);
	color: var(--hcc-green);
}

.hcc-visit .hcc-chip--fail {
	background: var(--hcc-critical-soft);
	color: var(--hcc-critical);
}

.hcc-visit .hcc-chip--in_progress,
.hcc-visit .hcc-chip--referred,
.hcc-visit .hcc-chip--na {
	background: var(--hcc-gold-soft);
	color: var(--hcc-gold-strong);
}

.hcc-visit .hcc-chip--blank {
	background: var(--hcc-chip);
	color: var(--hcc-muted);
}

/* Fields: label, help, then the field, full width. */
.hcc-visit .hcc-field {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 1rem;
}

.hcc-visit .hcc-field label,
.hcc-visit .hcc-counter__label {
	margin: 0;
	font-weight: 600;
}

.hcc-visit .hcc-field__help {
	display: block;
	margin: 0 0 0.25rem;
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-visit :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
	width: 100%;
	max-width: none;
	min-height: 3rem;
	font-size: max(16px, 1rem);
}

.hcc-visit form {
	max-width: none;
}

.hcc-visit__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 0 0.75rem;
}

/* Big choices: results, the basis of a fact, what was found. */
.hcc-visit .hcc-picks {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	background: none;
}

.hcc-visit .hcc-picks legend {
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--hcc-ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.hcc-visit .hcc-picks__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.hcc-visit .hcc-picks__col {
	display: grid;
	gap: 0.5rem;
}

.hcc-visit .hcc-pick {
	position: relative;
	display: block;
	margin: 0;
	font-weight: 600;
}

.hcc-visit .hcc-pick input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hcc-visit .hcc-pick span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.15rem 0.5rem;
	min-height: 3.5rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius);
	background: var(--hcc-paper);
	color: var(--hcc-ink);
	text-align: center;
	line-height: 1.25;
}

.hcc-visit .hcc-picks__col .hcc-pick span {
	justify-content: flex-start;
	font-weight: 400;
	text-align: left;
}

.hcc-visit .hcc-pick input:focus-visible + span {
	outline: 3px solid var(--hcc-focus);
	outline-offset: 2px;
}

.hcc-visit .hcc-pick input:checked + span {
	border-color: var(--hcc-ink);
	background: var(--hcc-btn-bg);
	color: var(--hcc-btn-fg);
}

.hcc-visit .hcc-pick--pass input:checked + span {
	border-color: var(--hcc-green);
	background: var(--hcc-green);
	color: var(--hcc-paper);
}

.hcc-visit .hcc-pick--fail input:checked + span {
	border-color: var(--hcc-critical);
	background: var(--hcc-critical);
	color: var(--hcc-paper);
}

/* A box to tick, as a full-width row. */
.hcc-visit .hcc-tick,
.hcc-visit .hcc-tick-row label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.35rem 0;
	padding-left: 0;
	text-indent: 0;
	font-weight: 500;
}

.hcc-visit .hcc-tick input,
.hcc-visit .hcc-tick-row input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
}

.hcc-visit .hcc-tick-row {
	max-width: none;
	padding: 0.25rem 0.9rem;
}

.hcc-visit .hcc-line__files {
	margin: 0 0 1rem;
}

.hcc-visit details > summary {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

/* The camera: a big button around the file input, which stays focusable. */
.hcc-visit .hcc-camera {
	position: relative;
	display: block;
	margin: 0 0 0.5rem;
}

.hcc-visit .hcc-camera input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.hcc-visit .hcc-camera span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.5rem 1rem;
	border: 2px dashed var(--hcc-rule-strong);
	border-radius: var(--hcc-radius);
	background: var(--hcc-paper);
	color: var(--hcc-ink);
	font-weight: 600;
}

.hcc-visit .hcc-camera input:focus-visible + span {
	outline: 3px solid var(--hcc-focus);
	outline-offset: 2px;
}

.hcc-visit .hcc-camera--quiet span {
	border-style: solid;
	font-weight: 500;
}

.hcc-visit__files {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.hcc-visit .hcc-line__photo {
	margin: 0 0 1rem;
}

/* Save stays under the thumb while the card is on screen. */
.hcc-visit__actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem -1rem 0;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hcc-rule);
	border-radius: 0 0 var(--hcc-radius) var(--hcc-radius);
	background: var(--hcc-surface);
}

.hcc-visit__actions .hcc-button {
	min-height: 3rem;
	padding-inline: 0.9rem;
}

.hcc-visit__actions .hcc-visit__save {
	flex: 1 1 9rem;
}

/* A field reached with Tab or the phone's Next key scrolls clear of the Save bar. */
html:has(.hcc-visit) {
	scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.hcc-visit__msg {
	flex: 1 1 100%;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--hcc-green);
	background: var(--hcc-green-soft);
}

.hcc-visit__msg.is-error {
	border-left-color: var(--hcc-critical);
	background: var(--hcc-critical-soft);
}

.hcc-unsent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--hcc-seal-gold);
	border-radius: var(--hcc-radius-sm);
	background: var(--hcc-gold-soft);
}

.hcc-unsent p {
	flex: 1 1 14rem;
	margin: 0;
}

.hcc-unsent .hcc-button {
	min-height: 2.75rem;
}

/* The line list and the other lists. */
.hcc-visit__phase {
	margin-top: 1.25rem;
}

.hcc-visit__index,
.hcc-visit__list,
.hcc-visit__chips {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hcc-visit__index li {
	margin: 0;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-visit__index a {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr) auto;
	gap: 0.5rem;
	align-items: center;
	min-height: 3rem;
	padding: 0.35rem 0;
	color: var(--hcc-ink);
	text-decoration: none;
}

.hcc-visit__list li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--hcc-rule);
}

.hcc-visit__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.hcc-visit__chips a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.5rem;
	min-height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--hcc-rule-strong);
	border-radius: var(--hcc-radius-sm);
	font-family: var(--hcc-mono);
	text-decoration: none;
}

.hcc-visit__out {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.hcc-visit__out a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* The five counter questions. */
.hcc-counter__how {
	margin: 0 0 0.75rem;
}

.hcc-counter__list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.hcc-counter__q {
	margin: 0 0 0.9rem;
	padding: 0.75rem;
	border: 1px solid var(--hcc-rule);
	border-radius: var(--hcc-radius);
	background: var(--hcc-paper);
}

.hcc-counter__ask {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.hcc-counter__no {
	margin-right: 0.35rem;
	font-family: var(--hcc-mono);
	color: var(--hcc-gold-strong);
}

.hcc-counter__cue {
	margin: 0 0 0.5rem;
	color: var(--hcc-muted);
	font-size: var(--hcc-step--1);
}

.hcc-counter__cue .is-ok {
	color: var(--hcc-green);
	font-weight: 600;
}

.hcc-counter__cue .is-missing {
	color: var(--hcc-critical);
	font-weight: 600;
}

/* The door to visit mode on the workbench. */
.hcc-screen .hcc-visit-door h3 {
	margin-top: 0;
	font-size: var(--hcc-step-1);
}