/* ============================================================
   ui-anima-pipeline.css — "THE SAFETY LINE"

   The guarantee, drawn as a legible assembly line: a live page
   feeds NAMED element tokens onto a conveyor; identify scores
   them; a visibly sandboxed design engine restyles them and
   sometimes coughs up something executable onto a reject lane;
   the sanitize gate strikes those out and drops them into a
   clickable quarantine tray; bind tethers survivors back to the
   original page (or parks them, permanently, in the inert lane);
   the line ends at a proud "0 wrong actions" badge.

   Type floor for this component is 14px — nothing smaller,
   anywhere, at any width. Stage/axis labels 15–16px mono, card
   and explainer body 17px, key moments 20–40px.

   Every class, including every state class, is prefixed ua-pl-.
   ============================================================ */

.ua-pipeline-stage {
    margin: var(--space-xl, 48px) auto 0;
    max-width: 1180px;
    padding-top: clamp(20px, 2.4vw, 32px);
    border-top: 1px solid var(--bb-line, rgba(26, 26, 23, 0.14));

    --ua-pl-ink: var(--color-text, #1a1a17);
    --ua-pl-mut: var(--color-muted, #6c6b61);
    --ua-pl-bg: var(--color-bg, #f5f4ef);
    --ua-pl-brd: var(--color-border, #e0ddd1);
    --ua-pl-acc: var(--accent, #d9542b);
    --ua-pl-hair: rgba(26, 26, 23, 0.14);
    --ua-pl-okd: #17803d;        /* success #22c55e, darkened for text contrast */
    --ua-pl-amb: var(--ua-inert, #a87b1c);
    --ua-danger: #a83a32;
    --ua-pl-mono: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    --ua-pl-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.ua-pipeline-caption {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--ua-pl-mono);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: var(--ua-pl-mut);
}

/* ---- shell -------------------------------------------------- */
.ua-pl-shell {
    position: relative;
    border: 1px solid var(--ua-pl-brd);
    border-radius: var(--radius-lg, 10px);
    background: var(--ua-pl-bg);
    padding: 16px 18px 18px;
    font-family: var(--ua-pl-sans);
    color: var(--ua-pl-ink);
    -webkit-font-smoothing: antialiased;
}
.ua-pl-shell.ua-pl-snap * { transition: none !important; animation: none !important; }

.ua-pl-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- header ------------------------------------------------- */
.ua-pl-hd {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 20px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.ua-pl-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ua-pl-eyebrow {
    font: 600 16px/1.2 var(--ua-pl-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ua-pl-ink);
}
.ua-pl-sub { font: 400 14px/1.4 var(--ua-pl-mono); font-style: normal; color: var(--ua-pl-mut); }

.ua-pl-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ua-pl-btn {
    font: 500 14px/1 var(--ua-pl-mono);
    padding: 10px 15px; border-radius: 999px;
    border: 1px solid var(--ua-pl-brd); background: transparent;
    color: var(--ua-pl-ink); cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.ua-pl-btn:hover { border-color: var(--ua-pl-ink); }
.ua-pl-btn[disabled] { opacity: .45; cursor: default; }
.ua-pl-sneak {
    font: 600 16px/1 var(--ua-pl-mono);
    padding: 12px 20px; border-radius: 999px;
    border: 1px solid var(--ua-pl-acc); background: var(--ua-pl-acc);
    color: #fff; cursor: pointer; letter-spacing: 0.005em;
    box-shadow: 0 1px 0 rgba(26, 26, 23, .06);
    transition: transform .16s ease, background .16s ease;
}
.ua-pl-sneak:hover { background: var(--accent-hover, #c5461f); }
.ua-pl-sneak.ua-pl-pop { animation: ua-pl-press .34s ease; }
@keyframes ua-pl-press {
    0% { transform: scale(1); } 35% { transform: scale(.955); } 100% { transform: scale(1); }
}
.ua-pl-shell :focus-visible { outline: 2px solid var(--ua-pl-acc); outline-offset: 2px; }

/* ---- the belt: one grid, aligned end to end ----------------- */
.ua-pl-belt {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 1.32fr;
    grid-template-rows: 22px auto 42px 34px auto;
    gap: 6px;
    align-items: stretch;
}
.ua-pl-wires { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.ua-pl-wlane {
    fill: none; stroke: var(--ua-pl-hair); stroke-width: 2;
    stroke-dasharray: 2 7; stroke-linecap: round;
}
.ua-pl-wlane2 {
    fill: none; stroke: rgba(168, 58, 50, .3); stroke-width: 2;
    stroke-dasharray: 2 7; stroke-linecap: round;
}
.ua-pl-wgate line { stroke: var(--ua-pl-acc); stroke-width: 2; stroke-linecap: round; }
.ua-pl-wgate .ua-pl-wtick { stroke: var(--ua-pl-acc); stroke-width: 1.4; opacity: .5; }
.ua-pl-wteth {
    fill: none; stroke: var(--ua-pl-okd); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}

/* ---- stations ----------------------------------------------- */
.ua-pl-st {
    position: relative; z-index: 2; grid-row: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    text-align: left; font-family: inherit; color: inherit;
    border: 1px solid var(--ua-pl-brd); border-radius: 10px;
    background: var(--ua-pl-bg);
    padding: 10px 12px 9px;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ua-pl-st1 { grid-column: 1; }
.ua-pl-st2 { grid-column: 2; }
.ua-pl-st3 { grid-column: 3; }
.ua-pl-st4 { grid-column: 4; }
.ua-pl-st5 { grid-column: 5; }
.ua-pl-st:hover { border-color: var(--ua-pl-ink); }
.ua-pl-st.ua-pl-st-hot { border-color: var(--ua-pl-acc); box-shadow: inset 0 0 0 1px var(--ua-pl-acc); }
.ua-pl-st.ua-pl-st-cut { border-color: var(--ua-danger); box-shadow: inset 0 0 0 1px var(--ua-danger); }
.ua-pl-st.ua-pl-sand {
    border-style: dashed; border-color: rgba(26, 26, 23, .32);
    background: #f0eee6;
}

.ua-pl-sthd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ua-pl-num { font: 500 14px/1 var(--ua-pl-mono); letter-spacing: .1em; color: var(--ua-pl-mut); }
.ua-pl-tag {
    font: 500 14px/1 var(--ua-pl-mono); color: var(--ua-pl-mut);
    border: 1px solid var(--ua-pl-hair); border-radius: 999px; padding: 4px 8px;
    white-space: nowrap;
}
.ua-pl-sand .ua-pl-tag { border-style: dashed; color: var(--ua-pl-ink); }
.ua-pl-name {
    font: 600 16px/1.15 var(--ua-pl-mono);
    letter-spacing: -.015em; color: var(--ua-pl-ink);
}
.ua-pl-note {
    font: 400 14px/1.35 var(--ua-pl-mono); font-style: normal;
    color: var(--ua-pl-mut);
}
.ua-pl-slot { display: none; }

/* 01 · live page ---------------------------------------------- */
.ua-pl-rows { display: flex; flex-direction: column; gap: 2px; }
.ua-pl-row {
    display: flex; align-items: center; gap: 7px;
    padding: 1px 5px; border-radius: 5px;
    font: 400 15px/1.35 var(--ua-pl-mono);
    color: var(--ua-pl-mut);
    transition: background .2s ease, color .2s ease;
}
.ua-pl-rg { font-style: normal; font-size: 14px; width: 14px; flex: 0 0 auto; }
.ua-pl-rn { font-weight: 400; flex: 1 1 auto; }
.ua-pl-rs { font-style: normal; font-size: 15px; flex: 0 0 auto; }
.ua-pl-row.ua-pl-row-live { color: var(--ua-pl-ink); background: var(--accent-soft, rgba(217, 84, 43, .1)); }
.ua-pl-row.ua-pl-row-bound { color: var(--ua-pl-ink); }
.ua-pl-row-bound .ua-pl-rs { color: var(--ua-pl-okd); font-weight: 700; }
.ua-pl-row.ua-pl-row-inert { color: var(--ua-pl-amb); }
.ua-pl-row-inert .ua-pl-rs { color: var(--ua-pl-amb); font-weight: 700; }

/* 02 · identify ----------------------------------------------- */
.ua-pl-idr { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ua-pl-idchip {
    font: 500 15px/1 var(--ua-pl-mono);
    padding: 5px 9px; border-radius: 999px;
    border: 1px solid var(--ua-pl-hair); color: var(--ua-pl-mut);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ua-pl-idr-hot .ua-pl-idchip { color: var(--ua-pl-ink); border-color: var(--ua-pl-ink); }
.ua-pl-idr-lo .ua-pl-idchip { color: var(--ua-pl-amb); border-color: var(--ua-pl-amb); }
.ua-pl-idnum {
    font: 600 30px/1 var(--ua-pl-mono);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    color: var(--ua-pl-mut);
    transition: color .2s ease;
}
.ua-pl-idr-hot .ua-pl-idnum { color: var(--ua-pl-ink); }
.ua-pl-idr-lo .ua-pl-idnum { color: var(--ua-pl-amb); }
.ua-pl-bar {
    position: relative; display: block; width: 100%; height: 7px;
    border-radius: 999px; background: rgba(26, 26, 23, .09); overflow: hidden;
}
.ua-pl-barfill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: var(--ua-pl-ink); border-radius: 999px;
}
.ua-pl-idr-lo .ua-pl-barfill { background: var(--ua-pl-amb); }
.ua-pl-barnotch {
    position: absolute; left: 80%; top: -2px; bottom: -2px; width: 2px;
    background: var(--ua-pl-acc);
}

/* 03 · design engine ------------------------------------------ */
.ua-pl-sbadge {
    align-self: flex-start;
    font: 500 14px/1 var(--ua-pl-mono);
    padding: 5px 9px; border-radius: 999px;
    border: 1px dashed var(--ua-pl-acc); color: var(--ua-pl-acc);
    white-space: nowrap;
}
.ua-pl-emit { display: flex; flex-direction: column; gap: 2px; }
.ua-pl-em {
    font: 400 14px/1.45 var(--ua-pl-mono); font-style: normal;
    color: var(--ua-pl-mut); opacity: .45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .25s ease, color .25s ease;
}
.ua-pl-em.ua-pl-em-on { opacity: 1; color: var(--ua-pl-ink); }
.ua-pl-emx {
    font: 600 14px/1.35 var(--ua-pl-mono);
    color: var(--ua-danger); opacity: 0;
    border-top: 1px dashed rgba(168, 58, 50, .4); padding-top: 5px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .2s ease;
}
.ua-pl-emx.ua-pl-emx-on { opacity: 1; }

/* 04 / 05 · big station numbers ------------------------------- */
.ua-pl-big {
    font: 600 34px/1 var(--ua-pl-mono);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    color: var(--ua-pl-ink);
}
.ua-pl-biglab {
    font: 500 15px/1 var(--ua-pl-mono);
    letter-spacing: .02em; color: var(--ua-pl-mut); margin-top: -3px;
}
.ua-pl-st4 .ua-pl-big { color: var(--ua-danger); }
.ua-pl-tgt {
    font: 500 15px/1.3 var(--ua-pl-mono);
    color: var(--ua-pl-mut);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ua-pl-tgt.ua-pl-tgt-ok { color: var(--ua-pl-okd); }
.ua-pl-tgt.ua-pl-tgt-inert { color: var(--ua-pl-amb); }
.ua-pl-big.ua-pl-pop { animation: ua-pl-bump .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ua-pl-bump {
    0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-3px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

/* ---- conveyor + reject lanes -------------------------------- */
.ua-pl-lane {
    grid-row: 3; grid-column: 1 / 6; z-index: 1;
    border-radius: 8px; background: rgba(26, 26, 23, .028);
}
.ua-pl-lane2 {
    grid-row: 4; grid-column: 1 / 6; z-index: 1;
    border-radius: 8px; background: rgba(168, 58, 50, .045);
    display: flex; align-items: center; padding-left: 12px;
}
.ua-pl-lane2l {
    font: 500 14px/1 var(--ua-pl-mono); font-style: normal;
    color: var(--ua-danger); opacity: .8; letter-spacing: .02em;
}

/* ---- readout strip (narrates every beat, 17px) -------------- */
.ua-pl-read {
    grid-row: 5; grid-column: 1 / 4; z-index: 2;
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--ua-pl-brd); border-radius: 10px;
    background: var(--ua-pl-bg); padding: 11px 14px;
}
.ua-pl-rk {
    font: 600 15px/1 var(--ua-pl-mono);
    letter-spacing: .06em; text-transform: uppercase; color: var(--ua-pl-acc);
}
.ua-pl-rk.ua-pl-rk-you { color: var(--ua-danger); }
.ua-pl-rt {
    margin: 0; min-height: 56px;
    font: 400 17px/1.5 var(--ua-pl-sans);
    color: var(--ua-pl-ink);
}

/* ---- quarantine tray (clickable) ---------------------------- */
.ua-pl-tray {
    grid-row: 5; grid-column: 4; z-index: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    text-align: left; font-family: inherit; color: inherit; cursor: pointer;
    border: 1px solid var(--ua-pl-brd); border-radius: 10px;
    background: var(--ua-pl-bg); padding: 11px 12px;
    -webkit-appearance: none; appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ua-pl-tray:hover { border-color: var(--ua-danger); }
.ua-pl-tray.ua-pl-tray-on { border-color: rgba(168, 58, 50, .55); }
.ua-pl-trayhd { display: flex; align-items: center; gap: 10px; }
.ua-pl-trayn { color: var(--ua-danger); }
.ua-pl-traylab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-pl-traylab { font: 600 15px/1.15 var(--ua-pl-mono); color: var(--ua-pl-ink); }
.ua-pl-traylab i {
    font: 400 14px/1.25 var(--ua-pl-mono); font-style: normal; color: var(--ua-pl-mut);
}
.ua-pl-traylast {
    font: 400 14px/1.35 var(--ua-pl-mono); color: var(--ua-pl-mut);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ua-pl-traylast s { color: var(--ua-danger); }
.ua-pl-trayhint {
    margin-top: auto; white-space: nowrap;
    font: 500 14px/1 var(--ua-pl-mono); color: var(--ua-pl-acc);
}
.ua-pl-trayhint::after { content: " →"; }

/* ---- inert lane --------------------------------------------- */
.ua-pl-inert {
    grid-row: 5; grid-column: 5; z-index: 2;
    display: flex; flex-direction: column; gap: 7px;
    border: 1px dashed var(--ua-pl-brd); border-radius: 10px;
    background: var(--ua-pl-bg); padding: 11px 12px;
    transition: border-color .2s ease;
}
.ua-pl-inert.ua-pl-inert-on { border-color: var(--ua-pl-amb); }
.ua-pl-inhd {
    font: 600 15px/1 var(--ua-pl-mono);
    letter-spacing: .02em; color: var(--ua-pl-amb);
}
.ua-pl-inslots { display: flex; flex-direction: column; gap: 5px; }
.ua-pl-inchip {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-style: normal; opacity: 0;
    border: 1px solid var(--ua-pl-amb); border-radius: 7px;
    padding: 5px 8px; background: rgba(168, 123, 28, .08);
}
.ua-pl-inchip b { font: 600 15px/1.2 var(--ua-pl-mono); color: var(--ua-pl-ink); }
.ua-pl-inchip em { font: 500 14px/1.2 var(--ua-pl-mono); font-style: normal; color: var(--ua-pl-amb); }
.ua-pl-innote {
    margin-top: auto;
    font: 400 14px/1.35 var(--ua-pl-mono); color: var(--ua-pl-mut);
}

/* ---- the verdict -------------------------------------------- */
.ua-pl-vd {
    grid-row: 2 / 6; grid-column: 6; z-index: 2;
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--ua-pl-brd); border-radius: 10px;
    background: var(--ua-pl-bg); padding: 14px 15px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.ua-pl-vd.ua-pl-vd-on {
    border-color: var(--ua-pl-acc);
    box-shadow: inset 0 0 0 1px var(--ua-pl-acc), 0 10px 30px -18px rgba(217, 84, 43, .5);
}
.ua-pl-vdk {
    font: 500 14px/1 var(--ua-pl-mono);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ua-pl-mut);
}
.ua-pl-vdbadge { display: flex; flex-direction: column; gap: 1px; }
.ua-pl-vdzero {
    font: 700 52px/.95 var(--ua-pl-mono);
    letter-spacing: -.05em; color: var(--ua-pl-mut);
    transition: color .35s ease;
}
.ua-pl-vd-on .ua-pl-vdzero { color: var(--ua-pl-acc); }
.ua-pl-vdwords {
    font: 600 21px/1.1 var(--ua-pl-sans); font-style: normal;
    letter-spacing: -.01em; color: var(--ua-pl-ink);
}
.ua-pl-tally {
    display: flex; flex-direction: column; gap: 3px;
    border-top: 1px solid var(--ua-pl-hair); border-bottom: 1px solid var(--ua-pl-hair);
    padding: 9px 0;
}
.ua-pl-tr {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-style: normal;
}
.ua-pl-tr span { font: 400 16px/1.4 var(--ua-pl-mono); color: var(--ua-pl-mut); }
.ua-pl-tr b {
    font: 600 18px/1.4 var(--ua-pl-mono); font-variant-numeric: tabular-nums;
    color: var(--ua-pl-ink);
}
.ua-pl-tr-z span, .ua-pl-tr-z b { color: var(--ua-pl-acc); }
.ua-pl-tr-z b { font-size: 22px; font-weight: 700; }
.ua-pl-invs { display: flex; flex-direction: column; gap: 5px; }
.ua-pl-inv {
    display: flex; align-items: center; gap: 8px; font-style: normal;
    font: 400 15px/1.35 var(--ua-pl-mono);
    color: var(--ua-pl-mut); opacity: .5;
    transition: opacity .25s ease, color .25s ease;
}
.ua-pl-inv em {
    font-style: normal; font-weight: 700; color: var(--ua-pl-brd);
    transition: color .25s ease;
}
.ua-pl-inv.ua-pl-inv-on { opacity: 1; color: var(--ua-pl-ink); }
.ua-pl-inv-on em { color: var(--ua-pl-okd); }
.ua-pl-vdfoot {
    margin-top: auto;
    font: 400 15px/1.4 var(--ua-pl-mono); color: var(--ua-pl-mut);
}

/* ---- tokens ------------------------------------------------- */
.ua-pl-toks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ua-pl-tok {
    position: absolute; left: 0; top: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--ua-pl-ink); background: var(--ua-pl-bg);
    box-shadow: 0 2px 8px -4px rgba(26, 26, 23, .35);
    white-space: nowrap; pointer-events: auto; cursor: default;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.ua-pl-tkg { font-style: normal; font-size: 14px; line-height: 1; color: var(--ua-pl-mut); }
.ua-pl-tkn { font: 600 15px/1.2 var(--ua-pl-mono); color: var(--ua-pl-ink); }
.ua-pl-tkc {
    font: 400 14px/1.2 var(--ua-pl-mono); font-style: normal;
    color: var(--ua-pl-mut); font-variant-numeric: tabular-nums;
}
.ua-pl-tok.ua-pl-tok-styled {
    border-color: var(--ua-pl-acc);
    background: #f2e4db;
}
.ua-pl-tok.ua-pl-tok-bound { border-color: var(--ua-pl-okd); background: #dceedd; }
.ua-pl-tok-bound .ua-pl-tkc { color: var(--ua-pl-okd); font-weight: 600; }
.ua-pl-tok.ua-pl-tok-inert {
    border-color: var(--ua-pl-amb); background: #ebe5d5;
    border-style: dashed;
}
.ua-pl-tok-inert .ua-pl-tkn, .ua-pl-tok-inert .ua-pl-tkc { color: var(--ua-pl-amb); font-weight: 600; }

.ua-pl-tokx { border-color: var(--ua-danger); border-style: dashed; background: #efe5df; }
.ua-pl-tokx .ua-pl-tkn { color: var(--ua-danger); }
.ua-pl-tokx .ua-pl-tkc { color: var(--ua-danger); opacity: .85; }
.ua-pl-tok.ua-pl-tok-struck { border-style: solid; background: #e8d6d0; }
.ua-pl-tok-struck .ua-pl-tkn { text-decoration: line-through; text-decoration-thickness: 2px; }
.ua-pl-tok.ua-pl-tok-you { box-shadow: 0 0 0 3px rgba(168, 58, 50, .18); }
.ua-pl-tok-you .ua-pl-tkc { font-weight: 600; }

/* ---- hover tooltip ------------------------------------------ */
.ua-pl-tip {
    position: absolute; left: 0; top: 0; z-index: 7;
    max-width: 300px; padding: 10px 13px;
    border: 1px solid var(--ua-pl-ink); border-radius: 9px;
    background: var(--ua-pl-bg);
    box-shadow: 0 12px 30px -18px rgba(26, 26, 23, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.ua-pl-tip.ua-pl-tip-on { opacity: 1; }
.ua-pl-tiph { display: block; font: 600 16px/1.25 var(--ua-pl-mono); color: var(--ua-pl-ink); }
.ua-pl-tipb {
    display: block; margin-top: 4px; font-style: normal;
    font: 400 15px/1.4 var(--ua-pl-sans); color: var(--ua-pl-mut);
}
.ua-pl-tipb b { color: var(--ua-pl-ink); font-family: var(--ua-pl-mono); font-weight: 600; }
.ua-pl-tipar {
    position: absolute; bottom: -5px; width: 8px; height: 8px;
    margin-left: -4px; background: var(--ua-pl-bg);
    border-right: 1px solid var(--ua-pl-ink); border-bottom: 1px solid var(--ua-pl-ink);
    transform: rotate(45deg);
}

/* ---- explainer sheet ---------------------------------------- */
.ua-pl-veiled > *:not(.ua-pl-sheet) { visibility: hidden; }
.ua-pl-sheet {
    position: absolute; inset: 0; z-index: 8;
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--ua-pl-ink); border-radius: 10px;
    background: var(--ua-pl-bg);
    padding: 20px 24px;
    overflow: auto;
}
.ua-pl-sheet[hidden] { display: none; }
.ua-pl-shhd {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ua-pl-x {
    flex: 0 0 auto;
    font: 500 14px/1 var(--ua-pl-mono);
    padding: 9px 13px; border-radius: 999px;
    border: 1px solid var(--ua-pl-brd); background: var(--ua-pl-bg);
    color: var(--ua-pl-ink); cursor: pointer;
}
.ua-pl-x:hover { border-color: var(--ua-pl-ink); }
.ua-pl-shk {
    margin: 0; flex: 0 1 auto;
    font: 600 15px/1 var(--ua-pl-mono);
    letter-spacing: .06em; text-transform: uppercase; color: var(--ua-pl-acc);
}
.ua-pl-shh {
    margin: 0; max-width: 32ch;
    font: 600 27px/1.2 var(--ua-pl-sans);
    letter-spacing: -.02em; color: var(--ua-pl-ink);
}
.ua-pl-shb {
    margin: 0; max-width: 68ch;
    font: 400 17px/1.55 var(--ua-pl-sans); color: var(--ua-pl-ink);
}
.ua-pl-shl {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.ua-pl-shl li {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--ua-pl-brd); border-radius: 8px;
    padding: 8px 12px;
}
.ua-pl-shl s { font: 600 17px/1.3 var(--ua-pl-mono); color: var(--ua-danger); }
.ua-pl-shl em { font: 400 17px/1.3 var(--ua-pl-mono); font-style: normal; color: var(--ua-pl-ink); }
.ua-pl-shf {
    margin: auto 0 0; max-width: 74ch;
    padding-top: 14px; border-top: 1px solid var(--ua-pl-hair);
    font: 400 17px/1.5 var(--ua-pl-sans); color: var(--ua-pl-mut);
}
.ua-pl-shl .ua-pl-yours {
    font: 600 14px/1 var(--ua-pl-mono); font-style: normal;
    color: #fff; background: var(--ua-danger);
    border-radius: 999px; padding: 5px 9px;
}

/* ---- loop seam ---------------------------------------------- */
.ua-pl-veil {
    position: absolute; inset: -1px; z-index: 6;
    background: var(--ua-pl-bg); opacity: 0; pointer-events: none;
}

/* ============================================================
   NARROW — the line stacks. Every size above is kept; only the
   arrangement changes, and each station grows an empty dock slot
   so travelling tokens never sit on top of type. The lanes are
   dropped; the JS measures the slots instead and the conveyor
   runs station to station down the page.
   ============================================================ */
@media (max-width: 900px) {
    .ua-pl-belt {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 10px;
    }
    .ua-pl-st, .ua-pl-read, .ua-pl-tray, .ua-pl-inert, .ua-pl-vd {
        grid-row: auto; grid-column: auto; width: auto;
    }
    .ua-pl-st1, .ua-pl-read, .ua-pl-vd { grid-column: span 2; }
    .ua-pl-lane, .ua-pl-lane2 { display: none; }
    .ua-pl-slot {
        display: block; height: 68px; margin-top: 3px;
        border-radius: 8px; background: rgba(26, 26, 23, .03);
        border: 1px dashed var(--ua-pl-hair);
    }
    .ua-pl-rt { min-height: 56px; }
    .ua-pl-st1 .ua-pl-rows { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
    .ua-pl-st1 .ua-pl-row { flex: 0 0 auto; }
    .ua-pl-st1 .ua-pl-rn { flex: 0 0 auto; }

    /* the verdict lies down when it is no longer the end of a horizontal line */
    .ua-pl-vd { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 26px; }
    .ua-pl-vdk { flex: 0 0 100%; }
    .ua-pl-vdbadge { flex: 0 0 auto; }
    .ua-pl-tally {
        flex: 1 1 190px; border-top: 0; border-bottom: 0;
        border-left: 1px solid var(--ua-pl-hair); padding: 0 0 0 20px;
    }
    .ua-pl-invs { flex: 1 1 190px; }
    .ua-pl-vdfoot { flex: 0 0 100%; margin-top: 0; }

    .ua-pl-shell { padding: 14px 14px 16px; }
    .ua-pl-hd { margin-bottom: 12px; }
}
@media (max-width: 620px) {
    .ua-pl-belt { grid-template-columns: 1fr; }
    .ua-pl-st1, .ua-pl-read, .ua-pl-vd { grid-column: auto; }
    .ua-pl-rt { min-height: 82px; }
    .ua-pl-eyebrow { font-size: 15px; }
    .ua-pl-sneak { font-size: 15px; padding: 11px 14px; white-space: normal; text-align: left; }
    .ua-pl-ctl { width: 100%; }
    .ua-pl-sheet { padding: 16px 16px 18px; }
    .ua-pl-shhd { flex-wrap: wrap; gap: 10px; }
    .ua-pl-shh { font-size: 21px; }
    .ua-pl-vdzero { font-size: 44px; }
    .ua-pl-tally { flex-basis: 100%; border-left: 0; padding: 0; }
    .ua-pl-invs { flex-basis: 100%; }
    .ua-pipeline-caption { font-size: 14px; }
}

/* ============================================================
   REDUCED MOTION — the finished line, held still.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ua-pl-shell * { transition: none !important; animation: none !important; }
    .ua-pl-veil { display: none; }
}