/* Horisontell, interaktiv tidslinje (js/tidslinje.js) */
.htl { margin: 1rem 0 2.5rem; user-select: none; -webkit-user-select: none; }

.htl-kort {
  background: var(--vit);
  border: 1px solid var(--kant);
  border-left: 4px solid var(--htl-farg, var(--rod-djup));
  border-radius: 8px;
  padding: 1rem 1.25rem;
  min-height: 7.2rem;
  transition: border-color .3s;
}
.htl-kort-ar {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  color: var(--htl-farg, var(--rod-djup));
  transition: color .3s;
}
.htl-kort-titel { font-weight: 500; font-size: 1rem; margin-top: .4rem; color: var(--text); }
.htl-kort-info { font-size: .85rem; color: var(--text-mjuk); margin-top: .15rem; }
.htl-kort-alder { font-size: .78rem; color: var(--text-mjuk); margin-top: .5rem; letter-spacing: .02em; }
.htl-kort-alder b { font-weight: 500; }
.htl-kort-inre { transition: opacity .2s, transform .2s; }
.htl-kort-inre.byter { opacity: 0; transform: translateY(4px); }

.htl-kontroller { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 .4rem; }
.htl-knapp {
  font: inherit; font-size: .8rem;
  border: 1px solid var(--kant); background: var(--vit); color: var(--text);
  border-radius: 999px; padding: .35rem .85rem; cursor: pointer; line-height: 1.2;
}
.htl-knapp:hover { border-color: var(--rod-djup); color: var(--rod-djup); }
.htl-knapp:focus-visible { outline: 2px solid var(--rod); outline-offset: 2px; }
.htl-raknare { margin-left: auto; font-size: .78rem; color: var(--text-mjuk); }
.htl-tips { font-size: .75rem; color: var(--text-mjuk); margin: 0 0 .25rem; }

.htl-bana {
  position: relative; height: 196px; margin: 0 14px; cursor: ew-resize; touch-action: pan-y;
  outline: none;
}
.htl-bana:focus-visible { box-shadow: 0 0 0 2px var(--rod); border-radius: 6px; }

.htl-linje, .htl-fyll {
  position: absolute; height: 4px; border-radius: 2px; margin-top: -2px;
}
.htl-linje { background: var(--kant); }
.htl-fyll { left: 0; top: 0; margin-top: 0; height: 100%; }
.htl-namn {
  position: absolute; font-size: .72rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}

.htl-band {
  position: absolute; border-radius: 4px; overflow: hidden;
  font-size: .68rem; color: var(--text-mjuk); white-space: nowrap; text-overflow: ellipsis;
  padding: 0 .35rem; box-sizing: border-box; pointer-events: none;
}
.htl-band-person { height: 18px; line-height: 16px; margin-top: -26px; border-bottom: 2px solid; }
.htl-band-mitt { display: flex; align-items: flex-end; justify-content: center; padding-bottom: .3rem; }

.htl-punkt {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid; background: var(--vit); box-sizing: border-box;
  transition: transform .2s, opacity .2s, box-shadow .2s; z-index: 2;
}
.htl-punkt.liten { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 1.5px; }
.htl-punkt.stor { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.htl-punkt.fylld { background: currentColor; }
.htl-punkt.framtid { opacity: .35; }
.htl-punkt.aktiv { transform: scale(1.6); opacity: 1; z-index: 3; box-shadow: 0 0 0 4px rgba(127,29,29,.12); }

.htl-axel { position: absolute; left: 0; right: 0; top: 168px; height: 1px; background: var(--kant); }
.htl-tick { position: absolute; top: 168px; width: 1px; height: 6px; background: #cfc5bb; }
.htl-tick-text {
  position: absolute; top: 177px; transform: translateX(-50%);
  font-size: .7rem; color: var(--text-mjuk);
}

.htl-markor {
  position: absolute; top: 24px; height: 148px; width: 2px; margin-left: -1px;
  background: var(--rod); z-index: 1; pointer-events: none;
}
.htl-handtag {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--rod); color: var(--vit); font-size: .75rem; font-weight: 500;
  border-radius: 999px; padding: .15rem .6rem; line-height: 1.4; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); z-index: 4;
}
.htl-markor, .htl-handtag { transition: left .45s cubic-bezier(.3,.7,.3,1); }
.htl-fyll { transition: width .45s cubic-bezier(.3,.7,.3,1); }
.htl.drar .htl-markor, .htl.drar .htl-handtag, .htl.drar .htl-fyll { transition: none; }

@media (max-width: 520px) {
  .htl-tick-text.udda { display: none; }
  .htl-kort-ar { font-size: 1.6rem; }
  .htl-tips { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .htl *, .htl-kort-inre { transition: none !important; }
}