/* Tayf public monitoring surfaces — theme-independent, shipped by tayf-frontend. */

.zn-shell {
	--zn-ink: #18211d;
	--zn-ink-soft: #34443c;
	/*
	 * Darkened by 4 from #66736d.
	 *
	 * The old value cleared WCAG AA on white (4.96) and on paper (4.65) but fell
	 * under 4.5 on every tinted surface it is actually used on — 4.43 on
	 * surface-alt, 4.42 on amber-soft, 4.30 on red-soft — which PRODUCT.md
	 * requires it to clear. This is the smallest change that passes on all seven
	 * backgrounds at once (worst case 4.56) and it is imperceptible next to the
	 * old tone.
	 */
	--zn-muted: #626f69;
	--zn-line: #cbd3cf;
	--zn-line-soft: #e4e9e6;
	--zn-paper: #f7f8f6;
	--zn-surface: #ffffff;
	--zn-surface-alt: #f0f3f1;
	--zn-green: #126247;
	--zn-green-dark: #0b4934;
	--zn-green-soft: #e8f2ed;
	--zn-red: #a9362c;
	--zn-red-soft: #f9ecea;
	--zn-amber: #9a5b0d;
	--zn-amber-soft: #fbf1df;
	--zn-blue: #286281;
	--zn-blue-soft: #e8f1f5;
	--zn-violet: #67548e;
	--zn-cyan: #187486;
	--zn-radius: 4px;
	/* Gutter used only when no theme container variables are present. */
	--zn-gutter: 20px;
	/*
	 * How far a page-level sticky element must clear the site header. Zero
	 * unless the theme actually pins its header: Blocksy publishes
	 * `--header-sticky-height` only when its sticky header is switched on, so
	 * enabling it in the Customizer moves these offsets on its own.
	 */
	--zn-sticky-offset: var(--header-sticky-height, 0px);
	color: var(--zn-ink);
	direction: rtl;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-size: 15.5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.75;
	margin-inline: auto;
	min-inline-size: 0;
	/*
	 * Track the active theme's content container so the product lines up
	 * exactly with the site header and footer, and so the width stays where the
	 * Customizer says it is instead of being hard-coded here. Blocksy publishes
	 * both variables; the fallbacks reproduce the original fixed 82rem shell for
	 * a theme that publishes neither.
	 */
	inline-size: var(--theme-container-width, calc(100% - var(--zn-gutter) * 2));
	max-inline-size: var(--theme-normal-container-max-width, 82rem);
	padding: 30px 0 72px;
}

/* Foundations and typography */

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

.zn-shell :where(a) {
	color: var(--zn-green-dark);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.zn-shell :where(a:hover) {
	color: var(--zn-green);
	text-decoration-thickness: 2px;
}

/*
 * Available to assistive technology, absent from the layout.
 *
 * Used for table captions: every table here sits under a visible panel heading,
 * so a printed caption would repeat it, but a screen reader reaching the table
 * out of order has nothing to announce without one.
 */
.zn-sr-only {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.zn-shell :where(a, button, input, select, textarea):focus-visible {
	border-color: var(--zn-green) !important;
	box-shadow: 0 0 0 3px rgba(18, 98, 71, 0.18);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.zn-shell :where(h1, h2, h3) {
	color: var(--zn-ink);
	font-weight: 750;
	letter-spacing: 0;
	line-height: 1.35;
	text-wrap: balance;
}

.zn-shell h1 {
	font-size: 36px;
	margin: 0;
	max-inline-size: 24ch;
}

.zn-shell h2 {
	font-size: 20px;
	margin: 0;
}

.zn-shell h3 {
	font-size: 16px;
	margin: 0;
}

.zn-shell :where(p, li) {
	text-wrap: pretty;
}

.zn-shell :where(img, video, iframe) {
	block-size: auto;
	max-inline-size: 100%;
}

.zn-shell code,
.zn-mono {
	direction: ltr;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	unicode-bidi: embed;
}

/* Page heading and commands */

.zn-page-head {
	align-items: end;
	border-block-end: 1px solid var(--zn-ink);
	display: flex;
	gap: 28px;
	justify-content: space-between;
	padding-block: 12px 26px;
}

.zn-page-head__copy {
	max-inline-size: 62rem;
	min-inline-size: 0;
}

.zn-page-head__copy .zn-meta {
	margin-block-start: 12px;
}

.zn-kicker {
	color: var(--zn-green);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	margin: 0 0 7px;
}

.zn-lede {
	color: var(--zn-muted);
	font-size: 16px;
	line-height: 1.75;
	margin: 10px 0 0;
	max-inline-size: 72ch;
}

.zn-panel__head .zn-lede {
	font-size: 13px;
	line-height: 1.65;
	margin-block-start: 5px;
}

.zn-actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 8px;
}

.zn-button {
	align-items: center;
	background: var(--zn-ink);
	border: 1px solid var(--zn-ink);
	border-radius: 2px;
	color: #ffffff !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	font-weight: 750;
	justify-content: center;
	line-height: 1.35;
	min-block-size: 42px;
	padding: 9px 14px;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.zn-button--ghost {
	background: transparent;
	border-color: #9eaaa4;
	color: var(--zn-ink) !important;
}

.zn-button:hover {
	background: var(--zn-green-dark);
	border-color: var(--zn-green-dark);
	color: #ffffff !important;
	text-decoration: none;
}

.zn-button:active {
	transform: translateY(1px);
}

/* Metrics and layout */

.zn-stats {
	background: var(--zn-line);
	border-block: 1px solid var(--zn-line);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block: 22px 32px;
}

.zn-stat {
	background: var(--zn-surface);
	min-block-size: 96px;
	min-inline-size: 0;
	padding: 16px 18px 17px;
}

.zn-stat b {
	display: block;
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	font-weight: 760;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.zn-stat span {
	color: var(--zn-muted);
	display: block;
	font-size: 12px;
	line-height: 1.45;
	margin-block-start: 9px;
}

.zn-layout {
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 1fr) minmax(250px, 288px);
	margin-block-start: 30px;
}

.zn-stack {
	display: grid;
	gap: 28px;
	min-inline-size: 0;
}

.zn-layout > aside.zn-stack {
	align-content: start;
	gap: 30px;
}

.zn-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zn-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Sections stay unframed; repeated records carry the visible borders. */
.zn-panel {
	background: transparent;
	border: 0;
	border-block-start: 2px solid var(--zn-ink);
	min-inline-size: 0;
	padding: 14px 0 0;
}

.zn-panel__head {
	align-items: baseline;
	border-block-end: 1px solid var(--zn-line);
	display: flex;
	gap: 14px;
	justify-content: space-between;
	margin: 0 0 14px;
	min-inline-size: 0;
	padding-block-end: 10px;
}

.zn-panel__head > :first-child {
	min-inline-size: 0;
}

.zn-count {
	color: var(--zn-muted);
	flex: 0 0 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* Story records */

.zn-card {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	display: flex;
	flex-direction: column;
	min-block-size: 148px;
	min-inline-size: 0;
	padding: 15px 16px 14px;
	transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.zn-card:hover,
.zn-card:focus-within {
	border-color: #7b8f85;
	box-shadow: 0 3px 10px rgba(24, 33, 29, 0.06);
	transform: translateY(-1px);
}

.zn-card h3 {
	font-size: 15.5px;
	line-height: 1.6;
	margin: 12px 0 14px;
	overflow-wrap: anywhere;
}

.zn-card h3 a {
	color: var(--zn-ink);
	font-weight: 720;
	text-decoration: none;
}

.zn-card h3 a:hover {
	color: var(--zn-green-dark);
	text-decoration: underline;
}

.zn-card__top,
.zn-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	justify-content: space-between;
	min-inline-size: 0;
}

.zn-meta {
	color: var(--zn-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	justify-content: flex-start;
	line-height: 1.6;
}

.zn-card > .zn-meta {
	border-block-start: 1px solid var(--zn-line-soft);
	margin-block-start: auto;
	padding-block-start: 10px;
}

.zn-risk {
	color: var(--zn-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zn-card--compact {
	min-block-size: 132px;
	padding: 13px 14px 12px;
}

.zn-card--compact h3 {
	font-size: 14.5px;
	margin-block: 10px 12px;
}

/* Editorial media: source imagery remains legible and carries no overlays. */

.zn-card__media {
	aspect-ratio: 16 / 9;
	background: var(--zn-surface-alt);
	border-block-end: 1px solid var(--zn-line);
	display: block;
	inline-size: auto;
	margin: -15px -16px 0;
	min-block-size: 0;
	min-inline-size: 0;
	overflow: hidden;
	position: relative;
}

.zn-card__image,
.zn-article-media__image {
	block-size: 100% !important;
	display: block;
	filter: none;
	inline-size: 100%;
	margin: 0;
	max-inline-size: none !important;
	mix-blend-mode: normal;
	object-fit: cover;
	object-position: center;
	opacity: 1;
}

.zn-card__image {
	position: relative;
	z-index: 1;
}

/* A remote image that fails to load leaves no box behind: an article without
   usable imagery reads as an article without imagery, not as a broken one. */

.zn-card__media.is-missing {
	display: none;
}

.zn-card--compact .zn-card__media {
	margin: -13px -14px 0;
}

.zn-article-media {
	background: var(--zn-surface-alt);
	border-block: 1px solid var(--zn-line-soft);
	inline-size: 100%;
	margin: 0 0 28px;
	min-inline-size: 0;
}

.zn-article-media[hidden] {
	display: none !important;
}

.zn-article-media__image {
	aspect-ratio: 16 / 9;
	block-size: auto !important;
	max-block-size: 42rem;
}

.zn-article-media figcaption {
	color: var(--zn-muted);
	font-size: 11px;
	line-height: 1.6;
	padding: 7px 0 5px;
}

/* Each grid expresses a reading mode rather than a decorative card wall. */

.zn-grid--archive {
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zn-grid--archive .zn-card {
	min-block-size: 330px;
}

.zn-grid--featured {
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zn-grid--featured > .zn-card:first-child {
	grid-column: span 2;
}

.zn-grid--featured > .zn-card:first-child .zn-card__media {
	aspect-ratio: 2 / 1;
}

.zn-grid--featured > .zn-card:first-child h3 {
	font-size: 20px;
	line-height: 1.55;
	max-inline-size: 34ch;
}

.zn-grid--editorial {
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1025px) {
	.zn-grid--editorial .zn-card {
		display: grid;
		gap: 0 16px;
		grid-template-columns: minmax(170px, 42%) minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		min-block-size: 218px;
	}

	.zn-grid--editorial .zn-card__media {
		aspect-ratio: auto;
		block-size: auto;
		border-block-end: 0;
		border-inline-end: 1px solid var(--zn-line);
		grid-column: 1;
		grid-row: 1 / -1;
		margin: -15px -16px -14px 0;
		min-block-size: 216px;
	}

	.zn-grid--editorial .zn-card > :not(.zn-card__media) {
		grid-column: 2;
		min-inline-size: 0;
	}

	.zn-grid--editorial .zn-card h3 {
		margin-block: 11px 14px;
	}

	/* Cards with no image collapse back to a single column instead of holding
	   an empty media slot open. */
	.zn-grid--editorial .zn-card--nomedia,
	.zn-grid--editorial .zn-card:has(> .zn-card__media.is-missing) {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
}

/* Timeline thumbnails: a dense scan aid, never a hero. */

.zn-timeline--media li > div {
	align-items: flex-start;
	display: flex;
	gap: 12px;
}

.zn-timeline__text {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.zn-thumb {
	aspect-ratio: 1 / 1;
	background: var(--zn-surface-alt);
	border: 1px solid var(--zn-line);
	display: block;
	flex: 0 0 auto;
	inline-size: 56px;
	margin-block-start: 3px;
	overflow: hidden;
}

.zn-thumb__img {
	block-size: 100% !important;
	display: block;
	inline-size: 100%;
	margin: 0;
	max-inline-size: none !important;
	object-fit: cover;
	object-position: center;
}

/* Source marks: an 18px identity cue inside an operational table row. The
   monogram sits underneath, so a favicon that 404s degrades to the letter. */

.zn-source-cell {
	align-items: flex-start;
	display: flex;
	gap: 8px;
	min-inline-size: 0;
}

.zn-source-cell__body {
	min-inline-size: 0;
}

.zn-source-mark {
	background: var(--zn-surface-alt);
	block-size: 18px;
	border: 1px solid var(--zn-line);
	display: block;
	flex: 0 0 auto;
	inline-size: 18px;
	margin-block-start: 3px;
	overflow: hidden;
	position: relative;
}

.zn-source-mark__initial {
	align-items: center;
	color: var(--zn-ink-soft);
	display: flex;
	font-size: 10px;
	font-weight: 800;
	inset: 0;
	justify-content: center;
	line-height: 1;
	position: absolute;
	text-align: center;
	z-index: 0;
}

.zn-source-mark__img {
	background: var(--zn-surface);
	block-size: 100% !important;
	display: block;
	inline-size: 100%;
	margin: 0;
	max-inline-size: none !important;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

/* Verdicts and coverage */

.zn-verdict {
	align-items: center;
	background: var(--zn-surface-alt);
	border: 1px solid currentColor;
	border-radius: 2px;
	display: inline-flex;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.35;
	min-block-size: 26px;
	padding: 4px 8px;
	white-space: nowrap;
}

.zn-verdict::before {
	background: currentColor;
	block-size: 6px;
	border-radius: 50%;
	content: "";
	display: inline-block;
	flex: 0 0 6px;
	inline-size: 6px;
	margin-inline-end: 6px;
}

.zn-verdict--blackout {
	background: var(--zn-red-soft);
	color: var(--zn-red);
}

.zn-verdict--propaganda {
	background: var(--zn-blue-soft);
	color: var(--zn-blue);
}

.zn-verdict--one_sided,
.zn-verdict--thin {
	background: var(--zn-amber-soft);
	color: var(--zn-amber);
}

.zn-verdict--balanced {
	background: var(--zn-green-soft);
	color: var(--zn-green);
}

.zn-verdict--unclustered,
.zn-verdict--unknown {
	background: transparent;
	border-style: dashed;
	color: var(--zn-muted);
}

.zn-verdict--unclustered::before,
.zn-verdict--unknown::before {
	background: transparent;
	border: 1px solid currentColor;
}

.zn-verdict-box {
	background: var(--zn-surface);
	border: 2px solid #789488;
	border-radius: var(--zn-radius);
	padding: 20px;
}

.zn-verdict-box h2 {
	font-size: 24px;
	margin-block-start: 17px;
}

.zn-verdict-box__reason {
	color: var(--zn-ink-soft);
	margin: 9px 0 0;
	max-inline-size: 72ch;
}

.zn-spread {
	margin-block-start: 18px;
}

.zn-spread__track {
	background: var(--zn-surface-alt);
	border: 1px solid var(--zn-line);
	display: flex;
	min-block-size: 30px;
	overflow: hidden;
}

.zn-spread__segment {
	align-items: center;
	color: #ffffff;
	display: flex;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	font-weight: 750;
	justify-content: center;
	min-inline-size: 4px;
}

.zn-spread__segment--independent { background: var(--zn-green); }
.zn-spread__segment--state_media { background: var(--zn-blue); }
.zn-spread__segment--ngo { background: var(--zn-violet); }
.zn-spread__segment--international_org { background: var(--zn-cyan); }
.zn-spread__segment--investigative { background: var(--zn-amber); }
.zn-spread__segment--unknown { background: var(--zn-muted); }

.zn-spread__silent {
	background: var(--zn-red-soft);
	border: 1px solid #dfb1ac;
	border-radius: var(--zn-radius);
	color: #6f2c26;
	font-size: 13px;
	margin: 12px 0 0;
	padding: 9px 11px;
}

/* Evidence text and timelines */

.zn-article {
	min-inline-size: 0;
}

.zn-article__head {
	border-block-end: 1px solid var(--zn-line);
	margin-block-end: 20px;
	padding-block-end: 18px;
}

.zn-article__body {
	font-size: 17px;
	line-height: 1.9;
	max-inline-size: 70ch;
	overflow-wrap: anywhere;
}

.zn-article__body :where(p, ul, ol, blockquote) {
	margin-block: 0 18px;
}

.zn-article__body :where(h2, h3) {
	margin-block: 30px 12px;
}

.zn-article__body blockquote {
	border-block: 1px solid #9fb7ad;
	color: var(--zn-ink-soft);
	margin-inline: 0;
	padding-block: 12px;
}

.zn-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-timeline li {
	align-items: start;
	border-block-end: 1px solid var(--zn-line-soft);
	display: grid;
	gap: 18px;
	grid-template-columns: 116px minmax(0, 1fr);
	padding: 13px 0;
}

.zn-timeline li:first-child {
	padding-block-start: 5px;
}

.zn-timeline li:last-child {
	border-block-end: 0;
}

.zn-timeline li > div {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.zn-timeline li p {
	color: var(--zn-muted);
	font-size: 13.5px;
	margin: 4px 0 0;
}

.zn-timeline time {
	color: var(--zn-muted);
	direction: ltr;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	text-align: start;
}

/* Tables */

.zn-table-wrap {
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	max-inline-size: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-color: #9eaaa4 var(--zn-surface-alt);
	scrollbar-width: thin;
}

.zn-table-wrap .zn-table {
	min-inline-size: 68rem;
}

.zn-table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12.5px;
	inline-size: 100%;
	line-height: 1.55;
	table-layout: auto;
}

.zn-table :where(th, td) {
	border-block-end: 1px solid var(--zn-line-soft);
	border-inline-end: 1px solid var(--zn-line-soft);
	padding: 10px 12px;
	text-align: start;
	vertical-align: top;
}

.zn-table :where(th, td):last-child {
	border-inline-end: 0;
}

.zn-table tr:last-child :where(th, td) {
	border-block-end: 0;
}

.zn-table thead th {
	background: #edf1ef;
	color: var(--zn-ink-soft);
	font-size: 11px;
	font-weight: 750;
	position: sticky;
	top: var(--zn-sticky-offset);
	white-space: nowrap;
	z-index: 2;
}

/*
 * `.zn-table-wrap` sets `overflow-x: auto`, which per spec computes `overflow-y`
 * to `auto` as well, so the wrapper is its own scrollport: the header row sticks
 * against the wrapper, not the page, and any page-level offset would push it
 * down onto the first data row instead of clearing a site header it never
 * scrolls under.
 */
.zn-table-wrap .zn-table thead th {
	top: 0;
}

.zn-table tbody th {
	background: #f6f8f7;
	color: var(--zn-ink-soft);
	font-weight: 700;
	white-space: nowrap;
}

.zn-table tbody tr:nth-child(even) {
	background: rgba(228, 233, 230, 0.26);
}

.zn-table tbody tr:hover {
	background: var(--zn-green-soft);
}

.zn-table td .zn-meta {
	margin-block-start: 5px;
}

/* Controls, filters and compact labels */

.zn-filter {
	align-items: center;
	border-block-end: 1px solid var(--zn-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-block: 20px;
	padding-block-end: 16px;
}

.zn-filter label,
.zn-shell form > label > b,
.zn-shell legend b {
	color: var(--zn-ink-soft);
	font-size: 12px;
	font-weight: 750;
}

.zn-input,
.zn-select,
.zn-textarea {
	background: var(--zn-surface);
	border: 1px solid #aeb9b3;
	border-radius: 2px;
	color: var(--zn-ink);
	font: inherit;
	font-size: 14px;
	min-block-size: 42px;
	padding: 8px 11px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.zn-input::placeholder,
.zn-textarea::placeholder {
	color: #87928c;
}

.zn-input {
	min-inline-size: 250px;
}

.zn-textarea {
	inline-size: 100%;
	min-block-size: 136px;
	resize: vertical;
}

.zn-shell form > label {
	display: grid;
	gap: 7px;
}

.zn-shell form > label .zn-input {
	inline-size: min(100%, 34rem);
}

.zn-shell fieldset {
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	margin: 0;
	min-inline-size: 0;
	padding: 12px 14px 14px;
}

.zn-shell legend {
	padding-inline: 5px;
}

.zn-shell :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--zn-green);
	block-size: 16px;
	flex: 0 0 16px;
	inline-size: 16px;
}

.zn-tag {
	background: var(--zn-surface-alt);
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	color: var(--zn-ink-soft);
	display: inline-flex;
	font-size: 11px;
	line-height: 1.4;
	margin: 2px;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
	padding: 4px 7px;
}

.zn-health--healthy { color: var(--zn-green); }
.zn-health--degraded,
.zn-health--unknown { color: var(--zn-amber); }
.zn-health--failing,
.zn-health--blocked { color: var(--zn-red); }

.zn-years {
	border-block-end: 1px solid var(--zn-line);
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-block: 20px 26px;
	padding-block-end: 16px;
}

.zn-year {
	align-items: center;
	background: transparent;
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	color: var(--zn-ink);
	display: inline-flex;
	font-size: 12px;
	gap: 8px;
	justify-content: space-between;
	line-height: 1.45;
	margin: 0 0 7px;
	max-inline-size: 100%;
	min-block-size: 34px;
	padding: 6px 9px;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.zn-year:hover {
	background: var(--zn-green-soft);
	border-color: #879a91;
	text-decoration: none;
}

.zn-year span {
	color: var(--zn-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.zn-shell .page-numbers {
	align-items: center;
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	display: inline-flex;
	font-size: 12px;
	justify-content: center;
	margin: 22px 2px 0;
	min-block-size: 34px;
	min-inline-size: 34px;
	padding-inline: 8px;
	text-decoration: none;
}

.zn-shell .page-numbers.current,
.zn-shell .page-numbers:hover {
	background: var(--zn-ink);
	border-color: var(--zn-ink);
	color: #ffffff;
}

.zn-rhythm {
	align-items: end;
	background: var(--zn-surface-alt);
	border-block-start: 1px solid var(--zn-line-soft);
	border-block-end: 1px solid var(--zn-line);
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(24, minmax(4px, 1fr));
	min-block-size: 132px;
	padding: 8px 4px 0;
}

.zn-rhythm__bar {
	background: var(--zn-blue);
	min-block-size: 2px;
	transition: background-color 150ms ease;
}

.zn-rhythm__bar:hover {
	background: var(--zn-green);
}

/* Messages, code and API reference */

.zn-empty {
	background: rgba(255, 255, 255, 0.5);
	border: 1px dashed #9eaaa4;
	border-radius: var(--zn-radius);
	color: var(--zn-muted);
	font-size: 13.5px;
	padding: 28px 20px;
	text-align: center;
}

.zn-note {
	background: var(--zn-amber-soft);
	border: 1px solid #dfbd84;
	border-radius: var(--zn-radius);
	color: #66430f;
	font-size: 13.5px;
	line-height: 1.75;
	padding: 12px 14px;
}

.zn-code {
	background: #18211d;
	border: 1px solid #2d3a34;
	border-radius: var(--zn-radius);
	color: #edf5f0;
	direction: ltr;
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.65;
	max-block-size: 360px;
	max-inline-size: 100%;
	overflow: auto;
	padding: 14px;
	text-align: left;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Public visuals and blindspot radar */

.zn-page-head--cinematic {
	background:
		linear-gradient(90deg, rgba(18, 98, 71, 0.08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(18, 98, 71, 0.06) 1px, transparent 1px);
	background-size: 28px 28px;
	border: 1px solid var(--zn-line);
	border-block-end: 2px solid var(--zn-ink);
	padding: 22px;
}

.zn-view-switcher {
	background: var(--zn-line);
	border: 1px solid var(--zn-line);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-block: 22px 28px;
}

.zn-view-switcher a {
	background: var(--zn-surface);
	color: var(--zn-ink);
	display: grid;
	gap: 6px;
	min-block-size: 112px;
	padding: 14px;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.zn-view-switcher a:hover,
.zn-view-switcher a.is-active {
	background: #18211d;
	color: #ffffff;
}

.zn-view-switcher span {
	font-size: 13px;
	font-weight: 800;
}

.zn-view-switcher small {
	color: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.55;
	opacity: 0.72;
}

.zn-visual-form {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zn-visual-form label {
	display: grid;
	gap: 5px;
	min-inline-size: 150px;
}

.zn-visual-form label span {
	color: var(--zn-muted);
	font-size: 11px;
	font-weight: 700;
}

.zn-visual-stage {
	margin-block: 24px 32px;
}

.zn-visual-stage .nix-viz {
	border-radius: 0;
	box-shadow: 0 18px 42px rgba(24, 33, 29, 0.12);
}

.zn-stats--radar .zn-stat:first-child {
	background: #18211d;
	color: #ffffff;
}

.zn-stats--radar .zn-stat:first-child span {
	color: rgba(255, 255, 255, 0.72);
}

.zn-radar {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
	margin-block: 0 34px;
}

.zn-radar__brief,
.zn-radar__signal {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	padding: 18px;
}

.zn-radar__brief {
	background: var(--zn-surface-alt);
}

.zn-radar__brief h2,
.zn-radar__signal h2 {
	font-size: 24px;
}

.zn-radar__brief p,
.zn-radar__signal p {
	color: var(--zn-muted);
	font-size: 13px;
	margin-block-start: 10px;
}

.zn-radar__signal {
	border-block-start: 4px solid var(--zn-red);
}

.zn-radar__label {
	color: var(--zn-red);
	display: block;
	font-size: 11px;
	font-weight: 800;
	margin-block-end: 8px;
}

.zn-radar__signal h2 {
	max-inline-size: 32ch;
}

.zn-radar__signal h2 a {
	color: var(--zn-ink);
	text-decoration: none;
}

.zn-radar__signal h2 a:hover {
	color: var(--zn-green-dark);
	text-decoration: underline;
}

.zn-layout--radar {
	grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
}

.zn-panel--signal {
	border-block-start-width: 4px;
}

.zn-panel--critical {
	border-block-start-color: var(--zn-red);
}

.zn-panel--amber {
	border-block-start-color: var(--zn-amber);
}

.zn-panel--blue {
	border-block-start-color: var(--zn-blue);
}

.zn-panel--violet {
	border-block-start-color: var(--zn-violet);
}

.zn-signal-list {
	display: grid;
	gap: 8px;
}

.zn-signal-row {
	align-items: center;
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-block-size: 94px;
	padding: 13px 14px;
	transition: border-color 150ms ease, transform 150ms ease;
}

.zn-signal-row:hover,
.zn-signal-row:focus-within {
	border-color: #7b8f85;
	transform: translateY(-1px);
}

.zn-signal-row h3 {
	font-size: 15px;
	line-height: 1.55;
}

.zn-signal-row h3 a {
	color: var(--zn-ink);
	text-decoration: none;
}

.zn-signal-row h3 a:hover {
	text-decoration: underline;
}

.zn-signal-meta {
	color: var(--zn-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 11.5px;
	gap: 5px 10px;
	margin-block-start: 8px;
}

.zn-signal-meta span {
	border-inline-start: 1px solid var(--zn-line);
	padding-inline-start: 10px;
}

.zn-signal-meta span:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.zn-risk--large {
	background: var(--zn-red-soft);
	border: 1px solid #e1aaa4;
	color: var(--zn-red);
	display: inline-grid;
	font-size: 18px;
	font-weight: 800;
	min-block-size: 48px;
	min-inline-size: 48px;
	place-items: center;
}

.zn-topic-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.zn-topic-strip li {
	background: var(--zn-surface-alt);
	border: 1px solid var(--zn-line);
	color: var(--zn-muted);
	font-size: 11px;
	padding: 3px 7px;
}

.zn-matrix {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zn-matrix__cell {
	background:
		linear-gradient(0deg, rgba(169, 54, 44, calc(var(--risk) * 0.004)), rgba(169, 54, 44, calc(var(--risk) * 0.004))),
		var(--zn-surface);
	border: 1px solid var(--zn-line);
	min-block-size: 104px;
	padding: 11px;
}

.zn-matrix__cell b {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 22px;
	line-height: 1.15;
}

.zn-matrix__cell span,
.zn-matrix__cell small {
	color: var(--zn-muted);
	display: block;
	font-size: 11px;
	line-height: 1.45;
	margin-block-start: 7px;
}

.zn-bars {
	display: grid;
	gap: 12px;
}

.zn-bar__label {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-block-end: 5px;
}

.zn-bar__label b {
	font-size: 12px;
}

.zn-bar__label span {
	color: var(--zn-muted);
	font-size: 11px;
}

.zn-bar__track {
	background: var(--zn-line-soft);
	block-size: 8px;
	display: block;
	inline-size: 100%;
}

.zn-bar__track span {
	background: var(--zn-green);
	block-size: 100%;
	display: block;
	min-inline-size: 2px;
}

@media (max-width: 1024px) {
	.zn-view-switcher {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-radar,
	.zn-layout--radar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.zn-page-head--cinematic {
		padding: 16px;
	}

	.zn-view-switcher {
		grid-template-columns: 1fr;
	}

	.zn-view-switcher a {
		min-block-size: 84px;
	}

	.zn-visual-form {
		align-items: stretch;
		display: grid;
		grid-template-columns: 1fr;
	}

	.zn-signal-row {
		align-items: start;
		grid-template-columns: 1fr;
	}

	.zn-risk--large {
		justify-self: start;
	}

	.zn-matrix {
		grid-template-columns: 1fr;
	}
}

.zn-docs {
	direction: ltr;
	display: grid;
	gap: 0;
	grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
	min-block-size: 720px;
}

.zn-docs__nav {
	background: var(--zn-surface-alt);
	border-inline-end: 1px solid var(--zn-line);
	max-block-size: 78vh;
	overflow: auto;
	padding: 15px;
	position: sticky;
	top: calc(var(--zn-sticky-offset) + 14px);
}

.zn-docs__main {
	min-inline-size: 0;
	padding: 22px 24px;
}

.zn-endpoint {
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--zn-line);
	color: var(--zn-ink);
	cursor: pointer;
	display: grid;
	gap: 4px;
	inline-size: 100%;
	padding: 10px 6px;
	text-align: start;
	transition: background-color 150ms ease;
}

.zn-endpoint:hover,
.zn-endpoint.is-active {
	background: #dfe9e4;
}

.zn-method {
	display: inline-flex;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 9.5px;
	font-weight: 800;
	inline-size: fit-content;
}

.zn-method--get { color: var(--zn-blue); }
.zn-method--post { color: var(--zn-green); }
.zn-method--delete { color: var(--zn-red); }

.zn-try-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zn-api-status {
	color: var(--zn-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.zn-scalar {
	background: var(--zn-surface);
	border-block-start: 2px solid var(--zn-ink);
	direction: ltr;
	margin-block-start: 28px;
	min-block-size: 720px;
	text-align: left;
}

.zn-check-grid {
	display: grid;
	gap: 8px 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 12px;
}

.zn-check-grid label {
	align-items: flex-start;
	display: flex;
	font-size: 13px;
	gap: 7px;
	line-height: 1.5;
	min-inline-size: 0;
}

.zn-honeypot {
	block-size: 1px;
	inline-size: 1px;
	inset-inline-start: -9999px;
	overflow: hidden;
	position: absolute;
}

/* Embeddable verdict */

.zn-embed-page {
	background: #ffffff;
	margin: 0;
	padding: 0;
}

.zn-embed {
	border: 2px solid #789488;
	color: #18211d;
	direction: rtl;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
	font-variant-numeric: tabular-nums;
	min-block-size: 180px;
	padding: 16px;
}

.zn-embed a {
	color: #0b4934;
	font-weight: 650;
	text-underline-offset: 3px;
}

.zn-embed h1 {
	font-size: 16px;
	line-height: 1.6;
	margin: 12px 0;
	overflow-wrap: anywhere;
}

.zn-embed p {
	color: #66736d;
	font-size: 12px;
	line-height: 1.65;
	margin: 7px 0;
}

/* Single-article analysis workspace.
   A status strip of compact meters, weighted topic bars, grouped entities and a
   scoring ledger; the archived body sits behind a native disclosure so the
   analysis is the page and the text is one panel inside it. */

.zn-strip {
	background: var(--zn-line);
	border-block: 1px solid var(--zn-line);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
	margin-block: 20px 0;
}

.zn-strip__cell {
	background: var(--zn-surface);
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-inline-size: 0;
	padding: 11px 14px 12px;
}

.zn-strip__label {
	color: var(--zn-muted);
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: 0;
	line-height: 1.4;
}

.zn-strip__value {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.zn-strip__value--code {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
}

.zn-strip__note {
	color: var(--zn-muted);
	font-size: 10.5px;
	line-height: 1.5;
	margin-block-start: auto;
	overflow-wrap: anywhere;
	padding-block-start: 2px;
}

.zn-meter {
	align-items: baseline;
	display: flex;
	gap: 4px;
	margin: 0;
}

.zn-meter__value {
	font-size: 25px;
	font-variant-numeric: tabular-nums;
	font-weight: 760;
	line-height: 1;
}

.zn-meter__value--high {
	color: var(--zn-red);
}

.zn-meter__value--watch {
	color: var(--zn-amber);
}

.zn-meter__scale {
	color: var(--zn-muted);
	font-size: 11px;
}

.zn-meter__track {
	background: var(--zn-line-soft);
	block-size: 4px;
	display: block;
	inline-size: 100%;
	overflow: hidden;
}

.zn-meter__fill {
	background: var(--zn-blue);
	block-size: 100%;
	display: block;
	min-inline-size: 2px;
}

.zn-meter__fill--high {
	background: var(--zn-red);
}

.zn-meter__fill--watch {
	background: var(--zn-amber);
}

.zn-meter__fill--none {
	background: #b6c0bb;
}

.zn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
}

.zn-chip {
	background: var(--zn-surface-alt);
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	color: var(--zn-ink-soft);
	display: inline-flex;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	padding: 3px 6px;
	white-space: nowrap;
}

.zn-chip--ok {
	background: var(--zn-green-soft);
	border-color: #9ec3b1;
	color: var(--zn-green-dark);
}

.zn-chip--warn {
	background: var(--zn-amber-soft);
	border-color: #dfbd84;
	color: #66430f;
}

/* Article panel: lede first, bulk text behind a disclosure. */

.zn-article-media--inline {
	margin-block-end: 16px;
}

.zn-article-media--inline .zn-article-media__image {
	aspect-ratio: 3 / 1;
	max-block-size: 15rem;
	object-fit: cover;
}

.zn-article__lede {
	font-size: 15px;
	line-height: 1.8;
	margin: 0 0 14px;
	max-inline-size: 74ch;
	overflow-wrap: anywhere;
}

.zn-facts {
	border-block-start: 1px solid var(--zn-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	margin: 0 0 14px;
	padding-block-start: 10px;
}

.zn-facts > div {
	display: flex;
	gap: 6px;
	min-inline-size: 0;
}

.zn-facts dt {
	color: var(--zn-muted);
	font-size: 11px;
	line-height: 1.6;
}

.zn-facts dd {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

.zn-facts--stack {
	border-block-start: 0;
	display: grid;
	gap: 7px;
	margin-block-end: 0;
	padding-block-start: 0;
}

.zn-facts--stack > div {
	border-block-end: 1px solid var(--zn-line-soft);
	justify-content: space-between;
	padding-block-end: 6px;
}

.zn-facts--stack > div:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.zn-facts--stack dd {
	text-align: end;
}

.zn-disclose {
	border-block-start: 1px solid var(--zn-line);
}

.zn-disclose__summary {
	align-items: center;
	color: var(--zn-green-dark);
	cursor: pointer;
	display: flex;
	font-size: 12.5px;
	font-weight: 750;
	gap: 10px;
	justify-content: space-between;
	list-style: none;
	min-block-size: 38px;
	padding-block: 10px;
}

.zn-disclose__summary::-webkit-details-marker {
	display: none;
}

.zn-disclose__summary > span:first-child::before {
	content: "+";
	display: inline-block;
	font-variant-numeric: tabular-nums;
	inline-size: 1.1em;
}

.zn-disclose[open] > .zn-disclose__summary > span:first-child::before {
	content: "−";
}

.zn-disclose__summary:hover {
	color: var(--zn-green);
}

.zn-disclose__summary:focus-visible {
	outline: 2px solid var(--zn-green);
	outline-offset: 2px;
}

.zn-disclose > .zn-article__body {
	border-block-start: 1px solid var(--zn-line-soft);
	padding-block-start: 14px;
}

/*
 * The archived body is now the record, not a footnote to it, so its disclosure
 * reads as a section heading rather than a "show more" affordance.
 */
.zn-disclose--body > .zn-disclose__summary {
	color: var(--zn-ink);
	font-size: 13px;
}

.zn-disclose--body > .zn-disclose__summary:hover {
	color: var(--zn-green);
}

/*
 * Provenance state.
 *
 * Amber, not red: a URL that stopped resolving may have been removed or the
 * publisher may have restructured their site, and DESIGN.md reserves red for
 * blackout and failure. The archive reports what it observed and its date.
 */
.zn-state {
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1.4;
	padding: 2px 7px;
}

.zn-state--ok {
	background: var(--zn-green-soft);
	border-color: #9ec3b1;
	color: var(--zn-green-dark);
}

.zn-state--warn {
	background: var(--zn-amber-soft);
	border-color: #dfbd84;
	color: #66430f;
}

.zn-state--muted {
	background: var(--zn-surface-alt);
	color: var(--zn-muted);
}

/* Search: a GET form, so the URL is the query and no script is required. */

.zn-search {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 20px;
	padding: 14px 16px 16px;
}

.zn-search__main {
	display: flex;
	gap: 8px;
}

.zn-search__input {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	color: var(--zn-ink);
	flex: 1 1 auto;
	font: inherit;
	font-size: 15px;
	min-inline-size: 0;
	padding: 9px 12px;
}

.zn-search__filters {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.zn-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.zn-field > label {
	color: var(--zn-muted);
	font-size: 10.5px;
	font-weight: 750;
}

.zn-field > input,
.zn-field > select {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	border-radius: 2px;
	color: var(--zn-ink);
	font: inherit;
	font-size: 12.5px;
	min-block-size: 32px;
	min-inline-size: 0;
	padding: 5px 8px;
}

.zn-search__meta {
	align-items: center;
	border-block-start: 1px solid var(--zn-line-soft);
	color: var(--zn-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 10px;
	margin: 0;
	padding-block-start: 10px;
}

.zn-search__reset {
	margin-inline-start: auto;
}

/* Results: one scannable record per row, no cards inside cards. */

.zn-results {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-result {
	border-block-start: 1px solid var(--zn-line-soft);
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-block: 12px;
}

.zn-result:first-child {
	border-block-start: 0;
	padding-block-start: 4px;
}

.zn-result__title {
	color: var(--zn-ink);
	font-size: 14.5px;
	font-weight: 750;
	line-height: 1.5;
	text-decoration: none;
}

.zn-result__title:hover {
	color: var(--zn-green);
	text-decoration: underline;
}

.zn-result__excerpt {
	color: var(--zn-ink-soft);
	font-size: 13px;
	line-height: 1.7;
	margin: 0;
}

.zn-result__meta {
	align-items: center;
	color: var(--zn-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 10px;
	margin: 0;
}

/* Facets: every option states what it would return, so none leads to zero. */

.zn-facet {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-facet__link {
	align-items: center;
	border-block-start: 1px solid var(--zn-line-soft);
	color: var(--zn-ink-soft);
	display: flex;
	font-size: 12.5px;
	gap: 10px;
	justify-content: space-between;
	min-block-size: 32px;
	padding-block: 4px;
	text-decoration: none;
}

.zn-facet > li:first-child .zn-facet__link {
	border-block-start: 0;
}

.zn-facet__link:hover {
	color: var(--zn-green);
}

.zn-facet__link.is-active {
	color: var(--zn-green-dark);
	font-weight: 750;
}

.zn-facet__link.is-active .zn-facet__name::before {
	content: "× ";
}

.zn-facet__name {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zn-facet__count {
	color: var(--zn-muted);
	flex: 0 0 auto;
	font-size: 11px;
}

.zn-pager {
	align-items: center;
	border-block-start: 1px solid var(--zn-line);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-block-start: 14px;
	padding-block-start: 12px;
}

.zn-pager__state {
	color: var(--zn-muted);
	font-size: 12px;
}

/* Stored images: the copies this archive holds, each citing where it came from. */

.zn-gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.zn-gallery__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-inline-size: 0;
}

.zn-gallery__link {
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	display: block;
	overflow: hidden;
}

.zn-gallery__link:focus-visible {
	outline: 2px solid var(--zn-green);
	outline-offset: 2px;
}

.zn-gallery__image {
	aspect-ratio: 16 / 9;
	background: var(--zn-surface-alt);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.zn-gallery__origin {
	color: var(--zn-muted);
	direction: ltr;
	font-size: 10.5px;
	line-height: 1.4;
	margin: 0;
	overflow: hidden;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Weighted topic bars: the clearest analysis signal the engine produces. */

.zn-weights {
	display: grid;
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-weight {
	align-items: center;
	column-gap: 12px;
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 2.2rem;
	padding-block: 5px;
}

.zn-weight + .zn-weight {
	border-block-start: 1px solid var(--zn-line-soft);
}

.zn-weight__label {
	font-size: 12.5px;
	line-height: 1.5;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.zn-weight__term {
	color: var(--zn-muted);
	display: block;
	font-size: 10px;
	line-height: 1.4;
}

.zn-weight__track {
	background: var(--zn-line-soft);
	block-size: 10px;
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
}

.zn-weight__fill {
	background: var(--zn-green);
	block-size: 100%;
	display: block;
}

.zn-weight__value {
	color: var(--zn-ink-soft);
	font-size: 12px;
	font-weight: 750;
	text-align: end;
}

/* Extracted entities, grouped by kind. */

.zn-ents {
	display: grid;
	gap: 18px 22px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.zn-ents__group {
	min-inline-size: 0;
}

.zn-ents__group h3 {
	align-items: baseline;
	border-block-end: 1px solid var(--zn-line-soft);
	display: flex;
	font-size: 11px;
	gap: 8px;
	justify-content: space-between;
	margin: 0 0 8px;
	padding-block-end: 5px;
}

.zn-ents__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-ents__list .zn-tag {
	align-items: baseline;
	gap: 6px;
	margin: 0;
	text-decoration: none;
}

.zn-ents__list .zn-tag:hover {
	background: var(--zn-green-soft);
	border-color: #9ec3b1;
	color: var(--zn-green-dark);
}

.zn-ents__list .zn-tag b {
	color: var(--zn-muted);
	font-size: 10px;
	font-weight: 650;
}

/* Scoring ledger: matched term, weight and the sentence it came from. */

.zn-formula {
	background: var(--zn-surface-alt);
	border-inline-start: 3px solid var(--zn-ink);
	color: var(--zn-ink-soft);
	font-size: 11px;
	line-height: 1.7;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
	padding: 7px 10px;
}

.zn-reasons {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-reason {
	border-block-end: 1px solid var(--zn-line-soft);
	column-gap: 12px;
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	padding-block: 8px;
}

.zn-reason:last-child {
	border-block-end: 0;
}

.zn-reason__score {
	background: var(--zn-green-soft);
	color: var(--zn-green-dark);
	font-size: 12px;
	font-weight: 750;
	padding: 2px 0;
	text-align: center;
}

.zn-reason__body {
	min-inline-size: 0;
}

.zn-reason__body b {
	font-size: 12.5px;
}

.zn-reason__term {
	color: var(--zn-muted);
	font-size: 11px;
	margin-inline-start: 8px;
}

.zn-reason__snippet {
	color: var(--zn-ink-soft);
	font-size: 11.5px;
	line-height: 1.65;
	margin: 3px 0 0;
	overflow-wrap: anywhere;
}

.zn-reasons__bonus {
	border-block-start: 1px solid var(--zn-line);
	gap: 6px 14px;
	margin-block-start: 10px;
	padding-block-start: 8px;
}

/* Story-cluster table under the relationship graph. */

.zn-table-wrap--tight .zn-table {
	min-inline-size: 0;
}

.zn-table-wrap--tight .zn-table tbody th {
	white-space: normal;
}

.zn-table tbody tr.is-current {
	background: var(--zn-green-soft);
}

.zn-table tbody tr.is-current th {
	background: var(--zn-green-soft);
}

/* Tablet */

@media (max-width: 1024px) {
	.zn-shell {
		padding-inline: 18px;
	}

	.zn-layout {
		gap: 28px;
		grid-template-columns: minmax(0, 1fr) minmax(228px, 252px);
	}

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

	.zn-grid--archive,
	.zn-grid--featured,
	.zn-grid--editorial {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.zn-weight {
		grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.2rem;
	}
}

@media (max-width: 900px) {
	.zn-layout,
	.zn-docs {
		grid-template-columns: 1fr;
	}

	.zn-layout > aside.zn-stack {
		border-block-start: 1px solid var(--zn-line);
		padding-block-start: 28px;
	}

	.zn-docs__nav {
		border: 0;
		border-block-end: 1px solid var(--zn-line);
		max-block-size: 300px;
		position: static;
	}

	.zn-check-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile, including the 390px product viewport. */

@media (max-width: 767px) {
	.zn-shell {
		--zn-gutter: 12px;
		font-size: 15px;
		padding: 20px 0 52px;
	}

	.zn-shell h1 {
		font-size: 28px;
		line-height: 1.38;
	}

	.zn-shell h2 {
		font-size: 18px;
	}

	.zn-page-head {
		align-items: stretch;
		flex-direction: column;
		gap: 18px;
		padding-block: 8px 20px;
	}

	.zn-lede {
		font-size: 14px;
		line-height: 1.75;
	}

	.zn-actions {
		inline-size: 100%;
	}

	.zn-actions .zn-button {
		flex: 1 1 140px;
	}

	.zn-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-block: 18px 28px;
	}

	.zn-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-meter__value {
		font-size: 21px;
	}

	.zn-weight {
		grid-template-columns: minmax(0, 1fr) 2.2rem;
		row-gap: 4px;
	}

	.zn-weight__track {
		grid-column: 1 / -1;
	}

	.zn-reason {
		grid-template-columns: 2.2rem minmax(0, 1fr);
	}

	.zn-ents {
		gap: 16px;
		grid-template-columns: 1fr;
	}

	.zn-stat {
		min-block-size: 84px;
		padding: 13px 14px;
	}

	.zn-stat b {
		font-size: 22px;
	}

	.zn-layout,
	.zn-stack {
		gap: 24px;
	}

	.zn-layout {
		margin-block-start: 24px;
	}

	.zn-grid,
	.zn-grid--3,
	.zn-grid--archive,
	.zn-grid--featured,
	.zn-grid--editorial,
	.zn-try-grid {
		grid-template-columns: 1fr;
	}

	.zn-grid--featured > .zn-card:first-child {
		grid-column: auto;
	}

	.zn-grid--featured > .zn-card:first-child .zn-card__media {
		aspect-ratio: 16 / 9;
	}

	.zn-grid--featured > .zn-card:first-child h3 {
		font-size: 16px;
		max-inline-size: none;
	}

	.zn-panel {
		padding-block-start: 12px;
	}

	.zn-panel__head {
		align-items: flex-start;
		gap: 10px;
	}

	.zn-card,
	.zn-card--compact {
		min-block-size: 0;
		padding: 13px;
	}

	.zn-grid--archive .zn-card {
		min-block-size: 0;
	}

	.zn-card__media,
	.zn-card--compact .zn-card__media {
		inline-size: auto;
		margin: -13px -13px 0;
	}

	.zn-article-media {
		margin-block-end: 22px;
	}

	.zn-card h3,
	.zn-card--compact h3 {
		font-size: 14.5px;
	}

	.zn-verdict-box {
		padding: 16px;
	}

	.zn-verdict-box h2 {
		font-size: 21px;
	}

	.zn-timeline li {
		gap: 12px;
		grid-template-columns: 80px minmax(0, 1fr);
		padding-block: 12px;
	}

	.zn-timeline time {
		font-size: 9.5px;
		white-space: normal;
	}

	.zn-timeline--media li > div {
		gap: 9px;
	}

	.zn-thumb {
		inline-size: 44px;
	}

	.zn-filter {
		align-items: stretch;
		flex-direction: column;
	}

	.zn-input {
		inline-size: 100%;
		min-inline-size: 0;
	}

	.zn-table-wrap .zn-table {
		min-inline-size: 61rem;
	}

	.zn-table :where(th, td) {
		padding: 9px 10px;
	}

	.zn-table thead th {
		top: 56px;
	}

	.zn-years {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.zn-year {
		flex: 0 0 auto;
	}

	.zn-docs__main {
		padding: 18px 14px;
	}

	.zn-scalar {
		margin-inline: -12px;
		min-block-size: 620px;
	}

	.zn-code {
		font-size: 10.5px;
	}
}

@media (max-width: 390px) {
	.zn-check-grid {
		gap: 9px 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-check-grid label {
		font-size: 12px;
	}

	.zn-card__top {
		align-items: flex-start;
	}

	.zn-card__media,
	.zn-article-media {
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.zn-verdict {
		white-space: normal;
	}
}

@media (max-width: 340px) {
	.zn-stats,
	.zn-check-grid {
		grid-template-columns: 1fr;
	}
}

/* Print-ready A4 report and evidence pages. */

@media print {
	/* Theme chrome, addressed by the ids and classes WordPress themes actually
	   use — Blocksy's header/footer today, core block themes and the classic
	   #masthead/#colophon convention alongside it, so a theme switch never
	   silently puts the site header back on a printed report. */
	header#header,
	footer#footer,
	.ct-header,
	.ct-footer,
	#masthead,
	#colophon,
	.wp-block-template-part,
	.zn-actions,
	.zn-docs__nav,
	.zn-try,
	.zn-filter {
		display: none !important;
	}

	html,
	body,
	#page,
	#content,
	#main-container,
	.ct-container,
	.wp-site-blocks {
		background: #ffffff !important;
		direction: ltr !important;
		inline-size: 182mm !important;
		margin: 0 !important;
		max-inline-size: 182mm !important;
		padding: 0 !important;
	}

	.zn-shell {
		color: #111111;
		direction: rtl !important;
		font-size: 9.5pt;
		inline-size: 182mm !important;
		line-height: 1.55;
		margin: 0 !important;
		max-inline-size: 182mm !important;
		padding: 0 !important;
	}

	.zn-shell h1 {
		font-size: 20pt;
	}

	.zn-shell h2 {
		font-size: 12.5pt;
	}

	.zn-shell h3 {
		font-size: 10.5pt;
	}

	.zn-page-head {
		padding-block: 0 5mm;
	}

	.zn-lede,
	.zn-note,
	.zn-meta,
	.zn-count {
		color: #444444 !important;
	}

	.zn-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-block: 5mm 7mm;
	}

	.zn-stat {
		min-block-size: 18mm;
		padding: 3mm;
	}

	.zn-stat b {
		font-size: 15pt;
	}

	.zn-stat span {
		font-size: 7.5pt;
	}

	.zn-layout {
		gap: 6mm;
		grid-template-columns: minmax(0, 1fr) 52mm;
		margin-block-start: 6mm;
	}

	.zn-stack {
		gap: 5mm;
	}

	.zn-report .zn-grid,
	.zn-report .zn-grid--3 {
		gap: 3mm;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-panel {
		padding-block-start: 3mm;
	}

	.zn-panel__head {
		margin-block-end: 3mm;
		padding-block-end: 2mm;
	}

	.zn-card,
	.zn-verdict-box,
	.zn-note,
	.zn-timeline li,
	.zn-table tr {
		break-inside: avoid-page;
		box-shadow: none !important;
		transform: none !important;
	}

	/* A printed record must carry the full archived text whether or not the
	   reader expanded it on screen. The modern `::details-content` rule covers
	   engines that hide the slot with content-visibility; the child rule covers
	   the older `details > :not(summary) { display: none }` user-agent style. */

	.zn-disclose,
	.zn-disclose > .zn-article__body {
		display: block !important;
	}

	.zn-disclose::details-content {
		block-size: auto !important;
		content-visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
	}

	.zn-disclose__summary > .zn-count {
		display: none;
	}

	.zn-disclose__summary > span:first-child::before {
		content: none;
	}

	.zn-disclose__summary {
		color: #111111 !important;
		font-size: 10.5pt;
		min-block-size: 0;
		padding-block: 2mm 1mm;
	}

	.zn-strip {
		break-inside: avoid-page;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-block: 4mm 0;
	}

	.zn-strip__cell {
		padding: 2mm 2.5mm;
	}

	.zn-meter__value {
		font-size: 14pt;
	}

	.zn-meter__fill,
	.zn-weight__fill,
	.zn-reason__score,
	.zn-chip,
	.zn-formula {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.zn-weight,
	.zn-reason,
	.zn-ents__group {
		break-inside: avoid-page;
	}

	.zn-reason__snippet {
		font-size: 7.5pt;
	}

	.zn-facts,
	.zn-facts--stack {
		break-inside: avoid-page;
	}

	.zn-card,
	.zn-card--compact {
		min-block-size: 28mm;
		padding: 3mm;
	}

	.zn-card__media,
	.zn-thumb,
	.zn-source-mark {
		display: none !important;
	}

	.zn-timeline--media li > div {
		display: block;
	}

	.zn-article-media {
		aspect-ratio: auto;
		max-block-size: 42mm;
		page-break-inside: avoid;
	}

	.zn-article-media__image {
		block-size: auto !important;
		max-block-size: 42mm;
		object-fit: contain;
	}

	.zn-card h3,
	.zn-card--compact h3 {
		font-size: 9pt;
		line-height: 1.5;
		margin-block: 2mm;
	}

	.zn-verdict {
		font-size: 7pt;
		min-block-size: 0;
		padding: 1mm 1.5mm;
	}

	.zn-verdict::before {
		block-size: 4px;
		flex-basis: 4px;
		inline-size: 4px;
	}

	.zn-table-wrap {
		overflow: visible;
	}

	.zn-table-wrap .zn-table {
		min-inline-size: 0;
	}

	.zn-table {
		font-size: 7.5pt;
	}

	.zn-table :where(th, td) {
		padding: 1.7mm;
	}

	.zn-table thead th {
		position: static;
	}

	.zn-docs {
		display: block;
	}

	.zn-code {
		background: #f2f2f2 !important;
		border-color: #999999;
		color: #111111 !important;
		max-block-size: none;
	}

	.zn-report > footer.zn-meta {
		border-block-start: 1px solid #999999;
		padding-block-start: 3mm;
	}

	@page {
		margin: 14mm 14mm 17mm;
		size: A4;

		@bottom-center {
			content: "طيف · " counter(page) " / " counter(pages);
			font-family: Arial, sans-serif;
			font-size: 8pt;
		}
	}
}

/* Relationship graph (nix/partials/relations.php).
   Flat fills, thin strokes, no gradient/shadow/animation, and no rule that
   hides information behind :hover — the panel has to survive a print. */

.zn-relations__figure {
	background: var(--zn-surface);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	margin: 0 0 14px;
	overflow: hidden;
	padding: 6px;
}

.zn-relations__svg {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

.zn-relations__labels text {
	fill: var(--zn-ink);
	font-family: ui-monospace, "SF Mono", "Segoe UI Mono", "Noto Sans Arabic", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
}

.zn-relations__l2 {
	fill: var(--zn-muted);
	font-size: 9.5px;
	font-weight: 400;
}

.zn-relations__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-block-end: 12px;
}

.zn-relations__legend-title {
	color: var(--zn-muted);
	display: block;
	font-size: 11px;
	font-weight: 700;
	/* DESIGN.md: letter-spacing stays 0 in the Arabic interface. */
	letter-spacing: 0;
	margin-block-end: 3px;
}

.zn-relations__legend ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-relations__legend li {
	align-items: center;
	display: flex;
	font-size: 12px;
	gap: 5px;
}

.zn-relations__swatch {
	block-size: 16px;
	flex: none;
	inline-size: 16px;
}

.zn-relations__data {
	border-block-start: 1px solid var(--zn-line-soft);
	padding-block-start: 10px;
}

.zn-relations__data > summary {
	color: var(--zn-ink-soft);
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
}

.zn-relations__subhead {
	font-size: 12px;
	font-weight: 700;
	margin: 12px 0 4px;
}

.zn-relations__list {
	font-size: 13px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-relations__list ul {
	list-style: none;
	margin: 2px 0 6px;
	padding-inline-start: 14px;
}

.zn-relations__list > li {
	border-inline-start: 2px solid var(--zn-line-soft);
	margin-block-end: 6px;
	padding-inline-start: 10px;
}

.zn-relations__list ul > li {
	border: 0;
	color: var(--zn-ink-soft);
	padding: 0;
}

.zn-relations__dim {
	color: var(--zn-muted);
	font-size: 11.5px;
}

.zn-relations__note {
	color: var(--zn-muted);
	font-size: 11.5px;
	margin-block-start: 10px;
}

@media (max-width: 640px) {
	.zn-relations__labels text {
		font-size: 13px;
	}

	.zn-relations__l2 {
		font-size: 11px;
	}
}

@media print {
	.zn-relations__figure {
		border-color: #999999;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.zn-relations__svg {
		max-block-size: 150mm;
	}

	.zn-relations__labels text {
		fill: #111111;
	}

	.zn-relations__l2,
	.zn-relations__dim,
	.zn-relations__note,
	.zn-relations__legend-title {
		color: #444444;
		fill: #444444;
	}

	.zn-relations__data > summary {
		list-style: none;
	}

	.zn-relations__data > summary::-webkit-details-marker {
		display: none;
	}
}

/* == entity archives : begin ================================================
   Owned by nix/entity.php. Everything here is prefixed .zn-entity / .zn-emonths
   / .zn-ebar; nothing above is modified. Logical properties only (RTL).
   ========================================================================= */

.zn-entity .zn-page-head__copy h1 {
	overflow-wrap: anywhere;
}

/* Monthly coverage strip. Column count is data-driven, so the track uses
   auto-flow rather than a fixed repeat() like .zn-rhythm. */
.zn-emonths {
	align-items: end;
	background: var(--zn-surface-alt);
	border-block-start: 1px solid var(--zn-line-soft);
	border-block-end: 1px solid var(--zn-line);
	display: grid;
	gap: 3px;
	grid-auto-columns: minmax(3px, 1fr);
	grid-auto-flow: column;
	min-block-size: 128px;
	padding: 8px 4px 0;
}

.zn-emonths__bar {
	background: var(--zn-blue);
	min-block-size: 2px;
}

.zn-emonths__bar--zero {
	background: var(--zn-line);
}

.zn-emonths__axis {
	color: var(--zn-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 8px;
	justify-content: space-between;
	margin-block-start: 8px;
}

/* Share bar inside a dense table cell. */
.zn-ebar {
	background: var(--zn-line-soft);
	display: block;
	inline-size: 68px;
	max-inline-size: 100%;
	min-block-size: 6px;
}

.zn-ebar__fill {
	background: var(--zn-green);
	display: block;
	min-block-size: 6px;
}

.zn-ebar__value {
	color: var(--zn-muted);
	display: block;
	font-size: 10px;
	margin-block-start: 4px;
}

.zn-entity .zn-table-wrap .zn-table {
	min-inline-size: 44rem;
}

.zn-entity .zn-year {
	inline-size: 100%;
}

@media (max-width: 640px) {
	.zn-emonths {
		min-block-size: 96px;
	}

	.zn-ebar {
		inline-size: 48px;
	}
}

@media print {
	.zn-entity .zn-actions,
	.zn-entity .zn-page-numbers,
	.zn-entity nav.navigation {
		display: none;
	}

	.zn-entity .zn-layout {
		display: block;
	}

	.zn-entity .zn-panel {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.zn-entity .zn-table-wrap {
		border-color: #999999;
		overflow-x: visible;
	}

	.zn-entity .zn-table-wrap .zn-table {
		min-inline-size: 0;
	}

	.zn-entity .zn-table thead th {
		position: static;
	}

	.zn-emonths {
		background: transparent;
		border-color: #999999;
		min-block-size: 90px;
	}

	.zn-emonths__bar {
		background: #444444;
	}

	.zn-emonths__bar--zero {
		background: #cccccc;
	}

	.zn-ebar {
		background: #dddddd;
	}

	.zn-ebar__fill {
		background: #444444;
	}
}

/* == entity archives : end ================================================= */

/* == front page : operations surface : begin ==============================
 *
 * Owned by front-page.php only. Density over decoration: the page is read by
 * scanning columns of numbers, so every element here is a rule, a bar or a
 * cell. No shadows, no radii beyond the shared 4px, no motion.
 * ========================================================================= */

.zn-ops .zn-page-head {
	padding-block-end: 20px;
}

/* Section bands. Two of them, one per question the page answers. */

.zn-band {
	align-items: baseline;
	border-block-end: 2px solid var(--zn-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: space-between;
	margin-block: 34px 18px;
	padding-block-end: 7px;
}

.zn-band > span {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0;
}

.zn-band > small {
	color: var(--zn-muted);
	font-size: 11.5px;
	font-weight: 500;
}

.zn-band--act {
	border-block-end-color: var(--zn-red);
}

.zn-band--act > span {
	color: var(--zn-red);
}

/* Vitals strip: value, period-over-period delta, and the number behind it. */

.zn-vitals {
	background: var(--zn-line);
	border-block: 1px solid var(--zn-line);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-block-end: 20px;
}

.zn-vital {
	background: var(--zn-surface);
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-block-size: 104px;
	min-inline-size: 0;
	padding: 12px 14px 13px;
}

.zn-vital__label {
	color: var(--zn-ink-soft);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

.zn-vital__value {
	font-size: 27px;
	font-variant-numeric: tabular-nums;
	font-weight: 760;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.zn-vital__value small {
	color: var(--zn-muted);
	font-size: 15px;
	font-weight: 600;
}

.zn-vital__note {
	color: var(--zn-muted);
	font-size: 11px;
	line-height: 1.5;
	margin-block-start: auto;
}

.zn-delta {
	align-items: center;
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 700;
	gap: 4px;
	line-height: 1.4;
}

.zn-delta--up {
	color: var(--zn-amber);
}

.zn-delta--down {
	color: var(--zn-blue);
}

.zn-delta--flat {
	color: var(--zn-muted);
}

/* 30-day capture rhythm. Inline SVG would need a viewBox for one datum per
 * day; a grid of boxes prints and reflows better. */

.zn-sparkwrap {
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	margin: 0 0 8px;
	padding: 10px 12px 8px;
}

.zn-sparkwrap__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: space-between;
	margin-block-end: 8px;
}

.zn-sparkwrap__head > span:first-child {
	font-size: 11.5px;
	font-weight: 700;
}

.zn-spark {
	align-items: end;
	background: var(--zn-surface-alt);
	block-size: 74px;
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(var(--zn-spark-cols, 30), minmax(0, 1fr));
	padding: 4px 4px 0;
}

.zn-spark__bar {
	background: var(--zn-blue);
	min-block-size: 2px;
	print-color-adjust: exact;
}

.zn-spark__bar--zero {
	background: #c2ccc7;
}

.zn-spark__axis {
	color: var(--zn-muted);
	display: flex;
	font-size: 10.5px;
	justify-content: space-between;
	padding-block-start: 5px;
}

/* Two-column panel row. Collapses before the table wrappers have to scroll. */

.zn-ops__row {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-end: 8px;
}

.zn-ops .zn-panel {
	margin-block-end: 26px;
}

.zn-ops .zn-panel__head .zn-lede {
	margin-block-start: 3px;
}

/* Topic movement: a zero-anchored diverging bar per topic, all 21 visible. */

.zn-move {
	display: grid;
	gap: 1px;
}

.zn-move__row {
	align-items: center;
	column-gap: 10px;
	display: grid;
	grid-template-columns: minmax(0, 9.5rem) 2.4rem minmax(60px, 1fr) 3.6rem;
	padding-block: 3px;
}

.zn-move__row + .zn-move__row {
	border-block-start: 1px solid var(--zn-line-soft);
}

.zn-move__name {
	/*
	 * A standalone block link, not a word inside a sentence, so WCAG 2.2's 24px
	 * minimum target applies to it. It rendered at 21.9px; the extra padding
	 * buys the height without changing the type scale or the row rhythm, which
	 * a larger font size would have done.
	 */
	align-items: center;
	color: var(--zn-ink);
	display: flex;
	font-size: 12.5px;
	min-block-size: 24px;
	overflow: hidden;
	padding-block: 1px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.zn-move__name:hover {
	color: var(--zn-green);
	text-decoration: underline;
}

.zn-move__cur {
	color: var(--zn-ink-soft);
	font-size: 12px;
	font-weight: 700;
	text-align: end;
}

.zn-move__axis {
	border-inline-start: 1px solid var(--zn-line);
	direction: ltr;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.zn-move__half {
	block-size: 9px;
	display: flex;
}

.zn-move__half--neg {
	border-inline-end: 1px solid var(--zn-ink);
	justify-content: flex-end;
}

.zn-move__half--pos {
	justify-content: flex-start;
}

.zn-move__bar {
	block-size: 100%;
	display: block;
	print-color-adjust: exact;
}

.zn-move__bar--up {
	background: var(--zn-amber);
}

.zn-move__bar--down {
	background: var(--zn-blue);
}

/* Risk as a number with a proportional rule, dense enough for a table cell. */

.zn-rcell {
	display: inline-block;
	min-inline-size: 2.6rem;
}

.zn-rcell b {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.zn-rcell__track {
	background: var(--zn-line-soft);
	block-size: 3px;
	display: block;
	inline-size: 2.4rem;
	margin-block-start: 2px;
}

.zn-rcell__track i {
	background: currentcolor;
	block-size: 100%;
	display: block;
	print-color-adjust: exact;
}

.zn-rcell--high {
	color: var(--zn-red);
}

.zn-rcell--watch {
	color: var(--zn-amber);
}

.zn-rcell--low {
	color: var(--zn-muted);
}

.zn-ops .zn-muted {
	color: var(--zn-muted);
}

.zn-note--tight {
	color: var(--zn-muted);
	font-size: 11.5px;
	line-height: 1.6;
	margin-block: 8px 0;
	padding: 0;
}

/*
 * `--tight` drops the shared `nowrap` so headlines can wrap. Dates and counts
 * still must not: a stamp broken across two lines destroys the column scan.
 */
.zn-ops .zn-table td.zn-mono {
	white-space: nowrap;
}

/*
 * The front page's own neutralisation of the sticky-header offset is gone: the
 * offset is now a variable that is zero unless the theme pins its header, and
 * `.zn-table-wrap .zn-table thead th` zeroes it for every scrollport-wrapped
 * table rather than for this page alone.
 */

.zn-ops .zn-table th[scope="row"] {
	font-weight: 650;
}

@media (max-width: 1100px) {
	.zn-vitals {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.zn-ops__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

@media (max-width: 640px) {
	.zn-vitals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zn-move__row {
		grid-template-columns: minmax(0, 1fr) 2.2rem 3.4rem;
	}

	.zn-move__axis {
		display: none;
	}

	.zn-spark {
		block-size: 56px;
	}
}

@media (max-width: 380px) {
	.zn-vitals {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media print {
	.zn-ops .zn-ops__row {
		display: block;
	}

	.zn-ops .zn-panel,
	.zn-ops .zn-sparkwrap,
	.zn-ops .zn-table-wrap {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.zn-ops .zn-table-wrap {
		border-color: #999999;
		overflow-x: visible;
	}

	.zn-ops .zn-table thead th {
		position: static;
	}

	.zn-vitals {
		background: #999999;
		border-color: #999999;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.zn-band {
		border-block-end-color: #111111;
	}

	.zn-band--act,
	.zn-band--act > span {
		border-block-end-color: #111111;
		color: #111111;
	}

	.zn-spark {
		background: transparent;
		border: 1px solid #999999;
	}

	.zn-spark__bar {
		background: #444444;
	}

	.zn-spark__bar--zero {
		background: #cccccc;
	}

	.zn-move__bar--up {
		background: #444444;
	}

	.zn-move__bar--down {
		background: #999999;
	}

	.zn-rcell__track {
		background: #dddddd;
	}

	.zn-rcell--high,
	.zn-rcell--watch,
	.zn-rcell--low,
	.zn-delta--up,
	.zn-delta--down,
	.zn-delta--flat,
	.zn-ops .zn-health--healthy,
	.zn-ops .zn-health--degraded,
	.zn-ops .zn-health--unknown,
	.zn-ops .zn-health--failing,
	.zn-ops .zn-health--blocked {
		color: #111111;
	}
}

/* == front page : operations surface : end ================================ */

/* == chart layer : Chart.js surfaces ====================================== */

/*
 * Every chart figure starts collapsed: the stage only appears when
 * news-intelligence-charts.js marks the figure `is-live`, so pages without
 * JavaScript keep their server-rendered fallbacks and never show empty boxes.
 */

.zn-chart {
	margin: 0 0 10px;
}

.zn-chart__stage {
	display: none;
}

.zn-chart.is-live .zn-chart__stage {
	block-size: var(--zn-chart-h, 260px);
	display: block;
	position: relative;
}

/* Side-by-side chart cards: rhythm wide, mix narrow. */

.zn-chart-row {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	margin-block-end: 8px;
}

.zn-chart-row .zn-sparkwrap {
	margin: 0;
}

.zn-chart-row--single {
	grid-template-columns: minmax(0, 1fr);
}

.zn-chart-row--even {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-end: 26px;
}

@media (max-width: 860px) {
	.zn-chart-row,
	.zn-chart-row--even {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Textual fallback / print companion for doughnut and bar charts. */

.zn-mixlist {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zn-mixlist li {
	align-items: center;
	display: flex;
	font-size: 13px;
	gap: 8px;
}

.zn-mixlist li > b {
	margin-inline-start: auto;
}

.zn-mixlist__dot {
	background: var(--zn-muted);
	block-size: 9px;
	border-radius: 2px;
	display: inline-block;
	flex: none;
	inline-size: 9px;
	print-color-adjust: exact;
}

.zn-mixlist__dot--independent {
	background: var(--zn-green);
}

.zn-mixlist__dot--state_media {
	background: var(--zn-red);
}

.zn-mixlist__dot--ngo {
	background: var(--zn-amber);
}

.zn-mixlist__dot--international_org {
	background: var(--zn-blue);
}

.zn-mixlist__dot--investigative {
	background: var(--zn-violet);
}

.zn-mixlist--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-block-start: 10px;
}

.zn-mixlist--inline li > b {
	margin-inline-start: 0;
}

/*
 * Soft reveal. The html.zn-anim class is only added by JavaScript, and only
 * when the visitor has not asked for reduced motion — so content is never
 * hidden for anyone else. The media query is a second belt on the same guard.
 */

.zn-anim .zn-shell .zn-panel,
.zn-anim .zn-shell .zn-vital,
.zn-anim .zn-shell .zn-stat {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 420ms ease var(--zn-anim-delay, 0ms),
		transform 420ms ease var(--zn-anim-delay, 0ms);
}

.zn-anim .zn-shell .zn-panel.is-in,
.zn-anim .zn-shell .zn-vital.is-in,
.zn-anim .zn-shell .zn-stat.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.zn-anim .zn-shell .zn-panel,
	.zn-anim .zn-shell .zn-vital,
	.zn-anim .zn-shell .zn-stat {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media print {
	.zn-chart,
	.zn-chart__stage {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/*
	 * Generic (not .zn-ops-scoped) companion to the front page's own print
	 * rules further up this file — pages like the weekly report and topic
	 * timeline print their rhythm chart's CSS fallback strip too and need
	 * the same treatment.
	 */
	.zn-sparkwrap {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.zn-spark {
		background: transparent;
		border: 1px solid #999999;
	}

	.zn-spark__bar {
		background: #444444;
	}

	.zn-spark__bar--zero {
		background: #cccccc;
	}

	.zn-anim .zn-shell .zn-panel,
	.zn-anim .zn-shell .zn-vital,
	.zn-anim .zn-shell .zn-stat {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* == chart layer : end ==================================================== */