/*
 * Nieuws.nl Redactie — dezelfde eigen Nieuws.nl-vormgeving als /beheer/.
 *
 * Kleuren staan uitsluitend hieronder als tokens (waarden gelijk aan thema
 * blok 1); componenten gebruiken alleen die tokens. Het portaal laadt de
 * themastylesheet bewust niet (de core-editor staat op deze pagina), wel de
 * zelf gehoste letters. Geen externe fonts, iconen of afbeeldingen en geen
 * animatie: menu, knoppen en meldingen reageren direct.
 */

body.nieuws-redactie-shell {
	--nr-bg: #f3f3f1;
	--nr-surface: #ffffff;
	--nr-text: #2f2f2e;
	--nr-text-strong: #161615;
	--nr-muted: #63655e;
	--nr-line: #ddded9;
	--nr-accent: #da0813;
	--nr-accent-dark: #a6060f;
	--nr-accent-wash: #fce9eb;
	--nr-on-accent: #ffffff;
	--nr-link: #01567f;
	--nr-focus: #a6060f;
	--nr-positive: #217a4b;
	--nr-warning: #a35b00;
	--nr-error: var(--nr-accent-dark);
	--nr-positive-soft: color-mix(in srgb, var(--nr-positive) 10%, var(--nr-surface));
	--nr-warning-soft: color-mix(in srgb, var(--nr-warning) 8%, var(--nr-surface));
	--nr-error-soft: var(--nr-accent-wash);
	--nr-f-display: "Inter Tight", "Arial Narrow", sans-serif;
	--nr-f-body: "Inter", "Helvetica Neue", sans-serif;
	margin: 0;
	overflow-x: clip;
	background: var(--nr-bg);
	color: var(--nr-text);
}

.nieuws-redactie {
	min-height: 100vh;
	color: var(--nr-text);
	font: 400 16px/1.55 var(--nr-f-body);
	-webkit-font-smoothing: antialiased;
}

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

:where(.nieuws-redactie) a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.nieuws-redactie :focus-visible {
	outline: 3px solid var(--nr-focus);
	outline-offset: 3px;
}

.nieuws-redactie h1,
.nieuws-redactie h2,
.nieuws-redactie h3,
.nieuws-redactie p {
	margin-top: 0;
}

.nieuws-redactie h1,
.nieuws-redactie h2,
.nieuws-redactie h3 {
	color: var(--nr-text-strong);
	font-family: var(--nr-f-display);
	overflow-wrap: anywhere;
}

.nieuws-redactie h1 {
	margin-bottom: 0.5rem;
	font-size: clamp(1.9rem, 3vw, 2.75rem);
	font-weight: 780;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.nieuws-redactie h2 {
	margin-bottom: 0.35rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

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

.nieuws-redactie input,
.nieuws-redactie textarea,
.nieuws-redactie select,
.nieuws-redactie button {
	font: inherit;
}

.nieuws-redactie input[type="text"],
.nieuws-redactie input[type="email"],
.nieuws-redactie input[type="url"],
.nieuws-redactie input[type="password"],
.nieuws-redactie textarea,
.nieuws-redactie select {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--nr-line);
	border-radius: 5px;
	background: var(--nr-surface);
	color: var(--nr-text);
	padding: 0.72rem 0.8rem;
}

.nieuws-redactie textarea {
	min-height: 7rem;
	resize: vertical;
}

.nieuws-redactie input[type="file"] {
	display: block;
	width: 100%;
	min-height: 48px;
	border: 1px dashed var(--nr-line);
	border-radius: 5px;
	background: var(--nr-bg);
	padding: 1rem;
}

.nr-skip-link {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999999;
	transform: translateY(-180%);
	background: var(--nr-text-strong);
	color: var(--nr-on-accent);
	padding: 0.7rem 1rem;
}

.nr-skip-link:focus {
	transform: translateY(0);
}

/* ---- Kop: het Nieuws.nl-merk is de vaste ingang ------------------------- */

.nr-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
	padding: 16px 32px;
	border-top: 3px solid var(--nr-accent);
	border-bottom: 1px solid var(--nr-line);
	background: var(--nr-surface);
}

.nr-brand {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
	min-height: 44px;
	text-decoration: none;
}

.nr-brand img,
.nr-login-brand img {
	display: block;
	flex: none;
	width: 148px;
	height: auto;
}

.nr-wordmark {
	color: var(--nr-text-strong);
	font: 800 1.6rem/1 var(--nr-f-display);
	letter-spacing: -0.05em;
}

.nr-wordmark b {
	color: var(--nr-accent);
}

.nr-brand-context {
	border-left: 1px solid var(--nr-line);
	padding-left: 24px;
	color: var(--nr-text-strong);
	font: 700 12px/1.4 var(--nr-f-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nr-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 20px;
	min-width: 0;
	font-size: 13px;
}

.nr-account > span {
	max-width: 28ch;
	overflow-wrap: anywhere;
	font-weight: 600;
}

.nr-account a,
.nr-mobile-account a,
.nr-sidebar-note a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-weight: 600;
	text-underline-offset: 4px;
}

.nr-mobile-menu {
	display: none;
}

.nr-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* ---- Werkruimte: rustige zijbalk, inhoud ernaast ------------------------- */

.nr-app {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	min-height: calc(100svh - 80px);
}

.nr-sidebar {
	min-width: 0;
	padding: 32px 16px;
	border-right: 1px solid var(--nr-line);
	background: var(--nr-surface);
}

.nr-label {
	margin: 0 0 12px;
	color: var(--nr-accent-dark);
	font: 700 11px/1.5 var(--nr-f-display);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.nr-sidebar > .nr-label {
	margin: 0 16px 16px;
}

.nr-navigation {
	display: grid;
	gap: 4px;
}

.nr-navigation a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 48px;
	padding: 12px 13px;
	border-inline-start: 3px solid transparent;
	border-radius: 2px;
	color: var(--nr-text);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.nr-navigation a > span {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.nr-navigation a > .nr-icon,
.nr-navigation .nr-nav-arrow {
	color: var(--nr-muted);
}

.nr-navigation .nr-nav-arrow {
	width: 16px;
	height: 16px;
	margin-left: auto;
}

.nr-navigation a[aria-current] {
	border-inline-start-color: var(--nr-accent);
	background: var(--nr-accent-wash);
	color: var(--nr-accent-dark);
	font-weight: 750;
}

.nr-navigation a[aria-current] > .nr-icon,
.nr-navigation a[aria-current] .nr-nav-arrow {
	color: currentColor;
}

.nr-navigation a:active {
	background: var(--nr-bg);
}

@media (hover: hover) and (pointer: fine) {
	.nr-navigation a:hover {
		background: var(--nr-bg);
	}

	.nr-navigation a[aria-current]:hover {
		background: var(--nr-accent-wash);
	}

	.nr-button:hover,
	.nieuws-redactie input[type="submit"]:hover {
		border-color: var(--nr-accent-dark);
		background: var(--nr-accent-dark);
	}

	.nr-button-secondary:hover {
		border-color: var(--nr-text-strong);
		background: var(--nr-surface);
	}

	.nr-button-dark:hover,
	.nr-button-danger:hover {
		border-color: var(--nr-text);
		background: var(--nr-text);
	}

	.nr-article-copy h2 a:hover {
		text-decoration: underline;
	}
}

.nr-sidebar-note {
	margin: 32px 16px 0;
	padding-top: 22px;
	border-top: 1px solid var(--nr-line);
	color: var(--nr-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.nr-sidebar-note strong {
	color: var(--nr-text);
	font: 700 13px/1.4 var(--nr-f-display);
}

.nr-sidebar-note p {
	margin: 8px 0 8px;
}

.nr-main {
	width: 100%;
	max-width: 1440px;
	min-width: 0;
	padding: 32px clamp(24px, 4vw, 56px) 60px;
}

.nr-main:focus {
	outline: none;
}

.nr-crumb {
	margin-bottom: 24px;
	color: var(--nr-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.nr-crumb a {
	color: var(--nr-link);
}

/* ---- Overzicht ---------------------------------------------------------- */

.nr-page-heading,
.nr-editor-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 1.75rem;
}

.nr-page-heading > div,
.nr-editor-heading > div:first-child {
	flex: 1 1 20rem;
	min-width: 0;
}

.nr-page-heading p,
.nr-editor-heading p,
.nr-section-heading p,
.nr-panel > p,
.nr-publicatie-inhoud > p,
.nr-article-copy p,
.nr-field small,
.nr-check small,
.nr-seo-panel summary small,
.nr-empty p {
	color: var(--nr-muted);
}

.nieuws-redactie .nr-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0.5rem;
	color: var(--nr-accent-dark);
	font: 700 0.72rem/1.5 var(--nr-f-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nieuws-redactie .nr-eyebrow::before {
	content: "";
	flex: none;
	width: 24px;
	height: 3px;
	background: var(--nr-accent);
}

.nr-button,
.nieuws-redactie input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: 1px solid var(--nr-accent);
	border-radius: 5px;
	background: var(--nr-accent);
	color: var(--nr-on-accent);
	cursor: pointer;
	padding: 0.7rem 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	touch-action: manipulation;
}

.nr-button:active,
.nieuws-redactie input[type="submit"]:active {
	border-color: var(--nr-accent-dark);
	background: var(--nr-accent-dark);
}

.nr-button-secondary {
	border-color: var(--nr-text-strong);
	background: var(--nr-surface);
	color: var(--nr-text-strong);
}

.nr-button-secondary:active {
	background: var(--nr-bg);
}

.nr-button-dark {
	border-color: var(--nr-text-strong);
	background: var(--nr-text-strong);
}

.nr-button-danger {
	border-color: var(--nr-error);
	background: var(--nr-error);
}

.nr-button:disabled,
.nieuws-redactie input:disabled,
.nieuws-redactie select:disabled {
	cursor: not-allowed;
	opacity: 0.58;
}

.nr-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.25rem;
}

.nr-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--nr-line);
	border-radius: 999px;
	background: var(--nr-surface);
	color: var(--nr-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.nr-filter a[aria-current] {
	border-color: var(--nr-text-strong);
	background: var(--nr-text-strong);
	color: var(--nr-surface);
}

.nr-article-list {
	border-top: 3px solid var(--nr-text-strong);
	border-bottom: 1px solid var(--nr-line);
	background: var(--nr-surface);
}

.nr-article-row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.2rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--nr-line);
}

.nr-article-row:last-child {
	border-bottom: 0;
}

.nr-article-thumb {
	display: grid;
	place-items: center;
	width: 84px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nr-text-strong);
	color: var(--nr-on-accent);
	font: 800 1.4rem/1 var(--nr-f-display);
}

.nr-article-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nr-article-copy {
	min-width: 0;
}

.nr-article-copy h2 {
	margin: 0.4rem 0 0.3rem;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.3;
}

.nr-article-copy h2 a {
	text-decoration: none;
}

.nr-article-copy p {
	margin-bottom: 0;
	font-size: 0.82rem;
}

.nr-status-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.nr-status,
.nr-nova-dot {
	display: inline-flex;
	align-items: center;
	width: max-content;
	max-width: 100%;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.nr-status-draft,
.nr-status-private {
	border-color: var(--nr-line);
	background: var(--nr-surface);
	color: var(--nr-muted);
}

.nr-status-pending,
.nr-status-future {
	background: var(--nr-warning-soft);
	color: var(--nr-warning);
}

.nr-status-publish {
	background: var(--nr-positive-soft);
	color: var(--nr-positive);
}

.nr-nova-dot {
	border-color: var(--nr-line);
	background: var(--nr-surface);
	color: var(--nr-muted);
}

.nr-nova-verrijkt {
	border-color: var(--nr-positive);
	color: var(--nr-positive);
}

.nr-nova-fout,
.nr-nova-controle_nodig {
	border-color: var(--nr-error);
	color: var(--nr-error);
}

.nr-row-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.nr-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0;
}

.nr-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-weight: 700;
}

/* ---- Artikel bewerken --------------------------------------------------- */

.nr-editor-heading h1 {
	margin-top: 0.25rem;
}

.nr-editor-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.nr-editor-meta .nr-status {
	padding: 0.35rem 0.75rem;
	font-size: 0.8rem;
}

.nr-back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-size: 0.9rem;
	font-weight: 600;
}

.nr-jump {
	display: none;
}

.nr-editor-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
	align-items: start;
	gap: 1.2rem;
}

.nr-form-main {
	display: grid;
	gap: 1.2rem;
	min-width: 0;
}

.nr-panel,
.nr-empty,
.nr-login-card {
	border: 1px solid var(--nr-line);
	border-radius: 3px;
	background: var(--nr-surface);
	padding: clamp(1.1rem, 3vw, 2rem);
	overflow-wrap: anywhere;
}

.nr-section-heading {
	display: grid;
	grid-template-columns: 2.1rem minmax(0, 1fr);
	gap: 0.8rem;
	margin-bottom: 1.5rem;
}

.nr-section-heading p {
	margin-bottom: 0;
}

.nieuws-redactie .nr-step {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--nr-accent);
	color: var(--nr-on-accent);
	font-weight: 800;
}

.nr-field {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	min-width: 0;
}

.nr-field > span,
.nr-field > label {
	font-weight: 700;
}

.nr-field b {
	color: var(--nr-accent-dark);
}

.nr-field small,
.nr-check small,
.nr-seo-panel summary small {
	display: block;
	font-size: 0.8rem;
}

.nr-two-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.nr-check {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-bottom: 1rem;
	border: 1px solid var(--nr-line);
	border-radius: 5px;
	background: var(--nr-bg);
	padding: 1rem;
}

.nr-check input {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
	accent-color: var(--nr-accent);
}

.nr-current-image {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.6rem;
	color: var(--nr-muted);
	font-size: 0.8rem;
}

.nr-current-image img {
	width: 120px;
	height: 80px;
	object-fit: cover;
}

.nr-seo-panel {
	padding: 0;
}

.nr-seo-panel summary {
	cursor: pointer;
	padding: 1.2rem 1.5rem;
	list-style-position: outside;
}

.nr-seo-panel summary span {
	display: inline-block;
	margin-left: 0.4rem;
}

.nr-details-body {
	border-top: 1px solid var(--nr-line);
	padding: 1.5rem;
}

/* De zijkolom rekt mee met de rij (frontend-lessen §3); anders is hij zo hoog
   als het paneel en heeft sticky geen ruimte om mee te lopen. */
.nr-editor-aside {
	align-self: stretch;
}

.nr-sticky-panel {
	position: sticky;
	top: 1rem;
}

/* Een sticky paneel dat hoger is dan het venster verstopt zijn onderkant tot het
   einde van het formulier. Daarom is het vanaf 981 pixels nooit hoger dan het
   venster: alleen de inhoud boven de acties schuift, de acties staan eronder,
   buiten die schuifcontainer. Zo kan niets met focus achter de acties vallen.
   Tot 980 pixels staat het paneel gewoon in de stroom. */
@media (min-width: 981px) {
	.nr-sticky-panel {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 2rem);
		max-height: calc(100svh - 2rem);
	}

	/* De schuifcontainer knipt ook af; de extra rand en scroll-padding houden de
	   focusring (3 pixels plus 3 pixels afstand) van een link erin heel, ook als
	   de browser die link met Tab in beeld schuift. */
	.nr-publicatie-inhoud {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		margin: -0.5rem;
		padding: 0.5rem;
		scroll-padding-block: 0.5rem;
	}

	.nr-sticky-panel .nr-actions {
		flex: none;
		border-top: 1px solid var(--nr-line);
		padding-top: 1rem;
	}
}

.nr-publicatie-inhoud > h2 {
	font-size: 1.35rem;
}

.nr-checklist {
	display: grid;
	gap: 0.55rem;
	padding: 0;
	margin: 1rem 0 1.3rem;
	list-style: none;
}

.nr-checklist li {
	display: grid;
	grid-template-columns: 1.2rem minmax(0, 1fr);
	gap: 0.4rem;
	font-size: 0.88rem;
}

.nr-checklist .is-ready {
	color: var(--nr-positive);
}

.nr-checklist .is-missing {
	color: var(--nr-muted);
}

.nr-nova-card {
	border-left: 3px solid var(--nr-line);
	background: var(--nr-bg);
	padding: 1rem;
}

.nr-nova-card p:last-child {
	margin: 0.45rem 0 0;
	color: var(--nr-muted);
	font-size: 0.8rem;
}

.nr-actions {
	display: grid;
	gap: 0.65rem;
	margin-top: 1rem;
}

.nr-actions > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-weight: 600;
}

/* De klassieke editor komt uit core en moet binnen het paneel blijven. */
.nieuws-redactie .wp-editor-wrap,
.nieuws-redactie .wp-editor-container,
.nieuws-redactie .mce-tinymce {
	max-width: 100%;
}

/* ---- Teambeheer --------------------------------------------------------- */

.nr-team-grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
	align-items: start;
	gap: 1.2rem;
}

/* Een paneel mag smaller worden dan de breedste teamregel; anders rekt de
   ene kolom tot 980 pixels de hele pagina op (#65). */
.nr-team-grid > * {
	min-width: 0;
}

.nr-team-invite {
	display: grid;
	gap: 0.25rem;
	margin-top: 1.5rem;
}

.nr-team-list {
	display: grid;
	gap: 0;
	margin-top: 1.2rem;
	container: nr-team-list / inline-size;
}

.nr-team-member {
	display: grid;
	grid-template-columns: minmax(180px, 0.8fr) minmax(300px, 1.2fr);
	align-items: center;
	gap: 1rem;
	border-top: 1px solid var(--nr-line);
	padding: 1.1rem 0;
}

.nr-team-identity h3,
.nr-team-identity p {
	margin-bottom: 0.25rem;
}

.nr-team-identity p,
.nr-team-protected {
	color: var(--nr-muted);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.nr-team-protected {
	margin-bottom: 0;
}

.nr-team-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
}

.nr-team-actions select {
	min-width: 190px;
}

.nr-team-actions .nr-button {
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	font-size: 0.85rem;
}

/* Twee kolommen vragen minstens 180 pixels + 1rem + 300 pixels: 31rem bij de
   standaard lettergrootte (496 pixels), in rem zodat de drempel meeschaalt met
   de gap. De teamlijst kijkt daarom naar zijn eigen breedte, niet naar het
   venster: op 768 en tussen 981 en 1120 pixels is de kolom smaller dan het
   scherm doet vermoeden. Dan komen de acties onder de naam, links
   uitgelijnd (#65). */
@container nr-team-list (width < 31rem) {
	.nr-team-member {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.nr-team-actions {
		justify-content: flex-start;
	}
}

/* ---- Meldingen: tekst altijd donker, kleur in rand en vlak --------------- */

.nr-notice {
	margin-bottom: 1.25rem;
	border-left: 4px solid var(--nr-line);
	padding: 1rem 1.2rem;
	color: var(--nr-text-strong);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.nr-notice p {
	margin-bottom: 0;
}

.nr-notice-success {
	border-color: var(--nr-positive);
	background: var(--nr-positive-soft);
}

.nr-notice-error {
	border-color: var(--nr-error);
	background: var(--nr-error-soft);
}

.nr-notice-warning {
	border-color: var(--nr-warning);
	background: var(--nr-warning-soft);
}

.nieuws-redactie .nr-notice-kop {
	margin: 0.75rem 0 0.25rem;
}

.nr-notice-lijst {
	margin: 0 0 0.25rem;
	padding-left: 1.25rem;
	font-weight: 500;
}

.nr-notice-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
	font-weight: 700;
}

.nr-empty {
	max-width: 700px;
}

/* ---- Inloggen en geen toegang ------------------------------------------- */

.nr-login-shell {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 1rem;
	background:
		linear-gradient(90deg, var(--nr-accent) 0 9px, transparent 9px),
		var(--nr-bg);
}

.nr-login-shell:focus {
	outline: none;
}

.nr-login-card {
	width: min(100%, 480px);
	padding: clamp(1.5rem, 6vw, 3.2rem);
}

.nr-login-brand {
	margin-bottom: 1.5rem;
}

.nr-login-card h1 {
	font-size: clamp(2rem, 8vw, 3rem);
}

.nr-login-card form {
	display: grid;
	gap: 0.9rem;
	margin-top: 1.5rem;
}

.nr-login-card form p {
	margin: 0;
}

.nr-login-card label {
	display: grid;
	gap: 0.35rem;
	font-weight: 700;
}

.nr-login-card .login-remember label {
	display: flex;
	align-items: center;
	font-weight: 500;
}

.nr-login-card input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.5rem;
	accent-color: var(--nr-accent);
}

.nr-login-help {
	margin: 1rem 0 0;
	font-size: 0.85rem;
}

/* Toetsenbord- en aanraakdoel voor wachtwoordherstel. */
.nr-login-help a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--nr-link);
}

/* ---- Tablet: smallere zijbalk, één kolom in de editor -------------------- */

@media (max-width: 1000px) {
	.nr-header {
		padding-inline: 24px;
	}

	.nr-app {
		grid-template-columns: 224px minmax(0, 1fr);
	}

	.nr-sidebar {
		padding-inline: 12px;
	}

	.nr-navigation a {
		gap: 10px;
		padding-inline: 10px;
		font-size: 13px;
	}

	.nr-main {
		padding-inline: 24px;
	}
}

@media (max-width: 980px) {
	.nr-editor-grid,
	.nr-team-grid {
		grid-template-columns: 1fr;
	}

	.nr-sticky-panel {
		position: static;
	}

	.nr-jump {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		border: 1px solid var(--nr-text-strong);
		border-radius: 5px;
		background: var(--nr-surface);
		padding: 0 14px;
		color: var(--nr-text-strong);
		font-size: 0.9rem;
		font-weight: 700;
		text-decoration: none;
	}
}

/*
 * Telefoon: compacte kop met native details/summary. Het paneel staat in de
 * normale paginastroom: geen overlay, geen focusval, geen script.
 */
@media (max-width: 760px) {
	.nr-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		min-height: 76px;
		padding: 14px 16px;
	}

	.nr-brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		width: calc(100% - 116px);
	}

	.nr-brand img {
		width: 134px;
		max-width: 100%;
	}

	.nr-brand-context {
		border: 0;
		padding: 0;
		font-size: 10px;
		letter-spacing: 0.07em;
	}

	.nr-account,
	.nr-sidebar {
		display: none;
	}

	.nr-mobile-menu {
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.nr-menu-toggle {
		position: absolute;
		top: 14px;
		right: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 104px;
		min-height: 44px;
		padding: 10px 12px;
		border: 1px solid var(--nr-text-strong);
		border-radius: 2px;
		background: var(--nr-text-strong);
		color: var(--nr-surface);
		font: 700 13px/1.4 var(--nr-f-body);
		cursor: pointer;
		list-style: none;
		user-select: none;
		touch-action: manipulation;
	}

	.nr-menu-toggle::-webkit-details-marker {
		display: none;
	}

	.nr-menu-toggle::marker {
		content: "";
	}

	.nr-menu-open,
	.nr-menu-close {
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.nr-menu-open {
		display: inline-flex;
	}

	.nr-menu-close {
		display: none;
	}

	.nr-mobile-menu[open] .nr-menu-open {
		display: none;
	}

	.nr-mobile-menu[open] .nr-menu-close {
		display: inline-flex;
	}

	.nr-mobile-menu[open] .nr-menu-toggle {
		border-color: var(--nr-accent);
		background: var(--nr-accent);
		color: var(--nr-on-accent);
	}

	.nr-menu-toggle:active {
		border-color: var(--nr-accent-dark);
		background: var(--nr-accent-dark);
		color: var(--nr-on-accent);
	}

	.nr-mobile-panel {
		margin: 16px -16px -14px;
		padding: 22px 16px 20px;
		border-top: 1px solid var(--nr-line);
		background: var(--nr-surface);
	}

	.nr-mobile-panel .nr-navigation {
		gap: 2px;
	}

	.nr-mobile-panel .nr-navigation a {
		gap: 14px;
		min-height: 50px;
		padding: 13px 12px;
		font-size: 15px;
	}

	.nr-mobile-account {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 20px;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid var(--nr-line);
		font-size: 13px;
	}

	.nr-mobile-account > div {
		flex-basis: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.nr-mobile-account strong,
	.nr-mobile-account span {
		display: block;
		margin: 0;
	}

	.nr-mobile-account strong {
		color: var(--nr-text);
	}

	.nr-mobile-account div span {
		margin-top: 2px;
		color: var(--nr-muted);
		font-size: 12px;
	}

	.nr-mobile-account a {
		margin-top: 6px;
	}

	.nr-app {
		display: block;
		min-height: calc(100svh - 76px);
	}

	.nr-main {
		padding: 20px 16px 40px;
	}

	.nr-crumb {
		margin-bottom: 18px;
	}

	.nr-page-heading,
	.nr-editor-heading {
		align-items: stretch;
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 1.25rem;
	}

	.nr-page-heading > div,
	.nr-editor-heading > div:first-child {
		flex-basis: auto;
	}

	.nr-page-heading .nr-button {
		width: 100%;
	}

	.nr-article-row {
		grid-template-columns: 56px minmax(0, 1fr);
		align-items: start;
		gap: 0.25rem 0.9rem;
		padding: 1rem;
	}

	.nr-article-thumb {
		width: 56px;
	}

	.nr-row-action {
		grid-column: 2;
		justify-self: start;
	}

	.nr-panel {
		padding: 1.1rem 1rem;
	}

	.nr-section-heading {
		gap: 0.7rem;
		margin-bottom: 1.1rem;
	}

	.nr-seo-panel {
		padding: 0;
	}

	.nr-seo-panel summary {
		padding: 1rem;
	}

	.nr-details-body {
		padding: 1rem;
	}

	.nr-two-columns,
	.nr-team-member {
		grid-template-columns: 1fr;
	}

	.nr-team-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.nr-team-actions label,
	.nr-team-actions select,
	.nr-team-actions .nr-button {
		width: 100%;
	}

	.nr-pagination {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Beweging uit: ook voor core-editorpanelen die aan de body hangen. */
@media (prefers-reduced-motion: reduce) {
	body.nieuws-redactie-shell *,
	body.nieuws-redactie-shell *::before,
	body.nieuws-redactie-shell *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.nr-skip-link {
		transform: none;
		clip-path: inset(50%);
	}

	.nr-skip-link:focus {
		clip-path: none;
	}
}

/* ---- NieuwsOS-werkruimte: prototype Tristan, eerste redactieronde --------
   Alleen de ingelogde werkruimte. Login en toegangsweigering houden hun schil.
   Alle kleuren volgen de bestaande semantische tokens. Dagelijks werk reageert
   direct; geen animatie, ook niet bij het inklappen van de navigatie. */
.nr-workspace {
 --nr-header-height: 67px;
 font-size: 14px;
}
/* Kop, zijbalk en mobiele navigatie staan centraal in css/werkruimte.css. */
.nr-workspace h1 { font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.2; }
.nr-workspace .nr-crumb { font-size: 11px; margin-bottom: 18px; }
.nr-workspace .nr-page-heading, .nr-workspace .nr-editor-heading { gap: 16px; margin-bottom: 22px; }
.nr-workspace .nr-page-heading .nr-eyebrow { display: none; }
.nr-workspace .nr-page-heading p { font-size: 13px; margin-bottom: 0; }
.nr-workspace .nr-button { min-height: 44px; border-radius: 6px; font-size: 13px; padding: 10px 16px; }
.nr-workspace .nr-filter { gap: 4px; padding: 4px; border: 1px solid var(--nr-line); border-radius: 7px; background: var(--nr-surface); margin-bottom: 16px; }
.nr-workspace .nr-filter a { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 5px; padding: 10px 14px; font-size: 13px; min-height: 44px; }
.nr-workspace .nr-filter a[aria-current] { background: var(--nr-link); color: var(--nr-on-accent); }
.nr-filter-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.nr-list-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 14px; }
.nr-list-tools label { display: grid; gap: 5px; min-width: 0; max-width: 100%; font-size: 12px; font-weight: 600; }
.nr-list-tools .nr-list-search { flex: 1 1 260px; }
.nr-list-tools label:has(select[name="locatie"]) { flex: 0 1 220px; }
.nr-list-tools input[type="search"], .nr-list-tools select { width: 100%; min-height: 44px; border: 1px solid var(--nr-line); border-radius: 6px; background: var(--nr-surface); color: var(--nr-text); padding: 9px 12px; font-size: 13px; }
.nr-reset { display: inline-flex; align-items: center; min-height: 44px; color: var(--nr-link) !important; font-size: 13px; }
.nr-list-summary { font-size: 12px; color: var(--nr-muted); }
.nr-workspace .nr-article-list { display: block; overflow: hidden; border: 1px solid var(--nr-line); border-radius: 8px; background: var(--nr-surface); }
.nr-article-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nr-article-table th { text-align: left; padding: 14px 12px; font-size: 12px; font-weight: 600; color: var(--nr-muted); border-bottom: 1px solid var(--nr-line); }
.nr-article-table th:first-child { width: 72px; }
.nr-article-table th:nth-child(2) { width: 46%; }
.nr-article-table th:nth-child(4) { width: 125px; }
.nr-article-table th:last-child { width: 90px; }
.nr-workspace .nr-article-row { display: table-row; background: var(--nr-surface); }
.nr-workspace .nr-article-row:hover { background: var(--nr-bg); }
.nr-article-row td { padding: 16px 12px; vertical-align: middle; border-bottom: 1px solid var(--nr-line); overflow-wrap: anywhere; }
.nr-article-row:last-child td { border-bottom: 0; }
.nr-workspace .nr-article-thumb { display: table-cell; aspect-ratio: auto; width: auto; height: auto; background: transparent; border-radius: 0; }
.nr-workspace .nr-article-thumb img, .nr-workspace .nr-article-thumb > span { display: block; width: 48px; height: 42px; object-fit: cover; border-radius: 4px; background: var(--nr-bg); }
.nr-workspace .nr-article-thumb > span { display: grid; place-items: center; color: var(--nr-muted); }
.nr-workspace .nr-article-copy h2 { font: 700 14px/1.4 var(--nr-f-body); margin: 6px 0; }
.nr-workspace .nr-article-copy p { font-size: 12px; margin: 0; }
.nr-workspace .nr-status { font-size: 11px; padding: 3px 7px; }
.nr-status::before { content: '•'; margin-right: 5px; }
.nr-row-location, .nr-row-date { font-size: 12px; }
.nr-row-date small { display: block; color: var(--nr-muted); }
.nr-workspace .nr-row-action { font-size: 12px; min-height: 44px; }
.nr-workspace .nr-panel { padding: 20px; border-radius: 8px; }
.nr-workspace .nr-panel h2 { font-size: 16px; }
.nr-workspace .nr-section-heading { margin-bottom: 18px; }
.nr-workspace .nr-section-heading p { font-size: 12px; }
.nr-workspace .nr-field { margin-bottom: 16px; }
.nr-workspace .nr-field > span, .nr-workspace .nr-field > label { font-size: 13px; }
.nr-workspace .nr-field small { font-size: 12px; }
.nr-workspace input[name="nieuws_titel"] { font: 700 23px/1.3 var(--nr-f-display); padding: 12px; }
.nr-workspace .nr-editor-heading { padding-bottom: 18px; border-bottom: 1px solid var(--nr-line); }
.nr-save-state { font: 400 11px/1.5 var(--nr-f-body); color: var(--nr-muted); }
.nr-save-state.nr-unsaved { color: var(--nr-warning); }
.nr-counter { display: block; text-align: right; margin-top: 4px; color: var(--nr-muted); font-variant-numeric: tabular-nums; }
.nr-workspace .nr-seo-panel { padding: 0; }
.nr-workspace .nr-editor-heading h1 { font-size: 1.5rem; }
.nr-workspace .nr-back { font-size: 12px; }
.nr-workspace [id] { scroll-margin-top: calc(var(--nr-header-height) + 18px); }
.nr-workspace .nr-sticky-panel { top: calc(var(--nr-header-height) + 16px); }
@media (min-width: 981px) {
 .nr-workspace .nr-sticky-panel { max-height: calc(100svh - var(--nr-header-height) - 32px); }
}
@media (max-width: 1100px) and (min-width: 761px) {
 .nr-article-table th:nth-child(4), .nr-article-table .nr-row-date { display: none; }
}
@media (max-width: 760px) {
 .nr-workspace .nr-filter { gap: 2px; }
 .nr-workspace .nr-filter a { padding-inline: 10px; }
 .nr-list-tools label:has(select[name="locatie"]) { flex: 1 1 155px; }
 .nr-list-tools .nr-list-search { flex-basis: 100%; }
 .nr-list-tools .nr-button { flex: 1 1 120px; }
 .nr-article-table, .nr-article-table tbody { display: block; }
 .nr-article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .nr-workspace .nr-article-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 16px; gap: 6px 12px; }
 .nr-article-row td { padding: 0; border: 0; }
 .nr-workspace .nr-article-thumb { display: block; }
 .nr-row-location, .nr-row-date, .nr-row-open { grid-column: 2; }
 .nr-row-date small { display: inline; margin-left: 8px; }
 .nr-workspace .nr-row-action { display: inline-flex; align-items: center; }
 .nr-workspace .nr-editor-meta { align-items: flex-start; flex-wrap: wrap; }
 .nr-workspace [id] { scroll-margin-top: 16px; }
 .nr-workspace .nr-panel { padding: 16px; }
 .nr-workspace .nr-seo-panel { padding: 0; }
}
/* Artikelselectie en bestaande beeldbibliotheek. */
.nr-list-tools input[type="date"] { width: 100%; min-height: 44px; border: 1px solid var(--nr-line); border-radius: 6px; background: var(--nr-surface); color: var(--nr-text); padding: 9px 12px; font: inherit; }
.nr-article-table th:nth-child(2) { width: 34%; }
.nr-article-table th:nth-child(4) { width: auto; }
.nr-article-table th:nth-child(5) { width: 115px; }
.nr-row-category { font-size: 12px; }
.nr-placement .nr-two-columns { display: block; }
.nr-editor-aside { display: flex; flex-direction: column; gap: 20px; }
.nr-workversion-notice { margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--nr-line); background: var(--nr-surface); }
.nr-workversion-notice[hidden], .nr-selected-image[hidden], .nr-media-pages[hidden] { display: none; }
.nr-workversion-notice > button { margin: 8px 8px 0 0; }
.nr-workversion-notice textarea { width: 100%; margin-top: 12px; }
.nr-media-picker { border-top: 1px solid var(--nr-line); border-bottom: 1px solid var(--nr-line); margin: 0 0 18px; padding: 12px 0; }
.nr-media-picker summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--nr-link); font-weight: 600; }
.nr-media-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.nr-media-tools label { flex: 1 1 180px; }
.nr-media-tools input { display: block; width: 100%; }
.nr-media-state { font-size: 13px; }
.nr-media-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.nr-media-item { min-width: 0; padding: 0; border: 1px solid var(--nr-line); border-radius: 4px; background: var(--nr-surface); color: var(--nr-text); cursor: pointer; text-align: left; font: inherit; }
.nr-media-item:hover { border-color: var(--nr-link); }
.nr-media-item img { display: block; width: 100%; height: 100px; object-fit: cover; }
.nr-media-item span { display: block; padding: 8px; overflow-wrap: anywhere; font-size: 12px; }
.nr-media-pages { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; }
.nr-selected-image { margin: 16px 0; }
.nr-selected-image img { display: block; max-width: 100%; width: 300px; height: auto; }
.nr-workspace button:disabled { cursor: default; opacity: .6; }
/* TinyMCE houdt focus, naam en disabled-status op de buitenste ARIA-knop. */
.nr-editor-toolbar .mce-toolbar .mce-btn[role="button"] > button[role="presentation"]:disabled { pointer-events: none; cursor: inherit; }
.nr-editor-toolbar .mce-toolbar .mce-btn[role="button"]:not(.mce-disabled) > button[role="presentation"]:disabled { opacity: 1; }
@media (max-width: 1100px) and (min-width: 761px) {
 .nr-article-table .nr-row-category, .nr-article-table .nr-row-date { display: none; }
 .nr-article-table th:nth-child(4) { display: table-cell; }
 .nr-article-table th:nth-child(2) { width: 48%; }
}
@media (max-width: 760px) {
 .nr-row-category { grid-column: 2; }
 .nr-list-tools label { flex: 1 1 145px; }
 .nr-workversion-notice { padding: 16px; }
}
.nr-workspace .nr-section-heading { display: block; }
.nr-editor-meta button[hidden] { display: none; }

/* Galerijbediening volgt bestaande velden en scheidingslijnen. */
.nr-gallery { margin-top: 1.5rem; }
.nr-gallery summary { cursor: pointer; font-weight: 700; }
.nr-gallery-item { padding-block: 1.25rem; border-top: 1px solid var(--nr-line); }
.nr-gallery-item h3 { margin-bottom: 1rem; overflow-wrap: anywhere; }
.nr-gallery-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.nr-gallery-state { overflow-wrap: anywhere; }

.nr-gallery-item img { display: block; max-width: 100%; height: auto; object-fit: contain; margin-bottom: 1rem; }
.nr-gallery-item img[hidden] { display: none; }