/**
 * Livslinjen — stilar.
 *
 * Allt är vanlig HTML som positioneras absolut i en relativ ruta. Poängen är att
 * lägena då kan animeras av CSS: när en händelse byter årtal eller hoppar till
 * en annan bana glider den dit i stället för att teleportera.
 *
 * Fält, knappar och plattor kommer från ldwol-core.css — livslinjen och hjulet
 * ska se ut som samma produkt.
 */

.ldwol-lifeline {
	max-width: 860px;
}

/* ------------------------------------------------------------------ ytan */

.ldwol-ll__plot {
	position: relative;
	width: 100%;
	min-height: 300px;
	margin-top: .25rem;
	touch-action: none; /* dra i sidled ska inte skrolla sidan */

	/* ETT tempo för allt som rör sig. Chip, koppling, punkt, markör och bubbla
	   delar dessa två variabler, så ingenting kan glida i otakt med något
	   annat — det är den sortens skavank ögat läser som ryckighet. */
	--ldwol-ll-dur: 300ms;
	--ldwol-ll-ease: cubic-bezier( .25, .8, .35, 1 );

	/* Det som följer pekaren direkt (hjälplinjen, bubblan vid hover) ska inte
	   släpa efter — noll under hover, men i takt med resten under drag. */
	--ldwol-ll-follow: 0ms;
}

.ldwol-ll__plot.is-hovering {
	cursor: copy;
}

/* Under drag går allt snabbare — men fortfarande i samma takt som varandra. */
.ldwol-ll__plot.is-dragging {
	--ldwol-ll-dur: 160ms;
	--ldwol-ll-follow: 160ms;
	cursor: grabbing;
}

/* Egna lager, så att kopplingarna ALLTID hamnar bakom text och plattor —
   oberoende av i vilken ordning händelserna lades till. */
.ldwol-ll__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ldwol-ll__layer--wires { z-index: 1; }
.ldwol-ll__layer--dots  { z-index: 2; }
.ldwol-ll__layer--chips { z-index: 3; }
.ldwol-ll__layer--marks { z-index: 4; }

.ldwol-ll__layer--dots > *,
.ldwol-ll__layer--chips > *,
.ldwol-ll__layer--marks > * {
	pointer-events: auto;
}

/* Axeln ligger på den höjd JS räknat fram åt banorna ovanför. */
.ldwol-ll__axis {
	position: absolute;
	left: 0;
	right: 0;
	top: var( --ldwol-ll-axis, 100px );
	height: 2px;
	border-radius: 1px;
	background: var( --ldwol-track-hover );
	z-index: 0;
}

/* --------------------------------------------------------- hjälplinje vid hover */

.ldwol-ll__guide {
	position: absolute;
	top: 0;
	width: 1px;
	height: calc( var( --ldwol-ll-axis, 100px ) + 6px );
	margin-left: -0.5px;
	background: var( --ldwol-focus );
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease,
		left var( --ldwol-ll-follow ) var( --ldwol-ll-ease );
	z-index: 5;
}

.ldwol-ll__guide.is-visible {
	opacity: .35;
}

/* ------------------------------------------------------- koppling och punkt */

.ldwol-ll__wire {
	position: absolute;
	width: 1.5px;
	margin-left: -0.75px;
	border-radius: 1px;
	background: var( --ldwol-track-hover );
	transition: left var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		top var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		height var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		opacity 180ms ease;
}

.ldwol-ll__dot {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var( --ldwol-t3 );
	box-shadow: 0 0 0 2px var( --ldwol-surface );
	cursor: grab;
	transition: left var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		top var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		transform 140ms ease, opacity 180ms ease, background 180ms ease;
}

/* En händelse utan text är ihålig — då syns det vilken man just lade till. */
.ldwol-ll__dot.is-empty {
	background: var( --ldwol-surface );
	box-shadow: 0 0 0 2px var( --ldwol-t3 );
}

.ldwol-ll__dot:hover {
	transform: scale( 1.25 );
}

.ldwol-ll__wire.is-leaving,
.ldwol-ll__dot.is-leaving {
	opacity: 0;
}

/* ------------------------------------------------------------------- chip */

.ldwol-ll__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 4px 6px 4px 2px;
	background: var( --ldwol-surface );
	border: 1px solid var( --ldwol-track );
	border-radius: 9px;
	cursor: grab;
	transition: left var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		top var( --ldwol-ll-dur ) var( --ldwol-ll-ease ),
		opacity 180ms ease, transform 180ms ease, border-color 140ms ease;
}

.ldwol-ll__chip:hover {
	border-color: var( --ldwol-track-hover );
}

.ldwol-ll__chip:focus-within {
	border-color: var( --ldwol-focus );
}

/* Ännu inte ifylld: streckad kant och en antydd ton, samma språk som knappen
   "Lägg till" — den är ett tomrum som väntar på innehåll. */
.ldwol-ll__chip.is-empty {
	border-style: dashed;
	border-color: var( --ldwol-track-hover );
}

.ldwol-ll__chip.is-empty:focus-within {
	border-style: solid;
	border-color: var( --ldwol-focus );
}

.ldwol-ll__chip.is-dragging {
	cursor: grabbing;
	border-style: solid;
	border-color: var( --ldwol-focus );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .12 );
	z-index: 3;
}

.ldwol-ll__chip.is-entering,
.ldwol-ll__chip.is-leaving {
	opacity: 0;
	transform: translateY( 6px );
}

/* Greppet: tre punkter, ritade och inte satta som tecken. */
.ldwol-ll__grip {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 22px;
	padding: 0;
	font-size: 0;
	background: transparent;
	border: 0;
	border-radius: 5px;
	cursor: grab;
}

.ldwol-ll__grip::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 50%;
	width: 2px;
	height: 2px;
	margin: -1px 0 0 -1px;
	border-radius: 50%;
	color: var( --ldwol-text-muted );
	background: currentColor;
	box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

.ldwol-ll__grip:hover::before {
	color: var( --ldwol-text );
}

.ldwol-ll__grip:focus-visible {
	outline: 2px solid var( --ldwol-focus );
	outline-offset: 1px;
}

/* Textarea och inte input: bredden växer med texten upp till en läsbar gräns,
   och därefter radbryts den i stället för att klippas. */
/* Händelsens text är själva innehållet — den ska väga tyngst i chippet.
   Årtalet bredvid är en etikett och hålls medvetet mindre och dovare. */
.ldwol-ll__text {
	flex: 0 0 auto;
	min-width: 0;
	font-size: var( --ldwol-ll-text-size, 15px );
	color: var( --ldwol-text );
	white-space: pre-wrap;
	word-break: break-word;
}

.ldwol-ll__year {
	flex: 0 0 auto;
	width: 3.4rem;
	font-size: 12px;
	color: var( --ldwol-text-muted );
}

.ldwol-ll__year:focus {
	color: var( --ldwol-text );
}

.ldwol-ll__remove {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 22px;
	padding: 0;
	font-size: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
}

.ldwol-ll__remove::before,
.ldwol-ll__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 1.5px;
	border-radius: 1px;
	background: var( --ldwol-text-muted );
}

.ldwol-ll__remove::before { transform: translate( -50%, -50% ) rotate( 45deg ); }
.ldwol-ll__remove::after { transform: translate( -50%, -50% ) rotate( -45deg ); }

.ldwol-ll__remove:hover:not( :disabled ) {
	border-color: #e34948;
}

.ldwol-ll__remove:hover:not( :disabled )::before,
.ldwol-ll__remove:hover:not( :disabled )::after {
	background: #e34948;
}

.ldwol-ll__remove:focus-visible {
	outline: 2px solid var( --ldwol-focus );
	outline-offset: 1px;
}

.ldwol-ll__remove:disabled {
	opacity: .25;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ årtalsbubbla */

.ldwol-ll__bubble {
	position: absolute;
	top: calc( var( --ldwol-ll-axis, 100px ) + 16px );
	transform: translateX( -50% );
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease,
		left var( --ldwol-ll-follow ) var( --ldwol-ll-ease );
	z-index: 6;
}

.ldwol-ll__bubble.is-visible {
	opacity: 1;
}

/* Bara ett förslag så länge — dämpad tills man faktiskt tar tag i något. */
.ldwol-ll__bubble.is-ghost {
	opacity: .85;
	color: var( --ldwol-text-muted );
	border-style: dashed;
	box-shadow: none;
}

/* -------------------------------------------------------------- ändmarkörer */

/* Födelse och idag är punkter på skalan, inte dess ändar: en händelse utanför
   dem vidgar axeln, och då ska markörerna följa med dit de hör hemma. */
.ldwol-ll__mark {
	position: absolute;
	top: calc( var( --ldwol-ll-axis, 100px ) + 48px );
	transition: left var( --ldwol-ll-dur ) var( --ldwol-ll-ease );
}

/* Litet streck upp mot axeln, placerat där årtalet faktiskt ligger även när
   plattan knuffats in från kanten. */
.ldwol-ll__mark::before {
	content: "";
	position: absolute;
	top: -46px;
	left: var( --ldwol-ll-tick, 50% );
	width: 1.5px;
	height: 44px;
	margin-left: -0.75px;
	border-radius: 1px;
	background: var( --ldwol-track-hover );
}

/* "Född" har en årtalsväljare och "Idag" bara en siffra — men båda plattorna
   ska ha exakt samma höjd, annars ser tidsaxelns två ändar ut som två olika
   saker. Fast höjd i stället för att hoppas på att innehållet råkar matcha. */
.ldwol-ll__mark {
	height: 32px;
	box-sizing: border-box;
	padding: 0 10px;
}

/* ------------------------------------------------------------ årtalsväljare */

.ldwol-ll__yearctl {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

/* En vanlig <select> med alla år — det man förväntar sig av ett årtalsfält.
   Webbläsarens egen pil tas bort; bredden räknas ut för fyra siffror så att
   årtalet aldrig klipps. */
/* Bredare än årtalet behöver, med flit.
   Firefox ritar popupen i väljarens bredd, och listan har alltid en
   rullningslist eftersom den rymmer drygt hundra år. Räcker bredden inte till
   kortas varje rad av till "19…", vilket ser tokigt ut för ett årtal. Fyra
   siffror + radens marginaler + rullningslisten kräver knappt 4rem; 4.5 ger
   marginal för typsnitt som mäter annorlunda. */
.ldwol-ll__yearsel {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	width: 4.5rem;
	padding: 1px 2px;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --ldwol-text-muted );
	text-align: center;
	text-align-last: center;
	cursor: pointer;
}

.ldwol-ll__yearsel:hover,
.ldwol-ll__yearsel:focus {
	color: var( --ldwol-text );
}

/* Stegknapparna: bekväma, men ritade i vår stil i stället för webbläsarens. */
.ldwol-ll__steps {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ldwol-ll__step {
	position: relative;
	width: 15px;
	height: 10px;
	padding: 0;
	font-size: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
}

.ldwol-ll__step::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
}

.ldwol-ll__step--up::before {
	transform: translate( -50%, -60% );
	border-bottom: 4px solid var( --ldwol-text-muted );
}

.ldwol-ll__step--down::before {
	transform: translate( -50%, -40% );
	border-top: 4px solid var( --ldwol-text-muted );
}

.ldwol-ll__step:hover {
	background: var( --ldwol-surface-sunk );
}

.ldwol-ll__step--up:hover::before { border-bottom-color: var( --ldwol-focus ); }
.ldwol-ll__step--down:hover::before { border-top-color: var( --ldwol-focus ); }

.ldwol-ll__step:focus-visible {
	outline: 2px solid var( --ldwol-focus );
	outline-offset: 1px;
}

/* ------------------------------------------------------------- årsstreck */

.ldwol-ll__ticks {
	position: absolute;
	left: 0;
	right: 0;
	top: var( --ldwol-ll-axis, 100px );
	height: 9px;
	pointer-events: none;
	z-index: 0;
}

.ldwol-ll__ticks-minor,
.ldwol-ll__ticks-major {
	position: absolute;
	left: 0;
	right: 0;
	top: 2px;
}

/* Upprepade gradienter i stället för hundratals element. Perioden räknas ut i
   JS och skickas in som variabler. */
.ldwol-ll__ticks-minor {
	height: 3px;
	opacity: .55;
	background-image: repeating-linear-gradient( 90deg,
		var( --ldwol-track-hover ) 0 1px, transparent 1px var( --ldwol-ll-step, 20px ) );
}

/* Under några få pixlar per år blir årsstrecken bara grus. */
.ldwol-ll__ticks.is-dense .ldwol-ll__ticks-minor {
	display: none;
}

.ldwol-ll__ticks-major {
	height: 7px;
	background-image: repeating-linear-gradient( 90deg,
		var( --ldwol-track-hover ) 0 1.5px, transparent 1.5px var( --ldwol-ll-dec-step, 200px ) );
	background-position-x: var( --ldwol-ll-dec-offset, 0px );
}

.ldwol-ll__foot {
	display: flex;
	justify-content: center;
	margin-top: .9rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.ldwol-ll__chip,
	.ldwol-ll__wire,
	.ldwol-ll__dot,
	.ldwol-ll__mark,
	.ldwol-ll__bubble,
	.ldwol-ll__guide {
		transition: none;
	}
}

@media ( forced-colors: active ) {
	.ldwol-ll__chip { border-color: CanvasText; }
	.ldwol-ll__axis,
	.ldwol-ll__wire { background: CanvasText; }
	.ldwol-ll__dot { background: Highlight; }
}