/**
 * DishaOnline — Design System : Components
 * Layer 2 of 3. Every component shares spacing, radius, hover & focus rules (§39).
 *
 * @package DishaOnline
 */

/* =========================================================
   1. BUTTONS
   ========================================================= */
.dio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dio-s2);
	min-height: 44px;              /* tap target §23 */
	padding: 0.65rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--dio-r);
	font: inherit;
	font-size: var(--dio-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dio-t), border-color var(--dio-t), color var(--dio-t);
}
.dio-btn--primary { background: var(--dio-navy-600); color: #fff; }
.dio-btn--primary:hover { background: var(--dio-navy-700); color: #fff; }
.dio-btn--accent { background: var(--dio-saffron-600); color: #fff; }
.dio-btn--accent:hover { background: var(--dio-saffron-700); color: #fff; }
.dio-btn--ghost {
	background: var(--dio-surface);
	color: var(--dio-navy-700);
	border-color: var(--dio-border-strong);
}
.dio-btn--ghost:hover { background: var(--dio-navy-50); color: var(--dio-navy-700); }
.dio-btn--block { width: 100%; }
.dio-btn--sm { min-height: 36px; padding: 0.4rem 0.8rem; font-size: var(--dio-fs-xs); }
.dio-btn[aria-disabled="true"], .dio-btn:disabled { opacity: 0.55; pointer-events: none; }
.dio-btn svg { width: 1em; height: 1em; flex: none; }

/* =========================================================
   2. BADGES / PILLS / STATUS
   ========================================================= */
.dio-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.6em;
	border-radius: var(--dio-r-sm);
	font-size: var(--dio-fs-xs);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	background: var(--dio-navy-100);
	color: var(--dio-navy-700);
}
.dio-badge--accent  { background: var(--dio-saffron-100); color: var(--dio-saffron-700); }
.dio-badge--success { background: var(--dio-success-50); color: var(--dio-success-700); }
.dio-badge--warning { background: var(--dio-warning-50); color: var(--dio-warning-700); }
.dio-badge--danger  { background: var(--dio-danger-50);  color: var(--dio-danger-700); }
.dio-badge--neutral { background: var(--dio-surface-2);  color: var(--dio-text-2); }

/* Status uses icon/shape + text, never colour alone (§32) */
.dio-status::before { content: "●"; font-size: 0.7em; line-height: 1; }
.dio-status--closed::before { content: "■"; }
.dio-status--soon::before   { content: "▲"; }

.dio-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dio-s1) var(--dio-s3);
	font-size: var(--dio-fs-xs);
	color: var(--dio-muted);
	line-height: 1.6;
}
.dio-meta__item { display: inline-flex; align-items: center; gap: 0.3em; }
.dio-meta svg { width: 0.95em; height: 0.95em; opacity: 0.75; flex: none; }

/* =========================================================
   3. CARDS
   ========================================================= */
.dio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	overflow: hidden;
	transition: border-color var(--dio-t), box-shadow var(--dio-t), transform var(--dio-t);
}
.dio-card:hover { border-color: var(--dio-border-strong); box-shadow: var(--dio-shadow-md); }
.dio-card:focus-within { border-color: var(--dio-navy-500); box-shadow: var(--dio-focus); }
.dio-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--dio-surface-2);
	overflow: hidden;
}
.dio-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}
.dio-card:hover .dio-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.dio-card:hover .dio-card__media img { transform: none; }
}
.dio-card__body { display: flex; flex-direction: column; gap: var(--dio-s2); padding: var(--dio-s4) var(--dio-s5) var(--dio-s5); flex: 1; }
.dio-card__cat {
	align-self: flex-start;
	font-size: var(--dio-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dio-saffron-700);
	text-decoration: none;
}
.dio-card__cat:hover { text-decoration: underline; }
.dio-card__title {
	margin: 0;
	font-size: var(--dio-fs-base);
	font-weight: 700;
	line-height: var(--dio-lh-snug);
}
.dio-card__title a { color: var(--dio-heading); text-decoration: none; }
.dio-card__title a:hover { color: var(--dio-navy-600); }
/* Full-card click target without nesting interactive elements */
.dio-card__title a::after { content: ""; position: absolute; inset: 0; }
.dio-card__excerpt { margin: 0; font-size: var(--dio-fs-sm); color: var(--dio-text-2); line-height: 1.65; }
.dio-card__foot { margin-top: auto; padding-top: var(--dio-s2); }

/* Featured (hero) card */
.dio-card--feature .dio-card__media { aspect-ratio: 16 / 9; }
.dio-card--feature .dio-card__title { font-size: var(--dio-fs-xl); }
.dio-card--feature .dio-card__body { padding: var(--dio-s5) var(--dio-s6) var(--dio-s6); gap: var(--dio-s3); }

/* Horizontal / compact list card */
.dio-card--row { flex-direction: row; align-items: stretch; }
.dio-card--row .dio-card__media { width: 132px; flex: none; aspect-ratio: 4 / 3; }
.dio-card--row .dio-card__body { padding: var(--dio-s3) var(--dio-s4); gap: var(--dio-s1); justify-content: center; }
@media (max-width: 400px) {
	.dio-card--row .dio-card__media { width: 104px; }
}

/* Numbered plain list (sidebar popular) */
.dio-ranklist { list-style: none; margin: 0; padding: 0; counter-reset: dio-rank; }
.dio-ranklist li {
	counter-increment: dio-rank;
	display: flex;
	gap: var(--dio-s3);
	padding: var(--dio-s3) 0;
	border-bottom: 1px dashed var(--dio-border);
}
.dio-ranklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.dio-ranklist li::before {
	content: counter(dio-rank, decimal-leading-zero);
	font-family: var(--dio-font-en);
	font-size: var(--dio-fs-sm);
	font-weight: 700;
	color: var(--dio-navy-300);
	flex: none;
	line-height: 1.6;
}
.dio-ranklist a { font-size: var(--dio-fs-sm); font-weight: 600; color: var(--dio-heading); text-decoration: none; line-height: 1.55; }
.dio-ranklist a:hover { color: var(--dio-navy-600); }

/* =========================================================
   4. QUICK ACTIONS
   ========================================================= */
/*
 * Centred, count-agnostic strip.
 *
 * This was `grid-template-columns: repeat(8, …)`, hardcoded to the eight quick
 * actions that existed at the time. When the taxonomy merge cut the list to
 * six, the items filled columns 1-6 and left two empty columns on the right,
 * so the whole strip sat visibly left of centre.
 *
 * A centred flex row has no fixed column count, so adding or removing an
 * action can never knock the alignment out again. `--dio-quick-w` keeps the
 * tiles a consistent width; they shrink together before they wrap.
 */
.dio-quick {
	--dio-quick-w: 8.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--dio-s3);
}
.dio-quick > * {
	flex: 0 1 var(--dio-quick-w);
	max-width: var(--dio-quick-w);
	min-width: 0;
}
.dio-quick__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--dio-s2);
	padding: var(--dio-s4) var(--dio-s2);
	min-height: 96px;
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	text-align: center;
	text-decoration: none;
	color: var(--dio-text);
	font-size: var(--dio-fs-xs);
	font-weight: 600;
	line-height: 1.35;
	transition: border-color var(--dio-t), background var(--dio-t), transform var(--dio-t);
}
.dio-quick__item:hover {
	border-color: var(--dio-navy-300);
	background: var(--dio-navy-50);
	color: var(--dio-navy-700);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .dio-quick__item:hover { transform: none; } }
.dio-quick__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--dio-r);
	background: var(--dio-navy-100);
	color: var(--dio-navy-700);
	flex: none;
}
.dio-quick__item:hover .dio-quick__icon { background: var(--dio-white); }
.dio-quick__icon svg { width: 20px; height: 20px; }
/*
 * Narrower tiles further down, so a row still holds a sensible number of
 * items. The flex basis replaces the old fixed column counts.
 */
@media (max-width: 1024px) { .dio-quick { --dio-quick-w: 7.5rem; } }
/*
 * Tablet range: cap the row so six items break 3+3 instead of stranding a
 * single tile on its own line.
 */
@media (max-width: 900px) and (min-width: 481px) {
	.dio-quick { max-width: 25.5rem; margin-inline: auto; }
}
@media (max-width: 480px)  {
	.dio-quick { --dio-quick-w: 6.25rem; gap: var(--dio-s2); }
	.dio-quick__item { min-height: 84px; padding: var(--dio-s3) var(--dio-s1); font-size: 0.72rem; }
	.dio-quick__icon { width: 34px; height: 34px; }
	.dio-quick__icon svg { width: 17px; height: 17px; }
}
@media (max-width: 340px) { .dio-quick { --dio-quick-w: 5.75rem; } }

/* =========================================================
   5. SERVICE / LINK TILES
   ========================================================= */
.dio-tile {
	display: flex;
	gap: var(--dio-s3);
	padding: var(--dio-s4);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dio-t), box-shadow var(--dio-t);
}
.dio-tile:hover { border-color: var(--dio-navy-300); box-shadow: var(--dio-shadow-sm); }
.dio-tile__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px; flex: none;
	border-radius: var(--dio-r-sm);
	background: var(--dio-navy-100);
	color: var(--dio-navy-700);
}
.dio-tile__icon svg { width: 19px; height: 19px; }
.dio-tile__title { margin: 0 0 2px; font-size: var(--dio-fs-sm); font-weight: 700; color: var(--dio-heading); line-height: 1.45; }
.dio-tile__desc  { margin: 0; font-size: var(--dio-fs-xs); color: var(--dio-muted); line-height: 1.55; }

/* =========================================================
   6. JOB CARD (§10, §45)
   ========================================================= */
.dio-job {
	display: flex;
	flex-direction: column;
	gap: var(--dio-s3);
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-left: 3px solid var(--dio-navy-500);
	border-radius: var(--dio-r);
	transition: box-shadow var(--dio-t), border-color var(--dio-t);
	position: relative;
}
.dio-job:hover { box-shadow: var(--dio-shadow-md); }
.dio-job--closed { border-left-color: var(--dio-border-strong); }
.dio-job--soon   { border-left-color: var(--dio-saffron-500); }
.dio-job__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dio-s3); }
.dio-job__org { font-size: var(--dio-fs-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dio-muted); }
.dio-job__title { margin: 0; font-size: var(--dio-fs-base); font-weight: 700; line-height: var(--dio-lh-snug); }
.dio-job__title a { color: var(--dio-heading); text-decoration: none; }
.dio-job__title a:hover { color: var(--dio-navy-600); }
.dio-job__title a::after { content: ""; position: absolute; inset: 0; }
.dio-job__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 45%), 1fr));
	gap: var(--dio-s3);
	padding: var(--dio-s3) 0;
	border-block: 1px solid var(--dio-border);
	margin: 0;
}
.dio-job__fact dt { font-size: var(--dio-fs-xs); color: var(--dio-muted); margin: 0 0 2px; }
.dio-job__fact dd { margin: 0; font-size: var(--dio-fs-sm); font-weight: 600; color: var(--dio-text); }
.dio-job__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s3); flex-wrap: wrap; }
.dio-job__cta { position: relative; z-index: 1; }

/* =========================================================
   7. SCHEME CARD (§11, §46)
   ========================================================= */
.dio-scheme {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dio-s2);
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	border-top: 3px solid var(--dio-saffron-500);
	transition: box-shadow var(--dio-t);
}
.dio-scheme:hover { box-shadow: var(--dio-shadow-md); }
.dio-scheme__dept { font-size: var(--dio-fs-xs); color: var(--dio-muted); font-weight: 600; }
.dio-scheme__title { margin: 0; font-size: var(--dio-fs-base); line-height: var(--dio-lh-snug); }
.dio-scheme__title a { color: var(--dio-heading); text-decoration: none; }
.dio-scheme__title a:hover { color: var(--dio-navy-600); }
.dio-scheme__title a::after { content: ""; position: absolute; inset: 0; }
.dio-scheme__benefit {
	margin: 0;
	font-size: var(--dio-fs-sm);
	color: var(--dio-text-2);
	line-height: 1.65;
}

/* =========================================================
   8. TOOL CARD (§16, §47)
   ========================================================= */
.dio-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dio-s2);
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	transition: border-color var(--dio-t), box-shadow var(--dio-t);
}
.dio-tool:hover { border-color: var(--dio-navy-300); box-shadow: var(--dio-shadow-sm); }
.dio-tool__icon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--dio-r);
	background: var(--dio-navy-100);
	color: var(--dio-navy-700);
}
.dio-tool__icon svg { width: 20px; height: 20px; }
.dio-tool__title { margin: 0; font-size: var(--dio-fs-base); font-weight: 700; }
.dio-tool__title a { color: var(--dio-heading); text-decoration: none; }
.dio-tool__title a::after { content: ""; position: absolute; inset: 0; }
.dio-tool__title a:hover { color: var(--dio-navy-600); }
.dio-tool__desc { margin: 0; font-size: var(--dio-fs-sm); color: var(--dio-muted); line-height: 1.6; }

/* =========================================================
   9. CONTENT BOXES (§43)
   ========================================================= */
.dio-box {
	display: flex;
	gap: var(--dio-s3);
	padding: var(--dio-s4) var(--dio-s5);
	margin: var(--dio-s6) 0;
	border: 1px solid var(--dio-border);
	border-left: 4px solid var(--dio-navy-500);
	border-radius: var(--dio-r);
	background: var(--dio-navy-50);
	font-size: var(--dio-fs-sm);
	line-height: 1.7;
}
.dio-box__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.dio-box__body > :last-child { margin-bottom: 0; }
.dio-box__title { display: block; font-weight: 700; margin-bottom: var(--dio-s1); color: var(--dio-heading); }
.dio-box--important { background: var(--dio-warning-50); border-left-color: var(--dio-warning-500); }
.dio-box--important .dio-box__icon { color: var(--dio-warning-700); }
.dio-box--warning   { background: var(--dio-danger-50);  border-left-color: var(--dio-danger-500); }
.dio-box--warning .dio-box__icon { color: var(--dio-danger-700); }
.dio-box--success   { background: var(--dio-success-50); border-left-color: var(--dio-success-500); }
.dio-box--success .dio-box__icon { color: var(--dio-success-700); }
.dio-box--info .dio-box__icon { color: var(--dio-navy-600); }

/* Quick answer / summary */
.dio-quickanswer {
	padding: var(--dio-s5);
	margin: 0 0 var(--dio-s6);
	background: var(--dio-navy-50);
	border: 1px solid var(--dio-navy-100);
	border-radius: var(--dio-r-lg);
}
.dio-quickanswer__label {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: var(--dio-fs-xs); font-weight: 700; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--dio-navy-600);
	margin-bottom: var(--dio-s2);
}
.dio-quickanswer p { margin: 0; font-size: var(--dio-fs-md); line-height: 1.75; }

/* Key facts grid */
.dio-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 1px;
	margin: var(--dio-s6) 0;
	background: var(--dio-border);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	overflow: hidden;
}
.dio-facts__item { background: var(--dio-surface); padding: var(--dio-s4); }
.dio-facts__k { display: block; font-size: var(--dio-fs-xs); color: var(--dio-muted); margin-bottom: 2px; }
.dio-facts__v { display: block; font-size: var(--dio-fs-sm); font-weight: 700; color: var(--dio-heading); line-height: 1.5; }

/* Documents checklist */
.dio-docs { margin: var(--dio-s6) 0; padding: var(--dio-s5); background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-r); }
.dio-docs__title { margin: 0 0 var(--dio-s3); font-size: var(--dio-fs-base); }
.dio-docs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dio-s2); }
.dio-docs li { display: flex; gap: var(--dio-s2); align-items: flex-start; font-size: var(--dio-fs-sm); line-height: 1.6; }
.dio-docs li::before { content: "✓"; color: var(--dio-success-500); font-weight: 700; flex: none; }

/* Step cards */
.dio-steps { counter-reset: dio-step; margin: var(--dio-s6) 0; display: grid; gap: var(--dio-s4); }
.dio-step {
	counter-increment: dio-step;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--dio-s4);
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
}
.dio-step::before {
	content: counter(dio-step, decimal-leading-zero);
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--dio-navy-600);
	color: #fff;
	font-family: var(--dio-font-en);
	font-size: var(--dio-fs-sm);
	font-weight: 700;
}
.dio-step__title { margin: 0 0 var(--dio-s2); font-size: var(--dio-fs-base); }
.dio-step__body > :last-child { margin-bottom: 0; }
.dio-step__body { font-size: var(--dio-fs-sm); line-height: 1.75; }
.dio-step img { border-radius: var(--dio-r-sm); border: 1px solid var(--dio-border); margin-top: var(--dio-s3); }
@media (max-width: 480px) {
	.dio-step { grid-template-columns: 36px minmax(0, 1fr); gap: var(--dio-s3); padding: var(--dio-s4); }
	.dio-step::before { width: 36px; height: 36px; font-size: var(--dio-fs-xs); }
}

/* =========================================================
   10. OFFICIAL SOURCE BOX (§20)
   ========================================================= */
.dio-official {
	margin: var(--dio-s6) 0;
	border: 1px solid var(--dio-navy-300);
	border-radius: var(--dio-r-lg);
	background: var(--dio-surface);
	overflow: hidden;
}
.dio-official__head {
	display: flex; align-items: center; gap: var(--dio-s2);
	padding: var(--dio-s2) var(--dio-s5);
	background: var(--dio-navy-700);
	color: #fff;
	font-size: var(--dio-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.dio-official__head svg { width: 15px; height: 15px; }
.dio-official__body { padding: var(--dio-s5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dio-s4); }
.dio-official__org { margin: 0 0 2px; font-size: var(--dio-fs-base); font-weight: 700; color: var(--dio-heading); }
.dio-official__url { margin: 0; font-size: var(--dio-fs-sm); color: var(--dio-muted); word-break: break-all; }
.dio-official__note { margin: var(--dio-s3) 0 0; font-size: var(--dio-fs-xs); color: var(--dio-muted); line-height: 1.6; width: 100%; }
.dio-extlink::after {
	content: "";
	display: inline-block;
	width: 0.75em; height: 0.75em;
	margin-inline-start: 0.35em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: baseline;
}

/* =========================================================
   11. FAQ / ACCORDION
   ========================================================= */
.dio-faq { margin: var(--dio-s6) 0; display: grid; gap: var(--dio-s2); }
.dio-faq__item { border: 1px solid var(--dio-border); border-radius: var(--dio-r); background: var(--dio-surface); overflow: hidden; }
.dio-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s3);
	width: 100%;
	padding: var(--dio-s4) var(--dio-s5);
	font: inherit;
	font-size: var(--dio-fs-sm);
	font-weight: 700;
	color: var(--dio-heading);
	text-align: start;
	background: none;
	border: 0;
	cursor: pointer;
	list-style: none;
	line-height: 1.6;
}
.dio-faq__q::-webkit-details-marker { display: none; }
.dio-faq__q:hover { background: var(--dio-navy-50); }
.dio-faq__q::after {
	content: "";
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--dio-navy-500);
	border-bottom: 2px solid var(--dio-navy-500);
	transform: rotate(45deg);
	transition: transform var(--dio-t);
	margin-top: -4px;
}
.dio-faq__item[open] .dio-faq__q::after { transform: rotate(-135deg); margin-top: 4px; }
.dio-faq__a { padding: 0 var(--dio-s5) var(--dio-s5); font-size: var(--dio-fs-sm); line-height: 1.75; color: var(--dio-text-2); }
.dio-faq__a > :last-child { margin-bottom: 0; }

/* =========================================================
   12. TABLE OF CONTENTS
   ========================================================= */
.dio-toc {
	margin: 0 0 var(--dio-s6);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
}
.dio-toc__head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s3);
	width: 100%;
	padding: var(--dio-s3) var(--dio-s5);
	font: inherit; font-weight: 700; font-size: var(--dio-fs-sm);
	color: var(--dio-heading);
	background: var(--dio-surface-2);
	border: 0; cursor: pointer; text-align: start;
	list-style: none;
	border-radius: var(--dio-r) var(--dio-r) 0 0;
}
.dio-toc__head::-webkit-details-marker { display: none; }
.dio-toc__head::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -4px;
	transition: transform var(--dio-t);
}
.dio-toc[open] .dio-toc__head::after { transform: rotate(-135deg); margin-top: 4px; }
.dio-toc ol { margin: 0; padding: var(--dio-s4) var(--dio-s5) var(--dio-s4) calc(var(--dio-s5) + 1.1em); display: grid; gap: var(--dio-s2); }
.dio-toc li { font-size: var(--dio-fs-sm); line-height: 1.55; }
.dio-toc li ol { padding: var(--dio-s2) 0 0 1.1em; }
.dio-toc a { color: var(--dio-text-2); text-decoration: none; }
.dio-toc a:hover, .dio-toc a:focus-visible { color: var(--dio-navy-600); text-decoration: underline; }
.dio-toc a[aria-current="true"] { color: var(--dio-navy-600); font-weight: 700; }

/* =========================================================
   13. BREADCRUMBS (§49)
   ========================================================= */
.dio-breadcrumb { font-size: var(--dio-fs-xs); color: var(--dio-muted); line-height: 1.6; }
.dio-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; }
.dio-breadcrumb li { display: inline-flex; align-items: center; gap: 0.35em; }
.dio-breadcrumb li + li::before { content: "›"; color: var(--dio-border-strong); }
.dio-breadcrumb a { color: var(--dio-muted); text-decoration: none; }
.dio-breadcrumb a:hover { color: var(--dio-navy-600); text-decoration: underline; }
.dio-breadcrumb [aria-current="page"] { color: var(--dio-text-2); font-weight: 600; }

/* =========================================================
   14. AUTHOR BOX / TRUST (§19, §58)
   ========================================================= */
.dio-author {
	display: flex; gap: var(--dio-s4);
	padding: var(--dio-s5);
	margin: var(--dio-s8) 0 0;
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-lg);
}
.dio-author__avatar { flex: none; }
.dio-author__avatar img { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.dio-author__name { margin: 0 0 2px; font-size: var(--dio-fs-base); }
.dio-author__name a { color: var(--dio-heading); text-decoration: none; }
.dio-author__role { margin: 0 0 var(--dio-s2); font-size: var(--dio-fs-xs); color: var(--dio-saffron-700); font-weight: 600; }
.dio-author__bio { margin: 0; font-size: var(--dio-fs-sm); color: var(--dio-text-2); line-height: 1.7; }
@media (max-width: 480px) {
	.dio-author { flex-direction: column; gap: var(--dio-s3); }
}

.dio-editorial-note {
	margin: var(--dio-s6) 0 0;
	padding: var(--dio-s4);
	border: 1px dashed var(--dio-border-strong);
	border-radius: var(--dio-r);
	background: var(--dio-surface-2);
	font-size: var(--dio-fs-xs);
	line-height: 1.75;
	color: var(--dio-text-2);
}

/* =========================================================
   15. SHARE (§51)
   ========================================================= */
.dio-share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dio-s2); margin: var(--dio-s6) 0; }
.dio-share__label { font-size: var(--dio-fs-xs); font-weight: 700; color: var(--dio-muted); margin-inline-end: var(--dio-s1); }
.dio-share__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
	min-width: 44px; min-height: 40px;
	padding: 0 var(--dio-s3);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
	color: var(--dio-text-2);
	font: inherit; font-size: var(--dio-fs-xs); font-weight: 600;
	text-decoration: none; cursor: pointer;
	transition: background var(--dio-t), border-color var(--dio-t), color var(--dio-t);
}
.dio-share__btn:hover { background: var(--dio-navy-50); border-color: var(--dio-navy-300); color: var(--dio-navy-700); }
.dio-share__btn svg { width: 16px; height: 16px; }

/* =========================================================
   16. RESPONSIVE TABLES (§44)
   ========================================================= */
.dio-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--dio-s6) 0;
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
}
.dio-table-wrap:focus-visible { outline: 2px solid var(--dio-navy-500); }
.dio-table { width: 100%; border-collapse: collapse; font-size: var(--dio-fs-sm); min-width: 480px; }
.dio-table caption { caption-side: top; padding: var(--dio-s3) var(--dio-s4); font-size: var(--dio-fs-xs); color: var(--dio-muted); text-align: start; }
.dio-table th, .dio-table td { padding: var(--dio-s3) var(--dio-s4); text-align: start; border-bottom: 1px solid var(--dio-border); line-height: 1.6; vertical-align: top; }
.dio-table thead th { background: var(--dio-surface-2); font-weight: 700; color: var(--dio-heading); white-space: nowrap; }
.dio-table tbody tr:last-child td { border-bottom: 0; }
.dio-table tbody tr:hover { background: var(--dio-navy-50); }
.dio-table--stickyfirst th:first-child,
.dio-table--stickyfirst td:first-child {
	position: sticky; left: 0;
	background: var(--dio-surface);
	border-right: 1px solid var(--dio-border);
	font-weight: 600;
}
.dio-table--stickyfirst thead th:first-child { background: var(--dio-surface-2); z-index: 1; }

/* Editor-inserted plain tables inherit the same treatment */
.dio-entry-content table { width: 100%; border-collapse: collapse; font-size: var(--dio-fs-sm); }
.dio-entry-content :is(th, td) { padding: var(--dio-s3); border: 1px solid var(--dio-border); }
.dio-entry-content thead th { background: var(--dio-surface-2); }

/* =========================================================
   17. PAGINATION
   ========================================================= */
.dio-pagination { margin: var(--dio-s8) 0 0; }
.dio-pagination .nav-links,
.dio-pagination .page-numbers-wrap { display: flex; flex-wrap: wrap; gap: var(--dio-s2); justify-content: center; align-items: center; }
.dio-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 42px; height: 42px;
	padding: 0 var(--dio-s3);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
	color: var(--dio-text-2);
	font-size: var(--dio-fs-sm); font-weight: 600;
	text-decoration: none;
	transition: background var(--dio-t), border-color var(--dio-t), color var(--dio-t);
}
.dio-pagination .page-numbers:hover { background: var(--dio-navy-50); border-color: var(--dio-navy-300); color: var(--dio-navy-700); }
.dio-pagination .page-numbers.current { background: var(--dio-navy-600); border-color: var(--dio-navy-600); color: #fff; }
.dio-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* =========================================================
   18. EMPTY STATES (§55)
   ========================================================= */
.dio-empty {
	text-align: center;
	padding: var(--dio-s12) var(--dio-s5);
	background: var(--dio-surface);
	border: 1px dashed var(--dio-border-strong);
	border-radius: var(--dio-r-lg);
}
.dio-empty__icon { width: 48px; height: 48px; margin: 0 auto var(--dio-s4); color: var(--dio-navy-300); }
.dio-empty__title { margin: 0 0 var(--dio-s2); font-size: var(--dio-fs-lg); }
.dio-empty__text { margin: 0 auto var(--dio-s5); max-width: 46ch; font-size: var(--dio-fs-sm); color: var(--dio-muted); line-height: 1.7; }

/* =========================================================
   19. AD SLOTS (§29) — reserve space to protect CLS
   ========================================================= */
.dio-ad {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin: var(--dio-s6) auto;
	background: var(--dio-surface-2);
	border: 1px dashed var(--dio-border);
	border-radius: var(--dio-r);
	overflow: hidden;
	contain: layout paint;
}
.dio-ad__label {
	font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--dio-muted); padding: 2px 0;
}
.dio-ad--leaderboard { min-height: 100px; width: 100%; }
.dio-ad--inarticle   { min-height: 280px; width: 100%; }
.dio-ad--sidebar     { min-height: 250px; width: 100%; }
@media (min-width: 769px) { .dio-ad--leaderboard { min-height: 120px; } }

/* =========================================================
   20. NEWSLETTER (§50)
   ========================================================= */
.dio-newsletter {
	padding: var(--dio-s6);
	border-radius: var(--dio-r-lg);
	background: linear-gradient(180deg, var(--dio-navy-700), var(--dio-navy-800));
	color: #fff;
}
.dio-newsletter__title { margin: 0 0 var(--dio-s2); font-size: var(--dio-fs-lg); color: #fff; }
.dio-newsletter__text { margin: 0 0 var(--dio-s4); font-size: var(--dio-fs-sm); color: #D6E2F2; line-height: 1.7; }
.dio-newsletter__form { display: flex; gap: var(--dio-s2); flex-wrap: wrap; }
.dio-newsletter__form input[type="email"] {
	flex: 1 1 200px;
	min-height: 44px;
	padding: 0 var(--dio-s3);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--dio-r);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit; font-size: var(--dio-fs-sm);
}
.dio-newsletter__form input::placeholder { color: #A9BEDA; }
.dio-newsletter__form input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.dio-newsletter__note { margin: var(--dio-s3) 0 0; font-size: var(--dio-fs-xs); color: #A9BEDA; }

/* =========================================================
   21. FORMS
   ========================================================= */
.dio-field { display: grid; gap: var(--dio-s2); margin-bottom: var(--dio-s4); }
.dio-label { font-size: var(--dio-fs-sm); font-weight: 600; color: var(--dio-heading); }
.dio-hint { font-size: var(--dio-fs-xs); color: var(--dio-muted); }
.dio-input, .dio-select, .dio-textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem var(--dio-s3);
	border: 1px solid var(--dio-border-strong);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
	color: var(--dio-text);
	font: inherit;
	font-size: var(--dio-fs-base); /* >=16px prevents iOS zoom */
	transition: border-color var(--dio-t), box-shadow var(--dio-t);
}
.dio-textarea { min-height: 120px; padding-top: var(--dio-s3); line-height: 1.7; }
.dio-input:focus, .dio-select:focus, .dio-textarea:focus {
	outline: none;
	border-color: var(--dio-navy-500);
	box-shadow: var(--dio-focus);
}
.dio-input[aria-invalid="true"] { border-color: var(--dio-danger-500); }
.dio-error { font-size: var(--dio-fs-xs); color: var(--dio-danger-700); font-weight: 600; }

/* =========================================================
   22. TAG CLOUD / CHIPS
   ========================================================= */
.dio-chips { display: flex; flex-wrap: wrap; gap: var(--dio-s2); }
.dio-chip {
	display: inline-flex; align-items: center; gap: 0.35em;
	min-height: 34px;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-pill);
	background: var(--dio-surface);
	color: var(--dio-text-2);
	font-size: var(--dio-fs-xs); font-weight: 600;
	text-decoration: none;
	transition: background var(--dio-t), border-color var(--dio-t), color var(--dio-t);
}
.dio-chip:hover, .dio-chip[aria-current="true"] {
	background: var(--dio-navy-600); border-color: var(--dio-navy-600); color: #fff;
}

/* ============================================================
   GAP-FILL LAYER
   Styles for markup hooks introduced by the article, search and
   author templates. Kept at the end so the cascade order stays
   predictable and these can be overridden by a child of a child.
   ============================================================ */

/* Images -------------------------------------------------- */
.dio-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--dio-surface-2);
}

.dio-img--placeholder { object-fit: cover; }

/* Site shell ---------------------------------------------- */
.dio-site { display: flex; flex-direction: column; min-height: 100vh; }
.dio-main { flex: 1 0 auto; display: block; }
.dio-content-col { min-width: 0; }

/* Brand logo ---------------------------------------------- */
.dio-brand__logo { display: block; max-height: 44px; width: auto; }
.dio-brand__logo img { max-height: 44px; width: auto; height: auto; display: block; }

/* Author box body ----------------------------------------- */
.dio-author__body { min-width: 0; }
.dio-author__body > :last-child { margin-bottom: 0; }

/* FAQ section wrapper ------------------------------------- */
.dio-faq-section { margin: var(--dio-s8) 0 0; }
.dio-faq-section > h2 { margin-bottom: var(--dio-s4); }

/* Featured block main column ------------------------------ */
.dio-featured__main { min-width: 0; display: grid; align-content: start; }

/* Footer column ------------------------------------------- */
.dio-footer__col { min-width: 0; }

/* Related posts ------------------------------------------- */
.dio-related { margin-top: var(--dio-s8); }
.dio-related > h2 { margin-bottom: var(--dio-s4); }

/* Search results list ------------------------------------- */
.dio-results { display: grid; gap: var(--dio-s4); }

.dio-result-item {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: var(--dio-s4);
	padding: var(--dio-s4);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.dio-result-item:hover {
	border-color: var(--dio-navy-200, #C7D8EE);
	box-shadow: var(--dio-shadow-sm);
}

.dio-result-item__media { border-radius: var(--dio-r-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.dio-result-item__media img { width: 100%; height: 100%; object-fit: cover; }

.dio-result-item__body { min-width: 0; display: grid; gap: var(--dio-s2); align-content: start; }

.dio-result-item__title {
	margin: 0;
	font-size: var(--dio-fs-lg);
	line-height: 1.35;
	font-weight: 700;
}

.dio-result-item__title a { color: var(--dio-heading); text-decoration: none; }
.dio-result-item__title a:hover { color: var(--dio-navy-600); text-decoration: underline; }

.dio-result-item__excerpt {
	margin: 0;
	font-size: var(--dio-fs-sm);
	color: var(--dio-muted);
	line-height: 1.65;
}

.dio-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dio-s2);
	margin-bottom: var(--dio-s5);
	padding-bottom: var(--dio-s4);
	border-bottom: 1px solid var(--dio-border);
}

.dio-search-filters .dio-chip[aria-current="true"] {
	background: var(--dio-navy-700);
	border-color: var(--dio-navy-700);
	color: #fff;
}

@media (max-width: 560px) {
	.dio-result-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--dio-s3); padding: var(--dio-s3); }
	.dio-result-item__title { font-size: var(--dio-fs-base); }
	.dio-result-item__excerpt { display: none; }
}

/* ============================================================
   WCAG 2.2 SC 2.5.8 — Target Size (Minimum), 24x24 CSS px.
   Standalone (non-inline) links are given enough vertical
   breathing room on touch devices to clear the threshold.
   Links inside a sentence are exempt and left untouched.
   ============================================================ */
@media (pointer: coarse) {
	.dio-section-head__link,
	.dio-card__cat,
	.dio-card__title a,
	.dio-result-item__title a,
	.dio-linklist a,
	.dio-ranklist a,
	.dio-footer__col a,
	.dio-topbar a,
	.dio-breadcrumbs a,
	.dio-row__title a,
	.dio-scheme__title a,
	.dio-tool__title a,
	.dio-job__title a,
	.dio-feature__title a,
	.dio-article__cat,
	.dio-author__name a,
	.dio-article__byline a,
	.dio-tile,
	.dio-quick-action,
	.dio-toc a,
	.dio-toc__list a,
	.dio-footer__legal a,
	.dio-footer__bottom a,
	.dio-footer nav a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}

	/* Chips and icon buttons get a comfortable 44px touch area. */
	.dio-chip,
	.dio-share__btn,
	.dio-nav__toggle,
	.dio-drawer__expand {
		min-height: 44px;
		min-width: 44px;
	}

	.dio-chip {
		padding-block: 0.5rem;
	}
}

/* =========================================================
   CUSTOMIZER STYLE VARIANTS
   Driven by body classes from dio_style_body_classes().
   Each variant only overrides what it must, so the base
   component keeps its focus, hover and contrast behaviour.
   ========================================================= */

/* Cards ------------------------------------------------- */
.dio-cards-shadow .dio-card {
	border-color: transparent;
	box-shadow: var(--dio-shadow-sm);
}
.dio-cards-shadow .dio-card:hover {
	border-color: transparent;
	box-shadow: var(--dio-shadow-md);
}
.dio-cards-flat .dio-card {
	border-color: transparent;
	box-shadow: none;
	background: var(--dio-surface-2);
}
.dio-cards-flat .dio-card:hover {
	border-color: transparent;
	box-shadow: none;
	background: var(--dio-navy-50);
}
/*
 * Focus must stay visible in every variant — it is the keyboard user's only
 * position indicator, so it is never removed along with the border.
 */
.dio-cards-shadow .dio-card:focus-within,
.dio-cards-flat .dio-card:focus-within {
	border-color: var(--dio-navy-500);
	box-shadow: var(--dio-focus);
}

/* Buttons ----------------------------------------------- */
.dio-btns-pill .dio-btn,
.dio-btns-pill .dio-iconbtn { border-radius: var(--dio-r-pill); }
.dio-btns-square .dio-btn,
.dio-btns-square .dio-iconbtn { border-radius: 2px; }

/* Homepage newsletter band --------------------------------
   Wider, centred variant of the sidebar box. The band already
   sits inside a .dio-section, so it drops the outer padding
   and lets the section provide the vertical rhythm. */
.dio-newsletter-band { padding-block: var(--dio-section); }
.dio-newsletter--band {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	padding: var(--dio-s8) var(--dio-s6);
}
.dio-newsletter--band .dio-newsletter__form { justify-content: center; }
/*
 * The shared .dio-widget__title is `display:flex`, so `text-align` on the
 * parent cannot centre it — the flex line has to be centred instead.
 */
.dio-newsletter--band .dio-newsletter__title { justify-content: center; font-size: var(--dio-fs-xl); }
.dio-newsletter--band .dio-newsletter__text { font-size: var(--dio-fs-base); }
@media (max-width: 480px) {
	.dio-newsletter--band { padding: var(--dio-s6) var(--dio-s4); }
}

/* --------------------------------------------------------------- Comments.
 *
 * The theme calls comments_template() on posts and pages but never styled the
 * form, so the submit button fell through to the GeneratePress default: white
 * text on #f56600, a contrast ratio of 3.1:1 — a WCAG 2.2 AA failure (needs
 * 4.5:1) found on the live site. Styling the button with the theme's own
 * contrast-guarded navy token fixes the ratio and makes comments match the
 * rest of the design instead of looking like stock GeneratePress.
 */
.dio :is(.comments-area, .comment-respond, .comment-form) {
	margin-block-start: var(--dio-s6);
	padding-block-start: var(--dio-s6);
	border-block-start: 1px solid var(--dio-border);
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comments-title,
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-reply-title {
	margin-block: 0 var(--dio-s4);
	color: var(--dio-heading);
	font-size: var(--dio-fs-lg);
	font-weight: 700;
	line-height: 1.3;
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-list {
	margin: 0 0 var(--dio-s6);
	padding: 0;
	list-style: none;
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-list li { margin-block-end: var(--dio-s4); }
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-body {
	padding: var(--dio-s4);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-author { font-weight: 600; }
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-metadata,
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-metadata a {
	color: var(--dio-muted);
	font-size: var(--dio-fs-sm);
	text-decoration: none;
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-comment label,
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-author label,
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-email label,
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-url label {
	display: block;
	margin-block-end: var(--dio-s2);
	font-weight: 600;
}
.dio :is(.comments-area, .comment-respond, .comment-form) textarea,
.dio :is(.comments-area, .comment-respond, .comment-form) input[type="text"],
.dio :is(.comments-area, .comment-respond, .comment-form) input[type="email"],
.dio :is(.comments-area, .comment-respond, .comment-form) input[type="url"] {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	background: #fff;
	color: var(--dio-text);
	font: inherit;
	font-size: var(--dio-fs-base);   /* >=16px: stops iOS zoom-on-focus */
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-cookies-consent {
	display: flex;
	gap: var(--dio-s2);
	align-items: flex-start;
}
.dio :is(.comments-area, .comment-respond, .comment-form) .comment-form-cookies-consent label { font-weight: 400; }

/* The contrast fix. Specificity beats GeneratePress's own button rule. */
.dio :is(.comments-area, .comment-respond, .comment-form) input[type="submit"],
.dio :is(.comments-area, .comment-respond, .comment-form) .submit,
.dio :is(.comments-area, .comment-respond, .comment-form) #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--dio-r);
	background: var(--dio-navy-600);
	color: #fff;
	font: inherit;
	font-size: var(--dio-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--dio-t);
}
.dio :is(.comments-area, .comment-respond, .comment-form) input[type="submit"]:hover,
.dio :is(.comments-area, .comment-respond, .comment-form) .submit:hover,
.dio :is(.comments-area, .comment-respond, .comment-form) #submit:hover { background: var(--dio-navy-700); color: #fff; }

/* ------------------------------------------------------- Newsletter form.
 *
 * The subscribe box now posts to the site itself, so it needs a honeypot
 * that is invisible to humans and a status line for the async response.
 */

/* Honeypot. Not display:none — some bots skip hidden inputs, and this also
 * keeps it out of the tab order and off screen readers via aria-hidden. */
.dio-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dio-newsletter__status {
	display: flex;
	gap: var(--dio-s2);
	align-items: flex-start;
	margin: var(--dio-s3) 0 0;
	padding: 0.6rem 0.8rem;
	border-radius: var(--dio-r);
	font-size: var(--dio-fs-sm);
	line-height: 1.5;
}
.dio-newsletter__status[hidden] { display: none; }

/* On the navy newsletter panel these sit on a dark background, so the tones
 * are light-on-dark rather than the usual notice colours. */
.dio-newsletter__status.is-success { background: rgba(22, 163, 74, 0.22); color: #D8F5E3; }
.dio-newsletter__status.is-info    { background: rgba(255, 255, 255, 0.14); color: #E6EEF9; }
.dio-newsletter__status.is-error   { background: rgba(220, 38, 38, 0.24); color: #FFE1E1; }

.dio-newsletter__form button[disabled] { opacity: 0.7; cursor: progress; }

/* The email field should take the free space; the button keeps its size. */
.dio-newsletter__form input[type="email"] { flex: 1 1 12rem; min-width: 0; }

@media (max-width: 480px) {
	.dio-newsletter__form { flex-direction: column; align-items: stretch; }
	.dio-newsletter__form button { width: 100%; }

	/*
	 * Reset the flex shorthand once the form stacks.
	 *
	 * flex-basis resolves against the MAIN axis, so `flex: 1 1 12rem` on a
	 * column flex container is a 12rem = 192px *height*, not a width. The
	 * email field rendered as a giant 326x192 box on every phone while the
	 * button beside it stayed 44px — the bug was invisible on desktop
	 * because the row direction made 12rem a width, which is what it was
	 * written for.
	 *
	 * `flex: 0 0 auto` lets min-height/padding decide the height again.
	 */
	.dio-newsletter__form input[type="email"] {
		flex: 0 0 auto;
		width: 100%;
		height: 44px;
	}
}

/*
 * Anchor targets must clear the sticky header.
 *
 * The newsletter redirect lands on #dio-newsletter, and without a scroll
 * margin the browser aligned the box to y=0 — directly underneath the sticky
 * header, which then covered the section above it. axe reported the links
 * behind the header as "partially obscured" targets, and a real visitor would
 * have found the confirmation message hidden.
 *
 * Article headings already carried scroll-margin-top: 90px; this applies the
 * same allowance to every element that can be an anchor destination.
 */
:target,
#dio-newsletter,
#dio-main,
.dio-toc a[href^="#"]:target {
	scroll-margin-top: calc(var(--dio-adminbar-h) + 90px);
}

/* ==========================================================================
   CONTACT / GRIEVANCE DETAILS
   Printed by [dio_contact_details] and [dio_grievance_details] so the site
   owner edits an email in Settings, never inside published page content.
   ========================================================================== */
.dio-contact-details {
	margin: var(--dio-s5) 0;
	border: 1px solid var(--dio-border);
	border-inline-start: 3px solid var(--dio-saffron-500);
	border-radius: var(--dio-r);
	background: var(--dio-surface-2);
	padding: var(--dio-s2) var(--dio-s4);
}

.dio-contact-details__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dio-s1) var(--dio-s4);
	padding: var(--dio-s3) 0;
	border-block-end: 1px solid var(--dio-border);
}

.dio-contact-details__row:last-child { border-block-end: 0; }

.dio-contact-details__label {
	flex: 0 0 9rem;
	color: var(--dio-muted);
	font-size: var(--dio-fs-sm);
	font-weight: 600;
}

.dio-contact-details__value {
	flex: 1 1 14rem;
	min-width: 0;
	color: var(--dio-text);
	overflow-wrap: anywhere;
}

/* Stack the label above the value on the narrowest phones. */
@media (max-width: 380px) {
	.dio-contact-details__label { flex-basis: 100%; }
}

/* ==========================================================================
   COOKIE CONSENT NOTICE
   Ships hidden (so one cached HTML document serves everyone) and is revealed
   by JS only when no choice is stored — it therefore cannot shift layout.
   ========================================================================== */
.dio-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: calc(var(--dio-z-overlay) + 2);
	background: var(--dio-surface);
	border-block-start: 1px solid var(--dio-border-strong);
	box-shadow: 0 -4px 20px rgba(11, 27, 51, 0.12);
	padding: var(--dio-s4) var(--dio-gutter);
	/* Clear of the iOS home indicator. */
	padding-block-end: max(var(--dio-s4), env(safe-area-inset-bottom));
	transform: translateY(100%);
	transition: transform var(--dio-t) ease;
}

.dio-consent[hidden] { display: none; }

.dio-consent.is-visible { transform: translateY(0); }

.dio-consent__inner {
	max-width: var(--dio-container);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dio-s3) var(--dio-s5);
}

.dio-consent__text {
	flex: 1 1 22rem;
	margin: 0;
	font-size: var(--dio-fs-sm);
	line-height: var(--dio-lh-body);
	color: var(--dio-text-2);
}

.dio-consent__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dio-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dio-s3);
	flex: 0 0 auto;
}

.dio-consent__btn {
	/* 44px minimum touch target — WCAG 2.2 target size. */
	min-height: 44px;
	padding: 0 var(--dio-s5);
	border-radius: var(--dio-r);
	font: inherit;
	font-size: var(--dio-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--dio-t-fast) ease, border-color var(--dio-t-fast) ease;
}

/*
 * White on saffron-600, matching .dio-btn--accent.
 * --dio-saffron-text is a TEXT colour meant for saffron type on a light
 * background; using it as a foreground on a saffron fill gave 1.59:1.
 */
.dio-consent__btn--solid {
	background: var(--dio-saffron-600);
	color: #fff;
	border: 1px solid var(--dio-saffron-600);
}

.dio-consent__btn--solid:hover {
	background: var(--dio-saffron-700);
	border-color: var(--dio-saffron-700);
	color: #fff;
}

.dio-consent__btn--ghost {
	background: transparent;
	color: var(--dio-text);
	border: 1px solid var(--dio-border-strong);
}

.dio-consent__btn--ghost:hover { background: var(--dio-surface-2); }

.dio-consent__btn:focus-visible {
	outline: 2px solid var(--dio-focus);
	outline-offset: 2px;
}

/* On phones the buttons go full width and sit under the text. */
@media (max-width: 600px) {
	.dio-consent__inner { flex-direction: column; align-items: stretch; }
	/*
	 * flex-basis resolves against the MAIN axis. Once the container becomes a
	 * column that basis is a height, so the 22rem above stretched the one-line
	 * notice to 352px and the bar ate half a phone screen. Reset it here.
	 */
	.dio-consent__text { flex: 0 0 auto; }
	.dio-consent__actions { width: 100%; }
	.dio-consent__btn { flex: 1 1 0; padding-inline: var(--dio-s3); }
}

@media (prefers-reduced-motion: reduce) {
	.dio-consent { transition: none; }
}

/* Authors page — a stack of the standard article author boxes. */
.dio-authors {
	display: grid;
	gap: var(--dio-s5);
	margin: var(--dio-s5) 0;
}