/*
 * Public /verify/ pages, on the O&O visual standard 1.3.5: dark ground, sand body,
 * off-white display, goldenrod accent, Oswald + Open Sans (bundled, OFL), no remote assets.
 */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/open-sans-latin-600-normal.woff2") format("woff2"); }

:root {
	--oo-rich-black: #10100D;
	--oo-charcoal: #222120;
	--oo-goldenrod: #CBA24A;
	--oo-sand: #E3D6B7;
	--oo-medium-gray: #9C9C9C;
	--oo-off-white: #F6F1E4;
	--oo-gold-highlight: #E4BB5C;
	--oo-gold-border: #B0872A;
	--gold-12: rgba(203, 162, 74, 0.12);
	--gold-25: rgba(203, 162, 74, 0.25);
	--gold-55: rgba(203, 162, 74, 0.55);
	--shadow-gold-glow: 0 0 0 1px rgba(203, 162, 74, 0.35), 0 8px 24px rgba(203, 162, 74, 0.15);
	--r-sm: 4px;
	--r-md: 8px;
	--r-pill: 999px;
	--display: "Oswald", "Arial Narrow", sans-serif;
	--body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--oo-rich-black); }
body {
	margin: 0;
	background: var(--oo-rich-black);
	color: var(--oo-sand);
	font: 400 16px/1.6 var(--body);
}

header.brand { max-width: 640px; margin: 0 auto; padding: 24px 16px 0; }
header.brand img { display: block; width: 136px; height: auto; }
main { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }

h1, h2 {
	font-family: var(--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.1;
	color: var(--oo-off-white);
}
h1 { font-size: 32px; margin: 0 0 24px; }
h1::after { content: ""; display: block; width: 48px; height: 3px; background: var(--oo-goldenrod); margin-top: 16px; }
h2 { font-size: 20px; margin: 32px 0 12px; }
p { margin: 0 0 16px; }
strong { color: var(--oo-off-white); font-weight: 600; }
a { color: var(--oo-goldenrod); text-underline-offset: 3px; }
a:hover { color: var(--oo-gold-highlight); }

/* Credential record */
.card {
	background: var(--oo-charcoal);
	border: 1px solid var(--gold-25);
	border-top: 3px solid var(--oo-goldenrod);
	border-radius: var(--r-md);
	padding: 24px;
	margin: 24px 0;
}
.badge {
	display: inline-block;
	font: 600 12px/1 var(--display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oo-sand);
	border: 1px solid var(--gold-25);
	border-radius: var(--r-pill);
	padding: 6px 12px;
	margin-bottom: 16px;
}
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
dt {
	font: 600 12px/1.6 var(--display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oo-medium-gray);
	padding-top: 2px;
}
dd { margin: 0; color: var(--oo-off-white); font-weight: 600; overflow-wrap: anywhere; }
.desc { margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--gold-12); }
.qualifier, .small { font-size: 14px; color: var(--oo-medium-gray); }
.qualifier { margin: 0; }

/* Notices and lists */
.notice { background: var(--oo-charcoal); border-left: 4px solid var(--oo-goldenrod); padding: 12px 16px; }
.notice-list { padding-left: 20px; }
.notice-list li { margin-bottom: 8px; }
.notice-list strong { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; }

/* Forms */
form { margin: 24px 0; }
label { display: block; margin: 8px 0 6px; }
input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: 12px;
	font: 400 16px/1.4 var(--body);
	color: var(--oo-off-white);
	background: var(--oo-charcoal);
	border: 1px solid var(--gold-25);
	border-radius: var(--r-sm);
}
input[type="text"]:focus { outline: none; border-color: var(--gold-55); }
fieldset { border: 0; padding: 0; margin: 16px 0; }
legend { padding: 0; margin-bottom: 4px; }
fieldset label { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; }
input[type="radio"] { width: 20px; height: 20px; accent-color: var(--oo-goldenrod); }

/* Buttons: one system. Primary pill (one per page), secondary outlined. */
button, .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	font: 700 15px/1 var(--display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--oo-rich-black);
	background: linear-gradient(180deg, var(--oo-gold-highlight), var(--oo-goldenrod));
	border: 1px solid var(--oo-gold-border);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-gold-glow);
	cursor: pointer;
	transition: filter 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
button:hover, .button:hover { filter: brightness(1.06); color: var(--oo-rich-black); }
button.secondary {
	color: var(--oo-goldenrod);
	background: none;
	border: 2px solid var(--oo-goldenrod);
	border-radius: var(--r-sm);
	box-shadow: none;
}
button.secondary:hover { color: var(--oo-gold-highlight); border-color: var(--oo-gold-highlight); filter: none; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--oo-gold-highlight); outline-offset: 3px; }

.copy { overflow-wrap: anywhere; }
dl.manual { background: var(--oo-charcoal); border: 1px solid var(--gold-25); border-radius: var(--r-md); padding: 16px; }

footer { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; font-size: 13px; color: var(--oo-medium-gray); border-top: 1px solid var(--gold-12); }

@media (max-width: 480px) {
	h1 { font-size: 26px; }
	.card { padding: 20px 16px; }
	dl { grid-template-columns: 1fr; gap: 2px; }
	dd { margin-bottom: 10px; }
	button, .button { width: 100%; }
}