/* GF Livslinje – utseende enligt GF:s grafiska profil. Byt ut filen för annan profil. */
.gf-livslinje {
  --ll-bla: #1F55A6;
  --ll-rod: #A23336;
  --ll-gra-bg: #F5F6F9;
  --ll-morkgra: #32373C;
  --ll-linje: #D9DDE5;
  font-size: 1rem;
  line-height: 1.5;
}
.gf-livslinje a { color: var(--ll-bla); }
.gf-livslinje .ll-sok { background: var(--ll-gra-bg); border-top: 4px solid var(--ll-bla); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.gf-livslinje .ll-rad { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: .75rem; }
.gf-livslinje .ll-rad label { flex: 1 1 12rem; display: flex; flex-direction: column; font-weight: 600; font-size: .9rem; color: var(--ll-morkgra); }
.gf-livslinje input[type=text], .gf-livslinje input[type=email], .gf-livslinje textarea {
  font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid #B8BFCC; border-radius: 3px; background: #fff; margin-top: .25rem; width: 100%; box-sizing: border-box;
}
.gf-livslinje .ll-knappar { display: flex; gap: .75rem; align-items: center; }
.gf-livslinje .ll-knapp { display: inline-block; background: var(--ll-bla); color: #fff !important; border: 0; border-radius: 3px; padding: .5rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.gf-livslinje .ll-knapp.ll-sekundar { background: var(--ll-morkgra); }
.gf-livslinje .ll-hjalp { margin-top: .75rem; font-size: .9rem; }
.gf-livslinje .ll-hjalp summary { cursor: pointer; color: var(--ll-bla); }
.gf-livslinje .ll-antal { font-weight: 600; }
.gf-livslinje .ll-fel { color: var(--ll-rod); font-weight: 600; }
.gf-livslinje .ll-ok { color: #1E7B34; font-weight: 600; }
.gf-livslinje .ll-tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gf-livslinje .ll-tabell th { text-align: left; background: var(--ll-gra-bg); border-bottom: 2px solid var(--ll-bla); padding: .4rem .5rem; }
.gf-livslinje .ll-tabell td { border-bottom: 1px solid var(--ll-linje); padding: .4rem .5rem; vertical-align: top; }
.gf-livslinje .ll-fodelsenamn { display: block; font-size: .85rem; color: #5B6270; }
.gf-livslinje .ll-sidor { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.gf-livslinje .ll-namn { color: var(--ll-bla); margin-bottom: .25rem; }
.gf-livslinje .ll-ingress { color: var(--ll-morkgra); }
.gf-livslinje .ll-tidslinje { list-style: none; margin: 1.5rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--ll-bla); }
.gf-livslinje .ll-nod { position: relative; margin: 0 0 1.5rem; padding: .75rem 1rem; background: var(--ll-gra-bg); }
.gf-livslinje .ll-nod::before { content: ""; position: absolute; left: calc(-1.5rem - 9px); top: 1rem; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--ll-bla); }
.gf-livslinje .ll-nod-dod::before { background: var(--ll-morkgra); border-color: var(--ll-morkgra); }
.gf-livslinje .ll-nod-rubrik { margin-bottom: .5rem; }
.gf-livslinje .ll-ar { font-weight: 700; font-size: 1.15rem; color: var(--ll-bla); }
.gf-livslinje .ll-nod-dod .ll-ar { color: var(--ll-morkgra); }
.gf-livslinje .ll-kalla { font-size: .85rem; color: #5B6270; margin-left: .5rem; }
.gf-livslinje dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0; }
.gf-livslinje dt { font-weight: 600; color: var(--ll-morkgra); }
.gf-livslinje dd { margin: 0; }
.gf-livslinje .ll-lank { font-size: .85rem; color: #5B6270; margin: .5rem 0 0; }
.gf-livslinje .ll-flagga, .gf-livslinje .ll-osaker { color: var(--ll-rod); }
.gf-livslinje .ll-citera { font-size: .85rem; color: #5B6270; }
.gf-livslinje .ll-rattelse { margin-top: 1rem; border-top: 1px solid var(--ll-linje); padding-top: .75rem; }
.gf-livslinje .ll-rattelse summary { cursor: pointer; color: var(--ll-bla); font-weight: 600; }
.gf-livslinje .ll-rattelse label { display: block; margin: .5rem 0; font-weight: 600; font-size: .9rem; }
.gf-livslinje .ll-dold { position: absolute; left: -9999px; }
.gf-livslinje .ll-kalla-fot { font-size: .8rem; color: #5B6270; margin-top: 2rem; border-top: 1px solid var(--ll-linje); padding-top: .5rem; }
/* Delad vy: träfflista till vänster, livslinje till höger */
.gf-livslinje .ll-delad { display: grid; grid-template-columns: minmax(15rem, 2fr) 5fr; gap: 1.5rem; align-items: start; }
.gf-livslinje .ll-delad-lista { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; border: 1px solid var(--ll-linje); background: #fff; }
.gf-livslinje .ll-delad-lista .ll-antal, .gf-livslinje .ll-delad-lista > p { margin: 0; padding: .5rem .75rem; background: var(--ll-gra-bg); border-bottom: 2px solid var(--ll-bla); font-size: .9rem; }
.gf-livslinje .ll-traffar { list-style: none; margin: 0; padding: 0; }
.gf-livslinje .ll-traffar li { border-bottom: 1px solid var(--ll-linje); }
.gf-livslinje .ll-traffar a { display: block; padding: .45rem .75rem; text-decoration: none; color: var(--ll-morkgra); border-left: 4px solid transparent; }
.gf-livslinje .ll-traffar a:hover, .gf-livslinje .ll-traffar a:focus { background: var(--ll-gra-bg); outline: none; }
.gf-livslinje .ll-traffar a:focus-visible { box-shadow: inset 0 0 0 2px var(--ll-bla); }
.gf-livslinje .ll-traffar .ll-aktiv a { background: #E6EDF8; border-left-color: var(--ll-bla); }
.gf-livslinje .ll-t-namn { display: block; font-weight: 600; color: var(--ll-bla); }
.gf-livslinje .ll-t-fodelsenamn, .gf-livslinje .ll-t-datum, .gf-livslinje .ll-t-ort { display: block; font-size: .85rem; color: #5B6270; }
.gf-livslinje .ll-t-fodelsenamn { font-style: italic; }
.gf-livslinje .ll-delad-lista .ll-sidor { margin: 0; padding: .5rem; font-size: .9rem; background: var(--ll-gra-bg); }
.gf-livslinje .ll-delad-detalj { min-height: 12rem; transition: opacity .15s; }
.gf-livslinje .ll-delad-detalj.ll-laddar { opacity: .45; }
.gf-livslinje .ll-delad-detalj .ll-namn { margin-top: 0; }
.gf-livslinje .ll-valj { color: #5B6270; padding: 2rem 1rem; border: 2px dashed var(--ll-linje); text-align: center; }
@media (max-width: 800px) {
  .gf-livslinje .ll-delad { grid-template-columns: 1fr; }
  .gf-livslinje .ll-delad-lista { position: static; max-height: 22rem; }
}
@media (max-width: 600px) {
  .gf-livslinje .ll-tabell thead { display: none; }
  .gf-livslinje .ll-tabell tr { display: block; border-bottom: 1px solid var(--ll-linje); padding: .4rem 0; }
  .gf-livslinje .ll-tabell td { display: block; border: 0; padding: .1rem .25rem; }
  .gf-livslinje .ll-tabell td:not(:first-child)::before { content: attr(data-l) ": "; font-weight: 600; color: var(--ll-morkgra); }
  .gf-livslinje .ll-tabell td:empty { display: none; }
  .gf-livslinje dl { grid-template-columns: 1fr; }
}