/* HCC portal and desk screens: plain working styles. Phase 4 replaces these. */

.hcc-screen {
	--hcc-ink: #1d2327;
	--hcc-muted: #50575e;
	--hcc-line: #c3c4c7;
	--hcc-ok: #0a6b2d;
	--hcc-ok-bg: #edf7ef;
	--hcc-error: #8a1f11;
	--hcc-error-bg: #fbeceb;
	--hcc-info-bg: #f0f4f8;
	color: var(--hcc-ink);
	max-width: 72rem;
	overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
	.hcc-screen:not(.hcc-admin *) {
		--hcc-ink: #e8eaed;
		--hcc-muted: #b4b9be;
		--hcc-line: #4a5056;
		--hcc-ok: #8fd6a4;
		--hcc-ok-bg: #16301f;
		--hcc-error: #f2a69b;
		--hcc-error-bg: #3a1a16;
		--hcc-info-bg: #1f2933;
	}
}

.hcc-screen fieldset { border: 1px solid var(--hcc-line); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.hcc-screen legend { font-weight: 600; padding: 0 0.25rem; }
.hcc-screen label { display: block; }
.hcc-screen .hcc-choice label,
.hcc-screen .hcc-inline label { display: inline; }
.hcc-screen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hcc-screen select,
.hcc-screen textarea { max-width: 100%; width: 32rem; box-sizing: border-box; }
.hcc-screen .hcc-inline input,
.hcc-screen .hcc-inline select { width: auto; }
.hcc-screen form.hcc-inline { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0; }

.hcc-box { border: 1px solid var(--hcc-line); padding: 0.75rem 1rem; margin: 1rem 0; }
.hcc-notice { padding: 0.5rem 1rem; margin: 0.75rem 0; border-left: 4px solid var(--hcc-line); background: var(--hcc-info-bg); }
.hcc-notice--ok { border-color: var(--hcc-ok); background: var(--hcc-ok-bg); }
.hcc-notice--error { border-color: var(--hcc-error); background: var(--hcc-error-bg); }
.hcc-small { font-size: 0.875em; color: var(--hcc-muted); }
.hcc-big { font-size: 1.25em; }

.hcc-table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
.hcc-table th,
.hcc-table td { border: 1px solid var(--hcc-line); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
.hcc-table-wrap,
.hcc-tab-body { overflow-x: auto; }

.hcc-facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.25rem 1rem; }
.hcc-facts dt { font-weight: 600; }
.hcc-facts dd { margin: 0; }

.hcc-tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0 0 1rem; }
.hcc-tabs a { display: block; padding: 0.35rem 0.75rem; border: 1px solid var(--hcc-line); text-decoration: none; }
.hcc-tabs .is-current a { font-weight: 600; border-bottom-width: 3px; }

.hcc-button { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; text-decoration: none; font: inherit; }
.hcc-button--quiet { opacity: 0.85; }
.hcc-button[disabled] { cursor: not-allowed; opacity: 0.6; }

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

.hcc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	.hcc-facts { grid-template-columns: 1fr; }
	.hcc-screen input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	.hcc-screen select,
	.hcc-screen textarea { width: 100%; }
}

/* Visit mode (templates/screens/desk/visit.php): the plain working layout; the theme designs it. */
.hcc-visit [hidden],
.hcc-visit__texts { display: none !important; }
.hcc-visit { max-width: 40rem; }
.hcc-tab-body:has(.hcc-visit),
.hcc-tab-body.hcc-tab-body--visit { overflow: visible; }
.hcc-visit__card { border: 1px solid var(--hcc-line); padding: 0.75rem 1rem 0; margin: 0 0 1rem; }
.hcc-visit__steps ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0; }
.hcc-visit__steps a,
.hcc-visit__index a,
.hcc-visit__chips a,
.hcc-visit-link { display: inline-block; min-height: 2.75rem; padding: 0.5rem 0.75rem; box-sizing: border-box; }
.hcc-visit .hcc-picks__row,
.hcc-visit .hcc-picks__col { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.hcc-visit .hcc-pick,
.hcc-visit .hcc-camera { display: block; position: relative; }
.hcc-visit .hcc-pick span,
.hcc-visit .hcc-camera span { display: block; min-height: 2.75rem; padding: 0.6rem 0.75rem; border: 2px solid var(--hcc-line); box-sizing: border-box; text-align: center; }
.hcc-visit .hcc-pick input,
.hcc-visit .hcc-camera input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }
.hcc-visit .hcc-pick input:checked + span { border-color: currentColor; font-weight: 700; }
.hcc-visit .hcc-pick input:focus-visible + span,
.hcc-visit .hcc-camera input:focus-visible + span { outline: 3px solid; outline-offset: 2px; }
.hcc-visit .hcc-tick,
.hcc-visit .hcc-tick-row label { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.hcc-visit :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { width: 100%; font-size: max(16px, 1rem); }
.hcc-visit__actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0; background: Canvas; border-top: 1px solid var(--hcc-line); }
.hcc-visit__actions .hcc-button { min-height: 2.75rem; }
.hcc-visit__msg { flex: 1 1 100%; margin: 0; }
.hcc-visit__msg.is-error { color: var(--hcc-error); }
.hcc-visit__index,
.hcc-visit__list,
.hcc-visit__chips { list-style: none; padding: 0; }
.hcc-unsent { border-left: 4px solid var(--hcc-line); padding: 0.5rem 0.75rem; margin: 0.5rem 0 0; background: var(--hcc-info-bg); }