/*
 * DBTA JSO Evaluation
 *
 * Colour roles are declared once on .jso-root and referenced by role
 * everywhere else, so light/dark swap in one place.
 *
 * Palette is Don Bosco Tech Africa's: #3674B3 primary blue, #70B5FF light
 * blue, #8C8C8C grey. Neutrals carry a slight blue bias so they sit with the
 * brand rather than against it.
 *
 * The band ramp is an ORDINAL scale (below minimum -> excellence): one hue,
 * monotone lightness, re-derived in the brand hue and validated in both modes.
 *
 * --on-series is the text colour for anything sitting ON the accent, and it is
 * NOT white in both themes: white on the light-blue dark-mode accent measures
 * 2.16:1, while near-black measures 9.13:1. Never hardcode #fff on an accent.
 *
 * Typography inherits the theme's typeface so the tool reads as part of the
 * site; only numeric values are forced to a system sans with tabular figures,
 * where column alignment matters more than brand match.
 */

.jso-root {
	color-scheme: light;

	--surface-1: #fcfcfd;
	--surface-2: #eef2f7;
	--surface-page: #f6f8fb;
	--text-primary: #10161d;
	--text-secondary: #4e5560;
	--text-muted: #8C8C8C;
	--gridline: #e3e8ee;
	--baseline: #c2cad4;
	--hairline: rgba(11, 11, 11, 0.10);
	--shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 12px rgba(11, 11, 11, 0.05);
	--shadow-lift: 0 2px 4px rgba(11, 11, 11, 0.06), 0 12px 28px rgba(11, 11, 11, 0.08);

	/* Single-series measure colour (categorical slot 1). */
	--series-1: #3674B3;
	--on-series: #ffffff;
	--series-1-soft: rgba(54, 116, 179, 0.10);

	/* Ordinal band ramp, light. */
	--band-below: #8BB3DA;
	--band-minimum: #5E93C7;
	--band-standard: #3674B3;
	--band-excellence: #224F7D;

	/* Status, for data-quality messages only -- never for a measure. */
	--status-good: #0ca30c;
	--status-warning: #fab219;
	--status-critical: #d03b3b;

	--radius: 14px;
	--radius-sm: 9px;

	/* Numbers use a system sans regardless of theme font: tabular figures and
	   predictable digit widths matter more here than brand typography. */
	--font-num: ui-monospace, "SF Mono", "Segoe UI", system-ui, sans-serif;

	font-family: inherit;
	color: var(--text-primary);
	line-height: 1.5;
}

/*
 * Widen out of the theme's narrow blog column.
 *
 * Block themes emit `margin-left/right: auto !important` on children of a
 * constrained layout, so a margin-based breakout cannot win -- an earlier
 * attempt using `margin-left: 50%; transform: translateX(-50%)` left the block
 * at content width and simply shifted it off-centre, because only the transform
 * applied. Instead the wrapper carries the theme's own `alignwide` class and
 * widens itself here; the theme's auto margins then do the centring.
 *
 * The doubled class raises specificity above the theme's max-width rule without
 * resorting to !important.
 */
.jso-root.jso-root {
	width: 100%;
	max-width: min(1180px, calc(100vw - 3rem));
	margin-inline: auto;
	/* Inset the cards from the theme's content block, which has no padding of
	   its own -- without this the card edges sit flush against it. Scales down
	   on narrow screens so small phones do not lose usable width. */
	padding-inline: clamp(0.75rem, 2.5vw, 1.75rem);
	padding-block: 0.5rem;
}

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) .jso-root {
		color-scheme: dark;
		--surface-1: #15181c;
		--surface-2: #1d2127;
		--surface-page: #0b0d10;
		--text-primary: #ffffff;
		--text-secondary: #c3c9d2;
		--text-muted: #8C8C8C;
		--gridline: #262b32;
		--baseline: #39404a;
		--hairline: rgba(255, 255, 255, 0.10);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
		--shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
		--series-1: #70B5FF;
	--on-series: #10161d;
		--series-1-soft: rgba(112, 181, 255, 0.18);
		--band-below: #234E80;
		--band-minimum: #2F6AA6;
		--band-standard: #4489CB;
		--band-excellence: #93C0EC;
	}
}

:root[data-theme="dark"] .jso-root {
	color-scheme: dark;
	--surface-1: #15181c;
	--surface-2: #1d2127;
	--surface-page: #0b0d10;
	--text-primary: #ffffff;
	--text-secondary: #c3c9d2;
	--text-muted: #8C8C8C;
	--gridline: #262b32;
	--baseline: #39404a;
	--hairline: rgba(255, 255, 255, 0.10);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
	--shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
	--series-1: #70B5FF;
		--on-series: #10161d;
	--series-1-soft: rgba(112, 181, 255, 0.18);
	--band-below: #234E80;
	--band-minimum: #2F6AA6;
	--band-standard: #4489CB;
	--band-excellence: #93C0EC;
}

/* The wrapper itself is included: it carries both max-width and padding, and a
   theme that does not set border-box globally would push it past its limit. */
.jso-root,
.jso-root *,
.jso-root *::before,
.jso-root *::after { box-sizing: border-box; }

.jso-root :focus-visible {
	outline: 2px solid var(--series-1);
	outline-offset: 2px;
	border-radius: 4px;
}

.jso-loading {
	color: var(--text-muted);
	padding: 2rem 0;
	text-align: center;
}

/* --- Notices ------------------------------------------------------------- */

.jso-notice {
	padding: 0.875rem 1.125rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: var(--surface-1);
	box-shadow: var(--shadow);
	margin-block: 0.75rem;
	font-size: 0.95rem;
}
.jso-notice--warn { border-left: 4px solid var(--status-warning); }
.jso-notice--error { border-left: 4px solid var(--status-critical); }
.jso-notice--ok { border-left: 4px solid var(--status-good); }
.jso-notice--info { border-left: 4px solid var(--series-1); }
.jso-notice a { color: var(--series-1); }

/* --- Cards --------------------------------------------------------------- */

.jso-card {
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-block-end: 1.25rem;
	box-shadow: var(--shadow);
}
.jso-card > h3 {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}
.jso-card > .jso-sub {
	margin: 0 0 1.25rem;
	color: var(--text-secondary);
	font-size: 0.875rem;
	max-width: 62ch;
}

/* --- Form header --------------------------------------------------------- */

.jso-form__head {
	margin-block-end: 1.5rem;
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--series-1-soft), transparent 70%), var(--surface-1);
	border: 1px solid var(--hairline);
	border-left: 4px solid var(--series-1);
	box-shadow: var(--shadow);
}
.jso-form__head h2 {
	margin: 0 0 0.375rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.jso-form__head p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.95rem;
}

/* --- Fieldsets ----------------------------------------------------------- */

.jso-form { counter-reset: jso-section; }

.jso-fieldset {
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 0.5rem 1.75rem 1.25rem;
	margin-block-end: 1.25rem;
	background: var(--surface-1);
	box-shadow: var(--shadow);
}
.jso-fieldset > legend {
	counter-increment: jso-section;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 650;
	font-size: 1rem;
	letter-spacing: -0.01em;
	padding: 0;
	margin-block: 1rem 0.5rem;
}
/* Numbered step chip, so a long form reads as a sequence rather than a wall. */
.jso-fieldset > legend::before {
	content: counter(jso-section);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--series-1);
	color: var(--on-series);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex: none;
}

.jso-field {
	display: grid;
	grid-template-columns: 1fr 9rem;
	gap: 0.5rem 1.5rem;
	align-items: center;
	padding-block: 0.875rem;
	border-block-end: 1px solid var(--gridline);
}
.jso-field:last-of-type { border-block-end: 0; padding-block-end: 0.25rem; }
.jso-field__label {
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}
.jso-field__help {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--text-muted);
	margin-block-start: 0.1875rem;
	max-width: 60ch;
}
.jso-field input {
	min-height: 46px;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--baseline);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	color: var(--text-primary);
	font-family: var(--font-num);
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
	transition: border-color 120ms, box-shadow 120ms;
}
.jso-field input:hover { border-color: var(--text-muted); }
.jso-field input:focus {
	border-color: var(--series-1);
	box-shadow: 0 0 0 3px var(--series-1-soft);
	outline: none;
}
.jso-field--error input { border-color: var(--status-critical); }
.jso-field--error input:focus { box-shadow: 0 0 0 3px rgba(208, 59, 59, 0.15); }
.jso-field__error {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--status-critical);
}

/* Sub-fields ("Of whom …") sit visually beneath their parent count. */
.jso-field--child .jso-field__label { padding-inline-start: 1.125rem; position: relative; }
.jso-field--child .jso-field__label::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1875rem;
	top: 0.55em;
	width: 0.5rem;
	height: 1px;
	background: var(--baseline);
}

/* --- Derived results ------------------------------------------------------ */

.jso-card--result {
	background: linear-gradient(160deg, var(--series-1-soft), transparent 55%), var(--surface-1);
	border-color: var(--series-1);
	box-shadow: var(--shadow-lift);
}

.jso-derived {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 2rem;
}
.jso-derived__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.5rem;
	border-block-end: 1px solid var(--gridline);
	font-size: 0.875rem;
}
.jso-derived__val {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	font-size: 0.9375rem;
}

/* --- Stat tiles ----------------------------------------------------------- */

.jso-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-block-end: 1.25rem;
}
.jso-tile {
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	padding: 1.25rem 1.375rem;
	box-shadow: var(--shadow);
}
.jso-card .jso-tile { box-shadow: none; }
.jso-tile__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.jso-tile__value {
	/* Proportional figures: tabular-nums makes display sizes look loose. */
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin-block: 0.375rem 0.25rem;
}
.jso-tile__note { font-size: 0.8125rem; color: var(--text-muted); }

/* --- Filter row (one row, above everything it scopes) --------------------- */

.jso-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	padding: 1.125rem 1.375rem;
	background: var(--surface-2);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	margin-block-end: 1.25rem;
}
.jso-filters label {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.jso-filters select {
	min-height: 44px;
	padding: 0.4375rem 0.625rem;
	border: 1px solid var(--baseline);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.jso-filters select:focus {
	border-color: var(--series-1);
	box-shadow: 0 0 0 3px var(--series-1-soft);
	outline: none;
}

/* --- Bars ----------------------------------------------------------------- */

.jso-bars { display: flex; flex-direction: column; gap: 0.375rem; }
.jso-bar-row {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr auto;
	gap: 1rem;
	align-items: center;
	min-height: 34px;
	padding-inline: 0.375rem;
	border-radius: 6px;
}
.jso-bar-row:hover { background: var(--surface-2); }
.jso-bar-row__name {
	font-size: 0.875rem;
	color: var(--text-secondary);
	overflow-wrap: anywhere;
}
.jso-bar-track {
	position: relative;
	height: 14px;
	background: var(--gridline);
	border-radius: 4px;
}
.jso-bar-fill {
	height: 100%;
	background: var(--series-1);
	/* Rounded data end only; the origin end stays square on the baseline. */
	border-radius: 0 4px 4px 0;
	min-width: 2px;
	transition: width 200ms ease-out;
}
.jso-bar-row__value {
	font-family: var(--font-num);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	min-width: 4rem;
	text-align: right;
}
.jso-bar-row__value--none {
	color: var(--text-muted);
	font-weight: 400;
	font-family: inherit;
	font-size: 0.8125rem;
}

/* --- Stacked band distribution -------------------------------------------- */

.jso-stack {
	display: flex;
	height: 22px;
	border-radius: 5px;
	overflow: hidden;
	/* 2px surface gap between segments rather than borders around them. */
	gap: 2px;
	background: var(--surface-1);
}
.jso-stack span { display: block; min-width: 2px; }
.jso-stack span:first-child { border-radius: 5px 0 0 5px; }
.jso-stack span:last-child { border-radius: 0 5px 5px 0; }

.jso-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-block-start: 0.875rem;
	font-size: 0.8125rem;
	color: var(--text-secondary);
}
.jso-legend span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.jso-legend i {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	display: inline-block;
	flex: none;
}

.jso-band-below { background: var(--band-below); }
.jso-band-minimum { background: var(--band-minimum); }
.jso-band-standard { background: var(--band-standard); }
.jso-band-excellence { background: var(--band-excellence); }

/* Band chip: colour plus its label, so band never depends on hue alone. */
.jso-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.5rem 0.125rem 0.375rem;
	border-radius: 999px;
	background: var(--surface-2);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}
.jso-chip i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
}

/* --- Tables (the table-view twin for every chart) ------------------------- */

.jso-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--gridline);
	border-radius: var(--radius-sm);
}
.jso-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.jso-table th,
.jso-table td {
	text-align: left;
	padding: 0.625rem 0.875rem;
	border-block-end: 1px solid var(--gridline);
	vertical-align: middle;
}
.jso-table thead th {
	position: sticky;
	top: 0;
	background: var(--surface-2);
	font-weight: 650;
	color: var(--text-secondary);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	z-index: 1;
}
.jso-table tbody tr:last-child td { border-block-end: 0; }
.jso-table td.jso-num {
	text-align: right;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}
.jso-table th.jso-num { text-align: right; }
.jso-table tbody tr:hover { background: var(--surface-2); }
.jso-muted { color: var(--text-muted); }

/* --- Actions --------------------------------------------------------------- */

.jso-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	align-items: center;
	position: sticky;
	bottom: 0;
	z-index: 5;
	padding: 1rem 1.25rem;
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	margin-block-start: 1.25rem;
}
.jso-btn {
	/* Also used on <a> in empty states, hence the flex centring and the
	   explicit text-decoration reset. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.5rem 1.5rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--baseline);
	background: var(--surface-1);
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms, border-color 120ms, transform 60ms;
}
.jso-btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.jso-btn:active { transform: translateY(1px); }
.jso-btn:hover,
.jso-btn:focus { text-decoration: none; }
.jso-btn--primary {
	background: var(--series-1);
	border-color: var(--series-1);
	color: var(--on-series);
}
.jso-btn--primary:hover { filter: brightness(0.93); background: var(--series-1); border-color: var(--series-1); }
.jso-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.jso-status { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.jso-status[data-tone="ok"] { color: var(--status-good); }
.jso-status[data-tone="error"] { color: var(--status-critical); }

.jso-caveat {
	font-size: 0.8125rem;
	color: var(--text-muted);
	border-inline-start: 3px solid var(--gridline);
	padding-inline-start: 0.75rem;
	margin-block-start: 0.75rem;
	max-width: 72ch;
}

/* Refetch holds the previous render rather than flashing a skeleton. */
.jso-dash[aria-busy="true"] .jso-panel { opacity: 0.5; transition: opacity 120ms; }

.jso-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 782px) {
	.jso-field { grid-template-columns: 1fr; gap: 0.375rem; }
	.jso-field input { text-align: left; }
	.jso-fieldset { padding-inline: 1.125rem; }
	.jso-card, .jso-form__head { padding: 1.125rem; }
	.jso-bar-row { grid-template-columns: 1fr auto; }
	.jso-bar-row__name { grid-column: 1 / -1; }
	.jso-filters label { flex: 1 1 10rem; }
	.jso-tile__value { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.jso-root *, .jso-root *::before, .jso-root *::after {
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.jso-actions, .jso-filters { display: none; }
	.jso-card, .jso-fieldset { box-shadow: none; break-inside: avoid; }
}

/* =========================================================================
 * Landing page
 * ====================================================================== */

.jso-landing { padding-block-end: 1rem; }

.jso-hero {
	text-align: center;
	padding: 3.5rem 1.5rem 3rem;
	margin-block-end: 1.25rem;
	border-radius: var(--radius);
	background:
		radial-gradient(1200px 400px at 50% -10%, var(--series-1-soft), transparent 70%),
		var(--surface-1);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow);
}
.jso-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--series-1);
}
.jso-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -0.03em;
}
.jso-hero__lead {
	margin: 0 auto 0.75rem;
	max-width: 60ch;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	color: var(--text-secondary);
	line-height: 1.6;
}
.jso-hero__meta {
	margin: 0 0 1.75rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}
.jso-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Figures are a KPI row, not a chart: the number is the point. */
.jso-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-block-end: 2.5rem;
}
.jso-figure {
	text-align: center;
	padding: 1.375rem 1rem;
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.jso-figure__value {
	display: block;
	font-size: 2.5rem;
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--series-1);
}
.jso-figure__label {
	display: block;
	margin-block-start: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.jso-section { margin-block-end: 3rem; }
.jso-section__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.jso-section__lead {
	margin: 0 0 1.75rem;
	max-width: 68ch;
	color: var(--text-secondary);
	font-size: 1rem;
}

/* --- Five-step transition ------------------------------------------------ */

.jso-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	counter-reset: none;
}
.jso-step {
	position: relative;
	padding: 1.25rem 1.125rem;
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border-top: 3px solid var(--series-1);
}
.jso-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--series-1-soft);
	color: var(--series-1);
	font-size: 0.8125rem;
	font-weight: 700;
	margin-block-end: 0.625rem;
}
.jso-step__title { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 650; }
.jso-step__body { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }

/* --- Missions ------------------------------------------------------------ */

.jso-missions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1rem;
}
.jso-mission {
	position: relative;
	padding: 1.375rem 1.25rem;
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.jso-mission--current {
	border-color: var(--series-1);
	background: linear-gradient(160deg, var(--series-1-soft), transparent 60%), var(--surface-1);
}
.jso-mission__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background: var(--series-1);
	color: var(--on-series);
	font-weight: 700;
	font-size: 0.875rem;
	margin-block-end: 0.75rem;
}
.jso-mission__title { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.jso-mission__body { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.jso-mission__tag {
	margin: 0.875rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--series-1);
}

/* --- Levels -------------------------------------------------------------- */

.jso-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.jso-level {
	padding: 1.25rem;
	background: var(--surface-1);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.jso-level__swatch {
	display: block;
	width: 44px;
	height: 6px;
	border-radius: 3px;
	margin-block-end: 0.875rem;
}
.jso-level h3 { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 650; }
.jso-level p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }

/* --- Where we work ------------------------------------------------------- */

.jso-where {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}
.jso-where__note { font-size: 0.9rem; color: var(--text-secondary); }
.jso-where__figure { margin: 0; }
.jso-where__figure img {
	width: 100%;
	height: auto;
	max-width: 480px;
	margin-inline: auto;
	display: block;
	border-radius: var(--radius-sm);
}
.jso-where__figure figcaption {
	margin-block-start: 0.75rem;
	font-size: 0.78rem;
	color: var(--text-muted);
	text-align: center;
}

/* --- Closing call to action ---------------------------------------------- */

.jso-cta {
	text-align: center;
	padding: 2.75rem 1.5rem;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--series-1-soft), transparent 65%), var(--surface-1);
	border: 1px solid var(--series-1);
	box-shadow: var(--shadow);
	margin-block-end: 1.5rem;
}
.jso-cta h2 { margin: 0 0 0.625rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
.jso-cta p { margin: 0 auto 1.5rem; max-width: 58ch; color: var(--text-secondary); }

.jso-colophon {
	text-align: center;
	font-size: 0.78rem;
	color: var(--text-muted);
	max-width: 70ch;
	margin-inline: auto;
}

@media (max-width: 782px) {
	.jso-where { grid-template-columns: 1fr; gap: 1.5rem; }
	.jso-hero { padding: 2.25rem 1.125rem; }
	.jso-figure__value { font-size: 2rem; }
}

/* Guide strip: shown on the landing page only to signed-in staff who can
   actually open the guide, so it sits apart from the public content. */
.jso-guide-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	margin-block-end: 1.5rem;
	border: 1px dashed var(--baseline);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.jso-guide-strip h2 {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.01em;
}
.jso-guide-strip p {
	margin: 0;
	max-width: 62ch;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

/* --- Language switcher ---------------------------------------------------- */

.jso-lang {
	display: flex;
	justify-content: flex-end;
	gap: 2px;
	margin-block-end: 0.75rem;
}
/* Fallbacks on every token: the switcher is the first thing on the page, and if
   it ever renders outside the token scope it should still look like a control
   rather than three underlined words. */
.jso-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 32px;
	padding: 0 0.5rem;
	border: 1px solid var(--hairline, rgba(11, 11, 11, 0.14));
	background: var(--surface-1, #fff);
	color: var(--text-secondary, #52514e);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.jso-lang__item:first-child { border-radius: var(--radius-sm, 9px) 0 0 var(--radius-sm, 9px); }
.jso-lang__item:last-child { border-radius: 0 var(--radius-sm, 9px) var(--radius-sm, 9px) 0; }
.jso-lang__item:hover,
.jso-lang__item:focus {
	background: var(--surface-2, #f1f1ef);
	color: var(--text-primary, #0b0b0b);
	text-decoration: none;
}
.jso-lang__item.is-current {
	background: var(--series-1, #2a78d6);
	border-color: var(--series-1, #2a78d6);
	color: var(--on-series);
}
.jso-lang__item.is-current:hover { color: var(--on-series); }
/* The abbr carries the full language name for screen readers and on hover;
   suppress the dotted underline browsers add by default. */
.jso-lang__item abbr {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}

@media print { .jso-lang { display: none; } }

/* --- Brand logo ----------------------------------------------------------- */

.jso-hero__logo {
	display: block;
	width: min(260px, 60vw);
	height: auto;
	margin: 0 auto 1.25rem;
}
/* The logo has its own white oval, which reads as a patch on a dark ground.
   A soft light plate keeps it looking deliberate rather than pasted on. */
:root:where(:not([data-theme="light"])) .jso-hero__logo,
:root[data-theme="dark"] .jso-hero__logo {
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	padding: 0.5rem 1rem;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .jso-hero__logo { background: none; padding: 0; }
}

.jso-field textarea {
	width: 100%;
	min-height: 5.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--baseline);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	color: var(--text-primary);
	font: inherit;
	resize: vertical;
}
.jso-field textarea:focus {
	border-color: var(--series-1);
	box-shadow: 0 0 0 3px var(--series-1-soft);
	outline: none;
}
.jso-field select {
	width: 100%;
	min-height: 46px;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--baseline);
	border-radius: var(--radius-sm);
	background: var(--surface-1);
	color: var(--text-primary);
	font: inherit;
}
.jso-field select:focus {
	border-color: var(--series-1);
	box-shadow: 0 0 0 3px var(--series-1-soft);
	outline: none;
}

/* --- Theme page-title banner ---------------------------------------------
   Only ever applies on the plugin's own pages, via a body class, and only when
   the setting is on. !important is warranted: theme title areas are styled
   from the theme's own stylesheet with higher specificity than a plugin can
   reasonably reach. Unknown themes simply match nothing. */

/* Matched on the class PATTERN rather than exact names. Naming an exact class
   hid the heading but left its wrapper standing as an empty band, because the
   wrapper carries the background and the padding. Themes vary the suffix
   (entry-hero, page-hero-section, entry-hero-container-inner, hero-section-...)
   but all of them contain "hero" or "page-title", so match on that. */
body.jso-hide-page-title [class*="entry-hero"],
body.jso-hide-page-title [class*="page-hero"],
body.jso-hide-page-title [class*="hero-section"],
body.jso-hide-page-title [class*="page-title"],
body.jso-hide-page-title .wp-block-post-title {
	display: none !important;
}

/* Some themes carry the space on the content wrapper instead of the banner. */
body.jso-hide-page-title .content-area,
body.jso-hide-page-title .site-main,
body.jso-hide-page-title #inner-wrap {
	padding-block-start: clamp(1rem, 3vw, 2rem) !important;
}

/* --- Stacked fields -------------------------------------------------------
   The default .jso-field is built for the Mission 6 return: a long label and a
   narrow number box on the right. Text, email, select and textarea inputs need
   the opposite, so forms that collect prose opt into a stacked layout. */

.jso-fields--stacked .jso-field {
	grid-template-columns: 1fr;
	gap: 0.375rem;
	align-items: start;
	padding-block: 0.75rem;
}
.jso-fields--stacked .jso-field__label {
	font-weight: 600;
}
.jso-fields--stacked .jso-field input,
.jso-fields--stacked .jso-field select,
.jso-fields--stacked .jso-field textarea {
	width: 100%;
	max-width: 34rem;
	text-align: left;
}
.jso-fields--stacked .jso-actions {
	margin-block-start: 1rem;
}

/* --- Reporting period switcher ------------------------------------------
   Shown above the form only when more than one period is open. Each period
   holds its own return, so this is the control that keeps one graduating
   year's figures from displacing another's. */
.jso-periods {
	margin-block-end: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--hairline, rgba(11, 11, 11, 0.14));
	border-radius: var(--radius-sm, 9px);
	background: var(--surface-2, #f1f1ef);
}
.jso-periods__intro {
	margin: 0 0 0.6rem;
	color: var(--text-secondary, #52514e);
	font-size: 0.9rem;
}
.jso-periods__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	margin-block-start: 0.4rem;
}
/* Each label-plus-select pair. Sized here, in the row's direction, rather than
   on the control: the pair is the row's flex item, the select is not. Does not
   grow, so a four-digit year does not get a full-width control on a wide
   screen, but shrinks and wraps on a narrow one. */
.jso-periods__pick {
	display: flex;
	flex: 0 1 18rem;
	min-width: 10rem;
	flex-direction: column;
	gap: 0.25rem;
}
.jso-identity {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}
/* No flex shorthand here. Inside .jso-periods__pick the main axis is vertical,
   so a flex-basis would set the control's HEIGHT -- which rendered the cohort
   picker as a box several hundred pixels tall. Width comes from the parent. */
.jso-periods select {
	width: 100%;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--hairline, rgba(11, 11, 11, 0.14));
	border-radius: var(--radius-sm, 9px);
	background: var(--surface-1, #fff);
	color: var(--text-primary, #0b0b0b);
	font-family: inherit;
	font-size: 1rem;
}