/* Step trail. */

.step{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-group);
    position:relative; overflow:hidden;
    min-height:var(--size-touch); padding:var(--space-inline) var(--space-group);
    border:1.5px solid var(--color-border); border-radius:var(--radius-control);
    background:var(--color-surface-raised);
    color:var(--color-text-tertiary);
    transition:opacity var(--duration-interaction) var(--ease-newton), border-color var(--duration-interaction) var(--ease-newton), color var(--duration-interaction) var(--ease-newton), background var(--duration-interaction) var(--ease-newton);
  }

.step.active{ border-color:color-mix(in srgb, var(--color-text) 20%, transparent); color:var(--color-text); background:var(--color-surface-raised); }

.step.active::after{
    /* A soft band that slides across the tile. It moves with transform, so the
       tile is not repainted each frame, and runs at a steady pace. */
    content:''; position:absolute; top:0; bottom:0; left:0; width:60%;
    background:linear-gradient(90deg, transparent, var(--color-surface-sunken) 50%, transparent);
    transform:translateX(-100%); will-change:transform;
    animation:sweep 1600ms linear infinite;
    pointer-events:none;
  }

@keyframes sweep{ from { transform:translateX(-100%); } to { transform:translateX(270%); } }

.settled .step.active{ animation:none;  }

.step.waiting .step-note{ animation:pulse calc(var(--duration-interaction) * 5) var(--ease-newton) infinite;  }

.settled .step.waiting .step-note{ animation:none;  }

.step[data-state="clear"]{ color:var(--color-text); border-color:color-mix(in srgb, var(--tone-pass-edge) 30%, transparent); background:var(--color-surface-raised); }

.step[data-state="listed"], .step[data-state="exposed"]{ color:var(--color-text); border-color:color-mix(in srgb, var(--tone-block-edge) 30%, transparent); background:var(--color-surface-raised); }

.step[data-state="outside"]{
    color:var(--color-text); border-style:dashed;
    border-color:color-mix(in srgb, var(--tone-caution-edge) 30%, transparent);
    background:var(--color-surface-raised);
  }

.step[data-state="failed"], .step[data-state="unattested"]{ color:var(--color-text); border-color:color-mix(in srgb, var(--tone-neutral-edge) 30%, transparent); background:var(--tone-neutral-wash); }

.step.idle{ color:var(--state-disabled); opacity:1; }

.step[data-state="clear"] .step-note{ color:var(--tone-pass-text); }

.step[data-state="listed"] .step-note, .step[data-state="exposed"] .step-note{ color:var(--tone-block-text); }

.step[data-state="outside"] .step-note{ color:var(--tone-caution-text); }

.step[data-state="failed"] .step-note, .step[data-state="unattested"] .step-note{ color:var(--tone-neutral-text); }

.step-icon{
    position:relative; z-index:1; flex-shrink:0;
    width:var(--size-icon); height:var(--size-icon); border-radius:var(--radius-full);
    border:1.5px solid var(--color-border); background:var(--color-surface-raised);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--type-caption-size); font-weight:500; line-height:var(--type-title-leading);
    transition:background var(--duration-interaction) var(--ease-newton), border-color var(--duration-interaction) var(--ease-newton), color var(--duration-interaction) var(--ease-newton), transform var(--duration-interaction) var(--ease-newton);
  }

.step.active .step-icon{ border-color:var(--color-text); }

.step-glyph{ display:none; width:72%; height:72%; }

.step[data-state="clear"] .step-glyph-check,
.step[data-state="listed"] .step-glyph-warning,
.step[data-state="exposed"] .step-glyph-warning,
.step[data-state="outside"] .step-glyph-warning,
.step[data-state="failed"] .step-glyph-minus,
.step[data-state="unattested"] .step-glyph-minus{ display:block; }

.step[data-state="clear"] .step-icon{ background:var(--tone-pass-edge); border-color:var(--tone-pass-edge); color:var(--color-on-accent); }

.step[data-state="listed"] .step-icon, .step[data-state="exposed"] .step-icon{ background:var(--tone-block-edge); border-color:var(--tone-block-edge); color:var(--color-on-accent); }

.step[data-state="outside"] .step-icon{ background:var(--tone-caution-edge); border-color:var(--tone-caution-edge); color:var(--color-on-accent); }

.step[data-state="failed"] .step-icon, .step[data-state="unattested"] .step-icon{ background:var(--tone-neutral-edge); border-color:var(--tone-neutral-edge); color:var(--color-on-accent); }

.step.resolved .step-icon{ animation:pop var(--duration-interaction) var(--ease-newton);  }

@keyframes pop{ 0% { transform:scale(.4); } 100% { transform:scale(1); } }

.step-label{ flex:1; position:relative; z-index:1;  font-variant-numeric:tabular-nums;}

.step-note{
    position:relative; z-index:1;
    white-space:nowrap;
  }

@keyframes pulse{ 0%,100% { opacity:1; } 50% { opacity:.45; } }

@keyframes rise{ from { opacity:0; transform:translateY(10px); } }

@keyframes settleIn{ from { opacity:0; transform:translateY(-4px) scale(.99); } }

.steps .step{ animation:rise var(--duration-interaction) var(--ease-newton) backwards;  }

.steps .step:nth-child(1){ animation-delay:0s;  }

.steps .step:nth-child(3){ animation-delay:var(--stagger);  }

.steps .step:nth-child(5){ animation-delay:calc(var(--stagger) * 2);  }

.steps .step:nth-child(7){ animation-delay:calc(var(--stagger) * 3);  }

.trail-label{
    display:block; margin-bottom:var(--space-snug); color:var(--color-text-secondary);
  }

.card-result.settled .trail-label{ color:var(--color-text-secondary); }

.trail .steps{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; gap:var(--space-snug); width:100%; max-width:none; }

.trail .step{
    display:grid; grid-template-columns:max-content max-content; grid-template-areas:"label icon" "note note";
    column-gap:var(--space-inline); row-gap:var(--space-tight);
    align-items:center; align-content:start; justify-content:start; flex:0 0 auto; align-self:stretch; width:auto; min-width:max-content; height:auto;
    padding:var(--space-snug); border-radius:var(--radius-control);
  }

.trail .step-icon{ width:var(--size-icon-sm); height:var(--size-icon-sm); font-size:var(--type-label-size); grid-area:icon; justify-self:end; }

.trail .step-label{
    grid-area:label; white-space:nowrap; justify-self:start;
  }

.trail .step-note{
    grid-area:note; min-height:var(--type-lead-leading); text-align:left;
  }

.step.beyond{
  border-style: dashed; border-color: var(--color-border); background: transparent;
  color: var(--color-text-tertiary);
}

.step.beyond .step-note{ color: var(--color-text-tertiary); }

.step.beyond .step-icon{ border-style: dashed; background: transparent; }

.step-head{ display:flex; flex-direction:column; gap:var(--space-tight); }
.step-head .text-heading{ margin:0; }

@media (prefers-reduced-motion: reduce){ .step.active::after{ animation:none; opacity:0; } }