/* Copyright (c) 2026, Delon Pyle and contributors
 * For license information, please see license.txt
 *
 * The tenant flow's shared clay identity — one file so /verify, /verify_start,
 * /verify_prescreen, /verify_handoff and /verify_done are the same material:
 * warm extruded surfaces, debossed inputs, pill buttons that sink on press,
 * Caprasimo display over the body face. Colors flow through the per-tenant
 * --kyc-* variables each page defines (api/branding.py supplies the clay
 * defaults), so a tenant's configured branding still wins everywhere.
 *
 * Load this AFTER the page's own <style> block: it must out-cascade the
 * page-local card/button rules it upgrades.
 */

:root {
	--vf-lo: rgba(122, 80, 42, 0.16);          /* warm shadow tone */
	--vf-lo-deep: rgba(122, 80, 42, 0.28);
	--vf-hi: rgba(255, 255, 255, 0.85);        /* inset top light   */
	--vf-clay:
		0 12px 26px -14px var(--vf-lo-deep),
		0 3px 8px -4px var(--vf-lo),
		inset 0 2px 0 var(--vf-hi),
		inset 0 -4px 10px -6px var(--vf-lo);
	--vf-clay-sm:
		0 6px 14px -8px var(--vf-lo-deep),
		inset 0 1.5px 0 var(--vf-hi),
		inset 0 -3px 6px -4px var(--vf-lo);
	--vf-clay-inset:
		inset 0 3px 8px -3px var(--vf-lo),
		inset 0 -1.5px 0 var(--vf-hi);
}

/* ---- Shared chrome: the header becomes a clay tile on the canvas ---- */
.site-header {
	background: var(--kyc-panel, #fffaf1) !important;
	border-bottom: none !important;
	box-shadow: var(--vf-clay-sm);
}
.site-header .hdr-btn {
	border-radius: 999px !important;
	box-shadow: var(--vf-clay-sm);
}

/* ---- Display face for each page's voice ---- */
#kyc-handoff h1, #kyc-prescreen h1, #kyc-prescreen h2,
#kyc-start h1, #kyc-done h1 {
	font-family: 'Caprasimo', 'Figtree', serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* ---- Cards: every page's main surface joins the family ---- */
.kh-card, .kp-card, #kyc-start .card, #kyc-done .card {
	background: var(--kyc-panel, #fffaf1) !important;
	border: none !important;
	border-radius: 1.75rem !important;
	box-shadow: var(--vf-clay) !important;
}

/* ---- Buttons: clay pills with press physics; comfortable tap targets ---- */
.kh-btn, .kp-btn, #kyc-done .home {
	border-radius: 999px !important;
	min-height: 44px;
	box-shadow: var(--vf-clay-sm);
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}
.kh-btn:active, .kp-btn:active:not(:disabled), #kyc-done .home:active {
	transform: translateY(2px);
	box-shadow: 0 2px 6px -4px var(--vf-lo-deep), inset 0 1px 0 var(--vf-hi);
}

/* ---- Inputs (pre-screen): debossed clay, brand focus ring ---- */
#kyc-prescreen input, #kyc-prescreen select {
	border-radius: 999px !important;
	border-color: transparent !important;
	box-shadow: var(--vf-clay-inset);
}
#kyc-prescreen input:focus, #kyc-prescreen select:focus {
	outline: none !important;
	box-shadow: var(--vf-clay-inset), 0 0 0 3px rgba(198, 113, 57, 0.35);
}

/* ---- Small chips (pairing code, status) get the inset treatment ---- */
.kh-pair b, .kh-pair {
	border-radius: 0.9rem;
}
.kh-pair b {
	box-shadow: var(--vf-clay-inset);
	padding: 0.15rem 0.6rem;
	background: var(--kyc-bg, #f5ead8);
}

/* ---- Accessibility: visible focus everywhere, calm motion on request ---- */
.kh-btn:focus-visible, .kp-btn:focus-visible, .site-header .hdr-btn:focus-visible,
#kyc-done .home:focus-visible {
	outline: 3px solid rgba(198, 113, 57, 0.45);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.kh-btn, .kp-btn, #kyc-done .home { transition: none; }
	.kh-btn:active, .kp-btn:active:not(:disabled), #kyc-done .home:active { transform: none; }
}