/*
 * Tolklabbet — stilar för den delade tidslinjekomponenten
 * "Vägen till auktorisation". Hör ihop med timeline-auktorisation.js.
 *
 * Kopierat ordagrant från den godkända prototypen
 * (scratchpad/timeline-prototype.html) — endast de allmänna sidreglerna
 * (body/h1/.subtitle/.page) är uteslutna, eftersom de hör till
 * värdsidans egen layout, inte till komponenten.
 */
:root {
  --ink: #1a1a18;
  --paper: #f5f2eb;
  --cream: #ede9df;
  --gold: #c8a96e;
  --gold-light: #e8d5a8;
  --rust: #b85c38;
  --muted: #b5b0aa;
  --text-soft: #5c574f;
  --text-faint: #8a8477;
}

/* ---------- Tabs ---------- */
.timeline-auktorisation .tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:46px;
}
.timeline-auktorisation .tab-btn{
  border:1.5px solid var(--gold);
  background:var(--cream);
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  padding:10px 26px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s;
  font-family:inherit;
}
.timeline-auktorisation .tab-btn.active{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}
.timeline-auktorisation .tab-btn:hover{border-color:var(--rust);}

.timeline-auktorisation .panel{display:none;}
.timeline-auktorisation .panel.active{display:block;}

/* ================= DESKTOP TIMELINE ================= */
.timeline-auktorisation .lane{
  position:relative;
  height:470px;
  margin:0 auto 18px;
}
.timeline-auktorisation .baseline{
  position:absolute;
  top:112px;
  left:0;
  right:0;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-light));
}
.timeline-auktorisation .wait-emphasis{
  position:absolute;
  top:112px;
  transform:translateX(-50%);
}
.timeline-auktorisation .wait-emphasis .tick{
  width:2px;
  height:225px;
  background:var(--muted);
  margin:0 auto;
}
.timeline-auktorisation .wait-emphasis .wait-text{
  position:absolute;
  top:calc(225px + 14px);
  left:50%;
  transform:translateX(-50%);
  width:180px;
  text-align:center;
}
.timeline-auktorisation .wait-emphasis .wait-text .line1{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--rust);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.3;
}
.timeline-auktorisation .wait-emphasis .wait-text .line2{
  display:block;
  margin-top:4px;
  font-size:15px;
  font-weight:700;
  color:var(--rust);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.3;
}
.timeline-auktorisation .node{
  position:absolute;
  top:112px;
  transform:translate(-50%,-50%);
  width:150px;
}
.timeline-auktorisation .node .dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--gold);
  border:3px solid var(--paper);
  box-shadow:0 0 0 2px var(--gold);
  margin:0 auto;
  position:relative;
  z-index:2;
}
.timeline-auktorisation .node .date{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:130px;
  text-align:center;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--rust);
  font-weight:700;
  line-height:1.3;
}
.timeline-auktorisation .node .below{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  width:160px;
  text-align:center;
}
.timeline-auktorisation .node .below.wide{width:220px;}
.timeline-auktorisation .node .below.wide .title{width:170px;margin:0 auto;}
.timeline-auktorisation .node .below.narrow{width:130px;}
.timeline-auktorisation .node .title{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  hyphens:auto;
  overflow-wrap:break-word;
}
.timeline-auktorisation .node .caption{
  margin-top:7px;
  font-size:17px;
  color:var(--text-soft);
  line-height:1.5;
  hyphens:auto;
  overflow-wrap:break-word;
}

/* ================= MOBILE TIMELINE ================= */
.timeline-auktorisation .mobile-lane{display:none;}

@media (max-width:1159px){
  .timeline-auktorisation .lane{display:none;}
  .timeline-auktorisation .mobile-lane{
    display:block;
    padding-left:10px;
  }
  .timeline-auktorisation .m-row{
    position:relative;
    padding-left:28px;
    display:flex;
    flex-direction:column;
  }
  .timeline-auktorisation .m-row .m-dot{
    position:absolute;
    left:0;
    top:2px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--gold);
    border:3px solid var(--paper);
    box-shadow:0 0 0 2px var(--gold);
  }
  .timeline-auktorisation .m-row .m-date{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--rust);
    font-weight:700;
    margin-bottom:4px;
  }
  .timeline-auktorisation .m-row .m-title{
    font-size:19px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:4px;
  }
  .timeline-auktorisation .m-row .m-caption{
    font-size:17px;
    color:var(--text-soft);
    line-height:1.5;
    max-width:460px;
  }
  .timeline-auktorisation .m-connector{
    position:relative;
    margin-left:6px;
    width:2px;
    background:var(--gold-light);
  }
  .timeline-auktorisation .m-connector .m-wait-label{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--rust);
    font-weight:700;
    white-space:nowrap;
  }
  .timeline-auktorisation .m-connector .m-wait-label .m-wait-line2{
    display:block;
    margin-top:2px;
  }
}

@media (min-width:1160px){
  .timeline-auktorisation .mobile-lane{display:none;}
}

/* ---------- Footnote ---------- */
.timeline-auktorisation .footnote{
  max-width:720px;
  margin:50px auto 0;
  font-size:13px;
  color:var(--text-faint);
  text-align:center;
  line-height:1.6;
}