/*
 * Få mer gjort med heltene, med en fane per bransje
 * (template-parts/sections/plattform/bransjer.php, fanene i bransjer.js).
 *
 * Fanene står i en hvit pille, den valgte er lys lilla. Panelet har teksten
 * til venstre og appen på en grå flate til høyre. Navnelappene og
 * godkjenningen spilles av med CSS når panelet vises, og starter på nytt når
 * man bytter fane (display: none til block). Bare flate farger.
 */

.pf-bransjer { overflow: clip; }
.bj-hode { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* ---------- Fanene ---------- */

.bj-faner-ramme { display: flex; justify-content: center; }

.bj-faner {
	display: flex;
	gap: 4px;
	max-width: 100%;
	padding: 6px;
	border: 1px solid #ebe9f2;
	border-radius: 999px;
	background: #fff;
	overflow-x: auto;
	scrollbar-width: none;
}

.bj-faner::-webkit-scrollbar { display: none; }

.bj-fane {
	flex: none;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #5c5c70;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.bj-fane:hover { color: var(--pf-blekk); }
.bj-fane[aria-selected="true"] { background: #ece6ff; color: #4c1d95; }
.bj-fane:focus-visible { outline: 3px solid #a020f0; outline-offset: 2px; }

/* Uten JavaScript står alle bransjene under hverandre, uten faner */
@media (scripting: none) {
	.bj-faner-ramme { display: none; }
	.bj-panel + .bj-panel { margin-top: 56px; }
}

@media (scripting: enabled) {
	.bj-panel:not(.er-aktiv) { display: none; }
}

/* ---------- Panelet ---------- */

.bj-paneler { margin-top: clamp(32px, 4vw, 52px); }

.bj-panel {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	align-items: center;
	gap: clamp(28px, 4.5vw, 72px);
}

.bj-panel:focus-visible { outline: 3px solid #a020f0; outline-offset: 8px; border-radius: 12px; }

/* Titlene beskriver personen og blir lengre, så de er litt mindre enn h3 ellers */
:root body .pf-bransjer h3.bj-tittel { --hh-fs: clamp(1.75rem, 1.15rem + 1.5vw, 2.6rem); --hh-lh: 1.08; }
.bj-tittel { margin: 0; text-wrap: balance; }
.bj-ingress { max-width: 30rem; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--pf-gra); }

.bj-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.bj-knapp { gap: 8px; }

.bj-lenke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--knapp, #6712fb);
	text-decoration: none;
}

.bj-lenke svg { transition: transform .25s var(--pf-myk); }
.bj-lenke:hover { text-decoration: underline; text-underline-offset: 4px; }
.bj-lenke:hover svg { transform: translateX(3px); }
.bj-lenke:focus-visible { outline: 3px solid #a020f0; outline-offset: 4px; border-radius: 4px; }

/* ---------- Appen på den grå flaten ---------- */

.bj-ramme { padding: clamp(18px, 2.4vw, 32px); border-radius: 28px; background: #f3f2f7; }

.bj-app {
	--a-lilla: #7c3aed;
	--a-groenn: #059669;
	--a-graa: #6b7280;
	--a-kant: #eceaf2;
	position: relative;
	padding: clamp(16px, 1.8vw, 24px);
	border: 1px solid #e6e4ee;
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
	color: #111827;
}

.bj-hilsen { display: grid; gap: 2px; margin: 0 0 16px; }
.bj-hilsen b { font-size: 1.35em; font-weight: 800; }
.bj-hilsen span { font-size: .9em; color: var(--a-graa); }

/* Forslagene og aktiviteten under hverandre, så titlene får plass */
.bj-kolonner { display: grid; gap: 12px; }
.bj-boks { padding: 14px; border: 1px solid var(--a-kant); border-radius: 16px; }
.bj-boks-topp { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.bj-boks-topp b { font-weight: 800; }

.bj-pille { display: inline-grid; padding: 2px 9px; border-radius: 999px; background: #f3eeff; font-size: .8em; font-weight: 800; color: #5b21b6; }
.bj-pille > span,
.bj-knapp-app > span { grid-area: 1 / 1; }
.bj-pille .bj-til,
.bj-knapp-app .bj-til { visibility: hidden; }

.bj-flis { display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: .7em; background: var(--bg, #f3eeff); overflow: hidden; }
.bj-flis img { width: 84%; height: auto; }
.bj-flis--epost { background: #eef4ff; color: #2563eb; font-size: 1.05em; }

.bj-forslag,
.bj-akt { display: grid; margin: 0; padding: 0; list-style: none; }

.bj-forslag { gap: 8px; }

.bj-forslag li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border: 1px solid var(--a-kant);
	border-radius: 12px;
}

.bj-forslag-tekst { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.bj-forslag-tekst small { font-size: .8em; font-weight: 700; color: var(--a-graa); }
.bj-forslag-tekst b { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bj-forslag-tekst em { overflow: hidden; font-size: .85em; font-style: normal; color: var(--a-graa); text-overflow: ellipsis; white-space: nowrap; }

.bj-knapp-app {
	display: inline-grid;
	flex: none;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--a-lilla);
	font-size: .82em;
	font-weight: 800;
	color: #fff;
}

.bj-knapp-app .bj-til { display: inline-flex; align-items: center; gap: 4px; }

.bj-akt li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--a-kant); }
.bj-akt li:first-child { padding-top: 0; border-top: 0; }
.bj-akt li > span:not(.bj-flis) { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.bj-akt b { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bj-akt small { overflow: hidden; font-size: .85em; color: var(--a-graa); text-overflow: ellipsis; white-space: nowrap; }
.bj-akt time { flex: none; font-size: .8em; color: #a1a1b3; }

/* ---------- Navnelappene ---------- */

.bj-lapp {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 14px 9px 9px;
	border: 1px solid #ebe9f2;
	border-radius: 14px;
	background: #fff;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
}

.bj-lapp > span:last-child { display: grid; }
.bj-lapp b { font-weight: 800; }
.bj-lapp small { color: var(--a-graa); }
.bj-lapp .bj-flis { width: 34px; height: 34px; border-radius: 10px; }

.bj-rund { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #10b981; font-size: 15px; font-weight: 800; color: #fff; }
.bj-rund--foto { object-fit: cover; background: #e5e7eb; }

.bj-peker { position: absolute; width: 22px; height: 22px; fill: var(--farge); }

/* Pekerne står øverst i hjørnet av lappen og peker på forslaget: helten på
   det første og det andre, og kunden på knappen til det første */
.bj-lapp--0 { top: 31%; left: 30%; }
.bj-lapp--0 .bj-peker { top: -16px; left: -12px; }
.bj-lapp--1 { top: 44%; left: -9%; }
.bj-lapp--1 .bj-peker { top: -16px; right: -10px; transform: scaleX(-1); }
.bj-lapp--person { top: 32%; right: -7%; }
.bj-lapp--person .bj-peker { top: -16px; left: -12px; }

/* Avspillingen når panelet vises: lappene kommer inn en om gangen, og
   kunden godkjenner det første forslaget */
@media (prefers-reduced-motion: no-preference) {
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-app--oversikt .bj-lapp { animation: bj-inn .55s cubic-bezier(.34, 1.56, .64, 1) both, bj-sveve 4s ease-in-out 1.2s infinite; }
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-app--oversikt .bj-lapp--1 { animation-delay: .7s, 1.8s; }
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-app--oversikt .bj-lapp--person { animation-delay: 1.5s, 2.6s; }
	.bj-paneler:not(.er-synlig) .bj-app--oversikt .bj-lapp { opacity: 0; }

	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-forslag-forst { animation: bj-godkjent-rad .01s linear 2.4s both; }
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-forslag-forst .bj-knapp-app { animation: bj-godkjent-knapp .01s linear 2.4s both; }
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-forslag-forst .bj-fra,
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-pille .bj-fra { animation: bj-ut .01s linear 2.4s both; }
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-forslag-forst .bj-til,
	.bj-paneler.er-synlig .bj-panel.er-aktiv .bj-pille .bj-til { animation: bj-fram .01s linear 2.4s both; }
}

/* Med redusert bevegelse står sluttbildet */
@media (prefers-reduced-motion: reduce) {
	.bj-forslag-forst { border-color: #a7f3d0; background: #f3fdf8; }
	.bj-forslag-forst .bj-knapp-app { background: var(--a-groenn); }
	.bj-forslag-forst .bj-fra,
	.bj-pille .bj-fra { visibility: hidden; }
	.bj-forslag-forst .bj-til,
	.bj-pille .bj-til { visibility: visible; }
}

@keyframes bj-inn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes bj-sveve { 50% { translate: 0 -4px; } }
@keyframes bj-godkjent-rad { to { border-color: #a7f3d0; background: #f3fdf8; } }
@keyframes bj-godkjent-knapp { to { background: #059669; } }
@keyframes bj-ut { to { visibility: hidden; } }
@keyframes bj-fram { to { visibility: visible; } }

.bj-fotnote { margin: 16px 0 0; font-size: 13px; text-align: right; color: var(--pf-gra-lys); }

/* ---------- Mindre skjermer ---------- */

@media (max-width: 1023px) {
	.bj-faner-ramme { justify-content: flex-start; }
	.bj-panel { grid-template-columns: minmax(0, 1fr); }
	.bj-lapp--1 { left: 0; }
	.bj-lapp--person { right: 0; }
}

@media (max-width: 640px) {
	.bj-faner-ramme { margin-inline: -24px; padding-inline: 24px; }
	.bj-fane { padding: 9px 16px; font-size: 15px; }
	.bj-ramme { margin-inline: -8px; padding: 12px; border-radius: 22px; }
	.bj-app { font-size: 12.5px; }
	.bj-forslag-tekst b { white-space: normal; }
	.bj-forslag-tekst em { display: none; }
	.bj-lapp { font-size: 11.5px; }
	.bj-lapp--1 { display: none; }
	.bj-lapp--0 { top: 30%; left: 20%; }
	.bj-lapp--person { top: 22%; right: 2%; }
}

/* ======================================================================
   Skjermene fra appen, en per bransje (template-parts/plattform/bransjescene.php)

   Alle elementene med .bj-a følger samme loop på --bj-t (10 s). Navnet på
   animasjonen står i style og sier når det skjer, for eksempel bj-fram-30
   (kommer fram 30 % ut i loopen). Keyframene for navnene står nederst og
   lages av scripts/forside_helt/tidslinje.py. Loopen står stille til
   seksjonen synes, og med redusert bevegelse står den i bildet 88 % ut.
   ====================================================================== */

.pf-bransjer { --bj-t: 10s; --bj-start: 0s; --bj-spill: running; }
.bj-paneler:not(.er-synlig) { --bj-spill: paused; }

@media (prefers-reduced-motion: reduce) {
	.pf-bransjer { --bj-spill: paused; --bj-start: -8.8s; }
}

.bj-a {
	animation-duration: var(--bj-t);
	animation-timing-function: cubic-bezier(.2, .7, .2, 1);
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-delay: var(--bj-start);
	animation-play-state: var(--bj-spill);
}

/* Like høye skjermer, så panelet ikke hopper når man bytter fane */
.bj-scene { min-height: 34em; }

/* Verdier som bytter: den gamle og den nye står oppå hverandre */
.bj-bytte,
.bj-st-hoyre,
.bj-hv-handling { display: inline-grid; }
.bj-bytte > *,
.bj-st-hoyre > *,
.bj-hv-handling > * { grid-area: 1 / 1; }

/* Navnelappene i skjermene står der style sier, med pekeren øverst til venstre */
.bj-lapp--fri .bj-peker { top: -16px; left: -12px; }
.bj-lapp--fri.bj-lapp--speil .bj-peker { right: -10px; left: auto; transform: scaleX(-1); }

/* ---------- Felles i skjermene ---------- */

.bj-st-topp { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--a-kant); }
.bj-st-topp > b { font-size: 1.05em; font-weight: 800; }
.bj-st-ikon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f1ecff; color: #6712fb; font-size: 15px; }
.bj-st-hoyre { justify-items: end; margin-left: auto; font-size: .85em; color: var(--a-graa); }
.bj-st-under { font-size: .85em; color: var(--a-graa); }
.bj-snart { padding: 3px 9px; border-radius: 999px; background: #fef3c7; font-size: .75em; font-weight: 800; color: #a16207; }

.bj-pille--groenn { background: #dcfce7; color: #15803d; }
.bj-pille--blaa { background: #dbeafe; color: #1d4ed8; }

.bj-flis--rund { border-radius: 50%; }
.bj-initialer { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; font-size: .8em; font-weight: 800; color: #3730a3; }
.bj-initialer--liten { width: 24px; height: 24px; font-size: .72em; }

.bj-merke { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: .75em; font-weight: 800; white-space: nowrap; }
.bj-merke--varm,
.bj-merke--roed { background: #fee2e2; color: #b91c1c; }
.bj-merke--groenn { background: #dcfce7; color: #15803d; }
.bj-merke--blaa { background: #dbeafe; color: #1d4ed8; }

.bj-status { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: #f1ecff; font-size: .78em; font-weight: 800; color: #5b21b6; white-space: nowrap; }
.bj-status--groenn { background: #dcfce7; color: #15803d; }
.bj-status--graa { background: #f4f4f7; color: var(--a-graa); }

/* ---------- Henvendelser ---------- */

.bj-filter { display: flex; gap: 6px; margin: 0 0 8px; }
.bj-filter span { padding: 4px 11px; border-radius: 999px; font-size: .82em; font-weight: 700; color: var(--a-graa); }
.bj-filter .er-valgt { background: #f1ecff; color: #5b21b6; }

.bj-hv { margin: 0; padding: 0; list-style: none; }

.bj-hv li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 10px;
	padding: 10px 6px;
	border-bottom: 1px solid var(--a-kant);
	overflow: hidden;
}

.bj-hv-ny { border-radius: 12px; background: #faf8ff; }
.bj-hv-tekst { display: grid; min-width: 0; line-height: 1.35; }
.bj-hv-tekst b { font-weight: 800; }
.bj-hv-tekst small { overflow: hidden; color: var(--a-graa); text-overflow: ellipsis; white-space: nowrap; }
.bj-kilde { padding: 3px 8px; border-radius: 6px; background: #f4f4f7; font-size: .75em; font-weight: 700; color: var(--a-graa); white-space: nowrap; }
.bj-hv-merker { min-width: 3.6em; }
.bj-hv-handling { justify-items: end; min-width: 9.5em; }
.bj-ring { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: #6712fb; font-size: .82em; font-weight: 800; color: #fff; }

.bj-tips { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f3ff; font-size: .9em; line-height: 1.45; }
.bj-tips b { display: block; font-weight: 800; }

/* ---------- Synlighet i Google ---------- */

.bj-sok { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 14px; border: 1px solid var(--a-kant); border-radius: 999px; color: var(--a-graa); }
.bj-rang { --rad: 2.7em; position: relative; margin: 0; padding: 0; list-style: none; }

.bj-rang li {
	position: relative;
	display: grid;
	grid-template-columns: 1.8em minmax(0, 1fr) auto;
	align-items: center;
	height: var(--rad);
	padding: 0 10px;
	border-bottom: 1px solid var(--a-kant);
	background: #fff;
}

.bj-rang i { font-style: normal; font-weight: 800; color: var(--a-graa); }
.bj-rang em { align-items: center; gap: 4px; font-size: .85em; font-style: normal; color: var(--a-graa); }
.bj-rang em:not(.bj-bytte),
.bj-rang em > span { display: inline-flex; align-items: center; gap: 4px; }
.bj-rang em svg { color: #f59e0b; }
.bj-rang .bj-rang-din { z-index: 1; border-bottom: 0; border-radius: 10px; background: #f1ecff; }
.bj-rang-din b,
.bj-rang-din i { color: #4c1d95; }

.bj-diff { margin-top: 14px; padding: 12px; border: 1px solid var(--a-kant); border-radius: 12px; }
.bj-diff-tittel { display: flex; align-items: center; gap: 8px; margin: 0; }
.bj-diff-tittel b { font-weight: 800; }
.bj-diff-tittel .bj-pille { margin-left: auto; }
.bj-diff-rad { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: .92em; }
.bj-diff-rad > span { color: var(--a-graa); }
.bj-gammel { position: relative; text-decoration: none; color: #b91c1c; }
.bj-gammel i { position: absolute; top: 52%; left: -2px; width: calc(100% + 4px); height: 2px; background: #dc2626; transform-origin: 0 50%; }
.bj-ny { font-weight: 800; color: #047857; }

/* ---------- AI-synlighet ---------- */

.bj-spm-boble { width: fit-content; max-width: 82%; margin: 0 0 0 auto; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: #7c3aed; font-weight: 700; color: #fff; }
.bj-svar { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--a-kant); border-radius: 14px; }
.bj-svar-hvem { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .85em; font-weight: 800; color: var(--a-graa); }
.bj-ai-ikon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #111827; color: #fff; font-size: 13px; }
.bj-svar-linje { margin: 6px 0 0; line-height: 1.5; }
.bj-svar mark { padding: 0 4px; border-radius: 4px; background: #f1ecff; font-weight: 800; color: #4c1d95; }
.bj-kilder { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.bj-kilde-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #f1ecff; font-size: .8em; font-weight: 800; color: #5b21b6; }
.bj-kilde-chip--graa { background: #f4f4f7; color: var(--a-graa); }
.bj-ai-tall { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
.bj-ai-tall small { color: var(--a-graa); }

/* ---------- Kampanjer ---------- */

.bj-kamp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bj-annonse { padding: 10px; border: 1px solid var(--a-kant); border-radius: 14px; }
.bj-annonse-hvem { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .85em; }
.bj-annonse-hvem b { font-weight: 800; }
.bj-annonse-hvem small { margin-left: auto; color: var(--a-graa); }
.bj-annonse-bilde { margin-top: 8px; border-radius: 10px; overflow: hidden; }
.bj-annonse-bilde svg { display: block; width: 100%; height: auto; }
.bj-annonse-tekst { margin: 8px 0 0; font-size: .9em; color: var(--a-graa); }
.bj-annonse-tekst b { display: block; font-weight: 800; color: #111827; }
.bj-annonse-knapp { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 8px; background: #111827; font-size: .8em; font-weight: 800; color: #fff; }
.bj-kamp-felt { display: grid; align-content: start; gap: 10px; }
.bj-felt { margin: 0; padding: 10px 12px; border: 1px solid var(--a-kant); border-radius: 12px; }
.bj-felt small { display: block; font-size: .78em; color: var(--a-graa); }
.bj-felt b { gap: 5px; margin-top: 2px; font-size: 1.05em; font-weight: 800; }
.bj-felt > b:not(.bj-bytte) { display: flex; align-items: center; }
.bj-glider { position: relative; display: block; height: 6px; margin: 12px 0 0; border-radius: 999px; background: #ece9f5; }
.bj-glider-fyll { position: absolute; top: 0; bottom: 0; left: 0; width: 83%; border-radius: inherit; background: #7c3aed; }
.bj-glider-grense { position: absolute; top: -4px; right: 0; bottom: -4px; width: 2px; background: #dc2626; }
.bj-glider-knott { position: absolute; top: 50%; left: 83%; width: 16px; height: 16px; border: 3px solid #7c3aed; border-radius: 50%; background: #fff; translate: -50% -50%; }
.bj-felt .bj-grense { margin-top: 8px; }

/* ---------- Resultater: trakten og kanalene ---------- */

.bj-trakt,
.bj-kanaler { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bj-trakt li { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 4em; align-items: center; gap: 10px; }
.bj-trakt-navn { font-size: .88em; }
.bj-trakt-bar { display: block; height: 12px; border-radius: 999px; background: #f1f0f6; overflow: hidden; }
.bj-trakt-bar i { display: block; width: var(--b); height: 100%; border-radius: inherit; background: #7c3aed; transform-origin: 0 50%; }
.bj-trakt-ny .bj-trakt-bar i { background: #10b981; }
.bj-trakt-tall { justify-items: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.bj-draape { position: absolute; top: 16%; left: 62%; width: 12px; height: 12px; border-radius: 50%; background: #10b981; }
.bj-varsel { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 12px; border: 1px solid #a7f3d0; border-radius: 12px; background: #f3fdf8; }
.bj-varsel > span:not(.bj-st-ikon) { display: grid; line-height: 1.35; }
.bj-varsel b { font-weight: 800; }
.bj-varsel small { color: var(--a-graa); }
.bj-varsel time { margin-left: auto; font-size: .8em; color: var(--a-graa); }

.bj-kanaler li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3em 4.6em; align-items: center; gap: 10px; }
.bj-kanal-navn { display: grid; line-height: 1.35; }
.bj-kanal-navn b { font-weight: 800; }
.bj-kanal-navn small { font-size: .8em; color: var(--a-graa); }
.bj-kanal-tall { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.bj-kanaler li:nth-child(1) .bj-trakt-bar i { background: #10b981; }
.bj-kanaler li:nth-child(2) .bj-trakt-bar i { background: #3b82f6; }
.bj-kanaler li:nth-child(3) .bj-trakt-bar i { background: #ef4444; }
.bj-mynt { position: absolute; top: 47%; left: 46%; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #f59e0b; }
.bj-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f5fa; }
.bj-sum small { color: var(--a-graa); }
.bj-sum b { font-weight: 800; color: #047857; }

/* ---------- Tilbud ---------- */

.bj-til-kunde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #f6f5fa; }
.bj-til-kunde small { color: var(--a-graa); }
.bj-til-kunde b { font-weight: 800; }
.bj-til-kunde > span:last-child { font-size: .85em; color: var(--a-graa); }
.bj-linjer { width: 100%; border-collapse: collapse; }
.bj-linjer td { padding: 9px 4px; border-bottom: 1px solid var(--a-kant); }
.bj-linjer td:last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bj-linjer tfoot td { border-bottom: 0; font-weight: 800; }
.bj-linjer tfoot td:first-child { font-weight: 700; color: var(--a-graa); }
.bj-send-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.bj-send { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: #6712fb; font-size: .9em; font-weight: 800; color: #fff; }
.bj-steg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bj-steg li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #f1ecff; font-size: .78em; font-weight: 800; color: #5b21b6; }
.bj-steg .bj-steg-signert { background: #dcfce7; color: #15803d; }
.bj-signatur { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.bj-signatur svg { width: 120px; height: 30px; }
.bj-signatur path { fill: none; stroke: #111827; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; }
.bj-signatur small { color: var(--a-graa); }

/* ---------- Meldinger ---------- */

.bj-chat { display: grid; gap: 8px; }
.bj-boble { width: fit-content; max-width: 82%; margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #f4f3f8; line-height: 1.45; }
.bj-boble--deg { justify-self: end; border-radius: 14px 14px 4px 14px; background: #7c3aed; font-weight: 700; color: #fff; }
.bj-boble--helt b { display: block; font-size: .8em; font-weight: 800; color: #5b21b6; }
/* Svaret fra Felix: prikkene mens han skriver, og så teksten på samme plass */
.bj-boble--svar { position: relative; }
.bj-prikker { position: absolute; top: 50%; left: 12px; display: flex; gap: 4px; translate: 0 -50%; }
.bj-prikker i { width: 6px; height: 6px; border-radius: 50%; background: #a1a1b3; animation: bj-prikk 1s ease-in-out infinite; }
.bj-prikker i:nth-child(2) { animation-delay: .15s; }
.bj-prikker i:nth-child(3) { animation-delay: .3s; }
.bj-system { display: flex; align-items: center; justify-self: center; gap: 6px; margin: 2px 0; font-size: .78em; color: var(--a-graa); }
.bj-system .bj-flis { width: 20px; height: 20px; border-radius: 6px; }
.bj-skriv { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; padding: 6px 6px 6px 14px; border: 1px solid var(--a-kant); border-radius: 999px; color: #a1a1b3; }
.bj-skriv i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #7c3aed; color: #fff; }

@keyframes bj-prikk { 50% { opacity: .3; transform: translateY(-.2em); } }

/* ---------- Skjermene på smale skjermer ---------- */

@media (max-width: 640px) {
	.bj-scene { min-height: 0; }
	.bj-hv li { grid-template-columns: 30px minmax(0, 1fr) auto; }
	.bj-hv .bj-kilde,
	.bj-hv .bj-hv-merker { display: none; }
	.bj-hv-handling { min-width: 0; }
	.bj-kamp { grid-template-columns: minmax(0, 1fr); }
	.bj-trakt li { grid-template-columns: 8em minmax(0, 1fr) 3.4em; }
	.bj-kanaler li { grid-template-columns: 6.2em minmax(0, 1fr) 2.8em; }
	.bj-kanaler .bj-merke { display: none; }
	/* Bare den siste navnelappen på mobil, så de ikke ligger oppå hverandre */
	.bj-scene-kropp > .bj-lapp--fri:not(:last-child) { display: none; }
}

/* ---------- Bevegelsene som ikke er vanlige tidspunkter ---------- */

/* Hele skjermen blunker mykt når loopen starter på nytt */
@keyframes bj-blunk { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* Den nye henvendelsen glir inn øverst i listen */
@keyframes bj-inn-rad-8 {
	0%, 8% { max-height: 0; padding-block: 0; opacity: 0; }
	16%, 100% { max-height: 5em; padding-block: 10px; opacity: 1; }
}

/* Klinikken går forbi tre andre, og de flytter seg ned ett hakk */
@keyframes bj-opp-34 { 0%, 34% { transform: none; } 46%, 100% { transform: translateY(calc(-3 * var(--rad))); } }
@keyframes bj-ned-34 { 0%, 34% { transform: none; } 46%, 100% { transform: translateY(var(--rad)); } }

/* Budsjettet dras fra 100 til 250 kr */
@keyframes bj-glid-40 { 0%, 40% { left: 33%; } 50%, 100% { left: 83%; } }
@keyframes bj-glid-fyll-40 { 0%, 40% { width: 33%; } 50%, 100% { width: 83%; } }

/* En ny verdivurdering faller ned i trakten */
@keyframes bj-fall-46 {
	0%, 46% { opacity: 0; transform: none; }
	48% { opacity: 1; transform: none; }
	56% { opacity: 1; transform: translateY(8.6em); }
	60%, 100% { opacity: 0; transform: translateY(8.6em); }
}

/* Budsjettet flyttes fra pynteputene opp til sengetøyet */
@keyframes bj-flytt-46 {
	0%, 46% { opacity: 0; transform: none; }
	48% { opacity: 1; transform: none; }
	58% { opacity: 1; transform: translateY(-5.4em); }
	62%, 100% { opacity: 0; transform: translateY(-5.4em); }
}

/* Signaturen tegnes */
@keyframes bj-tegn-74 { 0%, 74% { stroke-dashoffset: 1; } 84%, 100% { stroke-dashoffset: 0; } }

/* tidslinje start */
@keyframes bj-bort-36 { 0%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes bj-bort-46 { 0%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes bj-bort-48 { 0%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes bj-bort-58 { 0%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes bj-bort-62 { 0%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bj-bort-66 { 0%, 66% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes bj-bort-72 { 0%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes bj-fram-6 { 0%, 6% { opacity: 0; transform: translateY(.5em); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-8 { 0%, 8% { opacity: 0; transform: translateY(.5em); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-10 { 0%, 10% { opacity: 0; transform: translateY(.5em); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-14 { 0%, 14% { opacity: 0; transform: translateY(.5em); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-16 { 0%, 16% { opacity: 0; transform: translateY(.5em); } 20%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-18 { 0%, 18% { opacity: 0; transform: translateY(.5em); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-20 { 0%, 20% { opacity: 0; transform: translateY(.5em); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-26 { 0%, 26% { opacity: 0; transform: translateY(.5em); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-28 { 0%, 28% { opacity: 0; transform: translateY(.5em); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-30 { 0%, 30% { opacity: 0; transform: translateY(.5em); } 34%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-32 { 0%, 32% { opacity: 0; transform: translateY(.5em); } 36%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-38 { 0%, 38% { opacity: 0; transform: translateY(.5em); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-42 { 0%, 42% { opacity: 0; transform: translateY(.5em); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-44 { 0%, 44% { opacity: 0; transform: translateY(.5em); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-54 { 0%, 54% { opacity: 0; transform: translateY(.5em); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-56 { 0%, 56% { opacity: 0; transform: translateY(.5em); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-60 { 0%, 60% { opacity: 0; transform: translateY(.5em); } 64%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-62 { 0%, 62% { opacity: 0; transform: translateY(.5em); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes bj-fram-70 { 0%, 70% { opacity: 0; transform: translateY(.5em); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes bj-skriv-10 { 0%, 10% { clip-path: inset(0 100% 0 0); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bj-skriv-20 { 0%, 20% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bj-skriv-22 { 0%, 22% { clip-path: inset(0 100% 0 0); } 32%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bj-skriv-30 { 0%, 30% { clip-path: inset(0 100% 0 0); } 40%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bj-stempel-24 { 0%, 24% { opacity: 0; transform: scale(1.8); } 27% { opacity: 1; transform: scale(.92); } 29%, 100% { opacity: 1; transform: none; } }
@keyframes bj-stempel-30 { 0%, 30% { opacity: 0; transform: scale(1.8); } 33% { opacity: 1; transform: scale(.92); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes bj-stempel-32 { 0%, 32% { opacity: 0; transform: scale(1.8); } 35% { opacity: 1; transform: scale(.92); } 37%, 100% { opacity: 1; transform: none; } }
@keyframes bj-stempel-34 { 0%, 34% { opacity: 0; transform: scale(1.8); } 37% { opacity: 1; transform: scale(.92); } 39%, 100% { opacity: 1; transform: none; } }
@keyframes bj-stempel-38 { 0%, 38% { opacity: 0; transform: scale(1.8); } 41% { opacity: 1; transform: scale(.92); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes bj-stempel-42 { 0%, 42% { opacity: 0; transform: scale(1.8); } 45% { opacity: 1; transform: scale(.92); } 47%, 100% { opacity: 1; transform: none; } }
@keyframes bj-strek-12 { 0%, 12% { transform: scaleX(0); } 17%, 100% { transform: scaleX(1); } }
@keyframes bj-tone-10 { 0%, 10% { opacity: 0; } 13%, 100% { opacity: 1; } }
@keyframes bj-tone-26 { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } }
@keyframes bj-tone-36 { 0%, 36% { opacity: 0; } 39%, 100% { opacity: 1; } }
@keyframes bj-tone-46 { 0%, 46% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes bj-tone-48 { 0%, 48% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes bj-tone-54 { 0%, 54% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes bj-tone-58 { 0%, 58% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes bj-tone-62 { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes bj-tone-66 { 0%, 66% { opacity: 0; } 69%, 100% { opacity: 1; } }
@keyframes bj-tone-72 { 0%, 72% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes bj-tone-74 { 0%, 74% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes bj-trykk-42 { 0%, 42% { transform: none; } 43.5% { transform: scale(.9); } 45%, 100% { transform: none; } }
@keyframes bj-trykk-54 { 0%, 54% { transform: none; } 55.5% { transform: scale(.9); } 57%, 100% { transform: none; } }
@keyframes bj-vokse-8 { 0%, 8% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-10 { 0%, 10% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-14 { 0%, 14% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-16 { 0%, 16% { transform: scaleX(0); } 28%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-20 { 0%, 20% { transform: scaleX(0); } 32%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-22 { 0%, 22% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); } }
@keyframes bj-vokse-26 { 0%, 26% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
@keyframes bj-vindu-16-26 { 0%, 16% { opacity: 0; } 19%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes bj-vindu-46-74 { 0%, 46% { opacity: 0; } 49%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
/* tidslinje slutt */