@charset "UTF-8";
/*
 * Norea — lydspiller, spill-knapp og episodeliste (byggeplanen § 4.10).
 *
 * Bygget fra skissene (assets/proto/player.css, 14.10.2026). Alle farger og fonter
 * leses fra tokens.css, som lastes først (inc/assets.php), så fargene har ingen
 * reserveverdier her. Ingen gradient: fremdriften er to flater i .np__spor.
 *
 * Kontrast (målt med arbeidsblåfargen): sand på blå 9,79:1 · blå på sand 9,79:1 ·
 * sand på primary-deep 12,73:1. Oransje er bare fremdriftsfyll, aldri tekst.
 * Ingen runde former: knapper og tommel har 2 px radius (profilen: sirkelen er
 * den eneste runde formen).
 */

.np,
.np-spill,
.np-lyd,
.np-episoder,
.np-seksjon {
	--np-bla: var(--color-primary);
	--np-bla-dyp: var(--color-primary-deep);
	--np-bla-lys: var(--color-primary-light);
	--np-sand: var(--color-surface);
	--np-oransje: var(--color-accent);
	--np-sort: var(--color-ink);
	--np-hvit: var(--color-field);
	--np-linje: var(--line, rgba(0, 0, 0, 0.13));
	--np-radius: var(--radius-sm, 2px);
	--np-font: var(--font-body, "DM Sans", system-ui, sans-serif);
	--np-font-overskrift: var(--font-heading, "Syne", system-ui, sans-serif);
}

.np-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Siden får nedre luft lik spillerens høyde, så stripa aldri dekker innhold eller fokus. */
html.har-lydspiller {
	scroll-padding-bottom: calc(var(--np-hoyde, 72px) + 1rem);
}

html.har-lydspiller body {
	padding-bottom: var(--np-hoyde, 72px);
}

/* ---------- Minispilleren ---------- */

.np {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-lydspiller, 50);
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--np-bla);
	color: var(--np-sand);
	font-family: var(--np-font);
	font-size: 1rem;
	/* Light brukes aldri som lys tekst på blå flate (byggeplanen § 7.2). */
	font-weight: 400;
	line-height: 1.25;
}

/* Glir inn bare når noen trykker spill, ikke når lyden gjenopprettes på neste side. */
.np--inn {
	animation: np-inn 240ms cubic-bezier(0.2, 0, 0, 1);
}

.np[hidden] {
	display: none;
}

.np:focus {
	outline: none;
}

.np:focus-visible {
	outline: 3px solid var(--np-sand);
	outline-offset: -5px;
}

@keyframes np-inn {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}

.np audio {
	display: none;
}

/* Mobil: to rader innenfor 72 px — tittel og tid over, kontrollene under. */
.np__indre {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 2.75rem minmax(0, 1fr) 2.75rem 2.75rem;
	grid-template-rows: 1.25rem 2.75rem;
	column-gap: 0.25rem;
	align-items: center;
	max-width: 75rem;
	margin: 0 auto;
	padding: 0.125rem 0.5rem 0.375rem;
}

.np__meta {
	grid-column: 1 / 4;
	grid-row: 1;
	min-width: 0;
	/* Luft til fokusringen på tittellenken, uten at raden blir høyere. */
	margin: -5px;
	padding: 5px 0.75rem 5px 5px;
	overflow: hidden;
	font-size: 0.875rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.np__tittel {
	font-weight: 600;
}

.np__serie {
	font-weight: 500;
}

.np__serie:not(:empty)::before {
	display: inline-block;
	width: 1px;
	height: 0.75em;
	margin: 0 0.5em;
	background: currentColor;
	vertical-align: -0.05em;
	content: "";
}

/* Hele tittelfeltet er klikkflaten til lenka (ikke bare ordene). */
.np__meta {
	position: relative;
}

.np__lenke::after {
	position: absolute;
	inset: 0;
	content: "";
}

.np__lenke {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.np__lenke:hover {
	text-decoration-thickness: 2px;
}

.np__lenke:focus-visible {
	outline: 3px solid var(--np-sand);
	outline-offset: 2px;
}

.np__tid {
	grid-column: 4 / 6;
	grid-row: 1;
	justify-self: end;
	margin: 0;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.np__spill {
	grid-column: 1;
	grid-row: 2;
}

.np__hopp[data-hopp^="-"] {
	grid-column: 2;
	grid-row: 2;
}

.np__spor {
	grid-column: 3;
	grid-row: 2;
}

.np__hopp:not([data-hopp^="-"]) {
	grid-column: 4;
	grid-row: 2;
}

.np__lukk {
	grid-column: 5;
	grid-row: 2;
}

/* ---------- Knappene ---------- */

.np__knapp {
	position: relative;
	z-index: 1; /* over tittellenkas klikkflate */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--np-radius);
	background: transparent;
	color: var(--np-sand);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.np__knapp:hover {
	background: var(--np-bla-dyp);
}

.np__knapp:focus-visible {
	outline: 3px solid var(--np-sand);
	outline-offset: 2px;
}

.np__ikon {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.np__spill {
	background: var(--np-sand);
	color: var(--np-bla);
}

.np__spill:hover {
	background: var(--np-hvit);
}

.np__ikon--pause,
[aria-pressed="true"] > .np__ikon--spill {
	display: none;
}

[aria-pressed="true"] > .np__ikon--pause {
	display: block;
}

/* «Fortsett» vises bare når nettleseren nektet å spille videre av seg selv. */
.np:not(.np--blokkert) .np__spill-tekst {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.np--blokkert .np__spill {
	padding: 0 0.875rem 0 0.625rem;
	font-weight: 600;
}

/* ---------- Fremdrift ---------- */

/* Sporet og fyllet er to flater bak en gjennomsiktig glider (ingen gradient). */
.np__spor {
	--np-fyll: 0%;
	position: relative;
	z-index: 1;
	display: block;
	min-width: 0;
	height: 2.75rem;
}

.np__spor::before,
.np__spor::after {
	position: absolute;
	top: 50%;
	left: 0;
	height: 0.25rem;
	margin-top: -0.125rem;
	content: "";
	pointer-events: none;
}

.np__spor::before {
	right: 0;
	background: var(--np-bla-lys);
}

.np__spor::after {
	width: var(--np-fyll);
	background: var(--np-oransje);
}

.np__glider {
	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.np__glider:focus-visible {
	outline: 3px solid var(--np-sand);
	outline-offset: 2px;
}

.np__glider::-webkit-slider-runnable-track {
	height: 0.25rem;
	border-radius: 0;
	background: transparent;
}

.np__glider::-webkit-slider-thumb {
	width: 0.375rem;
	height: 1.25rem;
	margin-top: -0.5rem;
	border: 0;
	border-radius: var(--np-radius);
	background: var(--np-sand);
	-webkit-appearance: none;
	appearance: none;
}

.np__glider::-moz-range-track {
	height: 0.25rem;
	border-radius: 0;
	background: transparent;
}

.np__glider::-moz-range-thumb {
	width: 0.375rem;
	height: 1.25rem;
	border: 0;
	border-radius: var(--np-radius);
	background: var(--np-sand);
}

/* Desktop: én rad — tittel og serie til venstre, kontrollene i midten. */
@media (min-width: 48rem) {
	.np__indre {
		grid-template-columns: minmax(10rem, 20rem) auto 2.75rem minmax(0, 1fr) auto 2.75rem 2.75rem;
		grid-template-rows: 2.75rem;
		column-gap: 0.5rem;
		padding: 0.875rem 1rem;
	}

	.np__meta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: stretch;
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		padding: 0 1rem 0 0;
		overflow: visible;
		white-space: normal;
	}

	.np__tittel,
	.np__serie {
		display: block;
		margin: -5px;
		padding: 5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.np__tittel {
		font-size: 0.9375rem;
	}

	.np__serie {
		font-size: 0.8125rem;
	}

	.np__serie:not(:empty)::before {
		display: none;
	}

	.np__spill {
		grid-column: 2;
		grid-row: 1;
	}

	.np__hopp[data-hopp^="-"] {
		grid-column: 3;
		grid-row: 1;
	}

	.np__spor {
		grid-column: 4;
		grid-row: 1;
	}

	.np__tid {
		grid-column: 5;
		grid-row: 1;
		font-size: 0.875rem;
	}

	.np__hopp:not([data-hopp^="-"]) {
		grid-column: 6;
		grid-row: 1;
	}

	.np__lukk {
		grid-column: 7;
		grid-row: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np,
	.np--inn {
		animation: none;
	}
}

/* ---------- Spill-knappen på sida (.js-spill) ---------- */

.np-spill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.75rem 1.125rem 0.75rem 0.875rem;
	border: 0;
	border-radius: var(--np-radius);
	background: var(--np-bla);
	color: var(--np-sand);
	font-family: var(--np-font);
	font-size: var(--text-body, 1.125rem);
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}

.np-spill:hover {
	background: var(--np-bla-dyp);
}

.np-spill:focus-visible {
	outline: 3px solid var(--np-sort);
	outline-offset: 2px;
}

/* På blå flate: sand knapp med blå tekst, og ringen blir sand. */
.np-spill--pa-bla {
	background: var(--np-sand);
	color: var(--np-bla);
}

.np-spill--pa-bla:hover {
	background: var(--np-hvit);
}

.np-spill--pa-bla:focus-visible {
	outline-color: var(--np-sand);
}

.np-spill__tid {
	font-weight: 400; /* ikke light: lys tekst på blå knapp (byggeplanen § 7.2) */
	white-space: nowrap;
}

/* ---------- Kompakt lyd: lydblokken under ingressen i andakten ---------- */

.np-lyd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm, 1rem);
	padding-block: var(--space-md, 1.5rem);
	border-block: 1px solid var(--np-linje);
}

/* ---------- Episodelista (NRK Radio-mønsteret: ett verb, varighet, serie) ---------- */

.np-episoder {
	max-width: 56rem;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--np-linje);
	list-style: none;
	font-family: var(--np-font);
}

.np-episode {
	display: grid;
	grid-template-areas:
		"serie"
		"tittel"
		"dato"
		"knapp";
	row-gap: 0.5rem;
	justify-items: start;
	max-width: none;
	margin: 0;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--np-linje);
}

.np-episode__tittel {
	grid-area: tittel;
	margin: 0;
	color: var(--np-bla);
	font-family: var(--np-font-overskrift);
	font-size: var(--text-h3, 1.3125rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	/* Lange norske ord i Syne-versaler på 320 px (byggeplanen § 7.1). */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.np-episode__tittel a {
	display: inline-block;
	/* Minst 44 px klikkflate uten å flytte layout: linjehøyden (1.15em) pluss luft opp til 2.75rem,
	   med en halv piksel ekstra mot avrunding. */
	padding-block: calc((2.75rem - 1.15em) / 2 + 0.5px);
	margin-block: calc((1.15em - 2.75rem) / 2 - 0.5px);
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.np-episode__tittel a:focus-visible {
	outline: 3px solid var(--np-sort);
	outline-offset: 2px;
}

.np-episode__serie {
	grid-area: serie;
	margin: 0;
	color: var(--np-sort);
	font-size: var(--text-label, 0.84375rem);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.np-episode__dato {
	grid-area: dato;
	margin: 0;
	color: var(--np-sort);
	font-size: 1rem;
	font-weight: var(--font-body-weight);
}

.np-episode .np-spill {
	grid-area: knapp;
	margin-top: 0.25rem;
}

@media (min-width: 48rem) {
	.np-episode {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"serie  knapp"
			"tittel knapp"
			"dato   knapp";
		column-gap: 2rem;
		align-items: center;
	}

	.np-episode .np-spill {
		margin-top: 0;
		justify-self: end;
	}
}

/* ---------- Lydfilene i ett innlegg (ukedagene): tittel og «Hør · N min» på én rad ---------- */

.np-episoder--deler {
	max-width: var(--measure, 62ch);
}

.np-episoder--deler .np-episode {
	grid-template-areas: "tittel knapp";
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-sm, 1rem);
	align-items: center;
	padding: 0.75rem 0;
}

.np-episoder--deler .np-episode__tittel {
	color: var(--np-sort);
	font-family: var(--np-font);
	font-size: var(--text-body, 1.125rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.np-episoder--deler .np-episode .np-spill {
	margin-top: 0;
	justify-self: end;
}

/* ---------- Seksjonen episodeliste (/lytt/) ---------- */

.np-seksjon__tittel {
	max-width: var(--measure, 62ch);
	margin-bottom: var(--space-lg, 2rem);
}

.np-seksjon .np-episoder {
	max-width: 56rem;
}

.np-seksjon__mer {
	margin-top: var(--space-lg, 2rem);
}