/**
 * DFB Tidslinje — delte styles for fold-knap og head-bar.
 *
 * Den scoped (id-prefixede) CSS pr. tidslinje bliver fortsat genereret af
 * renderingsklassen og indlejret i selve outputtet (så farver/dimensioner
 * pr. instans kan styres). Denne fil indeholder kun det der er FÆLLES for
 * alle tidslinjer på siden — head-bar med titel + knap, og fold-tilstand.
 */

/* Head-bar: titel + knap på samme linje. */
.dfb-tl-head{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin:0 0 12px;
}

/* Titel-elementet udfylder pladsen til venstre, knappen ligger til højre. */
.dfb-tl-head > h3{
	flex:1 1 auto;
	margin:0;
	min-width:0;
}

/* Variant uden titel: kun knap, højrejusteret. */
.dfb-tl-head--no-titel{
	justify-content:flex-end;
	margin-bottom:4px;
}

/* Knappen: kompakt chevron + tekst. Farven arves fra --tl-linje, som
   wrapperen sætter inline pr. tidslinje, så hver knap matcher sin egen
   tidslinjefarve. */
.dfb-tl-head .tl-toggle{
	flex:0 0 auto;
	align-self:center;
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:transparent;
	border:1px solid transparent;
	cursor:pointer;
	color:var(--tl-linje, #8a2433);
	font:600 12px/1 inherit;
	padding:6px 9px;
	border-radius:6px;
	transition:background-color .14s ease, border-color .14s ease;
}
.dfb-tl-head .tl-toggle:hover,
.dfb-tl-head .tl-toggle:focus-visible{
	background:rgba(0,0,0,.045);
	border-color:rgba(0,0,0,.08);
	outline:none;
}
.dfb-tl-head .tl-toggle svg{
	transition:transform .18s ease;
	flex:none;
}

/* Knap-tekst: viser "Fold sammen" når udfoldet, "Vis tidslinje" når foldet. */
.dfb-tl-head .tl-toggle .tl-toggle-vis{ display:none; }
.dfb-tl-head .tl-toggle[aria-expanded="false"] .tl-toggle-vis{ display:inline; }
.dfb-tl-head .tl-toggle[aria-expanded="false"] .tl-toggle-fold{ display:none; }
.dfb-tl-head .tl-toggle[aria-expanded="false"] svg{ transform:rotate(-90deg); }

/* Når en sammenfoldet .tl ligger inde i et kort, skal kortets ramme også
   stramme op — ellers står der et tomt grå-felt under titlen. Selve
   skjulningen af rør/rækker/pil sker via scoped CSS i renderingsklassen
   (af specificitets-årsager — den scoped CSS pr. tidslinje ville ellers
   vinde over en uskoped .tl.tl-collapsed-regel her). */
.dfb-tl-kort:has(.tl.tl-collapsed){
	padding-top:14px;
	padding-bottom:14px;
}
.dfb-tl-kort:has(.tl.tl-collapsed) > .dfb-tl-head{
	margin-bottom:0;
	padding-bottom:0;
	border-bottom:none;
}

.dfb-tl-holder {
    margin-bottom: 30px;
}