/* Document Verification — skin
   Loaded after both the theme stylesheet and the plugin's dv.css, so this file
   owns the final appearance. Nothing here needs matching !important; the
   dependency chain in functions.php guarantees the load order. */

.dv,
.dvt-main {
	--dvt-display: inherit;
	--dvt-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--dvt-deep: #1a1a1a;
	--dvt-stub: #f4f4f4;
	--dvt-panel-bg: #f5f5f5;
	--dvt-rule: #dcdcdc;
}

/* Masthead ---------------------------------------------------------------
   The 4px accent line stays; the border below it goes, so the logo sits in
   open space rather than in a boxed bar. */

.dvt-masthead {
	border-bottom: 0;
	padding-block: 1.5rem 0;
}

.dvt-main {
	padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}

.dvt-breadcrumb {
	margin-bottom: 1rem;
}

/* Heading ----------------------------------------------------------------
   Serif headline against sans UI. The rule under the header becomes a
   hairline with a short accent segment rather than a full-width bar. */

.dv__header {
	border-bottom: 1px solid var(--dvt-line);
	position: relative;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
}

.dv__header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 84px;
	height: 3px;
	background: var(--dvt-accent);
}

.dv__title {
	font-weight: 400;
	font-size: clamp(1.875rem, 1.35rem + 2vw, 2.625rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

.dv__intro {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #4b5157;
	max-width: 58ch;
}

/* The card ---------------------------------------------------------------
   A plain bordered card with a short accent tab at the top left, echoing the
   rule under the page heading. No gutter: at this width it read as an empty
   column rather than a perforated edge. */

.dv__panel {
	position: relative;
	background: var(--dvt-panel-bg);
	border: 0;
	border-radius: 4px;
	padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	margin: 0;
}

.dv__panel-title {
	font-weight: 500;
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	color: var(--dvt-deep);
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0 0 1.5rem;
}

/* Fields -----------------------------------------------------------------
   The code input is the page's only real input, so it gets the weight:
   monospace, larger, tracked out, with a ruled baseline rather than a box. */

.dv__form {
	gap: 1.75rem;
}

.dv__label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #4b5157;
}

.dv__select,
.dv__input {
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	border-radius: 0;
	background: #fff;
	min-height: 52px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.dv__select:hover,
.dv__input:hover {
	border-color: var(--dvt-deep);
}

.dv__input {
	font-family: var(--dvt-mono);
	font-size: 1.125rem;
	letter-spacing: 0.12em;
	padding-left: 0.875rem;
}

.dv__input::placeholder {
	font-family: inherit;
	letter-spacing: 0.06em;
	font-size: 0.9375rem;
	color: #9aa4aa;
}

.dv__hint {
	position: relative;
	margin-top: 0.75rem;
	padding-left: 1.75rem;
	font-size: 0.875rem;
	color: #4a4a4a;
}

.dv__hint::before {
	content: "i";
	position: absolute;
	left: 0;
	top: 0.0625rem;
	width: 1.125rem;
	height: 1.125rem;
	display: grid;
	place-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	font-style: italic;
	color: var(--dvt-accent);
	border: 1.5px solid var(--dvt-accent);
	border-radius: 50%;
}

/* Button: solid ink. The accent is structure on this page, not a button. */

.dv__submit {
	background: var(--dvt-accent);
	color: var(--dvt-accent-ink);
	border: 1px solid var(--dvt-accent);
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.875rem 2.25rem;
	transition: filter 0.14s ease;
}

.dv__submit:hover {
	filter: brightness(0.9);
}

.dv__submit[disabled] {
	opacity: 0.55;
}

/* Result -----------------------------------------------------------------
   A success lands a seal in the corner. Failure gets no ornament at all. */

.dv__result {
	position: relative;
	margin-top: 2rem;
	border-radius: 0;
	border-left-width: 1px;
	border-top: 2px solid var(--dvt-line);
	padding: 1.5rem 1.5rem 1.5rem 0;
	background: transparent;
	border-right: 0;
	border-bottom: 0;
	animation: dv-rise 0.22s ease-out;
}

@keyframes dv-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.dv__result--ok,
.dv__result--error {
	border-left-color: transparent;
}

.dv__result--ok {
	border-top-color: var(--dvt-deep);
	padding-right: 7rem;
}

.dv__result--error {
	border-top-color: #a4161a;
}

.dv__result--ok::after {
	content: "\2713";
	position: absolute;
	top: 1.25rem;
	right: 0.25rem;
	width: 78px;
	height: 78px;
	display: grid;
	place-items: center;
	font-size: 30px;
	color: #14624c;
	border: 2px solid #14624c;
	border-radius: 50%;
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #14624c;
	transform: rotate(-9deg);
	opacity: 0.9;
}

.dv__result-heading {
	font-weight: 500;
	font-size: 1.1875rem;
	color: var(--dvt-deep);
}

.dv__result--error .dv__result-heading {
	color: #a4161a;
}

.dv__result-list {
	border-top: 1px solid var(--dvt-line);
	padding-top: 0.875rem;
	gap: 0.5rem 1.5rem;
}

.dv__result-list dt {
	font-size: 0.8125rem;
	color: #6b7278;
}

.dv__result-list dd {
	font-weight: 400;
	font-family: var(--dvt-mono);
	font-size: 0.9375rem;
	color: var(--dvt-deep);
}

.dv__result-link {
	font-weight: 500;
	text-underline-offset: 3px;
}

/* Marginalia note --------------------------------------------------------
   Not a card. A hanging accent rule and quiet text, the way a footnote sits
   beside a printed form. */

.dv__notes {
	background: transparent;
	border: 0;
	border-top: 3px solid var(--dvt-accent);
	margin: 0;
	padding: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #5c6066;
	max-width: 34ch;
}

@media (max-width: 899px) {
	.dv__notes {
		margin-top: 1.75rem;
		max-width: none;
	}
}

.dvt-updated {
	font-family: var(--dvt-mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* Footer ----------------------------------------------------------------- */

.dvt-footer {
	background: transparent;
	border-top: 1px solid var(--dvt-line);
}

.dvt-footer::before {
	content: "";
	display: block;
	width: 84px;
	height: 3px;
	background: var(--dvt-accent);
	margin-bottom: 1.25rem;
	margin-inline: auto;
	max-width: 960px;
}

/* Responsive -------------------------------------------------------------
   Below 900px the stub becomes a top band so the card keeps its identity
   without eating horizontal space on a phone. */

@media (max-width: 899px) {
	.dv__result--ok {
		padding-right: 0;
	}

	.dv__result--ok::after {
		position: static;
		transform: rotate(-9deg);
		margin: 1rem 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dv__result {
		animation: none;
	}
}

/* Language switcher ------------------------------------------------------
   Two short codes separated by a hairline, not pills. Current one is ink and
   underscored by the accent; the other is quiet. */

.dvt-masthead__aside {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.dvt-lang {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--dvt-line);
}

.dvt-lang__item {
	display: block;
	padding: 0.4375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #6b7278;
	text-decoration: none;
	background: #fff;
	transition: color 0.12s ease, background 0.12s ease;
}

.dvt-lang__item + .dvt-lang__item {
	border-left: 1px solid var(--dvt-line);
}

.dvt-lang__item:hover {
	color: var(--dvt-deep);
	background: var(--dvt-stub);
}

.dvt-lang__item.is-current {
	color: var(--dvt-deep);
	background: var(--dvt-stub);
	box-shadow: inset 0 -3px 0 var(--dvt-accent);
}

.dvt-lang abbr {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}

@media (max-width: 560px) {
	.dvt-masthead__aside {
		gap: 0.75rem;
	}
}

/* Institutional palette ---------------------------------------------------
   Red for actions and wayfinding, grey for surfaces, black for text. The
   accent is a Customizer value, so a client can move the whole scheme. */

.dvt-breadcrumb a,
.dv__result-link,
.dvt-footer__links a:hover {
	color: var(--dvt-accent);
}

.dv__notes {
	border-top-width: 2px;
}

.dv__result--ok::after {
	color: var(--dvt-accent);
	border-color: var(--dvt-accent);
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--dvt-accent);
}

.dv__result--ok {
	border-top-color: var(--dvt-accent);
}

.dvt-footer::before {
	width: 100%;
	max-width: none;
	height: 2px;
}

/* Segmented reference field, institutional treatment ---------------------
   White boxes sitting on the grey field, matching the select above them. */

.dv__boxes {
	gap: 0.625rem;
	margin-top: 0.25rem;
}

.dv__box {
	width: 7rem;
	min-height: 52px;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	transition: border-color 0.12s ease;
}

.dv__box:hover {
	border-color: var(--dvt-deep);
}

.dv__box:focus-visible {
	outline: 2px solid var(--dvt-accent);
	outline-offset: 1px;
	border-color: var(--dvt-accent);
}

.dv__box.is-error {
	border-color: #a4161a;
	box-shadow: none;
}

@media (max-width: 680px) {
	.dv__box {
		width: calc(33.333% - 0.42rem);
		font-size: 1.0625rem;
	}
}

.dv__boxes-row {
	gap: 0.75rem 1.5rem;
}

.dv__boxes-error {
	color: var(--dvt-accent);
	font-size: 1rem;
	line-height: 1.5;
}

/* =======================================================================
   1.8.0 — control treatment matched to the reference elements
   ==================================================================== */

/* One column: the explanatory text belongs inside the grey field, below
   the button, not in a second column. */

@media (min-width: 900px) {
	.dv {
		display: block;
	}
}

.dv__panel {
	border-radius: 0;
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
	padding-bottom: 1.5rem;
}

.dv__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dv__form {
	max-width: none;
	gap: 1.75rem;
}

/* Select: label sits inside the control, above the value. */

.dv__field {
	position: relative;
	display: block;
}

.dv__field:has(.dv__select) .dv__label {
	position: absolute;
	top: 0.6875rem;
	left: 1rem;
	z-index: 1;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	color: #6b6b6b;
	pointer-events: none;
}

.dv__select {
	width: 100%;
	max-width: 32rem;
	height: 76px;
	padding: 2rem 2.75rem 0.75rem 0.9375rem;
	font-size: 1.1875rem;
	color: var(--dvt-deep);
	background: #fff;
	border: 1px solid #8c8c8c;
	border-radius: 8px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 6px), calc(100% - 14px) calc(50% + 6px);
	background-size: 8px 8px, 8px 8px;
	background-repeat: no-repeat;
}

/* Reference boxes: white blocks, no border, digits carry the state. */

.dv__boxes-row {
	align-items: center;
	gap: 0.875rem 1.5rem;
}

.dv__boxes {
	gap: 0.875rem;
	margin: 0;
}

.dv__box {
	width: 7.5rem;
	min-height: 60px;
	padding: 0.5rem;
	font-family: inherit;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--dvt-deep);
	background: #fff;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
}

.dv__box:hover {
	border: 0;
}

.dv__box:focus,
.dv__box:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 0;
	border: 0;
	box-shadow: none;
}

.dv__box.is-error {
	color: var(--dvt-accent);
	border: 0;
	box-shadow: none;
}

.dv__boxes-error {
	flex: 1 1 16rem;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--dvt-accent);
}

/* The code field needs no visible label; the boxes and the note carry it. */

#dv-number-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Button: pill, caps. */

.dv__submit {
	border-radius: 999px;
	padding: 1rem 2.5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Explanatory text continues the grey field. */

.dv__notes {
	max-width: none;
	margin: 0;
	padding: 2rem clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 2.5rem;
	background: var(--dvt-panel-bg);
	border: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #4a4a4a;
}

.dv__hint {
	margin-top: 1.5rem;
	font-size: 1rem;
	max-width: 30ch;
}

.dv__hint::before {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0.9375rem;
	top: 0;
}

.dv__hint {
	padding-left: 2.25rem;
}

@media (max-width: 680px) {
	.dv__box {
		width: calc(33.333% - 0.6rem);
		font-size: 1.375rem;
		min-height: 52px;
	}

	.dv__boxes-error {
		flex-basis: 100%;
	}

	.dv__select {
		height: 68px;
		font-size: 1.0625rem;
	}
}

/* =======================================================================
   1.8.1 — scale correction
   Everything below was oversized against the reference. These are the
   dials: change the six variables, not the rules underneath them.
   ==================================================================== */

.dv,
.dvt-main,
.dvt-shell {
	--dvt-box-w: 100px;      /* width of one reference box            */
	--dvt-box-h: 48px;       /* height of one reference box           */
	--dvt-box-size: 1.375rem;/* digit size inside the box             */
	--dvt-box-gap: 0.75rem;  /* space between boxes                   */
	--dvt-control-h: 62px;   /* select height                         */
	--dvt-body: 1rem;        /* base copy size in the panel           */
}

.dvt-shell,
.dv-standalone__inner {
	max-width: 1200px;
}

.dv__title {
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	margin-bottom: 1rem;
}

.dv__intro {
	font-size: var(--dvt-body);
	max-width: 74ch;
}

.dv__panel {
	padding: 2rem;
	padding-bottom: 1.25rem;
}

.dv__form {
	gap: 1.375rem;
}

.dv__select {
	height: var(--dvt-control-h);
	max-width: 26rem;
	padding: 1.625rem 2.5rem 0.5rem 0.875rem;
	font-size: var(--dvt-body);
	border-radius: 6px;
	background-position: calc(100% - 20px) calc(50% + 4px), calc(100% - 13px) calc(50% + 4px);
	background-size: 7px 7px, 7px 7px;
}

.dv__field:has(.dv__select) .dv__label {
	top: 0.5rem;
	left: 0.875rem;
	font-size: 0.8125rem;
}

.dv__boxes {
	gap: var(--dvt-box-gap);
}

.dv__boxes-row {
	gap: 0.625rem 1.125rem;
}

.dv__box {
	width: var(--dvt-box-w);
	min-height: var(--dvt-box-h);
	padding: 0.25rem;
	font-size: var(--dvt-box-size);
	font-weight: 700;
}

.dv__boxes-error {
	flex: 1 1 14rem;
	font-size: var(--dvt-body);
	line-height: 1.35;
}

.dv__submit {
	padding: 0.75rem 1.875rem;
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
}

.dv__hint {
	margin-top: 1.25rem;
	padding-left: 2rem;
	font-size: 0.9375rem;
	max-width: 34ch;
}

.dv__hint::before {
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.875rem;
}

.dv__notes {
	padding: 1.5rem 2rem 2rem;
	font-size: 0.9375rem;
}

.dv__panel,
.dv__notes {
	max-width: none;
}

@media (max-width: 680px) {
	.dv,
	.dvt-main,
	.dvt-shell {
		--dvt-box-w: calc(33.333% - 0.5rem);
		--dvt-box-h: 46px;
		--dvt-box-size: 1.1875rem;
	}

	.dv__panel,
	.dv__notes {
		padding-inline: 1.25rem;
	}
}

/* =======================================================================
   1.8.2 — panel padding and box proportion
   Reference: content sits ~28px from the panel edge and the explanatory
   paragraph runs the full width. Boxes are wider and flatter than mine,
   about 2.4:1 against roughly half the select's height.
   ==================================================================== */

.dv,
.dvt-main,
.dvt-shell {
	--dvt-box-w: 104px;
	--dvt-box-h: 42px;
	--dvt-box-size: 1.375rem;
	--dvt-box-gap: 0.625rem;
	--dvt-control-h: 68px;
	--dvt-pad: 1.75rem;
}

.dv__panel {
	padding: var(--dvt-pad);
	padding-bottom: 1rem;
}

.dv__notes {
	padding: 1.25rem var(--dvt-pad) var(--dvt-pad);
	max-width: none;
}

.dv__notes p {
	max-width: none;
}

.dv__intro {
	max-width: none;
}

.dv__box {
	padding-block: 0;
	line-height: 1;
}

.dv__select {
	padding-top: 1.75rem;
	padding-bottom: 0.625rem;
}

.dv__boxes-row {
	gap: 0.5rem 1rem;
}

.dv__submit {
	margin-top: 0.25rem;
}

@media (max-width: 680px) {
	.dv,
	.dvt-main,
	.dvt-shell {
		--dvt-pad: 1.125rem;
		--dvt-box-w: calc(33.333% - 0.42rem);
		--dvt-box-h: 44px;
	}
}

/* 1.8.3 — error message typography ---------------------------------------
   Regular weight, body size, red, aligned on the boxes' centre line. No
   bold, no icon: the colour is the signal. */

.dv__boxes-error {
	flex: 1 1 18rem;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--dvt-accent);
}

.dv__boxes-row {
	align-items: center;
	gap: 0.5rem 1.125rem;
}

.dv__box.is-error {
	color: var(--dvt-accent);
	background: #fff;
}

@media (max-width: 680px) {
	.dv__boxes-error {
		flex-basis: 100%;
		font-size: 1rem;
	}
}

/* 1.8.4 — keep the message beside the boxes -------------------------------
   The row was allowed to wrap, so the message dropped underneath whenever
   the text was long. Boxes hold their width, the message takes what is
   left, and the pair only stacks below 880px. */

.dv__boxes-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.125rem;
}

.dv__boxes {
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

.dv__box {
	flex: 0 0 var(--dvt-box-w);
}

.dv__boxes-error {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

@media (max-width: 880px) {
	.dv__boxes-row {
		flex-wrap: wrap;
	}

	.dv__boxes {
		flex-wrap: wrap;
	}

	.dv__boxes-error {
		flex-basis: 100%;
	}
}

/* 1.8.5 — overflow, focus rings, hint placement ---------------------------
   Boxes were fixed-width in a non-wrapping row, so the fifth ran past the
   panel edge. They now shrink when space is short. The select showed a red
   border and a blue ring at once; one indicator is enough. */

.dv__boxes {
	min-width: 0;
	flex: 0 1 auto;
}

.dv__box {
	flex: 0 1 var(--dvt-box-w);
	min-width: 3.5rem;
}

.dv__boxes-error {
	flex: 1 1 10rem;
}

/* Focus: accent ring, never doubled with the error border. */

.dv__select:focus,
.dv__select:focus-visible {
	outline: 2px solid var(--dvt-accent);
	outline-offset: 1px;
	border-color: var(--dvt-accent);
}

.dv__field--error .dv__select {
	border-color: var(--dvt-accent);
	box-shadow: none;
}

.dv__field--error .dv__select:focus,
.dv__field--error .dv__select:focus-visible {
	outline-color: var(--dvt-accent);
}

.dv__box:focus,
.dv__box:focus-visible {
	outline: 2px solid var(--dvt-accent);
	outline-offset: 0;
}

/* Hint now follows the button in the markup: give it the spacing to match. */

.dv__hint {
	margin: 0.25rem 0 0;
	order: 0;
}

.dv__form .dv__hint + .dv__submit {
	margin-top: 0.75rem;
}

@media (max-width: 880px) {
	.dv__box {
		flex: 0 1 calc(20% - 0.5rem);
	}
}