/* ==========================================================================
   STEP FLOW
   A "how it works" diagram for help panels: numbered steps in a vertical
   column, joined by a connector line, each able to carry a small sample
   panel showing the thing that step operates on. Narrow enough for a
   sidebar card.
   ========================================================================== */

.step-flow {
    /* Marker diameter: the rail's x, the marker's box and the title's line
       height are all derived from it. */
    --step-marker: 1.6rem;
    /* The colour the marker's ring paints: the surface the flow sits on. Set
       it on any ancestor when that is not a card or panel. */
    --step-surface: var(--bg-surface);
    display: flex;
    flex-direction: column;
}

.step-flow-item {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.1rem;
}

.step-flow-item:last-child {
    padding-bottom: 0;
}

/* Rail. One unbroken thread from each marker's centre into the next one's, so
   the flow reads as continuous rather than as segments with gaps at every
   step. `--step-marker` keeps the thread, the marker and the text column tied
   to a single number. */
.step-flow-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--step-marker) / 2 - 1px);
    top: calc(var(--step-marker) / 2);
    bottom: calc(var(--step-marker) / -2);
    width: 2px;
    border-radius: 1px;
    background: var(--border-normal);
}

/* Marker. Chrome, not content: the badges inside the step panels are the only
   coloured things here, so an accent on the numbers would compete with the
   meaning they carry. Opaque fill plus a ring in the panel's own colour, so
   the rail passes behind the marker and is punched out around it rather than
   showing through a translucent tint. */
.step-flow-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 var(--step-marker);
    width: var(--step-marker);
    height: var(--step-marker);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    background: var(--bg-raise);
    border: 1px solid var(--border-emphasis);
    box-shadow: 0 0 0 3px var(--step-surface);
}

.step-flow-body {
    min-width: 0;
    flex: 1;
}

.step-flow-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: var(--step-marker);
}

/* Sample panel: an inset well holding the artefact of the step — a
   transcript line, a tag description, the resulting chips. */
.step-flow-panel {
    min-width: 0;
    overflow-wrap: break-word;
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.step-flow-quote {
    font-style: italic;
}

.step-flow-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

/* Key/value rows: fields a step pulled out of the artefact above it. */
.step-flow-field {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0 0.5rem;
    margin-top: 0.25rem;
}

.step-flow-field-key {
    color: var(--text-muted);
}

/* A badge is a grid item here, so it would stretch the whole value column. */
.step-flow-field .badge {
    justify-self: start;
}

/* Footnote under a panel's fields: the caveat that qualifies them. */
.step-flow-note {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

/* Chip row for the final step's applied tags. */
.step-flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* A badge in a diagram panel is a label, not a table cell: it wraps rather
   than widening the column past its share. */
.step-flow-panel .badge {
    white-space: normal;
    text-align: left;
}

/* One candidate description, prefixed by the verdict icon. */
.step-flow-desc {
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem 0 0.35rem;
    border-top: 1px solid var(--border-subtle);
}

.step-flow-desc:first-of-type {
    border-top: 0;
    padding-top: 0.1rem;
}

/* Name on its own line, description beneath it: the chip is the label for the
   sentence under it, so they must not run together as one paragraph. */
.step-flow-desc-text {
    display: block;
    margin-top: 0.2rem;
}

.step-flow-verdict {
    flex: 0 0 auto;
    margin-top: 0.28rem;
    font-size: 0.75rem;
    color: var(--color-green);
}

/* A row that reports something sent rather than a match verdict: the icon is
   plumbing, so it stays neutral and lets the badge carry the colour. */
.step-flow-desc.is-sent .step-flow-verdict {
    color: var(--text-muted);
}

/* The description the call did not match: same row, drained of emphasis. The
   cross itself stays at full strength — dimming the verdict makes it unreadable
   at this size, and the verdict is the whole point of the row. */
.step-flow-desc.is-miss {
    color: var(--text-muted);
}

.step-flow-desc.is-miss .badge {
    opacity: 0.6;
}

.step-flow-desc.is-miss .step-flow-verdict {
    color: var(--text-tertiary);
}

/* Tail row: the descriptions not shown, still being weighed. */
.step-flow-rest {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.73rem;
    color: var(--text-muted);
}

.step-flow-dots {
    display: inline-flex;
    gap: 0.2rem;
}

.step-flow-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-blue);
    animation: step-flow-think 1.4s ease-in-out infinite;
}

.step-flow-dots i:nth-child(2) {
    animation-delay: 0.2s;
}

.step-flow-dots i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes step-flow-think {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .step-flow-dots i {
        animation: none;
        opacity: 0.6;
    }
}


/* ==========================================================================
   PROSE
   Additions for flows whose steps carry a paragraph of process prose above
   the sample panel.
   ========================================================================== */

.step-flow-text {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-tertiary);
}

/* Badges quoted inside the prose sit on the text's own baseline rhythm
   rather than inflating the line box. */
.step-flow-text .badge {
    vertical-align: baseline;
}

/* ==========================================================================
   SETUP STRIP
   The real configuration behind the diagram, listed under it: what feeds the
   pipeline, and which actions run in order. Sits inside the same explainer
   panel, so it shares the step flow's type scale.
   ========================================================================== */

.step-flow-setup {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}

.pipeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.pipeline + .pipeline {
    margin-top: 0.5rem;
}

.pipeline-source {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.pipeline-source i {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.pipeline-arrow {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.pipeline-action {
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    border: 1px dashed var(--border-normal);
    color: var(--text-muted);
}

/* The action this page exists to explain — the rest of the pipeline is
   context, so only this one carries colour. */
.pipeline-action.is-key {
    border-style: solid;
    border-color: rgba(var(--color-blue-rgb), 0.35);
    background: rgba(var(--color-blue-rgb), 0.1);
    color: var(--color-blue);
}