@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@400;500;600&display=swap');:root {
		--primary: #264e74; --accent: #b23427; --light-bg: #f5f7fa; --white: #ffffff; --text: #222222; --header-font: 'Montserrat', sans-serif; --body-font: 'Poppins', sans-serif; --shadow-light: 0 2px 6px rgba(34, 60, 80, 0.08); --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.13), 0 3px 8px rgba(0, 0, 0, 0.07); --green: #a3b939; --yellow: #fbad1c; --blue: #3491cd; --red: #b33528; --sidebar-w: 300px;
	}
	
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	
	html,
	body {
		margin: 0; padding: 0; font-family: var(--body-font); font-size: 16px; background: #f5f5f5; color: var(--text); line-height: 1.6; overflow-x: clip;
	}
	/* ── Two-column shell ── */
	
	#wide-wrapper {
		display: flex; min-height: 100vh; max-width: 1920px; margin: 0 auto;
	}
	/* ── Sidebar ── */
	
	#side-nav {
		width: var(--sidebar-w); flex-shrink: 0; background: #f5f5f5; border-right: 1px solid rgba(38, 78, 116, 0.08); position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; z-index: 100; scrollbar-width: thin; scrollbar-color: rgba(38, 78, 116, 0.15) transparent;
	}
	
	#side-nav::-webkit-scrollbar {
		width: 4px;
	}
	
	#side-nav::-webkit-scrollbar-track {
		background: transparent;
	}
	
	#side-nav::-webkit-scrollbar-thumb {
		background: rgba(38, 78, 116, 0.15); border-radius: 2px;
	}
	
	.side-nav-inner {
		padding: 1.5rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1;
	}
	/* ── Back link ── */
	
	.side-back-link {
		display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem 0.35rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--primary) !important; text-decoration: none; background: rgba(38, 78, 116, 0.07); border-radius: 6px; transition: background 0.2s, color 0.2s; align-self: flex-start;
	}
	
	.side-back-link:hover {
		background: rgba(38, 78, 116, 0.14); color: #1a3a58 !important; text-decoration: none;
	}
	
	.side-back-link svg {
		flex-shrink: 0;
	}
	/* ── Sidebar logo block ── */
	
	.side-logo-block {
		display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(38, 78, 116, 0.1);
	}
	.side-title {
		font-family: var(--header-font); font-weight: 700; font-size: 1rem; color: var(--primary); margin: 0; letter-spacing: 0.01em;
	}
	
	/* ── Priority Nav ── */
	
	.priority-nav-label {
		font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(38, 78, 116, 0.5); margin: 0 0 0.5rem;
	}
	
	.priority-nav {
		display: flex; flex-direction: column; gap: 0.25rem;
	}
	
	.pnav-item {
		display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 10px; text-decoration: none; transition: background 0.18s, transform 0.15s; border: 1px solid transparent; cursor: pointer;
	}
	
	.pnav-item:hover {
		background: rgba(38, 78, 116, 0.06); transform: translateX(2px); text-decoration: none;
	}
	
	.pnav-item.active {
		background: rgba(38, 78, 116, 0.08); border-color: rgba(38, 78, 116, 0.15);
	}
	
	.pnav-icon {
		width: 38px; height: 38px; background: rgba(38, 78, 116, 0.08); border: 1.5px solid rgba(38, 78, 116, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.18s, border-color 0.18s;
	}
	
	.pnav-item.active .pnav-icon,
	.pnav-item:hover .pnav-icon {
		background: var(--primary); border-color: var(--primary);
	}
	
	.pnav-icon img {
		width: 22px; height: 22px; object-fit: contain; filter: none; transition: filter 0.18s;
	}
	
	.pnav-item.active .pnav-icon img,
	.pnav-item:hover .pnav-icon img {
		filter: brightness(0) invert(1);
	}
	
	.pnav-text {
		flex: 1; min-width: 0;
	}
	
	.pnav-num {
		font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(38, 78, 116, 0.5); margin: 0;
	}
	
	.pnav-title {
		font-family: var(--header-font); font-size: 0.95rem; font-weight: 700; color: var(--primary); margin: 0; line-height: 1.2;
	}
	
	.pnav-badge {
		background: rgba(38, 78, 116, 0.08); color: var(--primary); font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; flex-shrink: 0; border: 1px solid rgba(38, 78, 116, 0.15);
		display: none;
	}
	/* ── Sidebar filter section ── */
	
	.side-filter-section {
		border-top: 1px solid rgba(38, 78, 116, 0.1); padding-top: 1.1rem;
	}
	
	.side-filter-label {
		font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(38, 78, 116, 0.5); margin: 0 0 0.6rem;
	}
	
	.side-filter-group {
		margin-bottom: 0.85rem;
	}
	
	.side-filter-group-label {
		font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin: 0 0 0.4rem;
	}
	
	.side-chip-row {
		display: flex; flex-wrap: wrap; gap: 0.3rem;
	}
	
	.filter-chip {
		border: 1px solid rgba(38,78,116,0.1); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem 0.25rem 0.55rem; border-radius: 999px; border: 2px solid transparent; font-size: 0.75rem; font-weight: 600; font-family: var(--body-font); cursor: pointer; transition: all 0.18s ease; user-select: none;
	}
	
	.filter-chip:hover {
		transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	}
	
	.filter-chip .chip-dot {
		width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
	}
	/* Default state – light chip colours matching original page */
	
	.filter-chip[data-stage="all"] {
		background: var(--white); color: var(--primary); border-color: #c5d0df;
	}
	
	.filter-chip[data-stage="developing"] {
		background: rgba(52, 145, 205, 0.1); color: #2270a0; border-color: rgba(52, 145, 205, 0.25);
	}
	
	.filter-chip[data-stage="emerging"] {
		background: rgba(251, 173, 28, 0.12); color: #8a5e00; border-color: rgba(251, 173, 28, 0.35);
	}
	
	.filter-chip[data-stage="embedded"] {
		background: rgba(163, 185, 57, 0.12); color: #5a6c0a; border-color: rgba(163, 185, 57, 0.35);
	}
	/* Active state */
	
	.filter-chip[data-stage="all"].active {
		background: var(--primary); color: #fff; border-color: var(--primary);
	}
	
	.filter-chip[data-stage="developing"].active {
		background: var(--blue); color: #fff; border-color: var(--blue);
	}
	
	.filter-chip[data-stage="emerging"].active {
		background: var(--yellow); color: #333; border-color: var(--yellow);
	}
	
	.filter-chip[data-stage="embedded"].active {
		background: var(--green); color: #333; border-color: var(--green);
	}

	/* Priority filter chips */
	.filter-chip[data-filter-type="priority"] {
		background: var(--white); color: var(--primary); border-color: #c5d0df;
	}
	.filter-chip[data-filter-type="priority"].active {
		background: var(--primary); color: #fff; border-color: var(--primary);
	}
	/* Dot colors */
	
	.filter-chip[data-stage="developing"] .chip-dot {
		background: var(--blue);
	}
	
	.filter-chip[data-stage="emerging"] .chip-dot {
		background: var(--yellow);
	}
	
	.filter-chip[data-stage="embedded"] .chip-dot {
		background: var(--green);
	}
	
	.filter-chip[data-stage="all"] .chip-dot {
		background: var(--primary);
	}
	/* ── Main content ── */
	
	#wide-content {
		flex: 1; min-width: 0; background: #f5f5f5; padding: 0 0 4rem;
	}
	/* ── Hero banner (light theme) ── */
	
	.wide-hero {
		background: var(--white); border-radius: 16px; box-shadow: var(--shadow-light); padding: 2.25rem 3rem; display: flex; align-items: center; gap: 2rem; margin: 2rem auto 2.5rem; max-width: calc(var(--content-max) - 5rem);
	}
	
	.wide-hero-icon {
		flex-shrink: 0; width: 90px; height: 90px; background: rgba(38, 78, 116, 0.06); border: 1.5px solid rgba(38, 78, 116, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; animation: flipIn 0.9s ease-out 0.2s forwards;
	}
	
	.wide-hero-icon img {
		width: 64px; height: 64px; object-fit: contain;
	}
	
	.wide-hero-text {
		flex: 1;
	}
	
	.wide-hero-label {
		font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(38, 78, 116, 0.6); margin: 0 0 0.2rem;
	}
	
	.wide-hero-title {
		font-family: var(--header-font); font-size: 2.4rem; font-weight: 700; color: var(--primary); margin: 0 0 0.2rem; line-height: 1.1;
	}
	
	.wide-hero-sub {
		font-size: 0.9rem; color: #666; margin: 0;
	}
	/* ── Priority sections ── */
	
	.wide-section {
		padding: 0 2.5rem 3rem; scroll-margin-top: 2rem; max-width: var(--content-max); margin-left: auto; margin-right: auto;
	}
	
	.wide-section-header {
		display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 2px solid rgba(38, 78, 116, 0.1); position: relative;
	}
	
	.wide-section-header::before {
		content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: var(--primary);
	}
	
	.section-icon-wrap {
		width: 72px; height: 72px; background: var(--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(38, 78, 116, 0.25);
	}
	
	.section-icon-wrap img {
		width: 46px; height: 46px; object-fit: contain; filter: brightness(0) invert(1);
	}
	
	.section-header-meta {
		flex: 1;
	}
	
	.section-header-label {
		font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(38, 78, 116, 0.6); margin: 0 0 0.15rem;
	}
	
	.section-header-title {
		font-family: var(--header-font); font-size: 2.2rem; font-weight: 700; color: var(--primary); margin: 0; line-height: 1.1;
	}
	
	.section-action-count {
		display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
	}
	
	.section-count-badge {
		background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px;
	}
	/* ── Card grid ── */
	
	.cards-grid {
		display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); gap: 1.5rem; align-items: start;
	}
	/* ── Scorecard ── */
	
	.scorecard {
		background: var(--white); border-radius: 14px; box-shadow: var(--shadow-medium); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.2s;
	}
	
	.js-ready .scorecard {
		opacity: 0; transform: translateY(18px);
	}
	
	.js-ready .scorecard.visible {
		animation: fadeSlideIn 0.5s ease-out forwards;
	}
	
	.scorecard:hover {
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateY(-2px);
	}
	
	.scorecard.js-filtered-out {
		display: none;
	}
	/* ── Card header band ── */
	
	.card-band {
		position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.25rem; display: flex; align-items: center; gap: 1rem;
	}
	
	.stage-embedded .card-band {
		background: #a3b939;
	}
	
	.stage-emerging .card-band {
		background: #fbad1c;
	}
	
	.stage-developing .card-band {
		background: #3491cd;
	}
	
	.card-band-number {
		position: absolute; right: -0.1rem; top: 50%; transform: translateY(-50%); font-family: var(--header-font); font-size: 5.5rem; font-weight: 700; line-height: 1; opacity: 0.15; color: #fff; pointer-events: none; user-select: none; letter-spacing: -0.02em;
	}
	
	.stage-emerging .card-band-number,
	.stage-embedded .card-band-number {
		color: #000;
	}
	
	.card-band-icon {
		flex-shrink: 0; width: 80px; height: 80px; background: #ffffff; opacity: 0.95; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
	}
	/* Suppress stray paragraph/break nodes CMS may inject inside icon wrapper */
	
	.card-band-icon p,
	.card-band-icon br {
		display: none;
	}
	
	.card-band-icon img {
		width: 56px; height: 56px; object-fit: contain; display: block; flex-shrink: 0;
	}
	
	.card-band-info {
		flex: 1; z-index: 1;
	}
	
	.card-band-num-label {
		font-family: var(--header-font); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.9); margin: 0;
	}
	
	.stage-emerging .card-band-num-label,
	.stage-embedded .card-band-num-label {
		color: rgba(0, 0, 0, 0.65);
	}
	
	.card-status-badge {
		display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.65rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.4rem;
	}
	
	.stage-embedded .card-status-badge {
		background: #a3b939; color: #fff;
	}
	
	.stage-emerging .card-status-badge {
		background: #fbad1c; color: rgba(0, 0, 0, 0.75);
	}
	
	.stage-developing .card-status-badge {
		background: #3491cd; color: #fff;
	}
	
	/* ── Card action title ── */
	
	.card-action-title {
		padding: 0.9rem 1.4rem 0.8rem; background: #f5f7fa; border-bottom: 1px solid rgba(38, 78, 116, 0.1);
	}
	
	.stage-embedded .card-action-title {
		border-left: 4px solid #a3b939;
	}
	
	.stage-emerging .card-action-title {
		border-left: 4px solid #fbad1c;
	}
	
	.stage-developing .card-action-title {
		border-left: 4px solid #3491cd;
	}
	
	.card-action-title-text {
		font-family: var(--header-font); font-size: 0.95rem; font-weight: 700; color: #222; margin: 0; line-height: 1.4;
	}

	.editorial-note { font-size: 0.74rem; font-style: italic; font-weight: 400; color: #5a6675; margin: 0.4rem 0 0; line-height: 1.5; }

	/* ── Google Translate widget (v49, fixed v51) ──
	   v50 BUG, DO NOT REINTRODUCE IT. The rule was
	       iframe.skiptranslate { display: none !important; }
	   intended to hide Google's top banner, which is a fixed iframe injected as
	   a child of <body> that shifts body top and would sit on top of
	   #section-bar. But Google puts class="skiptranslate" on BOTH iframes it
	   creates: the banner (.goog-te-banner-frame) and the language picker menu
	   (.goog-te-menu-frame). So the rule also hid the menu, and clicking the
	   control did nothing at all. Target the banner by its own class only.
	   Do not hide .goog-logo-link: Google's terms require the attribution to
	   stay visible. */
	.translate-block { margin: 0 0 1.15rem; }
	#google_translate_element { font-size: 0.8rem; max-width: 100%; overflow-x: hidden; }
	.translate-note { font-size: 0.68rem; color: #5a6c7d; line-height: 1.5; margin: 0.45rem 0 0; }

	/* The native select Google renders in the VERTICAL layout. Styling it is
	   safe; it is a real <select>, so it is keyboard navigable and becomes the
	   OS picker on a phone, which the SIMPLE layout's iframe menu never did. */
	.goog-te-combo {
		width: 100%; max-width: 100%; box-sizing: border-box;
		padding: 0.45rem 0.5rem; margin: 0 0 0.3rem;
		font-family: inherit; font-size: 0.82rem; color: #1d2b3a;
		border: 1px solid rgba(38,78,116,0.28); border-radius: 6px; background: #fff;
	}
	.goog-te-combo:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
	#google_translate_element .goog-te-gadget { font-size: 0.66rem !important; color: #5a6c7d; line-height: 1.4; }

	/* Banner only. Never the menu frame. */
	body { top: 0 !important; }
	.goog-te-banner-frame, iframe.goog-te-banner-frame { display: none !important; }
	.goog-te-menu-frame { display: block !important; max-height: 70vh; z-index: 1000 !important; }
	@media print { .translate-block { display: none; } }

	/* ── Plain-language gloss (v47) ── */
	.plain-gloss { font-size: 0.82rem; font-weight: 400; color: #33414f; margin: 0.55rem 0 0; line-height: 1.55; padding-left: 0.7rem; border-left: 2px solid rgba(38,78,116,0.28); }
	.plain-gloss-label { display: block; font-family: var(--header-font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #5a6675; margin-bottom: 0.15rem; }
	@media (max-width: 768px) { .plain-gloss { font-size: 0.86rem; } }
	@media print { .plain-gloss { border-left-color: #999; } }

	/* ── Glossary (v47) ── */
	.glossary-group { border: 1px solid rgba(38,78,116,0.14); border-radius: 8px; background: var(--white); margin-bottom: 0.75rem; }
	.glossary-group > summary { cursor: pointer; list-style: none; padding: 0.85rem 1.1rem; font-family: var(--header-font); font-weight: 700; font-size: 0.92rem; color: var(--primary); }
	.glossary-group > summary::-webkit-details-marker { display: none; }
	.glossary-group > summary::after { content: '+'; float: right; font-weight: 700; color: #5a6675; }
	.glossary-group[open] > summary::after { content: '\2212'; }
	.glossary-group > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
	.glossary-list { margin: 0; padding: 0 1.1rem 1rem; }
	.glossary-list dt { font-weight: 600; color: #1d2b3a; margin-top: 0.85rem; font-size: 0.94rem; }
	.glossary-list dd { margin: 0.15rem 0 0; color: #3b4756; font-size: 0.92rem; line-height: 1.6; }
	@media print { .glossary-group { break-inside: avoid; } .glossary-group > summary::after { content: ''; } }

	/* ── Reply / contact block (v47) ── */
	.reply-box { border: 1px solid rgba(38,78,116,0.16); border-left: 4px solid var(--primary); border-radius: 8px; background: var(--white); padding: 1.2rem 1.4rem; margin-top: 1rem; }
	.reply-box ul { margin: 0.6rem 0 0.9rem; padding-left: 1.15rem; }
	.reply-box li { margin-bottom: 0.3rem; }
	.reply-contact { margin: 0.4rem 0 0; font-size: 0.95rem; line-height: 1.8; }
	.reply-contact strong { font-family: var(--header-font); }
	.reply-note { font-size: 0.85rem; color: #5a6675; margin-top: 0.9rem; line-height: 1.6; }
	/* ── Card body ── */
	
	.card-body {
		padding: 1rem 1.25rem 0.5rem; flex: 1;
	}
	
	.card-summary {
		font-size: 0.9rem; line-height: 1.65; color: #444; margin: 0;
	}

	.card-summary + .card-summary {
		margin-top: 0.55rem;
	}
	
	.progress-tag {
		display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); background: rgba(38, 78, 116, 0.08); border-radius: 4px; padding: 0.12rem 0.45rem; margin: 0 0 0.45rem;
	}
	/* ── Expand / Details ── */
	
	.card-details {
		border-top: 1px solid rgba(38, 78, 116, 0.08); margin-top: 0.7rem;
	}
	
	.card-details summary {
		list-style: none; display: flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.6rem 1.25rem; font-size: 0.85rem; font-weight: 600; color: var(--primary); user-select: none; transition: background 0.15s;
	}
	
	.card-details summary::-webkit-details-marker {
		display: none;
	}
	
	.card-details summary:hover {
		background: rgba(38, 78, 116, 0.04);
	}
	
	.card-details summary::before {
		content: ''; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--primary); transition: transform 0.22s; flex-shrink: 0;
	}
	
	.card-details[open] summary::before {
		transform: rotate(90deg);
	}
	
	.details-inner {
		padding: 0 1.25rem 1.1rem;
	}
	/* ── Detail tabs ── */
	
	.detail-tabs {
		display: none; gap: 0; border-bottom: 2px solid rgba(38, 78, 116, 0.1); margin-bottom: 1rem;
	}
	
	.js-ready .detail-tabs {
		display: flex;
	}
	
	.detail-tab-btn {
		background: none; border: none; padding: 0.45rem 0.9rem; font-size: 0.78rem; font-weight: 600; font-family: var(--body-font); color: #777; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s;
	}
	
	.detail-tab-btn:hover {
		color: var(--primary);
	}
	
	.detail-tab-btn.active {
		color: var(--primary); border-bottom-color: var(--primary);
	}
	
	.detail-tab-pane {
		display: block;
	}
	
	.js-ready .detail-tab-pane {
		display: none;
	}
	
	.js-ready .detail-tab-pane.active {
		display: block;
	}
	/* ── Context pills ── */
	
	.context-pill-row {
		display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.5rem;
	}
	
	.context-pill {
		border-radius: 8px; overflow: hidden; border: 1px solid rgba(38, 78, 116, 0.12);
	}
	
	.context-pill-hd {
		background: var(--primary); color: #fff; padding: 0.4rem 0.75rem; font-family: var(--header-font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	}
	
	.context-pill-bd {
		background: rgba(38, 78, 116, 0.03); padding: 0.65rem 0.75rem;
	}
	
	.context-pill-bd p {
		font-size: 0.85rem; line-height: 1.6; color: #333; margin: 0;
	}

	.context-pill-bd p + p {
		margin-top: 0.55rem;
	}
	
	.context-pill-bd ul {
		margin: 0; padding-left: 1.1rem;
	}
	
	.context-pill-bd ul li {
		font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.2rem; color: #333;
	}
	/* ── Accomplished / Going tabs ── */
	
	.detail-section-title {
		font-family: var(--header-font); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); margin: 0 0 0.4rem;
	}
	
	.detail-list {
		margin: 0 0 0.75rem; padding-left: 1.15rem;
	}
	
	.detail-list li {
		font-size: 0.86rem; line-height: 1.65; margin-bottom: 0.3rem; color: #333;
	}
	
	
	.detail-img-wide { display:block; width:100%; max-height:none; object-fit:contain; border-radius:8px; margin-top:0.7rem; border:1px solid rgba(0,0,0,0.10); background:#fff; }
	.detail-img-caption { font-size:0.78rem; color:#555; margin:0.25rem 0 0.6rem; }
	.detail-img {
		display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; margin-top: 0.7rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	}
	
	.detail-ctx-text {
		font-size: 0.88rem; color: var(--text); margin: 0 0 0.75rem;
	}
	/* ── Animations ── */
	
	@keyframes flipIn {
		from {
			transform: perspective(900px) rotateY(90deg); opacity: 0;
		}
		to {
			transform: perspective(900px) rotateY(0deg); opacity: 1;
		}
	}
	
	@keyframes fadeSlideIn {
		from {
			opacity: 0; transform: translateY(18px);
		}
		to {
			opacity: 1; transform: translateY(0);
		}
	}
	/* ── Active section highlight ── */
	
	.wide-section.is-active .wide-section-header::before {
		width: 120px; transition: width 0.3s ease;
	}
	/* ── Priority color accents ── */
	
	#section-belonging .section-icon-wrap {
		background: #264e74;
	}
	
	#section-mastery .section-icon-wrap {
		background: #264e74;
	}
	
	#section-independence .section-icon-wrap {
		background: #264e74;
	}
	
	#section-generosity .section-icon-wrap {
		background: #264e74;
	}
	/* ── "No results" state ── */
	
	.no-results-msg {
		display: none; padding: 2rem; text-align: center; color: #888; font-size: 0.95rem;
	}
	
	.no-results-msg.visible {
		display: block;
	}
	/* ── Priority-filtered section visibility ── */
	
	.wide-section.priority-hidden {
		display: none;
	}
	/* ── "All Priorities" nav item (no icon) ── */
	
	.pnav-item-all {
		display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 10px; text-decoration: none; transition: background 0.18s; border: 1px solid transparent; cursor: pointer; margin-bottom: 0.4rem;
	}
	
	.pnav-item-all:hover {
		background: rgba(38, 78, 116, 0.06); text-decoration: none;
	}
	
	.pnav-item-all.active {
		background: rgba(38, 78, 116, 0.08); border-color: rgba(38, 78, 116, 0.15);
	}
	
	.pnav-item-all .pnav-title {
		font-size: 0.85rem;
	}
	/* ── Responsive ── */
	
	/* v86: let the action cards wrap by their own readable width instead of waiting
	   for a late viewport breakpoint while the sidebar still steals space. */
	
	@media (max-width: 900px) {
		:root {
			--sidebar-w: 260px;
		}
	}
	
	@media (max-width: 768px) {
		#wide-wrapper {
			flex-direction: column;
		}
		#side-nav {
			width: 100%; height: auto; position: relative; top: auto;
		}
		.cards-grid {
			grid-template-columns: 1fr;
		}
		.wide-section {
			padding: 0 1.25rem 2.5rem;
		}
		.wide-hero {
			padding: 2rem 1.5rem; flex-direction: column; gap: 1rem;
		}
		.wide-hero-title {
			font-size: 1.8rem;
		}
	}


	/* ══ Integration additions: stages, story sections, learning fields ══ */
	.stage-pill svg { vertical-align: -2px; margin-right: 0.3rem; }
	.card-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; }
	.card-status-badge svg { flex-shrink: 0; }
	/* On this page nav */
	.onpage-nav { display: flex; flex-direction: column; gap: 0.15rem; }
	.onpage-link { font-size: 0.8rem; font-weight: 500; color: #445; text-decoration: none; padding: 0.32rem 0.6rem; border-radius: 6px; border-left: 2px solid transparent; transition: background 0.15s, color 0.15s; }
	.onpage-link:hover { background: rgba(38,78,116,0.06); color: var(--primary); text-decoration: none; }
	/* Story sections */
	.story-section { padding: 0 2.5rem 3rem; scroll-margin-top: 2rem; max-width: var(--content-max); margin-left: auto; margin-right: auto; }
	.story-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(38,78,116,0.55); margin: 0 0 0.3rem; }
	.story-title { font-family: var(--header-font); font-size: 1.8rem; font-weight: 700; color: var(--primary); margin: 0 0 1rem; line-height: 1.15; }
	.story-body p { font-size: 0.98rem; line-height: 1.75; color: #333; margin: 0 0 0.9rem; }
	.story-section .wide-section-header { margin-top: 0; }
	/* Stage legend */
	.stage-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.4rem 0 0.4rem; }
	.stage-legend-item { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-light); padding: 0.9rem 1rem; border-top: 4px solid; }
	.stage-legend-item.emerging { border-top-color: var(--yellow); }
	.stage-legend-item.developing { border-top-color: var(--blue); }
	.stage-legend-item.embedded { border-top-color: var(--green); }
	.stage-legend-name { display: flex; align-items: center; gap: 0.4rem; font-family: var(--header-font); font-size: 0.86rem; font-weight: 700; color: #222; margin: 0 0 0.3rem; }
	.stage-legend-item p { font-size: 0.82rem; line-height: 1.55; color: #555; margin: 0; }
	/* Then / Now change cards */
	.change-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 1.2rem; }
	.change-card { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-light); padding: 1.1rem 1.2rem 1rem; }
	.change-topic { font-family: var(--header-font); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin: 0 0 0.6rem; }
	.change-pair { display: flex; gap: 0.8rem; align-items: stretch; }
	.change-then, .change-now { flex: 1; border-radius: 8px; padding: 0.55rem 0.7rem; }
	.change-then { background: #f1f3f6; border: 1px dashed #c8cfd9; }
	.change-now { background: rgba(163,185,57,0.1); border: 1px solid rgba(163,185,57,0.4); }
	.change-year { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #778; margin-bottom: 0.2rem; }
	.change-now .change-year { color: #5a6c0a; }
	.change-then p, .change-now p { font-size: 0.83rem; line-height: 1.5; color: #333; margin: 0; }
	.change-note { font-size: 0.8rem; line-height: 1.55; color: #556; margin: 0.6rem 0 0; font-style: italic; }
	.change-trace { margin: 0.7rem 0 0; }
	.change-link { display: inline-block; font-family: var(--header-font); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); text-decoration: none; border-bottom: 1px solid rgba(38,78,116,0.28); padding-bottom: 1px; }
	.change-link:hover, .change-link:focus-visible { border-bottom-color: var(--primary); background: rgba(38,78,116,0.06); }
	/* Action popup dialog */
	#action-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,0.55); z-index: 800; align-items: center; justify-content: center; padding: 1rem; }
	#action-popup-overlay.open { display: flex; }
	#action-popup { background: var(--white); border-radius: 14px; box-shadow: 0 8px 40px rgba(10,20,40,0.28); max-width: 820px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
	#action-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.2rem 0.75rem; border-bottom: 1px solid #e2e6ec; flex-shrink: 0; }
	#action-popup-title { font-family: var(--header-font); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); margin: 0; }
	#action-popup-close-x { background: none; border: none; cursor: pointer; color: #556; padding: 0.25rem; line-height: 1; font-size: 1.3rem; border-radius: 4px; }
	#action-popup-close-x:hover { color: var(--primary); background: rgba(38,78,116,0.07); }
	#action-popup-body { overflow-y: auto; padding: 1.2rem 1.2rem 0.5rem; flex: 1; }
	#action-popup-body .scorecard { box-shadow: none; border: none; padding: 0; background: transparent; }
	#action-popup-body .scorecard:hover { transform: none; }
	#action-popup-footer { display: flex; gap: 0.7rem; justify-content: flex-end; padding: 0.75rem 1.2rem 1rem; border-top: 1px solid #e2e6ec; flex-shrink: 0; flex-wrap: wrap; }
	#action-popup-close-btn { font-family: var(--header-font); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.1rem; border-radius: 6px; border: 1.5px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; }
	#action-popup-close-btn:hover { background: rgba(38,78,116,0.07); }
	#action-popup-goto-btn { font-family: var(--header-font); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.1rem; border-radius: 6px; border: none; background: var(--primary); color: #fff; cursor: pointer; }
	#action-popup-goto-btn:hover { background: #1a3a5c; }
	@media (max-width: 500px) { #action-popup-footer { flex-direction: column; } #action-popup-close-btn, #action-popup-goto-btn { width: 100%; text-align: center; } }
	/* Learning patterns */
	.pattern-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.1rem; }
	.pattern { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-light); padding: 1rem 1.2rem; border-left: 4px solid var(--primary); }
	.pattern h3 { font-family: var(--header-font); font-size: 0.98rem; font-weight: 700; color: var(--primary); margin: 0 0 0.35rem; }
	.pattern p { font-size: 0.88rem; line-height: 1.65; color: #333; margin: 0; }
	.pattern .action-ref { font-size: 0.74rem; font-weight: 600; color: #667; }
	/* Honest-gap pill */
	.needs-input { display: inline-block; font-size: 0.8rem; font-style: italic; color: #6b6355; background: #faf7f0; border: 1px dashed #cfc5b2; padding: 0.4rem 0.65rem; border-radius: 8px; line-height: 1.5; }
	/* Learning tab fields */
	.field { margin-bottom: 0.8rem; padding-left: 0.75rem; border-left: 3px solid #ccd; }
	.field.evidence { border-left-color: var(--blue); }
	.field.learning { border-left-color: var(--green); }
	.field.attention { border-left-color: var(--yellow); }
	.field-label { font-family: var(--header-font); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #556; margin-bottom: 0.25rem; }
	.field-body, .field-body p { font-size: 0.86rem; line-height: 1.65; color: #333; margin: 0; }
	.field-body p + p { margin-top: 0.55rem; }
	.evidence-list { margin: 0; padding-left: 1.1rem; }
	.evidence-list li { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.2rem; color: #333; }
	/* Foundations themes */
	.themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 1.2rem; }
	.theme-group { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-light); padding: 1rem 1.2rem; }
	.theme-group-hd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
	.theme-group-hd img { width: 26px; height: 26px; object-fit: contain; }
	.theme-group-hd h3 { font-family: var(--header-font); font-size: 0.95rem; font-weight: 700; color: var(--primary); margin: 0; }
	.theme-group ul { margin: 0; padding-left: 1.1rem; }
	.theme-group li { font-size: 0.87rem; line-height: 1.7; color: #333; }
	.closing-frame { margin-top: 1.4rem; padding: 1rem 1.2rem; background: rgba(38,78,116,0.05); border-left: 4px solid var(--primary); border-radius: 8px; }
	.closing-frame p { font-size: 0.9rem; line-height: 1.65; color: #333; margin: 0; }
	@media (max-width: 900px) {
		.change-grid, .themes-grid, .stage-legend { grid-template-columns: 1fr; }
		.story-section { padding: 0 1.25rem 2.5rem; }
	}
	/* ══ Mobile refinements ══ */
	.detail-tabs { flex-wrap: wrap; row-gap: 0.1rem; }
	.side-collapse-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; }
	.side-collapse-summary::-webkit-details-marker { display: none; }
	.side-collapse-summary::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(38,78,116,0.5); transition: transform 0.2s; }
	.side-collapse[open] > .side-collapse-summary::after { transform: rotate(180deg); }
	@media (max-width: 768px) {
		.wide-hero { margin: 1rem 1.25rem 1.5rem; padding: 1.5rem 1.25rem; }
		.side-nav-inner { padding: 1rem 1.25rem 1rem; gap: 0.9rem; }
		.onpage-nav { display: flex; flex-direction: column; gap: 0.1rem; }
		.onpage-link { border: none; border-left: 2px solid transparent; background: none; font-size: 0.8rem; padding: 0.32rem 0.6rem; border-radius: 6px; }
		.priority-nav { flex-direction: column; gap: 0.25rem; padding-top: 0; }
		.pnav-item, .pnav-item-all { padding: 0.6rem 0.75rem; border: 1px solid transparent; border-radius: 10px; }
		.pnav-item.active, .pnav-item-all.active { border-color: rgba(38,78,116,0.15); }
		.pnav-icon { width: 38px; height: 38px; }
		.pnav-icon img { width: 22px; height: 22px; }
		.side-filter-section, .side-collapse { padding-top: 0.4rem; }
		.side-collapse-summary { cursor: default; }
		.side-collapse-summary::after { display: none; }
		.onpage-select { display: none; }
		.wide-section { overflow-x: clip; }
		.wide-section-header { flex-wrap: wrap; gap: 0.9rem; }
		.section-icon-wrap { width: 56px; height: 56px; border-radius: 12px; }
		.section-icon-wrap img { width: 34px; height: 34px; }
		.section-header-title { font-size: 1.6rem; }
		.section-action-count { width: 100%; }
		.cards-grid { gap: 0.75rem; }
		.scorecard { min-width: 0; }
		.card-band { padding: 1rem 1rem 0.95rem; gap: 0.75rem; }
		.card-band-icon { width: 56px; height: 56px; }
		.card-band-icon img { width: 34px; height: 34px; }
		.card-band-number { font-size: 3.4rem; right: 0.15rem; }
		.card-action-title,
		.card-body,
		.details-inner { padding-left: 1rem; padding-right: 1rem; }
		.card-details summary { padding-left: 1rem; padding-right: 1rem; }
		.js-ready .detail-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
		.detail-tab-btn { min-width: 0; padding: 0.45rem 0.3rem; font-size: 0.72rem; text-align: center; }
		.pe-chip { width: 100%; }
	}
	@media (max-width: 520px) {
		.change-pair { flex-direction: column; gap: 0.45rem; }
		.wide-hero-title { font-size: 1.55rem; }
		.story-title { font-size: 1.45rem; }
		.card-band-number { font-size: 4rem; }
	}


	/* ══ Tier 1 accessibility ══ */
	.stage-emerging .card-band-num-label { color: rgba(30,22,0,0.85); }
	.stage-embedded .card-band-num-label { color: rgba(24,28,4,0.85); }
	.stage-emerging .card-status-badge { color: #3a2c00; }
	.stage-embedded .card-status-badge { color: #232a06; }
	.filter-chip[data-stage="emerging"].active { color: #3a2c00; }
	.filter-chip[data-stage="embedded"].active { color: #232a06; }

	.skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: #fff; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 0 0 10px 0; z-index: 1000; text-decoration: none; }
	.skip-link:focus { left: 0; }
	a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
		outline: 3px solid #264e74; outline-offset: 2px; border-radius: 6px;
	}
	.stage-emerging summary:focus-visible, .filter-chip:focus-visible { outline-color: #1a3550; }

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after { animation: none !important; transition: none !important; }
		.scorecard, .wide-hero-icon, .wide-hero-text, .wide-hero-label, .wide-hero-title, .wide-hero-sub { opacity: 1 !important; transform: none !important; }
		html { scroll-behavior: auto !important; }
	}

	/* ══ Tier 2 ══ */
	.hero-stamp { display: inline-block; margin: 0.55rem 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a5a2a; background: rgba(163,185,57,0.15); border: 1px solid rgba(163,185,57,0.45); padding: 0.22rem 0.7rem; border-radius: 999px; }
	.empty-note { margin: 0.5rem 0 0; padding: 0.9rem 1.1rem; background: var(--white); border: 1px dashed #c8cfd9; border-radius: 10px; font-size: 0.88rem; color: #556; font-style: italic; }
	.back-to-top { position: fixed; right: 1rem; bottom: 1.2rem; z-index: 500; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 1.2rem; line-height: 1; box-shadow: 0 3px 10px rgba(20,40,60,0.3); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
	.back-to-top.show { opacity: 1; pointer-events: auto; }
	:target { scroll-margin-top: 1.5rem; }
	.scorecard:target { box-shadow: 0 0 0 3px var(--primary), var(--shadow-medium); }
	@media print {
		html, body, #wide-content { background: #fff !important; }
		#side-nav, .skip-link, .back-to-top, .card-details summary, .detail-tabs { display: none !important; }
		#wide-wrapper { display: block; }
		.wide-hero { box-shadow: none; border: 1px solid #ccd; margin: 0 0 1rem; max-width: none; }
		.cards-grid { grid-template-columns: 1fr !important; gap: 0.8rem; }
		.scorecard, .pattern, .change-card, .theme-group, .stage-legend-item { break-inside: avoid; box-shadow: none; border: 1px solid #ccd; }
		.scorecard { opacity: 1 !important; transform: none !important; }
		.card-band, .card-status-badge, .section-icon-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
		.detail-tab-pane { display: block !important; border-top: 1px solid #e2e6ec; padding-top: 0.6rem; margin-top: 0.6rem; }
		.story-section, .wide-section { padding-left: 0; padding-right: 0; }
	}

	/* ══ Tier 3: search + clear ══ */
	.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.side-search { display: flex; flex-direction: column; gap: 0.45rem; }
	#action-search { width: 100%; padding: 0.5rem 0.75rem; font-family: var(--body-font, inherit); font-size: 0.85rem; color: #223; background: var(--white); border: 1px solid rgba(38,78,116,0.2); border-radius: 8px; }
	#action-search:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(38,78,116,0.15); }
	.clear-filters { align-self: flex-start; font-size: 0.74rem; font-weight: 700; color: #7a2f26; background: rgba(179,53,40,0.08); border: 1px solid rgba(179,53,40,0.3); padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; transition: background 0.15s; }
	.clear-filters:hover { background: rgba(179,53,40,0.15); }

	/* ══ Foundational document links ══ */
	.doc-links-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(38,78,116,0.6); margin: 1.1rem 0 0.4rem; }
	.doc-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
	.doc-link { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--primary); background: var(--white); border: 1px solid rgba(38,78,116,0.25); padding: 0.35rem 0.8rem; border-radius: 999px; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
	.doc-link:hover { background: rgba(38,78,116,0.07); border-color: var(--primary); text-decoration: none; }
	.story-body a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

	/* ══ Narrative architecture tiers (Plan / Living Record / Annual Reports) ══ */
	.story-body .record-tier { font-family: var(--header-font); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--primary); margin: 1.6rem 0 0.25rem; }
	.story-body .record-tier-note { font-size: 0.9rem; line-height: 1.65; color: #555; margin: 0 0 0.55rem; }

	/* ══ LRSD brand colour keying (sampled from ARC 2025-26) ══ */
	:root {
		--pc-belonging: #826d58; --pc-belonging-dk: #64513e;
		--pc-mastery: #f57c14; --pc-mastery-dk: #a8540c;
		--pc-independence: #99c02c; --pc-independence-dk: #5c7614;
		--pc-generosity: #eb6082; --pc-generosity-dk: #ab3453;
	}
	/* Priority sections: label colour, title bar, icon ring, count badge */
	.wide-section .section-header-title { position: relative; padding-bottom: 0.45rem; }
	.wide-section .section-header-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 2px; }
	#section-belonging .section-header-label { color: var(--pc-belonging-dk); }
	#section-belonging .section-header-title::after { background: var(--pc-belonging); }
	#section-belonging .section-icon-wrap { border: 2px solid var(--pc-belonging); }
	#section-belonging .section-count-badge { background: rgba(130,109,88,0.13); color: var(--pc-belonging-dk); }
	#section-mastery .section-header-label { color: var(--pc-mastery-dk); }
	#section-mastery .section-header-title::after { background: var(--pc-mastery); }
	#section-mastery .section-icon-wrap { border: 2px solid var(--pc-mastery); }
	#section-mastery .section-count-badge { background: rgba(245,124,20,0.13); color: var(--pc-mastery-dk); }
	#section-independence .section-header-label { color: var(--pc-independence-dk); }
	#section-independence .section-header-title::after { background: var(--pc-independence); }
	#section-independence .section-icon-wrap { border: 2px solid var(--pc-independence); }
	#section-independence .section-count-badge { background: rgba(153,192,44,0.15); color: var(--pc-independence-dk); }
	#section-generosity .section-header-label { color: var(--pc-generosity-dk); }
	#section-generosity .section-header-title::after { background: var(--pc-generosity); }
	#section-generosity .section-icon-wrap { border: 2px solid var(--pc-generosity); }
	#section-generosity .section-count-badge { background: rgba(235,96,130,0.13); color: var(--pc-generosity-dk); }
	/* Sidebar priority nav: brand accent on hover/active */
	.pnav-item[data-section="belonging"].active, .pnav-item[data-section="belonging"]:hover { box-shadow: inset 3px 0 0 var(--pc-belonging); }
	.pnav-item[data-section="mastery"].active, .pnav-item[data-section="mastery"]:hover { box-shadow: inset 3px 0 0 var(--pc-mastery); }
	.pnav-item[data-section="independence"].active, .pnav-item[data-section="independence"]:hover { box-shadow: inset 3px 0 0 var(--pc-independence); }
	.pnav-item[data-section="generosity"].active, .pnav-item[data-section="generosity"]:hover { box-shadow: inset 3px 0 0 var(--pc-generosity); }
	/* Narrative sections: one warm accent from the brand family */
	.story-eyebrow { color: var(--pc-mastery-dk); }
	.story-title { position: relative; padding-bottom: 0.5rem; }
	.story-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--pc-mastery); }
	/* Foundations theme groups echo their priority */
	.themes-grid .theme-group:nth-child(1) { border-top: 3px solid var(--pc-belonging); }
	.themes-grid .theme-group:nth-child(2) { border-top: 3px solid var(--pc-mastery); }
	.themes-grid .theme-group:nth-child(3) { border-top: 3px solid var(--pc-independence); }
	.themes-grid .theme-group:nth-child(4) { border-top: 3px solid var(--pc-generosity); }
	@media print { .section-header-title::after, .story-title::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

	/* ══ v13: stage colours become a navy depth scale; hue belongs to priorities ══ */
	:root { --st-emerging: #b9c8d9; --st-developing: #54799f; --st-embedded: #1c3a58; --st-emerging-ink: #26374a; }
	/* Card bands */
	.stage-emerging .card-band { background: var(--st-emerging); }
	.stage-emerging .card-band-num-label { color: var(--st-emerging-ink); }
	.stage-emerging .card-band-number { color: var(--st-emerging-ink); }
	.stage-developing .card-band { background: var(--st-developing); }
	.stage-developing .card-band-num-label { color: rgba(255,255,255,0.92); }
	.stage-developing .card-band-number { color: #fff; }
	.stage-embedded .card-band { background: var(--st-embedded); }
	.stage-embedded .card-band-num-label { color: rgba(255,255,255,0.92); }
	.stage-embedded .card-band-number { color: #fff; }
	/* Badges (icons inherit via currentColor) */
	.stage-emerging .card-status-badge { background: var(--st-emerging); color: var(--st-emerging-ink); }
	.stage-developing .card-status-badge { background: var(--st-developing); color: #fff; }
	.stage-embedded .card-status-badge { background: var(--st-embedded); color: #fff; }
	/* Title strip tints: depth, not hue */
	.stage-emerging .card-action-title { background: rgba(38,78,116,0.045); }
	.stage-developing .card-action-title { background: rgba(38,78,116,0.09); }
	.stage-embedded .card-action-title { background: rgba(38,78,116,0.14); }
	/* Filter chips */
	.filter-chip[data-stage="emerging"] .chip-dot { background: var(--st-emerging); }
	.filter-chip[data-stage="developing"] .chip-dot { background: var(--st-developing); }
	.filter-chip[data-stage="embedded"] .chip-dot { background: var(--st-embedded); }
	.filter-chip[data-stage="emerging"].active { background: var(--st-emerging); color: var(--st-emerging-ink); border-color: var(--st-developing); }
	.filter-chip[data-stage="developing"].active { background: var(--st-developing); color: #fff; border-color: var(--st-developing); }
	.filter-chip[data-stage="embedded"].active { background: var(--st-embedded); color: #fff; border-color: var(--st-embedded); }
	/* Stage legend */
	.stage-legend-item.emerging { border-top-color: var(--st-emerging); }
	.stage-legend-item.developing { border-top-color: var(--st-developing); }
	.stage-legend-item.embedded { border-top-color: var(--st-embedded); }
	/* Narrative accent: the four-priority bar replaces single-priority orange */
	.story-eyebrow { color: rgba(38,78,116,0.6); }
	.story-title::after { width: 64px; background: linear-gradient(to right,
		var(--pc-belonging) 0 25%, var(--pc-mastery) 25% 50%,
		var(--pc-independence) 50% 75%, var(--pc-generosity) 75% 100%); }
	@media print { .card-band, .card-status-badge, .story-title::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

	@media (max-width: 768px) { .side-logo-block { display: none; } }

	/* v15 adjustments */
	.wide-hero-icon { background: none; border: none; width: 112px; height: auto; border-radius: 0; }
	.wide-hero-icon img { width: 100%; height: auto; }
	.onpage-select { display: none; width: 100%; padding: 0.6rem 0.75rem; font-size: 0.9rem; color: #223; background: var(--white); border: 1px solid rgba(38,78,116,0.2); border-radius: 8px; }
	@media (max-width: 768px) {
		.onpage-nav { display: flex; }
		.onpage-select { display: none; }
	}
	.totop { display: block; text-align: right; font-size: 0.78rem; font-weight: 600; color: rgba(38,78,116,0.65); text-decoration: none; margin: 1.2rem 0 0; }
	.totop:hover { color: var(--primary); text-decoration: none; }
	.back-to-top { width: 48px; height: 48px; box-shadow: 0 4px 14px rgba(20,40,60,0.4); }
	@media print { .totop, .onpage-select { display: none !important; } }

/* Public evidence (Data Hub links), v16 */
.field.public-evidence { border-left-color: var(--blue); }
.field.public-evidence .field-label { color: var(--blue); }
.pe-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 4px; }
.pe-chip { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  border: 1.5px solid var(--blue); border-radius: 10px; background: var(--white);
  text-decoration: none; color: var(--primary); max-width: 100%;
  transition: box-shadow .15s ease, transform .15s ease; }
.pe-chip:hover, .pe-chip:focus-visible { box-shadow: var(--shadow-light); transform: translateY(-1px); }
.pe-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pe-chip-name { font-family: var(--header-font); font-weight: 600; font-size: .82rem; line-height: 1.3; }
.pe-ext { font-size: .75em; }
.pe-chip-type { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #5a6c7d; }
.pe-chip-note { font-size: .68rem; font-style: italic; color: #7a6a3a; }
.pe-hint { font-size: .74rem; color: #5a6c7d; margin: 4px 0 0; }
.pe-gap-note { font-size: .82rem; color: #4a5560; margin: 0; }
.field.public-evidence.pe-gap { border-left-style: dashed; }
/* Where to Watch the Data panel */
.watch-data-panel { margin-top: 28px; }
.watch-data-title { font-family: var(--header-font); font-weight: 700; font-size: 1.15rem; color: var(--primary); margin: 0 0 8px; }
.watch-data-list { list-style: none; padding: 0; margin: 10px 0 0; }
.watch-data-list li { padding: 7px 0; border-bottom: 1px solid rgba(38,78,116,.12); font-size: .86rem; line-height: 1.5; }
.watch-data-list li strong { color: var(--primary); }
.watch-data-list li a { color: var(--blue); text-decoration: none; }
.watch-data-list li a:hover, .watch-data-list li a:focus-visible { text-decoration: underline; }
.watch-data-src { white-space: nowrap; }

/* ══ Glossary links, v82 ══════════════════════════════════════════════
   Dotted underline rather than link colour: these are asides, not
   destinations, and colouring them would compete with the evidence
   links that actually leave the page. */
.gloss-link { color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--blue); cursor: help; }
.gloss-link:hover { border-bottom-style: solid; background: rgba(38,78,116,.06); }
.gloss-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px;
  border-radius: 2px; }
@media print { .gloss-link { border-bottom: none; } }

.glossary-list dt { scroll-margin-top: 90px; }
.glossary-list dt.gloss-hit { background: #fff3cd; border-radius: 4px;
  padding: 2px 6px; margin-left: -6px; box-shadow: 0 0 0 2px #fff3cd; }
@media (prefers-reduced-motion: no-preference) {
  .glossary-list dt.gloss-hit { transition: background .4s ease; }
}
.gloss-return { margin: 0 0 14px; }
.gloss-return[hidden] { display: none; }
.gloss-return-link { display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 1.5px solid var(--blue); border-radius: 10px;
  background: var(--white); color: var(--primary); text-decoration: none;
  font-family: var(--header-font); font-weight: 600; font-size: .84rem; }
.gloss-return-link:hover, .gloss-return-link:focus-visible {
  box-shadow: var(--shadow-light); }
.gloss-return-link:focus-visible { outline: 3px solid var(--blue);
  outline-offset: 2px; }


	/* ══ v19 desktop layout: unified centred column ══ */
	:root { --content-max: 1200px; --mobile-section-bar-h: 52px; }

	/* ══════════════════════════════════════════════════════════
	   Mobile orientation: sticky section bar + drawer navigation
	   Added v43. Desktop is unchanged: the sticky sidebar already
	   gives orientation there, so all of this is <=768px only.
	   ══════════════════════════════════════════════════════════ */

	#section-bar {
		position: fixed; top: 0; left: 0; right: 0; z-index: 980;
		display: none; align-items: center; gap: 0.6rem;
		height: var(--mobile-section-bar-h); padding: 0 0.6rem;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(16px) saturate(1.25);
		backdrop-filter: blur(16px) saturate(1.25);
		border-bottom: 1px solid rgba(38, 78, 116, 0.10);
		box-shadow: 0 10px 28px rgba(18, 41, 63, 0.08);
		transform: translateY(-100%); transition: transform 0.22s ease;
	}
	#section-bar.visible { transform: translateY(0); }
	@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
		#section-bar { background: #ffffff; }
	}
	#section-bar-label {
		margin: 0; flex: 1; min-width: 0;
		font-family: var(--header-font); font-size: 0.82rem; font-weight: 700;
		letter-spacing: 0.02em; color: var(--primary);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	#nav-toggle, #nav-close {
		flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; border: none; border-radius: 10px;
		background: transparent; color: var(--primary); cursor: pointer;
	}
	#nav-toggle:hover, #nav-close:hover { background: rgba(38, 78, 116, 0.08); }
	#nav-toggle:focus-visible, #nav-close:focus-visible {
		outline: 3px solid var(--blue); outline-offset: -3px;
	}
	#nav-close { display: none; align-self: flex-end; margin: -0.25rem -0.4rem 0 0; }

	#nav-scrim {
		position: fixed; inset: 0; z-index: 900;
		background: rgba(12, 22, 34, 0.5);
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity 0.22s ease, visibility 0.22s ease;
	}
	#nav-scrim.visible { opacity: 1; visibility: visible; pointer-events: auto; }
	/* An id selector beats the UA [hidden] rule, so restate it or the bar
	   would render even when JS never runs to wire it up. */
	#section-bar[hidden], #nav-scrim[hidden] { display: none !important; }

	@media (max-width: 768px) {
		#section-bar { display: flex; }
		#nav-close { display: inline-flex; }
		#nav-scrim { top: var(--mobile-section-bar-h); }

		/* The drawer is the SAME element as the desktop sidebar, moved by
		   CSS only. No DOM is reparented, so every existing filter, chip
		   and search selector keeps working untouched. */
		#side-nav {
			position: fixed; top: var(--mobile-section-bar-h); left: 0; z-index: 950;
			width: min(86vw, 340px); max-width: 340px;
			height: calc(100vh - var(--mobile-section-bar-h)); height: calc(100dvh - var(--mobile-section-bar-h));
			background: var(--white);
			border-right: none; box-shadow: 4px 0 28px rgba(0, 0, 0, 0.22);
			overflow-y: auto; -webkit-overflow-scrolling: touch;
			transform: translateX(-100%);
			transition: transform 0.24s ease, visibility 0.24s ease;
			visibility: hidden;
		}
		#side-nav.open { transform: translateX(0); visibility: visible; }
		body.nav-open { overflow: hidden; }
		#wide-content { padding-top: var(--mobile-section-bar-h); }
		/* Clears the fixed bar so anchor jumps do not land under it. */
		html { scroll-padding-top: var(--mobile-section-bar-h); }
		:target { scroll-margin-top: var(--mobile-section-bar-h); }
		.scorecard, .story-section, .wide-section { scroll-margin-top: var(--mobile-section-bar-h); }
	}

	@media print { #section-bar, #nav-scrim, #nav-toggle, #nav-close { display: none !important; } }

/* ══ Section cards & accordion (UI refresh) ══════════════════════════
   Story sections become card-like panels on the page's grey canvas,
   each collapsible so readers see only what they choose to open.
   ══════════════════════════════════════════════════════════════════ */

/* Card treatment for narrative sections */
.story-section {
	background: var(--white);
	border-radius: 14px;
	box-shadow: var(--shadow-light);
	padding: 1.75rem 2.5rem 1.5rem;
	scroll-margin-top: 2rem;
	max-width: calc(var(--content-max) - 4rem);
	margin: 0 auto 1.75rem;
}

/* Subtle per-section background tints for visual compartmentalisation */
#section-change     { background: #f8fafc; }
#section-learning   { background: #f9f8f5; }
#section-foundations { background: #f7fbf4; }
#section-glossary   { background: #f9f9fc; }

/* Very-light priority zone tints for wide-sections */
#section-belonging   { background: #f8f6f4; }
#section-mastery     { background: #fdf9f5; }
#section-independence { background: #f6faf2; }
#section-generosity  { background: #fdf5f7; }

/* ── Single-section mode ── */
section.single-section-hidden { display: none !important; }
section.single-section-active {
	display: block;
	animation: sectionShowIn 0.24s ease;
}
@keyframes sectionShowIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Jump + next navigation affordances ── */
.onpage-link.active {
	background: rgba(38,78,116,0.11);
	border-left-color: var(--primary);
	color: var(--primary);
	font-weight: 700;
}
.section-next-nav {
	margin: 1.2rem 0 0.5rem;
	display: flex;
	justify-content: flex-end;
}
.section-next-btn {
	border: 1px solid rgba(38,78,116,0.2);
	background: var(--white);
	color: var(--primary);
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font-size: 0.82rem;
	font-weight: 700;
	font-family: var(--body-font);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.section-next-btn:hover:not(:disabled) {
	background: rgba(38,78,116,0.08);
	border-color: rgba(38,78,116,0.35);
}
.section-next-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ── Section break imagery ── */
.story-break-image {
	margin: 1rem 0 1.15rem;
	background: #fff;
	border: 1px solid rgba(38,78,116,0.12);
	border-radius: 12px;
	box-shadow: var(--shadow-light);
	overflow: hidden;
}
.story-break-image img {
	display: block;
	width: 100%;
	max-height: 280px;
	object-fit: cover;
}
.story-break-image figcaption {
	margin: 0;
	padding: 0.58rem 0.8rem 0.68rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #4a5462;
	background: rgba(38,78,116,0.03);
}

/* ── Constrain story prose width for readability ── */
.story-body p {
	max-width: 74ch;
}

/* ── Responsive overrides ── */
@media (max-width: 900px) {
	.story-section {
		margin: 0 1rem 1.25rem;
		padding: 1.4rem 1.5rem 1.25rem;
		max-width: none;
		border-radius: 10px;
	}
}
@media (max-width: 768px) {
	.story-section {
		margin: 0 0.5rem 1rem;
		padding: 1rem 1rem 1rem;
		border-radius: 8px;
	}
}
/* Respect reduced-motion: drop the body-in animation */
@media (prefers-reduced-motion: reduce) {
	section.single-section-active { animation: none !important; }
}

/* ── Print: always show all section bodies ── */
@media print {
	.story-section {
		background: #fff !important;
		box-shadow: none;
		border: 1px solid #ddd;
		border-radius: 0;
		margin: 0 0 1rem;
		padding: 0.75rem 0;
		break-inside: avoid;
	}
	section.single-section-hidden { display: block !important; }
	.section-next-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   v83 LAYOUT REFRESH
   Four problems this block solves, recorded so nobody undoes it by
   accident:
   (1) The masthead sat in its own white card, which read as a widget
       rather than as the title of the page. It is now unboxed and
       divided from the content by a rule.
   (2) Photographs were forced into 280px letterboxes with object-fit
       cover, so faces and context were cropped away. Every content
       image now keeps its own aspect ratio and is capped by width.
   (3) Prose was held at a readable measure inside a much wider card,
       leaving a dead column of white to the right of every paragraph.
       The measure is now CENTRED in the card and wide blocks (grids,
       card decks) still use the full width, so the leftover space is
       symmetrical margin instead of a one-sided void.
   (4) Sections, and the blocks inside them, ran together. Sections are
       cards on the grey canvas; blocks inside a section are separated
       by rules and consistent rhythm.
   ══════════════════════════════════════════════════════════════════ */

:root {
	--measure: 42rem;        /* prose column */
	--measure-wide: 60rem;   /* stacked panels: patterns, glossary, data */
	--rule: rgba(38, 78, 116, 0.13);
}

/* ── (1) Masthead, unboxed ── */
.wide-hero {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	max-width: var(--content-max);
	margin: 0 auto 1.75rem;
	padding: 2.5rem 2.5rem 1.6rem;
	gap: 1.75rem;
	border-bottom: 1px solid var(--rule);
}
.wide-hero-photo {
	position: relative;
	overflow: hidden;
	align-items: flex-end;
	min-height: clamp(20rem, 52vw, 31rem);
	padding: clamp(2rem, 4vw, 3rem);
	background-color: #1e2f3f;
	background-image: url('/mysp/public/images/COD_0773.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: none;
	border-radius: 0 0 24px 24px;
}
.wide-hero-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(16, 26, 38, 0.82), rgba(16, 26, 38, 0.58));
}
.wide-hero-photo .wide-hero-icon,
.wide-hero-photo .wide-hero-text {
	position: relative;
	z-index: 1;
}
.wide-hero-photo .wide-hero-icon {
	width: clamp(4.75rem, 10vw, 6rem);
	padding: 0.75rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 1.25rem;
	backdrop-filter: blur(4px);
}
.wide-hero-photo .wide-hero-text {
	max-width: min(38rem, 100%);
	padding: 1.5rem 1.75rem;
	background: rgba(16, 26, 38, 0.78);
	border-radius: 1.5rem;
	box-shadow: 0 1.1rem 2.75rem rgba(0, 0, 0, 0.2);
}
.wide-hero-photo .wide-hero-label,
.wide-hero-photo .wide-hero-title,
.wide-hero-photo .wide-hero-sub {
	color: #fff;
}
.wide-hero-photo .wide-hero-label {
	color: rgba(255, 255, 255, 0.78);
}
.wide-hero-title { font-size: 2.5rem; }
.wide-hero-sub { font-size: 0.95rem; color: #55606c; }
.wide-hero-photo .wide-hero-sub { color: rgba(255, 255, 255, 0.92); }
.wide-hero-photo .hero-stamp {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.34);
}

/* ── (2) Imagery keeps its aspect ratio ── */
.story-break-image {
	max-width: var(--measure);
	margin: 1.6rem auto 1.8rem;
}
.story-break-image img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
}
.detail-img {
	width: 100%;
	max-width: 420px;
	height: auto;
	max-height: none;
	object-fit: contain;
	background: #fff;
}

/* ── (3) Centred reading measure, full-width blocks ── */
.story-section {
	max-width: var(--content-max);
	padding: 2rem 2.5rem 1.75rem;
	border: 1px solid var(--rule);
}
.story-section > .story-eyebrow,
.story-section > .story-title,
.story-section > .story-body,
.story-section > .gloss-return,
.story-section > .doc-links,
.story-section > .closing-frame,
.story-section > .empty-note,
.story-section > p,
.story-section > ul,
.story-section > ol {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
}
.story-body p,
.story-body li { max-width: none; }
.story-body p { font-size: 1.02rem; line-height: 1.78; }

/* Stacked panels read at a slightly wider measure than body copy. */
.pattern-list,
.watch-data-panel,
.glossary-group,
.reply-box,
.gloss-return {
	max-width: var(--measure-wide);
	margin-left: auto;
	margin-right: auto;
}

/* ── (4) Division between sections and within them ── */
.story-section,
.wide-section {
	border-radius: 16px;
	box-shadow: var(--shadow-light);
}
.wide-section {
	background: var(--white);
	border: 1px solid var(--rule);
	padding: 2rem 2.5rem 2.25rem;
	max-width: var(--content-max);
	margin: 0 auto 1.75rem;
}
.wide-section .section-intro-body {
	max-width: none;
	margin: 0 0 1.5rem;
}

/* Two-column layout: description left + stage visual right */
.intro-body-layout {
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
}
.intro-body-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.intro-stage-visual {
	flex: 0 0 clamp(16rem, 30%, 24rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1rem 1.25rem;
	background: rgba(0,0,0,0.035);
	border-radius: 8px;
	min-width: 0;
	max-width: 24rem;
	width: min(100%, 24rem);
	margin-left: auto;
	align-self: flex-start;
	justify-content: center;
}
.stage-visual-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.96rem;
}
.stage-visual-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	flex-shrink: 0;
}
.stage-embedded-item .stage-visual-dot  { background: var(--st-embedded); }
.stage-developing-item .stage-visual-dot { background: var(--st-developing); }
.stage-emerging-item .stage-visual-dot  { background: var(--st-emerging); border: 1px solid #8fa8be; }
.stage-visual-num {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 1.4em;
	color: var(--text);
	font-size: 1.2em;
}
.stage-visual-label {
	color: #555;
	font-size: 1.02em;
}
@media (max-width: 860px) {
	.intro-body-layout { flex-direction: column; }
	.intro-body-text,
	.intro-stage-visual { flex-basis: auto; max-width: none; width: 100%; }
	.intro-stage-visual {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.9rem;
	}
}
@media (max-width: 680px) {
	.intro-body-layout { flex-direction: column; }
	.intro-stage-visual {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding: 0.9rem 1rem;
	}
	.stage-visual-item { font-size: 0.9rem; }
}

/* A rule above every block-level group inside a narrative section. */
.stage-legend,
.change-grid,
.themes-grid,
.pattern-list,
.watch-data-panel,
.story-section .glossary-group:first-of-type {
	margin-top: 1.6rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule);
}
.story-body .record-tier {
	margin-top: 1.7rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}
.story-body .record-tier:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.story-note {
	margin-top: 1.4rem;
	padding: 0.15rem 0 0.15rem 1rem;
	border-left: 3px solid rgba(38, 78, 116, 0.22);
}
.closing-frame { margin-top: 1.6rem; }
.story-section > .story-title { margin-bottom: 1.25rem; }
.section-next-nav {
	border-top: 1px solid var(--rule);
	padding-top: 1.1rem;
	margin-top: 1.75rem;
}

/* ── In-page priority toolbar ──
   The sidebar filters are easy to miss, and on a phone they live behind
   a drawer. Every priority section therefore carries the same controls
   above its card deck. The toolbar does not own any state: it proxies
   clicks to the sidebar controls and re-reads them after every filter
   pass, so there is still exactly one source of truth. */
.priority-toolbar {
	margin: 0 0 1.75rem;
	padding: 1rem 1.15rem 1.1rem;
	background: rgba(38, 78, 116, 0.04);
	border: 1px solid var(--rule);
	border-radius: 12px;
}
.ptb-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.8rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--rule);
}
.ptb-title {
	font-family: var(--header-font);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--primary);
	margin: 0;
}
.ptb-count { font-size: 0.8rem; color: #4a5560; margin: 0; }
.ptb-count strong { color: var(--primary); }
.ptb-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.55rem;
}
.ptb-label {
	flex: 0 0 6.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #5a6675;
}
.ptb-btn {
	font-family: var(--body-font);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--primary);
	background: var(--white);
	border: 1px solid rgba(38, 78, 116, 0.22);
	border-radius: 999px;
	padding: 0.28rem 0.8rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ptb-btn:hover { background: rgba(38, 78, 116, 0.09); }
.ptb-btn.active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.ptb-search { margin-bottom: 0; }
.ptb-search-input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.4rem 0.7rem;
	font-family: var(--body-font);
	font-size: 0.82rem;
	color: #223;
	background: var(--white);
	border: 1px solid rgba(38, 78, 116, 0.22);
	border-radius: 8px;
}
.ptb-search-input:focus {
	border-color: var(--primary);
	/* Transparent rather than none: forced-colours modes repaint it, and the
	   box-shadow below is invisible there. */
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(38, 78, 116, 0.15);
}
.ptb-clear {
	font-size: 0.74rem;
	font-weight: 700;
	font-family: var(--body-font);
	color: #7a2f26;
	background: rgba(179, 53, 40, 0.08);
	border: 1px solid rgba(179, 53, 40, 0.3);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	cursor: pointer;
}
.ptb-clear:hover { background: rgba(179, 53, 40, 0.16); }
.ptb-clear[hidden] { display: none; }

/* ── Sidebar panels ── */
#side-nav { background: #eef1f5; }
.side-nav-inner { gap: 1rem; }
.side-panel {
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 0.95rem 0.95rem 1rem;
}
.side-panel-title {
	font-family: var(--header-font);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: rgba(38, 78, 116, 0.7);
	margin: 0 0 0.55rem;
}
.side-panel-note {
	font-size: 0.72rem;
	line-height: 1.55;
	color: #5a6c7d;
	margin: -0.2rem 0 0.75rem;
}
.side-panel-actions .side-search { margin-bottom: 0.85rem; }
.side-panel-actions .side-collapse { padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.side-panel-actions .side-collapse:first-of-type { padding-top: 0; border-top: 0; }
.side-panel-actions .clear-filters { margin-top: 0.85rem; }
#filter-control-source {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--rule);
}
@media (min-width: 1101px) {
	#side-nav #filter-control-source { display: none; }
}
.side-panel-translate { background: transparent; border: 0; padding: 0; }
.side-logo-block { border-bottom: 0; padding-bottom: 0.25rem; }

/* ── Priorities two-column layout ── */
#priorities-layout {
	display: flex;
	flex-direction: row;   /* priorities left, filter panel right */
	align-items: flex-start;
	gap: 1.5rem;
}
#priorities-main { flex: 1 1 0; min-width: 0; }
#priorities-filter-bar {
	display: block;
	flex: 0 0 230px;
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(38, 78, 116, 0.15) transparent;
}
#priorities-filter-bar .priority-toolbar {
	margin: 0;
}
/* On narrow viewports, keep the filter available as a sticky side tab. */
@media (max-width: 1100px) {
	#priorities-layout {
		flex-direction: column;
	}
	#filter-control-source {
		display: none;
	}
	#priorities-filter-bar {
		display: block;
		flex: none;
		width: min(21rem, calc(100vw - 0.75rem));
		position: fixed;
		top: 1rem;
		right: 0;
		z-index: 970;
		max-height: calc(100vh - 2rem);
		max-height: calc(100dvh - 2rem);
		overflow: visible;
		transform: translateX(calc(100% - 2rem));
		transition: transform 0.24s ease;
		pointer-events: auto;
	}
	#priorities-filter-bar.ptb-open { transform: translateX(0); }
	#priorities-filter-bar .priority-toolbar {
		margin: 0;
		padding-left: 2.6rem;
		background: var(--white);
		border-radius: 16px 0 0 16px;
		box-shadow: var(--shadow-medium);
		transition: opacity 0.15s ease;
	}
	/* When closed, hide the panel – only the small blue toggle tab stays visible. */
	#priorities-filter-bar:not(.ptb-open) .priority-toolbar {
		opacity: 0;
		pointer-events: none;
	}
}

/* Hide entirely when not on a Four Priorities section (applies at all viewport sizes). */
#priorities-filter-bar.ptb-out {
	display: none !important;
}

.ptb-mobile-toggle { display: none; }
@media (max-width: 1100px) {
	.ptb-mobile-toggle {
		position: absolute;
		top: 0;
		left: 0;
		width: 2rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.25rem;
		border: 0;
		border-right: 1px solid rgba(38, 78, 116, 0.14);
		border-radius: 0 8px 8px 0;
		background: var(--primary);
		color: #fff;
		font-family: var(--header-font);
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		cursor: pointer;
		box-shadow: -4px 2px 10px rgba(18, 34, 52, 0.22);
	}
	.ptb-mobile-toggle:focus-visible {
		outline: 3px solid #10263c;
		outline-offset: 2px;
	}
}

/* ── Responsive ── */
@media (max-width: 1200px) {
	:root { --measure-wide: 52rem; }
}
@media (max-width: 900px) {
	.story-section,
	.wide-section {
		margin: 0 1rem 1.25rem;
		padding: 1.4rem 1.5rem 1.25rem;
		max-width: none;
		border-radius: 12px;
	}
	.wide-hero { padding: 1.75rem 1.5rem 1.25rem; }
	.ptb-label { flex-basis: 100%; }
	#priorities-filter-bar { width: min(20rem, calc(100vw - 0.75rem)); }
	#priorities-filter-bar .priority-toolbar { margin: 0; }
}
@media (max-width: 768px) {
	.story-section,
	.wide-section {
		margin: 0 0.75rem 1rem;
		padding: 1.1rem 1.1rem 1.1rem;
	}
	.story-body p { font-size: 1rem; }
	.side-panel { padding: 0.8rem; }
	/* Default: match the desktop-narrow appearance (top: 1rem, no section bar). */
	#priorities-filter-bar {
		top: 1rem;
		transform: translateX(calc(100% - 2rem));
		max-height: calc(100vh - 2rem);
		max-height: calc(100dvh - 2rem);
		transition: transform 0.24s ease, top 0.22s ease, max-height 0.22s ease;
	}
	/* Once the mobile section bar slides into view, shift the filter tab down
	   in sync with the section bar's own 0.22s entrance transition. */
	body:has(#section-bar.visible) #priorities-filter-bar {
		top: calc(var(--mobile-section-bar-h) + 1rem);
		max-height: calc(100vh - var(--mobile-section-bar-h) - 2rem);
		max-height: calc(100dvh - var(--mobile-section-bar-h) - 2rem);
	}
	#priorities-filter-bar.ptb-open { transform: translateX(0); }
	#priorities-filter-bar .priority-toolbar { margin: 0; }
}

@media print {
	.wide-hero { border-bottom: 1px solid #ccd; }
	.priority-toolbar { display: none !important; }
	.wide-section { border: 1px solid #ddd; box-shadow: none; margin: 0 0 1rem; padding: 0.75rem 0; }
}

/* v83 polish: even card rows, and lists that match the prose they sit in. */
.cards-grid { align-items: stretch; }
.story-section > ul.detail-list li,
.story-section > ol li {
	font-size: 0.98rem;
	line-height: 1.75;
	margin-bottom: 0.45rem;
}
.wide-section-header { padding-bottom: 1rem; }

/* ── Glossary popup dialog ── */
#gloss-popup[hidden] { display: none; }
#gloss-popup {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.gloss-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.gloss-popup-box {
	position: relative;
	background: var(--white);
	border-radius: 14px;
	padding: 1.5rem 1.5rem 1.25rem;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	z-index: 1;
}
.gloss-popup-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	color: #666;
	border-radius: 6px;
}
.gloss-popup-close:hover { background: rgba(0,0,0,0.06); }
.gloss-popup-eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(38, 78, 116, 0.55);
	margin: 0 0 0.3rem;
}
.gloss-popup-term {
	font-family: var(--header-font);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 0.65rem;
}
.gloss-popup-def {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--text);
	margin: 0 0 1.25rem;
}
.gloss-popup-actions {
	display: flex;
	gap: 0.6rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.gloss-popup-btn-close {
	font-family: var(--body-font);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary);
	background: none;
	border: 1px solid rgba(38, 78, 116, 0.28);
	border-radius: 8px;
	padding: 0.45rem 1rem;
	cursor: pointer;
}
.gloss-popup-btn-close:hover { background: rgba(38, 78, 116, 0.06); }
.gloss-popup-btn-goto {
	font-family: var(--body-font);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--white);
	background: var(--primary);
	border: 1px solid var(--primary);
	border-radius: 8px;
	padding: 0.45rem 1rem;
	text-decoration: none;
	display: inline-block;
}
.gloss-popup-btn-goto:hover { background: #1a3a58; border-color: #1a3a58; }

/* ── Priority toolbar: radio-button list variant ── */
.ptb-radio-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 auto;
}
.ptb-radio-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--body-font);
	font-size: 0.82rem;
	color: var(--text);
	cursor: pointer;
	padding: 0.1rem 0;
}
.ptb-radio-label:hover { color: var(--primary); }
.ptb-radio {
	accent-color: var(--primary);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	cursor: pointer;
}