arwm-action-fidelity {
  display: block;
  min-width: 0;
  margin-top: clamp(28px, 4vw, 52px);
}

.action-evidence {
  display: block;
}

.action-evidence .evidence-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
  column-gap: clamp(30px, 5vw, 72px);
  align-items: end;
}

.action-evidence .evidence-copy > .claim-number,
.action-evidence .evidence-copy > h3,
.action-evidence .evidence-copy > p:not(.claim-number) {
  grid-column: 1;
}

.action-evidence .benchmark-proof,
.action-evidence .micro-stats {
  grid-column: 2;
}

.action-evidence .benchmark-proof {
  grid-row: 1 / span 2;
  align-self: end;
  margin-top: 0;
}

.action-evidence .micro-stats {
  grid-row: 3 / span 2;
  align-self: end;
}

.af-figure {
  --af-blue: #4c91d0;
  --af-orange: #ef762f;
  --af-row-1: #66a7df;
  --af-row-2: #69d6ad;
  --af-row-3: #a78bdb;
  margin: 0;
  position: relative;
}

.af-scroll {
  width: 100%;
  overflow: visible;
  border-top: 1px solid #ffffff12;
  padding: clamp(22px, 3vw, 34px) 0 8px;
}

.af-scroll:focus-visible {
  outline-offset: 6px;
}

.af-canvas {
  --af-shared: 18.5%;
  --af-route: 4.5%;
  --af-label: 7.2%;
  --af-column-gap: .72%;
  --af-header: clamp(58px, 6vw, 76px);
  --af-row-gap: clamp(8px, 1vw, 14px);
  width: 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: var(--af-shared) var(--af-route) var(--af-label) repeat(4, minmax(0, 1fr));
  grid-template-rows: var(--af-header) repeat(3, auto);
  column-gap: var(--af-column-gap);
  row-gap: var(--af-row-gap);
  align-items: center;
  position: relative;
  padding: 0 .25% .5%;
  isolation: isolate;
}

.af-canvas::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 65% 22%, #4c91d00b, transparent 30%),
    linear-gradient(90deg, transparent 0, #ffffff05 48%, transparent 100%);
  pointer-events: none;
}

/* Fixed-size branch origin: stays circular even though the routing SVG stretches. */
.af-canvas::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 20.1%;
  top: calc(50% + clamp(33px, 3.5vw, 45px) - .25%);
  width: 12px;
  height: 12px;
  border: 2px solid #b4b6ff;
  border-radius: 50%;
  background: #090a0c;
  box-shadow: 0 0 7px #9496ff;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.af-time-header {
  grid-column: 1 / 8;
  grid-row: 1;
  align-self: stretch;
  display: grid;
  grid-template-columns: calc(var(--af-shared) + var(--af-route) + var(--af-label) + (2 * var(--af-column-gap))) minmax(0, 1fr);
  column-gap: var(--af-column-gap);
  align-items: end;
  min-width: 0;
}

.af-time-header h4 {
  color: var(--ink-soft);
  text-align: left;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 0 7% 4px 2%;
}

.af-time-header h4 span {
  color: #8ba1ba;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
  font-size: clamp(.72rem, .82vw, .84rem);
  font-weight: 560;
}

.af-time-header h4 strong {
  max-width: 290px;
  letter-spacing: -.025em;
  font-size: clamp(.94rem, 1.22vw, 1.2rem);
  font-weight: 540;
  line-height: 1.15;
}

.af-time-axis {
  grid-column: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  position: relative;
  height: 42px;
}

.af-time-axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 5px;
  bottom: 5px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, #7fa6d7 0 12px, transparent 12px 20px);
  opacity: .75;
  filter: drop-shadow(0 0 5px #7396bf66);
  animation: af-timeline-flow 2.4s linear infinite;
}

.af-time-axis::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid #9fc4ef;
  border-right: 1.5px solid #9fc4ef;
  transform: rotate(45deg);
}

.af-time {
  color: #aabdd6;
  border: 0;
  background: transparent;
  height: 42px;
  padding: 0 0 16px;
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
  font-size: clamp(.78rem, 1.12vw, 1rem);
  font-weight: 580;
  font-style: italic;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color .22s, text-shadow .22s, transform .22s;
}

.af-time::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #091018;
  border: 1px solid #b9d8fa;
  box-shadow: 0 0 0 3px #0b0e10, 0 0 10px #4c91d070;
}

.af-time:hover,
.af-time:focus-visible,
.af-time.is-active {
  color: #eef7ff;
  text-shadow: 0 0 16px #66a7df;
  transform: translateY(-1px);
}

.af-shared-stack {
  grid-column: 1;
  grid-row: 2 / 5;
  align-self: center;
  z-index: 7;
  display: grid;
  gap: clamp(8px, 1.1vw, 14px);
}

.af-shared-card {
  padding: 0;
  position: relative;
}

.af-source-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 7%;
  margin: 0 1% 6%;
}

.af-source-heading > span,
.af-source-heading code {
  color: #7f99b7;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
  font-size: clamp(.45rem, .56vw, .58rem);
}

.af-source-heading h4 {
  color: var(--ink-soft);
  margin: 0;
  font-size: clamp(.62rem, .8vw, .78rem);
  font-weight: 580;
}

.af-shared-card img {
  aspect-ratio: 360 / 205;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid #86a7ca80;
  border-radius: 9px;
  background: #020303;
  box-shadow: 0 14px 34px #000a, 0 0 18px #4c91d016;
}

.af-legend {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, .65vw, 8px);
  padding: 0 2%;
}

.af-legend span {
  display: grid;
  grid-template-columns: 27% 1fr;
  align-items: center;
  gap: 7%;
  color: #9eaeba;
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
  font-size: clamp(.43rem, .56vw, .58rem);
}

.af-legend i {
  display: block;
  height: 3px;
  position: relative;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.af-legend i::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: -2px;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
}

.af-legend i.is-action { color: var(--af-blue); }
.af-legend i.is-prediction { color: var(--af-orange); }

.af-condition-label {
  z-index: 6;
  align-self: center;
  justify-self: stretch;
  border: 0;
  border-left: 1.5px solid currentColor;
  color: var(--af-row-1);
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 11%, transparent), transparent 80%);
  padding: 10% 5% 10% 15%;
  cursor: pointer;
  text-align: left;
  transition: border-color .22s, text-shadow .22s, background .22s, transform .22s;
}

.af-condition-label.af-tone-2 { color: var(--af-row-2); }
.af-condition-label.af-tone-3 { color: var(--af-row-3); }

.af-condition-index,
.af-condition-name {
  display: block;
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
}

.af-condition-index {
  margin-bottom: 7%;
  font-size: clamp(.56rem, .72vw, .74rem);
  font-weight: 650;
}

.af-condition-name {
  color: #b8c1cc;
  font-size: clamp(.56rem, .72vw, .72rem);
  font-weight: 540;
  line-height: 1.35;
}

.af-condition-label:hover,
.af-condition-label:focus-visible,
.af-condition-label.is-active {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 18%, transparent), transparent 82%);
  text-shadow: 0 0 14px currentColor;
  transform: translateX(2px);
}

.af-frame {
  z-index: 3;
  align-self: center;
  width: 100%;
  aspect-ratio: var(--af-aspect);
  padding: 0;
  border: 1px solid #90a5bd38;
  border-radius: 8px;
  background: #030404;
  cursor: crosshair;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  box-shadow: 0 12px 26px #0008, 0 0 0 1px #ffffff05;
  transition: opacity .28s, transform .28s, filter .24s, border-color .24s, box-shadow .24s;
}

.af-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020303;
}

.af-frame[data-row="0"] { border-color: #66a7df70; }
.af-frame[data-row="1"] { border-color: #69d6ad70; }
.af-frame[data-row="2"] { border-color: #a78bdb70; }

.af-figure.is-entered .af-frame {
  opacity: 1;
  transform: translateY(0);
}

.af-figure.is-entered .af-frame[data-row="0"] { transition-delay: 120ms; }
.af-figure.is-entered .af-frame[data-row="1"] { transition-delay: 240ms; }
.af-figure.is-entered .af-frame[data-row="2"] { transition-delay: 360ms; }

.af-frame.is-dimmed {
  opacity: .55 !important;
  filter: saturate(.72) brightness(.72);
  transition-delay: 0ms !important;
}

.af-frame:hover,
.af-frame:focus-visible,
.af-frame.is-emphasized {
  z-index: 8;
  border-color: #d8edff;
  filter: saturate(1.08) brightness(1.05);
  box-shadow: 0 18px 38px #000c, 0 0 20px #4c91d033;
  transform: translateY(-2px);
  transition-delay: 0ms !important;
}

.af-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.af-trajectory {
  fill: none;
  stroke: var(--trajectory-color);
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 3px var(--trajectory-color));
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

.af-endpoint {
  fill: var(--trajectory-color);
  stroke: #fff;
  stroke-width: 1.4px;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--trajectory-color));
}

.af-figure.is-entered .af-trajectory {
  animation: af-draw 1.1s cubic-bezier(.22, .68, .22, 1) forwards;
  animation-delay: 520ms;
}

.af-figure.is-entered .af-endpoint {
  animation: af-endpoint-in .28s ease-out forwards;
  animation-delay: 1.42s;
}

.af-branch {
  z-index: 4;
  position: absolute;
  left: .25%;
  top: calc(var(--af-header) + var(--af-row-gap));
  width: calc(var(--af-shared) + var(--af-route) + var(--af-label) + (2 * var(--af-column-gap)));
  height: calc(100% - var(--af-header) - var(--af-row-gap) - .5%);
  overflow: visible;
  pointer-events: none;
}

.af-branch-trunk,
.af-branch-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.af-branch-trunk { stroke: #9496ff; stroke-dasharray: 5 7; }
.af-branch-path.af-tone-1,
.af-branch-path.af-tone-2,
.af-branch-path.af-tone-3 { stroke: #9496ff; color: #9496ff; }

.af-branch-head {
  fill: #9496ff;
  filter: drop-shadow(0 0 4px #9496ff88);
}

.af-branch-path {
  stroke-dasharray: 7 9;
  stroke-dashoffset: 0;
  opacity: .86;
  filter: drop-shadow(0 0 4px #9496ff66);
}

.af-figure.is-entered .af-branch-path {
  animation: af-route-flow 1.35s linear infinite;
}

.af-figure.is-entered .af-branch-path.af-tone-1 { animation-delay: 0ms; }
.af-figure.is-entered .af-branch-path.af-tone-2 { animation-delay: -450ms; }
.af-figure.is-entered .af-branch-path.af-tone-3 { animation-delay: -900ms; }

.af-loading,
.af-error {
  min-height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-family: IBM Plex Mono, SFMono-Regular, Consolas, monospace;
  font-size: .7rem;
}

.af-loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--memory);
  box-shadow: 0 0 16px var(--memory);
  animation: af-pulse 1.2s ease-in-out infinite;
}

@keyframes af-draw { to { stroke-dashoffset: 0; } }
@keyframes af-route-flow { to { stroke-dashoffset: -32; } }
@keyframes af-timeline-flow { to { background-position: 40px 0; } }
@keyframes af-endpoint-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes af-pulse { 50% { opacity: .3; transform: scale(.7); } }

@media (max-width: 920px) {
  .action-evidence .evidence-copy {
    display: block;
  }

  .action-evidence .benchmark-proof,
  .action-evidence .micro-stats {
    margin-top: 22px;
  }
}

@media (max-width: 736px) {
  .action-evidence {
    padding-inline: 18px;
  }

  .af-scroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  .af-canvas {
    min-width: 0;
  }

  .af-time-header {
    grid-template-columns: calc(var(--af-shared) + var(--af-route) + var(--af-label) + (2 * var(--af-column-gap))) minmax(0, 1fr);
  }

  .af-time::after {
    width: 6px;
    height: 6px;
  }

  .af-branch-trunk,
  .af-branch-path {
    stroke-width: 2;
  }

  .af-trajectory {
    stroke-width: 1.65px;
  }

  .af-endpoint {
    stroke-width: .75px;
  }

  .af-time-axis {
    height: 34px;
  }

  .af-time-axis::before {
    bottom: 4px;
  }

  .af-time-axis::after {
    bottom: 1px;
    width: 7px;
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .af-frame,
  .af-trajectory,
  .af-endpoint,
  .af-branch-path,
  .af-time,
  .af-condition-label {
    animation: none !important;
    transition: none !important;
  }

  .af-time-axis::before {
    animation: none !important;
  }

  .af-frame { opacity: 1; transform: none; }
  .af-trajectory { stroke-dashoffset: 0; }
  .af-endpoint { opacity: 1; }
  .af-branch-path { stroke-dashoffset: 0; }
}