/* FIG. 1 request trace (js/widgets/request-trace.js). Core tokens only, so both sets work
   with no theme code here. The root is its own size container: the drawing and the control
   row follow the figure's width, not the viewport's. */

.w-request-trace {
  container: w-request-trace / inline-size;
  max-width: 600px;
  margin-inline: auto;
}

/* drawing: one of three geometries, shown at 1:1 so the labels stay 12px */
.w-request-trace .rt-svg { display: none; width: 100%; height: auto; margin-inline: auto; }
.w-request-trace .rt-svg--narrow { display: block; max-width: 228px; }
.w-request-trace .rt-svg--tall { max-width: 302px; }
.w-request-trace .rt-svg--wide { max-width: 478px; }
@container w-request-trace (min-width: 302px) {
  .w-request-trace .rt-svg--narrow { display: none; }
  .w-request-trace .rt-svg--tall { display: block; }
}
@container w-request-trace (min-width: 476px) {
  .w-request-trace .rt-svg--tall { display: none; }
  .w-request-trace .rt-svg--wide { display: block; }
}
/* a roomy figure (the project page's drawing field on desktop): the wide drawing grows to fill it */
@container w-request-trace (min-width: 540px) {
  .w-request-trace .rt-svg--wide { max-width: 100%; }
}

/* parts: pending, done (inked), current (accent) */
.w-request-trace .rt-edge { fill: none; stroke: var(--pending); stroke-width: 1.2; }
.w-request-trace .rt-node { fill: var(--panel); stroke: var(--pending); stroke-width: 1.2; }
.w-request-trace .rt-edge.is-done,
.w-request-trace .rt-node.is-done { stroke: var(--ink); stroke-width: 1.4; }
.w-request-trace .rt-edge.is-on,
.w-request-trace .rt-node.is-on { stroke: var(--accent); stroke-width: 2.6; }

.w-request-trace .rt-label { font-family: var(--font-mono); font-size: 12px; font-weight: 400; fill: var(--ink); }
.w-request-trace .rt-label--b { font-weight: 600; }
.w-request-trace .rt-label--m { fill: var(--ink-2); }

/* caption: every step's text shares one grid cell; the hidden copies hold the height */
.w-request-trace .rt-caption { display: grid; margin-top: 12px; }
.w-request-trace .rt-line { grid-area: 1 / 1; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.w-request-trace .rt-sizer { visibility: hidden; }
.w-request-trace .rt-step-n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent);
}
@container w-request-trace (min-width: 476px) {
  .w-request-trace .rt-line { font-size: 16px; }
}

/* controls: five step buttons and NEXT STEP. Narrow figures stack them (phone artboard);
   wider ones put them on one row (desktop artboard). */
.w-request-trace .rt-controls { margin-top: 12px; }
.w-request-trace .rt-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
@container w-request-trace (min-width: 260px) {
  .w-request-trace .rt-steps { gap: 6px; }
}
.w-request-trace .rt-step {
  min-width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1;
  touch-action: manipulation;
}
.w-request-trace .rt-step[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.w-request-trace .rt-next {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--sheet);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.2;
  touch-action: manipulation;
}

/* hover only where there is a pointer that hovers, so a tapped button does not stay lit */
@media (hover: hover) {
  .w-request-trace .rt-step:hover { background: var(--hover); }
  .w-request-trace .rt-step[aria-current="step"]:hover { background: var(--accent); }
  .w-request-trace .rt-next:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}

@container w-request-trace (min-width: 380px) {
  .w-request-trace .rt-controls { display: flex; align-items: center; gap: 6px; }
  .w-request-trace .rt-steps { display: flex; gap: 6px; }
  .w-request-trace .rt-step { width: 44px; }
  .w-request-trace .rt-next { width: auto; min-width: 136px; margin: 0 0 0 auto; }
}

/* motion: colour changes ease in, and after a step is picked its lit edges march for
   2.5 s (under the 5 s pause threshold), then settle solid. None of it under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .w-request-trace .rt-edge,
  .w-request-trace .rt-node { transition: stroke .2s ease, stroke-width .2s ease; }
  .w-request-trace .rt-step,
  .w-request-trace .rt-next { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
  .w-request-trace.is-animated .rt-edge.is-on { animation: w-request-trace-ants .5s linear 5; }
}
@keyframes w-request-trace-ants {
  from { stroke-dasharray: 5 3; stroke-dashoffset: 16; }
  to { stroke-dasharray: 5 3; stroke-dashoffset: 0; }
}

/* Windows high contrast: keep the three states apart with system colours */
@media (forced-colors: active) {
  .w-request-trace .rt-svg { forced-color-adjust: none; }
  .w-request-trace .rt-edge,
  .w-request-trace .rt-node { stroke: GrayText; }
  .w-request-trace .rt-node { fill: Canvas; }
  .w-request-trace .rt-edge.is-done,
  .w-request-trace .rt-node.is-done { stroke: CanvasText; }
  .w-request-trace .rt-edge.is-on,
  .w-request-trace .rt-node.is-on { stroke: Highlight; }
  .w-request-trace .rt-label,
  .w-request-trace .rt-label--m { fill: CanvasText; }
  .w-request-trace .rt-step[aria-current="step"],
  .w-request-trace .rt-step[aria-current="step"]:hover {
    forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText;
  }
}