.timeline {
  padding-bottom: var(--spacing-12);
  overflow-x: clip;

  .container {
    position: relative;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--spacing-6);
  }

  &[data-active="0"] {
    --tl-flow: var(--brand-70);
  }

  &[data-active="1"],
  &[data-active="2"] {
    --tl-flow: var(--indigo-60);
  }

  /* Per-sheet accent: first sheet = green, others = indigo.
     Both .tab and .panel carry a matching data-index. */
  .tab,
  .panel {
    --tl-accent: var(--indigo-60);
    --tl-accent-rgb: 93, 114, 221;
    --tl-pill: var(--indigo-60);
    --tl-pill-bg: rgba(93, 114, 221, 0.12);
    --tl-pill-text: var(--indigo-60);
  }

  .tab[data-index="0"],
  .panel[data-index="0"] {
    --tl-accent: var(--brand-70);
    --tl-accent-rgb: 0, 202, 151;
    --tl-pill: var(--brand-70);f
    --tl-pill-bg: rgba(0, 202, 151, 0.14);
    --tl-pill-text: var(--brand-50);
  }

  .tabs-shell {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: 0 auto var(--spacing-10);
  }

  .tabs {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    margin: 0;
    padding: 0 5px;
    border-radius: 10rem;
    border: 1px solid var(--gray-90);
    background: #eef1f6;
  }

  .tab-bridge {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
  }

  .tab-bridge-line {
    stroke: var(--tl-flow, var(--brand-70));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: miter;
    opacity: 0.55;
    fill: none;
    transition: stroke 0.25s ease;
  }

  @media (min-width: 768px) {
    &.has-tab-bridge .tab-bridge {
      display: block;
    }
  }

  .tabs-shell[data-active="0"] {
    --tl-flow: var(--brand-70);
  }

  .tabs-shell[data-active="1"],
  .tabs-shell[data-active="2"] {
    --tl-flow: var(--indigo-60);
  }

  .tab-thumb {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10rem;
    background: var(--indigo-60);
    box-shadow: 0 1px 2px rgba(14, 24, 41, 0.2), 0 6px 14px rgba(14, 24, 41, 0.18);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.25s ease;
    pointer-events: none;
  }

  .tabs[data-active="0"] .tab-thumb {
    background: var(--brand-70);
  }

  .tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 1.5em;
    border: none;
    border-radius: 10rem;
    background: transparent;
    color: var(--gray-700);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease;

    i {
      font-size: 1em;
      opacity: 0.7;
      transition: opacity 0.25s ease;
    }

    &:hover:not(.is-active) {
      color: var(--gray-20);
    }

    &.is-active {
      background: var(--tl-pill);
      color: var(--base-white);
      box-shadow: 0 1px 2px rgba(14, 24, 41, 0.2), 0 6px 14px rgba(14, 24, 41, 0.18);

      i {
        opacity: 1;
      }
    }
  }

  /* When the sliding thumb is active (JS on), the pill lives on the thumb instead */
  .tabs.is-animated .tab.is-active {
    background: transparent;
    box-shadow: none;
  }

  .panels {
    position: relative;
    z-index: 2;
    display: grid;
  }

  .panel {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(var(--x, 56px));
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.7s;
    pointer-events: none;
  }

  .panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
    pointer-events: auto;
  }

  .panel.tl-instant {
    transition: none;
  }

  .steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);

    &::before {
      content: "";
      position: absolute;
      top: 26px;
      left: 25px;
      width: 2px;
      height: var(--tl-track, calc(100% - 52px));
      background: var(--gray-90);
    }

    &::after {
      content: "";
      position: absolute;
      top: 26px;
      left: 25px;
      width: 2px;
      height: var(--tl-progress, 0px);
      background: linear-gradient(var(--brand-70), var(--tl-accent));
      border-radius: 2px;
      transition: height 0.1s linear;
    }
  }

  .step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-5);
  }

  .marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(rgba(var(--tl-accent-rgb), 0.08), rgba(var(--tl-accent-rgb), 0.08)), var(--base-white);
    border: 1.5px solid rgba(var(--tl-accent-rgb), 0.28);
    color: var(--tl-accent);
    font-size: 1.8rem;

    .marker-dot {
      font-size: 0.45em;
    }
  }

  .step.is-first .marker {
    background: var(--tl-accent);
    border-color: transparent;
    color: var(--base-white);
    box-shadow: 0 0 0 5px rgba(var(--tl-accent-rgb), 0.15);
  }

  .step.is-last .marker {
    background: var(--gray-20);
    border-color: transparent;
    color: var(--base-white);
    box-shadow: 0 0 0 5px rgba(23, 23, 40, 0.12);
  }

  &.is-spy {
    .steps::before {
      display: none;
    }

    .step {
      transform: translateY(10px);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .step.is-active {
      transform: none;
    }

    .step-body {
      opacity: 0.4;
      transition: opacity 0.5s ease;
    }

    .step.is-active .step-body {
      opacity: 1;
    }

    .marker {
      transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease,
        box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .step:not(.is-first):not(.is-last) .marker {
      background: var(--base-white);
      border-color: var(--gray-90);
      color: var(--gray-50);
    }

    .step.is-active .marker {
      transform: scale(1.08);
    }

    .step.is-active:not(.is-first):not(.is-last) .marker {
      background: var(--tl-accent);
      border-color: transparent;
      color: var(--base-white);
      box-shadow: 0 0 0 5px rgba(var(--tl-accent-rgb), 0.15);
    }
  }

  .step-body {
    flex: 1;
    min-width: 0;
    padding-top: 13px;
  }

  .step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-3);
  }

  .title {
    margin: 0;
    font-size: clamp(1.7rem, 1.5rem + 0.9vw, 2rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.25;
    color: var(--gray-20);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.8em;
    border-radius: 10rem;
    font-size: 1.3rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.2;
    white-space: nowrap;

    i {
      font-size: 0.9em;
    }

    background: var(--tl-pill-bg);
    color: var(--tl-pill-text);
  }

  .detail {
    margin-top: var(--spacing-1);
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--gray-700);
    text-wrap: pretty;

    p {
      margin: 0;

      & + p {
        margin-top: 0.4em;
      }
    }

    strong,
    b {
      font-weight: var(--weight-bold);
      color: var(--brand-50);
    }
  }

  .repeat-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
    margin-left: calc(52px + var(--spacing-5));
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    background: rgba(93, 114, 221, 0.08);
    border: 1px solid rgba(93, 114, 221, 0.2);

    > i {
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--indigo-60);
      font-size: 1.6rem;
    }
  }

  .repeat-body {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--gray-700);

    h2,
    h3,
    h4 {
      margin: 0 0 0.25em;
      font-size: 1.6rem;
      font-weight: var(--weight-extrabold);
      color: var(--gray-20);
    }

    p {
      margin: 0;
    }

    strong,
    b {
      color: var(--gray-20);
    }
  }

  .estimate-note {
    margin-top: var(--spacing-8);
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--gray-700);

    p {
      margin: 0;
    }
  }
}

.timeline .panel.tl-instant .step,
.timeline .panel.tl-instant .step-body,
.timeline .panel.tl-instant .marker {
  transition: none;
}


@media (prefers-reduced-motion: reduce) {
  .timeline .panel {
    transition: none;
  }

  .timeline .tab-thumb {
    transition: none;
  }

  .timeline.is-spy .step,
  .timeline.is-spy .step-body,
  .timeline.is-spy .marker {
    transition: none;
  }

  .timeline .steps::after {
    transition: none;
  }
}