/* =========================================================================
   Krakti — pipeline.css
   Styles for pipeline-published single posts (single-krakti.php). Registered +
   enqueued as 'krakti-pipeline' (deps: krakti-single) ONLY on the singular view
   of a post carrying krakti_post_type meta (see inc/krakti-pipeline.php).

   Covers the surfaces the theme's single.css does not: the correction /
   retraction notices, the "Bronnen" primary-source list, the data_brief
   "Kerncijfer" lead block, the Dossier pill, and the per-type body-measure
   tuning for bericht / artikel / data_brief.

   Tokens only — every color/space/size resolves to a custom property defined in
   tokens.css. No literal fallbacks. Mobile-first; the article furniture
   breakpoints mirror single.css (~640px and ~1024px / --k-bp-lg).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PER-TYPE BODY MEASURE
   bericht reads tight (news), artikel a touch wider (long-form), data_brief
   matches artikel so cards/figures have room. The article shell already centers
   on --k-article-measure; we only nudge the local measure per type.
   ------------------------------------------------------------------------- */

.k-article--artikel,
.k-article--data_brief {
	--k-article-measure: var(--k-measure-wide);
}

/* The body inherits the shell measure; keep the override explicit so a future
   change to the shell does not silently widen the reading column. */
.k-article__body--artikel,
.k-article__body--data_brief {
	max-width: var(--k-measure-wide);
}

/* -------------------------------------------------------------------------
   2. KICKER ROW (eyebrow + Dossier pill)
   The eyebrow and the optional Dossier pill share a baseline-aligned row above
   the headline. Wraps gracefully on narrow screens.
   ------------------------------------------------------------------------- */

.k-article__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-2xs) var(--k-space-xs);
	margin-block-end: var(--k-space-2xs);
}

.k-article__kicker .k-eyebrow,
.k-article__kicker .k-article__eyebrow {
	margin-block-end: 0;
}

/* Dossier pill — a quiet, bordered chip that reads as navigation, not status. */
.k-pill--dossier {
	display: inline-flex;
	align-items: center;
	gap: var(--k-space-3xs);
	padding-inline: var(--k-space-xs);
	min-height: var(--k-tap-sm);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-meta);
	font-weight: var(--k-weight-semibold);
	letter-spacing: var(--k-ls-label);
	text-transform: uppercase;
	color: var(--k-color-soft);
	background: var(--k-color-surface-2);
	border: 1px solid var(--k-color-rule);
	border-radius: var(--k-radius-pill);
	text-decoration: none;
	transition: var(--k-transition-colors);
}

.k-pill--dossier:hover,
.k-pill--dossier:focus-visible {
	color: var(--k-color-accent);
	background: var(--k-color-accent-soft);
	border-color: var(--k-color-accent);
}

.k-pill__icon {
	font-size: 0.95em;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   3. NOTICES — correction ("Gecorrigeerd") + retraction ("Ingetrokken")
   Sit at the very top of the article, above the header, full reading-measure
   width. The correction banner is informational (accent); the retraction
   notice is an alert (danger) and reads heavier.
   ------------------------------------------------------------------------- */

.k-notice {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2xs);
	margin-block: 0 var(--k-space-md);
	padding: var(--k-space-sm) var(--k-space-md);
	border-radius: var(--k-radius-md);
	border-inline-start: var(--k-rule-accent) solid var(--k-color-accent);
	background: var(--k-color-surface-2);
}

.k-notice__badge {
	align-self: flex-start;
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-micro);
	font-weight: var(--k-weight-bold);
	letter-spacing: var(--k-ls-label);
	text-transform: uppercase;
	color: var(--k-color-on-accent);
	background: var(--k-color-accent);
	padding: var(--k-space-3xs) var(--k-space-2xs);
	border-radius: var(--k-radius-sm);
	line-height: 1.1;
}

.k-notice__body {
	font-family: var(--k-font-sans);
}

.k-notice__text {
	margin: 0;
	font-size: var(--k-fs-small);
	line-height: var(--k-lh-snug);
	color: var(--k-color-ink);
}

.k-notice__link {
	color: var(--k-color-accent);
	font-weight: var(--k-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in oklch, var(--k-color-accent) 45%, transparent);
	transition: var(--k-transition-colors);
}

.k-notice__link:hover,
.k-notice__link:focus-visible {
	color: var(--k-color-accent-strong);
	text-decoration-color: currentColor;
}

.k-notice__meta {
	margin: var(--k-space-2xs) 0 0;
	font-size: var(--k-fs-meta);
	color: var(--k-color-muted);
}

.k-notice__meta .k-time {
	font-weight: var(--k-weight-semibold);
	color: var(--k-color-soft);
}

/* Corrected — accent (informational). Uses the default .k-notice styling. */
.k-notice--corrected {
	border-inline-start-color: var(--k-color-accent);
}

/* Retracted — danger (alert). Heavier surface + danger accent so it is
   unmissable; the body usually IS the retraction text, but this guarantees the
   status is legible even if the body is empty. */
.k-notice--retracted {
	background: var(--k-color-danger-soft);
	border-inline-start-color: var(--k-color-danger);
}

.k-notice--retracted .k-notice__badge {
	color: var(--k-color-on-accent);
	background: var(--k-color-danger);
}

.k-notice--retracted .k-notice__text {
	font-size: var(--k-fs-body);
	font-weight: var(--k-weight-medium);
}

/* -------------------------------------------------------------------------
   4. DATA BRIEF — "Kerncijfer" lead block
   A bordered surface that anchors a data_brief: an oversized headline figure,
   an optional label, the reporting period, and a reserved chart mount. Sits
   between the byline and the prose.
   ------------------------------------------------------------------------- */

.k-databrief {
	margin-block: var(--k-space-md) var(--k-space-lg);
	padding: var(--k-space-md);
	background: var(--k-color-surface);
	border: 1px solid var(--k-color-rule);
	border-radius: var(--k-radius-lg);
}

.k-databrief__figure-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-3xs);
}

.k-databrief__figure {
	font-family: var(--k-font-serif);
	font-size: var(--k-fs-h1);
	font-weight: var(--k-weight-display);
	line-height: var(--k-lh-solid);
	letter-spacing: var(--k-ls-tight);
	color: var(--k-color-accent);
	font-variant-numeric: tabular-nums lining-nums;
}

.k-databrief__figure-label {
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-small);
	font-weight: var(--k-weight-semibold);
	letter-spacing: var(--k-ls-label);
	text-transform: uppercase;
	color: var(--k-color-muted);
}

.k-databrief__period {
	margin: var(--k-space-sm) 0 0;
	padding-block-start: var(--k-space-sm);
	border-block-start: 1px solid var(--k-color-rule);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-small);
	color: var(--k-color-soft);
}

.k-databrief__period-label {
	font-weight: var(--k-weight-bold);
	letter-spacing: var(--k-ls-label);
	text-transform: uppercase;
	color: var(--k-color-muted);
}

.k-databrief__chart {
	margin-block-start: var(--k-space-md);
}

.k-databrief__chart[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   5. BRONNEN — primary-source list (E-E-A-T)
   Rendered under the article body. An ordered list of external primary sources
   with the registrable host emphasised and the full URL beneath it.
   ------------------------------------------------------------------------- */

.k-sources {
	margin-block: var(--k-space-lg) 0;
	padding-block-start: var(--k-space-md);
	border-block-start: 1px solid var(--k-color-rule-strong);
}

.k-sources__title {
	margin: 0 0 var(--k-space-2xs);
	font-family: var(--k-font-serif);
	font-size: var(--k-fs-h4);
	font-weight: var(--k-weight-display);
	line-height: var(--k-lh-heading);
	color: var(--k-color-ink);
}

.k-sources__intro {
	margin: 0 0 var(--k-space-sm);
	font-family: var(--k-font-sans);
	font-size: var(--k-fs-small);
	line-height: var(--k-lh-snug);
	color: var(--k-color-muted);
}

.k-sources__list {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-2xs);
	margin: 0;
	padding-inline-start: var(--k-space-md);
	counter-reset: k-source;
}

.k-sources__item {
	font-family: var(--k-font-sans);
}

.k-sources__item::marker {
	font-weight: var(--k-weight-bold);
	color: var(--k-color-accent);
}

.k-sources__link {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	padding: var(--k-space-2xs) var(--k-space-xs);
	border: 1px solid var(--k-color-rule);
	border-radius: var(--k-radius-sm);
	text-decoration: none;
	background: var(--k-color-surface);
	transition: var(--k-transition-colors);
}

.k-sources__link:hover,
.k-sources__link:focus-visible {
	border-color: var(--k-color-accent);
	background: var(--k-color-accent-soft);
}

.k-sources__host {
	font-size: var(--k-fs-small);
	font-weight: var(--k-weight-semibold);
	color: var(--k-color-ink);
}

.k-sources__url {
	font-size: var(--k-fs-meta);
	color: var(--k-color-muted);
	word-break: break-all;
	overflow-wrap: anywhere;
}

.k-sources__link:hover .k-sources__host,
.k-sources__link:focus-visible .k-sources__host {
	color: var(--k-color-accent-strong);
}

/* =========================================================================
   RESPONSIVE — small tablet ~640px
   ========================================================================= */

@media (min-width: 40em) {

	.k-notice {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--k-space-sm);
	}

	.k-notice__badge {
		margin-block-start: 0.1em;
	}

	.k-databrief__figure {
		font-size: var(--k-fs-hero-sm);
	}
}

/* =========================================================================
   FOCUS VISIBLE — guarantee a visible ring on the pipeline-only interactive
   surfaces (mirrors single.css so the ring survives a downstream override).
   ========================================================================= */

.k-sources__link:focus-visible,
.k-pill--dossier:focus-visible,
.k-notice__link:focus-visible {
	outline: var(--k-focus-width) solid var(--k-color-accent);
	outline-offset: var(--k-focus-offset);
	border-radius: var(--k-radius-sm);
	box-shadow: var(--k-shadow-focus);
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.k-pill--dossier,
	.k-notice__link,
	.k-sources__link {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
   PRINT — keep the notices + sources (they are part of the record); drop the
   Dossier nav chip and the reserved chart mount.
   ========================================================================= */

@media print {

	.k-pill--dossier,
	.k-databrief__chart {
		display: none !important;
	}

	.k-notice {
		border: 1px solid var(--k-color-rule-strong);
	}
}