/* ======================================================================
   Samme dag to ganger, historien om kvelden på forsiden
   (template-parts/sections/plattform/kveld.php, styres av kveld.js)
   ====================================================================== */

.pf-kveld { padding-bottom: clamp(72px, 9vw, 136px); }
.pf-kveld .pf-hode { margin-bottom: 0; }

/* Uten JavaScript og med redusert bevegelse står historien som en tidslinje.
   Med JavaScript står scenen der fra første bilde, og tidslinjen er bare for
   skjermlesere. */
.kv-rom { display: none; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.kv-rom { display: block; }

	/* Overskriften står i det samme morgenlyset som scenen begynner med, og
	   uten avslutning slutter seksjonen der scenen slutter */
	.pf-kveld { background: #fff7ec; }
	.pf-kveld:not(:has(.kv-slutt)) { padding-bottom: 0; }

	.kv-tekst {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------- Tidslinjen ----------
   Klokkeslettet midt på en linje gjennom dagen, med sol eller måne. Dagen uten
   heltene til venstre, grå med varselet fra telefonen, og dagen med heltene
   til høyre, hvit med kortet fra helten. Kvelden er kald uten heltene og
   varm med dem. */

.kv-tekst { margin-top: clamp(48px, 6vw, 80px); }

.kv-t-hode,
.kv-t-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
	align-items: stretch;
}

.kv-t-hode { margin-bottom: 18px; }
.kv-t-hode .kv-t-merke--uten { grid-column: 1; justify-self: start; }
.kv-t-hode .kv-t-merke--med { grid-column: 3; justify-self: start; }

.kv-t-merke {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px 8px 10px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 800;
}

.kv-t-merke--uten { padding-left: 14px; background: #f1f1f5; color: #4b4b5c; }
.kv-t-merke--med { background: #f1ecff; color: #5b21b6; }
.kv-t-ansikter { display: flex; }

.kv-t-ansikter > span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: -8px;
	border: 2px solid #f1ecff;
	border-radius: 50%;
	background: var(--flate);
	overflow: hidden;
}

.kv-t-ansikter > span:first-child { margin-left: 0; }
.kv-t-ansikter img { width: 84%; height: auto; }

.kv-t {
	position: relative;
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Linjen gjennom dagen. Fargen på tiden står i ikonet ved klokkeslettet */
.kv-t::before {
	content: '';
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 50%;
	width: 3px;
	border-radius: 3px;
	background: #e4e2ee;
	translate: -50% 0;
}

.kv-t-tid {
	--tone: #f59e0b;
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	align-self: center;
	justify-self: center;
	gap: 7px;
	margin: 0;
	padding: 8px 14px 8px 10px;
	border: 1px solid #e8e8ee;
	border-radius: 999px;
	background: #fff;
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pf-blekk);
}

.kv-t-tid span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--tone) 16%, #fff); color: var(--tone); font-size: 15px; }
.kv-t-rad--dag .kv-t-tid { --tone: #ca8a04; }
.kv-t-rad--ettermiddag .kv-t-tid { --tone: #ea580c; }
.kv-t-rad--kveld .kv-t-tid { --tone: #4f46e5; }

.kv-t-uten,
.kv-t-med {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px 24px 24px;
	border-radius: 24px;
}

.kv-t-uten { grid-column: 1; grid-row: 1; background: #f4f4f7; color: #55556a; }
.kv-t-med { grid-column: 3; grid-row: 1; border: 1px solid #e4dcff; background: #fff; color: var(--pf-tekst); }

.kv-t-etikett { display: none; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-gra); }
.kv-t-fortelling { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* Varselet fra telefonen, uten heltene */
.kv-t-varsel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 6px 12px 6px 6px;
	border: 1px solid #e9e9ef;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d1d26;
}

.kv-t-varsel span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: #fee2e2; color: #dc2626; font-size: 14px; }

/* Kortet fra helten, med heltens farge og knappen */
.kv-t-kort {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 8px 8px 8px 8px;
	border-radius: 14px;
	background: var(--flate);
	font-size: 14px;
	line-height: 1.35;
	color: #1d1d26;
}

.kv-t-flis { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; }
.kv-t-flis img { width: 84%; height: auto; }
.kv-t-kort-tekst { display: grid; min-width: 0; font-weight: 600; }
.kv-t-kort-tekst b { font-size: 12px; font-weight: 800; color: color-mix(in oklab, var(--aksent) 80%, #000); }

.kv-t-knapp {
	flex: none;
	margin-left: auto;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--aksent);
	font-size: 13px;
	font-weight: 800;
	color: #fff;
}

/* Kvelden: kald og mørk uten heltene, varm med dem */
.kv-t-rad--kveld .kv-t-uten { background: #17142b; color: #c9c6dd; }
.kv-t-rad--kveld .kv-t-uten .kv-t-varsel { border-color: transparent; background: rgba(255, 255, 255, .08); color: #fff; }
.kv-t-rad--kveld .kv-t-med { border-color: #fde3c4; background: #fff8ef; }

/* ---------- Scenen ---------- */

.kv-rom {
	position: relative;
	height: calc(var(--steg, 9) * 70vh + 100vh);
	margin-top: clamp(32px, 4vw, 56px);
}

.kv-klebe {
	--kv-flate: #fff;
	--kv-skjerm: #e4ecfb;
	--kv-skjerm-tekst: #0a0f1f;
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100vh;
	height: 100svh;
	padding-block: 88px 32px;
	background: var(--kv-flate);
	transition: background-color .9s ease;
}

.kv-klebe[data-tone="morgen"] { --kv-flate: #fff7ec; --kv-skjerm: #fde3c8; }
.kv-klebe[data-tone="dag"] { --kv-flate: #ffffff; --kv-skjerm: #dbe7fb; }
.kv-klebe[data-tone="ettermiddag"] { --kv-flate: #fff2e3; --kv-skjerm: #f9d5b9; }
.kv-klebe[data-tone="kveld-uten"] { --kv-flate: #eceef7; --kv-skjerm: #20254a; --kv-skjerm-tekst: #fff; }
.kv-klebe[data-tone="kveld-med"] { --kv-flate: #fff0dc; --kv-skjerm: #3b2c50; --kv-skjerm-tekst: #fff; }
.kv-klebe[data-tone="spol"] { --kv-flate: #f5f3ff; --kv-skjerm: #e9e3fe; }

.kv-scene {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(32px, 6vw, 104px);
}

/* ---------- Venstre: dagen, klokka og hva som skjer ---------- */

.kv-dag {
	position: relative;
	display: inline-grid;
	font-size: 15px;
	font-weight: 700;
}

.kv-dag > span {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	transition: opacity .4s ease, transform .4s var(--pf-myk);
}

.kv-dag > span::before {
	content: '';
	border: 4px solid currentColor;
	border-radius: 50%;
}

.kv-dag-uten { background: #fee2e2; color: #b91c1c; }
.kv-dag-med { background: #ede9fe; color: #6d28d9; opacity: 0; transform: translateY(8px); }
[data-dag="med"] .kv-dag-uten,
[data-dag="spol"] .kv-dag-uten { opacity: 0; transform: translateY(-8px); }
[data-dag="med"] .kv-dag-med,
[data-dag="spol"] .kv-dag-med { opacity: 1; transform: none; }

.kv-klokke {
	margin: 14px 0 22px !important;
	font-family: var(--pf-tittel);
	font-size: clamp(88px, 3.5rem + 7.5vw, 192px);
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.045em;
	font-variant-numeric: tabular-nums;
	color: var(--pf-blekk);
}

.kv-klokke.er-ny { animation: kv-tikk .5s var(--pf-myk); }

@keyframes kv-tikk {
	from { opacity: .25; transform: translateY(.12em); }
	to { opacity: 1; transform: none; }
}

.kv-fortelling {
	position: relative;
	min-height: 5.4em;
	max-width: 21em;
	font-size: clamp(1.375rem, .95rem + 1.15vw, 2.125rem);
	font-weight: 700;
	line-height: 1.28;
	color: var(--pf-tekst);
	text-wrap: pretty;
}

.kv-linje {
	position: absolute;
	inset: 0 0 auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .55s var(--pf-myk);
}

.kv-linje.er-aktiv { opacity: 1; transform: none; transition-delay: .12s; }
.kv-linje--spol { color: #6d28d9; }

.kv-skala {
	display: flex;
	gap: 6px;
	max-width: 30em;
	margin-top: 28px !important;
}

.kv-skala li {
	flex: 1;
	padding-top: 10px;
	border-top: 3px solid var(--pf-linje);
	font-size: 14px;
	font-weight: 600;
	color: var(--pf-gra-lys);
	font-variant-numeric: tabular-nums;
	transition: border-color .4s ease, color .4s ease;
}

.kv-skala li.er-forbi { border-color: #c7c7d1; color: var(--pf-gra); }
.kv-skala li.er-aktiv { border-color: #dc2626; color: var(--pf-blekk); font-weight: 800; }
[data-dag="med"] .kv-skala li.er-forbi { border-color: #c4b5fd; }
[data-dag="med"] .kv-skala li.er-aktiv { border-color: #7c3aed; }

/* ---------- Høyre: telefonen, med heltene bak ---------- */

.kv-hoyre {
	position: relative;
	display: flex;
	justify-content: center;
}

.kv-telefon {
	position: relative;
	z-index: 2;
	width: min(300px, 100%);
	height: min(600px, calc(100svh - 160px));
	padding: 10px;
	border-radius: 46px;
	background: #0a0f1f;
}

.kv-telefon.er-summer { animation: kv-summ .5s ease; }

@keyframes kv-summ {
	0%, 100% { transform: none; }
	20% { transform: translateX(-4px) rotate(-1.2deg); }
	40% { transform: translateX(4px) rotate(1.2deg); }
	60% { transform: translateX(-3px) rotate(-.8deg); }
	80% { transform: translateX(2px) rotate(.4deg); }
}

.kv-skjerm {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 14px 18px;
	border-radius: 37px;
	overflow: hidden;
	background: var(--kv-skjerm);
	color: var(--kv-skjerm-tekst);
	transition: background-color .9s ease, color .9s ease;
}

.kv-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 10px 0;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kv-batteri {
	position: relative;
	width: 22px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	opacity: .8;
}

.kv-batteri i {
	position: absolute;
	inset: 1.5px;
	right: 30%;
	border-radius: 1px;
	background: currentColor;
}

.kv-laas {
	display: grid;
	justify-items: center;
	margin: 18px 0 18px !important;
	text-align: center;
}

.kv-laas span {
	font-size: 58px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.kv-laas small { margin-top: 6px; font-size: 13px; font-weight: 600; opacity: .75; }

/* Varslene og kortene, det nyeste øverst. Den ene listen er tom når den andre vises */
.kv-varsler,
.kv-kortene {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
	min-height: 0;
}

.kv-varsler { flex: none; }
.kv-kortene { flex: 1; }

.kv-varsel,
.kv-kort {
	border-radius: 18px;
	background: rgba(255, 255, 255, .94);
	color: var(--pf-blekk);
	font-size: 13px;
	line-height: 1.35;
	transition: opacity .45s ease, transform .55s var(--pf-myk), max-height .5s var(--pf-myk), margin .5s var(--pf-myk), padding .5s var(--pf-myk);
}

.kv-varsel {
	display: flex;
	align-items: center;
	gap: 10px;
	max-height: 0;
	margin-bottom: -8px;
	padding: 0 12px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-12px) scale(.96);
}

.kv-varsel.er-synlig {
	max-height: 80px;
	margin-bottom: 0;
	padding: 10px 12px;
	opacity: 1;
	transform: none;
}

.kv-varsel-ikon {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: #fee2e2;
	color: #dc2626;
	font-size: 15px;
}

.kv-varsel b,
.kv-kort-tekst b {
	display: block;
	font-size: 11px;
	font-weight: 800;
	color: var(--pf-gra);
	font-variant-numeric: tabular-nums;
}

.kv-kort {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: center;
	gap: 6px 10px;
	max-height: 0;
	margin-bottom: -8px;
	padding: 0 10px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-12px) scale(.96);
}

.kv-kort.er-synlig {
	max-height: 140px;
	margin-bottom: 0;
	padding: 10px;
	opacity: 1;
	transform: none;
}

.kv-kort-tekst b { color: var(--aksent); }

.kv-kort-ava {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--flate);
	overflow: hidden;
}

.kv-kort-ava img { width: 30px; height: auto; margin-top: 4px; }

.kv-knapp {
	grid-column: 2;
	justify-self: start;
	display: inline-grid;
	font-size: 12px;
	font-weight: 800;
}

.kv-knapp > span {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: opacity .3s ease, transform .3s var(--pf-myk);
}

.kv-knapp-for { background: var(--aksent); color: #fff; }
.kv-knapp-etter { background: #d1fae5; color: #047857; opacity: 0; transform: scale(.85); }
.kv-kort.er-gjort .kv-knapp-for { opacity: 0; transform: scale(.85); }
.kv-kort.er-gjort .kv-knapp-etter { opacity: 1; transform: none; }

/* Varslene forsvinner når dagen spoles tilbake */
[data-dag="spol"] .kv-varsel,
[data-dag="med"] .kv-varsel { transform: translateX(60px); }

/* Heltene står bak telefonen og kommer fram når de jobber */
.kv-helter {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.kv-helt {
	position: absolute;
	bottom: 14%;
	width: clamp(120px, 12vw, 170px);
	opacity: 0;
	transition: opacity .4s ease, transform .7s cubic-bezier(.3, 1.45, .5, 1);
}

.kv-helt img { display: block; width: 100%; height: auto; }
.kv-helt--h { left: 50%; transform: translateX(-20%) scale(.6) rotate(0); }
.kv-helt--v { right: 50%; transform: translateX(20%) scale(.6) rotate(0); }
.kv-helt--h.er-ute { opacity: 1; transform: translateX(62%) scale(1) rotate(8deg); }
.kv-helt--v.er-ute { opacity: 1; transform: translateX(-62%) scale(1) rotate(-8deg); }

/* ---------- Avslutningen ---------- */

.kv-slutt {
	display: grid;
	justify-items: center;
	gap: 22px;
	margin-top: clamp(56px, 7vw, 104px);
	text-align: center;
}

.kv-slutt-tekst {
	max-width: 17em;
	font-family: var(--pf-tittel);
	font-size: clamp(1.875rem, 1rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1.12;
	text-wrap: balance;
}

/* ---------- Mobil ---------- */

@media (max-width: 899px) {
	.kv-klebe { padding-block: 76px 16px; }
	.kv-scene { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; height: 100%; }
	.kv-venstre { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
	.kv-dag { grid-column: 1; grid-row: 1; }
	.kv-klokke { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 !important; font-size: clamp(52px, 15vw, 80px); }
	.kv-fortelling { grid-column: 1 / -1; min-height: 4.2em; margin-top: 12px; max-width: none; font-size: clamp(1.125rem, .9rem + 1.2vw, 1.375rem); }
	.kv-skala { display: none; }
	.kv-telefon { width: auto; height: min(46svh, 420px); aspect-ratio: 9 / 17.5; padding: 7px; border-radius: 34px; }
	.kv-skjerm { padding: 10px 10px 12px; border-radius: 28px; }
	.kv-laas { margin: 8px 0 10px !important; }
	.kv-laas span { font-size: 36px; }
	.kv-laas small { display: none; }
	.kv-varsel, .kv-kort { font-size: 11.5px; border-radius: 14px; }
	.kv-varsel-ikon { width: 24px; height: 24px; font-size: 12px; }
	.kv-helt { width: clamp(84px, 24vw, 120px); bottom: 8%; }
	.kv-helt--h.er-ute { transform: translateX(88%) scale(1) rotate(8deg); }
	.kv-helt--v.er-ute { transform: translateX(-88%) scale(1) rotate(-8deg); }
}

/* Tidslinjen på mobil: klokkeslettet over, og de to dagene under hverandre */
@media (max-width: 759px) {
	.kv-t-hode { display: none; }
	.kv-t { gap: 28px; }
	.kv-t::before { display: none; }
	.kv-t-rad { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.kv-t-tid { grid-column: 1; justify-self: start; }
	.kv-t-uten, .kv-t-med { grid-column: 1; grid-row: auto; padding: 18px 18px 20px; }
	.kv-t-etikett { display: block; }
	.kv-t-rad--kveld .kv-t-uten .kv-t-etikett { color: #9a97b3; }
	.kv-t-fortelling { font-size: 16px; }
}

/* ======================================================================
   Samme dag side om side (visning «side», template-parts/plattform/kveld-side.php)
   Dagen uten heltene til venstre og med dem til høyre, med tidspunktene som
   faner over. Fanen som vises har en tidslinje som fylles, og når den er
   full, går klokka videre (kveld.js, [data-ks]). Listene har plass til hele
   dagen fra start, så ingenting hopper når kortene kommer.
   ====================================================================== */

.pf-kveld--side { padding-block: clamp(72px, 8vw, 120px); background: #fff; }
.pf-kveld--side .pf-hode { margin-bottom: clamp(28px, 3.5vw, 44px); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.pf-kveld.pf-kveld--side { padding-bottom: clamp(72px, 8vw, 120px); background: #fff; }
}

.ks { display: grid; gap: 18px; }

/* Tidspunktene */
.ks-dag { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; width: 100%; max-width: 760px; margin-inline: auto; }
.ks-tid { display: grid; gap: 8px; padding: 6px 2px; border: 0; background: none; color: var(--pf-gra); font: inherit; text-align: left; cursor: pointer; }
.ks-tid-klokke { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .2s; }
.ks-tid:hover .ks-tid-klokke, .ks-tid.er-aktiv .ks-tid-klokke { color: var(--pf-blekk); }
.ks-tid-strek { display: block; height: 4px; border-radius: 999px; background: #ece8f6; overflow: hidden; }
.ks-tid-strek b { display: block; height: 100%; background: #6712fb; transform: scaleX(0); transform-origin: left; }
.ks-tid.er-forbi .ks-tid-strek b, .ks-tid.er-aktiv .ks-tid-strek b { transform: scaleX(1); }
.ks-tid:focus-visible { outline: 2px solid #6712fb; outline-offset: 4px; border-radius: 8px; }

/* De to sidene */
.ks-sider { display: grid; gap: 16px; }
.ks-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid #ece4d8;
	border-radius: 28px;
	background: #fff;
	transition: background-color .8s ease, border-color .8s ease, color .8s ease;
}
.ks-merke { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--pf-blekk); font-size: 16px; font-weight: 800; transition: color .8s ease; }
.ks-merke-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 17px; transition: background-color .8s ease, color .8s ease; }
.ks-side--uten .ks-merke-ikon { background: #fdecec; color: #dc2626; }
.ks-side--med { border-color: #e2d8fb; }
.ks-side--med .ks-merke-ikon { background: #f1ebff; color: #6712fb; }

/* Lyset uten heltene følger klokka, og om kvelden sitter du der fortsatt */
.ks-side--uten[data-tone="morgen"] { background: #fff7ec; border-color: #f3e2cc; }
.ks-side--uten[data-tone="dag"] { background: #f7f8fc; border-color: #e6e8f2; }
.ks-side--uten[data-tone="ettermiddag"] { background: #fdf1e4; border-color: #f3dcc3; }
.ks-side--uten[data-tone="kveld"] { background: #20254a; border-color: #20254a; color: #fff; }
.ks-side--uten[data-tone="kveld"] .ks-merke { color: #fff; }
.ks-side--uten[data-tone="kveld"] .ks-merke-ikon { background: #2f3561; color: #fca5a5; }
.ks-side--uten[data-tone="kveld"] :is(.ks-du-topp, .ks-du-tekst) { color: #b9bcd8; }
.ks-side--uten[data-tone="kveld"] :is(.ks-du-topp b, .ks-du-tekst b) { color: #fff; }
.ks-side--uten[data-tone="kveld"] .ks-du-ikon { background: #2f3561; color: #fca5a5; }
.ks-side--uten[data-tone="kveld"] .ks-varsel { border-color: #333a68; background: #282e57; }
.ks-side--uten[data-tone="kveld"] .ks-varsel b { color: #fff; }
.ks-side--uten[data-tone="kveld"] .ks-varsel time { color: #9a9ec4; }

/* Varslene og kortene: det nyeste øverst, og plass til hele dagen */
.ks-varsler, .ks-kortene { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.ks-varsler { min-height: 216px; }
.ks-kortene { min-height: 288px; }

.ks-varsel { display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #eee7dc; border-radius: 16px; background: #fff; transition: opacity .4s ease, background-color .8s ease, border-color .8s ease; }
.ks-varsel.er-synlig { display: grid; }
.ks-varsel:not(.er-ny) { opacity: .6; }
.ks-varsel-prikk { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.ks-varsel b { min-width: 0; color: var(--pf-blekk); font-size: 14.5px; font-weight: 700; transition: color .8s ease; }
.ks-varsel time { color: var(--pf-gra); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.ks-kort { display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid #ebe5fb; border-radius: 18px; background: #fff; transition: opacity .4s ease; }
.ks-kort.er-synlig { display: grid; }
.ks-kort:not(.er-ny) { opacity: .72; }
.ks-kort-helt { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--flate); overflow: hidden; }
.ks-kort-helt img { width: 84%; height: auto; }
.ks-kort-tekst { display: grid; gap: 1px; min-width: 0; }
.ks-kort-tekst small { color: var(--aksent); font-size: 12px; font-weight: 800; }
.ks-kort-tekst b { color: var(--pf-blekk); font-size: 14.5px; font-weight: 700; line-height: 1.3; }

/* Knappen på kortet blir en grønn hake når det er gjort */
.ks-knapp { position: relative; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 14px; border-radius: 999px; background: #6712fb; color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap; outline: 0 solid rgba(51, 211, 145, 0); outline-offset: 0; }
.ks-knapp > * { grid-area: 1 / 1; transition: opacity .25s ease, transform .3s ease; }
.ks-knapp-gjort { display: grid; place-items: center; font-size: 17px; opacity: 0; transform: scale(.5); }
.ks-knapp-gjort svg { display: block; }
.ks-kort:is(:not(.er-ny), .er-gjort) .ks-knapp { width: 34px; padding: 0; background: #e3f6ec; color: #0a7444; }
.ks-kort:is(:not(.er-ny), .er-gjort) .ks-knapp-gjor { position: absolute; opacity: 0; transform: scale(.5); }
.ks-kort:is(:not(.er-ny), .er-gjort) .ks-knapp-gjort { opacity: 1; transform: none; }

/* Uten knapp er kortet noe som er planlagt, som oppsummeringen på mandag */
.ks-planlagt { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f1ebff; color: #6712fb; font-size: 16px; }

/* Deg nederst på hver side, i samme øyeblikk: ikonet, «Du», klokkeslettet
   og teksten, med den første setningen i fet skrift. Alle tekstene står i
   samme rute, så siden er like høy for hvert tidspunkt. Uten heltene følger
   boksen lyset på siden (currentColor), med heltene er den lilla. */
.ks-du { margin-top: auto; padding: 16px 18px 18px; border: 1px solid color-mix(in srgb, currentColor 10%, transparent); border-radius: 20px; background: color-mix(in srgb, currentColor 4%, transparent); transition: border-color .8s ease, background-color .8s ease; }
.ks-side--med .ks-du { border-color: #e9e1fd; background: #f8f5ff; }

.ks-tekster { display: grid; }
.ks-tekst { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.ks-tekst.er-ny { visibility: visible; }

.ks-du-topp { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--pf-gra); font-size: 13px; transition: color .8s ease; }
.ks-du-topp b { color: var(--pf-blekk); font-size: 14px; font-weight: 800; transition: color .8s ease; }
.ks-du-topp time { font-variant-numeric: tabular-nums; }
.ks-du-ikon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; transition: background-color .8s ease, color .8s ease; }
.ks-side--uten .ks-du-ikon { background: #fdecec; color: #dc2626; }
.ks-side--med .ks-du-ikon { background: #e3f6ec; color: #0a7444; }

.ks-du-tekst { margin: 0; color: var(--pf-gra); font-size: clamp(15.5px, .9rem + .25vw, 17.5px); line-height: 1.5; text-wrap: pretty; transition: color .8s ease; }
.ks-du-tekst b { color: var(--pf-blekk); font-weight: 700; transition: color .8s ease; }

@media (prefers-reduced-motion: no-preference) {
	.ks-tid.er-aktiv .ks-tid-strek b { animation: ks-tid 8s linear both; animation-play-state: paused; }
	.pf-kveld--side.er-paa .ks-tid.er-aktiv .ks-tid-strek b { animation-play-state: running; }
	.pf-kveld--side.er-paa .ks:hover .ks-tid.er-aktiv .ks-tid-strek b { animation-play-state: paused; }

	.ks-varsel.er-ny { animation: ks-inn .5s cubic-bezier(.34, 1.56, .64, 1) both, ks-summ .4s ease .55s; }
	.ks-kort.er-ny { animation: ks-inn .55s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
	.ks-kort.er-gjort .ks-knapp { animation: ks-trykk .6s ease; }
	.ks-tekst.er-ny { animation: ks-tekst .5s ease both; }
}

@keyframes ks-tid { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ks-inn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes ks-summ { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes ks-tekst { from { opacity: 0; transform: translateY(6px); } }
@keyframes ks-trykk {
	0% { transform: scale(1); outline: 0 solid rgba(51, 211, 145, .5); outline-offset: 0; }
	30% { transform: scale(.88); }
	100% { transform: scale(1); outline: 2px solid rgba(51, 211, 145, 0); outline-offset: 10px; }
}

@media (min-width: 860px) {
	.ks-sider { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 859px) {
	.ks-varsler, .ks-kortene { min-height: 0; }
}