/* Way-of-working path (ix-path.js), design language v2: a numbered rule with one stop per step and a ruled ledger
   for the chosen stop. Everything below applies only once JS has added .ix-path--on, so the plain ordered list is the
   no-JS and reduced-motion state. Wide: horizontal rule across the top. Phones: vertical rule on the left. */

.ix-path--on > .ix-path__src,
.ix-path--on > .rail__line { display: none; }

.ix-path__ui {
  --path-marker: 9px;
  --path-gutter: var(--s-5);
  display: grid;
  gap: var(--s-6);
}

/* The rule: one hairline through the stops, drawn behind them. Phones run it down the left edge. */
.ix-path__tabs { position: relative; display: grid; gap: var(--s-2); }

.ix-path__tabs::before {
  content: "";
  position: absolute;
  left: calc(var(--path-marker) / 2);
  top: var(--s-4);
  bottom: var(--s-4);
  width: 1px;
  background: var(--ix-rule);
  pointer-events: none;
}

/* The blue line grows from the first stop to the chosen one; --path-fill is the chosen tab's offset, set by ix-path.js. */
.ix-path__tabs::after {
  content: "";
  position: absolute;
  left: calc(var(--path-marker) / 2);
  top: var(--s-4);
  width: 1px;
  height: calc(var(--path-fill, 0px) + var(--path-marker) / 2);
  background: var(--ix-blue);
  pointer-events: none;
  transition: height var(--ix-t-reveal) var(--ix-ease);
}

.ix-path__stop {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--path-marker) + var(--path-gutter));
  border-color: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ix-path__stop:hover { border-color: var(--ix-hair); }

/* One selection box slides between stops (ix-path.js sets its position); the stops themselves carry no selected box. */
.ix-path__tabs .ix-path__stop.ix-box[aria-selected="true"] { background: none; border-color: transparent; }
.ix-path__tabs .ix-path__stop.ix-box[aria-selected="true"]::before { opacity: 0; animation: none; }

.ix-path__lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  box-sizing: border-box;
  width: var(--lens-w, 0);
  height: var(--lens-h, 0);
  translate: var(--lens-x, 0) var(--lens-y, 0);
  border: 1px solid var(--ix-hair);
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--ix-blue) var(--ix-wash-on), transparent) 0%, transparent 62%);
  pointer-events: none;
}

.ix-path__lens::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: linear-gradient(to bottom right, var(--ix-blue) 0%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ix-pulse 4.4s ease-in-out infinite;
}

.ix-path__lens.is-ready {
  transition: translate var(--ix-t-reveal) var(--ix-ease), width var(--ix-t-reveal) var(--ix-ease), height var(--ix-t-reveal) var(--ix-ease);
}

/* The stop marker sits on the rule: a small square, outlined, blue once passed, filled blue when chosen. */
.ix-path__stop::after {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--s-4);
  width: var(--path-marker);
  height: var(--path-marker);
  box-sizing: border-box;
  border: 1px solid var(--ix-rule);
  background: var(--bg-0);
  transition: border-color var(--ix-t-fast) var(--ix-ease), background var(--ix-t-fast) var(--ix-ease);
}

.ix-path__stop.is-done::after { border-color: var(--ix-blue); }
.ix-path__stop[aria-selected="true"]::after { border-color: var(--ix-blue); background: var(--ix-blue); }

.ix-path__num, .ix-path__name, .ix-path__line { display: block; }
.ix-path__stop[aria-selected="true"] .ix-path__num { color: var(--text-1); }
.ix-path__line { font-size: var(--fs-small); }

.ix-path__panel[hidden] { display: none; }
.ix-path__panel:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; }
.ix-path__panel.is-anim { animation: ix-path-in var(--ix-t-swap) var(--ix-ease) both; }
.ix-path__panel.is-anim .ix-path__row { animation: ix-path-row var(--ix-t-reveal) var(--ix-ease) both; }
.ix-path__panel.is-anim .ix-path__row:nth-child(2) { animation-delay: 70ms; }
.ix-path__panel.is-anim .ix-path__row:nth-child(3) { animation-delay: 140ms; }

.ix-path__rows { margin: 0; }

.ix-path__row {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
}

.ix-path__row dt { margin: 0; }
.ix-path__row dd { margin: 0; max-width: 42rem; }

@keyframes ix-path-row {
  from { opacity: 0; translate: calc(var(--dir, 1) * 24px) 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ix-path-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 640px) {
  .ix-path__tabs { grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: var(--s-4); }

  .ix-path__tabs::before {
    left: 0;
    right: 0;
    top: calc(var(--path-marker) / 2);
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .ix-path__tabs::after {
    left: 0;
    top: calc(var(--path-marker) / 2);
    width: calc(var(--path-fill, 0px) + var(--s-4) + var(--path-marker) / 2);
    height: 1px;
    transition-property: width;
  }

  .ix-path__stop { padding: var(--s-5) var(--s-4) var(--s-4); }
  .ix-path__stop::after { left: var(--s-4); top: 0; }

  .ix-path__row { grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-path__panel.is-anim, .ix-path__panel.is-anim .ix-path__row { animation: none; }
  .ix-path__tabs::after, .ix-path__lens.is-ready { transition: none; }
  .ix-path__stop::after { transition: none; }
}

/* Fallback (no JS, reduced motion): the original list keeps its rows, set as the same ruled ledger. */
[data-path]:not(.ix-path--on) .ix-path__rows { margin: var(--s-4) 0 0; border-top: 1px solid var(--ix-rule); }
[data-path]:not(.ix-path--on) .ix-path__rows > div { padding-block: var(--s-3); border-bottom: 1px solid var(--ix-hair); }
[data-path]:not(.ix-path--on) .ix-path__rows dt {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
[data-path]:not(.ix-path--on) .ix-path__rows dd { margin: var(--s-1) 0 0; color: var(--text-1); }
[data-path]:not(.ix-path--on) .ix-path__rows > div:last-child dd { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h4); }