/* Workflow trails (design language v2): hairline square nodes, single 1px strokes, small-caps labels with a serif italic
   sub-line, one blue corner-fading edge on the last node. The default state is the finished diagram (no JS, reduced
   motion, old browsers). Motion is an enhancement: a timed one-shot when the diagram scrolls into view, and on Replay. */

.ix-trail {
  --trail-step: 220ms;
  --trail-fixed: rgb(255 176 40);
  --trail-stroke: 1.25px;
  margin: var(--s-6) 0;
  color: var(--text-1);
  container-type: inline-size;
}

[data-theme="light"] .ix-trail { --trail-fixed: rgb(158 80 0); }

.ix-trail__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Two drawings per figure; the narrow one is a vertical layout so labels stay at least 14px on a phone. Capped and left-aligned with the controls so a ~700px column does not
   leave a wide empty margin on both sides. */
.ix-trail__svg--tall { display: none; max-width: 420px; margin-inline: 0; }
@container (max-width: 719px) {
  .ix-trail__svg--wide { display: none; }
  .ix-trail__svg--tall { display: block; }
}

.ix-trail text { fill: currentColor; text-anchor: middle; }
.ix-trail .tr-label { font: 500 20px/1 var(--font-sans); letter-spacing: 0.1em; }
.ix-trail .tr-sub { font: italic 400 22px/1 var(--font-serif); fill: var(--text-2); }
.ix-trail .tr-num { font: italic 400 26px/1 var(--font-serif); }
.ix-trail .tr-tag text { font: 500 20px/1 var(--font-sans); fill: var(--text-3); }
.ix-trail .tr-stamp text, .ix-trail .tr-flash text { font: 500 20px/1 var(--font-sans); letter-spacing: 0.12em; }
.ix-trail__svg--tall .tr-label { font-size: 15px; letter-spacing: 0.08em; text-anchor: start; }
.ix-trail__svg--tall .tr-sub { font-size: 18px; text-anchor: start; }
.ix-trail__svg--tall .tr-num { font-size: 22px; }
.ix-trail__svg--tall .tr-tag text { font-size: 14px; }
.ix-trail__svg--tall .tr-stamp text, .ix-trail__svg--tall .tr-flash text { font-size: 14px; letter-spacing: 0.1em; }

.ix-trail .tr-tag rect, .ix-trail .tr-stamp rect, .ix-trail .tr-flash rect {
  fill: none;
  stroke: var(--ix-hair);
  stroke-width: var(--trail-stroke);
}
.ix-trail .tr-stamp rect { stroke: var(--ix-rule); }
.ix-trail .tr-flash rect { stroke: var(--trail-fixed); }

.ix-trail .tr-mark, .ix-trail .tr-ink, .ix-trail .tr-check {
  fill: none;
  stroke: var(--ix-rule);
  stroke-width: var(--trail-stroke);
  stroke-linejoin: miter;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.ix-trail .tr-ink { stroke: var(--ix-rule); }
.ix-trail .tr-check { stroke: currentColor; }
.ix-trail .tr-check--fixed { stroke: var(--trail-fixed); }

.ix-trail .tr-edge-line { stroke-width: calc(var(--trail-stroke) + 0.5px); }
.ix-trail .tr-edge-stop-a, .ix-trail .tr-edge-stop-b { stop-color: var(--ix-blue); }
.ix-trail .tr-edge-stop-b, .ix-trail .tr-wash-stop-b { stop-opacity: 0; }
.ix-trail .tr-wash-stop-a, .ix-trail .tr-wash-stop-b { stop-color: var(--ix-blue); }
.ix-trail .tr-wash-stop-a { stop-opacity: var(--ix-wash-on); }

/* Controls: plain small-caps text buttons below the diagram. */
.ix-trail__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
}

.ix-trail__btn {
  min-height: 44px;
  padding: 0 var(--s-1);
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--ix-t-fast) var(--ix-ease);
}

@media (hover: hover) {
  .ix-trail__btn:hover { color: var(--text-1); }
}

.ix-trail__btn:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 2px; }

/* Motion: only when the visitor has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .tr-mark, .tr-ink { --kf: ix-trail-draw; }
  .tr-check { --kf: ix-trail-draw; --dur: var(--ix-t-swap); --lag: 700ms; }
  .tr-node, .tr-edge { --kf: ix-trail-fade; --dur: var(--ix-t-swap); --lag: 450ms; }
  .tr-stamp, .tr-flash { --kf: ix-trail-fade; --dur: var(--ix-t-swap); --lag: 800ms; }
  .tr-late { --kf: ix-trail-fade; --dur: var(--ix-t-swap); --lag: 1000ms; }

  /* Timed one-shot, started by ix-trail.js. */
  .ix-trail.is-armed :is(.tr-mark, .tr-ink, .tr-check, .tr-node, .tr-edge, .tr-late, .tr-stamp, .tr-flash) {
    animation: var(--kf) var(--dur, var(--ix-t-stroke)) var(--ix-ease) calc(var(--i, 0) * var(--trail-step) + var(--lag, 0ms)) both paused;
  }
  .ix-trail.is-armed.is-playing :is(.tr-mark, .tr-ink, .tr-check, .tr-node, .tr-edge, .tr-late, .tr-stamp, .tr-flash) {
    animation-play-state: running;
  }

  /* Only the last node breathes, and only its edge: opacity, slow. */
  .tr-edge-line { animation: ix-trail-pulse 4.4s ease-in-out infinite; }

  .ix-trail.is-paused.is-playing :is(.tr-mark, .tr-ink, .tr-check, .tr-node, .tr-edge, .tr-late, .tr-stamp, .tr-flash, .tr-edge-line) {
    animation-play-state: paused;
  }

  @keyframes ix-trail-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes ix-trail-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ix-trail-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
}