/*
Theme Name: DCS MH Guide
Theme URI: https://dcsmh.info/
Author: dcsmh.info
Description: Bilingual (Marathi and English) information theme for an independent guide to the Digital Crop Survey in Maharashtra. Mobile-first, no web fonts, no framework, one stylesheet and one deferred script. Built around a route registry, a content library and a verified-fact table so no unverified date can be published as fact.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dcsmh
Tags: blog, one-column, two-columns, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready, full-width-template
*/

/* ==========================================================================
   1. Design tokens

   Colour choices are not decorative. The green reads as agricultural without
   being folksy; the amber and red are reserved exclusively for "unverified"
   and "warning" states so those states are never confused with ordinary
   emphasis. Every text colour below was chosen to clear WCAG AA (4.5:1)
   against the surface it sits on.
   ========================================================================== */

:root {
	/* Brand */
	--c-green:      #1b5e3f;
	--c-green-dark: #13432c;
	--c-green-mid:  #2d7a55;
	--c-green-pale: #eef6f1;
	--c-green-line: #c5e0d1;

	/* Earth accent, used sparingly for Marathi headings */
	--c-earth:      #8a5a1f;
	--c-earth-pale: #fdf6e9;

	/* States */
	--c-warn:       #9a3412;
	--c-warn-pale:  #fdf1ea;
	--c-warn-line:  #f2cdb8;
	--c-good:       #14653c;
	--c-good-pale:  #eaf6ef;
	--c-good-line:  #b9dfc8;
	--c-note:       #1f4e79;
	--c-note-pale:  #eef4fa;
	--c-note-line:  #c3d9ee;

	/* Neutrals */
	--c-bg:         #f6f7f5;
	--c-surface:    #ffffff;
	--c-border:     #dcdfd9;
	--c-border-soft:#e8eae5;
	--c-text:       #1c2119;
	/* 5.9:1 on --c-surface. Deliberately darker than a typical muted grey. */
	--c-muted:      #55605a;
	--c-link:       #145239;
	--c-link-hover: #0d3826;

	/* Type: system stack only. No web font means no swap and no CLS.
	   Noto Sans Devanagari is named first because it is present on most
	   Android devices and renders Marathi far better than a fallback. */
	--font-body: "Noto Sans Devanagari", "Nirmala UI", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Scale */
	--fs-xs:   0.8125rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.0625rem;
	--fs-lg:   1.1875rem;
	--fs-xl:   1.375rem;
	--fs-2xl:  1.625rem;

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;

	--radius: 6px;
	--radius-sm: 4px;
	--shadow: 0 1px 2px rgba(20, 30, 24, 0.06), 0 1px 3px rgba(20, 30, 24, 0.04);
	--wrap: 1120px;
	--measure: 68ch;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset for in-page anchors so a heading is not hidden under the header. */
	scroll-padding-top: var(--sp-5);
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/* Guards against a long unbroken URL or Gat number forcing sideways scroll. */
	overflow-wrap: break-word;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--sp-3);
	line-height: 1.3;
	font-weight: 700;
	color: var(--c-green-dark);
	/* Never let a heading be the thing that creates horizontal overflow. */
	overflow-wrap: break-word;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
h4 { font-size: var(--fs-base); margin-top: var(--sp-4); }

p, ul, ol, dl, table, figure, pre { margin: 0 0 var(--sp-4); }

a {
	color: var(--c-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover, a:focus { color: var(--c-link-hover); }

/* A visible, high-contrast focus ring on every interactive element. This is
   the single most important accessibility affordance for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--c-earth);
	outline-offset: 2px;
	border-radius: 2px;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

code, pre, kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

code {
	background: var(--c-green-pale);
	border: 1px solid var(--c-green-line);
	border-radius: var(--radius-sm);
	padding: 0.1em 0.35em;
	/* Package names and URLs must be able to wrap on a narrow screen. */
	word-break: break-all;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--sp-6) 0;
}

strong { font-weight: 700; }

/* ==========================================================================
   3. Accessibility utilities
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dcs-skip {
	position: absolute;
	top: -100px;
	left: var(--sp-2);
	z-index: 999;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-green-dark);
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 600;
}

.dcs-skip:focus {
	top: 0;
	color: #fff;
}

/* ==========================================================================
   4. Bilingual display

   Both languages are always in the HTML. The toggle narrows the view for the
   reader; it does not remove content from the document. With JavaScript
   unavailable, [data-reading-lang] is absent and both languages show, which is
   the honest default.
   ========================================================================== */

.dcs-lang { display: block; }
span.dcs-lang, .dcs-h-mr, .dcs-h-en { display: inline; }

/* Marathi headings get the earth accent so the two scripts are visually
   distinguishable at a glance when both are shown. */
.dcs-h-mr {
	display: block;
	color: var(--c-green-dark);
}

.dcs-h-en {
	display: block;
	color: var(--c-muted);
	font-size: 0.86em;
	font-weight: 600;
}

/* When only one language is selected, the second heading line is redundant. */
html[data-reading-lang="mr"] [data-lang="en"],
html[data-reading-lang="mr"] .dcs-h-en,
html[data-reading-lang="mr"] .dcs-toc-en,
html[data-reading-lang="mr"] .dcs-related-en,
html[data-reading-lang="mr"] .dcs-gloss-en { display: none; }

html[data-reading-lang="en"] [data-lang="mr"],
html[data-reading-lang="en"] .dcs-h-mr,
html[data-reading-lang="en"] .dcs-toc-mr,
html[data-reading-lang="en"] .dcs-related-mr,
html[data-reading-lang="en"] .dcs-gloss-mr { display: none; }

/* With one language chosen, the surviving heading takes full weight. */
html[data-reading-lang="en"] .dcs-h-en {
	font-size: 1em;
	font-weight: 700;
	color: var(--c-green-dark);
}

/* Separate the two language blocks when both are visible, so a reader does not
   accidentally read one paragraph as the continuation of the other. */
html[data-reading-lang="both"] div.dcs-lang[data-lang="en"] {
	border-top: 1px dashed var(--c-border);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.dcs-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.dcs-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--sp-4);
}

.dcs-content { flex: 1 0 auto; padding-bottom: var(--sp-6); }

/* Mobile first: single column. The sidebar follows the content in the source
   order, which is also the order a screen reader and a phone user want. */
.dcs-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	padding-top: var(--sp-5);
}

.dcs-body--narrow { max-width: 46rem; margin: 0 auto; }

.dcs-main { min-width: 0; }

/* ==========================================================================
   6. Header
   ========================================================================== */

.dcs-noticebar {
	background: var(--c-earth-pale);
	border-bottom: 1px solid #eddfc4;
	color: #6b4715;
	font-size: var(--fs-sm);
	padding: var(--sp-2) 0;
}

.dcs-noticebar .dcs-wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
}

.dcs-noticebar svg { flex: 0 0 auto; margin-top: 3px; }

.dcs-header {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}

.dcs-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-3);
	flex-wrap: wrap;
}

.dcs-brand-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	color: inherit;
}

.dcs-brand-mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	background: var(--c-green);
	color: #fff;
	border-radius: var(--radius);
}

.dcs-brand-name {
	display: block;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--c-green-dark);
	line-height: 1.2;
}

.dcs-brand-tag {
	display: block;
	font-size: var(--fs-xs);
	color: var(--c-muted);
	line-height: 1.35;
}

.custom-logo-link { display: inline-block; }
.custom-logo { max-height: 52px; width: auto; }

.dcs-header-tools {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

/* Language toggle: a radio group styled as a segmented control. The inputs are
   real radios positioned off-screen, so keyboard and screen-reader behaviour is
   the browser's own. */
.dcs-langbar-set {
	display: flex;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: var(--c-surface);
}

.dcs-langbar-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.dcs-langbar-label {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-muted);
	cursor: pointer;
	border-right: 1px solid var(--c-border-soft);
	white-space: nowrap;
	/* 44px minimum touch target height. */
	min-height: 40px;
	display: flex;
	align-items: center;
}

.dcs-langbar-label:last-of-type { border-right: 0; }

.dcs-langbar-input:checked + .dcs-langbar-label {
	background: var(--c-green);
	color: #fff;
}

.dcs-langbar-input:focus-visible + .dcs-langbar-label {
	outline: 3px solid var(--c-earth);
	outline-offset: -3px;
}

.dcs-navtoggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	color: var(--c-green-dark);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.dcs-navtoggle[aria-expanded="true"] {
	background: var(--c-green);
	color: #fff;
	border-color: var(--c-green);
}

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.dcs-nav { background: var(--c-green); }

.dcs-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* On a phone the menu is collapsed by default and revealed by the toggle. The
   [hidden] state is set in JavaScript; without it the menu is simply visible,
   which is the correct no-JS fallback. */
.dcs-nav-list[hidden] { display: none; }

.dcs-nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); position: relative; }
.dcs-nav-list > li:last-child { border-bottom: 0; }

.dcs-nav-list a {
	display: block;
	padding: var(--sp-3) 0;
	color: #eaf3ee;
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	/* 44px touch target. */
	min-height: 44px;
	display: flex;
	align-items: center;
}

.dcs-nav-list a:hover,
.dcs-nav-list a:focus { color: #fff; text-decoration: underline; }

.dcs-nav-list .current-menu-item > a,
.dcs-nav-list a[aria-current="page"] {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.dcs-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: #eaf3ee;
	cursor: pointer;
}

.dcs-submenu-toggle .dcs-caret { transition: transform 0.15s ease; transform: rotate(90deg); }
.dcs-submenu-toggle[aria-expanded="true"] .dcs-caret { transform: rotate(-90deg); }

.dcs-submenu {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--sp-2) var(--sp-4);
}

.dcs-submenu[hidden] { display: none; }
.dcs-submenu a { font-weight: 500; min-height: 40px; }

/* ==========================================================================
   8. Hero
   ========================================================================== */

/* The hero sits inside <main>, which already has the grid's top padding, so it
   only needs bottom spacing of its own. */
.dcs-hero {
	padding: 0 0 var(--sp-5);
	max-width: var(--measure);
}

.dcs-hero-title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--sp-3);
}

.dcs-hero-title .dcs-lang { display: block; }
.dcs-hero-title .dcs-lang[data-lang="en"] {
	font-size: 0.72em;
	color: var(--c-muted);
	margin-top: var(--sp-1);
}

html[data-reading-lang="en"] .dcs-hero-title .dcs-lang[data-lang="en"] {
	font-size: 1em;
	color: var(--c-green-dark);
	margin-top: 0;
}

.dcs-hero-sub {
	font-size: var(--fs-md);
	color: var(--c-text);
	margin-bottom: var(--sp-3);
}

.dcs-hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin: 0;
}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.dcs-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: var(--sp-5);
	overflow: hidden;
}

.dcs-card-hd {
	padding: var(--sp-4);
	border-bottom: 1px solid var(--c-border-soft);
	background: linear-gradient(to bottom, var(--c-green-pale), var(--c-surface));
}

.dcs-card-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-lg);
}

.dcs-card-title .dcs-card-icon {
	color: var(--c-green);
	flex: 0 0 auto;
	align-self: center;
}

.dcs-card-title .dcs-h-mr,
.dcs-card-title .dcs-h-en { flex: 1 1 100%; }

.dcs-card-more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	margin-top: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.dcs-card-bd { padding: var(--sp-4); }

.dcs-figure { margin: 0; }
.dcs-figure img { width: 100%; }
.dcs-figure figcaption {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	background: var(--c-bg);
}

/* ==========================================================================
   10. Prose
   ========================================================================== */

.dcs-prose { max-width: var(--measure); }
.dcs-prose > *:last-child { margin-bottom: 0; }

.dcs-lede {
	font-size: var(--fs-md);
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-4);
	border-bottom: 2px solid var(--c-green-line);
}

.dcs-lede p:last-child { margin-bottom: 0; }

.dcs-prose ul, .dcs-prose ol { padding-left: 1.4em; }
.dcs-prose li { margin-bottom: var(--sp-2); }
.dcs-prose ul ul, .dcs-prose ol ol { margin-top: var(--sp-2); }

.dcs-sec { margin-bottom: var(--sp-5); }
.dcs-sec:last-child { margin-bottom: 0; }

.dcs-sec .dcs-h:first-child { margin-top: 0; }

/* Anchored headings get a marker so a linked section is obvious on arrival. */
.dcs-sec > .dcs-h {
	padding-left: var(--sp-3);
	border-left: 4px solid var(--c-green);
}

.dcs-reviewed,
.dcs-updated {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

/* The "Last updated" line sits at the very top of a content page, so it needs
   a little breathing room below it before the lede. */
.dcs-updated {
	margin: 0 0 var(--sp-3);
	padding: var(--sp-1) var(--sp-2);
	background: var(--c-green-pale);
	border-radius: var(--radius-sm);
	width: fit-content;
	font-weight: 600;
	color: var(--c-green-dark);
}

.dcs-cta {
	padding: var(--sp-3);
	background: var(--c-green-pale);
	border: 1px solid var(--c-green-line);
	border-radius: var(--radius);
}

/* ==========================================================================
   11. Callouts
   ========================================================================== */

.dcs-callout {
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	margin: var(--sp-4) 0;
	border: 1px solid;
	border-left-width: 4px;
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.dcs-callout-icon { flex: 0 0 auto; padding-top: 2px; }
.dcs-callout-bd { min-width: 0; }
.dcs-callout-bd > *:last-child { margin-bottom: 0; }
.dcs-callout p { margin-bottom: var(--sp-2); }

.dcs-callout--info { background: var(--c-note-pale); border-color: var(--c-note-line); border-left-color: var(--c-note); }
.dcs-callout--info .dcs-callout-icon { color: var(--c-note); }

.dcs-callout--warn { background: var(--c-warn-pale); border-color: var(--c-warn-line); border-left-color: var(--c-warn); }
.dcs-callout--warn .dcs-callout-icon { color: var(--c-warn); }

.dcs-callout--good { background: var(--c-good-pale); border-color: var(--c-good-line); border-left-color: var(--c-good); }
.dcs-callout--good .dcs-callout-icon { color: var(--c-good); }

.dcs-callout--note { background: var(--c-earth-pale); border-color: #eddfc4; border-left-color: var(--c-earth); }
.dcs-callout--note .dcs-callout-icon { color: var(--c-earth); }

.dcs-independence { font-size: var(--fs-xs); }

/* ==========================================================================
   12. Steps
   ========================================================================== */

.dcs-steps {
	list-style: none;
	counter-reset: dcs-step;
	padding: 0;
	margin: var(--sp-4) 0;
}

.dcs-step {
	counter-increment: dcs-step;
	position: relative;
	padding: 0 0 var(--sp-4) 2.6rem;
	margin: 0;
}

.dcs-step::before {
	content: counter(dcs-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	background: var(--c-green);
	color: #fff;
	border-radius: 50%;
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* Connecting line between steps, so the sequence reads as one flow. */
.dcs-step::after {
	content: "";
	position: absolute;
	left: 0.93rem;
	top: 1.9rem;
	bottom: 0;
	width: 2px;
	background: var(--c-green-line);
}

.dcs-step:last-child { padding-bottom: 0; }
.dcs-step:last-child::after { display: none; }
.dcs-step > .dcs-lang > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Tables
   ========================================================================== */

.dcs-table-wrap {
	overflow-x: auto;
	margin: var(--sp-4) 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	-webkit-overflow-scrolling: touch;
}

.dcs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	margin: 0;
}

.dcs-table caption {
	padding: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	text-align: left;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-border);
}

.dcs-table th, .dcs-table td {
	padding: var(--sp-3);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--c-border-soft);
}

.dcs-table thead th {
	background: var(--c-green-pale);
	color: var(--c-green-dark);
	font-weight: 700;
	white-space: nowrap;
}

.dcs-table tbody th { font-weight: 600; color: var(--c-green-dark); }
.dcs-table tbody tr:last-child th,
.dcs-table tbody tr:last-child td { border-bottom: 0; }

/* Fact table: unverified rows are visually marked so a reader cannot mistake
   the honest placeholder for a real value. */
.dcs-table--facts tr.is-unconfirmed td { color: var(--c-warn); font-style: italic; }
.dcs-table--facts tr.is-confirmed td { font-weight: 600; }

.dcs-factbox { border-color: var(--c-green-line); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.dcs-faq { margin: var(--sp-4) 0; }

.dcs-faq-item {
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	margin-bottom: var(--sp-2);
	background: var(--c-surface);
	overflow: hidden;
}

.dcs-faq-q {
	padding: var(--sp-3) var(--sp-4);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.75rem;
	color: var(--c-green-dark);
}

.dcs-faq-q::-webkit-details-marker { display: none; }

.dcs-faq-q::after {
	content: "+";
	position: absolute;
	right: var(--sp-4);
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--c-green);
	line-height: 1;
}

.dcs-faq-item[open] .dcs-faq-q { background: var(--c-green-pale); }
.dcs-faq-item[open] .dcs-faq-q::after { content: "\2212"; }

.dcs-faq-q .dcs-h-en { font-weight: 500; }

.dcs-faq-a {
	padding: var(--sp-3) var(--sp-4) var(--sp-4);
	border-top: 1px solid var(--c-border-soft);
	font-size: var(--fs-sm);
}

.dcs-faq-a > .dcs-lang > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   15. Table of contents, related, sources
   ========================================================================== */

.dcs-toc {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-5);
	font-size: var(--fs-sm);
}

.dcs-toc-h { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.dcs-toc-h .dcs-h-en { font-size: 0.9em; }
.dcs-toc-list { margin: 0; padding-left: 1.3em; }
.dcs-toc-list li { margin-bottom: var(--sp-1); }
.dcs-toc-en { display: block; font-size: 0.88em; color: var(--c-muted); }
html[data-reading-lang="en"] .dcs-toc-en { font-size: 1em; color: inherit; }

.dcs-related, .dcs-sources {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 2px solid var(--c-green-line);
}

.dcs-related-h, .dcs-sources-h { font-size: var(--fs-md); margin-top: 0; }

.dcs-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-2);
}

.dcs-related-item a {
	display: block;
	padding: var(--sp-3);
	background: var(--c-green-pale);
	border: 1px solid var(--c-green-line);
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-sm);
}

.dcs-related-item a:hover, .dcs-related-item a:focus {
	background: #e2f0e8;
	text-decoration: underline;
}

.dcs-related-en { display: block; font-size: 0.88em; font-weight: 500; color: var(--c-muted); }
html[data-reading-lang="en"] .dcs-related-en { font-size: 1em; font-weight: 600; color: inherit; }

.dcs-sources-list { padding-left: 1.3em; font-size: var(--fs-sm); }
.dcs-sources-list li { margin-bottom: var(--sp-2); }
.dcs-src-pub { color: var(--c-muted); font-size: 0.92em; }

/* External links carry a visible marker, so a reader knows before clicking. */
.dcs-ext-i::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.85em;
	color: var(--c-muted);
}

/* ==========================================================================
   16. Buttons
   ========================================================================== */

.dcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	/* 44px minimum height for a comfortable touch target. */
	min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}

.dcs-btn--primary {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.dcs-btn--primary:hover, .dcs-btn--primary:focus {
	background: var(--c-green-dark);
	border-color: var(--c-green-dark);
	color: #fff;
}

.dcs-btn--ghost {
	background: var(--c-surface);
	border-color: var(--c-border);
	color: var(--c-green-dark);
}

.dcs-btn--ghost:hover, .dcs-btn--ghost:focus {
	background: var(--c-green-pale);
	border-color: var(--c-green-line);
}

.dcs-btn--block { width: 100%; }

/* ==========================================================================
   17. Homepage components
   ========================================================================== */

.dcs-chooser, .dcs-problems, .dcs-tiles, .dcs-postlist, .dcs-linklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* App chooser */
.dcs-chooser { display: grid; gap: var(--sp-2); }

.dcs-chooser-link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 4px solid var(--c-green);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
}

.dcs-chooser-link:hover, .dcs-chooser-link:focus {
	background: var(--c-green-pale);
	border-left-color: var(--c-green-dark);
}

.dcs-chooser-icon { color: var(--c-green); }
.dcs-chooser-body { min-width: 0; }

.dcs-chooser-who {
	display: block;
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--c-green-dark);
	margin-bottom: 2px;
}

.dcs-chooser-what {
	display: block;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.dcs-chooser-arrow { color: var(--c-muted); }

/* Tiles */
.dcs-tiles { display: grid; gap: var(--sp-2); }

.dcs-tile-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 56px;
	padding: var(--sp-3);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--c-green-dark);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.dcs-tile-link:hover, .dcs-tile-link:focus {
	background: var(--c-green-pale);
	border-color: var(--c-green-line);
}

.dcs-tile-icon { color: var(--c-green); flex: 0 0 auto; }
.dcs-tile-text { min-width: 0; }
.dcs-tile-text .dcs-lang[data-lang="en"] { font-size: 0.88em; font-weight: 500; color: var(--c-muted); }
html[data-reading-lang="en"] .dcs-tile-text .dcs-lang[data-lang="en"] { font-size: 1em; font-weight: 600; color: inherit; }

/* Problem shortcuts */
.dcs-problems { display: grid; gap: var(--sp-1); }

.dcs-problems a {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius);
	text-decoration: none;
	font-size: var(--fs-sm);
	color: var(--c-text);
	align-items: center;
}

.dcs-problems a:hover, .dcs-problems a:focus {
	background: var(--c-warn-pale);
	color: var(--c-warn);
}

.dcs-problems svg { color: var(--c-warn); flex: 0 0 auto; }

/* Post list */
.dcs-postlist { display: grid; gap: var(--sp-3); }
.dcs-postlist-item { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border-soft); }
.dcs-postlist-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dcs-postlist-item a { font-weight: 600; font-size: var(--fs-sm); }
.dcs-postlist-date { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; }

/* Generic link list */
.dcs-linklist { display: grid; gap: var(--sp-1); }
.dcs-linklist li { padding: var(--sp-1) 0; }
.dcs-linklist a { font-size: var(--fs-sm); font-weight: 500; }
.dcs-linklist .dcs-lang[data-lang="en"] { font-size: 0.9em; color: var(--c-muted); }
html[data-reading-lang="en"] .dcs-linklist .dcs-lang[data-lang="en"] { font-size: 1em; color: inherit; }
.dcs-linklist-date { display: block; font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   18. Official links directory
   ========================================================================== */

.dcs-oflinks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }

.dcs-oflink {
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.dcs-oflink-hd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
}

.dcs-oflink-title { margin: 0; font-size: var(--fs-md); flex: 1 1 auto; }

.dcs-badge {
	display: inline-block;
	padding: 2px var(--sp-2);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dcs-badge--gov { background: var(--c-good-pale); color: var(--c-good); border: 1px solid var(--c-good-line); }
.dcs-badge--store { background: var(--c-note-pale); color: var(--c-note); border: 1px solid var(--c-note-line); }

.dcs-oflink-pub {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin-bottom: var(--sp-2);
}

.dcs-oflink-pub svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-green); }
.dcs-oflink-purpose { font-size: var(--fs-sm); }
.dcs-oflink-purpose p { margin-bottom: var(--sp-2); }
.dcs-oflink-url { margin-bottom: var(--sp-3); }
.dcs-oflink-go { margin: 0; }

/* Interstitial */
.dcs-leaving-detail {
	margin: var(--sp-4) 0;
	padding: var(--sp-4);
	background: var(--c-bg);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.dcs-leaving-detail dt { font-weight: 700; color: var(--c-green-dark); margin-top: var(--sp-3); }
.dcs-leaving-detail dt:first-child { margin-top: 0; }
.dcs-leaving-detail dd { margin: var(--sp-1) 0 0; }

.dcs-leaving-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   19. Glossary
   ========================================================================== */

.dcs-gloss { margin: 0; }

.dcs-gloss-row {
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--c-border-soft);
}

.dcs-gloss-row:last-child { border-bottom: 0; }

.dcs-gloss-term { margin: 0 0 var(--sp-2); }

.dcs-gloss-mr {
	display: block;
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--c-green-dark);
}

.dcs-gloss-trans {
	display: block;
	font-size: var(--fs-xs);
	color: var(--c-earth);
	font-style: italic;
}

.dcs-gloss-en { display: block; font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.dcs-gloss-desc { margin: 0; font-size: var(--fs-sm); }
.dcs-gloss-desc > .dcs-lang > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   20. Article, archive, pagination
   ========================================================================== */

.dcs-postmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.dcs-archive { list-style: none; padding: 0; margin: 0; }

.dcs-archive-item {
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-border-soft);
}

.dcs-archive-item:first-child { padding-top: 0; }
.dcs-archive-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dcs-archive-title { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.dcs-archive-meta { font-size: var(--fs-xs); color: var(--c-muted); margin: 0 0 var(--sp-2); }
.dcs-archive-excerpt { font-size: var(--fs-sm); margin: 0; color: var(--c-text); }

.dcs-tags {
	padding: var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--c-border-soft);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.dcs-tags-label { font-weight: 600; margin-right: var(--sp-1); }

.dcs-adjacent { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.dcs-adjacent a {
	display: block;
	padding: var(--sp-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	text-decoration: none;
}

.dcs-adjacent a:hover, .dcs-adjacent a:focus { background: var(--c-green-pale); }
.dcs-adjacent-label { display: block; font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dcs-adjacent-title { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--c-link); }

.navigation.pagination { margin-top: var(--sp-5); }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-surface);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.page-numbers.current {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.page-numbers.dots { border: 0; background: none; min-width: auto; }

/* ==========================================================================
   21. Breadcrumbs
   ========================================================================== */

.dcs-crumbs { margin-bottom: var(--sp-4); font-size: var(--fs-xs); }

.dcs-crumbs-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-1);
	padding: 0;
	margin: 0;
}

.dcs-crumb { display: flex; align-items: center; gap: var(--sp-1); color: var(--c-muted); }
.dcs-crumb-sep { color: var(--c-border); }
.dcs-crumb [aria-current="page"] { font-weight: 600; color: var(--c-text); }

/* ==========================================================================
   22. Forms
   ========================================================================== */

.dcs-form { max-width: 34rem; }
.dcs-field { margin-bottom: var(--sp-4); }

.dcs-field label {
	display: block;
	font-weight: 600;
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-1);
	color: var(--c-green-dark);
}

.dcs-req { color: var(--c-warn); margin-left: 2px; }

.dcs-field input[type="text"],
.dcs-field input[type="email"],
.dcs-field input[type="url"],
.dcs-field select,
.dcs-field textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	font: inherit;
	/* 16px minimum stops iOS Safari zooming on focus. */
	font-size: 1rem;
	background: var(--c-surface);
	color: var(--c-text);
}

.dcs-field textarea { min-height: 8rem; resize: vertical; }

.dcs-help {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

/* Honeypot. Hidden without display:none, which some bots detect. */
.dcs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dcs-search { margin-bottom: var(--sp-4); }
.dcs-search-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); color: var(--c-green-dark); }
.dcs-search-row { display: flex; gap: var(--sp-2); }

.dcs-search-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	font: inherit;
	font-size: 1rem;
}

.dcs-search-btn {
	flex: 0 0 auto;
	width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	background: var(--c-green);
	border: 1px solid var(--c-green);
	border-radius: var(--radius);
	color: #fff;
	cursor: pointer;
}

.dcs-search-btn:hover, .dcs-search-btn:focus { background: var(--c-green-dark); }

/* ==========================================================================
   23. Sidebar widgets
   ========================================================================== */

.dcs-sidebar { min-width: 0; }

.dcs-widget {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
}

.dcs-widget:last-child { margin-bottom: 0; }
.dcs-widget > *:last-child { margin-bottom: 0; }

.dcs-widget-title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--c-border-soft);
}

.dcs-widget-title svg { color: var(--c-green); flex: 0 0 auto; }
.dcs-widget-title .dcs-lang { display: inline; }

.dcs-widget--search { background: none; border: 0; padding: 0; }
.dcs-widget--cta { background: var(--c-green-pale); border-color: var(--c-green-line); }
.dcs-widget--safety { background: var(--c-warn-pale); border-color: var(--c-warn-line); }

.dcs-widget-list, .dcs-widget-checklist { list-style: none; padding: 0; margin: 0; }
.dcs-widget-list li { border-bottom: 1px solid var(--c-border-soft); }
.dcs-widget-list li:last-child { border-bottom: 0; }

.dcs-widget-list a {
	display: block;
	padding: var(--sp-2) 0;
	min-height: 40px;
	text-decoration: none;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dcs-widget-list a:hover, .dcs-widget-list a:focus { text-decoration: underline; }
.dcs-widget-list .is-current > a { font-weight: 700; color: var(--c-green-dark); }
.dcs-widget-list .dcs-lang[data-lang="en"] { font-size: 0.88em; color: var(--c-muted); }
html[data-reading-lang="en"] .dcs-widget-list .dcs-lang[data-lang="en"] { font-size: 1em; color: inherit; }

.dcs-widget-checklist li {
	position: relative;
	padding: 0 0 var(--sp-2) 1.4rem;
	font-size: var(--fs-xs);
}

.dcs-widget-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--c-warn);
	font-weight: 700;
}

/* ==========================================================================
   24. Footer
   ========================================================================== */

.dcs-footer {
	background: var(--c-green-dark);
	color: #d9e7df;
	padding: var(--sp-6) 0 var(--sp-4);
	font-size: var(--fs-sm);
	margin-top: auto;
}

.dcs-footer a { color: #cfe4d8; }
.dcs-footer a:hover, .dcs-footer a:focus { color: #fff; }

.dcs-footer-widgets { margin-bottom: var(--sp-5); }
.dcs-footer-widgets .dcs-widget { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: inherit; }
.dcs-footer-widgets .dcs-widget-title { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.15); }

.dcs-footer-top { display: grid; gap: var(--sp-5); }

.dcs-footer-h {
	font-size: var(--fs-sm);
	color: #fff;
	margin: 0 0 var(--sp-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dcs-footer-about p { font-size: var(--fs-xs); line-height: 1.6; margin-bottom: var(--sp-2); }
.dcs-footer-list { list-style: none; padding: 0; margin: 0; }
.dcs-footer-list li { margin-bottom: var(--sp-1); }

.dcs-footer-list a {
	display: inline-block;
	padding: var(--sp-1) 0;
	font-size: var(--fs-xs);
	text-decoration: none;
}

.dcs-footer-list a:hover, .dcs-footer-list a:focus { text-decoration: underline; }

.dcs-footer-legal {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dcs-footer-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: 1.6;
	padding: var(--sp-3);
	background: rgba(0, 0, 0, 0.18);
	border-radius: var(--radius);
	margin-bottom: var(--sp-3);
}

.dcs-footer-disclaimer svg { flex: 0 0 auto; margin-top: 2px; color: #ffc98a; }
.dcs-copyright { font-size: var(--fs-xs); color: #b6cdc0; margin: 0; }

.dcs-totop {
	position: fixed;
	right: var(--sp-3);
	bottom: var(--sp-3);
	z-index: 50;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--c-green);
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	font-size: 1.1rem;
}

.dcs-totop[hidden] { display: none; }
.dcs-totop:hover, .dcs-totop:focus { background: var(--c-green-dark); color: #fff; }

/* ==========================================================================
   24b. Remaining structural hooks

   These carry no visual weight of their own on mobile, but each needs a rule
   so the class is not silently dead and so wider-screen behaviour has
   something to attach to.
   ========================================================================== */

.dcs-brand-text { min-width: 0; }
.dcs-footer-col { min-width: 0; }
.dcs-article { min-width: 0; }
.dcs-chooser-item { min-width: 0; }
.dcs-sec--faq { margin-top: var(--sp-6); }
.dcs-widget--nav { padding-bottom: var(--sp-3); }

.dcs-postmeta-sep { color: var(--c-border); }

/* Label beside the hamburger. Hidden on the narrowest screens where the icon
   alone is unambiguous and horizontal room is scarce; the button keeps its
   accessible name either way. */
.dcs-navtoggle-text { display: none; }

.dcs-adjacent-prev, .dcs-adjacent-next { min-width: 0; }
.dcs-adjacent-next { text-align: right; }

@media (min-width: 26em) {
	.dcs-navtoggle-text { display: inline; }
}

/* ==========================================================================
   25. Legal and policy pages

   These render editable post_content through page.php, so the selectors hang
   off the trust-group body class rather than a template-specific wrapper.
   ========================================================================== */

.dcsmh-group-trust .dcs-card-bd { font-size: var(--fs-sm); }
.dcsmh-group-trust .dcs-card-bd h2 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.dcsmh-group-trust .dcs-card-bd h2:first-of-type { margin-top: 0; }
.dcsmh-group-trust .dcs-card-bd table { font-size: var(--fs-xs); }

/* Bilingual summary block at the top of each policy page. */
.dcs-starter-summary {
	padding: var(--sp-4);
	margin-bottom: var(--sp-5);
	background: var(--c-green-pale);
	border: 1px solid var(--c-green-line);
	border-left: 4px solid var(--c-green);
	border-radius: var(--radius);
}

.dcs-starter-summary p { margin-bottom: var(--sp-2); }
.dcs-starter-summary p:last-child { margin-bottom: 0; }

html[data-reading-lang="mr"] .dcs-summary-en,
html[data-reading-lang="en"] .dcs-summary-mr { display: none; }

html[data-reading-lang="both"] .dcs-summary-en {
	border-top: 1px dashed var(--c-green-line);
	padding-top: var(--sp-2);
}

/* A note addressed to the site owner. Deliberately conspicuous: an unfilled
   placeholder on a legal page is worse than one that admits it. */
.dcs-editor-note {
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-earth-pale);
	border: 1px dashed var(--c-earth);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	color: #6b4715;
}

.dcs-editor-note strong { color: var(--c-earth); }

/* WordPress block defaults the theme needs to cover, since these pages are
   real block content rather than theme-rendered markup. */
.wp-block-table { overflow-x: auto; margin: var(--sp-4) 0; }

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--sp-3);
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--c-border-soft);
}

.wp-block-table thead th { background: var(--c-green-pale); color: var(--c-green-dark); }
.wp-block-list { padding-left: 1.4em; }
.wp-block-list li { margin-bottom: var(--sp-2); }
.wp-block-heading { scroll-margin-top: var(--sp-5); }

.wp-block-quote {
	margin: var(--sp-4) 0;
	padding-left: var(--sp-4);
	border-left: 4px solid var(--c-green);
	font-style: normal;
}

.wp-block-image { margin: var(--sp-4) 0; }
.wp-block-image figcaption { font-size: var(--fs-xs); color: var(--c-muted); }

/* ==========================================================================
   26. Author and editorial trust
   ========================================================================== */

.dcs-card-foot {
	padding: var(--sp-4);
	border-top: 1px solid var(--c-border-soft);
	background: var(--c-bg);
}

.dcs-authorbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: start;
}

.dcs-authorbox-avatar .dcs-avatar,
.dcs-authorbox-avatar img {
	border-radius: 50%;
	border: 2px solid var(--c-green-line);
}

.dcs-authorbox-name {
	margin: 0 0 var(--sp-1);
	font-weight: 700;
	font-size: var(--fs-md);
}

.dcs-authorbox-name a { text-decoration: none; }
.dcs-authorbox-name a:hover, .dcs-authorbox-name a:focus { text-decoration: underline; }

.dcs-authorbox-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px var(--sp-2);
	background: var(--c-good-pale);
	border: 1px solid var(--c-good-line);
	border-radius: 999px;
	color: var(--c-good);
	font-size: 0.6875rem;
	font-weight: 700;
	vertical-align: middle;
}

.dcs-authorbox-role {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.dcs-authorbox-body { min-width: 0; }
.dcs-authorbox-bio { font-size: var(--fs-sm); }
.dcs-authorbox-bio p { margin-bottom: var(--sp-2); }
.dcs-authorbox-bio p:last-child { margin-bottom: 0; }

.dcs-authorbox-expertise {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 0;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface);
	border-left: 3px solid var(--c-green-line);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.dcs-authorbox-expertise svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-green); }
.dcs-authorbox-links { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); }

.dcs-authorbox--compact .dcs-authorbox-name { font-size: var(--fs-base); }

.dcs-contributors { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }

.dcs-contributor {
	padding: var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.dcs-editorial-line {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin: var(--sp-5) 0 0;
	padding: var(--sp-3);
	background: var(--c-note-pale);
	border: 1px solid var(--c-note-line);
	border-radius: var(--radius);
	font-size: var(--fs-xs);
	color: var(--c-note);
}

.dcs-editorial-line svg { flex: 0 0 auto; margin-top: 2px; }
.dcs-editorial-line a { color: var(--c-note); font-weight: 600; }

/* ==========================================================================
   27. Social profiles
   ========================================================================== */

.dcs-social {
	list-style: none;
	padding: 0;
	margin: var(--sp-3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.dcs-social a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	padding: var(--sp-1) var(--sp-3);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius);
	text-decoration: none;
	font-size: var(--fs-xs);
	font-weight: 600;
}

.dcs-social a:hover, .dcs-social a:focus { background: rgba(255, 255, 255, 0.16); }
.dcs-social-label { white-space: nowrap; }

/* ==========================================================================
   28. Comments

   Closed by default, so this only applies where an administrator reopened them.
   ========================================================================== */

.dcs-commentlist { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }

.dcs-commentlist .comment,
.dcs-commentlist .pingback {
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-border-soft);
}

.dcs-commentlist .children { list-style: none; padding-left: var(--sp-4); margin-top: var(--sp-3); }
.dcs-commentlist .comment-meta { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-2); }
.dcs-commentlist .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: var(--sp-2); }
.dcs-commentlist .comment-content { font-size: var(--fs-sm); }
.dcs-commentlist .reply { font-size: var(--fs-xs); }

.dcs-comments-closed {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.dcs-commentform-title { font-size: var(--fs-md); margin-top: var(--sp-5); }
.dcs-commentform .comment-form-cookies-consent { font-size: var(--fs-xs); }
.dcs-commentform label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }

/* ==========================================================================
   29. Wider screens

   Progressive enhancement from the mobile base. Nothing above this point
   depends on a media query, so a narrow viewport gets the simplest CSS.
   ========================================================================== */

@media (min-width: 40em) {
	:root { --fs-2xl: 1.875rem; --fs-xl: 1.5rem; }

	.dcs-card-hd, .dcs-card-bd { padding: var(--sp-5); }
	.dcs-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dcs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dcs-adjacent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dcs-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dcs-leaving-detail { padding: var(--sp-5); }
}

@media (min-width: 52em) {
	/* Horizontal navigation once there is room for it. */
	.dcs-nav-list {
		display: flex;
		flex-wrap: wrap;
	}

	.dcs-nav-list[hidden] { display: flex; }
	.dcs-nav-list > li { border-bottom: 0; }

	.dcs-nav-list > li > a {
		padding: var(--sp-3) var(--sp-3);
		border-bottom: 3px solid transparent;
	}

	.dcs-nav-list .current-menu-item > a,
	.dcs-nav-list a[aria-current="page"] {
		border-bottom-color: #ffc98a;
		text-decoration: none;
	}

	.dcs-navtoggle { display: none; }

	.dcs-submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		min-width: 14rem;
		padding: var(--sp-2) 0;
		background: var(--c-green-dark);
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.dcs-submenu a { padding: var(--sp-2) var(--sp-4); }
	.dcs-submenu-toggle { width: 32px; right: 2px; }

	.dcs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dcs-oflinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.dcs-gloss-row { display: grid; grid-template-columns: 15rem 1fr; gap: var(--sp-4); }
	.dcs-gloss-term { margin-bottom: 0; }
	.dcs-contributors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
	/* Two-column layout. The sidebar is narrow on purpose: the content column
	   should stay near the optimal measure for reading. */
	.dcs-body {
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--sp-6);
	}

	.dcs-body--narrow { grid-template-columns: 1fr; }
	.dcs-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ==========================================================================
   30. Motion, print, and forced colours
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Respect a user or OS dark preference minimally: we keep the light scheme,
   which is legible, rather than shipping an untested second palette. Declaring
   the supported scheme prevents the browser applying its own inversion. */
:root { color-scheme: light; }

@media print {
	.dcs-noticebar,
	.dcs-nav,
	.dcs-header-tools,
	.dcs-sidebar,
	.dcs-totop,
	.dcs-crumbs,
	.dcs-related,
	.dcs-search,
	.dcs-commentform,
	.dcs-social { display: none !important; }

	body { background: #fff; font-size: 11pt; }
	.dcs-card { border: 0; box-shadow: none; }
	.dcs-card-hd { background: none; }

	/* Both languages print, since paper has no toggle. */
	.dcs-lang, .dcs-h-mr, .dcs-h-en { display: block !important; }

	/* Expand every FAQ so nothing is lost on paper. */
	.dcs-faq-item { border: 1px solid #ccc; }
	.dcs-faq-a { display: block !important; }

	/* Print the destination of every link, since a click is impossible. */
	.dcs-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

@media (forced-colors: active) {
	.dcs-card, .dcs-callout, .dcs-btn, .dcs-faq-item { border: 1px solid CanvasText; }
	.dcs-step::before { border: 1px solid CanvasText; }
}