/*
Theme Name: Cybernieuws
Theme URI: https://cybernieuws.nl
Author: Cybernieuws.nl
Author URI: https://cybernieuws.nl
Description: Zakelijk, licht theme voor ISOs. Toont laatste cybersecurity- en informatiebeveiligingsnieuws. Werkt samen met de Cybernieuws Toolkit plugin.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cybernieuws
Tags: news, clean, one-column, custom-menu, featured-images
*/

/* ---------- Tokens ---------- */
:root {
	--cn-bg:        #f4f6fa;
	--cn-surface:   #ffffff;
	--cn-border:    #dfe4ec;
	--cn-text:      #111827;
	--cn-muted:     #566175;
	--cn-accent:    #0e5563; /* petrol/teal — concept A "Net Operations Center" */
	--cn-accent-2:  #0a4350; /* hover/darker */
	--cn-accent-bg: #e6f0f2; /* tinted background — schaars gebruikt */
	--cn-radius:    8px;
	--cn-shadow:    0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.05);
	--cn-shadow-lg: 0 4px 14px rgba(16,24,40,.08), 0 10px 28px rgba(16,24,40,.06);
	--cn-maxw:      960px;
	--cn-list-maxw: 860px; /* Specifiek voor de nieuwslijst — krapper voor security.nl-look */
	--cn-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Mono-stack voor severity-codes, timestamps en operationele metrics —
	   syslog/SIEM-gloed zonder externe fontload. */
	--cn-mono:      ui-monospace, "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--cn-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--cn-text);
	background: var(--cn-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.25; }

a { color: var(--cn-accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--cn-accent-2); text-decoration: underline; }

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

ul { list-style: none; margin: 0; padding: 0; }

.cn-container {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.cn-skip {
	position: absolute;
	left: -9999px; top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}
.cn-skip:focus {
	position: fixed;
	left: 1rem; top: 1rem;
	width: auto; height: auto;
	background: #000; color: #fff;
	padding: .5rem 1rem;
	border-radius: var(--cn-radius);
	z-index: 99999;
}

/* ---------- Header ---------- */
.cn-site-header {
	background: var(--cn-surface);
	border-bottom: 1px solid var(--cn-border);
	box-shadow: var(--cn-shadow);
	position: sticky;
	top: 0;
	z-index: 50;
}
.cn-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: .55rem 0;
	flex-wrap: wrap;
}
.cn-brand a { color: var(--cn-text); display: inline-block; }
.cn-brand a:hover { text-decoration: none; }
.cn-brand strong {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.cn-brand strong::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	background: var(--cn-accent);
	border-radius: 50%;
	margin-right: .45rem;
	vertical-align: middle;
	box-shadow: 0 0 0 2px rgba(11,95,255,.18);
}
.cn-tag-line {
	display: block;
	font-size: .7rem;
	color: var(--cn-muted);
	font-weight: 400;
	margin-top: 1px;
}

.cn-menu {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.cn-menu li { margin: 0; }
.cn-menu a {
	color: var(--cn-text);
	font-weight: 500;
	font-size: .95rem;
	padding: .35rem 0;
}
.cn-menu a:hover { color: var(--cn-accent); text-decoration: none; }
.cn-menu .current-menu-item a,
.cn-menu .current_page_item a { color: var(--cn-accent); }

/* ---------- Sector filter ---------- */
.cn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	align-items: center;
	padding: .5rem 0 .65rem;
	border-top: 1px solid var(--cn-border);
}
.cn-filter-label {
	font-size: .74rem;
	color: var(--cn-muted);
	margin-right: .25rem;
	font-weight: 500;
}
.cn-filter-item {
	display: inline-block;
	padding: .18rem .65rem;
	font-size: .72rem;
	font-weight: 500;
	border-radius: 999px;
	background: var(--cn-surface);
	color: var(--cn-text);
	border: 1px solid var(--cn-border);
	line-height: 1.3;
	transition: all .15s ease;
}
.cn-filter-item:hover {
	border-color: var(--cn-accent);
	color: var(--cn-accent);
	text-decoration: none;
	background: var(--cn-accent-bg);
}
.cn-filter-item.is-active {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
}
.cn-filter-item.is-active:hover { color: #fff; background: var(--cn-accent-2); }

/* ---------- Search bar (header) ---------- */
.cn-search {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}
.cn-search input[type="search"] {
	width: 200px;
	padding: .3rem .75rem;
	font-size: .78rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-right: none;
	border-radius: 999px 0 0 999px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
}
.cn-search input[type="search"]::placeholder { color: var(--cn-muted); }
.cn-search input[type="search"]:focus {
	background: #fff;
	border-color: var(--cn-accent);
	box-shadow: -3px 0 0 0 rgba(11,95,255,.12);
}
.cn-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .7rem;
	border: 1px solid var(--cn-accent);
	border-radius: 0 999px 999px 0;
	background: var(--cn-accent);
	color: #fff;
	cursor: pointer;
	transition: background .12s ease;
}
.cn-search button:hover { background: var(--cn-accent-2); border-color: var(--cn-accent-2); }
.cn-search button svg { display: block; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; word-wrap: normal !important;
}

/* ---------- CVE-knop in header ---------- */
.cn-cve-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 .7rem;
	border-radius: 999px;
	background: var(--cn-bg);
	color: var(--cn-text);
	border: 1px solid var(--cn-border);
	margin-left: .4rem;
	font-size: .76rem;
	font-weight: 600;
	flex-shrink: 0;
	transition: all .12s ease;
	text-decoration: none;
	white-space: nowrap;
}
.cn-cve-btn:hover {
	background: var(--cn-text);
	color: #fff;
	border-color: var(--cn-text);
	text-decoration: none;
	transform: translateY(-1px);
}

/* ---------- Videos-link (in header, naast CVE-knop) ----------
   Tekstlink, geen knop. Bewust lager in visuele hiërarchie dan CVE: video is
   format-as, niet content-as. De ▶ doet het werk; de tekst is affordance. */
.cn-videos-link {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-left: .6rem;
	padding: 0 .2rem;
	font-size: .8rem;
	font-weight: 500;
	color: var(--cn-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .12s ease;
}
.cn-videos-link:hover,
.cn-videos-link:focus-visible { color: var(--cn-accent); text-decoration: none; }
.cn-videos-link.is-active     { color: var(--cn-accent); font-weight: 600; }
.cn-videos-link span[aria-hidden] {
	font-size: .7rem;
	transform: translateY(-1px);
}
@media (max-width: 640px) {
	.cn-videos-link { margin-left: .3rem; font-size: .72rem; }
}

/* ---------- /videos archive-header ---------- */
.cn-archive-head {
	margin: 1.2rem 0 1.4rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--cn-border);
}
.cn-archive-title {
	margin: 0 0 .25rem;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--cn-text);
}
.cn-archive-sub {
	margin: 0;
	font-size: .85rem;
	color: var(--cn-muted);
	line-height: 1.5;
	max-width: 60ch;
}
@media (max-width: 640px) {
	.cn-archive-head { margin: .8rem 0 1rem; padding-bottom: .7rem; }
	.cn-archive-title { font-size: 1.2rem; }
	.cn-archive-sub { font-size: .8rem; }
}

/* ---------- CVE-archief: zoekbalk + lijst ---------- */
.cn-cve-search {
	display: flex;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	box-shadow: var(--cn-shadow);
}
.cn-cve-search-input-wrap {
	flex: 1;
	position: relative;
}
.cn-cve-search input[type="search"] {
	width: 100%;
	padding: .55rem .9rem;
	font-size: .95rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	outline: none;
	box-sizing: border-box;
}
.cn-cve-search input[type="search"]:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-cve-search select {
	padding: .55rem .85rem;
	font-size: .9rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	cursor: pointer;
}
.cn-cve-search button {
	padding: .55rem 1.2rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}
.cn-cve-search button:hover { background: var(--cn-accent-2); }

.cn-cve-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	overflow: hidden;
	box-shadow: var(--cn-shadow);
}
.cn-cve-item {
	border-left: 3px solid #e6eaf0;
	border-bottom: 1px solid var(--cn-border);
	transition: background .1s ease;
}
.cn-cve-item:last-child { border-bottom: none; }
.cn-cve-item.severity-critical { border-left-color: #b42318; }
.cn-cve-item.severity-high     { border-left-color: #d9480f; }
.cn-cve-item.severity-medium   { border-left-color: #b08800; }
.cn-cve-item.severity-low      { border-left-color: #4a6a2d; }
.cn-cve-item:nth-child(even) { background: #f7f9fc; }
.cn-cve-item:hover { background: #eef3fa; }

.cn-cve-link {
	display: grid;
	grid-template-columns: 130px auto 1fr auto auto;
	align-items: center;
	gap: .65rem .85rem;
	padding: .65rem .9rem;
	color: inherit;
	text-decoration: none;
}
.cn-cve-link:hover { text-decoration: none; }
.cn-cve-id {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-accent);
}
.cn-cve-score-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 4px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.cn-cve-score-pill.sev-critical { background: #b42318; }
.cn-cve-score-pill.sev-high     { background: #d9480f; }
.cn-cve-score-pill.sev-medium   { background: #b08800; }
.cn-cve-score-pill.sev-low      { background: #4a6a2d; }
.cn-cve-score-pill.sev-none     { background: #8a93a3; }
.cn-cve-title {
	font-size: .9rem;
	color: var(--cn-text);
	min-width: 0;
}
.cn-cve-vendors {
	display: flex;
	gap: .25rem;
	flex-wrap: wrap;
}
.cn-cve-vendor {
	display: inline-block;
	padding: 1px 7px;
	font-size: .7rem;
	background: var(--cn-bg);
	color: var(--cn-muted);
	border-radius: 3px;
}
.cn-cve-date {
	font-size: .76rem;
	color: var(--cn-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* CVE single */
.cn-cve-single .cn-cve-header { margin-bottom: 1.5rem; }
.cn-cve-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem .85rem;
	align-items: center;
	margin-top: .5rem;
}
.cn-cve-date-meta { font-size: .85rem; color: var(--cn-muted); }
.cn-cve-cwe {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .78rem;
	background: var(--cn-bg);
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--cn-muted);
}
.cn-cve-section {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	background: #fafbfd;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
}
.cn-cve-section h2 {
	margin: 0 0 .55rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-cve-translated-badge {
	display: inline-block;
	padding: 1px 7px;
	background: #e8f0ff;
	color: var(--cn-accent);
	border: 1px solid rgba(11,95,255,.25);
	border-radius: 3px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.cn-cve-original {
	margin-top: .85rem;
	padding-top: .7rem;
	border-top: 1px dashed var(--cn-border);
	font-size: .9rem;
}
.cn-cve-original summary {
	cursor: pointer;
	color: var(--cn-muted);
	font-weight: 500;
	font-size: .82rem;
	user-select: none;
}
.cn-cve-original summary:hover { color: var(--cn-accent); }
.cn-cve-original-text {
	margin-top: .5rem;
	padding: .65rem .9rem;
	background: #fafbfd;
	border-radius: 6px;
	color: var(--cn-muted);
	font-size: .88rem;
	line-height: 1.5;
}
.cn-cve-tags {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}
.cn-cve-tag {
	display: inline-block;
	padding: 3px 10px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 500;
}
.cn-cve-tag-product {
	background: var(--cn-bg);
	color: var(--cn-text);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .76rem;
}
.cn-cve-refs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-cve-refs li { padding: .25rem 0; }
.cn-cve-refs a {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .82rem;
	word-break: break-all;
}

@media (max-width: 720px) {
	.cn-cve-btn { height: 36px; padding: 0 .65rem; font-size: .82rem; }
	.cn-cve-search { flex-direction: column; padding: .85rem; }
	.cn-cve-search button { width: 100%; }
	.cn-cve-link {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto auto;
		gap: .15rem .55rem;
		padding: .65rem .85rem;
	}
	.cn-cve-id { grid-column: 1; grid-row: 1; }
	.cn-cve-score-pill { grid-column: 2; grid-row: 1; justify-self: end; }
	.cn-cve-title { grid-column: 1 / -1; grid-row: 2; font-size: .88rem; }
	.cn-cve-vendors { grid-column: 1 / -1; grid-row: 3; }
	.cn-cve-date { grid-column: 2; grid-row: 1; display: none; } /* tijd niet relevant op mobiel */
}

/* ---------- Newsletter envelope-knop in header ---------- */
.cn-newsletter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cn-bg);
	color: var(--cn-accent);
	border: 1px solid var(--cn-border);
	margin-left: .5rem;
	flex-shrink: 0;
	transition: all .12s ease;
	text-decoration: none;
}
.cn-newsletter-btn:hover {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
	text-decoration: none;
	transform: translateY(-1px);
}
.cn-newsletter-btn svg { display: block; }

/* ---------- Newsletter modal (CSS-only via :target) ---------- */
.cn-newsletter-modal {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 100;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.cn-newsletter-modal:target {
	display: flex;
	animation: cn-fade-in .18s ease;
}
@keyframes cn-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.cn-newsletter-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .6);
	backdrop-filter: blur(2px);
}
.cn-newsletter-inner {
	position: relative;
	background: var(--cn-surface);
	border-radius: 12px;
	padding: 2rem 2.2rem;
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--cn-shadow-lg);
	z-index: 1;
	animation: cn-slide-up .25s ease;
}
@keyframes cn-slide-up {
	from { transform: translateY(15px); opacity: .7; }
	to { transform: translateY(0); opacity: 1; }
}
.cn-newsletter-close {
	position: absolute;
	top: .85rem;
	right: 1.1rem;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--cn-muted);
	text-decoration: none;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .12s ease;
}
.cn-newsletter-close:hover {
	background: var(--cn-bg);
	color: var(--cn-text);
	text-decoration: none;
}
.cn-newsletter-title {
	margin: 0 0 .6rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cn-text);
	padding-right: 1.5rem;
}
.cn-newsletter-lede {
	margin: 0 0 1.3rem;
	color: var(--cn-muted);
	font-size: .95rem;
	line-height: 1.5;
}
.cn-newsletter-form,
.cn-newsletter-form-extended {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin-bottom: .85rem;
}
.cn-newsletter-form input[type="email"],
.cn-newsletter-form-extended input[type="email"] {
	width: 100%;
	padding: .65rem .9rem;
	font-size: .95rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
}
.cn-newsletter-form input[type="email"]:focus,
.cn-newsletter-form-extended input[type="email"]:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-newsletter-form button,
.cn-newsletter-form-extended .cn-prefs-submit,
.cn-prefs-page-form .cn-prefs-submit {
	padding: .7rem 1.2rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	width: 100%;
}
.cn-newsletter-form button:hover,
.cn-newsletter-form-extended .cn-prefs-submit:hover,
.cn-prefs-page-form .cn-prefs-submit:hover {
	background: var(--cn-accent-2);
	border-color: var(--cn-accent-2);
}

/* ---------- Prefs-checkboxes (modal + prefs-pagina) ---------- */
.cn-prefs-label-block {
	display: block;
}
.cn-prefs-label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--cn-muted);
	margin-bottom: .3rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cn-prefs-group {
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .85rem 1rem .9rem;
	margin: 0;
	background: var(--cn-bg);
}
.cn-prefs-group legend {
	font-size: .82rem;
	font-weight: 700;
	color: var(--cn-text);
	padding: 0 .35rem;
	margin-left: -.35rem;
}
.cn-prefs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .35rem .65rem;
	margin-top: .4rem;
}
.cn-prefs-check {
	display: flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
	font-size: .88rem;
	padding: .15rem 0;
}
.cn-prefs-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cn-accent);
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
}
.cn-prefs-check-block {
	flex-direction: row;
	align-items: flex-start;
	padding: .5rem 0;
	border-bottom: 1px solid var(--cn-border);
}
.cn-prefs-check-block:last-child { border-bottom: none; }
.cn-prefs-check-block input[type="checkbox"] { margin-top: .15rem; }
.cn-prefs-check-block span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.cn-prefs-check-block strong { font-weight: 600; font-size: .9rem; color: var(--cn-text); }
.cn-prefs-check-block small { font-size: .76rem; color: var(--cn-muted); line-height: 1.4; }
.cn-prefs-hint {
	margin: .55rem 0 0;
	font-size: .72rem;
	color: var(--cn-muted);
	font-style: italic;
}
.cn-prefs-watchlist {
	width: 100%;
	padding: .55rem .75rem;
	font-size: .85rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	background: #fff;
	color: var(--cn-text);
	resize: vertical;
	min-height: 70px;
	box-sizing: border-box;
	outline: none;
}
.cn-prefs-watchlist:focus {
	border-color: var(--cn-accent);
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}

/* ---------- Typeahead (autocomplete uit CVE-database) ---------- */
.cn-typeahead {
	position: relative;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .5rem .55rem;
	min-height: 44px;
}
.cn-typeahead:focus-within {
	border-color: var(--cn-accent);
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-typeahead-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}
.cn-typeahead-pills:empty { display: none; }
.cn-typeahead-pill {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 3px 4px 3px 10px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	border: 1px solid rgba(11,95,255,.25);
}
.cn-typeahead-pill-x {
	background: transparent;
	border: none;
	color: var(--cn-accent);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 5px;
	border-radius: 50%;
	font-family: inherit;
}
.cn-typeahead-pill-x:hover { background: var(--cn-accent); color: #fff; }
.cn-typeahead-input-wrap {
	position: relative;
	margin-top: .25rem;
}
.cn-typeahead-input {
	width: 100%;
	padding: .45rem .6rem;
	border: none;
	background: transparent;
	font-size: .92rem;
	font-family: inherit;
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.cn-typeahead-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	box-shadow: var(--cn-shadow-lg);
	list-style: none;
	margin: 0;
	padding: .25rem 0;
	max-height: 280px;
	overflow-y: auto;
	z-index: 10;
}
.cn-typeahead-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .55rem .85rem;
	cursor: pointer;
	font-size: .9rem;
	gap: .85rem;
}
.cn-typeahead-item:hover,
.cn-typeahead-item.is-active {
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
}
.cn-typeahead-count {
	font-size: .72rem;
	color: var(--cn-muted);
	font-variant-numeric: tabular-nums;
	background: var(--cn-bg);
	padding: 1px 7px;
	border-radius: 999px;
	flex-shrink: 0;
}
.cn-typeahead-item.is-active .cn-typeahead-count { background: rgba(11,95,255,.15); color: var(--cn-accent-2); }
.cn-typeahead-empty {
	padding: .6rem .9rem;
	color: var(--cn-muted);
	font-size: .85rem;
	font-style: italic;
}

/* ---------- Wizard promo (lancering-actie) ---------- */
.cn-wizard-promo {
	background: linear-gradient(135deg, #fff7e6 0%, #ffeac4 100%);
	border: 1px solid #f0d89b;
	border-radius: 10px;
	padding: 1rem 1.2rem 1.1rem;
	margin: 0 0 1.4rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(184, 134, 11, .12);
}
.cn-wizard-promo-full {
	background: var(--cn-bg);
	border-color: var(--cn-border);
	box-shadow: none;
}
.cn-wizard-promo-badge {
	display: inline-block;
	background: #b08800;
	color: #fff;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.cn-wizard-promo-full .cn-wizard-promo-badge {
	background: var(--cn-muted);
}
.cn-wizard-promo-headline {
	margin: .15rem 0 .25rem;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .55rem;
	flex-wrap: wrap;
}
.cn-wizard-promo-strike {
	color: #8a5a00;
	font-size: 1rem;
	text-decoration: line-through;
	font-weight: 500;
	opacity: .8;
}
.cn-wizard-promo-strike-unit {
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .01em;
}
.cn-wizard-promo-now {
	color: #6a4400;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.01em;
}
.cn-wizard-promo-sub {
	margin: 0 0 .75rem;
	font-size: .82rem;
	color: #6a4400;
}
.cn-wizard-promo-full .cn-wizard-promo-sub { color: var(--cn-muted); }
.cn-wizard-promo-meter {
	height: 6px;
	background: rgba(184, 134, 11, .15);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 .55rem;
}
.cn-wizard-promo-meter-bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #d9480f, #b08800);
	border-radius: 999px;
	transition: width .4s ease;
}
.cn-wizard-promo-counter {
	margin: 0;
	font-size: .82rem;
	color: #6a4400;
	font-weight: 500;
}
.cn-wizard-promo-counter strong { color: #b42318; font-weight: 700; }

@media (max-width: 480px) {
	.cn-wizard-promo { padding: .85rem 1rem 1rem; }
	.cn-wizard-promo-now { font-size: 1.2rem; }
	.cn-wizard-promo-strike { font-size: .9rem; }
}

/* ---------- Wizard (multi-step modal) ---------- */
.cn-wizard { padding-top: 1.4rem; }
.cn-wizard-progress {
	height: 3px;
	background: var(--cn-bg);
	border-radius: 999px;
	margin-bottom: 1.4rem;
	overflow: hidden;
}
.cn-wizard-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--cn-accent), #4b8dff);
	border-radius: 999px;
	transition: width .3s ease;
}
.cn-wizard-step {
	display: none;
	animation: cn-step-in .25s ease;
}
.cn-wizard-step.is-active { display: block; }
@keyframes cn-step-in {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.cn-wizard-q {
	margin: 0 0 .35rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cn-text);
	line-height: 1.3;
	padding-right: 1.5rem;
}
.cn-wizard-help {
	margin: 0 0 1.2rem;
	color: var(--cn-muted);
	font-size: .92rem;
	line-height: 1.55;
}
.cn-wizard-input {
	width: 100%;
	padding: .8rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	background: var(--cn-bg);
	color: var(--cn-text);
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.cn-wizard-input:focus {
	border-color: var(--cn-accent);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11,95,255,.15);
}
.cn-wizard-choices {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-bottom: 1rem;
}
.cn-wizard-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 3px;
	padding: 1rem 1.2rem;
	background: var(--cn-bg);
	border: 1px solid var(--cn-border);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: all .12s ease;
	width: 100%;
}
.cn-wizard-choice:hover {
	border-color: var(--cn-accent);
	background: var(--cn-accent-bg);
	transform: translateY(-1px);
}
.cn-wizard-choice-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--cn-text);
}
.cn-wizard-choice-sub {
	font-size: .82rem;
	color: var(--cn-muted);
}
.cn-wizard-choice:hover .cn-wizard-choice-title { color: var(--cn-accent); }

.cn-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .65rem;
	margin-top: 1.3rem;
}
.cn-wizard-back {
	background: transparent;
	border: none;
	color: var(--cn-muted);
	font-family: inherit;
	font-size: .9rem;
	cursor: pointer;
	padding: .55rem .2rem;
}
.cn-wizard-back:hover { color: var(--cn-accent); }
.cn-wizard-next,
.cn-wizard-submit-new,
.cn-wizard-form-existing button[type="submit"] {
	padding: .75rem 1.4rem;
	background: var(--cn-accent);
	color: #fff;
	border: 1px solid var(--cn-accent);
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-left: auto;
}
.cn-wizard-next:hover,
.cn-wizard-submit-new:hover,
.cn-wizard-form-existing button[type="submit"]:hover {
	background: var(--cn-accent-2);
	border-color: var(--cn-accent-2);
}

.cn-wizard-summary {
	background: var(--cn-bg);
	border: 1px solid var(--cn-border);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: .25rem 0 .8rem;
}
.cn-wizard-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-wizard-summary li {
	padding: .25rem 0;
	font-size: .88rem;
	color: var(--cn-text);
	border-bottom: 1px solid var(--cn-border);
}
.cn-wizard-summary li:last-child { border-bottom: none; }
.cn-wizard-summary strong { color: var(--cn-muted); font-weight: 600; margin-right: .35rem; }

/* Wizard zelf compact op mobiel */
@media (max-width: 480px) {
	.cn-wizard-q { font-size: 1.15rem; }
	.cn-wizard-help { font-size: .88rem; }
	.cn-wizard-choice { padding: .85rem 1rem; }
	.cn-wizard-choice-title { font-size: .94rem; }
	.cn-wizard-next, .cn-wizard-submit-new { padding: .7rem 1rem; font-size: .9rem; width: auto; }
}

/* Prefs-pagina (token-protected, op cn-single template) */
.cn-prefs-page-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;
}
.cn-prefs-page-form .cn-prefs-grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 480px) {
	.cn-prefs-grid { grid-template-columns: 1fr; }
}
.cn-newsletter-note {
	margin: 0;
	font-size: .78rem;
	color: var(--cn-muted);
	line-height: 1.5;
}

@media (max-width: 480px) {
	.cn-newsletter-inner { padding: 1.6rem 1.4rem; border-radius: 10px; }
	.cn-newsletter-title { font-size: 1.2rem; }
	.cn-newsletter-form { flex-direction: column; }
	.cn-newsletter-form button { width: 100%; }
}

/* ---------- Severity-codes in lijst-titels ----------
   Concept A "Net Operations Center": geen bolle pill met fill, maar een
   monospace 3-letter code in syslog-stijl ([KRT], [HOG], [MID]). De code
   draagt de severity-codering via tekstkleur — geen achtergrond, geen
   ronding, geen ruis. Voelt als log-output, niet als retail-badge. */
.cn-sev-pill {
	display: inline-block;
	margin-right: .35rem;
	padding: 0;
	font-family: var(--cn-mono);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: middle;
	background: transparent;
	color: var(--cn-text);
	line-height: 1.55;
}
.cn-sev-pill.sev-kritiek { color: #b42318; }
.cn-sev-pill.sev-hoog    { color: #d9480f; }
.cn-sev-pill.sev-middel  { color: #b08800; }

/* ---------- Video-marker (YouTube-bronnen) ----------
   Neutraal ▶-driehoekje in muted-tint. Voorheen een rode "▶ VIDEO"-chip,
   maar die botste visueel met de rode KRT-severity-codes — twee rode
   pillen naast elkaar bij een kritieke video. Format en severity zijn
   verschillende assen; format krijgt nu een kleurloze marker.
   De ▶-vorm is universeel herkend, een tekstlabel voegt niets toe. */
.cn-video-badge {
	display: inline-block;
	margin-right: .3rem;
	padding: 0;
	font-size: .7rem;
	color: var(--cn-muted);
	background: transparent;
	vertical-align: middle;
	line-height: 1;
	transform: translateY(-1px);
}
.cn-video-badge:hover { color: var(--cn-accent); }

/* ---------- YouTube embed-modal ---------- */
/* Overlay verschijnt bij klik op een [data-yt-id]-link. iframe speelt
   direct af binnen cybernieuws.nl zodat bezoeker niet wegnavigeert. */
.cn-yt-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cn-yt-modal[hidden] { display: none; }
.cn-yt-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.85);
	cursor: pointer;
	backdrop-filter: blur(2px);
}
.cn-yt-frame-wrap {
	position: relative;
	width: min(90vw, 1100px);
	max-width: 1100px;
	margin: 0 auto;
}
.cn-yt-topbar {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 0 0 .55rem;
	color: #fff;
	min-height: 32px;
}
.cn-yt-counter {
	flex-shrink: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	background: rgba(255,255,255,.15);
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cn-yt-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .9rem;
	font-weight: 500;
	color: rgba(255,255,255,.92);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cn-yt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cn-yt-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.cn-yt-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .12s ease, transform .12s ease;
}
.cn-yt-close:hover { background: rgba(255,255,255,.3); transform: scale(1.05); }
.cn-yt-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Prev/next-knoppen: dichtbij de iframe — positioned tegen de frame-wrap.
   Op breed scherm staan ze buiten de iframe-rand (compact en goed bereikbaar),
   op smal scherm overlappen ze de iframe-randen (semi-transparant). */
.cn-yt-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.cn-yt-nav:hover:not(:disabled) {
	background: rgba(255,255,255,.32);
	transform: translateY(-50%) scale(1.08);
}
.cn-yt-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cn-yt-nav:disabled {
	opacity: .25;
	cursor: not-allowed;
}
/* Plaats buiten de iframe-randen: −56px = knop (44px) + 12px speling */
.cn-yt-prev { left: -56px; }
.cn-yt-next { right: -56px; }

/* Smal scherm: overlap de iframe-randen met halftransparante donkere bg
   zodat de pijltjes leesbaar blijven op video-content */
@media (max-width: 1100px) {
	.cn-yt-prev { left: 8px; background: rgba(0,0,0,.55); }
	.cn-yt-next { right: 8px; background: rgba(0,0,0,.55); }
	.cn-yt-nav:hover:not(:disabled) { background: rgba(0,0,0,.75); }
}

/* Vergrendel body-scroll als modal open is */
html.cn-yt-open, html.cn-yt-open body { overflow: hidden; }

@media (max-width: 720px) {
	.cn-yt-frame-wrap { width: 96vw; }
	.cn-yt-topbar { gap: .5rem; padding-bottom: .4rem; }
	.cn-yt-title { font-size: .8rem; }
	.cn-yt-counter { font-size: .65rem; padding: 2px 8px; }
	.cn-yt-close { width: 28px; height: 28px; font-size: 1.2rem; }
	.cn-yt-nav {
		width: 38px;
		height: 38px;
		font-size: 1.5rem;
		background: rgba(0,0,0,.6);
	}
	.cn-yt-prev { left: 6px; }
	.cn-yt-next { right: 6px; }
}

/* Severity dim/highlight in newslist — uitgeschakeld.
   Reden: de KRITIEK/HOOG-pills naast de titel dragen al de severity-codering
   met de conventionele rood/oranje-tinten. Een tweede laag (rij-achtergrond)
   was duplicatie en de pastel-tinten lagen zó dicht bij elkaar dat het
   onderscheid KRITIEK ↔ HOOG juist verloren ging op rij-niveau.
   Alle rijen blijven nu wit; de pill doet het severity-werk. */
.cn-newslist-item.severity-kritiek,
.cn-newslist-item.severity-kritiek:nth-child(even),
.cn-newslist-item.severity-hoog,
.cn-newslist-item.severity-hoog:nth-child(even) { background: transparent; }

/* ---------- Live-indicator → operationele metrics-strip ----------
   Concept A "Net Operations Center": de header-strip toont niet alleen "live ·
   X min geleden", maar ook live-cijfers (actieve bronnen, kritieke meldingen,
   items vandaag). Mono-font op de getallen geeft de syslog/SIEM-gloed.
   Cijfers worden 5 min gecached zodat dit geen DB-belasting wordt. */
.cn-live-indicator {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: 2px;
	font-size: .7rem;
	color: var(--cn-muted);
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.4;
}
.cn-live-dot {
	width: 7px;
	height: 7px;
	background: #1f8a4c;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(31, 138, 76, .7);
	animation: cn-live-pulse 2s infinite;
	flex-shrink: 0;
}
.cn-live-text { color: var(--cn-muted); }
.cn-live-sep  { color: var(--cn-border); margin: 0 .05rem; }
.cn-live-metric {
	color: var(--cn-muted);
	white-space: nowrap;
}
.cn-live-metric.is-crit { color: #b42318; font-weight: 600; }
.cn-live-num {
	font-family: var(--cn-mono);
	font-weight: 600;
	color: var(--cn-text);
	font-variant-numeric: tabular-nums;
	margin-right: .1rem;
}
.cn-live-metric.is-crit .cn-live-num { color: #b42318; }
@keyframes cn-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 138, 76, .7); }
	70%  { box-shadow: 0 0 0 6px rgba(31, 138, 76, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 138, 76, 0); }
}
/* Op mobiel collapsen we tot alleen "● live · X min" — header-ruimte is
   schaars en de metrics duwen anders het zoekveld onder een tweede regel. */
@media (max-width: 640px) {
	.cn-live-indicator { font-size: .62rem; gap: .25rem; }
	.cn-live-indicator .cn-live-sep,
	.cn-live-indicator .cn-live-metric { display: none; }
}

/* ---------- Trust-strip (onder header) ----------
   Slanke balk met onderscheidende cijfers: 180+ bronnen, real-time, gratis,
   geen tracking. Subtiel maar zichtbaar — bouwt vertrouwen bij nieuwe bezoekers. */
.cn-trust-strip {
	background: #f5f8fc;
	border-bottom: 1px solid var(--cn-border);
	color: var(--cn-muted);
	font-size: .72rem;
	line-height: 1.4;
}
.cn-trust-strip-inner {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: .35rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .45rem .8rem;
}
.cn-trust-item {
	color: var(--cn-text);
	font-weight: 500;
}
.cn-trust-item strong { font-weight: 700; color: var(--cn-accent); }
.cn-trust-sep { color: var(--cn-border); }

/* Mobiel: trust-strip volledig verbergen — boodschap zit al in de
   announcement-bar erboven, op klein scherm is dit te veel chrome. */
@media (max-width: 640px) {
	.cn-trust-strip { display: none; }
}

/* ---------- Top announcement-bar (killer-feature CTA) ----------
   Slanke balk boven de site-header. Compact, altijd zichtbaar.
   Donkere navy met goudgele accent-knop voor sterke kleurcontrast. */
.cn-announcement-bar {
	background: #0d1b2a;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: .82rem;
	line-height: 1.4;
}
.cn-announcement-bar-inner {
	max-width: var(--cn-maxw);
	margin: 0 auto;
	padding: .5rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	position: relative;
}
.cn-announcement-bar-text {
	color: rgba(255,255,255,.92);
}
.cn-announcement-bar-text strong {
	color: #fff;
	font-weight: 700;
}
.cn-announcement-bar-accent {
	color: #ffd84a !important; /* goudgeel — accent op het personalisatie-aspect */
}
.cn-announcement-bar-cta {
	flex-shrink: 0;
	background: #ffd84a;
	color: #0d1b2a;
	padding: .25rem .85rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: .78rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s ease, transform .12s ease;
}
.cn-announcement-bar-cta:hover {
	background: #ffe57a;
	color: #0d1b2a;
	text-decoration: none;
	transform: translateY(-1px);
}
.cn-announcement-bar-close {
	position: absolute;
	right: .65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: transparent;
	color: rgba(255,255,255,.6);
	border: none;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background .12s ease, color .12s ease;
}
.cn-announcement-bar-close:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

@media (max-width: 640px) {
	.cn-announcement-bar { font-size: .7rem; }
	.cn-announcement-bar-inner {
		padding: .35rem 2rem .35rem .65rem;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: .4rem;
		align-items: center;
	}
	.cn-announcement-bar-text {
		font-size: .68rem;
		line-height: 1.25;
		flex: 1 1 auto;
		min-width: 0;
		/* Toon korte versie op mobiel */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.cn-announcement-bar-cta {
		font-size: .66rem;
		padding: .22rem .55rem;
		flex-shrink: 0;
	}
	.cn-announcement-bar-close {
		width: 18px;
		height: 18px;
		font-size: .85rem;
		right: .35rem;
	}
}

/* ---------- Watchlist hero-strip (legacy — niet meer in gebruik) ----------
   Above-the-fold prominentste positie. Communiceert dat cybernieuws.nl niet
   gewoon RSS-aggregatie is maar gepersonaliseerde CVE-alerts levert.
   Dismissible via localStorage zodat power-users hem niet steeds zien. */
.cn-watchlist-hero {
	position: relative;
	background: linear-gradient(135deg, #0b3d91 0%, #0b5fff 50%, #4b8dff 100%);
	color: #fff;
	border-radius: 8px;
	padding: 1rem 1.2rem 1rem 1.1rem;
	margin: 0 auto 1rem;
	max-width: var(--cn-list-maxw);
	box-shadow: 0 4px 14px rgba(11, 95, 255, .15);
	overflow: hidden;
}
.cn-watchlist-hero::before {
	content: "";
	position: absolute;
	top: -40px; right: -40px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
	pointer-events: none;
}
.cn-watchlist-hero-close {
	position: absolute;
	top: .35rem;
	right: .5rem;
	width: 24px;
	height: 24px;
	background: rgba(255,255,255,.18);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s ease;
}
.cn-watchlist-hero-close:hover { background: rgba(255,255,255,.32); }
.cn-watchlist-hero-inner {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 1rem;
	position: relative;
}
.cn-watchlist-hero-icon {
	font-size: 2rem;
	line-height: 1;
	text-align: center;
}
.cn-watchlist-hero-title {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin-bottom: .15rem;
}
.cn-watchlist-hero-title em {
	background: rgba(255,255,255,.18);
	padding: 0 .35rem;
	border-radius: 3px;
	font-style: normal;
}
.cn-watchlist-hero-sub {
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: rgba(255,255,255,.95);
}
.cn-watchlist-hero-feat {
	display: block;
	font-size: .8rem;
	margin-top: .2rem;
	padding-left: .15rem;
}
.cn-watchlist-hero-feat strong {
	color: #fff;
	font-weight: 700;
}
.cn-watchlist-hero-meta {
	display: block;
	font-size: .7rem;
	color: rgba(255,255,255,.75);
	font-style: italic;
	margin-top: .4rem;
}
.cn-watchlist-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: #fff;
	color: #0b3d91;
	padding: .55rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .82rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cn-watchlist-hero-cta:hover {
	color: #0b3d91;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
	text-decoration: none;
}

@media (max-width: 640px) {
	.cn-watchlist-hero {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		padding: .75rem .9rem;
	}
	.cn-watchlist-hero-inner {
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto;
		gap: .5rem;
	}
	.cn-watchlist-hero-icon { font-size: 1.5rem; }
	.cn-watchlist-hero-title { font-size: .98rem; }
	.cn-watchlist-hero-sub { font-size: .76rem; }
	.cn-watchlist-hero-meta { font-size: .65rem; }
	.cn-watchlist-hero-cta {
		grid-column: 1 / -1;
		justify-content: center;
		padding: .55rem .85rem;
		font-size: .8rem;
	}
}

/* ---------- "Aankomend" sectie (gepinde events) ----------
   Verschijnt bovenaan de homepage voor items met _cyber_pinned_until > now.
   Lichtblauw kader, datum + countdown links, klik op titel = naar bron. */
.cn-upcoming {
	background: #f0f7ff;
	border: 1px solid #c5dafa;
	border-left: 3px solid #0b5fff;
	border-radius: 6px;
	padding: .65rem .9rem .55rem;
	margin: 0 auto 1rem;
	max-width: var(--cn-list-maxw);
}
.cn-upcoming-head {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-bottom: .35rem;
}
.cn-upcoming-kicker {
	display: inline-block;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #0b4ad1;
}
.cn-upcoming-meta {
	font-size: .65rem;
	color: var(--cn-muted);
	font-style: italic;
}
.cn-upcoming-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-upcoming-item {
	display: grid;
	grid-template-columns: minmax(150px, auto) 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .18rem 0;
	font-size: .82rem;
	line-height: 1.25;
	border-bottom: 1px solid rgba(11, 95, 255, .08);
}
.cn-upcoming-item:last-child { border-bottom: none; }
.cn-upcoming-date {
	color: #0b4ad1;
	font-weight: 600;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cn-upcoming-when {
	color: var(--cn-muted);
	font-weight: 400;
	font-style: italic;
}
.cn-upcoming-title {
	color: var(--cn-accent);
	font-weight: 600;
	font-size: .82rem;
	text-decoration: none;
	line-height: 1.25;
	min-width: 0;
}
.cn-upcoming-title:hover {
	color: var(--cn-accent-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cn-upcoming-source {
	font-size: .65rem;
	color: var(--cn-muted);
	white-space: nowrap;
	font-style: italic;
	opacity: .7;
}

@media (max-width: 640px) {
	.cn-upcoming { padding: .55rem .7rem; }
	.cn-upcoming-item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: .05rem;
	}
	.cn-upcoming-source { grid-column: 1; }
}

/* ---------- "Vandaag" hero-blok (homepage top) ---------- */
.cn-today {
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	padding: .85rem 1.1rem;
	margin: 0 auto 1.1rem;
	max-width: var(--cn-list-maxw);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	border-left: 3px solid var(--cn-accent);
}
/* Priority-state houdt accentkleur op de linker-balk; geen gradient/rose
   achtergrond meer — dubbele rood-laag met de KRITIEK-badges weggehaald. */
.cn-today.is-priority {
	border-left-color: #b42318;
	background: #fff;
}
.cn-today-head {
	margin: 0 0 .55rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem .65rem;
}
.cn-today-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cn-today.is-priority .cn-today-kicker { background: #b42318; }
.cn-today-meta {
	font-size: .66rem;
	color: var(--cn-muted);
	font-style: italic;
}
@media (max-width: 720px) {
	.cn-today-meta { font-size: .68rem; line-height: 1.35; }
}
.cn-today-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: today;
}
.cn-today-item {
	counter-increment: today;
	display: grid;
	grid-template-columns: 22px 40px 1fr auto;
	align-items: center;
	gap: .6rem;
	padding: .25rem 0;
	border-bottom: 1px solid var(--cn-border);
	font-size: .86rem;
}
.cn-today-item:last-child { border-bottom: none; }
.cn-today-item::before {
	content: counter(today);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	background: var(--cn-bg);
	border-radius: 50%;
	font-size: .65rem;
	font-weight: 700;
	color: var(--cn-muted);
}
.cn-today.is-priority .cn-today-item::before {
	background: #ffe5e5;
	color: #b42318;
}
.cn-today-time {
	color: var(--cn-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.cn-today-title {
	color: var(--cn-text);
	font-weight: 600;
	font-size: .84rem;
	line-height: 1.28;
	text-decoration: none;
	min-width: 0;
}
.cn-today-title:hover { color: var(--cn-accent); text-decoration: underline; text-underline-offset: 2px; }
.cn-today-src {
	color: var(--cn-muted);
	font-size: .66rem;
	white-space: nowrap;
	font-style: italic;
}

@media (max-width: 720px) {
	.cn-today { padding: 1.15rem 1.1rem; border-radius: 10px; }
	.cn-today-item {
		grid-template-columns: 24px 42px 1fr;
		grid-template-rows: auto;
		gap: .15rem .55rem;
		padding: .55rem 0;
	}
	.cn-today-item::before { width: 20px; height: 20px; font-size: .7rem; }
	.cn-today-title { grid-column: 3; grid-row: 1; font-size: .98rem; }
	/* Bron-label ("via Computable", "via Security.nl") verbergen op mobiel
	   voor de app-look — bron is alsnog zichtbaar bij hover/tap via tooltip. */
	.cn-today-src { display: none; }
}

/* Ook in "Aankomend" sectie de bron verbergen op mobiel */
@media (max-width: 640px) {
	.cn-upcoming-source { display: none; }
}

/* ---------- Main ---------- */
.cn-main { padding: 1.2rem 1rem 2rem; max-width: var(--cn-maxw); margin: 0 auto; }

/* ---------- Inline cluster chip + children-row ---------- */
.cn-newslist-item.has-cluster {
	grid-template-columns: 38px 1fr auto auto;
}
.cn-cluster-chip {
	display: inline-block;
	background: transparent;
	color: var(--cn-muted);
	border: none;
	border-radius: 0;
	padding: 0 .15rem;
	font-size: .68rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
	font-family: inherit;
	transition: all .12s ease;
	font-family: inherit;
}
.cn-cluster-chip:hover { color: var(--cn-accent); }
.cn-cluster-chip.is-open { color: var(--cn-accent); font-weight: 600; }

/* Children-row: een li die volledige breedte spant met een ingesprongen sublijst */
.cn-cluster-children-row {
	display: block;
	padding: 0;
	background: #fafbfd;
	border-left: 3px solid #d4dbe6;
	margin: 0 0 0 0;
}
.cn-cluster-children-row[hidden] {
	display: none !important;
}
.cn-cluster-children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-cluster-children .cn-newslist-item {
	padding-left: 1.6rem;
	background: transparent;
	border-left-width: 0;
	font-size: .8rem;
	grid-template-columns: 48px 1fr auto;
}
.cn-cluster-children .cn-newslist-item:nth-child(even) { background: rgba(0,0,0,.025); }
.cn-cluster-children .cn-newslist-item .cn-newslist-time::before {
	content: "└ ";
	color: var(--cn-muted);
	margin-right: .15rem;
}

@media (max-width: 720px) {
	.cn-newslist-item.has-cluster {
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto auto;
	}
	.cn-cluster-chip {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		font-size: .68rem;
		padding: 2px 8px;
		margin-top: .15rem;
	}
	.cn-cluster-children .cn-newslist-item {
		padding-left: 1.5rem;
		grid-template-columns: 44px 1fr;
	}
}

/* ---------- Freshness indicator (cache-debug + manuele vernieuwen) ---------- */
.cn-freshness {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem .8rem;
	margin: 0 0 1.25rem;
	padding: .55rem .85rem;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	font-size: .82rem;
	color: var(--cn-muted);
}
.cn-freshness-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #1f8a4c;
	box-shadow: 0 0 0 2px rgba(31,138,76,.18);
	flex-shrink: 0;
	animation: cn-pulse 2.5s ease-in-out infinite;
}
@keyframes cn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}
.cn-freshness-time { font-weight: 500; color: var(--cn-text); }
.cn-freshness-debug {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .76rem;
	background: var(--cn-bg);
	padding: 1px 8px;
	border-radius: 4px;
}
.cn-freshness-refresh {
	font-weight: 600;
	margin-left: auto;
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--cn-border);
	color: var(--cn-accent);
	border-radius: 999px;
	padding: 3px 11px;
	font-size: .78rem;
	cursor: pointer;
	font-family: inherit;
}
.cn-freshness-refresh:hover {
	background: var(--cn-accent-bg);
	border-color: var(--cn-accent);
	color: var(--cn-accent-2);
}
@media (max-width: 480px) {
	.cn-freshness { font-size: .76rem; padding: .5rem .7rem; gap: .3rem .55rem; }
	.cn-freshness-debug { font-size: .7rem; }
	.cn-freshness-refresh { margin-left: 0; }
}

.cn-intro {
	background: linear-gradient(135deg, #0b5fff, #2c7bff);
	color: #fff;
	border-radius: var(--cn-radius);
	padding: 2.2rem 2.3rem;
	margin-bottom: 2.5rem;
	box-shadow: var(--cn-shadow-lg);
	position: relative;
	overflow: hidden;
}
.cn-intro::before {
	content: "";
	position: absolute;
	right: -60px; top: -60px;
	width: 240px; height: 240px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
}
.cn-intro h1 {
	margin: 0 0 .6rem;
	font-size: 1.75rem;
	font-weight: 700;
	position: relative;
}
.cn-intro p {
	margin: 0;
	color: rgba(255,255,255,.92);
	max-width: 62ch;
	font-size: 1.02rem;
	position: relative;
}

.cn-archive-header { margin-bottom: 1.8rem; }
.cn-archive-header h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 700; }
.cn-archive-desc { color: var(--cn-muted); margin: 0; }

/* ---------- Hero briefing (vandaag, homepage) ---------- */
.cn-hero-briefing {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 2rem 2.2rem;
	margin-bottom: 2.5rem;
	box-shadow: var(--cn-shadow-lg);
	border-left: 5px solid #8a93a3;
}
.cn-hero-briefing.severity-kritiek     { border-left-color: #b42318; }
.cn-hero-briefing.severity-hoog        { border-left-color: #d9480f; }
.cn-hero-briefing.severity-middel      { border-left-color: #b08800; }
.cn-hero-briefing.severity-laag        { border-left-color: #4a6a2d; }
.cn-hero-briefing.severity-informatief { border-left-color: #4a5260; }

.cn-hero-top {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .8rem;
}
.cn-hero-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cn-hero-title {
	margin: 0 0 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.015em;
}
.cn-hero-title a {
	color: var(--cn-text);
	text-decoration: none;
}
.cn-hero-title a:hover {
	color: var(--cn-accent);
	text-decoration: none;
}
.cn-hero-exec p {
	margin: 0 0 1.3rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--cn-text);
}
.cn-hero-highlights {
	background: #f7f9fc;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
}
.cn-hero-highlights-label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cn-muted);
	margin-bottom: .5rem;
}
.cn-hero-highlights ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-hero-highlights li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem 0;
	border-bottom: 1px solid var(--cn-border);
	font-size: .95rem;
}
.cn-hero-highlights li:last-child { border-bottom: none; }
.cn-hero-highlight-title {
	color: var(--cn-text);
	font-weight: 500;
}
.cn-hero-cta {
	margin: 0;
}
.cn-hero-cta a {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: .65rem 1.3rem;
	border-radius: var(--cn-radius);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.cn-hero-cta a:hover {
	background: var(--cn-accent-2);
	text-decoration: none;
}

@media (max-width: 640px) {
	.cn-hero-briefing { padding: 1.4rem 1.3rem; }
	.cn-hero-title { font-size: 1.35rem; }
	.cn-hero-exec p { font-size: 1rem; }
}

/* ---------- Vorige briefings heading ---------- */
.cn-past-briefings {
	margin-top: 2rem;
}
.cn-past-heading {
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cn-muted);
	margin: 0 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--cn-border);
}

/* Nieuwslijst-title kan nu ook een tease-regel bevatten */
.cn-newslist-tease {
	display: block;
	font-size: .78rem;
	font-weight: 400;
	color: var(--cn-muted);
	margin-top: 2px;
	line-height: 1.35;
}

/* ---------- Nieuwslijst (compact, Security.nl-stijl) ---------- */
.cn-newslist {
	margin: 0 auto;
	max-width: var(--cn-list-maxw);
}

.cn-newslist-date {
	font-size: .78rem;
	font-weight: 600;
	color: var(--cn-muted);
	margin: 1rem 0 .2rem;
	padding: 0 .25rem .1rem;
	text-transform: lowercase;
}
.cn-newslist-date:first-child { margin-top: 0; }

.cn-newslist-items {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* DESKTOP: extra compact — Security.nl-density. Mobiele media query (640px)
   onderaan blijft ruim voor tap-targets. */
.cn-newslist-item {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .1rem .7rem .1rem .55rem;
	border-left: 2px solid #e6eaf0;
	transition: background .1s ease;
	font-size: .82rem;
	line-height: 1.25;
}
/* Alternerende rijen — subtiel ritme zonder visuele drukte */
.cn-newslist-item:nth-child(even) { background: #fafbfd; }
.cn-newslist-item:hover { background: #eef3fa; }

/* Sector-borders weggehaald: dubbel-codering met KRITIEK/HOOG-badges
   creëerde visuele drukte. Alle items krijgen nu één neutrale linker-rand.
   Sector-context blijft beschikbaar via filter-pills + sector-tag. */
.cn-newslist-item.sector-zorg,
.cn-newslist-item.sector-overheid,
.cn-newslist-item.sector-financieel,
.cn-newslist-item.sector-onderwijs,
.cn-newslist-item.sector-industrie,
.cn-newslist-item.sector-algemeen { border-left-color: #e6eaf0; }

.cn-newslist-time {
	color: var(--cn-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cn-newslist-title {
	color: var(--cn-text);
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.25;
	text-decoration: none;
	min-width: 0;
	/* Single-line truncate: alle rijen worden ~gelijke hoogte. */
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: color .12s ease;
}
.cn-newslist-title:hover,
.cn-newslist-title:focus-visible {
	color: var(--cn-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-newslist-meta {
	display: flex;
	gap: .3rem;
	align-items: center;
	flex-shrink: 0;
	color: var(--cn-muted);
}

.cn-newslist-source {
	font-size: .65rem;
	color: var(--cn-muted);
	white-space: nowrap;
	font-weight: 400;
	font-style: italic;
	opacity: .65;
}

/* Sector-badges in de lijst verbergen: de gekleurde left-border
   toont de sector al. Rustiger beeld. Wel beschikbaar als screenreader-tekst. */
.cn-newslist-meta .cn-tag {
	display: none;
}

/* Mobile: app-feel — full-width edge-to-edge, geen bron-label voor minder
   noise, alleen tijd + titel. Titel mag tot 2 regels wrappen met ellipsis. */
@media (max-width: 640px) {
	/* Container full-width, geen rounded corners, geen side-padding */
	.cn-newslist { max-width: 100%; margin: 0; }
	.cn-newslist-items {
		border-radius: 0;
		border-left: none;
		border-right: none;
		box-shadow: none;
	}
	/* Date-header iets dichter naar links */
	.cn-newslist-date {
		padding: .25rem .9rem .15rem;
		margin: 1rem 0 .15rem;
	}

	.cn-newslist-item {
		grid-template-columns: 42px 1fr;
		grid-template-rows: auto;
		gap: .1rem .55rem;
		padding: .5rem .9rem .5rem .7rem;
	}
	.cn-newslist-title {
		font-size: .95rem;
		font-weight: 500;
		line-height: 1.3;
		color: var(--cn-text);
		/* Laat titel wrappen tot 2 regels, daarna ellipsis */
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.cn-newslist-time {
		font-size: .72rem;
		color: var(--cn-muted);
	}
	/* Bron-label verbergen op mobiel — minder clutter, app-feel */
	.cn-newslist-source { display: none; }
	.cn-newslist-meta { display: none; }
}

/* Kleine extra: ook op mobiel het main-padding en de hero-blokken
   full-width maken zodat alles aan elkaar plakt zoals in een app.
   Specifieker selector om .cn-container 1rem-padding te beat'en op <main>. */
@media (max-width: 640px) {
	main.cn-main.cn-container {
		padding: .5rem 0 1.5rem;
		max-width: 100%;
	}
	.cn-today, .cn-upcoming {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
		border-left: 3px solid var(--cn-accent);
		border-right: none;
	}
	.cn-today.is-priority { border-left-color: #b42318; }
	.cn-upcoming { border-left-color: #0b5fff; }
}

/* ============================================================
   MOBIELE HEADER — compacte app-balk
   ============================================================
   Eén horizontale 48px-balk: klein logo + zoekveld + CVE-icoon + mail-icoon.
   Tagline verbergen, sector-filter daaronder horizontaal scrollbaar als
   tab-balk. Geen rondingen, geen schaduwen — strakke app-look. */
@media (max-width: 640px) {
	.cn-site-header {
		box-shadow: 0 1px 0 var(--cn-border);
		border-bottom: none;
	}
	.cn-container.cn-header-inner {
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		align-items: center;
		gap: .5rem;
		padding: .35rem .6rem;
		flex-wrap: nowrap;
	}
	/* Brand: alleen titel, kleiner, tagline verbergen */
	.cn-brand strong {
		font-size: .92rem;
		font-weight: 700;
		letter-spacing: -.01em;
	}
	.cn-brand strong::before {
		width: 6px; height: 6px;
		margin-right: .35rem;
		box-shadow: 0 0 0 1.5px rgba(11,95,255,.18);
	}
	.cn-tag-line { display: none; }

	/* Zoekveld: compact, vult resterende ruimte */
	.cn-search {
		margin: 0;
		flex: 1 1 auto;
		min-width: 0;
	}
	.cn-search input[type="search"] {
		width: 100%;
		padding: .35rem .65rem;
		font-size: .78rem;
		border-radius: 999px 0 0 999px;
		background: #f1f4f9;
		border-color: transparent;
	}
	.cn-search input[type="search"]:focus {
		background: #fff;
		border-color: var(--cn-accent);
	}
	.cn-search button {
		padding: .35rem .55rem;
		border-radius: 0 999px 999px 0;
	}
	.cn-search button svg { width: 12px; height: 12px; }

	/* CVE als compacte pill (tekst-zichtbaar), mail als icon-cirkel */
	.cn-cve-btn {
		height: 32px;
		padding: 0 .75rem;
		margin-left: 0;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .02em;
		border-radius: 999px;
		background: #f1f4f9;
		border-color: transparent;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.cn-newsletter-btn {
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 50%;
		background: #f1f4f9;
		border-color: transparent;
		flex-shrink: 0;
	}
	.cn-newsletter-btn svg { width: 16px; height: 16px; }

	/* Sector-filter als app-tabs: horizontaal scrollbaar, geen wrap */
	.cn-filter {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: .35rem;
		padding: .35rem .6rem .45rem;
		border-top: 1px solid var(--cn-border);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.cn-filter::-webkit-scrollbar { display: none; }
	.cn-filter-label {
		display: none; /* "Sector:" label weg op mobiel — context is duidelijk */
	}
	.cn-filter-item {
		flex-shrink: 0;
		font-size: .75rem;
		padding: .25rem .7rem;
		border-radius: 999px;
		font-weight: 500;
	}
}

/* Voor smalle tablets (640-900px) ook iets meer ruimte: 2 regels max */
@media (min-width: 641px) and (max-width: 900px) {
	.cn-newslist-title {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* Voor smalle tablets (640-900px) ook iets meer ruimte: 2 regels max */
@media (min-width: 641px) and (max-width: 900px) {
	.cn-newslist-title {
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* ---------- Hero (laatste nieuws) ---------- */
.cn-hero {
	background: linear-gradient(135deg, #0b5fff 0%, #2c7bff 60%, #4b8dff 100%);
	color: #fff;
	border-radius: var(--cn-radius);
	padding: 2.5rem 2.5rem 2.2rem;
	margin-bottom: 2rem;
	box-shadow: var(--cn-shadow-lg);
	position: relative;
	overflow: hidden;
}
.cn-hero::before {
	content: "";
	position: absolute;
	right: -80px; top: -80px;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
}
.cn-hero::after {
	content: "";
	position: absolute;
	right: 40px; bottom: -60px;
	width: 180px; height: 180px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
}
.cn-hero > * { position: relative; }
.cn-hero-label {
	display: inline-block;
	background: rgba(255,255,255,.22);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	backdrop-filter: blur(4px);
}
.cn-hero-title {
	font-size: 2.1rem;
	line-height: 1.2;
	margin: 0 0 .7rem;
	font-weight: 700;
	max-width: 22ch;
}
.cn-hero-title a {
	color: #fff;
	text-decoration: none;
}
.cn-hero-title a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.cn-hero-excerpt {
	font-size: 1.05rem;
	color: rgba(255,255,255,.93);
	max-width: 65ch;
	margin-bottom: 1rem;
	line-height: 1.55;
}
.cn-hero .cn-meta,
.cn-hero .cn-meta a,
.cn-hero .cn-meta time {
	color: rgba(255,255,255,.82);
}
.cn-hero .cn-meta a:hover { color: #fff; }
.cn-hero .cn-tag {
	background: rgba(255,255,255,.22);
	color: #fff;
	border-color: rgba(255,255,255,.3);
}
.cn-hero .cn-read-more {
	display: inline-block;
	color: #fff;
	font-weight: 700;
	padding: .5rem 1.1rem;
	background: rgba(255,255,255,.18);
	border-radius: var(--cn-radius);
	border: 1px solid rgba(255,255,255,.3);
	margin-top: .5rem;
}
.cn-hero .cn-read-more:hover {
	background: #fff;
	color: var(--cn-accent);
	text-decoration: none;
}
.cn-hero .cn-sep { color: rgba(255,255,255,.5); }

.cn-empty {
	background: var(--cn-surface);
	border: 1px dashed var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 3rem 2rem;
	text-align: center;
	color: var(--cn-muted);
}
.cn-empty h2 { margin: 0 0 .5rem; color: var(--cn-text); }
.cn-empty p { margin: 0; }

/* ---------- Cards ---------- */
.cn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}
.cn-card {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.35rem 1.4rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	box-shadow: var(--cn-shadow);
	transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.cn-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cn-shadow-lg);
	border-color: #c9d2e0;
}
.cn-card-title { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.cn-card-title a { color: var(--cn-text); }
.cn-card-title a:hover { color: var(--cn-accent); text-decoration: none; }

.cn-card-excerpt {
	color: var(--cn-muted);
	font-size: .94rem;
	flex: 1 1 auto;
	margin: 0;
}
.cn-card-excerpt p { margin: 0; }

.cn-read-more {
	font-weight: 600;
	font-size: .92rem;
}

/* ---------- Meta ---------- */
.cn-meta {
	margin: 0;
	font-size: .81rem;
	color: var(--cn-muted);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .55rem;
	align-items: center;
}
.cn-meta a { color: var(--cn-muted); }
.cn-meta a:hover { color: var(--cn-accent); text-decoration: none; }
.cn-sep { opacity: .4; }

.cn-tag {
	display: inline-block;
	padding: 2px 9px;
	font-size: .72rem;
	font-weight: 600;
	border-radius: 4px;
	background: var(--cn-accent-bg);
	color: var(--cn-accent);
	text-decoration: none;
	border: 1px solid transparent;
	letter-spacing: .01em;
}
.cn-tag:hover { text-decoration: none; border-color: currentColor; }

/* Sector-tag-kleuren: alle pills in filter-balk krijgen één neutrale stijl.
   Alleen de actieve sector is gehighlight (via .is-active in basis-filter).
   Geeft visuele rust — labels zeggen al wat de sector is. */
.cn-tag-zorg,
.cn-tag-overheid,
.cn-tag-financieel,
.cn-tag-onderwijs,
.cn-tag-industrie,
.cn-tag-algemeen { background: var(--cn-surface); color: var(--cn-text); }
/* Article-page sector-pill blijft gekleurd voor hi-fi context (eenmalig
   per pagina, niet meervoudig naast elkaar in een rij). */
.cn-single .cn-tag-zorg        { background: #ffe8ea; color: #b42318; }
.cn-single .cn-tag-overheid    { background: #e0ecff; color: #0b4a9e; }
.cn-single .cn-tag-financieel  { background: #e4f7eb; color: #1f8a4c; }
.cn-single .cn-tag-onderwijs   { background: #fff2d6; color: #a15c07; }
.cn-single .cn-tag-industrie   { background: #ede7ff; color: #5b35c2; }
.cn-single .cn-tag-algemeen    { background: #e6eaf0; color: #3a4250; }

/* ---------- Single (samenvatting-pagina) ---------- */
.cn-single {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 2.3rem 2.3rem;
	max-width: 760px;
	margin: 0 auto;
	box-shadow: var(--cn-shadow);
	border-left: 4px solid #e6eaf0;
}
.cn-single.sector-zorg       { border-left-color: #b42318; }
.cn-single.sector-overheid   { border-left-color: #0b4a9e; }
.cn-single.sector-financieel { border-left-color: #1f8a4c; }
.cn-single.sector-onderwijs  { border-left-color: #a15c07; }
.cn-single.sector-industrie  { border-left-color: #5b35c2; }
.cn-single.sector-algemeen   { border-left-color: #8a93a3; }

.cn-single-back {
	margin: 0 0 1rem;
	font-size: .88rem;
}
.cn-single-back a {
	color: var(--cn-muted);
	text-decoration: none;
}
.cn-single-back a:hover { color: var(--cn-accent); text-decoration: underline; }

.cn-single-title { margin: 0 0 .6rem; font-size: 1.85rem; font-weight: 700; line-height: 1.22; letter-spacing: -.015em; }
.cn-single-thumb { margin: 1.5rem 0; border-radius: var(--cn-radius); overflow: hidden; }

.cn-single-summary {
	font-size: 1.04rem;
	margin: 1.5rem 0;
	color: var(--cn-text);
}
.cn-single-summary p { margin: 0 0 1rem; }
.cn-single-summary p:last-child { margin-bottom: 0; }

.cn-summary-attribution {
	font-size: .8rem !important;
	color: var(--cn-muted);
	border-top: 1px solid var(--cn-border);
	padding-top: .75rem;
	margin-top: 1.5rem !important;
}

/* ---------- Daily Briefing (management samenvatting per sector per dag) ---------- */
.cn-daily-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--cn-border);
}
.cn-daily-kicker {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .75rem;
}
.cn-daily-title {
	margin: 0 0 .4rem;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
}
.cn-daily-date {
	margin: 0;
	color: var(--cn-muted);
	font-size: .95rem;
	text-transform: capitalize;
}

/* Executive summary — hero-achtig, management tone */
.cn-daily-exec {
	background: linear-gradient(135deg, #f8fafd 0%, #eef3fb 100%);
	border: 1px solid #d9e2ee;
	border-radius: var(--cn-radius);
	padding: 1.8rem 2rem;
	margin-bottom: 2rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-exec h2 {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--cn-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cn-daily-exec p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--cn-text);
}

/* Highlights lijst */
.cn-daily-highlights {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-highlights h2,
.cn-daily-actions h2,
.cn-daily-trend h2 {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-highlights-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: highlight;
}
.cn-highlight {
	counter-increment: highlight;
	border-left: 3px solid #e6eaf0;
	padding: .85rem 0 .85rem 1.25rem;
	margin-bottom: .5rem;
	position: relative;
}
.cn-highlight::before {
	content: counter(highlight);
	position: absolute;
	left: -12px;
	top: 1rem;
	width: 22px;
	height: 22px;
	background: #fff;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: .72rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: var(--cn-muted);
}
.cn-highlight:last-child { margin-bottom: 0; }

.cn-highlight.severity-kritiek     { border-left-color: #b42318; color: #b42318; }
.cn-highlight.severity-hoog        { border-left-color: #d9480f; color: #d9480f; }
.cn-highlight.severity-middel      { border-left-color: #b08800; color: #b08800; }
.cn-highlight.severity-laag        { border-left-color: #4a6a2d; color: #4a6a2d; }
.cn-highlight.severity-informatief { border-left-color: #4a5260; color: #4a5260; }

.cn-highlight-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	margin-bottom: .4rem;
}
.cn-highlight-title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--cn-text);
	line-height: 1.3;
	flex: 1 1 auto;
	min-width: 0;
}
.cn-highlight-what {
	margin: 0 0 .5rem;
	color: var(--cn-text);
	font-size: .98rem;
	line-height: 1.5;
}
.cn-highlight-action {
	margin: 0;
	padding: .55rem .8rem;
	background: #f0f5ff;
	border-left: 3px solid var(--cn-accent);
	border-radius: 4px;
	font-size: .94rem;
	color: var(--cn-text);
}
.cn-action-label {
	font-weight: 700;
	color: var(--cn-accent);
	margin-right: .3rem;
}

/* Business impact + Compliance grid per highlight */
.cn-highlight-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin-bottom: .6rem;
}
.cn-highlight-meta {
	padding: .55rem .7rem;
	border-radius: 4px;
	font-size: .88rem;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.cn-meta-impact {
	background: #fff8e6;
	border: 1px solid #f0d89b;
}
.cn-meta-compliance {
	background: #f3ebff;
	border: 1px solid #d9c0f5;
}
.cn-meta-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
}
.cn-meta-body { color: var(--cn-text); }

@media (max-width: 640px) {
	.cn-highlight-meta-grid { grid-template-columns: 1fr; }
}

/* Board talking points */
.cn-daily-board {
	background: #fdf6e8;
	border: 2px solid #e6c876;
	border-radius: var(--cn-radius);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--cn-shadow);
}
.cn-daily-board h2 {
	margin: 0 0 .75rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a5a00;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-board-list li {
	position: relative;
	padding: .6rem 0 .6rem 1.8rem;
	border-bottom: 1px solid rgba(230, 200, 118, .4);
	color: #3a2e10;
	font-size: 1rem;
	line-height: 1.5;
}
.cn-board-list li:last-child { border-bottom: none; }
.cn-board-list li::before {
	content: "▸";
	position: absolute;
	left: .3rem;
	top: .55rem;
	color: #8a5a00;
	font-weight: 700;
	font-size: 1.1rem;
}

/* Peer context */
.cn-daily-peer {
	background: #eef7fd;
	border: 1px solid #b8dcf0;
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.5rem;
}
.cn-daily-peer h2 {
	margin: 0 0 .6rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #0b4a9e;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-daily-peer p {
	margin: 0;
	color: #1a3558;
	font-size: 1rem;
	line-height: 1.55;
}

/* Weekly actions */
.cn-daily-actions {
	background: #f1faf4;
	border: 1px solid #c0e4ce;
	border-radius: var(--cn-radius);
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.5rem;
}

/* Trend */
.cn-daily-trend {
	background: #faf7ff;
	border: 1px solid #ddd0f5;
	border-radius: var(--cn-radius);
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.5rem;
}
.cn-daily-trend p {
	margin: 0;
	font-size: 1.02rem;
	font-style: italic;
	color: #4a3a7a;
	line-height: 1.55;
}

@media (max-width: 640px) {
	.cn-daily-title { font-size: 1.45rem; }
	.cn-daily-exec { padding: 1.3rem 1.3rem; }
	.cn-daily-exec p { font-size: 1rem; }
	.cn-daily-highlights { padding: 1.1rem 1.2rem; }
	.cn-highlight { padding-left: 1rem; }
	.cn-highlight::before { left: -10px; width: 18px; height: 18px; font-size: .68rem; line-height: 14px; }
}

/* ---------- AI Briefing (legacy per-item, fallback) ---------- */
.cn-briefing {
	margin: 1.5rem 0;
}

.cn-briefing-section {
	background: #fafbfd;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.3rem;
	margin-bottom: 1rem;
}
.cn-briefing-section h2 {
	margin: 0 0 .6rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--cn-muted);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.cn-briefing-ico {
	font-size: 1.15rem;
	line-height: 1;
}
.cn-briefing-section p {
	margin: 0;
	font-size: 1.04rem;
	line-height: 1.55;
	color: var(--cn-text);
}

/* Accent per sectie */
.cn-briefing-what {
	background: #fff8f5;
	border-color: #ffd7c5;
}
.cn-briefing-relevance {
	background: #f3f7ff;
	border-color: #cde0ff;
}
.cn-briefing-actions {
	background: #f1faf4;
	border-color: #c0e4ce;
}
.cn-briefing-context {
	background: #faf7ff;
	border-color: #ddd0f5;
}
.cn-briefing-context p {
	font-style: italic;
	color: #4a3a7a;
}
.cn-briefing-sources {
	background: #f7f9fc;
	border-color: #d4dbe6;
}
.cn-source-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.cn-source-list li { margin: 0; }
.cn-source-list a {
	display: inline-block;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 4px;
	font-size: .85rem;
	color: var(--cn-accent);
	text-decoration: none;
	font-family: var(--cn-mono, ui-monospace, Menlo, monospace);
}
.cn-source-list a:hover {
	border-color: var(--cn-accent);
	background: var(--cn-accent-bg);
}

/* Relevance-grid (tech / sectoren / urgentie) */
.cn-briefing-grid {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: .6rem 1rem;
	margin: 0;
}
.cn-briefing-grid dt {
	font-size: .82rem;
	font-weight: 600;
	color: var(--cn-muted);
	padding-top: .25rem;
}
.cn-briefing-grid dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.cn-chip {
	display: inline-block;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid var(--cn-border);
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 500;
	color: var(--cn-text);
}
.cn-chip-tech {
	font-family: var(--cn-mono, ui-monospace, Menlo, monospace);
	background: #f5f7fb;
	border-color: #d4dbe6;
}
.cn-chip-sector {
	background: var(--cn-accent-bg);
	color: var(--cn-accent-2);
	border-color: rgba(11, 95, 255, .25);
}

/* Severity-badges */
.cn-severity {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cn-severity-kritiek     { background: #b42318; color: #fff; }
.cn-severity-hoog        { background: #d9480f; color: #fff; }
.cn-severity-middel      { background: #b08800; color: #fff; }
.cn-severity-laag        { background: #4a6a2d; color: #fff; }
.cn-severity-informatief { background: #4a5260; color: #fff; }

/* Actie-lijst */
.cn-action-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-action-list li {
	position: relative;
	padding: .55rem 0 .55rem 2rem;
	border-bottom: 1px solid rgba(192, 228, 206, .5);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--cn-text);
}
.cn-action-list li:last-child { border-bottom: none; }
.cn-action-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85rem;
	width: 18px;
	height: 18px;
	border: 2px solid #1f8a4c;
	border-radius: 4px;
	background: #fff;
}
.cn-action-list li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: .95rem;
	width: 10px;
	height: 6px;
	border-left: 2px solid #1f8a4c;
	border-bottom: 2px solid #1f8a4c;
	transform: rotate(-45deg);
	opacity: .65;
}

/* Severity als top-banner op single-pagina */
.cn-single.severity-kritiek { border-top: 4px solid #b42318; padding-top: 2rem; }
.cn-single.severity-hoog    { border-top: 4px solid #d9480f; padding-top: 2rem; }

@media (max-width: 640px) {
	.cn-briefing-section { padding: 1rem 1.1rem; }
	.cn-briefing-grid {
		grid-template-columns: 1fr;
		gap: .3rem;
	}
	.cn-briefing-grid dt { padding-top: .5rem; }
}

/* Call-to-action naar originele bron */
.cn-source-cta {
	margin-top: 2rem;
	padding: 1.3rem 1.4rem;
	background: var(--cn-accent-bg);
	border: 1px solid rgba(11, 95, 255, .2);
	border-radius: var(--cn-radius);
	text-align: center;
}
.cn-source-cta-label {
	margin: 0 0 .75rem;
	font-size: .88rem;
	color: var(--cn-muted);
}
.cn-source-cta-btn {
	display: inline-block;
	background: var(--cn-accent);
	color: #fff;
	padding: .7rem 1.4rem;
	border-radius: var(--cn-radius);
	font-weight: 600;
	font-size: .98rem;
	text-decoration: none;
	transition: background .12s ease, transform .1s ease;
}
.cn-source-cta-btn:hover,
.cn-source-cta-btn:focus-visible {
	background: var(--cn-accent-2);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

@media (max-width: 640px) {
	.cn-single { padding: 1.5rem 1.25rem; }
	.cn-single-title { font-size: 1.4rem; }
	.cn-source-cta { padding: 1.1rem 1rem; }
	.cn-source-cta-btn { padding: .65rem 1.1rem; font-size: .92rem; }
}

/* ---------- Frameworks ---------- */
.cn-lead { color: var(--cn-muted); font-size: 1.05rem; }

.cn-frameworks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.cn-framework {
	background: var(--cn-surface);
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	padding: 1.2rem 1.3rem;
	box-shadow: var(--cn-shadow);
	transition: transform .12s ease, box-shadow .15s ease;
}
.cn-framework:hover { transform: translateY(-2px); box-shadow: var(--cn-shadow-lg); }
.cn-framework h3 {
	margin: 0 0 .6rem;
	font-size: 1.12rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-wrap: wrap;
}
.cn-scope {
	font-size: .68rem;
	font-weight: 700;
	background: var(--cn-accent-bg);
	color: var(--cn-accent);
	padding: 2px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cn-framework p { margin: 0 0 .5rem; color: var(--cn-muted); font-size: .93rem; }
.cn-framework p:last-child { margin-bottom: 0; }
.cn-framework a { font-weight: 600; }

/* ---------- Pagination ---------- */
.cn-pagination { margin: 3rem 0 0; display: flex; justify-content: center; }
.cn-pagination .page-numbers {
	display: inline-block;
	padding: .45rem .85rem;
	margin: 0 .2rem;
	border: 1px solid var(--cn-border);
	border-radius: var(--cn-radius);
	background: var(--cn-surface);
	color: var(--cn-text);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
}
.cn-pagination .page-numbers:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-pagination .page-numbers.current {
	background: var(--cn-accent);
	color: #fff;
	border-color: var(--cn-accent);
}

/* ---------- Footer ---------- */
.cn-site-footer {
	background: var(--cn-surface);
	border-top: 1px solid var(--cn-border);
	padding: 1.8rem 0;
	margin-top: 4rem;
	color: var(--cn-muted);
	font-size: .88rem;
}
.cn-site-footer p { margin: 0 0 .5rem; }
.cn-menu-footer { margin-top: .5rem; gap: 1.25rem; display: flex; flex-wrap: wrap; }

/* ---------- Mobile (≤720px) ---------- */
@media (max-width: 720px) {
	body { font-size: 15.5px; line-height: 1.55; }

	/* Container met iets minder padding maar wel ademruimte */
	.cn-container { padding: 0 1rem; }

	/* ===== Header: brand top + search eronder full-width op mobiel ===== */
	.cn-site-header {
		position: static;
		box-shadow: 0 1px 0 var(--cn-border), 0 2px 8px rgba(16,24,40,.04);
	}
	.cn-header-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: .5rem .75rem;
		padding: .7rem 0 .55rem;
	}

	/* Brand: gecentreerd, blauwe stip + naam */
	.cn-brand {
		flex: 0 0 auto;
		text-align: center;
		width: 100%;
	}
	.cn-brand a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.cn-brand strong {
		font-size: 1.15rem;
		font-weight: 700;
		letter-spacing: -0.015em;
		white-space: nowrap;
	}
	.cn-brand strong::before {
		width: 7px; height: 7px;
		margin-right: .5rem;
		box-shadow: 0 0 0 2px rgba(11,95,255,.18);
	}
	.cn-tag-line { display: none; }

	/* Nav volledig verbergen op mobiel */
	.cn-nav { display: none; }

	/* Search: volledig breed onder de brand, envelope-button rechts ernaast */
	.cn-search {
		margin-left: 0;
		flex: 1 1 auto;
	}
	.cn-search input[type="search"] { width: 100%; }
	.cn-newsletter-btn {
		width: 36px;
		height: 36px;
		margin-left: .35rem;
	}

	/* Sector-filter: horizontaal scrollbaar i.p.v. wrappen */
	.cn-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding: .6rem .25rem .75rem;
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		scrollbar-width: none;
	}
	.cn-filter::-webkit-scrollbar { display: none; }
	.cn-filter-label { flex-shrink: 0; }
	.cn-filter-item {
		flex-shrink: 0;
		scroll-snap-align: start;
		padding: .35rem .85rem;
		font-size: .82rem;
	}

	/* Main: tighter padding maar geen claustrofobie */
	.cn-main { padding: 1.25rem 1rem 2rem; }

	/* Intro hero: kleinere padding + decoratieve cirkel kleiner zodat niets afloopt */
	.cn-intro { padding: 1.5rem 1.3rem; margin-bottom: 1.75rem; border-radius: 10px; }
	.cn-intro h1 { font-size: 1.4rem; }
	.cn-intro p { font-size: .98rem; }
	.cn-intro::before { width: 160px; height: 160px; right: -50px; top: -50px; }

	/* Hero (laatste nieuws blauwe blok) */
	.cn-hero { padding: 1.6rem 1.4rem 1.4rem; border-radius: 10px; margin-bottom: 1.5rem; }
	.cn-hero::before { width: 180px; height: 180px; right: -60px; top: -60px; }
	.cn-hero::after { display: none; }
	.cn-hero-title { font-size: 1.45rem; max-width: none; }
	.cn-hero-excerpt { font-size: .98rem; line-height: 1.5; }
	.cn-hero .cn-read-more { display: block; text-align: center; }

	/* Hero briefing (homepage) */
	.cn-hero-briefing { padding: 1.4rem 1.3rem; border-radius: 10px; }
	.cn-hero-title { font-size: 1.35rem; }
	.cn-hero-exec p { font-size: 1rem; }
	.cn-hero-cta a { display: block; text-align: center; padding: .8rem 1rem; }

	/* Archive header (h1 "Sector: Zorg (NEN 7510)"): compacter op mobiel —
	   de actieve sector-pill bovenaan is al de visuele indicator. H1 blijft
	   in HTML voor SEO en screen readers. */
	.cn-archive-header { margin-bottom: 1rem; }
	.cn-archive-header h1 { font-size: 1.2rem; margin: 0 0 .25rem; }
	.cn-archive-desc { font-size: .9rem; }

	/* Newslist: grotere tap-targets, betere leesbaarheid */
	.cn-newslist-date { font-size: .88rem; margin: 1.5rem 0 .4rem; }
	.cn-newslist-items { border-radius: 10px; }
	.cn-newslist-item {
		grid-template-columns: 44px 1fr;
		grid-template-rows: auto auto;
		gap: .15rem .55rem;
		padding: .7rem .85rem .7rem .65rem;
		min-height: 56px;
		align-items: start;
	}
	.cn-newslist-time {
		font-size: .8rem;
		padding-top: .15rem;
	}
	.cn-newslist-title {
		font-size: .95rem;
		line-height: 1.4;
		grid-column: 2;
		grid-row: 1;
	}
	.cn-newslist-meta {
		grid-column: 2;
		grid-row: 2;
		gap: .35rem;
		font-size: .72rem;
	}
	.cn-newslist-source {
		grid-column: 2;
		grid-row: 2;
		font-size: .72rem;
		opacity: .7;
	}

	/* Single page */
	.cn-single { padding: 1.4rem 1.15rem; border-radius: 10px; }
	.cn-single-title { font-size: 1.45rem; }
	.cn-single-summary { font-size: 1rem; }
	.cn-single-summary p { line-height: 1.6; }

	/* Source CTA full-width — duim-vriendelijk */
	.cn-source-cta { padding: 1rem .9rem; margin-top: 1.5rem; }
	.cn-source-cta-btn {
		display: block;
		padding: .85rem 1rem;
		font-size: .98rem;
	}

	/* Daily briefing fine-tuning */
	.cn-daily-title { font-size: 1.4rem; }
	.cn-daily-exec { padding: 1.2rem 1.2rem; }
	.cn-daily-exec p { font-size: .98rem; }
	.cn-daily-highlights { padding: 1rem 1.1rem; border-radius: 10px; }
	.cn-daily-board, .cn-daily-peer, .cn-daily-actions, .cn-daily-trend {
		padding: 1.1rem 1.2rem;
		border-radius: 10px;
	}
	.cn-highlight { padding: .75rem 0 .75rem 1rem; }
	.cn-highlight::before { left: -10px; width: 18px; height: 18px; font-size: .68rem; line-height: 14px; top: .85rem; }
	.cn-highlight-title { font-size: 1rem; }
	.cn-highlight-meta-grid { grid-template-columns: 1fr; gap: .5rem; }

	/* Briefing-grid stapelt */
	.cn-briefing-grid { grid-template-columns: 1fr; gap: .3rem; }
	.cn-briefing-grid dt { padding-top: .5rem; }
	.cn-briefing-section { padding: 1rem 1.1rem; }

	/* Pagination: duim-vriendelijke knoppen */
	.cn-pagination { gap: .35rem; flex-wrap: wrap; margin-top: 2rem; }
	.cn-pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		padding: .5rem .8rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	/* Frameworks-grid: 1 kolom op mobiel */
	.cn-frameworks { grid-template-columns: 1fr; gap: .85rem; }
	.cn-framework { padding: 1.1rem 1.15rem; border-radius: 10px; }

	/* Cards-grid (search e.d.) */
	.cn-grid { grid-template-columns: 1fr; gap: .9rem; }
	.cn-card { padding: 1.1rem 1.15rem; border-radius: 10px; }

	/* Footer */
	.cn-site-footer { padding: 1.4rem 0; margin-top: 2.5rem; font-size: .85rem; }
	.cn-menu-footer { gap: 1rem; }
}

/* ---------- Mobile small (≤480px, iPhone SE / smallere phones) ---------- */
@media (max-width: 480px) {
	.cn-header-inner { padding: .7rem 0; }
	.cn-brand strong { font-size: 1.05rem; }
	.cn-brand strong::before { width: 6px; height: 6px; margin-right: .4rem; }

	.cn-intro { padding: 1.3rem 1.15rem; }
	.cn-intro h1 { font-size: 1.25rem; }

	.cn-hero { padding: 1.4rem 1.2rem 1.2rem; }
	.cn-hero-title { font-size: 1.3rem; }
	.cn-hero-label { padding: 3px 9px; font-size: .68rem; }

	.cn-hero-briefing { padding: 1.2rem 1.1rem; }
	.cn-hero-title { font-size: 1.25rem; }

	.cn-newslist-item {
		grid-template-columns: 40px 1fr;
		padding: .65rem .7rem .65rem .55rem;
	}
	.cn-newslist-title { font-size: .92rem; }

	.cn-archive-header h1 { font-size: 1.1rem; }
	.cn-archive-desc { font-size: .85rem; }

	.cn-single { padding: 1.25rem 1rem; }
	.cn-single-title { font-size: 1.3rem; }

	.cn-daily-title { font-size: 1.25rem; }
}

/* ==========================================================================
   /dag — dagbriefing
   ==========================================================================
   Ontwerpuitgangspunt: dit is een leespagina, geen dashboard. Eén kolom op
   leesbreedte, en verder alleen typografie en witruimte om hierarchie te
   maken. Geen kaders, geen gevulde vlakken, geen kaartjes.

   Waarom zo streng: elke sectie een eigen omhulsel geven leverde vijf
   verschillende containervormen op één pagina op, en dan gaat de lezer naar
   de vormen kijken in plaats van naar de tekst.

   Severity leeft uitsluitend in de mono-code (KRI/HOO/MID), net als op de
   homepage. Kleur zit verder alleen op links en bronverwijzingen.
   ========================================================================== */

.cn-dag {
	max-width: 680px;
	margin: 0 auto;
	padding-bottom: 1rem;
}

/* ---------- Kop ---------- */

.cn-dag-head {
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--cn-border);
}

.cn-dag-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: baseline;
	margin: 0 0 .6rem;
	font-family: var(--cn-mono);
	font-size: .72rem;
	color: var(--cn-muted);
}

.cn-dag-code {
	font-weight: 700;
	color: var(--cn-accent);
}

.cn-dag-title {
	margin: 0 0 .55rem;
	font-size: 1.6rem;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -.01em;
}

.cn-dag-meta,
.cn-dag-flag {
	margin: 0;
	font-family: var(--cn-mono);
	font-size: .72rem;
	color: var(--cn-muted);
}

/* ---------- Secties: één ritme voor alles ---------- */

.cn-dag-block,
.cn-dag-actions,
.cn-dag-sectors,
.cn-dag-archive {
	margin: 0 0 2.4rem;
	padding: 0;
	border: 0;
	background: none;
}

.cn-dag-h2 {
	margin: 0 0 .75rem;
	font-family: var(--cn-mono);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--cn-muted);
}

/* ---------- Samenvatting ---------- */

.cn-dag-summary {
	margin-bottom: 2.4rem;
}

.cn-dag-summary p {
	margin: 0 0 1.05rem;
	font-size: 1.02rem;
	line-height: 1.75;
}

/* ---------- Kernpunten ---------- */

.cn-dag-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-dag-points li {
	position: relative;
	margin-bottom: .6rem;
	padding-left: 1rem;
	line-height: 1.65;
}

.cn-dag-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cn-muted);
}

/* ---------- Sectorduiding: label + tekst, geen vlak ---------- */

.cn-dag-sectors {
	display: grid;
	gap: 1.5rem;
}

.cn-dag-sector h3 {
	margin: 0 0 .4rem;
	font-family: var(--cn-mono);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--cn-muted);
}

.cn-dag-sector p {
	margin: 0 0 .4rem;
	line-height: 1.65;
}

.cn-dag-link {
	font-size: .82rem;
}

/* ---------- Risico's ---------- */

.cn-dag-risks-intro {
	margin: 0 0 1.1rem;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--cn-muted);
}

.cn-risk-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-risk {
	padding: .95rem 0;
	border-top: 1px solid var(--cn-border);
}

.cn-risk:last-child {
	border-bottom: 1px solid var(--cn-border);
}

.cn-risk-line {
	margin: 0;
	line-height: 1.65;
}

.cn-risk-line .cn-sev-pill {
	margin-right: .45rem;
}

.cn-risk-when {
	margin: .45rem 0 0;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--cn-muted);
}

.cn-risk-when span {
	font-family: var(--cn-mono);
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-right: .3rem;
}

/* ---------- Acties ---------- */

.cn-dag-actionlist {
	margin: 0;
	padding-left: 1.15rem;
}

.cn-dag-actionlist li {
	margin-bottom: .55rem;
	line-height: 1.6;
}

.cn-dag-actionlist li::marker {
	font-family: var(--cn-mono);
	font-size: .8rem;
	color: var(--cn-muted);
}

/* ---------- Bronverwijzingen in de tekst ----------
   De AI schrijft alleen een nummer; PHP maakt er de link van. Klein
   superscript, geen onderstreping in rust: het mag de leesregel niet
   opknippen, maar moet wel aanklikbaar ogen. */

.cn-cite {
	display: inline-block;
	margin-left: .1em;
	font-family: var(--cn-mono);
	font-size: .64em;
	font-weight: 700;
	line-height: 1;
	vertical-align: super;
	color: var(--cn-accent);
	text-decoration: none;
}

.cn-cite:hover,
.cn-cite:focus-visible {
	text-decoration: underline;
}

.cn-cite + .cn-cite {
	margin-left: .22em;
}

/* ---------- Terugvallijst (alleen zonder AI-briefing) ---------- */

.cn-dag-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-dag-item {
	padding: .6rem 0;
	border-top: 1px solid var(--cn-border);
	line-height: 1.5;
}

.cn-dag-item-title {
	color: var(--cn-text);
}

.cn-dag-item-title:hover {
	color: var(--cn-accent);
}

.cn-dag-item-meta {
	display: block;
	margin-top: .1rem;
	font-family: var(--cn-mono);
	font-size: .7rem;
	color: var(--cn-muted);
}

/* ---------- Eerdere dagen: tekstlinks, geen knoppen ---------- */

.cn-dag-datelist {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-dag-date {
	font-family: var(--cn-mono);
	font-size: .76rem;
	color: var(--cn-muted);
}

.cn-dag-date:hover {
	color: var(--cn-accent);
	text-decoration: none;
}

.cn-dag-date.is-active {
	color: var(--cn-text);
	font-weight: 700;
}

/* ---------- Leeg + voet ---------- */

.cn-dag-empty {
	padding: 2rem 0;
	color: var(--cn-muted);
}

.cn-dag-empty p {
	margin: 0 0 .7rem;
}

.cn-dag-foot {
	padding-top: 1.2rem;
	border-top: 1px solid var(--cn-border);
	font-size: .8rem;
	color: var(--cn-muted);
}

.cn-dag-foot p {
	margin: 0 0 .7rem;
	line-height: 1.6;
}

.cn-btn {
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
}

/* ---------- Admin-werkbalk ----------
   Moet als gereedschap lezen, niet als content. Daarom als enige element op
   de pagina een gestippelde rand: dat onderscheid rechtvaardigt de uitzondering. */

.cn-dag-admin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.5rem;
	padding: .5rem .7rem;
	border: 1px dashed var(--cn-border);
	border-radius: 3px;
	font-size: .78rem;
}

.cn-dag-admin.is-stale {
	border-color: #d9480f;
}

.cn-dag-admin-tag {
	font-family: var(--cn-mono);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--cn-muted);
}

.cn-dag-admin.is-stale .cn-dag-admin-tag {
	color: #d9480f;
}

.cn-dag-admin-msg {
	flex: 1 1 220px;
	color: var(--cn-muted);
	line-height: 1.45;
}

.cn-dag-admin-btn {
	padding: .3rem .7rem;
	border: 1px solid var(--cn-border);
	border-radius: 3px;
	background: #fff;
	color: var(--cn-text);
	font-size: .76rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.cn-dag-admin-btn:hover,
.cn-dag-admin-btn:focus-visible {
	border-color: var(--cn-accent);
	color: var(--cn-accent);
}

@media (min-width: 720px) {
	.cn-dag-sectors {
		grid-template-columns: 1fr 1fr;
		gap: 1.8rem;
	}
}

/* Mobiel: het thema haalt bewust de zijmarge van <main> weg, zodat de
   nieuwsfeed van rand tot rand loopt (die feed-items hebben hun eigen
   padding). Voor een leespagina werkt dat niet: lopende tekst tegen de
   schermrand is onleesbaar. /dag zet daarom zijn eigen marge terug. */
@media (max-width: 640px) {
	.cn-dag {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.cn-dag-head { margin-bottom: 1.5rem; }
	.cn-dag-title { font-size: 1.3rem; }

	.cn-dag-summary p {
		font-size: 1rem;
		line-height: 1.7;
	}

	.cn-dag-summary,
	.cn-dag-block,
	.cn-dag-actions,
	.cn-dag-sectors,
	.cn-dag-archive {
		margin-bottom: 1.9rem;
	}

	/* Datumlijst mag op smal scherm rustig in kolommen breken. */
	.cn-dag-datelist { gap: .35rem .9rem; }
}

@media (max-width: 380px) {
	.cn-dag {
		padding-left: .9rem;
		padding-right: .9rem;
	}
	.cn-dag-title { font-size: 1.18rem; }
}

/* Foutmelding in de adminbalk: volle breedte onder de knop, zodat een lange
   API-melding de balk niet uit elkaar trekt. */
.cn-dag-admin-err {
	flex: 1 0 100%;
	margin-top: .3rem;
	font-family: var(--cn-mono);
	font-size: .7rem;
	line-height: 1.45;
	color: #b42318;
	word-break: break-word;
}